/*=========================================
TABLETS
=========================================*/

@media(max-width:992px){

    .hero h1{
        font-size:60px;
    }

    .hero p{
        font-size:22px;
    }

    .historia-contenido,
    .contenedor-proceso,
    .contenedor-contacto{

        grid-template-columns:1fr;
        gap:40px;
    }

    .contenedor-productos,
    .contenedor-testimonios{

        grid-template-columns:1fr 1fr;
    }

    .contenedor-galeria{

        grid-template-columns:1fr 1fr;
    }

}

/*=========================================
CELULARES
=========================================*/

@media(max-width:768px){

    .navbar{

        display:flex;
        flex-direction:column;
        align-items:center;

    }

    .navbar ul{

        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        gap:12px;
        padding:0;
        margin-top:15px;

    }

    .navbar ul li{

        width:100%;
        text-align:center;

    }

    .hero{

        min-height:80vh;
    }

    .hero h1{

        font-size:42px;
        line-height:1.1;
    }

    .hero p{

        font-size:17px;
    }

    .titulo-seccion h2{

        font-size:52px;
    }

    .contenedor-productos,
    .contenedor-testimonios,
    .contenedor-galeria{

        grid-template-columns:1fr;
    }

    .producto-card{

        padding:30px;
    }

    .producto-card img{

        width:70%;
    }

    .texto-proceso h3{

        font-size:42px;
    }

    .info-contacto,
    .formulario-contacto{

        padding:30px;
    }

}

/*=========================================
MÓVILES PEQUEÑOS
=========================================*/

@media(max-width:480px){

    .hero h1{

        font-size:38px;
    }

    .titulo-seccion h2{

        font-size:42px;
    }

    .btn,
    .btn2{

        width:100%;
    }

    .whatsapp{

        width:65px;
        height:65px;
    }

}

@media(max-width:768px){

    .historia-contenido{

        display:flex !important;
        flex-direction:column !important;
        align-items:center;
        text-align:center;

    }

    .historia-imagen,
    .historia-texto{

        width:100% !important;
        max-width:100% !important;

    }
   
    .logo img{

      width:90px;
      height:auto;

    }
}