/* ===========================
   CONFIGURACIÓN GENERAL
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f6fa;
    color:#101828;
}

/* ===========================
   ENCABEZADO
=========================== */

.encabezado{

    width:100%;

    background:#101828;

    padding:1.5rem 6%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo h1{

    color:white;

    font-size:2.3rem;

}

.logo p{

    color:#b6c2d1;

    margin-top:.3rem;

    font-size:1rem;

}

/* ===========================
   MENÚ
=========================== */

.menu{

    display:flex;

    gap:1rem;

}

.menu a{

    color:white;

    text-decoration:none;

    padding:.9rem 1.3rem;

    border-radius:.5rem;

    transition:.3s;

}

.menu a:hover{

    background:#2563EB;

}

.menu .activo{

    background:#2563EB;

}

/* ===========================
   BANNER
=========================== */

.banner{

    width:100%;

    min-height:38rem;

    padding:4rem 6%;

    background:linear-gradient(to right,#ffffff,#eef4ff);

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* TEXTO */

.texto-banner{

    width:45%;

}

.texto-banner h2{

    font-size:4rem;

    color:#07162f;

    line-height:4.5rem;

    margin-bottom:1.5rem;

}

.texto-banner p{

    font-size:1.2rem;

    color:#5b6474;

    line-height:2rem;

    margin-bottom:2rem;

}

/* BOTÓN */

.boton{

    display:inline-block;

    background:#2563EB;

    color:white;

    text-decoration:none;

    padding:1rem 2.2rem;

    border-radius:.6rem;

    font-weight:bold;

    transition:.3s;

}

.boton:hover{

    background:#114ec8;

}

/* IMAGEN */

.imagen-banner{

    width:45%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.imagen-banner img{

    width:100%;

    max-width:34rem;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:62rem){

    .encabezado{

        flex-direction:column;

    }

    .menu{

        margin-top:1rem;

        flex-wrap:wrap;

        justify-content:center;

    }

    .banner{

        flex-direction:column;

        text-align:center;

    }

    .texto-banner{

        width:100%;

    }

    .imagen-banner{

        width:100%;

        margin-top:2rem;

    }

    .texto-banner h2{

        font-size:3rem;

        line-height:3.4rem;

    }

}
/* ===========================
   PRODUCTOS DESTACADOS
=========================== */

.productos{

    width:100%;

    padding:5rem 6%;

    text-align:center;

    background:white;

}

.productos h2{

    font-size:2.5rem;

    color:#101828;

}

.productos>p{

    color:#667085;

    margin-top:1rem;

    margin-bottom:3rem;

}

.contenedor-productos{

    display:flex;

    justify-content:center;

    gap:2rem;

    flex-wrap:wrap;

}

.producto{

    width:22rem;

    background:white;

    border-radius:1rem;

    overflow:hidden;

    box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.08);

    transition:.3s;

}

.producto:hover{

    transform:translateY(-0.5rem);

}

.producto img{

    width:100%;

    height:18rem;

    object-fit:contain;

    background:#f4f6fb;

    padding:1rem;

}

.producto h3{

    margin-top:1rem;

    color:#101828;

}

.producto p{

    padding:1rem;

    color:#667085;

}

.producto h4{

    color:#2563EB;

    font-size:1.5rem;

    margin-bottom:1.5rem;

}

.boton-producto{

    display:inline-block;

    margin-bottom:2rem;

    padding:.9rem 2rem;

    background:#2563EB;

    color:white;

    text-decoration:none;

    border-radius:.5rem;

}

.boton-producto:hover{

    background:#114ec8;

}
/* ===========================
   CATEGORÍAS
=========================== */

.categorias{

    padding:5rem 6%;

    background:#f7f9fc;

    text-align:center;

}

.categorias h2{

    font-size:2.5rem;

    margin-bottom:3rem;

    color:#101828;

}

.contenedor-categorias{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:2rem;

}

.categoria{

    width:16rem;

    padding:2rem;

    background:white;

    border-radius:1rem;

    box-shadow:0 .4rem 1rem rgba(0,0,0,.08);

    transition:.3s;

}

.categoria:hover{

    transform:translateY(-.5rem);

}

.categoria h3{

    color:#2563EB;

    margin-bottom:1rem;

}

.categoria p{

    color:#667085;

    line-height:1.6rem;

}
/* ===========================
   BENEFICIOS
=========================== */

.beneficios {
    width: 100%;
    padding: 5rem 6%;
    background-color: #101828;
    text-align: center;
}

.beneficios h2 {
    color: #ffffff;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.texto-beneficios {
    color: #b6c2d1;
    margin-bottom: 3rem;
}

.contenedor-beneficios {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.beneficio {
    width: 16rem;
    padding: 2rem;
    background-color: #17233a;
    border: 0.1rem solid #2f3c55;
    border-radius: 1rem;
}

.icono-beneficio {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.beneficio h3 {
    color: #ffffff;
    margin-bottom: 1rem;
}

.beneficio p {
    color: #b6c2d1;
    line-height: 1.6rem;
}
/* ===========================
   MARCAS DISPONIBLES
=========================== */

.marcas {
    width: 100%;
    padding: 5rem 6%;
    background-color: #ffffff;
    text-align: center;
}

.marcas h2 {
    color: #101828;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.marcas > p {
    color: #667085;
    margin-bottom: 3rem;
}

.contenedor-marcas {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.marca {
    width: 11rem;
    padding: 2rem 1rem;
    background-color: #f4f7fb;
    border: 0.1rem solid #dfe6f0;
    border-radius: 0.8rem;
}

.marca h3 {
    color: #101828;
    font-size: 1.3rem;
}

.marca:hover {
    background-color: #eaf1ff;
    border-color: #2563eb;
}
.video{

    width:100%;

    padding:5rem 6%;

    background:#f4f7fb;

    text-align:center;

}

.video h2{

    font-size:2.5rem;

    color:#101828;

    margin-bottom:1rem;

}

.video p{

    color:#667085;

    margin-bottom:3rem;

}

.contenedor-video{

    display:flex;

    justify-content:center;

}

.contenedor-video video{

    width:70%;

    border-radius:1rem;

    box-shadow:0 .8rem 2rem rgba(0,0,0,.15);

}
/* ===========================
   PIE DE PÁGINA
=========================== */

.footer {
    width: 100%;
    background-color: #08121f;
    color: #ffffff;
}

.footer-contenedor {
    padding: 4rem 6%;

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-columna {
    width: 20%;
    min-width: 14rem;
}

.footer-columna h2 {
    color: #2563eb;
    margin-bottom: 1rem;
}

.footer-columna h3 {
    margin-bottom: 1rem;
}

.footer-columna p {
    color: #c5cfdd;
    line-height: 2rem;
}

.footer-columna a {
    color: #c5cfdd;
    text-decoration: none;
}

.footer-columna a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.copyright {
    padding: 1.5rem 6%;
    background-color: #050b14;
    text-align: center;
}

.copyright p {
    color: #9da9bb;
}
/*==============================
ETIQUETAS
===============================*/

.producto{

    position:relative;

}

.nuevo{

    position:absolute;

    top:15px;

    left:15px;

    background:#22c55e;

    color:white;

    padding:.4rem .9rem;

    border-radius:.5rem;

    font-size:.8rem;

    font-weight:bold;

}

.oferta{

    position:absolute;

    top:15px;

    left:15px;

    background:#ef4444;

    color:white;

    padding:.4rem .9rem;

    border-radius:.5rem;

    font-size:.8rem;

    font-weight:bold;

}

.vendido{

    position:absolute;

    top:15px;

    left:15px;

    background:#f59e0b;

    color:white;

    padding:.4rem .9rem;

    border-radius:.5rem;

    font-size:.8rem;

    font-weight:bold;

}

.precio-anterior{

    color:#999;

    text-decoration:line-through;

    margin-top:.5rem;

}
/* ===========================
   PÁGINA DE OFERTAS
=========================== */

.contenedor-ofertas {
    width: 100%;
    padding: 2rem 6% 5rem;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;

    background-color: #f4f7fb;
}

.tarjeta-oferta {
    width: 21rem;
    padding: 1.5rem;
    position: relative;

    background-color: #ffffff;
    border-radius: 1rem;
    text-align: center;

    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.tarjeta-oferta img {
    width: 100%;
    height: 17rem;
    object-fit: contain;
    margin-top: 2rem;
}

.tarjeta-oferta h2 {
    color: #101828;
    margin: 1rem 0;
}

.tarjeta-oferta p {
    color: #667085;
    line-height: 1.6rem;
    margin-bottom: 1rem;
}

.tarjeta-oferta h3 {
    color: #2563eb;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.descuento {
    position: absolute;
    top: 1rem;
    left: 1rem;

    padding: 0.5rem 0.9rem;
    background-color: #ef4444;
    color: #ffffff;

    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: bold;
}

.condiciones-oferta {
    padding: 4rem 6%;
    background-color: #ffffff;
    text-align: center;
}

.condiciones-oferta h2 {
    color: #101828;
    margin-bottom: 2rem;
}

.lista-condiciones {
    max-width: 40rem;
    margin: auto;
    text-align: left;
}

.lista-condiciones p {
    color: #667085;
    line-height: 2rem;
}
/* ===========================
   CONTACTO
=========================== */

.titulo-pagina {
    width: 100%;
    padding: 4rem 6% 2rem;
    background-color: #f4f7fb;
    text-align: center;
}

.titulo-pagina h1 {
    color: #101828;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.titulo-pagina p {
    color: #667085;
    font-size: 1.1rem;
}

/* CONTENEDOR PRINCIPAL */

.contacto-contenedor {
    width: 100%;
    padding: 3rem 6% 5rem;
    background-color: #f4f7fb;

    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 3rem;
}

/* IMAGEN */

.imagen-contacto {
    width: 45%;
    min-width: 18rem;

    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-contacto img {
    width: 100%;
    max-width: 34rem;
    height: 34rem;

    object-fit: cover;
    border-radius: 1rem;

    box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.15);
}

/* FORMULARIO */

.formulario {
    width: 45%;
    min-width: 18rem;
    padding: 2.5rem;

    background-color: #ffffff;
    border-radius: 1rem;

    box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.1);
}

.formulario h2 {
    color: #101828;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.formulario form {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.formulario input,
.formulario textarea {
    width: 100%;
    padding: 1rem;

    border: 0.1rem solid #d0d7e2;
    border-radius: 0.5rem;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

.formulario textarea {
    min-height: 10rem;
    resize: none;
}

.formulario input:focus,
.formulario textarea:focus {
    border-color: #2563eb;
    outline: none;
}

.formulario button {
    width: 100%;
    padding: 1rem;

    background-color: #2563eb;
    color: #ffffff;

    border: none;
    border-radius: 0.5rem;

    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

.formulario button:hover {
    background-color: #114ec8;
}

/* INFORMACIÓN */

.info-contacto {
    width: 100%;
    padding: 5rem 6%;
    background-color: #ffffff;
    text-align: center;
}

.info-contacto h2 {
    color: #101828;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.contenedor-datos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.dato-contacto {
    width: 14rem;
    min-height: 10rem;
    padding: 2rem 1.5rem;

    background-color: #f4f7fb;
    border: 0.1rem solid #dfe6f0;
    border-radius: 1rem;
}

.dato-contacto h3 {
    color: #2563eb;
    margin-bottom: 1rem;
}

.dato-contacto p {
    color: #667085;
    line-height: 1.6rem;
}

/* PANTALLAS PEQUEÑAS */

@media (max-width: 62rem) {

    .imagen-contacto {
        width: 100%;
    }

    .formulario {
        width: 100%;
    }

    .imagen-contacto img {
        height: auto;
    }

}
/* ===========================
   CATÁLOGO INFORMATIVO
=========================== */

.catalogo-informativo {
    width: 100%;
    padding: 4rem 6% 5rem;
    background-color: #f4f7fb;
}

.titulo-catalogo {
    text-align: center;
    margin-bottom: 3rem;
}

.titulo-catalogo h1 {
    color: #101828;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.titulo-catalogo p {
    color: #667085;
    font-size: 1.1rem;
}

.datos-producto {
    padding: 0 1rem 1rem;
    text-align: left;
}

.datos-producto p {
    margin-bottom: 0.6rem;
    color: #667085;
    line-height: 1.5rem;
}

.datos-producto b {
    color: #101828;
}

/* ===========================
   PÁGINA NOSOTROS
=========================== */

.nosotros-principal {
    width: 100%;
    padding: 4rem 6%;
    background-color: #f4f7fb;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
}

.texto-nosotros {
    width: 45%;
    min-width: 18rem;
}

.texto-nosotros h2 {
    color: #101828;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.texto-nosotros p {
    color: #667085;
    line-height: 1.8rem;
    margin-bottom: 1rem;
}

.imagen-nosotros {
    width: 40%;
    min-width: 18rem;

    display: flex;
    justify-content: center;
}

.imagen-nosotros img {
    width: 100%;
    max-width: 28rem;
    border-radius: 1rem;
}

.mision-vision {
    width: 100%;
    padding: 5rem 6%;
    background-color: #ffffff;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.tarjeta-nosotros {
    width: 28rem;
    padding: 2.5rem;

    background-color: #f4f7fb;
    border-radius: 1rem;
    text-align: center;
}

.tarjeta-nosotros h2 {
    color: #2563eb;
    margin-bottom: 1rem;
}

.tarjeta-nosotros p {
    color: #667085;
    line-height: 1.7rem;
}

.valores {
    width: 100%;
    padding: 5rem 6%;
    background-color: #101828;
    text-align: center;
}

.valores h2 {
    color: #ffffff;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.contenedor-valores {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.valor {
    width: 16rem;
    padding: 2rem;

    background-color: #17233a;
    border: 0.1rem solid #2f3c55;
    border-radius: 1rem;
}

.valor h3 {
    color: #ffffff;
    margin-bottom: 1rem;
}

.valor p {
    color: #b6c2d1;
    line-height: 1.6rem;
}