/* ══════════════════════════════════════════════════════
   DYK PARFUMS · Hoja de estilos
   Paleta: blanco cálido + oro como acento puntual
   (2026: se retira el negro dominante; el oro ya no domina
   combinado con oscuro — ahora es detalle sobre fondo claro).
   Nota de nombres: --negro y --marfil conservan sus nombres
   históricos por compatibilidad, pero cambiaron de rol:
   --negro es ahora el fondo (claro) y --marfil el texto
   principal (oscuro). Los usos puntuales de var(--negro)
   como texto-sobre-dorado se movieron a var(--marfil).
   ══════════════════════════════════════════════════════ */

/* Letra de respaldo con el ancho de Cormorant Garamond: mientras la fuente real baja, Georgia (14 % más ancha) hacía que los títulos
   del hero se partieran en una línea de más y, al cargar la fuente, todo el hero saltaba hacia arriba (CLS). Con size-adjust el texto
   ocupa lo mismo antes y después. */
@font-face{ font-family:'Cormorant respaldo'; src:local('Georgia'); size-adjust:88%; }
:root{
  /* Paleta "Refinado" (revision con Fable, 2026-09-17): mismo espiritu que
     antes - crema + acento + dorado - con dos correcciones reales:
     1) el texto de cuerpo ya no usa el color de acento (--marfil): ahora
        existe --tinta, una casi-negra calida, solo para leer.
     2) a pedido de Daniel el acento pasa de verde botella a burdeo/vino
        tinto - el nombre de la variable (--marfil) queda igual para no
        tener que tocar los ~30 lugares que ya la usan, pero el valor y el
        rol cambiaron: --marfil es ahora el ACENTO (cintas, insignias,
        foco), nunca texto de parrafo - para eso esta --tinta. */
  --negro:      #F7F4EE;
  --negro-2:    #F0EBE1;
  --negro-3:    #E8E1D3;
  --carbon:     #DDD4C2;
  --linea:      #E1D9CA;
  --linea-2:    #ECE6DA;

  --oro:        #C4A24A;
  --oro-claro:  #DDBE66;
  --oro-hondo:  #7D6428;
  --marfil:     #5A1A24;
  --marfil-suave: rgba(90,26,36,.09);
  --marfil-borde: rgba(90,26,36,.32);
  --tinta:      #2A2420;
  --gris:       #655B51;
  --gris-2:     #726860;
  --error:      #9C3B2E;
  --superficie-alta: #FDFBF7;

  --serif: 'Cormorant Garamond', 'Cormorant respaldo', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --grad-oro: linear-gradient(115deg,var(--oro-hondo) 0%,var(--oro) 32%,var(--oro-claro) 52%,var(--oro) 74%,var(--oro-hondo) 100%);

  --max: 1280px;
  --pad: clamp(20px, 5vw, 64px);
  --curva: cubic-bezier(.22,.61,.36,1);

  /* Profundidad (rediseño "nivel Shopify premium", 2026-10): sombras en
     capas — una de contacto corta y nítida + una ambiental larga y suave —
     en vez de una sola sombra difusa. Es lo que hace que una superficie se
     lea "apoyada" sobre el papel crema y no flotando pegada encima. */
  --sombra-1: 0 1px 2px rgba(42,36,32,.05), 0 6px 18px -10px rgba(42,36,32,.14);
  --sombra-2: 0 1px 2px rgba(42,36,32,.05), 0 14px 34px -16px rgba(42,36,32,.22);
  --sombra-3: 0 2px 4px rgba(42,36,32,.05), 0 26px 56px -24px rgba(42,36,32,.32);
  --hilo-oro: inset 0 0 0 1px rgba(125,100,40,.13);
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  /* "Escenario" de producto: las fotos del catálogo son cuadradas y con
     fondo blanco puro (verificado en las 57 del catálogo real). Con
     mix-blend-mode:multiply ese blanco desaparece y el frasco queda parado
     sobre este fondo marfil iluminado al centro, como en un estudio — todas
     las tarjetas comparten la misma luz y el mismo tono de la marca. */
  --escena:
    radial-gradient(78% 64% at 50% 40%, #FFFEFB 0%, rgba(255,254,251,0) 72%),
    linear-gradient(172deg, #F8F4EC 0%, #EFE8DB 100%);
  --estado-ok: #4F7D5C;
  /* Rediseño comercial 2026-10 */
  --burdeo-claro: #7A2733;
  --burdeo-hondo: #4A1620;
  --verde-texto: #3E6B4B;          /* verde con contraste AA sobre crema */
  --en-linea: #34B36B;             /* punto "en línea" (decorativo, no texto) */
  --alto-nav: 124px;               /* encabezado fijo: fila principal + categorías */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
/* El atributo hidden debe ganarle siempre a cualquier display de clase
   (si no, .modal{display:grid} deja el overlay tapando toda la página). */
[hidden]{ display:none !important }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  background:var(--negro); color:var(--tinta);
  font-family:var(--sans); font-weight:300; font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.bloqueado{ overflow:hidden }
img,svg{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--oro); color:var(--tinta) }
/* Antes el foco de teclado era un contorno dorado de 1px (2.4:1 de
   contraste, casi invisible) — quien navega con teclado no veía dónde
   estaba parado. 2px del acento da 11:1. */
:focus-visible{ outline:2px solid var(--marfil); outline-offset:3px; border-radius:2px }

.cont{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar{ width:9px }
::-webkit-scrollbar-track{ background:var(--negro) }
::-webkit-scrollbar-thumb{ background:var(--oro-hondo); border-radius:9px }
::-webkit-scrollbar-thumb:hover{ background:var(--oro) }

/* ── Revelado al hacer scroll ────────────────── */
.rev{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--curva) var(--d,0s), transform .9s var(--curva) var(--d,0s) }
.rev.visto{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1; transform:none; transition:none }
  html{ scroll-behavior:auto }
  .marcas__pista, .sello__ico{ animation:none !important; transition:none !important }
  /* El hero sin movimiento (ver «HERO: PUERTA DE ENTRADA»): la imagen no respira, el texto entra de una y el polvo
     dorado del modo «fotos de productos» no arranca (mismo chequeo en iniciarEscenaHero). */
  .hero__lienzo{ display:none !important }
  /* Tarjetas y ficha: sin entrada animada, sin zoom ni elevación al pasar
     el mouse — el estado final queda puesto de una. */
  .tarj{ animation:none !important; opacity:1 !important; transform:none !important }
  .tarj__media, .tarj .frasco--foto, .tarj__ver, .ficha__barra, .btn{ transition:none !important }
  .tarj:hover .tarj__media, .btn:hover{ transform:none !important }
  .tarj:hover .frasco--foto{ transform:scale(1.12) !important }
}

/* ══════════ BARRA DE ANUNCIO ══════════ */
/* Antes era una barra gradiente dorada muy saturada con texto grueso —
   Daniel la vio "fea": desentonaba con el resto del sitio (cream + verde +
   hilos finos de oro). Se cambia a ese mismo lenguaje: fondo oscuro sobrio,
   letra fina en dorado claro, un hilo de oro abajo — el mismo tratamiento
   que ya usa .marcas más abajo en la página. */
.anuncio{
  background:var(--marfil); color:var(--oro-claro); overflow:hidden; position:relative; z-index:60;
  border-bottom:1px solid rgba(184,154,91,.35);
}
.anuncio__pista{
  display:flex; gap:0; white-space:nowrap; width:max-content;
  animation:desliza 38s linear infinite;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  padding:6px 0;
}
.anuncio__pista span{ padding-inline:18px }
.anuncio__sep{ opacity:.5; font-size:.5rem; color:var(--oro) }
@keyframes desliza{ to{ transform:translateX(-50%) } }
.anuncio:hover .anuncio__pista{ animation-play-state:paused }

/* ══════════ ENCABEZADO COMERCIAL ══════════
   Rediseño 2026-10 (formato retail, pedido de Daniel): fila principal con
   logo + buscador grande + accesos, y debajo la barra de categorías. Todo
   el bloque es fijo (sticky) en escritorio y celular. En el celular la
   barra de categorías del header pasa a ser el menú ☰ y las categorías se
   muestran como pastillas fuera del header (.cats-movil).

   «El menú toma el tono de la imagen» (18-oct-2026): cuando la diapositiva activa del hero es OSCURA, el encabezado pasa a una
   versión oscura (vidrio café cálido, letras marfil, acentos dorados) con el mismo fundido de 0,6 s que el cambio de imagen, y
   vuelve a la crema cuando la imagen es clara, el hero sale de vista o el encabezado baja (.solida). Todos los colores del
   encabezado son variables --nv-* registradas con @property (valor inicial = la versión crema de siempre): cambian solo en
   .nav--hero[data-hero-tono="oscuro"] (escritorio, tono) y .nav--hero[data-hero-tono-cel="oscuro"] (≤ 860 px, tonoCel; el mismo
   corte que el hero) y se animan juntas desde .nav. app.js (sincronizarNavTono) pone la clase y los atributos; el servidor ya los
   trae en la primera diapositiva (seo.js, htmlNavTonoSSR) para que no haya destello. El menú desplegable del ☰ y las demás
   ventanas (buscador, carrito) se quedan claros: no usan las variables oscuras. */
@property --nv-fondo{ syntax:'<color>'; inherits:true; initial-value:rgba(251,248,243,.86) }
@property --nv-borde{ syntax:'<color>'; inherits:true; initial-value:rgba(125,100,40,.12) }
@property --nv-tinta{ syntax:'<color>'; inherits:true; initial-value:#2A2420 }
@property --nv-tinta-2{ syntax:'<color>'; inherits:true; initial-value:#655B51 }
@property --nv-hover-bg{ syntax:'<color>'; inherits:true; initial-value:rgba(90,26,36,.09) }
@property --nv-hover-tinta{ syntax:'<color>'; inherits:true; initial-value:#5A1A24 }
@property --nv-oro-txt{ syntax:'<color>'; inherits:true; initial-value:#7D6428 }
@property --nv-g-a{ syntax:'<color>'; inherits:true; initial-value:#7D6428 }
@property --nv-g-b{ syntax:'<color>'; inherits:true; initial-value:#C4A24A }
@property --nv-g-c{ syntax:'<color>'; inherits:true; initial-value:#DDBE66 }
@property --nv-bq-bg{ syntax:'<color>'; inherits:true; initial-value:#FFFFFF }
@property --nv-bq-borde{ syntax:'<color>'; inherits:true; initial-value:rgba(42,36,32,.16) }
@property --nv-bq-txt{ syntax:'<color>'; inherits:true; initial-value:#655B51 }
@property --nv-bq-ej{ syntax:'<color>'; inherits:true; initial-value:#726860 }
@property --nv-kbd-bg{ syntax:'<color>'; inherits:true; initial-value:#F7F4EE }
@property --nv-kbd-borde{ syntax:'<color>'; inherits:true; initial-value:#E1D9CA }
@property --nv-kbd-txt{ syntax:'<color>'; inherits:true; initial-value:#655B51 }
@property --nv-anillo{ syntax:'<color>'; inherits:true; initial-value:#FBF8F3 }
@property --nv-foco{ syntax:'<color>'; inherits:true; initial-value:#5A1A24 }
@property --nv-cats-borde{ syntax:'<color>'; inherits:true; initial-value:rgba(125,100,40,.1) }
@property --nv-cats-tinta{ syntax:'<color>'; inherits:true; initial-value:#2A2420 }
@property --nv-cats-on{ syntax:'<color>'; inherits:true; initial-value:#5A1A24 }
@property --nv-cats-oro{ syntax:'<color>'; inherits:true; initial-value:#7D6428 }
@property --nv-cats-hover{ syntax:'<color>'; inherits:true; initial-value:#5A1A24 }
@property --nv-cats-sep{ syntax:'<color>'; inherits:true; initial-value:#E1D9CA }
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--nv-fondo); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--nv-borde);
  --nv-dur:.6s;
  transition:box-shadow .4s, backdrop-filter var(--nv-dur) ease, -webkit-backdrop-filter var(--nv-dur) ease, --nv-fondo var(--nv-dur) ease, --nv-borde var(--nv-dur) ease, --nv-tinta var(--nv-dur) ease, --nv-tinta-2 var(--nv-dur) ease, --nv-hover-bg var(--nv-dur) ease, --nv-hover-tinta var(--nv-dur) ease, --nv-oro-txt var(--nv-dur) ease, --nv-g-a var(--nv-dur) ease, --nv-g-b var(--nv-dur) ease, --nv-g-c var(--nv-dur) ease, --nv-bq-bg var(--nv-dur) ease, --nv-bq-borde var(--nv-dur) ease, --nv-bq-txt var(--nv-dur) ease, --nv-bq-ej var(--nv-dur) ease, --nv-kbd-bg var(--nv-dur) ease, --nv-kbd-borde var(--nv-dur) ease, --nv-kbd-txt var(--nv-dur) ease, --nv-anillo var(--nv-dur) ease, --nv-foco var(--nv-dur) ease, --nv-cats-borde var(--nv-dur) ease, --nv-cats-tinta var(--nv-dur) ease, --nv-cats-on var(--nv-dur) ease, --nv-cats-oro var(--nv-dur) ease, --nv-cats-hover var(--nv-dur) ease, --nv-cats-sep var(--nv-dur) ease;
}
/* Al bajar: vidrio más denso + sombra en capas suave, para que el menú se
   lea como una superficie por encima del contenido y no como una línea. */
.nav.solida{
  --nv-fondo:rgba(251,248,243,.95); --nv-borde:rgba(125,100,40,.18); --nv-dur:.4s;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 34px -24px rgba(42,36,32,.42);
}
.nav__int{
  max-width:var(--max); margin-inline:auto; padding:0 var(--pad);
  height:76px; display:grid; align-items:center; gap:clamp(18px,2.6vw,36px);
  grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"marca buscar acciones";
}
.nav__int > .marca{ grid-area:marca }

/* Buscador grande: es un botón con forma de campo que abre el buscador de
   siempre (#modalBuscar). Mismo lenguaje que los buscadores de retail:
   píldora blanca, texto de ayuda y botón de lupa en el acento. */
.nav__buscar{
  grid-area:buscar; justify-self:center; width:100%; max-width:660px; height:48px;
  display:flex; align-items:center; gap:12px; padding:0 5px 0 22px; border-radius:999px;
  background:var(--nv-bq-bg); border:1px solid var(--nv-bq-borde); color:var(--nv-bq-txt); text-align:left; cursor:text;
  box-shadow:inset 0 1px 2px rgba(42,36,32,.05), 0 1px 2px rgba(42,36,32,.04);
  transition:border-color .3s var(--curva), box-shadow .3s var(--curva);
}
.nav__buscar:hover{ border-color:rgba(196,162,74,.8); box-shadow:0 0 0 4px rgba(196,162,74,.14), 0 10px 26px -18px rgba(42,36,32,.4) }
.nav__buscar:focus-visible{ outline:2px solid var(--nv-foco); outline-offset:2px }
.nav :focus-visible{ outline-color:var(--nv-foco) }
.nav__buscar-txt{ flex:1; min-width:0; font-size:.9rem; color:var(--nv-bq-txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.nav__buscar-ej{ font-size:.78rem; color:var(--nv-bq-ej); white-space:nowrap }
.nav__buscar-kbd{
  display:grid; place-items:center; width:24px; height:24px; border-radius:6px; flex:none;
  border:1px solid var(--nv-kbd-borde); background:var(--nv-kbd-bg); font:500 .74rem/1 var(--sans); color:var(--nv-kbd-txt);
}
.nav__buscar-ir{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--burdeo-claro),var(--marfil) 70%); color:#FBF6EE;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -8px rgba(90,26,36,.7);
}
.nav__buscar-ir svg{ width:18px; height:18px }

.nav__acciones{ grid-area:acciones; display:flex; align-items:center; gap:2px }
.nav__accion{
  position:relative; display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:12px;
  color:var(--nv-tinta); transition:background .25s, color .25s;
}
.nav__accion:hover{ background:var(--nv-hover-bg); color:var(--nv-hover-tinta) }
.nav__accion svg{ width:24px; height:24px; flex:none }
.nav__accion-txt{ display:flex; flex-direction:column; line-height:1.15; font-size:.82rem; font-weight:500; white-space:nowrap; text-align:left }
.nav__accion-txt small{ font-size:.66rem; font-weight:400; color:var(--nv-tinta-2); letter-spacing:.02em }
.nav__carro{ gap:15px }
.nav__carro-ico{ position:relative; display:grid }
.nav__contador{
  position:absolute; top:-6px; right:-9px; min-width:18px; height:18px; padding:0 4px;
  background:var(--marfil); color:#FBF6EE; border-radius:9px; box-shadow:0 0 0 2px var(--nv-anillo);
  font-size:.62rem; font-weight:600; display:grid; place-items:center; line-height:1;
  transform:scale(0); transition:transform .35s var(--curva);
}
.nav__contador.hay{ transform:scale(1) }
.nav__menu{ display:none; grid-area:menu; width:36px; height:36px; flex-direction:column; justify-content:center; align-items:center; gap:6px; border-radius:10px }
.nav__menu span{ display:block; width:20px; height:1.5px; background:var(--nv-tinta); transition:transform .35s, opacity .3s }
.nav__menu.abierto span:first-child{ transform:translateY(3.75px) rotate(45deg) }
.nav__menu.abierto span:last-child{ transform:translateY(-3.75px) rotate(-45deg) }

/* Estado oscuro del encabezado (ver el comentario de arriba): vidrio café cálido más denso que la crema para que el texto marfil
   cumpla AA aun sobre una página blanca; sin backdrop-filter (navegadores viejos) el fondo es casi opaco. Escritorio (≥ 861 px)
   = tono de la diapositiva; celular y tablet (≤ 860 px) = tonoCel. En el celular solo cambia la fila principal: el menú
   desplegable del ☰ (.cats) mantiene las variables claras. */
@media (min-width:861px){
  .nav--hero[data-hero-tono="oscuro"]:not(.solida){
    --nv-fondo:rgba(22,15,12,.88);
    --nv-borde:rgba(196,162,74,.22);
    --nv-tinta:#F4ECE0;
    --nv-tinta-2:rgba(244,236,224,.78);
    --nv-hover-bg:rgba(244,236,224,.1);
    --nv-hover-tinta:#E9C98B;
    --nv-oro-txt:#E0C27A;
    --nv-g-a:#C4A24A;
    --nv-g-b:#DDBE66;
    --nv-g-c:#F2DB9C;
    --nv-bq-bg:rgba(255,255,255,.08);
    --nv-bq-borde:rgba(244,236,224,.28);
    --nv-bq-txt:rgba(244,236,224,.8);
    --nv-bq-ej:rgba(244,236,224,.7);
    --nv-kbd-bg:rgba(255,255,255,.06);
    --nv-kbd-borde:rgba(244,236,224,.28);
    --nv-kbd-txt:rgba(244,236,224,.8);
    --nv-anillo:#2B211D;
    --nv-foco:#E9C98B;
    --nv-cats-borde:rgba(196,162,74,.16);
    --nv-cats-tinta:#F4ECE0;
    --nv-cats-on:#E9C98B;
    --nv-cats-oro:#E0C27A;
    --nv-cats-hover:#FFFFFF;
    --nv-cats-sep:rgba(244,236,224,.22);
    backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav--hero[data-hero-tono="oscuro"]:not(.solida){ --nv-fondo:rgba(22,15,12,.96) } }
}
@media (max-width:860px){
  .nav--hero[data-hero-tono-cel="oscuro"]:not(.solida){
    --nv-fondo:rgba(22,15,12,.88);
    --nv-borde:rgba(196,162,74,.22);
    --nv-tinta:#F4ECE0;
    --nv-tinta-2:rgba(244,236,224,.78);
    --nv-hover-bg:rgba(244,236,224,.1);
    --nv-hover-tinta:#E9C98B;
    --nv-oro-txt:#E0C27A;
    --nv-g-a:#C4A24A;
    --nv-g-b:#DDBE66;
    --nv-g-c:#F2DB9C;
    --nv-bq-bg:rgba(255,255,255,.08);
    --nv-bq-borde:rgba(244,236,224,.28);
    --nv-bq-txt:rgba(244,236,224,.8);
    --nv-bq-ej:rgba(244,236,224,.7);
    --nv-kbd-bg:rgba(255,255,255,.06);
    --nv-kbd-borde:rgba(244,236,224,.28);
    --nv-kbd-txt:rgba(244,236,224,.8);
    --nv-anillo:#2B211D;
    --nv-foco:#E9C98B;
    backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav--hero[data-hero-tono-cel="oscuro"]:not(.solida){ --nv-fondo:rgba(22,15,12,.96) } }
}
@media (prefers-reduced-motion:reduce){
  .nav{ transition:none }
}

/* Barra de categorías (= #navLinks). */
.cats{ border-top:1px solid var(--nv-cats-borde) }
.cats__int{
  max-width:var(--max); margin-inline:auto; padding:0 var(--pad); height:46px;
  display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none;
}
.cats__int::-webkit-scrollbar{ display:none }
.cats__link{
  position:relative; flex:none; display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:999px; white-space:nowrap;
  font-size:.82rem; letter-spacing:.015em; color:var(--nv-cats-tinta); transition:color .25s, background .25s;
}
.cats__link svg{ width:13px; height:13px }
.cats__link:hover{ color:var(--nv-cats-hover); background:var(--nv-hover-bg) }
.cats__link--on{ color:var(--nv-cats-on); font-weight:500 }
.cats__link--on::after{
  content:''; position:absolute; left:13px; right:13px; bottom:-6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--oro-hondo),var(--oro));
}
.cats__link--oro{ color:var(--nv-cats-oro); font-weight:500 }
.cats__link--menu{ display:none }
.cats__sep{ flex:none; width:1px; height:18px; margin:0 8px; background:var(--nv-cats-sep) }
.cats-movil{ display:none }

/* Anclas de la portada: el salto deja la sección DEBAJO del encabezado fijo. */
section[id], #coleccion{ scroll-margin-top:calc(var(--alto-nav) + 8px) }

/* Mientras se ve una ficha, el seguimiento o el resultado del pago (JS
   oculta #catalogoListado), la portada comercial se esconde: la "página"
   interna queda sola bajo el encabezado, como una página de verdad. */
body:has(#catalogoListado[hidden]) .solo-portada{ display:none !important }
body:has(#catalogoListado[hidden]) .coleccion{ padding-top:28px; border-top:0 }
/* Wordmark de texto (ver <span class="marca__texto"> en el HTML): "DYK" en
   degradado dorado + "PARFUMS" espaciado entre dos rayas finas. Ya tiene su
   propio contraste sobre el fondo claro del header y del pie, así que no
   necesita placa ni halo detrás como sí llegó a necesitar el PNG anterior. */
.marca{
  display:flex; align-items:center; gap:8px;
}
.marca--pie{ margin:0 0 6px }
.marca__texto{
  display:inline-flex; flex-direction:column; align-items:center; line-height:1.15;
  font-size:1.6rem;
}
.marca--pie .marca__texto{ font-size:2rem }
.marca__dyk{
  font-family:var(--serif); font-weight:500; font-size:1em;
  background:var(--grad-oro);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* En el encabezado el degradado dorado del logo usa las variables --nv-g-* (iguales a --grad-oro en la versión crema): así el
   fundido a la versión oscura también lo anima. El pie sigue con --grad-oro. */
.nav .marca__dyk{ background:linear-gradient(115deg,var(--nv-g-a) 0%,var(--nv-g-b) 32%,var(--nv-g-c) 52%,var(--nv-g-b) 74%,var(--nv-g-a) 100%); -webkit-background-clip:text; background-clip:text }
.nav .marca__parfums{ color:var(--nv-oro-txt) }
.marca__fila{ display:flex; align-items:center; gap:.45em; margin-top:.3em }
.marca__raya{ width:1em; height:1px; background:var(--oro) }
.marca__parfums{
  font-family:var(--sans); font-size:.34em; letter-spacing:.3em; color:var(--oro-hondo);
}
/* ══════════ HERO: PUERTA DE ENTRADA ══════════
   Rediseño 18-oct-2026 (maquetas de Daniel). El hero son 3 imágenes de ambiente que rotan solas, hechas "justificadas a
   la derecha con espacio a la izquierda": los frascos a la DERECHA y todo lo demás en la mitad izquierda, que es clara y
   está vacía. Cada imagen trae su texto como HTML real (nunca dibujado en la foto): título en dos líneas con la última
   parte en dorado, bajada, 3 chips con ícono y 2 botones (iniciarRotacionHero en app.js cambia imagen y texto juntos).
   Columna izquierda (.hero__izq), de arriba abajo: texto de la diapositiva, la tira «Perfumes del
   catálogo» (3 minitarjetas con precio; fija, no cambia entre diapositivas) y los atajos «Explora / Por familia» (una fila
   deslizable cada uno). Nada pasa del 45 % del ancho ni toca la zona de los frascos; el buscador grande se quitó (la
   cabecera ya tiene el buscador y el atajo «/»).
   Escritorio: la imagen por defecto va a la altura completa del hero, pegada a la derecha (contain), y su borde izquierdo
   se desvanece en el crema del fondo: así, en cualquier ancho, los frascos quedan a la derecha y la columna de texto
   tiene siempre el mismo espacio limpio (a 1920 px la columna se alinea con el contenedor del sitio). Entre 861 y 1100 px
   la imagen se recorta (cover) pegada a la derecha. Las imágenes que sube Daniel desde el panel (modo «imagen») siguen
   a sangre con su velo (0-70) y su alineación.
   Celular y tablet (≤ 860): imagen vertical arriba (los frascos abajo) con kicker, título, bajada, chips y los dos botones
   sobre la zona crema, sin bajar; debajo, la tira de perfumes del catálogo y los atajos en filas que se deslizan. Todo es una
   cuadrícula (los contenedores intermedios son display:contents): sin JS para medir, sin saltos.
   Con prefers-reduced-motion o Save-Data (hero--quieto desde app.js) todo queda quieto y solo se ve la primera.
   Modos del panel (contrato D, aplicarHeroFondo): hero--imagen (3 por defecto o imágenes propias), hero--video, y
   hero--productos (el hero de siempre con el marco grande de fotos de producto y el polvo dorado en Canvas). hero--centro
   = texto centrado (alineación «centro» del panel). */
/* Protección adaptable del texto: cada diapositiva trae su tono (data-tono: claro por defecto | oscuro) y su velo
   (--hero-velo-esc / --hero-velo-cel, ya resueltos por el servidor: nunca menos de lo que hace falta para AA). */
@property --hero-velo{ syntax:'<number>'; inherits:true; initial-value:.3 }
.hero{
  --hero-h:clamp(500px, 41vw, 680px);       /* escritorio: alto mínimo (a 1366 px: 560) */
  --hero-velo:var(--hero-velo-esc, .3);      /* opacidad del velo bajo el texto (0-.7): por diapositiva, desde el servidor */
  transition:--hero-velo .7s ease;
  --hero-marfil:251,243,232;
  --hero-vino:#4A141D;                       /* título */
  --hero-oro-texto:#6B561F;                  /* kicker, etiquetas: dorado oscuro, AA sobre crema */
  --hero-oro-titulo:#85652A;                 /* parte dorada del título (texto grande: AA con 3:1; da ~5:1 sobre el crema) */
  --hero-gris-texto:#3B312C;
  --hero-crema:#FBF3E6;                      /* el crema de la imagen: fondo del hero donde la imagen no llega */
  position:relative; isolation:isolate; overflow:hidden; min-height:var(--hero-h);
  display:flex; flex-direction:column; text-align:left;
  background:var(--hero-crema); border-bottom:1px solid rgba(125,100,40,.14);
}
/* El fondo repite, de arriba abajo, el color del borde izquierdo de las imágenes por defecto (casi blanco arriba, durazno
   claro al medio, más oscuro en el piso): donde la imagen no llega (pantallas anchas) el desvanecido no deja costura. */
.hero__fondo{ position:absolute; inset:0; z-index:-2; overflow:hidden;
  background:linear-gradient(180deg, rgb(254,250,246) 0%, rgb(245,232,221) 20%, rgb(249,236,226) 42%, rgb(252,239,228) 63%, rgb(236,217,200) 85%, rgb(232,213,196) 100%) }
.hero__fondo picture, .hero__img, .hero__video{ display:block; width:100%; height:100% }
.hero__img, .hero__video{
  object-fit:cover; object-position:50% 46%; transform-origin:54% 62%;
  animation:heroRespira 18s ease-in-out infinite alternate;
}
/* Las imágenes por defecto de la tienda: justificadas a la derecha, a la altura del hero, con el borde izquierdo
   desvanecido en el crema. Con 861-1100 px de ancho la foto es más ancha que el hero: se recorta pegada a la derecha. */
.hero__img[src^="/assets/img/hero/"]{
  object-fit:cover; object-position:100% 50%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18%); mask-image:linear-gradient(90deg, transparent 0, #000 18%);
}
/* Desde 1101 px la imagen mide lo que mide el hero de alto (proporción 1672×941) y se pega a la derecha: su caja ES la
   imagen, así el desvanecido del borde izquierdo (la máscara) cae sobre la imagen y no sobre el hero entero. */
/* Con 861-1100 px la foto se recorta pegada a la derecha: la columna de texto se angosta para no tocar los frascos. */
@media (min-width:1101px){
  .hero__fondo picture:has(> .hero__img[src^="/assets/img/hero/"]){ display:flex; justify-content:flex-end }
  .hero__img[src^="/assets/img/hero/"]{ width:auto; max-width:100%; height:100%; aspect-ratio:1672/941 }
}
@keyframes heroRespira{ from{ transform:scale(1) } to{ transform:scale(1.03) } }
/* Fuera de pantalla (app.js, IntersectionObserver) o con ahorro de datos: la imagen se queda quieta. */
.hero--fuera .hero__img, .hero--fuera .hero__video, .hero--quieto .hero__img, .hero--quieto .hero__video{ animation-play-state:paused }
.hero--quieto .hero__img, .hero--quieto .hero__video{ animation:none }

/* Imágenes que rotan (iniciarRotacionHero): se apilan en absoluto dentro de un contenedor de proporción fija (cero salto).
   Entra la nueva con fundido de opacidad (700 ms) por encima de la que sale, que se queda opaca debajo hasta que termina
   (así no se oscurece a la mitad). Sin «respira»: dos capas escalando se notan. */
.hero__fondo--rota picture{ position:absolute; inset:0; opacity:0; z-index:0; transition:opacity .7s ease }
.hero__fondo--rota picture.hero__slide--sale{ opacity:1; z-index:1; transition:none }
.hero__fondo--rota picture.hero__slide--on{ opacity:1; z-index:2 }
.hero__fondo--rota .hero__img{ animation:none }

/* Velo marfil solo donde va el texto (contraste AA). Su intensidad: --hero-velo. */
.hero__velo{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(var(--hero-marfil),var(--hero-velo)) 0%,
    rgba(var(--hero-marfil),var(--hero-velo)) 40%,
    rgba(var(--hero-marfil),calc(var(--hero-velo) * .85)) 50%,
    rgba(var(--hero-marfil),calc(var(--hero-velo) * .4)) 62%,
    rgba(var(--hero-marfil),0) 78%);
}
.hero__velo--osc{ opacity:0; transition:opacity .7s ease;
  background:linear-gradient(90deg,
    rgba(20,8,10,min(1,calc(var(--hero-velo) * 1.25))) 0%,
    rgba(20,8,10,min(1,calc(var(--hero-velo) * 1.25))) 56%,
    rgba(20,8,10,min(1,calc(var(--hero-velo) * .94))) 64%,
    rgba(20,8,10,calc(var(--hero-velo) * .44)) 72%,
    rgba(20,8,10,0) 86%) }
.hero__velo{ transition:opacity .7s ease }
@media (min-width:861px){
  .hero[data-tono="oscuro"] .hero__velo:not(.hero__velo--osc){ opacity:0 }
  .hero[data-tono="oscuro"] .hero__velo--osc{ opacity:1 }
}
.hero__lienzo{ display:none }

/* Contenedor del sitio y columna izquierda */
.hero__cols{
  position:static; flex:1; width:100%; max-width:var(--max); margin-inline:auto;
  padding:clamp(24px,2.8vw,44px) var(--pad) clamp(20px,2.2vw,34px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
}
.hero__izq{ width:100%; max-width:min(700px, 45vw); display:flex; flex-direction:column; align-items:flex-start }
/* Con 861-1100 px la foto se recorta (cover) y bajo el texto queda una franja de la imagen distinta de la que se analizó (ancho completo,
   a la derecha): el velo no baja de .7 para que el texto siga cumpliendo AA sobre cualquier parte (el dorado del título, sobre columnas doradas). */
@media (min-width:861px) and (max-width:1100px){
  .hero__izq{ max-width:40vw }
  .hero{ --hero-velo:max(var(--hero-velo-esc, .3), .7); --hero-oro-titulo:#7A5C22 }
  .hero__velo:not(.hero__velo--osc){ background:linear-gradient(90deg,
    rgba(var(--hero-marfil),var(--hero-velo)) 0%, rgba(var(--hero-marfil),var(--hero-velo)) 54%,
    rgba(var(--hero-marfil),calc(var(--hero-velo) * .85)) 62%, rgba(var(--hero-marfil),calc(var(--hero-velo) * .4)) 72%, rgba(var(--hero-marfil),0) 86%) }
}
.hero__arriba{ width:100% }
.hero__kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--hero-oro-texto); font-weight:500;
  margin-bottom:12px;
}
.hero__kicker::before{ content:''; width:30px; height:1px; background:linear-gradient(90deg, transparent, var(--oro)) }

/* Texto de cada diapositiva: todos en la misma celda de la cuadrícula (la columna mide lo que mide el más alto); se ve el
   que lleva --on. Fuera: se apaga rápido; dentro: entra un poco después (así no se montan dos textos). */
.hero__textos{ display:grid; width:100% }
.hero__texto{
  grid-area:1/1; min-width:0; opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.hero__texto--on{ opacity:1; visibility:visible; transition:opacity .45s ease .25s, visibility 0s linear .25s }
.hero__titulo{
  font-family:var(--serif); font-weight:500; color:var(--hero-vino);
  font-size:clamp(2.6rem,5.5vw,5.4rem); line-height:.98; letter-spacing:-.022em;
  margin-bottom:14px;
}
.hero__t-vino{ color:var(--hero-vino) }
.hero__t-oro{ color:var(--hero-oro-titulo) }
.hero__bajada{ font-family:var(--serif); font-size:clamp(1.05rem,1.45vw,1.32rem); line-height:1.38; font-weight:500; color:var(--hero-gris-texto); max-width:25em; margin:0 0 16px; text-wrap:pretty }
.hero__chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; list-style:none; margin:0 0 20px; padding:0 }
.hero__chipi{
  display:inline-flex; align-items:center; gap:8px; padding:2px 16px; font-family:var(--serif); font-size:clamp(.92rem,1.1vw,1.02rem); font-weight:500; line-height:1.2; color:#4A3B33;
}
.hero__chipi:first-child{ padding-left:0 }
.hero__chipi + .hero__chipi{ border-left:1px solid rgba(125,100,40,.4) }
.hi{ flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.hero__chipi .hi{ color:#8A6A2A }
.hero__botones{ display:flex; flex-wrap:wrap; gap:12px }
.hbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  font-family:var(--serif); font-size:clamp(1.02rem,1.3vw,1.2rem); font-weight:600; line-height:1.1; letter-spacing:.005em; white-space:nowrap; cursor:pointer;
  transition:transform .35s var(--curva), box-shadow .35s var(--curva), background-color .25s, border-color .25s, color .25s;
}
.hbtn .hi{ width:22px; height:22px }
.hbtn--vino{ background:linear-gradient(165deg,#6F2231 0%,#4D1420 100%); color:#FBF3E8; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 26px -16px rgba(74,20,29,.75) }
.hbtn--vino:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 20px 32px -16px rgba(74,20,29,.8) }
.hbtn--linea{ background:rgba(255,252,246,.78); border-color:rgba(125,100,40,.55); color:#4A141D }
.hbtn--linea:hover{ transform:translateY(-2px); background:#FFFCF6; border-color:var(--hero-vino) }
.hbtn:focus-visible{ outline:2px solid var(--hero-vino); outline-offset:3px }

/* Tira «Perfumes del catálogo»: fila horizontal de minitarjetas con precio (pintarHeroVisual). Fija: no cambia
   entre diapositivas. Sello y «Ver todo el catálogo →» en la línea de arriba. */
.hero__visual{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"sello todo" "marco marco"; align-items:center; gap:7px 12px;
  width:100%; margin-top:18px; padding:0; color:var(--tinta);
}
.hero__visual-sello{ grid-area:sello; display:flex; align-items:center; gap:7px; margin:0; font-size:.62rem; line-height:1.3; letter-spacing:.12em; text-transform:uppercase; color:var(--hero-oro-texto); font-weight:500 }
/* Sobre una imagen subida con uso «hero» (modo «fotos de productos») no es una foto de producto: sin sello (app.js). */
.hero__visual--sin-sello .hero__visual-sello{ visibility:hidden }
.hero__visual-sello svg{ width:14px; height:14px; flex:none }
.hero__visual-pie{ display:contents }
.hero__visual-puntos{ display:none }
.hero__visual-todo{ grid-area:todo; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--marfil); font-weight:500; white-space:nowrap }
.hero__visual-todo:hover{ text-decoration:underline; text-underline-offset:3px }
.hero__visual-marco{
  grid-area:marco; position:relative; display:flex; flex-direction:row; gap:10px; min-height:67px; overflow-x:auto;   /* 67 = una minitarjeta (62) + su aire: sin salto al llegar el catálogo */
 
  scroll-snap-type:x proximity; scrollbar-width:none; overscroll-behavior-x:contain; padding:1px 1px 4px; margin:-1px;
}
.hero__visual-marco::-webkit-scrollbar{ display:none }
.hero__foto{
  display:flex; flex:0 0 calc((100% - 20px) / 3); min-width:176px; align-items:center; gap:10px; padding:5px 10px 5px 5px; scroll-snap-align:start;
  border:1px solid rgba(125,100,40,.22); border-radius:14px; background:rgba(253,251,247,.9); color:inherit; box-shadow:var(--sombra-1);
  transition:background .25s, border-color .25s;
}
.hero__foto:hover, .hero__foto:focus-visible{ background:#FFFFFF; border-color:rgba(90,26,36,.4) }
.hero__foto:focus-visible{ outline:2px solid var(--marfil); outline-offset:-2px }
.hero__foto-vis{ flex:none; width:50px; height:50px; border-radius:10px; overflow:hidden; background:#FFFFFF; box-shadow:var(--hilo-oro) }
.hero__foto-img{ display:block; width:100%; height:100%; object-fit:cover }
.hero__foto-txt{ min-width:0; display:flex; flex-direction:column; line-height:1.15 }
.hero__foto-marca{ font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hero__foto-nom{ font-family:var(--serif); font-size:.98rem; font-weight:600; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:1px 0 2px }
.hero__foto-precio{ font-size:.76rem; font-weight:500; color:var(--marfil); font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1 }
.hero__foto-precio .precio-antes{ margin-right:6px; font-size:.86em }
/* Espacio reservado mientras llega el catálogo: una fila tenue, sin brillo. */
.hero__visual--cargando .hero__visual-marco{ background:linear-gradient(90deg, rgba(42,36,32,.045), rgba(42,36,32,.045)) 0 0/100% 62px no-repeat; border-radius:12px }

/* Atajos: texto fino con puntos entre medio (índice de revista). Enlaces reales a las categorías; botones [data-fam]. */
.hero__explora{ display:flex; flex-direction:column; gap:2px; width:100%; margin-top:8px }
.hero__explora-fila{ display:flex; flex-wrap:nowrap; align-items:center; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; gap:2px 0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent) }
.hero__explora-fila::-webkit-scrollbar{ display:none }
.hero__explora-et{ flex:none; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--hero-oro-texto); font-weight:500; margin-right:9px; white-space:nowrap }
.hero__explora-fila--fam{ min-height:26px }   /* su espacio desde el inicio: las familias llegan con el catálogo (sin salto) */
.hero__chip{
  position:relative; flex:none; padding:4px 9px; border-radius:999px; font-size:.8rem; letter-spacing:.01em; color:var(--tinta);
  line-height:1.2; white-space:nowrap; transition:color .25s, background .25s;
}
.hero__chip + .hero__chip::before{ content:'·'; position:absolute; left:-3px; top:50%; transform:translateY(-55%); color:rgba(125,100,40,.6); pointer-events:none }
.hero__chip--inicio::before{ display:none }
.hero__chip:hover, .hero__chip:focus-visible{ color:var(--marfil); background:rgba(90,26,36,.07) }
.hero__chip:focus-visible{ outline:2px solid var(--marfil); outline-offset:1px }

/* Controles de la rotación: puntos (botones de 28 px de área táctil con un punto de 10 px), flechas solo en escritorio y pausa. */
.hero__rot{
  position:absolute; z-index:3; right:clamp(16px,2.4vw,40px); bottom:16px;
  display:flex; align-items:center; gap:2px; padding:3px 6px; border-radius:999px;
  background:rgba(var(--hero-marfil),.88); box-shadow:0 1px 0 rgba(125,100,40,.18), 0 6px 18px -8px rgba(45,35,20,.35);
}
.hero__rot-puntos{ display:flex; align-items:center }
.hero__rot button{ position:relative; display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; background:none; color:var(--hero-oro-texto); cursor:pointer; border-radius:50% }
.hero__rot button svg{ width:16px; height:16px }
.hero__rot-punto::before{ content:''; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--hero-oro-texto); background:transparent; transition:background-color .25s ease, transform .25s ease }
.hero__rot-punto[aria-current="true"]::before{ background:var(--hero-oro-texto); transform:scale(1.15) }
.hero__rot button:hover{ background:rgba(125,100,40,.12) }
.hero__rot button:focus-visible{ outline:2px solid var(--hero-oro-texto); outline-offset:1px }
.hero__rot-pausa--on{ background:rgba(125,100,40,.18) }
/* Con muchas imágenes (más de 6): «3 / 15» y una barra fina de avance en vez de un punto por imagen. */
.hero__rot--muchas{ gap:6px; padding:3px 8px }
.hero__rot-cuenta{ min-width:3.6em; text-align:center; font:500 .74rem var(--sans); letter-spacing:.04em; color:var(--hero-oro-texto); font-variant-numeric:tabular-nums }
.hero__rot-barra{ display:block; width:64px; height:3px; border-radius:2px; background:rgba(125,100,40,.28); overflow:hidden }
.hero__rot-barra i{ display:block; height:100%; width:0; border-radius:2px; background:var(--hero-oro-texto); transition:width .5s ease }

/* Entrada escalonada del texto (una sola vez, al cargar). */
@keyframes heroEntra{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes heroFoto{ from{ opacity:0; transform:translateX(6px) } to{ opacity:1; transform:none } }
.hero__kicker, .hero__visual, .hero__explora{ animation:heroEntra .85s var(--curva) both }
.hero__kicker{ animation-delay:.04s }
.hero__visual{ animation-delay:.32s }
.hero__explora{ animation-delay:.42s }

/* Texto centrado (alineación «centro» del panel, con imagen propia). */
.hero--centro .hero__cols{ align-items:center; text-align:center }
.hero--centro .hero__izq{ max-width:min(760px, 70vw); align-items:center }
.hero--centro .hero__bajada{ margin-inline:auto }
.hero--centro .hero__chips, .hero--centro .hero__botones, .hero--centro .hero__explora-fila{ justify-content:center }
.hero--centro .hero__velo{
  background:radial-gradient(60% 75% at 50% 48%, rgba(var(--hero-marfil),var(--hero-velo)) 0%, rgba(var(--hero-marfil),calc(var(--hero-velo) * .7)) 55%, rgba(var(--hero-marfil),0) 100%);
}

/* ── Diapositiva OSCURA: texto marfil / oro claro, botón primario dorado y secundario en contorno marfil. Cada texto lleva su
   propio tono (data-tono en escritorio, data-tono-cel en celular y tablet), así al cambiar de diapositiva el texto que sale
   conserva sus colores mientras se apaga. Una sombra muy sutil asienta las letras sobre la foto. ── */
@media (min-width:861px){
  .hero__texto[data-tono="oscuro"]{ text-shadow:0 1px 12px rgba(0,0,0,.35) }
  .hero__texto[data-tono="oscuro"] .hero__titulo, .hero__texto[data-tono="oscuro"] .hero__t-vino{ color:#FBF6EE }
  .hero__texto[data-tono="oscuro"] .hero__t-oro{ color:#E9C98B }
  .hero__texto[data-tono="oscuro"] .hero__bajada{ color:rgba(251,246,238,.92) }
  .hero__texto[data-tono="oscuro"] .hero__chipi{ color:#F3ECE1 }
  .hero__texto[data-tono="oscuro"] .hero__chipi + .hero__chipi{ border-left-color:rgba(233,201,139,.6) }
  .hero__texto[data-tono="oscuro"] .hero__chipi .hi{ color:#E9C98B }
  /* Los chips van en una píldora de vidrio vino (nunca sueltos sobre el ruido de la foto) */
  .hero__texto[data-tono="oscuro"] .hero__chips{ width:fit-content; max-width:100%; padding:6px 10px; border-radius:999px; background:rgba(20,8,10,.4);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-shadow:none }
  .hero__texto[data-tono="oscuro"] .hbtn{ text-shadow:none }
  .hero__texto[data-tono="oscuro"] .hbtn--vino{ background:linear-gradient(180deg,#DCBF6E 0%,#C4A24A 55%,#B28F3E 100%); color:#2A2420; box-shadow:inset 0 1px 0 rgba(255,250,232,.55), 0 14px 26px -16px rgba(0,0,0,.6) }
  .hero__texto[data-tono="oscuro"] .hbtn--linea{ background:rgba(20,8,10,.28); border-color:rgba(251,246,238,.75); color:#FBF6EE }
  .hero__texto[data-tono="oscuro"] .hbtn--linea:hover{ background:rgba(20,8,10,.5); border-color:#FBF6EE }
  .hero__texto[data-tono="oscuro"] .hbtn:focus-visible{ outline-color:#FBF6EE }
}
/* La tira «Perfumes del catálogo» y los atajos van sobre una base de vidrio (nunca sobre el ruido de la foto): marfil al 72 %
   sobre fondo claro, vino al 55 % sobre fondo oscuro. Solo en escritorio: en el celular quedan sobre la crema de la página.
   La base es un pseudo-elemento: no cambia el alto del hero. */
@media (min-width:861px){
  .hero__visual, .hero__explora{ position:relative; isolation:isolate }
  .hero__visual::before, .hero__explora::before{
    content:''; position:absolute; inset:-8px -10px; z-index:-1; border-radius:16px; pointer-events:none;
    background:rgba(251,246,238,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background-color .7s ease;
  }
  .hero__explora::before{ inset:-6px -10px }
  .hero[data-tono="oscuro"] .hero__visual::before, .hero[data-tono="oscuro"] .hero__explora::before{ background:rgba(48,12,20,.55) }
  .hero[data-tono="oscuro"] .hero__visual-sello, .hero[data-tono="oscuro"] .hero__explora-et{ color:#E9C98B }
  .hero[data-tono="oscuro"] .hero__visual-todo{ color:#FBF6EE }
  .hero[data-tono="oscuro"] .hero__chip{ color:#F3ECE1 }
  .hero[data-tono="oscuro"] .hero__chip:hover, .hero[data-tono="oscuro"] .hero__chip:focus-visible{ color:#FFFFFF; background:rgba(251,246,238,.14) }
  .hero[data-tono="oscuro"] .hero__chip + .hero__chip::before{ color:rgba(233,201,139,.7) }
  .hero[data-tono="oscuro"] .hero__rot{ background:rgba(48,12,20,.6) }
  .hero[data-tono="oscuro"] .hero__rot button, .hero[data-tono="oscuro"] .hero__rot-cuenta{ color:#F3ECE1 }
  .hero[data-tono="oscuro"] .hero__rot-punto::before{ border-color:#F3ECE1 }
  .hero[data-tono="oscuro"] .hero__rot-punto[aria-current="true"]::before{ background:#E9C98B; border-color:#E9C98B }
  .hero[data-tono="oscuro"] .hero__rot-barra{ background:rgba(251,246,238,.28) }
  .hero[data-tono="oscuro"] .hero__rot-barra i{ background:#E9C98B }
}
.hero__visual-sello, .hero__explora-et, .hero__visual-todo, .hero__chip{ transition:color .7s ease, background .25s }

/* ── Modo «fotos de productos» (panel): el hero de siempre, sobre crema, con el marco grande de fotos reales ──
   Acá app.js (aplicarHeroFondo) mueve #heroVisual y #heroExplora dentro de .hero__cols y la tira vuelve a ser el marco grande. */
.hero--productos{ min-height:0; background:var(--negro) }
.hero--productos .hero__fondo, .hero--productos .hero__velo{ display:none }
.hero--productos .hero__lienzo{ display:block; position:absolute; inset:0; z-index:-1; pointer-events:none }
.hero--productos .hero__visual{
  position:relative; width:auto; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; animation:none; display:flex; flex-direction:column;
}
.hero--productos .hero__visual-sello{
  position:absolute; top:16px; left:16px; z-index:3; margin:0; padding:6px 13px; border-radius:999px;
  background:rgba(15,11,7,.55); color:#E6DCC6; border:1px solid rgba(184,154,91,.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero--productos .hero__visual-marco{
  display:block; min-height:0; aspect-ratio:4/5; width:100%; overflow:hidden; border-radius:var(--r-l); margin:0; padding:0;
  background:var(--negro-2); box-shadow:var(--sombra-3);
}
.hero--productos .hero__visual-marco::after{ content:''; position:absolute; inset:14px; z-index:2; pointer-events:none; border:1px solid rgba(221,190,102,.45) }
.hero--productos .hero__visual--cargando .hero__visual-marco{ background:linear-gradient(170deg, var(--negro-2), var(--negro-3)) }
.hero__diapo{
  position:absolute; inset:0; display:block; width:100%; height:100%; cursor:pointer;
  opacity:0; transform:scale(1.05); transition:opacity 1.1s var(--curva), transform 6s linear;
  pointer-events:none;   /* solo la visible recibe el clic (están apiladas) */
}
.hero__diapo--on{ opacity:1; transform:scale(1.12); pointer-events:auto }
.hero__diapo-img{ display:block; width:100%; height:100%; object-fit:cover }
.hero__diapo:focus-visible{ outline:2px solid #F6F0E4; outline-offset:-10px }
/* Velo burdeo (el acento del sitio) suave y difuminado bajo el texto de la foto. */
.hero__diapo-velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(90,26,36,.46) 0%, rgba(90,26,36,.3) 30%, rgba(90,26,36,0) 66%);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(0deg, #000 0%, #000 30%, transparent 66%); mask-image:linear-gradient(0deg, #000 0%, #000 30%, transparent 66%);
}
.hero__diapo-info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 32px 30px; pointer-events:none; text-shadow:0 1px 14px rgba(40,10,16,.55), 0 0 2px rgba(40,10,16,.35) }
.hero__diapo-marca{ display:block; font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:#CDB88B; margin-bottom:4px }
.hero__diapo-nom{ font-family:var(--serif); font-size:1.5rem; font-weight:400; color:#F6F0E4; line-height:1.1; display:block }
.hero__diapo-notas{ display:block; font-size:.72rem; color:#CDBFA3; margin-top:5px; letter-spacing:.01em }
.hero__diapo-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px; text-shadow:none;
  font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:#F6F0E4;
  padding:7px 14px; border-radius:999px; border:1px solid rgba(230,220,198,.35);
  background:rgba(90,26,36,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero--productos .hero__visual-pie{ display:flex; border:0; margin-top:14px; padding:0; justify-content:center }
.hero--productos .hero__visual-todo{ display:none }
.hero--productos .hero__visual-puntos{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:280px }
.hero__visual-punto{ width:6px; height:6px; border-radius:50%; background:var(--carbon); transition:background .3s, transform .3s }
.hero__visual-punto:hover{ background:var(--oro-hondo) }
.hero__visual-punto--on{ background:var(--oro-hondo); transform:scale(1.3) }
.hero__visual-punto:focus-visible{ outline:2px solid var(--marfil); outline-offset:3px }
.hero--productos .hero__visual-punto{ width:7px; height:7px; background:var(--linea-2); border:1px solid var(--linea) }
.hero--productos .hero__visual-punto--on{ background:var(--oro); transform:scale(1.25) }
.hero--productos .hero__visual[hidden]{ display:none }
.hero--productos .hero__rot{ display:none }
@media (min-width:861px){
  /* Dos columnas: el texto y los atajos a la izquierda; el marco grande a la derecha, a toda la altura. */
  .hero--productos .hero__cols{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"arr vis" "exp vis";
    align-items:start; align-content:center; column-gap:clamp(36px,5vw,72px); row-gap:0; max-width:1180px;
    padding-top:clamp(28px,4vh,48px); padding-bottom:clamp(28px,4vh,48px);
  }
  .hero--productos .hero__izq{ display:contents }
  .hero--productos .hero__arriba{ grid-area:arr }
  .hero--productos .hero__explora{ grid-area:exp }
  .hero--productos .hero__visual{ grid-area:vis; align-self:stretch }
  .hero--productos .hero__visual-marco{ aspect-ratio:auto; flex:1; min-height:clamp(400px,52vh,500px) }
  .hero--productos .hero__visual-marco::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, var(--negro) 0%, transparent 14%) }
  .hero--productos:has(.hero__visual[hidden]) .hero__cols{ display:flex; align-items:center; text-align:center }
  .hero--productos:has(.hero__visual[hidden]) .hero__izq{ display:flex; align-items:center }
  .hero--productos:has(.hero__visual[hidden]) .hero__chips, .hero--productos:has(.hero__visual[hidden]) .hero__botones, .hero--productos:has(.hero__visual[hidden]) .hero__explora-fila{ justify-content:center }
}

/* ── Celular y tablet (≤860): imagen vertical con el texto sobre la zona crema (arriba) y los frascos abajo; debajo,
   la tira de perfumes del catálogo y los atajos. Todo en una cuadrícula de una columna: la imagen y el texto comparten la celda 1. ── */
@media (max-width:860px){
  .hero{ --hero-velo:var(--hero-velo-cel, .3); min-height:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; background:var(--hero-crema) }
  .hero[data-tono-cel="oscuro"] .hero__velo:not(.hero__velo--osc){ opacity:0 }
  .hero[data-tono-cel="oscuro"] .hero__velo--osc{ opacity:1 }
  .hero .hero__velo--osc{ position:static; grid-area:1/1; z-index:-1; align-self:stretch; background:linear-gradient(180deg, rgba(20,8,10,min(1,calc(var(--hero-velo) * 1.25))) 0%, rgba(20,8,10,calc(var(--hero-velo) * .9)) 42%, rgba(20,8,10,calc(var(--hero-velo) * .3)) 62%, rgba(20,8,10,0) 74%) }
  .hero__fondo picture{ background:none !important }
  .hero__texto[data-tono-cel="oscuro"]{ text-shadow:0 1px 12px rgba(0,0,0,.35) }
  .hero__texto[data-tono-cel="oscuro"] .hero__titulo, .hero__texto[data-tono-cel="oscuro"] .hero__t-vino{ color:#FBF6EE }
  .hero__texto[data-tono-cel="oscuro"] .hero__t-oro{ color:#E9C98B }
  .hero__texto[data-tono-cel="oscuro"] .hero__bajada{ color:rgba(251,246,238,.92) }
  .hero__texto[data-tono-cel="oscuro"] .hero__chipi{ color:#F3ECE1 }
  .hero__texto[data-tono-cel="oscuro"] .hero__chipi + .hero__chipi{ border-left-color:rgba(233,201,139,.6) }
  .hero__texto[data-tono-cel="oscuro"] .hero__chipi .hi{ color:#E9C98B }
  .hero__texto[data-tono-cel="oscuro"] .hbtn{ text-shadow:none }
  .hero__texto[data-tono-cel="oscuro"] .hbtn--vino{ background:linear-gradient(180deg,#DCBF6E 0%,#C4A24A 55%,#B28F3E 100%); color:#2A2420 }
  .hero__texto[data-tono-cel="oscuro"] .hbtn--linea{ background:rgba(20,8,10,.28); border-color:rgba(251,246,238,.75); color:#FBF6EE }
  .hero[data-tono-cel="oscuro"] .hero__rot{ background:rgba(48,12,20,.6) }
  .hero[data-tono-cel="oscuro"] .hero__rot button{ color:#F3ECE1 }
  .hero[data-tono-cel="oscuro"] .hero__rot-punto::before{ border-color:#F3ECE1 }
  .hero[data-tono-cel="oscuro"] .hero__rot-punto[aria-current="true"]::before{ background:#E9C98B; border-color:#E9C98B }
  .hero__fondo{ position:relative; grid-area:1/1; z-index:-2; align-self:stretch; min-height:0; contain:size }
  .hero__velo{ position:static; grid-area:1/1; z-index:-1; align-self:stretch;
    background:linear-gradient(180deg,
      rgba(var(--hero-marfil),var(--hero-velo)) 0%,
      rgba(var(--hero-marfil),calc(var(--hero-velo) * .9)) 42%,
      rgba(var(--hero-marfil),calc(var(--hero-velo) * .3)) 62%,
      rgba(var(--hero-marfil),0) 74%) }
  .hero--centro .hero__velo{ background:linear-gradient(180deg, rgba(var(--hero-marfil),var(--hero-velo)) 0%, rgba(var(--hero-marfil),calc(var(--hero-velo) * .35)) 56%, rgba(var(--hero-marfil),0) 72%) }
  .hero__lienzo{ display:none }
  .hero__fondo picture, .hero__fondo .hero__img{ height:100% }
  .hero__img, .hero__video, .hero__img[src^="/assets/img/hero/"]{ object-fit:cover; object-position:50% 100%; -webkit-mask-image:none; mask-image:none }
  .hero__cols, .hero__izq{ display:contents }
  /* «La imagen lo es todo»: la celda mide lo que mide el texto + 56vw (el alto de una foto panorámica de ~2,7:1 pegada abajo,
     con su borde superior desvanecido bajo el texto): título, botones, foto completa y contador caben juntos. Antes la
     celda era un 150vw fijo y, con las fotos panorámicas que sube Daniel, quedaba un hueco crema de ~160 px entre los
     botones y la foto, que además la barra fija del carrito cortaba. */
  .hero__arriba{ grid-area:1/1; position:relative; z-index:1; padding:18px var(--pad) 56vw; max-width:none; min-height:0 }
  /* Una imagen SIN versión de celular propia (las que sube Daniel sin vertical) se recorta a la MITAD DERECHA, donde están
     los perfumes: se muestra al 182 % del ancho, pegada abajo, con el punto focal --fx (0 a 1, por defecto .88 = derecha)
     a la vista y su borde superior desvanecido en el crema del fondo, que es donde va el texto. La vista previa del panel
     usa EXACTAMENTE esta misma regla. Las imágenes con versión de celular (las por defecto) se usan tal cual. */
  .hero__img.hero__img--sin-cel{
    position:absolute; bottom:0; right:auto; left:calc(-1 * clamp(0px, calc(var(--fx, .88) * 182vw - 50vw), 82vw));
    width:182vw; max-width:none; height:auto; object-fit:fill;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 26%); mask-image:linear-gradient(180deg, transparent 0, #000 26%);
  }
  .hero__kicker{ margin-bottom:8px; font-size:.58rem; letter-spacing:.28em }
  .hero__titulo{ font-size:clamp(2.2rem,9.6vw,3.1rem); margin-bottom:10px }
  .hero__bajada{ font-size:clamp(1rem,4.2vw,1.2rem); line-height:1.32; max-width:none; margin-bottom:12px }
  .hero__chips{ margin-bottom:14px; gap:4px 0 }
  .hero__chipi{ padding:2px 10px; font-size:.86rem; gap:6px }
  .hero__chipi .hi{ width:17px; height:17px }
  .hero__botones{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .hbtn{ padding:13px 12px; gap:8px; font-size:clamp(.92rem,3.9vw,1.1rem) }
  .hbtn .hi{ width:19px; height:19px }
  .hero__visual{ grid-area:2/1; margin:0; padding:14px var(--pad) 0; width:auto }
  .hero__visual-marco{ margin-inline:calc(var(--pad) * -1); padding:1px var(--pad) 4px; scroll-padding-inline:var(--pad) }
  .hero__foto{ flex:0 0 auto; width:min(62vw, 232px); min-width:0 }
  .hero__explora{ grid-area:3/1; margin:8px 0 0; padding:0 0 12px; width:auto }
  .hero__explora-fila{ padding:0 var(--pad); margin-inline:0; }
  .hero__chip{ padding:6px 12px; border:1px solid var(--carbon); background:var(--superficie-alta); font-size:.8rem; margin-right:6px }
  .hero__chip + .hero__chip::before{ display:none }
  .hero__explora-et{ margin-right:6px }
  .hero__rot{ position:relative; grid-area:1/1; align-self:end; justify-self:center; right:auto; bottom:auto; margin-bottom:12px }
  .hero__rot .hero__rot-flecha{ display:none }
  .hero--productos{ display:flex }
  .hero--productos .hero__cols{ display:flex; flex-direction:column; align-items:stretch; padding:22px var(--pad) 18px }
  .hero--productos .hero__izq{ display:flex; flex-direction:column; align-items:stretch; max-width:none }
  .hero--productos .hero__arriba{ padding:0 }
  .hero--productos .hero__visual{ width:100%; max-width:480px; margin:16px auto 0; padding:0 }
  .hero--productos .hero__visual-marco{ aspect-ratio:1/1; min-height:0; overflow:hidden; margin:0; padding:0 }
  .hero--productos .hero__explora{ margin-top:14px }
}
@media (max-width:560px){
  /* En el celular el texto es compacto: título, bajada corta y los dos botones (el kicker y los chips quedan para la tablet). */
  .hero__kicker, .hero__chips{ display:none }
  .hero__arriba{ padding-top:16px }
  .hero__titulo{ font-size:clamp(2.1rem,9.2vw,2.75rem) }
  .hero__bajada{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:14px }
}
@media (max-width:360px){
  .hero__botones{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){
  .hero__img, .hero__video, .hero__kicker, .hero__visual, .hero__explora, .hero__texto{
    animation:none !important; opacity:1; transform:none;
  }
  .hero__texto:not(.hero__texto--on){ opacity:0 }
  .hero__diapo{ transition:none }
}

/* ══════════ BOTONES ══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 38px; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  border-radius:999px; transition:all .45s var(--curva); position:relative; overflow:hidden;
}
/* Terminación "metal cepillado": degradado más corto (no se va al oro
   oscuro, que bajaba el contraste del texto en el borde), filo de luz
   arriba (inset blanco) y filo de sombra abajo — estático, sin reflejos
   que pasen. Sombra en capas para que el botón se apoye en la página. */
.btn--oro{
  background:linear-gradient(180deg,#DCBF6E 0%,var(--oro) 55%,#B28F3E 100%);
  color:var(--tinta);
  box-shadow:inset 0 1px 0 rgba(255,250,232,.55), inset 0 -1px 0 rgba(90,70,20,.25),
             0 1px 2px rgba(90,70,20,.18), 0 12px 28px -14px rgba(125,100,40,.55);
}
.btn--oro:hover{
  transform:translateY(-2px); filter:brightness(1.05) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(255,250,232,.6), inset 0 -1px 0 rgba(90,70,20,.25),
             0 2px 4px rgba(90,70,20,.16), 0 20px 40px -16px rgba(125,100,40,.6);
}
.btn:active{ transform:translateY(0) scale(.985) }
.btn:focus-visible{ outline:2px solid var(--marfil); outline-offset:3px }
.btn--linea{
  border:1.5px solid var(--carbon); background:var(--superficie-alta); color:var(--tinta);
  box-shadow:0 8px 22px -16px rgba(42,36,32,.4);
}
.btn--linea:hover{ border-color:var(--marfil); background:var(--marfil-suave); color:var(--marfil); transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(90,26,36,.35) }
.btn--gr{ padding:18px 48px; font-size:.78rem }
.btn--bloque{ width:100%; padding:17px }
/* "Te ayudo a elegir": botón de contorno con la carita del asesor. */
.btn--asesor{ padding-left:8px; gap:12px }
.btn__av{ display:block; width:34px; height:34px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(196,162,74,.7); flex:none }
.btn--claro{
  border:1.5px solid rgba(246,238,230,.45); background:rgba(255,255,255,.06); color:#FBF6EE;
}
.btn--claro:hover{ background:rgba(255,255,255,.14); border-color:rgba(246,238,230,.8); transform:translateY(-2px) }

.hero__sellos{ display:flex; gap:clamp(28px,6vw,72px); justify-content:center; flex-wrap:wrap }
.sello{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px }
/* Divisor vertical fino entre sellos (solo escritorio: en el celular los
   sellos pueden pasar a otra línea y el divisor quedaría colgando). */
@media (min-width:861px){
  .sello + .sello::before{
    content:''; position:absolute; top:8%; bottom:8%; left:calc(clamp(28px,6vw,72px) / -2); width:1px;
    background:linear-gradient(transparent, var(--carbon), transparent);
  }
}
.sello__ico{ width:24px; height:24px; color:var(--oro); opacity:.8; transition:transform .5s var(--curva), opacity .4s }
.sello:hover .sello__ico{ transform:translateY(-3px) scale(1.1); opacity:1 }
.sello strong{
  font-family:var(--serif); font-size:2.1rem; font-weight:400; color:var(--oro-hondo); line-height:1;
}
.sello span{ font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gris-2) }

/* (17-oct-2026) La franja «Confianza en datos reales» pasó a ser una línea junto a la franja de marcas: ver
   .marcas__cifras en «MENOS SCROLL» al final de este archivo. */

/* ══════════ MARCAS QUE TRABAJAMOS (franja dorada) ══════════
   Historial (para no repetir el mismo ida y vuelta): rodante con animación
   → Daniel pidió pararla porque con la cinta de anuncios ya girando arriba
   quedaban dos cosas moviéndose solas ("mucho ruido visual") → fila fija
   que envuelve en varias líneas (ver pintarMarcas() en assets/js/app.js) →
   con el catálogo real pasando de 25 marcas, envolver dejaba una pared de
   4-5 líneas de texto disparejo ("se ve pésimo", reporte de Daniel).
   Ahora: una sola línea que se desliza con el dedo/mouse (scroll horizontal
   nativo), con desvanecido ESTÁTICO en los bordes (mask-image, no anima)
   como pista visual de que sigue habiendo más — nada se mueve solo. */
.marcas{
  position:relative; padding:18px 0; overflow:hidden;
  background:linear-gradient(90deg, var(--negro-2) 0%, rgba(184,154,91,.18) 50%, var(--negro-2) 100%);
}
.marcas::before, .marcas::after{
  content:''; position:absolute; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent 4%, var(--oro) 50%, transparent 96%);
}
.marcas::before{ top:0 }
.marcas::after{ bottom:0 }
.marcas__kicker{ text-align:center; font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--oro-hondo); margin-bottom:12px }
/* Una sola línea que se desliza con el dedo/mouse en vez de envolver en
   varias filas: con más de 25 marcas (varias de nombre largo, ej. "Stephane
   Humbert Lucas") envolver dejaba una pared de 4-5 líneas de texto disparejo
   — justo lo que Daniel reportó como "se ve pésimo". El desvanecido en los
   bordes (mask-image) es estático, no una animación: sigue respetando que
   ya NO debe haber una cinta moviéndose sola (esa fue la queja anterior, con
   la cinta de anuncios ya girando arriba) — acá solo se mueve si la persona
   arrastra o hace scroll horizontal. */
.marcas__pista{
  display:flex; align-items:center; flex-wrap:nowrap; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(184,154,91,.45) transparent;
  padding:2px 28px 8px;
  mask-image:linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.marcas__pista::-webkit-scrollbar{ height:3px }
.marcas__pista::-webkit-scrollbar-thumb{ background:rgba(184,154,91,.45); border-radius:99px }
.marcas__pista span{ padding-inline:14px; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--marfil); letter-spacing:.01em; white-space:nowrap; flex:0 0 auto }
.marcas__sep{ color:var(--oro); opacity:.85; font-size:.45rem; font-style:normal; flex:0 0 auto }
.marcas__sep:last-child{ display:none }

/* ══════════ CARRUSEL DE EXPERTO ══════════
   Sección editorial con un solo perfume visible a la vez, que rota cada
   5 segundos con una transición de opacidad. Imagen + info lado a lado en
   desktop; apilados en móvil. Fondo ligeramente diferenciado (negro-3) para
   separar visualmente del catálogo que viene justo debajo. */
.experto{ padding:clamp(56px,7vw,88px) 0 clamp(40px,5vw,64px); background:var(--negro-3) }
.experto__kicker{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--oro-hondo); margin-bottom:10px; text-align:center }
.experto__tit{ font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:32px; text-align:center }
.experto__stage{ position:relative; min-height:300px }
.experto__slide{
  position:absolute; inset:0;
  display:flex; align-items:center; gap:clamp(24px,5vw,56px);
  opacity:0; transition:opacity .7s ease; pointer-events:none;
}
.experto__slide--activo{ opacity:1; pointer-events:auto; position:relative }
.experto__foto{
  flex:0 0 clamp(180px,36%,320px); aspect-ratio:1/1;
  background:var(--escena); border-radius:var(--r-m); overflow:hidden;
  box-shadow:var(--sombra-2), var(--hilo-oro);
}
.experto__foto img,.experto__foto svg{ width:100%; height:100%; object-fit:cover }
.experto__foto img{ mix-blend-mode:multiply }
.experto__info{ flex:1; min-width:0 }
.experto__marca{ font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--oro-hondo) }
.experto__nom{
  font-family:var(--serif); font-size:clamp(1.4rem,3vw,2.1rem); font-weight:500;
  color:var(--tinta); margin:8px 0 12px; line-height:1.25;
}
.experto__precio{ font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--oro-hondo); margin-bottom:22px }
.experto__cta{
  display:inline-block; padding:11px 26px; background:var(--oro); color:var(--negro);
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  border-radius:999px; text-decoration:none; border:none; cursor:pointer;
  transition:background .2s, color .2s;
}
.experto__cta:hover{ background:var(--oro-hondo); color:#fff }
.experto__dots{ display:flex; justify-content:center; gap:10px; margin-top:28px }
.experto__dot{
  width:8px; height:8px; border-radius:50%; background:var(--linea);
  border:none; padding:0; cursor:pointer; transition:background .3s, transform .3s;
}
.experto__dot--on{ background:var(--oro-hondo); transform:scale(1.4) }
@media(max-width:540px){
  .experto__slide{ flex-direction:column; gap:16px; text-align:center }
  .experto__foto{ flex:0 0 auto; width:clamp(160px,70%,240px); align-self:center }
  .experto__info{ width:100% }
  .experto__cta{ display:block; text-align:center }
}

/* ══════════ MÁS VENDIDOS (ranking real) ══════════
   Fila con scroll horizontal, no una grilla — a propósito: se lee como un
   "top" que se recorre, no como el catálogo completo (esa es la sección
   Colección, justo debajo). Reutiliza visualProducto()/data-ficha, mismo
   patrón que las tarjetas del catálogo — el número grande es el único
   elemento nuevo, y viene del orden real (SUM de unidades vendidas). */
.vendidos{ padding:clamp(56px,7vw,88px) 0 clamp(24px,4vw,40px) }
.vendidos__kicker{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--oro-hondo); margin-bottom:10px }
.vendidos__tit{ font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:28px }
.vendidos__pista{
  display:flex; gap:18px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.vend{
  position:relative; flex:0 0 auto; width:200px; cursor:pointer; scroll-snap-align:start;
  border:1px solid var(--linea-2); border-radius:3px; overflow:hidden; background:var(--negro-2);
  transition:transform .4s var(--curva), border-color .4s var(--curva), box-shadow .4s var(--curva);
}
.vend:hover{ transform:translateY(-6px); border-color:var(--linea); box-shadow:0 24px 48px -28px rgba(26,20,16,.22) }
.vend__rank{
  position:absolute; top:10px; left:10px; z-index:1; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--marfil); border:1px solid rgba(255,255,255,.2);
  font-family:var(--serif); font-size:1.05rem; color:#F4EFE6;
}
.vend__marco{ aspect-ratio:1/1; background:var(--escena) }
.vend__marco img, .vend__marco svg{ width:100%; height:100%; object-fit:cover }
.vend__marco img{ mix-blend-mode:multiply }
.vend__info{ padding:12px 14px 16px }
.vend__marca{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-hondo) }
.vend__nom{ font-family:var(--serif); font-size:1.1rem; font-weight:500; color:var(--tinta); margin:3px 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vend__precio{ font-family:var(--serif); font-size:1rem; font-weight:600; color:var(--oro-hondo) }

/* ══════════ CARRUSEL PROMOCIONAL ══════════
   Se muestra solo si /panel/marketing tiene banners/campañas en estado
   'listo' — ver pintarCarruselPromo() en app.js. El HTML nace con [hidden]
   y JS lo destapa cuando hay contenido real que mostrar. */
.promo{ padding:22px var(--pad) 0 }
.promo__pista{
  position:relative; max-width:var(--max); margin-inline:auto;
  aspect-ratio:16/9; max-height:440px; min-height:180px;
  border-radius:14px; overflow:hidden; border:1px solid var(--linea); background:var(--negro-2);
}
.promo__slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1s var(--curva); pointer-events:none;
}
.promo__slide--on{ opacity:1; pointer-events:auto }
.promo__velo{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,8,10,.88),rgba(8,8,10,.1) 60%) }
/* El texto de este carrusel va sobre una foto con velo oscuro, no sobre
   el fondo de la página: se mantiene claro a propósito, no usa
   var(--marfil)/var(--gris) (que ahora son oscuros para el resto del sitio). */
.promo__texto{ position:absolute; left:0; right:0; bottom:0; padding:clamp(18px,4vw,36px) }
.promo__texto h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,3.4vw,2.2rem); color:#F4EFE6; margin-bottom:6px }
.promo__texto p{ color:#C9C2B5; font-size:.9rem; max-width:560px; line-height:1.6 }
.promo__puntos{ display:flex; justify-content:center; gap:8px; margin-top:16px }
.promo__punto{ width:8px; height:8px; border-radius:50%; background:var(--linea-2); border:1px solid var(--linea); transition:background .35s var(--curva), transform .35s var(--curva) }
.promo__punto:hover{ background:var(--oro-hondo) }
.promo__punto--on{ background:var(--oro); transform:scale(1.25) }
@media (prefers-reduced-motion:reduce){ .promo__slide{ transition:none } }

/* ══════════ ENCABEZADOS DE SECCIÓN ══════════ */
.enc{ text-align:center; margin-bottom:clamp(48px,7vw,80px) }
.enc__linea{ display:block; width:1px; height:54px; margin:0 auto 26px; background:linear-gradient(transparent,var(--oro)) }
.enc__tit{
  font-family:var(--serif); font-weight:300; letter-spacing:-.012em;
  font-size:clamp(2.2rem,5.4vw,3.9rem); line-height:1.08;
}
.enc__baj{ color:var(--gris); max-width:560px; margin:20px auto 0; font-size:1.02rem; line-height:1.8 }

/* ══════════ RESEÑAS DE CLIENTES ══════════
   Tarjetas claras sobre el fondo crema, estrellas en dorado, comillas
   grandes en serif como acento. La etiqueta «Compra verificada» solo la llevan las reseñas que
   llegaron por el enlace de un pedido real (ver /resena); el dueño no escribe reseñas. */
.resenas{ padding:clamp(80px,11vw,140px) 0; border-top:1px solid var(--linea-2); background:var(--negro-2) }
.resenas__grid{ display:grid; gap:clamp(18px,2.6vw,28px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.resena{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:clamp(26px,3vw,34px) clamp(24px,3vw,30px) 24px;
  background:rgba(255,255,255,.55); border:1px solid var(--linea-2); border-radius:6px;
  box-shadow:0 22px 44px -34px rgba(26,20,16,.25);
  transition:transform .5s var(--curva), border-color .5s var(--curva);
}
.resena:hover{ transform:translateY(-4px); border-color:var(--linea) }
.resena::before{
  content:'\201C'; position:absolute; top:6px; right:22px;
  font-family:var(--serif); font-size:5rem; line-height:1; color:var(--oro); opacity:.28;
}
.resena__estrellas{ font-size:1.05rem; letter-spacing:.12em; color:var(--oro) }
.resena__estrellas--vacias{ color:var(--carbon) }
.resena__texto{ font-family:var(--serif); font-size:1.18rem; line-height:1.6; color:var(--gris); font-style:italic }
.resena__pie{ display:flex; flex-direction:column; gap:3px; margin-top:auto; padding-top:14px; border-top:1px solid var(--linea-2) }
.resena__nombre{ font-size:.86rem; font-weight:500; letter-spacing:.04em }
.resena__meta, .resena__prod{ font-size:.74rem; color:var(--gris-2); letter-spacing:.03em }
.resena__prod{ color:var(--oro-hondo) }
/* --negro es el fondo claro desde el cambio de paleta: el título de la reseña iba en ese color y no se leía. */
.resena__titulo{ font-family:var(--serif); font-size:1.28rem; font-weight:500; line-height:1.25; color:var(--tinta); margin:-4px 0 -4px }
.resena__verif{ display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; font-size:.64rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#2F6B45; background:rgba(47,107,69,.1); vertical-align:1px }
.resena__resp{ padding:12px 14px; border-left:3px solid var(--oro); background:rgba(196,162,74,.08); border-radius:0 6px 6px 0 }
.resena__resp b{ display:block; font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-hondo); margin-bottom:4px }
.resena__resp p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--gris) }

/* ══════════ PROMESA ══════════ */
/* Banda oscura a propósito — a pedido explícito de Daniel de que el sitio
   "se ve muy blanco": de arriba a abajo, .confianza/.coleccion/.marcas
   quedan sobre --negro y .resenas/.promesa/.guia/.pie sobre --negro-2, dos
   cremas casi idénticos (diferencia de unos pocos puntos de RGB) — ningún
   tramo del scroll "aterriza" en un color de verdad. Esta es también,
   literalmente, la propuesta de valor del sitio ("Por qué comprar acá"):
   el lugar correcto para un golpe de color fuerte, no decorativo. El resto
   del sitio se queda en crema — un solo tramo oscuro se nota más que
   repartir el color en dosis pequeñas por todos lados. */
.promesa{
  padding:clamp(80px,11vw,140px) 0; border-top:1px solid var(--linea-2);
  background:linear-gradient(170deg, #63232E 0%, #4A1620 100%); color:#F1E4DE;
}
/* 17-oct-2026: los pilares y las políticas son preguntas plegables (.promesa__item, ver «MENOS SCROLL» al final). */

/* ══════════ FILTROS ══════════ */
.coleccion{ padding:clamp(80px,11vw,140px) 0; border-top:1px solid var(--linea-2) }
.filtros{
  display:flex; gap:18px 26px; flex-wrap:wrap; align-items:center; justify-content:center;
  padding-bottom:38px; margin-bottom:46px; border-bottom:1px solid var(--linea-2);
}
.filtros__fila{ display:flex; gap:9px; flex-wrap:wrap }
.chip{
  padding:9px 22px; border:1px solid var(--carbon); border-radius:999px; background:var(--superficie-alta);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris);
  transition:all .35s var(--curva); white-space:nowrap;
}
.chip:hover{ border-color:var(--marfil); color:var(--marfil); background:var(--marfil-suave) }
.chip--on{ background:var(--marfil); border-color:var(--marfil); color:var(--negro); font-weight:500 }
.filtros__orden{ display:flex; align-items:center; gap:11px; margin-left:auto }
.filtros__orden label{ font-size:.66rem; letter-spacing:.19em; text-transform:uppercase; color:var(--gris-2) }
.filtros__orden select{
  background:var(--superficie-alta); color:var(--tinta); border:1px solid var(--carbon);
  padding:9px 15px; border-radius:999px; font-family:var(--sans); font-size:.76rem; cursor:pointer;
}
.filtros__orden select:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.resultados{ text-align:center; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-2); margin:-14px 0 30px }

/* ══════════ REJILLA DE PRODUCTOS ══════════
   Ritmo de catálogo premium: más aire vertical que horizontal (las filas
   se leen como estantes, no como una planilla). */
.rejilla{
  display:grid; gap:clamp(40px,4.4vw,60px) clamp(16px,2vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
}
.vacio{ text-align:center; color:var(--gris); padding:70px 0; font-family:var(--serif); font-size:1.3rem; font-style:italic }

/* ══════════ TARJETA DE PRODUCTO ══════════
   Rediseño 2026-10 (pedido de Daniel: "que no diga mucho y que diga
   todo"). La tarjeta dejó de ser una caja con todo adentro: es una vitrina
   (foto sobre el escenario marfil) + cuatro datos debajo, sobre el mismo
   papel de la página — marca, nombre, "100 ml · EDP" con el estado en
   texto discreto, y precio con la acción de agregar. Barras, pastillas y
   notas viven en la ficha (pintarRejilla en app.js arma este HTML). */
.tarj{
  position:relative; display:flex; flex-direction:column; min-width:0;
  opacity:0; transform:translateY(18px); animation:entra .7s var(--curva) forwards;
}
@keyframes entra{ to{ opacity:1; transform:none } }

/* La vitrina: el escenario lleva el fondo (así el multiply de la foto se
   mezcla contra él) y es lo único que se eleva al pasar el mouse. */
.tarj__media{
  position:relative; border-radius:var(--r-m); overflow:hidden;
  background:var(--escena); box-shadow:var(--sombra-1);
  transition:transform .6s var(--curva), box-shadow .6s var(--curva);
}
.tarj__media::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:var(--hilo-oro);
}
.tarj:hover .tarj__media{ transform:translateY(-4px); box-shadow:var(--sombra-3) }

.tarj__lienzo{
  position:relative; aspect-ratio:4/5; display:grid; place-items:center;
  cursor:pointer; outline-offset:-3px;
}
.tarj__lienzo:focus-visible{ outline:2px solid var(--marfil) }
/* Respaldo sin foto (ilustración SVG): halo oscuro + frasco al centro. */
.tarj__halo{ position:absolute; inset:0 }
.tarj__frasco{ position:relative; width:47% }
/* Foto real: cuadrada y con fondo blanco — contain dentro de la vitrina
   4:5 (nunca se recorta un estuche ancho) y multiply para que el blanco
   desaparezca contra el escenario. */
.tarj__frasco:has(.frasco--foto){ position:absolute; inset:0; width:100%; display:grid; place-items:center }
.frasco--foto{ width:100%; height:100%; object-fit:cover }
/* scale(1.12): las fotos traen mucho margen blanco propio alrededor del
   frasco; con este zoom el frasco gana presencia y lo que se recorta a los
   costados es solo ese margen (que igual era invisible por el multiply). */
.tarj .frasco--foto{
  object-fit:contain; mix-blend-mode:multiply; transform:scale(1.12);
  transition:transform 1.1s var(--curva);
}
.tarj:hover .frasco--foto{ transform:scale(1.17) }

/* Insignia sobre la foto: solo "Destacado", sobria y quieta (sin reflejos,
   pedido de Daniel). Marfil translúcido con filete dorado. */
.tarj__etiq{
  position:absolute; top:12px; left:12px; z-index:2; pointer-events:none;
  padding:5px 11px; border-radius:999px; font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:500;
}
.tarj__etiq--oro{
  background:rgba(253,251,247,.9); color:var(--oro-hondo);
  border:1px solid rgba(196,162,74,.5); box-shadow:0 4px 12px -8px rgba(42,36,32,.4);
}
.tarj__etiq--linea{ background:rgba(253,251,247,.9); color:var(--gris); border:1px solid var(--linea) }

/* "Ver detalle": aparece al pasar el mouse (o con foco de teclado) como
   una pastilla de vidrio claro — fundido + leve subida, nada que barra. */
.tarj__ver{
  position:absolute; left:50%; bottom:14px; z-index:2; pointer-events:none;
  padding:9px 18px; border-radius:999px; white-space:nowrap;
  background:rgba(253,251,247,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(125,100,40,.18); box-shadow:var(--sombra-1);
  color:var(--tinta); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  opacity:0; transform:translate(-50%,8px); transition:opacity .45s var(--curva), transform .45s var(--curva);
}
@media (hover:hover){
  .tarj:hover .tarj__ver, .tarj__lienzo:focus-visible .tarj__ver{ opacity:1; transform:translate(-50%,0) }
}
@media (hover:none){ .tarj__ver{ display:none } }

/* Agotado: la foto pierde un poco de color y presencia — se entiende de
   un vistazo sin un cartel encima del frasco. */
.tarj--agotado .frasco--foto{ filter:grayscale(.45); opacity:.62 }
.tarj--agotado .tarj__precio{ color:var(--gris) }

.tarj__info{ padding:14px 2px 0; display:flex; flex-direction:column; gap:3px; flex:1; min-width:0 }
.tarj__marca{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-hondo); font-weight:600 }
/* Peso 500 a tamaño mediano: el trazo fino de la Cormorant, repetido 50
   veces, se lee como columna de diario; con más peso es etiqueta de
   producto. Máximo dos líneas, para que los precios queden alineados. */
.tarj__nom{
  font-family:var(--serif); font-size:1.34rem; font-weight:500; letter-spacing:.005em; line-height:1.18;
  color:var(--tinta); cursor:pointer;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .3s;
}
.tarj__nom:hover{ color:var(--marfil) }
.tarj__meta{ font-size:.74rem; color:var(--gris); letter-spacing:.02em; margin-top:1px }
/* Bloque de compra pegado abajo (margin-top:auto): en una misma fila de la
   rejilla, precios y botones quedan a la misma altura aunque un nombre
   ocupe dos líneas y otro una. */
.tarj__compra{ margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:12px }
.tarj__precio-fila{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 10px }
.pills{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:11px }
.pill{
  padding:3px 10px; border-radius:999px; font-size:.55rem; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--linea); color:var(--oro-hondo); background:rgba(184,154,91,.07); white-space:nowrap;
}
/* Cormorant Garamond trae números de altura despareja por defecto (estilo
   "antiguo"): elegante para letras, poco legible para un precio. Se pide
   la variante "lining" — números parejos — sin cambiar la tipografía. */
.tarj__precio,.ficha__precio,.ci__precio,.res--total b,.ficha__barra-precio{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.tarj__precio{ font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--tinta); line-height:1; letter-spacing:-.005em }
/* Agregar: botón de retail a todo el ancho, visible siempre (también en el
   celular, donde no hay "hover"). Burdeo de la marca con filo de luz arriba;
   al pasar el mouse se aclara y sube apenas. Sin giros ni rebotes. */
.tarj__add{
  width:100%; height:42px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:linear-gradient(180deg,var(--burdeo-claro),var(--marfil)); color:#FBF6EE;
  border:1px solid var(--marfil);
  font-size:.74rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(90,26,36,.2), 0 10px 22px -14px rgba(90,26,36,.75);
  transition:filter .3s var(--curva), box-shadow .3s var(--curva), transform .2s var(--curva);
}
.tarj__add svg{ width:18px; height:18px; flex:none }
.tarj__add:hover{ filter:brightness(1.12); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(90,26,36,.2), 0 16px 28px -14px rgba(90,26,36,.8) }
.tarj__add:active{ transform:scale(.97) }
.tarj__add:focus-visible{ outline:2px solid var(--marfil); outline-offset:3px }
.tarj__add:disabled{
  background:transparent; color:var(--gris); border:1px dashed var(--carbon); box-shadow:none; cursor:not-allowed; filter:none; transform:none;
}

/* ── Estado de disponibilidad ──
   Una sola fuente: insigniaEntrega(p) en app.js ("En stock", "Preventa ·
   N días", "Por encargo · 3 días", "Agotado"). Fuera de la tarjeta (ficha)
   es una pastilla; dentro de la tarjeta se vuelve texto MUY discreto con
   un punto de color — ver ".tarj .entrega" más abajo. */
.entrega{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  padding:5px 12px 5px 10px; border-radius:999px;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500; white-space:nowrap;
}
.entrega::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none }
.entrega--ya{ background:rgba(79,125,92,.09); color:#3E6B4B; border:1px solid rgba(79,125,92,.3) }
.entrega--ya::before{ background:var(--estado-ok); box-shadow:0 0 0 3px rgba(79,125,92,.16) }
.entrega--ped{ background:rgba(42,36,32,.03); color:var(--gris); border:1px solid var(--linea) }
.entrega--agotado{ background:transparent; color:var(--gris); border:1px dashed var(--carbon) }
.entrega--agotado::before{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--gris-2) }
.entrega--pre{ background:rgba(184,154,91,.12); color:var(--oro-hondo); border:1px solid rgba(184,154,91,.45) }
.entrega--pre::before{ background:var(--oro) }

.tarj .entrega{
  padding:0; border:0; background:none; border-radius:0;
  font-size:.7rem; letter-spacing:.02em; text-transform:none; font-weight:400; color:var(--gris);
  gap:6px;
}
.tarj .entrega::before{ width:6px; height:6px; box-shadow:none }
.tarj .entrega--pre{ color:var(--oro-hondo) }
/* Agotado: ya lo dice el botón deshabilitado; no repetirlo junto al precio. */
.tarj .entrega--agotado{ display:none }
.btn:disabled{ opacity:.5; cursor:not-allowed }

/* Promesa Next Day / Same Day en la ficha (solo si está activa en el panel) */
.ficha__promesa{ font-size:.82rem; color:var(--marfil); margin:-16px 0 24px; letter-spacing:.02em }

/* Comprobante de pago Webpay en /pago-resultado — Transbank exige mostrar
   orden, comercio, monto, autorización, fecha, tipo de pago, cuotas,
   tarjeta y productos. Tabla de dos columnas que se apila en el celular. */
.comprobante{ background:var(--superficie-alta); border:1px solid var(--linea); border-radius:10px;
  padding:20px 22px; margin:6px 0 22px; max-width:560px }
.comprobante__tit{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-hondo); margin-bottom:12px }
.comprobante dl{ display:grid; gap:8px }
.comprobante__fila{ display:grid; grid-template-columns:minmax(150px, 40%) 1fr; gap:12px; font-size:.88rem }
.comprobante__fila dt{ color:var(--gris) }
.comprobante__fila dd{ color:var(--tinta); min-width:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums }
@media (max-width:480px){ .comprobante__fila{ grid-template-columns:1fr; gap:2px } }

/* Comprobante v2: mismo lenguaje que el del correo (franja tinta con
   "Aprobado", monto protagonista, detalle con separadores finos). */
.comprobante--v2{ padding:0; overflow:hidden; border-radius:14px; border-color:rgba(184,154,91,.45);
  box-shadow:0 1px 2px rgba(26,20,16,.06), 0 18px 46px -18px rgba(107,84,36,.28); max-width:600px }
.comprobante__banda{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(120deg, #1A1410, #2B211A); padding:14px 22px }
.comprobante--v2 .comprobante__tit{ margin:0; color:#D9BD7E }
.comprobante__ok{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  background:#2F6B45; color:#fff; font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase }
.comprobante__ok svg{ width:14px; height:14px }
.comprobante__monto{ display:grid; gap:4px; padding:22px 22px 6px }
.comprobante__monto-et{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--oro-hondo) }
.comprobante__monto strong{ font-family:var(--serif); font-size:2.3rem; font-weight:500; line-height:1.05; color:var(--tinta);
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1 }
.comprobante__monto small{ font-family:inherit; font-size:.8rem; letter-spacing:.1em; color:var(--gris) }
.comprobante__monto-sub{ font-size:.82rem; color:var(--gris) }
.comprobante--v2 dl{ gap:0; padding:10px 22px 4px }
.comprobante--v2 .comprobante__fila{ padding:9px 0; border-bottom:1px solid var(--linea-2, rgba(184,154,91,.18)) }
.comprobante--v2 .comprobante__fila:last-child{ border-bottom:0 }
.comprobante__pie{ display:flex; gap:8px; align-items:flex-start; margin:0; padding:12px 22px 4px; font-size:.76rem; color:var(--gris); line-height:1.5 }
.comprobante__pie svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--oro-hondo) }
.comprobante__imprimir{ margin:12px 22px 20px }
@media print{
  body *{ visibility:hidden !important }
  .comprobante--v2, .comprobante--v2 *{ visibility:visible !important }
  .comprobante--v2{ position:absolute; left:0; top:0; box-shadow:none }
  .comprobante__imprimir{ display:none !important }
}

/* barras de duración/estela */
.barras{ display:flex; gap:14px; margin-bottom:11px }
.barra{ flex:1 }
.barra__et{ font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-2); margin-bottom:5px }
.barra__pista{ height:2px; background:var(--carbon); border-radius:2px; overflow:hidden }
.barra__val{ height:100%; background:linear-gradient(90deg,var(--oro-hondo),var(--oro)); border-radius:2px }

/* ══════════ GUÍA OLFATIVA ══════════ */
.guia{ padding:clamp(80px,11vw,140px) 0; border-top:1px solid var(--linea-2); background:var(--negro-2) }
.guia__grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(206px,1fr)) }
.fam{
  position:relative; padding:34px 26px; border:1px solid var(--linea-2); border-radius:var(--r-m);
  overflow:hidden; text-align:left; background:var(--superficie-alta); box-shadow:var(--sombra-1);
  transition:border-color .5s, transform .5s var(--curva), box-shadow .5s var(--curva);
}
.fam:hover{ border-color:rgba(196,162,74,.6); transform:translateY(-5px); box-shadow:var(--sombra-3) }
.fam:focus-visible{ outline:2px solid var(--marfil); outline-offset:3px }
.fam__aura{ position:absolute; inset:0; opacity:.16; transition:opacity .5s }
.fam:hover .fam__aura{ opacity:.3 }
.fam__nom{ position:relative; font-family:var(--serif); font-size:1.5rem; font-weight:400; margin-bottom:7px }
.fam__desc{ position:relative; font-size:.82rem; color:var(--gris); line-height:1.65 }
.fam__n{ position:relative; display:inline-block; margin-top:14px; font-size:.6rem; letter-spacing:.19em; text-transform:uppercase; color:var(--oro-hondo) }

/* ══════════ PIE ══════════ */
.pie{ position:relative; background:var(--negro-2); padding-top:clamp(56px,7vw,82px) }
/* Filo dorado arriba del pie (estático): cierra la página con una línea
   de terminación en vez de un simple borde gris. */
.pie::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(196,162,74,.55) 50%, transparent);
}
.pie__grid{ display:grid; gap:44px; grid-template-columns:1.6fr 1fr 1fr 1.2fr; padding-bottom:56px }
.pie__col{ display:flex; flex-direction:column; gap:11px }
.pie__col--marca p{ color:var(--gris); font-size:.9rem; line-height:1.8; max-width:330px; margin-top:6px }
.marca--pie{ margin:0 0 6px }
.pie__col :is(h2,h4){ font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--oro-hondo); font-weight:500; margin-bottom:6px }
.pie__col a{ color:var(--gris); font-size:.9rem; transition:color .3s, padding-left .3s; width:fit-content }
/* Hover en burdeo (antes oro claro: 1,9:1 sobre el crema, no se leía). */
.pie__col a:hover{ color:var(--marfil); padding-left:5px }
.pie__nota{ color:var(--gris); font-size:.86rem; line-height:1.95 }
.pie__nota strong{ color:var(--tinta); font-weight:400 }
.pie__redes{ display:flex; gap:12px; margin-top:16px }
.pie__redes a{
  width:38px; height:38px; border:1px solid var(--linea-2); border-radius:50%;
  display:grid; place-items:center; color:var(--gris); transition:all .4s var(--curva);
}
.pie__redes a:hover{ border-color:var(--marfil); color:var(--marfil); background:var(--superficie-alta); transform:translateY(-3px); padding-left:0; box-shadow:var(--sombra-1) }
.pie__redes svg{ width:17px; height:17px }
.pie__base{ border-top:1px solid var(--linea-2); padding:22px 0 26px }
.pie__base__int{ display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; align-items:center }
.pie__base span{ font-size:.72rem; color:var(--gris-2) }
.pie__legal{ max-width:560px; line-height:1.6 }
.pie__pago{ display:flex; flex-direction:column; gap:6px; margin-top:12px; align-items:flex-start }
.pie__webpay{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--linea); border-radius:10px; background:var(--superficie-alta, #fff); color:var(--tinta); font-size:.8rem; font-weight:500; letter-spacing:.02em }
.pie__webpay svg{ width:18px; height:18px; color:var(--marfil) }
.pie__pago small{ color:var(--gris-2); font-size:.74rem; line-height:1.5 }
.pie__comercio-caja{ padding-bottom:12px }
.pie__comercio{ margin:0; font-size:.74rem; line-height:1.7; color:var(--gris); overflow-wrap:anywhere }
.pago__legal{ margin:12px 0 0; font-size:.76rem; line-height:1.55; color:var(--gris) }
.pago__legal a{ color:var(--marfil); text-decoration:underline; text-underline-offset:2px }

/* ══════════ MODAL (carrito y pago) ══════════
   La ficha de producto YA NO usa estas clases — dejó de ser un modal
   flotante (ver ".ficha-pagina" más abajo). Solo las usan #carro y
   #modalPago, que no fueron parte de este cambio. */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:var(--pad) }
.modal__fondo{ position:absolute; inset:0; background:rgba(20,16,12,.55); backdrop-filter:blur(9px); animation:aparece .35s }
@keyframes aparece{ from{ opacity:0 } }
.modal__caja{
  position:relative; width:min(940px,100%); max-height:88vh; overflow-y:auto;
  background:var(--superficie-alta); border:1px solid rgba(125,100,40,.16); border-radius:var(--r-l);
  box-shadow:0 2px 6px rgba(20,16,12,.08), 0 40px 90px -30px rgba(20,16,12,.55);
  animation:sube .5s var(--curva);
}
@keyframes sube{ from{ opacity:0; transform:translateY(30px) scale(.98) } }
/* Botón cerrar: círculo de vidrio claro con filete — se lee igual de bien
   sobre el panel crema que sobre el fondo oscuro del visor de fotos. */
.modal__x{
  position:absolute; top:14px; right:16px; z-index:5; width:40px; height:40px; border-radius:50%;
  font-size:1.6rem; line-height:1; color:var(--tinta); display:grid; place-items:center;
  background:rgba(253,251,247,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(125,100,40,.18); box-shadow:var(--sombra-1);
  transition:color .3s, background .3s, border-color .3s, transform .3s var(--curva);
}
.modal__x:hover{ color:var(--marfil); border-color:var(--marfil-borde); background:#FFFFFF }

/* ══════════ FICHA DE PRODUCTO (página, no modal) ══════════
   Ocupa el lugar de #catalogoListado dentro de la sección .coleccion:
   misma posición en el flujo del documento, header y footer del sitio
   siguen arriba/abajo como en cualquier página. Sin fondo oscurecido ni
   centrado flotante — ver app.js (abrirFicha/cerrarFicha) para el toggle
   de visibilidad y el manejo de la URL con history.pushState. */
.ficha-pagina{ animation:aparece .4s var(--curva) }
.ficha-pagina__volver{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:28px;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-hondo);
  transition:gap .25s var(--curva), color .25s;
}
.ficha-pagina__volver:hover{ gap:13px; color:var(--oro) }

/* --fam-c / --fam-a: color profundo y acento de la FAMILIA OLFATIVA del
   perfume (los fija abrirFicha() en app.js desde FAMILIAS). La ficha se
   tiñe con ellos — el color acá es información (a qué familia pertenece),
   no decoración. Sin familia reconocida caen al dorado.
   Rediseño 2026-10: página abierta de dos columnas (como un tema premium
   de Shopify) en vez de una caja única. Izquierda: galería sobre el
   escenario marfil, PEGAJOSA en escritorio (acompaña mientras se lee la
   columna de texto, que es mucho más alta — antes dejaba un hueco vacío
   enorme debajo de la foto). Derecha, en orden de decisión de compra:
   marca, nombre, precio + estado, botones, confianza; después notas,
   pirámide y descripción. */
.ficha{
  --fam-c: var(--oro-hondo); --fam-a: var(--oro);
  position:relative; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(32px,5vw,76px); align-items:start;
}
.ficha__galeria{ position:sticky; top:100px; display:flex; flex-direction:column; gap:14px; min-width:0 }
/* aspect-ratio:1 — las fotos se suben cuadradas desde el panel. */
.ficha__vis{
  position:relative; display:grid; place-items:center; overflow:hidden; aspect-ratio:1;
  border-radius:var(--r-l);
  background:
    radial-gradient(58% 50% at 50% 46%, #FFFEFB 0%, rgba(255,254,251,0) 74%),
    radial-gradient(80% 70% at 90% 4%, color-mix(in srgb, var(--fam-a) 24%, transparent), transparent 70%),
    linear-gradient(170deg, #F8F4EC 0%, #ECE4D5 100%);
  box-shadow:var(--sombra-2);
}
.ficha__vis::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:var(--hilo-oro) }
.ficha__halo{ position:absolute; inset:0 }
.ficha__vis:has(.frasco--foto) .ficha__halo{ display:none }
.ficha__frasco{ position:relative; width:46%; max-width:230px; filter:drop-shadow(0 26px 46px rgba(26,20,16,.28)) }
/* Foto real: llena el escenario. contain, no cover: un estuche ancho
   (caja + frasco lado a lado) se ve completo; multiply funde el blanco de
   la foto con el escenario, así no queda un cuadrado blanco pegado. */
.ficha__frasco:has(.frasco--foto){ position:absolute; inset:0; width:100%; max-width:none; filter:none; padding:4% }
.ficha__frasco .frasco--foto{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply }
.ficha__frasco:focus-visible{ outline:2px solid var(--marfil); outline-offset:-6px; border-radius:var(--r-l) }

/* Miniaturas: debajo del escenario (antes iban encima de la foto,
   tapando el frasco). */
.ficha__miniaturas{ display:flex; gap:10px; overflow-x:auto; padding:2px; scrollbar-width:none }
.ficha__miniaturas::-webkit-scrollbar{ display:none }
.ficha__mini{
  flex:none; width:72px; height:72px; border-radius:var(--r-s); overflow:hidden;
  background:var(--escena); border:1px solid var(--linea); opacity:.7;
  transition:opacity .25s, border-color .25s, box-shadow .25s;
}
.ficha__mini img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply }
.ficha__mini:hover{ opacity:1; border-color:var(--carbon) }
.ficha__mini--on{ opacity:1; border-color:var(--fam-c); box-shadow:0 0 0 1px var(--fam-c) }

/* Flechas para pasar de foto — mismo círculo de vidrio claro que
   .modal__x (misma familia de controles; sirven igual en el visor oscuro).
   En escritorio aparecen al pasar el mouse por la foto; en pantallas
   táctiles quedan siempre visibles. */
.ficha__flecha{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:var(--tinta);
  background:rgba(253,251,247,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(125,100,40,.18); box-shadow:var(--sombra-1);
  transition:color .3s, background .3s, opacity .35s var(--curva);
}
.ficha__flecha svg{ width:19px; height:19px }
.ficha__flecha:hover{ color:var(--marfil); background:#FFFFFF }
.ficha__flecha--izq{ left:14px }
.ficha__flecha--der{ right:14px }
@media (hover:hover){
  .ficha__vis .ficha__flecha{ opacity:0 }
  .ficha__vis:hover .ficha__flecha, .ficha__vis .ficha__flecha:focus-visible{ opacity:1 }
}

/* La foto principal invita al zoom (solo cuando hay foto real, ver app.js) */
.ficha__frasco[role="button"]{ cursor:zoom-in }
.ficha__txt{ position:relative; min-width:0; padding-top:4px }
.ficha__marca{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--fam-c); font-weight:500;
}
.ficha__marca::before{ content:''; width:28px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--fam-c), var(--fam-a)); flex:none }

/* Pastilla de familia: la única insignia con color propio, el de su familia. */
.pill--fam{
  color:var(--fam-c); border-color:color-mix(in srgb, var(--fam-c) 35%, transparent);
  background:color-mix(in srgb, var(--fam-a) 38%, #FFFFFF);
}

/* Barras de duración/estela dentro de la ficha: más presentes que en la
   tarjeta (acá hay espacio y son parte de la decisión de compra). */
.ficha .barras{ display:flex; gap:22px; margin-bottom:22px }
.ficha .barra__et{ font-size:.62rem; color:var(--tinta); margin-bottom:8px }
.ficha .barra__pista{ height:6px; border-radius:6px; background:color-mix(in srgb, var(--fam-a) 18%, var(--carbon)) }
.ficha .barra__val{ border-radius:6px; background:linear-gradient(90deg, var(--fam-c), var(--fam-a)) }
.ficha__nom{
  font-family:var(--serif); font-size:clamp(2.3rem,4.2vw,3.5rem); font-weight:400;
  line-height:1.03; letter-spacing:-.012em; margin-bottom:12px; color:var(--tinta);
}
.ficha__meta{ font-size:.8rem; color:var(--gris); letter-spacing:.04em; margin-bottom:26px }

/* ── Bloque de compra ── superficie elevada propia: precio, estado,
   botones y confianza agrupados — la decisión de compra en un solo lugar. */
.ficha__compra{
  padding:24px 26px 22px; margin-bottom:38px; border-radius:var(--r-l);
  background:var(--superficie-alta); border:1px solid rgba(125,100,40,.14);
  box-shadow:var(--sombra-2);
}
.ficha__precio-fila{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 18px; flex-wrap:wrap; margin-bottom:20px }
.ficha__precio-fila .entrega{ margin-bottom:6px }
.ficha__compra .ficha__promesa{ margin:-4px 0 18px; font-size:.84rem; line-height:1.6 }
.ficha__confianza{
  list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--linea-2);
}
.ficha__confianza li{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  font-size:.7rem; line-height:1.4; color:var(--gris); letter-spacing:.02em;
}
.ficha__confianza svg{ width:21px; height:21px; color:var(--oro-hondo) }
.ficha__nota-entrega{ margin-top:16px; font-size:.8rem; color:var(--gris); line-height:1.6 }
.ficha__nota-entrega strong{ color:var(--tinta); font-weight:500 }

/* Subtítulos de sección dentro de la ficha (Carácter, Notas, Descripción) */
.ficha__bloque{ margin-bottom:34px }
.ficha__sub{
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gris); font-weight:500;
}
.ficha__sub::after{ content:''; flex:1; height:1px; background:var(--linea) }
.ficha__desc{ color:var(--gris); line-height:1.85; font-size:.96rem }
.ficha__desc p{ margin-bottom:1em }
.ficha__desc p:last-child{ margin-bottom:0 }
.ficha__desc strong, .ficha__desc b{ color:var(--tinta); font-weight:500 }
.ficha__desc ul, .ficha__desc ol{ padding-left:1.2em; margin-bottom:1em }
.ficha__insignias{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px }
.ficha__precio{ font-family:var(--serif); font-size:clamp(2.3rem,3.6vw,2.9rem); font-weight:600; color:var(--tinta); line-height:1; letter-spacing:-.01em }

/* Pirámide olfativa como una tarjeta propia: fondo claro, borde izquierdo
   en el color de la familia y un punto por nivel que va del acento (salida,
   lo primero que se huele) al tono profundo (fondo, lo que queda). */
.piramide{
  padding:18px 20px 18px 22px; display:grid; gap:14px;
  background:var(--superficie-alta); border:1px solid var(--linea-2); border-radius:var(--r-m);
  border-left:3px solid var(--fam-c); box-shadow:var(--sombra-1);
}
.piramide__fila{ display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:start }
.piramide__et{
  position:relative; padding-left:16px; padding-top:3px;
  font-size:.58rem; letter-spacing:.19em; text-transform:uppercase; color:var(--fam-c); font-weight:500;
}
.piramide__et::before{
  content:''; position:absolute; left:0; top:6px; width:8px; height:8px; border-radius:50%;
  background:var(--fam-a); box-shadow:0 0 0 3px color-mix(in srgb, var(--fam-a) 25%, transparent);
}
.piramide__fila:nth-child(2) .piramide__et::before{ background:color-mix(in srgb, var(--fam-a) 50%, var(--fam-c)) }
.piramide__fila:nth-child(3) .piramide__et::before{ background:var(--fam-c) }
.piramide__notas{ font-size:.92rem; color:var(--tinta); line-height:1.7 }

.ficha__precio small{
  display:block; margin-top:8px;
  font-family:var(--sans); font-size:.6rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--gris-2);
}

.ficha__acciones{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:10px }
.ficha__acciones .btn{ width:100%; min-width:0; padding:17px 16px }

/* ── Barra fija "Agregar" (solo celular) ──
   Aparece cuando el botón principal de la ficha quedó arriba, fuera de la
   pantalla (IntersectionObserver en abrirFicha, app.js) — así el botón de
   compra nunca está a más de un pulgar de distancia mientras se leen las
   notas y la descripción. visibility:hidden mientras está escondida: no se
   puede tabular a un botón que no se ve. */
.ficha__barra{ display:none }
@media (max-width:860px){
  .ficha__barra{
    position:fixed; left:0; right:0; bottom:0; z-index:85;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(253,251,247,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(125,100,40,.18); box-shadow:0 -16px 36px -22px rgba(42,36,32,.4);
    transform:translateY(110%); visibility:hidden;
    transition:transform .45s var(--curva), visibility 0s linear .45s;
  }
  .ficha__barra.ver{ transform:none; visibility:visible; transition:transform .45s var(--curva), visibility 0s }
  .ficha__barra-info{ min-width:0; display:flex; flex-direction:column; gap:2px }
  .ficha__barra-nom{ font-family:var(--serif); font-size:1.02rem; line-height:1.2; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .ficha__barra-precio{ font-family:var(--serif); font-weight:600; font-size:1.18rem; line-height:1; color:var(--tinta) }
  .ficha__barra .btn{ flex:none; padding:14px 24px }
  /* el globo del asesor y el aviso emergente suben sobre la barra */
  body:has(.ficha__barra.ver) .chatia{ bottom:96px }
  /* solo cuando el aviso está visible: escondido, si subiera, su
     desplazamiento hacia abajo ya no alcanzaría a sacarlo de la pantalla */
  body:has(.ficha__barra.ver) .aviso.ver{ bottom:98px }
}

/* ══════════ VISOR DE FOTOS (ZOOM) ══════════
   Lightbox de la ficha: overlay más oscuro que .modal__fondo porque acá la
   protagonista es la foto sola, sin caja de contenido detrás. */
/* Misma regla que en .visor__caja: la única pista del grid tiene que ser
   minmax(0,1fr). Con "auto", la pista crecía al alto natural de la foto
   (1000px en una de 1000x1000) y la caja quedaba corrida hacia abajo,
   con la imagen cortada por el borde inferior de la pantalla. */
.visor{
  position:fixed; inset:0; z-index:130; display:grid;
  grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  place-items:center; padding:var(--pad);
}
.visor__fondo{ position:absolute; inset:0; background:rgba(12,10,8,.9); backdrop-filter:blur(10px); animation:aparece .35s }
/* Las pistas van con minmax(0,1fr) a propósito: con pistas "auto" la celda
   crecía hasta el alto natural de la foto y max-height:100% se resolvía
   contra ESA celda (o sea, contra la propia foto), así que una foto alta
   se salía de la pantalla y quedaba cortada abajo. El tope en vh es la
   red de seguridad si alguna vez la caja no tiene alto definido. */
.visor__caja{
  position:relative; width:min(1100px,100%); height:min(88vh,100%);
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  place-items:center; animation:sube .5s var(--curva);
}
.visor__img{
  width:auto; height:auto; min-width:0; min-height:0;
  max-width:100%; max-height:min(100%, 88vh); object-fit:contain; border-radius:4px;
  box-shadow:0 34px 90px rgba(0,0,0,.55); cursor:zoom-out;
}
.visor__x{ position:fixed; top:18px; right:20px }
.visor .ficha__flecha--izq{ left:4px }
.visor .ficha__flecha--der{ right:4px }
.visor__contador{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  padding:5px 14px; border-radius:999px; font-size:.65rem; letter-spacing:.18em;
  color:#EDE6D8; background:rgba(8,8,10,.6); backdrop-filter:blur(6px);
}

/* ══════════ PAGO ══════════ */
.modal__caja--angosta{ width:min(500px,100%) }
.pago{ padding:clamp(28px,4vw,40px) }
.pago__tit{ font-family:var(--serif); font-size:2rem; font-weight:400; margin-bottom:10px }
.pago__plazo{
  display:inline-block; padding:5px 13px; border-radius:999px; margin-bottom:24px;
  font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(244,239,230,.05); border:1px solid var(--linea-2); color:var(--gris);
}
.pago__plazo--ya{ background:var(--marfil-suave); border-color:var(--marfil-borde); color:var(--marfil) }
.pago__resumen{ padding:18px 0; border-block:1px solid var(--linea-2); margin-bottom:26px }
.pago__resumen .res--total{ margin-bottom:0; padding-top:13px }

.pago__op{ margin-bottom:26px }
.pago__op h3{ font-family:var(--serif); font-size:1.35rem; font-weight:400; margin-bottom:5px }
.pago__op > p{ font-size:.85rem; color:var(--gris); margin-bottom:15px; line-height:1.65 }

.datos{ border:1px solid var(--linea-2); border-radius:3px; overflow:hidden }
.dato{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 15px; border-bottom:1px solid var(--linea-2);
}
.dato:last-child{ border-bottom:0; background:rgba(184,154,91,.06) }
.dato__et{ display:block; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gris-2) }
.dato__val{ font-size:.98rem; color:var(--tinta); letter-spacing:.02em }
.dato__cp{
  flex-shrink:0; padding:6px 13px; border:1px solid var(--linea); border-radius:999px;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-hondo);
  transition:all .3s;
}
.dato__cp:hover{ background:var(--oro); color:var(--tinta) }

.pago__form{ margin-bottom:4px }
.pago__fila{ display:flex; gap:12px }
.pago__fila .pago__campo{ flex:1; min-width:0 }
.pago__campo{ margin-bottom:16px }
.pago__campo label{
  display:block; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris-2); margin-bottom:7px;
}
.pago__campo input{
  /* 1rem (16px), no .92rem: por debajo de 16px, iOS Safari hace zoom
     automático al enfocar el campo — con 5 campos en este formulario,
     eso es zoom-in/zoom-out cinco veces en el paso previo al cobro real. */
  width:100%; background:var(--superficie-alta); border:1px solid rgba(42,36,32,.2); color:var(--tinta);
  padding:11px 14px; border-radius:4px; font:inherit; font-size:1rem; font-family:var(--sans);
}
.pago__campo input:focus{ outline:none; border-color:var(--oro-hondo); box-shadow:0 0 0 3px rgba(196,162,74,.22) }
/* El selector de horario no tenía estilo (quedaba con el gris del
   sistema): mismo campo que los inputs, con flecha propia. */
.pago__campo select{
  width:100%; appearance:none; -webkit-appearance:none; cursor:pointer;
  background:var(--superficie-alta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D6428' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  border:1px solid rgba(42,36,32,.2); color:var(--tinta);
  padding:11px 40px 11px 14px; border-radius:4px; font-family:var(--sans); font-size:1rem;
}
.pago__campo select:focus{ outline:none; border-color:var(--oro-hondo); box-shadow:0 0 0 3px rgba(196,162,74,.22) }

/* Sugerencias de dirección (Google Places, opcional): lista bajo el campo. */
.pago__campo--dir{ position:relative }
.pago__sug{
  position:absolute; left:0; right:0; z-index:5; margin:0; padding:4px 0; list-style:none;
  background:var(--superficie-alta); border:1px solid rgba(42,36,32,.2); border-radius:4px;
  box-shadow:0 10px 26px rgba(42,36,32,.16); max-height:300px; overflow-y:auto;
}
.pago__sug-op{ display:grid; gap:2px; padding:10px 14px; cursor:pointer; min-height:44px; align-content:center; line-height:1.35 }
.pago__sug-op b{ font-weight:500; font-size:.94rem; color:var(--tinta) }
.pago__sug-op small{ font-size:.78rem; color:var(--gris) }
.pago__sug-op:hover, .pago__sug-op--on{ background:var(--negro-2) }
.pago__sug-op--on{ box-shadow:inset 3px 0 0 var(--oro-hondo) }
.pago__sug-g{ padding:6px 14px 4px; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-2); text-align:right }
.pago__sug-nota{ margin:6px 0 0; font-size:.74rem; line-height:1.45; color:var(--gris) }
@media (max-width:520px){ .pago__fila--dir{ flex-direction:column; gap:0 } }

/* Pago por bloques (15-oct-2026): tus datos · tu dirección · otra dirección de
   entrega (opcional) · entrega. La dirección se elige de la lista de Google y,
   ya verificada, comuna y región quedan fijas (las dio Google). */
.pago__grupo{ border:0; margin:6px 0 4px; padding:0; min-width:0 }
.pago__grupo-tit{
  padding:0; margin-bottom:12px; font-family:var(--serif); font-size:1.12rem; font-weight:400; color:var(--tinta);
}
.pago__opc{ text-transform:none; letter-spacing:0; font-size:.68rem; color:var(--gris-2) }
.pago__campo textarea{
  width:100%; min-height:62px; resize:vertical; background:var(--superficie-alta); border:1px solid rgba(42,36,32,.2);
  color:var(--tinta); padding:11px 14px; border-radius:4px; font-family:var(--sans); font-size:1rem; line-height:1.45;
}
.pago__campo textarea:focus{ outline:none; border-color:var(--oro-hondo); box-shadow:0 0 0 3px rgba(196,162,74,.22) }
.pago__campo input.pago__verificada{ border-color:#2E8B57 }
.pago__dir-ok{
  display:flex; align-items:center; gap:6px; margin:7px 0 0; font-size:.76rem; color:#2E6B47; font-weight:500;
}
.pago__dir-ok::before{
  content:''; width:15px; height:15px; flex:none; border-radius:50%; background:#2E8B57
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 11px;
}
.pago__dir-ok[hidden]{ display:none }
.pago__campo input.pago__bloqueado, .pago__campo select.pago__bloqueado{
  background-color:var(--negro-2); color:var(--tinta); opacity:1; cursor:default;
}
.pago__sug-nota--manual{ color:#8A5A1F }
.pago__check--otra{ margin:2px 0 18px; color:var(--tinta) }
.pago__check--otra small{ color:var(--gris) }

/* Nota informativa del checkout ("El pago se procesa al instante con
   Webpay…"): antes usaba la caja café/naranja de alerta de configuración y
   se leía como un error justo antes de pagar. Ahora es una nota tranquila. */
.pago__falta{
  background:linear-gradient(170deg, rgba(196,162,74,.1), rgba(253,251,247,.6));
  border:1px solid rgba(196,162,74,.35); border-left:3px solid var(--oro); border-radius:var(--r-s);
  padding:14px 17px; margin-bottom:22px; font-size:.82rem; line-height:1.7; color:var(--gris);
}
.pago__falta strong{ display:block; color:var(--tinta); font-weight:500; margin-bottom:3px }
.pago__falta code{
  font-family:ui-monospace,Consolas,monospace; font-size:.76rem;
  background:rgba(42,36,32,.06); padding:1px 5px; border-radius:2px; color:var(--tinta);
}

/* Opt-in de marketing: separado a propósito de cualquier otro checkbox
   del formulario (hoy no hay uno de términos, pero si se agrega, va en
   otro bloque — nunca agrupado visualmente con este). Nace desmarcado. */
.pago__check{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:22px;
  font-size:.82rem; color:var(--gris); line-height:1.55; cursor:pointer;
}
.pago__check input{ flex-shrink:0; width:17px; height:17px; margin-top:2px; accent-color:var(--oro); cursor:pointer }

/* ══════════ SEGUIMIENTO DE PEDIDO ══════════ */
.seguimiento{ max-width:560px }
.seguimiento .pago__form{ margin-bottom:22px }
.seguimiento__error{
  background:rgba(184,74,58,.08); border:1px solid rgba(184,74,58,.35); border-left-width:3px;
  border-radius:3px; padding:13px 16px; margin-bottom:20px; font-size:.86rem; color:#8C3324;
}
.seguimiento__resultado{
  border:1px solid var(--linea-2); border-radius:4px; padding:24px 26px; background:var(--negro-2);
}
.seguimiento__cab{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap }
.seguimiento__cab h3{ font-family:var(--serif); font-size:1.4rem; font-weight:400 }
.seguimiento__estado{
  padding:5px 14px; border-radius:999px; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--linea); color:var(--oro-hondo); background:rgba(184,154,91,.1); white-space:nowrap;
}
.seguimiento__estado--ok{ background:var(--marfil-suave); border-color:var(--marfil-borde); color:var(--marfil) }
.seguimiento__estado--off{ background:rgba(99,105,107,.1); border-color:var(--linea); color:var(--gris) }
.seguimiento__fecha{ font-size:.8rem; color:var(--gris); margin-bottom:18px }
.seguimiento__items{ border-top:1px solid var(--linea-2); padding-top:14px }
.seguimiento__item{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:.9rem }
.seguimiento__item span:last-child{ color:var(--gris); white-space:nowrap }

/* ══════════ CARRITO ══════════ */
.carro{ position:fixed; inset:0; z-index:110 }
.carro__fondo{ position:absolute; inset:0; background:rgba(20,16,12,.5); backdrop-filter:blur(7px); animation:aparece .35s }
/* Carrito lateral: superficie más clara que la página, sombra larga hacia
   la izquierda (se apoya sobre la tienda), miniaturas sobre el mismo
   escenario marfil de las tarjetas y cantidades en un control de pastilla.
   Solo estilos: el HTML lo arma pintarCarro() en app.js (no se toca). */
.carro__panel{
  position:absolute; top:0; right:0; height:100%; width:min(440px,100%);
  background:var(--superficie-alta); border-left:1px solid rgba(125,100,40,.16);
  box-shadow:-30px 0 80px -30px rgba(20,16,12,.45);
  display:flex; flex-direction:column; animation:entraDer .48s var(--curva);
}
@keyframes entraDer{ from{ transform:translateX(100%) } }
.carro__cab{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 28px; border-bottom:1px solid var(--linea-2); position:relative;
}
.carro__cab h3{ font-family:var(--serif); font-size:1.7rem; font-weight:400; letter-spacing:-.005em }
.carro__cab .modal__x{ position:static; box-shadow:none }
.carro__items{ flex:1; overflow-y:auto; padding:6px 28px }
.carro__vacio{ text-align:center; padding:80px 20px; color:var(--gris) }
.carro__vacio p{ font-family:var(--serif); font-size:1.4rem; font-style:italic; margin-bottom:8px; color:var(--tinta) }
.carro__vacio small{ font-size:.84rem }

.ci{ display:grid; grid-template-columns:78px 1fr auto; gap:16px; padding:20px 0; border-bottom:1px solid var(--linea-2); align-items:center }
.ci:last-child{ border-bottom:0 }
.ci__vis{
  width:78px; height:78px; border-radius:var(--r-s); display:grid; place-items:center; overflow:hidden; position:relative;
  box-shadow:var(--hilo-oro);
}
/* El fondo oscuro en línea (halo) es para la ilustración de respaldo; con
   foto real va el escenario claro, y multiply funde el blanco de la foto. */
.ci__vis:has(.frasco--foto), .br__vis:has(.frasco--foto){ background:var(--escena) !important }
.ci__vis .frasco--foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:4px; mix-blend-mode:multiply }
.ci__vis svg{ width:62% }
.ci__marca{ font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro-hondo); font-weight:500 }
.ci__nom{ font-family:var(--serif); font-size:1.14rem; line-height:1.22; margin:2px 0 9px; color:var(--tinta) }
/* Línea de preventa en el carrito (la agrega pintarCarro solo si aplica):
   texto chico en el dorado de la marca, sin caja. */
.ci__pre{ margin:-4px 0 9px; font-size:.7rem; line-height:1.4; color:var(--oro-hondo); letter-spacing:.02em }
.ci__ctrl{
  display:inline-flex; align-items:center; gap:2px; padding:2px;
  border:1px solid var(--linea); border-radius:999px; background:var(--negro);
}
.ci__btn{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:.95rem; line-height:1; color:var(--tinta);
  transition:background .25s, color .25s;
}
.ci__btn:hover{ background:var(--superficie-alta); color:var(--marfil); box-shadow:0 1px 3px rgba(42,36,32,.12) }
.ci__n{ font-size:.84rem; min-width:20px; text-align:center; font-variant-numeric:tabular-nums }
.ci__der{ text-align:right; display:flex; flex-direction:column; gap:10px; align-items:flex-end }
.ci__precio{ font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--tinta) }
.ci__x{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-2);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
  transition:color .3s, text-decoration-color .3s;
}
.ci__x:hover{ color:var(--error); text-decoration-color:currentColor }

/* ══════════ BÚSQUEDA ══════════
   Se abre desde el buscador del encabezado: cae arriba, como una paleta
   de búsqueda pegada al header, no como una ventana al centro. */
#modalBuscar{ align-items:start; padding-top:clamp(12px,10vh,96px) }
.modal__caja--buscar{ width:min(680px,100%); max-height:min(78vh,620px); display:flex; flex-direction:column }
.buscar__cab{
  display:flex; align-items:center; gap:14px; padding:22px 56px 18px 26px;
  border-bottom:1px solid var(--linea-2); flex:none;
}
.buscar__cab svg{ width:20px; height:20px; color:var(--gris); flex:none }
.buscar__input{
  flex:1; border:none; background:none; font:300 1.15rem/1.4 var(--sans); color:var(--tinta);
  min-width:0;
}
.buscar__input::placeholder{ color:var(--gris-2) }
/* El foco ya se nota en la fila completa del buscador (ver :focus-within). */
.buscar__input:focus-visible{ outline:none }
.buscar__input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none }
.buscar__cab:focus-within{ box-shadow:inset 0 -2px 0 var(--oro) }
.buscar__cab:focus-within svg{ color:var(--marfil) }
.br__precio{ font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1 }
.buscar__resultados{ flex:1; overflow-y:auto; padding:10px 14px 20px }

.br{
  display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center;
  width:100%; text-align:left; padding:10px 12px; border-radius:var(--r-m); transition:background .2s, box-shadow .2s;
}
.br:hover,.br--activo{ background:var(--negro); box-shadow:var(--hilo-oro) }
.br__vis{ width:56px; height:56px; border-radius:var(--r-s); display:grid; place-items:center; overflow:hidden; position:relative; box-shadow:var(--hilo-oro) }
.br__vis .frasco--foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:3px; mix-blend-mode:multiply }
.br__vis svg{ width:62% }
.br__info{ min-width:0 }
.br__marca{ font-size:.54rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-hondo) }
.br__nom{ font-family:var(--serif); font-size:1.05rem; line-height:1.25; color:var(--tinta);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.br__meta{ font-size:.76rem; color:var(--gris); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.br__precio{ font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--oro-hondo); white-space:nowrap }

.buscar__sub{ padding:20px 12px 10px; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gris-2) }
.buscar__chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 12px 8px }
.buscar__chip{
  padding:8px 15px; border:1px solid var(--linea); border-radius:999px; font-size:.82rem; color:var(--tinta);
  transition:border-color .25s, color .25s;
}
.buscar__chip:hover{ border-color:var(--oro); color:var(--oro-hondo) }
.buscar__vacio{ text-align:center; padding:50px 24px; color:var(--gris) }
.buscar__vacio p{ font-family:var(--serif); font-size:1.1rem; font-style:italic; color:var(--gris); margin-bottom:4px }
.buscar__vacio small{ font-size:.82rem }
.buscar__vacio .btn{ margin-top:18px }

.carro__pie{
  padding:22px 28px 26px; border-top:1px solid rgba(125,100,40,.16);
  background:linear-gradient(180deg, var(--negro-2), var(--negro-3));
  box-shadow:0 -14px 30px -24px rgba(42,36,32,.3);
}
.meta{ margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--linea-2) }
.meta p{ font-size:.79rem; color:var(--gris); margin-bottom:9px; letter-spacing:.03em }
.meta p strong{ color:var(--oro-hondo); font-weight:500 }
.meta__pista{ height:3px; background:var(--carbon); border-radius:3px; overflow:hidden }
.meta__val{ height:100%; border-radius:3px; background:linear-gradient(90deg,var(--oro-hondo),var(--oro)); transition:width .55s var(--curva) }
.meta--ok .meta__val{ background:linear-gradient(90deg,#12915C,#2AC46A) }
.res{ display:flex; justify-content:space-between; margin-bottom:11px; font-size:.88rem; color:var(--gris) }
.res--envio strong{ color:var(--oro-hondo); font-weight:400 }
.res--total{
  font-size:1.05rem; color:var(--tinta); padding-top:15px; margin-top:6px;
  border-top:1px solid var(--linea-2); margin-bottom:20px; align-items:baseline;
}
.res--total b{ font-family:var(--serif); font-size:2rem; color:var(--tinta); font-weight:600; letter-spacing:-.01em }
.carro__aviso{ font-size:.7rem; color:var(--gris-2); text-align:center; margin-top:14px; line-height:1.6 }

/* ══════════ WHATSAPP FLOTANTE ══════════ */
.wa{
  position:fixed; bottom:24px; right:24px; z-index:90;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#2AC46A,#12915C); color:#fff;
  box-shadow:0 12px 32px -10px rgba(18,145,92,.75);
  transition:transform .4s var(--curva), box-shadow .4s, bottom .3s var(--curva);
}
.wa svg{ width:29px; height:29px }
.wa:hover{ transform:scale(1.08) translateY(-2px); box-shadow:0 18px 40px -10px rgba(18,145,92,.9) }
/* Mientras el banner de cookies esté visible, el botón sube por encima —
   si no, la franja de cookies lo tapa entero hasta que el visitante
   responda (pasa en cualquier ancho, no solo en móvil). */
body:has(#cookiesAviso:not([hidden])) .wa{ bottom:190px }

/* ══════════ CHAT DE VENTAS (IA) — rediseño "nivel 2028" ══════════
   Pedido de Daniel (2026-10): la ventana era chica (~380px), los íconos se
   veían sobredimensionados, los chips quedaban cortados y "se ve horrible".
   Ahora: ventana grande (448×680 en escritorio, casi pantalla completa en el
   celular), encabezado burdeo con el avatar ilustrado del asesor y su punto
   "en línea", burbujas con hora y avatar como una app de mensajería,
   tarjetas de perfume deslizables, chips en una fila con desvanecido en el
   borde que tiene más, y un campo tipo píldora con íconos de 38px.
   El HTML lo arman index.html y, para los mensajes, chatiaPintarMensaje /
   chatiaPintarTarjetas / chatiaPintarSugerencias en app.js. */

/* Avatar ilustrado (AVATAR_ASESOR_SVG en app.js), siempre en círculo. */
.av{ display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; background:#F0E2C2 }
.av svg{ display:block; width:100%; height:100% }

/* Punto "en línea": decorativo (el asesor atiende 24/7). Late suave. */
.punto-online{
  position:absolute; right:0; bottom:0; width:12px; height:12px; border-radius:50%;
  background:var(--en-linea); box-shadow:0 0 0 2px #FFFFFF;
}
.punto-online::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--en-linea);
  animation:latido 2.6s ease-out infinite;
}
@keyframes latido{ 0%{ transform:scale(1); opacity:.55 } 70%,100%{ transform:scale(2.6); opacity:0 } }
.punto-online--suelto{ position:relative; display:inline-block; width:8px; height:8px; margin-right:9px; vertical-align:1px; box-shadow:none }

/* ── Globo flotante (abre/cierra el chat) ── */
.chatia{
  position:fixed; bottom:24px; left:24px; z-index:90;
  display:flex; align-items:center; padding:5px; border-radius:999px;
  background:rgba(253,251,247,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(125,100,40,.22); color:var(--tinta);
  box-shadow:0 2px 6px rgba(42,36,32,.1), 0 18px 40px -16px rgba(90,26,36,.6);
  transition:transform .4s var(--curva), box-shadow .4s, bottom .3s var(--curva);
}
.chatia:hover{ transform:translateY(-2px); box-shadow:0 3px 8px rgba(42,36,32,.12), 0 24px 46px -16px rgba(90,26,36,.7) }
.chatia:focus-visible{ outline:2px solid var(--marfil); outline-offset:3px }
.chatia__burbuja{
  position:relative; flex:none; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--burdeo-claro),var(--marfil) 70%);
  box-shadow:inset 0 0 0 2px rgba(221,190,102,.8);
}
.chatia__burbuja-av{
  display:block; width:46px; height:46px; border-radius:50%; overflow:hidden;
  transition:opacity .3s var(--curva), transform .4s var(--curva);
}
.chatia__burbuja-x{
  position:absolute; width:24px; height:24px; color:#FBF6EE;
  opacity:0; transform:rotate(-90deg) scale(.6); transition:opacity .3s var(--curva), transform .4s var(--curva);
}
.chatia__burbuja .punto-online{ right:1px; bottom:1px; width:13px; height:13px }
.chatia[aria-expanded="true"] .chatia__burbuja-av{ opacity:0; transform:scale(.6) }
.chatia[aria-expanded="true"] .chatia__burbuja-x{ opacity:1; transform:none }
.chatia[aria-expanded="true"] .punto-online{ display:none }
.chatia__burbuja-txt{
  display:flex; flex-direction:column; text-align:left; line-height:1.25; white-space:nowrap;
  max-width:0; overflow:hidden; opacity:0; padding:0;
  transition:max-width .5s var(--curva), opacity .35s, padding .5s var(--curva);
}
.chatia__burbuja-txt strong{ font-size:.86rem; font-weight:500; color:var(--tinta) }
.chatia__burbuja-txt small{ font-size:.7rem; color:var(--verde-texto) }
@media (hover:hover) and (min-width:861px){
  .chatia[aria-expanded="false"]:hover .chatia__burbuja-txt,
  .chatia[aria-expanded="false"]:focus-visible .chatia__burbuja-txt{ max-width:240px; opacity:1; padding:0 18px 0 12px }
  /* Se presenta solo una vez al cargar y se recoge (fill backwards: al
     terminar vuelve al estado normal, así el hover sigue funcionando). */
  .chatia[aria-expanded="false"] .chatia__burbuja-txt{ animation:globoPresenta 7s 2.5s var(--curva) backwards }
}
/* El saludo no se despliega con el aviso de cookies abierto (subía sobre el aviso y tapaba el buscador del hero) ni con
   el hero a la vista (tapaba el buscador o la franja de beneficios): se presenta al bajar por la página. */
body:has(#cookiesAviso:not([hidden])) .chatia .chatia__burbuja-txt,
body:has(#inicio:not(.hero--fuera):not([hidden])) .chatia .chatia__burbuja-txt{ animation:none }
@keyframes globoPresenta{
  0%, 100%{ max-width:0; opacity:0; padding:0 }
  10%, 86%{ max-width:240px; opacity:1; padding:0 18px 0 12px }
}

/* ── Ventana ── */
.chatia__panel{
  position:fixed; bottom:96px; left:24px; z-index:95;
  width:min(448px, calc(100vw - 48px)); height:min(680px, calc(100vh - 120px)); height:min(680px, calc(100dvh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#FBF8F3; border:1px solid rgba(125,100,40,.22); border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 2px 6px rgba(20,16,12,.08),
             0 30px 70px -24px rgba(42,20,24,.5), 0 70px 120px -60px rgba(90,26,36,.5);
  transform-origin:bottom left; animation:chatEntra .45s var(--curva);
}
@keyframes chatEntra{ from{ opacity:0; transform:translateY(18px) scale(.96) } }

/* Encabezado burdeo con brillo dorado: identidad de la marca y contraste alto. */
.chatia__cab{
  position:relative; flex:none; display:flex; align-items:center; gap:13px; padding:14px 14px 14px 16px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(221,190,102,.3), transparent 55%),
    linear-gradient(135deg,#6E2230 0%,var(--marfil) 55%,var(--burdeo-hondo) 100%);
  color:#FBF6EE;
}
.chatia__cab::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(221,190,102,.75),transparent);
}
.chatia__avatar{
  position:relative; flex:none; width:50px; height:50px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(221,190,102,.9), 0 8px 18px -6px rgba(0,0,0,.55);
}
.chatia__avatar .punto-online{ box-shadow:0 0 0 2.5px var(--marfil) }
.chatia__cab-txt{ flex:1; min-width:0 }
.chatia__cab strong{ display:block; font-family:var(--serif); font-size:1.38rem; font-weight:500; line-height:1.1; letter-spacing:.01em; color:#FFF8EE }
.chatia__cab span{ display:block; margin-top:3px; font-size:.74rem; color:rgba(251,246,238,.84); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chatia__cerrar{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#FBF6EE;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  transition:background .25s, transform .35s var(--curva);
}
.chatia__cerrar svg{ width:18px; height:18px }
.chatia__cerrar:hover{ background:rgba(255,255,255,.2); transform:rotate(90deg) }
.chatia__cerrar:focus-visible{ outline:2px solid var(--oro-claro); outline-offset:2px }

/* ── Conversación ── */
.chatia__hilo{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:18px 16px 14px; display:flex; flex-direction:column; gap:6px;
  background:
    radial-gradient(rgba(125,100,40,.075) 1px, transparent 1.3px) 0 0 / 18px 18px,
    linear-gradient(180deg,#F5F0E6 0%,#FBF8F3 46%);
  scrollbar-width:thin; scrollbar-color:rgba(125,100,40,.35) transparent;
}
/* Nada del hilo se encoge: sin esto, las tarjetas (overflow-x:auto) se
   aplastaban a 0 de alto apenas la conversación pasaba el alto visible. */
.chatia__hilo > *{ flex-shrink:0 }
.chatia__hilo::-webkit-scrollbar{ width:6px }
.chatia__hilo::-webkit-scrollbar-thumb{ background:rgba(125,100,40,.3); border-radius:6px }

/* Presentación al inicio de la conversación */
.chatia__intro{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:4px 8px 2px }
.chatia__intro-av{
  width:76px; height:76px; border-radius:50%; margin-bottom:10px;
  box-shadow:0 0 0 3px #FFFFFF, 0 0 0 4.5px rgba(196,162,74,.65), 0 16px 30px -12px rgba(90,26,36,.55);
}
.chatia__intro-nom{ font-size:.8rem; color:var(--gris) }
.chatia__intro-nom b{ font-family:var(--serif); font-size:1.12rem; font-weight:600; color:var(--tinta) }
.chatia__intro-txt{ max-width:32ch; margin-top:3px; font-size:.8rem; line-height:1.5; color:var(--gris) }
.chatia__intro-pasos{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px }
.chatia__intro-pasos li{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px 5px 9px; border-radius:999px;
  background:#FFFFFF; border:1px solid var(--linea-2); box-shadow:0 1px 2px rgba(42,36,32,.05);
  font-size:.68rem; color:var(--tinta);
}
.chatia__intro-pasos svg{ width:13px; height:13px; color:var(--marfil); flex:none }
.chatia__dia{
  display:flex; align-items:center; gap:10px; width:100%; margin:16px 0 4px;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-2);
}
.chatia__dia::before, .chatia__dia::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--linea),transparent) }

/* Filas de mensajes: avatar solo en la última burbuja de cada tanda. */
.chatia__fila{ display:flex; align-items:flex-end; gap:8px; animation:msgEntra .35s var(--curva) }
.chatia__fila--yo{ justify-content:flex-end }
.chatia__fila--bot + .chatia__fila--yo, .chatia__fila--yo + .chatia__fila--bot{ margin-top:8px }
@keyframes msgEntra{ from{ opacity:0; transform:translateY(8px) } }
.chatia__mini{
  flex:none; width:30px; height:30px; border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(196,162,74,.65), 0 4px 10px -4px rgba(90,26,36,.45);
}
.chatia__fila--sigue .chatia__mini{ visibility:hidden }
.chatia__msg{
  max-width:80%; padding:10px 14px 7px; border-radius:18px;
  font-size:.9rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere;
}
.chatia__msg--bot{
  background:#FFFFFF; color:var(--tinta); border:1px solid rgba(125,100,40,.13); border-bottom-left-radius:6px;
  box-shadow:0 1px 2px rgba(42,36,32,.05), 0 10px 20px -16px rgba(42,36,32,.35);
}
.chatia__msg--yo{
  background:linear-gradient(160deg,var(--burdeo-claro),var(--marfil) 75%); color:#FBF6EE; border-bottom-right-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 22px -14px rgba(90,26,36,.85);
}
.chatia__fila--sigue .chatia__msg--bot{ border-bottom-left-radius:18px }
.chatia__fila--sigue .chatia__msg--yo{ border-bottom-right-radius:18px }
.chatia__hora{
  float:right; margin:7px 0 -2px 12px; font-size:.62rem; line-height:1.3; white-space:nowrap;
  color:var(--gris-2); font-variant-numeric:tabular-nums;
}
.chatia__msg--yo .chatia__hora{ color:rgba(251,246,238,.75) }

/* "Escribiendo…" */
.chatia__typing{ display:flex; align-items:flex-end; gap:8px; margin-top:4px; animation:msgEntra .3s var(--curva) }
.chatia__typing-burbuja{
  display:flex; align-items:center; gap:5px; padding:13px 16px;
  background:#FFFFFF; border:1px solid rgba(125,100,40,.13); border-radius:18px; border-bottom-left-radius:6px;
  box-shadow:0 1px 2px rgba(42,36,32,.05), 0 10px 20px -16px rgba(42,36,32,.35);
}
.chatia__typing-burbuja i{ width:7px; height:7px; border-radius:50%; background:var(--marfil); opacity:.3; animation:puntito 1.2s ease-in-out infinite }
.chatia__typing-burbuja i:nth-child(2){ animation-delay:.15s }
.chatia__typing-burbuja i:nth-child(3){ animation-delay:.3s }
.chatia__typing-txt{ align-self:center; font-size:.7rem; font-style:italic; color:var(--gris) }
@keyframes puntito{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

/* Respuestas del quiz (botones dentro de la conversación) */
.chatia__quiz-opciones{
  display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 4px 38px; max-width:calc(100% - 38px);
  animation:msgEntra .3s var(--curva);
}

/* Tarjetas de perfume dentro del chat: carrusel de 2 visibles, con foto,
   precio y "Agregar" (mismo carrito). Si es una sola, va horizontal. */
.chatia__soporte{display:flex;flex-direction:column;gap:6px;margin:8px 0 8px 40px;padding:14px 16px;border-radius:16px;border:1px solid var(--marfil-borde);background:var(--superficie-alta);box-shadow:0 6px 18px -10px rgba(42,36,32,.25);max-width:calc(100% - 52px)}
.chatia__soporte-t{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--tinta)}
.chatia__soporte-s{font-size:.82rem;color:var(--gris);line-height:1.45}
.chatia__soporte-b{align-self:flex-start;margin-top:4px;padding:10px 18px;border-radius:999px;background:var(--marfil);color:#FBF6EE;font-size:.8rem;letter-spacing:.06em;font-weight:500;text-decoration:none}
.chatia__soporte-b:hover{background:var(--burdeo-hondo)}
.chatia__prods{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc(50% - 5px); gap:10px;
  margin:4px 0 6px 38px; padding:2px 2px 8px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; animation:msgEntra .35s var(--curva);
}
.chatia__prods::-webkit-scrollbar{ display:none }
.chatia__prod{
  scroll-snap-align:start; min-width:0; display:flex; flex-direction:column; overflow:hidden; cursor:pointer;
  background:#FFFFFF; border:1px solid rgba(125,100,40,.15); border-radius:16px;
  box-shadow:0 1px 2px rgba(42,36,32,.05), 0 14px 26px -20px rgba(42,36,32,.5);
  transition:transform .3s var(--curva), box-shadow .3s var(--curva), border-color .3s;
}
.chatia__prod:hover{ transform:translateY(-2px); border-color:rgba(90,26,36,.3); box-shadow:0 20px 32px -20px rgba(42,36,32,.55) }
.chatia__prod:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.chatia__prod-foto{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; background:var(--escena) }
.chatia__prod-foto img{ width:100%; height:100%; object-fit:contain; padding:8px; mix-blend-mode:multiply; transform:scale(1.06) }
.chatia__prod-foto svg{ width:44%; height:auto }
.chatia__prod-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; padding:10px 12px 12px }
.chatia__prod-marca{ font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-hondo); font-weight:600 }
.chatia__prod-nom{
  font-family:var(--serif); font-size:1.04rem; font-weight:500; line-height:1.2; color:var(--tinta);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.chatia__prod-meta{ font-size:.68rem; color:var(--gris) }
.chatia__prod-precio{
  margin:4px 0 10px; font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--tinta);
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1;
}
.chatia__prod-add{
  margin-top:auto; width:100%; height:34px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:999px; border:1px solid var(--marfil);
  background:linear-gradient(180deg,var(--burdeo-claro),var(--marfil)); color:#FBF6EE;
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 16px -10px rgba(90,26,36,.75);
  transition:filter .25s, transform .2s;
}
.chatia__prod-add svg{ width:15px; height:15px; flex:none }
.chatia__prod-add:hover{ filter:brightness(1.14) }
.chatia__prod-add:active{ transform:scale(.96) }
.chatia__prod-add:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.chatia__prod-estado{
  margin-top:auto; align-self:flex-start; padding:4px 11px; border-radius:999px; border:1px dashed var(--carbon);
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris);
}
/* Si quedan tarjetas a un lado, ese borde se desvanece (clases desde app.js). */
.chatia__prods--mas{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
}
.chatia__prods--antes{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px); mask-image:linear-gradient(90deg,transparent,#000 28px);
}
.chatia__prods--antes.chatia__prods--mas{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
}
/* Flechas del carrusel del chat: ir y volver entre las recomendaciones. */
.chatia__carrusel{ position:relative }
.chatia__flecha{
  position:absolute; top:34%; z-index:2; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; padding:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--marfil); border:1px solid rgba(90,26,36,.22);
  box-shadow:0 6px 16px -8px rgba(42,36,32,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .2s var(--curva), background .2s;
}
.chatia__flecha svg{ width:16px; height:16px }
.chatia__flecha:hover{ background:#fff; transform:scale(1.08) }
.chatia__flecha:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.chatia__flecha[hidden]{ display:none }
.chatia__flecha--ant{ left:30px }
.chatia__flecha--sig{ right:-4px }
.chatia__prods:has(> .chatia__prod:only-child){ grid-auto-columns:100% }
.chatia__prod:only-child{ flex-direction:row }
.chatia__prod:only-child .chatia__prod-foto{ width:120px; flex:none; aspect-ratio:auto }
.chatia__prod:only-child .chatia__prod-add{ width:auto; padding:0 16px; align-self:flex-start }

/* Respuestas rápidas: una fila deslizable; el desvanecido aparece solo en
   el borde que todavía esconde chips (clases --izq/--der desde app.js). */
.chatia__sugeridas{
  --fade-izq:0px; --fade-der:0px;
  flex:none; display:flex; gap:8px; overflow-x:auto; padding:10px 16px 4px;
  background:#FFFFFF; border-top:1px solid var(--linea-2);
  scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scroll-padding-inline:16px;
  mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade-izq), #000 calc(100% - var(--fade-der)), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade-izq), #000 calc(100% - var(--fade-der)), transparent 100%);
}
.chatia__sugeridas--izq{ --fade-izq:40px }
.chatia__sugeridas--der{ --fade-der:48px }
.chatia__sugeridas::-webkit-scrollbar{ display:none }
.chatia__sugeridas:empty{ display:none }
.chatia__sugeridas .chatia__chip{ flex:none; scroll-snap-align:start }
.chatia__sugeridas .chatia__chip:last-child{ margin-right:16px }
.chatia__chip{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 15px; border-radius:999px;
  border:1px solid rgba(90,26,36,.24); background:#FFFFFF; color:var(--marfil);
  font-size:.8rem; letter-spacing:.005em; white-space:nowrap; box-shadow:0 1px 2px rgba(42,36,32,.06);
  transition:background .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva), box-shadow .25s var(--curva), transform .2s;
}
.chatia__chip svg{ width:15px; height:15px; flex:none }
.chatia__chip:hover{ border-color:var(--marfil); background:var(--marfil); color:#FBF6EE; box-shadow:0 8px 18px -10px rgba(90,26,36,.55) }
.chatia__chip:active{ transform:scale(.96) }
.chatia__chip:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.chatia__chip:disabled{ opacity:.45; pointer-events:none }
.chatia__chip[data-quiz-iniciar]{
  background:linear-gradient(180deg,#DCBF6E 0%,var(--oro) 58%,#B8954A 100%); border-color:rgba(125,100,40,.5);
  color:var(--tinta); font-weight:500; box-shadow:inset 0 1px 0 rgba(255,250,232,.55), 0 6px 14px -8px rgba(125,100,40,.6);
}
.chatia__chip[data-quiz-iniciar]:hover{ color:var(--tinta); background:linear-gradient(180deg,#E3C878 0%,#CDA94E 58%,#BE9B4E 100%); border-color:rgba(125,100,40,.6) }

/* Campo tipo píldora con micrófono y enviar adentro (38px, no gigantes). */
.chatia__form{ flex:none; padding:10px 14px 10px; background:#FFFFFF; border-top:1px solid var(--linea-2) }
.chatia__sugeridas:not(:empty) + .chatia__form{ border-top:0; padding-top:8px }
.chatia__campo{
  display:flex; align-items:flex-end; gap:4px; padding:4px 4px 4px 18px; border-radius:999px;
  background:var(--negro); border:1px solid rgba(42,36,32,.15); box-shadow:inset 0 1px 2px rgba(42,36,32,.05);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.chatia__campo:focus-within{ background:#FFFFFF; border-color:rgba(196,162,74,.9); box-shadow:0 0 0 4px rgba(196,162,74,.16) }
/* Caja de texto: textarea que crece de 1 a 4 líneas (max-height en rem) y luego hace scroll fino; botones alineados abajo. */
.chatia__campo--multi{ border-radius:22px }
.chatia__campo textarea{
  flex:1; min-width:0; border:0; background:none; padding:9.5px 0; margin:0; resize:none; display:block;
  font-family:var(--sans); font-size:1rem; line-height:1.35rem; font-weight:400; color:var(--tinta);
  height:auto; max-height:calc(4 * 1.35rem + 19px); overflow-y:hidden; scrollbar-width:thin; scrollbar-color:rgba(125,100,40,.45) transparent;
}
.chatia__campo textarea:focus{ outline:none }
.chatia__campo textarea::placeholder{ color:var(--gris-2) }
.chatia__campo textarea::-webkit-scrollbar{ width:6px }
.chatia__campo textarea::-webkit-scrollbar-thumb{ background:rgba(125,100,40,.45); border-radius:3px }
.chatia__mic, .chatia__enviar{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  transition:background .25s, color .25s, filter .25s, transform .2s, opacity .25s;
}
.chatia__mic svg, .chatia__enviar svg{ width:19px; height:19px }
.chatia__mic{ color:var(--marfil); background:transparent }
.chatia__mic:hover{ background:var(--marfil-suave) }
.chatia__mic[aria-pressed="true"]{ background:var(--marfil); color:#FBF6EE; animation:chatiaEscucha 1.3s ease-in-out infinite }
@keyframes chatiaEscucha{ 0%,100%{ box-shadow:0 0 0 0 var(--marfil-borde) } 50%{ box-shadow:0 0 0 8px transparent } }
.chatia__enviar{
  background:linear-gradient(150deg,var(--burdeo-claro),var(--marfil) 70%); color:#FBF6EE;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -8px rgba(90,26,36,.75);
}
.chatia__enviar:hover{ filter:brightness(1.14); transform:scale(1.05) }
.chatia__campo:has(textarea:placeholder-shown) .chatia__enviar{ opacity:.55 }
.chatia__mic:disabled, .chatia__enviar:disabled{ opacity:.45; cursor:default; transform:none }
.chatia__mic:focus-visible, .chatia__enviar:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.chatia__seguro{
  display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px;
  font-size:.68rem; line-height:1.4; color:var(--gris); text-align:center;
}
.chatia__seguro svg{ width:12px; height:12px; flex:none; color:var(--verde-texto) }
.chatia__seguro a, .chatia__ia-aviso a{ color:inherit; text-decoration:underline; text-underline-offset:2px }
.chatia__ia-aviso{ margin:8px 0 0; font-size:.72rem; line-height:1.45; color:var(--gris); text-align:center }

/* Con el aviso de cookies a la vista, globo y ventana suben sobre él (en
   el celular el aviso, fijo abajo, tapaba el campo de texto). */
body:has(#cookiesAviso:not([hidden])) .chatia{ bottom:calc(var(--alto-cookies, 190px) + 22px) }
@media (min-width:561px){ body:has(#cookiesAviso:not([hidden])) .chatia__panel{ bottom:calc(var(--alto-cookies, 190px) + 94px); height:min(640px, calc(100vh - var(--alto-cookies, 190px) - 120px)) } }
/* Pantallas bajas: subir el globo por encima del aviso lo dejaba sobre el
   menú de categorías. Mientras el aviso esté abierto, el globo espera. */
@media (max-height:700px){
  body:has(#cookiesAviso:not([hidden])) .chatia{ opacity:0; pointer-events:none }
}

/* Celular: casi pantalla completa, con margen y esquinas redondeadas. El
   globo se esconde mientras está abierto (la ventana tiene su propia X) y
   la página de atrás no se desplaza. */
@media (max-width:560px){
  .chatia{ bottom:16px; left:16px; padding:4px; transition:opacity .3s }
  /* Con el hero a la vista el globo tapaba «Comprar ahora» y «Te ayudo a elegir» (que abre el mismo asesor): espera
     hasta que el hero sale de la pantalla (hero--fuera, iniciarHero en app.js). */
  body:has(#inicio:not(.hero--fuera):not([hidden])) .chatia[aria-expanded="false"]{ opacity:0; visibility:hidden; pointer-events:none }
  .chatia__burbuja{ width:52px; height:52px }
  .chatia__burbuja-av{ width:44px; height:44px }
  .chatia[aria-expanded="true"]{ display:none }
  /* El panel mide el viewport VISUAL (app.js → chatiaAjustarTeclado fija
     --vv-top y --vv-h): con el teclado abierto se achica y queda encima de
     él, con el campo de texto siempre a la vista. --vv-extra deja sitio a la
     barra ▲▼✓ que iOS dibuja sobre el borde del teclado. */
  .chatia__panel{
    left:8px; right:8px;
    top:calc(var(--vv-top, 0px) + max(8px, env(safe-area-inset-top))); bottom:auto;
    width:auto; border-radius:22px; transform-origin:bottom center;
    height:calc(var(--vv-h, 100dvh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)) - var(--vv-extra, 0px));
  }
  body.chatia-abierto{ overflow:hidden }
  /* Página de atrás congelada (app.js guarda y restaura su posición): sin esto iOS
     la desplaza al enfocar el campo y el chat "se mueve" al hacer scroll. */
  body.chatia-congelado{ position:fixed; left:0; right:0; width:100%; overflow:hidden }
  /* Con el teclado abierto no sobra alto: se compacta lo decorativo. */
  body.chatia-teclado .chatia__panel{ border-radius:18px;
    height:calc(var(--vv-h, 100dvh) - 14px - var(--vv-extra, 0px)); top:calc(var(--vv-top, 0px) + 7px) }
  body.chatia-teclado .chatia__intro-av,
  body.chatia-teclado .chatia__intro-txt,
  body.chatia-teclado .chatia__intro-pasos,
  body.chatia-teclado .chatia__seguro{ display:none }
  body.chatia-teclado .chatia__cab{ padding:8px 12px 8px 14px }
  body.chatia-teclado .chatia__avatar{ width:38px; height:38px }
  body.chatia-teclado .chatia__cab strong{ font-size:1.12rem }
  body.chatia-teclado .chatia__cab-txt span{ display:none }
  body.chatia-teclado .chatia__form{ padding-bottom:8px }
  body.chatia-abierto .aviso{ top:14px; bottom:auto; transform:translate(-50%,calc(-100% - 20px)) }
  body.chatia-abierto .aviso.ver{ transform:translate(-50%,0) }
  .chatia__msg{ max-width:84% }
  .chatia__cab{ padding:12px 12px 12px 14px }
  body:has(#cookiesAviso:not([hidden])) .chatia{ bottom:calc(var(--alto-cookies, 280px) + 14px) }
  /* Con el chat abierto el aviso de cookies espera (vuelve al cerrarlo): no tapa el campo ni cambia el alto del panel. */
  body.chatia-abierto #cookiesAviso{ visibility:hidden }
}

@media (prefers-reduced-motion:reduce){
  .chatia__panel, .chatia__fila, .chatia__typing, .chatia__prods, .chatia__quiz-opciones{ animation:none }
  .punto-online::after{ animation:none; display:none }
  .chatia__typing-burbuja i{ animation:none; opacity:.6 }
  .chatia__burbuja-txt{ animation:none !important; transition:none }
  .chatia__mic[aria-pressed="true"]{ animation:none }
  .chatia, .chatia__burbuja-av, .chatia__burbuja-x, .chatia__cerrar, .chatia__prod{ transition:none }
}

/* ══════════ AVISO EMERGENTE ══════════ */
.aviso{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%,calc(100% + 26px)); z-index:120;
  background:var(--superficie-alta); border:1px solid var(--oro); border-radius:999px;
  padding:13px 28px; font-size:.78rem; letter-spacing:.08em; color:var(--tinta);
  box-shadow:0 18px 44px -18px rgba(26,20,16,.35); transition:transform .5s var(--curva);
  white-space:nowrap; max-width:calc(100vw - 40px); overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}
.aviso.ver{ transform:translate(-50%,0); pointer-events:auto }

/* ══════════ ALERTA DE CONFIGURACIÓN (solo la ves tú) ══════════ */
.alerta{
  position:fixed; left:16px; bottom:16px; z-index:95; max-width:340px;
  background:#3A1C10; border:1px solid #C9762E; border-left-width:3px; border-radius:3px;
  padding:14px 18px; font-size:.79rem; line-height:1.65; color:#F5DFC8;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.9);
}
.alerta strong{ display:block; color:#F2B366; font-weight:500; margin-bottom:4px }
.alerta code{
  font-family:ui-monospace,Consolas,monospace; font-size:.74rem;
  background:rgba(0,0,0,.35); padding:1px 5px; border-radius:2px; color:#FFD9A8;
}

/* ══════════ AVISO DE COOKIES (Ley 21.719) ══════════
   17-oct-2026 (pedido de Daniel: «tírala en grande como para que se lo puedan aceptar, y poder medir eso de las
   visitas»): en el celular es una hoja inferior de cerca de un tercio de la pantalla y en el escritorio una tarjeta
   grande centrada abajo, sobre todo lo demás hasta que el visitante elija (sin botón de cerrar sin elegir: el
   consentimiento debe ser previo y explícito). «Aceptar» y «Solo necesarias» miden lo mismo y usan la misma letra; el
   realce de «Aceptar» es solo el color: rechazar es igual de fácil (ley de datos personales y modo de consentimiento de
   Google). En el celular van lado a lado (la hoja baja de 320 a unos 250 px). No bloquea la página: no hay fondo oscuro
   y se puede seguir mirando y comprando. Con el carrito, el pago o el buscador abiertos (body.bloqueado) el aviso se
   pliega y vuelve al cerrarlos: tapaba «Pagar con Webpay» en el celular. Mientras tanto no hay consentimiento, así que
   no se mide nada que lo requiera. */
.cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:200; pointer-events:none;
  display:flex; justify-content:center; padding:0 16px 16px;
  animation:sube .5s var(--curva);
}
.cookies__caja{
  pointer-events:auto; width:min(780px,100%);
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(190px,auto); align-items:center; gap:16px 22px;
  padding:24px 26px; border-radius:var(--r-l);
  background:var(--superficie-alta); border:1px solid rgba(125,100,40,.24);
  box-shadow:0 2px 6px rgba(20,16,12,.08), 0 30px 70px -22px rgba(42,20,24,.5);
}
.cookies__ico{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:var(--marfil);
  background:radial-gradient(circle at 30% 25%, #FFFFFF, var(--negro-2)); box-shadow:var(--hilo-oro);
}
.cookies__ico svg{ width:26px; height:26px }
.cookies__tit{ font-family:var(--serif); font-size:1.6rem; font-weight:500; line-height:1.12; color:var(--tinta); margin-bottom:6px }
.cookies__texto{ font-size:.92rem; line-height:1.6; color:var(--gris) }
.cookies__texto a{ color:var(--marfil); text-decoration:underline; text-underline-offset:2px; white-space:nowrap }
.cookies__fin{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px }
.cookies__fin li{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; font-size:.84rem; line-height:1.45; color:var(--gris) }
.cookies__fin b{ font-weight:500; color:var(--tinta) }
.cookies__hoy{ margin-top:8px; font-size:.84rem; font-weight:500; color:var(--marfil) }
.cookies__acciones{ display:flex; flex-direction:column; gap:10px }
.cookies__acciones .btn{ width:100%; padding:14px 24px }
body.bloqueado #cookiesAviso{ visibility:hidden }
@media (max-width:640px){
  .cookies{ padding:0 }
  /* Hoja inferior: cerca de un tercio de la pantalla, con los dos botones a todo el ancho. */
  .cookies__caja{
    grid-template-columns:auto minmax(0,1fr); align-content:center; gap:14px 14px;
    padding:20px 18px calc(16px + env(safe-area-inset-bottom));
    border-radius:22px 22px 0 0; border-bottom:0;
  }
  .cookies__ico{ width:44px; height:44px; align-self:start }
  .cookies__ico svg{ width:22px; height:22px }
  .cookies__tit{ font-size:1.42rem }
  .cookies__texto{ font-size:.88rem }
  .cookies__fin li{ grid-template-columns:1fr; gap:0; font-size:.8rem }
  /* Dos columnas iguales (con flex, el borde de «Solo necesarias» la dejaba 2 px más ancha que «Aceptar»). */
  .cookies__acciones{ grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .cookies__acciones .btn{ min-width:0; padding:15px 10px; letter-spacing:.12em; white-space:nowrap }
}

/* ══════════ PORTADA COMERCIAL (rediseño 2026-10) ══════════
   Franja de beneficios, rieles de productos, "Compra por categoría", banda
   del asesor y la colección como herramienta de compra (título + filtros
   en una barra). Mismo papel crema, oro y burdeo de siempre: el formato es
   de retail grande, la identidad sigue siendo DYK. */

/* ── Franja de beneficios ── */
.beneficios{ background:var(--superficie-alta); border-block:1px solid var(--linea-2) }
.beneficios__int{
  max-width:var(--max); margin-inline:auto; padding:16px var(--pad);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.beneficio{ position:relative; display:flex; align-items:center; gap:13px; padding:4px 6px; text-align:left; min-width:0 }
.beneficio + .beneficio::before{
  content:''; position:absolute; left:-6px; top:15%; bottom:15%; width:1px;
  background:linear-gradient(transparent,var(--linea),transparent);
}
.beneficio__ico{
  position:relative; flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 25%, #FFFFFF, var(--negro-2)); color:var(--marfil);
  box-shadow:var(--hilo-oro), 0 6px 14px -10px rgba(90,26,36,.5);
}
.beneficio__ico svg{ width:22px; height:22px }
.beneficio__ico--av{ box-shadow:0 0 0 1.5px rgba(196,162,74,.7), 0 6px 14px -10px rgba(90,26,36,.5) }
.beneficio__ico--av .punto-online{ width:11px; height:11px }
.beneficio strong{ display:block; font-size:.86rem; font-weight:500; color:var(--tinta); line-height:1.3 }
.beneficio div span{ display:block; font-size:.74rem; color:var(--gris); line-height:1.35 }
.beneficio--accion{ border-radius:12px; transition:background .25s }
.beneficio--accion:hover{ background:var(--marfil-suave) }
.beneficio--accion:hover strong{ color:var(--marfil) }

/* ── Rieles de productos ── */
.riel{ padding:clamp(40px,5vw,64px) 0 0 }
.riel__cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px }
.riel__kicker{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--oro-hondo); font-weight:600; margin-bottom:6px }
.riel__tit{ font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.08; letter-spacing:-.01em; color:var(--tinta) }
.riel__ctrl{ display:flex; align-items:center; gap:8px; flex:none }
.riel__todo{
  display:inline-flex; align-items:center; gap:6px; margin-right:8px; padding:6px 2px;
  font-size:.84rem; font-weight:500; color:var(--marfil); white-space:nowrap;
  border-bottom:1px solid rgba(90,26,36,.25); transition:border-color .25s, gap .25s var(--curva);
}
.riel__todo::after{ content:'→' }
.riel__todo:hover{ border-color:var(--marfil); gap:10px }
.riel__flecha{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--carbon); background:var(--superficie-alta); color:var(--tinta); box-shadow:var(--sombra-1);
  transition:border-color .25s, color .25s, opacity .25s, background .25s;
}
.riel__flecha svg{ width:18px; height:18px }
.riel__flecha:hover:not(:disabled){ border-color:var(--marfil); color:var(--marfil); background:#FFFFFF }
.riel__flecha:disabled{ opacity:.35; cursor:default; box-shadow:none }
.riel--quieto .riel__flecha{ display:none }
.riel__pista{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4 * 20px) / 5); gap:20px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:6px 4px 22px; margin-inline:-4px;
}
.riel__pista::-webkit-scrollbar{ display:none }
.riel__pista > .tarj{ scroll-snap-align:start }
.ficha-rel{ margin-top:clamp(48px,6vw,84px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--linea-2) }

/* Ajustes de la tarjeta según su propio ancho (rieles y rejilla). */
.tarj{ container-type:inline-size }
@container (max-width:215px){ .tarj__add-mas{ display:none } }
@container (max-width:175px){
  .tarj__precio{ font-size:1.3rem }
  .tarj__add{ height:38px; font-size:.68rem; letter-spacing:.05em }
  .tarj__add svg{ width:16px; height:16px }
}

/* (17-oct-2026) «Compra por categoría» es ahora la fila de pestañas de la portada: ver .pestanas al final. */

/* ── Banda del asesor (rediseño 17-oct-2026, equipo HERO) ──
   Compacta y cálida: la foto del asesor (tiras de prueba y un frasco de cristal; o la que suba el panel, con
   heroFondo.asesor), el punto «En línea», el nombre del asesor en burdeo y los dos botones de siempre. Mide ~150 px en
   el escritorio (antes 258, de los que 80 eran relleno) y ~250 en el celular. */
.btn__ico{ display:grid; place-items:center; width:20px; height:20px; flex:none }
.btn__ico svg{ width:20px; height:20px }
.btn--asesor{ padding-left:22px; gap:10px }
.punto-online--chico{ width:9px; height:9px; right:1px; bottom:1px }
.asesor-banda{ padding:clamp(16px,2.2vw,26px) 0 0 }
.asesor-banda__caja{
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(16px,2.2vw,28px);
  padding:clamp(14px,1.6vw,18px) clamp(16px,2.4vw,28px) clamp(14px,1.6vw,18px) clamp(14px,1.6vw,18px); border-radius:20px; color:var(--tinta);
  background:linear-gradient(180deg,#FFFDF9,var(--negro-2)); border:1px solid rgba(184,154,91,.32);
  box-shadow:0 1px 2px rgba(42,36,32,.05), 0 22px 44px -30px rgba(90,26,36,.35);
}
.asesor-banda__foto{ position:relative; width:136px; height:100px; flex:none }
.asesor-banda__foto picture, .asesor-banda__foto img{ display:block; width:100%; height:100%; border-radius:14px }
.asesor-banda__foto img{ object-fit:cover; object-position:74% 38%; box-shadow:var(--hilo-oro), 0 10px 22px -14px rgba(90,26,36,.5) }
.asesor-banda__foto .punto-online{ right:-3px; bottom:-3px; width:15px; height:15px; box-shadow:0 0 0 3px #FFFDF9 }
/* Con la foto por defecto (tiras y un frasco, no una persona) no va el punto «en línea»: el asesor que está en línea es el
   del globo y el chat. Con la foto que sube Daniel en Portada sí (asesor-banda__foto--propia, aplicarFotoAsesor). */
.asesor-banda__foto:not(.asesor-banda__foto--propia) .punto-online{ display:none }
.asesor-banda__kicker{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--oro-hondo); font-weight:500; margin-bottom:5px }
.asesor-banda__txt h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.12; color:var(--tinta); margin-bottom:5px }
.asesor-banda__txt h2 span{ font-style:italic; color:var(--marfil) }
.asesor-banda__txt p:last-child{ max-width:62ch; font-size:.88rem; line-height:1.5; color:var(--gris) }
.asesor-banda__acciones{ display:flex; flex-direction:column; gap:8px }
.asesor-banda__acciones .btn{ white-space:nowrap; padding:13px 26px }
@media (max-width:1000px){
  .asesor-banda__caja{ grid-template-columns:auto minmax(0,1fr) }
  .asesor-banda__acciones{ grid-column:1/-1; flex-direction:row; flex-wrap:wrap }
  .asesor-banda__acciones .btn{ flex:1 1 220px }
}
@media (max-width:560px){
  .asesor-banda__caja{ grid-template-columns:76px minmax(0,1fr); gap:12px 14px; padding:16px 16px 14px; border-radius:18px }
  .asesor-banda__foto{ width:76px; height:76px }
  .asesor-banda__foto picture, .asesor-banda__foto img{ border-radius:50% }
  .asesor-banda__foto img{ object-position:80% 30% }
  .asesor-banda__foto .punto-online{ right:2px; bottom:2px }
  .asesor-banda__txt h2{ font-size:1.25rem }
  /* La descripción se lee entera: antes se cortaba a las 3 líneas a mitad de frase («…según para quién es, el…»). Para
     no alargar la banda (meta: hero + banda ≤ 1.120 px en el celular), acá queda solo la primera frase, completa. */
  .asesor-banda__txt p:last-child{ font-size:.84rem; line-height:1.45 }
  .asesor-banda__mas{ display:none }
  .asesor-banda__acciones{ width:100%; flex-direction:column; gap:8px }
  .asesor-banda__acciones .btn{ flex:1 1 100%; white-space:normal; max-width:100%; padding:13px 16px; letter-spacing:.08em }
  .asesor-banda__caja, .asesor-banda__txt, .asesor-banda__acciones{ min-width:0; max-width:100% }
  .asesor-banda__txt h2, .asesor-banda__txt p, .asesor-banda__kicker{ overflow-wrap:anywhere }
}

/* ── Colección: título + filtros como barra de compra ── */
.coleccion{ padding:clamp(48px,6vw,80px) 0 clamp(70px,9vw,120px) }
.enc--tienda{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:6px 24px;
  text-align:left; margin-bottom:18px;
}
.enc--tienda .enc__tit{ font-weight:500; font-size:clamp(1.9rem,3.4vw,2.7rem); letter-spacing:-.01em }
.enc--tienda .enc__baj{ margin:0; max-width:none; font-size:.84rem; color:var(--gris); line-height:1.6 }
.filtros{
  justify-content:flex-start; gap:12px 22px; padding:12px 16px; margin-bottom:16px;
  border:1px solid var(--linea-2); border-radius:var(--r-l); background:var(--superficie-alta); box-shadow:var(--sombra-1);
}
.filtros__fila{ align-items:center }
.filtros__et{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-2); margin-right:4px; flex:none }
.filtros .chip{ padding:7px 15px; font-size:.76rem; letter-spacing:.03em; text-transform:none }
.resultados{ text-align:left; margin:0 0 20px; letter-spacing:.1em }

/* ── Carrito: extras de confianza, cupón y pago ── */
.carro__cab h3{ display:flex; align-items:baseline; gap:8px }
.carro__cuenta{ font-family:var(--sans); font-size:.9rem; color:var(--gris) }
.carro__envio{
  display:flex; align-items:center; gap:10px; padding:11px 28px; font-size:.8rem; line-height:1.4;
  color:var(--verde-texto); background:rgba(79,125,92,.08); border-bottom:1px solid rgba(79,125,92,.18);
}
.carro__envio svg{ width:20px; height:20px; flex:none }
.carro__envio strong{ font-weight:500 }
.ci__meta{ margin:-6px 0 9px; font-size:.7rem; color:var(--gris) }
.carro__vacio-ico{
  display:grid; place-items:center; width:66px; height:66px; margin:0 auto 18px; border-radius:50%;
  background:var(--negro-2); color:var(--marfil); box-shadow:var(--hilo-oro);
}
.carro__vacio-ico svg{ width:28px; height:28px }
#btnPagar svg{ width:16px; height:16px; flex:none }
.carro__seguir{
  display:block; width:100%; margin-top:8px; padding:10px; border-radius:999px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--marfil); transition:background .25s;
}
.carro__seguir:hover{ background:var(--marfil-suave) }
.carro__confianza{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; margin-top:10px }
.carro__confianza li{ display:inline-flex; align-items:center; gap:6px; font-size:.7rem; color:var(--gris) }
.carro__confianza svg{ width:15px; height:15px; color:var(--oro-hondo); flex:none }

/* Línea de descuento (cupón del asesor o escrito a mano) en carrito y pago */
.res--desc{ color:var(--verde-texto); align-items:center }
.res--desc span:last-child{ font-weight:500 }
.cupon-codigo{
  display:inline-block; margin-left:4px; padding:1px 8px; border-radius:6px;
  border:1px dashed rgba(62,107,75,.55); background:rgba(79,125,92,.08);
  font-family:ui-monospace,Consolas,monospace; font-size:.74rem; font-weight:600; letter-spacing:.04em; color:var(--verde-texto);
}
.cupon-quitar{ margin-left:6px; font-size:.7rem; color:var(--gris); text-decoration:underline; text-underline-offset:2px; transition:color .25s }
.cupon-quitar:hover{ color:var(--error) }

/* Modal de pago */
.modal__caja--angosta{ width:min(520px,100%) }
.pago__tit{ line-height:1.15 }
.pago__plazo{
  display:inline-flex; align-items:center; gap:8px; border-radius:14px; line-height:1.5;
  background:rgba(79,125,92,.08); border-color:rgba(79,125,92,.28); color:var(--verde-texto);
}
.pago__plazo::before{
  content:''; width:13px; height:13px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pago__resumen{
  padding:16px 18px; margin-bottom:16px; border:1px solid var(--linea-2); border-radius:var(--r-m); background:var(--negro);
}
.pago__cupon{ display:flex; gap:8px; margin-bottom:26px }
.pago__cupon input{
  flex:1; min-width:0; height:46px; padding:0 18px; border-radius:999px;
  border:1px dashed rgba(125,100,40,.5); background:#FFFFFF;
  font-family:var(--sans); font-size:1rem; color:var(--tinta);
}
.pago__cupon input::placeholder{ color:var(--gris-2) }
.pago__cupon input:focus{ outline:none; border-style:solid; border-color:var(--oro-hondo); box-shadow:0 0 0 3px rgba(196,162,74,.22) }
.pago__cupon .btn{ flex:none; height:46px; padding:0 22px }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1199px){
  .riel__pista{ grid-auto-columns:calc((100% - 3 * 18px) / 4); gap:18px }
  .nav__buscar-ej{ display:none }
}
@media (max-width:1000px){
  .pie__grid{ grid-template-columns:1fr 1fr }
  .pie__col--marca{ grid-column:1/-1 }
  .beneficios__int{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px }
  .beneficio:nth-child(3)::before{ display:none }
  .nav__accion--asesor .nav__accion-txt{ display:none }
}
@media (max-width:860px){
  :root{ --alto-nav:112px }
  /* Encabezado del celular: ☰ + logo + Mi pedido + carrito arriba, y el
     buscador a todo el ancho debajo. */
  .nav__int{
    height:auto; padding-block:8px 10px; gap:8px 4px;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"menu marca acciones" "buscar buscar buscar";
  }
  .nav__menu{ display:flex }
  .nav__int > .marca{ justify-self:start; margin-left:4px }
  .nav__buscar{ height:44px; max-width:none; padding-left:16px }
  .nav__buscar-kbd{ display:none }
  .nav__buscar-ir{ width:34px; height:34px }
  .nav__accion{ padding:7px }
  .nav__accion-txt, .nav__accion--asesor{ display:none }
  /* #navLinks pasa a ser el menú desplegable del ☰ */
  body:has(.cats.abierto) .chatia{ display:none }
  .cats{
    position:absolute; left:0; right:0; top:100%;
    background:#FBF8F3;
    border-top:1px solid var(--linea-2); border-bottom:1px solid var(--linea);
    box-shadow:0 26px 40px -26px rgba(42,36,32,.5);
    max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px); overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s var(--curva), transform .35s var(--curva), visibility 0s linear .35s;
  }
  .cats.abierto{ opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--curva), transform .35s var(--curva), visibility 0s }
  .cats__int{ flex-direction:column; align-items:stretch; height:auto; gap:0; padding:4px var(--pad) 18px; overflow:visible }
  .cats{ --nv-foco:#5A1A24 }
  .cats .cats__link{ padding:15px 2px; border-radius:0; border-bottom:1px solid var(--linea-2); font-size:.98rem }
  .cats .cats__link:hover{ background:none }
  .cats .cats__link--on::after{ left:auto; right:4px; top:50%; bottom:auto; width:8px; height:8px; border-radius:50%; transform:translateY(-50%) }
  .cats .cats__link--menu{ display:flex }
  .cats__sep{ display:none }
  /* Categorías como pastillas deslizables bajo el encabezado */
  .cats-movil{
    display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
    padding:12px var(--pad) 2px; scroll-padding-inline:var(--pad);
  }
  .cats-movil::-webkit-scrollbar{ display:none }
  .cats-movil .cats__link{ padding:8px 15px; border:1px solid var(--carbon); background:var(--superficie-alta); font-size:.82rem }
  .cats-movil .cats__link--on{ background:var(--marfil); border-color:var(--marfil); color:#FBF6EE }
  .cats-movil .cats__link--on::after{ display:none }
  body:has(#catalogoListado[hidden]) .cats-movil{ padding-bottom:0 }

  /* Ficha en una columna: el orden del HTML ya es el de compra (marca,
     nombre, precio, botones, confianza y después el detalle), así que no
     hace falta reordenar con CSS. La galería deja de ser pegajosa. */
  .ficha{ grid-template-columns:1fr; gap:24px }
  .ficha__galeria{ position:static }
  .ficha__vis{ border-radius:var(--r-m) }
  .ficha__frasco{ width:42%; max-width:170px }
  .ficha__mini{ width:62px; height:62px }
  .ficha__compra{ padding:20px 18px 18px; margin-bottom:32px }
  .filtros__orden{ margin-left:0; width:100% }
  .filtros__orden select{ flex:1 }
  .riel__pista{ grid-auto-columns:calc((100% - 2 * 16px) / 3); gap:16px }
}
@media (max-width:560px){
  .marca__texto{ font-size:1.3rem }
  .marca--pie .marca__texto{ font-size:1.6rem }
  .anuncio__pista{ font-size:.58rem }
  /* Beneficios: 2×2 compacto */
  .beneficios__int{ padding:12px 16px; gap:12px 10px }
  .beneficio{ gap:9px; padding:2px }
  .beneficio::before{ display:none }
  .beneficio__ico{ width:36px; height:36px }
  .beneficio__ico svg{ width:18px; height:18px }
  .beneficio strong{ font-size:.74rem }
  .beneficio div span{ font-size:.66rem }
  /* Rieles: tarjetas de ~44% para que se vea que hay más hacia el lado */
  .riel__pista{
    grid-auto-columns:44%; gap:12px;
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); scroll-padding-inline:var(--pad);
  }
  .riel__flecha{ display:none }
  .riel__tit{ font-size:1.55rem }
  .riel__todo{ margin-right:0; font-size:.78rem }
  /* Dos columnas legibles en el celular. */
  .rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 12px }
  .tarj__media{ border-radius:var(--r-s) }
  .tarj__info{ padding:10px 0 0 }
  .tarj__marca{ font-size:.56rem; letter-spacing:.14em }
  .tarj__nom{ font-size:1.1rem }
  .tarj__meta, .tarj .entrega{ font-size:.66rem }
  .tarj__etiq{ top:8px; left:8px; padding:4px 8px; font-size:.48rem; letter-spacing:.14em }
  .ficha__acciones{ grid-template-columns:1fr }
  .ficha__confianza li{ font-size:.64rem }
  .ficha .barras{ gap:16px }
  /* Filtros: sin caja, cada fila de chips se desliza con el dedo. */
  .filtros{ padding:0 0 18px; border:0; border-bottom:1px solid var(--linea-2); border-radius:0; background:none; box-shadow:none; gap:10px; margin-bottom:16px }
  .filtros__fila{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); max-width:calc(100% + var(--pad) * 2);
  }
  .filtros__fila::-webkit-scrollbar{ display:none }
  .enc--tienda .enc__baj{ font-size:.78rem }
  .marcas__pista span{ padding-inline:16px; font-size:1rem }
  .pie__grid{ grid-template-columns:1fr }
  .btn{ padding:14px 28px }
  .wa{ bottom:18px; right:18px; width:52px; height:52px }
  /* Pago: la ventana casi a pantalla completa para que el formulario respire. */
  #modalPago{ padding:10px }
  .pago{ padding:26px 18px 22px }
  .pago__tit{ font-size:1.75rem; padding-right:44px }
  .pago__cupon .btn{ padding:0 14px; letter-spacing:.14em }
  .pago__cupon input{ padding:0 14px }
  .pago__cupon input::placeholder{ font-size:.8rem }
  /* Carrito: pie más compacto para que se vean más productos. */
  .carro__cab{ padding:18px 20px }
  .carro__envio{ padding:9px 20px; font-size:.74rem }
  .carro__items{ padding:2px 20px }
  .ci{ grid-template-columns:64px 1fr auto; gap:12px; padding:16px 0 }
  .ci__vis{ width:64px; height:64px }
  .carro__pie{ padding:14px 20px 16px }
  .carro__pie .res{ margin-bottom:6px; font-size:.82rem }
  .carro__pie .res--total{ padding-top:10px; margin:4px 0 12px }
  .carro__pie .res--total b{ font-size:1.65rem }
  .carro__seguir{ margin-top:4px; padding:8px }
  .carro__confianza{ margin-top:6px; gap:4px 12px }
  .carro__confianza li{ font-size:.64rem }
  .carro__aviso{ margin-top:8px; font-size:.64rem; line-height:1.5 }
}

/* ══════════ EVENTO CYBER ══════════
   Barra superior con cuenta regresiva, sección #cyber (= ruta /cyber) y
   precios tachados en toda la tienda. Todo lo arma app.js ("EVENTO CYBER")
   y nada de esto se ve sin evento: la barra y la sección nacen [hidden] y
   las clases de precio solo aparecen cuando el panel manda pvpNormal.
   Mismo lenguaje que el resto del sitio: burdeo + hilos de oro sobre
   marfil, serif para las cifras grandes. Nada de neón ni de rojo "oferta". */

/* Solo para lectores de pantalla (prefijos "Precio normal:", frases de la
   cuenta regresiva). */
.sr-solo{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── Precio normal tachado + insignia "−X% Cyber" (reutilizables) ── */
.precio-antes{
  color:var(--gris-2); font-weight:400; text-decoration-line:line-through;
  text-decoration-thickness:1px; text-decoration-color:rgba(114,104,96,.85);
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; white-space:nowrap;
}
.cyber-pct{
  display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; vertical-align:middle;
  font-family:var(--sans); font-size:.58rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; line-height:1.5; white-space:nowrap;
  color:#FBF6EE; background:linear-gradient(180deg,var(--burdeo-claro),var(--marfil));
  box-shadow:inset 0 0 0 1px rgba(221,190,102,.35);
  font-variant-numeric:lining-nums tabular-nums;
}
.cyber-pct span{ font-weight:500; color:var(--oro-claro) }
.cyber-pct--suave{ background:rgba(90,26,36,.07); color:var(--marfil); box-shadow:inset 0 0 0 1px rgba(90,26,36,.25) }

/* Tarjeta: la insignia va arriba a la DERECHA (a la izquierda puede estar
   "Destacado"). El precio Cyber en burdeo, el normal tachado encima. */
.tarj__etiq--cyber{
  left:auto; right:12px; letter-spacing:.14em;
  background:linear-gradient(180deg,var(--burdeo-claro),var(--marfil)); color:#FBF6EE;
  border:1px solid rgba(221,190,102,.55); box-shadow:0 6px 14px -8px rgba(90,26,36,.6);
}
.tarj__etiq--previa{ background:rgba(253,251,247,.94); color:var(--marfil); border-color:rgba(90,26,36,.3); box-shadow:0 4px 12px -8px rgba(42,36,32,.4) }
/* Con "Destacado" también: una debajo de la otra a la izquierda (lado a lado
   se pisaban en las tarjetas angostas de los rieles y del celular). */
.tarj__etiq--oro + .tarj__etiq--cyber{ top:44px; left:12px; right:auto }
.tarj__precios{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.tarj__precios .precio-antes{ font-size:.8rem; line-height:1 }
.tarj__precio--cyber{ color:var(--marfil) }

/* Ficha */
.ficha__precio-bloque{ display:flex; flex-direction:column; gap:10px }
.ficha__precio-antes{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px }
.ficha__precio-antes .cyber-pct{ font-size:.62rem; padding:4px 11px }
.ficha__precio-antes .precio-antes{ font-size:1.05rem }
.ficha__precio--cyber{ color:var(--marfil) }
.ficha__cyber-nota{ margin:-6px 0 18px; font-size:.84rem; line-height:1.65; color:var(--gris) }
.ficha__cyber-nota .cyber-pct{ margin-right:6px }
.ficha__cyber-nota a{ color:var(--marfil); font-weight:500; border-bottom:1px solid rgba(90,26,36,.3); white-space:nowrap }
.ficha__cyber-nota a:hover{ border-color:var(--marfil) }
.ficha__barra-precio .precio-antes{ font-size:.72em; margin-right:6px }

/* Carrito y pago */
.ci__cyber{ margin:-4px 0 9px }
.ci__precios{ display:flex; flex-direction:column; align-items:flex-end; gap:2px }
.ci__precios .precio-antes{ font-size:.78rem }
.ci__precio--cyber{ color:var(--marfil) }
.res .precio-antes{ margin-right:4px; font-size:.82rem }
.res-ahorro{ display:flex; align-items:center; gap:8px; margin:-12px 0 16px; font-size:.78rem; line-height:1.45; color:var(--marfil) }
.res-nota{ margin:-4px 0 11px; font-size:.76rem; line-height:1.5; color:var(--gris) }
.pago__error{
  margin-bottom:14px; padding:11px 14px; border-radius:3px; line-height:1.5;
  background:rgba(184,74,58,.08); border:1px solid rgba(184,74,58,.35); border-left-width:3px;
  font-size:.84rem; color:#8C3324;
}

/* Otros lugares con precio */
.hero__diapo-cta .precio-antes{ color:rgba(246,240,228,.72); text-decoration-color:rgba(246,240,228,.72) }
.experto__precio .precio-antes{ margin-right:10px; font-size:.82em }
.vend__precio .precio-antes{ margin-right:6px; font-size:.85em }
.br__precio:has(.precio-antes){ text-align:right }
.br__precio .precio-antes{ display:block; font-family:var(--sans); font-size:.72rem }
.chatia__prod-precio .precio-antes{ display:block; font-family:var(--sans); font-size:.7rem; line-height:1.2 }
.chatia__prod-precio .cyber-pct{ margin-left:2px; font-size:.5rem; padding:1px 6px }
.comprobante .precio-antes{ margin-right:4px }

/* ── Barra superior ──
   Sobre el encabezado y fuera de él (no es sticky): se va con el scroll como
   la cinta de anuncio, a la que reemplaza mientras se ve. */
body.con-cyber .anuncio{ display:none }
.cyber-barra{
  position:relative; z-index:61; color:#F6EEE6;
  background:linear-gradient(90deg,var(--burdeo-hondo),var(--marfil) 50%,var(--burdeo-hondo));
  border-bottom:1px solid rgba(196,162,74,.45);
}
.cyber-barra__int{
  position:relative; max-width:var(--max); margin-inline:auto; min-height:44px;
  padding:6px 56px 6px var(--pad);
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 22px;
}
.cyber-barra__txt{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; color:var(--oro-claro);
}
.cyber-barra__reloj{ display:flex; align-items:center; gap:10px }
.cyber-barra__et{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,238,230,.78); white-space:nowrap }
.cyber-barra__ir{
  padding:2px 0; white-space:nowrap; border-bottom:1px solid rgba(221,190,102,.7);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:#FBF6EE;
  transition:color .25s, border-color .25s;
}
.cyber-barra__ir:hover{ color:var(--oro-claro); border-color:var(--oro-claro) }
.cyber-barra__ir:focus-visible, .cyber-barra__x:focus-visible{ outline:2px solid var(--oro-claro); outline-offset:3px }
.cyber-barra__x{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:rgba(246,238,230,.8);
  transition:background .25s, color .25s;
}
.cyber-barra__x:hover{ background:rgba(255,255,255,.1); color:#FFF }
.cyber-barra__x svg{ width:16px; height:16px }

/* ── Cuenta regresiva (cajitas días / horas / min / seg) ── */
.cuenta{ display:flex; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1 }
.cuenta__caja{ display:flex; flex-direction:column; align-items:center }
.cuenta--barra{ gap:4px }
.cuenta--barra .cuenta__caja{
  flex-direction:row; align-items:baseline; gap:1px; padding:2px 6px; border-radius:6px;
  background:rgba(255,255,255,.08); border:1px solid rgba(221,190,102,.32);
}
.cuenta--barra b{ min-width:2ch; text-align:right; font-family:var(--sans); font-size:.8rem; font-weight:500; color:#FFF8EE }
.cuenta--barra small{ font-size:.58rem; color:var(--oro-claro) }
.cuenta--gr{ gap:clamp(8px,1.2vw,14px) }
.cuenta--gr .cuenta__caja{
  min-width:clamp(66px,7.4vw,88px); padding:14px 8px 11px; border-radius:var(--r-m);
  background:linear-gradient(180deg,rgba(255,253,249,.12),rgba(255,253,249,.04));
  border:1px solid rgba(221,190,102,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 14px 26px -18px rgba(0,0,0,.55);
}
.cuenta--gr b{ font-family:var(--serif); font-size:clamp(2.1rem,3.8vw,3rem); font-weight:500; line-height:1; color:#FFF8EE }
.cuenta--gr small{ margin-top:7px; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro-claro) }

/* ── Sección #cyber ── */
.cyber{ padding:clamp(28px,4vw,52px) 0 clamp(44px,6vw,72px) }
.cyber__panel{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px clamp(28px,5vw,72px);
  padding:clamp(30px,4vw,56px) clamp(24px,4.6vw,64px);
  border-radius:24px 24px 0 0; color:#F6EEE6;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(221,190,102,.22), transparent 60%),
    radial-gradient(50% 100% at 100% 100%, rgba(221,190,102,.12), transparent 70%),
    linear-gradient(120deg,#6E2230,var(--marfil) 55%,var(--burdeo-hondo));
  box-shadow:var(--sombra-3);
}
/* Filete de oro interior: el "marco" de una invitación, no un afiche. */
.cyber__panel::before{
  content:''; position:absolute; inset:10px; z-index:-1; pointer-events:none;
  border:1px solid rgba(221,190,102,.26); border-radius:16px;
}
.cyber__kicker{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; font-weight:500; color:var(--oro-claro);
}
.cyber__kicker::before{ content:''; width:28px; height:1px; background:currentColor; opacity:.8 }
.cyber__tit{ font-family:var(--serif); font-weight:400; font-size:clamp(2.7rem,6vw,4.6rem); line-height:1; letter-spacing:-.01em; color:#FFF8EE }
.cyber__bajada{ margin-top:14px; max-width:48ch; font-size:1rem; line-height:1.65; color:rgba(246,238,230,.86) }
.cyber__cuando{ display:flex; align-items:flex-start; gap:10px; margin-top:18px; font-size:.9rem; line-height:1.55; color:#F6EEE6 }
.cyber__cuando svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--oro-claro) }
.cyber__cuando small{ font-size:.8rem; color:rgba(246,238,230,.7) }
.cyber__reloj{ display:flex; flex-direction:column; align-items:center; gap:14px }
.cyber__reloj-et{ font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(246,238,230,.82) }
.cyber__cta{ margin-top:4px }

/* Cinta tipo marquesina: lenta y se detiene al pasar el mouse; con
   "reducir movimiento" queda quieta. */
.cyber__cinta{
  overflow:hidden; border-radius:0 0 24px 24px; color:var(--oro-claro);
  background:var(--burdeo-hondo); border-top:1px solid rgba(221,190,102,.35); box-shadow:var(--sombra-2);
}
.cyber__cinta-pista{
  display:flex; width:max-content; white-space:nowrap; padding:10px 0;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  animation:desliza 70s linear infinite;
}
.cyber__cinta-pista span{ padding-inline:16px }
.cyber__cinta-pista i{ font-style:normal; font-size:.48rem; opacity:.55; align-self:center }
.cyber__cinta:hover .cyber__cinta-pista{ animation-play-state:paused }

/* ¿Cuándo? · ¿Cuánto? · Acceso anticipado */
.cyber__info{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr); gap:18px;
  margin-top:clamp(24px,3vw,36px); align-items:stretch;
}
.cyber__info--sin-form{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.cyber__dato, .cyber__aviso{
  padding:24px 24px 22px; border-radius:var(--r-l);
  background:var(--superficie-alta); border:1px solid rgba(125,100,40,.14); box-shadow:var(--sombra-1);
}
.cyber__aviso{ background:linear-gradient(180deg,#FFFDF9,var(--negro-2)); border-color:rgba(184,154,91,.4); box-shadow:var(--sombra-2) }
.cyber__dato-ico{
  display:grid; place-items:center; width:42px; height:42px; margin-bottom:14px; border-radius:50%; color:var(--marfil);
  background:radial-gradient(circle at 30% 25%,#FFFFFF,var(--negro-2)); box-shadow:0 0 0 1px rgba(184,154,91,.5);
}
.cyber__dato-ico svg{ width:20px; height:20px }
.cyber__dato h3, .cyber__aviso h3{ margin-bottom:8px; font-family:var(--serif); font-weight:500; font-size:1.5rem; line-height:1.15; color:var(--tinta) }
.cyber__dato p{ font-size:.95rem; line-height:1.6; color:var(--tinta) }
.cyber__dato small{ display:block; margin-top:10px; font-size:.78rem; line-height:1.55; color:var(--gris) }
.cyber__aviso > p{ margin-bottom:14px; font-size:.9rem; line-height:1.6; color:var(--gris) }
.cyber__campos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px }
.cyber__campos .pago__campo{ margin-bottom:12px }
.cyber__opc{ text-transform:none; letter-spacing:0 }
.cyber__check{ margin:4px 0 16px; font-size:.8rem }
.cyber__estado{ min-height:1.4em; margin-top:10px; font-size:.82rem; line-height:1.5; color:var(--verde-texto) }
.cyber__estado:empty{ margin-top:0 }
.cyber__estado--error{ color:var(--error) }
.cyber__aviso--listo p{ font-size:.92rem; color:var(--gris) }

/* "Prepara tu carrito" (riel) y ofertas (rejilla) */
.cyber__riel{ padding-top:clamp(34px,4.4vw,52px) }
.cyber__nota{ margin-top:6px; max-width:62ch; font-size:.86rem; line-height:1.55; color:var(--gris) }
.cyber__ofertas{ margin-top:clamp(28px,4vw,44px) }
.cyber__ofertas .riel__cab{ margin-bottom:24px }
.cyber__grilla:not(.cyber__grilla--todas) > .tarj:nth-child(n+13){ display:none }
.cyber__mas-fila{ display:flex; justify-content:center; margin-top:34px }
#cyberAviso, #cyberOfertas{ scroll-margin-top:calc(var(--alto-nav) + 16px) }

/* Preguntas frecuentes: <details> nativo con una flecha fina en oro. */
.cyber__faq{ max-width:820px; margin:clamp(40px,5.4vw,64px) auto 0 }
.cyber__faq-tit{ margin-bottom:16px; text-align:center; font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,2.8vw,2.2rem); color:var(--tinta) }
.cyber__preguntas{ border-top:1px solid var(--linea) }
.cyber__preg{ border-bottom:1px solid var(--linea) }
.cyber__preg summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 4px; font-size:1rem; line-height:1.45; color:var(--tinta); transition:color .25s;
}
.cyber__preg summary::-webkit-details-marker{ display:none }
.cyber__preg summary::after{
  content:''; flex:none; width:9px; height:9px; margin-right:4px;
  border-right:1.5px solid var(--oro-hondo); border-bottom:1.5px solid var(--oro-hondo);
  transform:translateY(-3px) rotate(45deg); transition:transform .3s var(--curva);
}
.cyber__preg[open] summary::after{ transform:translateY(2px) rotate(-135deg) }
.cyber__preg summary:hover{ color:var(--marfil) }
.cyber__preg summary:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.cyber__resp{ max-width:70ch; padding:0 4px 20px; font-size:.92rem; line-height:1.75; color:var(--gris) }
/* Bases y condiciones (art. 35 Ley 19.496) */
.cyber__bases-link{ margin-top:10px; font-size:.82rem }
.cyber__bases-link a{ color:#E9D6A6; text-decoration:underline; text-underline-offset:3px }
.cyber__bases .cyber__resp{ max-width:none }
.cyber__bases ol{ margin:0 0 12px; padding-left:20px }
.cyber__bases-lista{ margin:0; padding-left:20px; font-size:.86rem; columns:2 320px; column-gap:32px }
.cyber__bases-lista li{ break-inside:avoid; margin-bottom:4px }

@media (prefers-reduced-motion:reduce){
  .cyber__cinta-pista{ animation:none }
  .cyber__preg summary::after{ transition:none }
}

@media (max-width:860px){
  .cyber__panel{ grid-template-columns:1fr; justify-items:center; text-align:center }
  .cyber__kicker{ justify-content:center }
  .cyber__kicker::after{ content:''; width:28px; height:1px; background:currentColor; opacity:.8 }
  .cyber__bajada{ margin-inline:auto }
  .cyber__cuando{ justify-content:center }
  .cyber__info, .cyber__info--sin-form{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cyber__aviso{ grid-column:1/-1 }
}
@media (max-width:560px){
  /* Barra en dos líneas: texto arriba; cuenta + enlace abajo. */
  .cyber-barra__int{ padding:6px 12px 8px; gap:5px 12px }
  /* El texto deja libre la esquina de la X (que va arriba a la derecha). */
  .cyber-barra__txt{ flex:1 1 100%; padding-inline:30px; text-align:center; font-size:.6rem; letter-spacing:.18em }
  .cuenta--barra .cuenta__caja{ padding:2px 5px }
  .cyber-barra__et{ font-size:.54rem; letter-spacing:.12em }
  .cyber-barra__reloj{ gap:7px }
  .cyber-barra__x{ top:5px; right:4px; transform:none }
  .cyber{ padding:18px 0 40px }
  .cyber__panel{ padding:30px 18px 24px; gap:22px; border-radius:18px 18px 0 0 }
  .cyber__panel::before{ inset:6px; border-radius:13px }
  .cyber__cinta{ border-radius:0 0 18px 18px }
  .cyber__tit{ font-size:clamp(2.4rem,11vw,2.9rem) }
  .cyber__bajada{ font-size:.92rem }
  .cyber__cuando{ font-size:.84rem; text-align:left }
  .cuenta--gr{ gap:7px }
  .cuenta--gr .cuenta__caja{ min-width:0; width:62px; padding:12px 2px 9px }
  .cuenta--gr b{ font-size:1.95rem }
  .cuenta--gr small{ letter-spacing:.14em }
  .cyber__cta{ width:100% }
  .cyber__info, .cyber__info--sin-form{ grid-template-columns:1fr; gap:12px }
  .cyber__dato, .cyber__aviso{ padding:20px 18px }
  .cyber__campos{ grid-template-columns:1fr }
  .cyber__preg summary{ padding:16px 2px; font-size:.94rem }
  .tarj__etiq--cyber{ right:8px }
  .tarj__etiq--oro + .tarj__etiq--cyber{ top:34px; left:8px; right:auto }
}

/* ══════════ LEGIBILIDAD EN CELULAR ══════════
   Etiquetas en mayúsculas y datos secundarios de ~10 px se leían apretados
   en pantallas chicas: bajo 600 px suben a un mínimo cómodo (~11-12 px) y
   los puntos del carrusel ganan área de toque sin cambiar su tamaño visual. */
@media (max-width:600px){
  .tarj__marca, .tarj__etiq, .fam__n, .riel__kicker{ font-size:.7rem }
  .tarj__meta{ font-size:.78rem }
}

/* ══════════ PÁGINAS REALES, PÁGINA CONTENIDA Y PROFUNDIDAD (2026-10-17) ══════════
   Posicionamiento (contratos C5, C6 y C8) y dos pedidos de Daniel: «la página es muy larga, algo que la contenga»
   y «un poco de profundidad en la tarjeta del perfume». Todo con la paleta y los tokens de siempre. Va al final a
   propósito: ajusta reglas de más arriba sin reescribirlas. */

/* ── Qué se ve en cada página ──
   body[data-ruta] lo pone el servidor en el HTML (producto, categoria, marca, marcas o portada) y app.js lo mantiene
   al navegar. Fuera de la portada no hay hero ni portada comercial: así el bloque que manda el servidor (SSR) queda
   arriba, a la vista, mientras carga el JS, y hay un solo h1 visible. */
body:is([data-ruta="producto"],[data-ruta="categoria"],[data-ruta="marca"],[data-ruta="marcas"]) :is(#inicio,.solo-portada){ display:none !important }
/* Hasta que app.js pinta su versión (body.app-lista), la colección vacía no se muestra debajo del contenido del
   servidor: al reemplazarlo, la versión de app.js aparece en el mismo lugar y nada de lo visible se corre (sin esto,
   la colección subía de golpe al quitar el bloque del servidor: CLS 0,9 en la ficha). Sin JS, se ve solo el SSR. */
body:is([data-ruta="producto"],[data-ruta="categoria"],[data-ruta="marca"],[data-ruta="marcas"]):not(.app-lista) .coleccion{ display:none }
body[data-ruta="marcas"] #catalogoListado{ display:none }
/* En categoría y marca el título del listado ya es el h1 de arriba: este queda solo para lectores de pantalla. */
body:is([data-ruta="categoria"],[data-ruta="marca"]) .enc--tienda{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
body:not([data-ruta="categoria"]):not([data-ruta="marca"]):not([data-ruta="marcas"]) #categoriaSSR{ display:none }
body:is([data-ruta="producto"],[data-ruta="categoria"],[data-ruta="marca"],[data-ruta="marcas"]) .coleccion{ padding-top:18px; border-top:0 }
/* En /perfumes-arabes la línea ya está elegida (y en /perfumes-para-hombre, el género): esa fila de chips sobra. */
body[data-filtro-fijo="linea"] #filtrosLinea, body[data-filtro-fijo="genero"] #filtrosGenero{ display:none }

/* ── Migas de pan (ficha del servidor, categorías y ficha de app.js) ── */
.migas, .ficha-ssr__migas, .categoria-ssr__migas{ font-size:.74rem; letter-spacing:.02em; color:var(--gris); margin-bottom:16px }
/* Siempre en una línea (el último tramo se corta con «…»): si envolvieran, al cargar la fuente pasaban de 2 líneas a 1
   y todo lo de abajo saltaba (CLS 0,13 en la ficha del servidor). */
.migas ol, .ficha-ssr__migas ol, .categoria-ssr__migas ol{ list-style:none; display:flex; flex-wrap:nowrap; align-items:center; padding:0; margin:0; white-space:nowrap; overflow:hidden; line-height:1.6 }
.migas li, .ficha-ssr__migas li, .categoria-ssr__migas li{ display:inline-flex; align-items:center; flex:none }
.migas li + li::before, .ficha-ssr__migas li + li::before, .categoria-ssr__migas li + li::before{ content:'›'; margin:0 9px; color:var(--oro) }
.migas a, .ficha-ssr__migas a, .categoria-ssr__migas a{ color:var(--gris); border-bottom:1px solid transparent; transition:color .2s, border-color .2s }
.migas a:hover, .ficha-ssr__migas a:hover, .categoria-ssr__migas a:hover{ color:var(--marfil); border-color:var(--marfil-borde) }
.migas [aria-current], .ficha-ssr__migas [aria-current], .categoria-ssr__migas [aria-current]{ display:block; flex:1 1 0; min-width:0; color:var(--tinta); overflow:hidden; text-overflow:ellipsis }
.ficha__migas{ margin:-12px 0 20px }

/* ── Ficha que manda el servidor (#fichaSSR): se ve como la ficha de siempre mientras carga el JS ── */
.ficha-ssr{ max-width:var(--max); margin:0 auto; padding:22px var(--pad) clamp(40px,6vw,72px) }
.ficha-ssr__cuerpo{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:clamp(32px,5vw,76px); align-items:start }
.ficha-ssr__foto{
  margin:0; aspect-ratio:1; border-radius:var(--r-l); overflow:hidden; display:grid; place-items:center;
  background:var(--escena); box-shadow:var(--sombra-2);
}
.ficha-ssr__foto img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; padding:4% }
.ficha-ssr__titulo{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.3rem,4.2vw,3.5rem); line-height:1.03;
  letter-spacing:-.012em; color:var(--tinta); margin:4px 0 12px;
}
.ficha-ssr__meta{ font-size:.8rem; color:var(--gris); letter-spacing:.04em; margin-bottom:20px }
.ficha-ssr__precio{
  font-family:var(--serif); font-size:clamp(2.1rem,3.4vw,2.7rem); font-weight:600; color:var(--tinta); line-height:1; margin-bottom:12px;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1;
}
.ficha-ssr__precio s{ font-size:.5em; font-weight:400; color:var(--gris-2); margin-right:8px }
.ficha-ssr__estado{
  display:inline-flex; padding:5px 12px; border-radius:999px; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:500; color:var(--verde-texto); background:rgba(79,125,92,.09); border:1px solid rgba(79,125,92,.3);
}
.ficha-ssr__valoracion{ margin-top:12px; font-size:.82rem; color:var(--oro-hondo) }
.ficha-ssr__desc{ margin:22px 0; color:var(--gris); font-size:.96rem; line-height:1.85 }
.ficha-ssr__desc p + p{ margin-top:.9em }
.ficha-ssr__notas{
  list-style:none; display:grid; gap:8px; padding:16px 20px; margin:0 0 18px; font-size:.9rem; color:var(--tinta);
  background:var(--superficie-alta); border:1px solid var(--linea-2); border-left:3px solid var(--oro-hondo); border-radius:var(--r-m);
}
.ficha-ssr__notas strong{ font-weight:500; color:var(--oro-hondo) }
.ficha-ssr__marca a{ color:var(--marfil); border-bottom:1px solid var(--marfil-borde) }

/* ── Encabezado de categorías y marcas (#categoriaSSR: lo manda el servidor o lo arma app.js al navegar) ── */
.categoria-ssr{ max-width:var(--max); margin:0 auto; padding:22px var(--pad) 0 }
.categoria-ssr__cab{ padding-bottom:16px; border-bottom:1px solid var(--linea-2) }
.categoria-ssr h1{
  font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4vw,3rem); line-height:1.05;
  letter-spacing:-.01em; color:var(--tinta);
}
.categoria-ssr__texto{ margin-top:10px; max-width:72ch; color:var(--gris); font-size:.92rem; line-height:1.7 }
.categoria-ssr__lista{
  list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px;
  padding:18px 0 clamp(36px,5vw,56px); margin:0;
}
.categoria-ssr__lista a{
  /* Dos líneas fijas (nombre y precio arriba, formato y estado abajo): el alto no cambia al cargar la fuente. */
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"nombre precio" "meta estado"; align-items:baseline;
  gap:2px 12px; height:100%; padding:12px 16px; border-radius:var(--r-m);
  background:var(--superficie-alta); border:1px solid var(--linea-2); box-shadow:var(--sombra-1);
  transition:transform .2s var(--curva), box-shadow .2s var(--curva), border-color .2s;
}
.categoria-ssr__lista a:hover{ transform:translateY(-2px); box-shadow:var(--sombra-2); border-color:rgba(196,162,74,.55) }
.categoria-ssr__lista a:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.categoria-ssr__nombre{ grid-area:nombre; font-family:var(--serif); font-size:1.14rem; font-weight:500; line-height:1.3; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.categoria-ssr__meta{ grid-area:meta; font-size:.74rem; line-height:1.5; color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.categoria-ssr__precio{
  grid-area:precio; justify-self:end; font-family:var(--serif); font-size:1.1rem; line-height:1.3; font-weight:600; color:var(--tinta);
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1;
}
.categoria-ssr__estado{ grid-area:estado; justify-self:end; font-size:.62rem; line-height:1.5; letter-spacing:.1em; text-transform:uppercase; color:var(--gris) }
.categoria-ssr__lista--marcas{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) }
.categoria-ssr__lista--marcas a{ grid-template-columns:minmax(0,1fr); grid-template-areas:"nombre" "meta" }
.categoria-ssr__lista--marcas .categoria-ssr__nombre{ white-space:normal }

/* ── Enlaces mínimos que el servidor pone al pie de la portada para Google (#portadaSSR, se reemplaza al cargar) ── */
.portada-ssr{ max-width:var(--max); margin:0 auto; padding:28px var(--pad); font-size:.86rem; color:var(--gris) }
.portada-ssr h2{ margin:14px 0 8px; font-size:.64rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-hondo) }
.portada-ssr ul{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; padding:0; margin:0 }
.portada-ssr a{ color:var(--tinta) }
.portada-ssr a:hover{ color:var(--marfil) }

/* ── Ficha de app.js: el nombre es el h1 (con la marca como antetítulo, el diseño de siempre) ── */
.ficha__titulo{ margin:0 0 12px; font:inherit; color:inherit }
.ficha__titulo .ficha__nom{ display:block; margin-bottom:0 }
p.ficha__marca{ margin-bottom:14px }
.ficha__mas-marca{
  display:inline-flex; margin:-14px 0 22px; font-size:.78rem; color:var(--marfil);
  border-bottom:1px solid var(--marfil-borde); transition:border-color .2s;
}
.ficha__mas-marca:hover{ border-color:var(--marfil) }

/* ── «Ver más perfumes» ── */
.rejilla__mas{ display:flex; justify-content:center; margin-top:clamp(26px,4vw,40px) }
.rejilla__mas .btn{ min-width:min(100%,340px) }

/* ── Reseñas verificadas en la ficha: el mismo resumen que el servidor declara en el aggregateRating ──
   Solo aparecen si el perfume tiene reseñas aprobadas con compra verificada (app.js, pintarResenasFicha). */
.ficha__valoracion{ margin:-2px 0 16px; font-size:.82rem; letter-spacing:.02em }
.ficha__valoracion a{ display:inline-flex; align-items:center; gap:10px; color:var(--oro-hondo); border-bottom:1px solid transparent; transition:border-color .2s }
.ficha__valoracion a:hover{ border-color:var(--oro-hondo) }
.estrellas-parcial{ position:relative; display:inline-block; flex:none; font-size:1rem; line-height:1; letter-spacing:.12em; white-space:nowrap }
.estrellas-parcial__base{ color:var(--carbon) }
.estrellas-parcial__llenas{ position:absolute; top:0; left:0; bottom:0; overflow:hidden; color:var(--oro) }
.ficha-resenas{ margin-top:clamp(48px,6vw,84px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--linea-2); scroll-margin-top:96px }
.ficha-resenas__resumen{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:-4px 0 22px; font-size:.86rem; color:var(--oro-hondo) }
.ficha-resenas__lista{ display:grid; gap:clamp(14px,2vw,22px); grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)) }
.ficha-resenas__item:focus{ outline:none }
.ficha-resenas__item:focus-visible{ outline:2px solid var(--oro); outline-offset:3px }

/* ── Profundidad en la tarjeta del perfume ──
   La tarjeta entera pasa a ser una superficie apoyada sobre el papel crema: sombra en capas (contacto corto y nítido
   + ambiental larga con un toque burdeo), leve elevación y zoom suave de la foto al pasar el mouse (200 ms), y el
   mismo realce con el foco del teclado. Sin movimiento con «reducir movimiento» (ver al final). */
:root{
  --sombra-tarj: 0 1px 1px rgba(42,36,32,.04), 0 2px 5px -1px rgba(42,36,32,.06), 0 10px 22px -12px rgba(42,36,32,.16), 0 22px 40px -28px rgba(90,26,36,.22);
  --sombra-tarj-alta: 0 1px 2px rgba(42,36,32,.05), 0 6px 12px -4px rgba(42,36,32,.08), 0 20px 38px -14px rgba(42,36,32,.22), 0 34px 60px -30px rgba(90,26,36,.36);
}
.tarj{
  opacity:1; transform:none; animation:entra-tarj .45s var(--curva) backwards;
  padding:8px 8px 14px; border-radius:var(--r-l);
  background:var(--superficie-alta); border:1px solid rgba(125,100,40,.11); box-shadow:var(--sombra-tarj);
  transition:transform .2s var(--curva), box-shadow .2s var(--curva), border-color .2s var(--curva);
}
@keyframes entra-tarj{ from{ opacity:0; transform:translateY(14px) } }
.tarj__media{ border-radius:calc(var(--r-l) - 6px); box-shadow:none; transition:none }
.tarj:hover .tarj__media{ transform:none; box-shadow:none }
.tarj__info{ padding:12px 6px 0 }
.tarj .frasco--foto{ transition:transform .2s var(--curva) }
.tarj__nom a{ color:inherit; text-decoration:none }
.tarj__nom a:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px; border-radius:2px }
@media (hover:hover){
  .tarj:hover{ transform:translateY(-4px); box-shadow:var(--sombra-tarj-alta); border-color:rgba(196,162,74,.4) }
  .tarj:hover .frasco--foto{ transform:scale(1.18) }
  .tarj:hover .tarj__ver{ opacity:1; transform:translate(-50%,0) }
}
/* Foco de teclado en el nombre: la tarjeta se eleva igual y aparece «Ver detalle», con anillo burdeo visible. */
.tarj:has(:focus-visible){ transform:translateY(-4px); box-shadow:var(--sombra-tarj-alta), 0 0 0 2px var(--marfil-borde); border-color:rgba(196,162,74,.45) }
.tarj:has(.tarj__nom a:focus-visible) .tarj__ver{ opacity:1; transform:translate(-50%,0) }
.tarj--agotado{ box-shadow:var(--sombra-1) }
/* Más aire para la elevación y menos entre filas: la tarjeta ya trae su propia caja. */
.rejilla{ gap:clamp(18px,2.2vw,26px) clamp(14px,1.8vw,22px) }
.riel__pista{ padding-top:10px; padding-bottom:26px }

/* Destacados reserva el alto de sus tarjetas mientras llega el catálogo (sin animación: Daniel no quiere brillos). */
#rielDestacados .riel__pista:empty{ min-height:clamp(380px,34vw,470px) }

/* ── Experto: la foto y el botón son enlaces ── */
a.experto__foto{ display:block }
a.experto__cta{ text-align:center }

/* ── Franja de marcas: cada marca enlaza a su página ── */
.marcas__pista a{
  padding-inline:14px; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--marfil);
  letter-spacing:.01em; white-space:nowrap; flex:0 0 auto; transition:color .2s;
}
.marcas__pista a:hover{ color:var(--oro-hondo); text-decoration:underline; text-underline-offset:3px }
.marcas__todas{
  display:table; margin:6px auto 0; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--oro-hondo);
  border-bottom:1px solid rgba(125,100,40,.3);
}
.marcas__todas:hover{ color:var(--marfil); border-color:var(--marfil) }

/* ── Buscador: los resultados ahora son enlaces ── */
a.br{ color:inherit }

/* ── Contener la página: secciones más compactas, sin quitar contenido ── */
.enc{ margin-bottom:clamp(28px,4vw,48px) }
.enc__linea{ height:36px; margin-bottom:16px }
.enc__tit{ font-size:clamp(2rem,4.6vw,3.2rem) }
.resenas, .promesa, .guia{ padding:clamp(48px,6vw,84px) 0 }
.coleccion{ padding-bottom:clamp(48px,6vw,84px) }
@media (min-width:1100px){
  /* Guía olfativa: las 6 familias en una sola fila. */
  .guia__grid{ grid-template-columns:repeat(6,minmax(0,1fr)) }
  .fam{ padding:26px 20px }
}
@media (max-width:560px){
  .tarj{ padding:6px 6px 10px; border-radius:var(--r-m) }
  .tarj__media{ border-radius:calc(var(--r-m) - 4px) }
  .tarj__info{ padding:9px 4px 0 }
  .rejilla{ gap:14px 10px }
  /* Guía olfativa en el celular: una fila que se desliza con el dedo, como los rieles (antes 6 tarjetas apiladas). */
  .guia__grid{
    display:grid; grid-auto-flow:column; grid-auto-columns:72%; grid-template-columns:none; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
    margin-inline:calc(var(--pad) * -1); padding:4px var(--pad) 14px; scroll-padding-inline:var(--pad);
  }
  .guia__grid::-webkit-scrollbar{ display:none }
  .guia__grid .fam{ scroll-snap-align:start; padding:22px 18px }
  /* Pie: «Comprar» y «Ayuda» lado a lado; marca y pago a todo el ancho. */
  .pie__grid{ grid-template-columns:1fr 1fr; gap:28px 18px; padding-bottom:36px }
  .pie__col--marca, .pie__col:last-child{ grid-column:1/-1 }
  .pie__col{ gap:9px }
  .pie__col a{ font-size:.86rem }
  .ficha-ssr__cuerpo{ gap:22px }
  .categoria-ssr__lista{ grid-template-columns:1fr }
}
@media (max-width:860px){
  .ficha-ssr__cuerpo{ grid-template-columns:1fr }
  .ficha-ssr__foto{ border-radius:var(--r-m) }
}

@media (prefers-reduced-motion:reduce){
  .tarj, .tarj .frasco--foto, .categoria-ssr__lista a{ transition:none !important }
  .tarj:hover, .tarj:has(:focus-visible), .categoria-ssr__lista a:hover{ transform:none !important }
  .tarj:hover .frasco--foto{ transform:scale(1.12) !important }
}

/* ══════════ MENOS SCROLL, FUNNEL MÁS CORTO Y DESPACHO A REGIONES (17-oct-2026, segunda publicación) ══════════
   Pedido de Daniel: «Todavía siento que tengo que darle mucho scroll hacia abajo… quiero llegar al funnel lo más rápido
   posible». Medido con el catálogo real: la portada pasó de 13,1 pantallas en el celular (375×812, 10.631 px) y 11,5
   en el escritorio (1366×768, 8.795 px) a 5,3 (4.297 px) y 4,1 (3.156 px), sin quitar nada que venda: las mismas
   fotos, precios y llamados, en menos espacio. El hero y la banda del asesor no se tocan acá (los rediseña el equipo
   HERO): medían 860 + 498 px en el celular y 517 + 258 px en el escritorio; para llegar a la meta (5 pantallas en
   el celular y 4 en el escritorio) los dos juntos deben medir a lo más 1.120 px en el celular y 690 px en el
   escritorio (el rediseño del hero cumple esa cifra: ver «HERO: PUERTA DE ENTRADA»). Va al final a propósito: ajusta
   reglas de más arriba sin reescribirlas. */

/* ── Tarjeta: la vitrina es cuadrada (las fotos del catálogo lo son) y el bloque de compra, más justo ──
   Marca y formato en una línea (con «…»): una marca larga ya no estira todas las tarjetas de la fila. */
.tarj__lienzo{ aspect-ratio:1/1 }
.tarj__marca, .tarj__meta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tarj__compra{ padding-top:10px; gap:10px }
.tarj__add{ height:40px }

/* ── Pestañas por categoría (una sola fila en vez de tres rieles y el mosaico) ── */
.riel{ padding-top:clamp(24px,3vw,40px) }
.riel__cab{ margin-bottom:10px }
.pestanas{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
  padding:2px 2px 6px; margin:0 -2px 2px;
}
.pestanas::-webkit-scrollbar{ display:none }
.pestana{
  flex:none; padding:8px 17px; border-radius:999px; border:1px solid var(--carbon); background:var(--superficie-alta);
  color:var(--gris); font-size:.84rem; font-weight:500; letter-spacing:.01em; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s;
}
.pestana:hover{ border-color:var(--marfil); color:var(--marfil) }
.pestana[aria-selected="true"]{ background:var(--marfil); border-color:var(--marfil); color:#FBF6EE }
.pestana:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
#rielDestacados .riel__pista:empty{ min-height:clamp(330px,28vw,380px) }
#rielDestacados .riel__pista{ padding-bottom:16px }
/* Escritorio ancho: seis tarjetas a la vista en la fila (más perfumes en la misma altura). */
@media (min-width:1200px){ #rielDestacados .riel__pista{ grid-auto-columns:calc((100% - 5 * 18px) / 6); gap:18px } }

/* ── Beneficios: una franja baja (en el celular, una sola fila que se desliza) ── */
.beneficios__int{ padding-block:10px }
.beneficio__ico{ width:38px; height:38px }
.beneficio__ico svg{ width:19px; height:19px }

/* ── Franja de marcas con las cifras reales del catálogo ── */
.marcas{ padding:12px 0 }
.marcas__kicker{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 14px; margin-bottom:8px }
.marcas__cifras{ color:var(--gris) }
.marcas__cifras b{ font-weight:600; color:var(--marfil) }
.marcas__todas{ margin-top:2px }

/* ── Colección: el catálogo completo, más arriba y en menos filas (ver reiniciarRejilla en app.js) ── */
.coleccion{ padding:clamp(22px,2.6vw,34px) 0 clamp(28px,3vw,40px) }
.enc--tienda{ margin-bottom:12px }
.filtros{ margin-bottom:12px; padding-block:10px }
.resultados{ margin-bottom:12px }
/* En la portada «Mostrando 5 de 59» ya lo dice el botón «Ver más perfumes (quedan 54)»: queda solo para lectores de
   pantalla (sigue anunciando los cambios de filtro). En categorías y marcas se sigue viendo. */
body[data-ruta="portada"] .resultados{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.rejilla__mas{ margin-top:clamp(18px,2.6vw,28px) }
@media (min-width:861px){ .rejilla{ grid-template-columns:repeat(auto-fill,minmax(196px,1fr)) } }

/* ── Reseñas: más justas; en el celular, una fila que se desliza ── */
.resenas{ padding:clamp(30px,4vw,52px) 0 }
.resenas .enc{ margin-bottom:18px }
.resenas .enc__linea{ display:none }

/* ── Guía olfativa: encabezado en una línea y tarjetas más bajas ── */
.guia{ padding:clamp(24px,2.6vw,34px) 0 }
.guia__cab{ align-items:flex-end }
.guia__baj{ margin:0 0 4px; font-size:.86rem; color:var(--gris) }
.fam{ padding:15px 16px 13px }
.fam__nom{ font-size:1.3rem; margin-bottom:4px }
.fam__desc{ font-size:.78rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.fam__n{ margin-top:8px }

/* ── Por qué comprar acá: banda burdeo con preguntas plegables (pilares + políticas) y el cierre ── */
.promesa{ padding:clamp(24px,2.8vw,38px) 0 }
.promesa__cab{ display:flex; align-items:center; justify-content:space-between; gap:14px 28px; flex-wrap:wrap; margin-bottom:16px }
.promesa__kicker{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--oro-claro); font-weight:600; margin-bottom:5px }
.promesa__tit{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3vw,2.4rem); line-height:1.08; letter-spacing:-.01em; color:var(--negro) }
.promesa__cierre{ display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap }
.promesa__cierre p{ font-size:.94rem; line-height:1.4; color:#F7EDE6 }
.promesa__cierre p span{ display:block; font-size:.84rem; color:rgba(241,228,222,.78) }
.promesa__lista{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:start }
.promesa__politicas{ display:contents }
.promesa__item{
  border:1px solid rgba(247,244,238,.18); border-radius:var(--r-m); background:rgba(247,244,238,.05);
  transition:border-color .3s, background .3s;
}
.promesa__item[open]{ border-color:rgba(221,190,102,.6); background:rgba(247,244,238,.09) }
.promesa__item summary{
  display:flex; align-items:center; gap:12px; min-height:48px; padding:9px 16px; cursor:pointer; list-style:none;
  color:var(--negro); border-radius:var(--r-m);
}
.promesa__item summary::-webkit-details-marker{ display:none }
.promesa__item summary::after{ content:'+'; margin-left:auto; flex:none; font-size:1.25rem; line-height:1; color:var(--oro-claro); transition:transform .3s var(--curva) }
.promesa__item[open] summary::after{ transform:rotate(45deg) }
.promesa__item summary:focus-visible{ outline:2px solid var(--oro-claro); outline-offset:2px }
.promesa__ico{ flex:none; width:28px; height:28px; color:var(--oro-claro) }
.promesa__ico svg{ width:100%; height:100% }
.promesa__preg{ font-family:var(--serif); font-size:1.14rem; line-height:1.2 }
.promesa__resp{ padding:0 16px 14px 56px }
.promesa__resp p{ font-size:.88rem; line-height:1.7; color:rgba(241,228,222,.84) }

/* ── Pie más bajo (en el celular, «Comprar», «Ayuda» y «Legal» se pliegan: iniciarPie en app.js) ── */
.pie{ padding-top:clamp(28px,3.6vw,44px) }
.pie__grid{ grid-template-columns:1.25fr .85fr .85fr 1fr 1.85fr; gap:24px 28px; padding-bottom:24px }
.pie__col{ gap:7px }
.pie__col a{ font-size:.86rem }
.pie__col--marca p{ margin-top:2px; font-size:.86rem; line-height:1.65 }
.pie__redes{ margin-top:6px }
.pie__sigue{ margin-top:14px }
.pie__sigue .pie__tit{ margin-bottom:8px }
.pie__sigue .pie__redes{ margin-top:0; flex-wrap:wrap }
/* Íconos de «Síguenos»: borde dorado, trazo burdeo sobre marfil; al pasar el cursor se invierten. */
.pie__sigue .pie__redes a{ width:40px; height:40px; border-color:var(--oro); color:var(--marfil); background:var(--superficie-alta) }
.pie__sigue .pie__redes a:hover, .pie__sigue .pie__redes a:focus-visible{ background:var(--marfil); color:var(--superficie-alta); border-color:var(--marfil) }
.pie__sigue .pie__redes svg{ width:19px; height:19px; stroke-width:1.5 }
.pie__nota{ line-height:1.75 }
.pie__base{ padding:14px 0 18px }
details.pie__col{ display:block }
details.pie__col > summary{ list-style:none; cursor:default }
details.pie__col > summary::-webkit-details-marker{ display:none }
details.pie__col > a{ display:block; margin-top:7px }

/* ── Ficha: «Comprar ahora» + «Agregar al carrito», la pregunta al asesor y el despacho a regiones a la vista ── */
.ficha__acciones--agotado{ grid-template-columns:1fr }
.ficha__asesor{
  display:inline-flex; margin-top:12px; padding:2px 0; font-size:.84rem; color:var(--marfil);
  border-bottom:1px solid var(--marfil-borde); transition:border-color .2s;
}
.ficha__asesor:hover{ border-color:var(--marfil) }
/* ══════════ Hablar con una persona (WhatsApp) ══════════
   Botón + letra chica con el horario real. Mismo lenguaje que el resto: burdeo, dorado y marfil (nada verde WhatsApp). */
.wa-bloque{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:14px }
.wa-btn{ gap:10px; padding:13px 22px }
.wa-btn svg,.ficha__wa svg{ width:19px; height:19px; flex:none }
.wa-nota{ margin:0; font-size:.74rem; line-height:1.45; color:var(--gris) }
.ficha__ayuda{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; margin-top:12px }
.ficha__ayuda .ficha__asesor{ margin-top:0 }
.ficha__ayuda .wa-bloque{ margin-top:0; gap:4px }
.ficha__wa{ display:inline-flex; align-items:center; gap:7px }
.seguimiento .wa-bloque,#pagoResultadoCuerpo .wa-bloque{ margin:16px 0 4px }
.chatia__wa{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin:8px 2px 0; font-size:.76rem; color:var(--gris-2); line-height:1.4 }
.chatia__wa a{ color:var(--marfil); font-weight:500; text-decoration:underline; text-underline-offset:2px }
.chatia__wa small{ flex-basis:100%; font-size:.7rem; color:var(--gris-2) }
.chatia__wa[hidden]{ display:none }
body.chatia-teclado .chatia__wa small{ display:none }

/* Tarjeta de contacto del chat (la muestra el asesor al derivar): el correo se escribe aquí, no en la conversación con la IA. */
.chatia__deriva-2{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.chatia__deriva-2 .chatia__deriva-c{ min-width:0 }
.chatia__deriva{ display:flex; flex-direction:column; gap:7px; margin:8px 0 8px 40px; padding:14px 16px; border-radius:16px; border:1px solid var(--marfil-borde); background:var(--superficie-alta); box-shadow:0 6px 18px -10px rgba(42,36,32,.25); max-width:calc(100% - 52px); animation:msgEntra .3s var(--curva) }
.chatia__deriva-c{ display:flex; flex-direction:column; gap:3px; font-size:.78rem; color:var(--gris) }
.chatia__deriva-c small{ font-size:.7rem; color:var(--gris-2) }
.chatia__deriva input[type=text],.chatia__deriva input[type=email],.chatia__deriva input[type=tel],.chatia__deriva textarea{ width:100%; padding:6px 10px; border:1px solid var(--carbon); border-radius:10px; background:#fff; font:inherit; font-size:16px; color:var(--tinta) }
.chatia__deriva textarea{ resize:vertical; min-height:52px; line-height:1.35 }
.chatia__deriva input:focus-visible,.chatia__deriva textarea:focus-visible{ outline:2px solid var(--marfil); outline-offset:1px; border-color:var(--marfil) }
.chatia__deriva-ok{ display:flex; gap:9px; align-items:flex-start; font-size:.76rem; line-height:1.45; color:var(--gris) }
.chatia__deriva-ok input{ margin-top:2px; flex:none; width:17px; height:17px; accent-color:var(--marfil) }
.chatia__deriva-ok a{ color:var(--marfil); text-decoration:underline; text-underline-offset:2px }
.chatia__deriva-err{ margin:0; padding:8px 10px; border-radius:10px; background:rgba(156,59,46,.08); color:var(--error); font-size:.78rem; line-height:1.4 }
.chatia__deriva-bs{ display:flex; flex-wrap:wrap; gap:8px }
.chatia__deriva .chatia__soporte-b,.chatia__deriva--ok .chatia__soporte-b{ border:0; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:8px; margin-top:0 }
.chatia__soporte-b--wa{ background:transparent; color:var(--marfil); border:1.5px solid var(--marfil-borde) !important }
.chatia__soporte-b--wa:hover{ background:var(--marfil-suave); color:var(--marfil) }
.chatia__soporte-b svg{ width:17px; height:17px; flex:none }
.chatia__soporte-b:disabled{ opacity:.6; cursor:progress }
.chatia__deriva-x{ align-self:flex-start; padding:2px 0; border:0; background:none; font:inherit; font-size:.76rem; color:var(--gris-2); text-decoration:underline; text-underline-offset:2px; cursor:pointer }
.chatia__deriva--ok{ gap:6px }
@media (max-width:480px){
  .chatia__deriva{ margin-left:34px; max-width:calc(100% - 42px); padding:12px 13px }
  .chatia__deriva-bs .chatia__soporte-b{ flex:1 1 100%; justify-content:center }
  .chatia__deriva-2{ grid-template-columns:1fr }
}

.ficha__envio{ display:flex; align-items:flex-start; gap:10px; margin-top:14px; font-size:.82rem; line-height:1.55; color:var(--gris) }
.ficha__envio svg{ width:19px; height:19px; flex:none; margin-top:1px; color:var(--oro-hondo) }

/* ── Pago: «Costo de envío» según la región (contrato A) ── */
.res--envio-pago{ align-items:flex-start }
.res--envio-pago > span:last-child{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; color:var(--tinta) }
.res--envio-pago small{ font-size:.72rem; color:var(--gris-2) }
.res__gratis{ color:var(--verde-texto); font-weight:500 }
.res__pend{ color:var(--gris-2); font-style:italic }
.res__error{ color:var(--error); font-weight:500 }
.res-nota--error{
  margin:8px 0 0; padding:10px 12px; border-radius:var(--r-s); font-size:.8rem; line-height:1.5;
  color:var(--error); background:rgba(156,59,46,.07); border:1px solid rgba(156,59,46,.3);
}

/* ── Seguimiento: el despacho y el total, si se cobró despacho ── */
.seguimiento__item--envio{ border-top:1px dashed var(--linea); margin-top:6px; padding-top:10px }
.seguimiento__item--total span{ color:var(--tinta) !important; font-weight:500 }

/* ── Barra de compra del celular: «Ir a pagar» a un toque apenas hay algo en el carrito ── */
.barra-compra{ display:none }
@media (max-width:860px){
  .barra-compra{
    position:fixed; left:0; right:0; bottom:var(--alto-cookies, 0px); z-index:86;
    display:flex; align-items:center; gap:12px; padding:9px 14px calc(9px + env(safe-area-inset-bottom));
    background:rgba(253,251,247,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(125,100,40,.18); box-shadow:0 -16px 36px -22px rgba(42,36,32,.4);
    animation:sube .4s var(--curva);
  }
  body.bloqueado .barra-compra, body.chatia-abierto .barra-compra, body:has(.ficha__barra.ver) .barra-compra,
  body:has(.cats.abierto) .barra-compra{ display:none }
  .barra-compra__carro{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:3px 2px; text-align:left; border-radius:12px }
  .barra-compra__ico{
    position:relative; flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
    color:var(--marfil); background:var(--negro-2); box-shadow:var(--hilo-oro);
  }
  .barra-compra__ico svg{ width:21px; height:21px }
  .barra-compra__n{
    position:absolute; top:-3px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px;
    display:grid; place-items:center; font-size:.66rem; font-weight:600; color:#FBF6EE; background:var(--marfil);
    box-shadow:0 0 0 2px #FDFBF7;
  }
  .barra-compra__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.15 }
  .barra-compra__txt small{ font-size:.72rem; color:var(--gris) }
  .barra-compra__txt b{
    font-family:var(--serif); font-size:1.32rem; font-weight:600; color:var(--tinta);
    font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1;
  }
  .barra-compra__pagar{ flex:none; padding:14px 22px }
  /* El globo del asesor y el aviso emergente suben sobre la barra mientras se ve; el pie deja su espacio al final. */
  body:has(#barraCompra:not([hidden])):not(.bloqueado):not(.chatia-abierto):not(:has(.ficha__barra.ver)) .chatia{ bottom:calc(var(--alto-cookies, 0px) + 82px) }
  body:has(#barraCompra:not([hidden])):not(.bloqueado) .aviso.ver{ bottom:calc(var(--alto-cookies, 0px) + 84px) }
  body:has(#barraCompra:not([hidden])) .pie{ padding-bottom:72px }
}

@media (max-width:860px){
  .promesa__lista{ grid-template-columns:1fr }
  .promesa__cierre{ width:100% }
}
@media (max-width:560px){
  .riel{ padding-top:22px }
  .pestanas{ margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad) }
  #rielDestacados .riel__pista:empty{ min-height:330px }
  /* Beneficios: una sola fila que se desliza con el dedo (antes 2×2). */
  .beneficios__int{ display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; padding:9px var(--pad) }
  .beneficios__int::-webkit-scrollbar{ display:none }
  .beneficio{ flex:0 0 auto; scroll-snap-align:start }
  .beneficio::before{ display:none }
  .marcas__kicker{ flex-direction:column; align-items:center; gap:2px }
  .coleccion{ padding-top:20px }
  .enc--tienda .enc__baj{ display:none }
  .filtros{ padding-bottom:12px; gap:8px }
  .resenas__grid{
    display:grid; grid-auto-flow:column; grid-auto-columns:86%; grid-template-columns:none; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
    margin-inline:calc(var(--pad) * -1); padding:4px var(--pad) 12px; scroll-padding-inline:var(--pad);
  }
  .resenas__grid::-webkit-scrollbar{ display:none }
  .resena{ scroll-snap-align:start }
  .guia__baj{ display:none }
  .guia__grid{ grid-auto-columns:64% }
  .guia__grid .fam{ padding:16px 16px 14px }
  .promesa__cierre .btn{ flex:1 1 100% }
  .promesa__resp{ padding-left:16px }
  /* Pie: marca, tres columnas plegables y pago, en una sola columna. */
  .pie{ padding-top:22px }
  .pie__grid{ grid-template-columns:1fr; gap:0; padding-bottom:14px }
  .pie__col--marca{ padding-bottom:12px }
  .pie__col--marca p{ display:none }
  details.pie__col{ border-top:1px solid var(--linea-2) }
  details.pie__col > summary{ display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:6px 2px; cursor:pointer }
  details.pie__col > summary .pie__tit{ margin:0 }
  details.pie__col > summary::after{ content:'+'; font-size:1.2rem; line-height:1; color:var(--oro-hondo) }
  details.pie__col[open] > summary::after{ content:'−' }
  details.pie__col[open]{ padding-bottom:12px }
  details.pie__col > summary:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
  details.pie__col:last-child{ border-bottom:1px solid var(--linea-2) }
  .pie__nota{ font-size:.82rem; line-height:1.7 }
  .pie__pago small{ display:none }
}
@media (max-width:1000px) and (min-width:561px){
  .pie__grid{ grid-template-columns:1fr 1fr 1fr }
  .pie__col--marca, .pie__col:last-child{ grid-column:1/-1 }
}

/* ── Segunda pasada de «menos scroll» (17-oct-2026, medida otra vez con el catálogo real) ──
   Escritorio: la rejilla de la portada pasa a seis columnas (la misma medida de tarjeta que la fila de pestañas: una
   fila muestra seis perfumes en vez de cinco y queda más baja) y la colección, la guía, la franja de marcas y el pie
   quedan más justos. Celular: los filtros de la colección van en UNA fila que se desliza (línea y género) con
   «Ordenar» al lado (antes eran tres filas, 151 px), la invitación de «Por qué comprar acá» va en una línea con su
   botón y la letra legal del pie es un poco más chica. Nada se quita: los mismos filtros, textos y enlaces. */
.filtros__chips{ display:contents }
@media (min-width:861px){ .rejilla{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) } }
.riel{ padding-top:clamp(22px,2.2vw,28px) }
#rielDestacados .riel__pista{ padding-bottom:12px }
.coleccion{ padding:clamp(20px,1.8vw,24px) 0 clamp(24px,2vw,28px) }
.enc--tienda{ margin-bottom:10px }
.rejilla__mas{ margin-top:clamp(14px,1.4vw,18px) }
.marcas{ padding:8px 0 }
.marcas__kicker{ margin-bottom:6px }
.guia{ padding:clamp(20px,1.8vw,24px) 0 }
.guia__cab{ margin-bottom:8px }
.fam{ padding:12px 14px 11px }
.fam__n{ margin-top:6px }
.pie{ padding-top:clamp(22px,2.2vw,30px) }
.pie__grid{ padding-bottom:18px }
details.pie__col > a{ margin-top:5px }
.pie__nota{ line-height:1.6 }
@media (max-width:560px){
  /* Fila de pestañas: el título basta (la pestaña elegida ya dice la categoría). */
  #rielDestacados .riel__kicker{ display:none }
  /* Filtros: una fila de chips que se desliza (con un fundido a la derecha que avisa que hay más) y «Ordenar» al lado. */
  .filtros{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding-bottom:12px }
  .filtros__chips{
    display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
    margin-left:calc(var(--pad) * -1); padding:2px 20px 2px var(--pad);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
  }
  .filtros__chips::-webkit-scrollbar{ display:none }
  .filtros__chips .filtros__fila{ flex:none; overflow:visible; margin:0; padding:0; max-width:none; gap:6px }
  .filtros__chips .filtros__fila + .filtros__fila{ margin-left:14px }
  .filtros .chip{ padding:7px 13px }
  .filtros__orden{ width:auto; gap:0 }
  .filtros__orden label{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
  .filtros__orden select{ flex:none; width:auto; max-width:136px; padding:8px 12px }
  /* «¿Todavía dudando?» y «Encuéntralo por mí» en una línea (si no cabe, el botón baja solo). */
  .promesa__cab{ margin-bottom:12px; gap:12px }
  .promesa__cierre{ justify-content:space-between; gap:10px }
  .promesa__cierre p{ flex:1 1 auto; font-size:.86rem }
  .promesa__cierre p span{ display:none }
  .promesa__cierre .btn{ flex:0 0 auto; padding:13px 14px; letter-spacing:.14em }
  /* Letra legal del pie. */
  .pie__base{ padding:12px 0 14px }
  .pie__comercio, .pie__base span{ font-size:.7rem; line-height:1.55 }
}

/* ══════════ PULIDO FINAL: MÁS LUZ, FICHA REPARTIDA, LOGOS A COLOR (18-oct-2026) ══════════
   Pedido de Daniel: «la página se siente demasiado oscura» (quiere una perfumería premium online: más luz, mejor
   contraste, acogedora y comercial sin perder lo sofisticado) y «mientras menos scroll, mejor». Qué cambia acá, al final
   a propósito (ajusta reglas de más arriba sin reescribirlas):
   - Hero: un vaivén lento de luz sobre la foto (solo transform; con prefers-reduced-motion, Save-Data o fuera de
     pantalla, quieto) y la bajada un poco más oscura para pasar AA en el peor punto sobre la foto.
   - Tarjetas: «Agregar» champaña con el vino como acento (antes un bloque burdeo por tarjeta, seis por fila: era lo que
     más oscurecía la portada junto con la banda de «Por qué comprar acá»).
   - Franja de marcas más clara, con los logos A COLOR cuando el panel los manda (.marcas__logo).
   - «Por qué comprar acá»: de banda burdeo a sección clara con tres tarjetas con foto; en el celular, una fila que se
     desliza. Las políticas del panel siguen como preguntas plegables, ahora claras.
   - Ficha: los datos cortos bajo la foto (el hueco vacío del escritorio), la descripción a todo el ancho en dos
     columnas, «Sigue explorando» pegado al final y sin la guía ni la promesa de la portada debajo. */

/* ── Hero: luz que se desplaza muy lento sobre la foto ── */
.hero__velo::after{
  content:''; position:absolute; top:-30%; bottom:-30%; left:-12%; width:52%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,250,240,.34) 0%, rgba(255,250,240,0) 70%);
  will-change:transform; animation:heroLuz 17s ease-in-out infinite alternate;
}
@keyframes heroLuz{ from{ transform:translateX(0) } to{ transform:translateX(130%) } }
.hero--fuera .hero__velo::after{ animation-play-state:paused }
.hero--quieto .hero__velo::after, .hero--productos .hero__velo::after{ display:none }
@media (prefers-reduced-motion:reduce){ .hero__velo::after{ display:none } }
.hero{ --hero-gris-texto:#3B312C }

/* ── Tarjeta: «Agregar» champaña, vino al pasar el mouse ── */
.tarj__add{
  background:linear-gradient(180deg,#FFFDF8,#F3EBDC); color:var(--marfil); border:1px solid rgba(90,26,36,.42);
  box-shadow:inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(42,36,32,.06), 0 8px 18px -14px rgba(90,26,36,.5);
}
.tarj__add:hover{ background:linear-gradient(180deg,var(--burdeo-claro),var(--marfil)); color:#FBF6EE; border-color:var(--marfil); filter:none }

/* ── Franja de marcas: más clara; logos a color (sin filtro), alto fijo para que la fila no salte ── */
.marcas{ background:linear-gradient(90deg, #FBF7F0 0%, rgba(221,190,102,.16) 50%, #FBF7F0 100%) }
.marcas__pista{ align-items:center }
.marcas__pista a.marcas__logo{ display:flex; align-items:center; height:44px; padding-inline:16px; border-bottom:0 }
.marcas__logo img{ display:block; height:34px; width:auto; max-width:160px; object-fit:contain; filter:none; opacity:1 }

/* ── «Por qué comprar acá»: sección clara con tres tarjetas con foto ── */
.promesa{
  padding:clamp(22px,2.4vw,30px) 0 clamp(20px,2.2vw,26px); border-top:1px solid rgba(196,162,74,.35);
  background:linear-gradient(180deg,#FBF7F0 0%,#F3ECDF 100%); color:var(--tinta);
}
.promesa__kicker{ color:var(--oro-hondo) }
.promesa__tit{ color:var(--tinta); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.1rem) }
.promesa__cierre p{ color:var(--tinta) }
.promesa__cierre p span{ color:var(--gris) }
.promesa .promesa__cab{ margin-bottom:10px }
.promesa .promesa__kicker{ margin-bottom:3px }
.promesa__tarjetas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.promesa__tarj{
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:0 14px; align-items:center; min-height:104px; overflow:hidden;
  background:#FFFEFB; border:1px solid rgba(125,100,40,.18); border-radius:var(--r-l); box-shadow:var(--sombra-1);
  transition:transform .4s var(--curva), box-shadow .4s var(--curva), border-color .4s;
}
.promesa__tarj:hover{ transform:translateY(-3px); box-shadow:var(--sombra-2); border-color:rgba(196,162,74,.55) }
.promesa__tarj-foto{ align-self:stretch; min-height:104px; background:var(--negro-2) }
.promesa__tarj-foto picture, .promesa__tarj-foto img{ display:block; width:100%; height:100% }
.promesa__tarj-foto img{ object-fit:cover; object-position:60% 50% }
.promesa__tarj-cuerpo{ padding:11px 14px 11px 0; min-width:0 }
.promesa__tarj-et{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-hondo); font-weight:600; margin-bottom:2px }
.promesa__tarj-tit{ font-family:var(--serif); font-size:1.16rem; font-weight:500; line-height:1.12; color:var(--marfil); margin-bottom:4px }
.promesa__tarj-txt{ font-size:.82rem; line-height:1.45; color:var(--gris) }
.promesa__tarj-link{ display:inline-block; margin-top:5px; font-size:.78rem; font-weight:500; color:var(--marfil); border-bottom:1px solid var(--marfil-borde); transition:border-color .2s }
.promesa__tarj-link:hover{ border-color:var(--marfil) }
.promesa__politicas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px }
.promesa .promesa__item summary{ min-height:44px; padding-block:7px }
.promesa__politicas:empty{ display:none }
.promesa__item{ border:1px solid rgba(125,100,40,.2); background:#FFFEFB }
.promesa__item[open]{ border-color:rgba(196,162,74,.7); background:#FFFFFF }
.promesa__item summary{ color:var(--tinta) }
.promesa__item summary::after{ color:var(--oro-hondo) }
.promesa__item summary:focus-visible{ outline-color:var(--marfil) }
.promesa__ico{ color:var(--marfil) }
.promesa__resp p{ color:var(--gris) }
@media (max-width:860px){
  .promesa__tarjetas, .promesa__politicas{ grid-template-columns:1fr }
  .promesa__tarj{ min-height:0 }
}
@media (max-width:560px){
  /* Las tres tarjetas en una fila que se desliza (como reseñas y guía): tres en el alto de una. */
  .promesa__tarjetas{
    display:grid; grid-auto-flow:column; grid-auto-columns:88%; grid-template-columns:none; gap:10px;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
    margin-inline:calc(var(--pad) * -1); padding:2px var(--pad) 8px; scroll-padding-inline:var(--pad);
  }
  .promesa__tarjetas::-webkit-scrollbar{ display:none }
  .promesa__tarj{ scroll-snap-align:start; grid-template-columns:92px minmax(0,1fr); gap:0 12px }
  .promesa__tarj-foto{ min-height:118px }
  .promesa__tarj-cuerpo{ padding:12px 12px 12px 0 }
  .promesa__tarj-tit{ font-size:1.1rem }
  .promesa__tarj-txt{ font-size:.8rem }
  .promesa__politicas{ margin-top:10px }
}

/* ── Ficha repartida: datos cortos bajo la foto; descripción a todo el ancho (dos columnas en pantallas grandes) ── */
.ficha{ grid-template-areas:"gal txt" "datos txt" "desc desc"; row-gap:clamp(22px,2.6vw,34px) }
.ficha__galeria{ grid-area:gal; position:static; top:auto }
.ficha__txt{ grid-area:txt }
.ficha__datos{ grid-area:datos; min-width:0 }
.ficha__descripcion{ grid-area:desc; min-width:0; padding-top:clamp(6px,1vw,12px); border-top:1px solid var(--linea-2) }
.ficha__compra{ margin-bottom:0 }
.ficha__datos .barras{ margin-bottom:16px }
.ficha__datos .piramide{ margin-bottom:14px }
.ficha__fichas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 14px; margin:0 }
.ficha__ficha{ padding:10px 12px; border-radius:var(--r-s); background:var(--superficie-alta); border:1px solid var(--linea-2) }
.ficha__datos-et{ font-size:.58rem; letter-spacing:.19em; text-transform:uppercase; color:var(--fam-c); font-weight:500; margin-bottom:3px }
.ficha__datos-val{ margin:0; font-size:.9rem; line-height:1.45; color:var(--tinta) }
.ficha__descripcion .ficha__desc{ font-size:.94rem; line-height:1.75 }
@media (min-width:1000px){
  .ficha__descripcion .ficha__desc{ column-count:2; column-gap:clamp(36px,4vw,64px) }
  .ficha__descripcion .ficha__desc > *{ break-inside:avoid }
}
@media (max-width:860px){
  .ficha{ grid-template-areas:"gal" "txt" "datos" "desc"; row-gap:20px }
  .ficha__descripcion{ padding-top:4px }
}
/* «Sigue explorando» pegado al final de la ficha: menos aire y, en la página del producto, sin la guía ni «Por qué
   comprar acá» de la portada debajo (la ficha ya trae su propia confianza en el bloque de compra). */
.ficha-rel{ margin-top:clamp(26px,3vw,40px); padding-top:clamp(16px,2vw,24px) }
.ficha-resenas{ margin-top:clamp(26px,3vw,40px); padding-top:clamp(16px,2vw,24px) }
body[data-ruta="producto"] .guia, body[data-ruta="producto"] .promesa{ display:none }

/* Reseñas: «¿Cómo fue comprar?» y postventa en el seguimiento */
.encompra{margin:16px 0 4px;padding:14px 16px;border:1px solid var(--linea,#E1D9CA);border-radius:16px;background:var(--superficie-alta,#FDFBF7)}
.encompra h3{margin:0 0 4px;font:500 1.15rem/1.25 var(--serif,Georgia,serif)}
.encompra__txt{margin:0 0 8px;font-size:.9rem;color:var(--gris,#655B51)}
.encompra__est{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.encompra__est button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--linea,#E1D9CA);background:#fff;color:#D8CFBD;font-size:1.7rem;line-height:1;cursor:pointer}
.encompra__est button.is-on{color:var(--oro,#C4A24A);border-color:#E3D3A8;background:#FFFBEF}
.encompra__est button[aria-checked="true"]{border-color:var(--oro-hondo,#7D6428)}
.encompra__vp{margin-left:8px;font-size:.9rem;color:var(--gris,#655B51)}
.encompra__caja{margin-top:12px}
.encompra__caja label{display:block;margin-bottom:6px;font-size:.88rem}
.encompra__caja textarea{width:100%;margin-bottom:10px;border:1px solid var(--linea,#E1D9CA);border-radius:10px;padding:10px;font:inherit}
.encompra__msg,.encompra__ok{margin:10px 0 0;font-size:.9rem}
.seg-postventa{margin-top:16px;display:grid;gap:12px}
.seg-postventa__fila p{margin:6px 0 0}
.encompra__msg:empty{display:none}

/* ══════════ POPUP DE CAPTACIÓN DE CORREOS (assets/js/captacion.js) ══════════
   Todo el texto lo edita el equipo en el panel (Captación). Escritorio: tarjeta centrada sobre un velo suave. Celular: hoja
   inferior compacta (máx. 45 % del alto, nunca pantalla completa; Google castiga los interstitials). Va por debajo del aviso de
   cookies (z 200): el popup ni siquiera se abre mientras ese aviso esté a la vista. */
.cap{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:var(--pad); opacity:0; transition:opacity .25s var(--curva) }
.cap--ver{ opacity:1 }
.cap__fondo{ position:absolute; inset:0; background:rgba(42,26,28,.48) }
.cap__caja{
  position:relative; width:min(440px,100%); max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain;
  padding:34px 32px 28px; border-radius:var(--r-l); background:var(--superficie-alta); border:1px solid rgba(125,100,40,.24);
  box-shadow:0 2px 6px rgba(20,16,12,.08), 0 30px 70px -22px rgba(42,20,24,.5); transform:translateY(14px); transition:transform .3s var(--curva);
}
.cap--ver .cap__caja{ transform:none }
.cap__caja:focus{ outline:none }
.cap__x{
  position:absolute; top:8px; right:8px; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%;
  background:transparent; color:var(--gris); font-size:1.7rem; line-height:1; cursor:pointer;
}
.cap__x:hover{ background:var(--negro-2); color:var(--tinta) }
.cap__x:focus-visible, .cap__input:focus-visible, .cap__consent input:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.cap__tit{ font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,4vw,2.1rem); line-height:1.12; color:var(--marfil); margin:0 28px 8px 0 }
.cap__txt{ font-size:.95rem; line-height:1.6; color:var(--gris); margin-bottom:16px }
.cap__campo{ display:block; margin-bottom:12px }
.cap__etq{ display:block; margin-bottom:5px; font-size:.78rem; font-weight:500; letter-spacing:.04em; color:var(--tinta) }
.cap__trampa{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }
.cap__input{
  width:100%; padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r-s); background:#fff;
  font:inherit; font-size:1rem; color:var(--tinta);
}
.cap__input:focus{ outline:none; border-color:var(--oro-hondo); box-shadow:0 0 0 3px rgba(196,162,74,.22) }
.cap__consent{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:start; margin:4px 0 14px; font-size:.8rem; line-height:1.5; color:var(--gris); cursor:pointer }
.cap__consent input{ width:18px; height:18px; margin-top:2px; accent-color:var(--marfil) }
.cap__estado{ min-height:1.3em; margin-top:10px; font-size:.82rem; line-height:1.5; color:var(--verde-texto) }
.cap__estado:empty{ margin-top:0; min-height:0 }
.cap__estado--error{ color:var(--error) }
.cap__listo{ padding-top:6px }
.cap__listo-tit{ font-family:var(--serif); font-weight:500; font-size:1.7rem; line-height:1.15; color:var(--marfil); margin:0 28px 8px 0 }
.cap__listo-txt{ font-size:.95rem; line-height:1.6; color:var(--gris); margin-bottom:16px }
.cap--quieto, .cap--quieto .cap__caja{ transition:none }
@media (prefers-reduced-motion:reduce){ .cap, .cap__caja{ transition:none } }
@media (max-width:720px){
  .cap{ place-items:end stretch; padding:0 }
  .cap__fondo{ background:rgba(42,26,28,.32) }
  .cap__caja{
    width:100%; max-height:45vh; max-height:45dvh; padding:22px 18px 16px; border-radius:var(--r-l) var(--r-l) 0 0; border-bottom:0;
    transform:translateY(24px);
  }
  .cap__tit{ font-size:1.45rem; margin-bottom:4px }
  .cap__txt{ font-size:.88rem; line-height:1.45; margin-bottom:10px }
  .cap__campo{ margin-bottom:8px }
  .cap__etq{ margin-bottom:3px }
  .cap__input{ padding:10px 12px }
  .cap__consent{ font-size:.76rem; line-height:1.4; margin-bottom:10px }
  .cap .btn--bloque{ padding:13px }
}

/* ══════════ MEMORICE DE FRAGANCIAS (tipo `juego` del popup · assets/js/captacion.js) ══════════
   Tablero de cartas con parejas de familias olfativas, ilustraciones propias (borgoña y dorado sobre marfil; ni fotos ni marcas de
   terceros). El giro de la carta es sobrio y se apaga con prefers-reduced-motion (y con .cap--quieto, que captacion.js pone al abrir).
   Celular: hoja inferior de hasta 85 % del alto SOLO mientras se juega; el formulario y el cupón usan menos (65 %). */
.cap--juego .cap__caja{ width:min(460px,100%) }
.mem__zona{ min-width:0 }
.mem__avance{ margin:0 0 10px; font-size:.8rem; line-height:1.4; color:var(--gris); font-variant-numeric:tabular-nums }
.mem__aviso{ margin:0 0 10px; padding:8px 12px; border-radius:var(--r-s); background:var(--negro-2); border:1px solid var(--linea); font-size:.82rem; line-height:1.45; color:var(--tinta) }
.mem__voz{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.mem{ display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:10px }
.mem__carta{
  position:relative; display:block; width:100%; min-width:44px; min-height:44px; aspect-ratio:3/4; padding:0; border:0; border-radius:var(--r-m);
  background:none; perspective:700px; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.mem__carta:focus-visible{ outline:2px solid var(--marfil); outline-offset:3px }
.mem__giro{ position:absolute; inset:0; display:block; transform-style:preserve-3d; transition:transform .45s var(--curva) }
.mem__carta--vuelta .mem__giro{ transform:rotateY(180deg) }
.mem__cara{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; overflow:hidden;
  border-radius:var(--r-m); backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.mem__cara svg{ width:54%; max-width:64px; height:auto }
.mem__cara--dorso{
  color:var(--oro-claro); border:1px solid rgba(221,190,102,.6);
  background:radial-gradient(70% 60% at 50% 38%, rgba(221,190,102,.16), transparent 70%), linear-gradient(160deg,var(--burdeo-claro),var(--burdeo-hondo));
  box-shadow:var(--sombra-1);
}
.mem__cara--dorso .mem__oro{ stroke:var(--oro-claro) }
.mem__cara--dorso .mem__oro-r{ fill:var(--oro-claro); stroke:var(--oro-claro) }
.mem__cara--frente{ transform:rotateY(180deg); color:var(--marfil); background:#FFFEFB; border:1px solid var(--oro); box-shadow:var(--sombra-1) }
.mem__oro{ stroke:var(--oro-hondo) }
.mem__oro-r{ fill:var(--oro); stroke:var(--oro-hondo) }
.mem__nom{ max-width:100%; padding:0 4px; font-size:.62rem; line-height:1.2; letter-spacing:.08em; text-transform:uppercase; font-weight:500; text-align:center; overflow-wrap:anywhere }
.mem__carta--par .mem__cara--frente{ background:#FBF3DD; box-shadow:inset 0 0 0 2px var(--oro) }
.mem--denso .mem__carta{ aspect-ratio:1/1 }
.mem--denso .mem__nom{ font-size:.56rem; letter-spacing:.04em }
.mem__pie{ margin-top:14px; padding-top:12px; border-top:1px solid var(--linea-2); font-size:.8rem; line-height:1.5; color:var(--gris) }
.mem__pie-txt{ margin:0 0 4px }
.mem__bases-btn{ min-height:32px; padding:4px 0; font-size:.8rem; color:var(--marfil); text-decoration:underline; text-underline-offset:3px }
.mem__bases-btn:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.mem__bases{ margin-top:6px; padding:10px 12px; max-height:28vh; overflow:auto; border-radius:var(--r-s); background:var(--negro-2); font-size:.76rem; line-height:1.5; white-space:pre-line; color:var(--tinta) }
/* pantalla del cupón ganado */
.cap__intentos{ margin:0 0 6px; font-size:.9rem; color:var(--gris) }
.cap__cupon{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0 12px }
.cap__codigo{
  padding:10px 16px; border:1.5px dashed var(--oro-hondo); border-radius:var(--r-s); background:#FFFEFB; color:var(--marfil);
  font:600 1.3rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; user-select:all; overflow-wrap:anywhere;
}
.cap__copiar{ padding:10px 16px; font-size:.78rem; min-height:44px }
.cap__aplicado{ margin:0 0 8px; font-size:.9rem; font-weight:500; line-height:1.45; color:var(--verde-texto) }
.cap__premio:focus{ outline:none }
.cap--quieto .mem__giro, .cap--quieto .mem__carta{ transition:none }
@media (prefers-reduced-motion:reduce){ .mem__giro{ transition:none } }
@media (max-width:720px){
  .cap--juego .cap__caja[data-paso="jugando"]{ max-height:85vh; max-height:85dvh; padding:16px 14px 10px }
  .cap--juego .cap__caja[data-paso="form"]{ max-height:75vh; max-height:75dvh; padding:16px 14px 12px }
  .cap--juego .cap__caja[data-paso="fin"]{ max-height:65vh; max-height:65dvh }
  .cap--juego .cap__caja[data-paso="form"] .cap__txt{ font-size:.82rem; line-height:1.35; margin-bottom:8px }
  .cap--juego .cap__caja[data-paso="form"] .cap__consent{ margin:0 0 2px; min-height:38px; align-items:center; font-size:.74rem; line-height:1.35 }
  .cap--juego .cap__caja[data-paso="form"] .mem__pie{ margin-top:8px }
  .cap--juego .cap__caja[data-paso="jugando"] .cap__tit{ font-size:1.3rem }
  .cap--juego .cap__caja[data-paso="jugando"] .cap__txt{ font-size:.82rem; line-height:1.35; margin-bottom:6px }
  .mem{ gap:8px }
  .mem__carta{ aspect-ratio:1/1 }
  .mem__avance{ margin-bottom:8px; font-size:.76rem }
  .mem__pie{ margin-top:10px; padding-top:8px; font-size:.74rem; line-height:1.4 }
  .cap__codigo{ font-size:1.1rem }
}

/* Cupón en el carro: avisos (cupón guardado con el carro vacío, vencido o rechazado por el servidor) */
.cupon-nota{ margin:12px 0; padding:10px 12px; border:1px solid var(--linea); border-radius:var(--r-s); background:var(--negro-2); font-size:.82rem; line-height:1.5; color:var(--tinta) }
.cupon-nota--aviso{ border-color:rgba(156,59,46,.4) }
.cupon-nota .cupon-quitar{ margin-left:2px }

/* «El complemento perfecto» del carro (apagado por defecto; lo enciende el panel) */
.compl{ margin:6px 0 18px; padding-top:16px; border-top:1px solid var(--linea-2) }
.compl__tit{ margin:0 0 4px; font-family:var(--serif); font-size:1.25rem; font-weight:500; line-height:1.2; color:var(--marfil) }
.compl__item{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--linea-2) }
.compl__item:last-child{ border-bottom:0 }
.compl__vis{ width:56px; height:56px }
.compl__item .ci__nom{ margin:2px 0 2px; font-size:1rem }
.compl__item .ci__meta{ margin:0 }
.compl__der{ display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.compl__item .ci__precio{ font-size:1.05rem }
.compl__add{ min-height:36px; padding:6px 14px; font-size:.72rem }