@import url("fonts/fonts.css");

/* ===========================================================================
   NASA Space Apps Comodoro Rivadavia 2026
   Tokens del design system activo (space-apps-comodoro-2026).
   Estética: afiche retro de exploración espacial, grabado sobre azul profundo.
   =========================================================================== */

:root {
  --bg: #07173F;
  --surface: #0042A6;
  --ink: #FFFFFF;
  --accent: #EAFE07;
  --highlight: #2E96F5;
  --yonder: #0960E1;
  --alert: #E43700;

  --ink-dim: rgba(255, 255, 255, 0.74);
  --ink-faint: rgba(255, 255, 255, 0.46);
  --rule: rgba(46, 150, 245, 0.34);
  --paper: #F2EDE4;
  --paper-rule: rgba(7, 23, 63, 0.22);
  --ink-navy: #07173F;
  --rule-soft: rgba(46, 150, 245, 0.16);

  /* El amarillo neón es un color de FONDO y de bloque, no de tinta sobre
     claro: sobre el papel crema da 1.04:1, o sea literalmente invisible.
     `--mark` es «el acento que puede ser tinta»: amarillo sobre azul, azul
     eléctrico sobre papel. Los rellenos amarillos de verdad —cinta, bloque de
     fecha, botón, panel neón— siguen usando --accent, que no cambia nunca. */
  --mark: var(--accent);

  --font-display: "Fira Sans", system-ui, sans-serif;
  --font-body: "Overpass", system-ui, sans-serif;
  --font-mono: "Fira Code", ui-monospace, monospace;

  --xs: 8px;  --sm: 16px; --md: 24px; --lg: 40px;
  /* 140 px arriba y abajo de cada banda dejaban medio viewport en blanco entre
     secciones. 72–108 sigue dando aire sin que la página se sienta hueca. */
  --xl: 64px; --xxl: 104px; --section: clamp(72px, 6vw, 108px);

  /* Estaba fijo en 1200 y sobraba margen muerto; a 1480 se fue al otro
     extremo y las líneas quedaban larguísimas. 1320 es el punto donde el
     bloque llena la pantalla sin que el ojo tenga que viajar para volver. */
  --container: min(1320px, 90vw);
  --gutter: clamp(24px, 3vw, 56px);
}

:where(h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }
*, *::before, *::after { box-sizing: border-box; }

/* El atributo `hidden` vale menos que cualquier regla `display` de esta hoja,
   así que los controles ocultos se veían igual. Esto lo blinda. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* El fondo era `--paper` con el texto en blanco: una pareja que no se puede
     leer. No se notaba porque cada sección pinta el suyo… salvo el footer, que
     no tiene, y quedaba blanco sobre crema. El par correcto del texto blanco
     es el azul profundo. */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

img, svg, video { display: block; max-width: 100%; }

a { color: var(--mark); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--sm); top: var(--sm); z-index: 99; background: var(--accent);
  color: var(--bg); padding: 10px 16px; font-weight: 700; }

/* --------------------------------------------------- textura de impresión -- */

/* Grano fino sobre todo el documento: lo que da el aire de afiche impreso. */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.26;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------- layout --- */

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

section { position: relative; }
.band {
  position: relative;
  padding: var(--section) 0;
  background: var(--bg);
  overflow: hidden;
}

/* Cruces de registro en las esquinas del panel: la marca de imprenta. */
.band::after {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--rule), var(--rule)) left top / 18px 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) left top / 1px 18px no-repeat,
    linear-gradient(var(--rule), var(--rule)) right top / 18px 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) right top / 1px 18px no-repeat,
    linear-gradient(var(--rule), var(--rule)) left bottom / 18px 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) left bottom / 1px 18px no-repeat,
    linear-gradient(var(--rule), var(--rule)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) right bottom / 1px 18px no-repeat;
}

/* Secciones sobre el papel, con tinta azul: el contraste de la lámina. */
.band--paper {
  background: var(--paper);
  color: var(--ink-navy);
  --mark: var(--surface);
}
.band--paper .sec-title,
.band--paper .callout,
.band--paper .history__lead { color: var(--ink-navy); }
.band--paper .prose p { color: rgba(7, 23, 63, 0.76); }
.band--paper .label { color: var(--surface); }
.band--paper .lead { color: rgba(7, 23, 63, 0.7); }
.band--paper .callout { border-left-color: var(--surface); }
.band--paper .step { color: rgba(7, 23, 63, 0.76); }
.band--paper .counters { border-color: var(--paper-rule); }
.band--paper .counter__n { color: var(--surface); }
.band--paper .counter__l { color: rgba(7, 23, 63, 0.55); }

/* Sobre papel el amarillo neón no llega al contraste mínimo: el acento pasa a
   ser el azul eléctrico, que es lo que el manual permite sobre fondo claro. */
.band--paper .chip { color: rgba(7, 23, 63, 0.7); border-color: var(--paper-rule); }
.band--paper .chip[aria-pressed="true"] { color: var(--surface); border-color: var(--surface); }
.band--paper .plate__caption { color: rgba(7, 23, 63, 0.6); }
.band--paper .plate__frame { border-color: #FFFFFF; outline-color: var(--paper-rule); }
.band--paper .logo-slot { color: rgba(7, 23, 63, 0.55); border-color: var(--paper-rule);
  background: rgba(7, 23, 63, 0.03); }
.band--paper .footer a, .band--paper a { color: var(--surface); }
.band--paper .challenge__link { color: var(--surface); }
.band--tight { padding-block: var(--xxl); }

.band--surface {
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 70%, var(--bg)) 0%, var(--bg) 100%);
}

/* Trama de medios tonos: el punteado de impresión retro. */
.band--surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--highlight) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.1;
  pointer-events: none;
}

/* ----------------------------------------------------------- tipografía --- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 900; line-height: 1.05; }
h3 { font-weight: 700; font-size: 22px; line-height: 1.2; }

.sec-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin-bottom: var(--lg);
  max-width: 26ch;
}

/* ------------------------------------------------------------- iconos ---- */

/* Iconografía de línea del manual, en lugar de los emojis. Un emoji trae su
   propio color, su propio grosor y su propia fuente: rompe la pieza entera.
   Esto hereda color y se alinea al texto. */
.ico {
  width: 1em; height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.1em;
  margin-inline-end: 0.42em;
  color: var(--mark);
  opacity: 0.95;
}
.sec-title .ico { width: 0.78em; height: 0.78em; }
.btn .ico { margin-inline-end: 0.5em; color: currentColor; }

.cruz { width: 14px; height: 14px; color: var(--mark); flex: 0 0 auto; }

.coords {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--highlight);
}

.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--highlight);
  margin-bottom: var(--sm);
}

.lead { font-size: 21px; color: var(--ink-dim); max-width: 60ch; }

.prose { display: grid; gap: var(--md); }
.prose p { max-width: 68ch; color: var(--ink-dim); }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose--two { column-count: 2; column-gap: var(--xl); display: block; }
.prose--two p { max-width: none; margin-bottom: var(--md); break-inside: avoid; }

.callout {
  border-left: 2px solid var(--mark);
  padding-left: var(--md);
  color: var(--ink);
  font-size: 20px;
}
.callout--big {
  border: 0;
  padding: 0;
  margin-top: var(--xl);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.12;
  max-width: 22ch;
}

/* Mecánica de revelado por línea: la línea exterior recorta, la interior sube. */
.ln, .line { display: block; overflow: hidden; }
.ln__i, .line__i { display: block; }
.js .ln__i, .js .line__i { transform: translateY(105%); }
.js .reveal { opacity: 0; transform: translateY(24px); }

/* --------------------------------------------------------------- botones -- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  border: 2px solid transparent; border-radius: 0;
  font-family: var(--font-body); font-weight: 700; font-size: 17px;
  letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
  transition: transform 0.12s ease, filter 0.2s ease, background-color 0.2s ease;
}
.btn:active { transform: translateY(2px); }
.btn--lg { padding: 20px 36px; font-size: 19px; }
.btn--primary { background: var(--accent); color: var(--bg); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--accent); }
.btn--ghost:hover { background: rgba(234, 254, 7, 0.12); }

/* ------------------------------------------------------------------ nav --- */

/* La barra arranca transparente sobre el header —que es una foto a sangre, no
   necesita una franja encima— y recién se vuelve sólida cuando empezás a bajar
   y hay contenido pasando por debajo. */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
.nav.is-pegada {
  background: rgba(7, 23, 63, 0.76);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule);
}

.nav__inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--md); min-height: 72px; }

.nav__brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink); text-decoration: none;
}
.nav__mark { display: grid; place-items: center; }
.nav__mark .cruz { width: 15px; height: 15px; color: var(--accent); transition: rotate 0.4s; }
.nav__brand:hover .nav__mark .cruz { rotate: 90deg; }
.nav__name {
  font-family: var(--font-display); font-weight: 400; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
}
/* Dos pesos en el mismo lockup: la marca pesa, la sede acompaña. */
.nav__name b { font-weight: 900; margin-inline-start: 7px; }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav__links a {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 7px;
  color: var(--ink-dim); text-decoration: none;
  font-family: var(--font-mono); font-weight: 400; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-block: 6px;
  transition: color 0.2s;
}
.nav__n { font-size: 10px; color: var(--highlight); opacity: 0.8; }

/* El subrayado crece desde la izquierda en vez de aparecer de golpe: es el
   detalle que separa un enlace con hover de un enlace con oficio. */
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-end: 0;
  block-size: 2px; inline-size: 100%;
  background: var(--accent);
  scale: 0 1; transform-origin: 0 50%;
  transition: scale 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { scale: 1 1; }
.nav__links a[aria-current="page"] .nav__n { color: var(--accent); opacity: 1; }

.nav__cta {
  border: 1px solid var(--accent);
  color: var(--accent) !important;
  padding: 9px 17px !important;
  transition: background-color 0.2s, color 0.2s;
}
.nav__cta:hover, .nav__cta:focus-visible { background: var(--accent); color: var(--ink-navy) !important; }

/* Línea de avance al pie de la barra: dice cuánto queda sin ocupar altura. */
.nav__progreso {
  position: absolute; inset-inline: 0; inset-block-end: -1px;
  block-size: 2px; overflow: hidden;
}
.nav__progreso i {
  display: block; block-size: 100%; inline-size: 100%;
  background: linear-gradient(90deg, var(--highlight), var(--accent));
  scale: 0 1; transform-origin: 0 50%;
}

.nav__toggle {
  display: none; align-items: center; gap: 10px;
  background: none; border: 1px solid var(--rule); color: var(--ink);
  padding: 10px 14px; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.1em; cursor: pointer;
}
.nav__bars { display: grid; gap: 4px; }
.nav__bars i { display: block; inline-size: 16px; block-size: 1.5px; background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .nav, .nav__links a::after, .nav__mark .cruz { transition: none; }
}

/* ============================================================== 1. HERO === */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; flex-wrap: wrap;
  padding-block: 120px var(--xl);
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 76% 14%, rgba(9, 96, 225, 0.32) 0%, transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 26%, var(--bg)) 0%, var(--bg) 58%);
}

.hero__sky { position: absolute; inset: 0; pointer-events: none; }

/* Trama de puntos sobre el header entero: lo que lo vuelve duotono impreso en
   lugar de un degradado digital. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: radial-gradient(#07173F 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0.3;
  mix-blend-mode: multiply;
}
.hero__sky { z-index: 1; }

.sky__far, .sky__mid, .sky__near, .sky__orbits { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky__orbits { opacity: 0.3; }
.sky__mid { opacity: 0.85; }
.sky__near { opacity: 1; }

/* Arco de la Tierra entrando por abajo: profundidad sin cargar una foto. */
/* El arco de la Tierra se dimensionaba en vw, así que en pantallas anchas la
   esfera crecía sin control mientras el alto del header no. Ahora lo que se fija
   es la ALTURA del casquete visible, y el diámetro tiene tope. */
/* Los dos cuerpos orbitan al astronauta: viven dentro de su contenedor y se
   posicionan respecto de él, no del fondo. Uno arriba y detrás, el otro abajo
   y adelante, para que la figura quede metida entre los dos planos. */
.hero__body { position: absolute; }
.hero__body img { width: 100%; height: auto; display: block; }
/* La Tierra, esfera entera y grande, detrás de la figura y saliendo de cuadro
   por arriba a la derecha: el encuadre del afiche. Como horizonte al pie el
   header se leía como un paisaje, que es un género distinto —ninguna pieza de
   la marca pone suelo bajo el astronauta. */
/* Medidas de escritorio: en porcentaje del contenedor, que es donde la escena
   fue compuesta. En pantalla chica no sirven —los mínimos de la clamp se
   imponen y los cuerpos quedan enormes respecto de la figura— y por eso el
   bloque de mobile las reescribe en vw. Son dos comportamientos distintos a
   propósito, no una medida que sirva para los dos casos. */
.hero__body--earth {
  width: clamp(230px, 62%, 520px);
  right: -22%; top: -26%;
  opacity: 0.95; z-index: 0;
}
.hero__body--moon { width: clamp(68px, 13%, 124px); left: -14%; top: 34%; opacity: 0.9; z-index: 1; }
.hero__body--mars { width: clamp(56px, 13%, 112px); left: -6%; bottom: 26%; opacity: 0.95; z-index: 3; }

/* Papel milimetrado detrás de todo: la trama del manual, apenas visible.
   Da escala al vacío, que si no se lee como un fondo plano. */
.hero__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 50% 40%, #000 0%, transparent 72%);
}
.hero__grid svg { width: 100%; height: 100%; display: block; }

.hero__inner {
  position: relative; z-index: 4; width: 100%;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center; gap: var(--xl);
}

.hero__copy { max-width: none; }

.hero__brandline {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--highlight); margin-bottom: var(--lg);
  overflow: hidden;
}

.hero__title {
  font-size: clamp(44px, 7vw, 96px);
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.0;
  margin-bottom: var(--md);
  /* Desalineación de registro: el truco de impresión mal alineada. */
  text-shadow: 0.055em 0.045em 0 rgba(46, 150, 245, 0.42);
}

.hero__invite { font-size: clamp(18px, 2vw, 23px); color: var(--ink-dim);
  margin-bottom: var(--md); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sm); }

.hero__figure { position: relative; display: grid; place-items: center; }

/* Forma contenedora circular con líneas concéntricas, como pide el manual.
   El arte es la ilustración de marca, no un dibujo propio. */
/* Escena del header, por capas.
   Cada capa se mueve a distinta velocidad con el scroll y la figura hace un
   acercamiento lento de cámara. El marco recorta: lo que escala es la imagen
   por dentro, así el encuadre no se mueve. */
.hero__figure {
  position: relative;
  min-height: clamp(460px, 64vh, 640px);
  align-self: stretch;
}

/* La figura va recortada, sin marco: flota sobre el azul como en la pieza de
   referencia. Encuadrarla en una caja la devuelve a «foto pegada», que es
   justamente lo que el collage evita. */
.hero__astro {
  position: absolute;
  inset-block: 0;
  inset-inline: -8% -12%;
  z-index: 2;
}
.hero__astro picture { display: block; width: 100%; height: 100%; }
.hero__astro img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 50% 72%;
  /* Halo frío: separa la figura del fondo sin sombra negra, que el manual no usa. */
  filter: drop-shadow(0 0 40px rgba(46, 150, 245, 0.28));
}

/* Marcas de encuadre, sueltas alrededor de la figura: el visor de cámara del
   manual, pero sin encerrarla. */
.hero::after {
  content: ""; position: absolute; inset: 22px; z-index: 4; pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 26px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 2px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 26px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 2px 26px no-repeat;
}

/* Crédito de la foto, en monoespaciada: dato técnico, como el resto. */
.hero__tag {
  position: absolute;
  inset-block-end: 6%;
  inset-inline-end: 2%;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--highlight); opacity: 0.75;
}

/* Capa del vidrio del visor: queda lista y vacía hasta que llegue el PNG. */
.hero__glass {
  position: absolute;
  inset-block: 0;
  inset-inline: -6% -14%;
  pointer-events: none;
  background-size: cover;
  background-position: 22% 72%;
}

.hero__pause {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  z-index: 4;
  background: rgba(7, 23, 63, 0.82);
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
}
.hero__pause:hover { color: var(--accent); border-color: var(--accent); }

/* El SVG dibujado queda solo dentro del panel de la experiencia, donde cumple
   una función: es ahí donde se compone la foto en el visor. */
.astro { width: min(100%, 440px); }

/* ================================ CONVERTITE EN ASTRONAUTA ============== */

/* La insignia se dibuja en un canvas; acá sólo va la caja que la contiene.
   En teléfono el panel ocupa la pantalla entera: un diálogo centrado con
   márgenes deja la insignia del tamaño de una estampilla, que era el problema
   más grande que tenía esto en mobile. */

.insig { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.insig[hidden] { display: none; }

.insig__velo {
  position: absolute; inset: 0;
  background: rgba(5, 14, 39, 0.9);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.insig__panel {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  grid-template-areas: "cabeza cabeza" "escena ctrl";
  inline-size: min(1000px, 94vw); max-block-size: 92vh;
  background: linear-gradient(200deg, #0A2159 0%, #050E27 70%);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.insig__head {
  grid-area: cabeza;
  display: flex; align-items: center; justify-content: space-between; gap: var(--md);
  padding: var(--sm) var(--md);
  border-bottom: 1px solid var(--rule);
}
.insig__t {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
}
.insig__x {
  background: none; border: 1px solid var(--rule); color: var(--ink-dim);
  inline-size: 36px; block-size: 36px; font-size: 20px; line-height: 1;
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.insig__x:hover, .insig__x:focus-visible { color: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------- escena -- */

.insig__escena {
  grid-area: escena; position: relative;
  display: grid; place-items: center;
  padding: var(--md);
  min-block-size: 0;
}
.insig__lienzo {
  inline-size: min(100%, 56vh); block-size: auto; aspect-ratio: 1;
  display: block; touch-action: none;   /* el pellizco es nuestro, no del navegador */
  border-radius: 50%;
  outline-offset: 6px;
}
.insig.tiene-foto .insig__lienzo { cursor: grab; }
.insig.tiene-foto .insig__lienzo.is-arrastrando { cursor: grabbing; }

/* La cámara se monta encima de la insignia, recortada en redondo: se ve en el
   mismo lugar donde va a quedar la foto. */
.insig__escena video {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: min(100%, 56vh); aspect-ratio: 1;
  object-fit: cover; border-radius: 50%;
  border: 2px solid var(--accent);
  scale: -1 1;                           /* espejo, como un espejo de verdad */
  display: none;
}
.insig.filmando .insig__escena video { display: block; }
.insig__disparo { position: absolute; inset-block-end: var(--md); display: none; }
.insig.filmando .insig__disparo { display: inline-flex; }

/* --------------------------------------------------------------- panel --- */

.insig__ctrl {
  grid-area: ctrl;
  display: grid; align-content: start; gap: var(--sm);
  padding: var(--md);
  border-inline-start: 1px solid var(--rule);
  overflow-y: auto;
}
.insig__lead {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.25; color: var(--ink);
}
.insig__lead span { display: block; font-family: var(--font-body); font-weight: 400;
  font-size: 15px; color: var(--ink-dim); margin-block-start: 6px; }

.insig__acciones { display: flex; flex-wrap: wrap; gap: var(--xs); }

/* Los ajustes no existen hasta que hay foto: mostrarlos deshabilitados es
   ruido en una pantalla que ya tiene poco lugar. */
.insig__ajuste { display: none; gap: var(--sm); align-items: center; }
.insig.tiene-foto .insig__ajuste { display: grid; grid-template-columns: 1fr auto; }
.insig__row { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: var(--xs); }
.insig__row span, .insig__alias span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.insig__row input[type="range"] { inline-size: 100%; accent-color: var(--accent); }
.insig__quitar {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
  text-decoration: underline; text-underline-offset: 3px;
}
.insig__quitar:hover { color: var(--accent); }

.insig__alias { display: grid; gap: 6px; }
.insig__alias input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; padding: 11px 13px;
}
.insig__alias input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.insig__nota {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  letter-spacing: 0.03em; color: var(--ink-faint);
}

.insig__cierre { display: grid; gap: var(--xs); justify-items: start; margin-block-start: var(--xs); }
.insig__cierre .btn { inline-size: 100%; justify-content: center; }
.insig__inscribirme {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
  padding-block: 6px;
}
.insig__inscribirme:hover { color: var(--accent); }

/* -------------------------------------------------------------- mobile --- */

@media (max-width: 860px) {
  /* Pantalla completa y en columna: la insignia arriba, lo que se toca abajo,
     que es donde llega el pulgar. `dvh` y no `vh` porque con `vh` la barra del
     navegador tapa el botón de descarga justo cuando hace falta. */
  .insig__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cabeza" "escena" "ctrl";
    grid-template-rows: auto auto minmax(0, 1fr);
    inline-size: 100vw; max-block-size: none;
    block-size: 100dvh; border: 0;
  }
  .insig__escena { padding: var(--sm) var(--sm) 0; }
  /* 38vh y no más: con la insignia más grande el botón de descargar quedaba
     abajo del borde de la pantalla y había que scrollear para encontrar la
     acción principal. */
  .insig__lienzo, .insig__escena video { inline-size: min(100%, 38vh); }
  /* Las dos opciones de foto comparten renglón: son alternativas entre sí, no
     una lista, y apiladas se comían dos renglones de los pocos que hay. */
  .insig__acciones { flex-wrap: nowrap; }
  .insig__acciones .btn { flex: 1 1 0; min-inline-size: 0; padding-inline: var(--xs); }
  .insig__ctrl {
    border-inline-start: 0; border-block-start: 1px solid var(--rule);
    padding: var(--sm) var(--gutter) calc(var(--md) + env(safe-area-inset-bottom));
    gap: var(--xs);
  }
  .insig__lead { font-size: 18px; }
  .insig__lead span { font-size: 14px; }
  .insig__acciones .btn { flex: 1 1 auto; justify-content: center; }
  .insig__nota { font-size: 10px; }
}

@media (max-width: 860px) and (max-height: 680px) {
  /* Teléfonos bajos: la insignia cede altura para que los botones entren. */
  .insig__lienzo, .insig__escena video { inline-size: min(100%, 36vh); }
  .insig__lead { display: none; }
}

/* ====================================================== 2/3. ORGANIZADORES */

.strip { border-block: 1px solid var(--rule-soft); }
.organiza {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--xl); align-items: start;
}
.organiza__col { display: grid; gap: var(--md); }
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }

/* Un hueco de logo tiene que verse como un hueco DISEÑADO. Con borde punteado
   y fondo lavado se leía como un error de carga de la página; con marco fino,
   proporción fija y rótulo numerado se lee como una grilla esperando su
   contenido, que es lo que es. */
.logo-slot {
  display: grid; align-content: center; justify-items: center; gap: 6px;
  aspect-ratio: 16 / 7;
  padding: var(--sm);
  border: 1px solid var(--rule);
  background: linear-gradient(150deg, rgba(46, 150, 245, 0.1), rgba(7, 23, 63, 0.2));
  text-align: center;
}
.logo-slot__n {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  line-height: 1.25; color: var(--ink);
}
.logo-slot__p {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.logo-slot--lead { aspect-ratio: 16 / 9; border-color: var(--highlight); }

/* ------------------------------------------------------ riel de sección -- */

/* La hoja de marca numera cada pieza (01 · FLYER PRINCIPAL). Acá hace lo
   mismo: ordena la lectura y trae el registro de ficha técnica. */
.rail {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--highlight);
}
.rail__n {
  display: grid; place-items: center;
  inline-size: 26px; block-size: 26px;
  border: 1px solid currentColor;
  font-size: 11px; letter-spacing: 0.02em;
}
.rail__t { position: relative; padding-inline-end: 40px; }
.rail__t::after {
  content: ""; position: absolute; inset-inline-end: 0; inset-block-start: 50%;
  inline-size: 28px; block-size: 1px; background: currentColor; opacity: 0.5;
}
.band--paper .rail, .neon .rail { color: var(--ink-navy); }

/* ============================================= 4.1 APERTURA TIPOGRÁFICA === */

.opener { display: grid; align-items: center; overflow: hidden; }
.opener__bg { position: absolute; inset: 0; opacity: 0.4; pointer-events: none; }
.opener__bg svg { width: 100%; height: 100%; }
.opener__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--xxl); align-items: end;
}

.opener__q {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 6.6vw, 92px); line-height: 1.02;
  letter-spacing: 0.01em; margin-bottom: var(--xl);
  text-shadow: 0.04em 0.035em 0 rgba(46, 150, 245, 0.34);
}
.opener__lines { display: grid; gap: var(--sm); font-size: clamp(19px, 2.2vw, 26px);
  color: var(--ink); max-width: 46ch; }
.opener__lines .line:last-child .line__i { color: var(--accent); }

/* ================================================ 4.2 BANDA DE CIFRAS ===== */

/* Las cifras pasan de renglón a ficha: cada una con su número de orden, su
   cifra y su rótulo, separadas por reglas. Alineadas en una fila se leían como
   un texto; en columnas con marco se leen como un dato, que es lo que son. */
.counters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin-bottom: var(--xxl);
  border-block: 1px solid var(--rule);
}
.counter {
  display: grid; gap: 6px; align-content: start;
  padding: var(--lg) var(--md);
  border-inline-start: 1px solid var(--rule);
}
.counter:first-child { border-inline-start: 0; padding-inline-start: 0; }
.counter__k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--highlight); opacity: 0.7;
}
.counter__n {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(54px, 9vw, 128px); line-height: 0.9;
  letter-spacing: -0.02em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.counter__l { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); }

@media (max-width: 700px) {
  .counters { grid-template-columns: 1fr; }
  .counter { border-inline-start: 0; border-block-start: 1px solid var(--rule); padding-inline: 0; }
  .counter:first-child { border-block-start: 0; }
}

/* ======================================== 4.3 PARTIDO CON MEDALLÓN ======== */

.split__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--xxl); align-items: center; }
.split__media { position: relative; display: grid; place-items: center; }

/* El medallón se salía del contenedor y, con la Tierra fotográfica adentro, se
   comía la mitad derecha de la pantalla y se cortaba contra el borde. Ahora
   queda contenido y con los anillos visibles, que son los que lo convierten en
   medallón y no en una foto redonda suelta. */
.medallion {
  position: relative; aspect-ratio: 1;
  width: min(100%, 420px);
  margin: 0 auto;
}
.medallion picture, .medallion img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  display: block;
}
.medallion__ring {
  position: absolute; inset: -18px; border-radius: 50%;
  border: 1px solid var(--mark); opacity: 0.85;
}
.medallion__ring::after {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  border: 1px dashed var(--rule-soft);
}

/* ================================================ 4.4 QUÉ PODÉS CREAR ===== */

.create { overflow: hidden; }
.create__list {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4.4vw, 58px); line-height: 1.1;
  max-width: 24ch; margin-bottom: var(--lg);
}
.create__after { font-size: clamp(19px, 2.2vw, 26px); color: var(--accent); margin-bottom: var(--md); }
/* Marte entraba apenas por el borde y a 180 px: el hueco grande de la derecha
   quedaba igual de vacío. Más grande y más adentro, ocupa ese hueco y además
   se cruza con la tipografía, que es lo que hace el afiche. */
/* Marte se había ido a la esquina y quedaba colgado, sin relación con nada.
   Acercarlo al texto y dejar que la tipografía le pase por encima es lo que
   los vuelve una sola composición: en el afiche los cuerpos siempre tocan
   alguna otra cosa, nunca flotan solos en un margen. */
.create__orbiting {
  position: absolute;
  right: clamp(24px, 9vw, 150px); top: 34%;
  width: clamp(150px, 20vw, 290px);
  opacity: 0.92; z-index: 0;
}

/* ====================================================== 4.5 ROLES ========= */

.veni {
  display: grid; gap: var(--sm);
  margin-block: var(--xl);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(24px, 3.8vw, 50px); line-height: 1.12;
  text-transform: none;
}
.veni .ln__i { color: var(--ink); }
.roles .prose + .veni { margin-top: var(--xxl); }

/* El cierre va DENTRO del bloque, así que heredaba los 50 px de la tipografía
   grande y competía con las tres preguntas en vez de rematarlas. */
.veni__pie {
  font-family: var(--font-body); font-weight: 400;
  font-size: 17px; line-height: 1.6;
  color: var(--ink-dim);
  max-width: 44ch;
}

/* ================================================= 4.6 CIFRA ENORME ======= */

.history { overflow: hidden; }
.history__inner { position: relative; z-index: 2; }
.history__lead { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.5; max-width: 42ch;
  color: var(--ink-dim); margin-bottom: var(--lg); }
/* Estaba a -90 px: el borde de la ventana la partía al medio y el pedazo que
   quedaba se leía como un error, no como un cuerpo saliendo de cuadro. */
.history__moon { position: absolute; right: 3%; bottom: 10%; width: clamp(180px, 20vw, 300px); opacity: 0.4; }
.history__moon img { width: 100%; height: auto; display: block; }

/* ================================================ 4.8 PASOS ============== */

.steps { overflow: hidden; }
/* Tres pasos cortos apilados en una columna angosta dejaban media pantalla
   vacía. En fila, cada uno con su marco, llenan el ancho y además se leen como
   el panel «¿Cómo participar?» de la referencia, que es exactamente esto. */
.steps__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0; position: relative; z-index: 2; margin: 0; padding: 0; list-style: none;
  border-block: 1px solid var(--rule);
}
.step {
  display: grid; gap: 12px; align-content: start;
  padding: var(--lg) var(--md);
  border-inline-start: 1px solid var(--rule);
  color: var(--ink-dim); font-size: 16px; line-height: 1.6;
}
.step:first-child { border-inline-start: 0; padding-inline-start: 0; }
.step p { margin: 0; }
.step__t {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  line-height: 1.2; color: var(--ink); margin: 0;
}
.steps__cta { margin-top: var(--lg); }

@media (max-width: 780px) {
  .step { border-inline-start: 0; border-block-start: 1px solid var(--rule); padding-inline: 0; }
  .step:first-child { border-block-start: 0; }
}
/* Numeración de ficha técnica: 01 / 02 / 03 en monoespaciada dentro de un
   recuadro, igual que el panel «¿Cómo participar?» de la referencia. */
.step__n {
  flex: 0 0 auto;
  display: grid; place-items: center;
  inline-size: 38px; block-size: 38px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 400;
  letter-spacing: 0.04em; line-height: 1;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.steps__trace { display: none; }

/* ================================================ 5. GALERÍA ============= */

.gallery__filters { display: flex; gap: var(--xs); margin-block: var(--lg) var(--xl); }
.chip {
  background: transparent; border: 1px solid var(--rule); color: var(--ink-dim);
  padding: 10px 20px; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* Estas reglas son de la GALERÍA y tienen que quedar encerradas en ella.
   Sueltas alcanzaban también a las placas de collage —que llevan la misma
   clase `plate`— y les metían un `grid-column: span 7` dentro de una grilla de
   una sola columna: el contenedor inventaba siete columnas y la foto terminaba
   440 px de ancho en una pantalla de 375. Era lo que rompía la sección de
   «No tenés que ser astronauta». */
.notebook { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--md); }
.notebook .plate { grid-column: span 4; }
.notebook .plate:nth-child(4n + 1) { grid-column: span 5; transform: translateY(18px); }
.notebook .plate:nth-child(4n + 2) { grid-column: span 7; }
.notebook .plate:nth-child(4n + 3) { grid-column: span 7; transform: translateY(26px); }
.notebook .plate:nth-child(4n + 4) { grid-column: span 5; }

.notebook .plate { --tilt: 0deg; }
.notebook .plate:nth-child(3n + 1) { --tilt: -1.6deg; }
.notebook .plate:nth-child(3n + 2) { --tilt: 1.2deg; }
.notebook .plate:nth-child(3n) { --tilt: -0.7deg; }

/* Polaroid pegada: borde de papel, leve rotación y una cinta arriba. */
.notebook .plate { transform: rotate(var(--tilt)); }
.plate__frame {
  position: relative; aspect-ratio: 3 / 2;
  border: 10px solid var(--paper);
  border-bottom-width: 34px;
  outline: 1px solid var(--paper-rule);
  display: grid; place-items: center; padding: var(--md);
  color: var(--ink-faint); font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.1em; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(46,150,245,0.07) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, rgba(9,96,225,0.22), rgba(7,23,63,0.6));
}
.plate__frame::before {
  content: "";
  position: absolute;
  inset-block-start: -22px;
  inset-inline-start: 50%;
  width: 72px; height: 22px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(242, 237, 228, 0.5);
  border: 1px solid var(--paper-rule);
}
.plate__caption { margin-top: 10px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.1em; color: var(--ink-faint); transform: rotate(calc(var(--tilt) * -1)); }

/* ================================================ 6. DESAFÍOS ============ */

.challenges-band .lead { margin-bottom: var(--xl); }
.challenges { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--lg) var(--md); }

.challenge {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); background: rgba(9, 96, 225, 0.08);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.challenge:hover { border-color: var(--highlight); transform: translateY(-4px); }

.challenge__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(46,150,245,0.08) 0 2px, transparent 2px 14px),
    linear-gradient(150deg, var(--surface) 0%, var(--bg) 100%);
}
.challenge__media picture { display: block; width: 100%; height: 100%; }
.challenge__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.challenge:hover .challenge__media img { transform: scale(1.05); }

.challenge__num {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  background: var(--bg); color: var(--accent);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; padding: 6px 12px;
}
.challenge__body { display: flex; flex-direction: column; gap: 12px; padding: var(--md); flex: 1; }
.challenge__title { font-size: 19px; }
.challenge__sum { font-size: 15px; color: var(--ink-dim); margin: 0; }
.challenge__link { margin-top: auto; }

/* ================================================ 7. CIERRE ============== */

.closing {
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 62%, var(--bg)) 0%, var(--bg) 70%);
}
.closing__sky { position: absolute; inset: 0; opacity: 0.6; pointer-events: none; }
.closing__sky svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.closing__inner { position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--xl); align-items: center; }
.closing__copy { display: grid; gap: var(--lg); justify-items: start; }
.closing__title {
  font-size: clamp(38px, 6.4vw, 82px); text-transform: uppercase; letter-spacing: 0.03em;
  text-shadow: 0.045em 0.04em 0 rgba(46, 150, 245, 0.38);
}
.closing__patch { justify-self: center; width: min(100%, 360px); }

/* ================================================ 8. FOOTER ============== */

.footer { border-top: 1px solid var(--rule); padding-block: var(--xxl) var(--xl); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--xl); }
.footer h3 { font-size: 13px; font-family: var(--font-mono); font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--highlight); margin-bottom: var(--sm); }
.footer p, .footer li { color: var(--ink-dim); font-size: 15px; }
.footer li { margin-bottom: 8px; }
.footer a { color: var(--ink-dim); text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer__legal { margin-top: var(--xl); padding-top: var(--md); border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-faint); }

/* ---------------------------------------------------------------- ficha -- */

/* Columna de datos en mono, como las fichas técnicas de los afiches. Son datos
   reales del evento: llena la derecha sin inventar contenido. */
.ficha {
  display: grid; gap: var(--md);
  border-top: 2px solid var(--mark);
  padding-top: var(--md);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.ficha dt { color: var(--highlight); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 11px; margin-bottom: 4px; }
.ficha dd { color: var(--ink-dim); margin: 0; }
.ficha a { color: var(--mark); text-decoration: none; }
.ficha a:hover { text-decoration: underline; }
.band--paper .ficha dt { color: var(--surface); }
.band--paper .ficha dd { color: rgba(7, 23, 63, 0.74); }
.band--paper .ficha a { color: var(--surface); }

/* ------------------------------------------------------- marcas de lápiz -- */

/* Resaltador: el trazo amarillo por detrás de la palabra, como en la referencia.
   Va detrás del texto, nunca como fondo de bloque. */
/* Subrayado de marcador.

   Antes era un degradado de fondo posicionado al 72 % de la caja de línea, y
   ese 72 % cae en un lugar distinto según la altura de línea de cada bloque:
   en el header le pasaba por el medio a la palabra, como un tachado. Ahora lo
   posiciona la tipografía misma, con lo cual queda siempre bajo la base, y
   `skip-ink: none` lo mantiene continuo como un trazo hecho a mano. */
.hl {
  display: inline;
  text-decoration-line: underline;
  text-decoration-color: var(--mark);
  text-decoration-thickness: 0.17em;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: none;
}
/* El subrayado es amarillo, así que el texto de encima nunca puede serlo.
   En «O algo que todavía nadie imaginó» el párrafo ya venía en acento y la
   marca desaparecía contra su propia letra. */
.hl { color: var(--ink); }
/* El subrayado lo resuelve --mark, pero el color del texto no: sin esta línea
   el resaltado queda blanco sobre el papel crema y desaparece. */
.band--paper .hl { color: var(--ink-navy); }

/* Punto rojo suelto: elemento gráfico recurrente de los afiches. */
/* Los puntos rojos del manual son puntuación gráfica, no contenido: van
   DETRÁS del texto. A z-index 3 caían encima y partían palabras al medio. */
.dot {
  position: absolute;
  border-radius: 50%;
  background: var(--alert);
  pointer-events: none;
  z-index: 0;
}
.dot--a { width: 54px; height: 54px; }
.dot--b { width: 26px; height: 26px; }

/* ------------------------------------------------------------- pendiente -- */

.pending {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule); padding: 6px 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint);
}

/* ====================================== ADAPTACIÓN A PANTALLA CHICA ====== */

/* Los tokens de espacio bajan de golpe en teléfono. 56 px de margen a cada
   lado de una pantalla de 375 dejan 263 px útiles: el título entra cortado y
   todo lo demás se amontona. */

@media (max-width: 1100px) {
  .create__orbiting { opacity: 0.3; }
}

@media (max-width: 760px) {
  /* Sólo los tokens y las dos reglas sueltas que se perdieron. El tratamiento
     del header en teléfono —apilado, figura arriba, cuerpo del título, botones
     al ancho— vive más abajo, en su propio bloque, y es el que manda. */
  :root { --section: 96px; --xxl: 64px; --gutter: 16px; }
  body { font-size: 17px; }
  .challenges { grid-template-columns: minmax(0, 1fr); }
  .hero, .opener { min-height: auto; }
  .opener { padding-block: var(--section); }
  .create__orbiting { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .challenge, .challenge__media img, .btn, .chip { transition: none; }
  .plate, .plate:nth-child(4n + 1), .plate:nth-child(4n + 3) { transform: none; }
}

/* ============================================ COLLAGE FOTOGRÁFICO ========= */

/* La foto no se apoya en la página: se pega. Borde de papel, giro mínimo y
   una cinta en la esquina. Es el gesto que más se repite en el material de
   marca, y lo que separa un sitio con fotos de un sitio con collage. */
.plate--foto {
  position: relative;
  margin: 0;
  transform: rotate(var(--tilt, -2deg));
  background: var(--paper);
  padding: 10px 10px 0;
  outline: 1px solid var(--paper-rule);
  box-shadow: 0 18px 44px rgba(3, 10, 28, 0.42);
}
.plate--foto picture { display: block; }
.plate--foto img { display: block; width: 100%; height: auto; }

.plate__tape {
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: -16px;
  inline-size: 92px; block-size: 26px;
  transform: rotate(-24deg);
  background: var(--accent);
  opacity: 0.92;
  /* Bordes dentados, como cinta cortada a mano. */
  clip-path: polygon(0 10%, 6% 0, 14% 12%, 100% 4%, 96% 96%, 10% 100%, 2% 88%);
}

.plate__pie {
  padding: 9px 2px 11px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-navy);
}

/* Flotadas: el texto las rodea, como en una página armada a mano. */
.roles__media, .ready__media {
  float: inline-end;
  inline-size: clamp(230px, 34%, 400px);
  margin: 6px 0 var(--lg) var(--lg);
  shape-margin: 18px;
}
/* Dos placas, una debajo de la otra, con la de abajo corrida: apiladas a la
   perfección se leen como una grilla, y lo que busca el collage es lo
   contrario —que parezcan dos fotos dejadas ahí—. */
.roles__media { display: grid; gap: var(--lg); }
.roles__media .plate--foto:nth-child(3) { margin-inline-start: 12%; }
.roles__media { --tilt: -2.6deg; }
.ready__media { --tilt: 2.4deg; }

@media (max-width: 760px) {
  .roles__media, .ready__media {
    float: none;
    inline-size: min(100%, 380px);
    margin: 0 auto var(--lg);
  }
}

/* ============================================ PANEL NEÓN ================= */

/* Amarillo a sangre con tinta azul encima. El manual limita el amarillo al
   10 % de la pieza, no a un subrayado: donde va, va entero. Sobre este fondo
   el texto navy da 15:1 de contraste, muy por encima del mínimo. */
.neon {
  position: relative;
  /* La Luna se sale por arriba del panel. `clip` con margen deja que asome sin
     abrir scroll horizontal, que es lo que pasaría con overflow visible.
     Donde no haya soporte simplemente recorta, que es como estaba. */
  overflow: clip;
  overflow-clip-margin: 110px;
  background: var(--accent);
  color: var(--ink-navy);
}
.neon__grid { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.neon__grid svg { width: 100%; height: 100%; }
.neon__grid g { stroke: var(--ink-navy) !important; }

.neon__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--xl); align-items: center;
}
.neon__copy { display: grid; gap: var(--md); justify-items: start; }

.neon__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-navy);
}
.neon__label .cruz { color: var(--ink-navy); }

.neon__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(32px, 5vw, 68px); line-height: 1.02;
  text-transform: uppercase; letter-spacing: 0.01em;
  max-width: 16ch;
}
.neon__date {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-navy); opacity: 0.78;
}

/* Que un cuerpo rompa el borde de la banda es lo que hace que la página se lea
   como una composición y no como cajas apiladas: en la referencia el astronauta
   y los planetas siempre se salen de su marco. */
/* La Luna salía por arriba pero sin compensar por abajo, y el panel quedaba
   con todo el peso arriba: se leía descentrada, no rompiendo el borde.
   Ahora asoma menos y el bloque entero se alinea al centro del panel. */
.neon__moon {
  margin: 0; justify-self: center; align-self: center;
  width: min(100%, 300px);
  margin-block: clamp(-86px, -5vw, -40px) clamp(-30px, -2vw, -12px);
  position: relative; z-index: 3;
  filter: drop-shadow(0 18px 38px rgba(7, 23, 63, 0.45));
}
.neon__moon img { width: 100%; height: auto; display: block; }

/* Botón invertido: tinta azul sobre el amarillo. */
.btn--ink {
  background: var(--ink-navy);
  color: var(--accent);
  border-color: var(--ink-navy);
}
.btn--ink:hover, .btn--ink:focus-visible { background: #0042A6; border-color: #0042A6; color: #fff; }

@media (max-width: 860px) {
  .neon__inner { grid-template-columns: 1fr; }
  .neon__moon { width: min(60%, 220px); justify-self: start; }
}

/* Marte también es foto: un disco plano al lado de la Tierra fotográfica se
   leía como un círculo pegado, que es lo contrario de lo que busca el collage. */
.create__orbiting img { width: 100%; height: auto; display: block; }

/* ======================================== ESTRELLAS FUGACES ============== */

.hero__shoot { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }

/* Dos elementos y no uno, por una razón concreta: el ángulo va en el envoltorio
   y el desplazamiento en la estela. Si los dos vivieran en el mismo nodo, el
   giro y la traslación se componen en un orden que depende de si el ángulo se
   escribió en `rotate` o en `transform`, y la estela termina deslizándose de
   costado mientras apunta en diagonal. Separados, la cola viaja siempre en la
   dirección en la que apunta. */
.shoot {
  position: absolute;
  inline-size: 0; block-size: 0;
}

/* La cola nace en la cabeza y crece hacia atrás: por eso el origen está en el
   extremo derecho. Al escalar en X la cabeza no se mueve y el rastro se estira
   detrás, que es lo que hace una fugaz de verdad. Una barra de largo fijo
   cruzando la pantalla se lee como un guión que se desliza. */
.shoot__t {
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0;
  inline-size: var(--len, 160px);
  block-size: 1.2px;
  transform-origin: 100% 50%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(174, 211, 255, 0.42) 40%,
    rgba(255, 255, 255, 0.98) 97%,
    transparent 100%);
  filter: blur(0.35px);
}

@media (prefers-reduced-motion: reduce) {
  .hero__shoot { display: none; }
}

/* ========================================= PIEZAS DEL MANUAL ============= */

/* ----------------------------------------------------- cinta rotulada ---- */

/* El rótulo pegado torcido con el que la referencia titula cada bloque.
   Funciona porque interrumpe la grilla: derecho se integra y deja de leerse
   como algo puesto encima de la página. */
.tape {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--md);
  padding: 7px 15px;
  rotate: var(--tilt, -2.4deg);
  background: var(--accent);
  color: var(--ink-navy);
  font-family: var(--font-mono); font-size: 13px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  /* Bordes irregulares: cinta cortada a mano, no una etiqueta impresa. */
  clip-path: polygon(0 6%, 2% 0, 99% 3%, 100% 94%, 97% 100%, 1% 97%);
}
.tape__arrow { width: 15px; height: 15px; flex: 0 0 auto; }

/* ------------------------------------------------- flecha en círculo ----- */

/* El remate de cada tarjeta del manual: el texto al lado de una flecha dentro
   de un círculo, que es lo que señala «esto sigue». */
.arrow-link, .challenge__link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--mark);
}
.arrow-link svg, .challenge__link svg {
  inline-size: 34px; block-size: 34px;
  padding: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
  transition: background-color 0.2s, color 0.2s, translate 0.2s;
}
.arrow-link:hover svg, .challenge__link:hover svg,
.arrow-link:focus-visible svg, .challenge__link:focus-visible svg {
  background: var(--accent);
  color: var(--ink-navy);
  translate: 4px 0;
}

/* ------------------------------------------------ trama topográfica ------ */

/* Curvas de nivel: otra de las cuatro texturas del manual. Va muy tenue y
   recortada hacia los bordes, para dar relieve al fondo sin competir con las
   tarjetas que tiene encima. */
.challenges-band { position: relative; overflow: hidden; }
.challenges-band__tex {
  position: absolute; inset: -10%; z-index: 0;
  opacity: 0.17; pointer-events: none;
}
.challenges-band__tex svg { width: 100%; height: 100%; }
.challenges-band > .wrap { position: relative; z-index: 2; }

/* -------------------------------------------------- lista con cruz ------- */

/* La viñeta `+` del manual. Va en monoespaciada porque es una lista de datos,
   no de prosa: en el afiche rotula las cuatro patas del evento. */
.plus {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin: 0 0 var(--lg); padding: 0; list-style: none;
}
.plus li {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--highlight);
}
.plus li::before { content: "+"; color: var(--mark); font-size: 14px; line-height: 1; }

/* --------------------------------------------------- círculo rojo -------- */

/* El disco Rocket Red encimado a la foto. En el afiche se superpone con mezcla
   en vez de taparla: se ve la foto a través, y eso es lo que lo integra al
   collage en lugar de dejarlo como una calcomanía encima. */
.blot {
  position: absolute;
  inset-inline-start: -34px;
  inset-block-start: 22px;
  inline-size: clamp(76px, 34%, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--alert);
  mix-blend-mode: hard-light;
  opacity: 0.88;
  z-index: 2;
  pointer-events: none;
}
.roles__media { position: relative; }

/* ========================================== BLOQUE DE FECHA ============== */

/* El ancla de información de toda la identidad: está en las veinte piezas del
   manual. Amarillo a sangre, el día en Fira Sans Black y la sede en mono.
   Entra en la grilla como un objeto macizo, no como un párrafo. */
.fecha {
  background: var(--accent);
  color: var(--ink-navy);
  padding: var(--md) var(--lg) var(--md);
  align-self: start;
}
.fecha__d {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px;
  margin-bottom: 10px;
}
.fecha__d strong {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 0.92;
  letter-spacing: 0.01em;
}
.fecha__d span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2.2vw, 28px); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fecha__s {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding-top: 10px; border-top: 1px solid rgba(7, 23, 63, 0.35);
}

/* El panel de datos del bloque de apertura: la fecha arriba, la ficha debajo. */
.opener__data { display: grid; gap: var(--lg); align-content: start; }

/* ======================================== GALERÍA SOBRE AZUL ============= */

/* Las placas pasaron de crema a azul. Sobre crema el marco de papel quedaba
   lavado sobre lavado y no recortaba nada: era la sección más floja de la
   página. Sobre azul el papel recorta y la placa se lee como un objeto. */
.gallery .plate__frame {
  display: grid; align-content: center; justify-items: center; gap: 10px;
  aspect-ratio: 3 / 2;
  padding: var(--md);
  border: 10px solid var(--paper);
  border-bottom-width: 34px;
  background:
    repeating-linear-gradient(45deg, rgba(46,150,245,0.09) 0 2px, transparent 2px 13px),
    linear-gradient(160deg, rgba(9,96,225,0.3), rgba(7,23,63,0.72));
  text-align: center;
}
.plate__n {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--accent);
}
.plate__t {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  line-height: 1.2; color: var(--ink);
}
.gallery .plate__caption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 10px;
}

/* ============================================ FOOTER ===================== */

.footer .rail { margin-bottom: var(--xl); }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sm) var(--lg);
}
.footer__legal p { margin: 0; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* ==================================== COMODORO: FICHAS DE DATO ========== */

/* El «4» venía incrustado dentro del párrafo, con un cuerpo de 132 px: abría
   un hueco enorme entre renglones y partía la frase en dos. Un dato de ese
   tamaño no es tipografía corrida, es una ficha, y como ficha además llena la
   columna derecha que antes quedaba vacía. */
/* `max-width` acá era un error con consecuencias: `.history__inner` es el
   MISMO elemento que `.wrap`, así que pisaba el `max-width: var(--container)`
   y el `margin-inline: auto` del contenedor. La sección 06 era la única de la
   página que corría de borde a borde —su texto arrancaba en 43 px cuando el
   de todas las demás arranca en 108— y por eso desentonaba. El ancho lo
   gobierna `.wrap` y nadie más. */
.history__inner { position: relative; z-index: 2; }
.history__copy { display: grid; gap: var(--md); align-content: start; }
.history__stats { display: grid; gap: var(--md); align-content: start; }

.stat {
  display: grid; gap: 10px;
  padding: var(--lg) var(--md);
  border: 1px solid var(--rule);
  background: rgba(46, 150, 245, 0.07);
}
.stat__n {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(64px, 8vw, 118px); line-height: 0.82;
  color: var(--mark); font-variant-numeric: tabular-nums;
}
.stat__l, .stat__t {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65;
  letter-spacing: 0.06em; color: var(--ink-dim);
}
.stat__k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--highlight);
}
.stat--alt { background: transparent; border-color: var(--rule-soft); }

.band--paper .stat { background: rgba(7, 23, 63, 0.05); border-color: rgba(7, 23, 63, 0.18); }
.band--paper .stat__l, .band--paper .stat__t { color: var(--ink-navy); }
.band--paper .stat__k { color: var(--surface); }

/* ==================================== DOS DÍAS: CABEZAL ================== */

/* El título ocupaba una fila entera y dejaba la mitad derecha en blanco.
   Con el bloque de fecha al lado, la fila se completa y además el dato más
   importante del evento aparece dos veces en el recorrido, que está bien. */
.figures__head {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--xl); align-items: start;
  margin-bottom: var(--xl);
}
.figures__head .sec-title { margin-bottom: 0; }
.figures__head .rail { margin-bottom: var(--md); }

.fecha--compact { padding: var(--md) var(--md) var(--md); }
.fecha--compact .fecha__d strong { font-size: clamp(28px, 3.2vw, 44px); }
.fecha--compact .fecha__d span { font-size: clamp(15px, 1.6vw, 20px); }

@media (max-width: 900px) {
  .history__inner, .figures__head { grid-template-columns: 1fr; gap: var(--xl); }
}

/* ====================================== QUÉ ES: COLUMNA COMPLETA ======== */

/* La columna traía cuatro renglones contra una Tierra de 420 px: el bloque
   quedaba descompensado y con medio alto vacío. Las tres piezas que siguen
   están textuales en la referencia («DATOS REALES. PROBLEMAS REALES.» con la
   lista de + debajo), así que llenan la columna sin inventar contenido. */
.split__copy { display: grid; gap: var(--md); align-content: center; justify-items: start; }
.split__copy .sec-title, .split__copy .prose { margin-bottom: 0; }

.split__claim {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2vw, 26px); line-height: 1.25;
  max-width: 22ch;
  padding-top: var(--md);
  border-top: 2px solid var(--mark);
}

/* En bloque las viñetas se leen como un índice, no como una fila de rótulos. */
.plus--block { flex-direction: column; gap: 9px; margin-bottom: 0; }
.plus--block li { font-size: 13px; }
.band--paper .plus li { color: var(--ink-navy); }

/* ====================================== BANDEROLA RASGADA =============== */

/* La pieza que lleva la pregunta en la referencia: papel arrancado a mano,
   tinta azul, flecha en círculo. El filo irregular es TODO el efecto; con un
   rectángulo limpio es una caja cualquiera. Por eso el recorte se genera en
   Python y entra por `--rasgo`. */
.rasgado {
  position: relative;
  margin-top: var(--xl);
  rotate: -1.1deg;
  background: var(--paper);
  clip-path: var(--rasgo);
  /* El relleno extra es el margen de papel que el recorte se come arriba y
     abajo: sin él el filo roto muerde el texto. */
  padding: 34px 0 40px;
}
.rasgado__in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--md) var(--xl);
  padding-inline: clamp(24px, 4vw, 56px);
}
.rasgado__q {
  flex: 1 1 320px;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px, 3vw, 40px); line-height: 1.08;
  color: var(--ink-navy); margin: 0;
}
.rasgado__pie {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--surface);
}
.rasgado__cta { color: var(--ink-navy); }
.rasgado__cta svg { border-color: var(--ink-navy); }
.rasgado__cta:hover svg { background: var(--ink-navy); color: var(--paper); }

/* ========================================== CRUCES SUELTAS ============== */

/* Sin ellas un plano liso se lee como un hueco; con ellas se lee como espacio.
   Son puntuación del fondo, así que van detrás de todo y bien tenues. */
.cruz-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cruz-mark {
  position: absolute;
  display: block;
  scale: var(--e, 1);
  opacity: 0.5;
}
.cruz-mark .cruz { width: 18px; height: 18px; color: var(--highlight); }

/* Trama de medio tono sobre el panel neón: ensucia el amarillo plano sin
   meterle otra forma encima. */
.neon__dots { position: absolute; inset: 0; opacity: 0.16; pointer-events: none; }
.neon__dots svg { width: 100%; height: 100%; }
.neon__dots circle, .neon__dots rect { fill: var(--ink-navy); }

/* ======================================= CUENTA REGRESIVA =============== */

.cuenta { display: grid; gap: var(--sm); justify-items: start; }
.cuenta__t {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--highlight);
}
.cuenta__g { display: flex; flex-wrap: wrap; gap: 0; border-block: 1px solid var(--rule); }
.cuenta__u {
  display: grid; gap: 4px; justify-items: center;
  min-inline-size: clamp(84px, 11vw, 128px);
  padding: var(--sm) var(--md);
  border-inline-start: 1px solid var(--rule);
}
.cuenta__u:first-child { border-inline-start: 0; padding-inline-start: 0; }
.cuenta__n {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 4.4vw, 62px); line-height: 0.92;
  color: var(--mark); font-variant-numeric: tabular-nums;
}
.cuenta__l {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ========================================== VOLVER ARRIBA =============== */

/* Botón flotante con anillo de progreso. El anillo no es decoración: dibuja
   cuánto de la página llevás recorrido, así el botón informa además de actuar.

   Aparece recién pasada la primera pantalla, porque antes no tiene sentido. */
.subir {
  position: fixed;
  inset-inline-end: clamp(16px, 2.4vw, 32px);
  inset-block-end: clamp(16px, 2.4vw, 32px);
  z-index: 60;

  display: grid; place-items: center;
  inline-size: 56px; block-size: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 23, 63, 0.86);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(3, 10, 28, 0.5), inset 0 0 0 1px rgba(46, 150, 245, 0.38);
  color: var(--ink);
  cursor: pointer;

  /* Estado oculto: baja un poco y se encoge, para que la entrada tenga peso. */
  opacity: 0;
  translate: 0 14px;
  scale: 0.86;
  pointer-events: none;
  transition: opacity 0.28s, translate 0.28s, scale 0.28s,
              background-color 0.2s, color 0.2s;
}
.subir.is-on { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }

.subir:hover, .subir:focus-visible {
  background: var(--accent);
  color: var(--ink-navy);
}
.subir:hover .subir__flecha { translate: 0 -2px; }
.subir:active { scale: 0.94; }

.subir__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.subir__ring circle { fill: none; stroke-width: 2; }
.subir__pista { stroke: rgba(46, 150, 245, 0.26); }
.subir__arco {
  stroke: var(--accent);
  stroke-linecap: round;
  /* 2πr con r=20 ≈ 125.66. El avance se escribe desde el JS en el offset. */
  stroke-dasharray: 125.66;
  stroke-dashoffset: 125.66;
  transition: stroke-dashoffset 0.12s linear;
}
.subir:hover .subir__arco { stroke: var(--ink-navy); }

.subir__flecha {
  position: relative;
  inline-size: 21px; block-size: 21px;
  transition: translate 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .subir, .subir__flecha, .subir__arco { transition: none; }
}

/* ============================================ CRÉDITO =================== */

.footer__by a {
  color: var(--ink-dim);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.footer__by a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ===================================== FRANJA DE DATOS VERTICAL ========== */

/* Ocupa el margen que si no queda muerto, y repite de dónde es la pieza sin
   robarle lugar al contenido. Se esconde cuando no hay margen que gastar. */
.franja {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 50%;
  margin: 0;
  transform-origin: 100% 0;
  rotate: 90deg;
  translate: 0 -50%;
  white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--highlight); opacity: 0.45;
  pointer-events: none;
}
@media (max-width: 1100px) { .franja { display: none; } }


/* ============================================ LOGOS OFICIALES =========== */

/* El lockup de Space Apps reemplaza al texto de la marca. Viene con su propia
   «Comodoro Rivadavia» adentro, así que no hace falta repetirla al lado. */
.nav__logo {
  block-size: clamp(26px, 2.4vw, 34px);
  inline-size: auto;
  display: block;
}
.nav__brand { gap: 0; }

/* El logo de la Agencia tiene el texto casi en negro. No se recolorea —es su
   marca— así que va sobre chapa clara, que es como se muestran los logos de
   terceros sobre un fondo oscuro. */
/* El logo de la Agencia necesita fondo claro, pero una chapa blanca pelada en
   medio del azul se lee como un parche. Lo que la integra es tratarla como una
   pieza montada: filete interior, marcas de registro en las esquinas y el pie
   en monoespaciada, que es el mismo registro de ficha que usa el resto. */
.logo-slot--real {
  position: relative;
  background: var(--paper);
  border-color: var(--paper-rule);
  padding: var(--lg) var(--md);
}
.logo-slot--real::before {
  content: "";
  position: absolute; inset: 9px;
  border: 1px solid rgba(7, 23, 63, 0.16);
  pointer-events: none;
}
/* Marcas de registro: las cuatro esquinas, en azul eléctrico sobre el papel. */
.logo-slot--real::after {
  content: "";
  position: absolute; inset: 15px; pointer-events: none;
  background:
    linear-gradient(var(--surface), var(--surface)) left top / 12px 1px no-repeat,
    linear-gradient(var(--surface), var(--surface)) left top / 1px 12px no-repeat,
    linear-gradient(var(--surface), var(--surface)) right top / 12px 1px no-repeat,
    linear-gradient(var(--surface), var(--surface)) right top / 1px 12px no-repeat,
    linear-gradient(var(--surface), var(--surface)) left bottom / 12px 1px no-repeat,
    linear-gradient(var(--surface), var(--surface)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--surface), var(--surface)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--surface), var(--surface)) right bottom / 1px 12px no-repeat;
  opacity: 0.55;
}
.logo-slot--real img {
  inline-size: auto; max-inline-size: 100%;
  block-size: auto; max-block-size: 100%;
  object-fit: contain;
}



/* --- redes del footer, como iconos ------------------------------------
   Un icono solo no dice a dónde lleva, así que cada enlace lleva su nombre
   accesible en aria-label. El área táctil es de 44 px aunque el dibujo mida
   22: en el pie de una página, en un teléfono, es la diferencia entre
   acertar y no. */
.redes { display: flex; flex-wrap: wrap; gap: var(--xs); }
.redes a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.redes a:hover { color: var(--mark, var(--accent)); border-color: var(--mark, var(--accent)); }
.redes a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* `.ico` está pensada para ir al lado de un texto: trae separación a la derecha
   y un ajuste de línea base. Acá el icono va solo y centrado, así que las dos
   cosas lo corren 3 px a la izquierda. Se anulan. */
.redes .ico {
  width: 22px; height: 22px;
  margin: 0;
  vertical-align: initial;
  color: inherit;
  opacity: 1;
}

.footer__mail a { word-break: break-word; }

/* ============================================= VISOR DE LA GALERÍA ====== */

/* La placa recorta a 3:2 para que la grilla tenga ritmo. El visor muestra la
   foto entera: es la razón de existir del visor. */

/* La placa de foto pasó de <div> a <button> para que se abra con teclado.
   Hay que apagarle los estilos de botón, que si no mete borde y fondo propios. */
button.plate__frame {
  appearance: none;
  font: inherit; color: inherit; text-align: inherit;
  cursor: zoom-in;
  width: 100%;
}
button.plate__frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.visor { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.visor[hidden] { display: none; }
.visor__velo { position: absolute; inset: 0; background: rgba(5, 14, 39, 0.94); }

.visor__caja {
  position: relative;
  width: min(1200px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 2 * var(--gutter));
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sm);
}

.visor__medio {
  display: grid; place-items: center;
  min-height: 0;
  position: relative;
}
.visor__medio img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  width: auto; height: auto;
  border: 1px solid var(--rule);
}
.visor__medio iframe {
  width: min(100%, 1000px);
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 200px);
  border: 1px solid var(--rule);
  background: #000;
}

.visor__fuera {
  position: absolute; inset-block-end: -28px; inset-inline-end: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); text-decoration: none;
}
.visor__fuera:hover { color: var(--mark, var(--accent)); }

.visor__pie {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--md); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.visor__n { color: var(--ink-faint); }

.visor__x, .visor__nav {
  position: absolute; z-index: 2;
  background: rgba(5, 14, 39, 0.82);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
}
.visor__x {
  inset-block-start: calc(-1 * var(--lg)); inset-inline-end: 0;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 14px;
}
.visor__nav {
  inset-block-start: 50%; translate: 0 -50%;
  width: 46px; height: 46px;
  font-size: 26px; line-height: 1;
  display: grid; place-items: center;
}
.visor__nav--prev { inset-inline-start: calc(-1 * var(--lg)); }
.visor__nav--next { inset-inline-end: calc(-1 * var(--lg)); }
.visor__x:hover, .visor__nav:hover { border-color: var(--accent); color: var(--accent); }
.visor__x:focus-visible, .visor__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visor__nav[hidden] { display: none; }

/* En pantalla chica no hay lugar al costado: las flechas bajan al pie y el
   cierre entra dentro de la caja. */
@media (max-width: 860px) {
  /* No hay lugar a los costados: el cierre sube a su propia banda y las flechas
     bajan a la de abajo. Con `padding-block` la caja les reserva sitio y dejan
     de montarse sobre la foto y sobre el pie. */
  .visor__caja {
    width: calc(100vw - 2 * var(--gutter));
    padding-block: 46px 58px;
  }
  .visor__x { inset-block-start: 0; inset-inline-end: 0; }
  .visor__nav { inset-block-start: auto; inset-block-end: 0; translate: none; }
  .visor__nav--prev { inset-inline-start: 0; }
  .visor__nav--next { inset-inline-end: 0; }
  .visor__pie { justify-content: center; text-align: center; padding-inline: 56px; }
  .visor__medio img { max-height: calc(100vh - 260px); }
  .visor__medio iframe { max-height: calc(100vh - 280px); }
}

/* ==================================================================== */
/*  REPASO DE MOBILE                                                    */
/*  El diseño está pensado en dos columnas. Abajo de 760 px todo se     */
/*  apila, y varias piezas que en escritorio viven en un margen pasan   */
/*  a ocupar el ancho completo: ahí dejan de funcionar las mismas       */
/*  medidas. Esto es lo que cambia en esa situación.                    */
/* ==================================================================== */

@media (max-width: 760px) {

  /* --- los layouts de dos columnas se apilan ----------------------------
     El cabezal de esta sección ya lo daba por hecho, pero la regla que lo
     hacía no estaba: las cinco piezas seguían partiéndose en dos columnas
     de 80 a 160 px, ilegibles. Es una sola declaración para todas porque
     todas comparten el mismo motivo. */
  .hero__inner,
  .organiza,
  .opener__inner,
  .split__inner,
  .closing__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- header: entraba en 1096 px de alto y el título quedaba lejísimos -- */
  .hero { padding-block: 84px var(--lg); }
  .hero__inner { gap: var(--sm); }

  /* La figura va ARRIBA del texto, no abajo. En el DOM está después porque en
     escritorio ocupa la columna derecha; al apilarse en una sola columna el
     orden del documento la mandaba al final y el header abría con texto sobre
     fondo vacío. Acá se la sube. */
  .hero__figure { order: -1; min-height: min(88vw, 370px); }

  /* La escena se mide contra la pantalla, no contra su contenedor: así guarda
     la misma proporción en un teléfono chico que en uno grande. La figura se
     ajusta por altura, por eso el contenedor necesita alto suficiente o el
     astronauta queda diminuto. */
  .hero__body--earth { width: 54vw; right: -16%; top: -18%; }
  .hero__body--moon  { width: 13vw; left: -8%; top: 28%; }
  .hero__body--mars  { width: 9.5vw; left: 2%; bottom: 18%; }

  /* --- medidas del header en pantalla chica ---------------------------
     A 375 px la línea de marca partía en dos renglones por el tracking, el
     título quedaba con aire de escritorio y los botones no coincidían en
     ancho. */
  .hero__brandline { font-size: 11px; letter-spacing: 0.14em; margin-bottom: var(--sm); }
  .hero__title { font-size: clamp(40px, 12.5vw, 60px); letter-spacing: 0.02em; margin-bottom: var(--sm); }
  .hero__invite { font-size: 17px; margin-bottom: var(--md); max-width: none; }

  /* Los dos botones al mismo ancho: apilados y con anchos distintos se leían
     como de jerarquías distintas, que no es el caso. */
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--xs); }
  .hero__actions .btn { justify-content: center; width: 100%; }

  /* --- el icono de sección quedaba huérfano en su propio renglón --------
     Inline, al no entrar con el título, el navegador lo manda solo a la
     primera línea y parece un error. Como bloque y más grande se lee como
     lo que es: la marca de la sección. */
  /* Como glifo suelto encima del título seguía leyéndose accidental: un icono
     amarillo flotando sin relación con nada. Dentro de un recuadro pasa a ser
     una insignia, que es el mismo recurso que ya usa el número del riel justo
     arriba: deja de ser un adorno perdido y rima con la sección. */
  .sec-title .ico {
    display: block;
    box-sizing: content-box;
    width: 20px; height: 20px;
    padding: 8px;
    margin: 0 0 14px;
    border: 1px solid currentColor;
  }

  /* --- las fotos de collage se desbordaban --------------------------------
     Son ítems de grilla, y un ítem de grilla con una imagen adentro tiene
     min-width:auto: el track crece hasta el ancho natural de la foto y se
     sale de la pantalla. */
  .roles__media, .ready__media { min-inline-size: 0; }
  .roles__media .plate--foto, .ready__media .plate--foto { min-inline-size: 0; }
  .roles__media .plate--foto:nth-child(3) { margin-inline-start: 0; }
  /* El giro de las placas también suma ancho: acá va casi derecho. */
  .plate--foto { --tilt: -1deg; }
  .roles__media .plate--foto:nth-child(3) { --tilt: 1deg; }
  .blot { inset-inline-start: -18px; inline-size: 84px; }

  /* --- bloques que en una columna angosta piden eje central -------------- */
  .counters, .counter { text-align: center; }
  .counter { justify-items: center; }

  .neon__inner { justify-items: center; text-align: center; }
  .neon__copy { justify-items: center; }
  .neon__title { max-width: none; }
  .neon__moon { margin-block: var(--lg) 0; justify-self: center; }

  .closing__copy { justify-items: center; text-align: center; }
  .closing__title { text-align: center; }
  .cuenta { justify-items: center; }
  .cuenta__g { justify-content: center; }

  .history__stats .stat { justify-items: center; text-align: center; }

  /* --- la edición 2025 tenía demasiado aire entre párrafos --------------- */
  .history__copy { gap: var(--sm); }
  .history__lead { margin-bottom: var(--xs); }
  .history .callout--big { margin-top: var(--md); }
}

/* ==================================================================== */
/*  CUMPLIMIENTO LITERAL DEL DOCUMENTO                                  */
/*  El doc gobierna el texto: pide conservar los emojis, su ubicación   */
/*  y las mayúsculas. Esto acompaña esa decisión desde el estilo.       */
/* ==================================================================== */

/* El documento escribe sus títulos en mayúscula y pide conservarla. */
.sec-title { text-transform: uppercase; }

/* Nada de `font-variant-emoji: text`: eso fuerza la presentación textual y los
   deja como glifos monocromos —el 💻 salía como un dibujito de línea azul—.
   Es exactamente lo que el documento prohíbe: «No reemplaces emojis por
   íconos». Van en presentación emoji, que es la de por defecto. */
.sec-title, .opener__q, .closing__title { text-wrap: balance; }

/* Aire entre el riel numerado y el título. Pegados se leían como un solo
   bloque apretado: el riel es un rótulo de sección, no un antetítulo. */
.rail { margin-bottom: var(--lg); }
.strip .rail { margin-bottom: 0; }

/* ------------------------------------------------------------ pasos ----- */

/* Vuelven a ser la lista del documento: emoji numerado y la frase al lado,
   en una sola columna. La fila de tres fichas con título y bajada era una
   reescritura del texto, no una maqueta. */
.steps__list {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--lg); max-width: 68ch;
  border: 0; margin: 0; padding: 0; list-style: none;
}
.step {
  display: flex; align-items: flex-start; gap: var(--md);
  padding: 0; border: 0;
  color: var(--ink-dim); font-size: 18px; line-height: 1.6;
}
.step__n {
  flex: 0 0 auto;
  display: block;
  inline-size: auto; block-size: auto;
  padding: 0; border: 0; border-radius: 0;
  font-family: var(--font-body); font-size: 24px; line-height: 1.3;
}

/* ------------------------------------------------- enlace del cierre ---- */

/* El documento muestra la URL de inscripción como texto visible debajo de la
   convocatoria, no sólo como destino del botón. */
.closing__url {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  word-break: break-all; max-width: 46ch;
}
.closing__url a { color: var(--ink-dim); text-decoration-color: var(--rule); }
.closing__url a:hover { color: var(--accent); }

/* --------------------------------------------- placas con enlace real --- */

.plate__frame--link { text-decoration: none; cursor: pointer; }
.plate__frame--link:hover .pending,
.plate__frame--link:focus-visible .pending { color: var(--accent); border-color: var(--accent); }

/* ======================================= NAV: CAJÓN LATERAL ============== */

/* El menú de teléfono era un acordeón: `display:none` → `display:flex`, que no
   se puede animar, así que aparecía de golpe pegado abajo de la barra. Pasa a
   ser un cajón que entra desde la derecha, que es lo que la mano espera del
   lado donde está el pulgar y además deja ver que la página sigue atrás.
   Se mantiene en `display:flex` siempre y lo que se mueve es `translate`: eso
   sí se anima y además el navegador puede componerlo en la GPU. */

.nav__pie { display: none; }

/* «Ediciones anteriores» todavía no tiene destino: ocupa su lugar en la barra
   y se ve igual que los demás, pero no navega, porque un `href` vacío recarga
   la página. Cuando se complete `EDICIONES` en build.py pasa a ser un enlace
   normal sin que haya que tocar nada acá: se ve idéntico de los dos modos. */
.nav__pendiente {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-block: 6px;
  color: var(--ink-dim); cursor: default;
}

/* Hamburguesa de tres barras que se cierra en cruz. El estado lo manda
   `aria-expanded`, que es el mismo dato que lee un lector de pantalla: una
   sola fuente de verdad para lo que se ve y para lo que se anuncia. */
.nav__bars {
  position: relative; display: block;
  inline-size: 18px; block-size: 12px;
}
.nav__bars i {
  position: absolute; inset-inline-start: 0;
  inline-size: 100%; block-size: 1.5px;
  background: currentColor;
  transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              rotate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s, scale 0.18s;
}
.nav__bars i:nth-child(1) { inset-block-start: 0; }
.nav__bars i:nth-child(2) { inset-block-start: 50%; translate: 0 -50%; }
.nav__bars i:nth-child(3) { inset-block-end: 0; }

.nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(1) {
  inset-block-start: 50%; translate: 0 -50%; rotate: 45deg;
}
.nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(2) { opacity: 0; scale: 0 1; }
.nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(3) {
  inset-block-end: 50%; translate: 0 50%; rotate: -45deg;
}
.nav__toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* El velo apaga la página de atrás y, sobre todo, da un lugar donde tocar para
   cerrar sin tener que apuntar al botón. */
.nav__velo {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(5, 14, 39, 0.62);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.35s;
}
.nav__velo.is-on { opacity: 1; }

@media (max-width: 760px) {
  .nav__links {
    display: flex; position: fixed;
    inset-block: 0; inset-inline-end: 0; inset-inline-start: auto;
    inline-size: min(360px, 86vw);
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 0; z-index: 70;
    padding: 96px var(--gutter) var(--xl);
    background: linear-gradient(205deg, #0A2159 0%, #050E27 68%);
    border-inline-start: 1px solid var(--rule);
    border-bottom: 0;
    box-shadow: -30px 0 60px rgba(0, 0, 0, 0.45);
    translate: 100% 0;
    visibility: hidden;
    transition: translate 0.44s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.44s;
  }
  .nav__links.is-open { translate: 0 0; visibility: visible; }

  /* Los enlaces entran escalonados detrás del panel. El retraso va en el
     estado abierto y no en el cerrado: al cerrar tienen que irse todos juntos
     con el cajón, si no el panel se va y las letras quedan flotando. */
  .nav__links > * {
    opacity: 0; translate: 26px 0;
    transition: opacity 0.3s, translate 0.3s;
  }
  .nav__links.is-open > * { opacity: 1; translate: 0 0; }
  .nav__links.is-open > :nth-child(1) { transition-delay: 0.10s; }
  .nav__links.is-open > :nth-child(2) { transition-delay: 0.15s; }
  .nav__links.is-open > :nth-child(3) { transition-delay: 0.20s; }
  .nav__links.is-open > :nth-child(4) { transition-delay: 0.25s; }
  .nav__links.is-open > :nth-child(5) { transition-delay: 0.30s; }
  .nav__links.is-open > :nth-child(6) { transition-delay: 0.35s; }
  .nav__links.is-open > :nth-child(7) { transition-delay: 0.42s; }

  /* En el cajón hay lugar: los enlaces dejan de ser rótulos de barra y pasan a
     ser renglones de lista, con su número a la izquierda y un filete abajo. */
  .nav__links a, .nav__pendiente {
    justify-content: flex-start; align-items: center;
    padding-block: 18px; font-size: 15px; letter-spacing: 0.1em;
    border-bottom: 1px solid var(--rule-soft);
  }
  .nav__n { font-size: 10px; min-inline-size: 22px; }
  /* El filete que separa los renglones del cajón le estaba comiendo el borde
     inferior amarillo al botón: `.nav__links a` pesa más que `.nav__cta`, así
     que el `border-bottom` gris ganaba y la caja quedaba abierta abajo. Hay
     que recuperarlo con el mismo peso, no con el del bloque. */
  .nav__links .nav__cta {
    margin-block-start: var(--md);
    justify-content: center;
    border: 1px solid var(--accent);
  }
  /* El pie va pegado al último enlace y no empujado al fondo con `auto`: con
     margen automático el bloque deja de estar centrado y queda un hueco
     grande en el medio del cajón. */
  .nav__pie {
    display: block; padding-block-start: var(--xl);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
    color: var(--ink-faint);
  }
  .nav__toggle { display: inline-flex; position: relative; z-index: 71; }
  /* Con el cajón al costado la barra ya no necesita engordar para taparse. */
  .nav.is-desplegada { background: transparent; border-bottom-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__links, .nav__links > *, .nav__bars i, .nav__velo { transition: none; }
}

/* ========================= 06 · COMODORO: TEXTO Y FOTO =================== */

/* Al sacar las fichas de dato —que eran una reescritura del párrafo— la
   sección quedó con una columna de 60ch y media banda vacía al lado. Lo que
   va en esa columna no es texto nuevo: es la foto grupal del cierre de 2025,
   que es exactamente de lo que habla el párrafo. */
.history__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: var(--lg) var(--xl); align-items: start;
}
.history__copy { max-width: 46ch; gap: var(--sm); }
.history__lead { margin-bottom: 0; }

/* Dos fotos y no una: con una sola, la columna medía 490 px contra los 838 de
   la columna de texto y quedaban 350 px muertos abajo a la derecha, que es el
   hueco que se sentía en escritorio. La segunda entra más chica y corrida,
   que además es el gesto de collage del sistema. */
.history__media { position: relative; display: grid; gap: var(--md); justify-items: start; }
.history__media .plate--foto { inline-size: 100%; }
.history__media .plate--foto:nth-of-type(2) {
  inline-size: 74%; justify-self: end;
  /* Separación suficiente para que la cinta de la segunda no se coma el pie
     de la primera: la cinta sobresale 22 px por arriba del marco. */
  margin-block-start: var(--sm);
}

/* El enlace quedaba suelto debajo de la foto corrida, sin nada contra lo que
   apoyarse: parecía caído ahí. Ahora es el pie del conjunto —ocupa el ancho
   de la columna, con un filete arriba— así las dos fotos y el enlace se leen
   como una sola pieza y no como tres cosas apiladas. */
.history__ver {
  display: flex; align-items: center; gap: var(--sm);
  inline-size: 100%; justify-self: stretch;
  margin-block-start: var(--xs);
  padding-block-start: var(--sm);
  border-block-start: 1px solid var(--paper-rule);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink-navy);
  transition: color 0.2s, border-color 0.2s;
}
/* Cuántas fotos más hay del otro lado: es el dato que convierte un rótulo en
   un motivo para hacer clic. Lo calcula build.py desde la lista real. */
.history__ver-n {
  flex: 0 0 auto;
  padding: 5px 9px;
  background: var(--ink-navy); color: var(--accent);
  font-size: 11px; letter-spacing: 0.08em;
}
.history__ver-t { flex: 1 1 auto; }
.history__ver-f {
  flex: 0 0 auto; font-size: 15px;
  transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.history__ver:hover, .history__ver:focus-visible { color: var(--surface); border-color: var(--surface); }
.history__ver:hover .history__ver-f { translate: 6px 0; }
.history__ver:hover .history__ver-n { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  .history__ver-f { transition: none; }
}

/* El remate cerraba la sección como una fila propia a todo el ancho, 104 px
   más abajo: abría un vacío enorme en escritorio y despegaba la pregunta del
   párrafo que la trae. Ahora es el final de la columna de texto, con la Luna
   al lado, y la sección entera es un solo bloque de dos columnas. */
.history__cierre {
  display: flex; align-items: center; gap: var(--md);
  margin-block-start: var(--sm);
  position: relative; z-index: 2;
}
.history__cierre .callout--big { margin: 0; }
.history__moon {
  position: static; order: -1;
  inline-size: clamp(76px, 7vw, 104px);
  opacity: 0.8; flex: 0 0 auto;
}

@media (max-width: 1100px) {
  .history__inner { gap: var(--lg) var(--xl); }
}
@media (max-width: 860px) {
  .history__inner { grid-template-columns: minmax(0, 1fr); }
  /* En una columna la segunda foto no tiene de qué correrse. */
  .history__media .plate--foto:nth-of-type(2) { inline-size: 100%; margin-block-start: 0; }
  .history__copy { max-width: none; }
  /* La regla general de teléfono escondía la Luna porque flotaba suelta en una
     esquina. Ahora es parte de la fila del remate y tiene que quedarse. */
  .history__moon { display: block; inline-size: clamp(64px, 18vw, 96px); }
}

/* ============================ 07 · PASOS: LÍNEA DE TIEMPO =============== */

/* Los tres renglones del documento, sin tocar una palabra, puestos sobre un
   hilo vertical: el emoji numerado deja de ser un carácter suelto al principio
   de la línea y pasa a ser una estación del recorrido. Es el mismo contenido
   que antes, pero ahora se lee como una secuencia y no como una lista suelta
   en medio de una banda vacía. */
.steps__list {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0; max-width: 64ch; margin: 0; padding: 0;
  position: relative; z-index: 2;
}
.step {
  position: relative;
  display: grid; grid-template-columns: 62px minmax(0, 1fr);
  align-items: start; gap: 0 var(--md);
  padding: 0 0 var(--xl) 0; border: 0;
  color: var(--ink-dim); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6;
}
.step--fin { padding-bottom: 0; }

/* El hilo baja desde el disco hasta el disco siguiente. Va en un
   pseudoelemento del paso y no en un hijo propio porque tiene que cruzar el
   espacio ENTRE pasos, que es padding del <li>: un hijo se queda encerrado en
   la fila y el hilo salía cortado justo donde hace falta. */
.step::before {
  content: "";
  position: absolute; inset-block-start: 62px; inset-block-end: 0;
  inset-inline-start: 31px; inline-size: 1px;
  background: repeating-linear-gradient(var(--rule) 0 5px, transparent 5px 11px);
}
.step--fin::before { display: none; }

/* El numeral va en el mismo registro de ficha técnica que el riel de sección
   y el número de placa: monoespaciada, espaciada y en amarillo. Reemplaza a
   los emojis 1️⃣2️⃣3️⃣ del documento, que es la única licencia que se toma la
   página sobre su texto y está anotada en `verificar.py`. */
.step__n {
  grid-area: 1 / 1; z-index: 1;
  display: grid; place-items: center;
  inline-size: 62px; block-size: 62px; padding: 0;
  border: 1px solid var(--rule); border-radius: 50%;
  background: var(--bg);
  font-family: var(--font-mono); font-size: 14px; font-weight: 400;
  letter-spacing: 0.1em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  transition: border-color 0.25s, scale 0.25s, box-shadow 0.25s;
}
/* Una marca de registro arriba del disco: lo mismo que separa una viñeta de
   una estación de un recorrido. */
.step__n::before {
  content: ""; position: absolute;
  inline-size: 1px; block-size: 7px; margin-block-end: 62px;
  background: var(--accent);
}
.step:hover .step__n {
  border-color: var(--accent); scale: 1.06;
  box-shadow: 0 0 0 4px rgba(234, 254, 7, 0.1);
}

.step__txt { grid-area: 1 / 2; padding-block-start: 16px; }
.step__txt a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--mark); padding-block-end: 2px;
  transition: color 0.2s, background-color 0.2s;
}
.step__txt a:hover, .step__txt a:focus-visible { color: var(--accent); }

@media (max-width: 560px) {
  .step { grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--sm); padding-bottom: var(--lg); }
  .step::before { inset-block-start: 48px; inset-inline-start: 24px; }
  .step__n { inline-size: 48px; block-size: 48px; font-size: 12px; }
  .step__n::before { margin-block-end: 48px; }
  .step__txt { padding-block-start: 11px; }
}

/* ============================ GALERÍA CON FOTO REAL ===================== */

/* La placa deja de ser un hueco con un rótulo adentro y pasa a tener la foto:
   el marco de papel se queda —es el gesto del sistema— y lo que cambia es que
   adentro ya no hay padding, porque la imagen llena el recuadro. */
.plate--real .plate__frame, .plate--video .plate__frame {
  padding: 0; overflow: hidden; position: relative;
  display: block;
}
/* Sin `inline-size` el <picture> se encogía al ancho que le dictaba la relación
   de aspecto de la foto —241 px dentro de un marco de 286— y la imagen no
   llenaba la placa. El alto solo no alcanza: hay que fijar las dos medidas. */
.plate--real picture { display: block; inline-size: 100%; block-size: 100%; }
.plate--real img {
  inline-size: 100%; block-size: 100%; display: block;
  object-fit: cover;
  transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s;
  /* Las fotos vienen de salas con luces muy distintas. Un punto de saturación
     menos las empareja en la grilla sin lavarlas, y al pasar el puntero
     vuelven a su color completo. */
  filter: saturate(0.92);
}
.plate--real:hover img, .plate--real:focus-within img { scale: 1.05; filter: saturate(1); }

/* El número tiene que leerse sobre cualquier foto, así que va en chapa. */
.plate--real .plate__n, .plate--video .plate__n {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 2;
  padding: 4px 8px; background: rgba(5, 14, 39, 0.82); color: var(--accent);
}

.plate--video .plate__frame--link {
  display: grid; place-items: center; align-content: center; gap: var(--sm);
  padding: var(--md); text-align: center;
}
.plate__play {
  display: grid; place-items: center;
  inline-size: 56px; block-size: 56px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent);
  font-size: 17px; padding-inline-start: 4px;
  transition: background-color 0.25s, color 0.25s, scale 0.25s;
}
.plate__frame--link:hover .plate__play, .plate__frame--link:focus-visible .plate__play {
  background: var(--accent); color: var(--ink-navy); scale: 1.08;
}

/* Con diez fotos la grilla de doce columnas con saltos alternados se vuelve un
   zigzag largo. En la galería las placas van parejas y la variedad la pone el
   giro, que es más barato de leer. */
.gallery .notebook { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gallery .notebook .plate,
.gallery .notebook .plate:nth-child(4n + 1), .gallery .notebook .plate:nth-child(4n + 2),
.gallery .notebook .plate:nth-child(4n + 3), .gallery .notebook .plate:nth-child(4n + 4) {
  grid-column: auto; transform: rotate(var(--tilt));
}

@media (prefers-reduced-motion: reduce) {
  .plate--real img, .step__n, .plate__play { transition: none; }
}

/* El bloque de pasos ocupaba el ancho completo con tres renglones cortos y
   dejaba media banda vacía a la derecha. Partido en dos —el rótulo y la fecha
   de un lado, el recorrido del otro— llena la banda sin agregar una palabra
   que el documento no tenga. */
.steps__inner {
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: var(--xl) var(--section); align-items: start;
  position: relative; z-index: 2;
}
.steps__head { display: grid; gap: var(--md); justify-items: start; align-content: start; }
.steps__head .sec-title { margin: 0; }
.steps__head .fecha { margin-block-start: var(--sm); }

@media (max-width: 980px) {
  .steps__inner { grid-template-columns: minmax(0, 1fr); gap: var(--lg); }
  .steps__head { gap: var(--sm); }
}

/* Los rótulos de la barra no se parten nunca: un enlace de dos renglones en
   una barra de 72 px de alto desordena todo lo que tiene al lado. Entre el
   ancho del cajón y 1180 px, «Ediciones anteriores» se queda en «Ediciones»,
   que en ese tramo sigue diciendo lo mismo. */
.nav__links a, .nav__pendiente { white-space: nowrap; }

@media (min-width: 761px) and (max-width: 1180px) {
  .nav__larga { display: none; }
  .nav__links { gap: clamp(14px, 1.8vw, 24px); }
}

/* El recorrido arrancaba a la altura del riel y el título quedaba un escalón
   más abajo: los dos lados de la banda no se leían como la misma fila. El
   primer disco baja hasta la línea del título. */
.steps__list { padding-block-start: clamp(0px, 6.2vw, 92px); }
.step__n { position: relative; }

@media (max-width: 980px) {
  .steps__list { padding-block-start: 0; }
}

/* ======================================= HERO: CUÁNDO Y DÓNDE =========== */

/* El header decía el lema y el nombre del evento pero no la fecha: el dato que
   alguien que llega por primera vez busca antes que ningún otro.

   Va DEBAJO de los botones y no entre la invitación y ellos. Metida en el
   medio cortaba el envión de «empieza con vos» al botón, y además sumaba un
   cuarto bloque con su propio borde al costado: cuatro arranques distintos
   apilados a la izquierda, que es lo que se sentía raro. Como pie de los
   botones es un dato, que es lo que es, y no un llamado más. */
/* La fecha es el pie de la invitación, no un bloque aparte: antes sumaba el
   margen de abajo de la invitación más el suyo propio y quedaban casi cien
   píxeles de aire entre dos líneas que se leen juntas. El aire grande va
   después, contra los botones. */
.hero__cuando {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px var(--sm);
  margin-block-start: 0;
  margin-block-end: var(--lg);
  padding-block-start: var(--sm);
  border-block-start: 1px solid var(--rule-soft);
  max-inline-size: 46ch;
}
.hero__dia {
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.hero__dia b {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.5em; letter-spacing: 0; color: var(--accent);
  /* La monoespaciada y la negra tienen alturas de x muy distintas: sin este
     ajuste los números se apoyan más abajo que el resto del renglón. */
  line-height: 0.9; vertical-align: -1px;
}
.hero__sede {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}

@media (max-width: 760px) {
  .hero__cuando { margin-block-start: var(--sm); margin-bottom: var(--md); gap: 2px var(--sm); }
  .hero__sede { font-size: 10px; }
  .hero__dia { font-size: 12px; }

  /* El cuerpo de texto a DOS COLUMNAS en un ancho de teléfono obliga a leer
     hacia abajo y volver a subir, con renglones de seis palabras. A una sola
     columna se lee de corrido, que es como se lee un texto. */
  .prose--two { column-count: 1; }
}

/* ===================================== EL VIAJE DE LA INSIGNIA ========== */

/* Los veinte segundos de recorrido se montan sobre TODO el panel, tapando la
   insignia y los controles. Compartir la pantalla con la columna de ajustes
   le sacaría lo único que un recorrido tiene para dar, que es el tamaño. */
.insig__viaje {
  position: absolute; inset: 0; z-index: 3;
  background: var(--bg);
}
.insig.viajando .insig__head { position: relative; z-index: 4; }

.viaje { position: absolute; inset: 0; }
.viaje__lienzo { inline-size: 100%; block-size: 100%; display: block; }

/* Los controles flotan abajo a la derecha, sobre el recorrido. Al pie no:
   ahí vive la barra de avance que dibuja el propio canvas. */
.viaje__ctrl {
  position: absolute; inset-block-end: clamp(34px, 5vh, 58px);
  inset-inline-end: clamp(16px, 3vw, 34px);
  display: flex; gap: 6px;
}
.viaje__b {
  display: grid; place-items: center;
  inline-size: 38px; block-size: 38px; padding: 0;
  background: rgba(5, 14, 39, 0.66);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--font-mono); font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.viaje__b--txt { inline-size: auto; padding-inline: 13px; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; }
.viaje__b:hover, .viaje__b:focus-visible { color: var(--accent); border-color: var(--accent); }
.viaje__b.is-on { color: var(--accent); border-color: var(--accent); }

.viaje__aviso {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: var(--md);
  background: rgba(5, 14, 39, 0.88);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: var(--ink-dim);
}

/* Terminado el viaje aparece la salida. Antes no: mientras corre, lo único
   que se puede hacer es mirarlo, pausarlo o saltarlo. */
.insig__viaje::after {
  content: "";
  position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 1px;
  background: var(--rule);
}
.insig.viaje-fin .insig__viaje { cursor: pointer; }

@media (max-width: 860px) {
  /* En teléfono los controles no entran al lado del rótulo de etapa: el pie
     mide 375 px y «Saltar» se salía de pantalla encima del texto. Suben una
     fila y el rótulo se queda solo con el pie, que es suyo. `inset-inline` en
     lugar de sólo `end` para que nunca puedan desbordar por la derecha. */
  .viaje__ctrl {
    inset-block-end: clamp(62px, 9vh, 88px);
    inset-inline: var(--sm);
    justify-content: flex-end;
  }
  .viaje__b { inline-size: 42px; block-size: 42px; }   /* área táctil */
  .viaje__fin { inset-block-end: clamp(62px, 9vh, 88px); }
}

@media (prefers-reduced-motion: reduce) {
  .viaje__b { transition: none; }
}

/* Las salidas del viaje: aparecen al llegar al cierre, apoyadas sobre el
   último cuadro, que es la insignia terminada. */
/* Un velo degradado debajo de las salidas: la insignia termina justo arriba y
   sin esto los botones se leen como si se le hubieran caído encima. */
.viaje__fin::before {
  content: ""; position: absolute; inset: -40px -10px -30px;
  background: linear-gradient(to bottom, rgba(5,14,39,0), rgba(5,14,39,0.82) 38%, rgba(5,14,39,0.82));
  z-index: -1; pointer-events: none;
}
.viaje__fin {
  position: absolute; inset-block-end: clamp(48px, 7vh, 78px); inset-inline: 0;
  isolation: isolate;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--xs);
  padding-inline: var(--md);
}
@media (max-width: 560px) {
  .viaje__fin { flex-direction: column; align-items: stretch; }
  .viaje__fin .btn { justify-content: center; }
}