/* ==========================================================================
   Sidera Cosmos — franja "Lo más próximo" de la portada
   --------------------------------------------------------------------------
   Tercera hoja de la portada, detrás de site.css y eclipse.css, y la ÚNICA
   página que la carga. Aquí se reutiliza tal cual lo que ya existe (.wrap,
   .eyebrow, .badge y sus estados, .note, .countdown) y se añaden las clases de
   esta franja. Lo único que se toca de una hoja anterior son cinco medidas del
   componente .countdown dentro del cuadro, repartidas en cuatro selectores, y
   solo medidas: ni un color, ni un borde, ni un estado. Están explicadas todas
   donde ocurren.

   Todos los colores salen de los tokens de site.css. Ningún hex vive aquí.

   QUÉ ES ESTA FRANJA
   Dos cuadros entre el hero y "Lo que viene": el próximo evento del cielo y la
   próxima actividad humana en el espacio (un lanzamiento o un evento de misión;
   decisión del creador del 3 de septiembre de 2026). Son del tamaño de las
   fichas de /lanzamientos/ y por eso .cuadro-proximo es una CALCA de .lanz
   (misma superficie, mismo borde, mismo filete izquierdo, mismo radio, mismo
   relleno, misma columna flexible), con lo que .card-link le añade a una
   tarjeta que es enlace entera: sin subrayado, con el color del texto de la
   casa y con el borde reaccionando al puntero y al foco. Se calca y no se
   hereda porque .lanz vive en css/lanzamientos.css, que la portada no carga y
   no va a cargar: esa hoja trae las listas, los filtros y la guía de una página
   que aquí no existe.

   EL FILETE IZQUIERDO NO LLEVA CÓDIGO DE ESTADO, A PROPÓSITO
   En /lanzamientos/ el filete repite el color del estado para que una lista
   larga se lea en vertical de un vistazo. Aquí hay dos cuadros y ninguna lista:
   el estado lo dice su pastilla, que es la señal fuerte (rellena si la fecha es
   firme, en contorno si es tentativa, y en texto si lo que se enseña es un
   evento de misión, que no tiene estado). Así la franja no estrena un semáforo
   propio en la portada.

   EL ÁMBAR DE LOS NOMBRES
   El nombre del evento del cielo y el de la ficha espacial van en el ámbar de
   dato, por la misma orden del creador que el 3 de septiembre de 2026 pintó de
   ámbar los títulos de todas las fichas de /lanzamientos/: el presupuesto de
   ámbar por vista no se relaja, cambia de sitio. Contraste medido del ámbar
   sobre la superficie de la tarjeta (#101427): 9.00:1.
   ========================================================================== */

/* ------------------------------------------------------------- Franja ----- */

/* El relleno de abajo va a cero: el hueco que separa la franja de "Lo que
   viene" ya lo pone el padding superior de esa sección, y sumarlos abría un
   vacío del tamaño de un teléfono entre las dos. */
.franja-proximo {
  padding-block: clamp(2rem, 5.5vw, 3rem) 0;
}

/* La cejilla es el encabezado de esta sección, así que en el marcado es un h2 y
   no un párrafo: sin él la franja sería la única sección de la portada sin
   título en el índice del documento, y el <section> se quedaría sin nombre para
   quien navega saltando de sección en sección. Se ve exactamente igual que
   antes porque .eyebrow gana en cascada a la regla de los titulares; lo único
   que hay que devolverle es el hueco inferior, que la regla general de site.css
   para los titulares de sección (section > .wrap > h2) subiría a 1rem. */
.franja-proximo > .wrap > h2.eyebrow { margin-bottom: 0.7rem; }

.franja-rejilla {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
/* Dos columnas en el mismo umbral que las listas de /lanzamientos/ (52rem):
   por debajo, los cuadros se apilan. Es el ancho en el que una ficha de este
   tamaño deja de estrecharse por debajo de lo legible. */
@media (min-width: 52rem) {
  .franja-rejilla { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------- Los cuadros ---- */

.cuadro-proximo {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.2rem 1.25rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.cuadro-proximo:hover,
.cuadro-proximo:focus-visible {
  border-color: var(--border-strong);
  color: var(--text);
}
/* El foco de teclado es el ámbar de la casa, el mismo trazo de 2 px con 3 px de
   aire que fija site.css para todo el sitio. Se repite el radio del cuadro
   porque la regla global de :focus-visible baja el radio a 4 px y aquí eso
   recortaría las esquinas de la tarjeta durante el foco. */
.cuadro-proximo:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Título del cuadro. Es un encabezado de verdad en el marcado, para que el
   índice del documento diga lo que la página muestra, y va un nivel por debajo
   de la cejilla de la franja: h2 la sección, h3 cada cuadro. Se le quita el
   tamaño de titular: 16 px y peso 600, el mismo cuerpo con el que los bloques
   plegables del sitio presentan sus encabezados dentro del sumario. */
.cuadro-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

/* Línea de presentación: la voz de la casa diciendo qué es este cuadro. Va en
   el gris apagado porque no es el dato, es el marco. */
.cuadro-intro {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.55;
}

.cuadro-nombre {
  margin: 0;
  font-family: var(--font-sidera);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--amber);
}

.cuadro-fecha,
.cuadro-local {
  margin: 0;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.cuadro-fecha { color: var(--text-muted); }
/* La hora del reloj de quien mira es la línea que más se busca, así que va en
   el blanco de la casa. Nace con el atributo hidden y la escribe el
   JavaScript: sin él no hay hora local que enseñar, y la de GMT-0500 sigue
   arriba, que es la referencia comprobable. Esta clase NO declara display, o el
   hidden dejaría de funcionar. */
.cuadro-local { color: var(--text); }

/* ------------------------------------------------- La cuenta regresiva ---- */

/* La caja de la cuenta del cuadro de la actividad espacial es el componente
   .countdown de css/eclipse.css, la misma pieza que llevan /lanzamientos/ y
   /eventos/, y la portada ya carga esa hoja. Aquí no se redefine ni un color ni
   un borde ni un estado: solo se ajusta el TAMAÑO, porque allá la caja ocupa el
   ancho de un hero y aquí vive dentro de una tarjeta de media portada.

   Cinco medidas en cuatro selectores, y ninguna más. Cuatro se explican aquí y
   la quinta, el cuerpo del mensaje del cero, en su propia línea más abajo. El
   margen superior de 1.9rem, que allá separa la cuenta del titular, aquí se
   suma al hueco de 0.6rem que ya pone el gap de la columna y abre un vacío en
   mitad del cuadro. El relleno baja, porque la caja comparte la superficie de
   la tarjeta y no necesita respirar como si fuera la pieza principal. El hueco
   bajo el rótulo "Cuenta regresiva" baja de 0.85rem a 0.6rem por la misma
   razón, y por una más: dentro de la tarjeta ese rótulo no encabeza una
   sección, solo nombra la caja que tiene debajo, y un hueco de titular lo
   dejaba suelto encima de las celdas. Y el cuerpo de las cifras baja de los
   2.5rem del hero a 1.5rem: en una tarjeta de este tamaño, unas cifras de
   titular dejarían al resto del cuadro (el nombre, la fecha, la pastilla y la
   línea de qué es) en letra pequeña alrededor de un reloj. Con 1.5rem la cuenta
   sigue leyéndose de un vistazo y el ámbar del nombre sigue siendo lo primero
   que se mira, que es el reparto que ya tiene el resto de la franja. Medido a
   1280 px: cifras de 24 px sobre celdas de 115 px, sin desborde. */
.cuadro-proximo .countdown {
  margin-top: 0.25rem;
  padding: 0.85rem 0.8rem 0.9rem;
}
.cuadro-proximo .countdown-label { margin-bottom: 0.6rem; }
.cuadro-proximo .countdown-units dd { font-size: clamp(1.15rem, 5.5vw, 1.5rem); }
/* El mensaje del cero comparte cuerpo con el nombre de la ficha, no con el
   titular de una página: lo que dice es breve y dura segundos. */
.cuadro-proximo .countdown-message { font-size: 1.08rem; }

/* La pastilla: el estado del vuelo o, en el cuadro del cielo, la etiqueta de la
   ficha mientras no hay JavaScript y la cuenta de días en cuanto lo hay. Hereda
   .badge de eclipse.css y sus estados de site.css; aquí solo se le da el
   display que necesita para no estirarse de lado a lado del cuadro, que es lo
   mismo que hace .proximo .badge en /lanzamientos/. */
.cuadro-proximo .badge {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  margin: 0;
}

/* Los estados del vuelo (.badge-go, .badge-exito, .badge-vuelo, .badge-tbc,
   .badge-tbd, .badge-espera, .badge-fallo, .badge-evento) YA NO VIVEN AQUÍ.
   Estaban repetidos, espejo de los de css/lanzamientos.css, y con el cuadro por
   delante (.cuadro-proximo .badge-go) por una razón de cascada: la pastilla base
   .badge vive en eclipse.css, que la portada carga DESPUÉS de site.css, y su
   "border: 1px solid currentColor" machacaría un border-color declarado con la
   MISMA especificidad. El 7 de septiembre de 2026 los ocho subieron a
   css/site.css en una sola copia, escritos como .badge.badge-go: la clase base
   delante sube la especificidad a (0,2,0), que gana a la base (0,1,0) sin
   depender del orden de carga. Es la misma cascada, resuelta sin repetir nada.
   El semáforo entero, los contrastes medidos y el estado agotado sin modificador
   están documentados allí. */

.cuadro-que {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text-muted);
}

/* Pie del cuadro: dice a dónde lleva el clic. El cuadro entero es un solo
   enlace, así que esto NO es otro enlace, es la señal de que lo hay; lleva el
   subrayado de los enlaces de cuerpo del sitio y se enciende en ámbar cuando el
   cuadro recibe el puntero o el foco. Se pega al fondo con margin-top auto para
   que los dos cuadros terminen a la misma altura aunque su prosa mida
   distinto. */
.cuadro-pie {
  margin: auto 0 0;
  padding-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.cuadro-proximo:hover .cuadro-pie,
.cuadro-proximo:focus-visible .cuadro-pie {
  color: var(--amber);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------- Sello --- */

/* La única marca de frescura de la franja: cuándo se revisaron los datos del
   cielo y cuándo se actualizaron los de lanzamientos. No hay promesa de
   cadencia (regla 64): esta línea dice una fecha, no un ritmo. */
.franja-sello {
  margin: 0.9rem 0 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.franja-sello time { color: var(--text-muted); }

/* La nota de quien llega sin JavaScript, calcada de la que llevan /eventos/ y
   /lanzamientos/ al pie de su cuenta regresiva. Solo la ve quien la necesita,
   y va delante del sello porque explica lo que falta antes de fechar lo que
   hay. Mismo cuerpo y mismo hueco que el sello: son la misma voz. */
.franja-noscript { margin: 0.9rem 0 0; }