/* ==========================
   TABLETS (1024px)
========================== */

@media (max-width:1024px){

    .hero-container,
    .about-grid,
    .contact-container{

        grid-template-columns:1fr;
        text-align:center;
        gap:50px;

    }

    .hero-image{

        order:-1;

    }

    .contact-item{

        text-align:left;

    }

    .contact-social{

        justify-content:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .benefits-grid{

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

    }

    .plans-grid{

        grid-template-columns:1fr;
        max-width:600px;
        margin:0 auto;

    }

    .stats-grid{

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

    }

    .about-mv{

        grid-template-columns:1fr;
        gap:24px;

    }

    .values-grid{

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

    }

}


/* ==========================
   MÓVILES (768px)
========================== */

@media (max-width:768px){

    section{

        padding:80px 0;

    }

    .hero{

        min-height:auto;
        padding:60px 0;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-image img{

        max-width:min(350px, 100%);

    }

    .benefits-grid,
    .stats-grid{

        grid-template-columns:1fr;

    }

    .values-grid{

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

    }

    .about-mv-card{

        padding:36px 28px;
        text-align:center;

    }

    .about-mv-icon{

        margin-left:auto;
        margin-right:auto;

    }

    .about-content h2,
    .contact-info h2,
    .impact-banner h2,
    .plans-section .section-title,
    .about-values .section-title,
    .benefits .section-title{

        font-size:2.2rem;

    }

}


/* ==========================
   MÓVILES PEQUEÑOS (480px)
========================== */

@media (max-width:480px){

    .container{

        width:95%;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;
        text-align:center;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .plan-card{

        padding:35px 25px;

    }

    .values-grid{

        grid-template-columns:1fr;

    }

    .impact-banner{

        padding:50px 25px;

    }

}


/* ==========================
   FOOTER
========================== */

@media (max-width:1024px){

    .footer-grid{

        grid-template-columns:repeat(3,1fr);
        row-gap:50px;

    }

    .footer-brand{

        grid-column:1 / -1;

    }

}

@media (max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;
        text-align:center;
        gap:40px;

    }

    .footer-logo{

        margin:0 auto 25px;

    }

    .footer-brand p{

        max-width:100%;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-contact p{

        justify-content:center;

    }

}