/* =====================================================
   MI TIENDA - ESTILO COMPLETO
   ===================================================== */

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

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

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    font-family: "Segoe UI", Arial, sans-serif;

    color: #17202a;

    overflow-x: hidden;

    background-color: #dfe7ec;

    background-image:
        linear-gradient(
            rgba(15, 35, 48, 0.08),
            rgba(15, 35, 48, 0.08)
        ),
        url("mi-fondo.webp?v=2.0.0");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* =====================================================
   BARRA DE OFERTAS
   ===================================================== */

.barra-oferta {
    width: 100%;
    min-height: 34px;

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

    padding: 7px 15px;

    background: #f4a62a;
    color: #17202a;

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

    text-align: center;

    position: relative;
    z-index: 10000;
}


/* =====================================================
   HEADER
   ===================================================== */

header,
.header {
    width: 100%;
    max-width: 100%;

    background: rgba(10, 35, 51, 0.97);

    padding: 18px 6%;

    display: flex;
    align-items: center;

    gap: 22px;

    overflow: visible;

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.18);

    position: relative;

    z-index: 99999;
}


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

.logo {
    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.logo h1 {
    color: white;

    font-size: 30px;
    font-weight: 850;

    letter-spacing: 1px;

    white-space: nowrap;
}

.logo span {
    color: rgba(255,255,255,0.68);

    font-size: 10px;

    white-space: nowrap;
}


/* COMPATIBILIDAD CON HEADER ACTUAL */

header > h1 {
    color: white;

    font-size: 30px;
    font-weight: 800;

    letter-spacing: 1px;

    white-space: nowrap;

    flex-shrink: 0;
}


/* =====================================================
   BUSCADOR
   ===================================================== */

.buscador-principal {
    flex: 1;

    min-width: 0;

    position: relative;

    display: flex;
    align-items: center;

    z-index: 100;
}

.buscador-principal input,
header > input,
#buscador {
    width: 100%;
    min-width: 0;

    padding: 15px 22px;

    border-radius: 30px;

    border: 2px solid transparent;

    background: rgba(255,255,255,0.98);

    color: #17202a;

    font-family: inherit;

    font-size: 16px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.buscador-principal input::placeholder,
header > input::placeholder,
#buscador::placeholder {
    color: #7b8790;
}

.buscador-principal input:focus,
header > input:focus,
#buscador:focus {
    border-color: #f4a62a;

    box-shadow:
        0 0 0 3px rgba(244,166,42,0.18);
}


/* =====================================================
   BOTONES GENERALES
   ===================================================== */

button {
    border: none;

    border-radius: 10px;

    padding: 12px 20px;

    cursor: pointer;

    font-family: inherit;

    font-weight: 700;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

button:hover {
    transform: translateY(-1px);
}


/* =====================================================
   BOTÓN ENTRAR
   ===================================================== */

.boton-entrar {
    background: transparent;

    border: 1px solid rgba(255,255,255,0.45);

    color: white;

    white-space: nowrap;

    flex-shrink: 0;
}

.boton-entrar:hover {
    background: rgba(255,255,255,0.12);
}


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

#boton-carrito {
    background: #f4a62a;

    color: #17202a;

    white-space: nowrap;

    flex-shrink: 0;

    box-shadow:
        0 4px 12px rgba(244,166,42,0.25);
}

#boton-carrito:hover {
    background: #ffb63d;

    box-shadow:
        0 6px 16px rgba(244,166,42,0.35);
}


/* =====================================================
   CONTADOR
   ===================================================== */

#contador-carrito {
    display: inline-flex;

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

    min-width: 22px;
    height: 22px;

    padding: 2px 6px;

    margin-left: 5px;

    border-radius: 50%;

    background: #c0392b;

    color: white;

    font-size: 12px;
}


/* =====================================================
   SELECTOR DE IDIOMA
   ===================================================== */

.selector-idioma {
    position: relative;

    display: inline-block;

    flex-shrink: 0;

    z-index: 999999 !important;
}


/* BOTÓN DEL IDIOMA */

#boton-idioma {
    position: relative;

    z-index: 1000000;

    background: #ffffff;

    color: #102c3d;

    border: 1px solid #d9e1e5;

    border-radius: 12px;

    padding: 12px 18px;

    min-width: 145px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.10);
}

#boton-idioma:hover {
    background: #f7fafb;

    transform: translateY(-1px);

    box-shadow:
        0 6px 18px rgba(0,0,0,0.15);
}


/* =====================================================
   MENÚ DESPLEGABLE DE IDIOMAS
   ===================================================== */

.menu-idiomas {

    position: absolute;

    top: calc(100% + 8px);

    right: 0;

    width: 180px;

    padding: 7px;

    background: #ffffff;

    border: 1px solid #e1e6e9;

    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.28);

    display: none;

    flex-direction: column;

    gap: 4px;

    z-index: 9999999 !important;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;
}


/* MENÚ ABIERTO */

.menu-idiomas.abierto {

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    z-index: 9999999 !important;
}


/* OPCIONES */

.menu-idiomas button {

    width: 100%;

    border: none;

    background: #ffffff;

    color: #183b4d;

    padding: 11px 13px;

    border-radius: 8px;

    text-align: left;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transform: none;

    transition:
        background .2s ease,
        color .2s ease;
}

.menu-idiomas button:hover {

    background: #eef5f7;

    color: #12677a;

    transform: none;
}


/* IDIOMA ACTIVO */

.menu-idiomas button.idioma-activo {

    background: #12677a;

    color: #ffffff;
}


/* =====================================================
   NAVEGACIÓN
   ===================================================== */

nav,
.nav {
    width: 100%;
    max-width: 100%;

    background: rgba(16,55,75,0.98);

    padding: 14px 6%;

    display: flex;

    gap: 36px;

    align-items: center;

    overflow: visible;

    box-shadow:
        0 3px 12px rgba(0,0,0,0.12);

    position: relative;

    z-index: 100;
}

nav a,
.nav a {
    color: white;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        color .2s ease,
        opacity .2s ease;
}

nav a:hover,
.nav a:hover {
    color: #f4a62a;
}


/* =====================================================
   CARRUSEL
   ===================================================== */

.carrusel {
    width: 100%;

    min-height: 430px;

    position: relative;

    overflow: hidden;

    background:
        rgba(8,28,40,0.25);

    z-index: 1;
}

.slide {
    width: 100%;

    min-height: 430px;

    display: none;

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

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(8,28,40,0.88),
            rgba(8,28,40,0.48),
            rgba(8,28,40,0.15)
        );
}

.slide.activo {
    display: flex;
}


/* =====================================================
   CONTENIDO SLIDE
   ===================================================== */

.slide-contenido {
    width: 52%;

    max-width: 700px;

    padding: 55px 0 65px 8%;

    position: relative;

    z-index: 2;
}

.slide-contenido h2 {
    color: white;

    font-size: clamp(36px,5vw,62px);

    line-height: 1.04;

    margin: 12px 0 18px;

    font-weight: 850;

    letter-spacing: -1px;

    text-shadow:
        0 4px 16px rgba(0,0,0,0.4);
}

.slide-contenido p {
    color: rgba(255,255,255,0.94);

    font-size: 19px;

    line-height: 1.5;

    max-width: 570px;

    margin-bottom: 28px;
}

.etiqueta-promocion {
    display: inline-block;

    padding: 7px 13px;

    border-radius: 30px;

    background: #f4a62a;

    color: #17202a;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: 1px;
}

.slide-contenido button {
    background: #f4a62a;

    color: #17202a;

    font-size: 16px;

    padding: 14px 24px;

    border-radius: 9px;
}

.slide-contenido button:hover {
    background: #ffb63d;
}


/* =====================================================
   IMAGEN SLIDE
   ===================================================== */

.slide-imagen {
    width: 50%;

    height: 100%;

    min-height: 430px;

    display: flex;

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

    overflow: hidden;
}

.slide-imagen img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .92;
}


/* =====================================================
   VISUAL SLIDE
   ===================================================== */

.slide-visual {
    width: 48%;

    min-height: 430px;

    display: flex;

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

    font-size: 150px;

    background:
        radial-gradient(
            circle,
            rgba(244,166,42,0.30),
            transparent 65%
        );
}

.slide-visual span {
    filter:
        drop-shadow(
            0 15px 20px rgba(0,0,0,.35)
        );
}


/* =====================================================
   FLECHAS
   ===================================================== */

.flecha-carrusel {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;
    height: 50px;

    padding: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.92);

    color: #173546;

    font-size: 32px;

    z-index: 5;
}

.flecha-carrusel:hover {
    background: #f4a62a;

    transform:
        translateY(-50%)
        scale(1.05);
}

.flecha-carrusel.anterior {
    left: 20px;
}

.flecha-carrusel.siguiente {
    right: 20px;
}


/* =====================================================
   INDICADORES
   ===================================================== */

.indicadores {
    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 9px;

    z-index: 6;
}

.indicador {
    width: 11px;
    height: 11px;

    padding: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.60);

    border: 2px solid rgba(255,255,255,.50);
}

.indicador.activo {
    background: #f4a62a;

    border-color: #f4a62a;
}


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

.categorias {
    width: 100%;

    padding: 55px 6%;

    background: rgba(255,255,255,0.18);

    overflow: hidden;

    backdrop-filter: blur(3px);
}

.categorias h2,
.productos h2 {
    color: white;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 800;

    margin-bottom: 30px;

    text-shadow:
        0 2px 8px rgba(0,0,0,.45);
}

.categorias-container {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap: 20px;
}

.categoria {
    width: 100%;

    min-width: 0;

    padding: 20px 10px;

    border-radius: 16px;

    background: rgba(255,255,255,.24);

    border: 1px solid rgba(255,255,255,.35);

    backdrop-filter: blur(8px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.10);

    text-align: center;

    color: white;

    transition:
        transform .2s ease,
        background .2s ease;
}

.categoria:hover {
    transform: translateY(-5px);

    background: rgba(255,255,255,.35);
}

.icono {
    width: 90px;
    height: 90px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #f4a62a,
            #e67e22
        );

    display: flex;

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

    font-size: 38px;

    margin: 0 auto 13px;

    box-shadow:
        0 8px 18px rgba(0,0,0,.18);
}

.categoria p,
.categoria strong {
    color: white;

    font-size: 16px;

    font-weight: 800;

    text-shadow:
        0 2px 6px rgba(0,0,0,.35);
}


/* =====================================================
   PRODUCTOS
   ===================================================== */

.productos {
    width: 100%;

    padding: 55px 6%;

    background: rgba(9,32,45,0.20);

    overflow: hidden;
}

.productos-container {
    width: 100%;

    display: grid;

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

    gap: 25px;
}

.producto {
    width: 100%;

    min-width: 0;

    background: rgba(255,255,255,.93);

    padding: 18px;

    border-radius: 16px;

    border: 1px solid rgba(255,255,255,.70);

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

    backdrop-filter: blur(8px);

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.producto:hover {
    transform: translateY(-6px);

    box-shadow:
        0 16px 35px rgba(0,0,0,.25);
}


/* =====================================================
   IMAGEN PRODUCTO
   ===================================================== */

.producto-imagen {
    width: 100%;

    height: 180px;

    background:
        linear-gradient(
            135deg,
            rgba(16,55,75,.10),
            rgba(244,166,42,.12)
        );

    display: flex;

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

    font-size: 60px;

    border-radius: 12px;

    margin-bottom: 16px;

    overflow: hidden;
}

.producto-imagen {

    width: 100%;
    height: 220px;

    background: #ffffff;

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

    border-radius: 12px 12px 0 0;

    overflow: hidden;

    position: relative;

}

.producto-imagen img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 15px;

    transition: transform .3s ease;

}


.producto-imagen img:hover {

    transform: scale(1.05);

}


/* =====================================================
   INFORMACIÓN PRODUCTO
   ===================================================== */

.producto h3 {
    color: #102f41;

    margin-bottom: 9px;

    line-height: 1.25;

    font-size: 19px;

    font-weight: 750;

    overflow-wrap: break-word;
}

.producto p {
    color: #5f6b73;

    margin-bottom: 15px;

    line-height: 1.45;

    font-size: 14px;

    overflow-wrap: break-word;
}

.producto strong {
    display: block;

    color: #0d5c72;

    font-size: 23px;

    margin-bottom: 15px;

    font-weight: 800;
}

.producto button {
    background: #0d5c72;

    color: white;

    width: 100%;

    border-radius: 9px;

    padding: 12px;
}

.producto button:hover {
    background: #083f4f;

    box-shadow:
        0 5px 14px rgba(13,92,114,.25);
}


/* =====================================================
   CONTACTO
   ===================================================== */

.contacto {
    width: 100%;

    padding: 45px 7%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(13,92,114,.97),
            rgba(10,35,51,.98)
        );

    color: white;
}

.contacto h2 {
    font-size: 30px;

    margin: 7px 0 8px;
}

.contacto p {
    color: rgba(255,255,255,.78);

    font-size: 15px;

    line-height: 1.5;
}

.boton-whatsapp-contacto {
    flex-shrink: 0;

    padding: 14px 23px;

    border-radius: 10px;

    background: #25D366;

    color: white;

    text-decoration: none;

    font-weight: 800;
}

.boton-whatsapp-contacto:hover {
    background: #1da851;

    transform: translateY(-2px);
}


/* =====================================================
   CARRITO
   ===================================================== */

.carrito-ventana {
    display: none;

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    background: rgba(3,15,22,.72);

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

    padding: 20px;

    z-index: 99999999;

    backdrop-filter: blur(4px);
}

.carrito-contenido {
    position: relative;

    background: white;

    width: 100%;

    max-width: 650px;

    max-height: 85vh;

    overflow-y: auto;

    padding: 28px;

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);
}

.cerrar-carrito {
    position: absolute;

    right: 15px;
    top: 15px;

    background: #eef2f4;

    color: #17202a;

    font-size: 20px;

    padding: 7px 10px;
}

.carrito-contenido h2 {
    color: #10374b;

    margin-bottom: 25px;
}

.item-carrito {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto
        auto
        auto;

    align-items: center;

    gap: 15px;

    padding: 15px 0;

    border-bottom:
        1px solid #e1e6e9;
}

.info-producto {
    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 0;
}

.controles-cantidad {
    display: flex;

    align-items: center;

    gap: 8px;
}

.controles-cantidad button {
    width: 30px;
    height: 30px;

    padding: 0;

    background: #e9eef1;

    color: #173546;
}

.subtotal {
    color: #0d5c72;

    font-weight: 800;

    white-space: nowrap;
}

.eliminar-producto {
    background: transparent;

    padding: 5px;

    font-size: 18px;
}

.carrito-vacio {
    text-align: center;

    padding: 30px 10px;

    color: #78858d;
}

.total-carrito {
    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #173546;

    font-size: 20px;

    margin-top: 25px;

    padding-top: 20px;

    border-top:
        2px solid #dce3e7;
}

.finalizar-compra {
    width: 100%;

    margin-top: 20px;

    padding: 14px;

    background: #25D366;

    color: white;

    font-size: 16px;
}

.finalizar-compra:hover {
    background: #1da851;
}


/* =====================================================
   WHATSAPP FLOTANTE
   ===================================================== */

.whatsapp-flotante {
    position: fixed;

    right: 22px;
    bottom: 22px;

    width: 62px;
    height: 62px;

    display: flex;

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

    border-radius: 50%;

    background: #25D366;

    color: white;

    text-decoration: none;

    font-size: 31px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.28);

    z-index: 9000;

    border: 4px solid rgba(255,255,255,.85);
}

.whatsapp-flotante:hover {
    background: #1da851;

    transform: scale(1.08);
}


/* =====================================================
   FOOTER
   ===================================================== */

.footer {
    width: 100%;

    background: rgba(10,35,51,.98);

    color: white;

    border-top:
        1px solid rgba(255,255,255,.12);
}

.footer-redes {
    width: 100%;

    min-height: 80px;

    display: flex;

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

    gap: 55px;

    background: rgba(13,92,114,.96);

    padding: 18px 20px;
}

.footer-redes a {
    width: 42px;
    height: 42px;

    display: flex;

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

    color: white;

    text-decoration: none;

    font-size: 25px;

    border-radius: 50%;
}

.footer-redes a:hover {
    background: #f4a62a;

    color: #17202a;

    transform: translateY(-4px);
}

.footer-contenido {
    width: 100%;

    max-width: 1200px;

    margin: auto;

    padding: 45px 6%;

    display: grid;

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

    gap: 40px;
}

.footer-columna {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.footer-columna h3 {
    color: white;

    font-size: 18px;

    font-weight: 800;
}

.footer-columna a {
    color: rgba(255,255,255,.78);

    text-decoration: none;

    font-size: 14px;
}

.footer-columna a:hover {
    color: #f4a62a;

    transform: translateX(4px);
}

.footer-final {
    width: 100%;

    border-top:
        1px solid rgba(255,255,255,.12);

    padding: 20px 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: rgba(5,22,32,.96);
}

.footer-final p {
    color: rgba(255,255,255,.65);

    font-size: 13px;

    line-height: 1.5;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1100px) {

    .productos-container {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .categorias-container {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .slide-contenido {
        width: 58%;
    }

    .slide-imagen,
    .slide-visual {
        width: 42%;
    }
}


/* =====================================================
   TABLET PEQUEÑA
   ===================================================== */

@media (max-width: 900px) {

    header,
    .header {
        padding: 15px 4%;

        gap: 15px;
    }

    header > h1,
    .logo h1 {
        font-size: 26px;
    }

    nav,
    .nav {
        padding: 14px 4%;

        gap: 25px;
    }

    .categorias,
    .productos {
        padding-left: 4%;
        padding-right: 4%;
    }

    .footer-contenido {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


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

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }

    body {
        background-attachment: scroll;

        background-position: center top;

        background-size: cover;
    }


    /* HEADER MÓVIL */

    header,
    .header {
        width: 100%;

        padding: 15px 12px;

        display: grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        grid-template-areas:
            "titulo titulo"
            "buscador buscador"
            "entrar carrito"
            "idioma idioma";

        gap: 11px;

        overflow: visible;

        position: relative;

        z-index: 999999;
    }


    /* LOGO */

    .logo {
        grid-area: titulo;

        width: 100%;

        text-align: center;

        align-items: center;
    }

    .logo h1,
    header > h1 {
        font-size: 28px;

        text-align: center;

        width: 100%;
    }

    .logo span {
        display: none;
    }


    /* BUSCADOR */

    .buscador-principal {
        grid-area: buscador;

        width: 100%;

        z-index: 100;
    }

    .buscador-principal input,
    header > input,
    #buscador {
        width: 100%;

        height: 54px;

        padding: 0 20px;

        border-radius: 30px;

        font-size: 17px;

        border: 2px solid #d9e0e4;

        box-shadow:
            0 4px 12px rgba(0,0,0,.12);
    }


    /* BOTÓN ENTRAR */

    .boton-entrar {
        grid-area: entrar;

        width: 100%;

        height: 50px;

        font-size: 15px;
    }


    /* CARRITO */

    #boton-carrito {
        grid-area: carrito;

        width: 100%;

        max-width: none;

        height: 50px;

        font-size: 15px;
    }


    /* IDIOMA EN MÓVIL */

    .selector-idioma {
        grid-area: idioma;

        justify-self: center;

        width: auto;

        position: relative;

        z-index: 9999999 !important;
    }

    #boton-idioma {
        min-width: 180px;

        height: 48px;

        padding: 10px 16px;

        font-size: 14px;

        position: relative;

        z-index: 10000000;
    }

    .menu-idiomas {
        top: calc(100% + 7px);

        left: 50%;

        right: auto;

        transform: translateX(-50%);

        width: 190px;

        z-index: 99999999 !important;
    }


    /* NAVEGACIÓN */

    nav,
    .nav {
        width: 100%;

        padding: 12px 7px;

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 5px;

        flex-wrap: wrap;

        position: relative;

        z-index: 100;
    }

    nav a,
    .nav a {
        font-size: 13px;

        padding: 6px 8px;
    }


    /* CARRUSEL */

    .carrusel {
        min-height: 390px;

        position: relative;

        z-index: 1;
    }

    .slide {
        min-height: 390px;

        justify-content: center;

        text-align: center;
    }

    .slide-contenido {
        width: 100%;

        max-width: 100%;

        padding: 45px 35px 55px;

        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .slide-contenido h2 {
        font-size: 34px;
    }

    .slide-contenido p {
        font-size: 16px;
    }

    .slide-imagen,
    .slide-visual {
        display: none;
    }


    /* FLECHAS */

    .flecha-carrusel {
        width: 42px;
        height: 42px;

        font-size: 28px;
    }

    .flecha-carrusel.anterior {
        left: 9px;
    }

    .flecha-carrusel.siguiente {
        right: 9px;
    }


    /* CATEGORÍAS */

    .categorias {
        padding: 35px 15px;
    }

    .categorias h2,
    .productos h2 {
        font-size: 27px;
    }

    .categorias-container {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 14px;
    }

    .categoria {
        padding: 14px 8px;
    }

    .icono {
        width: 72px;
        height: 72px;

        font-size: 30px;
    }


    /* PRODUCTOS */

    .productos {
        padding: 35px 12px;
    }

    .productos-container {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 12px;
    }

    .producto {
        padding: 11px;

        border-radius: 13px;
    }

    .producto-imagen {
        height: 135px;

        font-size: 45px;
    }

    .producto h3 {
        font-size: 16px;
    }

    .producto p {
        font-size: 12px;

        line-height: 1.4;
    }

    .producto strong {
        font-size: 18px;
    }

    .producto button {
        padding: 11px 5px;

        font-size: 12px;
    }


    /* CONTACTO */

    .contacto {
        flex-direction: column;

        text-align: center;

        padding: 35px 20px;
    }

    .contacto h2 {
        font-size: 26px;
    }

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

        max-width: 330px;

        text-align: center;
    }


    /* CARRITO */

    .carrito-ventana {
        width: 100vw;
        height: 100vh;

        padding: 10px;
    }

    .carrito-contenido {
        width: 100%;

        max-width: 100%;

        max-height: 90vh;

        padding: 20px 15px;

        border-radius: 14px;
    }

    .item-carrito {
        grid-template-columns:
            minmax(0,1fr)
            auto;

        gap: 10px;
    }

    .info-producto {
        grid-column: 1 / 2;
    }

    .controles-cantidad {
        grid-column: 2 / 3;
    }

    .subtotal {
        grid-column: 1 / 2;
    }

    .eliminar-producto {
        grid-column: 2 / 3;

        justify-self: end;
    }


    /* WHATSAPP */

    .whatsapp-flotante {
        width: 57px;
        height: 57px;

        right: 15px;
        bottom: 15px;

        font-size: 27px;

        z-index: 9000;
    }


    /* FOOTER */

    .footer-redes {
        min-height: 70px;

        gap: 25px;

        padding: 15px 10px;
    }

    .footer-redes a {
        width: 38px;
        height: 38px;

        font-size: 22px;
    }

    .footer-contenido {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 30px 20px;

        padding: 35px 20px;
    }

    .footer-columna h3 {
        font-size: 16px;
    }

    .footer-columna a {
        font-size: 13px;
    }

    .footer-final {
        flex-direction: column;

        text-align: center;

        padding: 18px 15px;
    }
}


/* =====================================================
   TELÉFONOS PEQUEÑOS
   ===================================================== */

@media (max-width: 480px) {

    .barra-oferta {
        font-size: 12px;

        min-height: 30px;
    }


    /* HEADER */

    header,
    .header {
        padding: 13px 9px;

        gap: 8px;
    }

    .logo h1,
    header > h1 {
        font-size: 24px;
    }


    /* BUSCADOR */

    .buscador-principal input,
    header > input,
    #buscador {
        height: 56px;

        font-size: 16px;

        padding: 0 18px;
    }


    /* BOTONES */

    header button {
        height: 48px;

        font-size: 13px;

        padding: 8px;
    }


    /* IDIOMA */

    #boton-idioma {
        min-width: 175px;

        height: 46px;

        font-size: 13px;
    }

    .menu-idiomas {
        width: 180px;
    }

    .menu-idiomas button {
        padding: 10px;

        font-size: 13px;
    }


    /* MENÚ */

    nav,
    .nav {
        gap: 2px;

        padding: 10px 4px;
    }

    nav a,
    .nav a {
        font-size: 12px;

        padding: 5px 6px;
    }


    /* CARRUSEL */

    .carrusel,
    .slide {
        min-height: 340px;
    }

    .slide-contenido {
        padding: 38px 28px 50px;
    }

    .slide-contenido h2 {
        font-size: 28px;
    }

    .slide-contenido p {
        font-size: 14px;
    }


    /* CATEGORÍAS */

    .categorias {
        padding: 30px 10px;
    }

    .categorias-container {
        gap: 10px;
    }

    .categoria {
        padding: 12px 6px;
    }

    .icono {
        width: 65px;
        height: 65px;

        font-size: 27px;
    }

    .categoria p,
    .categoria strong {
        font-size: 14px;
    }


    /* PRODUCTOS */

    .productos {
        padding: 30px 10px;
    }

    .productos-container {
        gap: 10px;
    }

    .producto {
        padding: 9px;

        border-radius: 11px;
    }

    .producto-imagen {
        height: 115px;

        font-size: 40px;
    }

    .producto h3 {
        font-size: 14px;
    }

    .producto p {
        font-size: 11px;

        line-height: 1.3;
    }

    .producto strong {
        font-size: 16px;

        margin-bottom: 10px;
    }

    .producto button {
        font-size: 11px;

        padding: 9px 2px;
    }


    /* WHATSAPP */

    .whatsapp-flotante {
        width: 54px;
        height: 54px;

        right: 12px;
        bottom: 12px;

        font-size: 25px;
    }


    /* FOOTER */

    .footer-redes {
        gap: 12px;

        justify-content: space-around;
    }

    .footer-redes a {
        width: 34px;
        height: 34px;

        font-size: 20px;
    }

    .footer-contenido {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 30px 20px;
    }

    .footer-columna {
        border-bottom:
            1px solid rgba(255,255,255,.10);

        padding-bottom: 20px;
    }

    .footer-columna:last-child {
        border-bottom: none;

        padding-bottom: 0;
    }
}


/* =====================================================
   TELÉFONOS MUY PEQUEÑOS
   ===================================================== */

@media (max-width: 360px) {

    header,
    .header {
        grid-template-columns:
            1fr 1fr;

        grid-template-areas:
            "titulo titulo"
            "buscador buscador"
            "entrar carrito"
            "idioma idioma";
    }

    .logo {
        grid-area: titulo;
    }

    .buscador-principal,
    header > input {
        grid-area: buscador;
    }

    .boton-entrar {
        grid-area: entrar;
    }

    #boton-carrito {
        grid-area: carrito;
    }

    .selector-idioma {
        grid-area: idioma;
    }

    nav a,
    .nav a {
        font-size: 11px;

        padding: 4px;
    }

    .productos-container {
        grid-template-columns: 1fr;
    }

    .producto-imagen {
        height: 150px;
    }
}


/* =====================================================
   PROTECCIÓN FINAL DEL MENÚ DE IDIOMAS
   ===================================================== */

/*
   Estas reglas tienen prioridad sobre las anteriores
   para impedir que el carrusel o el fondo oculten
   el menú desplegable.
*/

header,
.header {
    position: relative !important;
    z-index: 999999 !important;

    overflow: visible !important;
}

.selector-idioma {
    position: relative !important;

    z-index: 9999999 !important;
}

#boton-idioma {
    position: relative !important;

    z-index: 99999999 !important;
}

.menu-idiomas {
    position: absolute !important;

    z-index: 999999999 !important;
}

.menu-idiomas.abierto {
    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    z-index: 999999999 !important;
}

.carrusel {
    z-index: 1 !important;
}

/* =====================================================
   CARRITO FLOTANTE
===================================================== */

.carrito-flotante {

    position: fixed;

    right: 22px;

    bottom: 22px;

    width: 62px;

    height: 62px;

    border: none;

    border-radius: 50%;

    background: #0d5c72;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 9998;

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

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

}


/* ICONO */

.icono-carrito-flotante {

    font-size: 27px;

    line-height: 1;

}


/* EFECTO AL PASAR EL MOUSE */

.carrito-flotante:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.30);

}


/* CONTADOR */

.contador-carrito-flotante {

    position: absolute;

    top: -4px;

    right: -4px;

    min-width: 25px;

    height: 25px;

    padding: 0 6px;

    border-radius: 50px;

    background: #f5a623;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 800;

    border: 2px solid #ffffff;

}


/* =====================================================
   ANIMACIÓN DEL CARRITO
===================================================== */

.carrito-flotante.animar {

    animation:
        rebote-carrito 0.45s ease;

}


@keyframes rebote-carrito {

    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.18);
    }

    65% {
        transform: scale(0.94);
    }

    100% {
        transform: scale(1);
    }

}


/* =====================================================
   NOTIFICACIÓN
===================================================== */

.notificacion-carrito {

    position: fixed;

    right: 22px;

    bottom: 98px;

    width: min(
        360px,
        calc(100% - 30px)
    );

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 12px;

    background: #ffffff;

    border: 1px solid #e3eaed;

    border-radius: 16px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.18);

    z-index: 9999;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

}


/* NOTIFICACIÓN VISIBLE */

.notificacion-carrito.mostrar {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


/* ICONO */

.notificacion-icono {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #25d366;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    font-weight: 800;

}


/* TEXTO */

.notificacion-texto {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.notificacion-texto strong {

    color: #0d3447;

    font-size: 14px;

}


.notificacion-texto span {

    color: #687982;

    font-size: 13px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* BOTÓN VER CARRITO */

#ver-carrito-notificacion {

    flex-shrink: 0;

    border: none;

    border-radius: 9px;

    padding: 9px 12px;

    background: #0d5c72;

    color: white;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 600px) {

    .carrito-flotante {

        width: 58px;

        height: 58px;

        right: 15px;

        bottom: 15px;

    }


    .icono-carrito-flotante {

        font-size: 25px;

    }


    .notificacion-carrito {

        right: 15px;

        bottom: 85px;

        width: calc(100% - 30px);

    }

}

/* =====================================================
   BOTONES FLOTANTES
===================================================== */

/* CARRITO */

.carrito-flotante {

    position: fixed !important;

    right: 20px !important;

    bottom: 92px !important;

    z-index: 9998 !important;

}


/* WHATSAPP */

.whatsapp-flotante {

    position: fixed !important;

    right: 20px !important;

    bottom: 20px !important;

    z-index: 9997 !important;

}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 600px) {

    .carrito-flotante {

        right: 15px !important;

        bottom: 82px !important;

    }


    .whatsapp-flotante {

        right: 15px !important;

        bottom: 15px !important;

    }

}


/* =====================================================
   TARJETAS DE PRODUCTO - DISEÑO OSCURO
===================================================== */

.productos-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.producto {

    display: flex;
    flex-direction: column;

    min-height: 430px;

    padding: 0;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.12);

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.producto:hover {
    transform: translateY(-7px);
    border-color: rgba(245, 166, 35, .8);
    box-shadow: 0 20px 38px rgba(0, 0, 0, .32);
}

.producto-imagen {

    height: 230px;

    margin: 0;

    border-radius: 18px 18px 0 0;

    background: #ffffff;

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

    overflow: hidden;

}

.producto:hover .producto-imagen {
    transform: scale(1.04);
}

.producto-imagen span {
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45));
}

.producto-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 20px 0;
}

.producto-categoria {
    width: fit-content;
    margin-bottom: 9px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(245, 166, 35, .15);
    color: #f7bd55;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.producto h3 {
    margin-bottom: 7px;
    color: #fff;
    font-size: 20px;
}

.producto p {
    margin-bottom: 14px;
    color: #b7b7b7;
    font-size: 14px;
}

.producto strong {
    margin-top: auto;
    margin-bottom: 12px;
    color: #f6c86e;
    font-size: 21px;
}

.producto button {
    width: calc(100% + 40px);
    margin-left: -20px;
    padding: 13px 16px;
    border-radius: 0 0 27px 27px;
    background: #2b2b2b;
    border-top: 1px solid #3c3c3c;
    color: #fff;
    font-size: 13px;
}

.producto button:hover {
    background: #0d5c72;
    box-shadow: none;
}

@media (max-width: 1000px) {
    .productos-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .productos-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .producto {
        min-height: 365px;
    }
}


/* =====================================================
   ASISTENTE VIRTUAL GRATUITO
===================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.asistente-virtual {
    position: fixed;
    right: 20px;
    bottom: 166px;
    z-index: 1000000001;
}

.asistente-boton {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: linear-gradient(135deg, #5936a8, #204f94);
    color: #fff;
    box-shadow: 0 10px 24px rgba(23, 27, 74, .35);
    font-weight: 800;
    cursor: pointer;
}

.asistente-boton > span:first-child {
    font-size: 20px;
}

.asistente-panel {
    position: absolute;
    right: 0;
    bottom: 64px;
    display: flex;
    width: min(350px, calc(100vw - 30px));
    max-height: 480px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dfe4ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(.98);
    transition: opacity .2s ease, transform .2s ease;
}

.asistente-virtual.abierto .asistente-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.asistente-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 18px;
    background: linear-gradient(135deg, #243f87, #643aa2);
    color: #fff;
}

.asistente-encabezado strong,
.asistente-encabezado span {
    display: block;
}

.asistente-encabezado strong {
    font-size: 15px;
}

.asistente-encabezado span {
    margin-top: 4px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
}

.asistente-encabezado i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-radius: 50%;
    background: #75ed9a;
}

.asistente-cerrar {
    padding: 0 3px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.asistente-mensajes {
    display: flex;
    min-height: 165px;
    max-height: 235px;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    overflow-y: auto;
    background: #f6f8fc;
}

.asistente-mensajes p {
    width: fit-content;
    max-width: 90%;
    margin: 0;
    padding: 10px 12px;
    border-radius: 13px;
    font-size: 13px;
    line-height: 1.4;
}

.mensaje-asistente {
    border-bottom-left-radius: 3px !important;
    background: #e7ebf8;
    color: #26345a;
}

.mensaje-cliente {
    align-self: flex-end;
    border-bottom-right-radius: 3px !important;
    background: #315eac;
    color: #fff;
}

.asistente-sugerencias {
    display: flex;
    gap: 7px;
    padding: 10px 12px;
    overflow-x: auto;
    border-top: 1px solid #ebedf2;
}

.asistente-sugerencias button {
    flex: 0 0 auto;
    padding: 7px 9px;
    border: 1px solid #d5daea;
    border-radius: 999px;
    background: #fff;
    color: #334a83;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.asistente-formulario {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #ebedf2;
}

.asistente-formulario input {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d5daea;
    border-radius: 10px;
    color: #1f2a43;
    font: inherit;
    font-size: 13px;
}

.asistente-formulario input:focus {
    outline: 2px solid rgba(74, 92, 180, .3);
    border-color: #4a5cb4;
}

.asistente-formulario button {
    width: 39px;
    border: 0;
    border-radius: 10px;
    background: #315eac;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .asistente-virtual {
        right: 15px;
        bottom: 150px;
    }

    .asistente-boton-texto {
        display: none;
    }

    .asistente-boton {
        width: 52px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }
}


/* =====================================================
   REFINAMIENTO VISUAL - SISTEMA DE DISEÑO
===================================================== */

:root {
    --fondo-profundo: #071923;
    --superficie: #102a38;
    --superficie-clara: #163949;
    --texto-principal: #f4f8fa;
    --texto-secundario: #b8c9d1;
    --turquesa: #2ac6bb;
    --turquesa-oscuro: #149b96;
    --ambar: #f4b842;
    --borde-suave: rgba(201, 231, 235, .17);
}

body {
    color: var(--texto-principal);
    background-color: var(--fondo-profundo);
    background-image:
        linear-gradient(180deg, rgba(4, 18, 28, .86), rgba(7, 25, 35, .92)),
        url("mi-fondo.webp?v=2.0.0");
}

::selection {
    background: var(--turquesa);
    color: #06202a;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(42, 198, 187, .62);
    outline-offset: 3px;
}

.barra-oferta {
    min-height: 38px;
    background: linear-gradient(90deg, #f7be52, #f4a83c);
    color: #1c2730;
    font-size: 13px;
    letter-spacing: .02em;
}

header,
.header {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--borde-suave);
    background: rgba(7, 25, 35, .94);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    backdrop-filter: blur(16px);
}

.logo h1,
header > h1 {
    color: #fff;
    letter-spacing: -.02em;
}

.logo h1::first-letter {
    color: var(--turquesa);
}

.logo span {
    color: #9cb8c2;
    letter-spacing: .08em;
}

.buscador-principal input,
header > input,
#buscador {
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .97);
    box-shadow: inset 0 1px 1px rgba(14, 41, 53, .08);
}

.buscador-principal input:focus,
header > input:focus,
#buscador:focus {
    border-color: var(--turquesa);
    box-shadow: 0 0 0 4px rgba(42, 198, 187, .16);
}

.boton-entrar {
    border-color: rgba(42, 198, 187, .62);
    color: #dcfffb;
}

.boton-entrar:hover {
    background: rgba(42, 198, 187, .13);
}

#boton-carrito {
    background: linear-gradient(135deg, var(--turquesa), var(--turquesa-oscuro));
    color: #05242c;
    box-shadow: 0 8px 18px rgba(16, 147, 144, .25);
}

nav,
.nav {
    gap: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: rgba(13, 43, 57, .92);
    backdrop-filter: blur(12px);
}

nav a,
.nav a {
    color: #d9e8ed;
    letter-spacing: .01em;
}

nav a:hover,
.nav a:hover {
    color: var(--turquesa);
}

.carrusel {
    background: #091e2a;
}

.slide {
    background: linear-gradient(90deg, rgba(4, 18, 28, .95), rgba(7, 30, 41, .78), rgba(7, 30, 41, .2));
}

.slide-contenido h2 {
    letter-spacing: -.045em;
    text-shadow: 0 5px 20px rgba(0, 0, 0, .42);
}

.slide-contenido p {
    color: #d7e4e8;
}

.etiqueta-promocion,
.slide-contenido button {
    background: linear-gradient(135deg, #f9c65e, var(--ambar));
    color: #17242d;
    box-shadow: 0 10px 22px rgba(244, 184, 66, .2);
}

.slide-contenido button:hover {
    background: linear-gradient(135deg, #ffda84, #f4b842);
}

.slide-visual {
    background: radial-gradient(circle, rgba(42, 198, 187, .2), transparent 65%);
}

.flecha-carrusel {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(12, 41, 53, .78);
    color: #fff;
    backdrop-filter: blur(8px);
}

.flecha-carrusel:hover {
    background: var(--turquesa);
    color: #06242b;
}

.indicador.activo {
    background: var(--turquesa);
    border-color: var(--turquesa);
}

.categorias,
.productos {
    background: linear-gradient(180deg, rgba(9, 31, 43, .91), rgba(6, 23, 33, .94));
}

.categorias h2,
.productos h2,
.seccion-titulo h2 {
    color: #f7fbfc;
    letter-spacing: -.035em;
    text-shadow: none;
}

.seccion-titulo > span,
.seccion-titulo p {
    color: var(--texto-secundario);
}

.categoria {
    border-color: var(--borde-suave);
    background: linear-gradient(145deg, rgba(25, 64, 80, .86), rgba(13, 41, 54, .9));
    box-shadow: 0 12px 25px rgba(0, 0, 0, .16);
}

.categoria:hover {
    border-color: rgba(42, 198, 187, .6);
    background: linear-gradient(145deg, rgba(28, 78, 91, .96), rgba(14, 48, 61, .96));
}

.icono {
    background: linear-gradient(135deg, #32d2c5, #168da0);
    box-shadow: 0 10px 22px rgba(11, 142, 151, .25);
}

.categoria p,
.categoria strong {
    color: #f3fbfc;
    text-shadow: none;
}

.productos-container {
    border: 0;
}

.producto {
    border-color: rgba(181, 216, 221, .16);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}

.producto:hover {
    border-color: rgba(42, 198, 187, .75);
}

.producto-categoria {
    background: rgba(42, 198, 187, .13);
    color: #70eee2;
}

.producto strong {
    color: #f9c96f;
}

.producto button:hover {
    background: linear-gradient(135deg, #149b96, #11798d);
}

.contacto {
    background: linear-gradient(120deg, #0d3e50, #10275d);
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.boton-whatsapp-contacto {
    background: #25d366;
    color: #092b1b;
    box-shadow: 0 10px 20px rgba(16, 137, 69, .25);
}

.footer {
    background: #06151e;
    border-top-color: rgba(42, 198, 187, .25);
}

.footer-redes {
    background: #0c2d3c;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-redes a:hover {
    background: var(--turquesa);
    color: #06232b;
}

.footer-columna h3 {
    color: #f5fbfc;
}

.footer-columna a,
.footer-final p {
    color: #a9c0c9;
}

.footer-columna a:hover {
    color: var(--turquesa);
}

.footer-final {
    background: #040f16;
}

/* Mejoras de compra: filtros, favoritos, cupones y checkout */
.herramientas-catalogo { max-width: 1180px; margin: 0 auto 25px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.chips-categorias { display:flex; gap:8px; flex-wrap:wrap; }
.chips-categorias button, .ordenar-productos select { border:1px solid rgba(42,198,187,.35); border-radius:999px; padding:8px 13px; color:#dff7f5; background:#103d4c; font:inherit; cursor:pointer; }
.chips-categorias button.activo { background:var(--turquesa); color:#052b33; border-color:var(--turquesa); font-weight:800; }
.ordenar-productos { color:#bcd2d8; display:flex; align-items:center; gap:8px; font-size:.9rem; }
.ordenar-productos select { border-radius:8px; color:#eaf8f8; }
.producto-imagen { position:relative; }
.favorito-producto { position:absolute; right:12px; top:12px; width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.94); color:#0b5669; font-size:24px; line-height:1; box-shadow:0 5px 14px rgba(0,0,0,.2); cursor:pointer; }
.favorito-producto.activo { color:#e14c65; }
.resumen-compra { margin-top:18px; color:#1b3d4a; }
.beneficio-envio { background:#eef7f7; border:1px solid #c7e8e4; padding:11px 13px; border-radius:10px; font-size:.88rem; }
.beneficio-envio.completo { background:#e9f9ef; border-color:#a7dfb6; color:#167540; font-weight:700; }
.beneficio-envio > div { height:7px; margin-top:8px; border-radius:99px; overflow:hidden; background:#d5e5e6; }.beneficio-envio i { display:block; height:100%; border-radius:inherit; background:#20a99e; }
.cupon-compra { margin-top:14px; }.cupon-compra label { display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; }.cupon-compra > div { display:flex; gap:8px; }.cupon-compra input { min-width:0; flex:1; padding:10px; border:1px solid #cddade; border-radius:8px; text-transform:uppercase; }.cupon-compra button { padding:0 14px; border:0; border-radius:8px; background:#0d5c72; color:#fff; font-weight:700; cursor:pointer; }.cupon-compra small { display:block; margin-top:6px; color:#55717b; }
.desglose-compra { display:grid; gap:6px; margin-top:13px; font-size:.92rem; }.desglose-compra span { display:flex; justify-content:space-between; }.desglose-compra .descuento { color:#16804a; }.vaciar-carrito { border:0; background:transparent; color:#a13b46; text-decoration:underline; padding:10px 0 0; cursor:pointer; }.vaciar-carrito:disabled { opacity:.45; cursor:not-allowed; }
.checkout-datos { display:none; position:fixed; inset:0; z-index:100000000; overflow:auto; padding:20px; background:rgba(3,15,22,.78); align-items:center; justify-content:center; backdrop-filter:blur(4px); }.checkout-datos.visible { display:flex; }.checkout-form { position:relative; width:min(100%,520px); padding:32px; border-radius:18px; background:#fff; color:#173546; box-shadow:0 20px 60px rgba(0,0,0,.38); }.checkout-form h2 { margin:5px 0 8px; color:#10374b; }.checkout-form > p { margin-top:0; color:#607980; font-size:.92rem; }.checkout-paso { color:#168d86; font-weight:800; font-size:.76rem; letter-spacing:.1em; }.checkout-form label { display:block; margin:13px 0 0; font-weight:700; font-size:.9rem; }.checkout-form input,.checkout-form textarea,.checkout-form select { display:block; box-sizing:border-box; width:100%; margin-top:6px; padding:11px; border:1px solid #cbdadd; border-radius:8px; color:#173546; font:inherit; }.checkout-form textarea { resize:vertical; }.checkout-cerrar { position:absolute; top:13px; right:13px; border:0; background:#edf2f3; border-radius:50%; width:32px; height:32px; font-size:21px; cursor:pointer; }.confirmar-pedido { width:100%; margin-top:20px; padding:13px; border:0; border-radius:9px; background:#25d366; color:#07371e; font-family:inherit; font-size:1rem; font-weight:800; cursor:pointer; }
@media (max-width:600px) { .herramientas-catalogo { margin-inline:16px; }.ordenar-productos { width:100%; justify-content:space-between; }.checkout-form { padding:28px 20px 22px; }.cupon-compra > div { flex-wrap:wrap; }.cupon-compra button { padding:10px 14px; } }

/* Las ventanas de compra siempre deben quedar encima de la ayuda flotante. */
.carrito-ventana { z-index: 1000000002 !important; }
.checkout-datos { z-index: 1000000003 !important; }
.compartir-carrito { display:block; width:100%; margin-top:12px; padding:11px; border:1px solid #78b9b6; border-radius:9px; background:#f2fbfa; color:#0c6663; font-weight:800; cursor:pointer; }
.compartir-carrito:hover { background:#dff5f2; }.compartir-carrito:disabled { opacity:.5; cursor:not-allowed; }

a[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .65;
}

.descubridor-compras {
    width: min(1180px, calc(100% - 32px));
    margin: 32px auto;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid rgba(42, 198, 187, .3);
    border-radius: 24px;
    color: #eafdfb;
    background: linear-gradient(145deg, #092b3a, #103f4c);
    box-shadow: 0 18px 50px rgba(2, 18, 27, .24);
}

.descubridor-encabezado span { color:#55ded3; font-weight:900; letter-spacing:.1em; font-size:.78rem; }
.descubridor-encabezado h2 { margin:8px 0; font-size:clamp(1.55rem,4vw,2.5rem); }
.descubridor-encabezado p { color:#b9d8dc; }
.descubridor-formulario { display:grid; grid-template-columns:1fr 2fr; gap:16px; margin-top:22px; }
.descubridor-formulario label { display:grid; gap:7px; font-weight:800; }
.descubridor-formulario input { width:100%; padding:13px; border:1px solid #4b7781; border-radius:10px; color:#102f3b; font:inherit; }
.acciones-inteligentes { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:10px; }
.acciones-inteligentes button,.boton-inteligente,.presupuestos-rapidos button { border:0; border-radius:10px; padding:11px 16px; background:#2ac6bb; color:#062e37; font-weight:900; cursor:pointer; }
.acciones-inteligentes button:last-child { background:#f4b842; }
.presupuestos-rapidos { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.presupuestos-rapidos button { padding:8px 13px; background:#164f5d; color:#eafdfb; border:1px solid #397885; }
.filtro-vendedor { display:flex; align-items:center; gap:10px; margin:12px 0; font-weight:800; }
.filtro-vendedor select { padding:9px 12px; border:1px solid #4b7781; border-radius:9px; font:inherit; }
.busqueda-foto { margin-top:14px; padding:13px 15px; border-radius:12px; background:rgba(255,255,255,.07); }
.busqueda-foto summary { cursor:pointer; font-weight:900; }
.busqueda-foto p { color:#bdd8dc; font-size:.88rem; }
.contenedor-resultados { margin-top:22px; }
.resultados-inteligentes { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.resultado-inteligente { display:flex; flex-direction:column; gap:8px; padding:17px; border-radius:14px; background:#fff; color:#123b4a; }
.resultado-inteligente h4,.resultado-inteligente p { margin:0; }
.resultado-inteligente small { margin-top:auto; color:#58747d; }
.resultado-categoria { color:#138a83; font-size:.78rem; font-weight:900; text-transform:uppercase; }
.confianza-vendedor { margin:9px 0; color:#2b666d; font-size:.76rem; line-height:1.4; }
.acciones-producto-inteligente { display:flex; gap:7px; margin:8px 0; }
.acciones-producto-inteligente button { flex:1; padding:7px; border:1px solid #79aaa9; border-radius:8px; color:#0c6265; background:#eefafa; cursor:pointer; }
.acciones-producto-inteligente button.activo { background:#2ac6bb; color:#062e37; }
.comparador-productos { position:fixed; z-index:99999999; left:50%; bottom:14px; transform:translateX(-50%); width:min(900px,calc(100% - 24px)); max-height:50vh; overflow:auto; padding:18px; border-radius:16px; color:#eafdfb; background:#071f2b; box-shadow:0 12px 45px rgba(0,0,0,.45); }
.tabla-comparador { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; }
.tabla-comparador article { display:grid; gap:5px; padding:11px; border-radius:9px; background:#123e4c; }
.alerta-precio { position:fixed; z-index:999999999; left:16px; bottom:16px; max-width:420px; padding:14px 18px; border-radius:12px; background:#f4b842; color:#2f260a; font-weight:800; box-shadow:0 8px 28px rgba(0,0,0,.3); }

@media (max-width: 680px) {
    .descubridor-formulario { grid-template-columns:1fr; }
    .acciones-inteligentes { grid-column:auto; }
}

/* =====================================================
   CORRECCIÓN DEFINITIVA DEL MENÚ DE IDIOMAS
   ===================================================== */

/*
   El menú queda anclado directamente al botón de idioma.
   Esto evita que tome como referencia el selector de moneda,
   el carrusel o cualquier otro elemento del header.
*/

.selector-idioma {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    z-index: 999999999 !important;

    overflow: visible !important;
}


/* =====================================================
   BOTÓN DE IDIOMA
   ===================================================== */

#boton-idioma {

    position: relative !important;

    z-index: 999999999 !important;

    min-width: 180px !important;

    height: 52px;

    padding: 10px 18px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px;

    border: 2px solid #12677a !important;

    border-radius: 15px !important;

    background: #ffffff !important;

    color: #123b4a !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 5px 16px rgba(0,0,0,.15) !important;
}


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

.menu-idiomas {

    /*
       IMPORTANTE:
       fixed evita que el menú quede atrapado
       dentro de otro elemento del header.
    */

    position: fixed !important;

    /*
       Posición inicial de respaldo.
       JavaScript puede actualizarla si existe.
    */

    top: 120px !important;

    right: auto !important;

    left: auto !important;

    width: 220px !important;

    min-width: 220px !important;

    max-width: calc(100vw - 20px);

    padding: 8px !important;

    margin: 0 !important;

    display: none !important;

    flex-direction: column !important;

    gap: 4px !important;

    background: #ffffff !important;

    border: 1px solid #d9e3e7 !important;

    border-radius: 16px !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28) !important;

    z-index: 9999999999 !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    overflow: hidden !important;
}


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

.menu-idiomas.abierto {

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    z-index: 9999999999 !important;
}


/* =====================================================
   OPCIONES
   ===================================================== */

.menu-idiomas button {

    width: 100% !important;

    min-height: 48px;

    padding: 12px 14px !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    border: none !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #183b4d !important;

    text-align: left !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 650 !important;

    cursor: pointer !important;

    transform: none !important;

    box-shadow: none !important;
}


/* HOVER */

.menu-idiomas button:hover {

    background: #edf7f9 !important;

    color: #12677a !important;

    transform: none !important;
}


/* IDIOMA SELECCIONADO */

.menu-idiomas button.idioma-activo {

    background: #12677a !important;

    color: #ffffff !important;
}


/* =====================================================
   EVITAR QUE MONEDA TOME CONTROL DEL MENÚ
   ===================================================== */

#selector-moneda,
.selector-moneda {

    position: relative;

    z-index: 9000;

}


/*
   Si existe un contenedor del selector de moneda,
   no debe afectar el menú de idiomas.
*/

.moneda-container,
.currency-selector,
.selector-moneda {

    overflow: visible !important;

}


/* =====================================================
   HEADER
   ===================================================== */

header,
.header {

    position: relative !important;

    z-index: 999999 !important;

    overflow: visible !important;
}


/* =====================================================
   EVITAR QUE EL CARRUSEL SE PONGA ENCIMA
   ===================================================== */

.carrusel,
.slide {

    z-index: 1 !important;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 900px) {

    .menu-idiomas {

        width: 210px !important;

        min-width: 210px !important;

    }

}


/* =====================================================
   CELULAR
   ===================================================== */

@media (max-width: 768px) {

    .selector-idioma {

        width: auto !important;

        position: relative !important;

        z-index: 999999999 !important;

    }


    #boton-idioma {

        min-width: 180px !important;

        width: 180px !important;

        height: 48px;

        font-size: 14px !important;

    }


    .menu-idiomas {

        width: 205px !important;

        min-width: 205px !important;

        max-width: calc(100vw - 20px);

    }

}


/* =====================================================
   TELÉFONOS PEQUEÑOS
   ===================================================== */

@media (max-width: 480px) {

    #boton-idioma {

        width: 175px !important;

        min-width: 175px !important;

        height: 46px;

        font-size: 13px !important;

    }


    .menu-idiomas {

        width: 190px !important;

        min-width: 190px !important;

    }


    .menu-idiomas button {

        min-height: 45px;

        padding: 10px 12px !important;

        font-size: 13px !important;

    }

}

/* =========================================================
   MI TIENDA
   DISEÑO PREMIUM DE BOTONES
   VERSIÓN 1.0
   ========================================================= */


/* =========================================================
   VARIABLES DEL DISEÑO
   ========================================================= */

:root {

    --premium-azul:
        #0b2633;

    --premium-azul-2:
        #103c4d;

    --premium-turquesa:
        #18b9ad;

    --premium-turquesa-2:
        #0d8991;

    --premium-ambar:
        #f6ad24;

    --premium-blanco:
        #ffffff;

    --premium-texto:
        #123b4a;

    --premium-borde:
        rgba(18, 59, 74, .12);

    --premium-sombra:
        0 10px 28px rgba(8, 38, 51, .14);

    --premium-sombra-hover:
        0 16px 34px rgba(8, 38, 51, .22);

    --premium-transicion:
        all .22s cubic-bezier(.2,.8,.2,1);

}


/* =========================================================
   REGLAS GENERALES
   ========================================================= */

button {

    font-family:
        inherit;

    -webkit-tap-highlight-color:
        transparent;

}


button:focus-visible,
a:focus-visible,
select:focus-visible {

    outline:
        3px solid rgba(24,185,173,.35);

    outline-offset:
        3px;

}


/* =========================================================
   BOTÓN ENTRAR
   ========================================================= */

.boton-entrar {

    position:
        relative !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        8px;

    min-width:
        128px;

    height:
        50px;

    padding:
        0 20px !important;

    border:
        1px solid rgba(24,185,173,.35) !important;

    border-radius:
        15px !important;

    background:
        rgba(255,255,255,.055) !important;

    color:
        #ffffff !important;

    font-size:
        15px !important;

    font-weight:
        750 !important;

    letter-spacing:
        .1px;

    cursor:
        pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 5px 18px rgba(0,0,0,.08) !important;

    transition:
        var(--premium-transicion);

    overflow:
        hidden;

}


.boton-entrar::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255,255,255,.14) 50%,
            transparent 80%
        );

    transform:
        translateX(-120%);

    transition:
        transform .55s ease;

}


.boton-entrar:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(24,185,173,.8) !important;

    background:
        rgba(24,185,173,.13) !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.18),
        0 0 0 1px rgba(24,185,173,.08) !important;

}


.boton-entrar:hover::before {

    transform:
        translateX(120%);

}


.boton-entrar:active {

    transform:
        translateY(0)
        scale(.98);

}


/* =========================================================
   CARRITO PRINCIPAL
   ========================================================= */

.boton-carrito {

    position:
        relative !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        9px;

    min-width:
        158px;

    height:
        52px;

    padding:
        0 18px !important;

    border:
        none !important;

    border-radius:
        16px !important;

    background:
        linear-gradient(
            135deg,
            #f7b52d,
            #ed9c14
        ) !important;

    color:
        #092a37 !important;

    font-size:
        15px !important;

    font-weight:
        850 !important;

    cursor:
        pointer;

    box-shadow:
        0 8px 22px rgba(238,159,22,.25),
        inset 0 1px 0 rgba(255,255,255,.45) !important;

    transition:
        var(--premium-transicion);

    overflow:
        hidden;

}


.boton-carrito::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -120%;

    width:
        80%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left .6s ease;

}


.boton-carrito:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px rgba(238,159,22,.34),
        inset 0 1px 0 rgba(255,255,255,.5) !important;

}


.boton-carrito:hover::before {

    left:
        130%;

}


.boton-carrito:active {

    transform:
        translateY(-1px)
        scale(.98);

}


/* =========================================================
   CONTADOR DEL CARRITO
   ========================================================= */

#contador-carrito {

    min-width:
        28px;

    height:
        28px;

    padding:
        0 7px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50px;

    background:
        #d83232;

    color:
        #ffffff;

    border:
        2px solid rgba(255,255,255,.75);

    font-size:
        12px;

    font-weight:
        900;

    line-height:
        1;

    box-shadow:
        0 3px 8px rgba(0,0,0,.18);

}


/* =========================================================
   BOTONES AGREGAR AL CARRITO
   ========================================================= */

.agregar-carrito {

    position:
        relative !important;

    width:
        100% !important;

    min-height:
        50px;

    margin-top:
        14px;

    padding:
        0 18px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        8px;

    border:
        0 !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            135deg,
            #0f7180,
            #0a596d
        ) !important;

    color:
        #ffffff !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .1px;

    cursor:
        pointer;

    box-shadow:
        0 8px 18px rgba(10,89,109,.22),
        inset 0 1px 0 rgba(255,255,255,.14) !important;

    transition:
        var(--premium-transicion);

    overflow:
        hidden;

}


.agregar-carrito::before {

    content:
        "🛒";

    font-size:
        16px;

    transition:
        transform .2s ease;

}


.agregar-carrito::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            110deg,
            transparent 25%,
            rgba(255,255,255,.16) 50%,
            transparent 75%
        );

    transform:
        translateX(-100%);

    transition:
        transform .55s ease;

}


.agregar-carrito:hover {

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #14929a,
            #0a6477
        ) !important;

    box-shadow:
        0 13px 27px rgba(10,89,109,.32),
        inset 0 1px 0 rgba(255,255,255,.2) !important;

}


.agregar-carrito:hover::before {

    transform:
        scale(1.12)
        rotate(-6deg);

}


.agregar-carrito:hover::after {

    transform:
        translateX(100%);

}


.agregar-carrito:active {

    transform:
        translateY(-1px)
        scale(.985);

}


/* =========================================================
   FILTROS DEL CATÁLOGO
   ========================================================= */

.filtro-categoria,
.filtro,
.categoria-boton {

    min-height:
        43px;

    padding:
        0 18px !important;

    border:
        1px solid rgba(24,185,173,.45) !important;

    border-radius:
        50px !important;

    background:
        rgba(18,59,74,.42) !important;

    color:
        #ffffff !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    cursor:
        pointer;

    transition:
        var(--premium-transicion);

}


.filtro-categoria:hover,
.filtro:hover,
.categoria-boton:hover {

    transform:
        translateY(-2px);

    background:
        rgba(24,185,173,.16) !important;

    border-color:
        #18b9ad !important;

    box-shadow:
        0 7px 18px rgba(0,0,0,.14);

}


/* =========================================================
   SELECTOR DE IDIOMA
   ========================================================= */

#boton-idioma {

    min-width:
        180px !important;

    height:
        52px !important;

    padding:
        0 18px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        2px solid rgba(24,185,173,.8) !important;

    border-radius:
        16px !important;

    background:
        rgba(255,255,255,.97) !important;

    color:
        #123b4a !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    cursor:
        pointer;

    box-shadow:
        0 6px 18px rgba(0,0,0,.16),
        inset 0 1px 0 #ffffff !important;

    transition:
        var(--premium-transicion);

}


#boton-idioma:hover {

    transform:
        translateY(-2px);

    border-color:
        #18b9ad !important;

    box-shadow:
        0 12px 25px rgba(0,0,0,.2),
        0 0 0 4px rgba(24,185,173,.08) !important;

}


/* =========================================================
   MENÚ DE IDIOMAS
   ========================================================= */

.menu-idiomas {

    border:
        1px solid rgba(18,59,74,.12) !important;

    border-radius:
        17px !important;

    padding:
        8px !important;

    background:
        rgba(255,255,255,.98) !important;

    box-shadow:
        0 20px 45px rgba(5,31,42,.24) !important;

    backdrop-filter:
        blur(15px);

}


.menu-idiomas button {

    min-height:
        45px !important;

    padding:
        0 13px !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    background:
        transparent !important;

    color:
        #123b4a !important;

    font-weight:
        700 !important;

    cursor:
        pointer;

    transition:
        var(--premium-transicion);

}


.menu-idiomas button:hover {

    transform:
        translateX(3px) !important;

    background:
        #edf8f8 !important;

    color:
        #0d7b87 !important;

}


.menu-idiomas button.idioma-activo {

    background:
        linear-gradient(
            135deg,
            #0d7180,
            #0b6070
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 5px 13px rgba(10,89,109,.2);

}


/* =========================================================
   SELECTOR DE MONEDA
   ========================================================= */

#selector-moneda,
.selector-pais-mi-tienda {

    min-height:
        50px !important;

    border:
        1px solid rgba(18,59,74,.15) !important;

    border-radius:
        15px !important;

    background:
        #ffffff !important;

    color:
        #123b4a !important;

    font-weight:
        700 !important;

    padding:
        0 14px !important;

    cursor:
        pointer;

    box-shadow:
        0 5px 15px rgba(0,0,0,.08);

    transition:
        var(--premium-transicion);

}


#selector-moneda:hover,
.selector-pais-mi-tienda:hover {

    border-color:
        #18b9ad !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 22px rgba(0,0,0,.14);

}


/* =========================================================
   CARRITO FLOTANTE
   ========================================================= */

.carrito-flotante {

    width:
        66px !important;

    height:
        66px !important;

    right:
        24px !important;

    bottom:
        24px !important;

    border:
        3px solid rgba(255,255,255,.95) !important;

    border-radius:
        50% !important;

    background:
        linear-gradient(
            145deg,
            #147d8b,
            #0b586b
        ) !important;

    box-shadow:
        0 12px 30px rgba(4,48,63,.28),
        0 0 0 5px rgba(20,125,139,.08) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease;

}


.carrito-flotante:hover {

    transform:
        translateY(-5px)
        scale(1.04) !important;

    box-shadow:
        0 18px 38px rgba(4,48,63,.35),
        0 0 0 7px rgba(20,125,139,.1) !important;

}


.icono-carrito-flotante {

    font-size:
        28px !important;

}


.contador-carrito-flotante {

    top:
        -3px !important;

    right:
        -3px !important;

    min-width:
        27px !important;

    height:
        27px !important;

    background:
        linear-gradient(
            135deg,
            #f6ad24,
            #e89312
        ) !important;

    border:
        3px solid #ffffff !important;

    font-size:
        11px !important;

    box-shadow:
        0 4px 10px rgba(0,0,0,.2);

}


/* =========================================================
   BOTÓN "VER CARRITO"
   ========================================================= */

.ver-carrito-notificacion {

    min-height:
        42px;

    padding:
        0 15px !important;

    border:
        0 !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            135deg,
            #0d7180,
            #0a596d
        ) !important;

    color:
        #ffffff !important;

    font-weight:
        800 !important;

    cursor:
        pointer;

    transition:
        var(--premium-transicion);

}


.ver-carrito-notificacion:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 16px rgba(10,89,109,.25);

}


/* =========================================================
   COMPARTIR CARRITO
   ========================================================= */

.compartir-carrito {

    width:
        100% !important;

    min-height:
        50px;

    border:
        1px solid rgba(13,113,128,.5) !important;

    border-radius:
        13px !important;

    background:
        linear-gradient(
            135deg,
            #f5fbfb,
            #eaf7f7
        ) !important;

    color:
        #086071 !important;

    font-weight:
        800 !important;

    cursor:
        pointer;

    transition:
        var(--premium-transicion);

}


.compartir-carrito:hover {

    transform:
        translateY(-2px);

    background:
        #ffffff !important;

    border-color:
        #0d8991 !important;

    box-shadow:
        0 8px 20px rgba(13,113,128,.13);

}


/* =========================================================
   VACIAR CARRITO
   ========================================================= */

.vaciar-carrito {

    border:
        0 !important;

    background:
        transparent !important;

    color:
        #b32632 !important;

    font-weight:
        750 !important;

    cursor:
        pointer;

    transition:
        var(--premium-transicion);

}


.vaciar-carrito:hover {

    color:
        #8f1721 !important;

    text-decoration:
        underline;

}


/* =========================================================
   FINALIZAR COMPRA WHATSAPP
   ========================================================= */

.finalizar-compra {

    position:
        relative !important;

    width:
        100% !important;

    min-height:
        60px !important;

    padding:
        0 20px !important;

    border:
        0 !important;

    border-radius:
        16px !important;

    background:
        linear-gradient(
            135deg,
            #20d66b,
            #18bc5a
        ) !important;

    color:
        #ffffff !important;

    font-size:
        16px !important;

    font-weight:
        850 !important;

    cursor:
        pointer;

    box-shadow:
        0 10px 25px rgba(24,188,90,.25),
        inset 0 1px 0 rgba(255,255,255,.3) !important;

    transition:
        var(--premium-transicion);

    overflow:
        hidden;

}


.finalizar-compra::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.22) 50%,
            transparent 80%
        );

    transform:
        translateX(-110%);

    transition:
        transform .55s ease;

}


.finalizar-compra:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 32px rgba(24,188,90,.34),
        inset 0 1px 0 rgba(255,255,255,.4) !important;

}


.finalizar-compra:hover::before {

    transform:
        translateX(110%);

}


.finalizar-compra:active {

    transform:
        translateY(-1px)
        scale(.985);

}


/* =========================================================
   APLICAR CUPÓN
   ========================================================= */

#aplicar-cupon {

    min-height:
        48px !important;

    padding:
        0 20px !important;

    border:
        0 !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            135deg,
            #0f7180,
            #0b596b
        ) !important;

    color:
        #ffffff !important;

    font-weight:
        800 !important;

    cursor:
        pointer;

    transition:
        var(--premium-transicion);

}


#aplicar-cupon:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px rgba(10,89,109,.25);

}


/* =========================================================
   CONTROLES + / -
   ========================================================= */

.controles-cantidad button {

    width:
        40px !important;

    height:
        40px !important;

    min-width:
        40px;

    padding:
        0 !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        0 !important;

    border-radius:
        11px !important;

    background:
        #edf3f5 !important;

    color:
        #123b4a !important;

    font-size:
        18px !important;

    font-weight:
        900 !important;

    cursor:
        pointer;

    transition:
        var(--premium-transicion);

}


.controles-cantidad button:hover {

    transform:
        translateY(-2px);

    background:
        #dcecee !important;

    box-shadow:
        0 5px 12px rgba(18,59,74,.12);

}


/* =========================================================
   ELIMINAR PRODUCTO
   ========================================================= */

.eliminar-producto {

    width:
        40px !important;

    height:
        40px !important;

    border:
        1px solid rgba(179,38,50,.14) !important;

    border-radius:
        11px !important;

    background:
        #fff5f5 !important;

    color:
        #b32632 !important;

    cursor:
        pointer;

    transition:
        var(--premium-transicion);

}


.eliminar-producto:hover {

    transform:
        translateY(-2px);

    background:
        #ffe7e8 !important;

    border-color:
        rgba(179,38,50,.3) !important;

}


/* =========================================================
   ASISTENTE
   ========================================================= */

.asistente-boton {

    border:
        2px solid rgba(255,255,255,.8) !important;

    background:
        linear-gradient(
            135deg,
            #3159bd,
            #28479d
        ) !important;

    box-shadow:
        0 10px 28px rgba(29,58,145,.3),
        0 0 0 5px rgba(49,89,189,.08) !important;

    transition:
        var(--premium-transicion);

}


.asistente-boton:hover {

    transform:
        translateY(-4px) !important;

    box-shadow:
        0 16px 34px rgba(29,58,145,.38),
        0 0 0 7px rgba(49,89,189,.1) !important;

}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-flotante {

    width:
        62px !important;

    height:
        62px !important;

    border:
        3px solid rgba(255,255,255,.95) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.2),
        0 0 0 5px rgba(37,211,102,.08) !important;

    transition:
        var(--premium-transicion);

}


.whatsapp-flotante:hover {

    transform:
        translateY(-5px)
        scale(1.04) !important;

    box-shadow:
        0 18px 36px rgba(0,0,0,.27),
        0 0 0 7px rgba(37,211,102,.1) !important;

}


/* =========================================================
   ENLACES / BOTONES DE NAVEGACIÓN
   ========================================================= */

nav a,
.nav a {

    position:
        relative;

    border-radius:
        10px;

    transition:
        var(--premium-transicion);

}


nav a:hover,
.nav a:hover {

    transform:
        translateY(-2px);

    background:
        rgba(255,255,255,.07);

}


nav a::after,
.nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        4px;

    width:
        0;

    height:
        2px;

    border-radius:
        5px;

    background:
        #18b9ad;

    transform:
        translateX(-50%);

    transition:
        width .22s ease;

}


nav a:hover::after,
.nav a:hover::after {

    width:
        45%;

}


/* =========================================================
   BOTONES GENÉRICOS DE TARJETAS
   ========================================================= */

.producto button:not(
    .agregar-carrito
) {

    transition:
        var(--premium-transicion);

}


/* =========================================================
   DISPOSITIVOS TÁCTILES
   ========================================================= */

@media (hover: none) {

    .boton-carrito:hover,
    .boton-entrar:hover,
    .agregar-carrito:hover,
    .carrito-flotante:hover,
    .whatsapp-flotante:hover,
    .finalizar-compra:hover {

        transform:
            none;

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .boton-entrar {

        min-width:
            115px;

    }


    .boton-carrito {

        min-width:
            145px;

    }


    #boton-idioma {

        min-width:
            165px !important;

    }

}


/* =========================================================
   TELÉFONO
   ========================================================= */

@media (max-width: 600px) {

    .boton-entrar {

        min-width:
            105px;

        height:
            47px;

        padding:
            0 13px !important;

        font-size:
            13px !important;

    }


    .boton-carrito {

        min-width:
            135px;

        height:
            48px;

        padding:
            0 13px !important;

        font-size:
            13px !important;

    }


    #boton-idioma {

        min-width:
            155px !important;

        width:
            155px !important;

        height:
            47px !important;

        font-size:
            13px !important;

    }


    .agregar-carrito {

        min-height:
            52px;

        font-size:
            14px !important;

    }


    .finalizar-compra {

        min-height:
            57px !important;

        font-size:
            15px !important;

    }


    .carrito-flotante {

        width:
            59px !important;

        height:
            59px !important;

        right:
            15px !important;

        bottom:
            15px !important;

    }


    .whatsapp-flotante {

        width:
            57px !important;

        height:
            57px !important;

    }

}


/* =========================================================
   TELÉFONOS PEQUEÑOS
   ========================================================= */

@media (max-width: 400px) {

    .boton-entrar {

        min-width:
            95px;

        font-size:
            12px !important;

    }


    .boton-carrito {

        min-width:
            125px;

        font-size:
            12px !important;

    }


    #boton-idioma {

        min-width:
            145px !important;

        width:
            145px !important;

    }

}

/* =====================================================
   CORRECCIÓN DEFINITIVA - BOTONES AGREGAR AL CARRITO
===================================================== */

.agregar-carrito::before,
.agregar-carrito::after {

    content: none !important;

}


.agregar-carrito {

    position: relative;

}


.agregar-carrito > span {

    display: inline;

}

/* =====================================================
   ELIMINAR SEGUNDO ICONO DEL BOTÓN AGREGAR AL CARRITO
===================================================== */

.agregar-carrito .icono-carrito-unico {
    display: none !important;
}


/* Evitar iconos adicionales creados por CSS */

.agregar-carrito::before,
.agregar-carrito::after {
    content: none !important;
}

/* =====================================================
   BENEFICIOS TODO KLICK
===================================================== */

.beneficios {

    width: 100%;

    padding: 60px 6%;

    background:
    linear-gradient(
        180deg,
        #071923,
        #102f3d
    );

    text-align: center;

}


.beneficios h2 {

    color: white;

    font-size: 35px;

    font-weight: 800;

    margin-bottom: 40px;

}



.beneficios-container {

    width: 100%;

    display: grid;

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

    gap: 25px;

}



.beneficio {

    padding: 30px 20px;

    border-radius: 18px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.15);

    color: white;

    transition:
    .3s ease;

}



.beneficio:hover {

    transform:
    translateY(-8px);

    border-color:
    #18b9ad;

}



.beneficio span {

    font-size: 45px;

    display: block;

    margin-bottom: 15px;

}



.beneficio h3 {

    color:
    #f6c86e;

    margin-bottom: 10px;

    font-size: 20px;

}



.beneficio p {

    color:
    #c5d6dc;

    font-size: 15px;

    line-height: 1.5;

}



/* TABLET */

@media(max-width:900px){

    .beneficios-container {

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

    }

}


/* =====================================================
   CORRECCIONES CONSOLIDADAS DE INTERFAZ
   Estas reglas cierran conflictos entre las versiones anteriores del tema.
===================================================== */

/* La tarjeta usa imagen clara y contenido oscuro: el texto conserva contraste. */
.producto {
    background: #0d2633;
}

.producto-imagen {
    flex-shrink: 0;
    transform: none !important;
}

.producto:hover .producto-imagen {
    transform: none !important;
}

.producto-info {
    min-width: 0;
    background: linear-gradient(180deg, #102c39, #0b222e);
}

.producto h3 {
    color: #f7fbfc;
}

.producto p {
    color: #bfd0d6;
}

.producto-rating {
    min-height: 24px;
    margin-bottom: 8px;
    font-size: 14px;
    letter-spacing: 1px;
}

.producto-stock {
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 800;
}

.producto-stock.disponible {
    color: #72e6a0;
}

.producto-stock.agotado {
    color: #ff9b9b;
}

.agregar-carrito:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.45);
}

.agregar-carrito:disabled:hover {
    transform: none;
}

/* Un label de filtro no es un botón; anulamos estilos heredados antiguos. */
.catalogo-controles .filtro-catalogo,
.catalogo-controles .ordenar-productos,
.catalogo-controles .cantidad-pagina {
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.catalogo-controles select {
    cursor: pointer;
}

.paginacion-catalogo[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .producto-info {
        padding: 16px 16px 0;
    }

    .producto .agregar-carrito {
        width: calc(100% + 32px) !important;
        margin-left: -16px;
    }
}


/* =====================================================
   LEGIBILIDAD DEL CARRITO
   El panel es blanco y no debe heredar el texto claro del tema.
===================================================== */

.carrito-contenido,
.carrito-contenido #lista-carrito {
    color: #173546;
}

.carrito-contenido .info-producto .nombre-producto {
    color: #10374b;
    font-weight: 800;
}

.carrito-contenido .info-producto > span {
    color: #55717b;
}

.carrito-contenido .controles-cantidad > span {
    min-width: 1.5ch;
    color: #173546;
    font-weight: 800;
    text-align: center;
}

/* =====================================================
   CATÁLOGO ESCALABLE: CONTROLES, ESTADOS Y PAGINACIÓN
===================================================== */

.catalogo-controles {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, auto)) minmax(210px, 1fr);
    align-items: end;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 28px;
    padding: 18px;
    gap: 14px;
    border: 1px solid rgba(42, 198, 187, .2);
    border-radius: 14px;
    background: rgba(10, 43, 57, .9);
}

.catalogo-controles label {
    display: grid;
    gap: 7px;
    color: #c9dde2;
    font-size: .85rem;
    font-weight: 700;
}

.catalogo-controles select {
    width: 100%;
    min-height: 42px;
    padding: 8px 34px 8px 11px;
    border: 1px solid rgba(87, 211, 202, .35);
    border-radius: 9px;
    color: #efffff;
    background: #103d4c;
    font: inherit;
}

.resumen-catalogo {
    justify-self: end;
    margin: 0 0 10px;
    color: #bcd2d8;
    font-size: .9rem;
}

.catalogo-vacio {
    grid-column: 1 / -1;
    padding: 48px 20px;
    border: 1px dashed rgba(42, 198, 187, .35);
    border-radius: 14px;
    color: #d7eaed;
    text-align: center;
}

.paginacion-catalogo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(1180px, calc(100% - 32px));
    margin: 32px auto 4px;
}

.numeros-paginacion {
    display: flex;
    gap: 7px;
}

.paginacion-catalogo button {
    min-width: 42px;
    min-height: 42px;
    padding: 8px 13px;
    border: 1px solid rgba(42, 198, 187, .4);
    border-radius: 9px;
    color: #dff7f5;
    background: #103d4c;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.paginacion-catalogo button.activa {
    border-color: #2ac6bb;
    color: #062e37;
    background: #2ac6bb;
}

.paginacion-catalogo button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

@media (max-width: 760px) {
    .catalogo-controles {
        grid-template-columns: 1fr 1fr;
    }

    .resumen-catalogo {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 480px) {
    .catalogo-controles {
        grid-template-columns: 1fr;
    }

    .paginacion-catalogo,
    .numeros-paginacion {
        gap: 5px;
    }

    .paginacion-catalogo button {
        min-width: 36px;
        padding-inline: 9px;
        font-size: .82rem;
    }
}



/* CELULAR */

@media(max-width:600px){

    .beneficios {

        padding:
        40px 15px;

    }


    .beneficios h2 {

        font-size:
        28px;

    }


    .beneficios-container {

        grid-template-columns:
        1fr;

    }

}

/* =====================================================
   TESTIMONIOS CLIENTES
===================================================== */

.testimonios {

    width: 100%;

    padding: 60px 6%;

    background:
    linear-gradient(
        180deg,
        #102f3d,
        #071923
    );

}


.testimonios .seccion-titulo {

    text-align: center;

    margin-bottom: 40px;

}


.testimonios .seccion-titulo span {

    color:
    #18b9ad;

    font-weight:
    800;

    letter-spacing:
    2px;

}



.testimonios h2 {

    color:
    white;

    font-size:
    35px;

    margin-top:
    10px;

}



.testimonios-container {

    display:
    grid;

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

    gap:
    25px;

}



.testimonio {

    background:
    rgba(255,255,255,.08);

    border:
    1px solid rgba(255,255,255,.15);

    border-radius:
    18px;

    padding:
    30px;

    color:
    white;

    transition:
    .3s ease;

}



.testimonio:hover {

    transform:
    translateY(-8px);

    border-color:
    #18b9ad;

}



.estrellas {

    font-size:
    22px;

    margin-bottom:
    15px;

}



.testimonio p {

    color:
    #c5d6dc;

    line-height:
    1.6;

    margin-bottom:
    20px;

}



.testimonio strong {

    color:
    #f6c86e;

}



/* TABLET */

@media(max-width:900px){

    .testimonios-container {

        grid-template-columns:
        1fr;

    }

}


/* =====================================================
   INICIO ORIENTADO A PRODUCTOS Y FUNCIONES BAJO DEMANDA
===================================================== */

.productos-principales-inicio {
    position: relative;
    padding-top: clamp(44px, 6vw, 78px);
    padding-bottom: 46px;
    background: linear-gradient(180deg, #071923, #0a2532);
}

.productos-principales-inicio > .seccion-titulo {
    max-width: 1180px;
    margin: 0 auto 30px;
}

.productos-principales-inicio > .seccion-titulo h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.resumen-productos-inicio {
    width: min(1180px, 100%);
    margin: 24px auto 0;
    color: #bcd2d8;
    text-align: center;
    font-size: .92rem;
}

.acciones-productos-inicio {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.acciones-productos-inicio > button {
    width: auto;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
}

.cargar-mas-productos-inicio {
    border: 1px solid rgba(42, 198, 187, .65);
    background: #123e4c;
    color: #eafffd;
}

.cargar-mas-productos-inicio:hover {
    background: #185667;
}

.cargar-mas-productos-inicio[hidden] {
    display: none;
}

.opciones-compra-inicio {
    padding: 38px 6% 48px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: #081f2b;
}

.opciones-compra-encabezado {
    max-width: 1180px;
    margin: 0 auto 20px;
    text-align: center;
}

.opciones-compra-encabezado h2 {
    margin: 6px 0;
    color: #f7fbfc;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
}

.selector-funciones-inicio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: min(900px, 100%);
    margin: 0 auto;
}

.selector-funciones-inicio button {
    min-height: 58px;
    border: 1px solid rgba(42, 198, 187, .32);
    border-radius: 14px;
    background: #103745;
    color: #e4f6f5;
    font-size: .95rem;
}

.selector-funciones-inicio button:hover,
.selector-funciones-inicio button.activo {
    border-color: #2ac6bb;
    background: #17606a;
    color: #fff;
}

.panel-funcion-inicio {
    width: min(1180px, 100%);
    margin: 22px auto 0;
    overflow: hidden;
    border: 1px solid rgba(42, 198, 187, .25);
    border-radius: 20px;
    background: #0b2b38;
}

.panel-funcion-inicio[hidden] {
    display: none;
}

.panel-funcion-inicio > .categorias,
.panel-funcion-inicio > .beneficios {
    padding: 30px;
    background: transparent;
}

.panel-funcion-inicio .categorias-container {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

#panel-compra-inteligente-inicio .descubridor-compras {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 700px) {
    .selector-funciones-inicio {
        grid-template-columns: 1fr;
    }

    .panel-funcion-inicio > .categorias,
    .panel-funcion-inicio > .beneficios {
        padding: 22px 14px;
    }

    .acciones-productos-inicio {
        display: grid;
        grid-template-columns: 1fr;
    }

    .acciones-productos-inicio > button {
        width: 100%;
    }
}

/* =====================================================
   NICHI · AUDITORÍA DE PALETA
   Esta capa es deliberadamente la última: neutraliza los temas históricos
   en cada flujo operativo sin depender del orden de estilos anteriores.
   ===================================================== */
:root {
    --nichi-azul: #061636;
    --nichi-azul-medio: #102a5b;
    --nichi-rojo: #e31b2b;
    --nichi-rojo-profundo: #b90f23;
    --nichi-blanco: #ffffff;
    --nichi-fondo: #f5f7fb;
    --nichi-borde: #dfe5f0;
    --nichi-texto: #14213d;
    --nichi-texto-suave: #5d6980;
    --tk-fondo: var(--nichi-azul);
    --tk-fondo-2: var(--nichi-azul-medio);
    --tk-panel: var(--nichi-azul);
    --tk-panel-alto: var(--nichi-azul-medio);
    --tk-superficie: var(--nichi-azul-medio);
    --tk-superficie-clara: var(--nichi-fondo);
    --tk-texto: var(--nichi-texto);
    --tk-texto-suave: var(--nichi-texto-suave);
    --tk-acento: var(--nichi-rojo);
    --tk-acento-profundo: var(--nichi-rojo-profundo);
    --tk-precio: var(--nichi-rojo);
    --tk-lima: #ffffff;
    --tk-ambar: #fff0f1;
    --tk-peligro: var(--nichi-rojo);
    --tk-linea: var(--nichi-borde);
    --tk-sombra: 0 14px 32px rgba(6, 22, 54, .14);
}

body.experiencia-premium,
body {
    color: var(--nichi-texto) !important;
    background: linear-gradient(180deg, #fafbfe, #f1f4f9) !important;
}

/* Acciones generales de compra y formularios */
:is(.agregar-carrito, .finalizar-compra, .confirmar-pedido, .cupon-compra button,
    .vista-rapida-accion button, .buscar-inteligente-principal,
    .acciones-inteligentes button, .boton-inteligente, .usuario-login-enviar,
    #ver-carrito-notificacion, .ver-carrito-notificacion) {
    border-color: transparent !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--nichi-rojo), var(--nichi-rojo-profundo)) !important;
    box-shadow: 0 8px 18px rgba(185, 15, 35, .22) !important;
}

:is(.agregar-carrito, .finalizar-compra, .confirmar-pedido, .cupon-compra button,
    .vista-rapida-accion button, .buscar-inteligente-principal,
    .acciones-inteligentes button, .boton-inteligente, .usuario-login-enviar):hover {
    background: linear-gradient(135deg, #f03543, var(--nichi-rojo-profundo)) !important;
}

/* Carrito flotante y avisos de compra */
.carrito-flotante {
    color: #fff !important;
    background: linear-gradient(135deg, var(--nichi-rojo), var(--nichi-rojo-profundo)) !important;
    box-shadow: 0 13px 28px rgba(185, 15, 35, .3) !important;
}
.contador-carrito-flotante,
.navegacion-comercial-movil em,
#boton-notificaciones > em {
    color: #fff !important;
    background: var(--nichi-rojo) !important;
    border-color: #fff !important;
}
.notificacion-carrito {
    border-color: var(--nichi-borde) !important;
    background: #fff !important;
}
.notificacion-icono {
    color: #fff !important;
    background: var(--nichi-rojo) !important;
}
.notificacion-texto strong { color: var(--nichi-azul) !important; }
.notificacion-texto span { color: var(--nichi-texto-suave) !important; }

/* Catálogo: filtros, categorías, favoritos y beneficios */
.chips-categorias button,
.ordenar-productos select,
.categorias-opcion-catalogo button,
.atajos-categorias-movil button,
.filtro-vendedor select {
    border-color: var(--nichi-borde) !important;
    color: var(--nichi-azul) !important;
    background: #fff !important;
}
.chips-categorias button.activo,
.categorias-opcion-catalogo button.activo,
.atajos-categorias-movil button.activo {
    border-color: var(--nichi-rojo) !important;
    color: #fff !important;
    background: var(--nichi-rojo) !important;
}
.favorito-producto,
#boton-notificaciones {
    border-color: var(--nichi-borde) !important;
    color: var(--nichi-rojo) !important;
    background: #fff !important;
}
.favorito-producto.activo { color: var(--nichi-rojo-profundo) !important; }
.beneficio-envio,
.beneficio-envio.completo {
    border-color: #f2c5ca !important;
    color: var(--nichi-azul) !important;
    background: #fff4f5 !important;
}
.beneficio-envio i { background: var(--nichi-rojo) !important; }
.desglose-compra .descuento,
.vista-rapida-mensaje { color: var(--nichi-rojo-profundo) !important; }
.vaciar-carrito { color: var(--nichi-rojo-profundo) !important; }

/* Vista rápida, checkout y compra inteligente opcional */
.vista-rapida-contenido,
.checkout-form,
.resultado-inteligente,
.panel-inteligente,
#panel-compra-inteligente-inicio,
.compartir-carrito {
    border-color: var(--nichi-borde) !important;
    color: var(--nichi-texto) !important;
    background: #fff !important;
}
.vista-rapida-contenido h2,
.checkout-form h2,
.resultado-inteligente h3,
#panel-compra-inteligente-inicio h2,
#panel-compra-inteligente-inicio h3 { color: var(--nichi-azul) !important; }
.vista-rapida-imagen { background: #f3f5f9 !important; }
.vista-rapida-info small,
.resultado-categoria,
.checkout-paso { color: var(--nichi-rojo-profundo) !important; }
.vista-rapida-similares button,
.acciones-producto-inteligente button,
.compartir-carrito {
    border-color: #edc2c7 !important;
    color: var(--nichi-rojo-profundo) !important;
    background: #fff6f7 !important;
}
.acciones-producto-inteligente button.activo {
    border-color: var(--nichi-rojo) !important;
    color: #fff !important;
    background: var(--nichi-rojo) !important;
}
.descubridor-encabezado,
.comparador-productos,
.tabla-comparador article {
    color: #fff !important;
    background: linear-gradient(145deg, var(--nichi-azul), var(--nichi-azul-medio)) !important;
}
.descubridor-encabezado span,
.descubridor-encabezado p,
#panel-compra-inteligente-inicio .opciones-inteligentes-extra > summary { color: #f4cdd1 !important; }
.presupuestos-rapidos button {
    border-color: rgba(255,255,255,.2) !important;
    color: #fff !important;
    background: var(--nichi-azul-medio) !important;
}
.alerta-precio {
    color: #fff !important;
    background: var(--nichi-rojo) !important;
}

/* Cuenta, historial y autenticación */
#sistema-perfil-cliente .perfil-cliente-panel,
#sistema-usuarios-firebase .usuario-demo-panel,
.sistema-usuarios-demo .usuario-demo-panel {
    color: #fff !important;
    background: linear-gradient(160deg, var(--nichi-azul), var(--nichi-azul-medio)) !important;
}
#sistema-perfil-cliente :is(strong, h2, h3, b),
#sistema-usuarios-firebase :is(h2, h3, strong) { color: #fff !important; }
#sistema-perfil-cliente :is(small, span, p),
#sistema-usuarios-firebase :is(small, span, p) { color: #d6deed !important; }
#sistema-perfil-cliente .historial-pedidos-cuenta {
    border-color: rgba(255,255,255,.15) !important;
    background: rgba(255,255,255,.08) !important;
}
#sistema-perfil-cliente .usuario-ir-catalogo,
#sistema-perfil-cliente .perfil-seccion-titulo button {
    border-color: rgba(255,255,255,.22) !important;
    color: #fff !important;
    background: var(--nichi-rojo) !important;
}

/* Panel de avisos, navegación y menú de categorías en móvil */
#panel-notificaciones {
    border-color: var(--nichi-borde) !important;
    color: var(--nichi-texto) !important;
    background: #fff !important;
}
#panel-notificaciones > header {
    border-color: var(--nichi-borde) !important;
    background: #fff4f5 !important;
}
#panel-notificaciones header small { color: var(--nichi-rojo-profundo) !important; }
.lista-notificaciones article > span { background: #fff0f1 !important; }
.lista-notificaciones article p,
.notificaciones-vacias { color: var(--nichi-texto-suave) !important; }

@media (max-width: 700px) {
    .navegacion-comercial-movil {
        border-color: var(--nichi-borde) !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 -8px 26px rgba(6, 22, 54, .12) !important;
    }
    .navegacion-comercial-movil a,
    .navegacion-comercial-movil button,
    .navegacion-comercial-movil a:nth-child(3) { color: #647087 !important; }
    .navegacion-comercial-movil a.activo,
    .navegacion-comercial-movil button:active { color: var(--nichi-rojo) !important; }
    .navegacion-comercial-movil a.activo :is(span, .nav-icon) {
        color: var(--nichi-rojo) !important;
        background: #fff0f1 !important;
    }
    .panel-categorias-movil aside,
    .cabecera-categorias-movil,
    .lista-categorias-movil > button,
    .categoria-todos-movil {
        border-color: var(--nichi-borde) !important;
        color: var(--nichi-azul) !important;
        background: #fff !important;
    }
    .cabecera-categorias-movil small { color: var(--nichi-rojo-profundo) !important; }
    .cabecera-categorias-movil > button {
        color: #fff !important;
        background: var(--nichi-azul) !important;
    }
    .lista-categorias-movil button > span,
    .categoria-todos-movil > span { background: #fff0f1 !important; }
}

/* Respaldo visual cuando el servidor no entrega una imagen de producto. */
.producto-imagen.producto-imagen-fallback {
    background:
        radial-gradient(circle at 50% 38%, rgba(56, 216, 200, .13), transparent 42%),
        linear-gradient(145deg, #f7fbfb, #e7f0f1);
}

.imagen-producto-respaldo {
    display: grid;
    width: 100%;
    height: 100%;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 24px;
    color: #315761;
    text-align: center;
}

.imagen-producto-respaldo span {
    font-size: 52px;
    line-height: 1;
    filter: drop-shadow(0 10px 14px rgba(10, 48, 58, .16));
}

.imagen-producto-respaldo small {
    color: #55747c;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}


/* =====================================================
   TODO KLICK — EXPERIENCIA PREMIUM 2026
   Capa visual consolidada para portada, catálogo y compra.
===================================================== */

:root {
    --tk-fondo: #061636;
    --tk-fondo-2: #0b2049;
    --tk-panel: #0b1d42;
    --tk-panel-alto: #112a59;
    --tk-linea: rgba(255, 255, 255, .14);
    --tk-texto: #ffffff;
    --tk-muted: #bdc8dd;
    --tk-acento: #e51b2b;
    --tk-acento-2: #b80c21;
    --tk-lima: #ffffff;
    --tk-ambar: #ffd0d4;
    --tk-peligro: #ff6b76;
    --tk-radio: 22px;
    --tk-sombra: 0 24px 70px rgba(0, 0, 0, .3);
}

html {
    color-scheme: dark;
    scrollbar-color: #24616b #06131b;
}

body.experiencia-premium {
    min-height: 100vh;
    color: var(--tk-texto);
    background:
        radial-gradient(circle at 12% 8%, rgba(229, 27, 43, .19), transparent 26rem),
        radial-gradient(circle at 92% 24%, rgba(255, 255, 255, .09), transparent 30rem),
        var(--tk-fondo);
}

body.experiencia-premium::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: .22;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.progreso-navegacion {
    position: fixed;
    inset: 0 0 auto;
    z-index: 10000000000;
    height: 3px;
    background: linear-gradient(90deg, var(--tk-acento), var(--tk-lima));
    box-shadow: 0 0 18px rgba(56, 216, 200, .7);
    transform: scaleX(0);
    transform-origin: left center;
}

/* Encabezado de aplicación */
.barra-oferta {
    min-height: 31px;
    padding-block: 6px;
    color: #051a1b;
    background: linear-gradient(90deg, #5de5d7, #b8f36b 48%, #ffd168);
    font-size: 12px;
    letter-spacing: .05em;
}

.header {
    position: sticky !important;
    top: 0;
    z-index: 1000000 !important;
    min-height: 82px;
    padding: 14px max(5%, calc((100% - 1360px) / 2)) !important;
    gap: 16px;
    border-bottom: 1px solid var(--tk-linea);
    background: rgba(5, 17, 24, .86) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2) !important;
    backdrop-filter: blur(22px) saturate(150%);
    transition: min-height .25s ease, padding .25s ease, background .25s ease;
}

.header.header-compacto {
    min-height: 70px;
    padding-block: 9px !important;
    background: rgba(5, 17, 24, .96) !important;
}

.logo {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 184px;
    padding-left: 0;
    gap: 10px;
}

.logo::before {
    content: none;
}

.logo-emblema-nichi {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 12px;
    mix-blend-mode: screen;
    filter: drop-shadow(0 5px 11px rgba(229, 27, 43, .28));
}

.logo h1 {
    color: #f8ffff;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: .08em;
}

.logo h1::first-letter {
    color: inherit;
}

.logo span {
    color: #f1d5d8;
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.buscador-principal {
    max-width: 670px;
    margin-inline: auto;
}

.buscador-principal input,
#buscador {
    min-height: 51px;
    padding: 0 62px 0 21px;
    border: 1px solid rgba(166, 216, 219, .18);
    border-radius: 16px;
    color: #eaf7f8;
    background: rgba(16, 43, 54, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.buscador-principal input::placeholder,
#buscador::placeholder {
    color: #7f9da5;
}

.buscador-principal input:focus,
#buscador:focus {
    border-color: rgba(56, 216, 200, .8);
    background: #102d39;
    box-shadow: 0 0 0 4px rgba(56, 216, 200, .12), 0 14px 30px rgba(0, 0, 0, .18);
}

#boton-buscar {
    position: absolute;
    right: 7px;
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    padding: 0;
    border-radius: 12px;
    color: #042724;
    background: linear-gradient(145deg, var(--tk-acento), #7be8c4);
}

.boton-entrar,
.boton-carrito,
#boton-idioma {
    height: 48px !important;
    min-width: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.boton-entrar {
    border: 1px solid var(--tk-linea) !important;
    background: rgba(255, 255, 255, .035) !important;
}

.boton-carrito {
    color: #04221f !important;
    background: linear-gradient(145deg, var(--tk-acento), #80e7bd) !important;
}

#boton-idioma {
    width: auto !important;
    padding-inline: 14px !important;
    border: 1px solid var(--tk-linea) !important;
    color: #dff5f5 !important;
    background: #102a35 !important;
}

.nav {
    position: sticky;
    top: 82px;
    z-index: 99999;
    justify-content: center;
    min-height: 48px;
    padding: 7px 5%;
    gap: 7px;
    border-bottom: 1px solid var(--tk-linea);
    background: rgba(7, 23, 31, .91);
    backdrop-filter: blur(18px);
}

.header-compacto + .nav {
    top: 70px;
}

.nav a {
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #a9c0c7;
    font-size: 13px;
}

.nav a:hover {
    border-color: var(--tk-linea);
    color: #efffff;
    background: rgba(56, 216, 200, .08);
}

.nav a::after {
    display: none;
}

/* Catálogo principal */
.productos,
.productos-principales-inicio {
    padding: clamp(50px, 6vw, 84px) max(4%, calc((100% - 1360px) / 2));
    background: transparent;
}

.productos-principales-inicio > .seccion-titulo,
.productos > .seccion-titulo {
    position: relative;
    max-width: 1320px;
    margin: 0 auto 34px;
}

.seccion-titulo > span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(56, 216, 200, .2);
    border-radius: 999px;
    color: #73e7dc !important;
    background: rgba(56, 216, 200, .07);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.productos-principales-inicio > .seccion-titulo h2,
.productos > .seccion-titulo h2 {
    max-width: 780px;
    margin: 15px 0 9px;
    color: var(--tk-texto);
    font-size: clamp(2.3rem, 5vw, 4.7rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.065em;
}

.productos > .seccion-titulo p {
    max-width: 600px;
    color: var(--tk-muted);
    font-size: clamp(.95rem, 1.4vw, 1.08rem);
}

.productos-container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.producto {
    isolation: isolate;
    min-height: 570px;
    border: 1px solid var(--tk-linea);
    border-radius: 24px;
    background: linear-gradient(165deg, rgba(16, 45, 57, .96), rgba(8, 27, 36, .98));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    transform: translateY(0);
    opacity: 1;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease, opacity .35s ease;
}

.producto.producto-listo {
    animation: tk-entrada-tarjeta .5s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--orden-tarjeta, 0) * 35ms);
}

@keyframes tk-entrada-tarjeta {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.producto:hover {
    border-color: rgba(56, 216, 200, .55);
    box-shadow: 0 28px 65px rgba(0, 0, 0, .34), 0 0 0 1px rgba(56, 216, 200, .08);
    transform: translateY(-7px);
}

.producto-imagen {
    height: 250px;
    border-bottom: 1px solid rgba(7, 24, 31, .08);
    border-radius: 23px 23px 0 0;
    background:
        radial-gradient(circle at 50% 38%, #fff 0, #f7fbfb 48%, #e7f0f1 100%);
}

.producto-imagen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, transparent 28%, rgba(255, 255, 255, .5), transparent 65%);
    transform: translateX(-110%);
    transition: transform .7s ease;
}

.producto:hover .producto-imagen::after {
    transform: translateX(110%);
}

.producto-imagen img {
    padding: 20px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

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

.producto-info {
    padding: 19px 19px 0;
    background: transparent;
}

.producto-categoria {
    margin-bottom: 10px;
    padding: 5px 9px;
    border: 1px solid rgba(56, 216, 200, .12);
    color: #79e5dc;
    background: rgba(56, 216, 200, .08);
    font-size: 9px;
    letter-spacing: .09em;
}

.etiqueta-producto {
    color: var(--tk-ambar);
    font-size: 12px;
}

.producto h3 {
    min-height: 46px;
    margin: 7px 0;
    overflow: hidden;
    color: #f5fbfb;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.025em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.producto p {
    min-height: 39px;
    margin-bottom: 10px;
    overflow: hidden;
    color: #9eb7bf;
    font-size: 12px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.producto-rating {
    min-height: 20px;
    margin: 1px 0 8px;
    color: var(--tk-ambar);
    font-size: 12px;
}

.producto strong {
    margin: auto 0 6px;
    color: #ffd173;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.035em;
}

.producto-stock {
    width: fit-content;
    margin: 0 0 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(80, 223, 139, .08);
    font-size: 10px;
}

.confianza-vendedor {
    min-height: 30px;
    margin: 0 0 9px;
    overflow: hidden;
    color: #7fa5ae;
    font-size: 9.5px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.acciones-producto-inteligente {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 10px;
}

.producto .acciones-producto-inteligente button {
    width: auto;
    min-height: 33px;
    margin: 0;
    padding: 5px 7px;
    border: 1px solid rgba(151, 203, 207, .17);
    border-radius: 9px;
    color: #b8d1d4;
    background: rgba(255, 255, 255, .035);
    font-size: 10px;
}

.producto .acciones-producto-inteligente button:hover,
.producto .acciones-producto-inteligente button.activo {
    border-color: rgba(56, 216, 200, .5);
    color: #dffffb;
    background: rgba(56, 216, 200, .11);
}

.producto .agregar-carrito {
    width: calc(100% + 38px) !important;
    min-height: 50px;
    margin: auto 0 0 -19px;
    border-radius: 0 0 23px 23px !important;
    color: #042420 !important;
    background: linear-gradient(135deg, #43d9ca, #8ce7b2) !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

.producto .agregar-carrito:hover {
    color: #021613 !important;
    background: linear-gradient(135deg, #62eadc, #b5f077) !important;
}

/* Acciones de catálogo */
.resumen-productos-inicio,
.resumen-catalogo {
    color: #7f9fa8;
}

.acciones-productos-inicio > button,
.boton-ver-catalogo > button,
.paginacion-catalogo button {
    border: 1px solid var(--tk-linea);
    color: #dff5f4;
    background: #102d39;
    box-shadow: none;
}

.acciones-productos-inicio > button:hover,
.boton-ver-catalogo > button:hover,
.paginacion-catalogo button:hover {
    border-color: rgba(56, 216, 200, .55);
    background: #164452;
}

.paginacion-catalogo button.activa {
    color: #03201e;
    background: var(--tk-acento);
}

.catalogo-controles {
    border-color: var(--tk-linea);
    border-radius: 19px;
    background: rgba(12, 35, 45, .82);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
    backdrop-filter: blur(16px);
}

.catalogo-controles select {
    border-color: rgba(164, 216, 219, .16);
    border-radius: 11px;
    background: #102c38;
}

/* Herramientas bajo demanda */
.opciones-compra-inicio {
    padding-block: 54px;
    background: linear-gradient(180deg, rgba(8, 31, 43, .75), rgba(5, 18, 25, .9));
}

.selector-funciones-inicio {
    max-width: 980px;
}

.selector-funciones-inicio button {
    position: relative;
    min-height: 76px;
    padding-left: 52px;
    overflow: hidden;
    border-color: var(--tk-linea);
    border-radius: 18px;
    color: #c9dddf;
    background: linear-gradient(145deg, rgba(16, 48, 60, .9), rgba(9, 33, 43, .9));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    text-align: left;
}

.selector-funciones-inicio button::before {
    position: absolute;
    left: 17px;
    top: 50%;
    font-size: 22px;
    transform: translateY(-50%);
}

.selector-funciones-inicio button:nth-child(1)::before { content: "◫"; }
.selector-funciones-inicio button:nth-child(2)::before { content: "✦"; }
.selector-funciones-inicio button:nth-child(3)::before { content: "✓"; }

.selector-funciones-inicio button:hover,
.selector-funciones-inicio button.activo {
    border-color: rgba(56, 216, 200, .48);
    color: #f3ffff;
    background: linear-gradient(145deg, rgba(22, 85, 94, .95), rgba(11, 53, 63, .95));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
}

.panel-funcion-inicio {
    border-color: var(--tk-linea);
    border-radius: 25px;
    background: rgba(12, 37, 47, .86);
    box-shadow: var(--tk-sombra);
}

.descubridor-formulario input,
.filtro-vendedor select {
    border-color: rgba(126, 198, 201, .55);
    color: #092a34;
    background: #f4fbfb;
    box-shadow: inset 0 1px 2px rgba(5, 32, 40, .08);
}

.descubridor-formulario input::placeholder {
    color: #668087;
    opacity: 1;
}

.descubridor-formulario input:focus,
.filtro-vendedor select:focus {
    border-color: var(--tk-acento);
    outline: 3px solid rgba(56, 216, 200, .2) !important;
}

.categoria,
.beneficio,
.testimonio {
    border-color: var(--tk-linea);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(18, 52, 64, .82), rgba(10, 33, 43, .9));
    box-shadow: 0 15px 35px rgba(0, 0, 0, .14);
}

.categoria:hover,
.beneficio:hover,
.testimonio:hover {
    border-color: rgba(56, 216, 200, .55);
    transform: translateY(-5px);
}

/* Promociones y confianza */
.carrusel {
    width: min(1320px, calc(100% - 40px));
    min-height: 410px;
    margin: 42px auto;
    border: 1px solid var(--tk-linea);
    border-radius: 30px;
    box-shadow: var(--tk-sombra);
}

.slide,
.slide-visual,
.slide-imagen {
    min-height: 410px;
}

.slide {
    border-radius: 30px;
    background: linear-gradient(105deg, #0b2632 5%, #123f4a 58%, #164b4f);
}

.testimonios,
.contacto {
    border-color: var(--tk-linea);
    background: transparent;
}

.contacto {
    width: min(1320px, calc(100% - 40px));
    margin: 35px auto 70px;
    border: 1px solid var(--tk-linea);
    border-radius: 25px;
    background: linear-gradient(135deg, #102f3b, #113d45);
    box-shadow: var(--tk-sombra);
}

/* Compra y modales */
.carrito-ventana,
.checkout-datos {
    background: rgba(1, 8, 12, .78);
    backdrop-filter: blur(16px) saturate(130%);
}

.carrito-contenido,
.checkout-form {
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 25px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
}

.carrito-contenido {
    max-width: 720px;
    padding: 34px;
}

.item-carrito {
    padding-block: 18px;
    border-color: #e3ecee;
}

.finalizar-compra,
.confirmar-pedido {
    border-radius: 14px !important;
    background: linear-gradient(135deg, #28d66c, #62df91) !important;
}

/* Elementos flotantes ordenados como una dock */
.carrito-flotante,
.whatsapp-flotante,
.asistente-boton {
    border: 1px solid rgba(255, 255, 255, .58) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .3), 0 0 0 5px rgba(255, 255, 255, .035) !important;
    backdrop-filter: blur(12px);
}

.carrito-flotante {
    right: 21px !important;
    bottom: 91px !important;
}

.whatsapp-flotante {
    right: 21px !important;
    bottom: 21px !important;
}

.asistente-virtual {
    right: 20px;
    bottom: 166px;
}

.asistente-boton {
    background: linear-gradient(145deg, #3157bd, #243b87) !important;
}

/* Estados y accesibilidad */
::selection {
    color: #021a18;
    background: #74e8dc;
}

*:focus-visible {
    outline: 3px solid rgba(56, 216, 200, .58) !important;
    outline-offset: 3px !important;
}

@media (max-width: 1120px) {
    .header {
        flex-wrap: wrap;
    }

    .logo {
        min-width: 170px;
    }

    .productos-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .header,
    .header.header-compacto {
        position: relative !important;
        display: grid !important;
        width: calc(100% - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin-inline: 12px !important;
        min-height: 0;
        padding: 14px 0 !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "titulo titulo"
            "buscador buscador"
            "entrar carrito"
            "idioma idioma" !important;
        column-gap: 12px !important;
        overflow: visible !important;
    }

    .logo {
        width: max-content !important;
        max-width: 100%;
        padding-left: 43px;
        justify-self: center;
        text-align: left;
        align-items: flex-start;
    }

    .header > * {
        min-width: 0 !important;
    }

    .buscador-principal {
        width: 100% !important;
        max-width: none;
    }

    #boton-buscar {
        position: absolute !important;
        top: 50% !important;
        right: 7px !important;
        z-index: 4;
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(-50%) !important;
    }

    .boton-entrar,
    .boton-carrito,
    #boton-carrito {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .nav,
    .header-compacto + .nav {
        top: 0;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .productos-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .selector-funciones-inicio {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .barra-oferta {
        font-size: 10px;
    }

    .productos,
    .productos-principales-inicio {
        padding: 42px 12px;
    }

    .productos-principales-inicio > .seccion-titulo h2,
    .productos > .seccion-titulo h2 {
        font-size: clamp(2.2rem, 13vw, 3.5rem);
    }

    .productos-container {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .producto {
        min-height: 540px;
        border-radius: 21px;
    }

    .producto-imagen {
        height: 235px;
    }

    .producto-info {
        padding: 17px 17px 0;
    }

    .producto .agregar-carrito {
        width: calc(100% + 34px) !important;
        margin-left: -17px;
    }

    .opciones-compra-inicio {
        padding: 42px 12px;
    }

    .carrusel {
        width: calc(100% - 24px);
        margin-block: 24px;
        border-radius: 22px;
    }

    .slide {
        border-radius: 22px;
    }

    .contacto {
        width: calc(100% - 24px);
        margin-bottom: 40px;
    }

    .carrito-contenido {
        padding: 25px 16px;
    }

    .carrito-flotante {
        bottom: 83px !important;
    }

    .whatsapp-flotante {
        bottom: 15px !important;
    }
}

/* Cuenta Firebase: interfaz compacta y comercial. */
#sistema-usuarios-firebase .usuario-demo-panel {
    grid-template-columns: 1fr;
    width: min(460px, 100%);
    min-height: 0;
    padding: clamp(26px, 6vw, 38px);
    gap: 18px;
    border-color: rgba(100, 235, 215, .23);
    border-radius: 30px;
    background: radial-gradient(circle at 92% 4%, rgba(81, 228, 207, .17), transparent 13rem), linear-gradient(155deg, #123846, #061820 76%);
}

#sistema-usuarios-firebase .usuario-acceso-cabecera { max-width: none; padding-right: 42px; }
#sistema-usuarios-firebase .usuario-acceso-cabecera::before { content: "🔒"; display: grid; width: 46px; height: 46px; margin-bottom: 16px; place-items: center; border: 1px solid rgba(115, 239, 216, .28); border-radius: 15px; background: rgba(82, 224, 204, .1); font-size: 21px; }
#sistema-usuarios-firebase .usuario-acceso-cabecera h2 { font-size: clamp(2rem, 9vw, 2.75rem); letter-spacing: -.06em; }
#sistema-usuarios-firebase .usuario-login-form { gap: 14px; padding: 0; border: 0; background: transparent; }
#sistema-usuarios-firebase .usuario-login-form > label { display: grid; gap: 7px; color: #c4dce1; font-size: .8rem; font-weight: 800; }
#sistema-usuarios-firebase .usuario-login-form input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid rgba(196, 233, 233, .18); border-radius: 14px; outline: 0; color: #f8ffff; background: rgba(0, 10, 16, .34); font: inherit; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
#sistema-usuarios-firebase .usuario-login-form input:focus { border-color: #55dccb; background: rgba(3, 23, 30, .74); box-shadow: 0 0 0 4px rgba(85, 220, 203, .13); }
#sistema-usuarios-firebase .usuario-login-enviar { min-height: 54px; margin-top: 4px; border: 0; border-radius: 15px; color: #062225; background: linear-gradient(135deg, #5de4d4, #b4ec76); box-shadow: 0 13px 27px rgba(40, 206, 181, .2); font: inherit; font-weight: 950; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
#sistema-usuarios-firebase .usuario-login-enviar:hover { transform: translateY(-2px); box-shadow: 0 17px 32px rgba(40, 206, 181, .3); }
#sistema-usuarios-firebase .usuario-cambiar-modo { justify-self: center; padding: 5px 8px; border: 0; color: #7de9db; background: transparent; font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; }
#sistema-usuarios-firebase .usuario-cambiar-modo:hover { color: #e5ffff; text-decoration: underline; text-underline-offset: 4px; }
#sistema-usuarios-firebase .usuario-cuenta-hero { display: flex; align-items: center; gap: 16px; padding: 5px 42px 10px 0; }
#sistema-usuarios-firebase .usuario-avatar-grande { flex: 0 0 auto; width: 64px; height: 64px; font-size: 1.45rem; }
#sistema-usuarios-firebase .usuario-cerrar-sesion { min-height: 48px; border: 1px solid rgba(255, 181, 162, .24); border-radius: 14px; color: #ffd4c9; background: rgba(255, 121, 91, .08); font: inherit; font-weight: 800; cursor: pointer; }

@media (max-width: 560px) {
    #sistema-usuarios-firebase.sistema-usuarios-demo { padding: 12px; align-items: end; }
    #sistema-usuarios-firebase .usuario-demo-panel { border-radius: 25px; padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =====================================================
   NICHI · CARRITO COMPACTO
   Un panel corto de compra: más catálogo visible y el pago siempre al alcance.
   ===================================================== */
.carrito-ventana {
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    background: rgba(3, 10, 28, .58) !important;
    backdrop-filter: blur(8px) !important;
}

.carrito-contenido {
    display: flex !important;
    flex-direction: column !important;
    width: min(430px, 100%) !important;
    max-width: 430px !important;
    max-height: min(720px, calc(100dvh - 32px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(6, 22, 54, .12) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(1, 12, 37, .3) !important;
}

.carrito-contenido h2 {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 18px 58px 14px 18px !important;
    border-bottom: 1px solid #e8ebf2;
    color: var(--nichi-azul, #061636) !important;
    font-size: 1.12rem !important;
    line-height: 1.2;
}

.cerrar-carrito {
    z-index: 2;
    top: 12px !important;
    right: 12px !important;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border: 1px solid #e1e5ed !important;
    border-radius: 10px !important;
    background: #f7f8fb !important;
    color: var(--nichi-azul, #061636) !important;
    font-size: 1rem !important;
}

.carrito-contenido #lista-carrito {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 !important;
    padding: 0 18px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.carrito-contenido .item-carrito {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
        "info cantidad eliminar"
        "info subtotal subtotal";
    gap: 5px 9px !important;
    min-height: 72px;
    padding: 11px 0 !important;
    border-color: #e9ecf2 !important;
}

.carrito-contenido .info-producto {
    grid-area: info;
    gap: 3px !important;
}

.carrito-contenido .info-producto .nombre-producto {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--nichi-azul, #061636);
    font-size: .91rem;
    line-height: 1.25;
}

.carrito-contenido .info-producto > span {
    color: #68748b;
    font-size: .8rem;
}

.carrito-contenido .controles-cantidad {
    grid-area: cantidad;
    gap: 3px !important;
    padding: 2px;
    border: 1px solid #e0e5ee;
    border-radius: 9px;
    background: #f7f8fb;
}

.carrito-contenido .controles-cantidad button {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px;
    padding: 0 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--nichi-azul, #061636) !important;
    font-size: 1.06rem !important;
    line-height: 1;
}

.carrito-contenido .controles-cantidad > span {
    min-width: 17px;
    color: var(--nichi-azul, #061636);
    font-size: .83rem;
    font-weight: 800;
    text-align: center;
}

.carrito-contenido .subtotal {
    grid-area: subtotal;
    align-self: center;
    color: var(--nichi-rojo, #e31b2b) !important;
    font-size: .84rem;
    font-weight: 800;
    text-align: right;
}

.carrito-contenido .eliminar-producto {
    grid-area: eliminar;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    border-radius: 8px !important;
    background: #fff2f3 !important;
    color: var(--nichi-rojo, #e31b2b) !important;
    font-size: .9rem !important;
}

.carrito-contenido .carrito-vacio {
    margin: 0;
    padding: 34px 10px !important;
    color: #69758b !important;
    font-size: .92rem;
}

.carrito-contenido .total-carrito {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 13px 18px 9px !important;
    border-top: 1px solid #e7eaf0 !important;
    background: #fff;
    color: var(--nichi-azul, #061636) !important;
    font-size: .97rem !important;
}

.carrito-contenido .total-carrito #total-carrito {
    color: var(--nichi-rojo, #e31b2b);
    font-size: 1.13rem;
    font-weight: 900;
}

.carrito-contenido .finalizar-compra {
    flex: 0 0 auto;
    width: calc(100% - 36px) !important;
    min-height: 46px;
    margin: 0 18px 18px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--nichi-rojo, #e31b2b), #bd1023) !important;
    box-shadow: 0 9px 19px rgba(227, 27, 43, .22) !important;
    color: #fff !important;
    font-size: .91rem !important;
    font-weight: 800;
}

@media (max-width: 700px) {
    .carrito-ventana {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .carrito-contenido {
        width: 100% !important;
        max-width: none !important;
        max-height: min(76dvh, 620px) !important;
        border-width: 1px 0 0 !important;
        border-radius: 22px 22px 0 0 !important;
    }

    .carrito-contenido h2 {
        padding-top: 16px !important;
        padding-bottom: 13px !important;
    }

    .carrito-contenido #lista-carrito {
        padding-inline: 16px !important;
    }

    .carrito-contenido .total-carrito {
        padding-inline: 16px !important;
    }

    .carrito-contenido .finalizar-compra {
        width: calc(100% - 32px) !important;
        margin-inline: 16px !important;
        margin-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }
}

/* =====================================================
   NICHI — sistema visual definitivo
   Azul marino + rojo + blanco, con contraste comercial.
===================================================== */
:root {
    --nichi-azul: #061636;
    --nichi-azul-medio: #102a5b;
    --nichi-rojo: #e31b2b;
    --nichi-rojo-profundo: #b90f23;
    --nichi-blanco: #ffffff;
    --nichi-gris: #f3f5f9;
    --nichi-texto: #14213d;
    --nichi-texto-suave: #58657d;
    --tk-fondo: var(--nichi-azul);
    --tk-superficie: var(--nichi-azul-medio);
    --tk-superficie-clara: var(--nichi-gris);
    --tk-texto: var(--nichi-texto);
    --tk-texto-suave: var(--nichi-texto-suave);
    --tk-acento: var(--nichi-rojo);
    --tk-acento-profundo: var(--nichi-rojo-profundo);
    --tk-precio: var(--nichi-rojo);
    --tk-linea: rgba(255, 255, 255, .16);
    --tk-sombra: 0 16px 38px rgba(6, 22, 54, .16);
}

html { color-scheme: light; scrollbar-color: var(--nichi-rojo) #e8ecf4; }
body.experiencia-premium {
    color: var(--nichi-texto);
    background: linear-gradient(180deg, #f7f8fb 0, #eef1f7 100%) !important;
}
body.experiencia-premium::before {
    opacity: .5;
    background-image: radial-gradient(circle at 8% 0, rgba(227, 27, 43, .10), transparent 30rem), radial-gradient(circle at 92% 20%, rgba(6, 22, 54, .08), transparent 28rem);
    mask-image: none;
}

.barra-oferta {
    color: #fff !important;
    background: linear-gradient(90deg, var(--nichi-rojo-profundo), var(--nichi-rojo), #f33b47) !important;
    box-shadow: inset 0 -1px rgba(255,255,255,.2);
}
.header,
.header.header-compacto {
    border-bottom-color: rgba(255,255,255,.13) !important;
    background: rgba(6, 22, 54, .97) !important;
    box-shadow: 0 10px 28px rgba(6, 22, 54, .2) !important;
}
.header .logo h1 { color: #fff !important; }
.header .logo span { color: #f2cfd3 !important; }
.nav,
.header-compacto + .nav { background: var(--nichi-azul) !important; border-color: rgba(255,255,255,.13) !important; }
.nav a { color: #d7dfef !important; }
.nav a:hover,
.nav a:focus-visible { color: #fff !important; }
.nav a::after { background: var(--nichi-rojo) !important; }

.buscador-principal input,
#buscador {
    border-color: rgba(255,255,255,.2) !important;
    color: #fff !important;
    background: rgba(255,255,255,.09) !important;
}
.buscador-principal input::placeholder { color: #c5cfdf !important; }
.buscador-principal input:focus { border-color: #fff !important; box-shadow: 0 0 0 4px rgba(227,27,43,.28) !important; }
#boton-buscar,
.agregar-carrito,
.vista-rapida-accion button,
.buscar-inteligente-principal,
.cupon-compra button {
    color: #fff !important;
    background: linear-gradient(135deg, var(--nichi-rojo), var(--nichi-rojo-profundo)) !important;
    box-shadow: 0 9px 19px rgba(185,15,35,.24) !important;
}
.boton-entrar,
.boton-carrito,
.selector-idioma #boton-idioma,
#boton-notificaciones {
    border-color: rgba(255,255,255,.22) !important;
    color: #fff !important;
    background: rgba(255,255,255,.09) !important;
}

.productos,
.productos-principales-inicio,
.catalogo-principal { color: var(--nichi-texto); }
.producto {
    border-color: #e0e5ef !important;
    background: #fff !important;
    box-shadow: 0 7px 20px rgba(6,22,54,.09) !important;
}
.producto:hover { border-color: rgba(227,27,43,.42) !important; box-shadow: var(--tk-sombra) !important; }
.producto-imagen { background: linear-gradient(145deg, #fff, #edf0f6) !important; }
.producto-info h3,
.producto-info p { color: var(--nichi-texto) !important; }
.producto-info p,
.producto-comentario,
.beneficios-tarjeta-producto span { color: var(--nichi-texto-suave) !important; }
.producto-categoria { color: var(--nichi-rojo-profundo) !important; background: #fff0f1 !important; }
.precio-comercial-producto strong,
.vista-rapida-precio { color: var(--nichi-rojo) !important; }
.etiqueta-producto { color: #fff !important; background: var(--nichi-rojo) !important; }
.favorito-producto { color: var(--nichi-rojo) !important; background: #fff !important; }

.contexto-busqueda-catalogo { border-color: rgba(227,27,43,.22) !important; color: var(--nichi-azul) !important; background: #fff3f4 !important; }
.contexto-busqueda-catalogo button,
.limpiar-buscador { border-color: rgba(227,27,43,.35) !important; color: var(--nichi-rojo-profundo) !important; background: #fff !important; }
.vista-rapida-contenido,
#panel-notificaciones,
.historial-pedidos-cuenta { border-color: #dce2ee !important; background: #fff !important; color: var(--nichi-texto) !important; }
.vista-rapida-contenido h2,
#panel-notificaciones h2,
.historial-pedidos-cuenta h3 { color: var(--nichi-azul) !important; }

#sistema-perfil-cliente .perfil-cliente-panel,
#sistema-usuarios-firebase .usuario-demo-panel,
.sistema-usuarios-demo .usuario-demo-panel { background: linear-gradient(160deg, #061636, #102a5b) !important; }
.perfil-cliente-resumen button { border-color: rgba(255,255,255,.18) !important; background: rgba(255,255,255,.08) !important; }
.perfil-cliente-resumen strong,
#sistema-perfil-cliente .perfil-seccion-titulo small { color: #fff !important; }
#sistema-perfil-cliente .historial-pedidos-cuenta { background: rgba(255,255,255,.06) !important; }
#sistema-perfil-cliente .usuario-ir-catalogo,
#sistema-usuarios-firebase .usuario-login-enviar { color: #fff !important; background: linear-gradient(135deg, var(--nichi-rojo), var(--nichi-rojo-profundo)) !important; }

footer { color: #d9e0ed !important; background: var(--nichi-azul) !important; }
footer a { color: #fff !important; }

@media (max-width:700px) {
    .navegacion-comercial-movil {
        border-top-color: #e1e5ee !important;
        background: rgba(255,255,255,.98) !important;
    }
    .navegacion-comercial-movil a,
    .navegacion-comercial-movil button { color: #647087 !important; }
    .navegacion-comercial-movil a.activo { color: var(--nichi-rojo) !important; }
    .navegacion-comercial-movil a.activo .nav-icon { background: #fff0f1 !important; box-shadow: inset 0 0 0 1px rgba(227,27,43,.12) !important; }
    .navegacion-comercial-movil em { background: var(--nichi-rojo) !important; }
    .productos-principales-inicio > .seccion-titulo p,
    .productos > .seccion-titulo p { color: #718097 !important; }
}

/* Navegación móvil: controles de comercio claros, táctiles y consistentes. */
@media (max-width:700px) {
    body { padding-bottom: 86px; }

    .navegacion-comercial-movil {
        height: 78px !important;
        padding: 7px 7px max(7px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid rgba(19, 71, 80, .11) !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 -12px 32px rgba(5, 30, 38, .12) !important;
    }

    .navegacion-comercial-movil a,
    .navegacion-comercial-movil button {
        min-width: 0;
        min-height: 59px;
        gap: 4px !important;
        border-radius: 15px;
        color: #60757a !important;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        transition: color .18s ease, background .18s ease, transform .18s ease;
    }

    .navegacion-comercial-movil .nav-icon {
        display: grid !important;
        width: 42px;
        height: 31px;
        place-items: center;
        border-radius: 11px;
        font-size: 0 !important;
        line-height: 1;
        transition: background .18s ease, color .18s ease, transform .18s ease;
    }

    .navegacion-comercial-movil .nav-icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .navegacion-comercial-movil b {
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: -.01em;
        line-height: 1.1;
        text-overflow: ellipsis;
    }

    .navegacion-comercial-movil a.activo {
        color: #087f78 !important;
    }

    .navegacion-comercial-movil a.activo .nav-icon {
        background: linear-gradient(135deg, #d9f6f1, #ecfbf8);
        box-shadow: inset 0 0 0 1px rgba(17, 143, 136, .10);
    }

    .navegacion-comercial-movil a.activo b {
        font-weight: 850 !important;
    }

    .navegacion-comercial-movil button:active,
    .navegacion-comercial-movil a:active {
        transform: scale(.96);
        background: rgba(13, 92, 114, .06);
    }

    .navegacion-comercial-movil em {
        top: 3px !important;
        right: 15% !important;
        min-width: 18px;
        height: 18px;
        border: 2px solid #fff;
        border-radius: 10px;
        background: #e45736 !important;
        color: #fff;
        font-size: 10px !important;
        font-style: normal;
        font-weight: 850;
        line-height: 14px;
    }
}

/* Perfil del cliente: actividad y compras con jerarquía clara. */
#sistema-perfil-cliente .perfil-cliente-panel {
    max-height: min(780px, calc(100vh - 28px));
    overflow-y: auto;
}
#sistema-perfil-cliente .usuario-cuenta-hero {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(185, 224, 222, .17);
}
.perfil-cliente-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin: 18px 0;
}
.perfil-cliente-resumen button {
    min-height: 78px;
    padding: 10px 6px;
    border: 1px solid rgba(178, 229, 221, .16);
    border-radius: 14px;
    color: #d8f8f3;
    background: rgba(255, 255, 255, .055);
    font: inherit;
    cursor: pointer;
}
.perfil-cliente-resumen button:hover { background: rgba(92, 227, 207, .12); }
.perfil-cliente-resumen strong,
.perfil-cliente-resumen span { display: block; }
.perfil-cliente-resumen strong { color: #a9f1e6; font-size: 1.35rem; }
.perfil-cliente-resumen span { margin-top: 4px; color: #c1d9dc; font-size: .76rem; font-weight: 750; }
#sistema-perfil-cliente .historial-pedidos-cuenta { border-color: rgba(178, 229, 221, .17); background: rgba(255, 255, 255, .045); }
#sistema-perfil-cliente .perfil-seccion-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
#sistema-perfil-cliente .perfil-seccion-titulo small { color: #75e5d8; font-size: .65rem; font-weight: 900; letter-spacing: .11em; }
#sistema-perfil-cliente .perfil-seccion-titulo h3 { margin: 2px 0 0; color: #f1ffff; }
#sistema-perfil-cliente .perfil-seccion-titulo button { padding: 7px 9px; border: 0; border-radius: 9px; color: #76ebdc; background: rgba(101, 229, 214, .1); font: inherit; font-size: .73rem; font-weight: 850; cursor: pointer; }
#sistema-perfil-cliente .historial-pedidos-cuenta article { border-color: rgba(202, 235, 234, .12); }
#sistema-perfil-cliente .historial-pedidos-cuenta strong,
#sistema-perfil-cliente .historial-pedidos-cuenta b { color: #f1ffff; }
#sistema-perfil-cliente .historial-pedidos-cuenta small { color: #afc9cd; }
#sistema-perfil-cliente .historial-pedidos-cuenta span { color: #ffca72; }
#sistema-perfil-cliente .historial-pedidos-cuenta button { border-color: rgba(104, 231, 215, .35); color: #8ef3e6; background: transparent; }
#sistema-perfil-cliente .perfil-sin-pedidos { margin: 0; padding: 16px 0 4px; color: #bdd5d8; line-height: 1.5; }
#sistema-perfil-cliente .usuario-ir-catalogo { border: 0; border-radius: 14px; color: #062225; background: linear-gradient(135deg, #5de4d4, #b4ec76); font: inherit; font-weight: 900; cursor: pointer; }

/* Controles de catálogo y confirmación: información compacta, sin promesas de entrega no confirmadas. */
.herramientas-catalogo .filtro-disponibilidad,
.herramientas-catalogo .filtro-precio {
    min-width: 148px;
}

.checkout-resumen-pedido {
    margin: 16px 0;
    padding: 13px 14px;
    border: 1px solid rgba(18, 126, 120, .18);
    border-radius: 13px;
    background: #f1fbf9;
}

.checkout-resumen-pedido h3 {
    margin: 0 0 7px;
    color: #144c54;
    font-size: .94rem;
}

.checkout-resumen-pedido #checkout-resumen-lineas span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #28555b;
    font-size: .9rem;
}

.checkout-resumen-pedido p {
    margin: 8px 0 0 !important;
    color: #557277 !important;
    font-size: .78rem !important;
    line-height: 1.35;
}

.campo-direccion-checkout[hidden] {
    display: none !important;
}

@media (max-width:700px) {
    .herramientas-catalogo .filtro-disponibilidad,
    .herramientas-catalogo .filtro-precio {
        min-width: 0;
    }

    .checkout-resumen-pedido {
        margin: 13px 0;
    }
}


/* Centro de notificaciones: alineado con las acciones, no flotando sobre el logo. */
.header > .centro-notificaciones {
    order: 5;
    margin-left: -8px;
}

#boton-notificaciones {
    border-color: rgba(255, 138, 61, .28);
    background: linear-gradient(145deg, #fff, #fff4e9);
}

@media (max-width:700px) {
    .centro-notificaciones {
        left: 12px !important;
        right: auto !important;
        top: 24px !important;
    }

    #boton-notificaciones {
        border: 1px solid rgba(255, 255, 255, .34) !important;
        background: rgba(255, 255, 255, .13) !important;
        color: #fff !important;
        box-shadow: 0 7px 18px rgba(0, 0, 0, .18) !important;
        backdrop-filter: blur(12px);
    }

    #panel-notificaciones {
        top: 68px !important;
    }
}


/* =========================================================
   PRIORIDAD COMERCIAL — EL PRODUCTO ES EL PROTAGONISTA
   ========================================================= */

.productos {
    position: relative;
}

.productos-container {
    gap: 20px !important;
}

.producto {
    position: relative;
    border: 1px solid rgba(20, 69, 82, .10) !important;
    background: #fff !important;
    box-shadow: 0 10px 25px rgba(12, 55, 67, .09) !important;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, border-color .28s ease !important;
}

.producto::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    transition: border-color .28s ease;
}

.producto:hover {
    z-index: 2;
    transform: translateY(-7px);
    border-color: rgba(255, 138, 61, .35) !important;
    box-shadow: 0 22px 42px rgba(12, 55, 67, .18) !important;
}

.producto:hover::before {
    border-color: rgba(255, 138, 61, .28);
}

.producto-imagen {
    background:
        radial-gradient(circle at 74% 20%, rgba(255, 204, 124, .32), transparent 34%),
        linear-gradient(145deg, #f8fcfc, #e9f4f4) !important;
}

.producto-imagen img,
.producto-imagen > span {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}

.producto:hover .producto-imagen img,
.producto:hover .producto-imagen > span {
    transform: scale(1.075) rotate(-1deg);
    filter: saturate(1.08) contrast(1.02);
}

.producto-info {
    position: relative;
    z-index: 2;
}

.producto-categoria {
    color: #a34526 !important;
    background: #fff0df !important;
    font-weight: 850 !important;
    letter-spacing: .06em;
}

.producto h3 {
    color: #102f3a !important;
    font-size: clamp(1rem, 1.2vw, 1.12rem) !important;
    font-weight: 850 !important;
    letter-spacing: -.015em;
}

.producto strong,
.precio-comercial-producto strong {
    color: #d74258 !important;
    font-size: clamp(1.2rem, 1.5vw, 1.42rem) !important;
    font-weight: 950 !important;
    letter-spacing: -.035em;
}

.producto .agregar-carrito {
    margin-top: 10px !important;
}

@media (min-width:1200px) {
    .productos-container {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        max-width: 1280px;
    }
}

@media (max-width:700px) {
    .productos-container {
        gap: 11px !important;
    }

    .producto:hover {
        transform: none;
    }

    .producto-info {
        padding: 11px !important;
    }

    .producto h3 {
        font-size: .9rem !important;
    }

    .producto strong,
    .precio-comercial-producto strong {
        font-size: 1.08rem !important;
    }
}


/* Portada directa: el catálogo aparece antes que cualquier contenido editorial. */
.productos-principales-inicio + .opciones-compra-inicio,
.productos-principales-inicio + .opciones-compra-inicio + .carrusel,
.productos-principales-inicio ~ .testimonios {
    display: none !important;
}

.productos-principales-inicio {
    padding-bottom: 72px;
}

.productos-principales-inicio .productos-container {
    max-width: 1320px;
    margin-inline: auto;
}

/* El contador solo comunica algo cuando realmente hay artículos en el carrito. */
#contador-carrito[hidden],
.contador-carrito-flotante[hidden],
[data-accion-movil="carrito"] em[hidden] {
    display: none !important;
}

/* Categorías bajo demanda: disponibles sin interrumpir el catálogo. */
.explorador-categorias-inicio {
    width: min(1320px, calc(100% - 32px));
    margin: -8px auto 28px;
    text-align: center;
}

.abrir-explorador-categorias {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #f5ffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.abrir-explorador-categorias:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .15);
}

.abrir-explorador-categorias > span:first-child {
    color: #ffc36a;
    font-size: 1.15rem;
}

.abrir-explorador-categorias small {
    display: grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 50%;
    background: #ffc36a;
    color: #24313a;
    font-size: .7rem;
}

.panel-categorias-inicio-rapido {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.panel-categorias-inicio-rapido p {
    margin: 0 0 12px;
    color: #c7dedf;
    font-size: .85rem;
    font-weight: 700;
}

.chips-categorias-inicio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.chips-categorias-inicio button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(193, 227, 224, .24);
    border-radius: 999px;
    background: rgba(5, 25, 35, .42);
    color: #e9f9f7;
    font: inherit;
    font-size: .84rem;
    font-weight: 750;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.chips-categorias-inicio button:hover,
.chips-categorias-inicio button.activo {
    transform: translateY(-1px);
    border-color: #ffc36a;
    background: #ffc36a;
    color: #24313a;
}

@media (max-width:700px) {
    .explorador-categorias-inicio {
        width: calc(100% - 20px);
        margin-bottom: 20px;
    }

    .panel-categorias-inicio-rapido {
        padding: 13px 10px;
    }

    .chips-categorias-inicio {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: thin;
    }

    .chips-categorias-inicio button {
        flex: 0 0 auto;
    }
}


/* Favoritos: acción ligera sobre la imagen, no un bloque que compita con el producto. */
.producto-imagen .favorito-producto {
    position: absolute !important;
    z-index: 6;
    top: 12px !important;
    right: 12px !important;
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 0 !important;
    place-items: center;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(20, 69, 82, .12) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .90) !important;
    color: #315d68 !important;
    box-shadow: 0 8px 20px rgba(8, 44, 56, .18) !important;
    backdrop-filter: blur(10px);
    font-size: 1.4rem !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s ease, color .2s ease, box-shadow .2s ease !important;
}

.producto-imagen .favorito-producto:hover {
    transform: translateY(-2px) scale(1.08);
    background: #fff !important;
    color: #e44963 !important;
    box-shadow: 0 12px 24px rgba(8, 44, 56, .24) !important;
}

.producto-imagen .favorito-producto.activo {
    border-color: transparent !important;
    background: linear-gradient(135deg, #ff7d67, #df3d67) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(222, 61, 103, .34) !important;
}

.producto-imagen .favorito-producto:active {
    transform: scale(.92);
}

@media (max-width:700px) {
    .producto-imagen .favorito-producto {
        top: 8px !important;
        right: 8px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 1.18rem !important;
    }
}


/* Centro de notificaciones: compacto y coherente con la cabecera oscura. */
.header #boton-notificaciones {
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    place-items: center;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .055)) !important;
    color: #ffc36a !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 7px 16px rgba(0, 0, 0, .18) !important;
    backdrop-filter: blur(12px);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s ease, box-shadow .2s ease !important;
}

.header #boton-notificaciones > span {
    font-size: 1.22rem !important;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2));
}

.header #boton-notificaciones:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, rgba(255, 195, 106, .24), rgba(255, 255, 255, .10)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 11px 20px rgba(0, 0, 0, .24) !important;
}

.header #boton-notificaciones > em {
    top: -6px !important;
    right: -6px !important;
    display: grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #0b2029 !important;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7b64, #df3d67) !important;
    box-shadow: 0 4px 9px rgba(223, 61, 103, .36);
    line-height: 1 !important;
}

.header #boton-notificaciones > em[hidden] {
    display: none !important;
}

@media (max-width:700px) {
    .header #boton-notificaciones {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
    }
}


/* Beneficios de compra: banda de confianza clara, sobria y legible. */
.franja-beneficios-comercial {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: 1280px;
    margin: 18px auto 0;
    overflow: hidden;
    border: 1px solid rgba(112, 185, 184, .20);
    border-radius: 18px;
    background:
        radial-gradient(circle at 10% 0%, rgba(72, 209, 190, .15), transparent 34%),
        linear-gradient(135deg, #102b35, #0a2029);
    box-shadow: 0 14px 32px rgba(7, 34, 43, .16);
}

.franja-beneficios-comercial > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 86px;
    gap: 13px;
    padding: 16px 22px;
    background: transparent;
}

.franja-beneficios-comercial > div + div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    width: 1px;
    height: 60%;
    background: linear-gradient(transparent, rgba(194, 235, 231, .24), transparent);
}

.franja-beneficios-comercial > div > span {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(64, 207, 192, .24), rgba(255, 195, 106, .16));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    font-size: 1.2rem;
}

.franja-beneficios-comercial p {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    color: #f6ffff;
    line-height: 1.2;
}

.franja-beneficios-comercial strong {
    color: #f9ffff;
    font-size: .92rem;
    font-weight: 850;
    letter-spacing: .01em;
}

.franja-beneficios-comercial small {
    color: #b9d1d3;
    font-size: .8rem;
    line-height: 1.35;
}

@media (max-width:700px) {
    .franja-beneficios-comercial {
        display: flex;
        gap: 0;
        margin: 10px 10px 0;
        border-radius: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .franja-beneficios-comercial::-webkit-scrollbar {
        display: none;
    }

    .franja-beneficios-comercial > div {
        min-width: 86vw;
        min-height: 76px;
        padding: 14px 16px;
        scroll-snap-align: start;
    }

    .franja-beneficios-comercial > div + div::before {
        display: none;
    }
}

/* =====================================================
   USUARIOS DEMO: CLIENTE Y ADMINISTRADOR
===================================================== */

body.modal-usuario-abierto {
    overflow: hidden;
}

.boton-entrar.sesion-iniciada {
    gap: 9px;
    border-color: rgba(56, 216, 200, .45) !important;
    background: rgba(56, 216, 200, .09) !important;
}

.usuario-avatar-mini {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    color: #042421;
    background: linear-gradient(145deg, var(--tk-acento), var(--tk-lima));
    font-size: 12px;
    font-weight: 950;
}

.usuario-nombre-mini {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sistema-usuarios-demo {
    position: fixed;
    inset: 0;
    z-index: 10000000050;
    display: grid;
    padding: 22px;
    overflow-y: auto;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 16%, rgba(56, 216, 200, .18), transparent 30rem),
        rgba(1, 8, 12, .82);
    backdrop-filter: blur(18px) saturate(130%);
    transition: opacity .22s ease, visibility .22s ease;
}

.sistema-usuarios-demo.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.usuario-demo-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    width: min(900px, 100%);
    padding: clamp(25px, 4vw, 42px);
    gap: 22px 28px;
    border: 1px solid rgba(172, 225, 226, .18);
    border-radius: 28px;
    color: #f5fbfb;
    background:
        linear-gradient(145deg, rgba(16, 45, 57, .99), rgba(6, 23, 32, .99));
    box-shadow: 0 35px 110px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
    transform: translateY(18px) scale(.98);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.sistema-usuarios-demo.visible .usuario-demo-panel {
    transform: translateY(0) scale(1);
}

.usuario-demo-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    background: radial-gradient(circle at 75% 0, rgba(184, 243, 107, .08), transparent 22rem);
}

.usuario-demo-cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--tk-linea);
    border-radius: 12px;
    color: #cce0e3;
    background: rgba(255, 255, 255, .045);
    font-size: 24px;
    line-height: 1;
}

.usuario-demo-cerrar:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.usuario-acceso-cabecera,
.usuario-roles {
    grid-column: 1 / -1;
}

.usuario-acceso-cabecera {
    max-width: 680px;
    padding-right: 45px;
}

.usuario-demo-etiqueta {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(56, 216, 200, .28);
    border-radius: 999px;
    color: #6ae9de;
    background: rgba(56, 216, 200, .07);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .14em;
}

.usuario-acceso-cabecera h2,
.usuario-cuenta-hero h2 {
    margin: 13px 0 7px;
    color: #f6fcfc;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 950;
    line-height: .98;
    letter-spacing: -.055em;
}

.usuario-acceso-cabecera p,
.usuario-cuenta-hero p {
    margin: 0;
    color: #9eb9c0;
    line-height: 1.55;
}

.usuario-roles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.usuario-rol-tab {
    display: flex;
    min-height: 63px;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 12px 16px;
    border: 1px solid var(--tk-linea);
    border-radius: 16px;
    color: #b8ced3;
    background: rgba(255, 255, 255, .025);
    text-align: left;
}

.usuario-rol-tab span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
}

.usuario-rol-tab.activo {
    border-color: rgba(56, 216, 200, .58);
    color: #efffff;
    background: rgba(56, 216, 200, .1);
    box-shadow: inset 0 0 0 1px rgba(56, 216, 200, .08);
}

.usuario-login-form {
    display: grid;
    align-content: start;
    gap: 13px;
    padding: 20px;
    border: 1px solid var(--tk-linea);
    border-radius: 20px;
    background: rgba(3, 18, 26, .42);
}

.usuario-login-form > label:not(.usuario-recordar) {
    display: grid;
    gap: 7px;
    color: #c6dadd;
    font-size: 12px;
    font-weight: 800;
}

.usuario-login-form input[type="email"],
.usuario-campo-clave input {
    width: 100%;
    min-height: 49px;
    padding: 0 14px;
    border: 1px solid rgba(159, 205, 208, .23);
    border-radius: 12px;
    color: #f3ffff;
    background: #102f3b;
    font: inherit;
}

.usuario-login-form input:focus {
    border-color: var(--tk-acento);
    outline: 3px solid rgba(56, 216, 200, .14) !important;
}

.usuario-campo-clave {
    position: relative;
}

.usuario-campo-clave input {
    padding-right: 50px;
}

.usuario-mostrar-clave {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 40px;
    height: 39px;
    padding: 0;
    border-radius: 9px;
    color: #b8d2d5;
    background: transparent;
    transform: translateY(-50%);
}

.usuario-recordar {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #9fb8be;
    font-size: 12px;
}

.usuario-recordar input {
    width: 17px;
    height: 17px;
    accent-color: var(--tk-acento);
}

.usuario-login-error {
    min-height: 18px;
    margin: 0;
    color: #ff979c;
    font-size: 12px;
    font-weight: 700;
}

.usuario-login-enviar {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border-radius: 13px;
    color: #042421;
    background: linear-gradient(145deg, var(--tk-acento), #82e8bd);
    font-weight: 900;
}

.usuario-login-enviar span {
    font-size: 21px;
}

.usuario-login-form.error-login {
    animation: usuario-error .28s ease;
}

@keyframes usuario-error {
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

.credenciales-demo {
    padding: 20px;
    border: 1px solid rgba(184, 243, 107, .16);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(184, 243, 107, .055), rgba(56, 216, 200, .035));
}

.credenciales-demo h3 {
    margin: 0 0 12px;
    color: #dff4f3;
    font-size: 13px;
}

.credencial-demo {
    display: flex;
    width: 100%;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding: 12px;
    border: 1px solid var(--tk-linea);
    border-radius: 14px;
    color: #d9ebed;
    background: rgba(5, 24, 32, .48);
    text-align: left;
}

.credencial-demo > span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.credencial-demo small,
.credencial-demo code {
    overflow: hidden;
    color: #90aeb5;
    font-size: 10px;
    text-overflow: ellipsis;
}

.credencial-demo code {
    color: #c5e985;
}

.credencial-demo em {
    flex: 0 0 auto;
    color: #62ded4;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.credencial-demo.seleccionada,
.credencial-demo:hover {
    border-color: rgba(184, 243, 107, .42);
    background: rgba(184, 243, 107, .08);
}

.credenciales-demo > p {
    margin: 14px 0 0;
    color: #7f9ba2;
    font-size: 10px;
    line-height: 1.45;
}

/* Cuenta iniciada */
.usuario-cuenta-hero,
.usuario-resumen,
.usuario-cuenta-acciones {
    grid-column: 1 / -1;
}

.usuario-cuenta-hero {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding-right: 45px;
}

.usuario-cuenta-hero > .usuario-demo-etiqueta {
    grid-column: 1 / -1;
    width: max-content;
}

.usuario-avatar-grande {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    border-radius: 24px;
    color: #042421;
    background: linear-gradient(145deg, var(--tk-acento), var(--tk-lima));
    box-shadow: 0 16px 36px rgba(56, 216, 200, .18);
    font-size: 32px;
    font-weight: 950;
}

.usuario-rol {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    color: #93eee5;
    background: rgba(56, 216, 200, .1);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.usuario-rol-administrador {
    color: #d8f99e;
    background: rgba(184, 243, 107, .1);
}

.usuario-cuenta-hero h2 {
    margin-top: 9px;
    font-size: clamp(2rem, 5vw, 3.6rem);
}

.usuario-resumen {
    padding: 22px;
    border: 1px solid var(--tk-linea);
    border-radius: 20px;
    background: rgba(3, 18, 26, .42);
}

.usuario-resumen-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dceced;
}

.usuario-resumen-titulo small {
    margin-left: auto;
    color: #78979e;
}

.usuario-estado-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #77e892;
    box-shadow: 0 0 0 5px rgba(119, 232, 146, .08);
}

.usuario-estadisticas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 18px;
}

.usuario-estadisticas article {
    display: grid;
    min-height: 100px;
    align-content: center;
    gap: 5px;
    padding: 16px;
    border: 1px solid var(--tk-linea);
    border-radius: 15px;
    background: rgba(255, 255, 255, .028);
}

.usuario-estadisticas strong {
    color: #76e7dc;
    font-size: 30px;
}

.usuario-estadisticas span {
    color: #93adb3;
    font-size: 11px;
    font-weight: 700;
}

.usuario-cuenta-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.usuario-ir-catalogo,
.usuario-cerrar-sesion {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 13px;
    font-weight: 850;
    text-decoration: none;
}

.usuario-ir-catalogo {
    color: #042421;
    background: linear-gradient(145deg, var(--tk-acento), #83e8bd);
}

.usuario-cerrar-sesion {
    border: 1px solid rgba(255, 114, 121, .2);
    color: #ff9da2;
    background: rgba(255, 114, 121, .06);
}

@media (max-width: 700px) {
    .sistema-usuarios-demo {
        align-items: start;
        padding: 12px;
    }

    .usuario-demo-panel {
        grid-template-columns: 1fr;
        margin-block: 12px;
        padding: 27px 18px 20px;
        gap: 16px;
        border-radius: 22px;
    }

    .usuario-acceso-cabecera,
    .usuario-roles,
    .usuario-cuenta-hero,
    .usuario-resumen,
    .usuario-cuenta-acciones {
        grid-column: 1;
    }

    .usuario-acceso-cabecera h2 {
        font-size: 2.25rem;
    }

    .usuario-roles {
        gap: 7px;
    }

    .usuario-rol-tab {
        min-height: 55px;
        padding: 9px;
        font-size: 12px;
    }

    .usuario-rol-tab span {
        display: none;
    }

    .usuario-login-form,
    .credenciales-demo,
    .usuario-resumen {
        padding: 15px;
    }

    .credencial-demo {
        align-items: flex-start;
    }

    .credencial-demo em {
        display: none;
    }

    .usuario-cuenta-hero {
        grid-template-columns: 62px minmax(0, 1fr);
        padding-right: 32px;
        gap: 13px;
    }

    .usuario-avatar-grande {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        font-size: 24px;
    }

    .usuario-cuenta-hero h2 {
        font-size: 1.8rem;
    }

    .usuario-estadisticas {
        grid-template-columns: 1fr;
    }

    .usuario-estadisticas article {
        min-height: 72px;
    }

    .usuario-cuenta-acciones {
        flex-direction: column;
    }

    .usuario-ir-catalogo,
    .usuario-cerrar-sesion {
        width: 100%;
    }
}
.tiempo-carrito {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #f0c36a;
    border-radius: 10px;
    background: #fff8e8;
    color: #704b00;
    font-size: 0.92rem;
}

.tiempo-carrito[hidden] { display: none !important; }

.tiempo-carrito.recordatorio {
    border-color: #e8893c;
    background: #fff0e2;
    color: #8a3500;
}

.opciones-catalogo { margin: 1.25rem 0 2rem; }
.categorias-opcion-catalogo { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; padding:1.25rem; }
.categorias-opcion-catalogo[hidden] { display:none !important; }
.categorias-opcion-catalogo button { padding:.75rem 1rem; border:1px solid var(--color-principal, #f28c28); border-radius:999px; background:#fff; cursor:pointer; }
.opciones-catalogo #panel-compra-inteligente-inicio .descubridor-compras { margin:1rem 0 0; }
.catalogo-sin-seleccion #herramientas-catalogo,
.catalogo-sin-seleccion #paginacion-catalogo { display:none !important; }

.ver-detalle-producto {
    width:100%; margin:.45rem 0; padding:.7rem; border:1px solid #0d5c72;
    border-radius:9px; background:#fff; color:#0d5c72; font-weight:700; cursor:pointer;
}
.vista-rapida-producto { display:none; position:fixed; inset:0; z-index:1000000010; padding:20px; background:rgba(3,15,22,.78); align-items:center; justify-content:center; overflow:auto; backdrop-filter:blur(4px); }
.vista-rapida-producto.visible { display:flex; }
.vista-rapida-abierta { overflow:hidden; }
.vista-rapida-contenido { position:relative; display:grid; grid-template-columns:minmax(220px, .9fr) minmax(280px, 1.1fr); width:min(900px,100%); max-height:calc(100vh - 40px); overflow:auto; border-radius:18px; background:#fff; color:#173546; box-shadow:0 24px 70px rgba(0,0,0,.4); }
.vista-rapida-cerrar { position:absolute; z-index:2; top:12px; right:12px; width:38px; height:38px; border:0; border-radius:50%; background:#edf2f3; font-size:25px; cursor:pointer; }
.vista-rapida-imagen { display:flex; align-items:center; justify-content:center; min-height:420px; padding:30px; background:#f4f7f7; font-size:100px; }
.vista-rapida-imagen img { width:100%; max-height:430px; object-fit:contain; }
.vista-rapida-info { padding:40px 36px; }
.vista-rapida-info small { color:#168d86; font-weight:800; text-transform:uppercase; }
.vista-rapida-info h2 { margin:.5rem 2.5rem .5rem 0; }
.vista-rapida-precio { display:block; margin:1rem 0; color:#0d5c72; font-size:1.65rem; }
.vista-rapida-info ul { padding-left:1.2rem; line-height:1.9; }
.vista-rapida-accion { display:flex; align-items:end; gap:12px; margin-top:1.2rem; }
.vista-rapida-accion label { font-weight:700; }
.vista-rapida-accion input { display:block; width:80px; margin-top:5px; padding:10px; border:1px solid #cbdadd; border-radius:8px; }
.vista-rapida-accion button { flex:1; padding:12px; border:0; border-radius:9px; background:#0d5c72; color:#fff; font-weight:800; cursor:pointer; }
.vista-rapida-accion button:disabled { opacity:.55; cursor:not-allowed; }
.vista-rapida-mensaje { min-height:1.4em; color:#167540; font-weight:700; }
.vista-rapida-similares { margin-top:22px; padding-top:18px; border-top:1px solid #e1eaec; }
.vista-rapida-similares h3 { margin:0 0 11px; font-size:1rem; }
.vista-rapida-similares > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.vista-rapida-similares button { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:7px; padding:7px; border:1px solid #dce7e8; border-radius:10px; background:#fff; color:#173546; text-align:left; cursor:pointer; }
.vista-rapida-similares img,.vista-rapida-similares span { grid-row:span 2; width:42px; height:42px; object-fit:contain; border-radius:7px; background:#f1f6f6; }
.vista-rapida-similares small { overflow:hidden; font-size:.68rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.vista-rapida-similares strong { color:#0d5c72; font-size:.75rem; }
.guardar-datos-checkout { display:flex !important; align-items:center; gap:9px; font-weight:500 !important; }
.guardar-datos-checkout input { width:auto !important; margin:0 !important; }
.historial-pedidos-cuenta { margin-top:18px; padding:18px; border:1px solid #dbe6e8; border-radius:14px; background:#f8fbfb; }
.historial-pedidos-cuenta h3 { margin:0 0 12px; }
.historial-pedidos-cuenta article { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid #e1eaec; }
.historial-pedidos-cuenta article:first-of-type { border-top:0; }
.historial-pedidos-cuenta article div { display:flex; flex-direction:column; gap:3px; }
.historial-pedidos-cuenta article div:last-child { text-align:right; }
.historial-pedidos-cuenta small { color:#667b82; }
.historial-pedidos-cuenta span { color:#a56709; font-size:.78rem; font-weight:700; }
.historial-pedidos-cuenta button { margin-top:4px; padding:5px 9px; border:1px solid #0d5c72; border-radius:7px; background:#fff; color:#0d5c72; font-size:.75rem; font-weight:700; cursor:pointer; }

.franja-beneficios-comercial { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:1280px; margin:12px auto 0; border-radius:14px; overflow:hidden; background:#e6ded0; box-shadow:0 4px 18px rgba(21,48,59,.08); }
.franja-beneficios-comercial > div { display:flex; align-items:center; justify-content:center; gap:10px; padding:13px 16px; background:#fff9ec; }
.franja-beneficios-comercial > div > span { font-size:1.3rem; }
.franja-beneficios-comercial p { display:flex; flex-direction:column; margin:0; line-height:1.25; }
.franja-beneficios-comercial small { color:#6b7478; }
.categorias-comerciales { display:flex; gap:14px; max-width:1280px; margin:18px auto; padding:2px 4px 10px; overflow-x:auto; scrollbar-width:thin; }
.categorias-comerciales button { flex:0 0 100px; border:0; background:transparent; color:#173546; cursor:pointer; }
.categorias-comerciales button span { display:flex; align-items:center; justify-content:center; width:76px; height:76px; margin:auto; overflow:hidden; border:2px solid #fff; border-radius:24px; background:#edf3f3; font-size:34px; box-shadow:0 5px 15px rgba(17,65,78,.14); }
.categorias-comerciales button img { width:100%; height:100%; object-fit:cover; }
.categorias-comerciales button b { display:block; margin-top:7px; font-size:.8rem; line-height:1.15; }
.precio-comercial-producto { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-top:7px; }
.precio-comercial-producto strong { color:#dc4a20 !important; font-size:1.2rem; }
.precio-comercial-producto del { color:#89969a; font-size:.78rem; }
.precio-comercial-producto span { padding:2px 5px; border-radius:4px; background:#fff0e8; color:#dc4a20; font-size:.72rem; font-weight:800; }
.beneficios-tarjeta-producto { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0; }
.beneficios-tarjeta-producto span { padding:3px 6px; border-radius:5px; background:#e9f8f1; color:#167550; font-size:.7rem; font-weight:700; }
.navegacion-comercial-movil { display:none; }
.abrir-categorias-movil,.panel-categorias-movil { display:none; }
.centro-notificaciones { position:relative; flex:0 0 auto; }
#boton-notificaciones { position:relative; display:grid; place-items:center; width:42px; height:42px; border:1px solid #dbe5e7; border-radius:50%; background:#fff; color:#173546; cursor:pointer; box-shadow:0 4px 12px rgba(15,55,67,.09); }
#boton-notificaciones > span { font-size:1.18rem; }
#boton-notificaciones > em { position:absolute; top:-4px; right:-3px; min-width:18px; height:18px; padding:0 4px; border:2px solid #fff; border-radius:10px; background:#e34d2b; color:#fff; font-size:.65rem; font-style:normal; font-weight:900; line-height:14px; }
#panel-notificaciones { position:absolute; z-index:1000000012; top:calc(100% + 10px); right:0; width:min(370px,calc(100vw - 24px)); overflow:hidden; border:1px solid #dce6e8; border-radius:16px; background:#fff; color:#173546; box-shadow:0 20px 55px rgba(8,35,44,.25); }
#panel-notificaciones[hidden] { display:none !important; }
#panel-notificaciones > header { display:flex; align-items:center; justify-content:space-between; position:static; padding:16px 18px; border-bottom:1px solid #e5ecee; background:linear-gradient(135deg,#f4fbfa,#fff8ec); }
#panel-notificaciones header small { color:#168d86; font-size:.65rem; font-weight:900; letter-spacing:.12em; }
#panel-notificaciones header h2 { margin:2px 0 0; font-size:1.08rem; }
#panel-notificaciones header button { width:32px; height:32px; border:0; border-radius:50%; background:#eaf0f1; font-size:21px; cursor:pointer; }
.lista-notificaciones { max-height:360px; overflow-y:auto; }
.lista-notificaciones article { display:grid; grid-template-columns:40px 1fr; gap:11px; padding:14px 16px; border-bottom:1px solid #edf1f2; }
.lista-notificaciones article > span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fff1db; }
.lista-notificaciones article strong { font-size:.88rem; }
.lista-notificaciones article p { margin:3px 0; color:#536b72; font-size:.8rem; line-height:1.35; }
.lista-notificaciones article small { color:#94a1a5; font-size:.68rem; }
.notificaciones-vacias { margin:0; padding:28px 18px; color:#73868c; text-align:center; font-size:.86rem; }

@media (max-width:700px) {
    body { padding-bottom:76px; }
    .franja-beneficios-comercial { display:flex; margin:6px 10px 0; overflow-x:auto; border-radius:10px; scroll-snap-type:x mandatory; }
    .franja-beneficios-comercial > div { min-width:78vw; justify-content:flex-start; scroll-snap-align:start; }
    .categorias-comerciales { display:none; }
    .opciones-catalogo { margin:8px 10px 14px; padding:0; border:0; background:transparent; box-shadow:none; }
    .opciones-catalogo .opciones-compra-encabezado { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .opciones-catalogo .selector-funciones-inicio { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:0; }
    .opciones-catalogo .selector-funciones-inicio button { min-height:48px; padding:7px 5px; border-radius:10px; font-size:.72rem; line-height:1.15; }
    .opciones-catalogo .selector-funciones-inicio button::before { display:block; margin:0 auto 3px; font-size:1.05rem; }
    .navegacion-comercial-movil { display:grid !important; grid-template-columns:repeat(5,1fr); position:fixed; z-index:1000000002; left:0; right:0; bottom:0; height:68px; padding:4px 4px max(4px,env(safe-area-inset-bottom)); border-top:1px solid #dce5e7; background:rgba(255,255,255,.97); box-shadow:0 -8px 30px rgba(12,43,54,.12); backdrop-filter:blur(12px); }
    .navegacion-comercial-movil a,.navegacion-comercial-movil button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:0; background:transparent; color:#52676d; text-decoration:none; }
    .navegacion-comercial-movil span { font-size:1.55rem; line-height:1; }
    .navegacion-comercial-movil b { font-size:.64rem; }
    .navegacion-comercial-movil a:nth-child(3) { color:#0d5c72; }
    .navegacion-comercial-movil em { position:absolute; top:2px; right:18%; min-width:17px; height:17px; padding:0 3px; border-radius:9px; background:#e34d2b; color:#fff; font-size:.65rem; font-style:normal; font-weight:800; line-height:17px; }
    .productos-container { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; padding-inline:8px !important; }
    .producto-info { padding:10px !important; }
    .producto-info > p { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:.78rem; }
    .abrir-categorias-movil { display:flex; align-items:center; gap:6px; position:absolute; z-index:5; left:10px; top:50%; transform:translateY(-50%); padding:7px; border:0; background:transparent; color:inherit; cursor:pointer; }
    .abrir-categorias-movil span { font-size:1.7rem; line-height:1; }
    .abrir-categorias-movil b { display:none; }
    .centro-notificaciones { position:absolute; z-index:6; right:62px; top:50%; transform:translateY(-50%); }
    #boton-notificaciones { width:38px; height:38px; border:0; box-shadow:none; }
    #panel-notificaciones { position:fixed; top:72px; right:10px; left:10px; width:auto; max-height:70vh; border-radius:14px; }
    .panel-categorias-movil { display:block; visibility:hidden; position:fixed; z-index:1000000015; inset:0; pointer-events:none; }
    .panel-categorias-movil.visible { visibility:visible; pointer-events:auto; }
    .fondo-categorias-movil { position:absolute; inset:0; background:rgba(0,0,0,.58); opacity:0; transition:opacity .25s ease; }
    .panel-categorias-movil.visible .fondo-categorias-movil { opacity:1; }
    .panel-categorias-movil aside { position:absolute; inset:0 auto 0 0; width:min(88vw,390px); overflow-y:auto; background:#fff; color:#172f38; box-shadow:16px 0 45px rgba(0,0,0,.28); transform:translateX(-102%); transition:transform .28s ease; }
    .panel-categorias-movil.visible aside { transform:translateX(0); }
    .categorias-movil-abiertas { overflow:hidden; }
    .cabecera-categorias-movil { display:flex; align-items:center; justify-content:space-between; gap:16px; position:sticky; z-index:2; top:0; padding:20px 18px 14px; border-bottom:1px solid #e3e9ea; background:#fff; }
    .cabecera-categorias-movil small { color:#168d86; font-weight:900; letter-spacing:.12em; }
    .cabecera-categorias-movil h2 { margin:3px 0 0; font-size:1.25rem; }
    .cabecera-categorias-movil > button { width:40px; height:40px; border:0; border-radius:50%; background:#172f38; color:#fff; font-size:27px; cursor:pointer; }
    .lista-categorias-movil > button,.categoria-todos-movil { display:grid; grid-template-columns:58px 1fr auto; align-items:center; width:100%; gap:12px; padding:11px 18px; border:0; border-bottom:1px solid #eef2f2; background:#fff; color:#172f38; text-align:left; cursor:pointer; }
    .lista-categorias-movil button > span,.categoria-todos-movil > span { display:flex; align-items:center; justify-content:center; width:52px; height:52px; overflow:hidden; border-radius:50%; background:#edf3f3; font-size:25px; }
    .lista-categorias-movil img { width:100%; height:100%; object-fit:cover; }
    .lista-categorias-movil b,.categoria-todos-movil b { font-size:1rem; }
    .lista-categorias-movil em,.categoria-todos-movil em { color:#89979b; font-size:1.8rem; font-style:normal; }
    .atajos-categorias-movil { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:16px; }
    .atajos-categorias-movil button { padding:12px 8px; border:1px solid #dce6e7; border-radius:10px; background:#f6fafa; color:#0d5c72; font-weight:800; cursor:pointer; }
}

/* Tarjetas comerciales compactas: el detalle completo vive en Vista rápida. */
.productos-container {
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;
    gap:14px !important;
}
.producto { min-height:0 !important; height:auto !important; border-radius:14px !important; overflow:hidden; }
.producto-imagen {
    width:100%; height:auto !important; min-height:0 !important;
    aspect-ratio:1 / 1; cursor:pointer;
}
.producto-imagen img { width:100%; height:100%; padding:10px !important; object-fit:contain; }
.producto-info { padding:12px 12px 11px !important; }
.producto-info > p,.producto .confianza-vendedor,.producto .acciones-producto-inteligente { display:none !important; }
.producto-categoria { margin:0 0 5px !important; padding:3px 6px !important; font-size:8px !important; }
.etiqueta-producto { margin-bottom:3px; font-size:9px !important; }
.producto h3 { min-height:34px !important; margin:4px 0 !important; font-size:14px !important; line-height:1.22 !important; -webkit-line-clamp:3 !important; }
.producto-rating { min-height:15px !important; margin:2px 0 4px !important; font-size:10px !important; }
.precio-comercial-producto { margin-top:3px; gap:5px; }
.precio-comercial-producto strong { margin:0 !important; font-size:1.05rem !important; }
.beneficios-tarjeta-producto { margin:5px 0 !important; }
.beneficios-tarjeta-producto span { padding:2px 4px; font-size:.62rem; }
.producto-stock { margin:3px 0 5px !important; padding:3px 6px !important; font-size:8px !important; }
.ver-detalle-producto { margin:3px 0 6px; padding:5px !important; border:0; background:transparent; text-decoration:underline; font-size:.7rem; }
.producto .agregar-carrito { min-height:40px !important; margin:0 !important; padding:7px 8px !important; border-radius:8px !important; font-size:.78rem !important; line-height:1.15 !important; white-space:normal !important; }
.favorito-producto { top:8px !important; right:8px !important; width:33px !important; height:33px !important; font-size:20px !important; }

@media (min-width:1200px) {
    .productos-container { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
}
@media (max-width:700px) {
    .productos-container { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; padding-inline:8px !important; }
    .producto-info { padding:9px !important; }
    .producto h3 { min-height:47px !important; font-size:13px !important; }
    .producto-rating { white-space:nowrap; overflow:hidden; }
    .beneficios-tarjeta-producto span:last-child { display:none; }
    .ver-detalle-producto { font-size:.65rem; }
    .header,.header.header-compacto { grid-template-columns:1fr !important; grid-template-areas:"titulo" "buscador" !important; row-gap:10px !important; padding:12px 0 !important; }
    .header .logo { width:100% !important; padding:0 56px !important; align-items:center !important; justify-self:stretch !important; text-align:center !important; }
    .header .logo h1 { margin-inline:auto !important; font-size:clamp(1.25rem,7vw,1.75rem) !important; white-space:nowrap; }
    .header .logo span { display:none !important; }
    .header > .boton-entrar,.header > .boton-carrito,.header > .selector-idioma { display:none !important; }
    .header .buscador-principal { grid-area:buscador !important; width:calc(100% - 20px) !important; margin-inline:10px !important; }
    .abrir-categorias-movil { top:27px !important; transform:none !important; }
    .centro-notificaciones { top:25px !important; right:10px !important; transform:none !important; }
    .whatsapp-flotante { bottom:82px !important; right:12px !important; }
    /* La barra inferior sustituye el menú ancho en teléfonos. */
    .nav { display:none !important; }
    .header .logo::before { display:none !important; }
    .navegacion-comercial-movil {
        box-sizing:border-box !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        width:100vw !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 !important;
        overflow:visible !important;
    }
    .navegacion-comercial-movil a,
    .navegacion-comercial-movil button {
        box-sizing:border-box !important;
        width:auto !important;
        min-width:0 !important;
        margin:0 !important;
        padding:2px 0 !important;
        overflow:hidden !important;
    }
    .navegacion-comercial-movil b {
        display:block;
        width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        text-align:center;
    }
    .asistente-virtual { display:none !important; }
}
@media (max-width:700px) {
    .vista-rapida-contenido { grid-template-columns:1fr; }
    .vista-rapida-imagen { min-height:240px; max-height:300px; }
    .vista-rapida-info { padding:28px 20px; }
    .vista-rapida-similares > div { grid-template-columns:1fr; }
}

/* Portada tipo escaparate: foto, precio y una idea breve. */
.pagina-inicio .producto {
    cursor: pointer;
}

.pagina-inicio .producto .favorito-producto,
.pagina-inicio .producto-info > :not(.precio-comercial-producto):not(.producto-comentario) {
    display: none !important;
}

.pagina-inicio .producto-info {
    padding: 11px 12px !important;
}

.pagina-inicio .producto .precio-comercial-producto {
    margin: 0 0 5px !important;
}

.pagina-inicio .producto-comentario {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden;
    color: #627b82;
    font-size: .78rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Revisión móvil v1.9: controles únicos y tarjetas realmente compactas. */
.productos-container { align-items:start !important; }
.productos-container[hidden] { display:none !important; }
.producto { align-self:start !important; }
.producto-info { flex:0 0 auto !important; }
.producto .agregar-carrito {
    width:100% !important;
    margin:6px 0 0 !important;
    border-radius:9px !important;
}

@media (max-width:700px) {
    .abrir-categorias-movil { display:none !important; }
    .carrito-flotante,
    #carrito-flotante { display:none !important; }
    .whatsapp-flotante {
        width:50px !important;
        height:50px !important;
        right:10px !important;
        bottom:78px !important;
    }
    .opciones-catalogo .selector-funciones-inicio button {
        display:flex !important;
        min-width:0 !important;
        min-height:64px !important;
        padding:7px 4px !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        overflow-wrap:anywhere;
    }
    .opciones-catalogo .selector-funciones-inicio button::before {
        position:static !important;
        display:block !important;
        margin:0 0 4px !important;
        transform:none !important;
        line-height:1 !important;
    }
    .producto h3 { min-height:2.45em !important; }
    .producto .agregar-carrito { min-height:36px !important; }
}


/* =========================================================
   SISTEMA DE ACCIONES — ACABADO "SUPER APP"
   ========================================================= */

:root {
    --accion-principal-inicio: #ff8a3d;
    --accion-principal-fin: #ec4c65;
    --accion-resplandor: rgba(236, 76, 101, .34);
    --accion-texto: #172f38;
}

/* Acciones de compra: volumen, contraste y una respuesta táctil clara. */
:is(
    .agregar-carrito,
    .finalizar-compra,
    .boton-whatsapp-contacto,
    .slide-contenido button,
    .boton-ver-catalogo > button,
    .acciones-productos-inicio > button
) {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .38) !important;
    background: linear-gradient(125deg, var(--accion-principal-inicio), var(--accion-principal-fin)) !important;
    box-shadow:
        0 12px 24px var(--accion-resplandor),
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 0 -2px 0 rgba(112, 27, 51, .18) !important;
    letter-spacing: .015em;
    text-shadow: 0 1px 1px rgba(76, 20, 35, .18);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, filter .22s ease !important;
}

:is(
    .agregar-carrito,
    .finalizar-compra,
    .boton-whatsapp-contacto,
    .slide-contenido button,
    .boton-ver-catalogo > button,
    .acciones-productos-inicio > button
):hover {
    transform: translateY(-3px) scale(1.01);
    filter: saturate(1.08) brightness(1.04);
    box-shadow:
        0 17px 30px rgba(199, 56, 83, .38),
        inset 0 1px 0 rgba(255, 255, 255, .48),
        inset 0 -2px 0 rgba(112, 27, 51, .2) !important;
}

:is(
    .agregar-carrito,
    .finalizar-compra,
    .boton-whatsapp-contacto,
    .slide-contenido button,
    .boton-ver-catalogo > button,
    .acciones-productos-inicio > button
):active {
    transform: translateY(1px) scale(.985);
    box-shadow: 0 6px 13px rgba(199, 56, 83, .26), inset 0 2px 5px rgba(95, 18, 42, .2) !important;
}

/* Acciones secundarias: apariencia de cristal y estado activo inequívoco. */
:is(
    .boton-entrar,
    .boton-carrito,
    .filtro-categoria,
    .filtro,
    .categoria-boton,
    .paginacion-catalogo button,
    .selector-funciones-inicio button
) {
    border-color: rgba(20, 99, 112, .18) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(239, 247, 247, .92)) !important;
    color: var(--accion-texto) !important;
    box-shadow: 0 7px 17px rgba(17, 65, 78, .10), inset 0 1px 0 #fff !important;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

:is(
    .boton-entrar,
    .boton-carrito,
    .filtro-categoria,
    .filtro,
    .categoria-boton,
    .paginacion-catalogo button,
    .selector-funciones-inicio button
):hover {
    transform: translateY(-2px);
    border-color: rgba(236, 76, 101, .42) !important;
    background: #fff !important;
    box-shadow: 0 12px 23px rgba(17, 65, 78, .16), inset 0 1px 0 #fff !important;
}

.boton-carrito {
    border-color: rgba(255, 138, 61, .36) !important;
}

.boton-carrito #contador-carrito {
    background: linear-gradient(135deg, #ff8a3d, #ec4c65) !important;
    box-shadow: 0 4px 10px rgba(236, 76, 101, .35);
}

/* Anillo consistente para navegación por teclado. */
:is(button, a, select):focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(255, 138, 61, .24), 0 0 0 7px rgba(236, 76, 101, .12) !important;
}

@media (max-width:700px) {
    :is(.agregar-carrito, .finalizar-compra, .boton-whatsapp-contacto) {
        min-height: 44px !important;
        border-radius: 12px !important;
    }

    :is(.agregar-carrito, .finalizar-compra, .boton-whatsapp-contacto):hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(button, a) {
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Prioridad final: franja de beneficios comercial. */
.franja-beneficios-comercial {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    max-width: 1280px !important;
    margin: 18px auto 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(112, 185, 184, .20) !important;
    border-radius: 18px !important;
    background: radial-gradient(circle at 10% 0%, rgba(72, 209, 190, .15), transparent 34%), linear-gradient(135deg, #102b35, #0a2029) !important;
    box-shadow: 0 14px 32px rgba(7, 34, 43, .16) !important;
}

.franja-beneficios-comercial > div {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 72px !important;
    gap: 13px !important;
    padding: 13px 20px !important;
    background: transparent !important;
}

.franja-beneficios-comercial > div + div::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 20% !important;
    width: 1px !important;
    height: 60% !important;
    background: linear-gradient(transparent, rgba(194, 235, 231, .24), transparent) !important;
}

.franja-beneficios-comercial > div > span {
    display: grid !important;
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(64, 207, 192, .24), rgba(255, 195, 106, .16)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    font-size: 1.05rem !important;
}

.franja-beneficios-comercial p {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin: 0 !important;
    color: #f6ffff !important;
    line-height: 1.2 !important;
}

.franja-beneficios-comercial strong {
    color: #f9ffff !important;
    font-size: .86rem !important;
    font-weight: 850 !important;
    letter-spacing: .01em !important;
}

.franja-beneficios-comercial small {
    color: #b9d1d3 !important;
    font-size: .76rem !important;
    line-height: 1.35 !important;
}

@media (max-width:700px) {
    .franja-beneficios-comercial {
        display: flex !important;
        margin: 10px 10px 0 !important;
        border-radius: 15px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
    }

    .franja-beneficios-comercial::-webkit-scrollbar {
        display: none !important;
    }

    .franja-beneficios-comercial > div {
        min-width: 86vw !important;
        min-height: 76px !important;
        padding: 14px 16px !important;
        scroll-snap-align: start !important;
    }

    .franja-beneficios-comercial > div + div::before {
        display: none !important;
    }
}


/* Producto primero: lo editorial y las herramientas secundarias se piden, no se imponen. */
.pagina-inicio .carrusel,
.pagina-inicio .opciones-compra-inicio,
.pagina-inicio .beneficios,
.pagina-inicio .categorias,
.pagina-inicio .testimonios,
.pagina-inicio .contacto,
.franja-beneficios-comercial,
.categorias-comerciales,
.opciones-catalogo {
    display: none !important;
}

/* El asistente se muestra únicamente cuando el cliente lo solicita. */
.opciones-catalogo.modo-inteligente-abierto {
    display: block !important;
    max-width: 980px;
    margin: 18px auto 28px;
}

.opciones-catalogo.modo-inteligente-abierto .opciones-compra-encabezado,
.opciones-catalogo.modo-inteligente-abierto .selector-funciones-inicio {
    display: none !important;
}

/* Compra inteligente: recomendación inmediata y controles secundarios compactos. */
#panel-compra-inteligente-inicio .descubridor-compras { padding:18px !important; border-radius:18px !important; }
#panel-compra-inteligente-inicio .descubridor-encabezado { display:flex; align-items:baseline; gap:9px; }
#panel-compra-inteligente-inicio .descubridor-encabezado h2 { margin:0 !important; font-size:1.15rem !important; }
#panel-compra-inteligente-inicio .descubridor-formulario { grid-template-columns:130px minmax(0,1fr) auto !important; gap:9px !important; margin-top:13px !important; }
#panel-compra-inteligente-inicio .descubridor-formulario label { gap:4px; font-size:.73rem; }
#panel-compra-inteligente-inicio .descubridor-formulario input { min-height:42px; padding:9px 10px; }
.buscar-inteligente-principal { align-self:end; min-height:42px; padding:0 15px !important; white-space:nowrap; }
#panel-compra-inteligente-inicio .acciones-inteligentes { grid-column:1 / -1; margin:0; }
#panel-compra-inteligente-inicio .opciones-inteligentes-extra { margin-top:10px; border-top:1px solid rgba(126,198,201,.25); }
#panel-compra-inteligente-inicio .opciones-inteligentes-extra > summary { padding:10px 2px 2px; color:#b9d8dc; font-size:.8rem; font-weight:800; cursor:pointer; }
#panel-compra-inteligente-inicio .opciones-inteligentes-extra .acciones-inteligentes { margin-top:10px; }
#panel-compra-inteligente-inicio .opciones-inteligentes-extra .filtro-vendedor { display:block; margin-top:10px; }
@media (max-width:700px) { #panel-compra-inteligente-inicio .descubridor-encabezado { display:block; } #panel-compra-inteligente-inicio .descubridor-formulario { grid-template-columns:1fr 1fr !important; } .buscar-inteligente-principal { grid-column:1 / -1; width:100%; } }

/* Móvil: una cabecera despejada y navegación legible dejan el foco al catálogo. */
.centro-notificaciones[hidden] {
    display: none !important;
}

@media (max-width:700px) {
    /* Una sola entrada a categorías: la navegación inferior evita duplicados. */
    .pagina-inicio .explorador-categorias-inicio {
        display: none !important;
    }

    /* Controles globales separados del título y del buscador. */
    .header .logo {
        padding-inline: 58px !important;
    }

    .header .logo h1 {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: clamp(1.15rem, 6.3vw, 1.55rem) !important;
    }

    .header > .selector-idioma {
        top: 8px !important;
        right: auto !important;
        left: 10px !important;
    }

    .centro-notificaciones {
        top: 8px !important;
        right: 10px !important;
        left: auto !important;
        transform: none !important;
    }

    .header .menu-idiomas {
        top: 118px !important;
    }

    #panel-notificaciones {
        top: 118px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
    }

    .productos-principales-inicio > .seccion-titulo h2,
    .productos > .seccion-titulo h2 {
        max-width: 11ch !important;
        margin-bottom: 8px !important;
        font-size: clamp(2rem, 9.5vw, 2.65rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.045em !important;
    }

    .productos-principales-inicio > .seccion-titulo p,
    .productos > .seccion-titulo p {
        margin-top: 0 !important;
        font-size: .94rem !important;
        line-height: 1.4 !important;
    }

    .navegacion-comercial-movil b {
        font-size: 10px !important;
        font-weight: 750 !important;
        line-height: 1.1 !important;
        letter-spacing: -.02em !important;
    }

    .navegacion-comercial-movil span {
        font-size: 1.4rem !important;
    }

    /* Accesos globales compactos: siempre disponibles, sin competir con productos. */
    .header > .selector-idioma {
        display: block !important;
        position: absolute !important;
        z-index: 12 !important;
        top: 7px !important;
        right: 56px !important;
    }

    .header #boton-idioma {
        display: grid !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        place-items: center !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.1) !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    .header #boton-idioma::after {
        content: "🌐";
        color: #fff;
        font-size: 1.1rem;
    }

    .header .menu-idiomas {
        position: fixed !important;
        z-index: 1000000020 !important;
        top: 64px !important;
        right: 10px !important;
        left: auto !important;
        width: min(220px, calc(100vw - 20px)) !important;
        transform: none !important;
    }

    .atajos-categorias-movil {
        display: block !important;
        padding: 8px 16px 4px !important;
    }

    .atajos-categorias-movil button {
        width: 100% !important;
        min-height: 48px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #123d4a, #176f70) !important;
        color: #fff !important;
        font-size: .9rem !important;
        font-weight: 800 !important;
        box-shadow: 0 9px 18px rgba(12, 70, 75, .18) !important;
    }

    /* Categorías como selector visual bajo demanda, no como otra sección fija. */
    .panel-categorias-movil aside {
        width: min(92vw, 430px) !important;
        padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
        border-radius: 0 24px 24px 0 !important;
        background: linear-gradient(160deg, #f8fcfc, #ffffff 42%) !important;
    }

    .cabecera-categorias-movil {
        align-items: flex-start !important;
        padding: 26px 20px 18px !important;
        border: 0 !important;
        background: transparent !important;
    }

    .cabecera-categorias-movil small {
        color: #168d86 !important;
        font-size: .65rem !important;
        letter-spacing: .16em !important;
    }

    .cabecera-categorias-movil h2 {
        margin: 5px 0 6px !important;
        color: #102f3a !important;
        font-size: 1.55rem !important;
        letter-spacing: -.035em !important;
    }

    .cabecera-categorias-movil p {
        max-width: 260px;
        margin: 0 !important;
        color: #688087 !important;
        font-size: .84rem !important;
        line-height: 1.4 !important;
    }

    .cabecera-categorias-movil > button {
        flex: 0 0 auto !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        background: #eaf3f3 !important;
        color: #173f49 !important;
        font-size: 24px !important;
    }

    .categoria-todos-movil,
    .lista-categorias-movil > button {
        grid-template-columns: 48px minmax(0, 1fr) auto !important;
        gap: 12px !important;
        width: calc(100% - 32px) !important;
        margin: 0 16px 9px !important;
        padding: 12px !important;
        border: 1px solid #e1ecec !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 6px 18px rgba(18, 63, 73, .06) !important;
    }

    .categoria-todos-movil {
        margin-bottom: 15px !important;
        border-color: rgba(22, 141, 134, .25) !important;
        background: linear-gradient(135deg, #e5f8f4, #f8fffd) !important;
    }

    .categoria-todos-movil > span,
    .lista-categorias-movil button > span {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
        background: #edf6f5 !important;
        font-size: 1.45rem !important;
    }

    .categoria-todos-movil div,
    .lista-categorias-movil button div {
        display: flex !important;
        min-width: 0 !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    .categoria-todos-movil b,
    .lista-categorias-movil b {
        color: #173f49 !important;
        font-size: .95rem !important;
        line-height: 1.1 !important;
    }

    .categoria-todos-movil small,
    .lista-categorias-movil small {
        color: #789095 !important;
        font-size: .73rem !important;
    }

    .categoria-todos-movil em,
    .lista-categorias-movil em {
        color: #168d86 !important;
        font-size: 1.45rem !important;
    }
}

/* Corrección definitiva para teléfonos: no permitir que reglas históricas se mezclen. */
@media (max-width:700px) {
    .pagina-inicio .explorador-categorias-inicio,
    .abrir-categorias-movil {
        display: none !important;
    }

    .header,
    .header.header-compacto {
        grid-template-columns: 1fr !important;
        grid-template-areas: "titulo" "buscador" !important;
        min-height: 0 !important;
        padding: 10px 0 12px !important;
    }

    .header .logo {
        grid-area: titulo !important;
        min-height: 42px !important;
        padding: 0 62px !important;
    }

    .header .logo h1 {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .header > .selector-idioma {
        display: block !important;
        position: absolute !important;
        top: 10px !important;
        left: 12px !important;
        right: auto !important;
        z-index: 30 !important;
    }

    .header > .centro-notificaciones {
        display: block !important;
        position: absolute !important;
        top: 10px !important;
        right: 12px !important;
        left: auto !important;
        z-index: 30 !important;
        transform: none !important;
    }

    .header .menu-idiomas,
    #panel-notificaciones {
        top: 124px !important;
        z-index: 1000000020 !important;
    }

    .panel-categorias-movil aside {
        overflow-y: auto !important;
    }

    .cabecera-categorias-movil {
        display: block !important;
        position: static !important;
        min-height: 138px !important;
        padding: 24px 68px 18px 20px !important;
    }

    .cabecera-categorias-movil > button {
        position: absolute !important;
        top: 22px !important;
        right: 18px !important;
    }

    .categoria-todos-movil {
        margin-top: 0 !important;
    }

    .navegacion-comercial-movil b {
        font-size: 9px !important;
        letter-spacing: -.04em !important;
    }

    .navegacion-comercial-movil button:nth-child(2) b {
        font-size: 8px !important;
    }

    /* El contacto sigue disponible en las fichas y pie; no tapa los productos en móvil. */
    .whatsapp-flotante {
        display: none !important;
    }
}

/* Buscador móvil: el estado comunica claramente abrir o confirmar. */
@media (max-width:700px) {
    .header .buscador-principal:focus-within {
        z-index: 40 !important;
    }

    .header #buscador {
        padding-right: 68px !important;
        font-size: 16px !important;
    }

    .header #boton-buscar {
        width: 50px !important;
        height: 50px !important;
        border-radius: 15px !important;
        touch-action: manipulation;
    }

    .header #boton-buscar.busqueda-lista {
        background: linear-gradient(135deg, #1cc68e, #159b86) !important;
    }

    .header #boton-buscar.busqueda-lista::after {
        content: "✓";
        font-size: 1.25rem;
        color: #fff;
    }

    .header #boton-buscar.busqueda-lista {
        font-size: 0 !important;
    }
}

/* Sistema visual unificado 2026: menos adornos, más producto y mejor tactilidad. */
:root {
    --tk-fondo: #061c25;
    --tk-superficie: #102f3a;
    --tk-superficie-clara: #f7fbfb;
    --tk-texto: #153640;
    --tk-texto-suave: #6f858b;
    --tk-acento: #20c6b7;
    --tk-acento-profundo: #118f88;
    --tk-precio: #e35d43;
    --tk-radio: 16px;
    --tk-sombra: 0 10px 28px rgba(3, 24, 32, .12);
}

.header > .selector-idioma #boton-idioma,
#boton-notificaciones,
.favorito-producto {
    border-radius: 12px !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
}

.header > .selector-idioma #boton-idioma:hover,
#boton-notificaciones:hover,
.favorito-producto:hover {
    transform: translateY(-1px) !important;
}

.producto {
    border: 1px solid rgba(221, 233, 234, .92) !important;
    border-radius: var(--tk-radio) !important;
    box-shadow: 0 5px 18px rgba(4, 33, 42, .08) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.producto:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(32, 198, 183, .36) !important;
    box-shadow: var(--tk-sombra) !important;
}

.producto-imagen {
    background: linear-gradient(145deg, #f6fbfb, #edf5f5) !important;
}

.precio-comercial-producto strong,
.vista-rapida-precio {
    color: var(--tk-precio) !important;
    letter-spacing: -.02em;
}

.agregar-carrito,
.vista-rapida-accion button,
.buscar-inteligente-principal {
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--tk-acento), var(--tk-acento-profundo)) !important;
    box-shadow: 0 7px 16px rgba(17, 143, 136, .22) !important;
    color: #fff !important;
}

.agregar-carrito:hover,
.vista-rapida-accion button:hover,
.buscar-inteligente-principal:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04);
}

.navegacion-comercial-movil {
    border-color: rgba(19, 71, 80, .12) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 -8px 26px rgba(5, 30, 38, .09) !important;
}

.navegacion-comercial-movil a:nth-child(3),
.navegacion-comercial-movil button:active {
    color: var(--tk-acento-profundo) !important;
}

.navegacion-comercial-movil a.activo {
    color: var(--tk-acento-profundo) !important;
}

.navegacion-comercial-movil a.activo span {
    display: grid;
    width: 36px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    background: rgba(32, 198, 183, .12);
}

.buscador-principal { position: relative; }
.limpiar-buscador { position:absolute; z-index:2; top:50%; right:62px; width:28px; height:28px; padding:0; border:0; border-radius:50%; transform:translateY(-50%); background:#dbe8e9; color:#31555d; font-size:1.35rem; line-height:1; cursor:pointer; }
.limpiar-buscador[hidden] { display:none !important; }
.contexto-busqueda-catalogo { display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:1320px; margin:0 auto 13px; padding:9px 12px; border:1px solid rgba(32,198,183,.25); border-radius:12px; background:rgba(32,198,183,.08); color:#23666a; font-size:.86rem; }
.contexto-busqueda-catalogo button { flex:0 0 auto; padding:7px 10px; border:1px solid rgba(17,143,136,.32); border-radius:9px; background:#fff; color:#117d77; font-weight:800; cursor:pointer; }
@media (max-width:700px) { .limpiar-buscador { right:61px; } .contexto-busqueda-catalogo { margin:0 10px 10px; font-size:.78rem; } }

.vista-rapida-contenido,
#panel-notificaciones {
    border-radius: 20px !important;
    box-shadow: 0 22px 55px rgba(1, 20, 27, .28) !important;
}

@media (max-width:700px) {
    .productos-principales-inicio > .seccion-titulo h2,
    .productos > .seccion-titulo h2 {
        font-size: clamp(1.9rem, 9vw, 2.45rem) !important;
        max-width: 12ch !important;
    }

    .productos-principales-inicio > .seccion-titulo p,
    .productos > .seccion-titulo p {
        color: #a7bec3 !important;
        font-size: .9rem !important;
    }

    .producto:hover {
        transform: none !important;
    }

    .producto {
        border-radius: 14px !important;
    }

    .navegacion-comercial-movil b {
        font-size: 10px !important;
        font-weight: 800 !important;
    }

    .navegacion-comercial-movil a:nth-child(3) {
        color: #52676d !important;
    }

    .navegacion-comercial-movil a.activo {
        color: var(--tk-acento-profundo) !important;
    }

    .navegacion-comercial-movil span {
        font-size: 1.38rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .producto,
    .agregar-carrito,
    .vista-rapida-accion button,
    .buscar-inteligente-principal,
    .favorito-producto,
    #boton-notificaciones {
        transition: none !important;
    }
}

/* =====================================================
   NICHI · PALETA ACTIVA FINAL (no mover)
   Garantía de cascada para web, PWA y cada modal operativo.
   ===================================================== */
:root {
    --nichi-azul: #061636;
    --nichi-azul-medio: #102a5b;
    --nichi-rojo: #e31b2b;
    --nichi-rojo-profundo: #b90f23;
    --nichi-fondo: #f5f7fb;
    --nichi-borde: #dfe5f0;
    --nichi-texto: #14213d;
    --nichi-texto-suave: #5d6980;
    --tk-fondo: var(--nichi-azul);
    --tk-fondo-2: var(--nichi-azul-medio);
    --tk-panel: var(--nichi-azul);
    --tk-panel-alto: var(--nichi-azul-medio);
    --tk-superficie: var(--nichi-azul-medio);
    --tk-superficie-clara: var(--nichi-fondo);
    --tk-texto: var(--nichi-texto);
    --tk-texto-suave: var(--nichi-texto-suave);
    --tk-acento: var(--nichi-rojo);
    --tk-acento-profundo: var(--nichi-rojo-profundo);
    --tk-precio: var(--nichi-rojo);
    --tk-lima: #fff;
    --tk-ambar: #fff0f1;
    --tk-peligro: var(--nichi-rojo);
    --tk-linea: var(--nichi-borde);
    --tk-sombra: 0 14px 32px rgba(6, 22, 54, .14);
}

body,
body.experiencia-premium { color: var(--nichi-texto) !important; background: linear-gradient(180deg, #fafbfe, #f1f4f9) !important; }

/* Compra, formulario, promoción y notificaciones */
:is(.agregar-carrito, .finalizar-compra, .confirmar-pedido, .cupon-compra button,
    .vista-rapida-accion button, .buscar-inteligente-principal, .acciones-inteligentes button,
    .boton-inteligente, .usuario-login-enviar, #ver-carrito-notificacion,
    .ver-carrito-notificacion) {
    border-color: transparent !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--nichi-rojo), var(--nichi-rojo-profundo)) !important;
    box-shadow: 0 8px 18px rgba(185, 15, 35, .22) !important;
}
.carrito-flotante { color: #fff !important; background: linear-gradient(135deg, var(--nichi-rojo), var(--nichi-rojo-profundo)) !important; box-shadow: 0 13px 28px rgba(185,15,35,.3) !important; }
.contador-carrito-flotante, .navegacion-comercial-movil em, #boton-notificaciones > em { color: #fff !important; background: var(--nichi-rojo) !important; border-color: #fff !important; }
.notificacion-carrito, .vista-rapida-contenido, .checkout-form, .resultado-inteligente, .panel-inteligente, #panel-compra-inteligente-inicio, .compartir-carrito, #panel-notificaciones { border-color: var(--nichi-borde) !important; color: var(--nichi-texto) !important; background: #fff !important; }
.notificacion-icono { color: #fff !important; background: var(--nichi-rojo) !important; }
.notificacion-texto strong, .vista-rapida-contenido h2, .checkout-form h2, .resultado-inteligente h3, #panel-compra-inteligente-inicio :is(h2,h3) { color: var(--nichi-azul) !important; }
.notificacion-texto span, .lista-notificaciones article p, .notificaciones-vacias { color: var(--nichi-texto-suave) !important; }
.vista-rapida-imagen { background: #f3f5f9 !important; }
.vista-rapida-info small, .resultado-categoria, .checkout-paso, #panel-notificaciones header small { color: var(--nichi-rojo-profundo) !important; }
.vista-rapida-similares button, .acciones-producto-inteligente button, .compartir-carrito { border-color: #edc2c7 !important; color: var(--nichi-rojo-profundo) !important; background: #fff6f7 !important; }
.acciones-producto-inteligente button.activo { border-color: var(--nichi-rojo) !important; color: #fff !important; background: var(--nichi-rojo) !important; }
.descubridor-encabezado, .comparador-productos, .tabla-comparador article { color: #fff !important; background: linear-gradient(145deg, var(--nichi-azul), var(--nichi-azul-medio)) !important; }
.descubridor-encabezado :is(span,p), #panel-compra-inteligente-inicio .opciones-inteligentes-extra > summary { color: #f4cdd1 !important; }
.presupuestos-rapidos button { border-color: rgba(255,255,255,.2) !important; color: #fff !important; background: var(--nichi-azul-medio) !important; }
.alerta-precio { color: #fff !important; background: var(--nichi-rojo) !important; }

/* Catálogo, filtros, descuentos y estados */
.chips-categorias button, .ordenar-productos select, .categorias-opcion-catalogo button, .atajos-categorias-movil button, .filtro-vendedor select { border-color: var(--nichi-borde) !important; color: var(--nichi-azul) !important; background: #fff !important; }
.chips-categorias button.activo, .categorias-opcion-catalogo button.activo, .atajos-categorias-movil button.activo { border-color: var(--nichi-rojo) !important; color: #fff !important; background: var(--nichi-rojo) !important; }
.favorito-producto, #boton-notificaciones { border-color: var(--nichi-borde) !important; color: var(--nichi-rojo) !important; background: #fff !important; }
.favorito-producto.activo { color: var(--nichi-rojo-profundo) !important; }
.beneficio-envio, .beneficio-envio.completo { border-color: #f2c5ca !important; color: var(--nichi-azul) !important; background: #fff4f5 !important; }
.beneficio-envio i { background: var(--nichi-rojo) !important; }
.desglose-compra .descuento, .vista-rapida-mensaje, .vaciar-carrito { color: var(--nichi-rojo-profundo) !important; }
.producto { border-color: var(--nichi-borde) !important; background: #fff !important; box-shadow: 0 7px 20px rgba(6,22,54,.09) !important; }
.producto:hover { border-color: rgba(227,27,43,.45) !important; box-shadow: var(--tk-sombra) !important; }
.producto-imagen { background: linear-gradient(145deg, #fff, #edf0f6) !important; }
.producto-info :is(h3,p), .producto-comentario, .beneficios-tarjeta-producto span { color: var(--nichi-texto) !important; }
.producto-info p, .producto-comentario, .beneficios-tarjeta-producto span { color: var(--nichi-texto-suave) !important; }
.producto-categoria { color: var(--nichi-rojo-profundo) !important; background: #fff0f1 !important; }
.precio-comercial-producto strong, .vista-rapida-precio { color: var(--nichi-rojo) !important; }
.etiqueta-producto { color: #fff !important; background: var(--nichi-rojo) !important; }
.contexto-busqueda-catalogo { border-color: #f2c5ca !important; color: var(--nichi-azul) !important; background: #fff3f4 !important; }
.contexto-busqueda-catalogo button, .limpiar-buscador { border-color: #edc2c7 !important; color: var(--nichi-rojo-profundo) !important; background: #fff !important; }

/* Cuenta de cliente y pedidos */
#sistema-perfil-cliente .perfil-cliente-panel, #sistema-usuarios-firebase .usuario-demo-panel, .sistema-usuarios-demo .usuario-demo-panel { color: #fff !important; background: linear-gradient(160deg, var(--nichi-azul), var(--nichi-azul-medio)) !important; }
#sistema-perfil-cliente :is(strong,h2,h3,b), #sistema-usuarios-firebase :is(h2,h3,strong) { color: #fff !important; }
#sistema-perfil-cliente :is(small,span,p), #sistema-usuarios-firebase :is(small,span,p) { color: #d6deed !important; }
#sistema-perfil-cliente .historial-pedidos-cuenta { border-color: rgba(255,255,255,.15) !important; background: rgba(255,255,255,.08) !important; }
#sistema-perfil-cliente .usuario-ir-catalogo, #sistema-perfil-cliente .perfil-seccion-titulo button { border-color: rgba(255,255,255,.22) !important; color: #fff !important; background: var(--nichi-rojo) !important; }
#panel-notificaciones > header { border-color: var(--nichi-borde) !important; background: #fff4f5 !important; }
.lista-notificaciones article > span { background: #fff0f1 !important; }

/* Carrito compacto final */
.carrito-ventana { background: rgba(3,10,28,.58) !important; }
.carrito-contenido { border-color: rgba(6,22,54,.12) !important; background: #fff !important; }
.carrito-contenido h2, .cerrar-carrito, .carrito-contenido .info-producto .nombre-producto, .carrito-contenido .controles-cantidad > span, .carrito-contenido .total-carrito { color: var(--nichi-azul) !important; }
.carrito-contenido .subtotal, .carrito-contenido .total-carrito #total-carrito { color: var(--nichi-rojo) !important; }
.carrito-contenido .eliminar-producto { color: var(--nichi-rojo) !important; background: #fff2f3 !important; }

@media (max-width:700px) {
    .navegacion-comercial-movil { border-color: var(--nichi-borde) !important; background: rgba(255,255,255,.98) !important; box-shadow: 0 -8px 26px rgba(6,22,54,.12) !important; }
    .navegacion-comercial-movil :is(a,button), .navegacion-comercial-movil a:nth-child(3) { color: #647087 !important; }
    .navegacion-comercial-movil :is(a.activo,button:active) { color: var(--nichi-rojo) !important; }
    .navegacion-comercial-movil a.activo :is(span,.nav-icon) { color: var(--nichi-rojo) !important; background: #fff0f1 !important; }
    .panel-categorias-movil aside, .cabecera-categorias-movil, .lista-categorias-movil > button, .categoria-todos-movil { border-color: var(--nichi-borde) !important; color: var(--nichi-azul) !important; background: #fff !important; }
    .cabecera-categorias-movil small { color: var(--nichi-rojo-profundo) !important; }
    .cabecera-categorias-movil > button { color: #fff !important; background: var(--nichi-azul) !important; }
    .lista-categorias-movil button > span, .categoria-todos-movil > span { background: #fff0f1 !important; }
    .header #boton-buscar.busqueda-lista { background: linear-gradient(135deg, var(--nichi-rojo), var(--nichi-rojo-profundo)) !important; }
}

/* =====================================================
   NICHI · SISTEMA FINAL DE BOTONES Y CUENTA
   Última capa intencional: mismos controles en web, PWA y modales dinámicos.
   ===================================================== */
button,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-weight: 760;
    letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(227, 27, 43, .38) !important;
    outline-offset: 3px;
}

button:disabled,
[aria-disabled="true"] {
    opacity: .52;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Encabezado: controles compactos, uniformes y claros */
.header :is(.boton-entrar, .boton-carrito, #boton-idioma, #boton-notificaciones) {
    min-height: 42px !important;
    border: 1px solid rgba(255,255,255,.19) !important;
    border-radius: 12px !important;
    color: #fff !important;
    background: rgba(255,255,255,.09) !important;
    box-shadow: none !important;
}
.header :is(.boton-entrar, .boton-carrito, #boton-idioma, #boton-notificaciones):hover {
    border-color: rgba(255,255,255,.4) !important;
    background: rgba(255,255,255,.16) !important;
    transform: translateY(-1px);
}
#boton-buscar {
    min-width: 46px;
    min-height: 42px;
    border-radius: 11px !important;
    color: #fff !important;
    background: var(--nichi-rojo) !important;
    box-shadow: 0 7px 16px rgba(185,15,35,.25) !important;
}
.menu-idiomas {
    border: 1px solid var(--nichi-borde) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(6,22,54,.17) !important;
}
.menu-idiomas button {
    min-height: 40px;
    border-radius: 9px !important;
    color: var(--nichi-azul) !important;
    background: transparent !important;
}
.menu-idiomas button:hover,
.menu-idiomas button.idioma-activo { color: var(--nichi-rojo-profundo) !important; background: #fff0f1 !important; }

/* Botones del catálogo, promociones y páginas */
:is(.slide-contenido button, .boton-ver-catalogo > button, .acciones-productos-inicio > button,
    .paginacion-catalogo button, .selector-funciones-inicio button, .chips-categorias-inicio button) {
    min-height: 42px;
    border: 1px solid var(--nichi-borde) !important;
    border-radius: 12px !important;
    color: var(--nichi-azul) !important;
    background: #fff !important;
    box-shadow: 0 5px 14px rgba(6,22,54,.07) !important;
}
:is(.slide-contenido button, .boton-ver-catalogo > button, .acciones-productos-inicio > button,
    .paginacion-catalogo button, .selector-funciones-inicio button, .chips-categorias-inicio button):hover {
    border-color: rgba(227,27,43,.45) !important;
    color: var(--nichi-rojo-profundo) !important;
    background: #fff5f6 !important;
    transform: translateY(-1px);
}
.paginacion-catalogo button.activa,
.selector-funciones-inicio button.activo,
.chips-categorias-inicio button.activo {
    border-color: var(--nichi-rojo) !important;
    color: #fff !important;
    background: var(--nichi-rojo) !important;
    box-shadow: 0 8px 17px rgba(185,15,35,.2) !important;
}
.producto :is(.agregar-carrito, .boton-inteligente) {
    min-height: 42px !important;
    border-radius: 11px !important;
    font-size: .86rem !important;
}
.producto .acciones-producto-inteligente button {
    min-height: 36px;
    border-radius: 9px !important;
}
.favorito-producto,
.cerrar-carrito,
.vista-rapida-cerrar,
.usuario-demo-cerrar,
.checkout-cerrar {
    display: inline-grid !important;
    place-items: center;
    min-width: 38px;
    min-height: 38px;
    border: 1px solid var(--nichi-borde) !important;
    border-radius: 11px !important;
    color: var(--nichi-rojo) !important;
    background: #fff !important;
    box-shadow: 0 5px 13px rgba(6,22,54,.08) !important;
}
.favorito-producto:hover,
.cerrar-carrito:hover,
.vista-rapida-cerrar:hover,
.usuario-demo-cerrar:hover,
.checkout-cerrar:hover { border-color: #f0b8bf !important; background: #fff0f1 !important; transform: translateY(-1px); }

.boton-whatsapp-contacto,
.compartir-carrito,
.historial-pedidos-cuenta button {
    min-height: 42px;
    border: 1px solid #e8b8be !important;
    border-radius: 11px !important;
    color: var(--nichi-rojo-profundo) !important;
    background: #fff6f7 !important;
    box-shadow: none !important;
}
.boton-whatsapp-contacto:hover,
.compartir-carrito:hover,
.historial-pedidos-cuenta button:hover { border-color: var(--nichi-rojo) !important; background: #fff0f1 !important; }

/* Autenticación y perfil: protege el acabado de los elementos generados por Firebase */
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) {
    background: rgba(2, 10, 27, .66) !important;
    backdrop-filter: blur(12px) saturate(115%);
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-demo-panel {
    width: min(680px, calc(100vw - 28px)) !important;
    max-height: min(760px, calc(100dvh - 28px));
    overflow-y: auto;
    padding: clamp(22px, 4vw, 34px) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 24px !important;
    color: #fff !important;
    background: linear-gradient(145deg, #071a3b, var(--nichi-azul)) !important;
    box-shadow: 0 30px 76px rgba(0,0,0,.42) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-demo-panel::before {
    background: radial-gradient(circle at 90% 0, rgba(227,27,43,.18), transparent 24rem) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-demo-cerrar {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff !important;
    border-color: rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.09) !important;
    box-shadow: none !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-demo-cerrar:hover { color: #fff !important; border-color: rgba(255,255,255,.32) !important; background: rgba(227,27,43,.82) !important; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-demo-etiqueta,
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-rol {
    min-height: 26px;
    border: 1px solid rgba(255,174,182,.34) !important;
    color: #ffd9dd !important;
    background: rgba(227,27,43,.14) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-acceso-cabecera h2,
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-cuenta-hero h2 { color: #fff !important; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-acceso-cabecera p,
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-cuenta-hero p { color: #c9d3e7 !important; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-roles { gap: 10px; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-rol-tab {
    min-height: 58px;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 14px !important;
    color: #dce4f2 !important;
    background: rgba(255,255,255,.055) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-rol-tab span { background: rgba(255,255,255,.1) !important; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-rol-tab:hover,
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-rol-tab.activo {
    border-color: rgba(255,146,157,.72) !important;
    color: #fff !important;
    background: rgba(227,27,43,.18) !important;
    box-shadow: inset 0 0 0 1px rgba(227,27,43,.16) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-login-form,
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-resumen,
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .historial-pedidos-cuenta {
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.06) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-login-form > label:not(.usuario-recordar) { color: #dce4f2 !important; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) :is(.usuario-login-form input, .usuario-campo-clave input) {
    min-height: 48px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: rgba(1,9,27,.42) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) :is(.usuario-login-form input, .usuario-campo-clave input):focus {
    border-color: #ff9ca6 !important;
    box-shadow: 0 0 0 4px rgba(227,27,43,.18) !important;
    outline: 0 !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-mostrar-clave {
    min-width: 36px;
    min-height: 36px;
    color: #ffd6da !important;
    background: transparent !important;
    box-shadow: none !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-recordar { color: #d3dced !important; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-recordar input { accent-color: var(--nichi-rojo) !important; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-login-enviar,
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-ir-catalogo {
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--nichi-rojo), var(--nichi-rojo-profundo)) !important;
    box-shadow: 0 11px 23px rgba(185,15,35,.28) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-cambiar-modo {
    min-height: 40px;
    color: #ffd3d7 !important;
    background: transparent !important;
    box-shadow: none !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-cambiar-modo:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-avatar-grande {
    border: 1px solid rgba(255,255,255,.25) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--nichi-rojo), #f14b58) !important;
    box-shadow: 0 12px 28px rgba(185,15,35,.25) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .perfil-cliente-resumen button,
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-estadisticas article {
    min-height: 86px;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: rgba(255,255,255,.075) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .perfil-cliente-resumen button:hover { border-color: rgba(255,150,160,.6) !important; background: rgba(227,27,43,.16) !important; transform: translateY(-1px); }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) :is(.perfil-cliente-resumen strong, .usuario-estadisticas strong) { color: #fff !important; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) :is(.perfil-cliente-resumen span, .usuario-estadisticas span, .usuario-resumen-titulo, .usuario-resumen-titulo small) { color: #d3dced !important; }
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-cerrar-sesion {
    min-height: 50px;
    border: 1px solid rgba(255,184,190,.34) !important;
    border-radius: 13px !important;
    color: #ffe1e4 !important;
    background: rgba(227,27,43,.1) !important;
}
:is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-cerrar-sesion:hover { border-color: rgba(255,184,190,.7) !important; background: rgba(227,27,43,.2) !important; }

@media (max-width:700px) {
    :is(#sistema-perfil-cliente, #sistema-usuarios-demo) { align-items: end !important; padding: 0 !important; }
    :is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-demo-panel { width: 100% !important; max-height: 88dvh; margin: 0 !important; border-width: 1px 0 0 !important; border-radius: 24px 24px 0 0 !important; }
    :is(#sistema-perfil-cliente, #sistema-usuarios-demo) .usuario-cuenta-acciones { display: grid; grid-template-columns: 1fr; }
    :is(#sistema-perfil-cliente, #sistema-usuarios-demo) :is(.usuario-ir-catalogo, .usuario-cerrar-sesion) { width: 100%; }
}

/* Portada de productos compacta: el catálogo debe comenzar sin un bloque hero excesivo. */
.pagina-inicio .productos-principales-inicio {
    padding: clamp(24px, 3.2vw, 40px) max(4%, calc((100% - 1320px) / 2)) 32px !important;
}

.pagina-inicio .productos-principales-inicio > .seccion-titulo {
    max-width: 1320px !important;
    margin: 0 auto 10px !important;
}

.pagina-inicio .productos-principales-inicio > .seccion-titulo > span {
    min-height: 22px !important;
    padding: 0 9px !important;
    border-color: rgba(227,27,43,.26) !important;
    color: var(--nichi-rojo-profundo) !important;
    background: #fff0f1 !important;
    font-size: .62rem !important;
    letter-spacing: .1em !important;
}

.pagina-inicio .productos-principales-inicio > .seccion-titulo h2 {
    max-width: none !important;
    margin: 8px 0 4px !important;
    color: var(--nichi-azul) !important;
    font-size: clamp(2rem, 3.2vw, 3.15rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.05em !important;
}

.pagina-inicio .productos-principales-inicio > .seccion-titulo p {
    margin: 0 !important;
    color: var(--nichi-texto-suave) !important;
    font-size: .94rem !important;
    line-height: 1.35 !important;
}

.pagina-inicio .explorador-categorias-inicio {
    width: min(1320px, 100%) !important;
    margin: 12px auto 18px !important;
    text-align: left !important;
}

.pagina-inicio .abrir-explorador-categorias {
    min-height: 36px !important;
    gap: 7px !important;
    padding: 0 11px !important;
    border-color: #edc2c7 !important;
    color: var(--nichi-rojo-profundo) !important;
    background: #fff6f7 !important;
    font-size: .8rem !important;
    box-shadow: none !important;
}

.pagina-inicio .abrir-explorador-categorias > span:first-child { color: var(--nichi-rojo) !important; font-size: 1rem !important; }
.pagina-inicio .abrir-explorador-categorias small { min-width: 18px !important; height: 18px !important; color: #fff !important; background: var(--nichi-rojo) !important; font-size: .65rem !important; }
.pagina-inicio .panel-categorias-inicio-rapido { margin-top: 8px !important; padding: 11px !important; border-color: var(--nichi-borde) !important; background: #fff !important; }
.pagina-inicio .panel-categorias-inicio-rapido p { margin-bottom: 8px !important; color: var(--nichi-texto-suave) !important; font-size: .78rem !important; }

@media (max-width:700px) {
    .pagina-inicio .productos-principales-inicio {
        padding: 20px 14px 24px !important;
    }
    .pagina-inicio .productos-principales-inicio > .seccion-titulo h2 {
        max-width: none !important;
        margin-top: 7px !important;
        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
        line-height: 1.06 !important;
    }
    .pagina-inicio .productos-principales-inicio > .seccion-titulo p { font-size: .84rem !important; }
    .pagina-inicio .explorador-categorias-inicio { width: 100% !important; margin: 10px auto 14px !important; }
    .pagina-inicio .productos-container { gap: 12px !important; }
}

/* Alineación editorial y escala de teléfono: producto primero, sin aspecto de escritorio. */
.pagina-inicio .productos-principales-inicio > .seccion-titulo {
    text-align: center !important;
}

.pagina-inicio .productos-principales-inicio > .seccion-titulo > span {
    justify-content: center;
}

.pagina-inicio .explorador-categorias-inicio {
    text-align: center !important;
}

@media (max-width:700px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .header,
    .header.header-compacto {
        row-gap: 7px !important;
        padding: 9px 0 10px !important;
    }

    .header .logo {
        min-height: 32px;
        padding-inline: 52px !important;
    }

    .header .logo h1 {
        font-size: 1.35rem !important;
        line-height: 1 !important;
    }

    .header .buscador-principal {
        width: calc(100% - 24px) !important;
        margin-inline: 12px !important;
    }

    .buscador-principal input,
    #buscador {
        min-height: 42px !important;
        padding-block: 9px !important;
        font-size: .9rem !important;
    }

    #boton-buscar {
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .pagina-inicio .productos-principales-inicio {
        padding-top: 18px !important;
        padding-bottom: 20px !important;
    }

    .pagina-inicio .productos-principales-inicio > .seccion-titulo h2 {
        font-size: clamp(1.7rem, 7.6vw, 2.1rem) !important;
    }

    .pagina-inicio .productos-principales-inicio > .seccion-titulo p {
        max-width: 31ch;
        margin-inline: auto !important;
        font-size: .82rem !important;
    }

    .pagina-inicio .explorador-categorias-inicio {
        margin-top: 9px !important;
        margin-bottom: 12px !important;
    }

    .pagina-inicio .abrir-explorador-categorias {
        min-height: 34px !important;
        font-size: .76rem !important;
    }

    .productos-container {
        width: 100% !important;
        padding-inline: 6px !important;
        gap: 8px !important;
    }

    .producto-info { padding: 8px !important; }
    .producto-imagen img { padding: 6px !important; }
    .producto h3 { font-size: .78rem !important; }
    .precio-comercial-producto strong { font-size: .96rem !important; }
    .producto .agregar-carrito { min-height: 34px !important; font-size: .72rem !important; }
}

@media (max-width:380px) {
    .header .logo h1 { font-size: 1.22rem !important; }
    .pagina-inicio .productos-principales-inicio { padding-inline: 10px !important; }
    .pagina-inicio .productos-principales-inicio > .seccion-titulo h2 { font-size: 1.62rem !important; }
    .navegacion-comercial-movil b { font-size: 9px !important; }
}

/* Carrito NICHI: estructura de comercio real, cómoda en táctil y clara en escritorio. */
.carrito-ventana {
    padding: 24px !important;
    background: rgba(3, 10, 28, .64) !important;
}

.carrito-contenido {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 310px;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    column-gap: 0;
    width: min(900px, 100%) !important;
    max-width: 900px !important;
    max-height: min(760px, calc(100dvh - 48px)) !important;
    border-radius: 22px !important;
}

.carrito-contenido h2 {
    grid-column: 1 / -1;
    padding: 20px 64px 17px 22px !important;
    font-size: 1.2rem !important;
}

.carrito-contenido #lista-carrito {
    grid-column: 1;
    grid-row: 2 / 5;
    padding: 4px 22px 16px !important;
    border-right: 1px solid #e7eaf0;
}

.carrito-contenido .item-carrito {
    grid-template-columns: 64px minmax(0, 1fr) auto auto auto !important;
    grid-template-areas: "imagen info cantidad subtotal eliminar" !important;
    align-items: center;
    gap: 12px !important;
    min-height: 92px;
    padding: 13px 0 !important;
}

.carrito-miniatura {
    grid-area: imagen;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 1px solid #e1e6ef;
    border-radius: 12px;
    background: #f5f7fa;
}
.carrito-miniatura img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.carrito-miniatura span { font-size: 1.5rem; }

.carrito-contenido .info-producto .nombre-producto { font-size: .92rem; }
.carrito-contenido .controles-cantidad {
    min-height: 42px;
    gap: 4px !important;
    padding: 3px !important;
    border-radius: 11px;
}
.carrito-contenido .controles-cantidad button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border: 1px solid #e1e6ef !important;
    border-radius: 8px !important;
}
.carrito-contenido .controles-cantidad > span { min-width: 22px; font-size: .9rem; }
.carrito-contenido .subtotal { align-self: center; font-size: .92rem; white-space: nowrap; }
.carrito-contenido .eliminar-producto { width: 36px; height: 36px; border-radius: 10px !important; }

.carrito-contenido .resumen-compra {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0 !important;
    padding: 17px 18px 12px;
    overflow-y: auto;
}
.carrito-contenido .beneficio-envio { padding: 10px 11px; font-size: .78rem; }
.carrito-contenido .cupon-compra { margin-top: 12px; }
.carrito-contenido .cupon-compra label { font-size: .78rem; }
.carrito-contenido .cupon-compra input { min-height: 40px; padding: 8px; }
.carrito-contenido .cupon-compra button { min-height: 40px; padding-inline: 11px; font-size: .78rem; }
.carrito-contenido .cupon-compra small { font-size: .68rem; line-height: 1.3; }

.carrito-contenido .total-carrito {
    grid-column: 2;
    grid-row: 3;
    padding: 14px 18px 9px !important;
    border-top: 1px solid #e7eaf0 !important;
}
.carrito-contenido .finalizar-compra {
    grid-column: 2;
    grid-row: 4;
    width: auto !important;
    min-height: 52px;
    margin: 0 18px 18px !important;
    border-radius: 13px !important;
    font-size: .91rem !important;
}
.carrito-contenido :is(.vaciar-carrito, .compartir-carrito) { min-height: 38px; }

@media (max-width:700px) {
    .carrito-ventana { padding: 0 !important; }
    .carrito-contenido {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        max-height: min(88dvh, 760px) !important;
        border-width: 1px 0 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
    .carrito-contenido h2 { padding: 18px 62px 15px 18px !important; font-size: 1.08rem !important; }
    .cerrar-carrito { top: 12px !important; right: 14px !important; width: 40px; height: 40px; }
    .carrito-contenido #lista-carrito {
        flex: 1 1 auto;
        padding: 3px 16px 11px !important;
        border-right: 0;
    }
    .carrito-contenido .item-carrito {
        grid-template-columns: 58px minmax(0, 1fr) auto !important;
        grid-template-areas:
            "imagen info eliminar"
            "imagen cantidad subtotal" !important;
        gap: 8px 10px !important;
        min-height: 102px;
        padding: 12px 0 !important;
    }
    .carrito-miniatura { width: 58px; height: 58px; border-radius: 11px; }
    .carrito-contenido .info-producto .nombre-producto { font-size: .86rem; }
    .carrito-contenido .info-producto > span { font-size: .76rem; }
    .carrito-contenido .controles-cantidad { min-height: 44px; width: max-content; }
    .carrito-contenido .controles-cantidad button { width: 38px !important; height: 38px !important; min-width: 38px !important; font-size: 1.2rem !important; }
    .carrito-contenido .controles-cantidad > span { min-width: 24px; font-size: .92rem; }
    .carrito-contenido .subtotal { align-self: center; font-size: .95rem; }
    .carrito-contenido .eliminar-producto { width: 38px; height: 38px; }
    .carrito-contenido .resumen-compra {
        flex: 0 0 auto;
        max-height: 186px;
        margin: 0 !important;
        padding: 10px 16px 8px;
        border-top: 1px solid #e7eaf0;
    }
    .carrito-contenido .beneficio-envio { padding: 8px 10px; font-size: .72rem; }
    .carrito-contenido .cupon-compra { margin-top: 8px; }
    .carrito-contenido .cupon-compra small { display: none; }
    .carrito-contenido .total-carrito { flex: 0 0 auto; padding: 11px 16px 8px !important; }
    .carrito-contenido .finalizar-compra {
        flex: 0 0 auto;
        width: calc(100% - 32px) !important;
        min-height: 54px;
        margin: 0 16px max(14px, env(safe-area-inset-bottom)) !important;
        font-size: .92rem !important;
    }
}

/* Inicio de compra rápida: más producto visible y accesos directos sin un hero que consuma la pantalla. */
.pagina-inicio .explorador-categorias-inicio {
    display: grid;
    gap: 10px;
}

.beneficios-rapidos-nichi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: auto hidden;
    color: var(--nichi-texto-suave);
    scrollbar-width: none;
}
.beneficios-rapidos-nichi::-webkit-scrollbar { display: none; }
.beneficios-rapidos-nichi span {
    flex: 0 0 auto;
    padding: 0 11px;
    border-right: 1px solid var(--nichi-borde);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
.beneficios-rapidos-nichi span:last-child { border-right: 0; }

.categorias-rapidas-nichi {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 10px;
    overflow: auto hidden;
    padding: 2px 1px 5px;
    scrollbar-width: none;
}
.categorias-rapidas-nichi::-webkit-scrollbar { display: none; }
.categoria-rapida-nichi {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--nichi-texto);
    background: transparent;
    box-shadow: none;
    font: inherit;
}
.categoria-rapida-imagen {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 1px solid var(--nichi-borde);
    border-radius: 50%;
    background: #f4f6fa;
    box-shadow: 0 4px 10px rgba(6, 22, 54, .07);
}
.categoria-rapida-imagen img { width: 100%; height: 100%; object-fit: cover; }
.categoria-rapida-imagen span { font-size: 1.4rem; }
.categoria-todas-nichi { color: #fff; background: linear-gradient(135deg, var(--nichi-rojo), var(--nichi-rojo-profundo)); }
.categoria-rapida-nichi b {
    display: -webkit-box;
    overflow: hidden;
    max-width: 74px;
    color: var(--nichi-texto);
    font-size: .69rem;
    font-weight: 750;
    line-height: 1.1;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.categoria-rapida-nichi:hover .categoria-rapida-imagen,
.categoria-rapida-nichi:focus-visible .categoria-rapida-imagen,
.categoria-rapida-nichi.activo .categoria-rapida-imagen {
    border-color: var(--nichi-rojo);
    box-shadow: 0 0 0 3px rgba(227, 27, 43, .13);
}

@media (max-width:700px) {
    .pagina-inicio .productos-principales-inicio > .seccion-titulo {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
        margin-bottom: 8px !important;
    }
    .pagina-inicio .productos-principales-inicio > .seccion-titulo > span { display: none !important; }
    .pagina-inicio .productos-principales-inicio > .seccion-titulo h2 {
        margin: 0 !important;
        font-size: 1.26rem !important;
        letter-spacing: -.025em !important;
    }
    .pagina-inicio .productos-principales-inicio > .seccion-titulo p { display: none !important; }
    .pagina-inicio .explorador-categorias-inicio { margin: 0 auto 14px !important; }
    .beneficios-rapidos-nichi { justify-content: flex-start; margin-inline: -2px; }
    .beneficios-rapidos-nichi span { padding: 0 9px; font-size: .62rem; }
    .categorias-rapidas-nichi {
        display: flex;
        gap: 10px;
        margin-right: -14px;
        padding-right: 14px;
    }
    .categoria-rapida-nichi { flex: 0 0 60px; }
    .categoria-rapida-imagen { width: 50px; height: 50px; }
    .categoria-rapida-nichi b { max-width: 60px; font-size: .6rem; }
    .pagina-inicio .abrir-explorador-categorias {
        justify-self: center;
        min-height: 30px !important;
        padding-inline: 9px !important;
        font-size: .67rem !important;
    }
    .pagina-inicio .productos-container { padding-inline: 0 !important; gap: 7px !important; }
    .pagina-inicio .producto { border-radius: 10px !important; }
    .pagina-inicio .producto-imagen { border-radius: 10px 10px 0 0 !important; }
    .pagina-inicio .producto-info { padding: 7px !important; }
    .pagina-inicio .producto h3 { font-size: .75rem !important; line-height: 1.18 !important; }
    .pagina-inicio .precio-comercial-producto { margin-top: 4px !important; }
    .pagina-inicio .precio-comercial-producto strong { font-size: .92rem !important; }
    .pagina-inicio .producto-comentario { margin-top: 3px !important; font-size: .66rem !important; }
    .pagina-inicio .producto .agregar-carrito { min-height: 32px !important; margin-top: 6px !important; }
    .notificacion-carrito {
        right: 12px !important;
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        left: 12px !important;
        width: auto !important;
        min-height: 48px !important;
        padding: 10px 13px !important;
        border-radius: 13px !important;
        box-shadow: 0 14px 34px rgba(6, 22, 54, .24) !important;
        font-size: .82rem !important;
    }
}

/* Acciones del encabezado: iconos puros, con ayuda al pasar el cursor. */
@media (min-width:701px) {
    .header .boton-entrar,
    .header .boton-carrito,
    .header #boton-idioma,
    .header #boton-notificaciones {
        position: relative;
        display: grid !important;
        place-items: center;
        flex: 0 0 44px;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 1.15rem !important;
    }

    .header .boton-entrar .texto-accion,
    .header .boton-carrito .texto-accion,
    .header #boton-idioma .texto-accion,
    .header #boton-idioma .indicador-desplegable,
    .header .boton-entrar .usuario-nombre-mini {
        display: none !important;
    }

    .header .boton-entrar .icono-accion,
    .header .boton-carrito .icono-accion,
    .header #boton-idioma .icono-accion {
        display: grid;
        place-items: center;
        line-height: 1;
    }

    .header .boton-entrar.sesion-iniciada .usuario-avatar-mini {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        margin: 0 !important;
        border-radius: 50%;
    }

    .header .boton-carrito #contador-carrito {
        position: absolute;
        top: -5px;
        right: -5px;
        display: grid;
        min-width: 20px;
        height: 20px;
        place-items: center;
        padding: 0 4px;
        border: 2px solid var(--nichi-azul) !important;
        border-radius: 50px;
        font-size: .65rem !important;
        font-style: normal;
        line-height: 1;
    }

    .header [data-tooltip]::after {
        position: absolute;
        z-index: 20;
        top: calc(100% + 9px);
        left: 50%;
        padding: 6px 8px;
        border-radius: 7px;
        color: #fff;
        background: #061636;
        box-shadow: 0 7px 18px rgba(1, 12, 37, .2);
        content: attr(data-tooltip);
        font-size: .7rem;
        font-weight: 700;
        line-height: 1;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -3px);
        transition: opacity .16s ease, transform .16s ease;
        white-space: nowrap;
    }

    .header [data-tooltip]:hover::after,
    .header [data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Cabecera esencial: sin franja promocional, emblema ni eslogan. */
.barra-oferta { display: none !important; }
.header,
.header.header-compacto {
    min-height: 68px;
    padding: 12px max(4%, calc((100% - 1320px) / 2)) !important;
    gap: 14px !important;
}
.header .logo {
    display: flex !important;
    align-items: center;
    min-width: auto;
    padding: 0 !important;
}
.header .logo h1 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.42rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
}

@media (max-width:700px) {
    .header,
    .header.header-compacto {
        min-height: 0;
        padding: 9px 0 10px !important;
    }
    .header .logo { padding-inline: 0 !important; }
    .header .logo h1 { font-size: 1.22rem !important; }
}

/* Las categorías se muestran solo cuando el cliente abre “Categorías”. */
.pagina-inicio .categorias-rapidas-nichi[hidden] {
    display: none !important;
}

@media (max-width:700px) {
    .pagina-inicio .explorador-categorias-inicio.categorias-abiertas {
        display: grid !important;
    }
}

/* Navegación única en Inicio y Catálogo: cambia solo el enlace activo. */
@media (min-width:701px) {
    .nav,
    .header-compacto + .nav {
        position: sticky !important;
        top: 68px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        margin: 0;
        padding: 6px 20px !important;
        gap: 5px !important;
        border-top: 1px solid rgba(255,255,255,.07) !important;
        border-bottom: 1px solid rgba(255,255,255,.13) !important;
        background: #061636 !important;
        box-shadow: 0 8px 18px rgba(2, 11, 31, .12) !important;
    }

    .nav a {
        position: relative;
        padding: 9px 14px !important;
        border: 0 !important;
        border-radius: 9px !important;
        color: #cbd5e7 !important;
        background: transparent !important;
        font-size: .84rem !important;
        font-weight: 750 !important;
        line-height: 1;
        text-decoration: none;
    }

    .nav a:hover,
    .nav a:focus-visible {
        color: #fff !important;
        background: rgba(255,255,255,.08) !important;
        transform: none !important;
    }

    .nav a.activo,
    .nav a[aria-current="page"] {
        color: #fff !important;
        background: rgba(227,27,43,.18) !important;
        box-shadow: inset 0 -2px 0 var(--nichi-rojo) !important;
    }
}

/* Página independiente de compra inteligente. */
.inteligente-principal {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 42px 0 72px;
}
.inteligente-introduccion {
    max-width: 650px;
    margin: 0 auto 24px;
    text-align: center;
}
.inteligente-introduccion > span {
    color: var(--nichi-rojo-profundo);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .12em;
}
.inteligente-introduccion h1 {
    margin: 9px 0;
    color: var(--nichi-azul);
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    line-height: 1.08;
}
.inteligente-introduccion p { margin: 0; color: var(--nichi-texto-suave); line-height: 1.5; }
.pagina-inteligente-nichi #panel-compra-inteligente-inicio { max-width: 900px; margin: 0 auto; }
.pagina-inteligente-nichi #panel-compra-inteligente-inicio .descubridor-compras { margin: 0; }

/* Promociones es una página de compra, no otra capa del catálogo. */
.promociones-principal {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 72px;
}
.promociones-introduccion {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 24px;
    padding: 22px 26px;
    border: 1px solid rgba(227, 27, 43, .18);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(115deg, #061636 0%, #162b5c 64%, #b3142c 150%);
    box-shadow: 0 12px 28px rgba(6, 22, 54, .13);
}
.promociones-introduccion span {
    display: block;
    margin-bottom: 7px;
    color: #ffc7ce;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
}
.promociones-introduccion h1 {
    margin: 0;
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    line-height: 1.05;
}
.promociones-introduccion p { max-width: 570px; margin: 8px 0 0; color: #dbe5f7; line-height: 1.5; }
.promociones-contador {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.12);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}
.pagina-promociones #lista-productos { min-height: 220px; }
@media (max-width:700px) {
    .inteligente-principal { width: min(100% - 24px, 620px); padding: 26px 0 88px; }
    .inteligente-introduccion { margin-bottom: 16px; }
    .promociones-principal { width: min(100% - 24px, 620px); padding: 20px 0 88px; }
    .promociones-introduccion { display: block; margin-bottom: 16px; padding: 18px; border-radius: 14px; }
    .promociones-introduccion p { font-size: .91rem; }
    .promociones-contador { display: inline-flex; margin-top: 14px; }
}

/* =====================================================
   CABECERA NICHI · MARKETPLACE ESENCIAL
   Una jerarquía clara: buscar, comprar y explorar; sin
   repetir el carrito en la navegación ni usar emojis del SO.
   ===================================================== */
.site-header,
.site-header.header-compacto {
    position: relative !important;
    z-index: 40;
    display: grid !important;
    grid-template-columns: max-content minmax(220px, 680px) repeat(3, 40px) !important;
    grid-template-areas: none !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 64px !important;
    gap: 10px !important;
    padding: 10px clamp(18px, 4vw, 64px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    background: #081a3a !important;
    box-shadow: none !important;
}

.site-header .logo {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 8px 0 0 !important;
    text-align: left !important;
}

.site-header .logo h1 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.28rem !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
}

.site-header .buscador-principal {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.site-header .buscador-principal input,
.site-header #buscador {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 52px 0 15px !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 12px !important;
    color: #f8fbff !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
    font-size: .95rem !important;
}

.site-header .buscador-principal input::placeholder { color: #c6d0e2 !important; }
.site-header .buscador-principal input:focus { border-color: rgba(255, 255, 255, .78) !important; box-shadow: 0 0 0 3px rgba(227, 27, 43, .24) !important; }

.site-header #boton-buscar {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    display: grid !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: var(--nichi-rojo) !important;
    box-shadow: none !important;
}

.site-header :is(.boton-entrar, .boton-carrito, #boton-idioma) {
    position: relative !important;
    display: grid !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .19) !important;
    border-radius: 11px !important;
    color: #eaf0fb !important;
    background: transparent !important;
    box-shadow: none !important;
}

.site-header :is(.boton-entrar, .boton-carrito, #boton-idioma):hover,
.site-header :is(.boton-entrar, .boton-carrito, #boton-idioma):focus-visible {
    border-color: rgba(255, 255, 255, .55) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .1) !important;
    transform: none !important;
}

.site-header .selector-idioma {
    position: relative !important;
    display: grid !important;
    width: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
}

.site-header :is(.texto-accion, .indicador-desplegable, .usuario-nombre-mini) { display: none !important; }
.site-header .icono-accion,
.site-header .nav-inteligente-icono { display: grid; place-items: center; line-height: 0; }
.site-header .icono-accion svg,
.nav-principal .nav-inteligente-icono svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header #boton-buscar .icono-accion svg { width: 18px; height: 18px; }
.site-header .boton-entrar.sesion-iniciada .usuario-avatar-mini { display: grid !important; width: 28px; height: 28px; margin: 0 !important; place-items: center; border-radius: 50%; }
.site-header .boton-carrito #contador-carrito {
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    display: grid;
    min-width: 18px !important;
    height: 18px !important;
    place-items: center;
    padding: 0 3px !important;
    border: 2px solid #081a3a !important;
    border-radius: 99px !important;
    color: #fff !important;
    background: var(--nichi-rojo) !important;
    font-size: .62rem !important;
    line-height: 1 !important;
}

.site-header .menu-idiomas {
    z-index: 80 !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 182px;
}

@media (min-width:761px) {
    .nav-principal,
    .header-compacto + .nav-principal {
        position: sticky !important;
        top: 64px !important;
        z-index: 35;
        display: flex !important;
        min-height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 22px !important;
        margin: 0 !important;
        padding: 0 20px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
        background: #081a3a !important;
        box-shadow: none !important;
    }

    .nav-principal .nav-enlaces {
        display: flex;
        align-self: stretch;
        align-items: center;
        gap: 24px;
    }

    .nav-principal a {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        min-height: 46px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #bfcae0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: .83rem !important;
        font-weight: 750 !important;
        text-decoration: none;
        white-space: nowrap;
    }

    .nav-principal a::after {
        position: absolute !important;
        right: 0;
        bottom: 0 !important;
        left: 0;
        width: auto !important;
        height: 2px !important;
        border-radius: 2px 2px 0 0;
        background: var(--nichi-rojo) !important;
        content: "";
        opacity: 0;
        transform: none !important;
    }

    .nav-principal a:hover,
    .nav-principal a:focus-visible,
    .nav-principal a.activo,
    .nav-principal a[aria-current="page"] {
        color: #fff !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .nav-principal a:hover::after,
    .nav-principal a:focus-visible::after,
    .nav-principal a.activo::after,
    .nav-principal a[aria-current="page"]::after { opacity: 1; }

    .nav-principal .nav-inteligente {
        min-height: 30px !important;
        gap: 6px;
        margin-left: 2px;
        padding: 0 10px !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        border-radius: 999px !important;
        color: #dce6f7 !important;
        font-size: .76rem !important;
    }
    .nav-principal .nav-inteligente:hover,
    .nav-principal .nav-inteligente:focus-visible,
    .nav-principal .nav-inteligente.activo { border-color: rgba(255, 255, 255, .42) !important; background: rgba(255, 255, 255, .08) !important; }
    .nav-principal .nav-inteligente::after { display: none !important; }
    .nav-principal .nav-inteligente-icono svg { width: 15px; height: 15px; }
}

@media (min-width:761px) and (max-width:1020px) {
    .site-header,
    .site-header.header-compacto { grid-template-columns: max-content minmax(180px, 1fr) repeat(3, 40px) !important; gap: 8px !important; padding-inline: 18px !important; }
    .nav-principal { gap: 16px !important; }
    .nav-principal .nav-enlaces { gap: 18px; }
    .nav-principal a { font-size: .78rem !important; }
    .nav-principal .nav-inteligente { padding-inline: 8px !important; font-size: .72rem !important; }
}

@media (max-width:760px) {
    .site-header,
    .site-header.header-compacto {
        grid-template-columns: 40px minmax(0, 1fr) 40px !important;
        grid-template-areas: "idioma marca avisos" "buscador buscador buscador" !important;
        justify-content: stretch !important;
        min-height: 0 !important;
        gap: 8px 10px !important;
        padding: 9px 10px 11px !important;
    }

    .site-header .logo { grid-area: marca !important; justify-content: center !important; width: 100% !important; padding: 0 !important; text-align: center !important; }
    .site-header .logo h1 { font-size: 1.16rem !important; letter-spacing: .11em !important; }
    .site-header .buscador-principal { grid-area: buscador !important; width: 100% !important; margin: 0 !important; }
    .site-header .buscador-principal input,
    .site-header #buscador { min-height: 42px !important; font-size: .9rem !important; }
    .site-header #boton-buscar { top: 3px !important; right: 3px !important; bottom: auto !important; left: auto !important; width: 36px !important; height: 36px !important; transform: none !important; }

    .site-header > .boton-entrar,
    .site-header > .boton-carrito { display: none !important; }
    .site-header > .selector-idioma { grid-area: idioma !important; display: grid !important; width: 40px !important; }
    .site-header #boton-idioma { display: grid !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; }
    .site-header > .centro-notificaciones { position: relative !important; z-index: auto !important; display: grid !important; grid-area: avisos !important; justify-self: end !important; width: 40px; margin: 0 !important; transform: none !important; inset: auto !important; }
    .site-header #boton-notificaciones { display: grid !important; width: 38px !important; height: 38px !important; min-height: 38px !important; place-items: center !important; border: 1px solid rgba(255,255,255,.19) !important; border-radius: 11px !important; color: #eaf0fb !important; background: transparent !important; box-shadow: none !important; }
    .site-header #boton-notificaciones .icono-accion svg { width: 19px; height: 19px; }
    /* El contador se oculta cuando no hay avisos; el acceso al centro debe
       seguir visible y disponible para abrir el estado vacío. */
    .site-header #panel-notificaciones { top: 64px !important; right: 10px !important; left: 10px !important; }
    .nav-principal { display: none !important; }

    .navegacion-comercial-movil {
        display: grid !important;
        height: 64px !important;
        padding: 4px 4px max(4px, env(safe-area-inset-bottom)) !important;
    }
    .navegacion-comercial-movil span { font-size: 1.36rem !important; }
    .navegacion-comercial-movil b { font-size: .62rem !important; }
}

/* La capa móvil anterior tenía selectores muy específicos. Este cierre
   restablece una sola grilla para evitar cuentas/carritos duplicados. */

/* =====================================================
   CARRITO NICHI · AUDITORÍA DE USO
   Los controles mantienen 44 px táctiles y el panel no compite con la
   navegación móvil. En pantallas medias se usa una sola columna para no
   comprimir producto, cantidad y total en el mismo renglón.
===================================================== */
body.carrito-abierto {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.carrito-ventana {
    z-index: 1000000100 !important;
    align-items: center !important;
    padding: clamp(16px, 2.5vw, 28px) !important;
    overflow: auto;
    overscroll-behavior: contain;
}

.carrito-contenido {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 316px;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: min(980px, 100%) !important;
    max-width: 980px !important;
    max-height: min(780px, calc(100dvh - 48px)) !important;
    min-height: min(520px, calc(100dvh - 48px));
    overflow: hidden !important;
    border-radius: 22px !important;
}

.carrito-contenido h2 {
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: 20px 72px 18px 24px !important;
    border-bottom: 1px solid #e5eaf1;
    font-size: 1.18rem !important;
}

.cerrar-carrito {
    top: 13px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 12px !important;
}

.carrito-contenido #tiempo-carrito {
    position: absolute;
    z-index: 1;
    top: 76px;
    right: 342px;
    left: 24px;
    margin: 0;
    padding: 9px 12px;
    font-size: .82rem;
}

.carrito-contenido #tiempo-carrito:not([hidden]) + #lista-carrito {
    padding-top: 62px !important;
}

.carrito-contenido #lista-carrito {
    grid-column: 1;
    grid-row: 2 / 5;
    min-height: 0;
    margin: 0 !important;
    padding: 8px 24px 16px !important;
    overflow: auto;
    overscroll-behavior: contain;
    border-right: 1px solid #e5eaf1;
}

.carrito-contenido .item-carrito {
    grid-template-columns: 64px minmax(0, 1fr) auto 44px !important;
    grid-template-areas: "imagen info acciones eliminar" !important;
    align-items: center;
    gap: 18px !important;
    min-height: 96px;
    padding: 16px 0 !important;
}

.carrito-miniatura {
    grid-area: imagen;
    width: 64px;
    height: 64px;
}

.carrito-contenido .info-producto {
    grid-area: info;
    min-width: 0;
    gap: 5px !important;
}

.carrito-contenido .info-producto .nombre-producto {
    font-size: .94rem;
    line-height: 1.32;
}

.carrito-linea-acciones {
    display: flex;
    grid-area: acciones;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    gap: 16px;
}

.carrito-contenido .controles-cantidad {
    grid-area: auto !important;
    min-height: 48px;
    gap: 7px !important;
    padding: 2px !important;
    border-radius: 13px;
}

.carrito-contenido .controles-cantidad button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px;
    border-radius: 10px !important;
    font-size: 1.22rem !important;
}

.carrito-contenido .controles-cantidad > span {
    min-width: 28px;
    font-size: .95rem;
}

.carrito-contenido .subtotal {
    grid-area: auto !important;
    align-self: auto;
    min-width: max-content;
    color: var(--nichi-rojo, #e31b2b) !important;
    font-size: .96rem;
    white-space: nowrap;
}

.carrito-contenido .eliminar-producto {
    grid-area: eliminar;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
}

.carrito-contenido .resumen-compra {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    min-height: 0;
    margin: 0 !important;
    padding: 18px 20px 14px;
    overflow: auto;
    overscroll-behavior: contain;
}

.carrito-contenido .total-carrito {
    grid-column: 2;
    grid-row: 3;
    min-height: 62px;
    margin: 0 !important;
    padding: 15px 20px 11px !important;
    border-top: 1px solid #e5eaf1 !important;
}

.carrito-contenido .finalizar-compra {
    grid-column: 2;
    grid-row: 4;
    width: auto !important;
    min-height: 54px;
    margin: 0 20px 20px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    font-size: .94rem !important;
}

.carrito-contenido :is(.cerrar-carrito, .controles-cantidad button, .eliminar-producto, .finalizar-compra, .vaciar-carrito, .compartir-carrito, .cupon-compra button):focus-visible {
    outline: 3px solid rgba(227, 27, 43, .38);
    outline-offset: 2px;
}

@media (max-width: 960px) {
    .carrito-contenido {
        display: flex !important;
        flex-direction: column !important;
        width: min(660px, 100%) !important;
        max-width: 660px !important;
        min-height: min(500px, calc(100dvh - 40px));
    }

    .carrito-contenido #tiempo-carrito {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        flex: 0 0 auto;
        margin: 10px 20px 0;
    }

    .carrito-contenido #tiempo-carrito:not([hidden]) + #lista-carrito {
        padding-top: 8px !important;
    }

    .carrito-contenido #lista-carrito {
        flex: 1 1 170px;
        min-height: 0;
        padding: 8px 20px 14px !important;
        border-right: 0;
    }

    .carrito-contenido .resumen-compra {
        flex: 0 1 196px;
        min-height: 0;
        max-height: min(220px, 28dvh);
        padding: 13px 20px 10px;
        border-top: 1px solid #e5eaf1;
    }

    .carrito-contenido .total-carrito {
        flex: 0 0 auto;
        padding-inline: 20px !important;
    }

    .carrito-contenido .finalizar-compra {
        flex: 0 0 auto;
        width: calc(100% - 40px) !important;
        margin: 0 20px 20px !important;
    }
}

@media (max-width: 700px) {
    .carrito-ventana {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .carrito-contenido {
        width: 100% !important;
        max-width: none !important;
        max-height: min(92dvh, 780px) !important;
        min-height: min(460px, 92dvh);
        border-width: 1px 0 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }

    .carrito-contenido h2 {
        padding: 18px 70px 16px 18px !important;
        font-size: 1.1rem !important;
    }

    .cerrar-carrito {
        top: 12px !important;
        right: 14px !important;
    }

    .carrito-contenido #tiempo-carrito {
        margin: 8px 14px 0;
        font-size: .78rem;
    }

    .carrito-contenido #lista-carrito {
        flex-basis: 130px;
        padding: 6px 14px 12px !important;
    }

    .carrito-contenido .item-carrito {
        grid-template-columns: 60px minmax(0, 1fr) 44px !important;
        grid-template-areas:
            "imagen info eliminar"
            "imagen acciones acciones" !important;
        align-items: start;
        gap: 10px !important;
        min-height: 132px;
        padding: 14px 0 !important;
    }

    .carrito-miniatura {
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }

    .carrito-contenido .info-producto {
        padding-top: 2px;
    }

    .carrito-contenido .info-producto .nombre-producto {
        font-size: .9rem;
    }

    .carrito-linea-acciones {
        justify-content: space-between;
        gap: 8px;
        min-height: 48px;
    }

    .carrito-contenido .subtotal {
        font-size: .98rem;
    }

    .carrito-contenido .resumen-compra {
        flex-basis: 176px;
        max-height: min(190px, 29dvh);
        padding: 11px 14px 9px;
    }

    .carrito-contenido .total-carrito {
        min-height: 58px;
        padding: 12px 14px 9px !important;
    }

    .carrito-contenido .finalizar-compra {
        width: calc(100% - 28px) !important;
        min-height: 56px !important;
        margin: 0 14px max(16px, env(safe-area-inset-bottom)) !important;
        font-size: .96rem !important;
    }
}

@media (max-width: 359px) {
    .carrito-contenido #lista-carrito {
        padding-inline: 12px !important;
    }

    .carrito-contenido .item-carrito {
        grid-template-columns: 56px minmax(0, 1fr) 44px !important;
    }

    .carrito-miniatura {
        width: 56px;
        height: 56px;
    }

    .carrito-linea-acciones {
        flex-wrap: wrap;
    }

    .carrito-contenido .subtotal {
        margin-left: auto;
    }
}
@media (max-width:760px) {
    header.site-header,
    header.site-header.header-compacto {
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        grid-template-columns: 40px minmax(0, 1fr) 40px !important;
        grid-template-rows: 40px 42px !important;
        grid-template-areas: "idioma marca avisos" "buscador buscador buscador" !important;
    }

    header.site-header > .logo {
        grid-area: marca !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    header.site-header > .buscador-principal {
        grid-area: buscador !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    header.site-header > #boton-entrar,
    header.site-header > #boton-carrito {
        display: none !important;
        grid-area: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        inset: auto !important;
    }

    header.site-header > .selector-idioma {
        position: relative !important;
        inset: auto !important;
        grid-area: idioma !important;
        align-self: center !important;
        justify-self: start !important;
        transform: none !important;
    }

    header.site-header #boton-idioma::after { content: none !important; }

    header.site-header > .centro-notificaciones {
        position: relative !important;
        inset: auto !important;
        grid-area: avisos !important;
        align-self: center !important;
        justify-self: end !important;
        transform: none !important;
    }

    .navegacion-comercial-movil {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-template-rows: 1fr !important;
        align-items: stretch !important;
        position: fixed !important;
        z-index: 1000000002 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .navegacion-comercial-movil :is(a, button) {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 2px 0 !important;
        overflow: hidden !important;
    }

    .navegacion-comercial-movil b {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .navegacion-comercial-movil em {
        position: absolute !important;
        top: 2px !important;
        right: 18% !important;
    }

    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
}

/* Estado de conexión y actualización. Se mantiene por debajo de los
   diálogos de compra para no bloquear el carrito ni el checkout. */
.nichi-estado-conexion {
    position: fixed;
    z-index: 1000000000;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(560px, calc(100% - 24px));
    padding: 10px 12px;
    border: 1px solid #cfd8e7;
    border-radius: 14px;
    color: #132342;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 12px 32px rgba(6, 22, 54, .18);
    transform: translateX(-50%);
    font-size: .88rem;
    line-height: 1.35;
}

.nichi-estado-conexion[hidden] {
    display: none !important;
}

.nichi-estado-conexion-icono {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #2858a8;
    background: #edf3ff;
    font-size: 1rem;
    font-weight: 900;
}

.nichi-estado-conexion-icono::before { content: "i"; }

.nichi-estado-conexion-mensaje {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-weight: 650;
}

.nichi-estado-conexion-actualizar {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 12px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #0c4a9e;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.nichi-estado-conexion-actualizar:hover,
.nichi-estado-conexion-actualizar:focus-visible {
    background: #083a7e;
}

.nichi-estado-conexion-actualizar:focus-visible {
    outline: 3px solid rgba(12, 74, 158, .28);
    outline-offset: 2px;
}

.nichi-estado-conexion[data-estado="offline"] {
    border-color: #f2bbbf;
    background: #fff8f8;
}

.nichi-estado-conexion[data-estado="offline"] .nichi-estado-conexion-icono {
    color: #bd1627;
    background: #ffe9eb;
}

.nichi-estado-conexion[data-estado="offline"] .nichi-estado-conexion-icono::before { content: "!"; }

.nichi-estado-conexion[data-estado="actualizacion"] {
    border-color: #b9d4c5;
    background: #f5fcf7;
}

.nichi-estado-conexion[data-estado="actualizacion"] .nichi-estado-conexion-icono {
    color: #13734b;
    background: #e2f5e9;
}

.nichi-estado-conexion[data-estado="actualizacion"] .nichi-estado-conexion-icono::before { content: "\2191"; }

@media (max-width: 520px) {
    .nichi-estado-conexion {
        align-items: flex-start;
        width: calc(100% - 20px);
        padding: 10px;
        font-size: .82rem;
    }

    .nichi-estado-conexion-actualizar {
        min-height: 34px;
        padding-inline: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nichi-estado-conexion { transition: none !important; }
}

/* =====================================================
   CARRITO: VIEWPORT TÁCTIL
   La capa anterior combinaba 100vw/100vh con padding. En algunos WebView
   móviles eso desbordaba el viewport visual y el panel quedaba cortado.
   El diálogo ocupa ahora el inset real y cada zona interna puede desplazarse
   sin esconder los controles de cantidad ni el botón de finalizar.
===================================================== */
.carrito-ventana {
    box-sizing: border-box;
    width: auto !important;
    height: auto !important;
}

.carrito-contenido {
    height: min(780px, calc(100vh - 48px)) !important;
    height: min(780px, calc(100dvh - 48px)) !important;
    min-height: 0 !important;
}

.carrito-contenido :is(#lista-carrito, .resumen-compra) {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

@media (max-width: 960px) {
    .carrito-contenido {
        height: min(700px, calc(100vh - 40px)) !important;
        height: min(700px, calc(100dvh - 40px)) !important;
        min-height: 0 !important;
    }
}

@media (max-width: 700px) {
    .carrito-ventana {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .carrito-contenido {
        height: min(92vh, 780px) !important;
        height: min(92dvh, 780px) !important;
        max-height: min(92vh, 780px) !important;
        max-height: min(92dvh, 780px) !important;
    }

    .carrito-contenido #lista-carrito {
        flex: 1 1 auto;
        min-height: 0 !important;
    }

    .carrito-contenido .resumen-compra {
        flex: 0 1 min(176px, 29dvh);
        min-height: 0 !important;
    }
}

/* El modo horizontal o teclados abiertos reducen mucho la altura útil. */
@media (max-width: 700px) and (max-height: 560px) {
    .carrito-contenido h2 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .carrito-contenido #tiempo-carrito {
        margin-top: 6px;
        padding: 6px 9px;
        font-size: .72rem;
    }

    .carrito-contenido .resumen-compra {
        flex-basis: min(104px, 22dvh);
        max-height: min(104px, 22dvh);
        padding-top: 8px;
        padding-bottom: 6px;
    }

    .carrito-contenido .total-carrito {
        min-height: 52px;
        padding-top: 9px !important;
        padding-bottom: 7px !important;
    }

    .carrito-contenido .finalizar-compra {
        min-height: 48px !important;
        margin-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
}

/* En un teléfono horizontal el ancho puede superar el corte móvil. El centro
   de avisos conserva una posición propia, sin empujar ni cortar la cabecera. */
@media (min-width: 761px) and (max-width: 960px) {
    header.site-header > .centro-notificaciones {
        position: absolute !important;
        z-index: 1000000021 !important;
        top: 60px !important;
        right: 12px !important;
        left: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    header.site-header > .centro-notificaciones #boton-notificaciones {
        display: grid !important;
        width: 42px !important;
        height: 42px !important;
        place-items: center !important;
    }

    header.site-header > .centro-notificaciones #panel-notificaciones {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        width: min(370px, calc(100vw - 24px)) !important;
    }
}