/* ================================
   ContaPyme Pricing Cards – CSS COMPLETO - SIN CAMBIOS VISUALES
   ================================ */

/* ---------- Contenedor y encabezado ---------- */
.pricing-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 60px 32px 0 !important;
    background: #D5E9FF !important;
    overflow-x: hidden !important;
}
@media (min-width: 1281px){
    .pricing-container{ padding-inline: 40px !important; }
}
@media (max-width: 480px){
    .pricing-container{ padding: 40px 16px 0 !important; }
}

.pricing-header-section {
    text-align: center !important;
    margin-bottom: 60px !important;
}
.pricing-header-section h2 {
    font-size: 2.8rem !important;
    color: #1a202c !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
}
.pricing-header-section > label {
    font-size: 1.4rem !important;
    color: #718096 !important;
    display: block !important;
    margin-bottom: 50px !important;
}

/* ---------- Controles (switches/segmentación) - ORIGINAL ---------- */
.pricing-controls {
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
    margin-bottom: 60px !important;
    flex-wrap: wrap !important;
}
.pricing-toggle-group {
    display: flex !important;
    background: #fff !important;
    border-radius: 30px !important;
    padding: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
.pricing-toggle-btn,
.pricing-btnSwitch,
.pricing-btnSwitchSelected,
.pricing-txtMetodoPago,
.pricing-txtMetodoPagoSelected {
    padding: 15px 30px !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.2s !important;
    background: transparent !important;
    color: #718096 !important;
}
.pricing-toggle-btn.active,
.pricing-btnSwitchSelected,
.pricing-txtMetodoPagoSelected {
    background: #00AAF8 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(66,153,225,0.3) !important;
}

/* ---------- Grid INTELIGENTE con Auto-Organización ---------- */
.pricing-cards-grid {
    display: grid !important;
    gap: 20px !important;
    padding: 20px 0 30px 0 !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: stretch !important;
    overflow: visible !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 300px)) !important;
    max-width: 100% !important;
}

/* ===== CONTROL DE VISIBILIDAD - SOLO LA VISTA ACTIVA SE MUESTRA ===== */
#vistaEmpresario.pricing-cards-grid.hidden,
#vistaContador.pricing-cards-grid.hidden {
    display: none !important;
}

/* ===== EMPRESARIO: 5 cards - 3 arriba, 2 abajo centradas ===== */
#vistaEmpresario.pricing-cards-grid:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 300px)) !important;
    gap: 25px !important;
    justify-content: center !important;
}

/* EMPRESARIO: 5 en una fila - pantallas muy grandes */
@media (min-width: 1600px) {
    #vistaEmpresario.pricing-cards-grid:not(.hidden) {
        grid-template-columns: repeat(5, 300px) !important;
        gap: 30px !important;
        justify-content: center !important;
    }
}

/* EMPRESARIO: 3 arriba, 2 centradas abajo - MÁS JUNTAS */
@media (max-width: 1599px) and (min-width: 1000px) {
    #vistaEmpresario.pricing-cards-grid:not(.hidden) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 25px !important;
        max-width: 950px !important;
        margin: 0 auto !important;
        row-gap: 25px !important;
        column-gap: 25px !important;
    }
    
    #vistaEmpresario.pricing-cards-grid:not(.hidden) .pricing-plan-card {
        flex: 0 0 300px !important;
    }
    
    /* SOLO las cards 4 y 5 (las dos de abajo) más juntas */
    #vistaEmpresario.pricing-cards-grid:not(.hidden) .pricing-plan-card:nth-child(4) {
        margin-right: -10px !important;
    }
    
    #vistaEmpresario.pricing-cards-grid:not(.hidden) .pricing-plan-card:nth-child(5) {
        margin-left: -10px !important;
    }
}

/* EMPRESARIO: 1 columna en pantallas pequeñas */
@media (max-width: 999px) and (min-width: 600px) {
    #vistaEmpresario.pricing-cards-grid:not(.hidden) {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 599px) {
    #vistaEmpresario.pricing-cards-grid:not(.hidden) {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

/* ===== CONTADOR: 4 cards en fila ===== */
#vistaContador.pricing-cards-grid:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 300px)) !important;
    gap: 25px !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    justify-content: center !important;
}

/* CONTADOR: 4 en una fila - pantallas muy grandes */
@media (min-width: 1400px) {
    #vistaContador.pricing-cards-grid:not(.hidden) {
        grid-template-columns: repeat(4, 300px) !important;
        gap: 30px !important;
        max-width: 1290px !important;
    }
}

/* CONTADOR: 4 en una fila - pantallas grandes */
@media (max-width: 1399px) and (min-width: 1200px) {
    #vistaContador.pricing-cards-grid:not(.hidden) {
        grid-template-columns: repeat(4, 280px) !important;
        gap: 25px !important;
        max-width: 1195px !important;
    }
}

/* CONTADOR: 2x2 en pantallas medianas - FORZADO */
@media (max-width: 1199px) and (min-width: 900px) {
    #vistaContador.pricing-cards-grid:not(.hidden) {
        display: grid !important;
        grid-template-columns: repeat(2, 280px) !important;
        grid-template-rows: repeat(2, auto) !important;
        gap: 25px 25px !important;
        max-width: 590px !important; /* 2*280 + gap */
        margin: 0 auto !important;
        justify-content: center !important;
        justify-items: center !important;
    }
}

/* CONTADOR: 2 en una fila */
@media (max-width: 899px) and (min-width: 640px) {
    #vistaContador.pricing-cards-grid:not(.hidden) {
        grid-template-columns: repeat(2, 300px) !important;
        gap: 20px !important;
        max-width: 620px !important;
        justify-content: center !important;
    }
}

/* CONTADOR: 1 columna - móvil */
@media (max-width: 639px) {
    #vistaContador.pricing-cards-grid:not(.hidden) {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
}

/* ---------- Card base CON DIMENSIONES OPTIMIZADAS ---------- */
.pricing-plan-card {
    --accent: #00AAF8;

    background: #fff !important;
    border-radius: 15px !important;
    padding: 30px 25px !important;
    box-shadow: 0 6px 25px rgba(0,0,0,0.08) !important;
    border: 2px solid #e2e8f0 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    min-height: 520px !important;
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 300px !important;
    min-width: 280px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.pricing-plan-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
}

.pricing-plan-card[class*="comercial-"],
.pricing-plan-card[class*="empresarial-"],
.pricing-plan-card[class*="contable-"] {
    border-left: 6px solid var(--accent) !important;
}

/* ---------- Header de la card ---------- */
.pricing-card-header { text-align: center !important; }

.pricing-plan-card .pricing-plan-badge {
    display: inline-block !important;
    background: var(--accent) !important;
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: 15px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--accent) !important;
}

.pricing-recommended {
    border: 3px solid var(--accent) !important;
    transform: scale(1.03) !important;
    position: relative !important;
}

.pricing-recommended-star {
    position: absolute !important;
    top: -20px !important;
    right: 130px !important;
    z-index: 10 !important;
}

/* Ajustes responsivos para la estrella */
@media (max-width: 1200px) {
    .pricing-recommended-star {
        right: 160px !important;
    }
}

@media (max-width: 900px) {
    .pricing-recommended-star {
        right: 2000px !important;
    }
}

@media (max-width: 768px) {
    .pricing-recommended-star {
        right: -30px !important;
    }
}

@media (max-width: 600px) {
    .pricing-recommended-star {
        right: 40px !important;
    }
}

@media (max-width: 480px) {
    .pricing-recommended-star {
        right: 160px !important;
    }
}

.pricing-recommended-star img {
    width: 32px !important;
    height: 32px !important;
}

.pricing-plan-desc {
    font-size: 14px !important;
    color: #718096 !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    max-width: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pricing-plan-title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

/* ---------- Precio ---------- */
.pricing-price-section {
    text-align: center !important;
    margin-bottom: 25px !important;
}
.pricing-price-display {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}
.pricing-amount {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    color: #1a202c !important;
}
.pricing-period {
    font-size: 1rem !important;
    color: #718096 !important;
    margin-left: 6px !important;
}
.pricing-note {
    font-size: 14px !important;
    color: #718096 !important;
}

/* ---------- Features ---------- */
.pricing-features {
    margin-bottom: 25px !important;
    flex: 1 !important;
}
.pricing-features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.pricing-feature-item {
    display: flex !important;
    align-items: flex-start !important;
    padding: 8px 0 !important;
    font-size: 18px !important;
}
.pricing-feature-icon {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}
.pricing-plan-card .pricing-feature-included {
    background: transparent !important;
    border: 2px solid var(--accent) !important;
    color: var(--accent) !important;
    border-radius: 50% !important;
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; box-sizing: border-box;
    font-size: 13px !important;
}
.pricing-plan-card .pricing-feature-included i,
.pricing-plan-card .pricing-feature-included .fa,
.pricing-plan-card .pricing-feature-included svg {
    color: var(--accent) !important;
    fill: var(--accent) !important;
    stroke: var(--accent) !important;
}
.pricing-feature-not-included {
    background: #e2e8f0 !important;
    color: #a0aec0 !important;
    font-size: 10px !important;
}
.pricing-feature-text {
    color: #4a5568 !important;
    line-height: 1.4 !important;
    font-size: 15px !important;
}

/* ---------- CTA ---------- */
.pricing-cta-section { text-align: center !important; margin-top: auto !important; }
.pricing-cta-button {
    width: 100% !important;
    padding: 16px 24px !important;
    border: 2px solid var(--accent) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--accent) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.pricing-cta-button:hover {
    background: var(--accent) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.pricing-recommended .pricing-cta-button {
    background: var(--accent) !important; color: #fff !important;
}
.pricing-recommended .pricing-cta-button:hover { filter: brightness(0.92) !important; }
.pricing-annual-note {
    margin-top: 15px !important;
    font-size: 10px !important;
    color: #718096 !important;
    font-style: italic !important;
}

/* ---------- Mapeo de colores por tipo de plan ---------- */
.comercial-estandar  { --accent: #F57B10; }
.comercial-plus      { --accent: #ED6D12; }
.comercial-premium   { --accent: #D26111; }
.empresarial-plus    { --accent: #5433A5; }
.empresarial-premium { --accent: #38258F; }
.contable-basico     { --accent: #7CD6FF; }
.contable-estandar   { --accent: #50C8FF; }
.contable-plus       { --accent: #25BAFF; }
.contable-premium    { --accent: #008ECF; }

/* ---------- Footer informativo ---------- */
.pricing-footer-info {
    background: #1a202c !important; color: #fff !important;
    text-align: center !important; padding: 40px !important;
    border-radius: 15px !important; margin-top: 60px !important;
}
.pricing-footer-info b {
    margin-bottom: 10px !important; color: #4299e1 !important; font-size: 1.2rem !important;
}
.pricing-footer-info p { color: #a0aec0 !important; margin: 0 !important; font-size: 1rem !important; }

.footer-info {
    background: #1a202c !important; color: #fff !important;
    text-align: center !important; padding: 32px !important;
    border-radius: 0 !important; margin-top: 0px !important;
}
.footer-info h4, .footer-info b {
    margin-bottom: 8px !important; color: #4299e1 !important; font-size: 20px !important;
}
.footer-info p { color: #a0aec0 !important; margin: 0 !important; font-size: 13px !important; }

/* ---------- Utilidades ---------- */
.hidden { display: none !important; }

/* ---------- Ajustes tipográficos responsivos ---------- */
@media (max-width: 768px) {
    .pricing-header-section h2 { font-size: 2.2rem !important; }
    .pricing-amount { font-size: 2.2rem !important; }
    .pricing-recommended { transform: none !important; }
}

@media (max-width: 480px) {
    .pricing-plan-card { 
        padding: 30px 20px !important; 
        min-width: 250px !important;
        max-width: 100% !important;
    }
    .pricing-header-section h2 { font-size: 1.9rem !important; }
}

/* ---------- H3 RESPONSIVE ---------- */
h3 {
    font-size: 25px !important;
    line-height: 1.4 !important;
    margin-bottom: 40px !important;
}

@media (max-width: 1280px) {
    h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        margin-bottom: 35px !important;
    }
}

@media (max-width: 1000px) {
    h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 30px !important;
    }
}

@media (max-width: 768px) {
    h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 25px !important;
    }
}

@media (max-width: 480px) {
    h3 {
        font-size: 16px !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }
}

/* ---------- OPTIMIZACIÓN PANTALLAS ANCHAS ---------- */
@media (min-width: 1920px) {
    #vistaEmpresario.pricing-cards-grid {
        gap: 40px !important;
    }
    
    #vistaContador.pricing-cards-grid {
        grid-template-columns: repeat(4, 300px) !important;
        gap: 50px !important;
        max-width: 1350px !important;
    }
}

.br-on-sm { display: none; }
@media (max-width: 1280px) { .br-on-sm { display: inline; } }

/* REDUCIR ESPACIO ENTRE H1 Y LABEL */
.pricing-header-section h1 + .tagline,
h1 + label.tagline,
h1 + label {
    margin-top: -10px !important;
    line-height: 1.3 !important;
}


@media (max-width: 1280px) {
    .pricing-header-section h1 + .tagline,
    h1 + label.tagline, 
    h1 + label {
        font-size: 19px !important;
        margin-top: 15px !important;
        line-height: 0.6 !important;
         margin-bottom: 15px !important;
         
    }
}



@media (max-width: 768px) {
    .pricing-header-section h1 + .tagline,
    h1 + label.tagline,
    h1 + label {
        margin-top: -12px !important;
        line-height: 0.8 !important;
    }
}