/* ==========================================================================
   Elixir — sistema visual
   Tinta violeta profunda + verde eléctrico. Mobile-first, diseñado a 390px.
   ========================================================================== */

/* -------------------------------------------------------------- tipografía
   Archivo variable, autohospedada: sin viaje a un tercero y sin depender de
   que Google Fonts esté disponible. Los ejes wdth/wght dan todo el contraste.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* Fallbacks para navegadores sin oklch: se pisan abajo si hay soporte. */
  --bg: #0e0d0c;
  --bg-deep: #080807;
  --surface: #1a1917;
  --surface-2: #262421;
  --line: #35322d;
  --ink: #f8f5ef;
  --muted: #b3aca0;
  --primary: #e0b356;
  --primary-dim: #9c7a2e;
  --accent: #cfa049;
  --peligro: #d4544a;
  --on-fill: #16150f;
  --cat-nicho: #e0b356;
  --cat-arabe: #d09250;
  --cat-disenador: #e8d5a8;

  /* Negro y dorado. El fondo es casi negro puro y neutro a propósito: el video
     de portada se compone con mezcla screen, así que donde el clip es negro
     aparece exactamente este color. Cualquier tinte fuerte acá dibujaría el
     rectángulo del video sobre la página. */
  --bg: oklch(0.105 0.006 75);
  --bg-deep: oklch(0.07 0.004 75);
  --surface: oklch(0.155 0.008 75);
  --surface-2: oklch(0.21 0.01 75);
  --line: oklch(0.28 0.012 75);
  --ink: oklch(0.97 0.006 85);
  --muted: oklch(0.72 0.012 80);
  --primary: oklch(0.8 0.13 82);
  --primary-dim: oklch(0.62 0.11 80);

  /* Antes acá había un cobre anaranjado. Ahora es oro profundo: la diferencia
     con el primario la da la temperatura, no un cambio de familia. */
  --accent: oklch(0.72 0.145 72);

  /* Rojo sólo para el panel (errores, borrar). No es color de marca: aparece
     donde hace falta que NO se lea como oro. */
  --peligro: oklch(0.62 0.19 25);

  /* Oro metalizado. La doble luz —clara, honda, clara otra vez— es lo que hace
     que se lea como metal y no como un degradado cualquiera. El stop más oscuro
     no baja de L 0.66 para que el texto encima siga pasando contraste (6.6:1). */
  --metal: linear-gradient(
    135deg,
    oklch(0.95 0.055 96) 0%,
    oklch(0.85 0.125 86) 26%,
    oklch(0.66 0.125 68) 52%,
    oklch(0.9 0.095 90) 74%,
    oklch(0.73 0.13 76) 100%
  );
  --on-fill: oklch(0.13 0.01 75);
  --cat-nicho: oklch(0.8 0.13 82);
  --cat-arabe: oklch(0.72 0.14 48);
  --cat-disenador: oklch(0.86 0.06 90);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --z-sticky: 20;
  --z-fab: 30;
  --z-backdrop: 40;
  --z-drawer: 50;
  --z-hero: 55;
  --z-toast: 60;

  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --gap-seccion: clamp(4rem, 13vw, 7.5rem);

  color-scheme: dark;
}

/* ------------------------------------------------------------------- reset */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--primary); color: var(--on-fill); }

/* -------------------------------------------------------------- tipografía */

.t-display,
.t-seccion {
  font-weight: 800;
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-wrap: balance;
}

.t-display { font-size: clamp(3.2rem, 19.5vw, 5rem); font-stretch: 125%; }

.t-seccion {
  font-weight: 750;
  font-stretch: 112%;
  font-size: clamp(1.85rem, 8vw, 2.9rem);
  line-height: 0.98;
}

.t-lead {
  color: var(--muted);
  font-size: clamp(1rem, 4.1vw, 1.15rem);
  max-width: 46ch;
  text-wrap: pretty;
}

.precio {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.precio--antes {
  color: var(--muted);
  font-weight: 500;
  text-decoration: line-through;
  font-size: 0.85em;
  margin-left: 0.45em;
}

/* --------------------------------------------------------------- estructura */

.wrap {
  width: min(100% - 2 * var(--pad), 1180px);
  margin-inline: auto;
}

.seccion { padding-block: var(--gap-seccion); }

.seccion__cabecera {
  display: grid;
  gap: 0.85rem;
  margin-bottom: clamp(1.75rem, 6vw, 2.75rem);
}

.filete {
  width: 56px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--primary);
}

/* Frasco vectorial: por default ocupa su contenedor; cada contexto lo achica. */
.frasco { width: 100%; height: auto; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vacio-catalogo { display: grid; gap: 1rem; justify-items: start; }
.vacio-catalogo a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.enlace-suave {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.enlace-suave:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------ botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.25s, border-color 0.25s, opacity 0.25s;
}

.btn:active { transform: scale(0.975); }

.btn--primario { background: var(--primary); color: var(--on-fill); }
.btn--primario:hover { background: color-mix(in oklab, var(--primary) 88%, white); }

.btn--wa {
  background: var(--primary);
  color: var(--on-fill);
  box-shadow: 0 12px 34px -18px var(--primary);
}

.btn--wa:hover { background: color-mix(in oklab, var(--primary) 88%, white); }

.btn--fantasma {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--fantasma:hover { border-color: var(--primary); color: var(--primary); }

.btn--bloque { width: 100%; }

.btn svg { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-full);
  border: 1px solid currentColor;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.chip--nicho { color: var(--cat-nicho); background: color-mix(in oklab, var(--cat-nicho) 12%, transparent); }
.chip--arabe { color: var(--cat-arabe); background: color-mix(in oklab, var(--cat-arabe) 12%, transparent); }
.chip--disenador { color: var(--cat-disenador); background: color-mix(in oklab, var(--cat-disenador) 12%, transparent); }
.chip--neutro { color: var(--muted); border-color: var(--line); }

/* ================================================================== HERO === */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: clip;
  isolation: isolate;
}

.hero__aura {
  position: absolute;
  inset: 6% -28% auto -28%;
  height: 78%;
  background:
    radial-gradient(46% 50% at 50% 52%, color-mix(in oklab, var(--primary) 26%, transparent), transparent 72%),
    radial-gradient(38% 40% at 74% 24%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 74%);
  filter: blur(40px);
  opacity: 0.4;
  z-index: -1;
  animation: deriva 15s var(--ease-soft) infinite alternate;
}

@keyframes deriva {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.09); }
}

.hero__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--pad) 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.hero__barra b { color: var(--ink); font-weight: 650; }

.hero__stage {
  display: grid;
  place-items: center;
  padding-inline: var(--pad);
  position: relative;
}

.hero__composicion {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  /* La palabra sube y el frasco baja: el grupo pesa hacia abajo, se compensa acá. */
  translate: 0 -3vh;
}

.hero__word {
  grid-area: 1 / 1;
  position: relative;
  color: var(--ink);
  text-align: center;
  width: 100%;
  transform: translateY(var(--word-y, -24%));
  transform-origin: 50% 70%;
  will-change: transform, filter, opacity;
}

/* Pasada de luz: una copia dorada de la marca, superpuesta y recortada a una
   franja diagonal que la recorre. Se hace con máscara y no con degradado sobre
   el texto, así el color base sigue siendo un blanco sólido y legible. */
.hero__word-caja {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hero__word-luz {
  position: absolute;
  inset: 0;
  color: var(--primary);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg,
    transparent 42%, #000 47%, #000 53%, transparent 58%);
  mask-image: linear-gradient(100deg,
    transparent 42%, #000 47%, #000 53%, transparent 58%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 135% 0;
  mask-position: 135% 0;
  /* El barrido va al principio del ciclo y después espera: así cae cerca de
     cuando las letras terminan de entrar, sin depender de sincronizar clases. */
  animation: pasada-de-luz 3.2s ease-in-out 0.5s infinite;
}

@keyframes pasada-de-luz {
  0%        { -webkit-mask-position: 135% 0; mask-position: 135% 0; }
  30%, 100% { -webkit-mask-position: -35% 0; mask-position: -35% 0; }
}

/* Con video la marca no está en reposo: el frasco ya trae su propio nombre
   grabado en el collar y las dos se encimaban. Entra recién con el rociado,
   cuando el clip pasa a macro y el encuadre se vuelve abstracto. La clase la
   pone el JS, así que sin JS la palabra se ve igual. */
/* Se mide en vh y no en % de la propia palabra: así queda anclada al alto del
   hero y no depende de cuántas letras tenga la marca. Sube a la franja alta,
   que en el plano macro es la zona oscura; el centro lo ocupa el atomizador. */
.hero.is-titulo-al-spray { --word-y: -17vh; }

/* En pantallas anchas el video ocupa menos alto del viewport, así que el mismo
   desplazamiento en vh se pasa y manda la palabra contra el borde de arriba. */
@media (min-width: 900px) {
  .hero.is-titulo-al-spray { --word-y: -11vh; }
}

.hero.is-titulo-al-spray .hero__word {
  opacity: 0;
  /* Tres letras sobre una foto piden aire entre ellas: con el tracking abierto
     la marca se lee como sello y no como una palabra más. */
  letter-spacing: 0.11em;
  /* El macro tiene gotas por todos lados: la sombra despega la palabra. */
  text-shadow: 0 6px 34px oklch(0 0 0 / 0.9), 0 2px 10px oklch(0 0 0 / 0.7);
}

/* El contenedor sólo se enciende; el movimiento lo hacen las letras. */
.hero.is-titulo-al-spray.is-rociando .hero__word {
  animation: aparecer 80ms linear forwards;
}

@keyframes aparecer {
  to { opacity: 1; }
}

.hero__letra { display: inline-block; }

/* Cada letra entra por su cuenta, desde abajo y desenfocada. El escalonado es
   lo que lo vuelve un cartel y no un fundido. */
.hero.is-titulo-al-spray.is-rociando .hero__letra {
  animation: entra-letra 620ms var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes entra-letra {
  0% {
    opacity: 0;
    transform: translateY(0.45em) scale(0.78);
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* El frasco tapa la mitad inferior de la palabra: profundidad real, no capas planas.
   Las fotos vienen con margen transparente, así que el contenedor puede pasarse
   del ancho del viewport sin costo: el hero recorta y no hay scroll horizontal. */
/* Fuera del flujo a propósito: las fotos de portada son más anchas que el viewport
   y, como ítem del grid, estiraban la columna y descentraban la palabra. */
.hero__frasco {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: calc(var(--frasco-base, min(52vw, 268px)) * var(--escala, 1));
  filter: drop-shadow(0 34px 50px oklch(0 0 0 / 0.6));
  transform: translateY(16%);
  will-change: transform;
}

.hero__capa img,
.hero__capa svg {
  width: 100%;
  height: auto;
  display: block;
}

.hero__cuerpo { position: relative; z-index: 1; }

/* Foto con la tapa puesta: es lo que se ve mientras nadie tocó nada. */
.hero__entero { position: absolute; inset: 0; z-index: 2; }

.hero__tapa {
  position: absolute;
  z-index: 3;
  left: var(--tapa-x, 50%);
  top: var(--tapa-y, 0%);
  width: var(--tapa-w, 100%);
  translate: -50% 0;
  transform-origin: 50% 88%;
  will-change: transform, opacity, filter;
}

/* Con fotos la tapa suelta arranca oculta; aparece en el mismo frame del tirón. */
.hero__frasco[data-modo="fotos"] .hero__tapa { opacity: 0; }

/* Video de portada. Con fondo negro, la mezcla screen lo vuelve transparente
   sin necesitar un codec con canal alfa (que obligaría a servir dos versiones). */
/* Video de portada: ocupa el alto del hero y se centra. En mobile se recorta de
   costados (que son negros) y en desktop queda como una película centrada. */
.hero__video {
  position: absolute;
  top: var(--vid-y, 50%);
  left: 50%;
  translate: -50% -50%;
  z-index: 2;
  height: calc(100% * var(--escala, 1));
  width: auto;
  max-width: none;
  display: block;
  /* Recorte recto de la franja inferior. Se usa clip-path y no mask porque
     mask aísla el elemento y rompería la mezcla screen contra el fondo. */
  clip-path: inset(0 0 var(--crop, 0%) 0);
  /* Los fondos "negros" de estudio traen un halo tenue alrededor del producto.
     Con mezcla screen ese halo dibuja el rectángulo del video sobre el fondo
     del hero. El contraste lo hunde a negro y el rectángulo desaparece.
     El filter va en el mismo elemento que la mezcla, no en un ancestro: ahí sí
     conviven (un ancestro con filter aislaría el grupo y rompería el screen). */
  filter: contrast(var(--contraste, 1.25)) saturate(1.04) blur(var(--scrub-blur, 0px));
  transition: filter 160ms linear;
}

/* Funde los cuatro bordes del video con el fondo del hero.
   Se calca exactamente sobre la caja del video (misma posición, mismo alto y la
   proporción real del archivo, que la mide el JS) porque el halo del set se ve
   como un rectángulo si no. De paso se come la marca de agua de abajo a la
   derecha, sin dejar el escalón que sí dejaba recortar la esquina. */
.hero__velo {
  position: absolute;
  top: var(--vid-y, 50%);
  left: 50%;
  translate: -50% -50%;
  height: calc(100% * var(--escala, 1));
  aspect-ratio: var(--vid-ratio, 9 / 16);
  width: auto;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--bg), transparent 12%, transparent 88%, var(--bg)),
    linear-gradient(to bottom, var(--bg), transparent 14%, transparent 72%, var(--bg) 92%);
}

/* El negro del video desaparece contra el fondo del hero. Requiere que ningún
   ancestro intermedio cree un grupo de apilado (de ahí que sea hijo directo). */
.hero__video--screen { mix-blend-mode: screen; }

/* Con video, el fondo del hero va liso: el clip se compone con mezcla screen,
   así que cualquier degradado detrás se asomaría por sus zonas negras y volvería
   a dibujar el rectángulo. Negro parejo = video sin caja. */
.hero:has(.hero__video) .hero__aura { display: none; }

/* Orden de capas dentro del hero, para que la palabra quede detrás del frasco
   pero la barra y el pie por encima de todo. */
.hero:has(.hero__video) .hero__stage { position: relative; z-index: 1; }

/* Por encima del velo (3): el velo va después en el DOM y con z-index igual le
   ganaba, atenuando la barra de arriba. */
.hero:has(.hero__video) .hero__barra,
.hero:has(.hero__video) .hero__pie { position: relative; z-index: 4; }

/* Marcador invisible: de acá sale el spray. */
.hero__pico {
  position: absolute;
  left: 50%;
  top: var(--pico-y, 20%);
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hero__pie {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  padding: 0 var(--pad) clamp(1.5rem, 6vw, 2.5rem);
  text-align: center;
}

.hero__bajada {
  color: var(--muted);
  max-width: 34ch;
  font-size: clamp(0.95rem, 3.9vw, 1.08rem);
  text-wrap: pretty;
}

.hero__hint {
  display: inline-grid;
  justify-items: center;
  gap: 0.45rem;
  background: none;
  border: 0;
  padding: 0.5rem 1rem;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.hero__hint svg { width: 22px; height: 22px; animation: rebote 2s var(--ease-soft) infinite; }

@keyframes rebote {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* lienzo del spray */
.hero__spray {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-hero);
}

/* onda de color que barre la pantalla en el splash */
.wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-hero);
  opacity: 0;
  background: radial-gradient(
    circle at var(--wash-x, 50%) var(--wash-y, 50%),
    color-mix(in oklab, var(--primary) 60%, transparent) 0%,
    color-mix(in oklab, var(--accent) 30%, transparent) 32%,
    transparent 62%
  );
}

.wash.is-on { animation: wash 1100ms var(--ease) forwards; }

/* El video ya trae su propia luz: ahí la onda va apenas insinuada. */
.wash.is-suave { --wash-max: 0.36; }

@keyframes wash {
  0%   { opacity: 0; transform: scale(0.15); }
  18%  { opacity: var(--wash-max, 0.9); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* estado durante y después del splash */
html.is-locked,
html.is-locked body { overflow: hidden; height: 100%; overscroll-behavior: none; }
html.is-locked body { touch-action: none; }

/* 1. destape — la tapa pega un tirón, se libera y sale girando */
.hero.is-spraying .hero__entero { opacity: 0; }

.hero.is-spraying .hero__tapa {
  opacity: 1;
  animation: destapar 780ms var(--ease) forwards;
}

@keyframes destapar {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); filter: blur(0); opacity: 1; }
  11%  { transform: translate3d(0, -1.4vh, 0) rotate(-1.5deg) scale(1.025); filter: blur(0); opacity: 1; }
  36%  { transform: translate3d(-2.5vw, -15vh, 0) rotate(-14deg) scale(1.05); filter: blur(1.2px); opacity: 1; }
  100% { transform: translate3d(-12vw, -56vh, 0) rotate(-40deg) scale(0.8); filter: blur(2.8px); opacity: 0; }
}

/* 2. rociado — sin video, la palabra se deshace cuando el spray la atraviesa */
.hero:not(.is-titulo-al-spray).is-rociando .hero__word {
  animation: dispersar 1000ms var(--ease) forwards;
}

@keyframes dispersar {
  0%   { transform: translateY(-24%) scale(1); filter: blur(0); opacity: 1; }
  22%  { transform: translateY(-25%) scale(1.06); filter: blur(1px); opacity: 1; }
  100% { transform: translateY(-28%) scale(1.42); filter: blur(16px); opacity: 0; }
}

/* 4. rebobinado — terminada la secuencia manda el scroll, así que se apagan
      los keyframes: los valores los escribe el JS cuadro a cuadro. */
.hero.is-rebobinable .hero__word,
.hero.is-rebobinable .hero__pie,
.hero.is-rebobinable .hero__barra { animation: none; }

/* 3. caída — retroceso por el disparo y después se va */
.hero.is-cayendo .hero__frasco { animation: patada 950ms var(--ease) forwards; }

@keyframes patada {
  0%   { transform: translateY(16%) rotate(0deg) scale(1); }
  9%   { transform: translateY(18.5%) rotate(-1.2deg) scale(0.985); }
  24%  { transform: translateY(15%) rotate(0.4deg) scale(1); }
  100% { transform: translateY(62%) rotate(2deg) scale(1.12); opacity: 0; }
}

.hero.is-spraying .hero__pie,
.hero.is-spraying .hero__barra { animation: velo 500ms var(--ease) forwards; }

@keyframes velo { to { opacity: 0; transform: translateY(10px); } }

/* ============================================================== PROMOS ==== */

.promos { position: relative; }

/* Las promos se leen de un vistazo, sin desplazar de costado: en el celular
   van apiladas en filas compactas y recién en pantallas anchas pasan a dos
   columnas. Antes era un carrusel horizontal y había que arrastrarlo. */
.promos__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

@media (min-width: 660px) {
  .promos__lista { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.75rem; }
}

.promo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}

.promo__texto { display: grid; gap: 0.25rem; min-width: 0; }

.promo__etiqueta {
  background: var(--metal);
  color: var(--on-fill);
  font-weight: 800;
  font-stretch: 108%;
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  padding: 0.22rem 0.55rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
  line-height: 1.35;
}

.promo__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.promo__detalle { color: var(--muted); font-size: 0.89rem; line-height: 1.5; text-wrap: pretty; }

/* medios de pago */

.pagos {
  margin-top: clamp(2rem, 8vw, 3.25rem);
  padding: clamp(1.4rem, 5vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--bg-deep);
  border: 1px solid var(--line);
}

.pagos__titulo {
  font-size: clamp(1.35rem, 5.6vw, 1.9rem);
  font-weight: 750;
  font-stretch: 108%;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 1.25rem;
}

.pagos__titulo em { font-style: normal; color: var(--primary); }

.pagos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
}

.pago {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}

.pago svg { width: 24px; height: 24px; color: var(--primary); }
.pago b { display: block; font-weight: 650; font-size: 0.95rem; line-height: 1.2; }
.pago span { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }

.pagos__nota {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.pagos__nota svg { width: 18px; height: 18px; color: var(--primary); flex: none; }

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

.catnav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.catnav__inner {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.6rem;
}

.catnav__inner::-webkit-scrollbar { display: none; }

/* En el celular las categorías entran todas sin arrastrar: se reparten el ancho
   en columnas iguales. Se esconden la marca (ya está en el hero) y los dos
   accesos que no son categorías, que igual están en el pie y más abajo. */
@media (max-width: 719px) {
  .catnav__inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.3rem;
    overflow: visible;
  }

  .catnav__marca,
  .catnav a[data-cat-link="encargo"],
  .catnav a[data-cat-link="mayorista"] { display: none; }

  .catnav a {
    padding: 0.45rem 0.25rem;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
}

.catnav__marca {
  font-weight: 800;
  font-stretch: 116%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  margin-right: 0.35rem;
  flex: none;
}

.catnav a {
  flex: none;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.catnav a:hover,
.catnav a.is-activo {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
}

/* ============================================================== CATÁLOGO === */

.categoria + .categoria { margin-top: var(--gap-seccion); }

/* La catnav es sticky: los anclajes tienen que frenar debajo de ella. */
.categoria,
#encargo,
#mayorista,
.relacionados { scroll-margin-top: 4.75rem; }

.categoria__cabecera {
  display: grid;
  gap: 0.7rem;
  margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
}

.categoria__conteo { color: var(--muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; }

/* El título y el "ver los N" comparten renglón: el atajo queda a la altura del
   nombre de la categoría, que es donde se lo busca. */
.categoria__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.categoria__ver {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}

.categoria__ver svg { width: 16px; height: 16px; transition: translate 0.3s var(--ease); }
.categoria__ver:hover { border-bottom-color: currentColor; }
.categoria__ver:hover svg { translate: 3px 0; }

/* Y abajo de la grilla el mismo destino, pero como botón: al terminar de
   mirar las cards, seguir es lo natural y no hay que volver arriba. */
.categoria__mas {
  margin-top: clamp(1rem, 4vw, 1.5rem);
  width: 100%;
}

.categoria__mas svg { transition: translate 0.3s var(--ease); }
.categoria__mas:hover svg { translate: 3px 0; }

.categoria--nicho .filete { background: var(--cat-nicho); }
.categoria--arabe .filete { background: var(--cat-arabe); }
.categoria--disenador .filete { background: var(--cat-disenador); }

/* Ofertas: es la única sección con el acento cobre, para que se despegue del
   oro del resto del catálogo. */
.filete--oferta { background: var(--metal); }
.seccion--ofertas { scroll-margin-top: 4.75rem; padding-bottom: 0; }

/* Ofertas no se apaga nunca: oro metalizado con brillo propio y un destello que
   lo recorre cada tanto. Es el único elemento del sitio con luz constante, así
   que no compite con nada. */
.catnav a.catnav__oferta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--metal);
  color: var(--on-fill);
  border-color: transparent;
  font-weight: 700;
  box-shadow:
    0 0 14px -2px color-mix(in oklab, var(--primary) 55%, transparent),
    0 0 34px -8px color-mix(in oklab, var(--primary) 45%, transparent);
  animation: latido-oro 3.4s ease-in-out infinite;
}

.catnav a.catnav__oferta:hover,
.catnav a.catnav__oferta.is-activo {
  color: var(--on-fill);
  border-color: transparent;
  background: var(--metal);
}

/* El destello. Va detrás del texto (que lleva su propio z-index) para no lavarlo. */
.catnav a.catnav__oferta::after {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 34%,
    oklch(1 0 0 / 0.75) 48%,
    transparent 60%
  );
  translate: -130% 0;
  animation: destello 3.4s ease-in-out infinite;
}

.catnav a.catnav__oferta > span { position: relative; z-index: 1; }

@keyframes destello {
  0%, 52% { translate: -130% 0; }
  88%, 100% { translate: 130% 0; }
}

@keyframes latido-oro {
  0%, 100% {
    box-shadow:
      0 0 14px -2px color-mix(in oklab, var(--primary) 55%, transparent),
      0 0 34px -8px color-mix(in oklab, var(--primary) 45%, transparent);
  }
  50% {
    box-shadow:
      0 0 20px -2px color-mix(in oklab, var(--primary) 75%, transparent),
      0 0 46px -8px color-mix(in oklab, var(--primary) 60%, transparent);
  }
}

.grilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 0.75rem;
}

@media (min-width: 720px) {
  .grilla { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.5rem 1.1rem; }
}

.card {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  position: relative;
}

.card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color 0.35s var(--ease), transform 0.45s var(--ease);
}

.card:hover .card__media { border-color: var(--primary); transform: translateY(-3px); }

.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media .frasco { width: 66%; height: auto; }

.card__badges {
  position: absolute;
  inset: 0.55rem 0.55rem auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
  pointer-events: none;
}

.badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.16rem 0.45rem;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--bg-deep) 78%, transparent);
  border: 1px solid var(--line);
  color: var(--muted);
  backdrop-filter: blur(6px);
  line-height: 1.5;
}

.badge--oferta { background: var(--metal); color: var(--on-fill); border-color: transparent; }

/* Promo propia del perfume (2x1, regalo, últimas unidades). Va en oro para no
   confundirse con el cobre del descuento de precio. */
.badge--promo { background: var(--primary); color: var(--on-fill); border-color: transparent; }

.promo-producto {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--primary) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--primary) 40%, var(--line));
}

.promo-producto p { color: var(--ink); font-size: 0.94rem; line-height: 1.5; text-wrap: pretty; }
.badge--sin-stock { background: var(--bg-deep); color: var(--ink); }

.card__cuerpo { display: grid; gap: 0.22rem; align-content: start; }

.card__marca {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.card__nombre {
  font-weight: 620;
  font-size: 0.98rem;
  line-height: 1.25;
  text-wrap: balance;
}

.card__precio { display: flex; align-items: baseline; flex-wrap: wrap; font-size: 1.02rem; }

/* Card destacada: ocupa el ancho completo y rompe la uniformidad de la grilla.
   A todo el ancho en cualquier viewport, para que nunca deje un hueco estirado. */
.card--ancha {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 128px) 1fr;
  align-items: center;
  align-self: start;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}

@media (min-width: 720px) {
  .card--ancha { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 2rem; padding: 1.25rem; }
  .card--ancha .card__cuerpo { max-width: 62ch; }
}

/* En la card ancha la foto es chica: los badges no entran, la info va al cuerpo. */
.card--ancha .card__badges { display: none; }
.card--ancha .card__media { aspect-ratio: 3 / 4; border: 0; }
.card--ancha .card__media .frasco { width: 88%; }
.card--ancha .card__cuerpo { display: grid; gap: 0.4rem; }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.card--ancha .card__nombre { font-size: clamp(1.15rem, 5vw, 1.5rem); font-weight: 700; }
.card--ancha .card__precio { font-size: 1.2rem; }
.card--ancha .card__desc {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__link { position: absolute; inset: 0; border-radius: var(--r-lg); }

/* =============================================== ENCARGO / MAYORISTA ====== */

.dupla { display: grid; gap: 1rem; }

@media (min-width: 860px) { .dupla { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.tarjeton {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.5rem, 6vw, 2.5rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 8% 0%, color-mix(in oklab, var(--primary) 13%, transparent), transparent 58%),
    var(--surface);
}

.tarjeton--mayor {
  background:
    radial-gradient(120% 90% at 92% 0%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 58%),
    var(--surface);
}

.tarjeton > svg { width: 34px; height: 34px; color: var(--primary); }
.tarjeton--mayor > svg { color: var(--accent); }

.tarjeton h3 {
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  font-weight: 750;
  font-stretch: 108%;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.tarjeton p { color: var(--muted); font-size: 0.98rem; text-wrap: pretty; }

.campo {
  display: grid;
  gap: 0.4rem;
}

.campo label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.95rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-deep);
  color: var(--ink);
  transition: border-color 0.2s;
}

.campo textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--primary); outline: none; }
.campo input::placeholder, .campo textarea::placeholder { color: color-mix(in oklab, var(--muted) 82%, var(--bg)); }

.tarjeton__lista { display: grid; gap: 0.5rem; }

.tarjeton__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  color: var(--muted);
  font-size: 0.93rem;
}

.tarjeton__lista svg { width: 18px; height: 18px; color: var(--primary); margin-top: 0.28rem; }

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

.pie {
  margin-top: var(--gap-seccion);
  padding-block: clamp(2.5rem, 8vw, 4rem) calc(clamp(2.5rem, 8vw, 4rem) + 72px);
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
}

.pie__grid { display: grid; gap: 1.75rem; }

@media (min-width: 720px) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.pie__marca {
  font-weight: 800;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: 1.8rem;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.pie__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.pie__acciones .btn { flex: 1 1 auto; }

.pie p, .pie li { color: var(--muted); font-size: 0.9rem; }
.pie h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.7rem; color: var(--ink); }
.pie li + li { margin-top: 0.35rem; }
/* Los botones quedan afuera: acá adentro hay uno con fondo oro, y pintarle el
   texto de oro al pasar el mouse lo hacía desaparecer junto con el ícono, que
   hereda currentColor. */
.pie a:not(.btn):hover { color: var(--primary); }

.pie__legal {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  align-items: center;
}

.pie__legal-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.pie__legal-links a { text-decoration: underline; text-underline-offset: 3px; }

/* Firma del desarrollador. El naranja es ajeno a la paleta de ZAB a propósito:
   es el color del portfolio de Alejo, no el de la marca. Por eso va chico y en
   el renglón legal — se lee como firma de autor y no como un error de color.
   El monograma es tipográfico, igual que en el portfolio: misma familia, mismo
   peso y mismo tracking cerrado. Así queda nítido a cualquier tamaño y no suma
   ni un byte de descarga. */
.firma {
  --naranja: #ff5f1f;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  white-space: nowrap;
}

.firma__ac {
  font-family: "Arial Black", "Segoe UI Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--naranja);
  padding: 0.2rem 0.32rem 0.16rem;
  border: 1px solid color-mix(in oklab, var(--naranja) 42%, transparent);
  border-radius: 6px;
  transition: background-color 0.25s, border-color 0.25s;
}

.firma b { color: var(--ink); font-weight: 650; }
.firma:hover { color: var(--ink); }

.firma:hover .firma__ac {
  border-color: var(--naranja);
  background: color-mix(in oklab, var(--naranja) 18%, transparent);
}

/* ================================================================ LEGALES = */

.legal { padding-block: 1rem clamp(2rem, 8vw, 4rem); }

.legal__cabecera {
  display: grid;
  gap: 0.85rem;
  margin: clamp(1rem, 5vw, 2rem) 0 clamp(1.5rem, 6vw, 2.5rem);
}

.legal__aviso {
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line));
  font-size: 0.92rem;
}

.legal__aviso a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.legal__indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: clamp(1.5rem, 6vw, 2.5rem);
}

.legal__indice a {
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.legal__indice a:hover { color: var(--primary); border-color: var(--primary); }

.legal__bloque {
  max-width: 68ch;
  margin-bottom: clamp(2rem, 7vw, 3rem);
  scroll-margin-top: 4.75rem;
}

.legal__bloque h2 {
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  font-weight: 750;
  font-stretch: 106%;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.9rem;
}

.legal__bloque p,
.legal__bloque li { color: var(--muted); line-height: 1.7; text-wrap: pretty; }
.legal__bloque p + p, .legal__bloque ul { margin-top: 0.8rem; }
.legal__bloque strong { color: var(--ink); font-weight: 650; }
/* Los botones quedan afuera: si no, el texto dorado sobre el fondo dorado del
   botón lo dejaba en blanco. Mismo caso que en el pie. */
.legal__bloque a:not(.btn) { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.legal__bloque ul { display: grid; gap: 0.6rem; padding-left: 1.1rem; list-style: disc; }
.legal__bloque li::marker { color: var(--primary); }

.legal__nota { font-size: 0.84rem; opacity: 0.85; }

.falta {
  background: color-mix(in oklab, var(--accent) 30%, transparent);
  color: var(--ink);
  padding: 0.05em 0.35em;
  border-radius: 5px;
  font-weight: 650;
}

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

.fab {
  position: fixed;
  right: var(--pad);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 54px;
  padding: 0 1.15rem;
  border: 0;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-fill);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 18px 40px -16px oklch(0 0 0 / 0.8);
  transition: transform 0.4s var(--ease), opacity 0.3s;
}

.fab[hidden] { display: none; }
.fab:active { transform: scale(0.95); }
.fab svg { width: 22px; height: 22px; }

.fab__n {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding-inline: 6px;
  border-radius: var(--r-full);
  background: var(--on-fill);
  color: var(--primary);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.drawer {
  border: 0;
  padding: 0;
  margin: 0 0 0 auto;
  width: min(100%, 440px);
  max-width: 100%;
  max-height: 100svh;
  height: 100svh;
  background: var(--bg);
  color: var(--ink);
  overflow: visible;
}

.drawer::backdrop { background: oklch(0.05 0.02 288 / 0.72); backdrop-filter: blur(3px); }

.drawer__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  max-height: 100svh;
}

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  border-bottom: 1px solid var(--line);
}

.drawer__top h2 { font-size: 1.2rem; font-weight: 750; font-stretch: 108%; text-transform: uppercase; letter-spacing: -0.01em; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.icon-btn svg { width: 20px; height: 20px; }

.drawer__items { overflow-y: auto; padding: var(--pad); display: grid; gap: 0.9rem; align-content: start; }

.linea {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.8rem;
  align-items: center;
}

.linea__media {
  width: 64px;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.linea__media img { width: 100%; height: 100%; object-fit: cover; }
.linea__media .frasco { width: 74%; }

.linea__nombre { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.linea__meta { color: var(--muted); font-size: 0.78rem; }
.linea__precio { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary); font-size: 0.92rem; }

.qty { display: inline-flex; align-items: center; gap: 0.15rem; margin-top: 0.35rem; }

.qty button {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-weight: 700;
  line-height: 1;
}
.qty button:hover { border-color: var(--primary); color: var(--primary); }
.qty span { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.drawer__pie { padding: var(--pad); border-top: 1px solid var(--line); display: grid; gap: 0.85rem; background: var(--bg-deep); }

.drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.15rem; font-weight: 700; }
.drawer__total span:first-child { font-weight: 600; color: var(--muted); font-size: 0.95rem; }

.drawer__vacio { display: grid; gap: 0.6rem; place-items: center; text-align: center; color: var(--muted); padding: 3rem 1rem; }
.drawer__vacio svg { width: 44px; height: 44px; color: var(--line); }

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

.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.volver:hover { color: var(--primary); }
.volver svg { width: 18px; height: 18px; }

.detalle { display: grid; gap: clamp(1.5rem, 6vw, 2.5rem); padding-bottom: clamp(2rem, 8vw, 3rem); }

@media (min-width: 900px) {
  .detalle { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .detalle__galeria { position: sticky; top: 5rem; }
}

.galeria {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--r-lg);
}
.galeria::-webkit-scrollbar { display: none; }

.galeria__slide {
  scroll-snap-align: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  overflow: hidden;
  display: grid;
  place-items: center;
}
.galeria__slide img { width: 100%; height: 100%; object-fit: cover; }
.galeria__slide .frasco { width: 56%; }

.galeria__puntos { display: flex; gap: 0.4rem; justify-content: center; margin-top: 0.8rem; }

.galeria__puntos button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--r-full);
  border: 0;
  background: var(--line);
  cursor: pointer;
  transition: width 0.35s var(--ease), background-color 0.35s;
}
.galeria__puntos button.is-activo { width: 22px; background: var(--primary); }

.ficha { display: grid; gap: 1.1rem; align-content: start; }

.ficha__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }

.ficha__marca { color: var(--muted); font-size: 0.85rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; }

.ficha__nombre {
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  font-weight: 750;
  font-stretch: 106%;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ficha__precio { display: flex; align-items: baseline; flex-wrap: wrap; font-size: clamp(1.7rem, 7vw, 2.2rem); }

.ficha__desc { color: var(--muted); max-width: 62ch; text-wrap: pretty; }

.notas { display: grid; gap: 0.9rem; padding: 1.15rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }

.notas h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }

.notas__grupo { display: grid; gap: 0.5rem; }
.notas__grupo > span { font-size: 0.78rem; color: var(--muted); font-weight: 650; }
.notas__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.nota {
  padding: 0.28rem 0.65rem;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.82rem;
}

.piramide { display: grid; gap: 0.9rem; }

.acciones { display: grid; gap: 0.6rem; }

.barra-compra {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem var(--pad) calc(0.8rem + env(safe-area-inset-bottom, 0px));
  margin-inline: calc(-1 * var(--pad));
  background: color-mix(in oklab, var(--bg-deep) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) { .barra-compra { position: static; margin: 0; padding: 0; background: none; border: 0; backdrop-filter: none; } }

.relacionados { margin-top: var(--gap-seccion); }

/* ================================================================= TOAST == */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
  transform: translate(-50%, 16px);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: calc(100% - 2rem);
  padding: 0.75rem 1.1rem;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-fill);
  font-weight: 650;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.45s var(--ease);
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; }

/* ================================================================ REVEAL == */

html.js-reveal .reveal { opacity: 0; transform: translateY(16px); }

html.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* ========================================================= REDUCED MOTION = */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero__aura { animation: none; }

  /* El brillo de Ofertas queda fijo, sin latido ni destello recorriendo. */
  .catnav a.catnav__oferta { animation: none; }
  .catnav a.catnav__oferta::after { display: none; }

  /* Y la marca del hero: sin pasada de luz y sin escalonado de letras. */
  .hero__word-luz { display: none; }
  .hero.is-titulo-al-spray.is-rociando .hero__letra { animation: none; }
  .hero.is-spraying .hero__tapa { opacity: 0; animation: none; }
  .hero.is-rociando .hero__word { opacity: 0; transition: opacity 0.3s linear; animation: none; }
  .hero.is-cayendo .hero__frasco { opacity: 0; transition: opacity 0.3s linear; animation: none; }
  html.js-reveal .reveal { opacity: 1; transform: none; }
}