/* La página de capítulo (The Last Witness) — definitiva desde 2026-08-14:
   la síntesis C del duelo A/B/C, consolidada por decisión de Txell.
   Muted earth tones, título serif con tracking, nada compite con la
   película. En escritorio (≥721px): tarjeta centrada y sobria (sin rojo),
   expediente en laterales alternos, carril de posición a la derecha,
   traspaso película→tarjeta y llegadas orquestadas. En móvil (≤720px):
   tarjetas ancladas abajo, sin traspaso ni carril. */

:root {
  --fondo: #0B0E12;
  --texto: #E8E3DA;
  --ambar: #D9A441;
  --granate: #7A2E2E;
  --tierra: rgba(214, 204, 188, 0.55);
  /* Mismo tono tierra con alpha plena: ≥4,5:1 sobre --fondo (AA para texto
     pequeño — los ganchos de los Dispatches y su lede) */
  --tierra-plena: rgba(214, 204, 188, 0.78);
  --borde-suave: rgba(214, 204, 188, 0.16);
  --panel: rgba(13, 17, 22, 0.72);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* Curva de entrada de la casa (skill animate): fuerte, nunca las nativas */
  --suave-salida: cubic-bezier(0.23, 1, 0.32, 1);

  /* Geometría de la tarjeta final del traspaso; las fija js/capitulo.js */
  --carta-w: 960px;
  --carta-h: 540px;
  --carta-cy: 52vh;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { overflow-x: hidden; }

a { color: var(--ambar); }

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

/* --- Pista de scrub y escenario ----------------------------------------- */

/* La altura real la fija js/capitulo.js en px para que la barra de URL móvil
   no re-mida la pista a cada gesto. Este valor es el fallback sin JS. */
.pista-scrub { position: relative; height: 700vh; }

.escenario {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--fondo);
}

/* --- Marco de la película (objetivo del morph del traspaso) --------------- */
.marco {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translate3d(0, 0, 0) scale(1);
  clip-path: inset(0px 0px round 0px);
  /* will-change lo pone/retira el JS solo mientras el morph está activo */
}

.pelicula {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* La película queda oculta hasta pintar su primer frame (evita el flash
   negro de iOS); el poster de debajo hace de fondo garantizado. */
#pelicula { opacity: 0; }
.escenario.con-pelicula #pelicula { opacity: 1; }
.escenario.con-pelicula .poster { opacity: 0; }

/* Miniatura del capítulo: opacidad conducida por el traspaso desde el JS.
   Se dimensiona a la VENTANA FINAL del clip (no al viewport) para que, al
   completarse el morph, llene la tarjeta 16:9 exactamente, sin recortes. */
.mini-carta {
  opacity: 0;
  z-index: 3;
  inset: auto;
  left: 50%;
  top: 50%;
  width: var(--mini-w, 100%);
  height: var(--mini-h, 100%);
  transform: translate(-50%, -50%);
}

/* Velo de legibilidad: viñeta sutil + degradado inferior */
.velo {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(11, 14, 18, 0.55) 100%),
    linear-gradient(180deg, rgba(11, 14, 18, 0.45) 0%, transparent 22%, transparent 70%, rgba(11, 14, 18, 0.55) 100%);
}

/* --- Sombra y filo de la tarjeta final del traspaso ------------------------ */
.sombra-carta,
.borde-carta {
  position: absolute;
  left: 50%;
  top: var(--carta-cy);
  width: var(--carta-w);
  height: var(--carta-h);
  transform: translate(-50%, -50%);
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
}
.sombra-carta {
  z-index: 1;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), 0 8px 26px rgba(0, 0, 0, 0.4);
}
.borde-carta {
  z-index: 5;
  border: 1px solid rgba(214, 204, 188, 0.22);
}

.progreso {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 8;
  background: rgba(217, 164, 65, 0.14);
}
.progreso span {
  display: block;
  height: 100%;
  background: var(--ambar);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.cabecera {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  padding: 26px clamp(18px, 4vw, 48px) 0;
  pointer-events: none;
}
.titulo-canal {
  position: absolute;
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(13px, 1.6vw, 16px);
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  color: rgba(232, 227, 218, 0.85);
}
.volver-atlas {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tierra);
  transition: color 0.25s ease;
}
.volver-atlas:hover { color: var(--ambar); }

.pista-texto {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 7;
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 227, 218, 0.55);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Señal de carga (escritorio): solo aparece si la película tarda */
.chip-carga {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  top: 92px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(232, 227, 218, 0.8);
  background: var(--panel);
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  opacity: 0;
  transform: translate3d(0, -4px, 0);
  transition: opacity 220ms var(--suave-salida), transform 220ms var(--suave-salida);
  pointer-events: none;
}
.chip-carga.visible { opacity: 1; transform: translate3d(0, 0, 0); }
.chip-aro {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 227, 218, 0.25);
  border-top-color: var(--ambar);
  animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* --- Beats --------------------------------------------------------------- */

.capa-beats {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.beat {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  /* --centrado lo pone cada variante; --deriva la anima el JS */
  transform: translate3d(0, calc(var(--centrado, 0px) + var(--deriva, 0px)), 0);
  will-change: opacity, transform;
}

.beat-eyebrow {
  display: block;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ambar);
}

.beat-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.18;
  letter-spacing: 0.02em;
}

.beat-texto {
  margin: 12px 0 0;
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  line-height: 1.6;
  color: rgba(232, 227, 218, 0.88);
}

/* Tarjetas laterales / centrales (todas menos el hero) */
.beat--tarjeta {
  width: min(30rem, 44vw);
  padding: clamp(18px, 2.2vw, 28px);
  background: var(--panel);
  border: 1px solid var(--borde-suave);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.beat--izquierda { left: clamp(20px, 6vw, 84px); top: 50%; --centrado: -50%; }
.beat--derecha   { right: clamp(20px, 6vw, 84px); top: 50%; --centrado: -50%; }
.beat--centro {
  left: 0; right: 0;
  margin-inline: auto;
  top: 54%;
  --centrado: -50%;
  text-align: center;
  border-left-color: var(--borde-suave);
}

/* El transform de .beat usa --centrado en px/%; translateY acepta % del alto
   del propio elemento, así que -50% centra verticalmente. */
.beat--izquierda, .beat--derecha, .beat--centro { --centrado: -50%; }

/* Hero: primer beat, presenta el capítulo */
.beat--hero {
  left: 0; right: 0;
  margin-inline: auto;
  top: 50%;
  --centrado: -50%;
  width: min(46rem, 88vw);
  text-align: center;
  text-shadow: 0 2px 26px rgba(11, 14, 18, 0.9);
}
.hero-fecha {
  display: block;
  margin: 0 0 18px;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ambar);
}
.hero-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 6.4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
}
.hero-subtitulo {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  color: rgba(232, 227, 218, 0.9);
}
.hero-lugar {
  margin: 18px 0 0;
  font-size: clamp(12px, 1.2vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tierra);
}
.hero-lede {
  margin: 26px auto 0;
  max-width: 38rem;
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  line-height: 1.65;
  color: rgba(232, 227, 218, 0.9);
}

/* --- Expediente del Corresponsal ------------------------------------------ */
/* Pruebas fotográficas por beat: copias impresas sobre la mesa, escalonadas.
   Con todas las tarjetas centradas (síntesis C), van al lateral discreto
   (.pruebas--lateral); en escritorio alternan de lado por beat (impar
   derecha, par izquierda) vía .pruebas--espejo. El despliegue lo conduce
   js/capitulo.js con el progreso local del beat. */

.pruebas {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
.pruebas--derecha   { right: clamp(20px, 6vw, 84px); top: 50%; transform: translateY(-50%); }
.pruebas--izquierda { left: clamp(20px, 6vw, 84px); top: 50%; transform: translateY(-50%); }
/* Tarjeta centrada (todas en C): lateral discreto, algo más pequeño */
.pruebas--lateral   { right: clamp(16px, 4vw, 64px); top: 52%; transform: translateY(-50%); }

.prueba {
  margin: 0;
  width: clamp(240px, 23vw, 320px);
  padding: clamp(6px, 0.7vw, 10px); /* marco de copia impresa */
  background: #10141A;
  border: 1px solid rgba(214, 204, 188, 0.25);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  /* Estado replegado; el JS anima hacia opacity 1 / translateY 0 / su ángulo */
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 24px, 0);
}
.pruebas--lateral .prueba { width: clamp(200px, 18vw, 250px); }

/* Escalonado del expediente: desplazamientos deterministas; el solape visual
   lo ponen las rotaciones (un margen negativo taparía pies de dos líneas) */
.prueba + .prueba { margin-top: 4px; }
.pruebas .prueba:nth-child(2) { margin-left: clamp(20px, 3vw, 48px); }
.pruebas .prueba:nth-child(3) { margin-left: clamp(8px, 1.4vw, 22px); }
.pruebas--izquierda .prueba:nth-child(1) { margin-left: clamp(12px, 2vw, 32px); }
.pruebas--izquierda .prueba:nth-child(2) { margin-left: 0; }

.prueba img {
  display: block;
  width: 100%;
  height: auto;
}

.prueba-pie {
  margin: 7px 2px 0;
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--tierra); /* gris cálido */
}

/* Modo lectura (prefers-reduced-motion): figuras normales intercaladas */
.lectura-figura {
  display: block;
  margin: 20px 0 36px;
  max-width: 436px;
  padding: 8px;
  background: #10141A;
  border: 1px solid rgba(214, 204, 188, 0.25);
}
.lectura-figura img { display: block; width: 100%; height: auto; }
.lectura-figura figcaption { margin: 8px 2px 0; font-size: 12px; line-height: 1.45; color: var(--tierra); }

/* --- Carril de posición (solo escritorio) ---------------------------------- */
/* Línea vertical a la derecha con un punto por beat: relleno ámbar con el
   progreso, punto activo ámbar, los pasados atenuados; clic = viajar. */
.rail {
  position: absolute;
  right: clamp(16px, 2.4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  height: min(38vh, 340px);
  width: 24px;
  z-index: 8;
}
.rail-linea {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(214, 204, 188, 0.18);
  border-radius: 1px;
  overflow: hidden;
}
#railRelleno {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ambar);
  transform-origin: 50% 0;
  transform: scaleY(0);
}
.rail-tic {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.rail-tic::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: rgba(232, 227, 218, 0.55);
  transition: transform 180ms var(--suave-salida), background-color 180ms var(--suave-salida);
}
.rail-tic.pasado::after { background: rgba(217, 164, 65, 0.45); }
.rail-tic.activo::after { background: var(--ambar); transform: scale(1.5); }
@media (hover: hover) and (pointer: fine) {
  .rail-tic:hover::after { transform: scale(1.7); background: var(--ambar); }
}
.rail-tic:active::after { transform: scale(1.2); }

/* --- Cartela del traspaso (solo escritorio) --------------------------------- */
/* Rótulos de la sección de vídeo que nacen alrededor de la tarjeta;
   opacidad y deriva las conduce js/capitulo.js por frame. */
.cartela { position: absolute; inset: 0; z-index: 7; pointer-events: none; }

.cartela-cabeza {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - var(--carta-cy) + (var(--carta-h) / 2) + 26px);
  text-align: center;
  opacity: 0;
}
.cartela-cabeza .titulo-seccion { margin: 0; }

.cartela-pie {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--carta-cy) + (var(--carta-h) / 2) + 18px);
  margin: 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--tierra);
  opacity: 0;
}

/* La insignia del traspaso nace apagada sobre el centro de la tarjeta
   (la de la sección de vídeo en flujo conserva el estado base de A) */
.cartela .insignia-play {
  top: var(--carta-cy);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
}
@media (prefers-reduced-transparency: reduce) {
  .cartela .insignia-play { background: rgba(11, 14, 18, 0.9); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Zona clicable de la tarjeta cuando el capítulo ya es público */
.zona-carta {
  position: absolute;
  left: 50%;
  top: var(--carta-cy);
  width: var(--carta-w);
  height: var(--carta-h);
  transform: translate(-50%, -50%);
  border-radius: 18px;
  z-index: 9;
  pointer-events: none;
}
.escenario.carta-lista .zona-carta { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .escenario.carta-lista .zona-carta:hover {
    box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.55);
  }
}

/* Feedback físico de la insignia sobre la tarjeta final. La zona clicable es
   un hermano posterior, de ahí el :has(); !important porque el transform de
   la insignia lo escribe el JS durante el morph. */
.escenario.carta-lista .insignia-play {
  transition: transform 200ms var(--suave-salida), background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .escenario.carta-lista:has(.zona-carta:hover) .insignia-play {
    transform: translate(-50%, -50%) scale(1.06) !important;
    background: rgba(11, 14, 18, 0.62);
  }
}
.escenario.carta-lista:has(.zona-carta:active) .insignia-play {
  transform: translate(-50%, -50%) scale(0.97) !important;
}

/* --- Contenido en flujo normal ------------------------------------------- */

.contenido {
  position: relative;
  z-index: 2;
  background: var(--fondo);
}

.seccion {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 110px) clamp(20px, 5vw, 48px);
}

.kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ambar);
}

.titulo-seccion {
  margin: 0 0 30px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: 0.02em;
}

/* Lectura sin animación (prefers-reduced-motion) */
.lectura-beats { padding-bottom: 0; }
.lectura-articulo { margin: 0 0 44px; max-width: 44rem; }
.lectura-articulo .beat-titulo { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

/* Sección del vídeo */
.marco-video { margin: 0; }

.placeholder-video {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--borde-suave);
  background: #12161C;
}
.placeholder-video img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  /* apagada hasta que el vídeo exista de verdad */
  filter: saturate(0.85) brightness(0.9);
}
.placeholder-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 14, 18, 0.55) 100%);
}
.insignia-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(58px, 8vw, 84px);
  height: clamp(58px, 8vw, 84px);
  border-radius: 50%;
  border: 1px solid rgba(232, 227, 218, 0.5);
  background: rgba(11, 14, 18, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1;
}
.insignia-play::after {
  content: "";
  position: absolute;
  left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent rgba(232, 227, 218, 0.9);
}

/* Cuando hay youtubeId el placeholder entero es un enlace */
a.enlace-video { display: block; text-decoration: none; }
a.enlace-video:hover .insignia-play { border-color: var(--ambar); }

.nota-video {
  margin: 14px 2px 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--tierra);
}

/* Bibliografía */
.seccion-biblio { border-top: 1px solid var(--borde-suave); }

/* Regla editorial bajo la cabecera de la bibliografía (solo escritorio;
   en móvil no existe para que la sección sea idéntica a A) */
.regla { display: none; }

.subtitulo-biblio {
  margin: 44px 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  letter-spacing: 0.03em;
  color: var(--texto);
}
.subtitulo-biblio:first-of-type { margin-top: 0; }

.lista-fuentes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista-fuentes li {
  padding: 14px 2px;
  border-bottom: 1px solid rgba(214, 204, 188, 0.09);
  line-height: 1.55;
}
.fuente-titulo { font-family: var(--serif); font-size: 1.05rem; }
.fuente-detalle { color: var(--tierra); font-size: 0.92rem; margin-top: 2px; }
.fuente-enlace { font-size: 0.85rem; letter-spacing: 0.04em; white-space: nowrap; }

.nota-tabla { margin: 0 0 18px; color: var(--tierra); font-size: 0.95rem; max-width: 46rem; }

/* La tabla scrollea en su propio contenedor, nunca la página */
.tabla-scroll {
  overflow-x: auto;
  border: 1px solid var(--borde-suave);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}
.tabla-referencias {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.tabla-referencias th, .tabla-referencias td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(214, 204, 188, 0.09);
}
.tabla-referencias tbody tr:last-child td { border-bottom: 0; }
.tabla-referencias th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tierra);
  background: rgba(214, 204, 188, 0.05);
}
.tabla-referencias td:first-child {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.82rem;
  white-space: nowrap;
  color: rgba(232, 227, 218, 0.92);
}
.tabla-referencias .celda-licencia { white-space: nowrap; color: var(--tierra); }

.transparencia {
  margin-top: 48px;
  padding: 22px 26px;
  border: 1px solid var(--borde-suave);
  background: rgba(214, 204, 188, 0.04);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(232, 227, 218, 0.85);
  max-width: 50rem;
}

/* Pie */
.pie {
  border-top: 1px solid var(--borde-suave);
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 48px);
  text-align: center;
}
.volver {
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ambar);
}
.volver:hover { text-decoration: underline; }
.pie-marca {
  margin: 26px 0 0;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  color: rgba(232, 227, 218, 0.4);
}

.aviso-noscript {
  margin: 0;
  padding: 16px;
  text-align: center;
  background: var(--granate);
  color: var(--texto);
}

/* --- Escritorio (≥721px): los injertos de la síntesis C -------------------- */

@media (min-width: 721px) {
  /* Un solo indicador por viewport: en escritorio manda el carril */
  .progreso { display: none; }

  /* La película se revela con el fundido corto de B (corrección del juez) */
  #pelicula { transition: opacity 320ms var(--suave-salida); }

  /* La tarjeta, sin rojo y más elegante: borde uniforme, radio 14px,
     más aire interior y un hairline sutil bajo el eyebrow */
  .beat--tarjeta {
    border: 1px solid var(--borde-suave);
    border-radius: 14px;
    padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 36px);
  }
  .beat--tarjeta .beat-eyebrow {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(214, 204, 188, 0.12);
  }
  .beat--tarjeta .beat-texto { margin-top: 14px; }

  /* Expediente lateral alternando de lado por beat (espejo = izquierda) */
  .pruebas--lateral.pruebas--espejo {
    right: auto;
    left: clamp(16px, 4vw, 64px);
  }
  .pruebas--espejo .prueba:nth-child(1) { margin-left: clamp(12px, 2vw, 32px); }
  .pruebas--espejo .prueba:nth-child(2) { margin-left: 0; }

  /* La regla editorial de la bibliografía existe solo en escritorio */
  .regla {
    display: block;
    height: 1px;
    margin: 0 0 44px;
    background: var(--borde-suave);
  }
}

/* En escritorio con animación, la tarjeta del traspaso ES la sección de
   vídeo: la estática de A desaparece (en móvil y modo lectura se queda). */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .js .seccion-video { display: none; }
}

/* --- Llegada orquestada de la bibliografía (escritorio, de B) --------------
   La cabecera sube, la regla se traza a scaleX y las fuentes llegan
   escalonadas (~55ms). Entradas siempre con el ease-out fuerte de la casa;
   una sola vez (IntersectionObserver pone .visto). Gateado a .js y a
   prefers-reduced-motion: no-preference; en móvil no existe (C = A). */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .js .revelar {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 600ms var(--suave-salida), transform 600ms var(--suave-salida);
  }
  .js .revelar.visto { opacity: 1; transform: translate3d(0, 0, 0); }

  .js .seccion-biblio .biblio-cabeza {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 700ms var(--suave-salida), transform 700ms var(--suave-salida);
  }
  .js .seccion-biblio .regla {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 800ms var(--suave-salida) 150ms;
  }
  .js .seccion-biblio .subtitulo-biblio,
  .js .seccion-biblio .nota-tabla {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 600ms var(--suave-salida) 250ms, transform 600ms var(--suave-salida) 250ms;
  }
  .js .seccion-biblio .fuente {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity 600ms var(--suave-salida) calc(300ms + var(--retardo, 0ms)),
      transform 600ms var(--suave-salida) calc(300ms + var(--retardo, 0ms));
  }
  .js .seccion-biblio.visto .biblio-cabeza,
  .js .seccion-biblio.visto .subtitulo-biblio,
  .js .seccion-biblio.visto .nota-tabla,
  .js .seccion-biblio.visto .fuente { opacity: 1; transform: translate3d(0, 0, 0); }
  .js .seccion-biblio.visto .regla { transform: scaleX(1); }
}

/* --- Móvil (≤720px): EXACTAMENTE el prototipo A ---------------------------- */

@media (max-width: 720px) {
  /* Nada de lo nuevo existe en móvil: ni carril, ni traspaso, ni señal de
     carga; la sección de vídeo y la bibliografía quedan tal cual A. */
  .rail, .cartela, .zona-carta, .sombra-carta, .borde-carta,
  .mini-carta, .chip-carga, .regla { display: none; }

  /* Cabecera en dos extremos: el título centrado en absoluto choca con el
     enlace al atlas en pantallas estrechas */
  .cabecera { justify-content: space-between; padding-top: 20px; }
  .titulo-canal {
    position: static;
    text-align: right;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-indent: 0;
  }

  /* Los beats se anclan abajo, a ancho completo, sobre el degradado del velo */
  .beat--tarjeta,
  .beat--izquierda, .beat--derecha, .beat--centro {
    left: clamp(14px, 4vw, 24px);
    right: clamp(14px, 4vw, 24px);
    top: auto;
    bottom: calc(clamp(56px, 12dvh, 110px) + env(safe-area-inset-bottom, 0px));
    --centrado: 0px;
    width: auto;
    max-width: 34rem;
    text-align: left;
    /* Válvula: anclada por abajo, una tarjeta más alta que la pantalla crece
       hacia ARRIBA y pierde la cabeza sin que el scroll pueda recuperarla
       (el scroll mueve la película, no la tarjeta). Con letra del sistema
       ampliada pasa incluso con textos legales. Si no cabe, se desplaza por
       dentro; si cabe — el caso normal — esto no cambia nada. */
    max-height: calc(100dvh - clamp(56px, 12dvh, 110px) - env(safe-area-inset-bottom, 0px) - 84px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* La capa es pointer-events:none para que el swipe mueva la película; la
       tarjeta lo reactiva para poder desplazarse por dentro. Cuando NO
       desborda, el gesto encadena a la página y el scrub no nota nada. */
    pointer-events: auto;
  }
  .beat--hero { width: min(92vw, 34rem); }
  /* Decisión de Txell (2026-08-07): la línea granate desaparece de las
     tarjetas en TODAS las variantes y viewports. */
  .pelicula { object-position: center 46%; }

  /* Expediente en móvil: máximo 2 pruebas, más pequeñas, en fila bajo la
     tarjeta (la tarjeta con pruebas sube para dejarles el sitio). */
  .pruebas,
  .pruebas--derecha, .pruebas--izquierda, .pruebas--lateral {
    left: clamp(14px, 4vw, 24px);
    right: clamp(14px, 4vw, 24px);
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
  }
  .prueba, .pruebas--lateral .prueba { width: min(180px, 44vw); padding: 6px; }
  .prueba + .prueba { margin-top: 0; }
  .pruebas .prueba:nth-child(2),
  .pruebas .prueba:nth-child(3),
  .pruebas--izquierda .prueba:nth-child(1) { margin-left: 0; }
  .pruebas .prueba:nth-child(3) { display: none; } /* máximo 2 en móvil */
  .prueba img { width: 100%; height: clamp(84px, 12dvh, 108px); object-fit: cover; }
  .prueba-pie { font-size: 10px; line-height: 1.35; }

  .beat--tarjeta.beat--con-pruebas,
  .beat--izquierda.beat--con-pruebas,
  .beat--derecha.beat--con-pruebas,
  .beat--centro.beat--con-pruebas {
    bottom: calc(clamp(158px, 26dvh, 220px) + env(safe-area-inset-bottom, 0px));
  }
  /* El hero mantiene su sitio, pero su foto no pisa el hint de scroll */
  .beat--hero.beat--con-pruebas .pruebas {
    bottom: calc(clamp(158px, 26dvh, 220px) + env(safe-area-inset-bottom, 0px));
  }
}

/* --- prefers-reduced-motion: sin scrub, lectura en flujo normal ----------- */

@media (prefers-reduced-motion: reduce) {
  .pista-scrub { height: auto !important; }
  .escenario { position: relative; height: 82vh; }
  .pista-texto, .progreso { display: none; }
  /* Sin traspaso ni carril: la sección de vídeo de A vive en el flujo */
  .rail, .cartela, .zona-carta, .sombra-carta, .borde-carta,
  .mini-carta, .chip-carga { display: none; }
  .chip-aro { animation: none; }
  /* El hero queda fijo sobre el poster; el resto de beats los vuelca el JS
     en #lecturaBeats como texto corrido. */
  .beat { opacity: 1 !important; visibility: visible !important; transform: translate3d(0, var(--centrado, 0px), 0) !important; }
  /* Las fotos del expediente van como figuras en la lectura (montarFigurasLectura);
     las pruebas del scrub no pintan nada aquí (cubre el cambio del ajuste en caliente). */
  .pruebas { display: none !important; }
}


/* ==========================================================================
   GALERÍA DE REFERENCIAS VISUALES — rejilla de tarjetas + lightbox.
   Sustituye a la tabla cuando el JSON trae miniatura+grande en todas las
   entradas (si no, js/capitulo.js degrada a la tabla clásica de arriba).
   ========================================================================== */

/* --- Rejilla: ~4 columnas en escritorio, 2 en móvil ------------------------ */
.rejilla-referencias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 22px);
}
@media (min-width: 721px)  { .rejilla-referencias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .rejilla-referencias { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ref-carta {
  display: flex;
  flex-direction: column;
  background: #10141A;
  border: 1px solid var(--borde-suave);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ref-carta:hover { border-color: rgba(214, 204, 188, 0.4); }
  .ref-carta:hover .ref-mini img { transform: scale(1.045); }
}

/* La miniatura entera es el botón que abre el lightbox */
.ref-boton {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
/* El outline global (offset 3px) moriría bajo el overflow:hidden de la tarjeta */
.ref-boton:focus-visible { outline-offset: -3px; }

.ref-mini {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #12161C;
}
.ref-mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms var(--suave-salida);
}

.ref-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 12px 14px 14px;
}
.ref-titulo {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(232, 227, 218, 0.92);
  /* Tarjetas parejas: el texto completo vive en el lightbox */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ref-meta {
  margin: auto 0 0; /* pegada abajo: las metas de la fila quedan alineadas */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.chip-licencia {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 3px 8px;
  border: 1px solid rgba(214, 204, 188, 0.28);
  border-radius: 999px;
  color: var(--tierra);
}
.ref-fuente { font-size: 0.78rem; letter-spacing: 0.03em; }

/* Llegada orquestada de la rejilla: mismo patrón (IO + stagger) que las
   fuentes de la bibliografía; solo escritorio con animación, como lo demás. */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .js .rejilla-referencias .ref-carta {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity 600ms var(--suave-salida) var(--retardo, 0ms),
      transform 600ms var(--suave-salida) var(--retardo, 0ms),
      border-color 0.25s ease;
  }
  .js .rejilla-referencias.visto .ref-carta { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --- Lightbox ---------------------------------------------------------------- */

/* Bloqueo del scroll de fondo mientras el lightbox está abierto */
html.sin-scroll, html.sin-scroll body { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vh, 32px) clamp(64px, 8vw, 104px);
  opacity: 0;
  transition: opacity 240ms var(--suave-salida);
}
.lightbox.abierto { opacity: 1; }

.lightbox-velo {
  position: absolute;
  inset: 0;
  background: rgba(7, 9, 12, 0.93);
  cursor: pointer;
}

.lightbox-cuerpo {
  position: relative;
  margin: 0;
  max-width: min(1200px, 100%);
  text-align: center;
  transform: scale(0.985);
  transition: transform 300ms var(--suave-salida);
}
.lightbox.abierto .lightbox-cuerpo { transform: none; }

/* El lienzo gestiona el swipe con pointer events; con el fondo bloqueado el
   gesto es nuestro entero (sin pan del navegador). */
.lightbox-lienzo {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#lightboxImg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  max-height: calc(100dvh - 220px);
  border: 1px solid rgba(214, 204, 188, 0.2);
  border-radius: 10px;
  background: #12161C;
  -webkit-user-drag: none;
  /* Transición de paso: fundido + desliz corto ease-out (la arma el JS) */
  transition: opacity 240ms var(--suave-salida), transform 240ms var(--suave-salida);
}
#lightboxImg.sin-transicion { transition: none; }

.lightbox-pie { margin: 14px auto 0; max-width: 56rem; }
.lightbox-doc {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.5;
  color: var(--texto);
}
.lightbox-meta {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.lightbox-credito { color: var(--tierra); font-size: 0.8rem; letter-spacing: 0.02em; }
.lightbox-fuente { letter-spacing: 0.03em; white-space: nowrap; }
/* Línea fija de doctrina del canal */
.lightbox-doctrina {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: rgba(214, 204, 188, 0.6);
}

.lightbox-contador {
  position: absolute;
  top: 20px;
  left: 22px;
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--tierra);
}

.lightbox-cerrar,
.lightbox-flecha {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(214, 204, 188, 0.3);
  border-radius: 50%;
  background: rgba(13, 17, 22, 0.72);
  color: rgba(232, 227, 218, 0.85);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lightbox-cerrar:hover,
  .lightbox-flecha:hover { color: var(--ambar); border-color: rgba(217, 164, 65, 0.6); }
}
.lightbox-cerrar:active, .lightbox-flecha:active { transform: scale(0.94); }
.lightbox-cerrar { top: 14px; right: 16px; font-size: 24px; }
.lightbox-flecha { top: 50%; margin-top: -22px; }
.lightbox-flecha--prev { left: 16px; }
.lightbox-flecha--next { right: 16px; }

/* Lightbox en móvil: gutters mínimos, flechas más discretas (manda el swipe) */
@media (max-width: 720px) {
  .lightbox { padding: 64px 14px 16px; }
  .lightbox-flecha { width: 40px; height: 40px; margin-top: -20px; }
  .lightbox-flecha--prev { left: 8px; }
  .lightbox-flecha--next { right: 8px; }
  #lightboxImg {
    max-height: calc(100vh - 260px);
    max-height: calc(100dvh - 260px);
  }
  .lightbox-doc { font-size: 0.9rem; }
}

/* Modo lectura: la galería es rejilla estática clicable; el lightbox abre,
   navega y cierra sin transiciones (cambios instantáneos). */
@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-cuerpo,
  #lightboxImg,
  .ref-mini img { transition: none !important; }
}

/* --- Botón "Show all" de la galería de referencias ------------------------ */
.ver-todas {
  display: block;
  margin: 26px auto 0;
  padding: 10px 22px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tierra);
  background: transparent;
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .ver-todas:hover { color: var(--texto); border-color: rgba(214, 204, 188, 0.45); }
}
.ver-todas:active { transform: scale(0.97); }

/* ==========================================================================
   DISPATCHES — los Shorts como piezas satélite del capítulo.
   Tira horizontal de tarjetas 9:16 en orden cronológico; una sola
   implementación para escritorio, móvil y modo lectura. Todo nace apagado
   (coming-soon sin cartel) y cada tarjeta se enciende con su youtubeId.
   ========================================================================== */

.seccion-shorts { border-top: 1px solid var(--borde-suave); }

.shorts-lede {
  margin: 0 0 30px;
  max-width: 46rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tierra-plena);
}

/* --- La tira: scroller horizontal con snap suave --------------------------- */
.tira-envoltura { position: relative; }

.tira-shorts {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* aire para que el anillo de foco de las tarjetas no muera en el recorte */
  padding: 6px 4px 10px;
}
.tira-shorts::-webkit-scrollbar { display: none; }
/* Fundido en los flancos: solo hacia donde HAY contenido oculto (las clases
   al-inicio/al-final las pone el JS con la posición del scroll — en reposo
   la primera tarjeta no se atenúa) y solo cuando el foco de teclado no está
   dentro (el anillo de foco no se apaga a medias en los bordes). */
.tira-shorts { --fundido: 18px; }
.tira-shorts:not(:focus-within):not(.al-inicio):not(.al-final) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fundido), #000 calc(100% - var(--fundido)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fundido), #000 calc(100% - var(--fundido)), transparent 100%);
}
.tira-shorts:not(:focus-within).al-inicio:not(.al-final) {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--fundido)), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--fundido)), transparent 100%);
}
.tira-shorts:not(:focus-within).al-final:not(.al-inicio) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fundido), #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fundido), #000 100%);
}

.lista-shorts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
}

/* --- Tarjeta ---------------------------------------------------------------- */
.short-carta {
  flex: 0 0 auto;
  /* 190px con el contenido de sección a 62rem: 4 tarjetas completas y la
     quinta asomando ~36% — el peek debe quedar entre 0,3 y 0,7 (regla de QA;
     a 208px la quinta asomaba un 4% y la tira parecía completa) */
  width: clamp(176px, 20vw, 190px);
  scroll-snap-align: start;
}

.short-cuerpo { display: block; color: inherit; text-decoration: none; }

.short-pin {
  display: block;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambar);
}

.short-figura {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--borde-suave);
  border-radius: 10px;
  background: #12161C;
}
.short-figura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Apagada (coming-soon) por defecto; .publicado la enciende */
  filter: saturate(0.7) brightness(0.82);
  transition: filter 250ms ease;
}
.short-carta.publicado .short-figura img { filter: none; }

/* Respaldo tipográfico: vive DEBAJO del póster; si el JPEG falla (404), el
   JS oculta la imagen y la tarjeta sobrevive sobre su texto. */
.short-respaldo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
}
.short-respaldo .respaldo-anclaje {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ambar);
}
.short-figura.sin-poster img { visibility: hidden; }

.short-duracion {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 6px;
  color: rgba(232, 227, 218, 0.9);
  background: rgba(11, 14, 18, 0.62);
}

/* Insignia de play pequeña: SOLO en tarjetas publicadas */
.short-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(232, 227, 218, 0.5);
  background: rgba(11, 14, 18, 0.55);
  opacity: 0.85;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.short-play::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent rgba(232, 227, 218, 0.9);
}

.short-titulo {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--texto);
}
.short-gancho {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tierra-plena);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* Estreno programado: la razón por la que la tarjeta aún no enlaza */
.short-estreno {
  margin: 7px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
}

/* Hover solo en tarjetas vivas (publicadas), solo con puntero fino */
@media (hover: hover) and (pointer: fine) {
  .short-carta.publicado .short-figura:hover,
  a.short-cuerpo:hover .short-figura {
    border-color: rgba(217, 164, 65, 0.35);
  }
  a.short-cuerpo:hover .short-figura img { filter: brightness(1.06); }
  a.short-cuerpo:hover .short-play { opacity: 0.95; border-color: var(--ambar); }
}

/* --- Flechas (solo punteros con hover; en táctil manda el swipe) ----------- */
.tira-flecha {
  position: absolute;
  top: 38%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(214, 204, 188, 0.3);
  border-radius: 50%;
  background: rgba(13, 17, 22, 0.82);
  color: rgba(232, 227, 218, 0.85);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.tira-flecha--atras { left: -14px; }
.tira-flecha--adelante { right: -14px; }
.tira-flecha:disabled { opacity: 0.25; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .tira-flecha:not(:disabled):hover { color: var(--ambar); border-color: rgba(217, 164, 65, 0.6); }
}
@media (hover: none) {
  .tira-flecha { display: none !important; }
}

/* --- Pie de sección: la puerta al canal, siempre viva ----------------------- */
.nota-shorts {
  margin: 18px 2px 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--tierra);
}
.nota-shorts a { white-space: nowrap; }

/* --- Ancla de descubrimiento en la cartela del traspaso (escritorio) -------- */
.cartela-shorts {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--carta-cy) + (var(--carta-h) / 2) + 52px);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tierra);
  opacity: 0;
  pointer-events: none;
  transition: color 0.2s ease;
}
.escenario.carta-lista .cartela-shorts { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .escenario.carta-lista .cartela-shorts:hover { color: var(--ambar); }
}

/* --- Llegada orquestada (escritorio animado, patrón de la bibliografía) ----- */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .js .seccion-shorts .shorts-cabeza,
  .js .seccion-shorts .shorts-lede {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 700ms var(--suave-salida), transform 700ms var(--suave-salida);
  }
  .js .seccion-shorts .regla {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 800ms var(--suave-salida) 150ms;
  }
  .js .seccion-shorts .short-carta {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity 600ms var(--suave-salida) calc(300ms + var(--retardo, 0ms)),
      transform 600ms var(--suave-salida) calc(300ms + var(--retardo, 0ms));
  }
  .js .seccion-shorts .nota-shorts {
    opacity: 0;
    transition: opacity 600ms var(--suave-salida) 650ms;
  }
  .js .seccion-shorts.visto .shorts-cabeza,
  .js .seccion-shorts.visto .shorts-lede,
  .js .seccion-shorts.visto .short-carta { opacity: 1; transform: translate3d(0, 0, 0); }
  .js .seccion-shorts.visto .regla { transform: scaleX(1); }
  .js .seccion-shorts.visto .nota-shorts { opacity: 1; }
}

/* --- Móvil (≤720px): sección de flujo normal, swipe nativo ------------------ */
@media (max-width: 720px) {
  /* 52vw: en un 375 la segunda tarjeta asoma ~2/3 — misma regla del peek */
  .short-carta { width: clamp(170px, 52vw, 200px); }
  /* Fundido más corto en pantallas estrechas (mismas clases de estado) */
  .tira-shorts { --fundido: 14px; }
  /* La regla de la cabecera no existe en móvil (regla general de la casa)
     y la cartela-shorts tampoco (vive en la cartela, ya oculta). */
}