/* ══════════════════════════════════════════════════════════════════
   shop.css — la tienda (drop 001)

   Dos piezas encadenadas: un ÍNDICE tipográfico que inunda el fondo con
   la prenda que estás mirando, y una PASARELA donde cada pieza ocupa
   una pantalla. Nada de cuadrícula de miniaturas.

   Todo cuelga de los tokens de styles.css —el fósforo, las dos
   tipografías, el grosor de línea— para que se sienta el mismo sitio y
   no una página pegada aparte.
   ══════════════════════════════════════════════════════════════════ */

.shop {
  /* alto real de la barra fija: lo usan los scroll-margin de abajo,
     porque sin eso el snap deja cada prenda debajo de la barra */
  /* OJO: va a mano y está acoplado al nav de styles.css. Al agregar
     SOBRE NOSOTROS y el padding táctil de los enlaces, la barra creció y
     esto se quedó atrás: .piece lo usa en scroll-margin-top, así que un
     salto de ancla dejaba la pieza 17px debajo de la barra en móvil.
     Medido: 55 en escritorio, 84 a 640px, 109 a 390px. */
  --topbar-h: 56px;
  --rail-w: 96px;
  position: relative;
}
@media (max-width: 640px) { .shop { --topbar-h: 88px; } }
@media (max-width: 420px) { .shop { --topbar-h: 112px; } }



/* ── ÍNDICE ────────────────────────────────────────────────────────── */
.shop-index {
  position: relative;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto clamp(60px, 14vh, 160px);
  padding: 0 var(--pad-x);
}

/* El fondo a sangre. Es sticky y no absolute: así se queda pegado a la
   pantalla mientras recorres la lista y se va solo al terminar la
   sección, sin que ningún JS tenga que vigilar el scroll. El margen
   negativo lo saca del flujo para que la lista arranque arriba. */
.index-bleed {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  margin-bottom: -100vh; margin-bottom: -100svh;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 480ms ease;
}
.shop-index.has-bleed .index-bleed { opacity: 1; }
.index-bleed img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 520ms ease, transform 900ms ease;
  transform: scale(1.06);
  object-position: 72% center;
  filter: grayscale(0.3) saturate(0.75) brightness(0.85) contrast(1.05);
}
.index-bleed img.is-on { opacity: 1; transform: scale(1); }
/* velo para que la tipografía siga leyéndose encima de la prenda */
.index-bleed::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(2,4,3,0.92) 0%, rgba(2,4,3,0.62) 45%, rgba(2,4,3,0.35) 100%),
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px,
      transparent 1px, transparent 3px);
}

.index-list {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.index-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(14px, 2.6vh, 30px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  transition: color 260ms ease;
}
.index-row:hover,
.index-row:focus-visible,
.index-row.is-active { color: var(--text); }
/* El desplazamiento va por transform y no por padding-left: el padding
   es maqueta y obliga a recalcular en cada cuadro. Se mueven número y
   nombre; el precio se queda anclado a la derecha. */
.index-num, .index-name {
  transition: transform 400ms cubic-bezier(0.2,0.8,0.3,1);
}
.index-row:hover .index-num, .index-row:hover .index-name,
.index-row:focus-visible .index-num, .index-row:focus-visible .index-name,
.index-row.is-active .index-num, .index-row.is-active .index-name {
  transform: translateX(clamp(8px, 2vw, 28px));
}
.index-num {
  font-family: var(--t-pixel);
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-shadow: var(--glow-micro);
}
.index-row:hover .index-num,
.index-row.is-active .index-num { color: var(--green-2); }
.index-name {
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(26px, 6.4vw, 84px);
  line-height: 0.98; letter-spacing: 0.01em;
  text-transform: lowercase;
  overflow-wrap: anywhere;
  text-shadow: var(--glow-soft);
  transition: text-shadow 240ms ease;
}
.index-row:hover .index-name,
.index-row.is-active .index-name {
  text-shadow:
    -1px 0 0 rgba(255,30,60,0.42),
    1px 0 0 rgba(40,220,255,0.38),
    var(--glow-strong);
}
.index-price {
  font-variant-numeric: tabular-nums;
  font-family: var(--t-pixel);
  font-size: clamp(12px, 1.6vw, 17px);
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-shadow: var(--glow-micro);
}

/* ── El riel de la pasarela ────────────────────────────────────────── */
.runway-rail {
  position: fixed; top: 50%; left: 0;
  transform: translateY(-50%);
  z-index: 30;
  display: none;                       /* sólo en pantallas anchas */
  flex-direction: column; gap: 10px;
  /* pegado a la orilla: con var(--pad-x) el riel terminaba en x=106 y
     el marco de la prenda empieza en 96, o sea encimados */
  padding: 14px 10px 14px 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms ease;
}
.runway-rail.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1040px) { .runway-rail { display: flex; } }
.rail-item {
  font-family: var(--t-pixel);
  font-size: 12px; letter-spacing: 0.14em;
  /* 0.32 daba 2.60:1, por debajo hasta de AA grande; 0.48 da 4.67:1 */
  color: rgba(244,248,242,0.48);
  display: flex; align-items: center; gap: 8px;
  transition: color 220ms ease;
}
.rail-item::before {
  content: ""; width: 30px; height: 1px;
  background: currentColor;
  transform: scaleX(0.47); transform-origin: left center;
  transition: transform 300ms cubic-bezier(0.2,0.8,0.3,1);
}
.rail-item:hover { color: var(--text-mute); }
.rail-item.is-active {
  color: var(--text);
  text-shadow: var(--glow-soft);
}
.rail-item.is-active::before { transform: scaleX(1); }

/* ── PASARELA ──────────────────────────────────────────────────────── */
.runway {
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 0 var(--pad-x);
}
.piece {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  scroll-snap-align: start;
  scroll-margin-top: var(--topbar-h);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(40px, 8vh, 90px) 0;
  border-top: 1px solid var(--line);
}
.piece:first-child { border-top: 0; }

/* El número fantasma, sangrando por la izquierda. Es decorativo: va en
   aria-hidden y no se selecciona. */
.piece-ghost {
  position: absolute; left: -0.09em; top: 50%;
  transform: translateY(-50%);
  z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(180px, 34vw, 460px);
  line-height: 0.8;
  color: rgba(244,248,242,0.055);
}

/* La prenda es 4:5. Para que la pieza entera quepa en una pantalla se
   limita el ALTO de la imagen y de ahí se deriva el ancho (×0.8), en vez
   de limitar el ancho y dejar que el alto se desborde: así era, y la
   etiqueta de "foto pendiente" quedaba cortada abajo. */
.piece-media {
  position: relative; z-index: 1;
  width: 100%;
  max-width: calc(min(70vh, 720px) * 0.8);
  max-width: calc(min(70svh, 720px) * 0.8);
  justify-self: center;
  border: 1px solid var(--line-2);
  background: var(--bg-card);
  overflow: hidden; isolation: isolate;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 18px 50px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(236,240,234,0.07);
  transition: box-shadow 420ms ease, border-color 300ms ease;
}
.piece.is-active .piece-media {
  border-color: rgba(236,240,234,0.4);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 18px 50px rgba(0,0,0,0.6),
    0 0 34px rgba(180,210,190,0.18),
    inset 0 1px 0 rgba(236,240,234,0.1);
}
.piece-media img {
  width: 100%; height: auto; display: block;
  filter: grayscale(0.35) saturate(0.7) brightness(0.9) contrast(1.05);
  transition: filter 600ms ease, transform 800ms ease;
}
.piece.is-active .piece-media img { filter: none; transform: scale(1.01); }
.piece-media::before {                   /* scanlines, como en el resto */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px,
    transparent 1px, transparent 3px);
  opacity: 0.55;
}
/* Aviso honesto: esto no es una foto del producto */
.piece-pending {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  font-family: var(--t-pixel);
  font-size: 10px; letter-spacing: 0.18em;
  color: rgba(244,248,242,0.5);
  background: rgba(2,4,3,0.7);
  border: 1px solid var(--line);
  padding: 5px 8px;
}

.piece-info {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.6vh, 18px);
}
.piece-num {
  margin: 0;
  font-family: var(--t-pixel);
  font-size: 12px; letter-spacing: 0.22em;
  color: var(--text-dim);
  text-shadow: var(--glow-micro);
}
.piece-name {
  margin: 0;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(32px, 4.6vw, 72px);
  line-height: 0.98;
  text-transform: lowercase;
  overflow-wrap: anywhere;
  text-shadow: var(--glow-strong);
}
.piece-price {
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-family: var(--t-pixel);
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: 0.06em;
  color: var(--text);
  text-shadow: var(--glow-medium);
}
.piece-price span { color: var(--text-dim); font-size: 0.62em; letter-spacing: 0.16em; }

/* ── Tallas ────────────────────────────────────────────────────────── */
.piece-sizes { border: 0; margin: 6px 0 0; padding: 0; }
.piece-sizes legend {
  padding: 0 0 8px;
  font-family: var(--t-mono);
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.size-row label { position: relative; display: inline-flex; }
/* El radio real sigue ahí —es lo que hace que funcionen las flechas del
   teclado y los lectores de pantalla—, sólo que tapado por la ficha. */
.size-row input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; cursor: pointer;
}
.size-row span {
  display: grid; place-items: center;
  min-width: 46px; padding: 11px 12px;
  border: 1px solid var(--line-control);
  font-family: var(--t-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--text-mute);
  background: rgba(255,255,255,0.02);
  transition: background 180ms, border-color 180ms, color 180ms, text-shadow 200ms;
}
.size-row input:hover + span { border-color: rgba(180,200,180,0.4); color: var(--text); }
.size-row input:checked + span {
  background: rgba(216,221,214,0.12);
  border-color: rgba(200,240,215,0.65);
  color: var(--text);
  text-shadow: var(--glow-soft);
}
.size-row input:focus-visible + span {
  outline: 2px solid rgba(200,245,215,0.9);
  outline-offset: 3px;
}
/* Cuando se aparta sin talla, la fila pide atención una vez */
@keyframes sizeNudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.piece-sizes.is-nudging .size-row { animation: sizeNudge 320ms ease; }

/* ── Apartar ───────────────────────────────────────────────────────── */
.piece-cta {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 26px;
  border: 1px solid var(--line-control);
  background: rgba(255,255,255,0.02);
  font-family: var(--t-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.32em;
  color: var(--text);
  text-shadow: var(--glow-soft);
  transition: background 200ms, border-color 200ms, text-shadow 200ms, transform 200ms;
}
.piece-cta:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(180,220,190,0.55);
  text-shadow: var(--glow-medium);
  transform: translateY(-2px);
}
.piece-cta::after { content: "→"; font-size: 15px; letter-spacing: 0; }
.piece-note {
  margin: 0; min-height: 1.2em;
  font-family: var(--t-mono);
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--green-2);
  text-transform: uppercase;
}
.piece-note[data-error="1"] { color: #d4574e; }

/* Copia manual: si el portapapeles no está disponible se enseña la
   línea para copiarla a mano, en vez de mentir con un "COPIADO". */
.piece-fallback {
  width: 100%;
  margin: 4px 0 0; padding: 10px 12px;
  border: 1px solid var(--line-control);
  background: rgba(6,8,7,0.8);
  color: var(--text);
  font-family: var(--t-mono); font-size: 11px;
  letter-spacing: 0.04em;
}
.piece-fallback[hidden] { display: none; }

/* ── Cierre ────────────────────────────────────────────────────────── */
.shop-outro {
  width: 100%; max-width: var(--maxw);
  margin: clamp(40px, 8vh, 90px) auto clamp(30px, 6vh, 70px);
  padding: 0 var(--pad-x);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 5vh, 50px);
}
.shop-outro p {
  margin: 0; max-width: 56ch;
  font-family: var(--t-body); font-size: 14px; line-height: 1.75;
  color: var(--text-mute);
  text-shadow: var(--glow-micro);
}
.shop-outro a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ── La puerta ─────────────────────────────────────────────────────── */
body.tienda-tapada { overflow: hidden; }
body.tienda-tapada .site {
  filter: blur(10px) brightness(0.3) saturate(0.7);
  pointer-events: none; user-select: none;
}
/* Sin esto la puerta se abre sola los primeros 900ms. styles.css le pone
   a .site la animación bootFlicker cuando el body trae data-splash="off"
   —que es el caso de la tienda—, y una animación gana sobre la regla de
   arriba en la cascada: durante el encendido el filter lo mandaba el
   keyframe, no el blur, y se leían las piezas con sus precios. El fondo
   de la puerta es semitransparente, así que se veía todo. */
body.tienda-tapada .site { animation: none; }
.shop-gate {
  position: fixed; inset: 0; z-index: 200;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 3.4vh, 30px);
  padding: 24px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(2,4,3,0.72), rgba(2,4,3,0.94) 100%);
}
.shop-gate[hidden] { display: none; }
.shop-gate-art {
  width: min(860px, 88vw); height: auto;
  filter:
    drop-shadow(0 0 26px rgba(255,60,30,0.45))
    drop-shadow(0 0 80px rgba(255,40,16,0.28));
}
.shop-gate-sub {
  margin: 0;
  font-family: var(--t-pixel);
  font-size: clamp(11px, 1.6vw, 14px);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--text-mute);
  text-shadow: var(--glow-soft);
}
.shop-gate-form { display: flex; flex-direction: column; gap: 10px; align-items: center; width: min(440px, 92vw); }
.shop-gate-label {
  font-family: var(--t-mono);
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.shop-gate-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; width: 100%;
  border: 1px solid var(--line-control);
  background: rgba(6,8,7,0.9);
}
.shop-gate-prompt {
  padding: 0 4px 0 14px;
  font-family: var(--t-mono); color: var(--green-2);
}
.shop-gate-row input {
  background: transparent; border: 0;
  padding: 15px 6px;
  color: var(--text);
  font-family: var(--t-mono);
  font-size: 13px; letter-spacing: 0.1em;
  min-width: 0;
}
.shop-gate-row input:focus-visible { outline: 0; }
.shop-gate-row:focus-within { border-color: rgba(180,200,180,0.45); }
.shop-gate-row button {
  padding: 15px 18px;
  border-left: 1px solid var(--line);
  font-family: var(--t-mono); font-weight: 700;
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--text);
  background: rgba(255,255,255,0.03);
  text-shadow: var(--glow-soft);
  transition: background 180ms, text-shadow 180ms;
}
.shop-gate-row button:hover { background: rgba(255,255,255,0.09); text-shadow: var(--glow-medium); }
.shop-gate-msg {
  margin: 0; min-height: 1.2em;
  font-family: var(--t-mono);
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-2);
}
.shop-gate-msg[data-error="1"] { color: #d4574e; }
.shop-gate-back {
  font-family: var(--t-mono);
  font-size: 10px; letter-spacing: 0.24em;
  color: var(--text-dim);
  text-decoration: underline; text-underline-offset: 4px;
}
.shop-gate-back:hover { color: var(--text-mute); }

@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.shop-gate.is-wrong .shop-gate-form { animation: gateShake 340ms ease; }
/* al abrir, el encendido de tubo que ya usa el resto del sitio */
body.tienda-abriendo .site { animation: bootFlicker 900ms steps(1, end) 1; }

/* ── El snap, sólo aquí ────────────────────────────────────────────── */
/* proximity y no mandatory: el obligatorio secuestra la rueda y pelea
   con el índice de arriba y el pie de abajo. */
html.tienda-snap { scroll-snap-type: y proximity; }
/* la clase la pone shop.js sólo si nadie pidió menos movimiento */
html.tienda-suave { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html.tienda-snap { scroll-snap-type: none; }
  html.tienda-suave { scroll-behavior: auto; }
}

/* ── Móvil ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .piece {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: clamp(18px, 4vh, 30px);
    padding: clamp(34px, 7vh, 60px) 0;
  }
  .piece-media { max-width: min(100%, 520px); }
  .piece-ghost { font-size: clamp(150px, 46vw, 300px); opacity: 0.9; }
  .index-name { font-size: clamp(24px, 8.6vw, 54px); }
  /* sin alto de pantalla completa, el snap estorba más de lo que suma */
  html.tienda-snap { scroll-snap-type: none; }
}
@media (max-width: 520px) {
  .index-row { grid-template-columns: auto 1fr; row-gap: 4px; }
  .index-price { grid-column: 2; justify-self: start; }
}