/* Cleared Go · la película de la web explicativa — estilos compartidos por los dos idiomas.
   Viene de la prueba aislada borrador/pelicula.html, aprobada por Nico el 30/09/2026 («ahora sí se
   entiende claro el movimiento»). El motor está en pelicula.js; cada página sólo trae su texto.
   Sin fuentes de terceros: la política de privacidad del sitio lo promete. */
:root{
  --papel:#f3f2f2; --tinta:#201e1d; --tinta-2:#4a4644; --tinta-3:#6b6765; --tenue:#8d8989;
  --sello:#ec3013; --sello-texto:#c42610; --pelo:rgba(32,30,29,.14); --pelo-2:rgba(32,30,29,.28);
  /* Botones rellenos: el par de colores que pasa el 4,5 en cada tema (ver estilo.css, 2026-10-01). */
  --boton:#c42610; --sobre-boton:#ffffff;
  --fuente:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --canal:clamp(18px,5vw,72px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --papel:#191817;--tinta:#f1efee;--tinta-2:#cbc7c5;--tinta-3:#a5a09e;--tenue:#8d8887;--sello:#ff5334;--sello-texto:#ff8f78;--boton:#ff5334;--sobre-boton:#191817;--pelo:rgba(241,239,238,.16);--pelo-2:rgba(241,239,238,.3)}}
:root[data-theme="dark"]{color-scheme:dark;
  --papel:#191817;--tinta:#f1efee;--tinta-2:#cbc7c5;--tinta-3:#a5a09e;--tenue:#8d8887;--sello:#ff5334;--sello-texto:#ff8f78;--boton:#ff5334;--sobre-boton:#191817;--pelo:rgba(241,239,238,.16);--pelo-2:rgba(241,239,238,.3)}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--fuente);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--sello);outline-offset:3px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* La pantalla del cine: no se mueve nunca. El lienzo es más ancho que la ventana para que el centro
   del enjambre caiga a la derecha del texto sin que las partículas en vuelo choquen contra un borde. */
.escenario{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#globo{position:absolute;left:0;top:0;width:126%;height:100%;display:block;pointer-events:none}
.velo{display:none}

/* La pista: lo único que se desplaza. Su largo lo pone pelicula.js según las escenas. */
.pista{height:calc(var(--largo,12) * 100vh + 100vh);height:calc(var(--largo,12) * 100svh + 100svh)}
.sonda{position:absolute;top:0;left:0;width:1px;height:100vh;height:100svh;visibility:hidden;pointer-events:none}

.cab{position:fixed;inset:0 0 auto 0;z-index:6;display:flex;align-items:center;gap:18px;padding:calc(16px + env(safe-area-inset-top,0px)) var(--canal) 12px}
.logo{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;border:2.5px solid var(--sello);padding:4px 9px 3px;transform:rotate(-2deg);color:var(--sello-texto);font-weight:900;font-size:17px;letter-spacing:-.02em}
.idioma{margin-left:auto;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.idioma:hover{color:var(--tinta)}
.abrir{background:var(--boton);color:var(--sobre-boton);text-decoration:none;font-weight:800;font-size:15px;padding:12px 16px;min-height:44px;display:inline-flex;align-items:center}
.avance{position:fixed;left:0;right:0;top:0;height:2px;background:var(--sello);transform-origin:0 50%;transform:scaleX(0);z-index:7}

/* Los rótulos: quietos en su sitio; lo que se mueve son sus líneas, con la misma posición que el
   enjambre. */
.rotulos{position:fixed;inset:0;z-index:2;pointer-events:none}
.rotulo{position:absolute;left:var(--canal);top:50%;transform:translateY(-46%);width:min(540px,36vw)}
.rotulo.activo{pointer-events:auto}
.linea{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.linea>span{display:block;will-change:transform,opacity}
.ceja{font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sello-texto);display:flex;align-items:center;gap:10px}
.ceja::before{content:"";width:22px;height:2px;background:var(--sello)}
.titular{font-size:clamp(38px,4.2vw,70px);font-weight:900;letter-spacing:-.04em;line-height:1;margin-block:14px 16px;text-wrap:balance}
.bajada{font-size:clamp(17px,1.25vw,19px);color:var(--tinta-2);max-width:42ch}
.fuente{margin-top:12px;font:600 12px var(--mono);color:var(--tinta-3);letter-spacing:.02em}
.consulta{display:flex;margin-top:22px;border:2.5px solid var(--tinta);max-width:440px;background:var(--papel)}
.consulta input{flex:1;min-width:0;border:0;background:transparent;font:500 17px var(--fuente);padding:13px 14px;color:var(--tinta)}
.consulta button{border:0;background:var(--sello);color:#fff;font:800 16px var(--fuente);padding:0 16px;cursor:pointer;min-height:50px}
/* Con .linea>span delante: si no, el display:block de las líneas le gana al flex. */
.linea>span.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.boton{display:inline-block;background:var(--boton);color:var(--sobre-boton);font-weight:800;font-size:18px;padding:15px 22px;text-decoration:none}
.boton-sec{font-weight:700;font-size:16px;color:var(--tinta);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}

/* El tablero de salidas (M-16): la regla de cada país, con la cifra que rueda como una paleta. */
.tablero{margin-top:18px;max-width:460px}
/* El filete de arriba va en la primera fila y no en la lista: la lista no se desvanece con las
   líneas, y su borde quedaba cruzando las escenas siguientes. */
.tablero .linea:first-child>span{border-top:1.5px solid var(--pelo-2)}
.tablero .linea>span{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 14px;padding:9px 0;border-bottom:1px solid var(--pelo)}
.t-pais{font-weight:800;font-size:16px}
.t-valor{font:700 15px var(--mono);letter-spacing:.02em;text-align:right;white-space:nowrap}
.t-regla{grid-column:1 / -1;font:500 12px var(--mono);color:var(--tinta-3);letter-spacing:.04em;margin-top:-4px}
.paleta{display:inline-flex;font-variant-numeric:tabular-nums}
.dig{display:inline-block;height:1.15em;line-height:1.15;overflow:hidden;vertical-align:bottom}
.cinta{display:block;will-change:transform}
.cinta>i{display:block;height:1.15em;font-style:normal}

/* El recorrido: tres pasos, numerados. */
.pasos{margin-top:18px;display:grid;gap:8px}
.pasos .linea>span{display:flex;gap:12px;align-items:baseline;font-size:16px;color:var(--tinta-2)}
.pasos i{font:700 12px var(--mono);font-style:normal;color:var(--sello-texto);min-width:1.6em}
.pasos b{color:var(--tinta);font-weight:800}

/* Las pestañas del panel, con la que se está mirando marcada. */
.linea>span.pestanas{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.pestanas b{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border:1.5px solid var(--pelo-2);color:var(--tinta-2)}
.pestanas b.activa{border-color:var(--sello);color:var(--sello-texto)}

/* Las fuentes y la letra que no es chica. */
.fuentes{margin-top:16px;font:600 12.5px/1.7 var(--mono);color:var(--tinta-2);letter-spacing:.01em;max-width:46ch}
.letra{margin-top:14px;font-size:15px;color:var(--tinta-2);max-width:44ch}
.cambio{margin-top:16px;display:block;border-left:3px solid var(--sello);padding:8px 0 8px 12px;font-size:15px;color:var(--tinta-2);max-width:44ch}
.cambio b{color:var(--tinta)}
.cambio small{display:block;font:600 11.5px var(--mono);color:var(--tinta-3);letter-spacing:.04em;margin-top:2px}

/* Pie de figura: dice qué son las partículas, debajo de ellas. */
.pie-figura{position:fixed;z-index:2;left:63%;bottom:calc(3.2vh + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);white-space:nowrap;opacity:0;pointer-events:none}
.aviso{position:fixed;z-index:2;left:var(--canal);bottom:calc(26px + env(safe-area-inset-bottom,0px));font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);pointer-events:none;opacity:0}

/* El riel: saltar de escena con un clic (M-14). El salto no corta: la película recorre el camino. */
.riel{position:fixed;right:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);z-index:6;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.riel button{display:flex;align-items:center;justify-content:flex-end;gap:9px;background:none;border:0;cursor:pointer;color:var(--tinta-3);font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;min-height:32px;min-width:44px;padding:0}
.riel button::after{content:"";width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%;flex:none}
.riel button[aria-current="true"]{color:var(--sello-texto)}
.riel button[aria-current="true"]::after{background:var(--sello);border-color:var(--sello)}
.riel .r{opacity:0;transition:opacity 200ms ease-out}
.riel:hover .r,.riel button[aria-current="true"] .r,.riel button:focus-visible .r{opacity:1}

/* En el teléfono: el enjambre arriba y el texto abajo, sobre un velo de papel. */
@media (max-width:820px){
  #globo{width:100%;top:-10%;height:80%}
  .velo{display:block;position:fixed;left:0;right:0;bottom:0;top:var(--velo,52%);z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--papel) 64px)}
  .rotulo{top:auto;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:none;width:auto;right:var(--canal)}
  .titular{font-size:clamp(30px,8.4vw,44px);margin-block:10px 10px}
  .bajada{font-size:16px}
  .tablero,.pasos,.linea>span.pestanas,.fuentes,.cambio{margin-top:12px}
  .tablero .linea>span{padding:6px 0}
  .pie-figura,.aviso,.riel{display:none}
  .cab{gap:12px}
  .abrir{font-size:14px;padding:10px 12px}
}