/* =====================================================================
   LANDING GRACIAS, VERSIÓN "CINE" (28-oct)
   Estructura de la referencia de Camilo, llevada a Teletón: un alto de pantalla, una cápsula de vidrio
   centrada arriba con el logo, un distintivo sin caja, el título grande en letra
   regular con UNA palabra destacada y una bajada corta. La referencia destaca con cursiva; Duplet Rounded no
   tiene cursiva, así que destaca con el peso 800 de la misma familia.
   Diferencias con la referencia, a propósito:
   - Iaán no va detrás del texto como el video de la referencia: va en video (desde el 29-oct; antes una foto
     recortada, que sigue con ?foto=1) cortado a la altura de la cintura, en el flujo, bajo el texto y apoyado en
     el borde inferior: ocupa el alto que sobra y nunca queda detrás de las letras (blanco sobre la camiseta
     blanca no se leería). El video es transparente, como la foto: no tiene borde y las fotos pasan detrás. En
     escritorio apaisado se agranda, sale por abajo y se corre para que la cara quede en el eje del texto.
   - Fondo rojo ACCESIBLE (#e12d39, 4,53:1 con el blanco): con el rojo de marca (#f5313e, 3,92:1) la bajada y
     el distintivo no llegarían a AA. Por lo mismo la bajada va en blanco pleno y en 400, no en blanco al 70 %
     y en letra fina como en la referencia. ?fondo=noche deja el negro de la referencia.
   - Tamaños mínimos de 14 px (la referencia baja a 12) y todo el texto escala con --a11y-fs (A/A+/A++).
   - Una pantalla SOLO cuando el contenido cabe: con zoom alto, letra grande o el espaciado de texto de WCAG la
     página hace scroll (WCAG 1.4.10 y 1.4.12) en vez de cortar el texto. El que hace scroll es el documento,
     no un contenedor, para que las flechas y la barra espaciadora funcionen sin tener que enfocar nada.
   - Sin botón de donar ni frases sobre seguir donando (línea editorial, 28-oct): sin el botón, la barra de la
     referencia queda en una cápsula que abraza el logo (a todo el ancho se veía como una franja vacía). Lo
     único que se activa con el teclado es "Pausar", que detiene las fotos que orbitan (WCAG 2.2.2).
   - Lo único que se mueve son Iaán y las fotos de reportajes que orbitan alrededor de él (como el video de la
     referencia); se detienen con "Pausar", con movimiento reducido y con ?rm=1.
   ===================================================================== */

/* Duplet recortada a latín (195 glifos: tildes, ñ, ¡ ¿ y espacio que no se parte incluidos) */
@font-face { font-family: "Duplet Rounded"; src: url("fonts/duplet-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Duplet Rounded"; src: url("fonts/duplet-800-latin.woff2") format("woff2"); font-weight: 800; font-display: swap; }
/* respaldo con las medidas de Duplet (Arial ajustada): si Duplet llega tarde, el texto ya ocupa lo mismo y la
   foto no salta al cambiar la letra. Medido con fontTools sobre los textos de la página */
@font-face { font-family: "Duplet Respaldo"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 400; size-adjust: 96.16%; ascent-override: 100.87%; descent-override: 21.84%; line-gap-override: 10.4%; }
@font-face { font-family: "Duplet Respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 800; size-adjust: 95.93%; ascent-override: 101.12%; descent-override: 21.89%; line-gap-override: 10.42%; }

:root {
  --a11y-fs: 1;
  --rojo-a11y: #e12d39;
  --tinte: #ffd9dc;
  --fondo: var(--rojo-a11y);
  /* el header de respaldo (.gc-nav): los valores de la cápsula blanca de header/header-1.css (.gh1-barra) */
  --vidrio: rgba(255, 255, 255, 0.96);
  --vidrio-borde: rgba(0, 0, 0, 0.08);
  --vidrio-sombra: 0 10px 28px -12px rgba(0, 0, 0, 0.35);
  --bajada: #fff;
  --riel: 24px; /* margen lateral del contenido */
}
/* el header de respaldo sigue blanco sobre el negro, como la cápsula */
html[data-fondo="noche"] {
  --fondo: #000;
  --bajada: rgba(255, 255, 255, 0.78); /* 12,4:1 sobre negro */
}

*,
*::before,
*::after { box-sizing: border-box; }
html,
body { margin: 0; height: 100%; }
html { overflow-x: hidden; }
body {
  background: var(--fondo);
  color: #fff;
  font-family: "Duplet Rounded", "Duplet Respaldo", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.gc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- raíz: una pantalla; si el contenido no cabe, lo que sobra hace crecer el documento ---------- */
.gc {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--fondo);
}

/* En celular, dvh cambia cuando la barra del navegador aparece o desaparece. Como Iaán ocupa el alto flexible
   restante, ese cambio lo redimensionaba durante el scroll. svh mantiene estable la composición. */
@media (max-width: 39.99rem) {
  .gc { height: 100svh; }
}

/* ---------- header de respaldo ----------
   El header estático de index.html: se ve mientras no llegan header/base.js y header-1.js (con red lenta, un
   instante), si no cargan y con ?header=0. Desde el 7-nov (Camilo: "Sí, a blanco") es la cápsula blanca con el logo
   original, como la que arma header-1.js: mismo blanco, radio, borde, sombra y desenfoque, mismo alto y el logo a la
   misma altura y del mismo tamaño en cada modo (52 y 60 px de alto, y 48 a 8 px del borde en el celular apaisado).
   Al armarse solo crece a lo ancho. Si cambia la cápsula de header-1.css, se cambia aquí también */
.gc-navwrap {
  position: relative;
  z-index: 10;
  display: flex;
  flex: none;
  justify-content: center;
  padding: 16px 16px 0;
  padding-top: max(16px, env(safe-area-inset-top));
}
.gc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 24px;
  border-radius: 16px;
  background: var(--vidrio);
  box-shadow: inset 0 0 0 1px var(--vidrio-borde), var(--vidrio-sombra);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
}
/* el logo va en un <picture> (con colores forzados, el blanco): como hijo de .gc-marca se vuelve bloque */
.gc-marca { display: flex; align-items: center; min-width: 0; }
.gc-logo { display: block; height: 26px; width: auto; }


/* ---------- contenido ---------- */
.gc-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}
.gc-texto {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 40px var(--riel) 12px; /* el aire de abajo queda también al final del scroll */
  text-align: center;
  container-type: inline-size;
}
/* el bloque del texto (distintivo, título y bajada); con Alto contraste lleva detrás la zona del color del fondo (.gc-copia::before, junto a la
   órbita). Va antes de los bloques por tamaño: declarado al final pisaba el align-items del teléfono apaisado y
   el distintivo quedaba centrado sobre un título alineado a la izquierda */
.gc-copia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

/* distintivo: dos partes que no se parten; si no caben en una línea, el corte cae en el punto */
.gc-distintivo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 4px;
  margin: 0 0 20px;
  padding: 6px 0;
  color: #fff;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.gc-dparte { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.gc-dparte--2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 2px 0 10px; /* + los 8 px del gap de la parte: 10 y 10 */
  border-radius: 50%;
  background: currentColor;
}
.gc-distintivo-icono { flex: none; width: 16px; height: 16px; fill: var(--tinte); }
/* si las dos partes no caben en una línea, gracias.js marca data-partido y el punto sobra */
/* partido, cada parte va en su propia línea (sin esto, al irse el punto volvían a caber juntas y sin
   separador) */
.gc-distintivo[data-partido] .gc-dparte { flex-basis: 100%; justify-content: center; }
.gc-distintivo[data-partido] .gc-dparte--2::before { display: none; }

/* el título va en MAYÚSCULAS (pedido de Camilo, 6-nov), solo por estilo: en el HTML sigue escrito normal, así sale
   al copiarlo, en el modo lectura y para los buscadores (Chrome igual le entrega al lector de pantalla el texto en
   mayúsculas; los lectores leen esas palabras como palabras). En mayúsculas la misma
   letra se ve más grande y ocupa más ancho: --tit-k la achica en todos los tamaños para que el título conserve sus
   líneas (dos en escritorio) y no le quite alto a Iaán. Con 0,88 quedan las mismas líneas que en minúsculas en
   Chrome, Safari y Firefox, de 320 a 2560 px, con A y A++ (con 0,9 el escritorio quedaba a 7 px de pasar a tres) */
.gc-h1 {
  --tit-k: 0.88;
  max-width: 56rem;
  margin: 0;
  color: #fff;
  font-size: calc(calc(36px * var(--a11y-fs)) * var(--tit-k));
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}
.gc-h1 strong { font-weight: 800; }

.gc-bajada {
  max-width: 36rem;
  margin: 18px auto 0;
  color: var(--bajada);
  font-size: calc(16px * var(--a11y-fs));
  font-weight: 400;
  line-height: 1.4;
  text-wrap: balance;
}
.gc-bajada strong { color: #fff; font-weight: 800; white-space: nowrap; }

/* los saltos suaves solo desde 40rem, como en la referencia */
.gc-sm { display: none; }

/* ---------- Iaán (video o, con ?foto=1, la foto): ocupa el alto que sobra, apoyado abajo ---------- */
.gc-foto {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}
.gc-foto[hidden] { display: none; }
.gc-foto img,
.gc-foto video {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  user-select: none;
  -webkit-user-drag: none;
}
/* el video (1080 x 1130) guarda su forma antes de cargar. Es transparente (Iaán sin fondo): las fotos que orbitan
   pasan por detrás de él como con la foto recortada.
   CENTRADO por su figura en todo tamaño (pedido de Camilo, 7-nov: en escritorio se veía cargado a la derecha): su
   contorno, del codo al pulgar, va del 5,3 % al 93,2 % del ancho del cuadro (promedio del loop), con el centro en el
   49,25 %; el 0,75 % lo deja en el medio, con el mismo aire a cada lado. Si cambia el video, se vuelve a medir
   (_traspaso/qa-scripts/centro.py) */
.gc-foto video {
  aspect-ratio: 1080 / 1130;
  background: transparent;
  transform: translateX(0.75%);
}
/* Safari de iPhone con el modo de bajo consumo no deja arrancar el video y le pone encima un botón de play: se oculta
   y queda Iaán quieto (el póster), como con movimiento reducido. Reglas aparte: un navegador que no conoce estos
   seudoelementos descarta solo la regla que los nombra */
.gc-foto video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.gc-foto video::-webkit-media-controls {
  display: none !important;
}
/* si al texto grande no le deja alto útil, Iaán se va en vez de quedar como una estampilla */
@container (max-height: 120px) {
  .gc-foto img,
  .gc-foto video { display: none; }
}

/* celular vertical bajo (iPhone SE en Safari, Android de 360 con barras): menos aire arriba y el título con
   tope, para que la letra grande no se coma la foto */
@media (max-width: 39.99rem) and (orientation: portrait) and (max-height: 700px) {
  .gc-navwrap { padding-top: max(12px, env(safe-area-inset-top)); }
  .gc-texto { padding-top: 20px; }
  .gc-distintivo { margin-bottom: 12px; padding-block: 0; }
  .gc-h1 { font-size: calc(min(calc(36px * var(--a11y-fs)), max(36px, 6.4svh)) * var(--tit-k)); }
  .gc-bajada { margin-top: 12px; }
  .gc-texto { padding-bottom: 8px; }
}

/* ---------- desde 40rem (sm) ---------- */
@media (min-width: 40rem) {
  :root { --riel: 32px; }
  .gc-navwrap { padding: 24px 24px 0; padding-top: max(24px, env(safe-area-inset-top)); }
  .gc-nav { min-height: 60px; padding: 12px 30px; }
  .gc-logo { height: 30px; }
  .gc-texto { padding-top: 64px; }
  .gc-distintivo { margin-bottom: 28px; padding-block: 8px; font-size: calc(15px * var(--a11y-fs)); }
  .gc-distintivo-icono { width: 18px; height: 18px; }
  .gc-h1 { font-size: calc(calc(48px * var(--a11y-fs)) * var(--tit-k)); }
  .gc-bajada { margin-top: 24px; font-size: calc(17px * var(--a11y-fs)); }
  .gc-sm { display: inline; }
}
/* con A+ y A++ el header de respaldo suma 6 y 12 px abajo, como la cápsula (.gh-header--1 en header-1.css, donde
   está el porqué): sin esto el título bajaba esos px al armarse la cápsula. No en el celular apaisado */
@media (min-width: 40rem) and (min-height: 521px) {
  .gc-navwrap { padding-bottom: calc((var(--a11y-fs) - 1) * 40px); }
}
/* desde 48rem (md) */
@media (min-width: 48rem) {
  .gc-h1 { font-size: calc(calc(60px * var(--a11y-fs)) * var(--tit-k)); }
  .gc-bajada { font-size: calc(18px * var(--a11y-fs)); }
}
/* desde 64rem (lg); con A+ y A++ el título tiene tope y el aire de arriba se achica, para que la foto no
   quede chica (con A, idéntico) */
@media (min-width: 64rem) {
  .gc-texto { padding-top: max(24px, calc(88px - (var(--a11y-fs) - 1) * 160px)); }
  .gc-h1 { font-size: calc(min(calc(72px * var(--a11y-fs)), max(72px, 8.9svh)) * var(--tit-k)); }
  .gc-texto { padding-bottom: 16px; }
}

/* pantallas bajas de escritorio y tablet: se recorta el aire de arriba para que la foto no quede chica */
@media (min-width: 40rem) and (max-height: 820px) {
  .gc-texto { padding-top: max(12px, calc(40px - (var(--a11y-fs) - 1) * 53px)); }
  .gc-distintivo { margin-bottom: 18px; }
}
@media (min-width: 64rem) and (max-height: 820px) {
  .gc-h1 { font-size: calc(min(calc(64px * var(--a11y-fs)), max(64px, 8.9svh)) * var(--tit-k)); }
}
@media (min-width: 40rem) and (max-height: 680px) {
  .gc-texto { padding-top: 24px; }
  .gc-h1 { font-size: calc(calc(48px * var(--a11y-fs)) * var(--tit-k)); }
  .gc-bajada { margin-top: 16px; }
}

/* escritorio apaisado. La foto de ?foto=1 (solo para comparar) ya viene cortada a la altura de la cintura, así
   que se agranda al 160 % y sale por abajo (se corta un poco más el torso, nunca la cara ni el pulgar), y se corre
   a la derecha para que su cara (al 30 % del ancho de la foto) quede en el eje del texto. El video, más abajo */
@media (min-width: 64rem) and (min-aspect-ratio: 5/4) {
  .gc-texto { padding-top: max(16px, calc(56px - (var(--a11y-fs) - 1) * 120px)); }
  /* 16 px (antes 32): con Iaán en plano medio, menos aire bajo el texto lo sube y lo agranda un poco; las puntas
     del pelo quedan a 16 px de la bajada en el peor cuadro */
  .gc-texto { padding-bottom: 16px; }
  .gc-foto { align-items: flex-start; }
  /* tope de 1180 px: en pantallas muy altas la foto no crece sin fin (y no se estira más allá del archivo) */
  .gc-foto img { height: min(160%, 1180px); max-width: none; transform: translateX(20%); }
  /* el video va en PLANO MEDIO (pedido de Camilo, 6-nov: al 176 % quedaba en primer plano, cortado en el pecho): se
     ve entero, de la cabeza a la cintura con la mano en la cadera, apoyado abajo. A lo más 100 %: con el viento las
     puntas del pelo llegan casi al borde de arriba del cuadro (al 0,4 % de su alto, en 6 de cada 10 cuadros pasan
     del 5,5 %), así que nada del cuadro puede quedar fuera de la caja, que recorta. Centrado por su figura, como en
     los demás tamaños (antes, con translateX(20%), se centraba la cara y el cuerpo quedaba cargado a la derecha) */
  .gc-foto video { align-self: flex-end; height: min(100%, 1300px); max-width: none; transform: translateX(0.75%); }
}
/* pantallas grandes y altas (desde 1600 x 1200): el texto crece con ellas para no quedar chico junto a la foto */
@media (min-width: 100rem) and (min-height: 75rem) {
  .gc-distintivo { font-size: calc(17px * var(--a11y-fs)); }
  .gc-distintivo-icono { width: 20px; height: 20px; }
  .gc-h1 { max-width: 72rem; font-size: calc(min(calc(92px * var(--a11y-fs)), max(92px, 8.9svh)) * var(--tit-k)); }
  .gc-bajada { max-width: 44rem; font-size: calc(22px * var(--a11y-fs)); }
}
@media (min-width: 64rem) and (min-aspect-ratio: 5/4) and (max-height: 820px) {
  .gc-texto { padding-top: max(12px, calc(28px - (var(--a11y-fs) - 1) * 53px)); }
}

/* teléfono apaisado y pantallas muy bajas: texto a la izquierda, foto a la derecha a todo el alto */
@media (orientation: landscape) and (max-height: 520px) {
  /* el header de respaldo, como la cápsula aquí: 48 de alto a 8 px del borde (antes 44 a 12; el total sigue en 56) */
  .gc-navwrap { padding-top: max(8px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .gc-nav { min-height: 48px; padding: 8px 20px; }
  .gc-logo { height: 24px; }
  .gc-main { flex-direction: row; align-items: stretch; }
  .gc-texto {
    flex: 1 1 55%;
    align-items: flex-start;
    justify-content: safe center;
    padding: 8px 0 12px max(28px, env(safe-area-inset-left));
    text-align: left;
  }
  .gc-copia { align-items: flex-start; }
  .gc-distintivo { justify-content: flex-start; margin-bottom: 8px; padding: 0; }
  .gc-distintivo[data-partido] .gc-dparte { justify-content: flex-start; }
  .gc-h1 { font-size: calc(min(calc(34px * var(--a11y-fs)), max(34px, 10.5svh)) * var(--tit-k)); }
  .gc-bajada { margin: 12px 0 0; font-size: calc(15px * var(--a11y-fs)); }
  .gc-sm { display: none; }
  .gc-foto { flex: 0 1 45%; margin-top: 20px; justify-content: center; }
}
/* apaisado muy angosto (zoom de 300 a 400 % en escritorio, ventanas chicas): la foto no cabe sin tapar el
   título, así que se va con su columna y el texto toma todo el ancho */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 33rem) {
  .gc-foto,
  .gc-escena { display: none; }
  .gc-texto { flex-basis: 100%; padding-right: max(28px, env(safe-area-inset-right)); }
}

/* ---------- reportajes orbitando (como las pantallas del video de la referencia) ----------
   Las filas de miniaturas giran alrededor de Iaán: entran por un borde, se alejan hacia el centro (donde pasan
   por detrás de él) y salen por el otro borde. Cada fila es un arco de órbita: x = L·sen(φ), z = -D·cos(φ),
   con φ de -90° a 90° a velocidad pareja. Para que el arco sea exacto (sin tirones de velocidad) va en tres
   animaciones con la misma duración, el mismo retraso y el mismo sentido: gc-x mueve x por la propiedad
   translate con una curva seno, gc-z mueve la profundidad y el giro por transform (seno de ida y de vuelta) y
   gc-op hace aparecer y desaparecer. Las miniaturas de una fila se reparten la órbita con retrasos negativos
   (--f), así siempre hay pantallas a la vista. .gc-orbita comparte el espacio 3D (preserve-3d) para que las
   lejanas queden detrás de las cercanas. Movimiento reducido o ?rm=1: las animaciones quedan EN PAUSA, así que
   cada miniatura se queda quieta en su punto de la órbita (una composición fija y repartida).
   Las filas cuelgan del final del texto (--texto-fin, lo mide gracias.js) y no del alto de la pantalla. En
   escritorio la fila de arriba pasa por detrás del título (letra grande, se lee sobre las fotos con su sombra);
   en celular y tablet las filas van justo bajo la bajada, que es letra chica y sobre una foto clara no llegaría a
   4,5:1. La perspectiva se centra 68 px bajo el texto, para que las lejanas no suban hacia él.
   Iaán y el texto van delante (ver la sombra del texto, .gc-copia, al final de esta sección).
   Sin JavaScript la órbita no se muestra: no habría cómo pausarla (WCAG 2.2.2) ni pedir las miniaturas que
   Safari no ve (la carga diferida no detecta las que están giradas en 3D). */
.gc-escena {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: 50% calc(var(--texto-fin, 42vh) + 68px);
  pointer-events: none;
}
html:not([data-js]) .gc-escena { display: none; }
.gc-orbita {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.gc-panel {
  /* la fila fija: --y alto, --w ancho, --L radio horizontal, --D profundidad, --giro inclinación en los
     bordes, --t vuelta completa, --dir sentido */
  position: absolute;
  display: none;
  left: var(--cx, 50%);
  top: calc(var(--y) + var(--dy, 0px));
  width: var(--w);
  height: auto;
  margin-left: calc(var(--w) / -2);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  /* el anillo y una sombra corta: con el brillo blanco y la sombra larga de antes, Firefox sin aceleración por GPU
     bajaba la órbita a 9 a 29 cuadros por segundo (y en Chrome cada capa medía 2 a 3 veces la miniatura) */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.28);
  backface-visibility: hidden;
  animation:
    gc-x var(--t) cubic-bezier(0.37, 0, 0.63, 1) calc(var(--f) * var(--t) * -1) infinite var(--dir, normal),
    gc-z var(--t) linear calc(var(--f) * var(--t) * -1) infinite var(--dir, normal),
    gc-op var(--t) linear calc(var(--f) * var(--t) * -1) infinite var(--dir, normal);
  transition: filter 0.6s ease-out;
  user-select: none;
}
/* mientras la miniatura no llega queda invisible (gracias.js; si no carga, la quita) y al llegar aparece con un
   fundido, no de golpe en medio de la pantalla (con red lenta llegan con la órbita andando). Con filter y no con
   opacity, que es de gc-op */
.gc-panel[data-espera] { filter: opacity(0); }
@media (prefers-reduced-motion: reduce) {
  .gc-panel { transition: none; }
}
/* x = -L·cos(πt): la curva seno de ida y vuelta (cubic-bezier(0.37, 0, 0.63, 1)) */
@keyframes gc-x {
  from { translate: calc(var(--L) * -1) 0; }
  to { translate: var(--L) 0; }
}
/* z = -D·sen(πt): seno de salida hasta el fondo y de entrada de vuelta; el giro acompaña */
@keyframes gc-z {
  0% { transform: translateZ(0) rotateY(var(--giro)); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
  50% { transform: translateZ(calc(var(--D) * -1)) rotateY(0deg); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
  100% { transform: translateZ(0) rotateY(calc(var(--giro) * -1)); }
}
@keyframes gc-op {
  0% { opacity: 0; }
  9% { opacity: 1; }
  91% { opacity: 1; }
  100% { opacity: 0; }
}
/* teléfono apaisado: el arco parte detrás de la zona del texto, así que la miniatura aparece recién al salir de
   ella (antes quedaban rectángulos lavados sobre el final del título) */
@keyframes gc-op-apa {
  0% { opacity: 0; }
  20% { opacity: 0; }
  36% { opacity: 1; }
  91% { opacity: 1; }
  100% { opacity: 0; }
}

/* retrato (celular, tablet vertical y todo lo que no es escritorio apaisado): dos filas, las dos bajo el texto y a
   la altura de la cabeza de Iaán, pasando por detrás de él (como la referencia). La 2 justo bajo la zona del texto
   y la 1 bajo ella: su --y suma el alto de la fila 2 (30vmin·9/16 = 16.9vmin; 24vmin·9/16 = 13.5vmin) y 34 px
   (el rango de --dy más 2 px de aire), para que no se crucen en 3D. --L de 70vw: con 62 los extremos del arco
   (donde casi no avanzan) caían en el borde y las vecinas se tapaban entre sí */
.gc-panel[data-fila="1"] { display: block; --y: calc(var(--texto-fin, 41%) + 8px + 16.9vmin + 34px); --w: 26vmin; --L: 70vw; --D: 420px; --giro: 34deg; --t: 54s; }
.gc-panel[data-fila="2"] { display: block; --y: calc(var(--texto-fin, 41%) + 8px); --w: 30vmin; --L: 70vw; --D: 460px; --giro: 34deg; --t: 48s; --dir: reverse; }
@media (min-width: 40rem) {
  .gc-panel[data-fila="1"] { --w: 20vmin; --y: calc(var(--texto-fin, 35%) + 8px + 13.5vmin + 34px); }
  .gc-panel[data-fila="2"] { --w: 24vmin; }
}
/* escritorio apaisado: las tres filas, más anchas y profundas. Las de abajo, desde el final del texto y no más
   arriba del 42 y el 66 % (en pantallas altas el texto termina antes): la 3 suma el alto de la fila 2
   (12vw·9/16 = 6.75vw) y los 34 px. Los extremos del arco (--L) caen fuera de la pantalla: cada miniatura entra
   por un borde, no aparece pegada a él */
@media (min-width: 64rem) and (min-aspect-ratio: 5/4) {
  /* la fila de arriba pasa por detrás del título, como en la referencia (7-nov; antes iba sobre él y se perdía tras
     la cápsula del header): su alto es una fracción del final del texto, así sigue al título con cualquier alto de
     pantalla y letra */
  .gc-panel[data-fila="1"] { --y: calc(var(--texto-fin, 42vh) * 0.36); --w: 14vw; --L: 58vw; --D: 760px; --giro: 38deg; --t: 72s; }
  .gc-panel[data-fila="2"] { --y: max(42%, calc(var(--texto-fin, 42%) + 68px)); --w: 12vw; --L: 58vw; --D: 640px; --giro: 34deg; --t: 58s; --dir: reverse; }
  .gc-panel[data-fila="3"] { display: block; --y: max(66%, calc(var(--texto-fin, 42%) + 102px + 6.75vw)); --w: 16vw; --L: 60vw; --D: 520px; --giro: 40deg; --t: 66s; }
}
/* escritorio bajo: la fila 3 más angosta, para que con A++ o ?meta=1 no llegue hasta Pausar */
@media (min-width: 64rem) and (min-aspect-ratio: 5/4) and (max-height: 820px) {
  .gc-panel[data-fila="3"] { --w: 14vw; }
}
/* escritorio: detrás del texto las fotos se ven más transparentes (pedido de Camilo, 7-nov: "no se lee bien el
   texto"). Una máscara elíptica sobre la escena las deja al 22 % en el centro del texto y llega entera a su borde, así
   las fotos siguen pasando por detrás pero el texto manda. El centro y el alto salen del final del texto (--texto-fin),
   como las filas. La máscara va en .gc-escena y no en .gc-orbita: en la que lleva preserve-3d aplanaría el 3D */
@media (min-width: 64rem) and (min-aspect-ratio: 5/4) {
  .gc-escena {
    --mascara: radial-gradient(ellipse min(40vw, 640px) calc(var(--texto-fin, 42vh) * 0.46) at 50% calc(var(--texto-fin, 42vh) * 0.68),
      rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.22) 55%, #000 100%);
    -webkit-mask-image: var(--mascara);
            mask-image: var(--mascara);
  }
}
/* teléfono apaisado: la órbita se centra en Iaán (a la derecha) y queda una fila, detrás de su cabeza: aparece y
   se desvanece detrás de la zona del texto y de él, y no se amontona bajo el logo. El punto de fuga va en el
   centro de la órbita (77 %, el mismo --cx de la fila) y no al medio de la pantalla: ahí las que se alejan se
   iban hacia el texto y quedaban lavadas junto al final del título */
@media (orientation: landscape) and (max-height: 520px) {
  .gc-escena { perspective-origin: 77% 32%; }
  .gc-panel[data-fila] { display: none; }
  .gc-panel[data-fila="1"] { display: block; --cx: 77%; --y: 32%; --w: 14vw; --L: 32vw; --D: 380px; --giro: 30deg; --t: 44s;
    animation-name: gc-x, gc-z, gc-op-apa; }
}

/* quietas: con Pausar, ?rm=1 o movimiento reducido (gracias.js parte en pausa y marca data-rm); cada una se
   queda en su punto de la órbita, no en el borde */
html[data-rm="1"] .gc-panel { animation-play-state: paused; }
/* la pestaña oculta ya detiene la animación en el navegador */


/* las fotos pasan por detrás del texto y se ven, como en la referencia (pedido de Camilo del 7-nov: la zona difusa
   que las tapaba las dejaba como rectángulos lavados). El texto se lee sobre ellas por una sombra suave en dos capas:
   una corta que marca el borde de cada letra y una amplia que oscurece apenas lo que hay detrás */
.gc-copia { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 26px rgba(0, 0, 0, 0.5); }
.gc-distintivo-icono { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
/* con Alto contraste vuelve la zona del color del fondo detrás del texto: tapa las miniaturas cercanas */
/* la bajada es letra chica (pide 4,5:1): su sombra amplia es más oscura, para las fotos que se le acercan en escritorio */
.gc-bajada { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.5); }
html[data-contraste="1"] .gc-copia,
html[data-contraste="1"] .gc-bajada { text-shadow: none; }
html[data-contraste="1"] .gc-copia::before {
  content: "";
  position: absolute;
  /* arriba 56 px: con 36 el borde difuso quedaba muy cerca del distintivo y, en teléfono apaisado, la fila que pasa
     por encima lo bajaba de 4,5:1. Abajo basta con 24: las filas cuelgan de aquí (el +68px de las filas) */
  inset: -56px -40px -24px;
  z-index: -1;
  border-radius: 48px;
  background: var(--fondo);
  filter: blur(22px);
  pointer-events: none;
}
/* bajo 64rem la copia llega al riel: con 40 px por lado la caja se salía de la pantalla y en celular la página se
   corría de lado al deslizar (Chrome Android agranda la vista hasta el ancho del contenido). Se queda en el borde
   (el desenfoque se pinta más allá, pero no cuenta para el scroll). No se usa overflow-x: clip en .gc: recortaba
   el texto que no cabe a lo ancho (bajo 320 px, con A++ o el espaciado de texto), que así se puede desplazar */
@media (max-width: 63.99rem) {
  html[data-contraste="1"] .gc-copia::before { left: calc(var(--riel) * -1); right: calc(var(--riel) * -1); }
}

/* sin botón Pausar desde el 7-nov (pedido de Camilo): la pausa (WCAG 2.2.2) es "Pausar animaciones" de
   Accesibilidad, en el header, que pone data-rm en <html> */
/* sin lugar para la órbita en la primera pantalla, o sin ninguna miniatura (gracias.js marca data-sin-orbita): sin
   fotos. La escena queda con visibility y no con display, para que gracias.js pueda seguir midiendo dónde caerían
   las filas y la devuelva al achicar el zoom */
html[data-sin-orbita] .gc-escena { visibility: hidden; }
html[data-sin-orbita] .gc-panel { animation-play-state: paused; }

/* ---------- alto contraste (?contraste=1 o la preferencia guardada) y colores forzados ---------- */
/* el header de respaldo, negro con borde blanco como la cápsula con Alto contraste, y con el logo blanco, que pone
   header/base.js (CSS no puede cambiar el archivo). Por eso espera la marca de base.js (data-gh-logos): con
   ?contraste=1, gracias.js marca el contraste antes de que llegue base.js y, en ese instante, el logo todavía es el
   original de letras negras, que sobre el negro no se leería. Mientras tanto queda blanco con el logo original */
html[data-contraste="1"][data-gh-logos] .gc-nav { background: #000; box-shadow: inset 0 0 0 2px #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-contraste="1"] .gc-bajada { color: #fff; }
/* sin transparencias (preferencia del sistema) o sin backdrop-filter (navegadores viejos): blanco opaco, como la
   cápsula */
@media (prefers-reduced-transparency: reduce) {
  .gc-nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gc-nav { background: #fff; }
}
@media (forced-colors: active) {
  .gc-nav { border: 1px solid CanvasText; }
  .gc-distintivo-icono { fill: currentColor; }
  .gc-dparte--2::before { forced-color-adjust: none; background: CanvasText; }
}
/* con colores forzados el logo es el blanco: en el header de respaldo lo pone el <source> de index.html (también sin
   JavaScript) y en la cápsula, header/base.js; sin ellos va el original de color. Con un tema claro se invierte para
   que no desaparezca (la regla alcanza al <img> dentro del <picture>) */
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .gc-logo { filter: invert(1); }
}