/* Atlas unificado: se suma a ../atlas-motion-01/styles.css (que se enlaza tal cual) y trae del storyboard
   ../atlas-after-map-01/styles.css solo lo del relato (C, C2, D y pie), acotado a `.carril` para no chocar con el Atlas. */
:root {
	--primary-active: #173f9e;
	--muted: #3f4b66;
	--linea: 1px; /* un píxel CSS entero: la línea (1 px) y los nodos (11 px) se centran sobre el mismo centro de píxel a 1× y a 2× */
	--x: 50vw; /* columna del relato: x del marcador en el cierre de «Registro»; la fija app.js con map.project */
}
.cta--grande { padding: 0 22px; font-size: 1.05rem; }
.cta:focus-visible { outline-color: var(--navy); outline-offset: 3px; }
@media (max-width: 359px) { .cta--grande { padding: 0 18px; font-size: 1rem; } }

/* ── Transición: superficie blanca sobre el mapa vivo, réplica del marcador y línea azul ── */
.cubre { position: absolute; inset: 0; z-index: 20; background: var(--bg); box-shadow: 0 -6px 18px rgba(20, 33, 61, 0.1); visibility: hidden; transform: translateY(100%); pointer-events: none; }
.hilo { position: absolute; z-index: 22; left: 0; top: 0; width: 0; height: 0; margin-left: calc(var(--linea) / -2); border-left: var(--linea) solid var(--primary); transform-origin: 0 0; transform: scaleY(0); visibility: hidden; pointer-events: none; }
/* Réplica del marcador seleccionado (mismas reglas `.sim` que el del mapa, con --sel: 1): evita el salto cuando la superficie cubre el real. */
.sim.rep { position: absolute; z-index: 22; left: 0; top: 0; opacity: 1; transform: translate(-50%, -50%); --sel: 1; visibility: hidden; pointer-events: none; }
.stage.trans .rail { visibility: hidden; }
/* Sin mapa (error de carga o sin WebGL) la primera escena queda en texto, como promete el aviso. */
.stage[data-estado='error'] .copy article[data-m='0'] { opacity: 1; visibility: visible; }
.stage[data-estado='error'] .rail { display: none; }
.pista.sin-mapa + .carril .puente { display: none; }
/* La atribución del mapa queda por encima de la superficie mientras el mapa se ve; al cubrirlo por completo se oculta (el pie la repite). */
.maplibregl-ctrl-bottom-right { z-index: 21; }
.stage.cubierto .maplibregl-ctrl-bottom-right { display: none; } /* display, no visibility: el control interno de MapLibre fuerza visibility: visible */

/* Explicación de las cifras agrupadas (escena País). Móvil: justo encima del bloque de texto inferior, sin ocupar sitio en él (no mueve el encuadre de la cámara) y en la mitad izquierda, para no cubrir la punta sur de la ilustración.
   Escritorio: abajo a la derecha, junto a la atribución del mapa. */
.cifras { position: absolute; left: 0; width: min(56%, 16rem); bottom: 100%; margin: 0 0 8px; font-size: 0.72rem; line-height: 1.35; color: #3f4b66; text-shadow: 0 0 8px #fff, 0 0 3px #fff; }
@media (min-width: 900px) { .cifras { left: auto; right: var(--gut); bottom: calc(var(--atr) + 14px); width: min(280px, 26vw); margin: 0; font-size: 0.78rem; line-height: 1.4; } }

/* Rótulo del punto de Santiago en la vista de Chile (la hoja del Atlas se enlaza tal cual; aquí se sustituye su texto). */
.pt::after { content: 'Ejemplo en Santiago'; }

/* Con los grupos en el mapa, el de Santiago es el símbolo de la zona: el punto azul sobraría (sería un símbolo duplicado); quedan el filete y el rótulo. */
.stage.con-puntos .pt { background: transparent; border-color: transparent; box-shadow: none; }
/* El filete y el rótulo parten del borde del grupo (radio máx. 23 px + trazo), no del centro, para no cruzar su número. */
.stage.con-puntos .pt::before { margin-left: 22px; }
.stage.con-puntos .pt::after { margin-left: 47px; }

/* ── Relato: la columna vertebral continúa desde el marcador ── */
.carril { position: relative; outline: none; }
.pista.vivo + .carril { margin-top: -52svh; z-index: 2; }
/* En escritorio el marcador queda a media altura: con 44svh el relato empieza bajo el nodo y su columna no lo cruza. */
@media (min-width: 900px) { .pista.vivo + .carril { margin-top: -44svh; } }
/* Sin movimiento no hay solape: el escenario termina y el relato empieza justo debajo. */
.pista:not(.vivo) + .carril .momento:first-of-type { padding-top: 32px; }
.puente { display: block; position: relative; height: 48px; }
/* Enlace entre el marcador (--x) y la columna del relato (--xr, la mide app.js): baja en --x y gira al pie del puente. */
.puente::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--x); margin-left: calc(var(--linea) / -2); border-left: var(--linea) solid var(--primary); }
.puente::after { content: ''; position: absolute; bottom: 0; left: min(var(--x), var(--xr, var(--gut))); width: max(var(--x) - var(--xr, var(--gut)), var(--xr, var(--gut)) - var(--x)); border-bottom: var(--linea) solid var(--primary); margin-bottom: calc(var(--linea) / -2); }
.momento { position: relative; padding: clamp(56px, 11svh, 120px) 0; }
.carril { --tfs: clamp(1.6rem, 7vw, 2.1rem); --ny: calc(var(--tfs) * 0.54); } /* --tfs: cuerpo del título; --ny: centro de su primera línea (interlineado 1,08) = centro del nodo */
.recorrido { position: relative; --lin: var(--gut); } /* --lin: x de la línea dentro de la columna */
/* La línea es un tramo por momento (se solapan 1px para no dejar costura); el último termina en el centro del nodo de D, sin tramo ni punto bajo él. */
.momento::before { content: ''; position: absolute; top: 0; bottom: -1px; left: var(--lin); border-left: var(--linea) solid var(--primary); }
.momento--cierre { --pt: clamp(24px, 6svh, 64px); }
.momento--cierre::before { bottom: auto; height: calc(var(--pt) + var(--ny)); }
.texto { position: relative; margin-left: var(--gut); padding-left: 22px; padding-right: var(--gut); max-width: 46rem; }
.texto::before { content: ''; box-sizing: border-box; position: absolute; left: -5px; top: calc(var(--ny) - 5.5px); width: 11px; height: 11px; border-radius: 50%; background: #fff; border: var(--linea) solid var(--primary); }
.carril .titular { position: static; top: auto; left: auto; right: auto; max-width: none; margin: 0 0 16px; font-family: var(--display); font-weight: 400; font-size: var(--tfs); line-height: 1.08; letter-spacing: -0.01em; color: var(--navy); text-shadow: none; text-wrap: balance; }
.cuerpo-p { margin: 0 0 24px; font-size: 1rem; line-height: 1.5; max-width: 40ch; }
.cuerpo-p:has(+ .cuerpo-p) { margin-bottom: 12px; }
/* Procedencia del ejemplo, con aire respecto del título que le sigue. */
.ancla { margin: 0; padding: 0 var(--gut) 28px calc(var(--gut) + 22px); font-size: 0.85rem; line-height: 1.4; color: var(--muted); }
.ancla b { font-weight: 600; color: var(--navy); }

/* ── Registros de fuentes municipales: la línea azul es el cero de las barras ── */
.regional { --pad: 22px; margin: 8px 0 0; }
.regional figcaption { margin: 0 0 14px; font-size: 0.8rem; line-height: 1.4; color: var(--muted); max-width: 34rem; }
.plano { position: relative; margin: 22px 0 18px calc(var(--pad) * -1); width: calc(100% + var(--pad)); padding: 0 0 52px; }
.area { position: absolute; top: 0; bottom: 52px; left: 0; right: 0; }
.v { position: absolute; top: 0; bottom: 0; left: calc(var(--n) / 450 * 100%); border-left: 1px dotted var(--border-strong); }
.v.cero { border-left: 0; }
.v span { position: absolute; top: calc(100% + 8px); left: 0; transform: translateX(-50%); font-size: 0.7rem; line-height: 1.2; color: var(--muted); }
/* El cero y la unidad quedan a la derecha de la línea azul (10 px, como las etiquetas de las barras), no sobre ella. */
.v.cero span { transform: none; left: 10px; }
.unidad { position: absolute; top: calc(100% + 28px); left: 10px; font-size: 0.7rem; line-height: 1.2; color: var(--muted); }
.filas { position: relative; margin: 0; padding: 0; list-style: none; }
.filas li { margin: 0 0 26px; }
.filas li:last-child { margin-bottom: 0; }
.et { display: table; margin-left: var(--linea); background: var(--bg); padding: 0 6px 5px 10px; font-size: 0.8rem; line-height: 1.3; color: var(--muted); }
.et b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.05rem; line-height: 1.15; color: var(--navy); }
.barra { display: block; height: 18px; width: calc(var(--n) / 450 * 100%); min-width: 4px; background: var(--primary); border-radius: 0 2px 2px 0; }
.com { display: table; max-width: calc(100% - var(--linea)); margin-left: var(--linea); margin-top: 5px; padding: 1px 6px 1px 10px; background: var(--bg); font-size: 0.74rem; line-height: 1.35; color: var(--muted); }
.corte { margin: 0 0 6px; font-size: 0.82rem; line-height: 1.4; font-weight: 600; max-width: 36rem; }
.nota-fig { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--muted); max-width: 36rem; }
@media (min-width: 900px) { .regional { --pad: 40px; } }

/* Cierre */
.momento--cierre { padding-top: var(--pt); padding-bottom: clamp(48px, 9svh, 96px); }
.accion { margin: 0 0 22px; }
.pie { border-top: 1px solid var(--border); padding: 20px var(--gut) 32px; font-size: 0.76rem; line-height: 1.5; color: var(--muted); }
.pie p { margin: 0 0 4px; max-width: 70ch; }
.pie .firma { margin-top: 10px; }
.pie .firma a { display: inline-block; min-height: 24px; padding: 4px 2px; color: var(--navy); text-underline-offset: 3px; }
.pie .firma a:hover { color: var(--primary-hover); }

/* ── Móvil: el hilo baja desde el marcador y gira hasta el margen, donde sigue como columna ── */
@media (max-width: 899px) {
	.ancla { padding-top: 6px; }
	.momento:first-of-type { padding-top: 28px; }
}

/* ── Escritorio: el relato es una columna de lectura centrada en la ventana; la línea azul va en su borde izquierdo y el texto a 40px ── */
@media (min-width: 900px) {
	.recorrido { --lin: 0px; width: min(100% - 2 * var(--gut), 46rem); margin-inline: auto; margin-left: round(down, calc((100% - min(100% - 2 * var(--gut), 46rem)) / 2), 1px); } /* borde izquierdo en píxel entero: línea y nodos no se parten entre dos píxeles */
	.puente { height: 56px; }
	.pista:not(.vivo) + .carril .puente { display: none; } /* sin movimiento no hay línea desde el marcador: no dejar un enlace suelto */
	.momento > .texto { margin-left: 0; padding-left: 40px; padding-right: 0; max-width: none; }
	.carril { --tfs: clamp(2.1rem, 3.3vw, 3rem); }
	.ancla { padding: 0 0 28px 40px; }
	.carril .titular { max-width: 14em; }
	.cuerpo-p { font-size: 1.1rem; }
}

/* ── Escritorio: pasos País / Destino / Registro como índice cartográfico ──
   El número va en un círculo pequeño (como los grupos del mapa: fondo blanco, trazo navy), pegado a la palabra. El paso activo conserva la píldora navy.
   Sin sombras, degradados, iconos ni animaciones; la píldora mantiene 44 px de alto como mínimo. Móvil (3 puntos): sin cambios. */
@media (min-width: 900px) {
	.rail button { gap: 6px; padding: 0 14px 0 10px; }
	.rail button b { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 22px; height: 22px; border: 1.5px solid var(--navy); border-radius: 50%; background: #fff; color: var(--navy); font-size: 0.72rem; line-height: 1; }
	.rail button span { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .maplibregl-marker { transition: none; } }