/* ===========================
   TABLETS (900px)
=========================== */
@media (max-width:900px){

    /* Modal */
    .modal-grid{
        grid-template-columns:1fr;
    }

    .modal-texto{
        padding:25px;
    }

    .modal-imagen{
        padding:20px;
    }

    /* Beneficios */
    .beneficios{
        flex-wrap:wrap;
    }

    .item{
        width:50%;
        flex:none;
        margin-bottom:40px;
    }

    .item::after{
        display:none;
    }

    /* CTA */
    .cta{
        flex-direction:column;
        text-align:center;
    }

    .cta-botones{
        justify-content:center;
    }

    .cta-texto h2{
        font-size:32px;
    }

    .cta-texto p{
        font-size:18px;
    }
}


/* ===========================
   TABLETS PEQUEÑAS (768px)
=========================== */
@media (max-width:768px){

    /* Menú */
    .menu-toggle{
        display:block;
    }

    .header .container{
        flex-wrap:wrap;
    }

    nav{
        display:none;
        flex-direction:column;
        width:100%;
    }

    nav.active{
        display:flex;
    }

    /* Cards */
    .cards{
        grid-template-columns:1fr;
    }

    /* Sección ¿Por qué elegirnos? */
    .porque{
        padding:40px 15px;
    }

    .porque h2{
        font-size:28px;
    }

    .beneficios{
        flex-direction:column;
        gap:35px;
    }

    .item{
        width:100%;
        margin-bottom:0;
        padding:0;
    }

    .item i{
        font-size:45px;
    }

    .item h4{
        font-size:20px;
    }

    .item p{
        font-size:16px;
    }

    .item::after{
        display:none;
    }
}


/* ===========================
   MÓVILES (600px)
=========================== */
@media (max-width:600px){

    /* CTA */
    .cta{
        padding:30px 20px;
    }

    .cta-botones{
        width:100%;
        flex-direction:column;
    }

    .cta-botones a{
        width:100%;
        text-align:center;
    }

    /* Títulos */
    .porque h2{
        font-size:24px;
    }

    /* Beneficios */
    .item{
        width:100%;
    }

}