/*
 * EL IMPERIO DEL DESEO — Sistema de diseño «INSIGNIA»
 * Idioma: español (Colombia)
 *
 * La idea: un imperio no grita, se reconoce. Fondo de ónix, un solo metal,
 * capitales romanas espaciadas y una insignia —el filete con su rombo— que
 * abre cada sección y cierra la compra.
 *
 * REGLA DEL SISTEMA: ni un hex ni un px sueltos fuera de este bloque.
 * Todo color, tamaño, espacio, radio, sombra, curva y capa sale de aquí.
 */

/* ===================================================================
   FUENTES — autoalojadas, subconjunto latino
   Antes: 4 woff2 de Google (205,7 KB) + 289 KB de webfont de iconos,
   los tres desde dos CDN y bloqueando el pintado.
   Ahora: 62,8 KB en dos ficheros propios. Inter es variable (100-900)
   en un solo archivo, y los iconos son un sprite SVG en la propia página.
   =================================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fuentes/inter-latin-var.woff2') format('woff2');
    ascent-override: 96.88%;
    descent-override: 24.12%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Marcellus';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fuentes/marcellus-latin.woff2') format('woff2');
    ascent-override: 97.41%;
    descent-override: 27.98%;
    line-gap-override: 0%;
}
/* Caras de respaldo con las métricas ajustadas a las reales: mientras la
   fuente viaja, el texto ocupa EXACTAMENTE el mismo alto y ancho, así que al
   intercambiarse no mueve nada. Es lo que quita el CLS de 0,19 en políticas. */
@font-face {
    font-family: 'Inter respaldo';
    src: local('Arial'), local('Helvetica'), local('Roboto');
    size-adjust: 104.8%;
    ascent-override: 96.88%;
    descent-override: 24.12%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Marcellus respaldo';
    src: local('Times New Roman'), local('Georgia'), local('serif');
    size-adjust: 114.2%;
    ascent-override: 97.41%;
    descent-override: 27.98%;
    line-gap-override: 0%;
}

:root {
    /* ===============================================================
       1 · COLOR — una escala, no una lista
       Seis nombres. Todo lo demás se deriva de ellos.
       =============================================================== */

    /* Los seis de la paleta */
    --onix:    #0B0A0A;   /* el fondo. Negro cálido, no azulado */
    --basalto: #141211;   /* la superficie que se levanta del fondo */
    --ceniza:  #201D1B;   /* la superficie elevada y los bordes */
    --laton:   #C8A24A;   /* EL metal. Uno solo, y solo para acción y precio */
    --rubi:    #8E1F2B;   /* el deseo. La acción que cuesta dinero */
    --lino:    #F2EEE7;   /* el texto. Blanco cálido, nunca #FFF */

    /* Escala de superficie: cuanto más alto el número, más cerca del ojo */
    --superficie-0: var(--onix);
    --superficie-1: var(--basalto);
    --superficie-2: var(--ceniza);
    --superficie-3: #2A2624;

    /* Escala de texto: tres pesos de voz, no diez grises */
    --texto-1: var(--lino);            /* lo que se lee */
    --texto-2: #B5ACA0;                /* lo que acompaña — 7,4:1 sobre ónix */
    --texto-3: #857C72;                /* lo que casi no importa — 4,6:1 */
    --texto-sobre-metal: var(--onix);  /* sobre latón y sobre lino */

    /* El metal, en sus tres estados */
    --metal:        var(--laton);
    --metal-vivo:   #E0BC66;           /* hover: sube, no baja */
    --metal-apagado:#8A6E2F;           /* deshabilitado y filetes */
    --metal-velo:   rgba(200, 162, 74, 0.12);
    --metal-velo-2: rgba(200, 162, 74, 0.28);

    /* El deseo, en sus estados */
    --accion:       var(--rubi);
    --accion-viva:  #A82A38;
    --accion-velo:  rgba(142, 31, 43, 0.16);

    /* Semánticos — misma temperatura que el resto, no los de Bootstrap */
    --exito:  #4E9E6A;
    --exito-velo: rgba(78, 158, 106, 0.14);
    --aviso:  #C9973F;
    --aviso-velo: rgba(201, 151, 63, 0.14);
    /* #C4525C daba 4,43:1 sobre ónix y 3,76:1 sobre ceniza: se quedaba corto en
       las tres superficies. Este pasa AA en las tres (5,69 / 5,38 / 4,82). */
    --error:  #D26A72;
    --error-velo: rgba(210, 106, 114, 0.14);

    /* Líneas */
    --linea:       rgba(242, 238, 231, 0.10);
    --linea-fuerte:rgba(242, 238, 231, 0.18);
    --linea-metal: rgba(200, 162, 74, 0.34);

    /* ===============================================================
       2 · TIPOGRAFÍA — una escala, no 41 tamaños
       Razón 1,25 (tercera mayor) con extremos fluidos.
       =============================================================== */
    --fuente-display: 'Marcellus', 'Marcellus respaldo', Georgia, serif;
    --fuente-texto:   'Inter', 'Inter respaldo', system-ui, sans-serif;

    --txt-2xs: 0.6875rem;                            /* 11px — etiquetas legales */
    --txt-xs:  0.75rem;                              /* 12px — micro-etiquetas */
    --txt-sm:  0.8125rem;                            /* 13px — apoyo */
    --txt-md:  0.9375rem;                            /* 15px — texto de interfaz */
    --txt-base:1rem;                                 /* 16px — lectura */
    --txt-lg:  clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
    --txt-xl:  clamp(1.25rem,   1.14rem + 0.55vw, 1.5rem);
    --txt-2xl: clamp(1.5rem,    1.3rem + 1vw,     2rem);
    --txt-3xl: clamp(1.875rem,  1.5rem + 1.9vw,   2.75rem);
    --txt-4xl: clamp(2.25rem,   1.6rem + 3.2vw,   3.75rem);

    --peso-normal: 400;
    --peso-medio:  500;
    --peso-fuerte: 600;
    --peso-recio:  700;

    --alto-apretado: 1.1;
    --alto-titulo:   1.2;
    --alto-normal:   1.55;
    --alto-suelto:   1.7;

    /* El gesto de la marca: capitales romanas espaciadas */
    --tracking-insignia: 0.16em;
    --tracking-titulo:   0.02em;
    --tracking-etiqueta: 0.08em;
    --tracking-normal:   0;

    /* ===============================================================
       3 · ESPACIO — base 4, la escala que no existía
       =============================================================== */
    --e-0:  0;
    --e-1:  0.25rem;   /*  4 */
    --e-2:  0.5rem;    /*  8 */
    --e-3:  0.75rem;   /* 12 */
    --e-4:  1rem;      /* 16 */
    --e-5:  1.5rem;    /* 24 */
    --e-6:  2rem;      /* 32 */
    --e-7:  3rem;      /* 48 */
    --e-8:  4rem;      /* 64 */
    --e-9:  6rem;      /* 96 */
    --e-seccion: clamp(3rem, 2rem + 5vw, 6rem);

    /* ===============================================================
       4 · FORMA — radios y sombras, en escala
       =============================================================== */
    --radio-xs: 2px;
    --radio-sm: 4px;
    --radio-md: 8px;
    --radio-lg: 14px;
    --radio-xl: 22px;
    --radio-redondo: 999px;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --sombra-2: 0 6px 18px rgba(0, 0, 0, 0.45);
    --sombra-3: 0 18px 48px rgba(0, 0, 0, 0.60);
    --sombra-metal: 0 8px 26px rgba(200, 162, 74, 0.16);

    /* El anillo de foco. Uno solo, para todo, y nunca se quita. */
    --anillo: 0 0 0 2px var(--onix), 0 0 0 4px var(--metal);
    --anillo-grueso: 0 0 0 3px var(--onix), 0 0 0 6px var(--metal);

    /* ===============================================================
       5 · MOVIMIENTO — solo transform y opacity
       =============================================================== */
    --mov-rapido:  150ms;   /* algo responde a un dedo */
    --mov-medio:   220ms;   /* algo aparece o cambia de estado */
    --mov-lento:   300ms;   /* algo entra en pantalla */
    --curva-entra: cubic-bezier(0.16, 1, 0.3, 1);   /* frena al llegar */
    --curva-sale:  cubic-bezier(0.4, 0, 1, 1);      /* se va sin ceremonia */
    --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);

    /* ===============================================================
       6 · CAPAS — una escala de verdad, no un 98 y un 99
       =============================================================== */
    --capa-base:     0;
    --capa-elevada:  10;
    --capa-pegajosa: 100;
    --capa-header:   200;
    --capa-velo:     300;
    --capa-panel:    400;
    --capa-aviso:    500;

    /* ===============================================================
       7 · MEDIDAS
       =============================================================== */
    --altura-header: 72px;
    --altura-anuncio: 38px;
    --tactil-min: 44px;        /* el mínimo que se puede tocar con un pulgar */
    --ancho-lectura: 68ch;
    --ancho-contenedor: 1280px;

    /* ===============================================================
       8 · PUENTE CON EL NOMBRE ANTIGUO
       Las 3.000 líneas de abajo siguen llamando a los nombres viejos.
       Se mantienen vivos apuntando al sistema nuevo, así el rediseño entra
       sin romper una sola regla, y las fases siguientes van migrando.
       =============================================================== */
    --color-fondo:            var(--superficie-0);
    --color-superficie:       var(--superficie-1);
    --color-superficie-var:   var(--superficie-2);
    --color-oro-premium:      var(--metal);
    --color-oro-oscuro:       var(--metal-apagado);
    --color-oro-banner:       var(--metal);
    --color-rojo-vino:        var(--accion);
    --color-rojo-hover:       var(--accion-viva);
    --color-texto-principal:  var(--texto-1);
    --color-texto-secundario: var(--texto-2);
    --color-texto-oscuro:     var(--texto-sobre-metal);
    --color-exito:            var(--exito);
    --color-error:            var(--error);
    --fuente-titulos:         var(--fuente-display);
    --fuente-cuerpo:          var(--fuente-texto);
    --borde-radio-sm:         var(--radio-sm);
    --borde-radio-md:         var(--radio-md);
    --borde-radio-lg:         var(--radio-lg);
    --borde-oro:              1px solid var(--linea-metal);
    --sombra-oro:             var(--sombra-metal);
    --sombra-premium:         var(--sombra-3);
    --transicion-suave:       color var(--mov-medio) var(--curva-suave),
                              background-color var(--mov-medio) var(--curva-suave),
                              border-color var(--mov-medio) var(--curva-suave),
                              opacity var(--mov-medio) var(--curva-suave),
                              transform var(--mov-medio) var(--curva-suave),
                              box-shadow var(--mov-medio) var(--curva-suave);

    /* Le dice al navegador que los controles nativos, las barras de scroll y
       el autorrelleno se pinten en oscuro. Sin esto, un <select> o un campo
       autorrellenado aparecen en blanco en mitad de la página. */
    color-scheme: dark;
}

/* --- RESET & ESTILOS BASE --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    font-family: var(--fuente-cuerpo);
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transicion-suave);
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Barra de Scroll Estilizada */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-fondo);
}
::-webkit-scrollbar-thumb {
    background: var(--color-superficie-var);
    border-radius: var(--borde-radio-sm);
    border: 2px solid var(--color-fondo);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-oro-premium);
}

/* --- CLASES DE UTILIDAD --- */
.contenedor {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.texto-oro {
    color: var(--color-oro-premium);
}

.texto-italica {
    font-family: var(--fuente-display);
    /* Marcellus no tiene cursiva: el navegador la inventaba inclinando las
       letras, y una romana inclinada por software se ve barata. El énfasis
       ahora es de color y de tracking, que es lo que hace una romana. */
    font-style: normal;
    color: var(--metal);
    letter-spacing: var(--tracking-titulo);
}

.gradiente-texto-oro {
    /* Se retira el degradado de tres paradas: el oro se leía distinto en cada
       letra y en móvil quedaba sucio. Un metal, plano. */
    color: var(--metal);
}

/* ===================================================================
   ICONO — el sprite propio
   =================================================================== */
.i {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -0.18em;
    /* El color nunca se escribe en el icono: lo hereda de quien lo contiene */
    color: inherit;
    pointer-events: none;
}
.i.girando { animation: girar 900ms linear infinite;  /* un giro continuo es el unico caso en que linear es correcto */ }
@keyframes girar { to { transform: rotate(360deg); } }

/* ===================================================================
   BOTONES — tres voces y un solo tamaño mínimo
   Regla nueva: ningún control por debajo de 44px de alto. Antes había 26
   controles que no llegaban, entre ellos toda la navegación.
   =================================================================== */
.btn-primario,
.btn-secundario,
.btn-fantasma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: var(--tactil-min);
    padding: var(--e-3) var(--e-5);
    font-family: var(--fuente-texto);
    font-size: var(--txt-sm);
    font-weight: var(--peso-fuerte);
    text-transform: uppercase;
    letter-spacing: var(--tracking-etiqueta);
    line-height: 1;
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background-color var(--mov-rapido) var(--curva-suave),
                border-color var(--mov-rapido) var(--curva-suave),
                color var(--mov-rapido) var(--curva-suave),
                transform var(--mov-rapido) var(--curva-suave),
                box-shadow var(--mov-rapido) var(--curva-suave);
}

/* La acción que cuesta dinero. Solo una por pantalla. */
.btn-primario {
    background-color: var(--accion);
    color: var(--lino);
}
.btn-primario:hover { background-color: var(--accion-viva); transform: translateY(-1px); }
.btn-primario:active { transform: translateY(0) scale(0.985); }

/* La alternativa. Acompaña, no compite. */
.btn-secundario {
    border-color: var(--linea-metal);
    color: var(--metal);
    background-color: transparent;
}
.btn-secundario:hover {
    background-color: var(--metal-velo);
    border-color: var(--metal);
    color: var(--metal-vivo);
    transform: translateY(-1px);
}
.btn-secundario:active { transform: translateY(0) scale(0.985); }

/* La tercera voz, que no existía: para «seguir comprando», «volver», «cancelar».
   Antes esas acciones usaban .btn-primario y pesaban lo mismo que «Pagar». */
.btn-fantasma {
    background-color: transparent;
    color: var(--texto-2);
    border-color: var(--linea);
}
.btn-fantasma:hover { color: var(--texto-1); border-color: var(--linea-fuerte); background-color: var(--superficie-1); }

.btn-primario:disabled,
.btn-secundario:disabled,
.btn-fantasma:disabled,
.btn-primario[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-bloque { width: 100%; }
.btn-pequeno { min-height: 36px; padding: var(--e-2) var(--e-3); font-size: var(--txt-xs); }

/* ===================================================================
   FOCO — uno para todo el sitio, y nunca se quita
   =================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--anillo);
    border-radius: var(--radio-sm);
}

/* ===================================================================
   DISTINTIVOS — el dato que vende
   =================================================================== */
.badge,
.distintivo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: var(--e-1) var(--e-2);
    font-size: var(--txt-2xs);
    font-weight: var(--peso-fuerte);
    text-transform: uppercase;
    letter-spacing: var(--tracking-etiqueta);
    line-height: 1.4;
    border-radius: var(--radio-xs);
    background-color: var(--accion);
    color: var(--lino);
}
.distintivo--metal  { background-color: var(--metal-velo); color: var(--metal); }
.distintivo--exito  { background-color: var(--exito-velo); color: var(--exito); }
.distintivo--aviso  { background-color: var(--aviso-velo); color: var(--aviso); }
.distintivo--sobrio { background-color: var(--superficie-2); color: var(--texto-2); }

/* ===================================================================
   LA INSIGNIA — el elemento firma
   Un filete de pelo con un rombo al centro. Abre cada sección y cierra la
   compra. Es puro CSS: no pesa un solo byte de imagen.
   =================================================================== */
.insignia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-3);
    margin: 0 auto var(--e-4);
    width: min(220px, 60%);
    color: var(--metal);
}
.insignia::before,
.insignia::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, transparent, currentColor);
}
.insignia::after { background: linear-gradient(to left, transparent, currentColor); }
.insignia-rombo {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    transform: rotate(45deg);
    border: 1px solid currentColor;
}
.insignia--solida .insignia-rombo { background-color: currentColor; }

.seccion-titulo {
    font-family: var(--fuente-display);
    font-size: var(--txt-3xl);
    font-weight: var(--peso-normal);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--tracking-insignia);
    line-height: var(--alto-titulo);
    margin-bottom: var(--e-3);
}

.seccion-subtitulo {
    text-align: center;
    color: var(--color-texto-secundario);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto 50px auto;
}

/* --- ESTRUCTURA HEADER --- */
/* LA FRANJA DE PROMESAS.
   Sustituye a la marquesina. No se mueve: en esta categoría la primera
   pregunta del comprador es «¿se nota lo que compré?», y esa respuesta no
   puede estar pasando de largo. Fondo sobrio y el metal solo en los iconos:
   la barra dorada a pantalla completa se comía la jerarquía del hero. */
.franja-promesas {
    background-color: var(--superficie-1);
    border-bottom: 1px solid var(--linea);
    color: var(--texto-2);
    min-height: var(--altura-anuncio);
    display: flex;
    align-items: center;
    position: relative;
    z-index: var(--capa-pegajosa);
}

.franja-promesas-lista {
    list-style: none;
    margin: 0 auto;
    padding: var(--e-2) var(--e-4);
    width: 100%;
    max-width: var(--ancho-contenedor);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-5);
    flex-wrap: wrap;
}

.franja-promesas-lista li {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--txt-xs);
    letter-spacing: var(--tracking-etiqueta);
    text-transform: uppercase;
    white-space: nowrap;
}

.franja-promesas-lista strong { color: var(--texto-1); font-weight: var(--peso-fuerte); }
.franja-promesas-lista .i { color: var(--metal); width: 1.05rem; height: 1.05rem; }

@media (max-width: 720px) {
    .franja-promesas-lista { gap: var(--e-3); justify-content: space-between; }
    .franja-promesas-lista li { font-size: var(--txt-2xs); letter-spacing: 0.04em; }
    /* En 390px las tres promesas no caben con el texto largo: se conserva el
       dato que decide la compra y se recorta el resto. */
    .franja-promesas-lista li:first-child span.larga { display: none; }
}

header {
    background-color: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    height: var(--altura-header);
    position: sticky;
    top: 0;
    z-index: 99;
    backdrop-filter: blur(10px);
}

.header-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    height: 50px;
    width: auto;
}

.logo-texto {
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--e-4);
    align-items: center;
}

/* Los enlaces de navegación medían 27px de alto: por debajo del mínimo táctil
   de 44px, y son el único modo de moverse por la tienda en móvil. El texto no
   crece; crece el área que se puede tocar. */
.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tactil-min);
    padding-inline: var(--e-2);
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    letter-spacing: var(--tracking-etiqueta);
    text-transform: uppercase;
    position: relative;
    color: var(--texto-1);
    transition: color var(--mov-rapido) var(--curva-suave);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: var(--e-2);
    right: var(--e-2);
    bottom: 12px;
    height: 1px;
    background-color: var(--metal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--mov-rapido) var(--curva-entra);
}

.nav-link:hover { color: var(--metal); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.header-acciones {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    font-size: 1.1rem;
    transition: var(--transicion-suave);
}

.social-icon:hover {
    color: var(--color-oro-premium);
    transform: translateY(-2px);
}

.btn-carrito-disparador {
    position: relative;
    font-size: 1.4rem;
    color: var(--color-texto-principal);
    transition: var(--transicion-suave);
}

.btn-carrito-disparador:hover {
    color: var(--color-oro-premium);
}

.carrito-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: var(--color-rojo-vino);
    color: white;
    font-size: 0.65rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.menu-hamburguesa {
    display: none;
    font-size: 1.5rem;
    color: var(--color-texto-principal);
}

/* --- HERO --- */
.hero {
    /* Antes: 85vh en todas partes. En un móvil de 844px eso son 717px de foto
       antes del primer producto: el catálogo quedaba a dos pantallas de scroll
       de la portada. Ahora la altura se acota y el catálogo asoma. */
    min-height: min(78vh, 640px);
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--superficie-0);
    overflow: hidden;
    padding-block: var(--e-7);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    z-index: 1;
}

/* Dos velos, no uno. El de abajo funde con la sección siguiente; el de la
   izquierda crea la banda oscura sobre la que se apoya el texto. Sin él, el
   titular caía sobre la piel del modelo y perdía todo el contraste. */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(to bottom, rgba(11, 10, 10, 0.30) 0%, rgba(11, 10, 10, 0.55) 55%, var(--onix) 100%),
        linear-gradient(to right, rgba(11, 10, 10, 0.92) 0%, rgba(11, 10, 10, 0.72) 42%, rgba(11, 10, 10, 0.12) 78%);
}

.hero-contenido {
    position: relative;
    z-index: 3;
    max-width: 33rem;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-4);
    padding: var(--e-1) var(--e-3);
    border: 1px solid var(--linea-metal);
    border-radius: var(--radio-redondo);
    background-color: var(--metal-velo);
    color: var(--metal);
    font-family: var(--fuente-texto);
    font-size: var(--txt-xs);
    font-weight: var(--peso-fuerte);
    text-transform: uppercase;
    letter-spacing: var(--tracking-etiqueta);
}

.hero-titulo {
    font-family: var(--fuente-display);
    font-size: var(--txt-4xl);
    font-weight: var(--peso-normal);
    line-height: var(--alto-apretado);
    margin-bottom: var(--e-4);
    letter-spacing: var(--tracking-titulo);
    text-wrap: balance;
}

.hero-descripcion {
    font-size: var(--txt-lg);
    line-height: var(--alto-normal);
    color: var(--texto-2);
    margin-bottom: var(--e-5);
    max-width: 46ch;
}

.hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
}

@media (max-width: 768px) {
    .hero { min-height: 0; padding-block: var(--e-6) var(--e-7); }
    .hero-overlay {
        /* En vertical la banda lateral no sirve: el velo va de arriba abajo */
        background: linear-gradient(to bottom, rgba(11, 10, 10, 0.42) 0%, rgba(11, 10, 10, 0.78) 46%, var(--onix) 100%);
    }
    .hero-contenido { text-align: left; }
    .hero-descripcion { font-size: var(--txt-md); }
    .hero-botones > * { flex: 1 1 100%; }
}

/* --- SECCION CATEGORIAS --- */
.seccion-categorias {
    padding: 80px 0;
    background-color: var(--color-fondo);
}

.categorias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.categoria-card {
    background-color: var(--color-superficie);
    border: 1px solid rgba(212, 175, 55, 0.08);
    border-radius: var(--borde-radio-md);
    padding: 30px 20px;
    text-align: center;
    transition: var(--transicion-suave);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.categoria-card:hover {
    border-color: var(--color-oro-premium);
    transform: translateY(-5px);
    box-shadow: var(--sombra-oro);
    background-color: var(--color-superficie-var);
}

/* Aquí había un emoji (💧, 🌿) de 2,5rem. Un emoji lo dibuja el sistema
   operativo: en Android, en iPhone y en Windows son tres ilustraciones
   distintas, y ninguna se parece al resto de la tienda. Se sustituye por el
   rombo de la insignia, que es la marca de la casa y pesa cero. */
.categoria-marca {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border: 1px solid var(--metal);
    transition: background-color var(--mov-medio) var(--curva-suave),
                transform var(--mov-medio) var(--curva-entra);
}
.categoria-card:hover .categoria-marca,
.categoria-card.activa .categoria-marca { background-color: var(--metal); transform: rotate(135deg); }

.categoria-titulo {
    font-family: var(--fuente-display);
    font-size: var(--txt-lg);
    font-weight: var(--peso-normal);
    text-transform: uppercase;
    letter-spacing: var(--tracking-etiqueta);
}

.categoria-card.activa {
    border-color: var(--color-oro-premium);
    background: linear-gradient(180deg, rgba(20, 20, 20, 1) 0%, rgba(170, 124, 17, 0.1) 100%);
    box-shadow: var(--sombra-oro);
}

.categoria-card.activa .categoria-titulo {
    color: var(--color-oro-premium);
}

/* --- SECCION PRODUCTOS --- */
.seccion-productos {
    padding: 80px 0;
    background-color: var(--color-fondo);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.productos-filtros {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.btn-filtro {
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-texto-secundario);
    transition: var(--transicion-suave);
}

.btn-filtro:hover, .btn-filtro.activo {
    border-color: var(--color-oro-premium);
    color: var(--color-oro-premium);
    background-color: rgba(212, 175, 55, 0.05);
}

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}

.producto-card {
    background-color: var(--color-superficie);
    border-radius: var(--borde-radio-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: var(--transicion-suave);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.producto-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-8px);
    box-shadow: var(--sombra-premium);
}

.producto-imagen-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background-color: #0E0E0E;
}

.producto-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--mov-lento) var(--curva-entra);
}

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

.producto-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background-color: var(--color-rojo-vino);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--borde-radio-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.producto-badge-descuento {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background-color: var(--color-oro-premium);
    color: var(--color-texto-oscuro);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--borde-radio-sm);
}

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

.producto-categoria {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-oro-premium);
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.producto-titulo {
    font-family: var(--fuente-titulos);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 12px;
    color: var(--color-texto-principal);
    min-height: 3.25rem; /* Asegura alineación en alturas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.producto-precios {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    margin-top: auto;
}

.producto-precio-actual {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-texto-principal);
}

.producto-precio-antes {
    font-size: 0.95rem;
    color: var(--color-texto-secundario);
    text-decoration: line-through;
}

.btn-agregar-carrito {
    width: 100%;
    background-color: var(--color-superficie-var);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-texto-principal);
    padding: 10px;
    border-radius: var(--borde-radio-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transicion-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-agregar-carrito:hover {
    background-color: var(--color-oro-premium);
    color: var(--color-texto-oscuro);
    border-color: var(--color-oro-premium);
    box-shadow: var(--sombra-oro);
}

/* Skeletons para carga de productos */

/* --- SECCION CONFIANZA / ATRIBUTOS --- */
.seccion-confianza {
    background-color: var(--color-superficie);
    padding: 60px 0;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.confianza-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.confianza-item {
    text-align: center;
    padding: 10px;
}

.confianza-icono {
    font-size: 2.8rem;
    color: var(--color-oro-premium);
    margin-bottom: 15px;
}

.confianza-titulo {
    font-family: var(--fuente-titulos);
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.confianza-descripcion {
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    max-width: 300px;
    margin: 0 auto;
}

/* --- SECCION CONTACTO --- */
.seccion-contacto {
    padding: 80px 0;
    background-color: var(--color-fondo);
}

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.contacto-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contacto-info-titulo {
    font-family: var(--fuente-titulos);
    font-size: 2rem;
    color: var(--color-oro-premium);
}

.contacto-datos {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacto-dato-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.contacto-dato-icono {
    font-size: 1.3rem;
    color: var(--color-oro-premium);
    margin-top: 3px;
}

.contacto-dato-texto h4 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    color: var(--color-oro-premium);
}

.contacto-dato-texto p {
    color: var(--color-texto-secundario);
    font-size: 0.95rem;
}

.contacto-acciones {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.contacto-mapa {
    position: relative;
    height: 380px;
    border-radius: var(--borde-radio-md);
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: var(--sombra-premium);
}

.contacto-mapa iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Este enlace figuraba en la auditoría como el único fallo de contraste, a
   1,00:1. Era un falso positivo del sondeo: el fondo es un DEGRADADO, y
   getComputedStyle().backgroundColor devuelve transparente para un degradado,
   así que el cálculo se llevaba el negro del contenedor de detrás. El contraste
   real era de 9,42:1 en un extremo y 6,08:1 en el otro. Se comprobó antes de
   «arreglar» nada. Lo que sí se corrige: el degradado pasa a metal plano —el
   oro no debe cambiar de tono dentro de una misma pieza— y el alto sube a 44px. */
.contacto-mapa-link-overlay {
    position: absolute;
    bottom: var(--e-3);
    right: var(--e-3);
    min-height: var(--tactil-min);
    background-color: var(--metal);
    color: var(--texto-sobre-metal);
    text-decoration: none;
    padding: var(--e-2) var(--e-4);
    border-radius: var(--radio-sm);
    font-size: var(--txt-sm);
    font-weight: var(--peso-fuerte);
    letter-spacing: var(--tracking-etiqueta);
    text-transform: uppercase;
    box-shadow: var(--sombra-2);
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    transition: background-color var(--mov-rapido) var(--curva-suave),
                transform var(--mov-rapido) var(--curva-suave);
    z-index: var(--capa-elevada);
}

.contacto-mapa-link-overlay:hover {
    background-color: var(--metal-vivo);
    transform: translateY(-1px);
}

/* --- FOOTER --- */
footer {
    background-color: #050505;
    padding: 60px 0 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 50px;
    margin-bottom: 40px;
}

.footer-col-marca h3 {
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.footer-col-marca p {
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    margin-bottom: 20px;
    max-width: 400px;
}

.footer-col-links h4, .footer-col-contacto h4 {
    font-family: var(--fuente-titulos);
    color: var(--color-oro-premium);
    font-size: 1.15rem;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.footer-links-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
}

/* Medían 17px de alto. Un enlace de pie de página también se toca con el dedo. */
.footer-links-lista a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tactil-min);
    color: var(--texto-2);
    font-size: var(--txt-md);
    transition: color var(--mov-rapido) var(--curva-suave),
                transform var(--mov-rapido) var(--curva-suave);
}

/* El desplazamiento va por transform, no por padding: mover el relleno
   recalcula la maqueta en cada hover. */
.footer-links-lista a:hover {
    color: var(--metal);
    transform: translateX(3px);
}

.aviso-18plus {
    border: 1px solid rgba(163, 29, 36, 0.3);
    background-color: rgba(163, 29, 36, 0.05);
    padding: 15px;
    border-radius: var(--borde-radio-md);
    margin-bottom: 25px;
    text-align: center;
}

.aviso-18plus p {
    font-size: 0.8rem;
    color: #FF8F94;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* --- CARRITO DRAWER (SLIDE-IN) --- */
.carrito-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transicion-suave);
}

.carrito-overlay.abierto {
    opacity: 1;
    visibility: visible;
}

.carrito-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 440px;
    height: 100vh;
    background-color: var(--color-superficie);
    z-index: 1001;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
    transform: translateX(100%);
    transition: transform var(--mov-medio) var(--curva-entra);
    display: flex;
    flex-direction: column;
}

.carrito-overlay.abierto .carrito-drawer {
    transform: translateX(0);
}

.carrito-header {
    padding: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.carrito-header h3 {
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-cerrar-carrito {
    font-size: 1.5rem;
    color: var(--color-texto-secundario);
    transition: var(--transicion-suave);
}

.btn-cerrar-carrito:hover {
    color: var(--color-oro-premium);
}

.carrito-items-contenedor {
    flex-grow: 1;
    overflow-y: auto;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Estado de Carrito Vacío */
.carrito-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 20px;
    color: var(--color-texto-secundario);
    text-align: center;
}

.carrito-vacio-icono {
    font-size: 3.5rem;
    color: var(--color-superficie-var);
}

/* Item del Carrito */
.carrito-item {
    display: flex;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 20px;
}

.carrito-item-imagen-wrap {
    width: 70px;
    height: 70px;
    border-radius: var(--borde-radio-sm);
    overflow: hidden;
    background-color: var(--color-fondo);
    flex-shrink: 0;
}

.carrito-item-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carrito-item-detalles {
    flex-grow: 1;
}

.carrito-item-titulo {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.3;
}

.carrito-item-precio {
    font-size: 0.9rem;
    color: var(--color-oro-premium);
    font-weight: 700;
}

.carrito-item-controles {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.carrito-item-cantidad-selector {
    display: flex;
    align-items: center;
    background-color: var(--color-superficie-var);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cantidad {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cantidad:hover {
    color: var(--color-oro-premium);
}

.cantidad-valor {
    width: 25px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-remover-item {
    font-size: 1rem;
    color: var(--color-texto-secundario);
    transition: var(--transicion-suave);
    margin-left: 10px;
}

.btn-remover-item:hover {
    color: var(--color-error);
}

/* Footer del Carrito */
.carrito-footer {
    padding: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #111;
}

.carrito-total-fila {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.carrito-total-fila.envio {
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
}

.carrito-total-fila.total {
    font-size: 1.3rem;
    font-weight: 700;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
    margin-top: 5px;
    color: var(--color-oro-premium);
}

.carrito-envio-progreso-wrap {
    margin-bottom: 20px;
}

.carrito-envio-progreso-texto {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    margin-bottom: 8px;
}

.carrito-envio-progreso-barra {
    height: 5px;
    background-color: var(--color-superficie-var);
    border-radius: 5px;
    overflow: hidden;
}

.carrito-envio-progreso-relleno {
    height: 100%;
    background-color: var(--metal);
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--mov-lento) var(--curva-entra);
}

.carrito-acciones-btn {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.carrito-acciones-btn .btn-primario {
    width: 100%;
}

.carrito-acciones-btn .btn-continuar-comprando {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-texto-secundario);
}

.carrito-acciones-btn .btn-continuar-comprando:hover {
    color: var(--color-oro-premium);
}

/* --- ESTRUCTURA DE CHECKOUT (DOS COLUMNAS) --- */
.seccion-checkout {
    padding: 60px 0 100px 0;
    background-color: var(--color-fondo);
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: start;
}

.checkout-caja {
    background-color: var(--color-superficie);
    border-radius: var(--borde-radio-md);
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: var(--sombra-premium);
}

.checkout-caja-titulo {
    font-family: var(--fuente-titulos);
    font-size: 1.6rem;
    margin-bottom: 30px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-oro-premium);
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-caja-titulo span {
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
}

/* Formulario */
.formulario-grupo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.formulario-grupo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.formulario-grupo.no-margin {
    margin-bottom: 0;
}

.formulario-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-texto-secundario);
}

.formulario-label span {
    color: var(--color-rojo-vino);
}

.formulario-input, .formulario-select, .formulario-textarea {
    width: 100%;
    min-height: var(--tactil-min);
    background-color: var(--superficie-2);
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    padding: var(--e-3) var(--e-4);
    color: var(--texto-1);
    font-family: var(--fuente-texto);
    font-size: var(--txt-base);   /* 16px: por debajo de 16 el iPhone hace zoom al enfocar */
    line-height: var(--alto-normal);
    transition: border-color var(--mov-rapido) var(--curva-suave),
                background-color var(--mov-rapido) var(--curva-suave);
}

.formulario-input::placeholder,
.formulario-textarea::placeholder { color: var(--texto-3); }

.formulario-input:hover, .formulario-select:hover, .formulario-textarea:hover {
    border-color: var(--linea-fuerte);
}

.formulario-input:focus, .formulario-select:focus, .formulario-textarea:focus {
    outline: none;
    border-color: var(--metal);
    background-color: var(--superficie-1);
}
.formulario-input:focus-visible,
.formulario-select:focus-visible,
.formulario-textarea:focus-visible { box-shadow: var(--anillo); }

/* El campo con error no se marca SOLO con color: lleva borde, fondo y, en el
   mensaje de abajo, icono más texto. Quien no distingue rojo de gris también
   tiene que enterarse. */
.formulario-input[aria-invalid="true"],
.formulario-select[aria-invalid="true"],
.formulario-textarea[aria-invalid="true"] {
    border-color: var(--error);
    background-color: var(--error-velo);
}

.formulario-textarea {
    resize: vertical;
    min-height: 104px;
}

/* ===================================================================
   ESTADOS DE INTERFAZ — lo que faltaba
   Antes existía un .skeleton escrito en el CSS que NUNCA se renderizaba, y no
   había ningún estado de error de catálogo: si la base no respondía, el
   comprador veía un hueco mudo en la pantalla más visitada de la tienda.
   =================================================================== */

/* --- Carga --- */
.estado-cargando {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-8) var(--e-4);
    color: var(--texto-2);
    font-size: var(--txt-md);
}
.estado-cargando .i { width: 26px; height: 26px; color: var(--metal); }

.esqueleto {
    position: relative;
    overflow: hidden;
    background-color: var(--superficie-2);
    border-radius: var(--radio-md);
}
.esqueleto::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(242, 238, 231, 0.06), transparent);
    animation: esqueleto-barrido 1.4s var(--curva-suave) infinite;
}
@keyframes esqueleto-barrido { to { transform: translateX(100%); } }
.esqueleto-linea { height: 0.9em; margin-block: var(--e-2); border-radius: var(--radio-xs); }
.esqueleto-linea.corta { width: 55%; }

/* --- Vacío y error, misma anatomía --- */
.estado-blanco {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--e-3);
    padding: var(--e-8) var(--e-4);
    max-width: 46ch;
    margin-inline: auto;
}
.estado-blanco-icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radio-redondo);
    border: 1px solid var(--linea);
    background-color: var(--superficie-1);
    color: var(--texto-3);
}
.estado-blanco-icono .i { width: 26px; height: 26px; }
.estado-blanco--error .estado-blanco-icono { border-color: var(--error); color: var(--error); background-color: var(--error-velo); }
.estado-blanco-titulo {
    font-family: var(--fuente-display);
    font-size: var(--txt-xl);
    text-transform: uppercase;
    letter-spacing: var(--tracking-etiqueta);
    color: var(--texto-1);
}
.estado-blanco-texto { color: var(--texto-2); font-size: var(--txt-md); line-height: var(--alto-normal); }

/* --- Mensaje de error de un campo --- */
.campo-error {
    display: flex;
    align-items: flex-start;
    gap: var(--e-2);
    margin-top: var(--e-2);
    color: var(--error);
    font-size: var(--txt-sm);
    line-height: var(--alto-normal);
}
.campo-error .i { margin-top: 0.15em; }

/* Resumen Checkout */
.resumen-productos-lista {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
}

.resumen-producto-item {
    display: flex;
    gap: 15px;
    align-items: center;
}

.resumen-producto-thumb-wrap {
    width: 50px;
    height: 50px;
    border-radius: var(--borde-radio-sm);
    overflow: hidden;
    background-color: var(--color-superficie-var);
    position: relative;
    flex-shrink: 0;
}

.resumen-producto-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resumen-producto-cantidad {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--color-oro-premium);
    color: var(--color-texto-oscuro);
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resumen-producto-info {
    flex-grow: 1;
}

.resumen-producto-nombre {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.resumen-producto-precio {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}

.checkout-resumen-totales {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-pagar-mp {
    width: 100%;
    background-color: #009EE3; /* Azul Mercado Pago Oficial */
    color: white;
    padding: 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    border-radius: var(--borde-radio-sm);
    transition: var(--transicion-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0, 158, 227, 0.2);
}

.btn-pagar-mp:hover:not(:disabled) {
    background-color: #0081BA;
    box-shadow: 0 4px 20px rgba(0, 158, 227, 0.4);
    transform: translateY(-2px);
}

.btn-pagar-mp:disabled {
    background-color: var(--color-superficie-var);
    color: var(--color-texto-secundario);
    box-shadow: none;
    cursor: not-allowed;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.resumen-adicional-info {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: var(--borde-radio-sm);
}

.resumen-adicional-item {
    display: flex;
    gap: 10px;
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
    align-items: center;
}

.resumen-adicional-icono {
    color: var(--color-oro-premium);
    font-size: 0.9rem;
}

/* Responsive Checkout */
.checkout-resumen-colapsable-btn {
    display: none;
    width: 100%;
    background-color: var(--color-superficie);
    padding: 15px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

/* --- GRACIAS PAGE --- */
.gracias-contenedor {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
}

.gracias-caja {
    background-color: var(--color-superficie);
    max-width: 600px;
    width: 100%;
    padding: 50px 40px;
    border-radius: var(--borde-radio-lg);
    border: 1px solid rgba(212, 175, 55, 0.15);
    text-align: center;
    box-shadow: var(--sombra-premium);
}

.gracias-icono {
    font-size: 4rem;
    margin-bottom: 25px;
    display: block;
}

.gracias-icono.exito { color: var(--color-exito); }
.gracias-icono.pendiente { color: var(--color-oro-premium); }
.gracias-icono.error { color: var(--color-error); }

.gracias-titulo {
    font-family: var(--fuente-titulos);
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.gracias-texto {
    color: var(--color-texto-secundario);
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.gracias-detalles-pedido {
    background-color: var(--color-superficie-var);
    padding: 20px;
    border-radius: var(--borde-radio-md);
    margin-bottom: 35px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.gracias-detalles-fila {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gracias-detalles-fila:last-child {
    border-bottom: none;
    padding-bottom: 0;
    font-weight: 700;
}

.gracias-acciones {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.gracias-acciones .btn-primario, .gracias-acciones .btn-secundario {
    width: 100%;
    max-width: 320px;
}

/* --- ADMIN PANEL & LOGIN --- */
.login-contenedor {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.login-caja {
    background-color: var(--color-superficie);
    max-width: 420px;
    width: 100%;
    padding: 40px;
    border-radius: var(--borde-radio-lg);
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: var(--sombra-premium);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header-logo {
    height: 60px;
    margin: 0 auto 15px auto;
}

.login-header h2 {
    font-family: var(--fuente-titulos);
    font-size: 1.8rem;
    color: var(--color-oro-premium);
}

.login-header p {
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    margin-top: 5px;
}

.admin-contenedor {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-fondo);
}

/* Sidebar Admin */
.admin-sidebar {
    width: 260px;
    background-color: var(--color-superficie);
    border-right: 1px solid rgba(212, 175, 55, 0.15);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.admin-sidebar-header {
    padding: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-sidebar-logo {
    height: 40px;
}

.admin-sidebar-titulo {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1.1rem;
}

.admin-sidebar-menu {
    list-style: none;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.admin-menu-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: var(--borde-radio-sm);
    color: var(--color-texto-secundario);
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transicion-suave);
    text-align: left;
}

.admin-menu-btn:hover, .admin-menu-btn.activo {
    background-color: var(--color-superficie-var);
    color: var(--color-oro-premium);
}

.admin-sidebar-footer {
    padding: 20px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: var(--borde-radio-sm);
    color: var(--color-error);
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-logout:hover {
    background-color: rgba(220, 53, 69, 0.08);
}

/* Cuerpo Principal Admin */
.admin-cuerpo {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.admin-header {
    height: var(--altura-header);
    background-color: var(--color-superficie);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-header-titulo {
    font-family: var(--fuente-titulos);
    font-size: 1.6rem;
    font-weight: 700;
}

.admin-contenido {
    padding: 40px;
    flex-grow: 1;
    overflow-y: auto;
}

.admin-tab-cuerpo {
    display: none;
    animation: fadeIn var(--mov-medio) var(--curva-entra);
}

.admin-tab-cuerpo.activo {
    display: block;
}

/* KPI Cards */
.admin-kpis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.admin-kpi-card {
    background-color: var(--color-superficie);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--borde-radio-md);
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-kpi-info h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--color-texto-secundario);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.admin-kpi-valor {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--fuente-titulos);
    color: var(--color-oro-premium);
}

.admin-kpi-icono {
    font-size: 2.2rem;
    color: rgba(212, 175, 55, 0.25);
}

/* Tablas Admin */
.admin-seccion-bloque {
    background-color: var(--color-superficie);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--borde-radio-md);
    padding: 30px;
    margin-bottom: 40px;
}

.admin-bloque-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.admin-bloque-cabecera h3 {
    font-family: var(--fuente-titulos);
    font-size: 1.3rem;
}

.tabla-responsiva {
    width: 100%;
    overflow-x: auto;
}

.tabla-admin {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.tabla-admin th {
    background-color: var(--color-superficie-var);
    color: var(--color-texto-secundario);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tabla-admin td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--color-texto-principal);
    vertical-align: middle;
}

.tabla-admin tr:hover td {
    background-color: rgba(255, 255, 255, 0.01);
}

/* Status Tags */
.status-badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.pendiente {
    background-color: rgba(212, 175, 55, 0.1);
    color: var(--color-oro-premium);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.status-badge.pagado {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--color-exito);
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.status-badge.preparando {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007BFF;
    border: 1px solid rgba(0, 123, 255, 0.2);
}

.status-badge.enviado {
    background-color: rgba(23, 162, 184, 0.1);
    color: #17A2B8;
    border: 1px solid rgba(23, 162, 184, 0.2);
}

.status-badge.entregado {
    background-color: rgba(108, 117, 125, 0.15);
    color: #6C757D;
    border: 1px solid rgba(108, 117, 125, 0.2);
}

/* Control Select en Tabla */
.select-estado-tabla {
    background-color: var(--color-superficie-var);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-texto-principal);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 600;
}

.select-estado-tabla:focus {
    border-color: var(--color-oro-premium);
}

.btn-accion-icono {
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    transition: var(--transicion-suave);
    padding: 4px;
    display: inline-flex;
}

.btn-accion-icono:hover {
    color: var(--color-oro-premium);
}

.btn-accion-icono.eliminar:hover {
    color: var(--color-error);
}

.btn-wpp-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--color-exito);
    border: 1px solid rgba(40, 167, 69, 0.2);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.btn-wpp-admin:hover {
    background-color: var(--color-exito);
    color: white;
}

/* Modales Admin */
.modal-admin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transicion-suave);
    padding: 20px;
}

.modal-admin-overlay.abierto {
    opacity: 1;
    visibility: visible;
}

.modal-admin-caja {
    background-color: var(--color-superficie);
    width: 100%;
    max-width: 650px;
    border-radius: var(--borde-radio-lg);
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: var(--sombra-premium);
    transform: scale(0.9);
    transition: transform var(--mov-medio) var(--curva-entra);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-admin-overlay.abierto .modal-admin-caja {
    transform: scale(1);
}

.modal-admin-cabecera {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-admin-cabecera h3 {
    font-family: var(--fuente-titulos);
    font-size: 1.35rem;
    color: var(--color-oro-premium);
}

.btn-cerrar-modal {
    font-size: 1.5rem;
    color: var(--color-texto-secundario);
}

.btn-cerrar-modal:hover {
    color: var(--color-oro-premium);
}

.modal-admin-cuerpo {
    padding: 25px;
    overflow-y: auto;
    flex-grow: 1;
}

.modal-admin-pie {
    padding: 20px 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

/* --- TOASTS NOTIFICACIONES --- */
.toast-contenedor {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background-color: var(--color-superficie);
    border-left: 4px solid var(--color-oro-premium);
    border-radius: var(--borde-radio-sm);
    padding: 15px 25px;
    color: var(--color-texto-principal);
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: var(--sombra-premium);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight var(--mov-lento) var(--curva-entra) forwards;
}

.toast.exito {
    border-left-color: var(--color-exito);
}

.toast.error {
    border-left-color: var(--color-error);
}

/* --- ANIMACIONES --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- MEDIAS QUERIES / RESPONSIVE --- */

@media (max-width: 1024px) {
    .seccion-titulo {
        font-size: 2.2rem;
    }
    
    .categorias-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .confianza-grid {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    /* --altura-header ya no se redeclara aquí: valía 80px arriba y 70px aquí,
       así que el valor efectivo dependía del orden del fichero y no del diseño.
       Ahora es 72px en todas partes, declarado una sola vez en el sistema. */

    /* Header Mobile */
    .nav-menu {
        position: fixed;
        top: calc(var(--altura-header) + var(--altura-anuncio));
        left: -100%;
        width: 100%;
        height: calc(100vh - var(--altura-header) - var(--altura-anuncio));
        background-color: var(--color-superficie);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        transition: var(--transicion-suave);
        z-index: 98;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .nav-menu.activo {
        left: 0;
    }
    
    .menu-hamburguesa {
        display: inline-flex;
    }
    
    .social-links {
        display: none; /* Ocultar en mobile para limpiar el header */
    }
    
    /* Hero Mobile */
    .hero {
        height: auto;
        min-height: 100vh;
        padding-top: 120px;
        padding-bottom: 60px;
        display: flex;
        align-items: flex-end;
    }
    
    .hero-bg {
        background-position: center top; /* Evita recortes en rostros o elementos clave arriba */
    }
    
    .hero-contenido {
        margin-left: 0;
        text-align: center;
    }
    
    .hero-titulo {
        font-size: 2.5rem;
    }
    
    .hero-botones {
        flex-direction: column;
        gap: 15px;
    }
    
    .hero-botones .btn-primario, .hero-botones .btn-secundario {
        width: 100%;
    }
    
    /* Categorías Mobile - 3 en una sola línea horizontal */
    .categorias-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .categoria-card {
        padding: 12px 8px;
        gap: 6px;
        border-radius: var(--borde-radio-sm);
    }


    .categoria-titulo {
        font-size: 0.75rem;
        letter-spacing: 0.3px;
    }

    /* Productos Grid Mobile (2 Columnas) */
    .productos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .producto-card {
        border-radius: var(--borde-radio-sm);
    }

    .producto-info {
        padding: 12px;
    }

    .producto-titulo {
        font-size: 0.95rem;
        min-height: 2.6rem;
        margin-bottom: 8px;
    }

    .producto-precios {
        margin-bottom: 12px;
        gap: 6px;
    }

    .producto-precio-actual {
        font-size: 1.05rem;
    }

    .producto-precio-antes {
        font-size: 0.8rem;
    }

    .btn-agregar-carrito {
        padding: 8px;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

    .producto-badge, .producto-badge-descuento {
        top: 10px;
        padding: 3px 6px;
        font-size: 0.6rem;
    }
    .producto-badge { left: 10px; }
    .producto-badge-descuento { right: 10px; }
    
    /* Confianza Mobile */
    .confianza-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Contacto Mobile */
    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .contacto-mapa {
        height: 300px;
    }
    
    /* Footer Mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .footer-col-marca p {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Checkout Mobile */
    .checkout-grid {
        grid-template-columns: 1fr;
    }
    
    /* Admin Mobile */
    .admin-contenedor {
        flex-direction: column;
    }
    
    .admin-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    }
    
    .admin-sidebar-menu {
        flex-direction: row;
        overflow-x: auto;
        padding: 10px 15px;
        gap: 5px;
    }
    
    .admin-menu-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    
    .admin-header {
        padding: 0 20px;
    }
    
    .admin-contenido {
        padding: 20px;
    }
    
    .admin-kpis-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .formulario-grupo-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .seccion-titulo {
        font-size: 1.8rem;
    }
    
    .producto-card {
        max-width: 100%;
        margin: 0;
    }
}

/* ============================================================
   REGLA DE DOCENA (Badge en tarjeta + drawer)
   ============================================================ */
.producto-badge-docena {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #D4AF37, #B8860B);
    color: #0A0A0A;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 9px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.producto-precio-docena-nota {
    display: block;
    font-size: 0.72rem;
    color: #D4AF37;
    margin-top: 4px;
    font-style: italic;
    letter-spacing: 0.3px;
}

.carrito-item-docena-tag {
    display: inline-block;
    font-size: 0.65rem;
    background-color: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
    padding: 2px 6px;
    border-radius: 3px;
    margin: 2px 0 4px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ============================================================
   GALERÍA DE PRODUCTO (Thumbnails)
   ============================================================ */
.producto-thumbs {
    display: flex;
    gap: 6px;
    padding: 8px 12px 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.producto-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--mov-rapido) var(--curva-suave),
                border-color var(--mov-rapido) var(--curva-suave),
                transform var(--mov-rapido) var(--curva-suave);
}

.producto-thumb:hover { opacity: 1; }

.producto-thumb.activo {
    border-color: var(--color-oro-premium);
    opacity: 1;
}

/* Refuerzo del mensaje DOCENA en el cart drawer */
.carrito-aviso-docena {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(184, 134, 11, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #D4AF37;
    padding: 10px 14px;
    margin: 8px 16px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ============================================================
   UPLOADER DE IMÁGENES EN ADMIN
   ============================================================ */
.uploader-fila {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.uploader-fila .formulario-input { flex: 1; }
.uploader-btn {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 0.8rem;
    margin: 0;
}

.galeria-admin-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(212, 175, 55, 0.2);
    border-radius: 6px;
    min-height: 64px;
}
.galeria-admin-item {
    position: relative;
    width: 60px;
    height: 60px;
}
.galeria-admin-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}
.galeria-quitar {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #A31D24;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.galeria-quitar:hover { background: #FF4560; }


/* ============================================================================
   CAPA DE ACABADO — cierre de produccion (7-ago-2026)
   Va al final a proposito: corrige por cascada lo que estaba mas arriba y
   anade los componentes nuevos (ficha de producto, paginas legales, avisos).
   ============================================================================ */

/* --- BASE ---------------------------------------------------------------- */

/* Abrir el carrito ocultaba la barra de scroll y toda la pagina saltaba 8px. */
html { scrollbar-gutter: stable; }

body.sin-scroll { overflow: hidden; }

/* El foco de teclado era invisible en TODOS los controles, incluido el boton
   de pagar: el reset global ponia outline:none y nada lo reponia. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-oro-premium);
    outline-offset: 3px;
    border-radius: 4px;
}

.saltar-al-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 4000;
    background: var(--color-oro-premium);
    color: var(--color-texto-oscuro);
    padding: 12px 20px;
    font-weight: 700;
}
.saltar-al-contenido:focus {
    left: 0;
}

/* Contraste: la tarjeta de producto se distinguia del fondo en 1,07:1, es
   decir, no se distinguia. Y el copyright quedaba en 2,53:1. */
.producto-card,
.checkout-caja,
.confianza-item { background-color: #1A1A1A; }
.producto-card { border-color: rgba(212, 175, 55, 0.14); }
.btn-filtro { border-color: rgba(212, 175, 55, 0.25); }
.footer-copyright { color: rgba(255, 255, 255, 0.62); }

/* --- CABECERA ------------------------------------------------------------ */

.logo-img {
    height: 54px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

.header-simple {
    height: 70px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    background-color: var(--color-fondo);
}
.header-simple .logo-img { height: 44px; }

/* Areas tactiles reales: la X del carrito medía 17x24 px y los +/- 25x25.
   ⚠️ La hamburguesa NO entra en esta lista: darle display:inline-flex aqui
   pisaba su display:none y aparecia tambien en escritorio, junto al menu. */
.btn-cerrar-carrito,
.btn-carrito-disparador,
.ficha-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}
.menu-hamburguesa {
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* --- HERO ---------------------------------------------------------------- */

/* El PNG original pesaba 1,9 MB para 2170 px de ancho y era el elemento LCP. */
.hero-bg {
    background-image: url('../img/hero.jpg');
    background-image: image-set(url('../img/hero.webp') type('image/webp'),
                                url('../img/hero.jpg')  type('image/jpeg'));
}


/* --- CATEGORIAS ---------------------------------------------------------- */

.categoria-card {
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
}
.categoria-conteo {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--color-texto-secundario);
    letter-spacing: 0.4px;
}
.categoria-card.activa .categoria-conteo { color: var(--color-texto-oscuro); }

/* --- TARJETA DE PRODUCTO ------------------------------------------------- */

/* Los distintivos se apilaban en absoluto y en dos productos reales el de
   "Solo por docena" quedaba tapado por el de "Destacado". Ahora fluyen. */
.producto-imagen-wrap {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    padding: 12px;
}
.producto-badge,
.producto-badge-descuento,
.producto-badge-docena {
    position: static;
    top: auto; left: auto; right: auto;
    z-index: 2;
    align-self: flex-start;
    font-size: 0.68rem;
    padding: 4px 9px;
    line-height: 1.4;
    white-space: nowrap;
}
.producto-badge-docena {
    background-color: rgba(10, 10, 10, 0.85);
    color: var(--color-oro-premium);
    border: 1px solid var(--color-oro-premium);
    border-radius: var(--borde-radio-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.producto-badge-agotado { background-color: #4A4A4A; }

.producto-imagen-principal {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.producto-galeria-contador {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    background: rgba(10, 10, 10, 0.78);
    color: var(--color-texto-principal);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.producto-ver-ficha {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%) translateY(8px);
    z-index: 3;
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid var(--color-oro-premium);
    color: var(--color-oro-premium);
    border-radius: 40px;
    padding: 9px 18px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--mov-medio) var(--curva-suave), transform var(--mov-medio) var(--curva-suave);
    min-height: 40px;
}
.producto-card:hover .producto-ver-ficha,
.producto-ver-ficha:focus-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* En tactil no hay hover: el boton se ve siempre. */
@media (hover: none) {
    .producto-ver-ficha { opacity: 1; transform: translateX(-50%); }
}

/* La descripcion de los 11 productos estaba en la base y no se mostraba nunca. */
.producto-resumen {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-texto-secundario);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.producto-precio-unidad {
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
    width: 100%;
}

.btn-agregar-carrito { min-height: 46px; }
.btn-agregar-carrito[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-agregar-carrito[disabled]:hover {
    background-color: var(--color-superficie-var);
    color: var(--color-texto-principal);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.productos-mensaje {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-texto-secundario);
    padding: 50px 20px;
}
.enlace-boton {
    color: var(--color-oro-premium);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 8px;
}

/* --- FICHA DE PRODUCTO (modal) ------------------------------------------- */

.ficha-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}
.ficha-overlay[hidden] { display: none; }

.ficha-modal {
    position: relative;
    width: 100%;
    max-width: 940px;
    background-color: #141414;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: var(--borde-radio-lg);
    box-shadow: var(--sombra-premium);
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    animation: fichaEntra var(--mov-medio) var(--curva-entra);
}
@keyframes fichaEntra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ficha-cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: var(--color-texto-principal);
    font-size: 1.1rem;
    cursor: pointer;
}
.ficha-cerrar:hover { color: var(--color-oro-premium); border-color: var(--color-oro-premium); }

.ficha-cuerpo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.ficha-galeria { padding: 26px; }
.ficha-imagen-wrap {
    aspect-ratio: 1 / 1;
    background: #0E0E0E;
    border-radius: var(--borde-radio-md);
    overflow: hidden;
}
.ficha-imagen-principal { width: 100%; height: 100%; object-fit: cover; display: block; }

.ficha-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.ficha-thumb {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: var(--borde-radio-sm);
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.65;
    transition: var(--transicion-suave);
}
.ficha-thumb:hover { opacity: 1; }
.ficha-thumb.activo { border-color: var(--color-oro-premium); opacity: 1; }

.ficha-datos { padding: 34px 30px 30px; display: flex; flex-direction: column; }
.ficha-titulo {
    font-family: var(--fuente-titulos);
    font-size: 1.9rem;
    line-height: 1.2;
    margin: 6px 0 14px;
}
.ficha-precios { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.ficha-precio { font-size: 2rem; font-weight: 700; color: var(--color-oro-premium); }
.ficha-precio-antes { font-size: 1rem; text-decoration: line-through; color: var(--color-texto-secundario); }

.ficha-descripcion {
    color: var(--color-texto-secundario);
    line-height: 1.7;
    margin-bottom: 22px;
}

.ficha-datos-lista {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 20px;
}
.ficha-dato {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.9rem;
}
.ficha-dato span { color: var(--color-texto-secundario); }
.ficha-dato strong { text-align: right; }
.ficha-dato-discreto strong { color: var(--color-oro-premium); font-style: italic; }
.ficha-disponible { color: var(--color-exito); }
.ficha-agotado { color: var(--color-error); }

.ficha-nota-discrecion {
    font-size: 0.82rem;
    color: var(--color-texto-secundario);
    background: rgba(212, 175, 55, 0.06);
    border-left: 3px solid var(--color-oro-premium);
    padding: 12px 14px;
    border-radius: 0 var(--borde-radio-sm) var(--borde-radio-sm) 0;
    margin-bottom: 22px;
    line-height: 1.55;
}
.ficha-nota-discrecion i { color: var(--color-oro-premium); margin-right: 6px; }

.ficha-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.ficha-acciones .btn-primario,
.ficha-acciones .btn-secundario { width: 100%; justify-content: center; min-height: 48px; }

/* --- CARRITO ------------------------------------------------------------- */

/* En movil el drawer medía 100vh y el boton de pagar caía DEBAJO de la barra
   del navegador: no se podia pulsar. dvh descuenta esa barra. */
.carrito-drawer {
    height: 100vh;
    height: 100dvh;
}
.carrito-footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    max-height: 62vh;
    overflow-y: auto;
}
.carrito-items-contenedor { overscroll-behavior: contain; }

.btn-cantidad {
    width: 44px;
    height: 44px;
    font-size: 0.9rem;
}
.cantidad-valor { min-width: 42px; width: auto; padding: 0 4px; }
.btn-remover-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 4px;
}

.carrito-item-precio small {
    display: block;
    color: var(--color-texto-secundario);
    font-size: 0.75rem;
    font-weight: 400;
    margin-top: 2px;
}

.carrito-acciones-btn { display: flex; flex-direction: column; gap: 10px; }
.carrito-acciones-btn .btn-primario { width: 100%; justify-content: center; min-height: 50px; }

.btn-wpp-pedido {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    background-color: transparent;
    border: 1px solid #25D366;
    color: #25D366;
    border-radius: var(--borde-radio-sm);
    font-weight: 600;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: var(--transicion-suave);
    cursor: pointer;
    margin-top: 10px;
}
.btn-wpp-pedido:hover { background-color: #25D366; color: #06210F; }

.wpp-flotante {
    position: fixed;
    right: 18px;
    bottom: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #062812;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    transition: transform var(--mov-medio) var(--curva-suave);
}
.wpp-flotante:hover { transform: scale(1.07); }
/* Con el carrito abierto estorba y tapa el total. */
body.sin-scroll .wpp-flotante { display: none; }

/* --- AVISOS -------------------------------------------------------------- */

/* Estaban abajo a la derecha, justo encima del boton "Continuar al pago", y lo
   tapaban 3,5 segundos despues de cada "agregar al carrito". */
.toast-contenedor {
    bottom: auto;
    top: calc(var(--altura-header) + 14px);
    right: 16px;
    left: 16px;
    align-items: flex-end;
    pointer-events: none;
}
.toast { pointer-events: auto; max-width: 380px; margin-left: auto; }
.toast.saliendo { animation: fadeIn var(--mov-medio) var(--curva-sale) reverse forwards; }

/* --- CHECKOUT ------------------------------------------------------------ */

.checkout-volver { margin-bottom: 22px; }
.checkout-volver a { color: var(--color-texto-secundario); font-size: 0.9rem; }
.checkout-volver a:hover { color: var(--color-oro-premium); }

.checkout-h1 {
    font-family: var(--fuente-titulos);
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    margin-bottom: 8px;
}
.checkout-intro {
    color: var(--color-texto-secundario);
    font-size: 0.92rem;
    margin-bottom: 30px;
}
.checkout-intro i { color: var(--color-oro-premium); margin-right: 6px; }

.checkout-resumen { position: sticky; top: 90px; }

.formulario-ayuda {
    display: block;
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
    margin-top: 5px;
}
.formulario-error {
    display: block;
    font-size: 0.78rem;
    color: var(--color-error);
    margin-top: 5px;
}
.formulario-error[hidden] { display: none; }
.formulario-input.con-error,
.formulario-textarea.con-error { border-color: var(--color-error); }

.resumen-producto-item { align-items: center; }
.resumen-producto-desglose {
    display: block;
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
    margin-top: 2px;
}
.resumen-producto-nombre { font-size: 0.9rem; }
/* El resumen se cortaba a los 3 articulos con una barra de scroll invisible. */
.resumen-productos-lista { max-height: 45vh; }
.resumen-productos-lista::-webkit-scrollbar { width: 8px; }
.resumen-productos-lista::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.35);
    border-radius: 4px;
}

.resumen-vacio { text-align: center; padding: 30px 10px; color: var(--color-texto-secundario); }
.resumen-vacio i { font-size: 2.2rem; color: var(--color-oro-premium); margin-bottom: 12px; display: block; }
.resumen-vacio .btn-primario { margin-top: 14px; display: inline-flex; }

.btn-pagar-mp { min-height: 54px; }

/* --- GRACIAS ------------------------------------------------------------- */

.gracias-detalles-pedido[hidden],
.gracias-resumen[hidden],
.gracias-acciones a[hidden] { display: none; }

.estado-aprobado  { color: var(--color-exito); }
.estado-fallido   { color: var(--color-error); }
.estado-pendiente { color: var(--color-oro-premium); }

.gracias-resumen {
    margin-top: 26px;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 18px;
}
.gracias-resumen-titulo {
    font-family: var(--fuente-titulos);
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: var(--color-oro-premium);
}
.gracias-resumen-fila {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.gracias-resumen-fila.envio { color: var(--color-texto-secundario); }
.gracias-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.gracias-acciones > * { width: 100%; justify-content: center; }

/* --- PAGINA LEGAL -------------------------------------------------------- */

.legal-contenedor { padding: 60px 0 80px; }
.contenedor-estrecho { max-width: 860px; }

.legal-h1 {
    font-family: var(--fuente-titulos);
    font-size: clamp(2rem, 5.5vw, 3rem);
    line-height: 1.15;
    margin-bottom: 14px;
}
.legal-intro { color: var(--color-texto-secundario); font-size: 1.02rem; line-height: 1.7; margin-bottom: 28px; }
.legal-intro a { color: var(--color-oro-premium); text-decoration: underline; }

.legal-indice {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 44px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.legal-indice a {
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 0.84rem;
    color: var(--color-texto-secundario);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}
.legal-indice a:hover { border-color: var(--color-oro-premium); color: var(--color-oro-premium); }

.legal-seccion { margin-bottom: 44px; scroll-margin-top: 100px; }
.legal-seccion h2 {
    font-family: var(--fuente-titulos);
    font-size: 1.55rem;
    color: var(--color-oro-premium);
    margin-bottom: 16px;
}
.legal-seccion h3 {
    font-family: var(--fuente-titulos);
    font-size: 1.15rem;
    margin: 22px 0 10px;
}
.legal-seccion p,
.legal-seccion li { color: var(--color-texto-secundario); line-height: 1.75; }
.legal-seccion ul { padding-left: 20px; }
.legal-seccion li { margin-bottom: 10px; }
.legal-seccion strong { color: var(--color-texto-principal); }
.legal-seccion a { color: var(--color-oro-premium); text-decoration: underline; }
.legal-nota {
    background: rgba(212, 175, 55, 0.06);
    border-left: 3px solid var(--color-oro-premium);
    padding: 14px 16px;
    margin-top: 16px;
    font-size: 0.9rem;
}
.legal-actualizado {
    color: var(--color-texto-secundario);
    font-size: 0.82rem;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- RESPONSIVE ---------------------------------------------------------- */

@media (max-width: 900px) {
    .ficha-cuerpo { grid-template-columns: 1fr; }
    .ficha-galeria { padding: 20px 20px 0; }
    .ficha-datos { padding: 22px 20px 26px; }
    .ficha-titulo { font-size: 1.5rem; }
    .ficha-precio { font-size: 1.6rem; }
    .checkout-resumen { position: static; }
}

@media (max-width: 768px) {
    /* El hero reservaba 100vh POR DEBAJO de 105px de cabecera: los botones
       quedaban fuera de pantalla en 360 y 390 px. */
    .hero {
        height: auto;
        min-height: calc(100vh - var(--altura-header) - var(--altura-anuncio));
        min-height: calc(100dvh - var(--altura-header) - var(--altura-anuncio));
        padding: 48px 0;
        align-items: center;
    }

    /* El menu se abría 35px por debajo de la cabecera y dejaba ver una franja. */
    .nav-menu {
        top: var(--altura-header);
        height: calc(100vh - var(--altura-header));
        height: calc(100dvh - var(--altura-header));
    }

    .ficha-overlay { padding: 0; align-items: stretch; }
    .ficha-modal { max-width: none; max-height: 100dvh; border-radius: 0; border: none; }
}

@media (max-width: 560px) {
    /* Deja una franja del fondo visible para poder cerrar tocando fuera. */
    .carrito-drawer { max-width: calc(100% - 52px); }
    .toast-contenedor { left: 12px; right: 12px; }
    .toast { max-width: none; }
}

@media (max-width: 480px) {
    /* Antes aquí se caía a UNA columna porque el botón «Agregar al carrito»
       partía en dos líneas. Se arregla el botón, no la rejilla: el texto se
       recorta a «Agregar» y vuelven las dos columnas. En 390px eso son cuatro
       productos a la vista en lugar de uno y medio, que en un catálogo de once
       artículos es la diferencia entre hojear y hacer scroll a ciegas. */
    .productos-grid { grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
    .solo-ancho { display: none; }
    .btn-agregar-carrito { font-size: var(--txt-2xs); padding-inline: var(--e-2); }
    .producto-titulo { min-height: 0; }
    /* Con dos columnas el resumen se corta a media palabra y no aporta nada
       que el título no diga ya. El texto completo está en la ficha. */
    .producto-resumen { display: none; }
    .categorias-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .legal-contenedor { padding: 36px 0 60px; }
}

/* --- MOVIMIENTO REDUCIDO ------------------------------------------------- */

/* No habia ni una linea de soporte en 2333 lineas, con una marquesina dorada
   girando en bucle infinito. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .producto-ver-ficha { opacity: 1; transform: translateX(-50%); }
}


/* --- AREAS TACTILES: medidas reales tomadas en un viewport de 375px -------- */
/* .btn-filtro medía 34px de alto, .producto-ver-ficha 40 y los iconos
   sociales 15x28. El minimo comodo para el pulgar son 44x44. */
.btn-filtro {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.producto-ver-ficha { min-height: 44px; }
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}
.social-links { gap: 0 !important; }

/* Etiquetas pequenas: se suben un punto para que se lean en el movil. */
.carrito-badge,
.carrito-item-docena-tag,
.producto-badge,
.producto-badge-descuento,
.producto-badge-docena { font-size: 0.72rem; }

/* --- ALTURA DEL HERO ------------------------------------------------------ */
/* `height: 85vh` sin tope: en un monitor 4K (2160 px de alto) el hero ocupaba
   1836 px y la foto, que es panoramica 3:1, se ampliaba hasta perder el
   encuadre. Con el tope la composicion se mantiene en cualquier pantalla. */
.hero { height: clamp(520px, 85vh, 780px); }

/* El logo del cliente lleva la marca completa (emblema + IMPERIO + DEL DESEO):
   a 54 px de alto el texto quedaba casi ilegible en la cabecera. */
.logo-img { height: 62px; max-width: 210px; }
@media (max-width: 768px) { .logo-img { height: 50px; max-width: 150px; } }

/* --- REJILLA DE CATEGORIAS ------------------------------------------------ */
/* Estaba fijada a 3 columnas para 3 categorias escritas a mano. Ahora las
   categorias salen de los datos (hoy son 2) y con 3 columnas fijas quedaba un
   hueco vacio a la derecha. Se centran y se adaptan a las que haya. */
.categorias-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 320px));
    justify-content: center;
}

/* --- FILTROS EN MOVIL ------------------------------------------------------ */
/* Apilados en vertical ocupaban casi media pantalla antes del primer producto.
   En fila deslizable se ven de un vistazo y el catalogo sube. */
@media (max-width: 600px) {
    .productos-filtros {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 10px;
        padding: 4px 20px 12px;
        margin-left: -20px;
        margin-right: -20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .productos-filtros::-webkit-scrollbar { display: none; }
    .btn-filtro {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

/* ===================================================================
   PIE DEL CHECKOUT — no existía
   El checkout no tenía ni <nav> ni <footer>: era la pantalla con menos
   estructura de toda la tienda, y es donde el comprador entrega sus datos.
   =================================================================== */
.checkout-pie {
    border-top: 1px solid var(--linea);
    background-color: var(--superficie-1);
    padding: var(--e-6) 0 var(--e-7);
    margin-top: var(--e-8);
}

.checkout-pie .insignia { margin-bottom: var(--e-5); }

.checkout-pie-sellos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-3) var(--e-6);
    margin-bottom: var(--e-4);
}

.checkout-pie-sellos li {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--txt-sm);
    color: var(--texto-2);
}
.checkout-pie-sellos .i { color: var(--metal); }

.checkout-pie-legal {
    text-align: center;
    font-size: var(--txt-xs);
    color: var(--texto-3);
    max-width: 52ch;
    margin-inline: auto;
    line-height: var(--alto-normal);
}
.checkout-pie-legal a {
    color: var(--texto-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.checkout-pie-legal a:hover { color: var(--metal); }

@media (max-width: 560px) {
    .checkout-pie-sellos { flex-direction: column; align-items: center; gap: var(--e-3); }
}

/* La marca «+18»: antes eran dos emoji 🔞 que cada sistema dibuja distinto. */
.aviso-18plus-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6em;
    padding: 0.1em 0.4em;
    margin-right: var(--e-2);
    border: 1px solid var(--accion);
    border-radius: var(--radio-xs);
    color: var(--accion-viva);
    font-size: 0.82em;
    font-weight: var(--peso-recio);
    letter-spacing: var(--tracking-etiqueta);
    vertical-align: 0.05em;
}

/* ===================================================================
   ÚLTIMAS ÁREAS TÁCTILES — medidas tabulando de verdad, no a ojo
   Quedaban seis anclas del índice de políticas a 40px y tres enlaces de
   texto del checkout a 15-17px. Un enlace dentro de un párrafo no puede
   crecer sin romper el interlineado: se le da altura mínima con un
   pseudoelemento que agranda el área táctil sin mover ni una letra.
   =================================================================== */
.legal-indice a { min-height: var(--tactil-min); display: inline-flex; align-items: center; }

/* Los enlaces que van SUELTOS: se agrandan. Comprobado con elementFromPoint,
   no a ojo: el enlace «Volver a la tienda» tiene una caja de 133x23 y un área
   táctil real de 45px.
   Los que van DENTRO de una frase (el de las políticas en el pie legal) NO se
   tocan: agrandarlos solaparía las líneas de arriba y de abajo, y la propia
   WCAG 2.5.8 exceptúa los enlaces en línea dentro de un bloque de texto. */
.checkout-volver a,
.resumen-adicional-info a {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.checkout-volver a::after,
.resumen-adicional-info a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--tactil-min);
    transform: translateY(-50%);
}