@import './utilities.css';
@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Tilt+Warp&display=swap');
*{
    font-family: "Inria Sans", serif;
}
a {
  display: inline-flex;
  align-items: center;
}
a:hover {
  opacity: 0.8;
}
body{
    display: flex;
    flex-direction: column;
}
/*Menu*/
.btn-wsp{
    background-color: #128c7e;
}
.mn-icn{
    background-color: #004771;
}
.npt-bus{
    border-radius: .5vw 0 0 .5vw;
    background-color: whitesmoke;
}
.btn-bus{
    border-radius: 0 .5vw .5vw 0;
    background-color: #004771;
}
#logotipo{
    height: 3vh;
}
/*Hero*/
#hero{
    top: 10vh;
}
.btn-pro{
    background-color: #004771;
}
.hero-bg{
    background-color: yellow;
}
.overlay-dark{
    background-color: rgba(241, 183, 73,.1);
}

/*Servicios*/
#productos{
    top: 10vh;
    /* background-color: yellowgreen; */
}
article img{
    height: 30vh;
    object-fit: contain;
    padding: 1.5vw;
}
.prd-ctg:hover{
    background-color: #f1b749;
}
.bg-p{
    background-color: #004771;
}
/*Footer*/
footer{
    background-color: #004771 !important;
}
#ftr-txt{
    color: white;
}
#ftr-cpy{
    color: white;
}

/*PAGINA:CATEGORIAS*/
#categorias{
    top: 10vh;
}
footer{
    top: 10vh;
}
/*PAGINA:CATEGORIA-PRODUCTO*/
#categoria-producto{
    top: 10vh;
}
/*PAGINA:SERVICIOS*/
#servicios{
    top: 10vh;
}
/*PAGINA:SERVICIO-INDIVIDUAL*/
#servicio{
    top: 10vh;
}
@media (max-width: 480px) {
    /*Menu*/
    .th-cnt{
        height: 6vh;
    }
    #logoMenu{
        width: 25vw;
    }
    #logoMenu img{
        object-fit: contain;
    }
    #contactoMenu{
        /* width: 10vw; */
        display: none;
    }
    #buscarMenu{
        width: 40vw;
        /* background-color: yellowgreen; */
        /* display: none; */
    }
    .hd-mn{
        justify-content: center;
        height: 5vh;
    }
    .hd-mn nav{
        justify-content: center;
    }
    .hd-mn ul{
        font-size: 1rem;
        width: 100%;
        justify-content: space-between;
    }
    #wspMenu{
        display: none;
    }
    /*Portada*/
    #hero{
        height: 50vh;
        background-color: yellowgreen;
    }
    #hero-bg{
        height: 50vh !important;
    }
    #imagenPortada{
        object-fit: cover;
        height: 50vh !important;
    }
    #overlayHero{
        height: 50vh;
    }
    .hero-content{
        height: 20vh;
        justify-content: space-around;
        top: 15vh;
        /* background-color: violet; */
    }
    .hero-content h1{
        font-size: 1.2rem;
    }
    .hero-content p{
        font-size: 1rem;
    }
    /*Productos*/
    .textoSeccion{
        justify-content: center;
    }
    .textoSeccion h2{
        font-size: 1.5rem;
        text-align: center;
    }
    .textoSeccion p{
        font-size: 1rem;
        text-align: center;
        width: 100%;
    }
    /*Nosotros*/
    #contenedorNosotros{
        flex-direction: column;
        gap: 2vw;
    }
    #textoNosotros{
        width: 100%;
        justify-content: space-around;
        align-items: center;
        /* gap: 5vw; */
    }
    #textoNosotros h2{
        text-align: center;
        font-size: 1.5rem;
    }
    #imagenNosotros{
        width: 90%;
    }
    /*Contacto*/
    #contenedorContacto{
        flex-direction: column;
        gap: 2vw;
    }
    #contactoFormulario{
        width: 100%;
        align-items: center;
    }
    #contactoFormulario p{
        text-align: center;
        width: 100%;
    }
    #contactoFormulario form{
        width: 100%;
    }
    #contactoInfo{
        width: 100%;
        align-items: center;
    }t
    #cuadroContacto{
        align-items: center;
    }
    #cuadroContacto div{
        width: 100%;
    }
    .categoriaTitulo h1{
        font-size: 1.5rem;
        text-align: center;
    }
    .categoriaContenedor{
        flex-direction: column;
        align-items: center;
    }
    .categoriaContenedor article{
        width:90%;
        align-items: center;
    }
    .productoContenedor{
        flex-direction: column;
    }
    /*Pie*/
    #infoPie{
        display: flex;
        flex-direction: column;
    }
    #piePagina{
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    #piePagina p{
        text-align: center;
    }
    #pieMenu{
        display: none;
    }
    #pieRedes{
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    #pieContacto{
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    .galeriaMovil{
        display: flex;
        flex-direction: column;
        gap: 4vw;
    }
    .galeriaMovil article{
        flex: 1;
        width: auto;
    }
    .galeriaMarca a{
        width:20%;    
    }
}