/* =========================================================================
   7dias.uy — Páginas de cada eje (Huellas, Lugares, …)
   Se carga después de main.css: usa sus tokens, tipografías y la barra.
   ========================================================================= */

.pagina-eje {
  --fondo: var(--bg-deep);   /* la barra y el recorrido se funden con este fondo */
  background: var(--bg-deep);
  /* El margen de toda la página, igual a los dos lados. Desde 1200 px deja
     lugar al recorrido de la izquierda y el mismo aire a la derecha, así
     el contenido queda centrado y no se pega a los números. */
  --margen-eje: var(--gutter);
}

@media (min-width: 1200px) {
  .pagina-eje { --margen-eje: calc(var(--gutter) + 96px); }
}

@media (max-width: 860px) {
  /* Como en la home: todo a 34 px del borde */
  .pagina-eje { --margen-eje: calc(var(--gutter) + var(--margen-texto)); }
}


/* =========================================================================
   Hero: título del eje y el video del día
   ========================================================================= */

.eje-hero {
  --hero: 0;
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(36px, calc(var(--pantalla) * 0.07), 72px);
  /* abajo media separación: la primera huella suma la otra media */
  padding: calc(var(--barra) + var(--separacion) / 2) var(--margen-eje) calc(var(--separacion) / 2);
  text-align: center;
}

.eje-hero__texto {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(14px, calc(var(--pantalla) * 0.024), 24px);
  translate: 0 calc(var(--hero) * -10vh);
  opacity: calc(1 - var(--hero) * 0.7);
}

.eje-hero__fecha {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 105%;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--amarillo);
}

.eje-hero__titulo {
  /* Que la palabra entre justo en el ancho, sea cual sea el eje: cada
     letra mide ~0,86 del cuerpo. --letras lo pone eje.js. */
  font-size: min(15.5rem, calc((100vw - 2 * var(--margen-eje)) / (var(--letras, 7) * 0.86)));
  line-height: 0.8;
  display: flex;
  overflow: hidden;
  /* las letras suben desde abajo: el recorte necesita un poco de aire */
  padding: 0.04em 0.02em 0.02em;
}

/* Hasta que eje.js arma las letras, el título no se ve: así no aparece
   un instante la palabra entera antes de que entren las letras */
.is-loading .eje-hero__titulo { visibility: hidden; }

.eje-hero__titulo .letra {
  display: inline-block;
  translate: 0 108%;
  animation: letra-sube 1100ms var(--ease) forwards;
  animation-delay: calc(var(--titulo, 180ms) + var(--i) * 65ms);
}

@keyframes letra-sube { to { translate: 0 0; } }

.eje-hero__intro {
  margin: 0;
  max-width: none;   /* el mismo ancho que el título: los márgenes de la página */
  font-size: var(--texto);
  line-height: var(--texto-alto);
  color: var(--texto-color);
  text-wrap: balance;
}

.eje-hero__intro {
  opacity: 0;
  animation: asoma 900ms var(--ease) forwards;
  animation-delay: var(--bajada, 750ms);
}

/* La fecha se escribe como a máquina (eje.js la va escribiendo letra por
   letra), con un cursor que titila y se va al terminar */
.is-loading .eje-hero__fecha { visibility: hidden; }
.eje-hero__fecha .cursor {
  display: inline-block;
  width: 0.07em;
  height: 0.95em;
  margin-left: 0.05em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: cursor-titila 0.55s steps(1) infinite;
  transition: opacity 250ms ease;
}
.eje-hero__fecha .cursor--fin { opacity: 0; }
@keyframes cursor-titila { 50% { visibility: hidden; } }

@keyframes asoma {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- El reproductor ---------- */

.reproductor {
  --acerca: 1;
  position: relative;
  width: min(100%, 1230px);
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: #111;
  border-radius: 3px;
  scale: calc(0.86 + var(--acerca) * 0.14);
  opacity: 0;
  animation: asoma 1100ms var(--ease) var(--video, 1000ms) forwards;
}

.reproductor__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.5);
  transition: filter 900ms var(--ease), scale 1600ms var(--ease);
}

.reproductor:hover .reproductor__poster {
  filter: grayscale(0.35) brightness(0.62);
  scale: 1.035;
}

/* Todo el cuadro es el botón */
.reproductor__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}

.reproductor__play:focus-visible { outline: 2px solid var(--amarillo); outline-offset: -6px; }

.reproductor__circulo {
  position: absolute;
  left: var(--bx, 50%);
  top: var(--by, 50%);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(76px, 9vw, 124px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--amarillo);
  color: #000;
  transition: scale 400ms var(--ease);
}

.reproductor__circulo svg { width: 36%; fill: currentColor; translate: 6% 0; }

/* Un pulso que invita a tocar */
.reproductor__circulo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--amarillo);
  animation: pulso 2200ms var(--ease) infinite;
}

@keyframes pulso {
  from { scale: 1;   opacity: 0.9; }
  to   { scale: 1.7; opacity: 0; }
}

.reproductor:hover .reproductor__circulo { scale: 1.08; }

.reproductor__aviso {
  position: absolute;
  left: 50%;
  bottom: clamp(56px, 7vw, 84px);
  translate: -50% 8px;
  z-index: 3;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease), translate 300ms var(--ease);
}

.reproductor--aviso .reproductor__aviso { opacity: 1; translate: -50% 0; }

/* Celular parado, con versión vertical: el cuadro es 9:16 entero, sin
   recortar, con el mismo ancho que los textos de la página */
.reproductor--vertical {
  aspect-ratio: 9 / 16;
  width: 100%;
  justify-self: stretch;
}
.reproductor--vertical video { object-fit: cover; }

/* Sonando: el video tapa todo lo demás */
.reproductor video,
.reproductor iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 4;
}

/* El video precargado espera escondido hasta que se toca play */
.reproductor video.reproductor__espera { visibility: hidden; }

.reproductor--sonando { cursor: auto; }
.reproductor--sonando .reproductor__play { display: none; }

/* ---------- Seguí bajando ----------
   La pastilla: en computadora va debajo del video; en celular queda fija
   abajo, centrada, desde que se llega al video hasta que asoma la primera
   historia (eje.js, seguirBajando). */
/* El lugar de la pastilla, debajo del video: sticky con bottom, así queda
   pegada abajo de la pantalla hasta que se llega a su lugar */
.eje-seguir__lugar {
  position: sticky;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 30;
  justify-self: stretch;
  display: grid;
  justify-items: center;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
.eje-seguir__lugar .eje-seguir { pointer-events: auto; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
.eje-seguir__lugar--oculta { opacity: 0; }
.eje-seguir__lugar--oculta .eje-seguir { pointer-events: none; }

.eje-seguir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--amarillo);
  color: #0B0B0B;
  font: 600 0.82rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.eje-seguir svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .eje-seguir svg { animation: seguir-baja 1.4s var(--ease) infinite; }
}
@keyframes seguir-baja {
  0%, 100% { translate: 0 -2px; }
  50%      { translate: 0 3px; }
}

/* El cartel al terminar el video, sobre el cuadro */
.reproductor__fin {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--ink);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease);
}
.reproductor__fin p {
  margin: 0;
  font: 700 clamp(1.3rem, 3vw, 2rem)/1.1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.reproductor--termino .reproductor__fin { opacity: 1; pointer-events: auto; }


/* =========================================================================
   Las 7 huellas
   ========================================================================= */

.huellas {
  padding-inline: var(--margen-eje);
  counter-reset: huella;
}

.huella {
  --p: 1;
  max-width: 1230px;   /* el mismo marco que "Qué pasó" en la home */
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 96px);
  /* media separación arriba y abajo = una separación entera entre huellas */
  padding-block: calc(var(--separacion) / 2);
}

/* Zigzag: una foto a la izquierda, la siguiente a la derecha */
.huella:nth-of-type(even) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.huella:nth-of-type(even) .huella__media { order: 2; }

.huella__media {
  display: grid;
  gap: 10px;
  perspective: 1400px;
}

/* El marco se abre a medida que la huella sube (--p de 0 a 1) */
.huella__marco {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #141414;
  clip-path: inset(
    calc((1 - var(--p)) * 16%)
    calc((1 - var(--p)) * 11%)
    round 3px
  );
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 500ms var(--ease);
  cursor: zoom-in;
}
.huella__marco--recorte { cursor: auto; }   /* no se amplía (ver visor en eje.js) */

.huella__marco img,
.huella__marco video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scale: calc(1.22 - var(--p) * 0.22);
  /* En blanco y negro hasta que se la mira: ahí recupera el color */
  filter: grayscale(1) brightness(0.72);
  transition: filter 1600ms var(--ease);
}

.huella--activa .huella__marco img,
.huella--activa .huella__marco video { filter: none; }

/* Pase de fotos: todas en el mismo lugar, se ve la que tiene .on */
.huella__marco--pases img {
  opacity: 0;
  transition: filter 1600ms var(--ease), opacity 700ms var(--ease);
}
.huella__marco--pases img.on { opacity: 1; }

/* La linterna: una luz suave que sigue al cursor */
.huella__marco::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 244, 214, 0.22),
    rgba(255, 244, 214, 0) 42%
  );
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 400ms var(--ease);
  pointer-events: none;
}

.huella__marco:hover::after { opacity: 1; }

.huella__marco:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 4px; }

.huella__ampliar {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: var(--ink);
  opacity: 0;
  scale: 0.8;
  transition: opacity 300ms var(--ease), scale 300ms var(--ease), background 240ms;
}

.huella__ampliar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.huella--activa .huella__ampliar { opacity: 1; scale: 1; }
.huella__marco:hover .huella__ampliar { background: var(--amarillo); color: #000; }

/* Recorte de un medio (titular): se ve entero sobre blanco y, cuando la
   huella se activa, se acerca a la palabra y un resaltador amarillo la
   marca. En el <figure>: --a (ancho/alto de la imagen), --z (cuánto se
   acerca) y --fx/--fy (el centro de la palabra, en % de la imagen). La
   marca va en % de la imagen (left/top/width/height). */
.huella__marco--recorte {
  display: grid;
  place-items: center;
  background: #fff;
}

.recorte {
  position: relative;
  /* entra entera en el cuadro 4:3, con un poco de aire */
  width: min(88%, calc(66% * var(--a, 1.5)));
  transition: transform 1600ms var(--ease) 350ms;
}

.huella--activa .recorte {
  /* lleva el centro de la palabra al centro del cuadro y se acerca */
  transform:
    translate(calc((50 - var(--fx, 50)) * var(--z, 1) * 1%), calc((50 - var(--fy, 50)) * var(--z, 1) * 1%))
    scale(var(--z, 1));
}

.huella__marco--recorte .recorte img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  scale: none;
  filter: none;
}

.recorte__marca {
  position: absolute;
  margin: -0.4% -0.8%;
  padding: 0.4% 0.8%;
  box-sizing: content-box;
  background: rgba(255, 202, 28, 0.55);
  mix-blend-mode: multiply;
  border-radius: 2px;
  transform-origin: left center;
  scale: 0 1;
  transition: scale 700ms var(--ease) 1700ms;
}

.huella--activa .recorte__marca { scale: 1 1; }

@media (prefers-reduced-motion: reduce) {
  .huella--activa .recorte { transform: none; }
  .recorte__marca { scale: 1 1; transition: none; }
}

/* Todavía sin foto: el hueco dice cuál va */
.huella__marco--pendiente {
  display: flex;
  align-items: center;
  padding: clamp(20px, 3vw, 40px);
  border: 1px dashed rgba(244, 243, 239, 0.22);
  background: none;
  cursor: default;
}

.huella__marco--pendiente::before {
  content: attr(data-pide);
  color: var(--ink-faint);
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.huella__marco--pendiente::after { display: none; }

.huella__credito {
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* ---------- El texto ---------- */

.huella__texto {
  display: grid;
  gap: clamp(16px, calc(var(--pantalla) * 0.024), 24px);
  align-content: center;
}

/* El número grande: contorno hasta que la huella se activa, ahí se pinta */
.huella__n {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(3rem, 5vw, 4.75rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 243, 239, 0.32);
  translate: 0 calc((1 - var(--p)) * 60px);
  transition: color 900ms var(--ease), -webkit-text-stroke-color 900ms var(--ease);
}

.huella--activa .huella__n {
  color: var(--amarillo);
  -webkit-text-stroke-color: var(--amarillo);
}

.huella__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  font-size: clamp(1.7rem, 3.3vw, 3rem);   /* como las respuestas de las 7 preguntas */
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  /* entra desde abajo la primera vez */
  opacity: 0;
  translate: 0 24px;
  transition: opacity 900ms var(--ease), translate 900ms var(--ease);
}

.huella--vista .huella__titulo { opacity: 1; translate: 0 0; }

.huella__cuerpo {
  display: grid;
  gap: 0.9em;
}

.huella__cuerpo p {
  margin: 0;
  font-size: var(--texto);
  line-height: var(--texto-alto);
  color: var(--texto-color);
  max-width: 44ch;
}

/* Aviso de ayuda al pie de una historia sobre suicidio */
.huella__ayuda.huella__ayuda {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-dim);
  padding-left: 12px;
  border-left: 2px solid var(--amarillo);
}

.huella__borrador.huella__borrador {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--naranja);
}

/* =========================================================================
   Cierre del eje: las otras miradas
   ========================================================================= */

.eje-fin {
  /* arriba media separación: la última huella ya deja la otra media */
  padding: calc(var(--separacion) / 2) var(--margen-eje) clamp(28px, calc(var(--pantalla) * 0.05), 48px);
}

.eje-fin__vecinos {
  max-width: 1230px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--rule);
}

.eje-fin__vecino {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(24px, calc(var(--pantalla) * 0.04), 40px) 0;
}

.eje-fin__vecino--sig {
  text-align: right;
  justify-items: end;
  border-left: var(--rule);
  padding-left: 24px;
}

.eje-fin__vecino--ant { padding-right: 24px; }

.eje-fin__nombre {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  transition: color 300ms var(--ease);
}

.eje-fin__claim { color: var(--ink-dim); font-size: var(--texto); }

a.eje-fin__vecino:hover .eje-fin__nombre { color: var(--amarillo); }

.eje-fin__vecino--cerrado .eje-fin__nombre,
.eje-fin__vecino--cerrado .eje-fin__claim { color: var(--ink-faint); }

.eje-fin .cierre__marca { margin-top: clamp(40px, calc(var(--pantalla) * 0.08), 96px); }

/* =========================================================================
   Foto ampliada
   ========================================================================= */

.visor {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 4vw, 56px);
  border: 0;
  background: rgba(0, 0, 0, 0.94);
  color: var(--ink);
}

.visor[open] { display: grid; place-items: center; animation: asoma 400ms var(--ease); }

.visor::backdrop { background: rgba(0, 0, 0, 0.6); }

.visor__figura {
  margin: 0;
  display: grid;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
}

.visor__figura img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  margin: 0 auto;
}

.visor__pie {
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
}

.visor__pie .meta { color: var(--amarillo); }

.visor__boton {
  position: fixed;
  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.3);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 240ms, color 240ms, border-color 240ms;
}

.visor__boton:hover { background: var(--amarillo); border-color: var(--amarillo); color: #000; }

.visor__boton svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* =========================================================================
   Celular
   ========================================================================= */

@media (max-width: 860px) {
  /* Como en la home: textos a la izquierda, todo a 34 px del borde
     (--margen-eje, arriba de todo) */
  .eje-hero { gap: 32px; justify-items: start; text-align: left; }
  .eje-hero__texto { justify-items: start; }
  .eje-hero__titulo { font-size: calc((100vw - 2 * var(--margen-eje)) / (var(--letras, 7) * 0.86)); }
  .eje-hero__intro { text-wrap: pretty; }

  .reproductor { scale: 1; border-radius: 2px; }

  /* Foto arriba, texto abajo, siempre en ese orden */
  .huella,
  .huella:nth-of-type(even) {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 24px;
    padding-block: calc(var(--separacion) / 2);
  }
  .huella:nth-of-type(even) .huella__media { order: 0; }

  .huella__marco { aspect-ratio: 4 / 3; }

  .huella__texto { gap: 14px; }
  .huella__n { font-size: 3rem; }
  .huella__titulo { font-size: 1.5rem; }   /* como en la home */
  .huella__cuerpo { gap: 0.7em; }

  /* La lupa se ve siempre: en el celular no hay hover que la descubra */
  .huella__ampliar { opacity: 1; scale: 1; width: 38px; height: 38px; right: 10px; bottom: 10px; }

  .eje-fin { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .eje-fin__vecinos { grid-template-columns: 1fr; }
  .eje-fin__vecino--sig {
    text-align: left;
    justify-items: start;
    border-left: 0;
    border-top: var(--rule);
    padding-left: 0;
  }
}

/* =========================================================================
   Sin animaciones
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .eje-hero__titulo .letra,
  .eje-hero__intro,
  .reproductor { opacity: 1; translate: none; animation: none; }
  .eje-hero__fecha .cursor { display: none; }

  .eje-hero__texto { translate: none; opacity: 1; }
  .reproductor { scale: 1; }
  .reproductor__circulo::before { display: none; }

  .huella { --p: 1 !important; }
  .huella__marco { clip-path: none; transform: none; }
  .huella__marco img { filter: none; }
  .huella__titulo { opacity: 1; translate: none; }
}


/* ---------- Mirada todavía cerrada (eje.js, cerrada) ---------- */
.eje-cerrada__aviso {
  display: grid;
  justify-items: inherit;
  gap: 22px;
  opacity: 0;
  animation: asoma 900ms var(--ease) var(--video, 1000ms) forwards;
}
.eje-cerrada__cuando {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 600 clamp(1.05rem, 1.6vw, 1.3rem)/1.3 var(--font-display);
  color: var(--amarillo);
}
.eje-cerrada__cuando svg { width: 1em; height: 1em; }
.eje-cerrada .eje-seguir svg { display: none; }