/* Noxta · propuesta B "Revista de la noche"
   Colores solo desde tokens.css. Sin JS. */

/* Fuentes autoalojadas (fonts/, cada familia con su licencia OFL al lado).
   Wanted Sans Std solo en Bold: todo lo que use --titular sale en negrita,
   igual que antes con Big Shoulders. Monaspace Neon viene en Regular y
   Medium; la Medium cubre los pesos 500 a 700 para que el navegador no
   fabrique una negrita falsa. */
@font-face {
  font-family: "Wanted Sans Std";
  src: url("fonts/wanted-sans/WantedSansStd-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("fonts/overused-grotesk/OverusedGrotesk-Roman.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("fonts/overused-grotesk/OverusedGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("fonts/overused-grotesk/OverusedGrotesk-Bold.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Monaspace Neon";
  src: url("fonts/monaspace-neon/MonaspaceNeon-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Monaspace Neon";
  src: url("fonts/monaspace-neon/MonaspaceNeon-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

:root {
  --titular: "Wanted Sans Std", system-ui, sans-serif;
  --mono: "Monaspace Neon", ui-monospace, Menlo, monospace;
  --cuerpo: "Overused Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --borde: 56px;
  --ancho: 1440px;
  --papel: rgb(var(--fog-100));
  --tinta: rgb(var(--ink-900));
  /* terracota legible sobre papel: el acento mezclado con tinta */
  --acento-papel: color-mix(in oklab, var(--accent), rgb(var(--ink-900)) 42%);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: rgb(var(--ink-900));
  color: rgb(var(--fog-100));
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.marco {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--borde);
}

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.titular {
  font-family: var(--titular);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
}

.acento { color: var(--accent-text); }
.papel .acento { color: var(--acento-papel); }

/* ---------- Páginas de papel ---------- */
.papel {
  background: var(--papel);
  color: var(--tinta);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton-acento { background: var(--accent); color: var(--accent-ink); }
.boton-acento:hover { background: rgb(var(--fog-100)); color: rgb(var(--ink-900)); }
.boton-linea { border-color: currentColor; }
.boton-linea:hover { background: rgb(var(--fog-100)); color: rgb(var(--ink-900)); border-color: rgb(var(--fog-100)); }
.papel .boton-linea:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.boton .flecha { font-family: var(--mono); }

/* ---------- Cabecera de revista ---------- */
.cabecera {
  border-bottom: 1px solid rgb(var(--ink-500));
}
.cabecera-fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  min-height: 84px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.marca img { width: 34px; height: auto; }
.marca span {
  font-family: var(--titular);
  font-size: 34px;
  letter-spacing: 0.01em;
  line-height: 1;
}
.folio {
  display: flex;
  gap: 18px;
  color: rgb(var(--fog-500));
}
.folio b { color: rgb(var(--fog-100)); font-weight: 500; }
.nav {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 28px;
}
.nav a:not(.boton) {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(var(--fog-300));
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav a:not(.boton):hover,
.nav a[aria-current="page"] { color: rgb(var(--fog-100)); border-bottom-color: var(--accent); }
.nav .boton { min-height: 44px; }

/* ---------- Tape (channel strip) ---------- */
.tape {
  display: flex;
  border: 1px solid rgb(var(--ink-500));
  border-radius: 14px;
  overflow: hidden;
  background: rgb(var(--ink-800));
}
.tape > * {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: rgb(var(--fog-400));
  text-decoration: none;
  border-right: 1px solid rgb(var(--ink-500));
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tape > *:last-child { border-right: 0; }
.tape > a:hover { background: rgb(var(--ink-600)); color: rgb(var(--fog-100)); }
.tape .activo { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---------- Laminado: stub ---------- */
.stub {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  background: rgb(var(--ink-700));
  border: 1px solid rgb(var(--ink-500));
  border-radius: 14px;
  color: rgb(var(--fog-100));
}
.stub-edge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-right: 2px dashed rgb(var(--ink-500));
}
.stub-edge::before,
.stub-edge::after {
  content: "";
  position: absolute;
  right: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fondo-muesca, rgb(var(--ink-900)));
}
.stub-edge::before { top: -8px; }
.stub-edge::after { bottom: -8px; }
.stub-hole {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--fondo-muesca, rgb(var(--ink-900)));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.6), 0 0 0 2px rgb(var(--ink-500));
}
.stub-time {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--fog-400));
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.stub-cuerpo { padding: 20px 22px; }
.papel { --fondo-muesca: rgb(var(--fog-100)); }

/* ---------- Laminado: punch ---------- */
.punch {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px dashed rgb(var(--fog-500));
  border-radius: 12px;
  color: rgb(var(--fog-400));
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.punch-guardado {
  border: 0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin: 11px;
  background: rgb(var(--ink-900));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.7), 0 0 0 3px var(--accent);
}

/* ---------- Número de sección perforado ---------- */
.num {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 14px;
  border: 1.5px dashed currentColor;
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.num::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fondo-muesca, rgb(var(--ink-900)));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.6), 0 0 0 2px var(--accent);
}

/* ---------- Etiqueta de foto (laminado) ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  background: rgb(var(--fog-100));
  color: rgb(var(--ink-900));
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgb(var(--fog-400));
}
.etiqueta::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(var(--ink-900));
  box-shadow: 0 0 0 2px rgb(var(--fog-400));
  flex: none;
}

/* ---------- Pie de foto ---------- */
.pie {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgb(var(--fog-500));
}
.pie b { color: rgb(var(--fog-100)); font-weight: 600; }
.papel .pie { color: color-mix(in oklab, rgb(var(--ink-900)) 70%, transparent); }
.papel .pie b { color: var(--tinta); }

/* ---------- Fotos ---------- */
.foto { width: 100%; height: 100%; object-fit: cover; }
.bn { filter: grayscale(1) contrast(1.18) brightness(0.92); }

/* ---------- Folio de página ---------- */
.folio-pagina {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* =========================================================
   TELÉFONO + APP RECREADA
   ========================================================= */
.telefono {
  width: 320px;
  flex: none;
  padding: 10px;
  background: rgb(var(--ink-800));
  border: 1px solid rgb(var(--ink-500));
  border-radius: 28px;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.7);
}
.telefono-chico { width: 290px; }
.app {
  display: flex;
  flex-direction: column;
  height: 620px;
  overflow: hidden;
  border-radius: 20px;
  background: rgb(var(--ink-900));
  color: rgb(var(--fog-100));
  font-family: var(--cuerpo);
  font-size: 13px;
  line-height: 1.35;
  --fondo-muesca: rgb(var(--ink-900));
}
.app-tope {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 6px;
}
.app-boton {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgb(var(--ink-700));
  color: rgb(var(--fog-300));
}
.app-boton svg { width: 16px; height: 16px; }
.app-fecha {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: rgb(var(--fog-500));
}
.app-nombre {
  display: block;
  font-family: var(--titular);
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}
.app-regla {
  position: relative;
  height: 22px;
  margin: 0 14px;
  border-bottom: 1px solid rgb(var(--ink-600));
  background:
    repeating-linear-gradient(90deg, rgb(var(--ink-500)) 0 1px, transparent 1px 18px) bottom left / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgb(var(--ink-400)) 0 1px, transparent 1px 90px) bottom left / 100% 11px no-repeat;
}
.app-ahora {
  position: absolute;
  left: 63%;
  bottom: -1px;
  width: 2px;
  height: 14px;
  background: var(--accent);
}
.app-ahora::after {
  content: "AHORA";
  position: absolute;
  left: 5px;
  bottom: 8px;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}
.app-estado {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 0 8px;
  font-size: 11.5px;
  color: rgb(var(--fog-400));
}
.vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: rgb(var(--ok));
}
.vivo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--ok));
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.app-dias {
  display: flex;
  margin: 0 12px 8px;
  border: 1px solid rgb(var(--ink-500));
  border-radius: 10px;
  overflow: hidden;
}
.app-dias span {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgb(var(--fog-400));
  border-right: 1px solid rgb(var(--ink-500));
}
.app-dias span:last-child { border-right: 0; }
.app-dias .activo { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.app-chips {
  display: flex;
  gap: 6px;
  padding: 0 12px 10px;
  overflow: hidden;
  border-bottom: 1px solid rgb(var(--ink-600));
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 9px;
  border: 1px solid rgb(var(--ink-500));
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--fog-400));
  background: rgb(var(--ink-800));
}
.chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip.activo { background: rgb(var(--ink-600)); color: rgb(var(--fog-100)); border-color: rgb(var(--ink-400)); }
.e-orion i { background: rgb(var(--warn)); }
.e-nebulosa i { background: var(--accent); }
.e-cometa i { background: rgb(var(--ok)); }
.e-eclipse i { background: rgb(var(--danger)); }
.e-via i { background: rgb(var(--fog-400)); }

.app-cuerpo { flex: 1; overflow: hidden; padding: 10px 12px 0; }
.app-dia-titulo {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--accent-text);
}
.app-set {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.app-hora {
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.3;
  text-align: right;
  padding-right: 12px;
  color: rgb(var(--fog-400));
}
.app-hora::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  background: rgb(var(--warn));
  transform: translateY(-50%) rotate(45deg);
}
.app-hora small { display: block; font-size: 8.5px; color: var(--accent-text); letter-spacing: 0.06em; }
.app-tarjeta {
  display: grid;
  grid-template-columns: 34px 1fr 44px;
  gap: 10px;
  align-items: center;
  padding: 8px 8px 8px 8px;
  background: rgb(var(--ink-700));
  border: 1px solid rgb(var(--ink-500));
  border-radius: 12px;
}
.app-tarjeta.ahora { border-color: var(--accent); }
.app-mini {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  overflow: hidden;
}
.app-mini img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); }
.app-artista { font-weight: 600; font-size: 12.5px; }
.app-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--fog-500));
}
.estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.estado::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.estado-ok { color: rgb(var(--ok)); background: rgb(var(--ok) / 0.12); }
.estado-warn { color: rgb(var(--warn)); background: rgb(var(--warn) / 0.12); }
.estado-acento { color: var(--accent-ink); background: var(--accent); }
.estado-off { color: rgb(var(--fog-400)); background: rgb(var(--ink-600)); }
.app-tarjeta .punch { width: 40px; height: 40px; font-size: 18px; }
.app-tarjeta .punch-guardado { width: 20px; height: 20px; margin: 10px; }
.app-linea {
  position: relative;
}
.app-linea::before {
  content: "";
  position: absolute;
  left: 46px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgb(var(--ink-500));
}

.app-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 8px 4px 12px;
  border-top: 1px solid rgb(var(--ink-600));
  background: rgb(var(--ink-900));
}
.app-tabs span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-top: 6px;
  font-family: var(--mono);
  font-size: 6.5px;
  letter-spacing: 0.06em;
  color: rgb(var(--fog-500));
}
.app-tabs svg { width: 15px; height: 15px; }
.app-tabs .activo { color: rgb(var(--fog-100)); }
.app-tabs .activo::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 22%;
  right: 22%;
  height: 2px;
  background: var(--accent);
}

/* Mapa: captura real recortada (sin la fila de estado) */
.app-mapa {
  flex: none;
  height: 336px;
  overflow: hidden;
  border-top: 1px solid rgb(var(--ink-600));
}
.app-mapa img {
  width: 100%;
  height: auto;
  max-width: none;
  margin-top: -24.4%;
}

/* Comida y barras */
.app-segmento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 12px 10px;
  padding: 4px;
  border: 1px solid rgb(var(--ink-500));
  border-radius: 12px;
}
.app-segmento span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(var(--fog-300));
}
.app-segmento svg { width: 13px; height: 13px; }
.app-segmento .activo { background: var(--accent); color: var(--accent-ink); }
.app-puesto {
  display: grid;
  grid-template-columns: 34px 1fr 10px;
  gap: 10px;
  align-items: center;
  margin-bottom: 7px;
  padding: 9px 10px;
  background: rgb(var(--ink-700));
  border: 1px solid rgb(var(--ink-500));
  border-radius: 12px;
}
.app-puesto.apagado { opacity: 0.55; }
.app-icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgb(var(--ink-600));
  color: rgb(var(--fog-300));
}
.app-icono svg { width: 15px; height: 15px; }
.app-puesto-fila { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.app-puesto-nombre { font-weight: 600; font-size: 12.5px; }
.app-puesto-hora { font-family: var(--mono); font-size: 9.5px; color: rgb(var(--fog-500)); margin-top: 2px; }
.app-chevron { color: rgb(var(--fog-500)); font-family: var(--mono); }
.app-cuenta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px dashed rgb(var(--ink-400));
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: rgb(var(--fog-400));
}
.app-cuenta b { color: rgb(var(--fog-100)); font-weight: 600; font-size: 12px; }

/* animación de entrada como mejora progresiva */
@supports (animation-timeline: view()) {
  .entra {
    animation: entra linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }
  @keyframes entra {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
  }
}

/* =========================================================
   HOME
   ========================================================= */

/* Portada */
.portada { padding: 0; }
.portada-rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 96px auto 1fr auto;
  column-gap: 24px;
}
.portada-foto {
  grid-column: 1 / -1;
  grid-row: 1 / 4;
  height: 720px;
  margin: 0 calc(var(--borde) * -1);
  overflow: hidden;
}
.portada-foto img { object-position: center 40%; }
.portada-banda {
  grid-column: 1 / 9;
  grid-row: 2;
  z-index: 1;
  margin-left: calc(var(--borde) * -1);
  padding: 28px 40px 22px var(--borde);
  background: rgb(var(--ink-900));
}
.portada-banda h1 { font-size: 100px; }
.portada-banda2 {
  grid-column: 3 / 9;
  grid-row: 3;
  align-self: start;
  z-index: 1;
  padding: 16px 28px 12px;
  background: var(--accent);
  color: var(--accent-ink);
}
.portada-banda2 p {
  font-family: var(--titular);
  font-size: 48px;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.portada-etiqueta {
  grid-column: 1 / 5;
  grid-row: 3;
  align-self: end;
  z-index: 1;
  margin-bottom: 24px;
  justify-self: start;
}
.portada-tel {
  grid-column: 9 / 13;
  grid-row: 1 / 5;
  z-index: 2;
  justify-self: end;
  align-self: end;
  margin-bottom: 0;
}
.portada-pie {
  grid-column: 1 / 9;
  grid-row: 4;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  padding: 40px 0 56px;
  align-items: start;
}
.portada-pie p.bajada { font-size: 21px; line-height: 1.45; color: rgb(var(--fog-300)); max-width: 30ch; }
.portada-pie p.bajada strong { color: rgb(var(--fog-100)); font-weight: 600; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ctas-col { display: grid; gap: 12px; justify-items: start; }

/* Índice */
.indice { padding: 72px 0 80px; border-top: 1px solid rgb(var(--ink-500)); }
.indice-cabeza {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 24px;
  align-items: end;
  margin-bottom: 36px;
}
.indice-cabeza h2 { font-size: 96px; }
.indice-cabeza p { max-width: 46ch; color: rgb(var(--fog-400)); }
.indice-lista {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.3fr 0.9fr;
  gap: 18px;
}
.indice-lista .stub { text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease; }
.indice-lista .stub:hover { transform: translateY(-4px) rotate(-0.6deg); border-color: var(--accent); }
.indice-lista .stub-cuerpo { display: grid; gap: 10px; align-content: start; min-height: 190px; }
.indice-lista h3 { font-family: var(--titular); font-size: 34px; line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }
.indice-lista p { font-size: 14.5px; color: rgb(var(--fog-400)); }
.indice-lista .mono { color: var(--accent-text); }

/* N°01 */
.n01 { padding: 88px 0 0; overflow: hidden; }
.n01-rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: start;
}
.n01-texto { grid-column: 1 / 6; grid-row: 1; display: grid; gap: 28px; align-content: start; }
.n01-texto h2 { font-size: 164px; }
.n01-texto .lead { font-size: 22px; line-height: 1.4; max-width: 28ch; }
.n01-texto p { max-width: 44ch; }
.n01-foto {
  grid-column: 6 / 13;
  grid-row: 1;
  height: 640px;
  margin-right: calc(var(--borde) * -1 - 40px);
  overflow: hidden;
}
.n01-foto img { object-position: 30% center; }
.n01-tel {
  grid-column: 5 / 9;
  grid-row: 1 / 3;
  margin-top: 360px;
  z-index: 1;
  justify-self: center;
}
.n01-pie-foto { grid-column: 9 / 13; grid-row: 2; padding: 20px 0; display: grid; gap: 16px; align-content: start; }
.n01-hechos {
  grid-column: 1 / 5;
  grid-row: 2;
  margin-top: 56px;
  display: grid;
  gap: 0;
  border-top: 2px solid var(--tinta);
}
.n01-hechos li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dashed color-mix(in oklab, rgb(var(--ink-900)) 40%, transparent);
  font-size: 15px;
}
.n01-hechos .mono { padding-top: 3px; color: var(--acento-papel); font-weight: 600; }
.n01 .folio-pagina { margin-top: 64px; }

/* N°02 */
.n02 { padding: 96px 0 0; }
.n02-cabeza {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: end;
  margin-bottom: 64px;
}
.n02-cabeza .num { grid-column: 1 / 4; grid-row: 1; justify-self: start; align-self: start; }
.n02-cabeza h2 { grid-column: 1 / 8; grid-row: 2; font-size: 216px; margin-top: 24px; }
.n02-cabeza .entrada { grid-column: 8 / 13; grid-row: 2; display: grid; gap: 18px; padding-bottom: 18px; }
.n02-cabeza .entrada p:first-child { font-size: 22px; line-height: 1.4; }
.n02-cabeza .entrada p { color: rgb(var(--fog-300)); }
.n02-spread {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 0 0 40px;
}
.n02-col { display: grid; gap: 22px; justify-items: start; }
.n02-col:nth-child(2) { margin-top: 120px; }
.n02-col:nth-child(3) { margin-top: 40px; }
.n02-col .pie { max-width: 34ch; }
.n02-col .pie b { display: block; margin-bottom: 4px; }
.n02-cinta {
  margin: 56px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgb(var(--ink-500));
  border-bottom: 1px solid rgb(var(--ink-500));
}
.n02-cinta li {
  padding: 24px 22px 26px 0;
  border-right: 1px dashed rgb(var(--ink-500));
  display: grid;
  gap: 8px;
  align-content: start;
}
.n02-cinta li + li { padding-left: 22px; }
.n02-cinta li:last-child { border-right: 0; }
.n02-cinta strong { font-family: var(--titular); font-size: 30px; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.02em; font-weight: 700; }
.n02-cinta span { color: rgb(var(--fog-400)); font-size: 15px; }
.n02 .folio-pagina { color: rgb(var(--fog-400)); margin-top: 40px; }

/* N°03 */
.n03 { padding: 96px 0 0; overflow: hidden; }
.n03-rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
}
.n03-cabeza { grid-column: 1 / 8; display: flex; gap: 24px; align-items: center; margin-bottom: 32px; }
.n03-preguntas { grid-column: 1 / 9; grid-row: 2; display: grid; gap: 4px; }
.pregunta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  padding: 6px 0 10px;
  border-bottom: 2px solid var(--tinta);
}
.pregunta q {
  font-family: var(--titular);
  font-size: 68px;
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  quotes: none;
}
.pregunta .mono { padding-bottom: 12px; color: var(--acento-papel); font-weight: 600; white-space: nowrap; }
.pregunta:nth-child(2) q { padding-left: 1.2em; }
.pregunta:nth-child(3) q { padding-left: 0.5em; }
.n03-foto {
  grid-column: 9 / 13;
  grid-row: 1 / 4;
  margin-right: calc(var(--borde) * -1);
  min-height: 760px;
  overflow: hidden;
  display: grid;
}
.n03-foto img { grid-area: 1 / 1; }
.n03-foto .etiqueta { grid-area: 1 / 1; align-self: end; justify-self: start; margin: 0 0 24px 24px; }
.n03-respuesta {
  grid-column: 1 / 9;
  grid-row: 3;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 48px 0 0;
}
.n03-respuesta .titular { font-size: 88px; }
.n03-respuesta .titular span { background: var(--accent); color: var(--accent-ink); padding: 0 12px; }
.n03-respuesta p.cuerpo { max-width: 40ch; margin-top: 18px; }
.n03-stubs { display: grid; gap: 12px; }
.n03-stubs .stub { --fondo-muesca: rgb(var(--fog-100)); }
.n03-stubs .stub-cuerpo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; }
.n03-stubs .stub-cuerpo b { display: block; font-size: 16px; }
.n03-stubs .stub-cuerpo small { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--fog-400)); }
.n03 .folio-pagina { margin-top: 72px; }

/* N°04 */
.n04 { padding: 96px 0 0; }
.n04-rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 32px;
  align-items: start;
}
.n04-rejilla .num { grid-column: 1 / 4; justify-self: start; }
.n04-titulo { grid-column: 1 / 9; grid-row: 2; font-size: 116px; }
.n04-texto { grid-column: 1 / 6; grid-row: 3; display: grid; gap: 22px; }
.n04-texto .lead { font-size: 21px; line-height: 1.45; color: rgb(var(--fog-300)); }
.n04-lista li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px dashed rgb(var(--ink-500));
}
.n04-lista .mono { color: var(--accent-text); padding-top: 3px; }
.n04-panel { grid-column: 6 / 13; grid-row: 3 / 5; margin-right: calc(var(--borde) * -1); }
.n04-cta { grid-column: 1 / 6; grid-row: 4; }
.n04 .folio-pagina { color: rgb(var(--fog-400)); margin-top: 72px; }

/* Panel recreado (escritorio) */
.panel {
  background: rgb(var(--ink-800));
  border: 1px solid rgb(var(--ink-500));
  border-radius: 20px;
  overflow: hidden;
  font-size: 13px;
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.8);
}
.panel-barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgb(var(--ink-500));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgb(var(--fog-500));
}
.panel-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--ink-500)); }
.panel-barra span { margin-left: 10px; padding: 4px 12px; border-radius: 8px; background: rgb(var(--ink-900)); color: rgb(var(--fog-300)); }
.panel-cuerpo { display: grid; grid-template-columns: 170px 1fr; min-height: 420px; }
.panel-menu { padding: 18px 14px; border-right: 1px solid rgb(var(--ink-600)); display: grid; gap: 4px; align-content: start; }
.panel-menu span {
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--fog-400));
}
.panel-menu .activo { background: rgb(var(--ink-600)); color: rgb(var(--fog-100)); box-shadow: inset 2px 0 0 var(--accent); }
.panel-main { padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.panel-titulo { display: flex; justify-content: space-between; align-items: center; }
.panel-titulo b { font-family: var(--titular); font-size: 26px; text-transform: uppercase; letter-spacing: 0.01em; }
.panel-tabla { width: 100%; border-collapse: collapse; }
.panel-tabla th {
  text-align: left;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--fog-500));
  border-bottom: 1px solid rgb(var(--ink-500));
}
.panel-tabla td { padding: 10px; border-bottom: 1px solid rgb(var(--ink-600)); color: rgb(var(--fog-300)); }
.panel-tabla td.mono { font-size: 11px; color: rgb(var(--fog-100)); }
.panel-tabla tr.cambio td { background: rgb(var(--accent-rgb) / 0.12); }
.panel-tabla tr.cambio td.mono { color: var(--accent-text); }
.tachado { text-decoration: line-through; color: rgb(var(--fog-500)); margin-right: 6px; }

/* Contraportada */
.contra { padding: 96px 0 0; }
.contra-rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: end;
}
.contra-titulo { grid-column: 1 / 8; font-size: 136px; }
.contra-pase { grid-column: 8 / 13; }
.pase {
  display: grid;
  grid-template-columns: 1fr 64px;
  background: rgb(var(--ink-900));
  color: rgb(var(--fog-100));
  border-radius: 24px;
  overflow: hidden;
  --fondo-muesca: rgb(var(--fog-100));
}
.pase-cuerpo { padding: 32px; display: grid; gap: 22px; }
.pase-cuerpo .mono { color: rgb(var(--fog-400)); }
.pase-cuerpo .titular { font-size: 48px; }
.pase-cuerpo p { color: rgb(var(--fog-300)); }
.pase-filas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; border-top: 1px dashed rgb(var(--ink-500)); padding-top: 18px; }
.pase-filas div { display: grid; gap: 2px; }
.pase-filas small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--fog-500)); }
.pase-filas b { font-family: var(--mono); font-weight: 500; font-size: 14px; }
.pase-talon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-left: 2px dashed rgb(var(--ink-500));
  background: var(--accent);
  color: var(--accent-ink);
}
.pase-talon::before, .pase-talon::after {
  content: "";
  position: absolute;
  left: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fondo-muesca);
}
.pase-talon::before { top: -8px; }
.pase-talon::after { bottom: -8px; }
.pase-talon .stub-hole { background: var(--fondo-muesca); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.5), 0 0 0 2px var(--accent-ink); width: 16px; height: 16px; }
.pase-talon .stub-time { color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.contra-bajada { grid-column: 1 / 7; margin-top: 32px; display: grid; gap: 24px; }
.contra-bajada p { font-size: 21px; max-width: 34ch; }

/* Pie */
.pie-sitio { padding: 56px 0 40px; }
.pie-rejilla {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
  padding-bottom: 40px;
}
.pie-rejilla h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--fog-500)); margin-bottom: 14px; }
.pie-rejilla li { padding: 4px 0; }
.pie-rejilla a { text-decoration: none; color: rgb(var(--fog-300)); }
.pie-rejilla a:hover { color: rgb(var(--fog-100)); text-decoration: underline; text-decoration-color: var(--accent); }
.pie-rejilla p { color: rgb(var(--fog-400)); max-width: 36ch; margin-top: 14px; font-size: 15px; }
.pie-redes a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.pie-redes svg { flex: none; }
.pie-sitio .folio-pagina { color: rgb(var(--fog-500)); opacity: 1; border-top-color: rgb(var(--ink-500)); }

/* =========================================================
   ORGANIZADORES
   ========================================================= */
.o-portada { padding: 32px 0 0; }
.o-portada-rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  grid-template-rows: auto auto auto;
}
.o-portada-foto {
  grid-column: 6 / 13;
  grid-row: 1 / 3;
  height: 640px;
  margin-right: calc(var(--borde) * -1);
  overflow: hidden;
}
.o-portada-titulo {
  grid-column: 1 / 10;
  grid-row: 1;
  z-index: 1;
  align-self: start;
  margin-top: 40px;
}
.o-portada-titulo h1 { font-size: 148px; }
.o-portada-titulo h1 span { display: inline-block; background: rgb(var(--ink-900)); padding: 0 24px 10px 0; }
.o-portada-titulo h1 .acento-banda { background: var(--accent); color: var(--accent-ink); padding: 8px 24px 10px; }
.o-portada-bajada {
  grid-column: 1 / 6;
  grid-row: 2;
  align-self: end;
  display: grid;
  gap: 24px;
  padding-bottom: 8px;
}
.o-portada-bajada p { font-size: 21px; line-height: 1.45; color: rgb(var(--fog-300)); max-width: 32ch; }
.o-portada-tape { grid-column: 1 / 13; grid-row: 3; margin-top: 40px; }

.momento { padding: 96px 0; border-top: 1px solid rgb(var(--ink-500)); scroll-margin-top: 20px; }
.momento.papel { border-top: 0; }
.momento-rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 40px;
  align-items: start;
}
.timecode {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 28px;
  font-family: var(--mono);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.timecode .dia { font-size: 40px; letter-spacing: 0.06em; color: var(--accent-text); }
.papel .timecode .dia { color: var(--acento-papel); }
.timecode .hora { font-size: 168px; }
.timecode .hora small { font-size: 0.45em; opacity: 0.45; }
.timecode .regla { flex: 1; height: 2px; align-self: center; background: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 18px); opacity: 0.5; }
.momento-texto { display: grid; gap: 20px; align-content: start; }
.momento-texto h2 { font-size: 52px; }
.momento-texto p { max-width: 44ch; }
.momento-texto .lead { font-size: 21px; line-height: 1.45; }
.nota-honesta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px dashed currentColor;
  border-radius: 14px;
  font-size: 15px;
  max-width: 44ch;
}
.nota-honesta .mono { padding-top: 2px; font-weight: 600; }

/* Momento 1: planilla */
.m1 .momento-texto { grid-column: 1 / 5; }
.m1-visual { grid-column: 5 / 13; display: grid; grid-template-columns: 0.85fr auto 1.15fr; gap: 20px; align-items: center; }
.planilla {
  background: rgb(var(--ink-700));
  color: rgb(var(--fog-100));
  border-radius: 18px;
  padding: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.9;
  border: 1px solid rgb(var(--ink-500));
}
.planilla .mono { color: rgb(var(--fog-500)); margin-bottom: 8px; display: block; font-size: 10px; }
.planilla code { display: block; white-space: pre; font-family: var(--mono); color: rgb(var(--fog-300)); border-bottom: 1px dashed rgb(var(--ink-500)); }
.flecha-grande { font-family: var(--titular); font-size: 64px; color: var(--acento-papel); }

/* Momento 2: código */
.m2 .momento-texto { grid-column: 8 / 13; grid-row: 2; }
.m2-objetos { grid-column: 1 / 8; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.objeto { border-radius: 18px; padding: 22px; display: grid; gap: 14px; align-content: start; }
.objeto .mono { font-size: 10.5px; }
.objeto-entrada { background: rgb(var(--fog-100)); color: rgb(var(--ink-900)); grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 140px; padding: 0; overflow: hidden; --fondo-muesca: rgb(var(--ink-900)); }
.objeto-entrada .izq { padding: 24px; display: grid; gap: 10px; }
.objeto-entrada .izq .titular { font-size: 48px; }
.objeto-entrada .der { position: relative; border-left: 2px dashed rgb(var(--ink-400)); display: grid; place-items: center; gap: 8px; padding: 18px; }
.objeto-entrada .der::before, .objeto-entrada .der::after { content: ""; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--fondo-muesca); }
.objeto-entrada .der::before { top: -8px; }
.objeto-entrada .der::after { bottom: -8px; }
.codigo-grande { font-family: var(--mono); font-weight: 600; font-size: 30px; letter-spacing: 0.18em; }
.objeto-pulsera {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 14px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-column: 1 / -1;
}
.objeto-pulsera .codigo-grande { font-size: 22px; }
.objeto-bio { background: rgb(var(--ink-700)); border: 1px solid rgb(var(--ink-500)); }
.objeto-bio .bio-cabeza { display: flex; gap: 12px; align-items: center; }
.objeto-bio .avatar { width: 46px; height: 46px; border-radius: 50%; background: rgb(var(--ink-500)); display: grid; place-items: center; font-family: var(--titular); font-size: 18px; }
.objeto-bio a { color: var(--accent-text); font-family: var(--mono); font-size: 13px; }
.objeto-qr { background: rgb(var(--fog-100)); color: rgb(var(--ink-900)); justify-items: start; }
.objeto-qr svg { width: 120px; height: 120px; }

/* Momento 3: crew */
.m3 .momento-texto { grid-column: 1 / 6; grid-row: 2; }
.m3-visual { grid-column: 6 / 13; grid-row: 2; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start; }
.crew {
  background: rgb(var(--ink-800));
  border: 1px solid rgb(var(--ink-500));
  border-radius: 20px;
  overflow: hidden;
}
.crew-cuerpo { padding: 20px; display: grid; gap: 14px; }
.crew-quien { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--fog-400)); }
.crew-campo { display: grid; gap: 6px; }
.crew-campo label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--fog-500)); }
.crew-input { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgb(var(--ink-900)); border: 1px solid rgb(var(--ink-500)); font-family: var(--mono); font-size: 15px; }
.crew-input.foco { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.25); }
.crew-guardado { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgb(var(--ok) / 0.1); color: rgb(var(--ok)); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
.m3-visual .pie { grid-column: 1 / -1; }

/* Momento 4: show */
.m4 .momento-texto { grid-column: 9 / 13; grid-row: 2; }
.m4-visual { grid-column: 1 / 9; grid-row: 2; display: grid; gap: 16px; }
.pantalla {
  background: rgb(var(--ink-900));
  color: rgb(var(--fog-100));
  border: 10px solid rgb(var(--ink-700));
  border-radius: 22px;
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.pantalla-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 18px 26px; border-bottom: 1px solid rgb(var(--ink-600)); }
.pantalla-cabeza .titular { font-size: 34px; }
.pantalla-reloj { font-family: var(--mono); font-size: 34px; font-weight: 500; }
.pantalla-filas { padding: 10px 26px; display: grid; align-content: start; }
.pantalla-fila { display: grid; grid-template-columns: 110px 1fr 200px 130px; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px dashed rgb(var(--ink-600)); font-size: 18px; }
.pantalla-fila .mono { font-size: 15px; letter-spacing: 0.04em; }
.pantalla-fila.ahora { color: var(--accent-text); }
.pantalla-fila b { font-weight: 600; }
.ticker { display: flex; gap: 22px; align-items: center; padding: 12px 26px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.ticker b { font-weight: 600; }
.ticker span { animation: ticker 18s linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-40%); } }

/* Momento 5: barra */
.m5 .momento-texto { grid-column: 1 / 5; grid-row: 2; }
.m5-foto { grid-column: 5 / 9; grid-row: 2; height: 620px; border-radius: 0; overflow: hidden; display: grid; }
.m5-foto img { grid-area: 1 / 1; }
.m5-foto .etiqueta { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 20px; }
.m5-tel { grid-column: 9 / 13; grid-row: 2; justify-self: end; margin-top: 60px; }

/* Momento 6: registro */
.m6 .momento-texto { grid-column: 1 / 5; grid-row: 2; }
.m6-visual { grid-column: 5 / 13; grid-row: 2; }
.registro { width: 100%; border-collapse: collapse; font-size: 15px; }
.registro th { text-align: left; padding: 10px 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 2px solid currentColor; }
.registro td { padding: 14px 12px; border-bottom: 1px dashed color-mix(in oklab, rgb(var(--ink-900)) 35%, transparent); vertical-align: top; }
.registro td.mono { font-size: 12px; white-space: nowrap; }
.registro td .codigo { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 6px; background: rgb(var(--ink-900)); color: rgb(var(--fog-100)); letter-spacing: 0.06em; white-space: nowrap; }
.m6-visual .pie { margin-top: 14px; }

/* Bloques finales organizadores */
.bloque { padding: 96px 0; border-top: 1px solid rgb(var(--ink-500)); }
.bloque.papel { border-top: 0; }
.bloque-cabeza { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; margin-bottom: 48px; }
.bloque-cabeza .num { grid-column: 1 / 4; grid-row: 1; justify-self: start; margin-bottom: 20px; }
.bloque-cabeza h2 { grid-column: 1 / 9; grid-row: 2; font-size: 100px; }
.bloque-cabeza p { grid-column: 9 / 13; grid-row: 2; padding-bottom: 10px; }

.incluye {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid rgb(var(--fog-100));
}
.incluye li { padding: 22px 22px 26px 0; border-bottom: 1px dashed rgb(var(--ink-500)); display: grid; gap: 8px; align-content: start; }
.incluye li:not(:nth-child(4n + 1)) { padding-left: 22px; border-left: 1px dashed rgb(var(--ink-500)); }
.incluye b { font-family: var(--titular); font-size: 26px; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.02em; font-weight: 700; }
.incluye span { color: rgb(var(--fog-400)); font-size: 15px; }

.estado-dos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.estado-col { border-radius: 22px; padding: 30px; display: grid; gap: 18px; align-content: start; }
.estado-col.ya { background: rgb(var(--ink-900)); color: rgb(var(--fog-100)); }
.estado-col.luego { border: 2px dashed rgb(var(--ink-400)); }
.estado-col h3 { font-family: var(--titular); font-size: 44px; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em; }
.estado-col ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.estado-col.luego ul { grid-template-columns: 1fr; }
.estado-col li { padding: 10px 0; border-top: 1px dashed currentColor; display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 15px; }
.estado-col.ya li { border-top-color: rgb(var(--ink-500)); }
.estado-col.luego li { border-top-color: color-mix(in oklab, rgb(var(--ink-900)) 35%, transparent); }
.pendiente { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; color: var(--acento-papel); }

.planes { width: 100%; border-collapse: collapse; }
.planes th, .planes td { text-align: left; vertical-align: top; padding: 18px 16px; border-bottom: 1px solid rgb(var(--ink-500)); }
.planes thead th { padding-top: 0; border-bottom: 2px solid rgb(var(--fog-100)); }
.planes thead th .mono { display: block; color: rgb(var(--fog-500)); margin-bottom: 8px; }
.planes thead th .titular { font-size: 48px; }
.planes thead th.destacado .titular { color: var(--accent-text); }
.planes tbody th { width: 18%; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--fog-500)); padding-left: 0; }
.planes td { font-size: 15.5px; color: rgb(var(--fog-300)); }
.planes td.cifra { font-family: var(--mono); font-size: 15px; color: rgb(var(--fog-100)); }
.planes .si { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: rgb(var(--ok)); }
.planes-nota { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 28px; }
.planes-nota p { font-size: 19px; max-width: 46ch; }

.no-es { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.no-es h2 { grid-column: 1 / 6; font-size: 76px; }
.no-es ul { grid-column: 7 / 13; display: grid; }
.no-es li { padding: 18px 0; border-top: 2px solid currentColor; font-size: 19px; display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.no-es li .mono { padding-top: 5px; color: var(--acento-papel); font-weight: 600; }

/* =========================================================
   Movimiento reducido
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Colapso a una columna (base para la versión celular)
   ========================================================= */
@media (max-width: 960px) {
  :root { --borde: 16px; }
  .cabecera-fila { grid-template-columns: 1fr auto; }
  .folio { display: none; }
  .nav a:not(.boton) { display: none; }
  [class*="-rejilla"], .n02-spread, .indice-lista, .indice-cabeza, .estado-dos, .incluye, .n02-cinta, .m1-visual, .m3-visual, .m2-objetos, .bloque-cabeza, .no-es, .contra-rejilla, .pie-rejilla, .portada-pie, .n03-respuesta {
    grid-template-columns: 1fr;
  }
  [class*="-rejilla"] > *, .bloque-cabeza > *, .no-es > * { grid-column: 1 / -1 !important; grid-row: auto !important; margin-left: 0; margin-right: 0; }
  .portada-banda h1, .n01-texto h2, .n02-cabeza h2, .contra-titulo, .o-portada-titulo h1 { font-size: 64px; }
  .timecode .hora { font-size: 72px; }
  .n02-col:nth-child(n) { margin-top: 0; }
  .pregunta q { font-size: 40px; }
  .n01-tel { margin-top: 0; }
  .telefono { width: 100%; max-width: 320px; }
  .planes { display: block; overflow-x: auto; }
}

/* Pantalla de entrada (código) */
.codigo-app {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 8px 0 18px;
}
.codigo-app span {
  display: grid;
  place-items: center;
  height: 52px;
  border-radius: 10px;
  background: rgb(var(--ink-700));
  border: 1px solid rgb(var(--ink-500));
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
}
.codigo-app span:last-child { border-color: var(--accent); }
.app-check { margin-bottom: 14px; }
.app-check li {
  display: flex;
  justify-content: space-between;
  padding: 8px 2px;
  border-bottom: 1px dashed rgb(var(--ink-500));
  font-size: 12px;
  color: rgb(var(--fog-300));
}
.app-check b { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: rgb(var(--ok)); }
.app-stub { border-radius: 12px; }
.app-stub .stub-cuerpo { padding: 12px 14px; display: grid; gap: 2px; }
.app-stub b { font-size: 13px; }
.app-stub small { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--fog-400)); }
.app-stub .stub-edge { padding: 12px 0; }

/* Organizadores: ajustes */
.m1-pie { grid-column: 1 / -1; }
.m1-visual .panel-main { padding: 16px 18px 18px; }
.pase-claro { background: rgb(var(--fog-100)); color: rgb(var(--ink-900)); --fondo-muesca: rgb(var(--ink-900)); }
.pase-claro .pase-cuerpo .mono, .pase-claro .pase-filas small { color: color-mix(in oklab, rgb(var(--ink-900)) 65%, transparent); }
.pase-claro .pase-cuerpo p { color: rgb(var(--ink-900)); }
.pase-claro .pase-filas { border-top-color: rgb(var(--fog-400)); }
.qr { color: rgb(var(--ink-900)); }
.momento .timecode .num { font-size: 12px; }
.n03-cabeza h2 { font-size: 14px; font-weight: 500; }
.num { justify-self: start; }
.indice-lista li { display: grid; }

.app-tarjeta > span:nth-child(2) { min-width: 0; }
.app-meta { flex-wrap: wrap; row-gap: 3px; }
.app-artista { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num { white-space: nowrap; }
.n04-panel { margin-right: 0; }
.contra .folio-pagina { margin-top: 72px; }
.panel, .crew { color: rgb(var(--fog-100)); }
.o-portada-titulo h1 { font-size: 148px; }
.o-portada-bajada { padding-top: 32px; }
.timecode .num { align-self: center; }
.m3 .momento-texto { grid-column: 1 / 5; }
.m3-visual { grid-column: 5 / 13; grid-template-columns: 1fr 320px; }
.m3-visual .telefono-chico { width: 320px; }
.pantalla-fila .estado { justify-self: start; font-size: 11px; padding: 4px 10px; }
.planes { table-layout: fixed; }
.planes thead th:first-child, .planes tbody th { width: 16%; }

/* ===== Sitio revista 2026-10-05: agregado ===== */
/* Acceso del asistente en el nav: mismo estilo mono, con el acento como texto. */
.nav a.nav-app { color: var(--accent-text); }

/* ===== Fotos fundidas con el fondo (2026-10-05) ===== */
/* Las fotos en blanco y negro sobre fondo oscuro se funden con la página: con
   lighten, cada canal toma el mayor entre foto y fondo, así los negros de la
   foto quedan en ink-900 y no se ve el borde del cuadro. Solo en fondo oscuro;
   las fotos sobre papel y la foto a color de los láseres no se tocan. */
.portada-foto, .o-portada-foto, .m5-foto { background: rgb(var(--ink-900)); }
.portada-foto img.bn, .o-portada-foto img.bn, .m5-foto img.bn { mix-blend-mode: lighten; }
.folio b { white-space: nowrap; }

/* ===== Celular (2026-10-05) =====
   Todo lo de este bloque vive dentro de media queries: el escritorio no cambia.
   960 px: tablet y celular (una columna). 480 px: ajustes finos de celular. */
@media (max-width: 960px) {
  :root { --borde: 32px; }

  /* --- Cabecera: marca y demo arriba, folio, nav que envuelve --- */
  .cabecera-fila {
    position: relative;
    grid-template-columns: 1fr auto;
    grid-template-rows: 44px auto auto;
    row-gap: 4px;
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 4px;
  }
  .marca { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; }
  .marca { min-height: 44px; }
  .folio { display: flex; flex-wrap: wrap; gap: 4px 14px; grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0; font-size: 11px; }
  .nav { grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; column-gap: 24px; row-gap: 0; }
  .nav a:not(.boton) { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .nav .boton { position: absolute; top: 12px; right: var(--borde); }

  /* --- Titulares: sin cortes y con aire para los acentos --- */
  .titular { line-height: 0.96; }

  /* --- Portada --- */
  .portada-rejilla { grid-template-rows: clamp(260px, 60vw, 420px) auto auto auto auto; }
  .portada-rejilla > .portada-foto { grid-row: 1 / 4 !important; height: auto; margin: 0 calc(var(--borde) * -1); }
  .portada-rejilla > .portada-banda { grid-row: 2 !important; align-self: end; margin-left: calc(var(--borde) * -1); margin-right: 0; padding: 18px 20px 14px var(--borde); justify-self: start; }
  .portada-banda h1 { font-size: clamp(54px, calc(16vw - 13.4px), 140px); }
  .portada-rejilla > .portada-banda2 { grid-row: 3 !important; justify-self: end; margin-left: 15%; margin-right: calc(var(--borde) * -1); padding: 12px var(--borde) 10px 20px; }
  .portada-banda2 p { font-size: clamp(22px, 6vw, 48px); line-height: 1; }
  .portada-rejilla > .portada-etiqueta { grid-row: 1 !important; align-self: start; margin: 16px 0 0; }
  .portada-rejilla > .portada-pie { grid-row: 4 !important; padding: 32px 0 40px; gap: 28px; }
  .portada-rejilla > .portada-tel { grid-row: 5 !important; justify-self: center; margin-bottom: 48px; }
  .portada-pie p.bajada { font-size: 19px; max-width: 34ch; }
  /* Tablet: bajada y teléfono lado a lado */
  .portada-rejilla { grid-template-columns: 1fr auto; }
  .portada-rejilla > .portada-pie { grid-column: 1 !important; padding-right: 24px; align-self: start; align-content: start; }
  .portada-rejilla > .portada-tel { grid-column: 2 !important; grid-row: 4 !important; margin-top: 32px; }
  .ctas-col { grid-auto-flow: row; }

  /* --- Teléfonos recreados: ancho fluido hasta 320 px, nunca recortados --- */
  .telefono, .telefono-chico, .m3-visual .telefono-chico { width: 100%; max-width: 320px; }

  /* --- Índice --- */
  .indice { padding: 56px 0 64px; }
  .indice-cabeza { gap: 16px; margin-bottom: 28px; }
  .indice-cabeza h2 { font-size: clamp(56px, 15vw, 96px); }
  .indice-lista { grid-template-columns: 1fr 1fr; gap: 14px; }
  .indice-lista .stub-cuerpo { min-height: 0; }
  .indice-lista h3 { font-size: clamp(22px, 4.5vw, 32px); }

  /* --- N°01 --- */
  .n01 { padding-top: 56px; }
  .n01-rejilla { row-gap: 28px; }
  .n01-texto { gap: 22px; }
  .n01-texto h2 { font-size: clamp(80px, 25vw, 164px); }
  .n01-texto .lead { font-size: 20px; }
  .n01-rejilla > .n01-foto { height: clamp(260px, 62vw, 520px); margin: 0 calc(var(--borde) * -1); }
  .n01-rejilla > .n01-tel { justify-self: center; margin-top: -96px; }
  .n01-rejilla > .n01-pie-foto { grid-row: 4 !important; padding: 0; }
  .n01-rejilla > .n01-hechos { grid-row: 5 !important; margin-top: 8px; }
  .n01 .folio-pagina { margin-top: 48px; }
  .folio-pagina { flex-wrap: wrap; gap: 4px 18px; }

  /* --- N°02 --- */
  .n02 { padding-top: 64px; }
  .n02-cabeza { grid-template-columns: 1fr; margin-bottom: 36px; }
  .n02-cabeza > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .n02-cabeza h2 { font-size: clamp(80px, 24vw, 200px); margin-top: 20px; }
  .n02-cabeza .entrada { padding-bottom: 0; margin-top: 20px; }
  .n02-cabeza .entrada p:first-child { font-size: 20px; }
  /* Spread: fila con desplazamiento interno, cada teléfono encaja al deslizar */
  .n02-spread {
    display: flex;
    gap: 20px;
    margin: 0 calc(var(--borde) * -1);
    padding: 0 var(--borde) 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--borde);
  }
  .n02-col { flex: none; width: 320px; margin: 0; scroll-snap-align: start; }
  .n02-spread .entra { animation: none; }
  .n02-cinta { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .n02-cinta li, .n02-cinta li + li { padding: 20px 18px 22px 0; border-right: 0; border-bottom: 1px dashed rgb(var(--ink-500)); }
  .n02-cinta li:nth-child(even) { padding-left: 18px; border-left: 1px dashed rgb(var(--ink-500)); }
  .n02-cinta li:nth-last-child(-n + 2) { border-bottom: 0; }

  /* --- N°03 --- */
  .n03 { padding-top: 64px; }
  .n03-cabeza { flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
  .pregunta { grid-template-columns: 1fr; gap: 6px; padding: 10px 0 12px; }
  .pregunta q { font-size: clamp(34px, 8.5vw, 68px); line-height: 1.05; }
  .pregunta:nth-child(2) q, .pregunta:nth-child(3) q { padding-left: 0; }
  .pregunta .mono { padding-bottom: 0; }
  .n03-rejilla > .n03-foto { min-height: 0; height: clamp(360px, 90vw, 640px); margin: 36px calc(var(--borde) * -1) 0; }
  .n03-respuesta { padding-top: 36px; gap: 28px; }
  .n03-respuesta .titular { font-size: clamp(56px, 15vw, 88px); }
  .n03-stubs .stub-cuerpo { flex-wrap: wrap; }
  .n03 .folio-pagina { margin-top: 56px; }

  /* --- N°04 --- */
  .n04 { padding-top: 64px; }
  .n04-rejilla { row-gap: 28px; }
  .n04-titulo { font-size: clamp(44px, 11.5vw, 96px); }
  .n04-texto .lead { font-size: 19px; }
  .panel-titulo { flex-wrap: wrap; gap: 10px; }
  .n04 .folio-pagina { margin-top: 56px; }

  /* --- Contraportada --- */
  .contra { padding-top: 64px; }
  .contra-titulo { font-size: clamp(48px, calc(16vw - 11px), 136px); margin-bottom: 32px; }
  .contra-bajada p { font-size: 19px; }
  .contra .folio-pagina { margin-top: 56px; }

  /* --- Pie del sitio --- */
  .pie-rejilla { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .pie-rejilla > div:not(:first-child) { grid-column: auto !important; }
  .pie-rejilla h4 { margin-bottom: 4px; }
  .pie-rejilla li { padding: 0; }
  .pie-rejilla a:not(.marca) { display: inline-flex; align-items: center; min-height: 44px; }

  /* --- Cómo funciona: portada --- */
  .o-portada { padding-top: 0; }
  .o-portada-rejilla { grid-template-rows: clamp(200px, 40vw, 360px) auto auto auto; }
  .o-portada-rejilla > .o-portada-foto { grid-row: 1 / 3 !important; height: auto; margin: 0 calc(var(--borde) * -1); }
  .o-portada-rejilla > .o-portada-titulo { grid-row: 2 !important; margin: 0 0 0 calc(var(--borde) * -1); align-self: end; }
  .o-portada-titulo h1 { font-size: clamp(48px, 13vw, 112px); }
  .o-portada-titulo h1 span { padding: 4px 18px 6px var(--borde); }
  .o-portada-titulo h1 .acento-banda { padding: 6px 18px 8px var(--borde); }
  .o-portada-rejilla > .o-portada-bajada { grid-row: 3 !important; padding-top: 28px; }
  .o-portada-bajada p { font-size: 19px; }
  .o-portada-rejilla > .o-portada-tape { grid-row: 4 !important; margin-top: 32px; }

  /* Tape de momentos: fila con desplazamiento interno */
  .tape.o-portada-tape { overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .o-portada-tape > * { flex: none; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; scroll-snap-align: start; }

  /* --- Momentos: timecode, título, texto, pieza visual, pie --- */
  .momento { padding: 64px 0; }
  .momento-rejilla { display: flex; flex-direction: column; gap: 28px; }
  .timecode { flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 4px; }
  .timecode .dia { order: 1; font-size: 24px; }
  .timecode .regla { order: 2; }
  .timecode .num { order: 3; }
  .timecode .hora { order: 4; flex-basis: 100%; font-size: clamp(88px, 25vw, 168px); }
  .momento-texto h2 { font-size: clamp(36px, 10vw, 52px); }
  .momento-texto .lead { font-size: 19px; }
  .momento-texto { order: 1; }
  .m1-visual, .m2-objetos, .m3-visual, .m4-visual, .m5-foto, .m5-tel, .m6-visual { order: 2; }

  .m1-visual { justify-items: stretch; }
  .flecha-grande { justify-self: center; transform: rotate(90deg); line-height: 1; }
  .m2 .momento-texto { display: contents; }
  .m2 .momento-texto > * { order: 1; }
  .m2 .momento-texto > .pie { order: 3; }
  .m2-objetos { gap: 16px; grid-template-columns: 1fr 1fr; }
  .objeto-bio a { display: inline-flex; align-items: center; min-height: 44px; }
  .m3-visual { grid-template-columns: 1fr 320px; gap: 20px; }
  .m3-visual .crew { justify-self: stretch; }
  .m3-visual .pie { justify-self: stretch; }
  .pantalla { aspect-ratio: auto; }
  .pantalla-cabeza .titular { font-size: 26px; }
  .pantalla-fila { grid-template-columns: 64px 1fr auto; font-size: 15px; }
  .pantalla-fila > span:nth-child(3) { display: none; }
  .m5-foto { height: clamp(380px, 75vw, 560px); margin: 0 calc(var(--borde) * -1); }
  .m5-tel { align-self: center; margin-top: -120px; position: relative; z-index: 1; }
  .registro { font-size: 14px; }
  .registro th, .registro td { padding-left: 8px; padding-right: 8px; }

  /* --- Bloques finales --- */
  .bloque { padding: 64px 0; }
  .bloque-cabeza { margin-bottom: 32px; }
  .bloque-cabeza h2 { font-size: clamp(40px, 10vw, 96px); }
  .bloque-cabeza p { padding: 16px 0 0; }
  .incluye { grid-template-columns: 1fr 1fr; }
  .incluye li, .incluye li:not(:nth-child(4n + 1)) { padding: 20px 18px 22px 0; border-left: 0; }
  .incluye li:nth-child(even) { padding-left: 18px; border-left: 1px dashed rgb(var(--ink-500)); }
  .estado-dos { gap: 18px; }
  .estado-col { padding: 24px; }
  .estado-col li { flex-wrap: wrap; }

  /* Planes: tabla con desplazamiento interno y primera columna fija */
  .planes { display: table; overflow: visible; min-width: 640px; }
  .planes-marco { overflow-x: auto; overscroll-behavior-x: contain; }
  .planes thead th .titular { font-size: 24px; }
  .planes th, .planes td { padding: 14px 12px; }
  .planes tbody th, .planes thead th:first-child { position: sticky; left: 0; background: rgb(var(--ink-900)); z-index: 1; padding-left: 0; }
  .planes-nota { flex-wrap: wrap; }

  .no-es h2 { font-size: clamp(44px, 12vw, 76px); margin-bottom: 28px; }
  .no-es li { font-size: 17px; }
}

@media (max-width: 480px) {
  :root { --borde: 16px; }
  .portada-rejilla { grid-template-columns: 1fr; }
  .portada-rejilla > .portada-pie { grid-column: 1 / -1 !important; padding-right: 0; }
  .portada-rejilla > .portada-tel { grid-column: 1 / -1 !important; grid-row: 5 !important; margin-top: 0; }
  .portada-banda h1 { font-size: clamp(42px, calc(16vw - 8.3px), 140px); }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-rejilla > div:first-child { grid-column: 1 / -1 !important; }
  .nav { column-gap: 20px; }

  .indice-lista { grid-template-columns: 1fr; }
  .indice-lista h3 { font-size: 32px; }

  .n02-cinta { grid-template-columns: 1fr; }
  .n02-cinta li, .n02-cinta li + li, .n02-cinta li:nth-child(even) { padding: 18px 0; border-left: 0; border-bottom: 1px dashed rgb(var(--ink-500)); }
  .n02-cinta li:last-child { border-bottom: 0; }
  /* En celular los teléfonos del spread conservan su diseño de 320 px y se escalan */
  .n02-col { width: 280px; }
  .n02-col .telefono { width: 320px; max-width: none; zoom: 0.875; }

  /* Panel de N°04 simplificado solo en celular: menú en fila y sin la columna Escenario (todo es Orión) */
  .n04-panel .panel-cuerpo { grid-template-columns: 1fr; min-height: 0; }
  .n04-panel .panel-menu { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px; border-right: 0; border-bottom: 1px solid rgb(var(--ink-600)); }
  .n04-panel .panel-menu span { padding: 5px 8px; font-size: 9.5px; }
  .n04-panel .panel-main { padding: 14px 12px; }
  .n04-panel .panel-tabla th:nth-child(3), .n04-panel .panel-tabla td:nth-child(3) { display: none; }
  .panel-tabla th, .panel-tabla td { padding-left: 6px; padding-right: 6px; }
  .panel-titulo b { font-size: 22px; }

  .pase { grid-template-columns: 1fr 52px; }
  .pase-cuerpo { padding: 22px; gap: 18px; }
  .pase-cuerpo .titular { font-size: 30px; }
  .pase-filas { gap: 12px 14px; align-items: start; }

  .incluye { grid-template-columns: 1fr; }
  .incluye li, .incluye li:not(:nth-child(4n + 1)), .incluye li:nth-child(even) { padding: 18px 0; border-left: 0; }
  .estado-col ul { grid-template-columns: 1fr; }
  .estado-col h3 { font-size: 30px; }
  .estado-col.luego li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .estado-col { padding: 20px; }

  .pantalla { border-width: 6px; }
  .pantalla-cabeza { padding: 12px 14px; flex-wrap: wrap; gap: 4px 12px; }
  .pantalla-cabeza .titular { font-size: 20px; }
  .pantalla-reloj { font-size: 24px; }
  .pantalla-filas { padding: 6px 14px; }
  .pantalla-fila { grid-template-columns: 48px 1fr auto; gap: 10px; font-size: 14px; padding: 9px 0; }
  .pantalla-fila .mono { font-size: 12px; }
  .ticker { padding: 10px 14px; font-size: 12px; }

  .objeto-entrada { grid-template-columns: 1fr; }
  .objeto-entrada .der { border-left: 0; border-top: 2px dashed rgb(var(--ink-400)); }
  .objeto-entrada .der::before { top: -9px; left: -8px; }
  .objeto-entrada .der::after { top: -9px; bottom: auto; left: auto; right: -8px; }
  .objeto-entrada .izq .titular { font-size: 28px; }
  .objeto-pulsera { flex-wrap: wrap; gap: 6px 14px; border-radius: 28px; }
  .objeto-pulsera .codigo-grande { font-size: 18px; }
  .m2-objetos { grid-template-columns: 1fr; }
  .m3-visual { grid-template-columns: 1fr; justify-items: center; }

  .registro { font-size: 13.5px; }
  .registro th, .registro td { padding-left: 6px; padding-right: 6px; }
  .registro td.mono { font-size: 11px; }
}

/* ===== Fotos de portada a sangre y degradado de marca (2026-10-06) =====
   En pantallas más anchas que el marco, las fotos de portada llegan al
   borde de la ventana. Las secciones oscuras llevan las dos luces del
   sitio actual (terracota arriba al centro, violeta arriba a la izquierda). */
@media (min-width: 961px) {
  :root { --sobra: max(0px, calc((100vw - var(--ancho)) / 2)); }
  .portada, .o-portada { overflow-x: clip; }
  .portada-foto {
    margin-left: calc((var(--borde) + var(--sobra)) * -1);
    margin-right: calc((var(--borde) + var(--sobra)) * -1);
  }
  .portada-banda {
    margin-left: calc((var(--borde) + var(--sobra)) * -1);
    padding-left: calc(var(--borde) + var(--sobra));
  }
  .o-portada-foto {
    margin-right: calc((var(--borde) + var(--sobra)) * -1);
    margin-top: -32px;
  }
}

.portada,
.o-portada,
.indice,
.n02,
.n04,
.momento:not(.papel),
.bloque:not(.papel),
.contra:not(.papel),
.pie-sitio {
  background:
    radial-gradient(80rem 40rem at 50% -14rem, rgb(var(--accent-rgb) / 0.16), transparent 70%),
    radial-gradient(50rem 30rem at 8% 4rem, rgb(var(--ink-600) / 0.9), transparent 65%),
    rgb(var(--ink-900));
}

/* ===== Muescas de ticket recortadas de verdad (2026-10-06) =====
   Antes eran círculos pintados del color del fondo; con el degradado se
   notaban. Ahora la pieza se recorta con una máscara y deja ver lo que
   haya detrás. */
.stub {
  -webkit-mask:
    radial-gradient(circle 7.5px at 49px 0, #0000 96%, #000 100%),
    radial-gradient(circle 7.5px at 49px 100%, #0000 96%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 7.5px at 49px 0, #0000 96%, #000 100%),
    radial-gradient(circle 7.5px at 49px 100%, #0000 96%, #000 100%);
  mask-composite: intersect;
}
.stub-edge::before, .stub-edge::after { display: none; }

.pase {
  -webkit-mask:
    radial-gradient(circle 8.5px at calc(100% - 65px) 0, #0000 96%, #000 100%),
    radial-gradient(circle 8.5px at calc(100% - 65px) 100%, #0000 96%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 8.5px at calc(100% - 65px) 0, #0000 96%, #000 100%),
    radial-gradient(circle 8.5px at calc(100% - 65px) 100%, #0000 96%, #000 100%);
  mask-composite: intersect;
}
.pase-talon::before, .pase-talon::after { display: none; }

.objeto-entrada {
  -webkit-mask:
    radial-gradient(circle 8.5px at calc(100% - 141px) 0, #0000 96%, #000 100%),
    radial-gradient(circle 8.5px at calc(100% - 141px) 100%, #0000 96%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 8.5px at calc(100% - 141px) 0, #0000 96%, #000 100%),
    radial-gradient(circle 8.5px at calc(100% - 141px) 100%, #0000 96%, #000 100%);
  mask-composite: intersect;
}
.objeto-entrada .der::before, .objeto-entrada .der::after { display: none; }
@media (max-width: 480px) {
  .pase {
    -webkit-mask:
      radial-gradient(circle 8.5px at calc(100% - 53px) 0, #0000 96%, #000 100%),
      radial-gradient(circle 8.5px at calc(100% - 53px) 100%, #0000 96%, #000 100%);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle 8.5px at calc(100% - 53px) 0, #0000 96%, #000 100%),
      radial-gradient(circle 8.5px at calc(100% - 53px) 100%, #0000 96%, #000 100%);
    mask-composite: intersect;
  }
  /* En celular la entrada se apila: vuelven las muescas pintadas. */
  .objeto-entrada { -webkit-mask: none; mask: none; }
  .objeto-entrada .der::before, .objeto-entrada .der::after { display: block; }
}

/* ===== Botones · propuesta A "Registro" (2026-10-06) =====
   Esquinas rectas. Al pasar el cursor aparece una plancha sólida corrida
   4 px (crema sobre tinta, tinta sobre papel); al presionar, el botón se
   asienta sobre ella. Un solo botón lleno (terracota); los secundarios son
   texto con subrayado terracota y flecha.
   Contraste: tinta sobre terracota 5.64:1. */
:root {
  --btn-curva: cubic-bezier(0.23, 1, 0.32, 1);
  --btn-plancha: rgb(var(--fog-100));
}
.papel { --btn-plancha: var(--tinta); }

.boton {
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  --a-sombra: 0px;
  --a-mov: 0px;
  box-shadow: var(--a-sombra) var(--a-sombra) 0 var(--btn-plancha);
  translate: var(--a-mov) var(--a-mov);
  transition: box-shadow 160ms var(--btn-curva), translate 120ms var(--btn-curva), background-color 120ms var(--btn-curva);
}
.boton:hover { transform: none; }
.boton-acento:hover { background: var(--accent); color: var(--accent-ink); }
.boton:focus-visible { outline: 3px solid var(--btn-plancha); outline-offset: 3px; }

/* Secundario: texto con subrayado terracota y flecha */
.boton-linea {
  min-height: 44px;
  padding: 0;
  gap: 10px;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgb(var(--fog-100));
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  --a-flecha: 0px;
  transition: text-underline-offset 160ms var(--btn-curva), text-decoration-thickness 160ms var(--btn-curva);
}
.boton-linea::after {
  content: "→";
  display: inline-block;
  color: var(--accent-text);
  translate: var(--a-flecha) 0;
  transition: translate 160ms var(--btn-curva);
}
.papel .boton-linea { color: var(--tinta); text-decoration-color: var(--acento-papel); }
.papel .boton-linea::after { color: var(--acento-papel); }
.boton-linea:hover,
.papel .boton-linea:hover { background: none; border-color: transparent; }
.boton-linea:hover { color: rgb(var(--fog-100)); }
.papel .boton-linea:hover { color: var(--tinta); }

/* Link al app en el encabezado: texto gris claro, como el resto del menú */
.nav .nav-app { color: rgb(var(--fog-300)); }

@media (hover: hover) and (pointer: fine) {
  .boton-acento:hover { --a-sombra: 4px; }
  .boton-linea:hover { text-decoration-thickness: 3px; text-underline-offset: 3px; --a-flecha: 6px; }
  .nav .nav-app:hover { color: rgb(var(--fog-100)); }
}
.boton-acento:active { --a-sombra: 0px; --a-mov: 4px; }
.boton-linea:active { text-underline-offset: 1px; --a-flecha: 2px; }

/* ===== Selector de idioma en la cabecera (2026-10-06) =====
   Usa los enlaces del menú (.nav a). Solo agrega separación y marca el idioma actual. */
.nav-idiomas { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; color: rgb(var(--fog-500)); }
.nav-idiomas a[aria-current="true"] { color: rgb(var(--fog-100)); }

/* ===== Arreglos de desborde horizontal entre 961 y 1440 px (2026-10-06) =====
   1. Spread de N°02: <figure> trae margen de navegador (1em 40px). Cada
      columna 1fr exige como mínimo 320 + 80 = 400 px, y tres columnas más
      los dos huecos suman 1280 px: más que el marco por debajo de 1440.
      El margen lateral se vuelve fluido (40 px a 1440, 0 px desde 1176) y
      entre 961 y 1151 los teléfonos se escalan igual que en celular.
   2. Cabecera: menú y botones nunca se parten en varias líneas. Entre 961
      y 1380 el menú va más compacto (letra 12 px, hueco 18 px) y, cuando
      aun así no cabe, los elementos enteros pasan a una segunda fila
      alineada a la derecha. A 1440 solo cambia el hueco del menú (28 a 24)
      para que "Cómo funciona" y "¿Vas a un festival?" quepan en una línea. */
@media (min-width: 961px) {
  .n02-col {
    margin-left: clamp(0px, calc((100vw - 1176px) / 6), 40px);
    margin-right: clamp(0px, calc((100vw - 1176px) / 6), 40px);
  }
  .boton, .nav a:not(.boton) { white-space: nowrap; }
  .nav { gap: 24px; }
}
@media (min-width: 1056px) and (max-width: 1151px) {
  .n02-col .telefono { zoom: 0.9; }
}
/* 3. Índice: las cuatro columnas no bajan del ancho de la palabra más larga
      de cada titular ("cincuenta", "preguntas" a 34 px) y entre 961 y 1040
      la suma supera el marco. Titular un poco más chico solo en ese rango. */
@media (min-width: 961px) and (max-width: 1040px) {
  .indice-lista h3 { font-size: 28px; }
}
/* 4. Cómo funciona: el timecode "DOM Cierre Página 06" (hora a 168 px) mide
      931 px y no entra en el marco por debajo de 1044. La hora baja de
      forma fluida hasta 144 px a 961. */
@media (min-width: 961px) and (max-width: 1043px) {
  .timecode .hora { font-size: clamp(144px, calc(27vw - 120px), 168px); }
}
@media (min-width: 961px) and (max-width: 1055px) {
  .n02-col .telefono { zoom: 0.8; }
}
@media (min-width: 961px) and (max-width: 1380px) {
  .nav { flex-wrap: wrap; justify-content: flex-end; column-gap: 18px; row-gap: 2px; }
  .nav a:not(.boton), .nav-idiomas { font-size: 12px; }
  .nav-idiomas { gap: 6px; }
}

/* Selector de idioma compacto al extremo derecho (2026-10-06): códigos
   cortos, más chicos y en gris; el idioma actual en claro. */
.nav .nav-idiomas { gap: 6px; margin-left: 4px; font-size: 11px; letter-spacing: 0.1em; color: rgb(var(--fog-500)); }
.nav .nav-idiomas a:not(.boton) { font-size: 11px; color: rgb(var(--fog-500)); border-bottom: 0; }
.nav .nav-idiomas a[aria-current="true"] { color: rgb(var(--fog-100)); }
@media (hover: hover) and (pointer: fine) {
  .nav .nav-idiomas a:not(.boton):hover { color: rgb(var(--fog-100)); }
}