/* Páginas con la Luna como protagonista (portada, Hoy y las que se vayan
   sumando).
   Reúne lo que comparten: el hero con el hueco de la Luna, la consola del cielo,
   el ritmo de las secciones bajo el hero y el pie. Cada página añade en su
   propio archivo solo lo que es suyo (portada.css, today.css…).
   Se activa con <body class="page-cielo"> y necesita la escena 3D con
   data-anchor=".three-moon-focus" (cosmic-background.js). */

/* Inter Black, solo para el respaldo del logotipo del pie (véase más abajo). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap");

.page-cielo {
  --cielo-gutter: 16px;
  --cielo-section-y: clamp(36px, 4.6vw, 64px);
  --cielo-veil: rgba(8, 7, 30, 0.42);
  /* Diámetro de la Luna: la protagonista. Sigue a la altura de la pantalla y
     nunca supera el espacio libre de su columna. --moon-scale es el ajuste fino
     del tamaño final (1 = ocupa todo el hueco disponible). */
  --moon-scale: 0.925;
  --moon-size: calc(clamp(300px, 80vh, 720px) * var(--moon-scale));
  --moon-pad: clamp(14px, 3vh, 30px);
}

/* ── Hero ─────────────────────────────────────────────────────────────────
   A la izquierda, alineado con el resto de secciones, el contenido de la página
   con la consola del cielo; a la derecha, la Luna. El hero llega hasta el borde
   derecho de la pantalla para que la Luna, la protagonista, ocupe todo el
   espacio libre. Nada se coloca nunca encima de ella: la escena 3D centra el
   astro en .three-moon-focus (data-anchor en cosmic-background.js). */
.sky-hero {
  --hero-edge: max(var(--cielo-gutter), calc((100% - var(--landing-width)) / 2));
  --hero-left: clamp(380px, 36.5vw, 530px);
  --hero-gap: clamp(24px, 3.4vw, 48px);
  --hero-right: 24px;
  position: relative;
  width: 100%;
  min-height: calc(var(--moon-size) + 2 * var(--moon-pad));
  padding: var(--moon-pad) var(--hero-right) var(--moon-pad) var(--hero-edge);
  display: grid;
  grid-template-columns: minmax(0, var(--hero-left));
  align-items: center;
}

.sky-hero-main {
  min-width: 0;
  display: grid;
  gap: 16px;
}

/* El hueco de la Luna no cuenta para la altura del hero: se coloca en el centro
   del hero o, si este es más alto que la pantalla, en el de la zona visible, de
   modo que la Luna entera se ve siempre sin desplazarse. Ocupa el espacio entre
   la columna izquierda y el borde derecho, sin pasar de --moon-size. */
.three-moon-focus {
  position: absolute;
  top: min(50%, calc((100dvh - var(--cosmic-shell-header-height, 56px)) / 2));
  left: calc(var(--hero-edge) + var(--hero-left) + var(--hero-gap));
  right: var(--hero-right);
  width: min(
    var(--moon-size),
    calc((100% - var(--hero-edge) - var(--hero-left) - var(--hero-gap) - var(--hero-right)) * var(--moon-scale))
  );
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform: translateY(-50%);
}

/* Cabecera del hero: sobreetiqueta, título y entradilla. */
.sky-hero .eyebrow {
  color: var(--gold);
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sky-hero .hero-title {
  max-width: 17ch;
  margin-top: 14px;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.12;
}

.sky-hero .hero-copy {
  max-width: 52ch;
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.7;
}

.sky-hero .hero-actions {
  margin-top: 24px;
}

/* ── Consola del cielo ────────────────────────────────────────────────────
   Las cuatro vistas de la escena 3D, con la Luna de hoy como cabecera opcional
   (.sky-console-now). Los botones y su estado los gobierna sky-console.js. */
/* Panel de cristal: la superficie común del hero (la consola del cielo y, en
   Hoy, el panel de fecha y hora). */
.sky-console,
.sky-panel {
  border: 1px solid rgba(var(--gold-muted-rgb), 0.22);
  border-radius: var(--r-lg);
  background: rgba(7, 6, 28, 0.74);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-align: left;
}

.sky-console {
  container-type: inline-size;
  display: grid;
}

.sky-panel {
  container-type: inline-size;
  overflow: hidden;
}

/* ── Panel de datos ───────────────────────────────────────────────────────
   Dentro de un .sky-panel, una franja de datos (.sky-facts: cada uno con su
   rótulo, su valor y una nota) y, al pie, la barra de lo que lleva recorrido el
   año (.sky-year, que rellena nucleo/calendario.js con [data-year-bar]). Hoy la
   usa para la Luna y el año; Efemérides, para la fecha que se mira. */
.sky-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Con solo dos datos. */
.sky-facts--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sky-fact {
  min-width: 0;
  padding: 12px 16px 14px;
}

.sky-fact:first-child {
  padding-left: 20px;
}

.sky-fact + .sky-fact {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.sky-fact dt {
  color: var(--gold);
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sky-fact dd {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* La nota va dentro del valor (un <dl> solo admite dt y dd); vuelve al peso normal. */
.sky-fact dd small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: normal;
}

.sky-year {
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
}

.sky-year > span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}

/* En cuadrícula de dos columnas, para cuatro datos o más. */
.sky-facts--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sky-facts--grid .sky-fact:nth-child(odd) {
  padding-left: 20px;
  border-left: 0;
}

.sky-facts--grid .sky-fact:nth-child(n + 3) {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Etiquetas ────────────────────────────────────────────────────────────
   Píldoras pequeñas bajo un texto: los países de una efeméride, el ánimo, el
   tema y la Luna de una consulta de la Bitácora. */
.sky-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.sky-tag {
  padding: 2px 9px;
  border: 1px solid rgba(var(--gold-muted-rgb), 0.24);
  border-radius: 999px;
  background: rgba(var(--gold-muted-rgb), 0.06);
  color: var(--gold-light);
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ── Tarjeta con acento ───────────────────────────────────────────────────
   La tarjeta de las efemérides, de la lectura del día y de las consultas: un filete
   y un velo del color de su tema (--card-color), con una cabecera de icono, rótulo
   opcional y título. */
.sky-card {
  --card-color: var(--gold);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(var(--gold-muted-rgb), 0.14);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card-color) 8%, transparent), transparent 48%),
    rgba(14, 12, 40, 0.8);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.24);
}

.sky-card[hidden] { display: none; }

.sky-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-color), transparent);
  opacity: 0.72;
}

.sky-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sky-card-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--card-color) 34%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--card-color) 9%, transparent);
  color: var(--card-color);
  font-size: 20px;
}

.sky-card-kicker {
  display: block;
  color: var(--card-color);
  font-family: var(--font-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sky-card-title {
  margin: 2px 0 0;
  color: var(--text);
  font-family: var(--font-h);
  font-size: 17px;
  line-height: 1.3;
}

@media (max-width: 520px) {
  .sky-card { padding: 18px; }
}

.preview-kicker {
  display: block;
  color: var(--gold);
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sky-console-now {
  display: grid;
  gap: 3px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sky-console-now strong {
  color: var(--gold-light);
  font-family: var(--font-h);
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.sky-console-now small {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.sky-console-scene {
  display: grid;
  gap: 10px;
  padding: 14px 18px 16px;
}

.sky-console-help {
  margin: 0;
  color: rgba(238, 233, 251, 0.74);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Selector segmentado ──────────────────────────────────────────────────
   Un grupo de botones del que uno está activo (aria-pressed): la vista de la
   escena 3D en la consola del cielo y los filtros de Efemérides. Con
   .sky-segmented--wrap, lo que no cabe en una fila pasa a la siguiente. */
.sky-segmented {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(var(--gold-muted-rgb), 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.sky-segmented--wrap {
  flex-wrap: wrap;
}

/* Fila de filtros centrada bajo el encabezado de una sección (Bitácora, Efemérides). */
.sky-filters {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.sky-filters .sky-segmented {
  max-width: 100%;
}

/* Cada opción ocupa lo que mide su rótulo más un reparto igual del sobrante, así
   «Constelaciones» nunca se sale de su botón. */
.sky-segmented button {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--action-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  white-space: nowrap;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.sky-segmented button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.sky-segmented button[aria-pressed="true"] {
  background: rgba(var(--gold-muted-rgb), 0.18);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-light-rgb), 0.42);
  color: var(--gold-light);
}

/* Número de entradas junto al rótulo de un filtro. */
.sky-segmented-count {
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.sky-segmented-count:empty {
  display: none;
}

.sky-console .preview-profile-link {
  width: 100%;
  margin-top: 2px;
}

/* ── Ritmo de las secciones ───────────────────────────────────────────────
   La escena 3D es fija y se ve en toda la página. Bajo el hero, un mismo velo
   cubre todas las secciones y el pie para que el texto se lea sin escalones de
   color en cada cambio de sección (antes cada sección tenía su propio tinte y la
   Luna aparecía cortada o suelta entre ellas). */
.page-cielo .systems-section,
.page-cielo .landing-footer {
  background: var(--cielo-veil);
}

/* El velo entra con suavidad al salir del hero. */
.page-cielo .sky-hero + .systems-section {
  background: linear-gradient(180deg, transparent, var(--cielo-veil) 96px);
}

.page-cielo .systems-section {
  padding: var(--cielo-section-y) 16px;
  border-top: 0;
  scroll-margin-top: 72px;
}

.page-cielo .systems-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(100% - 2 * var(--cielo-gutter)), var(--landing-width));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-muted-rgb), 0.3), transparent);
  transform: translateX(-50%);
}

.page-cielo .section-heading {
  max-width: 860px;
  margin: 10px auto 12px;
  font-size: clamp(26px, 3.2vw, 40px);
}

.page-cielo .section-intro {
  max-width: 680px;
  font-size: 16px;
  line-height: 1.7;
}

.page-cielo .systems-grid {
  margin-top: 30px;
  gap: 16px;
}

.page-cielo .system-card {
  min-height: 0;
  padding: 20px;
}

.page-cielo .efem-resumen-grid {
  margin-top: 28px;
}

/* Tarjetas que no son enlaces (el ciclo lunar, la lectura de hoy): no se
   levantan al pasar el ratón ni piden pulsarlas. */
.page-cielo article.system-card {
  cursor: default;
}

.page-cielo article.system-card:hover {
  transform: none;
  border-color: rgba(var(--gold-muted-rgb), 0.14);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.24);
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.page-cielo .landing-footer {
  /* Holgura inferior para que el botón «Volver arriba» no tape el texto. */
  padding: 28px 16px 84px;
}

/* El respaldo de la marca (pucela.club) está en app-shell.css; aquí solo su separación en el pie. */
:where(.landing-footer .marca) {
  margin-bottom: 10px;
}

/* ── Contenedores ─────────────────────────────────────────────────────────
   La columna izquierda es estrecha en pantallas medias: los controles y los
   datos se reparten según el ancho que realmente tienen, no según el de la
   pantalla. */
@container (max-width: 430px) {
  .sky-console .sky-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Los dos primeros datos lado a lado y el tercero, con su nombre largo, en la
     fila de debajo. */
  .sky-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sky-facts:not(.sky-facts--grid, .sky-facts--pair) .sky-fact:nth-child(3) {
    grid-column: 1 / -1;
    padding-left: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 0;
  }
}

@container (max-width: 300px) {
  .sky-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .sky-fact + .sky-fact {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 0;
  }
}

/* ── Pantallas estrechas ──────────────────────────────────────────────────
   Una sola columna: la Luna arriba, lo primero que se ve y siempre en pantalla,
   y debajo el contenido de la página con la consola. */
@media (max-width: 960px) {
  .page-cielo {
    --moon-size: calc(clamp(240px, 88vw, 520px) * var(--moon-scale));
  }

  .sky-hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    align-items: start;
    padding: 16px var(--cielo-gutter) var(--moon-pad);
  }

  .three-moon-focus {
    position: static;
    order: -1;
    width: min(100%, var(--moon-size), 78vh);
    transform: none;
  }
}

@media (max-width: 560px) {
  .sky-hero .hero-title {
    font-size: clamp(28px, 8.4vw, 38px);
  }

  .sky-hero .hero-copy {
    font-size: 16px;
  }

  .page-cielo .systems-section {
    padding-inline: 14px;
  }
}

@media (forced-colors: active) {
  .sky-console,
  .sky-panel {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: auto;
  }

  .page-cielo .systems-section::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky-segmented button {
    transition: none;
  }
}