/* =========================================================
   HALLOWEEN — la temporada se apodera de la portada (sección .hw)

   Todo está acotado a .hw: fuera de la sección no cambia nada. La sección
   entra desde el crema del sitio (la noche crece desde la "o" del
   titular), recorre cinco colecciones y sale con una luna que deja la
   pantalla en el blanco con el que empieza Best Sellers.

   Reglas de la sección:
   · Los pósters del catálogo llevan título y logo impresos: siempre se
     ven completos (object-fit: contain), nunca recortados ni tapados.
   · Esquinas rectas en todo (pósters, botones, visor). Es la única
     excepción a las píldoras del resto del sitio y es a propósito.
   · Un solo acento: naranja calabaza. En el capítulo naranja el texto y
     los enlaces pasan a tinta.
   · Sin JavaScript o con prefers-reduced-motion todo queda visible y en
     su estado final. Los estados ocultos y las escenas largas solo
     existen bajo .hw.is-live, una clase que pone js/halloween.js.
   · Nada de transform, filter ni overflow: hidden en .hw: romperían los
     position: sticky de las escenas. Para recortar se usa overflow: clip.
   ========================================================= */

.hw {
  --hw-night: #0f0c11;
  --hw-plum: #1e1428;
  --hw-bone: #efe6d8;
  --hw-bone-2: #b3aba0;
  --hw-line: rgba(239, 230, 216, 0.16);
  --hw-pumpkin: #f07a2b;
  --hw-pumpkin-hi: #ff9550;
  --hw-orange: #ea6a1f;
  --hw-ink: #140d10;
  --hw-ease: cubic-bezier(0.19, 1, 0.22, 1);

  /* Alturas que mide el JS; estos son sus valores de respaldo. */
  --hw-hdr: 83px;
  --hw-tabs-h: 3rem;
  --hw-top: calc(var(--hw-hdr) + var(--hw-tabs-h));
  --hw-wide: 1440px;

  position: relative;
  background: var(--hw-night);
  color: var(--hw-bone);
  overflow-x: clip;
}
@media (max-width: 860px) {
  .hw { --hw-hdr: 73px; --hw-tabs-h: 2.75rem; }
}

.hw :focus-visible { outline: 2px solid var(--hw-pumpkin); outline-offset: 4px; }
/* Especificidad mínima: las clases de cada botón mandan sobre esto. */
:where(.hw) button { font: inherit; color: inherit; }

.hw-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Saltar a Best Sellers sin recorrer toda la temporada. Fijo abajo a la
   izquierda (a la derecha está el botón de WhatsApp) y visible mientras la
   sección ocupa la pantalla. Fuera de ella se esconde, pero sigue siendo
   enfocable: con el teclado es lo primero que se encuentra al llegar. */
.hw-jump {
  position: fixed; left: clamp(1rem, 2vw, 1.5rem); bottom: 1.5rem; z-index: 85;
  display: inline-flex; align-items: center; gap: 0.65rem;
  min-height: 44px;
  padding: 0.8rem 1.1rem;
  background: rgba(15, 12, 17, 0.92);
  color: var(--hw-bone);
  border: 1px solid var(--hw-line);
  font: 500 0.7rem/1 var(--sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s var(--hw-ease), background 0.3s ease, color 0.3s ease;
}
.hw-jump span { font-size: 0.95rem; letter-spacing: 0; }
.hw.is-on .hw-jump, .hw-jump:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.hw-jump:hover, .hw-jump:focus-visible { background: var(--hw-bone); color: var(--hw-night); }

/* Grano de película: una sola capa fija y estática, encendida solo
   mientras la sección ocupa el centro de la pantalla. */
.hw-grain {
  position: fixed; inset: 0; z-index: 80;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.hw.is-on .hw-grain { opacity: 0.09; }

/* ---------- Tipografía común ---------- */
.hw-line {
  display: inline-block;
  overflow: clip;
  /* Holgura para que la máscara no corte la cola de la y, la g o la p, ni
     el rasgo final de la itálica. */
  padding: 0.04em 0.08em 0.16em 0;
  margin-bottom: -0.16em;
  vertical-align: top;
}
.hw-line > span { display: inline-block; }

.hw-cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0.55rem 0;
  font: 500 0.74rem/1.2 var(--sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hw-pumpkin);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--hw-ease), color 0.3s ease;
}
.hw-cta svg { flex: none; }
.hw-cta:hover, .hw-cta:focus-visible { background-size: 100% 1px; color: var(--hw-pumpkin-hi); }

.hw-more {
  display: inline-block;
  padding: 0.55rem 0;
  background: none; border: 0;
  border-bottom: 1px solid var(--hw-line);
  font: 500 0.74rem/1.2 var(--sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hw-bone);
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.hw-more:hover, .hw-more:focus-visible { border-color: currentColor; }

.hw-btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1.05rem 1.6rem;
  background: var(--hw-pumpkin); color: var(--hw-ink);
  font: 500 0.8rem/1 var(--sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.4s var(--hw-ease);
}
.hw-btn:hover, .hw-btn:focus-visible { background: var(--hw-pumpkin-hi); transform: translateY(-2px); }
.hw-btn:active { transform: translateY(0) scale(0.98); }

.hw-arrow {
  width: 3rem; height: 3rem;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid var(--hw-line);
  font: 300 1.2rem/1 var(--sans);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.hw-arrow:hover, .hw-arrow:focus-visible { background: var(--hw-bone); color: var(--hw-night); border-color: var(--hw-bone); }
.hw-arrow:disabled { opacity: 0.3; pointer-events: none; }

/* Táctil: objetivos de al menos 44px de alto. */
@media (pointer: coarse) {
  .hw-cta, .hw-more { padding-block: 0.95rem; }
}

/* ---------- Producto (común a todas las colecciones) ---------- */
.hw-shot {
  position: relative;
  display: block;
  aspect-ratio: 900 / 1168;
  background: rgba(239, 230, 216, 0.04);
}
.hw-shot img { width: 100%; height: 100%; object-fit: contain; }
/* Las páginas del catálogo son capturas del PDF y traen una línea clara
   de 2-3px en el borde superior: se recorta al mostrarlas. */
.hw-shot img, .hw-pile__back, .hw-peek img, .hw-viewer__slide img, .hw-viewer__thumbs img { clip-path: inset(0.3% 0 0 0); }

.hw-p__name {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
}
.hw-p__desc { margin-top: 0.55rem; max-width: 38ch; font-size: 0.98rem; line-height: 1.55; color: var(--hw-bone-2); }
.hw-p__det { margin-top: 0.9rem; max-width: 44ch; font-size: 0.92rem; line-height: 1.6; color: var(--hw-bone-2); }
.hw-p__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; margin-top: 1.1rem; }
.hw-p__actions .hw-cta { margin-top: 0; }

/* ---------- Encabezado de cada colección ---------- */
.hw-ch { position: relative; scroll-margin-top: var(--hw-top); }
.hw-ch__head {
  max-width: var(--hw-wide);
  margin: 0 auto;
  padding: clamp(5rem, 13vh, 9rem) var(--gutter) clamp(2.5rem, 6vh, 4.5rem);
}
.hw-ch__title {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(3.3rem, 1.4rem + 8vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.hw-ch__title .hw-line { display: block; width: fit-content; }
.hw-ch__title .hw-line + .hw-line { margin-left: 0.9em; }
/* "personalizados" no cabe con la sangría completa en pantallas de 320px. */
@media (max-width: 359px) {
  .hw-ch__title .hw-line + .hw-line { margin-left: 0.45em; }
}
.hw-ch__lede { margin-top: 1.6rem; max-width: 40ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.6; color: var(--hw-bone-2); }

/* =========================================================
   ENTRADA — el crema del sitio, y desde la "o" crece la noche
   ========================================================= */
.hw-gate { position: relative; }
.hw-gate__stage {
  position: relative;
  height: calc(100svh - var(--hw-hdr));
  min-height: 30rem;
  overflow: clip;
}
.hw-gate__layer {
  position: absolute; inset: 0;
  display: grid;
  place-content: center;
  padding: 0 var(--gutter);
  text-align: center;
}
.hw-gate__layer--day { background: var(--cream); color: var(--ink); }
.hw-gate__layer--night { background: var(--hw-night); color: var(--hw-bone); }

.hw-gate__kicker {
  justify-self: start;
  margin-left: 0.4em;
  font: 500 clamp(0.68rem, 0.6rem + 0.3vw, 0.82rem)/1 var(--sans);
  letter-spacing: 0.32em; text-transform: uppercase;
}
.hw-gate__title {
  margin: 0.08em 0 0;
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: min(21vw, 36svh);
  line-height: 0.92;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.hw-gate__year {
  justify-self: end;
  margin-top: 0.4rem;
  font: 300 clamp(0.95rem, 0.7rem + 1vw, 1.6rem)/1 var(--sans);
  letter-spacing: 0.5em;
}
.hw-gate__layer--day .hw-gate__kicker { color: var(--wax); }
.hw-gate__layer--night .hw-gate__kicker { color: var(--hw-pumpkin); }

/* Luna: un disco hueso con un halo naranja muy abierto. */
.hw-moon {
  position: absolute;
  top: 9%; right: 9%;
  width: clamp(4rem, 11vmin, 8.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fbf3e6 0%, #efe2cc 55%, #d9c6a6 100%);
}
.hw-moon::before {
  content: "";
  position: absolute; inset: -260%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 122, 43, 0.22) 0%, rgba(240, 122, 43, 0.08) 32%, transparent 62%);
  pointer-events: none;
}
.hw-fog {
  position: absolute; left: -15%; right: -15%; bottom: 0;
  height: 62%;
  /* Se desvanece antes del borde inferior: al despegarse la escena, la
     niebla no puede dejar una línea contra la presentación. */
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 92%);
  background:
    radial-gradient(ellipse 45% 55% at 25% 85%, rgba(92, 64, 128, 0.32), transparent 70%),
    radial-gradient(ellipse 40% 50% at 78% 92%, rgba(60, 40, 84, 0.4), transparent 70%);
  pointer-events: none;
}
.hw-gate__layer--night > p { position: relative; }

/* Con movimiento: la entrada dura un tramo de scroll y la noche arranca
   como una pupila dentro de la "o". El JS ajusta el círculo exacto. */
.hw.is-live .hw-gate { height: calc(100svh - var(--hw-hdr) + 115svh); }
.hw.is-live .hw-gate__stage { position: sticky; top: var(--hw-hdr); }
.hw.is-live .hw-gate__layer--night { clip-path: circle(0px at 50% 50%); }

/* =========================================================
   PRESENTACIÓN — texto, índice y la portada del catálogo
   ========================================================= */
.hw-intro {
  max-width: var(--hw-wide);
  margin: 0 auto;
  padding: clamp(4.5rem, 12vh, 8.5rem) var(--gutter) clamp(5rem, 13vh, 9rem);
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 3.5rem;
}
.hw-intro__lead {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.hw-intro__note { margin-top: 1.5rem; max-width: 36ch; font-size: 0.98rem; line-height: 1.6; color: var(--hw-bone-2); }

.hw-index { margin-top: 3rem; }
.hw-index li + li { border-top: 1px solid var(--hw-line); }
.hw-index a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.95rem 0;
}
.hw-index__name {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem);
  line-height: 1.1;
  transition: color 0.3s ease, transform 0.5s var(--hw-ease);
}
.hw-index__count {
  flex: none;
  font: 500 0.7rem/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hw-bone-2);
}
@media (hover: hover) and (pointer: fine) {
  .hw-index a:hover .hw-index__name, .hw-index a:focus-visible .hw-index__name { color: var(--hw-pumpkin); transform: translateX(0.5rem); }
}

.hw-intro__cover { margin: 0; justify-self: center; width: min(78vw, 24rem); }
.hw-cover { display: block; transform: rotate(-3deg); }
.hw-cover img {
  width: 100%; height: auto;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.hw-intro__cover figcaption { margin-top: 1.6rem; }

@media (min-width: 1024px) {
  .hw-intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
    align-items: center;
  }
  .hw-intro__copy { grid-column: 1 / 7; }
  .hw-intro__cover { grid-column: 8 / 12; width: auto; justify-self: stretch; }
}

/* =========================================================
   PESTAÑAS — índice fijo mientras se recorren las colecciones
   ========================================================= */
.hw-body { position: relative; }
.hw-tabs {
  position: sticky; top: var(--hw-hdr); z-index: 30;
  height: var(--hw-tabs-h);
  display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.75rem);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  background: rgba(15, 12, 17, 0.94);
  border-bottom: 1px solid var(--hw-line);
}
.hw-tabs::-webkit-scrollbar { display: none; }
.hw-tabs a {
  position: relative;
  flex: none;
  padding: 0.5rem 0;
  font: 500 0.7rem/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hw-bone-2);
  transition: color 0.3s ease;
}
.hw-tabs a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hw-pumpkin);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--hw-ease);
}
.hw-tabs a:hover, .hw-tabs a:focus-visible, .hw-tabs a[aria-current="true"] { color: var(--hw-bone); }
.hw-tabs a[aria-current="true"]::after { transform: scaleX(1); }
@media (min-width: 1024px) {
  .hw-tabs { justify-content: center; }
}

/* =========================================================
   1. TARJETAS Y TAGS — mazo de hojas que se apilan
   ========================================================= */
.hw-deck {
  max-width: var(--hw-wide);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 10vh, 7rem);
  display: grid;
  gap: clamp(3.5rem, 8vh, 5rem);
}
.hw-deck__card { position: relative; display: grid; gap: 1.75rem; }
.hw-deck__media { display: grid; justify-items: start; }

/* El póster principal delante y, detrás, otras fotos del mismo producto. */
.hw-pile { position: relative; width: min(80vw, 26rem); aspect-ratio: 900 / 1168; }
.hw-pile .hw-shot { position: absolute; inset: 0; z-index: 2; background: var(--hw-night); }
.hw-pile__back {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0.5;
  transition: transform 0.7s var(--hw-ease), opacity 0.5s ease;
}
.hw-pile__back--1 { transform: rotate(-4deg) translate(-2.5%, 1.5%); }
.hw-pile__back--2 { transform: rotate(3deg) translate(2.5%, 1%); }
/* Al pasar el cursor, la pila se abre y deja ver que hay más fotos. */
@media (hover: hover) and (pointer: fine) {
  .hw-pile:hover .hw-pile__back { opacity: 0.9; }
  .hw-pile:hover .hw-pile__back--1 { transform: rotate(-8deg) translate(-11%, 3%); }
  .hw-pile:hover .hw-pile__back--2 { transform: rotate(7deg) translate(11%, 2%); }
}

@media (min-width: 700px) and (max-width: 1023.98px) {
  .hw-deck__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 3rem; }
  .hw-pile { width: 100%; }
}

/* Escritorio: cada hoja se queda fija y la siguiente se le monta encima. */
@media (min-width: 1024px) and (min-height: 600px) {
  .hw-deck { gap: 3rem; padding-bottom: 14vh; }
  .hw-deck__card {
    --sheet: #191120;
    position: sticky;
    top: calc(var(--hw-top) + 1.25rem + var(--i) * 0.85rem);
    height: calc(100svh - var(--hw-top) - 2.5rem - var(--i) * 0.85rem);
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 7rem);
    padding: clamp(1.75rem, 3.5vh, 3rem) clamp(2rem, 5vw, 6rem);
    background: var(--sheet);
    transform-origin: 50% 0;
  }
  .hw-deck__card:nth-child(2) { --sheet: #22172d; }
  .hw-deck__card:nth-child(3) { --sheet: #2b1d38; }
  /* Velo que oscurece la hoja de atrás; lo anima el JS. */
  .hw-deck__card::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--hw-night);
    opacity: var(--veil, 0);
    pointer-events: none;
  }
  .hw-deck__media { height: 100%; justify-items: center; align-items: center; }
  .hw-pile { width: auto; height: 100%; max-height: 100%; }
  .hw-deck__card .hw-p__name { font-size: clamp(2.6rem, 1.4rem + 2.6vw, 4.6rem); }
}

/* =========================================================
   2. DULCES DISFRAZADOS — carril horizontal
   Por defecto (móvil, tablet, sin JS o sin movimiento) es un carril
   nativo con snap. En escritorio el JS lo convierte en escena fija
   (.is-pinned) que se desplaza en horizontal con el scroll.
   ========================================================= */
.hw-ch--rail { background: var(--hw-plum); }
/* Transición suave de color con lo que hay arriba y abajo. */
.hw-ch--rail::before, .hw-ch--rail::after,
.hw-ch--tarot::before, .hw-ch--tarot::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 18vh;
  pointer-events: none;
}
.hw-ch--rail::before, .hw-ch--tarot::before { bottom: 100%; background: linear-gradient(to bottom, rgba(30, 20, 40, 0), var(--hw-plum)); }
.hw-ch--rail::after, .hw-ch--tarot::after { top: 100%; background: linear-gradient(to top, rgba(30, 20, 40, 0), var(--hw-plum)); }

.hw-rail { position: relative; }
.hw-rail__stage { position: relative; }
.hw-rail__track {
  display: flex; align-items: flex-start;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding: 0 var(--gutter) 2.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hw-line) transparent;
}
/* El encabezado va encima del carril; en la escena fija pasa a ser su
   primer panel (lo mueve el JS). */
.hw-rail__head .hw-ch__title { font-size: clamp(3.1rem, 1.6rem + 6vw, 8.5rem); }
.hw-rail__item { flex: 0 0 min(72vw, 21rem); scroll-snap-align: start; }
.hw-rail__item .hw-p__info { margin-top: 1.25rem; }
.hw-rail__ghost, .hw-rail__progress { display: none; }

.hw-rail__nav {
  display: none;
  justify-content: flex-end; gap: 0.6rem;
  padding: 0 var(--gutter) clamp(4rem, 10vh, 7rem);
}
@media (hover: hover) and (pointer: fine) {
  .hw-rail__nav { display: flex; }
}
@media (hover: none), (pointer: coarse) {
  .hw-rail__track { padding-bottom: clamp(4rem, 10vh, 6rem); scrollbar-width: none; }
}

/* Escena fija (escritorio con movimiento). La altura del contenedor la
   pone el JS: alto de la escena + recorrido horizontal. */
.hw-rail.is-pinned .hw-rail__stage {
  position: sticky; top: var(--hw-top);
  height: calc(100svh - var(--hw-top));
  overflow: clip;
}
.hw-rail.is-pinned .hw-rail__track {
  height: 100%;
  width: max-content;
  align-items: center;
  gap: clamp(3rem, 5vw, 6rem);
  padding: 0 12vw 0 var(--gutter);
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}
.hw-rail.is-pinned .hw-rail__head { flex: 0 0 30vw; align-self: center; max-width: none; margin: 0; padding: 0; }
.hw-rail.is-pinned .hw-rail__item {
  flex: none;
  width: auto;
  align-self: var(--al, center);
  padding-block: 6vh 5vh;
}
.hw-rail.is-pinned .hw-rail__item .hw-shot {
  height: calc((100svh - var(--hw-top) - 15rem) * var(--ph, 0.75));
  width: auto;
}
.hw-rail.is-pinned .hw-rail__item .hw-p__info { width: 0; min-width: 100%; }
.hw-rail.is-pinned .hw-rail__ghost {
  display: block;
  position: absolute; left: 0; bottom: 3vh;
  margin: 0;
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(10rem, 23vw, 24rem);
  line-height: 0.8;
  white-space: nowrap;
  color: rgba(239, 230, 216, 0.045);
  pointer-events: none;
}
.hw-rail.is-pinned .hw-rail__progress {
  display: block;
  position: absolute; left: var(--gutter); right: var(--gutter); top: 1.6rem;
  height: 1px;
  background: var(--hw-line);
}
.hw-rail__progress span {
  display: block; height: 100%;
  background: var(--hw-pumpkin);
  transform: scaleX(0); transform-origin: left;
}
.hw-ch--rail.is-pinned .hw-rail__nav { display: none; }

/* =========================================================
   3. CAJITAS Y BOLSITAS — pliego editorial sobre naranja
   ========================================================= */
.hw-ch--spread { padding: clamp(3rem, 9vh, 6rem) 0; }
.hw-spread {
  background: var(--hw-orange);
  color: var(--hw-ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(3.5rem, 8vh, 5rem);
  padding: 0 var(--gutter) clamp(5rem, 12vh, 8rem);
}
.hw-spread .hw-ch__head { padding-inline: 0; width: 100%; }
.hw-spread .hw-ch__lede,
.hw-spread .hw-p__desc { color: var(--hw-ink); }
.hw-spread .hw-shot { background: rgba(20, 13, 16, 0.08); }
.hw-spread .hw-shot img { box-shadow: 0 30px 60px -34px rgba(60, 20, 0, 0.75); }
.hw-spread .hw-cta { color: var(--hw-ink); background-size: 100% 1px; }
.hw-spread .hw-cta:hover, .hw-spread .hw-cta:focus-visible { background-size: 100% 2px; color: var(--hw-ink); }
.hw-spread .hw-more { color: var(--hw-ink); border-color: rgba(20, 13, 16, 0.35); }
.hw-spread .hw-more:hover, .hw-spread .hw-more:focus-visible { border-color: var(--hw-ink); }
.hw-spread :focus-visible { outline-color: var(--hw-ink); }
.hw-spread__item { width: 84%; }
.hw-spread__item:nth-of-type(even) { justify-self: end; }
.hw-spread__item .hw-p__info { margin-top: 1.25rem; }

@media (min-width: 700px) {
  .hw-spread {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
    row-gap: 0;
    padding-bottom: clamp(6rem, 16vh, 11rem);
  }
  .hw-spread > .hw-ch__head { grid-column: 1 / -1; max-width: none; }
  /* Con la misma especificidad que la regla de los pares en móvil: si los
     pares se quedaran alineados al final, su ancho dependería de la foto y
     crecerían al cargarla, moviendo todo lo que viene debajo. */
  .hw-spread__item,
  .hw-spread__item:nth-of-type(even) { width: auto; justify-self: stretch; }
  /* Zigzag que cierra al centro: el último producto no queda suelto. */
  .hw-spread__item--a { grid-column: 1 / 6; }
  .hw-spread__item--b { grid-column: 8 / 12; margin-top: 18vh; }
  .hw-spread__item--c { grid-column: 2 / 6; margin-top: 6vh; }
  .hw-spread__item--d { grid-column: 8 / 12; margin-top: 16vh; }
  .hw-spread__item--e { grid-column: 5 / 9; margin-top: 8vh; }
}
@media (min-width: 1024px) {
  .hw-spread > .hw-ch__head { grid-column: 1 / 10; }
}

/* =========================================================
   4. PAPELERÍA EMBRUJADA — índice tipográfico
   En pantallas con ratón, al pasar por una fila aparece el póster
   grande siguiendo al cursor; la miniatura de la fila está siempre.
   ========================================================= */
.hw-list {
  max-width: var(--hw-wide);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(5rem, 13vh, 9rem);
}
.hw-list__row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
  padding: 1.5rem 0;
}
.hw-list__row + .hw-list__row { border-top: 1px solid var(--hw-line); }
.hw-list__thumb { grid-row: 1 / span 3; }
.hw-list__row .hw-p__name { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem); }
.hw-list__row .hw-p__name a { transition: color 0.3s ease; }
.hw-list__row .hw-p__desc { margin-top: 0.35rem; }
.hw-list__row .hw-cta { margin-top: 0.5rem; justify-self: start; }

@media (min-width: 1024px) {
  .hw-list__row {
    grid-template-columns: 5.5rem minmax(0, 1.35fr) minmax(0, 1fr) auto;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    padding: 1.6rem 0;
  }
  .hw-list__thumb { grid-row: auto; }
  .hw-list__row .hw-p__name { font-size: clamp(2.6rem, 1.4rem + 2.6vw, 4.6rem); line-height: 1; }
  .hw-list__row .hw-p__desc { margin-top: 0; }
  .hw-list__row .hw-cta { margin-top: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .hw-list__row .hw-p__name a { display: inline-block; transition: color 0.3s ease, transform 0.6s var(--hw-ease); }
  .hw-list__row:hover .hw-p__name a { color: var(--hw-pumpkin); transform: translateX(1rem); }
}

.hw-peek {
  display: none;
  position: absolute; left: 0; top: 0; z-index: 5;
  width: clamp(14rem, 19vw, 19rem);
  aspect-ratio: 900 / 1168;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.hw-peek img { width: 100%; height: 100%; object-fit: contain; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95); }
.hw.is-live .hw-ch--list.has-peek .hw-peek { display: block; }

/* =========================================================
   5. REGALITOS PERSONALIZADOS — tirada de cartas
   ========================================================= */
.hw-ch--tarot { background: var(--hw-plum); }
.hw-tarot {
  max-width: var(--hw-wide);
  margin: 0 auto;
  padding: 1rem var(--gutter) clamp(6rem, 14vh, 10rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem clamp(1rem, 4vw, 1.5rem);
}
.hw-tarot__card { transform: rotate(calc(var(--r) * 0.35)); transform-origin: 50% 100%; }
.hw-tarot__card .hw-shot img { box-shadow: 0 34px 60px -32px rgba(0, 0, 0, 0.9); }
.hw-tarot__item .hw-p__info { margin-top: 1.5rem; }
.hw-tarot__item .hw-p__name { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }
.hw-tarot__item .hw-p__desc { font-size: 0.92rem; }
@media (max-width: 899.98px) {
  .hw-tarot .hw-cta__long { display: none; }
}

@media (min-width: 900px) {
  .hw-tarot {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2vw;
    padding-top: 2rem;
  }
  .hw-tarot__item { margin-top: calc(var(--y) * 0.6vw); }
  .hw-tarot__card { transform: rotate(var(--r)); transition: transform 0.7s var(--hw-ease); }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .hw-tarot__item:hover .hw-tarot__card,
  .hw-tarot__item:focus-within .hw-tarot__card { transform: rotate(0deg) translateY(-4%); }
}

/* =========================================================
   CIERRE Y SALIDA
   ========================================================= */
.hw-close {
  max-width: var(--hw-wide);
  margin: 0 auto;
  padding: clamp(6rem, 16vh, 11rem) var(--gutter) clamp(4rem, 10vh, 7rem);
}
.hw-close__title {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(2.8rem, 1.3rem + 6vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.hw-close__title .hw-line { display: block; width: fit-content; }
.hw-close__title .hw-line + .hw-line { margin-left: 0.7em; }
/* En celulares angostos "¿Armamos los detalles" se partía en dos renglones. */
@media (max-width: 400px) {
  .hw-close__title { font-size: min(2.8rem, 13vw - 0.35rem); }
}
.hw-close__lede { margin-top: 1.75rem; max-width: 40ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.6; color: var(--hw-bone-2); }
.hw-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.5rem; }

/* Sin movimiento: un arco de luna estático une la noche con el blanco
   de Best Sellers. Con movimiento, la luna sube y llena la pantalla. */
.hw-exit__stage {
  position: relative;
  height: 34svh;
  overflow: clip;
}
.hw-exit__moon {
  position: absolute; inset: 0;
  background: #ffffff;
  clip-path: circle(70% at 50% 175%);
}
.hw.is-live .hw-exit { height: calc(100svh - var(--hw-hdr) + 100svh); }
.hw.is-live .hw-exit__stage { position: sticky; top: var(--hw-hdr); height: calc(100svh - var(--hw-hdr)); }

/* =========================================================
   VISOR — fotos de un producto o el catálogo completo
   ========================================================= */
.hw-viewer {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: rgba(12, 9, 14, 0.985);
  color: var(--hw-bone);
  overscroll-behavior: contain;
}
/* El atributo hidden tiene que ganarle al display de las clases. */
.hw-viewer [hidden] { display: none; }
.hw-viewer::backdrop { background: rgba(12, 9, 14, 0.7); }
.hw-viewer[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 27rem);
  animation: hw-viewer-in 0.45s var(--hw-ease);
}
@keyframes hw-viewer-in { from { opacity: 0; } }

.hw-viewer__media { position: relative; min-width: 0; min-height: 0; }
.hw-viewer__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.hw-viewer__track::-webkit-scrollbar { display: none; }
.hw-viewer__track:focus-visible { outline-offset: -4px; }
.hw-viewer__slide {
  flex: 0 0 100%;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vh, 3rem) clamp(3.5rem, 7vw, 6rem);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.hw-viewer__slide img { width: 100%; height: 100%; object-fit: contain; }
.hw-viewer__prev, .hw-viewer__next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(15, 12, 17, 0.6); }
.hw-viewer__prev { left: clamp(0.5rem, 1.5vw, 1.5rem); }
.hw-viewer__next { right: clamp(0.5rem, 1.5vw, 1.5rem); }

.hw-viewer__info {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(4.5rem, 10vh, 6.5rem) clamp(1.5rem, 3vw, 2.75rem) 2rem;
  border-left: 1px solid var(--hw-line);
  overflow-y: auto;
}
.hw-viewer__count { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hw-bone-2); }
.hw-viewer__title {
  margin-top: 1rem;
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 1.6vw, 3.2rem);
  line-height: 1.02;
}
.hw-viewer__desc { margin-top: 0.9rem; line-height: 1.55; }
.hw-viewer__det { margin-top: 0.9rem; font-size: 0.92rem; line-height: 1.6; color: var(--hw-bone-2); }
.hw-viewer__det:empty { display: none; }
.hw-viewer__cta { margin-top: 1.75rem; }
.hw-viewer__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));
  gap: 0.5rem;
  width: 100%;
  margin-top: auto;
  padding-top: 2.5rem;
}
.hw-viewer__thumbs button {
  display: block; width: 100%;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.45;
  outline: 1px solid transparent; outline-offset: 2px;
  transition: opacity 0.3s ease, outline-color 0.3s ease;
}
.hw-viewer__thumbs button:hover { opacity: 0.8; }
.hw-viewer__thumbs button[aria-current="true"] { opacity: 1; outline-color: var(--hw-pumpkin); }
.hw-viewer__thumbs img { width: 100%; aspect-ratio: 900 / 1168; object-fit: contain; }
.hw-viewer__close {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2;
  padding: 0.75rem 1rem;
  background: var(--hw-night);
  border: 1px solid var(--hw-line);
  font: 500 0.72rem/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.hw-viewer__close:hover, .hw-viewer__close:focus-visible { background: var(--hw-bone); color: var(--hw-night); }

@media (max-width: 799.98px) {
  .hw-viewer[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .hw-viewer__slide { padding: 4rem 1rem 1rem; }
  .hw-viewer__prev, .hw-viewer__next { display: none; }
  .hw-viewer__info {
    max-height: 44svh;
    padding: 1.25rem var(--gutter) 1.5rem;
    border-left: 0; border-top: 1px solid var(--hw-line);
  }
  .hw-viewer__title { margin-top: 0.6rem; font-size: 1.9rem; }
  .hw-viewer__desc { font-size: 0.95rem; }
  .hw-viewer__thumbs { display: flex; overflow-x: auto; padding-top: 1.25rem; scrollbar-width: none; }
  .hw-viewer__thumbs li { flex: 0 0 3rem; }
  .hw-viewer__close { top: 0.75rem; right: 0.75rem; }
}

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