/*
 * COMÚN · lo que comparten TODAS las páginas nuevas del sitio.
 *
 * Cabecera, menú, conmutador de tema, pie, el cielo del OS+ y las piezas de
 * cierre. Vive aparte porque la portada y las diez fichas lo usan igual, y
 * antes cada página heredada repetía su propia copia: cambiar una entrada del
 * menú eran once ediciones y la última se olvidaba.
 *
 * Orden de carga en cada página:
 *     sistema.css   → los tokens del manual y las piezas base
 *     comun.css     → esto: la cabecera, el pie y el cielo
 *     portada.css | ficha.css → lo propio de cada tipo de página
 *
 * El HTML de la cabecera y el pie NO se copia a mano en cada ficha: lo escribe
 * `sitio/tools/generar-fichas.ts` desde una sola función, así que el marcado
 * tampoco puede divergir.
 */

/* La única fuente que no viene del sistema. `swap` para que el titular se lea
   desde el primer instante aunque la fuente tarde: una frase invisible durante
   medio segundo es peor que una frase con otra letra. */
@font-face {
  font-family: "Din Black";
  src: url("/public/font/DINOT-CondBlackItalic.woff2") format("woff2");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ═══ El cielo · el mismo del OS+ ═════════════════════════════════════════
 *
 * POR QUÉ SE REHIZO. La primera versión traía la escenografía FOTOGRÁFICA del
 * sitio anterior —aurora, nubes y cometa en mapa de bits, ~250 KB—. El director
 * pidió el fondo del OS+, que es otra cosa: degradados y un cielo dibujado con
 * CSS. Es la misma receta de `apps/web/src/styles.css`, para que el sitio y el
 * sistema se vean de la misma casa y no de dos.
 *
 * NEBULOSA. Dos figuras desenfocadas (manual 05.3): el verde arriba a la
 * izquierda, el magenta de área abajo a la derecha. Valores del OS+, tal cual.
 *
 * ESTRELLAS. En el OS+ son dos rejillas de puntos regulares. Aquí el director
 * las pidió ALEATORIAS: son dos teselas SVG con las estrellas colocadas al azar
 * —semilla fija, así que el cielo es siempre el mismo— y dibujadas también en
 * los cuatro bordes para que la tesela CASE. Sin ese remate, al repetirse se ve
 * la rejilla del mosaico, que es justo lo contrario de aleatorio.
 * Solo sobre fondo oscuro: el manual restringe las estrellas al gris (05.3).
 *
 * MOVIMIENTO. Dos velocidades distintas al desplazar —la capa cercana el doble
 * que la lejana—, que es lo que da profundidad. Lo mueve un guion de doce
 * líneas escribiendo una variable; el CSS no puede leer el desplazamiento en
 * los navegadores que usa la gente todavía. Con `prefers-reduced-motion` el
 * guion no se ata y queda la deriva lenta de siempre.
 */

/* EL `html` NO PINTA FONDO, Y ES DELIBERADO — no es que se olvidara.
   Cuando `html` no tiene fondo, el del `body` se PROPAGA al lienzo del
   navegador: el body deja de tener caja de fondo propia y sus pseudoelementos
   con z-index negativo se ven. En cuanto `html` pinta, esa propagación se
   corta, el body recupera su caja y el cielo queda DEBAJO — invisible, con
   todo cargado, colocado y sin un solo error.

   Caí en esto DOS VECES en esta página. La segunda no la vi porque comprobé
   que el CSS aplicara en vez de comprobar que se viera, que no es lo mismo.
   Es la configuración del OS+, y funciona por esta razón exacta. */

body::before, body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-fondo); pointer-events: none;
}
/* La nebulosa, en los dos temas. */
body::before { background-image: var(--nebulosa); }
/* Las estrellas, solo en oscuro. `--desliz` lo escribe el guion al desplazar. */
body::after {
  background-image: var(--cielo);
  background-size: 420px 420px, 300px 300px;
  background-position:
    calc(0px - var(--desliz, 0px) * 0.6) calc(0px - var(--desliz, 0px) * 1.0),
    calc(60px + var(--desliz, 0px) * 0.3) calc(80px - var(--desliz, 0px) * 0.5);
}
/* Deriva lentísima, la del OS+: el cielo respira aunque nadie desplace. */
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: cielo-deriva 240s linear infinite; }
}
@keyframes cielo-deriva { to { background-position: -420px 210px, -240px 260px; } }

/* Las ilustraciones se dibujaron para fondo oscuro y varias llevan trazos
   blancos —las estelas— que sobre papel desaparecen. El halo les devuelve el
   suelo sin meter una caja. Es la misma solución del OS+. */
:root[data-tema="claro"] .heroe-arte img,
:root[data-tema="claro"] .manifiesto-arte,
:root[data-tema="claro"] .cierre .cohete {
  background: var(--dibujo-halo); border-radius: 50%;
}

/* ═══ Cabecera ════════════════════════════════════════════════════════════ */

:root { --alto-barra: 4.5rem; }

.cabecera-sitio {
  position: sticky; top: 0; z-index: var(--z-barra);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--borde);
  box-shadow: inset 0 1px 0 var(--filo);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera-sitio { background: var(--superficie); }
}
.cabecera-int {
  display: flex; align-items: center; gap: var(--e3);
  padding-block: var(--e2);
  min-height: var(--alto-barra);
}
.marca-enlace { display: flex; align-items: center; gap: var(--e2); text-decoration: none; flex-shrink: 0; }
.marca-enlace img { height: 30px; width: auto; }

/* EL CONMUTADOR DE TEMA · el MISMO que el OS+ (`.theme-toggle` en
   `apps/web/src/styles.css`): 34×34, esquina de 9px —cuadrado redondeado, no
   círculo—, superficie sólida y el icono a 16px. Copiar la medida importa: un
   control que en el sistema es discreto y en el sitio es un círculo grande
   rompe la sensación de que son la misma casa.

   Antes llevaba las clases de «Ver el trabajo» —mismo verde, misma pastilla—
   y competía con «Conversemos» por la mirada. Von Restorff al revés: lo que
   destaca tiene que ser lo que importa, y cambiar de tema no importa.

   EL ÁREA DE TOQUE SIGUE SIENDO 44px, servida por un pseudoelemento invisible.
   Así el dedo tiene su blanco (ley de Fitts) sin que el control CREZCA: las
   dos cosas se pedían a la vez y no están reñidas. */
/* SIEMPRE EL ÚLTIMO A LA DERECHA. En móvil el menú baja a su propia fila y
   antes el conmutador se quedaba pegado al logotipo, en mitad de la primera
   línea, porque no había nada que lo empujara. `margin-left:auto` lo manda al
   extremo en todos los tamaños.

   Y ESCALA CON LA BARRA: su lado es una fracción de --alto-barra, así que al
   cambiar el alto de la cabecera el control mantiene su proporción en vez de
   quedarse con un tamaño fijo que ya no encaja. */
.btn-tema {
  margin-left: auto;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--alto-barra) * .472); height: calc(var(--alto-barra) * .472);
  flex-shrink: 0;
  border: 1px solid var(--borde); border-radius: 9px;
  background: var(--superficie); color: var(--texto-suave);
  cursor: pointer; transition: color var(--transicion-rapida), background var(--transicion-rapida);
}
.btn-tema::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: max(44px, 100%); height: max(44px, 100%); transform: translate(-50%, -50%);
}
.btn-tema:hover { background: var(--superficie-alta); color: var(--texto); }
.btn-tema svg { width: calc(var(--alto-barra) * .222); height: calc(var(--alto-barra) * .222); }
/* El anillo de foco se ciñe a la forma del control: con el radio de pastilla
   del sistema dibujaba un círculo verde alrededor de un cuadrado, y se veía
   como un adorno en vez de como el foco. */
.btn-tema:focus-visible { outline-offset: 2px; border-radius: 9px; }
/* Dos iconos, uno por tema: el que se enseña es el tema al que se VA, que es
   lo que la gente espera de un conmutador. */
.icono-luna { display: block; } .icono-sol { display: none; }
:root[data-tema="oscuro"] .icono-luna { display: none; }
:root[data-tema="oscuro"] .icono-sol { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .icono-luna { display: none; }
  :root:not([data-tema="claro"]) .icono-sol { display: block; }
}

.nav-sitio { display: flex; gap: var(--e0); margin-left: auto; flex-wrap: wrap; }
/* 44px de alto MÍNIMO. Medido en móvil, estas entradas daban 36 y las del pie
   23: por debajo de 44 el dedo falla y hay que apuntar, que es exactamente lo
   que dice la ley de Fitts. El texto sigue del mismo tamaño; lo que crece es
   la zona que responde. */
.nav-sitio a, .pie-int nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--texto-suave); text-decoration: none;
  font-size: var(--t-pie); font-weight: 500;
  padding-inline: .6rem; border-radius: var(--radio);
  white-space: nowrap;
}
.nav-sitio a:hover { color: var(--texto); background: color-mix(in srgb, var(--texto) 8%, transparent); }
/* El logo también es un enlace y también se toca. */
.marca-enlace { min-height: 44px; }

/* Debajo de 900px el menú baja a su propia línea y se desplaza en horizontal.
   Es lo mismo que hace el blog, por la misma razón: con seis entradas la fila
   no cabe mucho antes de llegar al móvil. */
@media (max-width: 900px) {
  .cabecera-int { flex-wrap: wrap; gap: var(--e1) var(--e2); }
  .nav-sitio {
    order: 3; width: 100%; margin-left: 0;
    overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
    margin-inline: calc(var(--margen-lateral) * -1);
    padding-inline: var(--margen-lateral);
  }
  .nav-sitio::-webkit-scrollbar { display: none; }
}

/* ═══ Cierre ══════════════════════════════════════════════════════════════ */

.cierre { text-align: center; padding-block: var(--e7); }
.cierre h2 { font-size: var(--t-display); margin-bottom: var(--e3); }
/* El cohete ilustrado del Figma, no el símbolo del logo: aquí es la escena que
   cierra el viaje, no una marca. Despega despacio al acercarse. */
.cierre .cohete { width: min(60%, 11rem); height: auto; margin: 0 auto var(--e4); }
@media (prefers-reduced-motion: no-preference) {
  .cierre .cohete { animation: despegar 7s ease-in-out infinite; }
}
@keyframes despegar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-1.75rem) rotate(3deg); }
}

.pie-sitio { border-top: 1px solid var(--borde); background: var(--superficie); }
.pie-int {
  display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: space-between;
  align-items: center; padding-block: var(--e5);
  font-size: var(--t-pie); color: var(--texto-suave);
}
.pie-int nav { display: flex; gap: var(--e3); flex-wrap: wrap; }
.pie-int a { color: var(--texto-suave); text-decoration: none; }
.pie-int a:hover { color: var(--acento); }

/* ═══ Secciones ═══════════════════════════════════════════════════════════ */

/* La cabecera es pegajosa: sin esto, saltar a «#nosotros» deja el titular de
   la sección DEBAJO de la barra y parece que el enlace falló.
   UNA sola variable gobierna el alto de la barra y este margen; si fueran dos
   números, el día que la barra cambie de alto solo se actualizaría uno. */
:target, [id] { scroll-margin-top: calc(var(--alto-barra) + var(--e3)); }

html { scroll-behavior: smooth; }
/* Quien pide menos movimiento no quiere que la página se deslice sola. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.seccion { padding-block: var(--e7); }
.seccion > header { margin-bottom: var(--e5); }
.seccion > header h2 { font-size: var(--t-h1); }
.seccion > header p { color: var(--texto-suave); max-width: 52ch; margin-top: var(--e2); }

/* ═══ El cielo vivo del cierre ════════════════════════════════════════════
 * La única animación de Lottie del sitio, y va SOLO aquí: el cierre es el
 * último momento de la página, y lo que se recuerda de una experiencia son su
 * pico y su final. Ochenta capas de estrellas parpadeando detrás del cohete
 * son ese final.
 *
 * NO SE CARGA HASTA QUE SE ACERCA. `marca/lottie/diferido.js` trae el
 * reproductor cuando esta sección está a una pantalla de distancia; si nadie
 * baja hasta aquí, no se descarga nunca. Y si falla, el hueco queda vacío y el
 * cierre sigue entero — el contenido no depende de que la animación cargue.
 *
 * Solo sobre fondo oscuro: el manual restringe las estrellas al gris (05.3).
 */
.cielo-vivo {
  /* SIN sangrado horizontal. Con `-5%` a los lados el bloque medía un 110% y
     asomaba 26px por la derecha en una pantalla de 1920 — desborde horizontal
     en toda la página por un adorno de fondo. El alto sí sobra por arriba y
     por abajo, que es donde nadie mide el ancho del documento. */
  position: absolute; inset: -10% 0 auto; height: 120%;
  z-index: -1; pointer-events: none;
  opacity: .55;
  display: none;
}
:root[data-tema="oscuro"] .cielo-vivo { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cielo-vivo { display: block; }
}
.cierre { position: relative; isolation: isolate; }

/* ═══ El juego del cohete ═════════════════════════════════════════════════
 * Un guiño a de dónde salió todo. El cohete del cierre se pulsa y se abre.
 *
 * EL CÓDIGO NO SE DESCARGA HASTA QUE SE PULSA: lo trae `juego/cargar.js`, que
 * son doce líneas. La portada sigue pesando lo que pesaba para quien no juega.
 */

.juego-disparador {
  display: block; margin: 0 auto var(--e4);
  background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radio-caja);
  transition: transform var(--transicion);
}
.juego-disparador img { margin: 0; }
.juego-disparador:hover { transform: translateY(-.5rem) rotate(6deg) scale(1.04); }
.juego-disparador:focus-visible { outline: 2px solid var(--acento-fondo); outline-offset: 6px; }

.juego-capa {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--e3);
  background: var(--velo);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.juego-caja {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-3), inset 0 1px 0 var(--filo);
  padding: var(--e3);
  max-width: min(96vw, 34rem);
}
.juego-cerrar {
  position: absolute; top: -.75rem; right: -.75rem; z-index: 2;
  width: 44px; height: 44px; border-radius: var(--radio-pastilla);
  border: 1px solid var(--borde); background: var(--superficie-alta);
  color: var(--texto); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
/* El lienzo se adapta al alto disponible sin deformarse: en un móvil apaisado
   la ventana es baja y una relación fija lo sacaría de la pantalla. */
.juego-lienzo {
  display: block; width: 100%; height: auto;
  max-height: min(74vh, 640px);
  aspect-ratio: 480 / 640;
  object-fit: contain;
  border-radius: var(--radio-caja);
  background: var(--fondo);
  touch-action: none;         /* el dedo pilota, no desplaza la página */
}
.juego-ayuda {
  margin: var(--e2) 0 0; text-align: center;
  font-size: var(--t-micro); color: var(--texto-suave);
}
.juego-ayuda b { color: var(--texto); font-family: var(--fuente-datos); }
.juego-tactil { display: none; }
/* Donde no hay teclado, se explican los gestos y no las teclas. */
@media (hover: none) {
  .juego-ayuda b { display: none; }
  .juego-tactil { display: block; }
}