/*==================================================
            BENEFICIOS
==================================================*/

.beneficios{

    padding:120px 0;

    background:#F7FAFD;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:#0B5ED7;

    font-weight:600;

    margin-bottom:14px;

}

.section-title h2{

    font-size:44px;

    color:#061224;

    margin-bottom:20px;

}

.section-title p{

    max-width:720px;

    margin:auto;

    color:#64748B;

    line-height:1.8;

}

.beneficios-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.beneficio-card{

    background:#FFF;

    padding:35px;

    border-radius:24px;

    border:1px solid #E4EDF6;

    text-align:center;

    transition:.35s;

}

.beneficio-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(11,94,215,.10);

}

.beneficio-card i{

    width:72px;

    height:72px;

    margin:auto auto 22px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

    background:linear-gradient(135deg,#16C2F5,#0B5ED7);

    color:#FFF;

    font-size:28px;

}

.beneficio-card h3{

    margin-bottom:14px;

    color:#061224;

}

.beneficio-card p{

    color:#64748B;

    line-height:1.8;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1100px){

    .beneficios-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .hero-content h1{

        font-size:42px;

    }

    .beneficios-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .billing-switch{

        flex-direction:column;

        width:100%;

    }

    .billing{

        width:100%;

    }

}

/*==============================
        SECCIÓN
==============================*/

.planes-section{

    padding:120px 0;

    background:#F7FAFD;

}

.planes-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    align-items:stretch;

}

/*==============================
        TARJETAS
==============================*/

.plan-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:#FFFFFF;

    border-radius:30px;

    border:1px solid #E4EDF6;

    padding:38px;

    overflow:hidden;

    transition:.35s;

    box-shadow:

    0 15px 40px rgba(15,23,42,.06);

}

.plan-card:hover{

    transform:translateY(-10px);

    border-color:#16C2F5;

    box-shadow:

    0 30px 60px rgba(11,94,215,.15);

}

/*==============================
        LÍNEA SUPERIOR
==============================*/

.plan-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        #16C2F5,
        #0B5ED7
    );

    opacity:0;

    transition:.35s;

}

.plan-card:hover::before{

    opacity:1;

}

/*==============================
        PLAN DESTACADO
==============================*/

.featured{

    border:2px solid #0B5ED7;

    transform:scale(1.03);

    z-index:2;

}

.featured::before{

    opacity:1;

}

.featured:hover{

    transform:scale(1.03)
    translateY(-10px);

}

/*==============================
        BADGE
==============================*/

.badge-popular{

    position:absolute;

    left:50%;

    top:-16px;

    transform:translateX(-50%);

    background:

    linear-gradient(
        135deg,
        #16C2F5,
        #0B5ED7
    );

    color:#FFF;

    padding:10px 24px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:

    0 10px 25px
    rgba(11,94,215,.25);

}

/*==============================
        HEADER
==============================*/

.plan-header{

    margin-bottom:28px;

}

.plan-header h3{

    font-size:34px;

    color:#061224;

    margin-bottom:10px;

}

.plan-header p{

    color:#64748B;

    line-height:1.7;

}

/*==============================
        PRECIO
==============================*/

.plan-price{

    min-height:140px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.plan-price h2{

    display:flex;

    align-items:flex-end;

    gap:8px;

    font-size:56px;

    color:#061224;

    font-weight:700;

    margin-bottom:10px;

}

.plan-price small{

    font-size:18px;

    color:#64748B;

    margin-bottom:8px;

}

.precio-mensual{

    transition:.35s;

}

/*==============================
        PERIODOS
==============================*/

.plan-periodos{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin:35px 0;

}

.periodo{

    padding:20px;

    text-align:center;

    border-radius:18px;

    background:#EDF6FF;

    border:1px solid #D8EAFE;

    transition:.30s;

}

.periodo:hover{

    transform:translateY(-4px);

}

.periodo.anual{

    background:#F1FCF5;

    border-color:#D7F4E0;

}

.periodo span{

    display:block;

    color:#64748B;

    margin-bottom:8px;

    font-size:14px;

}

.periodo strong{

    display:block;

    font-size:28px;

    color:#061224;

    margin-bottom:8px;

}

.periodo small{

    color:#16A34A;

    font-weight:600;

}

/*==============================
    OPCIONES ADICIONALES
==============================*/

.extras-box{

    margin-top:10px;

    padding:25px;

    border-radius:20px;

    background:#F8FBFE;

    border:1px solid #E4EDF6;

    display:flex;

    flex-direction:column;

    gap:18px;

    flex:1;

}

.extras-box h4{

    color:#061224;

    font-size:15px;

    font-weight:700;

    letter-spacing:.8px;

    margin:0;

    text-transform:uppercase;

}

/*==============================
        OPCIONES
==============================*/

.option{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:60px;

    padding:10px 0;

    border-bottom:1px solid #E8EEF5;

    cursor:pointer;

    transition:.30s;

}

.option:last-child{

    border-bottom:none;

}

.option:hover{

    color:#0B5ED7;

}

.option div{

    display:flex;

    align-items:center;

    gap:14px;

}

.option span{

    color:#334155;

    font-size:15px;

    transition:.30s;

}

.option strong{

    color:#16A34A;

    font-size:15px;

    font-weight:700;

    white-space:nowrap;

}

/*==============================
    CHECKBOX PERSONALIZADO
==============================*/

.option input[type="checkbox"]{

    appearance:none;

    width:22px;

    height:22px;

    border-radius:6px;

    border:2px solid #CBD5E1;

    background:#FFF;

    cursor:pointer;

    transition:.30s;

    position:relative;

    flex-shrink:0;

}

.option input[type="checkbox"]:hover{

    border-color:#16C2F5;

}

.option input[type="checkbox"]:checked{

    background:#0B5ED7;

    border-color:#0B5ED7;

}

.option input[type="checkbox"]:checked::after{

    content:"✓";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-58%);

    color:#FFF;

    font-size:13px;

    font-weight:bold;

}

.option input[type="checkbox"]:checked + span{

    color:#0B5ED7;

    font-weight:600;

}

/*==============================
        BOTÓN
==============================*/

.btn-plan{

    margin-top:30px;

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #16C2F5,
        #0B5ED7
    );

    color:#FFF;

    font-size:17px;

    font-weight:600;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    cursor:pointer;

    transition:.35s;

    box-shadow:

    0 18px 40px
    rgba(11,94,215,.22);

}

.btn-plan:hover{

    transform:translateY(-4px);

    box-shadow:

    0 26px 48px
    rgba(11,94,215,.30);

}

.btn-plan i{

    transition:.30s;

}

.btn-plan:hover i{

    transform:translateX(6px);

}

/*==============================
    ANIMACIÓN PRECIOS
==============================*/

.precio-mensual,
.precio-trimestral,
.precio-anual{

    transition:.35s;

}

.plan-card:hover .precio-mensual{

    color:#0B5ED7;

}

/*==============================
    ANIMACIÓN TARJETA
==============================*/

.plan-card{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            RESPONSIVE PLANES
==================================================*/

/* ===== 3 columnas en desktop ===== */
@media (min-width: 1201px) {
    .planes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== 2 columnas en tablet ===== */
@media (max-width: 1200px) and (min-width: 769px) {
    .planes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 900px;
        margin: 0 auto;
    }

    .featured {
        transform: none;
    }

    .featured:hover {
        transform: translateY(-10px);
    }
}

/* ===== 1 columna en móvil ===== */
@media (max-width: 768px) {
    .planes-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 500px;
        margin: 0 auto;
    }

    .plan-card {
        max-width: 100%;
        margin: 0 auto;
        padding: 28px;
    }

    .plan-price h2 {
        font-size: 44px;
    }

    .plan-periodos {
        grid-template-columns: 1fr;
    }

    .featured {
        transform: none;
    }

    .featured:hover {
        transform: translateY(-10px);
    }

    .hero-planes h1 {
        font-size: 42px;
    }

    .hero-planes p {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .plan-header h3 {
        font-size: 28px;
    }

    .plan-price h2 {
        font-size: 38px;
    }

    .option {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .option strong {
        margin-left: 36px;
    }

    .btn-plan {
        height: 54px;
        font-size: 16px;
    }

    .hero-planes h1 {
        font-size: 32px;
    }

    .hero-planes p {
        font-size: 15px;
    }

    .hero-planes .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-planes .hero-buttons a {
        width: 100%;
        max-width: 320px;
        text-align: center;
        justify-content: center;
    }

    .plan-card {
        padding: 22px 16px;
    }
}

/*==================================================
                    FAQ
==================================================*/

.faq{

    padding:120px 0;

    background:#FFFFFF;

}

.faq-container{

    max-width:950px;

    margin:70px auto 0;

}

.faq-item{

    background:#FFFFFF;

    border:1px solid #E4EDF6;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:22px;

    transition:.35s;

    box-shadow:
    0 10px 35px rgba(15,23,42,.05);

}

.faq-item:hover{

    border-color:#16C2F5;

    box-shadow:
    0 18px 45px rgba(11,94,215,.10);

}

.faq-question{

    width:100%;

    border:none;

    background:#FFF;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    padding:26px 30px;

    font-size:18px;

    font-weight:600;

    color:#061224;

    transition:.30s;

}

.faq-question:hover{

    color:#0B5ED7;

}

.faq-question i{

    color:#0B5ED7;

    transition:.35s;

}

.faq-item.active i{

    transform:rotate(180deg);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.faq-answer p{

    padding:0 30px 28px;

    line-height:1.9;

    color:#64748B;

}

/*==================================================
                    CTA
==================================================*/

.pricing-cta{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:

    linear-gradient(
        135deg,
        #061224,
        #0B5ED7
    );

}

.pricing-cta::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:

    rgba(255,255,255,.05);

    top:-300px;

    right:-220px;

}

.pricing-cta .cta-box{

    position:relative;

    z-index:2;

    max-width:950px;

    margin:auto;

    text-align:center;

    padding:70px;

    border-radius:28px;

    background:

    rgba(255,255,255,.08);

    border:

    1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(18px);

}

.pricing-cta .cta-box i{

    width:90px;

    height:90px;

    margin:auto auto 28px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:24px;

    background:

    linear-gradient(
        135deg,
        #16C2F5,
        #0B5ED7
    );

    color:#FFF;

    font-size:38px;

}

.pricing-cta h2{

    color:#FFF;

    font-size:44px;

    margin-bottom:20px;

}

.pricing-cta p{

    max-width:720px;

    margin:auto auto 40px;

    color:

    rgba(255,255,255,.85);

    line-height:1.9;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary,

.btn-secondary{

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-primary{

    background:#16C2F5;

    color:#FFF;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px rgba(22,194,245,.35);

}

.btn-secondary{

    color:#FFF;

    border:2px solid rgba(255,255,255,.30);

}

.btn-secondary:hover{

    background:#FFF;

    color:#0B5ED7;

}

/*==================================================
            REVEAL
==================================================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
            SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EDF4F8;

}

::-webkit-scrollbar-thumb{

    background:#0B5ED7;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0849A6;

}

/*==================================================
            SELECCIÓN
==================================================*/

::selection{

    background:#16C2F5;

    color:#FFF;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:768px){

    .pricing-cta .cta-box{

        padding:45px 28px;

    }

    .pricing-cta h2{

        font-size:34px;

    }

    .faq-question{

        font-size:16px;

        padding:22px;

    }

    .faq-answer p{

        padding:0 22px 22px;

    }

}

@media(max-width:576px){

    .cta-buttons{

        flex-direction:column;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        text-align:center;

    }

}

/*==================================================
                FIN
==================================================*/