/* franbencosme.com v3 — la hoja del documento y de la UI del viaje.

   DOS LEYES QUE ESTA HOJA NO PUEDE ROMPER
   1 · El fondo es el canvas. Ningún tramo, bloque ni caja lleva `background`. Lo único con color de fondo es `body`,
       y es el color base del cielo para cuando NO hay motor.
   2 · La UI pertenece al mundo, no a la página. Con motor, el bloque de texto de cada mundo se queda quieto
       (`sticky`) mientras su tramo pasa, y su marginalia —el sello del cuaderno en Ouranos, la cartela de la lámina
       en Atlas— se queda abajo a la izquierda, como en los cuadros. No es una página que baja sobre un fondo.

   ATLAS ES EL CIELO PRINCIPAL (`[F]` 2.40 a): el `:root` es papel y tinta; Ouranos es la variante. */

:root{
  /* Atlas · los valores son los de los cuadros: papel #E7EAEF, tinta #141A2E, el azul de Betel #1550A8 */
  /* Fran, 17 sep: «que se pueda leer la UI, en especial en Atlas […] la tipografía más oscura […] el fondo podría ser
     blanco». El papel sube a #F4F5F8 y las tintas secundarias bajan: ink-2 pasa de 4,6:1 a 8,9:1 sobre el papel. */
  --bg:#F4F5F8; --ink:#101526; --ink-2:#2E3548; --ink-3:#5B6375;
  --line:#B6BBC6; --signal:#1550A8; --halo:#6B4F33;
  --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --pad:clamp(1.25rem,5vw,4.5rem); --banda:52px;
  /* LA COLUMNA ES TODO EL ANCHO, y el margen lo pone --pad, el mismo del marco. Era min(78rem,100%) = 1248 px
     centrados, y a 1440 —el ancho exacto de los cuadros— eso dejaba el texto en x 161 mientras el wordmark y la
     cartela del cuaderno caían en 72: los DOCE cuadros ponen las tres cosas en el mismo margen de 72. El desajuste
     sólo aparecía por encima de 1392 px (1248 + 2x72), que es por lo que no se había visto. Medido en
     UI-V3-DIFERENCIAS.md, punto 2. */
  /* EL AREA SEGURA. Fran, 21 sep: *«if I open the website in an ultrawide screen, the ui breaks because of how
     wide the screen is»*. Medido a 3440 px: la barra de arriba medía 3425 —el wordmark y el conmutador de cielo a
     3,4 m de distancia—, el bloque de texto 3281 y los casos vivían en la mitad derecha, en x 1736. Todo estaba
     anclado al BORDE DE LA PANTALLA en vez de a una composicion.
     El ancho seguro es 1440, que no es un numero redondo elegido a ojo: es el ancho de los cuadros del storyboard
     (CUADRO.esc 1440×900) y el mismo con el que la escena 3D compone a sus actores, asi que el documento y el
     espacio quedan registrados. Por debajo de 1440 no cambia nada; por encima, la pagina se centra y la pantalla
     de mas es cielo.
     --lado es el mismo margen medido desde el area segura y no desde el vidrio: lo usan las piezas FIJAS, que no
     cuelgan de .tramo y por eso no se enteraban del centrado. */
  --col:min(100%, 1440px);
  --lado:calc((100vw - min(100vw, 1440px)) / 2 + var(--pad));
  --cuadro:min(100vw, 1440px);   /* el ANCHO DEL CUADRO: lo que antes era el viewport. Lo usa todo lo que mide en fracciones del encuadre. */
}
html[data-cielo="ouranos"]{
  --bg:#07080f; --ink:#F6F6FF; --ink-2:#D3D3EA; --ink-3:#A3A2C6;
  --line:#23282F; --signal:#D83A2E; --halo:#FFC53D;
}
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-var.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/assets/fonts/instrument-sans.woff2") format("woff2");font-weight:400 600;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--signal);border-radius:2px}
/* el enlace de salto: fuera de pantalla hasta que recibe el foco, y entonces ocupa su sitio (no se superpone) */
.saltar{position:fixed;left:var(--pad);top:-4rem;z-index:40;padding:.6rem .9rem;background:var(--bg);color:var(--ink);
  border:1px solid var(--ink);border-radius:3px;font-size:.8rem;text-decoration:none;transition:top .2s}
.saltar:focus{top:1rem}
/* en modo de colores forzados, el punto es decorativo: no puede llevar el color de los enlaces */
@media (forced-colors:active){.punto,.punto-marca{forced-color-adjust:none}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;line-height:1.02;margin:0}
p{margin:0}
/* el texto de cada cielo: el sello y la instrucción se dicen distinto en el territorio y en el mapa */
.at{display:none} html[data-cielo="atlas"] .ou{display:none} html[data-cielo="atlas"] .at{display:inline}

/* ---------- el canvas: fijo, detrás de todo ---------- */
#cielo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---------- EL ASIENTO: cómo el storyboard resuelve que la escena no estorbe la lectura ----------
   Fran preguntó por Atlas: *«tenemos que ver que podemos hacer para que los elementos no sean un problema con la
   lectura del texto del frente»*. La respuesta ya estaba dibujada y no es apagar la escena, es SENTAR EL TEXTO.
   Los cuadros lo traen con nombre propio — `asiento · columna de texto` y `asiento · el pie` en `250:2`,
   `asiento · marco` y `asiento · sello` en `124:3`/`127:2` — y leyendo sus SVG sale lo bonito del asunto:

       OURANOS   #05050F al 62 %  →  0 %        (t4 `281:2`)   ·  #050817 al 76 % → 38 % → 0 (Rigel `250:378`)
       ATLAS     #E8EBF0 al 80 %  →  0 %        (t4 `281:12`)

   No es un color nuevo: **es el suelo del propio cielo**. #05050F es el `--bg` de Ouranos (#07080f) y #E8EBF0 el de
   Atlas (#E7EAEF). Por eso en el territorio OSCURECE y en el mapa ACLARA, y por eso funciona en los dos sin una
   regla distinta para cada uno: siempre separa el texto del dibujo llevándolo hacia el fondo de su cielo.

   GEOMETRÍA, de los nodos. Los cuatro son elipses ancladas al borde izquierdo, donde vive la columna de texto:
       `250:378` 1240×960 en (−360,−140)  → centro (260,340), radios 620×480   → 18 % / 38 %, 43 % / 53 %
       `250:379` 1840×640 en (−500, 580)  → centro (420,900), radios 920×320   → 29 % / 100 %, 64 % / 36 %
   Se usan los de Rigel, que es el que los llama por su función («columna de texto», «el pie»); los de t4 son la
   misma idea más apretada. Van en dos pseudoelementos de un solo div: cero nodos nuevos en el documento.
   Y va DETRÁS del documento y DELANTE del cielo — no es un `background` de un tramo ni de un bloque, así que la
   ley 1 de esta hoja sigue en pie: el fondo lo sigue pintando el canvas. */
:root{--asiento-a:.90}                                  /* Atlas: el papel, al 80 % (`281:12`) */
html[data-cielo="ouranos"]{--asiento-a:.62}             /* Ouranos: el negro azulado, al 62 % (`281:2`) */
.asiento{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.asiento::before,.asiento::after{content:"";position:absolute;border-radius:50%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--bg) 100%,transparent) 0%,
    color-mix(in srgb,var(--bg) 52%,transparent) 46%,
    transparent 78%);
  opacity:var(--asiento-a)}
/* la columna de texto: centro 18 % / 38 %, radios 43 % / 53 % */
.asiento::before{left:calc(18% - 43%);top:calc(38% - 53%);width:86%;height:106%}
/* el pie: centro 29 % / 100 %, radios 64 % / 36 % */
.asiento::after{left:calc(29% - 64%);top:calc(100% - 36%);width:128%;height:72%}
/* sin motor no hay escena que estorbe, y el asiento sobra */
html:not(.motor) .asiento{display:none}

/* ---------- el marco: wordmark · switch · idioma · MAP. En el borde, nunca sobre el dibujo. ---------- */
.marco{position:fixed;inset:0 0 auto;z-index:9;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.5rem var(--lado);font-size:.8rem;letter-spacing:.02em;pointer-events:none}
.marco a,.marco span,.marco ol,.marco button{pointer-events:auto}
.marco .marca{font-family:var(--display);font-weight:500;letter-spacing:-.01em;text-decoration:none}
/* el punto del wordmark: en el manual es azul señal; aquí es el color de Betel en el cielo que toque */
.punto-marca{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--signal);margin-left:.06em}
.marco .der{display:flex;gap:1.75rem;align-items:baseline;color:var(--ink-3)}
.marco .der a{text-decoration:none}
.marco .correo{color:var(--ink-2)}
/* EL MARCO SE TIÑE POR ESCENA. Medido: en Ouranos ningún cuadro usa un color global para el marco; cada uno le da
   el suyo. Sólo entran los tres cuyos nodos están medidos — los otros tres heredan el token hasta que se midan,
   que es mejor que inventarles un color.
     Betelgeuse  41:13 #f9f4f0 · 41:14 #9e8075 · 41:15 #d1b8ad
     t2 → Saiph  64:158 #ededf7 · 64:159 #807a9e · 64:160 #b8b8d1
     Rigel       #f2f2fc · #8c8ab2 · #bdbddb (los mismos de t0 y ∞)
   En Atlas los seis cuadros ponen tinta, así que el teñido sólo vive bajo [data-cielo=ouranos]. */
/* LA RAMPA DE TINTA ES DEL MUNDO ENTERO, NO DEL MARCO. Los tres hexes ya estaban aquí, pero encerrados en `.marco`:
   se habían leído bien del cuadro y se habían aplicado a tres palabras de la cabecera en vez de a la escena. Medido
   en UI-V3-DIFERENCIAS.md punto 3: el cuadro `41:3` pinta el titular en #f9f4f0, el lede en #d1b8ad y el cintillo en
   #9e8075 —la brasa— y la página los daba en lavanda global. Puestos en el elemento raíz valen para los dos: el
   marco los sigue cogiendo por sus `var(--marca, var(--ink))`, que ahora resuelven al mismo sitio.
   Cada terna sale del nodo, con `get_design_context`, no de la memoria: titular = --ink, lede = --ink-2,
   cintillo = --ink-3. En ATLAS no se toca: los seis cuadros ponen tinta sobre papel, una sola rampa (y por eso
   todo esto vive bajo [data-cielo=ouranos]).
   BELLATRIX Y EL CINTURÓN YA ESTÁN LEÍDOS (16 sep), y la respuesta es que no había nada que cambiar: los dos dan
   EXACTAMENTE la misma terna que Rigel. En `215:2`, «First I ask.» / «Everything else after.» a 52 px en #f2f2fc,
   el lede de las cinco paradas a 16 px en #bdbddb y el cintillo «THE METHOD» a 12 px en #8c8ab2. En `309:2` —que
   vuelve metadatos por tamaño, así que se piden los hijos— «Short sentences.» (`309:526`) en #f2f2fc, la biografía
   (`309:528`) en #bdbddb y «IUGULAE» (`309:525`) en #8c8ab2. Se escriben igualmente en vez de dejarlos
   heredando el token global: coinciden hoy por casualidad, y si el token global se mueve, estos dos mundos se
   despegarían de su cuadro sin que nadie se entere. Ahora los seis están anclados a su nodo. */
/* LA BRASA DE BETELGEUSE, MEDIA RAMPA MÁS ARRIBA — y es lo único que se movió de los tres hexes del cuadro.
   Medido el 16 sep componiendo de verdad la pila entera (píxeles del lienzo 3D leídos del framebuffer + las dos
   elipses del `asiento` replicadas con el mismo motor de degradados del navegador + la opacidad efectiva del
   texto), sobre 5.340 muestras por elemento y en cinco puntos del tramo: con #9e8075 el cintillo daba una mediana
   de 3.86–4.34 y la guía 4.02–4.62, contra los 4.5 que pide AA para 12 px. O sea que la brasa del cuadro `41:14`
   no sostiene texto pequeño sobre esta escena.
   ANTES SE PROBÓ NO TOCARLA, que era lo preferible: subir el `asiento`. NO LLEGA, y está medido — llevándolo de
   0.62 a 1.00 el cintillo sólo pasa de 3.86 a 4.30, y la guía NO SE MUEVE (4.29 con cualquier valor, su p10 clavado
   en 2.23: cae fuera del alcance de las dos elipses). El asiento no es la palanca, así que la palanca es la tinta.
   No se inventa un color: se coge el punto medio entre --ink-3 y --ink-2, los dos del mismo cuadro, así que la
   tinta sigue siendo del storyboard y sólo sube medio escalón de su propia rampa. Con #b89c91 las medianas van a
   5.63 y 6.13 y el percentil 10 a 4.40 y 5.43.
   Queda dicho lo que cuesta: la rampa se comprime un poco arriba (ink-3 se acerca a ink-2). Si Fran prefiere el
   hex del nodo intacto, la otra salida es el TAMAÑO — a 18.66 px en negrita el umbral baja a 3:1 y #9e8075 pasa
   sobrado; pero eso cambia el cuadro más que un medio escalón de tinta. */
html[data-cielo="ouranos"][data-escena="betelgeuse"]{--ink:#f9f4f0;--ink-2:#d1b8ad;--ink-3:#b89c91}
html[data-cielo="ouranos"][data-escena="saiph"]{--ink:#ededf7;--ink-2:#b8b8d1;--ink-3:#807a9e}
/* MEISSA, MEDIO ESCALÓN ARRIBA, por la misma razón medida que Betelgeuse y con el mismo método. Su lado
   DESCARTADO —el texto tachado de los cuatro pares y su pie— daba medianas de 3.25, 3.32, 4.27 y 4.47 a 13 px, y
   4.17/4.29 a 10.5, todas por debajo de los 4.5 de AA. La jerarquía contra el lado CAZADO (16.5) es la tesis del
   mundo y no se toca: lo que se corrige es que el escalón flojo de la rampa no sostiene texto pequeño sobre esta
   nebulosa. #757a8c → punto medio con --ink-2, que sigue siendo tinta del cuadro y no un color inventado. */
html[data-cielo="ouranos"][data-escena="meissa"]{--ink:#f2f5fa;--ink-2:#adb2c2;--ink-3:#9196a7}
html[data-cielo="ouranos"][data-escena="rigel"]{--ink:#f2f2fc;--ink-2:#bdbddb;--ink-3:#8c8ab2}
html[data-cielo="ouranos"][data-escena="bellatrix"]{--ink:#f2f2fc;--ink-2:#bdbddb;--ink-3:#8c8ab2}   /* `215:2` */
html[data-cielo="ouranos"][data-escena="cinturon"]{--ink:#f2f2fc;--ink-2:#bdbddb;--ink-3:#8c8ab2}   /* `309:2` */
.marco .marca,.marco .der,.marco .correo,.marco .menu{transition:color .9s linear}
/* Y LA TINTA DEL MARCO SE PASA, NO SALTA. `html[data-escena]` cambia en cuanto el reloj entra en el tramo, o sea al
   EMPEZAR el tránsito, y sin transición los tres textos del marco daban un salto de color en seco: el «shock» que
   Fran nombra en 2.43. 0,9 s es lo que tarda el iris en cerrar del todo, así que el color llega con el telón. */
.marco .marca{color:var(--marca,var(--ink));transition:color .9s ease}
.marco .der{color:var(--idioma,var(--ink-3));transition:color .9s ease}
.marco .correo,.marco .menu{color:var(--correo,var(--ink-2));transition:color .9s ease}
/* el switch: el del lab, que Fran aprobó. Sólo existe con motor (sin JS no hay otro cielo al que ir). */
/* ── EL ASIENTO DEL MARCO, que los cuadros declaran desde el principio y nunca se montó. `124:3` y `250:2` traen un
   `asiento · marco` (⌀680 en −160,−290, o sea centrado en 180,50) junto al `asiento · columna de texto` y al
   `asiento · el pie`, que sí están en `.asiento`. Faltaba el de arriba, y se notaba: desplazando fuera del cinturón
   (u 0.744) el texto de los testimonios sube y pasa POR DEBAJO del conmutador, y se leen los dos a la vez y ninguno
   bien. El storyboard no apaga la escena para que se lea el marco: SIENTA el marco, que es lo que hace esto.
   Va en el `::before` del propio marco para no meter marcado de adorno, y se apaga sin motor: sin escena no hay
   nada que sentar. El conmutador, además, deja de ser transparente: es un CONTROL, y un control necesita
   superficie propia o el fondo se le mete dentro. */
.marco::before{content:"";position:absolute;inset:-1.4rem -.5rem auto;height:6rem;z-index:-1;pointer-events:none;
  /* dos capas: la ELIPSE del cuadro, a la izquierda y bajo el wordmark, que es la que `124:3` dibuja; y encima una
     banda que cruza todo el ancho, porque el choque medido está a la DERECHA —el texto pasando por debajo del
     conmutador— y una elipse al 13 % no llega allí. La banda es floja y muere a media altura del marco: no apaga la
     escena, sienta la franja del marco, que es la distinción que el storyboard hace. */
  background:
    radial-gradient(130% 150% at 13% 0%,
      color-mix(in srgb,var(--bg) 92%,transparent) 0%,
      color-mix(in srgb,var(--bg) 44%,transparent) 52%,
      transparent 80%),
    linear-gradient(to bottom,
      color-mix(in srgb,var(--bg) 66%,transparent) 0%,
      color-mix(in srgb,var(--bg) 24%,transparent) 58%,
      transparent 100%);
  opacity:var(--asiento-a)}
html:not(.motor) .marco::before{display:none}

.switch{font:inherit;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  border:1px solid var(--line);border-radius:4px;padding:.4rem .7rem;min-height:2.1rem;cursor:pointer}
.switch[aria-busy="true"]{opacity:.5;cursor:default}
.switch{display:inline-flex;align-items:center;gap:.5rem}
.marco .marca,.marco .idioma,.marco .menu{background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);border-radius:4px;padding:.4rem .7rem;min-height:2.1rem;display:inline-flex;align-items:center}
.marco .der{align-items:center}
/* luna en Ouranos, sol en Atlas: dos SVG de línea; el motor sólo cambia `data-cielo`. Antes eran dos círculos de CSS que
   no se leían como sol ni luna (Fran, 17 sep: «falta el icono de sol y luna»). */
.cielo-icono{width:14px;height:14px;display:none;flex:none}
html[data-cielo="ouranos"] .cielo-icono.luna,html[data-cielo="atlas"] .cielo-icono.sol{display:block}
.idioma{font-size:.7rem;letter-spacing:.1em}
.idioma[hidden]{display:none}
/* UN boton de idioma, con su bandera delante (Fran, 21 sep): enseña el idioma en el que estás y al tocarlo cambia. */
.idioma{gap:.34rem;padding:.4rem .6rem}
.bandera{width:14px;height:auto;border-radius:1px;flex:none;box-shadow:0 0 0 .5px color-mix(in srgb,var(--ink) 35%,transparent)}
/* el punto del nombre: el de Betel, rojo en Ouranos y azul en Atlas (es el mismo --signal que el punto de los titulares) */
.punto-marca{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--signal);margin-left:.08em;vertical-align:baseline}
/* el icono de menú, en el sitio que dejó el correo. Sólo texto para lector de pantalla. */
/* el disparador del menú: el cinturón de Orión (siete puntos) y MAP, como en V2 (main.css:196). */
.menu{display:flex;align-items:center;gap:.5rem;padding:.25rem;color:var(--correo,var(--ink-2));background:none;border:0;cursor:pointer;font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.menu svg{width:13px;height:18px;fill:currentColor}
.menu[hidden]{display:none}   /* `display:grid` gana al [hidden] del navegador: hay que decirlo a mano */
/* el panel: se abre con el botón del marco. Sin cuadro que lo defina, hereda los tokens del cielo en que se abre. */
/* EL MENÚ, COMO ERA EN V2 (main.css:206-237), que es el que Fran prefiere: pantalla completa, centrado, cada sección en
   grande con su estrella debajo en versalitas, «The sky» arriba y el sello abajo. El fondo es el del cielo (`--bg`), casi
   opaco y desenfocado, así que las opciones no necesitan recuadro. Betel se queda al lado de la sección actual, y el
   cielo y el idioma viven dentro para el móvil (16 sep). */
.panel{border:0;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);color:var(--ink);
  padding:clamp(3rem,10vh,6rem) clamp(1.25rem,6vw,5rem);width:100vw;max-width:none;height:100svh;max-height:none;margin:0;border-radius:0;
  align-content:center;justify-items:center;gap:clamp(1.25rem,3.4vh,2.5rem)}
.panel[open]{display:grid}
.panel ol{list-style:none;padding:0;display:grid;margin:0;gap:clamp(.35rem,1.2vh,.8rem);justify-items:center;counter-reset:none}
.panel li::before{content:none}
.panel a{display:grid;justify-items:center;gap:.2rem;padding:.3rem 1rem;background:none;border:0;text-decoration:none}
.panel b{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,1rem + 2vw,2.5rem);letter-spacing:-.032em;line-height:1;color:var(--ink)}
.panel span{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.panel a:hover b{text-decoration:none;color:var(--signal)}
.panel a[aria-current="true"] b::after{content:"";display:inline-block;width:.4em;height:.4em;border-radius:50%;background:var(--signal);
  box-shadow:0 0 8px color-mix(in srgb,var(--signal) 45%,transparent);margin-left:.4em;vertical-align:middle}
.panel-titulo{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.panel-mandos{display:flex;gap:1.25rem;align-items:center}
.panel-sello{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.panel-cerrar{position:absolute;top:1.6rem;right:2rem;font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:none;border:0;padding:.25rem;cursor:pointer}
.panel::backdrop{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(3px)}
.panel-cerrar{float:right;margin:-1rem -1rem 0 0;background:none;border:0;color:var(--ink-3);font:inherit;font-size:.75rem;cursor:pointer}
.panel-correo{display:block;padding-top:1.2rem;border-top:1px solid var(--line);font-family:var(--display);font-size:1rem;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- el viaje ---------- */
#viaje{position:relative;z-index:1}
.tramo{position:relative;width:var(--col);margin-inline:auto;padding-inline:var(--pad)}
/* un mundo dura lo que dura leerlo; su bloque se queda quieto mientras pasa */
.mundo{min-height:190svh}
.bloque{position:sticky;top:0;height:100svh;padding-block:min(16vh,9rem) min(16vh,9rem);display:grid;align-content:end;gap:0}
.bloque.ancho{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-content:center;align-items:center}
/* LA ENTRADA DE CADA MUNDO = el tránsito que lleva hasta él. No hay secciones de tránsito ([F] 2.41 a):
   el tránsito es el camino, y su largo son los grados que separan de verdad a las dos estrellas
   (MUNDOS-V3.md §La medida del viaje). 45svh de arranque + 8,3svh por grado reproduce las duraciones
   que tenían las secciones (17,18° → 188svh · 19,85° → 210 · 4,37° → 81 · 8,04° → 112 · 8,85° → 118). */
.mundo{padding-top:calc(45svh + var(--grados,0) * 8.3svh)}
/* Betelgeuse NO lleva entrada: su tránsito es la obertura, que corre antes de que el scroll exista. Dejarle los
   45svh era dejar un hueco vacío arriba, que es lo primero que se veía al cargar ([F] 15 sep). */
#betelgeuse{padding-top:0}
/* el regreso es la cola de Rigel, no una sección: 18,61°, el segundo tramo más largo del cielo */
#rigel{--vuelta:18.61;padding-bottom:calc(45svh + var(--vuelta) * 8.3svh)}

/* ---------- LA UI ESPERA A LOS ACTORES ([F] 2.43) ----------
   `--ui` la escribe `motor/viaje.js` con el fundido que el director ya calcula por mundo: 0 detrás del telón, 1 con
   la escena colocada, y con retraso, para que la letra entre DESPUÉS que los actores y se vaya ANTES. Es un número,
   no texto (LEY 3). Sin motor la variable no existe y `var(--ui, 1)` resuelve en 1: la página sin JS se lee entera.
   Son dos selectores porque son dos formas: cinco mundos llevan un `.bloque` colgando de la sección, y el cinturón
   lleva tres `.parada` dentro de sus `.paso`. El sello del mundo va DENTRO del bloque, así que entra solo. El de
   ENTRADA y el de VUELTA quedan fuera a propósito — son la marginalia del tránsito, y se leen mientras se viaja, que
   es justamente cuando el bloque del mundo no debe verse. */
html.motor .mundo > .bloque,
html.motor .mundo > .tiempo > .bloque,
html.motor .mundo > .paso > .parada,
html.motor .mundo > .paso > .bloque{opacity:var(--ui,1)}   /* Meissa: dos bloques, cada uno en su paso */
/* Y EL SELLO DE ENTRADA HACE LO CONTRARIO: es la marginalia del TRÁNSITO, se lee mientras se viaja y sobra en
   cuanto la escena está puesta. Hasta hoy se quedaba clavado al fondo del contenido de su seccion —el sticky no
   puede bajar mas alla de ahi— y el sello del mundo nacia justo en ese punto, asi que los dos acababan a 71 px del
   borde superior, uno encima del otro; partir la cartela en dos lineas lo convirtio en cuatro. Con `--ui` invertido
   el relevo es exacto: el del tránsito se va justo cuando entra el del mundo. Sin motor la variable no existe y
   `var(--ui,0)` deja el sello visible, que es lo que debe pasar sin JS. */
/* La opacidad ya no se deriva de `--ui` sino de `--transito`, que el motor escribe directamente: 1 mientras u está
   dentro de la ENTRADA de este tramo, 0 fuera. `1 - --ui` decía «la escena aún no está puesta», que NO es lo mismo
   que «su tránsito está pasando»: con la escena aún lejos, `--ui` vale 0 y el sello quedaba encendido para siempre,
   y como es `sticky`, al salir su sección por arriba subía hasta plantarse sobre el wordmark. Sin motor la variable
   no existe y `var(--transito,1)` lo deja visible, que es lo que debe pasar sin JS. */


/* la marginalia del cuadro: abajo a la izquierda, quieta mientras su tramo pasa */
/* LA CARTELA VA EN DOS LÍNEAS, que es como la ponen los doce cuadros: fecha arriba, objeto abajo (`41:22` en
   y 820 y `41:23` en y 840, veinte píxeles de separación). La página las tenía unidas por un guion largo y se leía
   como un pie de foto, no como la cartela de una lámina. El corte se hace por ese mismo guion, sin tocar una palabra.
   En ATLAS sigue en una línea: su segunda —«época 2026.0 · … Bencosme fecit», que `42:2` sí dibuja— es COPY que no
   existe todavía en el documento, y el copy es de Fran. */
.sello{font-size:.66rem;letter-spacing:.09em;color:var(--ink-3);line-height:1.6;max-width:46ch}
.sello .fecha,.sello .objeto{display:block}
.mundo .sello{position:absolute;left:var(--pad);right:var(--pad);bottom:2.2rem}
.sello.entrada,.sello.vuelta{position:sticky;top:calc(100svh - 3.4rem);margin-bottom:-1.6rem;z-index:1}

/* ══ EL MARGEN DE LA LAMINA, Y EL SELLO IMPRESO EN EL ═══════════════════════════════════════════════
   Fran, 21 sep: *«hay como unas marcas de pantalla o algo asi que se estan sobreponiendo sobre otra ui»*.
   CINCO INTENTOS antes de este, todos medidos y todos revertidos, y lo que ensenaron: el sello del mundo iba
   `absolute` dentro de `.bloque`, que es `sticky` y mide un encuadre, asi que al salir el bloque por arriba el
   sello BARRIA la pantalla y cruzaba el wordmark; y fijarlo a una esquina tampoco vale, porque **los paneles miden
   un encuadre entero y su texto pasa por las CUATRO esquinas** al deslizarse: con el sello clavado abajo a la
   izquierda quedaban 16 choques medidos. No hay esquina libre DENTRO del cuadro.
   Asi que el sello sale del cuadro: la lamina reserva abajo una banda de papel, el contenido TERMINA encima de ella
   —los paneles miden un encuadre menos la banda— y el sello se imprime dentro. Una banda que tapa media linea no es
   un margen, es un recorte: por eso se acorta el panel y no solo se pinta la banda.
   Y el relevo se escribe entero, que es lo que fallaba antes: `data-escena` tiene UN solo valor, asi que solo la
   pareja del mundo actual puede encenderse, y dentro de esa pareja el sello del mundo y el del transito son
   complementarios por `--transito`. Dos sellos a la vez dejan de ser posibles.
   Sin motor no aplica nada: el sello se queda en su bloque, que es lo correcto sin JS. ══ */
html.motor .bloque,html.motor .parada{height:calc(100svh - var(--banda))}
html.motor .lamina{inset:16px max(16px, calc((100vw - min(100vw, 1440px)) / 2)) var(--banda);z-index:5}
html.motor #viaje::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(var(--banda) + 46px);z-index:3;pointer-events:none;background:linear-gradient(to top, var(--bg) var(--banda), transparent calc(var(--banda) + 46px))}
html.motor .mundo .sello{position:fixed;left:var(--lado);right:auto;top:auto;bottom:calc((var(--banda) - 1.1rem) / 2);margin:0;z-index:4;
  max-width:70ch;font-size:.58rem;letter-spacing:.13em;opacity:0;transition:opacity .35s ease}
html.motor[data-escena="betelgeuse"] #betelgeuse .sello:not(.entrada):not(.vuelta),
html.motor[data-escena="saiph"] #saiph .sello:not(.entrada):not(.vuelta),
html.motor[data-escena="meissa"] #meissa .sello:not(.entrada):not(.vuelta),
html.motor[data-escena="bellatrix"] #bellatrix .sello:not(.entrada):not(.vuelta),
html.motor[data-escena="cinturon"] #cinturon .sello:not(.entrada):not(.vuelta),
html.motor[data-escena="rigel"] #rigel .sello:not(.entrada):not(.vuelta){opacity:calc(1 - var(--transito,0))}
html.motor[data-escena="betelgeuse"] #betelgeuse .sello.entrada,
html.motor[data-escena="saiph"] #saiph .sello.entrada,
html.motor[data-escena="meissa"] #meissa .sello.entrada,
html.motor[data-escena="bellatrix"] #bellatrix .sello.entrada,
html.motor[data-escena="cinturon"] #cinturon .sello.entrada,
html.motor[data-escena="rigel"] #rigel .sello.entrada{opacity:var(--transito,0)}
@media (max-width:760px){:root{--banda:38px}}
/* la línea de la llegada: se lee durante la obertura, junto a Betel, y se va cuando el viaje empieza */
.linea{font-size:.8rem;color:var(--ink-3)}
html.motor .linea{position:fixed;left:var(--lado);top:52svh;opacity:0;transition:opacity .9s;z-index:3}
html.motor:not(.suelto) .linea{opacity:1}

/* VERSALITAS: Instrument Sans MEDIUM 12 / 2.2, medido en el nodo `41:16` con get_design_context. Estaban en
   Regular 11.2 / 2.016 y salían un 7-11 % estrechas (444 px del nodo contra 413 medidos en la pagina). */
.cintillo{font-size:.75rem;letter-spacing:.1833em;font-weight:500;text-transform:uppercase;color:var(--ink-3);margin:0 0 1.25rem}
#meissa .cintillo{font-size:10.5px;letter-spacing:0}                                                 /* 185:136 · ls PERCENT 0 */
.titular{font-weight:300;font-size:clamp(1.9rem,3.61vw,52px);line-height:1.269;letter-spacing:-.03em;margin:0 0 1.6rem;max-width:24ch}
#betelgeuse .titular{font-size:clamp(2rem,5.83vw,84px);line-height:1.0476;letter-spacing:-.0333em}   /* 41:17/41:18 · 84/88 · ls −2.8 */
#saiph .titular{font-size:clamp(1.9rem,4.03vw,58px);line-height:1.069;letter-spacing:-.0414em}       /* 60:6 · 58/62 · ls −2.4 */
#rigel .titular{font-size:clamp(1.9rem,4.03vw,58px);line-height:1.2759;letter-spacing:-.0414em}      /* 250:403 · 58, lh AUTO 74 */
#meissa .titular{letter-spacing:0}                                                                   /* 185:137/138 · ls PERCENT 0 */
.titular b{display:block;font-weight:500}
.nb{white-space:nowrap}
/* el punto: sin motor lo pinta el CSS; con motor es Betel quien se posa en él */
#betelgeuse .punto{width:.238em;height:.238em}   /* 41:19  ⌀20 / 84 */
#saiph .punto{width:.293em;height:.293em}        /* 60:8   ⌀17 / 58 */
#bellatrix .punto{width:.269em;height:.269em}    /* 230:16 ⌀14 / 52 */
#rigel .punto{width:.241em;height:.241em}        /* 250:405 ⌀14 / 58 */
#meissa .punto{width:.346em;height:.346em;background:radial-gradient(circle,#fff7eb 0%,#fc9e4d 50%,#db3d29 100%)}  /* 185:140 ⌀18 / 52, y no es plano */
.punto{display:inline-block;width:.26em;height:.26em;border-radius:50%;background:var(--signal);margin-left:.1em;vertical-align:baseline}
html[data-cielo="ouranos"] .punto{box-shadow:0 0 .5em var(--signal)}
html.motor .punto{opacity:0}
.lede{color:var(--ink-2);font-size:clamp(.95rem,1.18vw,17px);line-height:1.706;max-width:560px}     /* 41:20 · 17/29 · w 560 */
#saiph .lede,#bellatrix .lede{font-size:clamp(11.5px,1.11vw,16px);line-height:1.6875}
#saiph .lede{max-width:470px}                                                 /* 59:3 · el nodo mide 470 */                /* 60:9 · 16/27 */
#meissa .lede{font-size:clamp(11.5px,.94vw,13.5px);line-height:1.185;max-width:600px}                /* 185:141 · 13.5 · w 600 */
#rigel .lede{font-size:clamp(11px,.87vw,12.5px)}                                                     /* 250:392 */
.lede.corto{margin-top:2rem;font-size:.92rem}
.guia{display:inline-block;margin-top:2.5rem;font-size:.75rem;letter-spacing:.1833em;font-weight:500;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
.pendiente{font-size:.72rem;color:var(--halo);margin-top:.9rem}

/* Saiph: los cinco casos */
/* SAIPH · el cuadro `59:3`. El texto a la izquierda (x=72) y las cinco portadas a la derecha, ALTERNANDO
   x=652 y x=892 —los 240 px de diferencia son el 16,7 % del cuadro— cada 145 px de alto. Cada portada es una
   IMAGE de 172×97 con trazo de 1,2, su título de 15 y su línea de 13 en `#f5822a`, que es naranja y no gris:
   es la cifra comprobable, y por eso brilla. */
#saiph .cuerpo{grid-template-columns:minmax(0,38fr) minmax(0,62fr);align-items:start}
/* ── LOS DOS NÚMEROS QUE HACÍAN QUE EL ZIGZAG NO SE LEYERA. Medido el 16 sep proyectando las cinco portadas a
   coordenadas del cuadro: salían en x 736 / 839 —**103 px de separación**— donde `59:3` pide 652 / 892, que son
   **240**. Y el paso vertical salía de 176 donde el cuadro pide 145. Con 103 px la alternancia no se lee como dos
   columnas: se lee como temblor, y las cinco juntas parecen una pila. Con el paso suelto, además, la quinta caía en
   y 806 y se salía del encuadre.
     · el desplazamiento iba en `%`, que en CSS es porcentaje del BLOQUE CONTENEDOR —la columna derecha del grid,
       unos 800 px— y no del cuadro. 16,7 % de 800 son 134, no 240. Va en `svw`, que sí mide el encuadre: 16,7 svw
       de 1440 son exactamente los 240 del nodo.
     · el hueco restaba 106 px dando por hecho que la ficha mide eso, y mide ~135: la imagen (96) más el título y la
       línea de la cifra. Ahora la altura de la ficha se declara y se resta de verdad, así que el paso es el del
       cuadro a cualquier altura de ventana. ── */
.casos{list-style:none;margin:0;padding:0;display:grid;align-self:start;
  --ficha:clamp(116px,19svh,172px);
  --alto-item:calc(var(--ficha) * 97 / 172 + 39px);   /* imagen + título + línea de la cifra */
  gap:max(6px, calc(145 / 900 * 100svh - var(--alto-item)))}
/* 16,7 svw media el VIEWPORT, y eso valia cuando el viewport ERA el cuadro. Con area segura (2.74) a 3440 px
   daba 574 px de desplazamiento en vez de 240, y las fichas se salian 43 px por la derecha. Se mide contra el
   cuadro, que es lo que la cifra siempre quiso decir. */
.casos li:nth-child(even){margin-left:calc(16.7 * var(--cuadro) / 100)}   /* 892 − 652 = 240 px de los 1440 del cuadro */
/* la ficha se mide con la ALTURA de la ventana, no en 172 px fijos: con cinco fichas de 132 px más sus huecos, en
   una pantalla de 752 px la quinta se salía del bloque. El cuadro las mide sobre 900 px de alto, así que la
   proporción se conserva midiéndolas igual. */
.casos a{text-decoration:none;display:block;width:var(--ficha);max-width:100%}
.casos img{width:100%;height:auto;aspect-ratio:172/97;object-fit:cover;
  border:1.2px solid color-mix(in srgb,var(--ink) 34%,transparent);margin-bottom:9px}
html[data-cielo="atlas"] .casos img{filter:grayscale(1) contrast(1.2)}
.casos h3{font-size:12.5px;font-weight:500;margin:0 0 2px;color:var(--ink)}
.casos a:hover h3{text-decoration:underline;text-underline-offset:.22em}
.casos small{display:block;font-size:11px;color:#f5822a}                     /* 59:3 · la línea de la cifra */
html[data-cielo="atlas"] .casos small{color:var(--signal)}                    /* en el mapa, el azul de la anotación */

/* Meissa: cuatro pares */
/* MEISSA · los cuatro pares, del cuadro `185:2`. Cada uno: a la izquierda la idea DESCARTADA —disco ⌀34 `#211a1a`
   con borde y dos aspas encima— y a la derecha la CAZADA —punto ⌀9 con halo, anillo ⌀28 `#fab86b` y su marca de
   caza—, unidas por un camino punteado. Las filas van cada 156 px (y = 197 · 353 · 509 · 665). */
/* REDISEÑO 16 sep. Fran: «no tiene iconos, los textos no se leen bien … 4 cosas con símbolos raros, lo que parece ser
   iconos rotos y después unos mensajes ambiguos, después 4 mensajes más los cuales no conecto con los de la izquierda».
   Fuera el disco tachado y el anillo: cada par dice con PALABRAS qué descartó y qué cazó, unidos por una flecha, y la
   prueba debajo de lo cazado. Es lo que el cuadro dibuja, dicho para que se lea de un vistazo. */
.pares{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.1rem,3.2vh,2rem);align-self:center}
.pares li{display:grid;grid-template-columns:minmax(0,1fr) 2rem minmax(0,1.25fr);gap:.2rem .8rem;align-items:start}
.pares .letra{grid-column:1/-1;font-family:var(--display);color:var(--ink-3);font-size:12px}
.pares small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem}
.pares .descarte,.pares .caza{display:block;padding:.6rem .8rem;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 55%,transparent)}
.pares .caza{border-color:color-mix(in srgb,var(--signal) 55%,var(--line))}
.pares s{display:block;color:var(--ink-3);font-size:13px;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-3) 80%,transparent)}
.pares strong{display:block;font-weight:500;font-size:13.5px;color:var(--ink)}
.pares em{display:block;font-style:normal;color:var(--ink-3);font-size:10.5px;margin-top:.3rem}
.pares .via{align-self:center;justify-self:center;color:var(--ink-2);font-size:1.1rem;line-height:1;margin-top:1.1rem}
.pares .via::before{content:"→"}
.clave{margin-top:2.5rem;font-size:.8rem;color:var(--ink-3);display:grid;gap:.5rem}
.clave dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.clave dd{margin:0;display:flex;gap:.6rem;align-items:baseline}
.clave i{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;flex:none}
.clave i.oscura{border:1px solid var(--ink-3)}
.clave i.encendida{background:var(--signal)}

/* BELLATRIX · LA REGLA GRADUADA. Medida sobre `215:2`, que NO dibuja una rejilla de cinco columnas con números
   01-05 —que es lo que había aquí— sino una REGLA: una línea, cuatro graduaciones con su parada de brasa, y un
   tramo más que sigue apagado después de la última. Las cifras del cuadro:
     la línea    y=338, de x=560 a x=1198 · `la escala · sigue` de 1198 a 1368 (170 px = 26,6 % del tramo medido)
     graduación  14 px de alto (y 331→345), en x = 720 · 879 · 1039 · 1198
     parada      ⌀8 centrada en la línea, en el mismo x que su graduación
     rótulos     x = 554 · 714 · 873 · 1033 · 1192 → separación 160, 159, 160, 159: EQUIDISTANTES
   La PRIMERA parada no lleva marca: ahí se posa Betel, que es el punto del titular (`230:16`, ⌀14 en x=560). Por eso
   la regla empieza justo donde acaba el título y no debajo de él. */
.metodo{grid-template-columns:minmax(0,33%) minmax(0,1fr);column-gap:clamp(1rem,3vw,3rem);align-items:end}
.metodo .dicho{grid-column:1}
.metodo .sello{grid-column:1/-1}
.regla{list-style:none;margin:0 0 .4rem;padding:1.4rem 0 0;position:relative;grid-column:2;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
/* ── LA REGLA NO PUEDE IR EN `--line`, Y ESO VALE PARA CUALQUIER TRAZO QUE CAIGA SOBRE LA ESCENA.
   `--line` es un color de SUPERFICIE: nace para bordes sobre un fondo sólido, y en Atlas cumple —#B6BBC6 sobre el
   papel #E7EAEF se lee—. En Ouranos vale #23282F, que es un negro azulado; sobre la nebulosa de Bellatrix, medida
   en 27 de luminancia, es un negro sobre otro negro. Resultado: la línea y sus cuatro graduaciones NO SE VEÍAN, y
   sin la regla las cinco paradas no se leen como escala sino como cinco etiquetas sueltas — que es exactamente
   como las describí en la revisión. Las brasas sí se veían, porque van en `--halo` (#FFC53D), que es luz.
   Así que el trazo se ata a la TINTA del mundo, no a la línea de superficie: `--ink-3` es el escalón más flojo de
   la rampa de cada escena, así que la regla cambia de color con el mundo como todo lo demás, y al 52 % sigue
   siendo un trazo fino y no un subrayado. En Atlas esto la deja igual de discreta sobre el papel. ── */
.regla::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:color-mix(in srgb,var(--ink-3) 52%,transparent)}
/* el tramo que sigue: 170 px sobre los 638 de la regla = 26,6 %, y apagado */
.regla::after{content:"";position:absolute;left:100%;width:26.6%;top:0;height:1px;
  background:color-mix(in srgb,var(--ink-3) 52%,transparent);opacity:.45}
.regla li{position:relative;font-size:.72rem;color:var(--ink-3);line-height:1.45;padding-right:.9rem}
.regla li::before{content:"";position:absolute;left:0;top:-7px;width:1px;height:14px;
  background:color-mix(in srgb,var(--ink-3) 68%,transparent)}   /* la graduación, un punto más viva que la regla */
.regla li::after{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--halo)}
.regla li:first-child::before,.regla li:first-child::after{content:none}   /* ahí está Betel, no una marca */
.regla b{display:block;color:var(--ink-2);font-weight:500;font-size:.88rem;margin-bottom:.25rem}
/* Fran, 17 sep: «le faltan iconos y alguna clase de animación o interacción a la ui». Un icono de línea por parada, y
   las cinco entran escalonadas cuando la escena es Bellatrix (`html[data-escena]`, que ya escribe el motor). Al pasar el
   ratón, la parada se enciende y su marca late. */
.regla .icono{display:block;width:20px;height:20px;color:var(--ink-3);margin-bottom:.45rem;transition:color .3s}
.regla li{transition:color .3s}
.regla li:hover,.regla li:hover .icono,.regla li:hover b{color:var(--ink)}
.regla li::after{content:none}   /* el punto amarillo, quitado (Fran, 17 sep) */
@keyframes late{0%,100%{transform:scale(1)}50%{transform:scale(1.7);box-shadow:0 0 10px var(--signal)}}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html[data-escena="bellatrix"] .regla li{animation:entra .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.35s + var(--i,0) * .14s)}
@media (prefers-reduced-motion:reduce){.regla li,.regla li:hover::after{animation:none}}
.regla li:first-child b{color:var(--ink)}    /* «Ask» va en tinta plena: es la parada donde se está */

/* EL CINTURÓN: TRES PARADAS, CADA UNA SU PANTALLA — y cada una QUIETA mientras pasa.
   Era la única sección del viaje que no se quedaba quieta: sus tres paradas bajaban con el scroll, y como el marco
   es `position:fixed` y aquí NADA lleva fondo (ley 1 de esta hoja), el texto pasaba por DEBAJO del wordmark. Se ve
   en el cuadro de u 0.653: «Long story» encima de «franbencosme».
   El arreglo es el patrón que ya usa todo lo demás —`position:sticky`— pero un sticky sólo se queda dentro de SU
   padre: tres hermanos pegados a top:0 en el mismo padre se pisan entre ellos. Por eso cada parada va envuelta en
   su propio `.paso`, que es el trozo de scroll durante el cual esa parada manda. */
.paso{position:relative;min-height:128svh}
.parada{position:sticky;top:0;height:100svh;padding-block:min(14vh,7.5rem) min(10vh,5rem);display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.ancla{font-size:.66rem;letter-spacing:.16em;color:var(--ink-3);margin:0 0 1rem}
/* MINTAKA, medido sobre `309:2` (el cuadro vivo; `149:2` se llama a sí mismo SUPERADA). El cuadro reparte así:
   IZQUIERDA  cintillo (72,132) · titular (72,168 y 224) · biografía (72,316, 400×288) · nota (72,634)
   DERECHA    retrato (1000,250, 250×312) y DEBAJO su pie — nombre (1000,578) y lugar (1000,604)
   O sea: la biografía va con el titular, no pegada al retrato. Estaba al revés —retrato y biografía uno al lado
   del otro— y por eso la columna derecha se hacía una pared de texto. El retrato ya no es cuadrado: 250×312. */
.quien{display:grid;gap:.9rem;align-items:start;justify-items:start}
.quien img{width:clamp(9rem,17vw,15.6rem);aspect-ratio:250/312;object-fit:cover;
  border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
html[data-cielo="atlas"] .quien img{filter:grayscale(1) contrast(1.15)}
.quien h3{font-size:1.15rem;font-weight:500}
.lugar{color:var(--ink-3);font-size:.8rem;margin:.2rem 0 0}
.bio{color:var(--ink-2);line-height:1.5;   /* 309:528 · lineHeight PERCENT 150 */
  font-size:.95rem;margin:.75rem 0 0;max-width:46ch}
.bio + .bio{margin-top:.9rem}
/* la biografía larga (Fran, 17 sep: «que sea lo suficientemente larga») no cabe en una columna de 400 px dentro de una
   pantalla: en escritorio se parte en DOS columnas de texto bajo el titular, y así la parada sigue cabiendo en 100svh */
/* Fran, 17 sep: «en biografía pon un recuadro medio transparente atrás para mejorar la lectura» */
#mintaka .titular{margin-bottom:.9rem}
/* Fran, 21 sep: *«se ve muy parecido a un patch para que se lea y no como un estilo de diseno»*. El recuadro lo
   pidio el 17 sep para poder leer la biografia sobre el escombro; hoy el escombro ya no esta ahi —el velo de aire de
   materialCuerpo lo manda al fondo delante de la columna—, asi que la caja sobra. Se va la caja, se queda la MEDIDA:
   dos columnas y el mismo ancho de linea, que es lo que hacia legible el cuadro del storyboard, no el relleno. */
.bios{columns:2;column-gap:1.8rem;margin-top:.8rem}
.bios .bio{margin-top:0;max-width:none;font-size:.86rem;break-inside:avoid}
.bios .bio + .bio{margin-top:.8rem}
/* ALNILAM · EL COLLAR. El cuadro no las apila: las pone en DIAGONAL bajando a la izquierda —x 885 · 828 · 732,
   y 1007 · 1167 · 1437— y a cada una le da un `perla · brillo` de 90 px con la `perla` de 9 px dentro, a la
   izquierda del título. Es un collar de perlas, y por eso el ancla se llama «the string of pearls». */
.perlas{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.4rem,3.4vh,2.6rem)}
.perlas li{position:relative;padding-left:3.2rem}
.perlas li:nth-child(2){margin-left:clamp(0rem,3.5vw,3.5rem)}
.perlas li:nth-child(3){margin-left:clamp(0rem,7vw,7rem)}
.perlas li::before{content:"";position:absolute;left:0;top:.15em;width:2.2rem;height:2.2rem;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--halo) 55%,transparent) 0%,transparent 68%)}
.perlas li::after{content:"";position:absolute;left:.95rem;top:calc(.15em + .95rem);width:.45rem;height:.45rem;
  border-radius:50%;background:var(--halo)}
/* Fran, 17 sep: «cambia la ui del blog que así no se entiende que son artículos para clickear y leer». Cada perla es
   una caja con el título, la fecha y una llamada explícita; al pasar, el borde se enciende y la llamada avanza. */
.perlas a{text-decoration:none;display:block;padding:.85rem 1rem;border:1px solid var(--line);border-radius:4px;background:color-mix(in srgb,var(--bg) 55%,transparent);transition:border-color .3s}
.perlas a:hover{border-color:var(--signal)}
.perlas .leer{display:block;margin-top:.45rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);transition:transform .3s}
.perlas a:hover .leer{transform:translateX(.35rem)}
.perlas h3{font-size:1.25rem;font-weight:500;margin:0 0 .3rem}
.perlas a:hover h3{text-decoration:none}
.perlas time{color:var(--ink-3);font-size:.8rem}
/* ALNITAK. El cuadro pone las voces Y las marcas en la MITAD DERECHA (x=840, y 2020 · 2150 · 2280 y luego el
   rótulo en 2430 con los ocho sellos en 2450); a la izquierda sólo queda el ancla con Betel posada. Estaban
   repartidas una a cada lado. */
.solo-ancla{align-self:start}
.chispas{margin-top:clamp(1rem,2.5vh,2rem)}
.voces{display:grid;gap:clamp(1rem,2.6vh,2rem);margin:0}
.voces blockquote{margin:0;font-size:clamp(.82rem,1.85vh,1rem);line-height:1.45;color:var(--ink);max-width:46ch}
.voces cite{display:block;font-style:normal;margin-top:.5rem;font-size:.82rem;font-weight:500}
/* Fran, 17 sep: «ponle un icono de persona que lo dijo y cada recomendación linkee a LinkedIn» */
.voces cite a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ink-3) 60%,transparent)}
.voces cite a:hover{border-bottom-color:var(--signal)}
.voces .persona{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
html[data-cielo="atlas"] .voces .persona{filter:grayscale(1) contrast(1.1)}
.voces .todas{display:inline-block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);text-decoration:none;margin-top:.2rem}
.voces cite span{display:block;font-weight:400;font-size:.74rem;color:var(--ink-3);margin-top:.15rem}
.marcas{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;padding:0;margin:.7rem 0 0}
.marcas img{height:clamp(1.3rem,2.6vh,1.9rem);width:auto;opacity:.85}   /* un poco más grandes: a 20 px no se leían (Fran, 17 sep) */
/* PNG blancos: en Atlas, tinta. Había DOS reglas y la segunda (grayscale) pisaba el invert de la primera: por eso seguían
   blancos (Fran, 17 sep, dos veces: «los logos deberían estar negros y aún los tienes en blanco»). Una sola regla. */
html[data-cielo="atlas"] .marcas img{filter:invert(1) contrast(1.4);opacity:1}

/* Rigel: las condiciones se leen mientras se sube; el titular se apoya en el suelo y el correo es lo último */
/* RIGEL: el bloque sticky necesita un contenedor QUE ACABE donde empieza el pie. Sin él, el sticky seguía pegado
   a top:0 mientras el pie subía, y como nada lleva fondo los dos se dibujaban encima — el titular «A million ideas»
   cruzado con las columnas del pie, que es lo que se veía en u 0.885. `.tiempo` es ese contenedor y nada más. */
/* …y tiene que ser MÁS ALTO que el bloque, o el sticky no tiene dónde quedarse y se comporta como estático: eso
   volvía a meter el cintillo por debajo del marco fijo. Los demás mundos tienen ese margen gratis —la sección mide
   la entrada MÁS el bloque— pero aquí el bloque está envuelto, así que el margen se le da aquí: 75svh de agarre. */
.tiempo{position:relative;min-height:175svh}
/* Rigel lleva MÁS que ningún otro mundo en una sola pantalla: seis preguntas, el titular y el camino al correo.
   Con el relleno de los demás (min(16vh,9rem) arriba y abajo) las preguntas se salían por arriba y el marco fijo
   les cortaba la primera línea. Aquí el relleno y el interlineado se aprietan para que quepa lo que el cuadro pone. */
/* el segundo bloque de Meissa: los cuatro problemas, en la rejilla de dos columnas de las condiciones de Rigel. Va
   después del bloque de los pares; los dos son pegajosos y el segundo releva al primero al bajar. */
.bloque.problemas .titular{font-size:clamp(1.6rem,3vw,2.6rem)}
.condiciones.numeradas{counter-reset:problema}
.condiciones.numeradas dt{counter-increment:problema}
.condiciones.numeradas dt::before{content:"0" counter(problema);display:block;font-size:.62rem;letter-spacing:.16em;color:var(--signal);margin-bottom:.35rem}
.bloque.problemas .condiciones dd em{display:block;font-style:normal;color:var(--ink-3);font-size:.78rem;margin-top:.35rem}
.bloque.rigel{align-content:space-between;gap:clamp(1.2rem,3vh,2.4rem);padding-block:min(15vh,7.5rem) min(9vh,5rem)}
/* LAS CONDICIONES, medidas sobre `250:2` (metadatos: el cuadro trae 638 nodos de nube y estrella y el código no
   llegaba hasta el texto). El cuadro las pone en DOS columnas —x=72 y x=420, 300 px de ancho cada una— y en TRES
   filas —y=176, 304, 432—, o sea las SEIS preguntas que ya tiene el documento, ocupando sólo la MITAD IZQUIERDA
   del cuadro: la derecha se deja para la figura. Antes las había puesto en cuatro columnas a todo lo ancho, y eso
   no es el cuadro; lo que las desbordaba era el interlineado, no el número de columnas. */
.condiciones{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.8rem,2vh,1.5rem) 2.6rem;max-width:min(100%,46rem)}
.condiciones dt{font-family:var(--display);font-weight:500;font-size:.95rem;margin-bottom:.3rem}
.condiciones dd{margin:0;color:var(--ink-2);font-size:.85rem;line-height:1.45;max-width:40ch}
.cierre{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.camino{text-align:right}
.camino span{display:block;font-size:.82rem;color:var(--ink-3);margin-top:.7rem}
.camino a{font-family:var(--display);font-size:clamp(1.2rem,2vw,1.7rem);font-weight:500;text-decoration:none;color:var(--ink)}
/* Fran, 17 sep: «debería haber un botón en rigel». El correo a cero clics (R25) se vuelve botón: mismo recuadro que el marco. */
/* el CTA de Rigel: un botón, pero de la MISMA línea que el marco —recuadro, versalitas, sin relleno— (Fran, 17 sep: «ese
   botón rompe con la línea gráfica»). Es el mailto, a cero clics; el correo va en texto debajo. */
.camino a.boton{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.2rem;border:1px solid var(--ink-2);border-radius:4px;
  background:color-mix(in srgb,var(--bg) 62%,transparent);color:var(--ink);font-family:var(--body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:border-color .3s,color .3s}
.camino a.boton:hover{border-color:var(--signal);color:var(--signal)}

/* el pie: dentro de Rigel. Es el enlazado interno de las ocho hijas, no un footer de sitio. */
.pie{padding:4rem 0 6rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;font-size:.8rem;color:var(--ink-3)}
.pie h2{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--body);font-weight:400;margin-bottom:.7rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.pie a{text-decoration:none;color:var(--ink-2)}
.pie a:hover{text-decoration:underline;text-underline-offset:.2em}

/* ---------- el recuadro de la lámina (Atlas): la pantalla como mapa ---------- */
/* EL RECUADRO DE ATLAS. Fran, 15 sep: *«en atlas original, la pantalla tenia un recuadro, cual era la idea? que se
   viera mas como un mapa»*, y el 16 sep: *«no veo el recuadro de atlas, como te habia dicho, queria que estuviera
   como el demo de la ruta que habiamos dicho»*. Aquí estaba con `border: 0` —o sea, sin recuadro— y sólo dos rayas.
   Se copia el del demo, `lab/ruta/index.html:31-33`, que es lo que él pidió: marco entero de 1,5 px a 16 px del
   borde, y sobre el canto de arriba y el de abajo una REGLA —trazos de 1 px cada 12— que es lo que hace que se lea
   como una lámina de mapa y no como un borde de CSS. Sólo existe en Atlas: el motor le pasa la mezcla a `opacity`. */
.lamina{position:fixed;inset:16px;z-index:2;pointer-events:none;border:1.5px solid var(--ink);opacity:0;transition:opacity .3s}
.lamina::before,.lamina::after{content:"";position:absolute;left:0;right:0;height:7px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 12px)}
.lamina::before{top:0}.lamina::after{bottom:0}

/* ---------- EL CARGADOR: BETEL VIAJANDO EN BUCLE ----------
   [F] 16 sep: «Tienes que hacer un loader nuevo basado en betel como haciendo loop viajando».
   Los dos colores NO se eligen aquí: son los de Betel en cada cielo, copiados de `motor/nucleo.js:16-17`
   (`CIELOS.<cielo>.betel` = [blanco, medio, fuera]) — Ouranos #ff6a4d → #c0281a, Atlas #8fb6ff → #1e63e6. Así el
   cargador y la estrella que aparece detrás son el mismo cuerpo, no dos dibujos que se parecen.
   El recorrido va de abajo-izquierda a arriba-derecha, que es como el propio cuadro `214:2` dibuja a Betel en
   vuelo (su rastro va de (120,640) a (1014,458)). Y es CSS puro: pinta antes de que el navegador acabe de leer el
   módulo del motor, que es exactamente cuando hace falta un cargador. */
:root{--betel-medio:#8fb6ff;--betel-fuera:#1e63e6}
html[data-cielo="ouranos"]{--betel-medio:#ff6a4d;--betel-fuera:#c0281a}
.velo{display:none}
html.motor .velo{position:fixed;inset:0;z-index:20;background:var(--bg);transition:opacity 1s ease;
  display:grid;place-items:center;overflow:hidden}
html.motor:not(.suelto) body{overflow:hidden}   /* no se viaja hasta que Betel ha llegado */
.velo.se-va{opacity:0;pointer-events:none}
.betel-carga{position:absolute;width:clamp(9px,.95vw,14px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,var(--betel-medio) 38%,var(--betel-fuera) 66%,transparent 100%);
  filter:drop-shadow(0 0 .5rem var(--betel-fuera)) drop-shadow(0 0 1.6rem var(--betel-fuera));
  animation:betel-viaja 3.1s cubic-bezier(.42,0,.58,1) infinite}
/* la cola: no es un adorno, es lo que hace que se lea como VIAJE y no como un punto que parpadea */
.betel-carga::before{content:"";position:absolute;right:50%;top:50%;width:13rem;height:2px;
  transform:translateY(-50%) rotate(-28deg);transform-origin:right center;border-radius:2px;
  background:linear-gradient(270deg,var(--betel-fuera) 0%,color-mix(in srgb,var(--betel-fuera) 28%,transparent) 42%,transparent 100%)}
@keyframes betel-viaja{
  0%   {transform:translate(-46vw,24vh) scale(.45);opacity:0}
  14%  {opacity:1}
  86%  {opacity:1}
  100% {transform:translate(46vw,-24vh) scale(1.1);opacity:0}
}
/* si alguien pide menos movimiento y aun así hay motor, Betel se queda quieta y sólo respira */
@media (prefers-reduced-motion:reduce){
  .betel-carga{animation:betel-respira 2.4s ease-in-out infinite}
  .betel-carga::before{display:none}
  @keyframes betel-respira{0%,100%{opacity:.45}50%{opacity:1}}
}
/* ---------- LA GARGANTA: el final del viaje y la carga de la vuelta son la MISMA pantalla ----------
   El cuadro `119:3` acaba con la boca del agujero llenando el encuadre, y el reloj corta justo ahí
   (`motor/reloj.js:42`). Al otro lado del corte Betelgeuse está descargada y hay que montarla otra vez: si la
   pantalla se abriera en ese instante se vería el cielo vacío, que es el pop que Fran prohibió. Esto es lo que
   sigue tapando mientras carga — y por eso lleva dentro al mismo Betel del cargador, con la misma animación.
   El color no se elige: es el del horizonte en cada cielo — negro en Ouranos, papel en Atlas.
   Va por DEBAJO del marco (z 9): el cuadro del ∞ sigue dibujando el wordmark, el idioma y el correo. */
/* EL ∞ SE LLEVA UNA LEYENDA Y DEJA LA OTRA, donde el cuadro la pone: abajo a la izquierda. Medido en el navegador:
   el sello de entrada de Rigel se queda pegado al FONDO DEL CONTENIDO de su sección (el sticky no puede bajar más
   allá de ahí) y el de la vuelta nace justo en ese mismo punto, así que los dos acaban a 71 px del borde superior,
   uno encima del otro. En el cuadro `119:3` sólo hay una leyenda y está a y 820 de 900. */
html[data-regreso] .sello.entrada{opacity:0;transition:opacity .5s ease}
/* Y EL DE LA VUELTA NO EXISTE HASTA QUE HAY VUELTA — la otra mitad del relevo, que faltaba. El arreglo anterior
   sólo puso a callar al de ENTRADA cuando `--ui` sube, y con eso la parada de Rigel quedó limpia; pero en la
   ENTRADA de Rigel `--ui` todavía vale 0, así que el de entrada sigue puesto (correcto: es la marginalia del
   tránsito) y el de la vuelta TAMBIÉN, porque no tenía ninguna regla. Medido en u 0.790: los dos a opacidad 1 en el
   mismo (72, 846), superpuestos y hechos un borrón — se ve en la captura que mandó Fran.
   El de la vuelta es del ∞, y el ∞ tiene su propio marcador: `html[data-regreso]`, que escribe `motor/regreso.js`.
   Sin motor no hay marcador y la variable no existe, así que se queda visible: la página sin JS se lee entera. */
html.motor .mundo > .sello.vuelta{opacity:0;transition:opacity .5s ease}
/* con `html.motor` delante, y no por gusto: la regla de arriba lleva cuatro clases y ésta llevaba dos más un
   atributo, así que perdía por especificidad y el sello de la vuelta se quedaba en 0 incluso durante la vuelta.
   Medido: en u 0.940, con `data-regreso` ya puesto, los dos sellos marcaban opacidad 0.00. */
/* el sello de la vuelta tenia su propia regla y por eso se quedo pegado al vidrio cuando el resto se centro:
   mismo margen que los demas, medido desde el area segura, y dentro del margen de la lamina como ellos. */
html.motor[data-regreso] .mundo > .sello.vuelta{opacity:1;position:fixed;left:var(--lado);right:auto;top:auto;bottom:calc((var(--banda) - 1.1rem) / 2);margin:0;z-index:4}

:root{--garganta:var(--bg)}
html[data-cielo="ouranos"]{--garganta:#000}
.garganta{display:none}
html.motor .garganta{position:fixed;inset:0;z-index:5;display:grid;place-items:center;overflow:hidden;
  background:var(--garganta);opacity:0;visibility:hidden;pointer-events:none}
html.motor .garganta .betel-carga{opacity:0;transition:opacity .5s ease}

#hud{position:fixed;right:1rem;bottom:1rem;z-index:30;font:11px/1.5 ui-monospace,monospace;color:#a9fdff;background:rgba(0,0,0,.45);padding:.3rem .5rem;max-width:92vw;white-space:pre-wrap}

/* ---------- móvil: una columna, y el lugar sigue siendo el lugar ---------- */
@media (max-width:820px){
  .marco{font-size:.72rem;padding:1rem var(--lado)}
  .marco .der{gap:.9rem}
  .marco .correo{display:none}     /* el correo vuelve abajo, en Rigel y en el pie */
  .switch{padding:.4rem .55rem}     /* en móvil el switch se queda, sólo con el icono: sol o luna */
  .switch span{display:none}
  .bloque.ancho,.parada{grid-template-columns:minmax(0,1fr)}
  .bios{columns:1}
  /* EN MOVIL EL CONTENIDO MANDA EL ALTO. Fran, 22 sep, con una captura del telefono: *«hay elementos que se estan
     sobreponiendo uno encima de otro»*. Medido a 390 px en todo el recorrido: 239 solapes de texto sobre texto.
     La causa de los de dentro de una seccion: en escritorio un bloque cabe en un encuadre y se PEGA arriba, pero en
     una columna estrecha el mismo texto mide mas de una pantalla y se sale de su caja de 100svh, encima del bloque
     siguiente. Ya estaba visto para la biografia (#mintaka) y se aplica a todos: en movil el bloque no se pega, crece.
     El viaje se alarga un poco, que es lo correcto — hay mas que leer por pantalla. */
  .bloque,.parada{position:relative;height:auto;min-height:100svh}
  .paso{min-height:0}
  #mintaka{height:auto;min-height:100svh}
  .condiciones{grid-template-columns:minmax(0,1fr)}
  .bloque.ancho{gap:2rem}
  /* en móvil la regla se endereza: una columna, la línea a la izquierda y las paradas colgando de ella */
  .metodo{grid-template-columns:minmax(0,1fr)}
  .regla{grid-column:1;grid-template-columns:minmax(0,1fr);gap:1.1rem;padding:0 0 0 1.1rem;margin-top:2rem}
  .regla::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto}
  .regla::after{left:0;top:100%;width:1px;height:26.6%}
  .regla li{padding-right:0}
  .regla li::before{left:-1.1rem;top:.45em;width:14px;height:1px}
  .regla li::after{left:calc(-1.1rem - 4px);top:calc(.45em - 4px)}
  .quien{grid-template-columns:auto minmax(0,1fr);gap:1rem}
  .quien img{width:7.5rem}
  .pie{grid-template-columns:minmax(0,1fr)}
  .cierre{flex-direction:column;align-items:start}
  .camino{text-align:left}
  .sello{max-width:34ch;font-size:.62rem}
}