/* El atajo a la solución (9-oct-2026). Qué es y por qué, en atajo.js.
   «Saltar» (10-oct): solo la palabra, abajo, en una esquina. En compu, abajo a la izquierda, alineada con el
   logo y los letreros. En celular, abajo a la derecha. Sale con la película quieta y solo si en
   esa parada la esquina está libre (lo decide atajo.js midiendo lo que hay debajo); las líneas del trazo sí le pasan por
   detrás. Hasta el 10-oct vivía en la barra de arriba y decía «Ya me la sé» (respaldo/atajo-en-la-barra.css).
   «Ver desde el principio» sigue en la barra: en compu junto al logo, en celular debajo del logo. */

/* quien empieza adelante: la película no se enseña hasta que ya saltó (la clase la pone la cabeza de la página) */
/* (sin transición mientras está tapada: la película trae un fundido de medio segundo en su opacidad, y un fundido que ya
   va corriendo le gana hasta a un !important; así, tapada es tapada, sin excepciones. Al destapar, la segunda regla
   —que va después y por eso manda mientras las dos clases coinciden— le regresa el fundido) */
/* (en compu se tapan el escenario y la barra, que son hermanos; en celular, la columna, que trae la barra adentro. La
   barra de celular no se apaga por su cuenta: con la opacidad a medias sus hijos dejan de apilarse con los del lienzo,
   quedan detrás del velo de la barra y, al destapar, aparecerían de golpe al final en vez de fundirse con lo demás) */
html.adelante div.stage, html.adelante body > .nav, html.adelante .col { opacity: 0 !important; transition: none !important; }
html.adelante-sale div.stage, html.adelante-sale body > .nav, html.adelante-sale .col { transition: opacity .5s ease !important; }

.atajo { position: absolute; z-index: 13; display: inline-flex; align-items: center; gap: .6em; margin: 0; border: 0; background: none; color: var(--tinta, #0b132b); white-space: nowrap; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s .18s; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; }
.atajo.ve { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.atajo--b.ve { transition: opacity .45s ease .35s, visibility 0s; }
/* a la espera (toca «Saltar» pero la película va de camino o la esquina está ocupada): no se ve ni se puede tocar, pero
   el teclado sí lo alcanza, y al tomar el foco se enseña */
.atajo.espera { visibility: visible; pointer-events: none; transition: opacity .14s ease; }
.atajo.espera:focus-visible { opacity: 1; pointer-events: auto; }
.atajo:focus-visible { outline: 2px solid var(--tinta, #0b132b); outline-offset: 4px; border-radius: 6px; }
html.cargando .atajo, .abierto .atajo, .abierto .atajo.espera { opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility 0s .12s; }

/* «Saltar»: solo letra. (Primero fue una pastilla con orilla; Rodrigo, 10-oct, 13:29, al verla: «haz más sutil el botón
   de saltar, solo texto, no botón con circunferencia». La pastilla quedó en respaldo/atajo-pastilla.css. Y a las 14:25,
   al verla con dos flechitas al lado: «quita las flechitas, solo la palabra»; esa quedó en
   respaldo/atajo-letra-y-flechitas.css.) Sin orilla ni fondo: la palabra, un poco más clara que la tinta de los
   letreros; con el cursor encima o con el foco se oscurece. Detrás lleva un parche del color del papel, apenas más grande que la letra, que sobre el papel no se ve:
   solo hace que una línea del trazo que pase por ahí se corte antes de la letra, como bajo una etiqueta en un mapa.
   (El parche es macizo, sin sombra: una sombra blanca difuminada el motor de Safari la pinta negra, como un aro oscuro
   alrededor de la palabra. Visto el 10-oct en las fotos de pantalla completa; ver qa/aro.mjs.) */
.atajo--a { gap: 0; padding: 0; font: 600 14.5px/1.5 var(--sans, Inter, system-ui, sans-serif); letter-spacing: -.008em; }
.atajo--a::before { content: ""; position: absolute; z-index: -1; inset: -3px -7px; border-radius: 8px; background: var(--papel, #fff); }
.atajo--a > span { opacity: .72; transition: opacity .16s ease; }
.atajo--a:focus-visible { outline-offset: 6px; }
.atajo--a:active { transform: scale(.97); }
@media (hover: hover) { .atajo--a:hover > span { opacity: 1; } }
.atajo--a:focus-visible > span { opacity: 1; }
/* (compu: fija a la ventana aunque viva en la barra; la orilla es la misma del logo y de los letreros. Abajo deja el
   mismo aire que la seña de la otra esquina. En pantallas grandes la letra crece un poco con la película. El cursor
   tiene más lugar que la letra) */
.atajo--escritorio.atajo--a { position: fixed; left: var(--orilla, var(--gutter, 64px)); bottom: max(14px, calc(22px * var(--S, 1))); font-size: clamp(15px, calc(15px * var(--S, 1)), 18px); }
.atajo--escritorio.atajo--a::after { content: ""; position: absolute; inset: -11px -14px; }
/* (celular: en las unidades del lienzo, que mide 390 de ancho; --alto, su alto, lo pone atajo.js. Del lado derecho deja
   libre el carril de la seña, que vive pegada a esa orilla. El dedo tiene más lugar que la letra) */
.atajo--celular.atajo--a { top: calc(var(--alto, 664px) - 33px); font-size: 13.5px; line-height: 20px; }
.atajo--celular.atajo--a.atajo--der { right: 30px; }
.atajo--celular.atajo--a::after { content: ""; position: absolute; inset: -14px -12px -12px -12px; }

/* «Ver desde el principio» */
.atajo--b { gap: .42em; }
.atajo--b > span { opacity: .72; transition: opacity .16s ease; }
.atajo--b:hover > span, .atajo--b:focus-visible > span { opacity: 1; }
.atajo--escritorio.atajo--b { left: var(--orilla, var(--gutter, 64px)); top: 50%; transform: translateY(-50%); padding: 12px 0; font: 600 15px/20px var(--sans, Inter, system-ui, sans-serif); letter-spacing: -.005em; }
/* (celular: la letra cabe en lo blanco macizo de la franja de la barra, que llega a 54; el dedo tiene más lugar que la
   letra, hacia abajo y a los lados, nunca hacia arriba: ahí está el logo, que es otra liga) */
.atajo--celular.atajo--b { left: var(--g, 20px); top: 43px; padding: 0; font: 600 12.5px/15px var(--sans, Inter, system-ui, sans-serif); letter-spacing: -.005em; }
.atajo--celular.atajo--b::after { content: ""; position: absolute; inset: 0 -18px -24px -12px; }
.atajo__o { flex: none; width: 1.05em; height: 1.05em; opacity: .8; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.atajo--b:hover .atajo__o { transform: rotate(-50deg); }

/* la tapa: del color de a dónde se va. Al inicio, blanca y debajo de la barra (que allá también es blanca). A la
   pantalla azul, cian y encima de todo, barra incluida: la barra trae su propia franja blanca y se vería cortada */
.atajo-tapa { background: var(--papel, #fff); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .34s ease, visibility 0s .34s; }
.atajo-tapa.ve { opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s; }
.atajo-tapa--cian { background: var(--cian, #00cfff); }
.atajo-tapa--escritorio { position: fixed; z-index: 44; inset: 0; }
.atajo-tapa--escritorio.atajo-tapa--cian { z-index: 51; }
.atajo-tapa--celular { position: absolute; z-index: 9; left: 0; top: 0; width: 390px; height: 100%; }
.atajo-tapa--celular.atajo-tapa--cian { z-index: 12; }