/*ARRANCA DESDE EL MINIMO 0PX DE ANCHO HASTA EL MAXIMO DE 800PX DE ANCHO*/
@media (min-width: 0px) and (max-width: 800px){ 
    
    /*estilos header*/
    #header {
       height: 40vh;
    }

    #header .titulo-header {
        font-size: 2rem;
    }

    #header .header-descripcion {
        height: 50%;
    }

    #header-footer .parrafo-header {
        font-size: 18px;
    }
   

    /*responsive producto*/
    .titulo-h2-general {
        font-size: 1.4rem;
    }

    #producto .producto-grilla {
        grid-template-columns: repeat(1,1fr);
    }

    #producto .producto-descripcion p {
         font-size: 1.2rem; 
    }

    #producto .producto-grilla-uno .producto-caja-relative{
        height: 300px;
    }
    
    #producto .producto-grilla-uno .producto-caja-relative img {
        height: 300px;
    }

    #producto .producto-grilla-dos .producto-caja-relative{
        height: 150px;
    }
    
    #producto .producto-grilla-dos .producto-caja-relative img {
        height: 150px;
    }


    /*estilos tazas*/
    #tazas .taza-grid {
        grid-template-columns: repeat(1,1fr);
    }

    /*conocenos*/
    #conocenos .conocenos-grilla {
      flex-direction: column;
    }

    #conocenos .conocenos-img img {
        width: 100%;
        height: 50vh;
    }

    #conocenos .conocenos-descripcion {
        margin-top: 2rem;
        text-align: center;
    }

    #conocenos .conocenos-descripcion .conocenos-span {
        margin-top: 2rem;
    }

    #conocenos .conocenos-descripcion .conocenos-titulo {
        font-size: 2.7rem;
    }

    #conocenos .conocenos-fondo {
        height: 50vh;
    }


    /*footer*/
    #footer .footer-grilla {
        grid-template-columns: repeat(1,1fr);
    }
    
  
    /*ESTILOS LOGIN*/
    #login .login-grilla {
        grid-template-columns: repeat(1,1fr) !important;
    }

    #login .fondo-mitad-login {
        height: 30vh;
    }

    #login .caja-formulario {
        height: 65vh !important;
    }
}




/*ARRANCA DESDE EL MINIMO 0PX DE ANCHO HASTA EL MAXIMO DE 800PX DE ANCHO*/
@media (min-width: 800px) and (max-width: 1200px){ 
    
    /*estilos header*/
    #header {
        height: 40vh;
    }

    #header .parrafo-header {
        font-size: 1rem; 
    }

    /*estilos tazas*/
    #tazas .taza-grid {
        grid-template-columns: repeat(2,1fr);
    }

    /*taza fondo*/
    #taza-fondo {
        height: 50vh;
    }

    #taza-fondo .taza-fondo-img {
        height: 50vh;
    }


    /*estilos conocenos*/
    #conocenos .conocenos-grilla {
        gap: 1rem;
    }

    #conocenos .conocenos-descripcion .conocenos-titulo {
        font-size: 2.5rem;
    }

    #conocenos .conocenos-descripcion .conocenos-span {
        font-size: 1rem;
    }
}