@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* =========================================================
   BASE
========================================================= */

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

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: Arial, sans-serif;
    background: #e0e5ec;
}

img {
    max-width: 100%;
}


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

.header_ai {
    width: calc(100% - 50px);
    height: 120px;
    margin: 30px auto 0;
    padding: 0 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #ffffff;
    border-radius: 50px;

    box-shadow:
        10px 10px 25px rgba(0, 0, 0, 0.10),
        -10px -10px 25px rgba(255, 255, 255, 1);
}

.header_ai h1 {
    font-size: 35px;
    font-weight: 700;
    color: #333;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
    display: block;
}


/* =========================================================
   MARCA
========================================================= */

.marca {
    width: 400px;
    height: 400px;
    object-fit: contain;

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


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

.menu {
    display: flex;
    gap: 15px;
}

.menu a {
    padding: 12px 20px;

    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 570;

    border-radius: 20px;

    text-decoration: none;
    color: #231584;

    box-shadow:
        5px 5px 10px #bec3c9,
        -5px -5px 10px #ffffff;

    transition: all 0.3s ease;
}

.menu a:hover {
    color: #222;

    box-shadow:
        inset 5px 5px 10px #a2b0cc,
        inset -5px -5px 10px #a2b0cc;
}


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

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown .dropbtn {
    display: block;
    text-decoration: none;
}

.dropdown-content {
    display: none;

    position: absolute;
    top: 100%;
    left: 50%;

    transform: translateX(-50%);

    min-width: 180px;

    background: #ffffff;
    border-radius: 15px;

    padding: 10px 0;

    box-shadow:
        8px 8px 20px rgba(0, 0, 0, 0.15),
        -5px -5px 15px rgba(255, 255, 255, 0.9);

    z-index: 1000;
}

.dropdown-content a {
    display: block;

    padding: 12px 20px;

    text-decoration: none;

    color: #231584;

    font-family: 'Montserrat', sans-serif;
    font-size: 14px;

    text-align: center;

    transition: all 0.3s ease;
}

.dropdown-content a:hover {
    background: #e8edf4;
    color: #0e0437;
}

.dropdown:hover .dropdown-content {
    display: block;
}


/* =========================================================
   BANNERS
========================================================= */

.banner,
.banner2 {
    position: relative;

    width: 70%;
    height: 470px;

    margin: 50px auto 0;

    overflow: hidden;

    border-radius: 25px;

    background: #ffffff;

    box-shadow:
        15px 15px 30px rgba(0, 0, 0, 0.12),
        -15px -15px 30px rgba(255, 255, 255, 0.9);
}

.banner2 {
    border-radius: 30px;
}

.banner img,
.banner2 img {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 0.8s ease;
}

.banner img.active,
.banner2 img.active {
    opacity: 1;
}


/* =========================================================
   GALERÍA DE PRODUCTOS
========================================================= */

.ai-container {
    width: 90%;
    max-width: 1400px;

    margin: 70px auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 40px;

    padding: 30px;
}

.ai-galeria {
    position: relative;

    min-height: 420px;

    padding: 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    background: #ffffff;

    border-radius: 35px;

    box-shadow:
        15px 15px 30px rgba(0, 0, 0, 0.15),
        -15px -15px 30px rgba(255, 255, 255, 1);

    transition: all 0.3s ease;
}

.ai-galeria:hover {
    transform: translateY(-8px);

    box-shadow:
        20px 20px 40px rgba(0, 0, 0, 0.18),
        -20px -20px 40px rgba(255, 255, 255, 1);
}

.ai-galeria > a {
    width: 100%;
    height: 270px;

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

    background: #ffffff;

    border-radius: 25px;

    box-shadow:
        inset 8px 8px 18px rgba(0, 0, 0, 0.08),
        inset -8px -8px 18px rgba(255, 255, 255, 1);

    overflow: hidden;
}

.ai-galeria img {
    width: 85%;
    height: 85%;

    object-fit: contain;

    transition: all 0.4s ease;

    filter: drop-shadow(
        8px 10px 8px rgba(0, 0, 0, 0.15)
    );
}

.ai-galeria:hover img {
    transform: scale(1.08);

    filter: drop-shadow(
        12px 14px 12px rgba(0, 0, 0, 0.20)
    );
}

.ai-desc {
    width: 100%;
    margin-top: 20px;

    text-align: center;
}

.ai-desc p:first-child {
    margin-bottom: 10px;

    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;

    color: #0e0437;
}

.ai-container .ai-galeria .ai-desc p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    font-weight: 700;

    color: #231584;

    text-align: center;

    letter-spacing: 0.5px;

    margin: 15px 0 8px;
}

.ai-desc #precio,
.ai-desc .precio {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;

    color: #163d75;
}

.ai-desc > div {
    margin-top: 18px;

    display: flex;
    justify-content: center;
}


/* =========================================================
   BOTÓN CARRITO
========================================================= */

.btnagregar {
    width: 50px;
    height: 50px;

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

    border: none;
    border-radius: 50%;

    background: #ffffff;
    color: #163d75;

    font-size: 18px;

    cursor: pointer;

    box-shadow:
        7px 7px 14px rgba(0, 0, 0, 0.15),
        -7px -7px 14px rgba(255, 255, 255, 1);

    transition: all 0.25s ease;
}

.btnagregar:hover {
    color: #0d2f63;

    transform: translateY(-2px);

    box-shadow:
        9px 9px 18px rgba(0, 0, 0, 0.18),
        -9px -9px 18px rgba(255, 255, 255, 1);
}

.btnagregar:active {
    transform: translateY(2px);

    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.15),
        inset -5px -5px 10px rgba(255, 255, 255, 1);
}


/* =========================================================
   NOVEDADES / MARCAS
========================================================= */

.ai-nov,
.ai-nov-marcas {
    width: 90%;
    height: 100px;

    margin: 60px auto 20px;

    background: #ffffff;

    border-radius: 30px;

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

    box-shadow:
        12px 12px 25px rgba(0, 0, 0, 0.13),
        -12px -12px 25px rgba(255, 255, 255, 1);

    overflow: hidden;
}

.ai-nov img {
    width: 70%;
    height: auto;

    object-fit: cover;

    border-radius: 30px;
}

.ai-nov-marcas img {
    width: 100%;
    height: auto;

    object-fit: contain;
}


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

.pie_ai {
    position: relative;

    width: calc(100% - 50px);
    height: 200px;

    margin: 30px auto;

    padding: 0 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #ffffff;

    border-radius: 50px;

    box-shadow:
        10px 10px 25px rgba(0, 0, 0, 0.10),
        -10px -10px 25px rgba(255, 255, 255, 1);
}

.pie_ai h1 {
    margin-left: 150px;

    font-size: 17px;
    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    color: #231584;
}

.pie_ai h2 {
    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    font-size: 17px;
    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    color: #231584;
}

.pie_ai h3 {
    margin-right: 150px;

    font-size: 17px;
    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    color: #231584;
}

.pie_ai p,
.pie_ai a {
    font-size: 12px;
    font-weight: 400;

    font-family: 'Montserrat', sans-serif;

    color: #0e0437;
}

.pie_ai a:hover {
    color: #0f6a30;
}


/* =========================================================
   NOSOTROS
========================================================= */

.bannernosotros {
    position: relative;

    width: 40%;
    height: 50px;

    margin: 50px auto 0;

    overflow: hidden;

    border-radius: 25px;

    background: #ffffff;

    box-shadow:
        15px 15px 30px rgba(0, 0, 0, 0.12),
        -15px -15px 30px rgba(255, 255, 255, 0.9);
}

.bannernosotros img {
    width: 100%;
    height: 120%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 0.8s ease;
}

.bannernosotros img.active {
    opacity: 1;
}


/* =========================================================
   QUIÉNES SOMOS
========================================================= */

.info-empresa {
    width: 80%;
    max-width: 1200px;

    margin: 40px auto;

    padding: 40px;

    display: grid;

    grid-template-columns: 180px 1fr;

    column-gap: 40px;

    background: #ffffff;

    border-radius: 35px;

    box-shadow:
        15px 15px 30px rgba(0, 0, 0, 0.12),
        -15px -15px 30px rgba(255, 255, 255, 1);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.info-empresa:hover {
    transform: translateY(-12px);

    box-shadow:
        20px 25px 40px rgba(0, 0, 0, 0.20),
        -10px -10px 25px rgba(255, 255, 255, 1);
}

.info-empresa img {
    width: 200px;
    height: auto;

    grid-row: 1 / 4;

    align-self: center;
}

.info-empresa .descripcion {
    margin: 0 0 20px 0;

    text-align: left;

    font-size: 20px;
    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    color: #231584;
}

.info-empresa > p:last-child {
    margin: 0;

    text-align: justify;

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.7;

    color: #0e0437;
}


/* =========================================================
   MISIÓN Y VISIÓN
========================================================= */

.objetivos {
    width: 80%;
    max-width: 1200px;

    margin: 40px auto;

    padding: 50px;

    display: grid;

    grid-template-columns: 1fr 220px;

    column-gap: 70px;

    align-items: center;

    background: #ffffff;

    border-radius: 35px;

    box-shadow:
        15px 15px 30px rgba(0, 0, 0, 0.12),
        -15px -15px 30px rgba(255, 255, 255, 1);
}

.objetivos > p.descripcion {
    grid-column: 1;

    margin: 0 0 35px 0;

    text-align: left;

    font-size: 20px;
    font-weight: 500;

    font-family: 'Montserrat', sans-serif;

    color: #231584;
}

.objetivos h2.descripcion,
.objetivos h3.descripcion,
.objetivos h4.descripcion {
    grid-column: 1;

    margin: 0 0 12px 0;

    text-align: left;

    font-size: 20px;
    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    color: #231584;
}

.objetivos > p:not(.descripcion) {
    grid-column: 1;

    margin: 0 0 45px 0;

    text-align: justify;

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.7;

    color: #0e0437;
}

.objetivos img {
    grid-column: 2;
    grid-row: 1 / 6;

    width: 300px;
    height: auto;

    justify-self: center;
    align-self: center;
}


/* =========================================================
   NUESTROS VALORES
========================================================= */

.contenedor-valores {
    width: 90%;
    max-width: 1300px;

    margin: 40px auto;

    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: stretch;

    gap: 30px;
}


/*
   IMPORTANTE:
   Los últimos 3 valores se comportan como tarjetas
   normales junto con los otros 4.
*/

.ultimos-valores {
    display: contents;
}


/* Tarjeta individual */

.info-empresa1 {
    flex: 0 1 280px;

    width: 280px;
    max-width: 280px;

    padding: 25px;

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

    text-align: center;

    background: #ffffff;

    border-radius: 25px;

    box-shadow:
        15px 15px 30px rgba(0, 0, 0, 0.12),
        -15px -15px 30px rgba(255, 255, 255, 1);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    box-sizing: border-box;
}


/* Imagen del valor */

.info-empresa1 img {
    width: 100px;
    height: 100px;

    object-fit: contain;

    margin-bottom: 15px;

    transition: transform 0.3s ease;
}


/* Nombre del valor */

.info-empresa1 .descripcion {
    width: 100%;

    margin: 10px 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 22px;
    font-weight: 700;

    color: #231584;

    text-align: center;
}


/* Descripción */

.info-empresa1 p:last-child {
    width: 100%;

    margin: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;

    line-height: 1.6;

    color: #0e0437;

    text-align: center;

    overflow-wrap: break-word;
}


/* Hover */

.info-empresa1:hover {
    transform: translateY(-10px) scale(1.03);
}

.info-empresa1:hover img {
    transform: scale(1.08);
}


/* =========================================================
   DETALLE DE PRODUCTO
========================================================= */

.producto-detalle {
    width: 100%;
    max-width: 1100px;

    min-height: 450px;

    margin: 60px auto;

    padding: 40px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 60px;

    background: #ffffff;

    border-radius: 35px;

    box-shadow:
        15px 15px 30px rgba(0, 0, 0, 0.12),
        -15px -15px 30px rgba(255, 255, 255, 1);

    transition: all 0.3s ease;
}

.producto-imagen {
    width: 100%;
    height: 450px;

    display: flex;

    justify-content: center;
    align-items: center;

    background: #ffffff;

    border-radius: 25px;

    box-shadow:
        inset 8px 8px 18px rgba(0, 0, 0, 0.08),
        inset -8px -8px 18px rgba(255, 255, 255, 1);

    overflow: hidden;
}

.producto-imagen img {
    width: 90%;
    height: 90%;

    object-fit: contain;

    filter:
        drop-shadow(
            8px 10px 8px rgba(0, 0, 0, 0.15)
        );

    transition: transform 0.4s ease;
}

.producto-detalle:hover .producto-imagen img {
    transform: scale(1.05);
}

.producto-info {
    padding: 20px;

    text-align: left;
}

.producto-info h2 {
    margin-bottom: 25px;

    font-family: 'Montserrat', sans-serif;

    font-size: 28px;
    font-weight: 600;

    color: #231584;
}

.descripcion-producto {
    margin-bottom: 30px;

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.8;

    color: #0e0437;
}

.precio-producto {
    font-family: 'Montserrat', sans-serif;

    font-size: 24px;
    font-weight: 700;

    color: #163d75;
}


/* =========================================================
   MAPA
========================================================= */

.mapa-container {
    width: 100%;
    max-width: 1100px;

    height: 450px;

    margin: 40px auto;

    overflow: hidden;

    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.10);

    background: #f5f5f5;
}

.mapa-container iframe {
    width: 100%;
    height: 100%;

    border: 0;

    display: block;
}


/* =========================================================
   BANNERS DE PROMOCIONES
========================================================= */

.bannerproducto {
    width: 100%;
    max-width: 1000px;

    margin: 40px auto;

    display: flex;

    justify-content: center;
    align-items: flex-start;

    gap: 20px;
}

.bannerproducto img {
    width: 100%;
    height: auto;

    display: block;

    border-radius: 20px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   BOTÓN WHATSAPP
========================================================= */

.whatsapp-flotante {
    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #25D366;

    color: white;

    border-radius: 50%;

    text-decoration: none;

    font-size: 34px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.20);

    z-index: 9999;

    transition: all 0.3s ease;
}

.whatsapp-flotante:hover {
    transform: scale(1.10);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   REDES SOCIALES
========================================================= */

.redes-flotantes {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    align-items: center;
}

.boton-redes {
    width: 55px;
    height: 55px;

    border: none;

    border-radius: 50%;

    background: #8fd3f4;

    color: white;

    font-size: 21px;

    cursor: pointer;

    display: flex;

    justify-content: center;
    align-items: center;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.20);

    transition: 0.3s ease;
}

.boton-redes:hover {
    background: #3cafe3;

    transform: scale(1.08);
}

.redes-menu {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-bottom: 12px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition: all 0.3s ease;
}

.redes-flotantes:hover .redes-menu {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.redes-menu a {
    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: white;

    color: #3cafe3;

    display: flex;

    justify-content: center;
    align-items: center;

    text-decoration: none;

    font-size: 19px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.15);

    transition: 0.3s ease;
}

.redes-menu a:hover {
    background: #3cafe3;

    color: white;

    transform: scale(1.1);
}


/* =========================================================
   TARJETA DE CONTACTO
========================================================= */

.contacto-seccion {
    width: 350px;
    min-height: 230px;

    margin: 40px auto;

    padding: 30px 35px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    background: #ffffff;

    border-radius: 25px;

    font-family: 'Montserrat', sans-serif;

    box-shadow:
        10px 10px 25px rgba(0, 0, 0, 0.10),
        -10px -10px 25px rgba(255, 255, 255, 1);

    transition: all 0.3s ease;
}

.contacto-seccion:hover {
    transform: translateY(-4px);

    box-shadow:
        14px 14px 30px rgba(0, 0, 0, 0.13),
        -14px -14px 30px rgba(255, 255, 255, 1);
}

.contacto-seccion h4 {
    width: 100%;

    margin: 0 0 10px 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 15px;
    font-weight: 600;

    color: #231584;

    text-align: center;
}

.contacto-seccion p {
    width: 100%;

    margin: 5px 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;
    font-weight: 500;

    color: #0e0437;

    text-align: center;
}

.contacto-seccion a {
    display: inline-block;

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;
    font-weight: 500;

    color: #163d75;

    text-decoration: none;

    text-align: center;

    transition: 0.3s ease;
}

.contacto-seccion a:hover {
    color: #0f6a30;

    transform: translateY(-2px);
}

.contacto-seccion .whatsapp {
    width: 100%;

    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid #e0e5ec;

    text-align: center;
}

.contacto-seccion .whatsapp a {
    font-weight: 600;

    color: #163d75;
}

.contacto-seccion .whatsapp a:hover {
    color: #25D366;
}


/* =========================================================
   RESPONSIVE - TABLET GRANDE
========================================================= */

@media screen and (max-width: 1100px) {

    .header_ai {
        width: 92%;

        height: auto;
        min-height: 100px;

        padding: 15px 25px;

        gap: 20px;
    }

    .logo {
        width: 110px;
        height: 110px;
    }

    .marca {
        width: 220px;
        height: 120px;
    }

    .menu {
        flex-wrap: wrap;
        justify-content: center;
    }

    .banner,
    .banner2 {
        width: 90%;
        height: clamp(300px, 42vw, 470px);
    }

    .ai-container {
        width: 92%;

        grid-template-columns: repeat(3, 1fr);

        gap: 25px;

        padding: 20px;
    }

    .ai-galeria {
        min-height: 380px;
        padding: 20px;
    }

    .ai-galeria > a {
        height: 230px;
    }

    .info-empresa,
    .objetivos {
        width: 90%;
    }

    .producto-detalle {
        width: 90%;
    }

    .pie_ai {
        width: 92%;
    }

    .pie_ai h1 {
        margin-left: 30px;
    }

    .pie_ai h3 {
        margin-right: 30px;
    }


    /* VALORES */
    .contenedor-valores {
        width: 92%;
        gap: 25px;
    }

    .info-empresa1 {
        flex: 0 1 calc((100% - 50px) / 3);

        width: calc((100% - 50px) / 3);

        max-width: none;
    }
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media screen and (max-width: 800px) {

    .header_ai {
        flex-wrap: wrap;

        justify-content: center;

        text-align: center;

        border-radius: 30px;
    }

    .header_ai h1 {
        width: 100%;
        order: 2;
    }

    .logo {
        width: 90px;
        height: 90px;
    }

    .marca {
        width: 180px;
        height: 90px;
    }

    .menu {
        width: 100%;

        gap: 10px;

        justify-content: center;

        flex-wrap: wrap;
    }

    .menu a {
        padding: 10px 14px;

        font-size: 11px;
    }


    /* BANNERS */

    .banner,
    .banner2 {
        width: 92%;

        height: 330px;

        margin-top: 30px;
    }


    /* PRODUCTOS */

    .ai-container {
        width: 92%;

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

        padding: 10px;
    }

    .ai-galeria {
        min-height: 360px;

        padding: 18px;
    }

    .ai-galeria > a {
        height: 220px;
    }

    .ai-galeria img {
        width: 90%;
        height: 90%;
    }


    /* NOVEDADES */

    .ai-nov,
    .ai-nov-marcas {
        width: 92%;
    }

    .ai-nov img {
        width: 90%;
    }


    /* QUIENES SOMOS */

    .info-empresa {
        grid-template-columns: 1fr;

        width: 92%;

        padding: 30px;

        text-align: center;
    }

    .info-empresa img {
        width: 160px;

        grid-row: auto;

        margin: 0 auto 25px;
    }

    .info-empresa .descripcion {
        text-align: center;
    }

    .info-empresa > p:last-child {
        text-align: justify;
    }


    /* OBJETIVOS */

    .objetivos {
        width: 92%;

        grid-template-columns: 1fr;

        padding: 30px;

        column-gap: 0;
    }

    .objetivos > p.descripcion,
    .objetivos h2.descripcion,
    .objetivos h3.descripcion,
    .objetivos h4.descripcion,
    .objetivos > p:not(.descripcion) {
        grid-column: 1;
    }

    .objetivos img {
        grid-column: 1;

        grid-row: auto;

        width: min(250px, 80%);

        margin: 20px auto 0;
    }


    /* =====================================================
       VALORES - TABLET
    ===================================================== */

    .contenedor-valores {
        width: 92% !important;

        display: flex !important;

        flex-wrap: wrap !important;

        justify-content: center !important;

        align-items: stretch !important;

        gap: 20px !important;
    }

    .info-empresa1 {
        flex: 0 1 calc(50% - 10px) !important;

        width: calc(50% - 10px) !important;

        max-width: 340px !important;

        min-width: 0 !important;

        padding: 22px 18px !important;
    }

    .info-empresa1 img {
        width: 85px !important;
        height: 85px !important;
    }

    .info-empresa1 .descripcion {
        font-size: 20px !important;
    }


    /* FOOTER */

    .pie_ai {
        width: 92%;

        height: auto;

        min-height: 180px;

        padding: 25px;

        flex-wrap: wrap;

        justify-content: center;

        gap: 20px;

        border-radius: 30px;

        text-align: center;
    }

    .pie_ai h1,
    .pie_ai h2,
    .pie_ai h3 {
        position: static;

        margin: 0;

        transform: none;
    }

    .pie_ai p,
    .pie_ai a {
        font-size: 11px;
    }


    /* BANNER NOSOTROS */

    .bannernosotros {
        width: 70%;
    }


    /* PRODUCTO */

    .producto-detalle {
        width: 92%;

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 25px;
    }

    .producto-imagen {
        height: 330px;
    }

    .producto-info {
        text-align: center;
    }


    /* MAPA */

    .mapa-container {
        width: 92%;

        height: 350px;

        margin: 25px auto;

        border-radius: 15px;
    }


    .bannerproducto {
        width: 92%;
    }

    .contacto-seccion {
        width: min(90%, 350px);
    }
}


/* =========================================================
   RESPONSIVE - CELULAR
========================================================= */

@media screen and (max-width: 550px) {

    /* HEADER */

    .header_ai {
        width: calc(100% - 20px);

        height: auto;

        margin-top: 10px;

        padding: 15px;

        gap: 12px;

        border-radius: 25px;
    }

    .header_ai h1 {
        font-size: 22px;
    }

    .logo {
        width: 70px;
        height: 70px;
    }

    .marca {
        width: 140px;
        height: 70px;
    }


    /* MENÚ */

    .menu {
        width: 100%;

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }

    .menu a {
        width: 100%;

        padding: 10px 8px;

        font-size: 10px;

        text-align: center;
    }

    .dropdown {
        width: 100%;
    }

    .dropdown .dropbtn {
        width: 100%;

        text-align: center;
    }

    .dropdown-content {
        left: 0;

        transform: none;

        width: 100%;

        min-width: 0;
    }


    /* BANNERS */

    .banner,
    .banner2 {
        width: calc(100% - 20px);

        height: 220px;

        margin-top: 20px;

        border-radius: 18px;
    }


    /* GALERÍA */

    .ai-container {
        width: calc(100% - 20px);

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 5px;

        margin: 40px auto;
    }

    .ai-galeria {
        width: 100%;

        min-height: 350px;

        padding: 18px;

        border-radius: 25px;
    }

    .ai-galeria > a {
        height: 230px;
    }

    .ai-galeria img {
        width: 85%;
        height: 85%;
    }

    .ai-container .ai-galeria .ai-desc p {
        font-size: 15px;
    }

    .ai-desc #precio,
    .ai-desc .precio {
        font-size: 18px;
    }


    /* NOVEDADES */

    .ai-nov,
    .ai-nov-marcas {
        width: calc(100% - 20px);

        height: auto;

        min-height: 80px;

        margin: 35px auto 15px;

        border-radius: 20px;
    }

    .ai-nov img,
    .ai-nov-marcas img {
        width: 95%;
    }


    /* BANNER NOSOTROS */

    .bannernosotros {
        width: calc(100% - 30px);

        height: 45px;

        margin-top: 25px;
    }


    /* QUIENES SOMOS */

    .info-empresa {
        width: calc(100% - 20px);

        padding: 22px;

        margin: 25px auto;

        border-radius: 25px;
    }

    .info-empresa img {
        width: 130px;
    }

    .info-empresa .descripcion {
        font-size: 18px;
    }

    .info-empresa > p:last-child {
        font-size: 12px;

        line-height: 1.6;
    }


    /* OBJETIVOS */

    .objetivos {
        width: calc(100% - 20px);

        padding: 22px;

        margin: 25px auto;

        border-radius: 25px;
    }

    .objetivos > p.descripcion,
    .objetivos h2.descripcion,
    .objetivos h3.descripcion,
    .objetivos h4.descripcion {
        font-size: 18px;
    }

    .objetivos > p:not(.descripcion) {
        font-size: 12px;

        margin-bottom: 30px;
    }

    .objetivos img {
        width: 75%;
    }


    /* =====================================================
       VALORES - CELULAR
    ===================================================== */

    .contenedor-valores {
        width: calc(100% - 20px) !important;

        margin: 25px auto !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        flex-wrap: nowrap !important;

        justify-content: flex-start !important;

        align-items: center !important;

        gap: 20px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /*
       IMPORTANTE:
       Como .ultimos-valores usa display: contents,
       las 7 tarjetas se comportan como hijas del
       contenedor principal.
    */

    .info-empresa1 {
        flex: none !important;

        width: 100% !important;

        max-width: 340px !important;

        min-width: 0 !important;

        margin: 0 auto !important;

        padding: 22px 18px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }

    .info-empresa1 img {
        width: 85px !important;

        height: 85px !important;

        max-width: 85px !important;

        object-fit: contain !important;

        margin-bottom: 15px !important;
    }

    .info-empresa1 .descripcion {
        width: 100% !important;

        margin: 10px 0 15px !important;

        font-size: 20px !important;

        line-height: 1.2 !important;

        text-align: center !important;
    }

    .info-empresa1 p:last-child {
        width: 100% !important;

        margin: 0 !important;

        font-size: 14px !important;

        line-height: 1.5 !important;

        text-align: center !important;

        overflow-wrap: break-word !important;
    }


    /* PRODUCTO */

    .producto-detalle {
        width: calc(100% - 20px);

        min-height: auto;

        margin: 30px auto;

        padding: 18px;

        gap: 20px;

        border-radius: 25px;
    }

    .producto-imagen {
        height: 260px;

        border-radius: 20px;
    }

    .producto-info {
        padding: 10px;

        text-align: center;
    }

    .producto-info h2 {
        font-size: 23px;

        margin-bottom: 18px;
    }

    .descripcion-producto {
        font-size: 13px;

        line-height: 1.6;

        margin-bottom: 20px;
    }

    .precio-producto {
        font-size: 21px;
    }


    /* MAPA */

    .mapa-container {
        width: calc(100% - 20px);

        height: 280px;
    }


    /* BANNER PRODUCTO */

    .bannerproducto {
        width: calc(100% - 20px);

        margin: 25px auto;
    }


    /* CONTACTO */

    .contacto-seccion {
        width: calc(100% - 30px);

        min-height: 210px;

        padding: 25px 20px;

        margin: 25px auto;
    }

    .contacto-seccion h4 {
        font-size: 14px;
    }

    .contacto-seccion p,
    .contacto-seccion a {
        font-size: 11px;
    }


    /* REDES */

    .redes-flotantes {
        right: 15px;

        bottom: 15px;
    }

    .boton-redes {
        width: 50px;
        height: 50px;

        font-size: 19px;
    }

    .redes-menu a {
        width: 40px;
        height: 40px;

        font-size: 17px;
    }


    /* WHATSAPP */

    .whatsapp-flotante {
        right: 15px;

        bottom: 15px;

        width: 55px;
        height: 55px;

        font-size: 28px;
    }
}


/* =========================================================
   RESPONSIVE - CELULAR MUY PEQUEÑO
========================================================= */

@media screen and (max-width: 380px) {

    .header_ai h1 {
        font-size: 19px;
    }

    .logo {
        width: 60px;
        height: 60px;
    }

    .marca {
        width: 120px;
        height: 60px;
    }

    .menu {
        grid-template-columns: 1fr;
    }

    .banner,
    .banner2 {
        height: 190px;
    }

    .ai-galeria > a {
        height: 210px;
    }


    /* VALORES */

    .contenedor-valores {
        width: calc(100% - 16px) !important;

        gap: 16px !important;
    }

    .info-empresa1 {
        width: 100% !important;

        max-width: 320px !important;

        padding: 20px 15px !important;
    }

    .info-empresa1 img {
        width: 75px !important;
        height: 75px !important;
    }

    .info-empresa1 .descripcion {
        font-size: 19px !important;
    }

    .info-empresa1 p:last-child {
        font-size: 13px !important;
    }


    /* PRODUCTO */

    .producto-imagen {
        height: 230px;
    }

    .producto-info h2 {
        font-size: 20px;
    }

    .descripcion-producto {
        font-size: 12px;
    }


    /* CONTACTO */

    .contacto-seccion {
        width: calc(100% - 20px);
    }
}