/* =========================================================================
   7dias.uy — Home
   ========================================================================= */

:root {
  /* Fondos: negro que se va entibiando en las escenas de memoria */
  --bg-black:   #000000;
  --bg-deep:    #070707;
  --bg-coal:    #0B0B0B;
  --bg-warm:    #12100A;

  /* Tinta */
  --ink:        #F4F3EF;
  --ink-dim:    #9A9892;
  --ink-faint:  #3A3936;

  /* Acentos */
  --amarillo:   #FFCA1C;   /* secuestrados */
  --naranja:    #FF6A1A;   /* Bibas / Nova */

  --bg: var(--bg-black);

  /* El fondo de la sección en la que se está. Lo cambia cada tema. */
  --fondo: #000000;

  --gutter: clamp(16px, 4vw, 56px);
  --rule: 1px solid rgba(244, 243, 239, 0.12);

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Texto corrido: el mismo tamaño en todo el sitio.
     18 px en celular, hasta ~22 px en pantallas grandes. */
  --texto: clamp(1.125rem, 1.55vw, 1.4rem);
  --texto-alto: 1.6;
  --entre-parrafos: calc(var(--texto) * 0.9);   /* aire entre párrafos de un mismo bloque */
  --texto-color: #cfcdc7;

  /* La separación entre partes: una sola medida para todo el sitio.
     Entre bloques de una sección, entre secciones y alrededor de la tira.
     No inventar otras: usar esta (o su mitad a cada lado de un bloque). */
  --separacion: clamp(96px, calc(var(--pantalla) * 0.16), 180px);

  /* El alto de la pantalla, FIJO. comun.js lo mide al entrar y no lo toca
     cuando aparece o desaparece la barra del navegador. En Brave o Chrome
     de iPhone esa barra achica la ventana de verdad, y si las alturas
     dependieran de vh/svh la página entera cambiaría de alto y saltaría al
     empezar a subir. Todas las alturas que ocupan lugar usan esta medida. */
  --pantalla: 100svh;
}

/* En celular, una separación fija y más chica, igual para todo */
@media (max-width: 860px) {
  :root {
    --separacion: 80px;
    /* Margen extra de los textos en celular (sobre el general de 16 px):
       todos los textos de la home arrancan a 34 px del borde. Lo visual
       (fotos, videos, tira, cards, caras) mantiene el margen general. */
    --margen-texto: 18px;
  }

  .relato-bloque__texto,
  #contexto .contexto-intro,
  #porque,
  #cierre { padding-inline: calc(var(--gutter) + var(--margen-texto)); }
  .relato-bloque__texto { padding-inline: var(--margen-texto); }

  /* En celular todos los textos van a la izquierda */
  #contexto .contexto-intro { text-align: left; justify-items: start; place-content: start; }
  /* La pregunta corre de corrido, ocupando todo el ancho (sin el tope de
     20 caracteres por línea de la computadora) y un poco más chica que los
     otros títulos: con el tamaño de siempre quedaba cortada palabra por
     palabra ("7 PREGUNTAS / PARA / ENTENDER /…") */
  #contexto .contexto-pregunta { max-width: none; font-size: clamp(1.5rem, 6.6vw, 1.9rem); }
  #que-paso .relato-bloque--cierre { justify-items: start; text-align: left; }

  /* Fotos y cards con el mismo margen que los textos (la tira y el mosaico
     de caras son los únicos que van más anchos) */
  #que-paso .relato-foto { margin-inline: var(--margen-texto); }
  .dos-vidas,
  .vuelta { padding-inline: var(--margen-texto); }
}

/* ---------- Temas por sección ----------
   Cada sección de la home lleva data-tema y con eso cambia su fondo y
   toda su tinta. En amarillo y papel los destacados (--amarillo) pasan a
   un tono que se lea sobre fondo claro. La barra de arriba y el recorrido
   copian el tema de la sección que tienen debajo (ver temasFijos en JS). */

[data-tema='negro'] { --fondo: #000000; }

[data-tema='grafito'] {
  --fondo: #1D1C1A;
  --ink-faint: #4B4945;
}

/* El amarillo de la marca, el de 7dias, con tinta negra */
[data-tema='amarillo'] {
  --fondo: #FFCA1C;
  --ink: #0B0B0B;
  --ink-dim: #4A3D0C;
  --ink-faint: rgba(11, 11, 11, 0.32);
  --texto-color: #1D1904;
  --amarillo: #0B0B0B;
  --naranja: #0B0B0B;
  --rule: 1px solid rgba(11, 11, 11, 0.2);
}

[data-tema='papel'] {
  --fondo: #ECE9E2;
  --ink: #111111;
  --ink-dim: #5D5A52;
  --ink-faint: #B4B0A6;
  --texto-color: #2C2A25;
  --amarillo: #B37700;
  --naranja: #B34A00;
  --rule: 1px solid rgba(17, 17, 17, 0.14);
}

main > section[data-tema] {
  background-color: var(--fondo);
  color: var(--ink);
}

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

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 900ms var(--ease);
}

body.is-loading { overflow: hidden; }

/* Nada puede asomar de costado. En iPhone, si la página queda más ancha que
   la pantalla (aunque sea un momento, por algo que entra deslizándose), se
   puede arrastrar de costado y Safari reacomoda la vista a los saltos.
   «clip» y no «hidden»: recorta sin crear una caja con scroll propio, así
   las escenas fijas (sticky) siguen funcionando. */
main { overflow-x: clip; }

/* Texto seleccionado: amarillo con letra negra; en la sección amarilla, al
   revés. Con colores fijos, no con --amarillo, porque en esa sección el
   token pasa a negro y la selección quedaba negro sobre negro. */
::selection { background: #FFCA1C; color: #0B0B0B; }
[data-tema='amarillo'] ::selection,
[data-tema='amarillo']::selection { background: #0B0B0B; color: #FFCA1C; }
/* La tarjeta negra dentro de la sección amarilla vuelve a lo normal */
[data-tema='amarillo'] .caso ::selection { background: #FFCA1C; color: #0B0B0B; }

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

/* ---------- Tipografía base ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.02em;
  margin: 0;
}

.display--xl  { font-size: clamp(3.4rem, 18vw, 17rem); }
.display--l   { font-size: clamp(2.4rem, 7.2vw, 6.6rem); line-height: 0.9; }
.display--m   { font-size: clamp(1.9rem, 5.2vw, 4.4rem); line-height: 0.95; }

.lede {
  font-size: clamp(1.25rem, 2.9vw, 2.35rem);
  line-height: 1.32;
  font-weight: 300;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 22ch;
}

.body-text {
  font-size: var(--texto);
  line-height: var(--texto-alto);
  color: var(--texto-color);
  max-width: 54ch;
  margin: 0;
}

.meta {
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 0.78vw, 0.73rem);
  font-weight: 500;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  margin: 0;
}

.acento { color: var(--amarillo); }
.acento--naranja { color: var(--naranja); }

/* =========================================================================
   Transición entre páginas
   Al ir de la home a una mirada (o de una mirada a otra), la página nueva
   sube como una cortina desde abajo y tapa a la anterior, que se oscurece
   y se corre un poco hacia arriba. La barra de arriba no se mueve: tiene
   nombre propio (view-transition-name) y queda fija entre las dos.
   Es la API nativa de View Transitions entre documentos (Chrome, Edge,
   Safari 18.2+, también en iPhone). Donde no existe, comun.js hace una
   salida suave con un fundido.
   ========================================================================= */

@view-transition { navigation: auto; }

.topbar { view-transition-name: barra; }

::view-transition-group(root) { animation-duration: 640ms; }

::view-transition-old(root) {
  animation: pagina-se-va 640ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

::view-transition-new(root) {
  animation: pagina-llega 640ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

/* Sólo opacidad, desplazamiento y recorte: son las propiedades que el
   navegador anima sin trabarse (un filtro sobre toda la pantalla, no) */
@keyframes pagina-se-va {
  to { translate: 0 -5vh; opacity: 0.2; }
}

@keyframes pagina-llega {
  from { clip-path: inset(100% 0 0 0); translate: 0 4vh; }
  to   { clip-path: inset(0 0 0 0);    translate: 0 0; }
}

/* La barra pasa de una página a la otra sin saltos */
::view-transition-group(barra) { animation-duration: 640ms; }
::view-transition-old(barra),
::view-transition-new(barra) { animation-duration: 640ms; }

/* Respaldo sin View Transitions: la página se funde antes de irse */
html.saliendo body {
  opacity: 0;
  translate: 0 -2vh;
  transition: opacity 320ms ease, translate 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .menu, .topbar--abierta .menu, .menu .dia, .topbar--abierta .menu .dia { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  html.saliendo body { transition: none; }
}

/* =========================================================================
   La barra de arriba: marca + calendario de las siete miradas
   Siempre negra y siempre a la vista, en todas las páginas. La marca se
   alinea con el margen de la home (incluida la reserva del recorrido en
   pantallas anchas) y el calendario, con el margen derecho.
   ========================================================================= */

:root { --barra: 64px; }   /* alto de la barra en escritorio */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--barra);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding: 0 var(--gutter);
  background: #0B0B0B;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  color: var(--ink);
  flex: none;
}

/* «Día 3 de 7 · Próxima en 14:32:08» */
.topbar__cuenta {
  margin: 0 0 0 auto;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.topbar__cuenta b { font-weight: 500; color: var(--ink); }

/* ---------- El calendario: siete casillas ---------- */

.menu {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;   /* cada casilla mide lo que su nombre */
  gap: 6px;
}

.dia {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 7px 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  min-width: clamp(76px, 6.4vw, 100px);
  font-family: var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.dia__fecha {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.dia__nombre {
  font-size: clamp(0.66rem, 0.8vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El candado de las que faltan: un círculo gris chico arriba a la derecha */
.dia__candado {
  position: absolute;
  top: 7px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
}
.dia__candado svg { width: 9px; height: 9px; }

/* La de hoy: una etiqueta amarilla "Nuevo" en el lugar de la fecha */
.dia__nuevo {
  margin: -2px 0 -1px -1px;
  padding: 2px 6px 1px 7px;
  border-radius: 99px;
  background: var(--amarillo);
  color: #0B0B0B;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

/* Abiertas: enlaces */
a.dia:hover,
a.dia:focus-visible { border-color: var(--amarillo); }

/* Hoy: igual que las demás, sólo con la etiqueta "Nuevo", que late
   suave para que el ojo la encuentre */
@media (prefers-reduced-motion: no-preference) {
  .dia__nuevo { animation: dia-pulso 1.8s var(--ease) 0.6s infinite; }
}
@keyframes dia-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(255, 202, 28, 0.55); }
  100% { box-shadow: 0 0 0 7px rgba(255, 202, 28, 0); }
}

/* Las que faltan: sólo la fecha, apagadas */
.dia--cerrado {
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.36);
  cursor: default;
}
.dia--cerrado .dia__fecha { color: rgba(255, 255, 255, 0.62); }
.dia--cerrado:hover,
.dia--cerrado:focus-visible { border-color: rgba(255, 255, 255, 0.24); }

/* La página en la que estamos */
.dia--actual { border-color: var(--amarillo); }
.dia--actual .dia__nombre { color: var(--amarillo); }

/* El globo con el claim: aparece al pasar por encima o con el teclado */
.dia__globo {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% -4px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #F3EEE3;
  color: #0B0B0B;
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease), translate 180ms var(--ease);
}
.dia:nth-child(n + 6) .dia__globo { left: auto; right: 0; translate: 0 -4px; }
.dia:hover .dia__globo,
.dia:focus-visible .dia__globo { opacity: 1; translate: -50% 0; }
.dia:nth-child(n + 6):hover .dia__globo,
.dia:nth-child(n + 6):focus-visible .dia__globo { translate: 0 0; }

/* ---------- El botón del celular: la hamburguesa ----------
   Tres líneas que se vuelven una X al abrir, y un punto amarillo que late
   para invitar a abrirla. */

.menu__boton {
  position: relative;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: -10px;   /* el ícono queda alineado con el margen */
  padding: 0;
  appearance: none;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

.menu__hamburguesa { display: grid; gap: 5px; width: 24px; }
.menu__hamburguesa i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: translate 300ms var(--ease), rotate 300ms var(--ease), opacity 200ms;
}
.topbar--abierta .menu__hamburguesa i:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.topbar--abierta .menu__hamburguesa i:nth-child(2) { opacity: 0; }
.topbar--abierta .menu__hamburguesa i:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

.menu__aviso {
  position: absolute;
  top: 9px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amarillo);
}
.topbar--abierta .menu__aviso { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .menu__aviso::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--amarillo);
    animation: aviso-late 2s var(--ease) infinite;
  }
}
@keyframes aviso-late {
  from { scale: 1;   opacity: 0.8; }
  to   { scale: 2.6; opacity: 0; }
}

@media (min-width: 1200px) {
  .pagina-home .topbar { padding-inline: var(--margen-home); }
}

/* En la home la barra espera a que termine la apertura: aparece al llegar
   a "Qué pasó" (main.js pone .topbar--visible). En los ejes está siempre. */
.pagina-home .topbar {
  opacity: 0;
  translate: 0 -100%;
  pointer-events: none;
  transition: opacity 450ms var(--ease), translate 450ms var(--ease);
}
.pagina-home .topbar.topbar--visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
/* En los ejes, la barra usa el mismo margen que la página, a los dos lados */
.pagina-eje .topbar { padding-inline: var(--margen-eje, var(--gutter)); }

/* Pantallas medianas: el calendario manda, la cuenta se va */
@media (max-width: 1180px) {
  .topbar__cuenta { display: none; }
  .menu { margin-left: auto; }
}

/* Celular: el calendario se pliega detrás del botón */
@media (max-width: 860px) {
  :root { --barra: 56px; }

  .menu__boton { display: grid; }

  /* En la home, la marca y la hamburguesa con el mismo margen que los
     textos y las fotos (34 px), como en las páginas de eje */
  .pagina-home .topbar { padding-inline: calc(var(--gutter) + var(--margen-texto)); }

  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 6px;
    margin: 0;
    padding: 12px var(--gutter) 18px;
    background: #0B0B0B;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* Abrir y cerrar: el panel baja como una persiana, y las filas entran
     una tras otra. Al cerrar, todo se va junto y más rápido. */
  .menu {
    display: grid;
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    transition:
      clip-path 320ms var(--ease),
      opacity 220ms ease,
      visibility 0s linear 320ms;
  }
  .topbar--abierta .menu {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
    transition:
      clip-path 480ms var(--ease),
      opacity 200ms ease,
      visibility 0s;
  }
  .menu .dia {
    opacity: 0;
    translate: 0 -8px;
    transition: opacity 160ms ease, translate 160ms ease, border-color 200ms, background-color 200ms;
  }
  .topbar--abierta .menu .dia {
    opacity: 1;
    translate: 0 0;
    transition: opacity 380ms var(--ease), translate 420ms var(--ease), border-color 200ms, background-color 200ms;
  }
  .topbar--abierta .dia:nth-child(1) { transition-delay: 95ms; }
  .topbar--abierta .dia:nth-child(2) { transition-delay: 130ms; }
  .topbar--abierta .dia:nth-child(3) { transition-delay: 165ms; }
  .topbar--abierta .dia:nth-child(4) { transition-delay: 200ms; }
  .topbar--abierta .dia:nth-child(5) { transition-delay: 235ms; }
  .topbar--abierta .dia:nth-child(6) { transition-delay: 270ms; }
  .topbar--abierta .dia:nth-child(7) { transition-delay: 305ms; }

  /* Cada casilla pasa a ser una fila: fecha · nombre */
  .dia {
    grid-template-columns: 64px 1fr auto;
    align-items: baseline;
    column-gap: 14px;
    padding: 12px 14px;
  }
  .dia__nombre { font-size: 0.95rem; }
  .dia__fecha { color: rgba(255, 255, 255, 0.55); }
  .dia__candado { position: static; align-self: center; }
  .dia__globo { display: none; }   /* en celular, sólo fecha y nombre */
}

/* =========================================================================
   Escenas
   ========================================================================= */

.escena {
  /* Cada sección mide lo que mide su contenido; entre sección y sección,
     la separación de siempre. Sólo la apertura ocupa la pantalla entera. */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--separacion) var(--gutter);
}

/* ---------- 01 · Apertura 6:29 ---------- */

#apertura {
  min-height: var(--pantalla);
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* ----- El amanecer ----- */

/* Los filtros de cada fase viajan por variables desde #apertura */
.amanecer {
  filter: var(--f-fondo, none);
  transition: filter var(--dur-f, 1300ms) var(--ease), opacity 700ms linear;
}

/* El fondo arranca con la foto del amanecer (el primer fotograma del
   video) puesta desde el CSS. No depende del JavaScript ni de que el
   navegador acepte bajar el video: iOS en ahorro de energía no lo baja. */
.amanecer {
  position: absolute;
  inset: 0;
  background: #000 url('../video/amanecer-poster.jpg') center / cover no-repeat;
}

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

/* Cuando iOS no deja reproducir solo (modo ahorro de energía, Brave),
   dibuja su botón de play encima. Es un fondo: no lo queremos. Si no
   arranca, queda el póster, que es el primer fotograma. */
.amanecer__video::-webkit-media-controls,
.amanecer__video::-webkit-media-controls-start-playback-button,
.amanecer__video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* El degradé dibujado es sólo un respaldo: se ve únicamente si el
   archivo de video no existe (data-video="no", lo marca main.js) */
.amanecer__cielo,
.amanecer__sol { opacity: 0; }

#apertura[data-video='no'] .amanecer { background-image: none; }
#apertura[data-video='no'] .amanecer__video { display: none; }
#apertura[data-video='no'] .amanecer__cielo,
#apertura[data-video='no'] .amanecer__sol { opacity: 1; }

.amanecer__cielo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #050d1f  0%,
    #0c1a36 16%,
    #27294a 33%,
    #5c3e51 51%,
    #a55a3f 69%,
    #dc8f42 85%,
    #f4c67f 100%
  );
}

.amanecer__sol {
  position: absolute;
  inset: 0;
  background:
    /* el sol asomando, pegado al horizonte */
    radial-gradient(58% 40% at 50% 106%,
      rgba(255, 238, 196, 0.95) 0%,
      rgba(255, 201, 116, 0.60) 20%,
      rgba(255, 154, 68, 0.24) 44%,
      rgba(255, 132, 52, 0) 70%),
    /* el resplandor que se abre sobre el desierto */
    radial-gradient(120% 55% at 50% 118%,
      rgba(255, 170, 90, 0.34) 0%,
      rgba(255, 140, 70, 0) 68%);
}

.amanecer__grano {
  position: absolute;
  inset: -50%;
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Vela el fondo para que el reloj se lea contra el campo */
.amanecer__velo {
  position: absolute;
  inset: 0;
  background:
    /* sombra detrás del reloj, si no se pierde contra el campo */
    radial-gradient(72% 52% at 50% 44%,
      rgba(0, 0, 0, 0.52) 0%,
      rgba(0, 0, 0, 0.16) 58%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.46) 0%,
      rgba(0, 0, 0, 0.12) 40%,
      rgba(0, 0, 0, 0.44) 100%
    );
}
#apertura[data-video='no'] .amanecer__velo { opacity: 0; }

/* ----- Las fases ----- */

/* 6:29. Se va el color. */
#apertura[data-fase='quiebre'] {
  --f-fondo: grayscale(1) contrast(1.12) brightness(0.78);
}

/* Todo se desenfoca, lento y fuerte, y a la vez aparece el título */
#apertura[data-fase='titulo'],
#apertura[data-fase='fin'] {
  --f-fondo: grayscale(1) contrast(1.05) brightness(0.52) blur(38px);
  --f-reloj: blur(18px);
  --dur-f: 2700ms;
}

/* ----- El título de campaña, sobre el desenfoque ----- */

.titulo-campana {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 5;
  margin: 0;
  width: min(100%, 20ch);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 6.2vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.028em;
  color: var(--ink);
  pointer-events: none;
}

.titulo-campana span {
  display: block;
  opacity: 0;
  translate: 0 28px;
  transition: opacity 1200ms var(--ease), translate 1300ms var(--ease);
}

#apertura[data-fase='titulo'] .titulo-campana span,
#apertura[data-fase='fin'] .titulo-campana span {
  opacity: 1;
  translate: 0 0;
}

.titulo-campana span:nth-child(2) { transition-delay: 240ms; }
.titulo-campana span:nth-child(3) { transition-delay: 480ms; }

/* ----- El reloj ----- */

.apertura__centro {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
}

.reloj {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(4.2rem, 24vw, 22rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  color: var(--ink);
  filter: var(--f-reloj, none);
  transition: color 1100ms var(--ease), opacity 1600ms var(--ease),
              filter var(--dur-f, 1300ms) var(--ease);
}

/* Sobre el degradé de respaldo, que es claro, el reloj va en tinta oscura */
#apertura[data-video='no'][data-fase='amanecer'] .reloj { color: #120d06; }

/* Ya desenfocado, el reloj queda de fondo: el título manda */
#apertura[data-fase='titulo'] .reloj,
#apertura[data-fase='fin'] .reloj { opacity: 0.2; }

/* El dos puntos titila a velocidad de reloj: una vez por segundo */
.reloj__sep { opacity: 1; }

#apertura[data-fase='amanecer'] .reloj__sep {
  animation: titilar 1s steps(1, end) infinite;
}

@keyframes titilar {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.12; }
}

/* ----- Saltear ----- */

.saltear {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(22px, 5vh, 46px);
  z-index: 6;
  appearance: none;
  background: none;
  border: 1px solid rgba(244, 243, 239, 0.2);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--ink-dim);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease), color 300ms, border-color 300ms;
}

.saltear.visible {
  opacity: 1;
  pointer-events: auto;
}

.saltear:hover,
.saltear:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 50%, transparent);
}

/* Durante la intro no se puede scrollear ni se muestra el cue */
body.intro .scroll-cue { opacity: 0; }
html.intro { overflow: hidden; }

/* body fijo: durante la intro directamente no hay nada que scrollear */
body.intro {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.scroll-cue { transition: opacity 900ms var(--ease); }

.scroll-cue {
  position: absolute;
  bottom: clamp(26px, 5.5vh, 54px);
  left: 50%;
  translate: -50% 0;
  z-index: 6;
  appearance: none;
  background: none;
  border: 0;
  padding: 10px 16px;
  cursor: pointer;
  line-height: 0;
}

.scroll-cue svg {
  display: block;
  width: clamp(34px, 3.4vw, 50px);
  height: auto;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.7));
  animation: invitar 1.9s ease-in-out infinite;
}

.scroll-cue:hover svg,
.scroll-cue:focus-visible svg { animation-play-state: paused; opacity: 1; }

@keyframes invitar {
  0%, 100% { translate: 0 0; opacity: 0.7; }
  50%      { translate: 0 9px; opacity: 1; }
}

/* ---------- 02 · Qué pasó ---------- */

/* Cada párrafo ocupa una pantalla, con su foto al lado.
   En pantalla angosta pasan a columna, texto arriba y foto abajo. */

/* Texto y foto van juntos al centro, con columnas de ancho tope: así el
   aire queda afuera, en los márgenes, y no en el medio entre los dos. */
.relato-bloque {
  /* En escritorio cada bloque mide lo que mide su contenido (no una
     pantalla entera): así no queda aire de más entre párrafo y párrafo */
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 46rem);
  justify-content: center;
  gap: clamp(32px, 4.5vw, 80px);
  align-items: center;
  padding: calc(var(--separacion) / 2) var(--gutter);
}

/* El primero despeja la barra fija; el último cierra la sección con
   una separación entera hasta el borde */
.relato-bloque:first-child { padding-top: var(--separacion); }
.relato-bloque:last-child { padding-bottom: var(--separacion); }

.relato-bloque__texto { min-width: 0; }

.relato {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 100%;
  font-size: clamp(1.3rem, 2.5vw, 2.4rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 20ch;
}

/* Revelado palabra por palabra */
.palabra {
  color: var(--ink-faint);
  transition: color 260ms linear;
}
.palabra.on { color: var(--ink); }

/* Los destacados: la palabra se prende en amarillo cuando el revelado
   la alcanza. Sin fondo: una caja necesita márgenes, y esos márgenes
   despegan la puntuación que viene justo después. */
mark {
  background: none;
  color: var(--amarillo);
  padding: 0;
  margin: 0;
}

/* Dentro de un párrafo con revelado manda el estado de cada palabra:
   apagada sigue en gris, y recién al prenderse pasa a amarillo. */
mark .palabra { color: var(--ink-faint); }
mark .palabra.on { color: var(--amarillo); }

/* Cierre de sección: sin foto, a todo el ancho */
.relato-bloque--cierre {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.relato-bloque--cierre .relato {
  max-width: 24ch;
  font-size: clamp(1.5rem, 3.6vw, 3.2rem);
}

/* ---------- La foto ---------- */

.relato-foto {
  margin: 0;
  display: grid;
  gap: 10px;
  align-content: center;
  min-width: 0;
}

.relato-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #141414;
}

.relato-foto__credito {
  color: var(--ink-faint);
  font-size: clamp(0.58rem, 0.7vw, 0.66rem);
}

/* El video usa el mismo cuadro que las fotos. Como el material es 16:9 y
   el cuadro no, el iframe se agranda y se recorta por los costados, igual
   que hace object-fit: cover con una imagen.
   --ancho-video = cuánto hay que estirarlo para que el alto llene el
   cuadro: (proporción del video) ÷ (proporción del cuadro). */
.relato-video {
  --ancho-video: 133.34%;   /* 16:9 dentro de 4:3 */
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #141414;
  overflow: hidden;
}

.relato-video iframe {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: var(--ancho-video);
  height: 100%;
  border: 0;
}

/* Cuando el video sea un archivo nuestro no hace falta el recorte a mano:
   object-fit lo resuelve solo. */
.relato-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mapa dibujado a mano en SVG: sin derechos de terceros y nítido a
   cualquier tamaño. Es un esquema, no una carta: no está a escala. */
.mapa {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #0d1016;
}

.mapa__mar    { fill: #0d1016; }
.mapa__tierra { fill: #1b1b19; }

.mapa__franja {
  fill: rgba(255, 202, 28, 0.14);
  stroke: rgba(255, 202, 28, 0.45);
  stroke-width: 1;
}

/* La frontera terrestre, que es de lo que habla el párrafo */
.mapa__borde {
  fill: none;
  stroke: var(--amarillo);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mapa__punto { fill: var(--ink); }

.mapa__ciudad {
  fill: var(--ink);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 400;
}

.mapa__pais,
.mapa__agua,
.mapa__medida {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
}

.mapa__pais   { fill: var(--ink-dim); }
.mapa__agua   { fill: #3c4654; letter-spacing: 0.2em; }
.mapa__medida { fill: var(--amarillo); opacity: 0.75; letter-spacing: 0.08em; }

/* Mientras no haya imagen, el hueco dice qué foto va */
.relato-foto--pendiente img { display: none; }

.relato-foto--pendiente::before {
  content: attr(data-pide);
  display: flex;
  align-items: center;
  aspect-ratio: 4 / 3;
  padding: clamp(20px, 3vw, 40px);
  border: 1px dashed rgba(244, 243, 239, 0.22);
  color: var(--ink-faint);
  font-family: var(--font-text);
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  line-height: 1.5;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .relato-bloque {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(20px, calc(var(--pantalla) * 0.04), 34px);
    padding-block: calc(var(--separacion) / 2);
  }

  .relato { max-width: none; font-size: clamp(1.25rem, 5.2vw, 1.9rem); }

  .relato-bloque--cierre .relato {
    max-width: none;   /* el mismo ancho que los demás textos */
    font-size: clamp(1.4rem, 6.4vw, 2.2rem);
  }

  .relato-foto img,
  .relato-foto--pendiente::before,
  .relato-video { aspect-ratio: 3 / 2; }

  .relato-video { --ancho-video: 118.6%; }   /* 16:9 dentro de 3:2 */

}

/* ---------- 03 · Contexto ---------- */

/* Cada ítem es alto y adentro tiene una escena fija. Mientras se scrollea,
   main.js escribe tres variables en el ítem:
     --lift    0→1  el sticker se levanta desde el borde de abajo
     --vuelo   0→1  ya despegado, sale volando y se desvanece
     --verdad  0→1  aparece lo que pasó, debajo                     */

.contexto-intro {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(16px, calc(var(--pantalla) * 0.03), 32px);
  padding: var(--separacion) var(--gutter);
  text-align: center;
}

.contexto-pregunta {
  /* Tipografía y tamaño: .display--m, igual que todos los títulos de sección */
  margin: 0;
  max-width: 20ch;
}

.contexto-item {
  /* --alto lo mide main.js: lo que ocupa la escena (sticker y respuesta,
     que van en la misma celda). El ítem mide eso más el tramo en que la
     escena queda fija (45% de pantalla: despegue + un momento de lectura).
     Así no hay pantallas enteras vacías y entre pregunta y pregunta queda
     la separación de siempre. */
  --alto: calc(var(--pantalla) * 0.6);
  position: relative;
  height: calc(var(--alto) + var(--pantalla) * 0.45);
}

.contexto-item + .contexto-item { margin-top: var(--separacion); }
/* Después de la última pregunta, la separación hasta el final de la sección
   (con padding: un margen se escaparía afuera y dejaría una franja negra) */
#contexto { padding-bottom: var(--separacion); }

.contexto-escena {
  /* Dónde queda fija: lo calcula main.js en --fija. Si la respuesta entra
     en la pantalla, la escena entera va centrada; si es más larga (en
     celular, la 6 y la 7), se centra el sticker, la respuesta aparece desde
     la mitad de la pantalla y el resto se lee scrolleando. */
  position: sticky;
  top: var(--fija, max(72px, calc((var(--pantalla) - var(--alto)) / 2)));
  display: grid;
  /* En computadora sticker y respuesta van centrados en el alto de la
     escena, así la respuesta queda en el medio de la pantalla. En celular
     van arriba (ver el bloque de celular): las respuestas largas arrancan
     desde la mitad de la pantalla y se leen scrolleando. */
  place-items: center;
  padding: 0 var(--gutter);
  overflow-x: clip;
}

/* Las respuestas que no entran en la pantalla (main.js las marca) arrancan
   arriba de la escena también en computadora: así empiezan a la altura del
   sticker, cerca del medio, y el resto se lee scrolleando. */
.contexto-item--larga .contexto-escena { place-items: start center; }
.contexto-item--larga .contexto-verdad { margin-top: var(--baja, 0px); }

/* ---------- La verdad, debajo ---------- */

.contexto-verdad {
  grid-area: 1 / 1;
  max-width: 40rem;
  display: grid;
  gap: clamp(14px, calc(var(--pantalla) * 0.024), 24px);
  opacity: var(--verdad);
  translate: 0 calc((1 - var(--verdad, 1)) * 18px);
  /* Sin filter: blur(). En WebKit (Safari y todos los navegadores de
     iPhone) el desenfoque animado dibuja una raya de color en el borde. */
}

.contexto-cuerpo p { margin: 0; }

.contexto-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  font-size: clamp(1.7rem, 3.3vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.contexto-cuerpo {
  margin: 0;
  display: grid;
  gap: 0.85em;
  font-size: var(--texto);
  line-height: var(--texto-alto);
  font-weight: 300;
  color: var(--texto-color);
}

/* ---------- El sticker, encima ---------- */

/* Todos miden lo mismo: un porcentaje fijo de la pantalla. El texto se
   escala con el sticker (unidades cqi), así la proporción no cambia.
   Variables que llegan del ítem (las escribe despegues()):
     --escala     0,3→1  se agranda mientras sube hasta el centro
     --aparicion  0→1    aparece mientras sube
     --lift       0→1    se levanta desde el borde de abajo
     --vuelo      0→1    se va volando                               */

.sticker {
  grid-area: 1 / 1;
  position: relative;
  z-index: 3;
  container-type: inline-size;
  width: min(58vw, var(--pantalla));
  aspect-ratio: 2 / 1;
  margin: 0;
  display: grid;
  align-content: center;
  padding: 0 7cqi;
  background: linear-gradient(168deg, #f4f0e7, #e4ded0);
  color: #121212;
  border-radius: 4px;

  transform-origin: 50% 0%;
  transform:
    translate(calc(var(--vuelo, 0) * 22vw), calc(var(--vuelo, 0) * -80vh))
    rotate(calc(-3deg + var(--lift, 0) * 5deg + var(--vuelo, 0) * 24deg))
    perspective(1600px)
    rotateX(calc(var(--lift, 0) * 42deg))
    scale(calc(var(--escala, 1) * (1 + var(--lift, 0) * 0.04)));
  box-shadow:
    0 calc(8px + var(--lift, 0) * 44px) calc(20px + var(--lift, 0) * 60px)
    rgba(0, 0, 0, calc(0.5 + var(--lift, 0) * 0.25));
  opacity: calc(var(--aparicion, 1) * (1 - var(--vuelo, 0)));
  pointer-events: none;
}

.sticker__texto {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 105%;
  font-size: 8.4cqi;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* La punta doblada: al levantarse se abre más */
.sticker::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(3cqi + var(--lift, 0) * 9cqi);
  height: calc(3cqi + var(--lift, 0) * 9cqi);
  background: linear-gradient(to top left, #0b0b0b 0 50%, #cbc4b3 50% 100%);
  box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.22);
}

@media (max-width: 860px) {
  .sticker { width: 86vw; aspect-ratio: 4 / 3; }
  .sticker__texto { font-size: 10.4cqi; }
}


/* En celular las respuestas largas (6 y 7) no entraban con la escena fija:
   menos margen, título un poco más chico e interlineado más cerrado.
   El interlineado va en la variable, así el texto sigue igual en todo el sitio. */
@media (max-width: 860px) {
  :root { --texto-alto: 1.5; }
  /* Más margen a los lados que el resto del sitio: columnas más angostas
     y más altas, que aprovechan lo vertical de la pantalla del celular */
  .contexto-escena { place-items: start center; }
  .contexto-verdad { gap: 14px; padding-inline: var(--margen-texto); }
  .contexto-titulo { font-size: 1.5rem; }
  .contexto-cuerpo { gap: 0.6em; }
}

/* Sin animaciones: el sticker queda quieto arriba y la verdad abajo */
@media (prefers-reduced-motion: reduce) {
  .contexto-item { height: auto; }
  .contexto-escena { position: static; place-items: start; gap: 28px; padding-block: 0; }
  .sticker { grid-area: auto; opacity: 1; transform: rotate(-2deg); }
  .sticker::after { display: none; }
  .contexto-verdad { grid-area: auto; opacity: 1; translate: none; }
}

/* ---------- 03 · Cifras ---------- */

.cifra {
  display: grid;
  gap: clamp(12px, calc(var(--pantalla) * 0.02), 24px);
  align-content: center;
  min-height: var(--pantalla);
  padding: clamp(96px, calc(var(--pantalla) * 0.14), 160px) 0;
}

.cifra__valor {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(4.5rem, 22vw, 20rem);
  line-height: 0.78;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.cifra--acento .cifra__valor { color: var(--amarillo); }

.cifra__texto {
  font-size: clamp(1.35rem, 3.4vw, 2.8rem);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0;
}

.cifra__nota {
  margin-top: clamp(8px, calc(var(--pantalla) * 0.015), 16px);
  max-width: 38ch;
}

/* ---------- 04 · Secuestrados ----------
   Sección en amarillo (data-tema="amarillo"): la tinta es negra y todo lo
   que en otras secciones es amarillo acá pasa a negro. Todo va en una
   columna centrada y angosta, con mucho aire entre bloque y bloque. */

.secuestrados {
  justify-content: flex-start;
  align-items: center;
  gap: var(--separacion);
  padding-block: var(--separacion);
}

.secuestrados > * {
  width: 100%;
  /* el mismo marco que "Qué pasó" (texto + imagen): ~1230 px */
  max-width: 1230px;
}

/* ---------- Título y bajada: centrados, como el resto de la home ---------- */

.secuestrados__cabeza {
  display: grid;
  justify-items: center;
  gap: clamp(24px, calc(var(--pantalla) * 0.04), 40px);
  text-align: center;
}

.secuestrados__lede {
  margin: 0;
  max-width: 40rem;
  font-size: var(--texto);
  line-height: var(--texto-alto);
  color: var(--texto-color);
  text-wrap: pretty;
}

/* ---------- Las cifras: una frase ----------
   Antes eran tres cards; quedaban frías, como un tablero. Ahora es una
   sola frase grande, con los números que cuentan al llegar. */

.cifras-frase {
  margin: 0;
  max-width: 24ch;
  justify-self: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 105%;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cifras-frase strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---------- Las caras: tres filas que pasan ----------
   Cada fila tiene las caras dos veces seguidas y se corre la mitad de su
   ancho: así el loop no tiene salto. Queda dentro de la columna, con los
   bordes que se desvanecen. */

.rostros-bloque {
  margin: 0;
  display: grid;
  gap: 14px;
}

.rostros__credito {
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-dim);
}

.rostros {
  display: grid;
  gap: 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.rostros__fila {
  display: flex;
  gap: 8px;
  width: max-content;
  padding-right: 8px;   /* = gap, para que la mitad exacta sea un ciclo */
  animation: rostros-pasan var(--dur, 200s) linear infinite;
}

.rostros__fila--vuelta { animation-direction: reverse; }

/* Con mouse, al pasar por encima se frenan para ver cada cara. En pantallas
   táctiles no: ahí :hover queda «pegado» después de un toque y la fila se
   quedaba frenada para siempre. Un toque sólo muestra el nombre (main.js). */
@media (hover: hover) {
  .rostros:hover .rostros__fila { animation-play-state: paused; }
}

@keyframes rostros-pasan { to { translate: -50% 0; } }

.rostro {
  position: relative;
  flex: none;
  width: clamp(64px, 6.4vw, 96px);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--fondo);
}

/* Las caras van en color; al pasar el mouse aparece el nombre */
.rostro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rostro figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 6px 6px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.78));
  opacity: 0;
  translate: 0 6px;
  transition: opacity 300ms var(--ease), translate 300ms var(--ease);
}

@media (hover: hover) {
  .rostro:hover figcaption { opacity: 1; translate: 0 0; }
}
.rostro--nombre figcaption { opacity: 1; translate: 0 0; }

/* Sin foto todavía: una silueta */
.rostro--vacio {
  background: color-mix(in srgb, var(--fondo), #000 6%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Ccircle cx='30' cy='30' r='12' fill='%230B0B0B' fill-opacity='.13'/%3E%3Cpath d='M8 80c0-15 10-26 22-26s22 11 22 26z' fill='%230B0B0B' fill-opacity='.13'/%3E%3C/svg%3E") center 70% / 70% no-repeat;
}

/* ---------- "El terrorismo no distinguió edades": el más chico y el más grande ---------- */

.vidas {
  display: grid;
  justify-items: center;
  gap: clamp(28px, calc(var(--pantalla) * 0.05), 48px);
}

.vidas__titulo { text-align: center; }

.dos-vidas {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  max-width: 720px;
}

.vida {
  margin: 0;
  display: grid;
  gap: 18px;
  align-content: start;
}

.vida__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(11, 11, 11, 0.08);
}

.vida__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vida__foto--pendiente img { display: none; }

.vida__foto--pendiente::before {
  content: attr(data-pide);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  border: 1px dashed rgba(11, 11, 11, 0.3);
  border-radius: inherit;
  color: var(--ink-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

.vida__pie { display: grid; gap: 6px; }

.vida__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.vida__txt {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--texto-color);
}

/* ---------- El cautiverio ---------- */

.cautiverio {
  display: grid;
  justify-items: center;
  gap: clamp(28px, calc(var(--pantalla) * 0.05), 48px);
}

.cautiverio__titulo {
  max-width: 14ch;
  text-align: center;
}

.cautiverio__cuerpo {
  display: grid;
  gap: var(--entre-parrafos);
  max-width: 40rem;   /* como las respuestas de las 7 preguntas */
}

.cautiverio__cuerpo p {
  margin: 0;
  font-size: var(--texto);
  line-height: var(--texto-alto);
  color: var(--texto-color);
}

/* El caso de Evyatar David: una tarjeta negra, la única en la sección */
.caso {
  --ink: #FFCA1C;
  --ink-faint: rgba(255, 202, 28, 0.28);
  display: grid;
  gap: 14px;
  max-width: 40rem;
  /* El mismo aire antes y después de la tarjeta: media separación
     (antes se le resta el gap de .cautiverio; después, ver .cautiverio + ...) */
  margin-top: calc(var(--separacion) * 0.5 - clamp(28px, calc(var(--pantalla) * 0.05), 48px));
  padding: clamp(24px, 3vw, 36px);
  background: #0B0B0B;
  color: var(--ink);
  border-radius: 14px;
}

.caso__txt {
  margin: 0;
  font-size: var(--texto);
  line-height: var(--texto-alto);
}

.caso__pie {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 202, 28, 0.7);
}

/* ---------- Cierre ---------- */

/* Mismo bloque de texto que "Hambre, violaciones y maltratos": 40rem,
   centrado en la página, texto a la izquierda y el mismo aire entre
   párrafos. Antes y después, una separación entera, como entre partes. */
.secuestrados__final {
  display: grid;
  justify-items: center;
  gap: var(--entre-parrafos);
  font-size: var(--texto);
}
.secuestrados__final-1 { width: 100%; }

.secuestrados__final p { margin: 0; }

.cautiverio + .secuestrados__final { margin-top: calc(var(--separacion) * -0.5); }

/* El texto presenta la foto de la plaza: van juntos, con media separación
   entre los dos, y la separación entera antes, después de la tarjeta */
.secuestrados__final + .vuelta { margin-top: calc(var(--separacion) * -0.5); }

.secuestrados__final-1 {
  max-width: 40rem;
  font-size: var(--texto);
  line-height: var(--texto-alto);
  color: var(--texto-color);
}


/* ---------- Cómo se los llevaron: la tira que corre ----------
   La escena queda fija mientras se scrollea y la pista se corre de
   costado (main.js escribe --corre en px y --foco en cada cuadro: 1 el
   del centro, 0 los que están lejos). */

.secuestrados > .tira { max-width: none; }

.tira {
  --ancho-cuadro: min(64vw, 940px);
  position: relative;
  /* --alto lo mide main.js: el alto real de los cuadros. Así la tira no
     agrega aire propio y la separación con lo de arriba y lo de abajo es
     la misma de siempre. */
  height: calc(var(--alto, calc(var(--pantalla) * 0.6)) + var(--cuadros, 4) * calc(var(--pantalla) * 0.55));
}

/* Queda fija, centrada en lo que se ve debajo de la barra de arriba,
   mientras la pista se corre (main.js usa la misma cuenta) */
.tira__escena {
  position: sticky;
  top: calc(var(--barra) + (100svh - var(--barra) - var(--alto, 60svh)) / 2);
  overflow: hidden;
}

.tira__pista {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 48px);
  /* el primero y el último quedan centrados en su momento */
  padding-inline: calc(50% - var(--ancho-cuadro) / 2);
  translate: var(--corre, 0px) 0;
  will-change: translate;
}

.tira__cuadro {
  --foco: 1;
  flex: none;
  width: var(--ancho-cuadro);
  margin: 0;
  display: grid;
  gap: 16px;
  opacity: calc(0.35 + 0.65 * var(--foco));
  scale: calc(0.9 + 0.1 * var(--foco));
}

.tira__foto {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: #0B0B0B;
}

.tira__foto img,
.tira__foto video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tira__foto--pendiente { background: none; border: 1px dashed rgba(11, 11, 11, 0.35); }
.tira__foto--pendiente img { display: none; }
.tira__foto--pendiente::before {
  content: attr(data-pide);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

.tira__cuadro figcaption {
  /* del mismo ancho que la imagen */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto-color);
}

/* ---------- El video de Evyatar, a pedido ---------- */

.caso__ver {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 12px;
  border: 1px solid rgba(255, 202, 28, 0.45);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: background 240ms, color 240ms;
}

.caso__ver svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

.caso__ver small {
  display: block;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.75rem;
  opacity: 0.7;
}

.caso__ver:hover,
.caso__ver:focus-visible { background: var(--ink); color: #0B0B0B; }

/* El video de Evyatar David, en un modal que se cierra con la cruz,
   con Escape o tocando afuera */
.modal-video {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(56px, 8vh, 88px) clamp(16px, 4vw, 56px);
  border: 0;
  background: rgba(0, 0, 0, 0.94);
  color: #F4F3EF;
}
.modal-video[open] { display: grid; place-items: center; animation: modal-entra 300ms var(--ease); }
.modal-video::backdrop { background: rgba(0, 0, 0, 0.6); }

@keyframes modal-entra { from { opacity: 0; } to { opacity: 1; } }

.modal-video__figura {
  margin: 0;
  width: min(100%, 1100px);
  display: grid;
  gap: 12px;
}

.modal-video__marco {
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - 180px);
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.modal-video__marco video { display: block; width: 100%; height: 100%; object-fit: contain; }

.modal-video__credito { font-size: 0.78rem; color: rgba(244, 243, 239, 0.6); }

.modal-video__cerrar {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(244, 243, 239, 0.35);
  background: rgba(0, 0, 0, 0.4);
  color: #F4F3EF;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.modal-video__cerrar:hover,
.modal-video__cerrar:focus-visible { background: #FFCA1C; border-color: #FFCA1C; color: #0B0B0B; }
.modal-video__cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (prefers-reduced-motion: reduce) { .modal-video[open] { animation: none; } }

/* ---------- La vuelta ---------- */

.vuelta { margin: 0; display: grid; gap: 14px; }

.vuelta__marco {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(11, 11, 11, 0.08);
}

/* Se acomoda (de 1,12 a 1) a medida que sube; main.js escribe --acerca */
.vuelta__marco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: calc(1.12 - 0.12 * var(--acerca, 1));
}

.vuelta figcaption {
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

@media (max-width: 860px) {

  .cifras-frase { justify-self: start; text-align: left; padding-inline: var(--margen-texto); }

  .rostros { margin-inline: calc(var(--gutter) * -1); gap: 6px; }
  .rostros__fila { gap: 6px; padding-right: 6px; }
  .rostro { width: 60px; }

  .dos-vidas { gap: 14px; }
  /* En celular los textos van a la izquierda, como en el resto de la
     página, y con el mismo margen que las respuestas de las 7 preguntas.
     Lo visual (tira, cards, caras, fotos) mantiene su ancho. */
  .secuestrados__cabeza,
  .vidas,
  .cautiverio,
  .secuestrados__final {
    justify-items: start;
    text-align: left;
  }
  .secuestrados__cabeza,
  .vidas__titulo,
  .cautiverio,
  .secuestrados__final { padding-inline: var(--margen-texto); }
  .vidas__titulo,
  .cautiverio__titulo { text-align: left; }

  .vida__n { font-size: 1.35rem; white-space: nowrap; }

  .tira { --ancho-cuadro: 82vw; height: calc(var(--alto, calc(var(--pantalla) * 0.6)) + var(--cuadros, 4) * calc(var(--pantalla) * 0.7)); }
  .tira__cuadro figcaption { font-size: 0.95rem; }
  .vida__txt { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tira { height: auto; }
  .tira__escena { position: static; overflow: visible; }
  .tira__pista { flex-direction: column; gap: 48px; padding: 0; translate: none; }
  .tira__cuadro { width: 100%; opacity: 1; scale: 1; }
  .vuelta__marco img { scale: 1; }
  .rostros__fila { animation: none; }
}

/* ---------- 05 · Por qué la campaña + las 7 miradas ----------
   Dos columnas en escritorio: el texto a la izquierda y el calendario a la
   derecha, que queda fijo mientras se lee. En celular, uno abajo del otro. */

.porque {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(40px, 6vw, 112px);
}

.porque__texto { display: grid; gap: clamp(28px, calc(var(--pantalla) * 0.05), 48px); }
.porque__titulo { margin: 0; max-width: 16ch; }

.porque__cuerpo {
  display: grid;
  gap: var(--entre-parrafos);
  max-width: 40rem;
}

/* ---------- El calendario ---------- */

.cal {
  position: sticky;
  top: calc(var(--barra) + 40px);
  display: grid;
  gap: 18px;
}

.cal__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--rule);
}

.cal__dia {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: clamp(12px, calc(var(--pantalla) * 0.018), 18px) 0;
  border-bottom: var(--rule);
  color: var(--ink);
  transition: color 240ms var(--ease);
}

.cal__fecha {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.cal__nombre {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Hoy: la fila destacada */
.cal__dia--hoy .cal__nombre,
.cal__dia--hoy .cal__fecha { color: var(--amarillo); }

/* Abiertas: enlaces */
a.cal__dia:hover .cal__nombre,
a.cal__dia:focus-visible .cal__nombre { color: var(--amarillo); }

/* Las que faltan: apagadas, sólo la fecha */
.cal__dia--cerrado .cal__nombre { color: var(--ink-faint); }

.candado {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: -1px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

@media (max-width: 860px) {
  .porque { grid-template-columns: 1fr; gap: var(--separacion); }
  .cal { position: static; }
}

/* ---------- 07 · Cierre ---------- */

#cierre {
  --bg: var(--bg-black);
  justify-content: center;
}

.cierre__frases {
  display: grid;
  gap: clamp(6px, calc(var(--pantalla) * 0.012), 14px);
  margin: 0 0 clamp(48px, calc(var(--pantalla) * 0.09), 110px);
}

.cierre__frases p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112%;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 3.3rem);   /* más chico en escritorio: menos abrumador */
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-faint);
  transition: color 500ms var(--ease);
}

.cierre__frases p.on { color: var(--ink); }
.cierre__frases p.cierre__siete.on { color: var(--amarillo); }

/* «Una iniciativa de la Organización Sionista del Uruguay para la sociedad
   uruguaya y para el mundo.» va en una sola línea: la letra se achica lo
   justo para que entre en el ancho disponible (la frase mide unas 44 veces
   el tamaño de la letra). Si la pantalla es tan angosta que quedaría
   demasiado chica, no baja de 1.2rem (lo del celular) y se corta. */
.cierre__remate {
  display: grid;
  gap: 4px;
  width: 100%;
  container-type: inline-size;
}

.cierre__remate p {
  margin: 0;
  font-size: max(1.2rem, min(clamp(1.2rem, 2.2vw, 1.75rem), 100cqi / 44.5));
  text-wrap: balance;
  line-height: 1.24;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.cierre__remate { gap: clamp(18px, calc(var(--pantalla) * 0.03), 28px); }

/* La firma final */
.cierre__marca {
  margin: clamp(64px, calc(var(--pantalla) * 0.12), 140px) 0 0;
  padding-top: clamp(20px, calc(var(--pantalla) * 0.03), 32px);
  border-top: var(--rule);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.cierre__marca p { margin: 0; }

/* El logo de la OSU, a la derecha de la firma */
.cierre__logo {
  display: block;
  width: auto;
  height: clamp(28px, 3vw, 40px);
  opacity: 0.92;
}

/* =========================================================================
   Utilidades
   ========================================================================= */

.sangra { width: 100%; overflow: hidden; }

.aparece {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 900ms var(--ease), translate 900ms var(--ease);
}
.aparece.on { opacity: 1; translate: 0 0; }

/* =========================================================================
   El recorrido: por dónde vas, qué hay y cuánto falta
   Lo usan la home (secciones) y cada eje (sus 7 ítems). Se arma en comun.js.
   Los colores salen de los tokens, así copia el tema de lo que tiene debajo.
   ========================================================================= */

.recorrido {
  position: fixed;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease), translate 500ms var(--ease);
}

.recorrido--visible { opacity: 1; pointer-events: auto; }

.recorrido__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recorrido__enlace {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-dim);
}

.recorrido__n {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  background: var(--fondo);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  transition: background 400ms var(--ease), border-color 400ms var(--ease),
              color 400ms var(--ease), box-shadow 400ms var(--ease);
}

.recorrido__item--pintado .recorrido__n {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--fondo);
}

.recorrido__item--activo .recorrido__n {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--amarillo) 18%, transparent);
}

.recorrido__mini {
  flex: none;
  display: block;
  width: 56px;
  height: 38px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.recorrido__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recorrido__mini--vacia {
  border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent);
  background: none;
}

.recorrido__titulo {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Escritorio: columna fija a la izquierda ---------- */

@media (min-width: 1200px) {
  .recorrido {
    left: var(--gutter);
    top: 50%;
    translate: -14px -50%;
  }
  .recorrido--visible { translate: 0 -50%; }

  .recorrido__barra { display: none; }

  .recorrido__carril { position: relative; }

  .recorrido__lista { display: grid; gap: 20px; }

  /* La línea une los números y se llena de amarillo al bajar */
  .recorrido__linea {
    position: absolute;
    left: 14.5px;   /* medio círculo (15) − medio ancho de la línea */
    top: 19px;      /* medio renglón: la miniatura lo hace de 38 px */
    bottom: 19px;
    width: 1px;
    background: color-mix(in srgb, var(--ink) 16%, transparent);
  }

  .recorrido__linea i {
    position: absolute;
    inset: 0;
    width: 2px;
    left: -0.5px;
    background: var(--amarillo);
    transform-origin: top;
    scale: 1 var(--avance, 0);
  }

  /* Miniatura y título: se ven en el activo y al pasar el mouse */
  .recorrido__mini,
  .recorrido__titulo {
    opacity: 0;
    translate: -8px 0;
    transition: opacity 350ms var(--ease), translate 350ms var(--ease), color 300ms;
  }

  .recorrido__mini img { filter: grayscale(1); transition: filter 400ms; }

  .recorrido__item--activo .recorrido__mini,
  .recorrido__item--activo .recorrido__titulo,
  .recorrido__enlace:hover .recorrido__mini,
  .recorrido__enlace:hover .recorrido__titulo,
  .recorrido__enlace:focus-visible .recorrido__mini,
  .recorrido__enlace:focus-visible .recorrido__titulo {
    opacity: 1;
    translate: 0 0;
  }

  .recorrido__item--activo .recorrido__titulo { color: var(--ink); }
  .recorrido__item--activo .recorrido__mini img,
  .recorrido__enlace:hover .recorrido__mini img { filter: none; }
  .recorrido__enlace:hover .recorrido__n { border-color: var(--amarillo); }
}

/* ---------- Celular y tablet: barra abajo ---------- */

@media (max-width: 1199px) {
  .recorrido {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    translate: 0 16px;
  }
  .recorrido--visible { translate: 0 0; }

  .recorrido__barra,
  .recorrido__carril {
    background: color-mix(in srgb, var(--fondo) 90%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: var(--rule);
    border-radius: 14px;
  }

  .recorrido__barra { padding: 10px 14px 4px; }

  .recorrido__segmentos {
    display: grid;
    grid-template-columns: repeat(var(--total, 7), 1fr);
    gap: 4px;
  }

  .recorrido__segmentos span {
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
  }

  .recorrido__segmentos i {
    display: block;
    height: 100%;
    background: var(--amarillo);
    transform-origin: left;
    scale: var(--s, 0) 1;
  }

  .recorrido__actual {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 0 8px;
    border: 0;
    background: none;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }

  .recorrido__actual-n { color: var(--amarillo); flex: none; }

  .recorrido__actual-titulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .recorrido__flecha {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: rotate 300ms var(--ease);
  }

  .recorrido--abierto .recorrido__flecha { rotate: 180deg; }

  /* La lista completa se despliega arriba de la barra */
  .recorrido__carril {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    max-height: min(70svh, 520px);
    overflow-y: auto;
    padding: 8px;
    opacity: 0;
    translate: 0 10px;
    pointer-events: none;
    transition: opacity 280ms var(--ease), translate 280ms var(--ease);
  }

  .recorrido--abierto .recorrido__carril {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }

  .recorrido__linea { display: none; }

  .recorrido__lista { display: grid; gap: 2px; }

  .recorrido__enlace {
    padding: 8px;
    border-radius: 10px;
  }

  .recorrido__item--activo .recorrido__enlace { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .recorrido__item--activo .recorrido__titulo { color: var(--ink); }

  .recorrido__mini { width: 64px; height: 44px; }
}

/* ---------- El dato extra del activo (p. ej. «3/7») ---------- */

.recorrido__detalle { color: var(--amarillo); }

/* ---------- Modo compacto (home): sólo números ----------
   Al pasar el mouse por la columna se despliega un panel con todos los
   títulos, sin mover los números de lugar. */
@media (min-width: 1200px) {
  .recorrido--compacto .recorrido__carril {
    margin: -12px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: background-color 300ms var(--ease), border-color 300ms var(--ease),
                box-shadow 300ms var(--ease);
  }

  /* La línea se corre lo mismo que el relleno del panel (12 px; el borde ya
     queda afuera de la medida), así sigue pasando por el centro de los
     círculos: 12 + 15 (medio círculo) − 0,5 (medio ancho de la línea) */
  .recorrido--compacto .recorrido__linea {
    left: 26.5px;
    top: 27px;
    bottom: 27px;
  }

  /* Con miniaturas (Huellas): ocultas hasta abrir el panel. Siguen
     ocupando su lugar, así los números no se mueven al desplegarlo. */
  .recorrido--compacto .recorrido__mini,
  .recorrido--compacto .recorrido__item--activo .recorrido__mini { opacity: 0; translate: -8px 0; }
  .recorrido--compacto:hover .recorrido__mini,
  .recorrido--compacto:has(.recorrido__enlace:focus-visible) .recorrido__mini { opacity: 1; translate: 0 0; }
  /* Con miniaturas cada renglón mide 38 px: la línea arranca más abajo */
  .recorrido--compacto:has(.recorrido__mini) .recorrido__linea { top: 31px; bottom: 31px; }

  .recorrido--compacto .recorrido__titulo {
    translate: -8px 0;
    opacity: 0;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
  }

  .recorrido--compacto:hover .recorrido__carril,
  .recorrido--compacto:has(.recorrido__enlace:focus-visible) .recorrido__carril {
    background: color-mix(in srgb, var(--fondo) 94%, transparent);
    border-color: color-mix(in srgb, var(--ink) 14%, transparent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    padding-right: 22px;
  }

  .recorrido--compacto:hover .recorrido__titulo,
  .recorrido--compacto:has(.recorrido__enlace:focus-visible) .recorrido__titulo {
    opacity: 1;
    translate: 0 0;
  }

  .recorrido--compacto .recorrido__item--pintado .recorrido__titulo { color: color-mix(in srgb, var(--ink) 75%, transparent); }
  .recorrido--compacto .recorrido__item--activo .recorrido__titulo,
  .recorrido--compacto .recorrido__enlace:hover .recorrido__titulo { color: var(--ink); }
}

/* Foco con teclado: el anillo va en el número, no en todo el enlace */
.recorrido__enlace { outline: none; }
.recorrido__enlace:focus-visible .recorrido__n {
  outline: 2px solid var(--amarillo);
  outline-offset: 3px;
}

/* Desde 1200 px la home usa el mismo margen que las páginas de eje, igual a
   los dos lados: deja lugar al recorrido de la izquierda con aire (que el
   contenido no quede pegado a los números) y centra todo. Los bloques de
   adentro que sumaban su propio margen lo dejan en cero. La barra de arriba
   usa el mismo margen, así la marca y el calendario se alinean. */
@media (min-width: 1200px) {
  .pagina-home { --margen-home: calc(var(--gutter) + 96px); }
  .pagina-home main > section:not(#apertura) { padding-inline: var(--margen-home); }
  .pagina-home .relato-bloque,
  .pagina-home .contexto-intro,
  .pagina-home .contexto-escena { padding-inline: 0; }
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .aparece { opacity: 1; translate: none; }
  .palabra { color: var(--ink); }
}


/* Vista previa (comun.js, marcaDePrevia): aviso chico abajo a la izquierda */
.previa-marca {
  position: fixed;
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  padding: 7px 12px;
  border-radius: 999px;
  background: #E5484D;
  color: #fff;
  font: 600 0.68rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}