/*======================================================
    RESPONSIVE.CSS
======================================================*/

@media(max-width:1200px){

    .hero h1{

        font-size:4.8rem;

    }

}

@media(max-width:992px){

    header{

        padding:0 35px;

    }

    nav{

        gap:20px;

    }

    .hero h1{

        font-size:4rem;

    }

}

@media(max-width:768px){

    header{

        height:80px;

        padding:0 20px;

    }

    nav{

        display:none;

    }

    .logo img{

        width:110px;

    }

    .hero{

        background-attachment:scroll;

    }

    .heroLogo{

        width:170px;

    }

    .hero h1{

        font-size:3rem;

        letter-spacing:2px;

    }

    .hero h2{

        font-size:1rem;

    }

    .hero p{

        font-size:1rem;

    }

    .botonesHero{

        flex-direction:column;

        align-items:center;

    }

    .botonesHero a{

        width:260px;

        text-align:center;

    }

    section{

        padding:90px 25px;

    }

    section h2{

        font-size:2.2rem;

    }

}

@media(max-width:480px){

    .hero{

        min-height:100vh;

    }

    .heroLogo{

        width:140px;

    }

    .hero h1{

        font-size:2.3rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .botonWhatsapp{

        display:none;

    }

    #gridActividades{

        grid-template-columns:1fr;

    }

}