/* ==========================================================================
   Sidera Cosmos — hoja de estilos compartida
   Tema oscuro nativo (no conmutable). Mobile-first. Sitio autocontenido: no
   hay ni una sola petición a un dominio de terceros, tipografía incluida.
   ========================================================================== */

/* Única familia del sitio. Avenir Next / Avenir para quien la tenga instalada
   (el visitante Apple ve la tipografía real de la marca); Nunito Sans como
   sustituto humanista servido a todos los demás, y detrás los fallbacks de
   sistema. Nada de Inter ni de Space Grotesk: no son de casa. */

/* --------------------------------------------------------------------------
   TIPOGRAFÍA AUTO-HOSPEDADA (22-ago-2026). Nunito Sans se sirve desde este
   mismo dominio, en /fonts/, y ya no desde fonts.googleapis.com. Tres motivos,
   por orden: la tipografía de marca llega igual con un bloqueador de rastreo
   delante o con Google inaccesible (antes el visitante no-Apple caía a la
   grotesca del sistema, justo lo que la hoja de marca quiere evitar); el
   navegador ahorra la conexión a un segundo dominio; y la página de privacidad
   deja de tener que declarar que Google recibe la IP de quien lee.

   Google sirve hoy Nunito Sans como fuente VARIABLE: un único woff2 por
   subconjunto cubre los tres pesos de la casa (400 wordmark y cuerpo, 600
   titulares y rótulos, 700 h1 y strong), instanciados por el eje wght. De ahí
   que haya dos archivos y seis declaraciones, y no seis archivos:
     /fonts/nunito-sans-latin.woff2      30 KB — el que usa el español
     /fonts/nunito-sans-latin-ext.woff2  28 KB — solo si aparece un glifo suyo
   Los unicode-range son los de Google sin tocar, así que el navegador descarga
   el latin-ext únicamente si la página lo necesita. El <head> precarga el
   latin, que se usa siempre. font-display: swap en las seis: el texto se lee
   desde el primer pintado y la fuente entra cuando llega.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   IDENTIDAD CERRADA (1-ago-2026). Este bloque :root es el ÚNICO lugar del
   sitio donde vive un color de marca. No se edita sin orden expresa del
   creador, y ningún archivo de página puede escribir un hex por su cuenta.
   Los dos ámbares son distintos a propósito y JAMÁS se unifican:
     --amber      #F5A623  ámbar de DATO: cifra clave, tagline, acento de UI.
     --amber-mark #F0B23E  ámbar del EMBLEMA y del dibujo de diagramas.
   Contrastes medidos sobre los cuatro fondos de la casa
   (#05070D / #0B0E1D / #101427 / #16244A):
     --text       17.01 / 16.20 / 15.40 / 12.80
     --text-muted 11.01 / 10.48 /  9.97 /  8.28
     --text-dim    9.23 /  8.79 /  8.35 /  6.94
     --amber       9.94 /  9.46 /  9.00 /  7.48
     --amber-mark 10.69 / 10.18 /  9.68 /  8.04
     --teal        6.50 /  6.19 /  5.88 /  4.89
     --magenta     6.02 /  5.73 /  5.45 /  4.53
     --green       8.67 /  8.25 /  7.85 /  6.52
   Teal y magenta son el suelo del sistema sobre #16244A: no se aclaran menos
   ni se eleva más el fondo que llevan debajo.
   -------------------------------------------------------------------------- */

:root {
  /* Lienzo: negro espacial de la casa. No hay versión sobre fondo claro. */
  --bg:            #05070D;
  --bg-soft:       #0B0E1D;
  --bg-hero:       #0E1730;

  /* Superficies y azul estructural. La escala de azules de la casa tiene tres
     peldaños y no se inventa un cuarto: --border-soft comparte valor con
     --border a propósito (se conserva el nombre porque distingue la función,
     separadores de página frente a bordes de componente). */
  --surface:       #101427;
  --surface-2:     #16244A;
  --border:        #16244A;
  --border-soft:   #16244A;
  --border-strong: #2A3E68;
  --line:          #4A628F;

  /* Texto */
  --text:          #E8ECF4;
  --text-muted:    #B9C0CC;
  --text-dim:      #A8B0BE;
  --wordmark:      #F5F5F5;
  --grey-own:      #B9C0CC;

  /* Ámbares de la casa: dos, y no se mezclan (ver cabecera del bloque) */
  --amber:         #F5A623;
  --amber-mark:    #F0B23E;

  /* Par de datos de la casa y código de color de los esquemas */
  --teal:          #4F9EA6;
  --magenta:       #E8579C;

  /* Verde de ESTADO. Entra el 3 de septiembre de 2026 por orden expresa del
     creador: el GO de /lanzamientos/ iba en teal y se perdía contra el fondo,
     que es lo peor que puede pasarle al estado más importante de esa página.
     Es un verde vivo y no fluorescente (tono 146, saturación 0.57, valor 0.75:
     la misma familia que el teal, con el mismo canal rojo bajo) y mide 7.85:1
     sobre la superficie de las tarjetas, frente a los 5.88:1 del teal. NO es un
     color de marca y no entra en emblemas ni en diagramas: significa una sola
     cosa, que un vuelo está autorizado o que salió bien. El verde neón sigue
     rechazado como color de datos; este no lo es. */
  --green:         #52BE80;

  /* Derivados en rgba de los colores de arriba. Se declaran aquí para que
     ninguna página tenga que escribir componentes de color por su cuenta. */
  --header-bg:     rgba(5, 7, 13, 0.82);
  --amber-tint:    rgba(245, 166, 35, 0.10);
  --amber-glow:    rgba(245, 166, 35, 0.16);
  --scrim:         rgba(5, 7, 13, 0.62);
  --scrim-0:       rgba(5, 7, 13, 0);
  --seat:          rgba(5, 7, 13, 0.28);
  --surface-0:     rgba(16, 20, 39, 0);
  --star:          rgba(232, 236, 244, 0.68);
  --star-soft:     rgba(232, 236, 244, 0.42);
  /* Gris frío de la retícula del emblema. Hoy no lo pinta ninguna regla: la
     retícula solo existe dentro de los maestros rasterizados de la variante
     luminosa, y la simplificada no la lleva. Se conserva porque es un valor
     de identidad —el alfa 95/255 del canon— y la identidad está cerrada. No
     se usa para dibujar aros en SVG pequeños: ahí es un halo sucio. */
  --reticle:       rgba(235, 238, 245, 0.37);

  --radius:        14px;
  --radius-sm:     9px;
  --maxw:          72rem;
  --maxw-prose:    46rem;

  --font-sidera: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera es sticky y en teléfono ocupa tres líneas (la marca, y la
     navegación de seis destinos partida en dos): sin este margen los enlaces
     del sumario dejan el h2 de destino tapado bajo la cabecera. Medido a
     360 px, donde la cabecera mide 114 px, y vuelto a medir el 2-sep-2026 al
     entrar Lanzamientos: sigue en 114 px, la fila nueva cabe en las dos que ya
     había. */
  scroll-padding-top: 7.5rem;
}

body {
  margin: 0;
  /* Fondo explícito y opaco: el sitio es oscuro por definición, no por la
     preferencia del visitante, así que la paleta no cuelga de ningún
     @media (prefers-color-scheme) ni de [data-theme]. */
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sidera);
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Una sola familia en todo el sitio: la jerarquía la hacen el peso y el
   tamaño, nunca una segunda tipografía. */
h1, h2, h3, h4 {
  font-family: var(--font-sidera);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 6.2vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 4.2vw, 2.1rem); font-weight: 600; margin-top: 0; }
h3 { font-size: clamp(1.12rem, 3vw, 1.32rem); font-weight: 600; }

/* Par de casa: línea 1 blanca, línea 2 ámbar, ambas en el peso bold de la
   familia. Máximo UNO por vista; repetirlo lo degrada a decoración. */
.l1 { color: var(--text); }
.l2 { color: var(--amber); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* Enlaces de cuerpo: color de texto con subrayado. El ámbar entra sólo al
   pasar por encima o al recibir el foco (presupuesto de ámbar por pantalla).
   El subrayado va en --line, que mide 3.26:1 sobre el fondo base: pasa el
   umbral de componente de interfaz sin competir con el texto. */
a {
  color: var(--text);
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
a:hover,
a:focus-visible { color: var(--amber); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

strong { color: var(--text); font-weight: 700; }

/* --------------------------------------------------------- Layout ------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1.15rem;
}

.prose { max-width: var(--maxw-prose); }

section { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
section > .wrap > h2 { margin-bottom: 1rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amber);
  color: var(--bg);
  padding: 0.6rem 1rem;
  font-weight: 700;
  text-decoration: none;
  z-index: 100;
}
/* El color se repite en el estado de foco: sin esto, la regla global de
   :hover/:focus pondría el texto en ámbar sobre el ámbar del fondo. */
.skip-link:focus,
.skip-link:focus-visible { left: 0; color: var(--bg); }

/* -------------------------------------------------------- Cabecera ------ */

.site-header {
  border-bottom: 1px solid var(--border-soft);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.85rem;
}

/* Lockup horizontal de la casa: estrella a la izquierda, wordmark a la
   derecha. Las proporciones van en em respecto al wordmark, para que el
   conjunto escale sin volver a medirlo: diámetro de estrella = 1.15 em del
   tamaño tipográfico y hueco = 2 radios, es decir un diámetro. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 1.15em;
  font-family: var(--font-sidera);
  font-size: clamp(0.86rem, 3.1vw, 1.05rem);
  color: var(--wordmark);
  text-decoration: none;
}
.brand:hover,
.brand:focus-visible { color: var(--wordmark); }

/* El emblema de la cabecera es un SVG propio en el marcado (un solo parcial
   reutilizado por todas las páginas), nunca el avatar rasterizado ni
   watermark.png. Aquí se le fija el tamaño en em respecto al wordmark, para
   que ninguna página tenga que volver a medirlo. La única caja del sitio que
   NO va en em es la del hero, y va aparte por una razón de identidad, no de
   maquetado: ver .emblema-hero más abajo.

   MRK-07 (23-ago, enmienda a MRK-02 y MRK-03): caja del emblema de 64 px de
   lado o más, variante LUMINOSA; caja menor de 64 px, variante SIMPLIFICADA.
   El umbral estaba antes en 32 y en 24 px, y los dos números eran optimistas:
   la retícula ya está deshecha a 48 px. El emblema de la cabecera mide 1.15 em
   de un wordmark que va de 13.8 px (teléfono) a 16.8 px (escritorio), es decir
   entre 15.8 px y 19.3 px: siempre por debajo del suelo, así que aquí manda el
   signo y no la luz. Por eso el SVG en línea de .brand lleva la geometría
   simplificada —estrella y núcleo, sin retícula— en las trece páginas y en
   404.html: a ese tamaño el aro se rasteriza en medio píxel y sale como halo
   sucio, no como el aro de un instrumento.
   El reparto real del sitio, medido: cabecera 15.8–19.3 px, SIMPLIFICADA en
   SVG en línea · favicon 16–32 px, SIMPLIFICADA (un solo archivo para las dos
   tallas, manda el caso peor) · hero de la portada 96 px en teléfono y 128 px
   de 46 rem en adelante, LUMINOSA como imagen (ver .emblema-hero) ·
   apple-touch-icon 180 px e imágenes sociales og-*.jpg, LUMINOSAS.
   La cabecera no se arregla subiendo la estrella a 64 px con el wordmark en
   16.8: eso rompería la proporción 1.15× que fija MRK-03. Cuando una
   superficie queda incómoda entre las dos variantes se cambia el tamaño de la
   superficie, nunca el número de variantes. Razones y medidas en
   /marca/SISTEMA_DE_MARCA.md. */
.emblema,
.brand-emblem {
  display: block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

/* Wordmark: SIDERA en mayúsculas, peso Book, tracking 0.28 em medido sobre
   Avenir. El margen negativo devuelve el hueco que el tracking añade después
   de la última letra, para que el bloque quede ópticamente centrado. El texto
   se escribe SIDERA en el HTML y el tracking lo pone el CSS: espacios
   literales entre letras romperían la búsqueda y los lectores de pantalla. */
.brand-name,
.wordmark {
  font-family: var(--font-sidera);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin-right: -0.28em;
  color: var(--wordmark);
  white-space: nowrap;
}
/* Sin degradados, sin sombras, sin caja y sin segundo color dentro del
   wordmark: la identidad está cerrada. */
.brand-name em { font-style: normal; color: inherit; }

/* Lockup vertical: emblema, wordmark y tagline centrados entre sí, con el
   hueco emblema→wordmark a 0.13 veces el cuerpo del wordmark. El bloque ocupa
   sólo lo que mide, para que quede alineado con el texto de la página en vez
   de centrarse sobre toda la columna. Se reserva al hero de la portada y a la
   imagen social: no se inventan más variantes. */
.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 100%;
  font-size: clamp(1.7rem, 6.4vw, 2.6rem);
  margin: 0 0 1.5rem;
}
.lockup .emblema,
.lockup .brand-emblem,
.lockup .emblema-hero { margin-bottom: 0.13em; }

/* El emblema del hero es la excepción de tamaño de la casa, y la excepción es
   deliberada. Aquí NO manda el 1.15 em del lockup —que daba entre 31.3 px y
   47.8 px, o sea la variante simplificada en la única superficie del sitio
   donde el logo nuevo cabe entero— sino MRK-07: caja de 64 px o más, luminosa.
   Por eso la caja va en píxeles, 96 en teléfono y 128 de 46 rem en adelante,
   las dos por encima del suelo y ninguna de las dos por debajo por accidente
   cuando alguien toque el clamp del lockup.
   Es una IMAGEN, no un vector: la luminosa es un campo gaussiano sumado sobre
   el fondo de casa y un SVG no sabe sumar luz. El border-radius calca el rx 14
   sobre 64 del maestro —21.9 % del lado—: 21 px a 96 y 28 px a 128. El fondo
   del archivo es opaco y se lee como una baldosa sobre el degradado del hero;
   ése es el trato que manda el sistema para la luminosa como imagen, con caja
   propia y sin recorte circular, sin sombra y sin invertir sobre claro. */
.emblema-hero {
  display: block;
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 21px;
}
@media (min-width: 46rem) {
  .emblema-hero {
    width: 128px;
    height: 128px;
    border-radius: 28px;
  }
}

.wordmark-hero {
  font-size: 1em;
  line-height: 1.1;
  margin: 0;
}

/* La navegación tiene seis destinos y en un teléfono de 360 px no cabe en una
   línea: sin flex-wrap el último enlace se salía del viewport y quedaba
   recortado por el overflow-x del body. El hueco entre filas es menor que el
   de las columnas para que las dos líneas se lean como un solo bloque. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-size: 0.92rem;
}
.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
}
/* El estado activo cubre los dos valores que usa el sitio: "page" cuando el
   enlace es la página que se está leyendo, y "true" cuando la página pertenece
   a esa sección sin ser su índice (una lluvia dentro de Calendario, una
   calculadora dentro de Herramientas). */
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current] { color: var(--amber); }

/* ------------------------------------------------------------ Pie ------- */

.site-footer {
  border-top: 1px solid var(--border-soft);
  margin-top: 2rem;
  padding-block: 2.4rem 3rem;
  color: var(--text-dim);
  font-size: 0.88rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--amber); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* -------------------------------------------------------- Botones ------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-sidera);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
/* El ámbar va de FONDO con el texto en negro espacial: 9.94:1. Nunca al
   revés, y sin degradado, que produciría naranjas intermedios ajenos. */
.btn-primary {
  background: var(--amber);
  color: var(--bg);
}
.btn-primary:hover,
.btn-primary:focus-visible { transform: translateY(-2px); color: var(--bg); }
.btn-ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}
.btn-ghost:hover,
.btn-ghost:focus-visible { border-color: var(--line); color: var(--text); transform: translateY(-2px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* -------------------------------------------------------- Tarjetas ------ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem 1.3rem;
}

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1.6rem;
}
@media (min-width: 46rem) {
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
}

/* Tarjeta que es enlace entera. Generaliza el patrón que las páginas de lluvias
   tenían en su propia hoja (.card-lluvia), para que la portada y cualquier
   página futura lo compartan sin volver a escribirlo. El título toma el ámbar
   al pasar por encima o al recibir el foco: es un solo elemento por tarjeta y
   solo mientras dura la interacción, así que no gasta el presupuesto de ámbar
   de la vista. */
.card-link {
  display: block;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease;
}
.card-link:hover,
.card-link:focus-visible { border-color: var(--border-strong); color: var(--text); }
.card-link h3 { margin-bottom: 0.35rem; }
.card-link:hover h3,
.card-link:focus-visible h3 { color: var(--amber); }
.card-link .eyebrow { margin-bottom: 0.4rem; }
.card-link p:last-child { margin-bottom: 0; }

/* Rótulo de sección. Va en neutro: el ámbar señala una sola cosa por vista y
   estos rótulos se repiten en todas las secciones de la página. */
.eyebrow {
  font-family: var(--font-sidera);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 0.7rem;
}

/* Tagline de la casa: HISTORIAS DEL UNIVERSO, con el mismo tracking que el
   wordmark y a 0.35 veces su tamaño. Va después de .eyebrow a propósito: en
   el marcado del lockup las dos clases conviven y ésta tiene que ganar. */
.tagline {
  font-family: var(--font-sidera);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--amber);
}
.lockup .tagline {
  font-size: 0.35em;
  margin: 0.45em -0.28em 0 0;
}

.lede {
  font-size: clamp(1.05rem, 2.5vw, 1.22rem);
  color: var(--text-muted);
  max-width: 42rem;
}

.note {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* Utilidades */
/* Cifras: numeración tabular y sin partirse nunca entre dos líneas. */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------- Bloques plegables (.faq) ------- */

/* UNA sola definición del bloque plegable para todo el sitio. Nació en
   eclipse.css con las preguntas frecuentes y estaba además copiada a mano en el
   <style> de las dos páginas que no cargan esa hoja, /saturno-en-oposicion/ y
   /equinoccio-de-septiembre/: tres copias del mismo estilo, que es exactamente
   la forma de que dentro de un mes dos páginas se vean distinto. El 3 de
   septiembre de 2026 el creador pidió el mismo plegado en once páginas más,
   tres de las cuales solo cargan esta hoja, así que la regla sube aquí y las
   tres copias se borran. Las copias eran equivalentes: solo les faltaban dos
   declaraciones que el <body> ya da por herencia (font-family: var(--font-sidera)
   y font-size: 1rem), de modo que la mudanza no cambia el aspecto de ninguna
   página. Quien edite esto lo edita para las veinte.

   Lo usan dos cosas que NO son la misma y conviene no confundir:
     · las preguntas frecuentes de cada página, que sí espejan el nodo FAQPage
       de los datos estructurados;
     · los apartados de prosa plegados (.guia-plegable), que NO entran en ningún
       FAQPage y solo comparten el aspecto.
   -------------------------------------------------------------------------- */

.faq { margin-top: 1.6rem; display: grid; gap: 0.7rem; }

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq details[open] { border-color: var(--border-strong); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2.9rem 1rem 1.15rem;
  font-family: var(--font-sidera);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text-muted);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover,
.faq summary:focus-visible { color: var(--amber); }
.faq summary:hover::after,
.faq summary:focus-visible::after { color: var(--amber); }

/* El overflow:hidden de .faq details recorta el outline-offset:3px global y
   deja el foco de teclado invisible en los acordeones. Se mete hacia dentro
   para que el trazo caiga dentro de la caja recortada. */
.faq summary:focus-visible { outline-offset: -3px; }

.faq .faq-body {
  padding: 0 1.15rem 1.15rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Apartados de prosa plegados. La clase la estrenó la guía de /lanzamientos/ el
   3 de septiembre de 2026 y ese mismo día pasó a otras once páginas. No pinta
   nada por su cuenta: existe para poder nombrarlos y para dejar dicho lo que no
   son (ver arriba). */
.guia-plegable { margin-top: 1.4rem; }

/* El encabezado de la sección plegada viaja DENTRO del <summary> para que el
   documento conserve su jerarquía de h1/h2/h3 y los buscadores sigan viendo los
   mismos titulares. Aquí se le quitan el tamaño, el margen y el interletraje de
   titular y se le da el del resto de sumarios: la caja se ve igual que una
   pregunta frecuente, se cierre donde se cierre. El color heredado es lo que
   deja que el ámbar del hover y del foco entre también en el encabezado. */
.faq summary > h2,
.faq summary > h3 {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ----------------------------------- Estados de la pastilla (.badge) ---- */

/* UNA sola definición de los ocho estados de la pastilla para todo el sitio.
   Estaban copiados a mano en css/lanzamientos.css y en css/proximo.css, con el
   aviso de "quien cambie el color de un estado aquí lo cambia allá, y al revés":
   dos copias del mismo semáforo, que es exactamente la forma de que dentro de un
   mes /lanzamientos/ y la portada pinten un mismo estado de dos colores. El 7 de
   septiembre de 2026 suben aquí y las dos copias se borran. La pastilla BASE
   (tipografía, redondeo, borde de 1 px) sigue en css/eclipse.css, que es donde
   nació con las tablas de visibilidad; aquí solo viven sus estados.

   POR QUÉ EL SELECTOR LLEVA LA CLASE BASE DELANTE (.badge.badge-go, no
   .badge-go a secas). La base .badge declara "border: 1px solid currentColor",
   y eclipse.css se carga DESPUÉS de esta hoja en las dos páginas que usan
   estados. Con .badge-go a secas las dos reglas empatarían en especificidad
   (0,1,0) y ganaría la última en cargarse: el borde volvería a currentColor y
   las tres pastillas rellenas perderían su contorno verde. Con la clase base
   delante la especificidad sube a (0,2,0), gana al empate sin depender del orden
   de carga y la unificación deja de cambiar nada. Esa era la razón por la que
   estos ocho estados se habían repetido; queda resuelta sin repetirlos.

   Contraste medido sobre la superficie de la tarjeta y del cuadro (#101427):
   verde 7.85:1, teal 5.88:1, --text-dim 8.35:1, magenta 5.45:1, --text 15.40:1;
   y el texto oscuro sobre el verde relleno, 8.7:1. Lo FIRME (GO, ÉXITO, EN
   VUELO) va en pastilla rellena de verde con el texto en el fondo de la casa; lo
   tentativo va en contorno, teal para POR CONFIRMAR y gris para ESTIMADO y EN
   ESPERA; el fallo, en magenta. Ninguna pastilla usa ámbar: ese es el color de
   los títulos.

   Falta un noveno estado a propósito. Cuando el calendario se queda sin nada por
   venir, js/proximo.js escribe la palabra del estado agotado en una pastilla SIN
   modificador: estos ocho colores describen un vuelo que va a ocurrir, y ahí no
   hay ninguno. Sin modificador hereda el color del texto de la casa.

   Una diferencia declarada de la mudanza: la copia de css/proximo.css iba
   escrita con el cuadro por delante (.cuadro-proximo .badge-go), así que en la
   portada una pastilla de estado FUERA de un cuadro se quedaba en el color del
   texto; desde aquí toma su color, igual que en /lanzamientos/, que nunca la
   acotó. Ninguna de las dos páginas produce hoy esa pastilla: la portada solo
   escribe estados dentro de los dos cuadros, en el HTML horneado y en
   js/proximo.js. Quien edite esto lo edita para las veintiuna páginas. */
.badge.badge-go,
.badge.badge-exito,
.badge.badge-vuelo   { color: var(--bg); background: var(--green); border-color: var(--green); }
.badge.badge-tbc     { color: var(--teal); }
.badge.badge-tbd,
.badge.badge-espera  { color: var(--text-dim); }
.badge.badge-fallo   { color: var(--magenta); }
.badge.badge-evento  { color: var(--text); }

/* --------------------------------------------- Movimiento reducido ------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover { transform: none; }
}

/* ---------------------------------------------------- Documentales ------ */
/* Tarjetas de /documentales/ (9-sep-2026). La miniatura vive en el propio
   sitio y el reproductor solo entra al pulsar; el ámbar aparece solo al pasar
   por encima o al recibir el foco, como en .card-link. */
.doc-serie { margin-top: 2.4rem; }
.doc-serie h2 { margin-bottom: 0.35rem; }
.doc-serie .note { margin-bottom: 0.25rem; }
.doc-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1.1rem;
}
@media (min-width: 46rem) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .doc-grid { grid-template-columns: repeat(3, 1fr); } }
.doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.doc-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
}
.doc-media:focus-visible { outline-offset: -3px; } /* el anillo de foco cabe dentro del overflow:hidden de la tarjeta (revisor 9-sep) */
.doc-media-abierta { cursor: default; }
.doc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.doc-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 3.4rem; height: 3.4rem;
  margin: -1.7rem 0 0 -1.7rem;
  border-radius: 50%;
  background: rgba(5, 7, 13, 0.72);
  border: 1px solid rgba(232, 236, 244, 0.5);
  transition: border-color 0.15s ease;
}
.doc-play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  margin: -0.55rem 0 0 -0.35rem;
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.95rem;
  border-color: transparent transparent transparent #E8ECF4;
}
.doc-media:hover .doc-play,
.doc-media:focus-visible .doc-play { border-color: var(--amber); }
.doc-media:hover .doc-play::after,
.doc-media:focus-visible .doc-play::after { border-left-color: var(--amber); }
.doc-body { padding: 0.95rem 1.05rem 1.1rem; }
.doc-body h3 { font-size: 1.02rem; line-height: 1.3; margin: 0 0 0.35rem; }
.doc-body h3 a { color: var(--text); text-decoration: none; }
.doc-body h3 a:hover,
.doc-body h3 a:focus-visible { color: var(--amber); }
.doc-meta { color: var(--text-dim); font-size: 0.86rem; margin: 0; }

/* ----------------------------------- Portada: lista de historias ------- */

/* Enlaces de texto a todas las historias publicadas, agrupados por serie,
   sin imágenes (14-oct-2026: enlaces internos de primer nivel para que el
   rastreador las encuentre desde la portada). El nombre de la serie va en
   neutro, como los rótulos .eyebrow; el ámbar sigue reservado al foco y al
   paso del puntero. Una columna en teléfono, dos y tres en pantallas anchas. */
#historias .historias-lista {
  display: grid;
  gap: 1.4rem 2rem;
  grid-template-columns: 1fr;
  margin-top: 1.6rem;
}
@media (min-width: 46rem) {
  #historias .historias-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  #historias .historias-lista { grid-template-columns: repeat(3, 1fr); }
}
#historias .historias-serie h3 {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin: 0 0 0.55rem;
}
#historias .historias-serie ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#historias .historias-serie li {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
#historias .historias-serie a { overflow-wrap: anywhere; }

/* ------------------------------------------- Compartir (.cmp-, 20-oct) --- */

/* El control de compartir de todo el sitio (/js/compartir.js). Los botones
   nacen con el atributo hidden y .btn es inline-flex, que le ganaría al
   hidden del navegador: por eso la regla con !important. Los tres botones de
   la página van en fantasma; el único ámbar es "Copiar mi resultado" en las
   herramientas, que ocupa el sitio del botón que ya había. */
.cmp [hidden],
.cmp-aviso[hidden] { display: none !important; }
.cmp {
  max-width: var(--maxw-prose);
  margin: 2.4rem 0 0;
  padding: 1.2rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cmp-res { margin-top: 1.6rem; }
.cmp-seccion { padding-block: 0 clamp(2.5rem, 7vw, 4.5rem); }
.cmp-frase { margin: 0 0 0.9rem; color: var(--text); }
.cmp-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cmp-url { margin: 0.9rem 0 0; overflow-wrap: anywhere; }
.cmp-url code { color: var(--text-muted); }
.cmp-estado { margin: 0.6rem 0 0; }
.cmp-estado:empty { margin: 0; }
.cmp-nota,
.cmp-privacidad { margin: 0.9rem 0 0; }
.cmp-respaldo {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.cmp-aviso {
  max-width: var(--maxw-prose);
  margin: 0 0 1.2rem;
  padding: 0.75rem 1rem;
  color: var(--text);
  background: var(--surface);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-sm);
}
.cmp-oculto { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }

/* La línea del momento de valor (20-oct noche): el mismo control en un solo
   renglón y sin caja, tras el dato que el visitante vino a buscar. Un filete
   tenue arriba; envuelve en teléfono. */
.cmp-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.9rem;
  margin: 1.6em 0;
  padding: 0.8em 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.cmp-linea .cmp-frase { margin: 0; color: var(--text-muted); }
.cmp-linea .cmp-acciones { gap: 0.5rem; }
.cmp-linea .btn { padding: 0.36rem 0.9rem; font-size: 0.85rem; }
.cmp-linea .cmp-estado,
.cmp-linea .cmp-url { margin: 0; }
.cmp-linea .cmp-url { flex-basis: 100%; }