/* SlipUp™ Observatory */
:root {
  /* ─── Tipografía unificada (una sola familia para todo el observatorio) ───
   * Una fuente para todas las capas: Orbital, Atmosphere, Nearby, Horizon, Strata y Contribute.
   * Coherencia: mismo tipo en lectura (grado, condition, horizon, strata) y en UI (topbar, listas, labels).
   * Cursiva: solo lectura interpretativa (strata-line, condition-line, contribute examples).
   */
  --font-observatory: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-observatory);
  --font-reading: var(--font-observatory);
  /* Legacy: mismo valor para no romper referencias directas */
  --font-sans: var(--font-observatory);
  --font-serif: var(--font-observatory);

  /* Escala de tamaños (rem). Display = grado/hero; headline = títulos sección; lead = resumen; body/small/caption/label = UI. */
  --text-display: clamp(3.25rem, 20vw, 4.75rem);
  --text-display-sm: clamp(3.5rem, 17vw, 5rem);
  --text-headline: clamp(1.05rem, 1.9vw, 1.35rem);
  --text-lead: clamp(1.08rem, 1.55vw, 1.32rem);
  --text-body: 0.92rem;
  --text-body-lg: 0.96rem;
  --text-small: 0.8rem;
  --text-caption: 0.72rem;
  --text-label: 0.68rem;
  --text-micro: 0.6rem;

  /* Line-height: tight (grado), snug (headlines), normal (UI), relaxed (párrafos), reading (strata, citas). */
  --leading-tight: 0.88;
  --leading-snug: 1.15;
  --leading-normal: 1.35;
  --leading-relaxed: 1.55;
  --leading-reading: 1.6;

  /* Letter-spacing: normal, wide (labels/uppercase), wider (microcopy). */
  --tracking-normal: 0.01em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-label: 0.06em;

  /* Paleta observatorio. Coherencia de fondos por capa: docs/LAYER_BACKGROUNDS_COHERENCE.md */
  --bg: #f3f0fb;
  --bg-deep: #ebe5f8;
  --bg-ink: #ddd4f3;
  --text: #11202f;
  --muted: #4a5c6f;
  --line: #c8d6e7;
  --card: #ffffffb3;
  /* Relate / Not alone: violeta-lila que compone con horizonte y Strata */
  --relate-accent: #6b5b9a;
  --relate-accent-soft: #b5a8d4;
  --atmo: 50;
  --layer-air: #ffffff00;
  --layer-horizon: #e9e2f225;
  --layer-ground: #d9d0e81f;
  /* Tintes de transición entre capas (coherencia de fondos): derivados de la paleta */
  --layer-horizon-soft: color-mix(in oklab, var(--bg-deep) 88%, var(--layer-horizon));
  --layer-ground-soft: color-mix(in oklab, var(--bg-ink) 72%, var(--layer-ground));
  --layer-border-soft: color-mix(in oklab, var(--line) 55%, var(--bg-ink));
  --page-pad-top: 1.75rem;
  --page-pad-bottom: 4rem;
  --topbar-height: 3rem;
  --topbar-gap: 0.75rem;
  --section-gap: 2.85rem;
  /* Viaje vertical: más aire al bajar (cielo → campo → lectura → tierra) */
  --descent-gap-nearby: 3.25rem;
  --descent-gap-horizon: 2.75rem;
  --descent-gap-strata: 4.25rem;
  /* Espacio entre Orbital y hero: va en margin-top del hero (no solo padding en Orbital).
   * Tramo visible sin ocupar ~medio viewport (evita sensación de hero “a mitad de pantalla”). */
  --orbital-to-hero-gap: clamp(6rem, 28vh, 22rem);
  --block-gap: 0.85rem;
  --layer-transition: 1.5rem;
  --site-legal-height: 2.75rem;
  /* Barra superior (topbar fijo) e inferior (site-legal): mismo ritmo que el top bar */
  --site-bar-pad-x: 1rem;
  --site-bar-pad-y: 0.5rem;
  --site-bar-gap: 1rem;
  /* Espacio dentro de la atmósfera: ascenso (hacia el grado) y descenso (hacia horizonte) */
  --atmo-ascend: 1.35rem;
  --atmo-peak: 0.5rem;
  --atmo-descend: 0.95rem;
  --atmo-ground: 0.6rem;
}

/* Orbital → hero (estrecho): tramo más corto que ~50vh para no empujar el hero “a mitad” del scroll. */
@media (max-width: 600px) {
  :root {
    --orbital-to-hero-gap: clamp(3rem, min(20vh, 18dvh), 10rem);
  }
}
@media (max-width: 600px) {
  @supports (height: 100dvh) {
    :root {
      --orbital-to-hero-gap: clamp(3rem, min(20vh, 18dvh), 10rem);
    }
  }
}

/* Móvil: mínimos legibles (evitar letra demasiado pequeña en pantallas normales) */
@media (max-width: 480px) {
  :root {
    --text-caption: 0.8rem;
    --text-label: 0.75rem;
    --text-micro: 0.72rem;
    --site-bar-pad-x: 0.75rem;
    --site-bar-pad-y: 0.4rem;
  }
}

@media (max-width: 360px) {
  :root {
    --site-bar-pad-x: 0.5rem;
    --site-bar-gap: 0.5rem;
  }
}


@media (max-width: 320px) {
  :root {
    --site-bar-pad-x: 0.4rem;
  }
}

/* ─── Uso de tipografía (una familia para todo el observatorio) ───
 * --font-observatory (y por tanto --font-ui, --font-reading): toda la interfaz y lectura.
 * Capas: títulos (.layer-title), grado, condition, horizon, strata, contribute usan la misma familia.
 * Cursiva (font-style: italic): solo lectura interpretativa (strata-line, condition-line, contribute examples).
 * Al añadir texto: usar var(--font-ui) o var(--font-reading); ambos apuntan a --font-observatory.
 */

* {
  box-sizing: border-box;
}

.visually-hidden {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text);
  font-size: 1rem;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-tap-highlight-color: color-mix(in oklab, var(--text) 12%, transparent);
  background:
    radial-gradient(ellipse 140% 90% at 50% -10%, color-mix(in oklab, #fff 40%, var(--bg)) 0%, transparent 55%),
    radial-gradient(circle at 18% 12%, #ffffff40 0%, #ffffff00 45%),
    radial-gradient(circle at 78% 22%, #c8b4ef14 0%, #c8b4ef00 55%),
    radial-gradient(
      circle at 50% -20%,
      color-mix(in srgb, #e8dcff calc(26% + (var(--atmo) - 50) * 0.5%), #f7f4ff),
      color-mix(in srgb, var(--bg) calc(78% - (var(--atmo) - 50) * 0.25%), var(--bg-deep))
    ),
    repeating-linear-gradient(
      120deg,
      #ffffff0a 0px,
      #ffffff0a 1px,
      #00000000 1px,
      #00000000 9px
    ),
    linear-gradient(180deg, #f8f6ff 0%, var(--bg-ink) 100%);
  min-height: 100vh;
  background-attachment: fixed;
  /* Sin transición: cambios de --atmo recalculan gradientes; interpolar "background" provoca parpadeo/delay en lecturas. */
  overscroll-behavior-y: none;
}

/* ─── Tema atmosférico: noche violeta + niebla + royal como energía. Sistema cromático derivado de #5C3DFF. ─── */
html.theme-atmosphere {
  color-scheme: dark;
  /* Base: cielo nocturno profundo (no lila; gravedad del observatorio) */
  --sky-base: #0B0D1F;
  --sky-mid: #11142a;
  --sky-deep: #080912;
  --bg: var(--sky-base);
  --bg-deep: #0f1028;
  --bg-ink: #1C1748;
  --text: #E6E6F0;
  --muted: #9B8FBF;
  --line: #2a2555;
  --card: rgba(28, 23, 72, 0.5);
  /* Royal Violet = energía principal (horizonte, señales, acentos) */
  --royal: #5C3DFF;
  --royal-core: #5C3DFF;
  --glow: #8B6CFF;
  --violet-light: #7A63FF;
  --violet-mist: rgba(168, 156, 255, 0.15);
  --soft: #C9C4FF;
  --relate-accent: #5C3DFF;
  --relate-accent-soft: #8B6CFF;
  --layer-horizon: rgba(33, 28, 84, 0.6);
  --layer-air: rgba(92, 61, 255, 0.08);
  --layer-ground: rgba(28, 23, 72, 0.4);
  /* Sistema Royal Violet: 1 base #0B0D1F, 2 atm #1C1748, 3 royal #5C3DFF, 4 light #7A63FF, 5 mist #A89CFF, 6 texto #C9C4FF. Moduladores para estados (data-atmosphere-state en <html>). */
  --signal-glow: rgba(92, 61, 255, 0.18);
  --mist-opacity: 0.14;
  --atm-glow-alpha: 0.2;
  --atm-glow-hero: calc(0.18 * (var(--atm-glow-alpha) / 0.2));
  /* Ritmo unificado: transiciones del campo ~650ms (continuidad, no micro-interacción tipo app) */
  --tempo-field: 650ms;
  /* Top bar + barra inferior: mismo cromado (gradiente compartido) */
  --site-bar-chrome-gradient: linear-gradient(
    180deg,
    rgba(27, 21, 64, 0.85) 0%,
    rgba(11, 12, 26, 0.95) 100%
  );
}

/* Cuerpo: noche profunda + gradiente vertical (más profundidad abajo) */
html.theme-atmosphere body {
  background: linear-gradient(
    180deg,
    var(--sky-mid) 0%,
    var(--sky-base) 42%,
    var(--sky-deep) 100%
  );
  color: var(--text);
  /* Misma razón que body base: actualizaciones de grado/atmósfera no deben animar todo el fondo ~1s. */
}

/* Entrada contribute: acercamiento al mismo campo, no corte de “nueva pantalla”. */
@keyframes contribute-chamber-settle {
  from {
    opacity: 0.94;
    filter: brightness(0.99);
  }
  to {
    opacity: 1;
    filter: brightness(1);
  }
}

html.theme-atmosphere main.page.contribute-page {
  animation: contribute-chamber-settle calc(var(--tempo-field) * 1.3) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Capa fija: niebla violeta radial (atmósfera, no fondo plano). Royal como emanación. Escala con --mist-opacity. */
/* Deriva entre estados: coreografía niebla(0) → nodo(200ms) → horizonte(600ms) → lectura(JS fade). No tocar delays sin revisar el flujo. */
html.theme-atmosphere body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 120% 80% at 50% 18%,
    rgba(92, 61, 255, calc(var(--atm-glow-hero) * 1.2)) 0%,
    rgba(50, 35, 120, 0.2) 28%,
    rgba(15, 18, 38, 0.06) 52%,
    transparent 72%
  );
  opacity: min(1, calc(0.95 * (var(--mist-opacity) / 0.14) * (1 + var(--quiet-drift, 0))));
  transition: opacity 1500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ritmo basal cuando el campo está muy quieto: deriva mínima de la niebla (no compite con actividad real) */
@property --quiet-drift {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes quiet-field-drift {
  0%, 100% { --quiet-drift: 0; }
  50% { --quiet-drift: 0.03; }
}

html.theme-atmosphere[data-field-quiet="true"] body::before {
  animation: quiet-field-drift 16s ease-in-out infinite;
  animation-delay: -8s;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-atmosphere[data-field-quiet="true"] body::before {
    animation: none;
  }
}

/* Estados atmosféricos: mismo royal violet, modulación por opacidad/densidad/temperatura leve (no por matiz fuerte). */
/* avoidable: más frío, comprimido, tenso — menos glow, menos niebla */
html.theme-atmosphere[data-atmosphere-state="avoidable"] {
  --signal-glow: rgba(92, 61, 255, 0.12);
  --mist-opacity: 0.08;
  --atm-glow-alpha: 0.14;
}
/* fertile: más abierto, luminoso, expansivo — más intensidad, misma identidad */
html.theme-atmosphere[data-atmosphere-state="fertile"] {
  --signal-glow: rgba(92, 61, 255, 0.22);
  --mist-opacity: 0.16;
  --atm-glow-alpha: 0.22;
  --violet-light: #7B61FF;
}
/* observed: más suspendido, distante, brumoso — glow suave, más niebla suave */
html.theme-atmosphere[data-atmosphere-state="observed"] {
  --signal-glow: rgba(92, 61, 255, 0.11);
  --mist-opacity: 0.18;
  --atm-glow-alpha: 0.16;
  --violet-mist: rgba(168, 156, 255, 0.18);
}

/* Royal solo en horizonte, señales y hover (intencional, no saturado). CTA principal: sin salto a glow — continuidad, no comando. */
html.theme-atmosphere .topbar-brand:hover,
html.theme-atmosphere .topbar-ai:hover {
  color: var(--glow);
}
html.theme-atmosphere .signal-item .signal-text,
html.theme-atmosphere .moment-note {
  color: color-mix(in oklab, var(--text) 92%, var(--soft));
}
html.theme-atmosphere .observatory-hero .topbar.topbar-fixed {
  background: var(--site-bar-chrome-gradient);
}
html.theme-atmosphere .panel,
html.theme-atmosphere .local-climate {
  background: transparent;
  border: none;
}
html.theme-atmosphere .panel-observatory {
  box-shadow: 0 1.2rem 2.5rem -0.5rem color-mix(in oklab, var(--layer-ground) 18%, transparent);
  /* Ritmo corto: latent→present y lecturas no deben “arrastrar” 650ms en todo el panel (parpadeo perceptual). */
  transition:
    box-shadow 220ms ease,
    filter 220ms ease,
    transform 220ms ease;
  transform: scale(1);
  filter: brightness(1);
}
html.theme-atmosphere .degree-value,
html.theme-atmosphere .climate-summary-line {
  color: color-mix(in oklab, var(--text) 98%, var(--glow));
}
html.theme-atmosphere .text-link,
html.theme-atmosphere .cta-observatory {
  color: var(--text);
  border-color: rgba(139, 108, 255, 0.34);
  background: rgba(139, 108, 255, 0.08);
}
html.theme-atmosphere .cta-observatory {
  opacity: 0.82;
  font-weight: 400;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.1);
  transition:
    border-color 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.55s ease,
    opacity 0.55s ease,
    filter 0.55s ease;
}
html.theme-atmosphere .cta-observatory:hover {
  color: color-mix(in oklab, var(--text) 94%, var(--glow));
  border-color: rgba(139, 108, 255, 0.38);
  background: rgba(139, 108, 255, 0.1);
  opacity: 0.88;
  box-shadow:
    0 0 10px rgba(139, 108, 255, 0.06),
    0 2px 9px rgba(0, 0, 0, 0.11);
}
html.theme-atmosphere .cta-observatory:active {
  opacity: 0.8;
  transition-duration: 0.35s;
}
html.theme-atmosphere .contribute-footer-link {
  color: color-mix(in oklab, var(--text) 92%, var(--soft));
  opacity: 1;
}
html.theme-atmosphere .contribute-footer-link:hover {
  color: var(--text);
}

/* Shared sheet (modal): fondo y contraste en tema oscuro */
html.theme-atmosphere .shared-sheet {
  background: rgba(11, 12, 26, 0.97);
  border-top-color: rgba(139, 108, 255, 0.2);
}
html.theme-atmosphere .shared-sheet-head h2 {
  color: var(--text);
}
html.theme-atmosphere #shared-sheet .shared-sheet-list .moment-item .moment-note {
  color: #E6E6F0;
  opacity: 1;
}
html.theme-atmosphere .shared-sheet-count,
html.theme-atmosphere .shared-sheet-list .moment-item .moment-type-mood,
html.theme-atmosphere .shared-sheet-list .moment-item > span.moment-meta {
  color: color-mix(in oklab, var(--text) 78%, var(--soft));
  opacity: 0.92;
}
html.theme-atmosphere .shared-sheet-list .moment-item {
  border-bottom-color: rgba(139, 108, 255, 0.12);
}
html.theme-atmosphere .shared-sheet-empty {
  color: var(--soft);
}
html.theme-atmosphere .nearby-view-more-wrap .nearby-view-more-btn {
  color: color-mix(in oklab, var(--text) 88%, var(--soft));
}
html.theme-atmosphere .nearby-view-more-wrap .nearby-view-more-btn:hover {
  color: var(--text);
}
html.theme-atmosphere .contribute-rise-tone {
  background: rgba(27, 21, 64, 0.45);
  border-color: rgba(139, 108, 255, 0.12);
  border-radius: 22px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(139, 108, 255, 0.08) inset;
}
html.theme-atmosphere .contribute-rise-tone-intro,
html.theme-atmosphere .contribute-rise-tone .field-tone-label {
  color: var(--soft);
  opacity: 0.9;
}
html.theme-atmosphere .field select,
html.theme-atmosphere .field input[type="text"] {
  background: rgba(11, 12, 26, 0.55);
  border-color: rgba(139, 108, 255, 0.18);
  border-radius: 16px;
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
html.theme-atmosphere .field select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 5.8L8 10.3l4.5-4.5' fill='none' stroke='%23C9C4FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.9rem;
}
/* Desplegable (opciones): estilo donde el navegador lo permite */
html.theme-atmosphere .field select option {
  background: #0f1124;
  color: var(--text);
  padding: 0.5rem 0.75rem;
}
html.theme-atmosphere .field select:hover,
html.theme-atmosphere .field input[type="text"]:hover {
  border-color: rgba(139, 108, 255, 0.3);
}
html.theme-atmosphere .field select:focus,
html.theme-atmosphere .field input[type="text"]:focus {
  outline: none;
  border-color: rgba(139, 108, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(92, 61, 255, 0.18);
}
html.theme-atmosphere .contribute-page .panel::before {
  opacity: 0.6;
}
html.theme-atmosphere .contribute-layer-hint {
  background: linear-gradient(90deg, transparent 0%, rgba(139, 108, 255, 0.15) 50%, transparent 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom center;
}
html.theme-atmosphere .contribute-rise-example-line {
  border-left-color: rgba(139, 108, 255, 0.28);
}

/* Contribute = cámara interior del mismo campo: continuidad de niebla/horizonte, menos peso “formulario”. */
html.theme-atmosphere .contribute-page .panel-contribute {
  --contribute-accent: #8a9fd4;
}

html.theme-atmosphere .contribute-page .panel-contribute::before {
  pointer-events: none;
  opacity: 0.58;
  inset: -25% -18% -35% -18%;
  top: -28%;
  background:
    radial-gradient(
      ellipse 115% 75% at 50% 42%,
      rgba(92, 61, 255, 0.07) 0%,
      rgba(50, 35, 120, 0.04) 28%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 95% 65% at 50% 18%,
      color-mix(in oklab, var(--contribute-accent) 12%, transparent) 0%,
      color-mix(in oklab, var(--contribute-accent) 5%, transparent) 40%,
      transparent 70%
    );
  transition: opacity var(--tempo-field) ease;
}

html.theme-atmosphere .contribute-page .field select:not(.contribute-mood-native),
html.theme-atmosphere .contribute-page .field input[type="text"] {
  background: rgba(11, 12, 26, 0.38);
  border-color: rgba(139, 108, 255, 0.13);
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.025) inset;
  transition:
    border-color var(--tempo-field) cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow var(--tempo-field) cubic-bezier(0.22, 1, 0.36, 1),
    background-color var(--tempo-field) ease,
    filter var(--tempo-field) ease;
}
html.theme-atmosphere .contribute-page .field select:not(.contribute-mood-native):hover,
html.theme-atmosphere .contribute-page .field input[type="text"]:hover {
  border-color: rgba(139, 108, 255, 0.22);
}
html.theme-atmosphere .contribute-page .field select:not(.contribute-mood-native):focus,
html.theme-atmosphere .contribute-page .field input[type="text"]:focus {
  /* Asentar: superficie más densa, casi sin “anillo de app” */
  border-color: rgba(139, 108, 255, 0.16);
  background: rgba(14, 16, 34, 0.52);
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.055) inset;
  filter: brightness(1.04);
}

/* Campo “nombre del momento”: más legible en oscuro (superficie clara + placeholder visible). */
html.theme-atmosphere .contribute-page .field input[type="text"]#noteInput {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.045) 100%
    ),
    rgba(12, 14, 30, 0.78);
  border-color: rgba(139, 108, 255, 0.34);
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 0 0 1px rgba(255, 255, 255, 0.07) inset;
  filter: none;
  color: color-mix(in oklab, var(--text) 97%, #ffffff);
  caret-color: color-mix(in oklab, var(--text) 88%, #c8d4ff);
}
html.theme-atmosphere .contribute-page .field input[type="text"]#noteInput::placeholder {
  color: color-mix(in oklab, var(--soft) 58%, var(--text));
  opacity: 0.95;
}
html.theme-atmosphere .contribute-page .field input[type="text"]#noteInput:hover {
  border-color: rgba(160, 175, 255, 0.4);
}
html.theme-atmosphere .contribute-page .field input[type="text"]#noteInput:focus {
  border-color: rgba(170, 185, 255, 0.48);
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.06) 100%
    ),
    rgba(10, 12, 26, 0.88);
  box-shadow:
    0 2px 26px rgba(0, 0, 0, 0.22),
    0 0 0 3px rgba(139, 108, 255, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
  filter: brightness(1.03);
}

html.theme-atmosphere .contribute-page .topbar h1 {
  color: color-mix(in oklab, var(--text) 94%, var(--soft));
  text-shadow:
    0 0 18px rgba(139, 108, 255, 0.14),
    0 1px 3px rgba(0, 0, 0, 0.48);
}

html.theme-atmosphere .contribute-page .contribute-layer-eyebrow {
  color: color-mix(in oklab, var(--soft) 62%, var(--text));
  text-shadow:
    0 0 20px rgba(201, 196, 255, 0.24),
    0 1px 3px rgba(0, 0, 0, 0.48);
}

html.theme-atmosphere .contribute-page .contribute-layer-hint {
  color: color-mix(in oklab, var(--text) 84%, var(--soft));
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

html.theme-atmosphere .contribute-page .contribute-field-line {
  color: color-mix(in oklab, var(--text) 90%, var(--soft));
  opacity: 0.97;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

html.theme-atmosphere .contribute-page .contribute-rise-from {
  color: color-mix(in oklab, var(--text) 80%, var(--soft));
  opacity: 0.93;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.theme-atmosphere .contribute-page .contribute-rise-tone {
  background: color-mix(in oklab, var(--bg-deep) 78%, rgba(36, 32, 88, 0.32));
  border-color: color-mix(in oklab, var(--line) 52%, rgba(139, 108, 255, 0.14));
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  transition:
    background var(--tempo-field) ease,
    border-color var(--tempo-field) ease,
    box-shadow var(--tempo-field) ease;
}

html.theme-atmosphere .contribute-page .contribute-rise-tone-intro {
  color: color-mix(in oklab, var(--text) 86%, var(--soft));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

html.theme-atmosphere .contribute-page .contribute-rise-tone .field-tone-label {
  color: color-mix(in oklab, var(--soft) 48%, var(--text));
  font-weight: 500;
}

/* Hint suave solo en el título; los chips conservan color/hover/sombra siempre (antes todo el bloque iba a opacity ~0.4). */
html.theme-atmosphere .contribute-page .contribute-rise-tone:not(.contribute-rise-tone--revealed) .contribute-rise-tone-intro {
  opacity: 0.78;
}
html.theme-atmosphere .contribute-page .contribute-rise-tone--revealed .contribute-rise-tone-intro {
  opacity: 1;
}
html.theme-atmosphere .contribute-page .contribute-tone-interactive {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
html.theme-atmosphere .contribute-page .contribute-kind-state-label {
  color: color-mix(in oklab, var(--soft) 62%, var(--text));
  opacity: 0.88;
  transition:
    opacity 0.35s ease,
    color 0.35s ease,
    font-weight 0.2s ease;
}
/* Sin seleccionar: un poco más apagado para que el elegido destaque */
html.theme-atmosphere .contribute-page .contribute-kind-state:not(:has(:checked)) .contribute-kind-state-label {
  opacity: 0.72;
}
/* Observed = frío / claridad */
html.theme-atmosphere .contribute-page .contribute-kind-state--observed .contribute-kind-state-surface {
  background: color-mix(in oklab, var(--bg-deep) 68%, rgba(110, 190, 255, 0.14));
  border-color: color-mix(in oklab, #7ec8ff 42%, var(--line));
  box-shadow:
    inset 0 0 0 1px rgba(110, 200, 255, 0.1),
    0 1px 6px rgba(0, 0, 0, 0.18);
}
/* Avoidable = cálido / tensión suave */
html.theme-atmosphere .contribute-page .contribute-kind-state--avoidable .contribute-kind-state-surface {
  background: color-mix(in oklab, var(--bg-deep) 62%, rgba(235, 165, 88, 0.18));
  border-color: color-mix(in oklab, #e8a85c 48%, var(--line));
  box-shadow:
    inset 0 0 0 1px rgba(235, 165, 88, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.22);
}
/* Fertile = crecimiento / fresco */
html.theme-atmosphere .contribute-page .contribute-kind-state--fertile .contribute-kind-state-surface {
  background: color-mix(in oklab, var(--bg-deep) 66%, rgba(110, 230, 185, 0.13));
  border-color: color-mix(in oklab, #6ee4b9 40%, var(--line));
  box-shadow:
    inset 0 0 0 1px rgba(110, 230, 185, 0.1),
    0 1px 6px rgba(0, 0, 0, 0.16);
  transform: translateY(-0.5px);
}
html.theme-atmosphere .contribute-page .contribute-kind-state:hover:not(:has(:checked)) .contribute-kind-state-surface {
  filter: brightness(1.12);
}
html.theme-atmosphere .contribute-page .contribute-kind-state--observed:hover:not(:has(:checked)) .contribute-kind-state-surface {
  border-color: color-mix(in oklab, #9ad8ff 55%, var(--line));
}
html.theme-atmosphere .contribute-page .contribute-kind-state--avoidable:hover:not(:has(:checked)) .contribute-kind-state-surface {
  border-color: color-mix(in oklab, #f0bc78 52%, var(--line));
}
html.theme-atmosphere .contribute-page .contribute-kind-state--fertile:hover:not(:has(:checked)) .contribute-kind-state-surface {
  border-color: color-mix(in oklab, #8af0cc 48%, var(--line));
}
html.theme-atmosphere .contribute-page .contribute-kind-state:has(:checked) .contribute-kind-state-label {
  color: color-mix(in oklab, var(--text) 94%, #fff);
  opacity: 1;
  font-weight: 600;
}
html.theme-atmosphere .contribute-page .contribute-kind-state--observed:has(:checked) .contribute-kind-state-surface {
  background: color-mix(in oklab, var(--bg-deep) 48%, rgba(110, 200, 255, 0.32));
  border-color: color-mix(in oklab, #9ad8ff 72%, #fff);
  box-shadow:
    0 0 0 2px rgba(120, 200, 255, 0.55),
    0 6px 22px rgba(100, 180, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  filter: none;
}
html.theme-atmosphere .contribute-page .contribute-kind-state--avoidable:has(:checked) .contribute-kind-state-surface {
  background: color-mix(in oklab, var(--bg-deep) 45%, rgba(240, 175, 95, 0.34));
  border-color: color-mix(in oklab, #f0bc78 68%, #fff);
  box-shadow:
    0 0 0 2px rgba(235, 165, 88, 0.55),
    0 6px 22px rgba(235, 150, 70, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  filter: none;
}
html.theme-atmosphere .contribute-page .contribute-kind-state--fertile:has(:checked) .contribute-kind-state-surface {
  background: color-mix(in oklab, var(--bg-deep) 50%, rgba(110, 230, 185, 0.3));
  border-color: color-mix(in oklab, #8af0cc 65%, #fff);
  box-shadow:
    0 0 0 2px rgba(110, 230, 185, 0.5),
    0 6px 22px rgba(80, 200, 160, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  filter: none;
}
/* Foco teclado: anillo aparte para no pisar el box-shadow del estado seleccionado */
html.theme-atmosphere .contribute-page .contribute-kind-state:has(:focus-visible) {
  outline: 2px solid color-mix(in oklab, var(--soft) 55%, transparent);
  outline-offset: 3px;
  border-radius: 13px;
}
html.theme-atmosphere #contributeForm[data-kind-preview="observed"] #noteInput {
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 0 0 1px rgba(255, 255, 255, 0.07) inset,
    0 0 0 1px rgba(110, 175, 255, 0.22);
  filter: none;
}
html.theme-atmosphere #contributeForm[data-kind-preview="avoidable"] #noteInput {
  box-shadow:
    0 2px 18px rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 0 0 1px rgba(255, 200, 120, 0.18);
  filter: none;
}
html.theme-atmosphere #contributeForm[data-kind-preview="fertile"] #noteInput {
  box-shadow:
    0 2px 18px rgba(0, 0, 0, 0.17),
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 0 0 1px rgba(100, 220, 175, 0.2);
  filter: none;
}

html.theme-atmosphere .contribute-page .field > span {
  color: color-mix(in oklab, var(--text) 78%, var(--soft));
}

html.theme-atmosphere .contribute-page .contribute-rise-label-hint {
  color: color-mix(in oklab, var(--text) 82%, var(--soft));
  opacity: 0.96;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.theme-atmosphere .contribute-page .contribute-rise-examples-intro-text {
  color: color-mix(in oklab, var(--text) 76%, var(--soft));
  opacity: 0.94;
}

html.theme-atmosphere .contribute-page .contribute-rise-examples-live {
  color: color-mix(in oklab, var(--text) 74%, var(--soft));
  opacity: 0.93;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html.theme-atmosphere .contribute-page .field-hint {
  color: color-mix(in oklab, var(--soft) 42%, var(--text));
  opacity: 0.88;
}

html.theme-atmosphere .contribute-page .note-analysis-line {
  color: color-mix(in oklab, var(--text) 72%, var(--soft));
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}

html.theme-atmosphere .contribute-page .field-inline span {
  color: color-mix(in oklab, var(--text) 86%, var(--soft));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}

html.theme-atmosphere .contribute-page .contribute-shared-hint,
html.theme-atmosphere .contribute-page .contribute-trust-note {
  color: color-mix(in oklab, var(--text) 74%, var(--soft));
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}

html.theme-atmosphere .contribute-page .legal-bucket-note {
  color: color-mix(in oklab, var(--text) 68%, var(--soft));
  opacity: 0.9;
}

html.theme-atmosphere .contribute-page .legal-links .text-link {
  color: color-mix(in oklab, var(--text) 88%, var(--soft));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html.theme-atmosphere .contribute-page .legal-links .text-link:hover {
  color: var(--text);
}

html.theme-atmosphere .contribute-page #saveButton.cta.cta-contribute-submit {
  color: color-mix(in oklab, var(--text) 94%, #f0f4ff);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-deep) 78%, rgba(139, 108, 255, 0.38)) 0%,
    color-mix(in oklab, var(--bg-deep) 88%, rgba(95, 70, 200, 0.32)) 100%
  );
  border-color: color-mix(in oklab, rgba(190, 175, 255, 0.55) 45%, var(--line));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 600;
  letter-spacing: 0.06em;
  filter: brightness(1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 3px 16px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(139, 108, 255, 0.14);
  transition:
    background var(--tempo-field) cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--tempo-field) ease,
    box-shadow var(--tempo-field) ease,
    color var(--tempo-field) ease,
    filter var(--tempo-field) ease,
    opacity var(--tempo-field) ease;
}

html.theme-atmosphere .contribute-page #saveButton.cta.cta-contribute-submit:hover {
  color: color-mix(in oklab, var(--text) 96%, #ffffff);
  border-color: color-mix(in oklab, rgba(200, 190, 255, 0.6) 50%, var(--line));
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-deep) 74%, rgba(150, 125, 255, 0.42)) 0%,
    color-mix(in oklab, var(--bg-deep) 85%, rgba(110, 85, 210, 0.36)) 100%
  );
  filter: brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.11) inset,
    0 4px 18px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(160, 140, 255, 0.2);
}

html.theme-atmosphere .contribute-page #saveButton.cta.cta-contribute-submit:focus-visible {
  outline: 2px solid color-mix(in oklab, rgba(180, 165, 255, 0.65) 55%, transparent);
  outline-offset: 3px;
}

html.theme-atmosphere .contribute-page #saveButton.cta.cta-contribute-submit:active {
  filter: brightness(0.97);
  transition-duration: calc(var(--tempo-field) * 0.45);
}

html.theme-atmosphere .contribute-page .contribute-cta-hint {
  color: color-mix(in oklab, var(--text) 76%, var(--soft));
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}

html.theme-atmosphere .contribute-page .form-status {
  color: color-mix(in oklab, var(--text) 78%, var(--soft));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  max-width: min(40ch, 100%);
}

html.theme-atmosphere .contribute-page .contribute-back-link {
  color: color-mix(in oklab, var(--soft) 38%, var(--text));
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Secundario: debajo del CTA, alineado a la derecha (salida sin competir con Place a moment). */
html.theme-atmosphere .contribute-page .contribute-back-wrap .contribute-back-link {
  color: color-mix(in oklab, var(--soft) 52%, var(--text));
  opacity: 0.72;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-shadow: none;
}
html.theme-atmosphere .contribute-page .contribute-back-wrap .contribute-back-link:hover {
  opacity: 0.92;
  color: color-mix(in oklab, var(--text) 82%, var(--soft));
}

html.theme-atmosphere .contribute-page .contribute-mood-trigger,
html.theme-atmosphere .contribute-page #noteInput {
  color: var(--text);
}

html.theme-atmosphere .contribute-page .contribute-layer-eyebrow {
  font-weight: 600;
  letter-spacing: 0.075em;
}

html.theme-atmosphere .contribute-page #contributeForm #noteInput {
  transition:
    border-color var(--tempo-field) ease,
    box-shadow var(--tempo-field) cubic-bezier(0.22, 1, 0.36, 1),
    background-color var(--tempo-field) ease,
    filter var(--tempo-field) ease;
}

/* Panel Recent: contraste legible en tema oscuro */
html.theme-atmosphere #recentMoments.moment-list .moment-item {
  opacity: 1;
}
html.theme-atmosphere #recentMoments.moment-list .moment-item .moment-note {
  color: var(--text);
}
html.theme-atmosphere #recentMoments.moment-list .moment-item .moment-type-mood {
  color: color-mix(in oklab, var(--text) 78%, var(--soft));
  opacity: 0.92;
}
html.theme-atmosphere #recentMoments.moment-list .moment-item > span.moment-meta {
  color: color-mix(in oklab, var(--text) 70%, var(--soft));
  opacity: 0.9;
}
@media (hover: hover) and (pointer: fine) {
  html.theme-atmosphere #recentMoments.moment-list .moment-item:hover {
    background: rgba(139, 108, 255, 0.06);
  }
}

/* Tema atmósfera: móvil (contraste extra en CTA y footer) — padding barra: --site-bar-pad-* */
@media (max-width: 480px) {
  html.theme-atmosphere .degree-value {
    font-size: clamp(1.6rem, 5vw, 2rem);
  }
  html.theme-atmosphere .panel {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  html.theme-atmosphere .cta-observatory {
    border-color: rgba(139, 108, 255, 0.3);
    background: rgba(139, 108, 255, 0.07);
  }
  html.theme-atmosphere .text-link.contribute-footer-link {
    color: var(--text);
  }
}

/* Sin salto visual: solo cambio de scroll para sensación de rueda continua */
body.loop-warp .page {
  transition: none;
}

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

body.sheet-open {
  overflow: hidden;
}

.page {
  width: min(880px, 92vw);
  margin: 0 auto;
  padding: 0 env(safe-area-inset-right) calc(var(--page-pad-bottom) + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  position: relative;
}

@media (min-width: 481px) and (max-width: 1024px) {
  /* Tablet: docs/RESPONSIVE_BREAKPOINTS.md */
  .page {
    width: min(720px, 88vw);
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  .cta-observatory {
    min-height: 44px;
    padding: 0.55rem 1.1rem;
  }

  .text-button,
  .text-link {
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .local-field-select {
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    font-size: 0.95rem;
  }

  .instrument-info-btn {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    top: 0.25rem;
    right: 0.6rem;
  }
}

@media (max-width: 480px) {
  .page {
    width: 94vw;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .cta-observatory,
  .atmosphere-grounding .cta-observatory,
  .hero-observatory-upper .cta-observatory {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .cta {
    min-height: 44px;
    padding: 0.5rem 1rem;
  }
  .nearby-view-more-wrap .nearby-view-more-btn,
  .text-button {
    min-height: 44px;
    padding: 0.4rem 0.6rem;
  }
}

.page:has(.site-legal) {
  padding-bottom: calc(var(--page-pad-bottom) + var(--site-legal-height) + env(safe-area-inset-bottom, 0px));
}

/* Degradado por capas: más claro arriba (atmósfera), más denso hacia strata */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    #ffffff00 0%,
    #faf8ff00 30%,
    color-mix(in srgb, var(--bg-deep) 18%, transparent) 70%,
    color-mix(in srgb, var(--bg-ink) 42%, transparent) 100%
  );
  border-radius: 0 0 24px 24px;
}

.page > * {
  position: relative;
  z-index: 1;
}

/* Hero: primer segundo = título + value prop + entrada (Atmosphere/Moments) + grado.
   Orden en el panel: ascenso (entrada, orientación) → pico (grado) → descenso (condición, instrumento) → grounding (CTA). */
.observatory-hero {
  min-height: 100vh;
  /* Separación visible respecto a Orbital (ver --orbital-to-hero-gap: el padding orbital sigue el mismo fondo de capa). */
  margin-top: var(--orbital-to-hero-gap);
  display: flex;
  flex-direction: column;
  /* padding-top reserva espacio para la topbar fija; poco margen para que no se vea separada */
  padding: calc(4rem + env(safe-area-inset-top, 0px) + 0.25rem) 0 calc(var(--page-pad-top) + 0.5rem);
  position: relative;
  isolation: isolate;
  /* Topbar fija debe quedar por encima del contenido que hace scroll (panel-recent, etc.) en móvil */
  z-index: 100;
  /* Capas de profundidad: aire arriba, horizonte abajo — sensación de espacio */
  box-shadow:
    inset 0 8rem 5rem -3rem color-mix(in oklab, var(--layer-air) 10%, var(--layer-horizon) 18%),
    inset 0 -10rem 6rem -4rem color-mix(in oklab, var(--layer-horizon) 50%, transparent),
    inset 0 -4rem 2.5rem -2rem color-mix(in oklab, var(--layer-ground) 24%, transparent);
}

.observatory-hero > * {
  position: relative;
  z-index: 1;
}

/* Cúpula de aire: luz alta, difusa — sensación de cielo/espacio */
.observatory-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 160% 100% at 50% 5%, color-mix(in oklab, var(--bg) 88%, var(--layer-air)) 0%, transparent 48%),
    radial-gradient(ellipse 130% 85% at 50% 50%, var(--layer-horizon) 0%, transparent 58%);
  opacity: 0.62;
  /* Antes 1.5s: al cruzar latent/present el velo tardaba demasiado y competía con lecturas nuevas. */
  transition: opacity 0.22s ease;
  z-index: 0;
}

/* Transición aire → horizonte (más denso abajo), suave.
   + Glow radial en el horizonte = centro gravitacional: el violeta se condensa ahí y el ojo tiene un ancla. */
.observatory-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--bg) 18%, transparent) 0%,
      transparent 40%,
      color-mix(in oklab, var(--layer-horizon) 35%, transparent) 82%,
      color-mix(in oklab, var(--layer-ground) 26%, transparent) 100%
    ),
    radial-gradient(
      ellipse 120% 50% at 50% 55%,
      rgba(92, 61, 255, 0.18) 0%,
      rgba(92, 61, 255, 0.08) 35%,
      rgba(92, 61, 255, 0.02) 60%,
      transparent 80%
    );
  opacity: 0.7;
  z-index: 0;
}

/* Tema observatorio: una capa más de profundidad — niebla violeta muy suave centrada en el horizonte (deep sky → violet mist → horizon glow → panel). */
html.theme-atmosphere .observatory-hero::after {
  background:
    radial-gradient(
      ellipse 175% 44% at 50% 77%,
      color-mix(in oklab, var(--soft) 12%, transparent) 0%,
      transparent 56%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--bg) 18%, transparent) 0%,
      transparent 40%,
      color-mix(in oklab, var(--layer-horizon) 35%, transparent) 82%,
      color-mix(in oklab, var(--layer-ground) 26%, transparent) 100%
    ),
    radial-gradient(
      ellipse 120% 50% at 50% 55%,
      rgba(92, 61, 255, 0.18) 0%,
      rgba(92, 61, 255, 0.08) 35%,
      rgba(92, 61, 255, 0.02) 60%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 160% 70% at 50% 55%,
      rgba(92, 61, 255, 0.06) 0%,
      rgba(92, 61, 255, 0.02) 40%,
      transparent 60%
    );
}

/* Segunda capa de niebla: más baja, más ancha, muy difusa — aire violeta acumulado alrededor del horizonte (presencia atmosférica, no color). */
html.theme-atmosphere .observatory-hero::before {
  background:
    radial-gradient(
      ellipse 200% 95% at 44% 54%,
      rgba(92, 61, 255, 0.05) 0%,
      rgba(92, 61, 255, 0.025) 32%,
      transparent 62%
    ),
    radial-gradient(ellipse 160% 100% at 50% 5%, color-mix(in oklab, var(--bg) 88%, var(--layer-air)) 0%, transparent 48%),
    radial-gradient(ellipse 130% 85% at 50% 50%, var(--layer-horizon) 0%, transparent 58%),
    radial-gradient(
      ellipse 220% 110% at 50% 58%,
      rgba(92, 61, 255, 0.07) 0%,
      rgba(92, 61, 255, 0.04) 18%,
      rgba(92, 61, 255, 0.02) 38%,
      transparent 62%
    );
  opacity: 0.9;
}

/* Cruce perceptual del campo: latent (~parcialmente adentro) → present (deriva sin corte) */
html.theme-atmosphere .observatory-hero[data-field-entry="latent"]::before {
  opacity: 0.87;
}
html.theme-atmosphere .observatory-hero[data-field-entry="latent"]::after {
  opacity: 0.69;
}
html.theme-atmosphere .observatory-hero[data-field-entry="present"]::before,
html.theme-atmosphere .observatory-hero[data-field-entry="present"]::after {
  transition: opacity 200ms ease;
}
html.theme-atmosphere .observatory-hero[data-field-entry="present"]::before {
  opacity: 0.93;
}
html.theme-atmosphere .observatory-hero[data-field-entry="present"]::after {
  opacity: 0.76;
}
html.theme-atmosphere .observatory-hero[data-field-entry="present"] .panel.panel-observatory {
  filter: brightness(1.022);
  transform: scale(1.006);
  box-shadow: 0 1.25rem 2.65rem -0.48rem color-mix(in oklab, var(--layer-ground) 21%, transparent);
}

/* ── Violet haze (hero): masa atmosférica detrás de la lectura — suspendido en el campo, no UI plana.
   Capa interna al panel + refuerzo en ::before/::after del section; solo theme-atmosphere. */
@keyframes slipup-violet-haze-field {
  0%,
  100% {
    opacity: 0.79;
  }
  50% {
    opacity: 0.87;
  }
}

html.theme-atmosphere .observatory-hero .panel.panel-observatory::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.012) 0px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      -18deg,
      rgba(6, 8, 22, 0.045) 0px,
      transparent 1px,
      transparent 4px
    ),
    radial-gradient(
      ellipse 105% 72% at 56% 47%,
      color-mix(in oklab, var(--royal) 10%, transparent) 0%,
      transparent 64%
    ),
    radial-gradient(
      ellipse 82% 92% at 50% 38%,
      color-mix(in oklab, var(--royal) 17%, transparent) 0%,
      color-mix(in oklab, var(--bg-deep) 52%, transparent) 48%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 125% 68% at 48% 58%,
      color-mix(in oklab, var(--violet-light) 11%, transparent) 0%,
      transparent 58%
    );
  opacity: 0.83;
  animation: slipup-violet-haze-field 92s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-atmosphere .observatory-hero .panel.panel-observatory::before {
    animation: none;
    opacity: 0.82;
  }
}

/* Hero: un solo campo — lectura e invitación como continuidad; Orbital como borde, no foco rival. */
html.theme-atmosphere .observatory-hero .topbar-ai {
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: none;
  /* Un pelo más tenue que el Orbital del hero: mismo destino, menos eco visual. */
  opacity: 0.48;
  color: color-mix(in oklab, var(--muted) 72%, var(--text));
  transition:
    opacity var(--tempo-field) ease,
    color var(--tempo-field) ease;
}
html.theme-atmosphere .observatory-hero .topbar-ai:hover {
  opacity: 0.9;
  color: color-mix(in oklab, var(--text) 82%, var(--muted));
  text-decoration: none;
}
html.theme-atmosphere .observatory-hero .topbar-ai:focus-visible {
  opacity: 1;
  outline: 2px solid color-mix(in oklab, var(--line) 55%, rgba(139, 108, 255, 0.35));
  outline-offset: 3px;
}

/* Desplazamiento global del hero: solo padding-top (todo el panel sube igual).
   No toca --hero-grounding-step ni gaps internos; las relaciones Place→Orbital→trust siguen definidas por el panel y .atmosphere-grounding. */
html.theme-atmosphere .observatory-hero {
  padding-top: calc(4rem + env(safe-area-inset-top, 0px) + 0.25rem - 0.85rem);
}
html.theme-atmosphere .observatory-hero .panel.panel-observatory {
  /* Columna superior (lectura + ledger + CTA) → Orbital: mismo paso que dentro del horizonte. */
  --hero-grounding-step: 2cm;
  gap: var(--hero-grounding-step);
}
html.theme-atmosphere .observatory-hero .atmosphere-air {
  padding-bottom: 0.2rem;
}
html.theme-atmosphere .observatory-hero .hero-reading-stack {
  gap: 0.95rem;
  margin-bottom: 0.28rem;
}

/* Lectura + ledger (pulso/hints) en una columna; el gap del panel separa esto del horizonte (CTA). */
.hero-observatory-upper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(40ch, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  gap: 0.35rem;
}
.observatory-hero .hero-observatory-upper {
  max-width: var(--hero-column-max, min(40ch, 100%));
}
html.theme-atmosphere .observatory-hero .hero-observatory-upper {
  gap: 0.45rem;
}
html.theme-atmosphere .observatory-hero .hero-field-eyebrow-wrap .layer-title {
  opacity: 0.97;
  letter-spacing: 0.11em;
}
html.theme-atmosphere .observatory-hero .atmosphere-grounding {
  /* Misma cifra que padding-top: distancia “Place→Orbital” = gap del panel + este pad (para calc proporcional en el polo). */
  --hero-place-to-orbital-pad: 0.42rem;
  padding-top: var(--hero-place-to-orbital-pad);
  /* Orbital → trust; el paso Place→Orbital es el gap del panel. */
  gap: var(--hero-grounding-step);
}
html.theme-atmosphere .observatory-hero .atmosphere-grounding::before {
  opacity: 0.12;
  width: min(64%, 148px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--line) 55%, transparent),
    transparent
  );
}
html.theme-atmosphere .observatory-hero .atmosphere-grounding::after {
  top: calc(var(--hero-place-to-orbital-pad) + 3px);
}
html.theme-atmosphere .observatory-hero .horizon-pulse-bar {
  margin-bottom: 0;
}
html.theme-atmosphere .observatory-hero .cta-observatory-wrap {
  margin-top: 0;
}

/* Puente superior + cola post-Place: mismo campo; Place como decantación, no estación intermedia. */
html.theme-atmosphere .observatory-hero .hero-bridge-line {
  margin-bottom: 0.88rem;
}
html.theme-atmosphere .observatory-hero .cta-bridge-copy-stack {
  margin-top: 0;
}
html.theme-atmosphere .observatory-hero .atmospheric-weather-caption-wrap {
  gap: 0.22rem;
  margin-top: 0;
  padding-top: 0;
}
html.theme-atmosphere .observatory-hero .atmospheric-weather-caption-wrap .atmospheric-weather-caption {
  opacity: 0.4;
  font-size: 0.64rem;
  text-shadow: none;
}
html.theme-atmosphere .observatory-hero .atmospheric-weather-caption-wrap .instrument-info-btn {
  opacity: 0.36;
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  min-height: 1.05rem;
  font-size: 0.52rem;
  font-weight: 500;
  border-color: color-mix(in oklab, var(--muted) 38%, transparent);
}

/* Ledger: hint + pulso reservan hueco (no display:none) para que el CTA no salte al aparecer texto. */
html.theme-atmosphere .observatory-hero .hero-grounding-cta-ledger .hero-scroll-hint:not(.hero-scroll-hint--visible) {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  min-height: 1.25em;
  margin: 0.1rem 0 0.35rem;
  overflow: hidden;
}
html.theme-atmosphere .observatory-hero .hero-grounding-cta-ledger .hero-scroll-hint.hero-scroll-hint--visible {
  visibility: visible;
}

/* Pulso con .hidden sigue ocupando caja (mensaje vacío / invisible) para no empujar Place a moment. */
.hero-grounding-cta-ledger #observatoryPulseWrap.observatory-pulse.hidden {
  display: block !important;
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
  min-height: 2.85em;
  width: 100%;
  max-width: 36ch;
  margin-top: 0.2rem;
  margin-bottom: 0;
}
html.theme-atmosphere .observatory-hero .hero-grounding-cta-ledger #observatoryPulseWrap.observatory-pulse.hidden {
  min-height: 3em;
}
html.theme-atmosphere .observatory-hero .hero-grounding-cta-ledger #observatoryPulseWrap.observatory-pulse.is-visible {
  visibility: visible;
}

/* Orbital → trust: más aire que un solo gap; el bloque sigue anclado al fondo de la capa. */
html.theme-atmosphere .observatory-hero .atmosphere-grounding .atmospheric-weather-caption-wrap {
  margin-top: auto;
  padding-top: 0.95rem;
  padding-bottom: 0.2rem;
}

/* ── Tercer polo del hero: Orbital.
   Alineado al sistema de capas (.layer-title, ceja “Today in the world”, panel Orbital):
   misma familia tipográfica, peso 500, tracking de capa; más tenue que la ceja (tercer fuerza). */
.hero-orbital-pole {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  width: 100%;
  max-width: var(--hero-column-max, min(40ch, 100%));
  /* El paso respecto al puente lo marca el gap de .atmosphere-grounding en tema. */
  margin: 0 auto 0.12rem;
  padding: 0.48rem 0.5rem 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  border-top: 1px solid color-mix(in oklab, var(--line) 22%, transparent);
}

html.theme-atmosphere .observatory-hero .hero-orbital-pole {
  /* Misma familia de borde; un poco más de presencia luminosa que el borde mínimo. */
  border-top-color: color-mix(in oklab, var(--line) 42%, rgba(180, 165, 255, 0.1));
  /* Sube 1/4 de la distancia diseñada al bloque superior (gap del panel + pad del grounding); escala con --hero-grounding-step. */
  margin-top: calc((var(--hero-grounding-step) + var(--hero-place-to-orbital-pad)) * -0.25);
  margin-bottom: 0.28rem;
  padding-top: 0.4rem;
  padding-bottom: 0.08rem;
}

/* Frase de promesa (no rótulo en versal); alineada a lectura de capa. */
.hero-orbital-anchor {
  text-decoration: none;
  padding: 0.22rem 0.5rem;
  margin: 0;
  font-family: var(--font-observatory);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.38;
  text-align: center;
  max-width: min(36ch, 100%);
  text-wrap: balance;
  color: #6b7d8f;
  opacity: 0.88;
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}

.hero-orbital-anchor:hover {
  color: color-mix(in oklab, var(--text) 85%, var(--muted));
}

/* Color + halo como ceja “Today in the world”, con menos peso (no compite con Place). */
html.theme-atmosphere .observatory-hero .hero-orbital-anchor {
  color: color-mix(in oklab, var(--soft) 78%, #ffffff);
  opacity: 0.58;
  text-shadow:
    0 0 18px rgba(201, 196, 255, 0.16),
    0 0 28px rgba(139, 108, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.34);
}

html.theme-atmosphere .observatory-hero .hero-orbital-anchor:hover {
  opacity: 0.76;
  color: color-mix(in oklab, var(--text) 90%, var(--soft));
  text-shadow:
    0 0 20px rgba(210, 205, 255, 0.2),
    0 0 32px rgba(139, 108, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.38);
}

html.theme-atmosphere .observatory-hero .hero-orbital-anchor:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--line) 48%, rgba(139, 108, 255, 0.38));
  outline-offset: 3px;
  border-radius: 4px;
}

.hero-orbital-tagline {
  margin: 0;
  padding: 0 0.35rem;
  max-width: 26ch;
  font-family: var(--font-observatory);
  font-size: 0.72rem;
  line-height: 1.42;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.72;
  text-align: center;
}

/* Nombre del territorio / capa (contraste con la frase promesa en el enlace). */
.hero-orbital-tagline.hero-orbital-layer-name {
  max-width: 22ch;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-size: 0.64rem;
  opacity: 0.62;
}

/* Misma pista que trust / microcopy; un poco más de brillo que el bloque trust. */
html.theme-atmosphere .observatory-hero .hero-orbital-tagline {
  color: color-mix(in oklab, var(--muted) 85%, var(--soft));
  opacity: 0.52;
  font-size: 0.7rem;
  text-shadow:
    0 0 10px rgba(201, 196, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

html.theme-atmosphere .observatory-hero .hero-orbital-tagline.hero-orbital-layer-name {
  opacity: 0.62;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-shadow:
    0 0 12px rgba(201, 196, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

@media (max-width: 520px) {
  /* Escala acorde a .observatory-hero .layer-title en estrecho; el polo sigue más pequeño que la ceja. */
  html.theme-atmosphere .observatory-hero .hero-orbital-anchor {
    font-size: clamp(0.72rem, 3.2vw, 0.84rem);
    letter-spacing: 0.035em;
  }
}

@media (max-width: 480px) {
  .hero-orbital-pole {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .hero-orbital-tagline {
    max-width: 32ch;
    font-size: 0.68rem;
    line-height: 1.42;
  }

  html.theme-atmosphere .observatory-hero .hero-orbital-tagline {
    font-size: 0.66rem;
  }

  html.theme-atmosphere .observatory-hero .hero-orbital-tagline.hero-orbital-layer-name {
    font-size: 0.58rem;
  }
}

.observatory-hero.observatory--pattern::before {
  opacity: 0.1;
}

/* Micro-respiración: solo transform (no opacity) para no batir subpíxeles del texto al actualizar lecturas. */
@keyframes hero-breathe {
  0%, 100% { transform: translateZ(0); }
  50% { transform: translateY(-0.4px) translateZ(0); }
}

.observatory-hero.hero-breathe .atmosphere-air,
.observatory-hero.hero-breathe .atmosphere-grounding {
  animation: hero-breathe 12s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .observatory-hero.hero-breathe .atmosphere-air,
  .observatory-hero.hero-breathe .atmosphere-grounding {
    animation: none;
  }
}

/* Respuesta ritual al volver del contribute: glow sutil ~2 s (respuesta del campo, no premio). */
@keyframes hero-ritual-glow {
  0%, 100% { opacity: 0.62; }
  45% { opacity: 0.72; }
}

/* Sin theme-atmosphere la cúpula ::before está ~0.62; estos valores encajan. */
.observatory-hero-ritual::before {
  animation: hero-ritual-glow 2.2s ease-out forwards;
}

/*
 * Tema observatorio: ::before base ~0.9 y ::after ~0.7–0.76. La animación antigua (0.62–0.72)
 * pisaba la cúpula y generaba un velo distinto a ::after → sensación de “capa encima” / pantalla a medias.
 */
@keyframes hero-ritual-glow-atmosphere {
  0%,
  100% {
    opacity: 0.9;
  }
  45% {
    opacity: 0.96;
  }
}
html.theme-atmosphere .observatory-hero.observatory-hero-ritual::before {
  animation: hero-ritual-glow-atmosphere 2.2s ease-out forwards;
}
@keyframes hero-ritual-glow-atmosphere-latent {
  0%,
  100% {
    opacity: 0.87;
  }
  45% {
    opacity: 0.93;
  }
}
@keyframes hero-ritual-glow-atmosphere-present {
  0%,
  100% {
    opacity: 0.93;
  }
  45% {
    opacity: 0.98;
  }
}
html.theme-atmosphere .observatory-hero[data-field-entry="latent"].observatory-hero-ritual::before {
  animation: hero-ritual-glow-atmosphere-latent 2.2s ease-out forwards;
}
html.theme-atmosphere .observatory-hero[data-field-entry="present"].observatory-hero-ritual::before {
  animation: hero-ritual-glow-atmosphere-present 2.2s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .observatory-hero-ritual::before {
    animation: none;
  }
  html.theme-atmosphere .observatory-hero.observatory-hero-ritual::before {
    animation: none;
  }
}

/* Pulso breve en el grado al volver con ?contributed=1 (evidencia perceptible; suma al ritual del hero). */
@keyframes degree-contributed-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  45% {
    transform: scale(1.03);
    filter: brightness(1.06);
  }
}
.observatory-hero .degree-value.degree-value--contributed-pulse {
  animation: degree-contributed-pulse 0.68s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .observatory-hero .degree-value.degree-value--contributed-pulse {
    animation: none;
    filter: brightness(1.04);
  }
}
html.theme-atmosphere .observatory-hero .degree-value.degree-value--contributed-pulse .degree-num {
  text-shadow:
    0 0 28px rgba(139, 108, 255, 0.35),
    0 0 48px rgba(92, 61, 255, 0.12);
}

/* Seed hook for future layers (disabled visually by default) */
.upper-atmosphere {
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

/* Future activation hook (not used yet) */
.upper-atmosphere.is-active {
  height: auto;
  opacity: 1;
  pointer-events: auto;
}

.topbar {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--topbar-height);
  margin-bottom: 0.75rem;
  font-family: var(--font-sans);
  /* Continuidad hacia arriba: tinte sutil que anticipa otra capa/página superior */
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--layer-horizon) 28%, var(--bg) 20%) 0%,
    color-mix(in oklab, var(--layer-horizon) 12%, transparent) 45%,
    transparent 100%
  );
  background-origin: border-box;
}

/* Hero topbar: barra fija con SlipUp™ Observatory (izq) y AI sector (der); unida al hero sin línea dura. */
.observatory-hero .topbar.topbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  z-index: 1100;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-bar-gap);
  padding: calc(env(safe-area-inset-top, 0px) + var(--site-bar-pad-y)) var(--site-bar-pad-x) var(--site-bar-pad-y);
  min-height: var(--site-legal-height);
  /* Tooltips absolutos bajo los enlaces: no recortar. */
  overflow: visible;
  /* Gradiente que termina como el inicio del hero para continuidad visual (sin costura) */
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--layer-horizon) 42%, var(--bg) 35%) 0%,
    color-mix(in oklab, var(--layer-horizon) 22%, var(--bg) 98%) 50%,
    color-mix(in oklab, var(--bg) 88%, var(--layer-air)) 100%
  );
  box-shadow: none;
}

.observatory-hero .topbar-brand {
  position: relative;
  overflow: visible;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 560;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--text) 90%, var(--muted));
  text-decoration: none;
  transition: color 0.2s ease;
}
.observatory-hero .topbar-brand:hover {
  color: var(--text);
}

/* Tooltip bajo marca / Orbital: centrado bajo el enlace para no salirse del viewport; z-index alto sobre el hero. */
.observatory-hero .topbar-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.4rem;
  padding: 0.45rem 0.75rem;
  font-family: var(--font-serif);
  font-size: 0.68rem;
  letter-spacing: 0.025em;
  line-height: 1.42;
  color: color-mix(in oklab, var(--text) 85%, var(--muted));
  background: color-mix(in oklab, var(--bg) 96%, var(--layer-horizon));
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  border-radius: 6px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(36ch, calc(100vw - 1.25rem));
  min-width: 0;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 4px 12px color-mix(in oklab, var(--text) 8%, transparent);
  z-index: 5000;
}
.observatory-hero .topbar-tooltip--orbital {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: min(36ch, calc(100vw - 1.25rem));
}
.observatory-hero .topbar-brand:hover .topbar-tooltip,
.observatory-hero .topbar-brand:focus-visible .topbar-tooltip,
.observatory-hero .topbar-ai:hover .topbar-tooltip,
.observatory-hero .topbar-ai:focus-visible .topbar-tooltip {
  opacity: 1;
  visibility: visible;
}

.observatory-hero .topbar-ai {
  position: relative;
  overflow: visible;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
  text-decoration: none;
  transition: color 0.2s ease;
}
.observatory-hero .topbar-ai:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.observatory-hero .topbar-ai:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--text) 30%, #fff);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Título principal al estilo de la identidad (imagen/logo): serif, lectura, reflejo sutil. Micro-afinación: tamaño −2%, más aire arriba, contraste −2%. */
.observatory-hero .topbar h1 {
  margin-top: 0.7rem;
  font-family: var(--font-serif);
  font-size: clamp(1.19rem, 2.15vw, 1.49rem);
  font-weight: 560;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
  text-shadow:
    0 0 20px color-mix(in oklab, var(--scope-accent, #7f8fb2) 22%, transparent),
    0 1px 0 color-mix(in oklab, #fff 75%, transparent);
  transition: text-shadow 0.25s ease;
}

.observatory-hero .topbar h1:hover {
  text-shadow:
    0 0 24px color-mix(in oklab, var(--scope-accent, #7f8fb2) 32%, transparent),
    0 1px 0 color-mix(in oklab, #fff 85%, transparent);
}

/* Línea de alcance de lectura debajo del título (modo observatorio) */
.observatory-hero .topbar .atmosphere-meta-line {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.045em;
  color: var(--muted);
  opacity: 0.78;
  text-align: center;
  line-height: 1.3;
}

/* Direction cue (not a tab, not a button) */
.upper-cue {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  font-size: 0.72rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.34;
  pointer-events: none;
  user-select: none;
}

.space-cue {
  position: absolute;
  top: 0.76rem;
  right: 1rem;
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.34;
  pointer-events: none;
  user-select: none;
  animation: spaceCueLift 2.6s ease-in-out infinite;
}

.space-cue-link {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  text-decoration: none;
}

.space-cue-link:hover {
  color: #4f627a;
  opacity: 0.56;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.space-cue-link:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--text) 30%, #ffffff);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
p {
  margin: 0;
  font-family: var(--font-sans);
}

h1 {
  font-size: clamp(1.08rem, 1.55vw, 1.32rem);
  font-weight: 560;
}

h2 {
  font-size: 0.94rem;
  font-weight: 540;
}

.panel {
  background: var(--card);
  border: none;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  padding: 1.5rem 1.35rem;
  margin-bottom: var(--section-gap);
}

.panel-observatory {
  --scope-intensity: 0.38;
  --scope-accent: #7f8fb2;
  min-height: calc(100vh - var(--topbar-height) - 0.4rem - 1.1rem - 1.1rem);
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  /* flex-start + grounding flex:1 deja espacio para empujar el bloque caption al fondo de la capa */
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--atmo-ground) + 0.25rem);
  padding-top: 0.5rem;
  padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  text-align: center;
  position: relative;
  overflow: visible;
  border-bottom-color: transparent;
  /* Panel flotando en la atmósfera: más transparencia, sombra suave de profundidad */
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--bg) 92%, var(--card)) 0%,
      color-mix(in oklab, var(--bg-deep) 85%, var(--card)) 65%,
      color-mix(in oklab, var(--layer-horizon) 70%, var(--card)) 100%
    ),
    var(--card);
  box-shadow: 0 1.2rem 2.5rem -0.5rem color-mix(in oklab, var(--layer-ground) 18%, transparent);
}

.panel-observatory > * {
  position: relative;
  z-index: 1;
}

/* Radar/scope: centrado en todo el panel, detrás del contenido (no es hijo “de flujo”) */
.panel-observatory > .telescope-scope {
  position: absolute;
  z-index: 0;
}

/* Hero: una sola columna central (mismo ancho en “aire” y “horizonte”). */
.observatory-hero .panel.panel-observatory {
  --hero-column-max: min(40ch, 100%);
}
.observatory-hero .atmosphere-grounding {
  max-width: var(--hero-column-max);
}

/* Estrato: lectura en el aire (arriba del horizonte). Una sola columna centrada. Orden fijo: identidad → Atmosphere → resto. */
.atmosphere-air {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.85rem;
  width: 100%;
  max-width: 34ch;
  padding: 0.25rem 0;
  margin-left: auto;
  margin-right: auto;
}

/* Hero: un poco más de ancho para centrar grado + columna 19ch. */
.observatory-hero .atmosphere-air {
  max-width: var(--hero-column-max);
}

/* Dual-layer hero: capa puente humana (entrada) antes del sistema simbólico. */
.hero-bridge-line {
  order: 0;
  font-family: var(--font-observatory);
  font-size: 0.95rem;
  text-align: center;
  margin: 0 0 0.25rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--muted);
}
.hero-bridge-sub {
  order: 0;
  font-family: var(--font-observatory);
  font-size: 0.85rem;
  text-align: center;
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--muted);
}
.hero-bridge-sub:first-of-type {
  font-size: 0.82rem;
}
html.theme-atmosphere .hero-bridge-line {
  color: rgba(255, 255, 255, 0.96);
  text-shadow:
    0 0 20px rgba(201, 196, 255, 0.28),
    0 0 40px rgba(92, 61, 255, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.55);
}
html.theme-atmosphere .hero-bridge-sub {
  color: rgba(248, 246, 255, 0.9);
  text-shadow:
    0 0 16px rgba(201, 196, 255, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Aparición del título puente: ebullición (difuso, amplio) → condensación (nítido, estable) */
@keyframes hero-bridge-appear-atmo {
  0% {
    opacity: 0;
    transform: scale(1.07) translateY(0.18em);
    letter-spacing: 0.24em;
    filter: blur(0.2rem);
  }
  20% {
    opacity: 0.42;
    transform: scale(1.045) translateY(-0.05em);
    letter-spacing: 0.17em;
    filter: blur(0.12rem);
  }
  38% {
    opacity: 0.72;
    transform: scale(1.03) translateY(0.05em);
    letter-spacing: 0.1em;
    filter: blur(0.06rem);
  }
  58% {
    opacity: 0.9;
    transform: scale(1.012) translateY(-0.02em);
    letter-spacing: 0.045em;
    filter: blur(0.02rem);
  }
  100% {
    opacity: 0.97;
    transform: scale(1) translateY(0);
    letter-spacing: 0.02em;
    filter: none;
  }
}

@keyframes hero-bridge-fade-in-sub-atmo {
  from { opacity: 0; }
  to { opacity: 0.84; }
}
@keyframes hero-bridge-fade-in-sub-first-atmo {
  from { opacity: 0; }
  to { opacity: 0.8; }
}

html.theme-atmosphere .observatory-hero .hero-bridge-line {
  transform-origin: center center;
  /* Ritmo más pausado: ebullición → condensación (~3.75s; antes 2.25s). */
  animation: hero-bridge-appear-atmo 3.75s cubic-bezier(0.18, 0.82, 0.25, 1) forwards;
  will-change: transform, filter, letter-spacing;
}
html.theme-atmosphere .observatory-hero .hero-bridge-sub {
  animation-name: hero-bridge-fade-in-sub-atmo;
  animation-duration: 1.35s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 0.55s;
}
html.theme-atmosphere .observatory-hero .hero-bridge-sub:first-of-type {
  animation-name: hero-bridge-fade-in-sub-first-atmo;
  animation-delay: 0.45s;
}
html.theme-atmosphere .observatory-hero .hero-bridge-sub:last-of-type {
  animation-delay: 0.95s;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-atmosphere .observatory-hero .hero-bridge-line {
    animation: none;
    opacity: 0.96;
    transform: none;
    letter-spacing: 0.02em;
    filter: none;
    will-change: auto;
  }
  html.theme-atmosphere .observatory-hero .hero-bridge-sub:first-of-type {
    animation: none;
    opacity: 0.8;
  }
  html.theme-atmosphere .observatory-hero .hero-bridge-sub:last-of-type {
    animation: none;
    opacity: 0.84;
  }
}

html.theme-atmosphere .observatory-hero .hero-bridge-line.hero-bridge-settled {
  will-change: auto;
  opacity: 0.88;
}
html.theme-atmosphere .observatory-hero .hero-bridge-sub.hero-bridge-settled {
  opacity: 0.76;
}

@keyframes hero-bridge-appear {
  0% {
    opacity: 0;
    transform: scale(1.06) translateY(0.12em);
    letter-spacing: 0.18em;
    filter: blur(0.1rem);
  }
  45% {
    opacity: 0.82;
    transform: scale(1.02) translateY(0);
    letter-spacing: 0.06em;
    filter: blur(0.03rem);
  }
  100% {
    opacity: 0.8;
    transform: scale(1) translateY(0);
    letter-spacing: 0.02em;
    filter: none;
  }
}
@keyframes hero-bridge-fade-in-sub {
  from { opacity: 0; }
  to { opacity: 0.55; }
}
@keyframes hero-bridge-fade-in-sub-first {
  from { opacity: 0; }
  to { opacity: 0.5; }
}
.hero-bridge-line {
  transform-origin: center center;
  animation: hero-bridge-appear 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, filter, letter-spacing;
}
.hero-bridge-sub {
  opacity: 0;
  animation: hero-bridge-fade-in-sub 0.35s ease-out forwards;
}
.hero-bridge-sub:first-of-type {
  animation-name: hero-bridge-fade-in-sub-first;
  animation-delay: 0.2s;
}
.hero-bridge-sub:last-of-type {
  animation-delay: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bridge-line,
  .hero-bridge-sub {
    animation: none;
    animation-delay: 0s;
  }
  .hero-bridge-line {
    opacity: 0.8;
    transform: none;
    letter-spacing: 0.02em;
    filter: none;
    will-change: auto;
  }
  .hero-bridge-sub:first-of-type { opacity: 0.5; }
  .hero-bridge-sub:last-of-type { opacity: 0.55; }
}

.hero-bridge-line.hero-bridge-settled,
.hero-bridge-sub.hero-bridge-settled {
  opacity: 0.68;
  transition: opacity 600ms ease;
}
.hero-bridge-line.hero-bridge-settled {
  will-change: auto;
}
.hero-bridge-sub.hero-bridge-settled {
  opacity: 0.52;
}

.observatory-hero .atmosphere-air .hero-identity-line { order: 1; }
.observatory-hero .atmosphere-air .observatory-seo-intro { order: 2; }
.observatory-hero .atmosphere-air .hero-reading-stack { order: 4; }
.observatory-hero .atmosphere-air .horizon-pulse-bar {
  order: 5;
  align-self: center;
}
.observatory-hero .atmosphere-air .daily-tone-line { order: 6; }
.observatory-hero .atmosphere-air .atmosphere-orientation { order: 8; }

/* Columna única: todos los elementos centrados en el mismo eje */
.atmosphere-air .hero-bridge-line,
.atmosphere-air .hero-reading-stack,
.atmosphere-air .hero-weather-panel,
.atmosphere-air .hero-identity-line,
.atmosphere-air .observatory-seo-intro {
  width: 100%;
  margin: 0.15rem 0 0.35rem;
  text-align: center;
}
.atmosphere-air .hero-bridge-line { margin-bottom: 1.35rem; }
.atmosphere-air .hero-identity-line { margin-top: 0.85rem; white-space: nowrap; }
.atmosphere-air .observatory-seo-intro {
  white-space: normal;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}
.atmosphere-air .atmosphere-orientation { margin-top: 0; margin-bottom: 0; }
.atmosphere-air .degree-wrap {
  margin-top: var(--atmo-ascend);
  margin-bottom: 0;
  padding: 0.35rem 0;
}

/* Hero: lectura observatorio — ceja separada + rejilla grado | frases (sin tarjeta “widget clima”) */
.hero-reading-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(100%, 32rem);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
  gap: 1.95rem;
  box-sizing: border-box;
}

.hero-field-eyebrow-wrap {
  width: 100%;
  margin: 0;
  padding: 0 0.25rem;
  text-align: center;
}

.hero-field-eyebrow-wrap .layer-title {
  border-top: none;
  padding-top: 0;
  margin: 0;
  letter-spacing: 0.14em;
  opacity: 0.92;
}

.observatory-hero .atmosphere-air .hero-reading-split.hero-weather-panel.degree-wrap {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0.35rem 0.5rem 0.45rem;
  max-width: min(100%, 32rem);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  /* Dos mitades iguales: el borde entre grado y frases queda en el eje vertical del bloque
     (alineado con el centro del radar / telescopio en el panel). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  justify-items: stretch;
  gap: 0.95rem 0;
  text-align: center;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

html.theme-atmosphere .observatory-hero .atmosphere-air .hero-reading-split.hero-weather-panel.degree-wrap {
  background: none;
  border: none;
  box-shadow: none;
}

.hero-reading-degree-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.2rem 0.25rem 0.35rem;
  justify-self: center;
  width: 100%;
}

.hero-reading-lines-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.32rem;
  min-width: 0;
  max-width: min(19ch, 100%);
  width: 100%;
  padding: 0.15rem 0 0.15rem 0.85rem;
  margin: 0;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  border-left: 1px solid color-mix(in oklab, var(--line) 38%, transparent);
  justify-self: start;
  box-sizing: border-box;
}

html.theme-atmosphere .hero-reading-lines-col {
  border-left-color: color-mix(in oklab, var(--line) 42%, rgba(139, 108, 255, 0.22));
}

/* Grado hero en split: grande a la izquierda, sin explosión de tamaño en narrow viewports */
.observatory-hero .hero-reading-split .degree-value {
  font-size: clamp(3.2rem, 11.5vw, 6rem);
  line-height: 0.92;
  text-align: center;
  padding-right: 0.08em;
  padding-left: 0.04em;
}

.observatory-hero .hero-reading-split .degree-value-row {
  margin: 0;
  justify-content: center;
  width: 100%;
}

/* Orden de lectura observatorio: ceja → grado | resumen + lecturas. */
.observatory-reading-panel:not(.hero-weather-panel) {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.observatory-reading-panel .degree-value-row {
  margin: 0.1rem 0;
}
.observatory-reading-panel:not(.hero-weather-panel) .climate-summary-line {
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 0.72rem;
  opacity: 0.88;
}

/* Tres líneas — columna derecha, lectura continua (observatorio, no widget) */
.observatory-hero .hero-weather-panel .climate-summary-line {
  margin: 0;
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: 0.92;
  text-align: left;
  max-width: none;
  width: 100%;
}
.observatory-hero .hero-weather-panel .climate-summary-line::before,
.observatory-hero .hero-weather-panel .climate-summary-line::after {
  content: none;
}
.observatory-hero .hero-weather-panel .atm-reading-line {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.48;
  opacity: 0.88;
  text-align: left;
  width: 100%;
}
.observatory-hero .hero-weather-panel .atmospheric-weather-line {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  opacity: 0.82;
  text-align: left;
  width: 100%;
}

/* Cuarta línea: eco del campo tras contribute — reflexión breve (no cita el texto del usuario). */
.observatory-hero .hero-weather-panel .hero-field-echo-line {
  margin: 0.2rem 0 0;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1.45;
  text-align: left;
  max-width: 21ch;
  width: 100%;
  font-style: italic;
  font-family: var(--font-serif);
  color: color-mix(in oklab, var(--muted) 92%, var(--layer-horizon));
  opacity: 0;
  transition: opacity var(--tempo-field, 650ms) ease;
}
.observatory-hero .hero-weather-panel .hero-field-echo-line::before {
  content: "\201C";
  margin-right: 0.06em;
}
.observatory-hero .hero-weather-panel .hero-field-echo-line::after {
  content: "\201D";
  margin-left: 0.06em;
}
.observatory-hero .hero-weather-panel .hero-field-echo-line.is-visible {
  opacity: 0.88;
}
.observatory-hero .hero-weather-panel .hero-field-echo-line.hidden {
  display: none;
}

/* Frase fija (no rotativa): razón para volver; lectura, sin cifras ni promesas falsas. */
.observatory-hero .hero-weather-panel .hero-return-hint {
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: left;
  width: 100%;
  font-style: normal;
  font-family: var(--font-observatory);
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--muted) 88%, var(--text));
  opacity: 0.9;
}
html.theme-atmosphere .observatory-hero .hero-weather-panel .hero-return-hint {
  color: rgba(242, 240, 255, 0.78);
}

html.theme-atmosphere .observatory-hero .hero-weather-panel .hero-field-echo-line {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 0 10px rgba(201, 196, 255, 0.12);
}

/* Muy estrecho: una columna, ceja y lectura siguen centradas en el bloque */
@media (max-width: 340px) {
  .observatory-hero .atmosphere-air .hero-reading-split.hero-weather-panel.degree-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.65rem;
  }

  .hero-reading-degree-col {
    align-items: center;
  }

  .observatory-hero .hero-reading-split .degree-value {
    text-align: center;
  }

  .observatory-hero .hero-reading-split .degree-value-row {
    justify-content: center;
  }

  .hero-reading-lines-col {
    padding-left: 0;
    border-left: none;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in oklab, var(--line) 32%, transparent);
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 19ch;
  }

  html.theme-atmosphere .hero-reading-lines-col {
    border-top-color: color-mix(in oklab, var(--line) 40%, rgba(139, 108, 255, 0.18));
  }

  .observatory-hero .hero-weather-panel .climate-summary-line,
  .observatory-hero .hero-weather-panel .atm-reading-line,
  .observatory-hero .hero-weather-panel .atmospheric-weather-line {
    text-align: center;
  }
}

/* #conditionLine: lectura de estado (quiet | balance | gathering | dense). Ubicado dentro de .degree-wrap para formar un solo bloque "lectura" (valor + escala + frase). */
.atmosphere-air .condition-line {
  margin-top: 0.35rem;
  margin-bottom: 0;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.035em;
  color: color-mix(in oklab, var(--muted) 85%, var(--layer-horizon));
  text-shadow: 0 0 1px color-mix(in oklab, var(--bg) 60%, transparent);
  min-height: 1.72em;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.condition-line {
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 500;
  font-family: var(--font-serif);
  line-height: 1.72;
  min-height: 1.72em;
}

.atmosphere-air .climate-instrument {
  margin-top: var(--atmo-descend);
  margin-bottom: 0;
}

.observatory-hero > .climate-instrument {
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}

/* En el hero, la línea de métricas no se muestra: solo lectura atmosférica, no panel. Los datos van al "i". */
.observatory-hero > .climate-instrument .climate-metrics-row {
  display: none;
}
.atmosphere-air .climate-instrument-scope { margin-bottom: 0.35rem; }

/* Estrato: hacia el horizonte (resumen, CTA, confianza). Misma columna centrada que atmosphere-air. */
.atmosphere-grounding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-top: 1.35rem;
  /* Ocupa el hueco vertical bajo atmosphere-air para poder anclar el caption abajo */
  flex: 1 1 auto;
  min-height: 0;
}

/* CTA + puente (vive en .hero-observatory-upper; el gap del panel separa de Orbital). */
.hero-grounding-cta-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(40ch, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  gap: 0.55rem;
}
.observatory-hero .hero-grounding-cta-cluster {
  max-width: var(--hero-column-max, min(40ch, 100%));
}
html.theme-atmosphere .observatory-hero .hero-grounding-cta-cluster {
  gap: 0.62rem;
}

/* Horizonte + hints + pulso: columna estable; el CTA va después y no se mueve al togglear mensajes. */
.hero-grounding-cta-ledger {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.22rem;
  flex-shrink: 0;
}
.observatory-hero .hero-grounding-cta-ledger {
  /* Pulso del horizonte va en .atmosphere-air; aquí solo hints / pulso observatorio. */
  min-height: 4.75rem;
}
html.theme-atmosphere .observatory-hero .hero-grounding-cta-ledger {
  gap: 0.28rem;
  min-height: 5.25rem;
}

/* Línea sutil de transición aire → horizonte (casi imperceptible, solo atmósfera) */
.atmosphere-grounding::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(50%, 120px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--line) 75%, transparent),
    transparent
  );
  opacity: 0.5;
}

/* Nodo de señal: concentración suave en el centro del horizonte (solo tema observatorio). Royal Violet, sin nuevo color. */
html.theme-atmosphere .atmosphere-grounding::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(1.35rem + 3px);
  width: 420px;
  height: 140px;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(92, 61, 255, 0.18) 0%,
    rgba(92, 61, 255, 0.09) 25%,
    rgba(92, 61, 255, 0.04) 45%,
    transparent 70%
  );
  z-index: 0;
  animation: signal-node-breathe 10s ease-in-out infinite;
  transition: opacity 1500ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
/* Nodo participa de la deriva: opacidad sutil por estado (condensation → signal). */
html.theme-atmosphere[data-atmosphere-state="avoidable"] .atmosphere-grounding::after {
  opacity: 0.92;
}
html.theme-atmosphere[data-atmosphere-state="fertile"] .atmosphere-grounding::after {
  opacity: 1;
}
html.theme-atmosphere[data-atmosphere-state="observed"] .atmosphere-grounding::after {
  opacity: 0.96;
}
@keyframes signal-node-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.03); }
}
@media (min-width: 1600px) {
  html.theme-atmosphere .atmosphere-grounding::after {
    width: 520px;
    height: 160px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-atmosphere .atmosphere-grounding::after {
    animation: none;
  }
}

/* Misma columna centrada en grounding (textos a ancho completo para alinear eje) */
.atmosphere-grounding .atm-reading-line,
.atmosphere-grounding .climate-summary-line,
.atmosphere-grounding .cta-bridge-copy-stack,
.atmosphere-grounding .trust-microcopy-wrap,
.hero-observatory-upper .cta-bridge-copy-stack {
  width: 100%;
  max-width: min(40ch, 100%);
  box-sizing: border-box;
}
.observatory-hero .atmosphere-grounding .atm-reading-line,
.observatory-hero .atmosphere-grounding .climate-summary-line,
.observatory-hero .atmosphere-grounding .cta-bridge-copy-stack,
.observatory-hero .atmosphere-grounding .trust-microcopy-wrap,
.observatory-hero .hero-observatory-upper .cta-bridge-copy-stack {
  max-width: var(--hero-column-max);
}

/* Microcopy + línea puente: un bloque compacto (pegados) */
.cta-bridge-copy-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  margin: 0;
  position: relative;
  z-index: 1;
}

.cta-bridge-copy-stack .cta-microcopy {
  margin-top: 0;
  margin-bottom: 0;
}

.cta-bridge-copy-stack .hero-bridge-sub--grounding {
  margin: 0;
}

/* Puente secundario bajo CTA (invitación a escribir) */
.observatory-hero .atmosphere-grounding .hero-bridge-sub--grounding,
.observatory-hero .hero-observatory-upper .hero-bridge-sub--grounding {
  order: 0;
  animation-name: hero-bridge-fade-in-sub;
  animation-delay: 0.55s;
}
html.theme-atmosphere .observatory-hero .atmosphere-grounding .hero-bridge-sub--grounding,
html.theme-atmosphere .observatory-hero .hero-observatory-upper .hero-bridge-sub--grounding {
  animation-name: hero-bridge-fade-in-sub-atmo;
  animation-delay: 0.55s;
}
@media (prefers-reduced-motion: reduce) {
  .observatory-hero .atmosphere-grounding .hero-bridge-sub--grounding,
  .observatory-hero .hero-observatory-upper .hero-bridge-sub--grounding {
    animation: none;
    animation-delay: 0s;
    opacity: 0.55;
  }
  html.theme-atmosphere .observatory-hero .atmosphere-grounding .hero-bridge-sub--grounding,
  html.theme-atmosphere .observatory-hero .hero-observatory-upper .hero-bridge-sub--grounding {
    animation: none;
    opacity: 0.84;
  }
}
.atmosphere-grounding .climate-summary-line { margin-top: 0; }
.atmosphere-grounding .cta-observatory,
.hero-observatory-upper .cta-observatory { margin-top: 0; }

/* Señal atmosférica: horizonte en doble capa (difuso + pulso reactivo). Centrado como el radar. */
.horizon-pulse-bar {
  --horizon-base: rgba(92, 61, 255, 0.06);
  --horizon-mid: rgba(92, 61, 255, 0.12);
  --horizon-strong: rgba(92, 61, 255, 0.28);
  --pulse-duration: 1000ms;
  position: relative;
  width: min(70%, 200px);
  height: 6px;
  margin: 0 auto 0.9rem;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--line) 50%, transparent), transparent);
  border-radius: 6px;
  overflow: visible;
  transition: box-shadow var(--pulse-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.observatory-hero .atmosphere-grounding .horizon-pulse-bar,
.observatory-hero .atmosphere-air .horizon-pulse-bar,
.observatory-hero .hero-observatory-upper .horizon-pulse-bar {
  align-self: center;
  flex-shrink: 0;
}
.horizon-pulse-bar::before {
  content: "";
  position: absolute;
  left: -40%;
  right: -40%;
  top: -20px;
  height: 56px;
  background: radial-gradient(ellipse 80% 50% at 50% 20%, var(--horizon-base) 0%, transparent 60%);
  filter: blur(18px);
  opacity: 1;
  pointer-events: none;
  transform: translateZ(0);
}
.horizon-pulse-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 22px;
  background: linear-gradient(90deg, rgba(92, 61, 255, 0) 0%, var(--horizon-mid) 50%, rgba(92, 61, 255, 0) 100%);
  filter: blur(5px);
  opacity: 0.08;
  transition: opacity var(--pulse-duration) cubic-bezier(0.2, 0.8, 0.2, 1), transform var(--pulse-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(0);
  pointer-events: none;
}
.horizon-pulse-bar.is-active::after {
  opacity: 0.32;
  transform: translateY(-3px) scaleX(1.02);
  filter: blur(8px);
}
html.theme-atmosphere .horizon-pulse-bar {
  background: linear-gradient(90deg, transparent, var(--signal-glow), transparent);
  transition: background 1500ms cubic-bezier(0.22, 1, 0.36, 1) 600ms;
}
html.theme-atmosphere .horizon-pulse-bar::before {
  background: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(92, 61, 255, 0.06) 0%, transparent 60%);
}
@media (max-width: 480px) {
  .horizon-pulse-bar::before {
    filter: blur(10px);
    height: 44px;
    opacity: 0.6;
  }
  .horizon-pulse-bar::after {
    filter: blur(4px);
    opacity: 0.05;
  }
  .horizon-pulse-bar.is-active::after {
    filter: blur(6px);
    opacity: 0.2;
  }
  /* Nodo de señal: escala en móvil para no desbordar y mantener centro gravitacional */
  html.theme-atmosphere .atmosphere-grounding::after {
    width: min(420px, 92vw);
    height: clamp(100px, 18vw, 120px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .horizon-pulse-bar { transition: none; }
  .horizon-pulse-bar::after { transition: none; }
}

.hero-scroll-hint {
  margin: 0.1rem 0 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
  user-select: none;
}

.hero-scroll-hint.hero-scroll-hint--visible {
  opacity: 0.7;
  transform: translateY(0);
}

.hero-scroll-hint.hero-scroll-hint--hidden {
  opacity: 0;
  transform: translateY(4px);
}

.atm-reading-line {
  font-size: var(--text-label);
  font-family: var(--font-reading);
  letter-spacing: var(--tracking-label);
  color: var(--muted);
  opacity: 0.88;
  margin: 0 0 0.4rem;
  min-height: 1.2em;
  transition: opacity 220ms ease;
}

.atmospheric-weather-line {
  font-size: var(--text-label);
  font-family: var(--font-reading);
  letter-spacing: var(--tracking-label);
  color: var(--muted);
  opacity: 0.85;
  margin: 0 0 0.2rem;
  min-height: 1.2em;
}
.atmospheric-weather-caption {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted);
  opacity: 0.65;
  margin: 0 0 0.35rem;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}
.atmosphere-grounding .atmospheric-weather-caption {
  margin-top: 0.4rem;
}

.atmospheric-weather-caption-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  margin-top: 0.35rem;
  width: 100%;
  max-width: min(40ch, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Ancla el bloque trust + aclaración + i al fondo de la capa grounding; misma columna que el aire */
.observatory-hero .atmosphere-grounding .atmospheric-weather-caption-wrap {
  max-width: var(--hero-column-max);
  margin-top: auto;
  margin-bottom: 0;
  padding-bottom: 0.15rem;
}
.atmospheric-weather-caption-wrap .trust-microcopy {
  margin: 0;
  text-align: center;
  white-space: nowrap;
}
/* Hero: misma columna; en viewport estrecho el texto puede partir sin desbordar */
.observatory-hero .atmospheric-weather-caption-wrap .trust-microcopy {
  white-space: normal;
  max-width: 100%;
}
.atmospheric-weather-caption-wrap .atmospheric-weather-caption {
  margin: 0;
  text-align: center;
  max-width: 28ch;
  color: color-mix(in oklab, var(--text) 92%, var(--soft));
  opacity: 0.92;
  text-shadow:
    0 0 10px rgba(201, 196, 255, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.4);
}
.atmospheric-weather-caption-wrap .instrument-info-btn {
  flex-shrink: 0;
  align-self: center;
}
.atm-reading-line.atm-reading-updating {
  opacity: 0;
}
html.theme-atmosphere .atm-reading-line {
  color: #E6E6F0;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.atm-signals {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 22%;
  pointer-events: none;
  z-index: 0;
}
.atm-point {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--royal, #5C3DFF);
  opacity: 0;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .horizon-pulse-bar { transition: none; }
  .atm-point { animation: none; }
  html.theme-atmosphere body::before { transition: opacity 0.15s ease; }
  html.theme-atmosphere .horizon-pulse-bar { transition: none; }
  html.theme-atmosphere .atmosphere-grounding::after { transition: opacity 0.15s ease; animation: none; }
  html.theme-atmosphere .cta-observatory { transition: none; }
  html.theme-atmosphere .observatory-hero[data-field-entry="present"] .panel.panel-observatory {
    transform: none;
    filter: brightness(1.015);
  }
  .atm-reading-line { transition: none; }
}

.panel-observatory[data-scope-tone="quiet"] {
  --scope-intensity: 0.26;
  --scope-accent: #8a9ab5;
}

.panel-observatory[data-scope-tone="steady"] {
  --scope-intensity: 0.34;
  --scope-accent: #7b8eb0;
}

.panel-observatory[data-scope-tone="active"] {
  --scope-intensity: 0.45;
  --scope-accent: #7388b2;
}

.panel-observatory[data-scope-tone="dense"] {
  --scope-intensity: 0.58;
  --scope-accent: #6f83af;
}

.panel-observatory::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -48px;
  height: 88px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--bg-deep) 82%, var(--layer-horizon)) 0%, transparent 72%),
    linear-gradient(180deg, color-mix(in oklab, var(--layer-horizon) 65%, transparent) 0%, transparent 100%);
  opacity: 0.85;
  filter: blur(0.3px);
}

.telescope-scope {
  position: absolute;
  width: min(74vw, 360px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: calc(var(--scope-intensity) + 0.06);
}

.scope-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--scope-accent) 34%, transparent);
}

.scope-ring-inner {
  inset: 12%;
  border-color: color-mix(in oklab, var(--scope-accent) 24%, transparent);
}

.scope-axis {
  position: absolute;
  background: color-mix(in oklab, var(--scope-accent) 24%, transparent);
}

.scope-axis-horizontal {
  left: 7%;
  right: 7%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.scope-axis-vertical {
  top: 7%;
  bottom: 7%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.scope-sweep {
  position: absolute;
  inset: 5%;
  border-radius: 999px;
  background: linear-gradient(112deg, #ffffff00 40%, color-mix(in oklab, var(--scope-accent) 16%, transparent) 50%, #ffffff00 60%);
  filter: blur(0.2px);
  animation: scopeSweep 7.2s linear infinite;
}

.scope-target {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--scope-accent) 45%, #ffffff);
  transform: translate(-50%, -50%) scale(0.86);
  opacity: 0.45;
  transition: opacity 260ms ease, transform 260ms ease;
}

.panel-observatory.is-target-lock .scope-target {
  opacity: 0.72;
  transform: translate(-50%, -50%) scale(1);
  animation: scopeTargetPulse 1800ms ease-in-out infinite;
}

.observatory-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.eyebrow-layer {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* Hero: "Atmosphere" usa .layer-title; un poco menos padding para no separar en exceso */
.observatory-hero .layer-title {
  padding-top: 0.85rem;
}

.eyebrow-context {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin: 0;
}

.atmosphere-meta-line {
  margin: 0.25rem 0 0;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.82;
  text-align: center;
  line-height: 1.35;
}

.eyebrow {
  color: var(--muted);
  letter-spacing: 0.04em;
  font-weight: 500;
  font-size: 0.84rem;
}

/* Definición del instrumento: qué es esto (canal → identidad → medición). No compite con el número. */
/* Misma familia y peso que títulos de canal; frase en sentence case */
.hero-identity-line {
  color: #6b7d8f;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.35;
  opacity: 0.85;
  margin: 0.12rem 0 1rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}
.observatory-hero .hero-identity-line {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.observatory-seo-intro {
  color: #6b7d8f;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  opacity: 0.75;
  margin-top: 0;
  margin-bottom: 0.6rem;
}
/* Móvil: hero más grande, título principal destacado y separado; sin solapamientos */
@media (max-width: 520px) {
  .observatory-hero .hero-identity-line {
    margin-top: 0;
    font-size: 1rem;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
  }
  .observatory-hero .atmosphere-air .hero-field-eyebrow-wrap {
    margin-top: 0;
    margin-bottom: 0;
  }
  .observatory-hero .atmosphere-air {
    gap: 1rem;
    padding-top: 0.75rem;
  }
  .observatory-hero .layer-title {
    font-size: clamp(0.9rem, 4.1vw, 1.08rem);
    font-weight: 600;
    letter-spacing: 0.1em;
  }
  .observatory-hero .hero-weather-panel .atm-reading-line {
    font-size: 0.8rem;
    opacity: 0.88;
  }
  .observatory-hero .hero-weather-panel .climate-summary-line {
    font-size: 0.86rem;
    opacity: 0.93;
  }
}

.atmosphere-orientation {
  margin-top: -0.42rem;
  font-size: 0.72rem;
  color: #6d7d94;
  opacity: 0.72;
  letter-spacing: 0.01em;
  line-height: 1.55;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.atmosphere-orientation:empty {
  display: none;
}

.atmosphere-value-prop {
  margin: 0.15rem auto 0.5rem;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--muted);
  opacity: 0.78;
  max-width: 32ch;
  letter-spacing: 0.02em;
  text-align: center;
}

@media (max-width: 480px) {
  .atmosphere-value-prop {
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 100%;
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
  }

  .observatory-hero {
    padding: calc(env(safe-area-inset-top, 0px) + 4rem) 0 var(--page-pad-top);
  }

  /* Columna hero: no forzar 100% — mantener --hero-column-max (lectura alineada) */
  .observatory-hero .hero-observatory-upper,
  .observatory-hero .atmosphere-air,
  .observatory-hero .atmosphere-grounding {
    max-width: var(--hero-column-max, min(40ch, 100%));
  }

  .climate-instrument {
    padding: 0.65rem 3rem 0.75rem 0.75rem;
  }

  .climate-instrument-scope {
    font-size: 0.75rem;
  }

  .observatory-scope-range {
    font-size: 0.75rem;
  }

  .climate-metrics-line {
    font-size: 0.78rem;
  }

  .local-climate-metrics-line,
  .strata-metrics-line {
    font-size: 0.78rem;
  }

  .degree-scale-label {
    font-size: 0.72rem;
  }

  .condition-line {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .atmosphere-air .condition-line {
    max-width: 30ch;
  }

  .hero-identity-line {
    font-size: 0.75rem;
  }

  .observatory-hero .hero-weather-panel .climate-summary-line {
    font-size: 0.84rem;
  }

  .local-climate-intro {
    font-size: 0.8rem;
  }
}

/* Vista narrow: la página se muestra como strip (menos datos, más compacta, misma identidad observatorio) */
@media (max-width: 420px) {
  .page {
    width: 96vw;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    --section-gap: 1.5rem;
  }

  .observatory-hero {
    padding: calc(env(safe-area-inset-top, 0px) + 4rem) 0 var(--page-pad-top);
  }

  .panel-observatory .telescope-scope {
    opacity: 0.14;
  }

  .atmosphere-value-prop {
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
    opacity: 0.8;
  }

  .observatory-entry .eyebrow-context {
    font-size: 0.8rem;
  }
  .observatory-hero .layer-title {
    font-size: clamp(0.88rem, 4vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.1em;
  }
  .observatory-hero .hero-identity-line {
    font-size: 0.98rem;
    margin-bottom: 1rem;
  }
  .observatory-hero .hero-weather-panel .atm-reading-line {
    font-size: 0.78rem;
  }
  .observatory-hero .hero-weather-panel .climate-summary-line {
    font-size: 0.8rem;
  }

  .atmosphere-meta-line {
    font-size: 0.75rem;
    margin-top: 0.2rem;
  }

  .atmosphere-air {
    gap: 1rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .atmosphere-air .hero-reading-stack {
    gap: 1.15rem;
    margin-top: 0.2rem;
  }

  .atmosphere-air .hero-reading-split.hero-weather-panel.degree-wrap {
    padding: 0.05rem 0 0.2rem;
    /* Sin gap horizontal: el eje grado|frases sigue al 50 % del bloque (alineado al radar). */
    gap: 0.7rem 0;
  }

  .degree-value {
    font-size: clamp(11rem, 68vw, 16rem);
  }

  /* El hero en rejilla no usa el grado pantalla-completa del strip */
  .observatory-hero .hero-reading-split .degree-value {
    font-size: clamp(2.65rem, 15vw, 3.85rem);
  }

  .atmosphere-air .condition-line {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.4;
    max-width: 28ch;
  }

  /* Instrumento en una línea, compacto (strip) */
  .atmosphere-air .climate-instrument,
  .observatory-hero > .climate-instrument {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.45rem 0.6rem 0.5rem;
    min-height: 0;
  }

  /* En móvil: espacio extra bajo el instrumento para que el botón "i" (position top negativo) no solape el grado */
  .observatory-hero > .climate-instrument {
    margin-bottom: 0.85rem;
  }

  .atmosphere-air .climate-instrument .climate-metrics-row,
  .observatory-hero > .climate-instrument .climate-metrics-row {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .atmosphere-air .climate-instrument .climate-metrics-line,
  .observatory-hero > .climate-instrument .climate-metrics-line {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  /* Botón "i" del instrumento visible en móvil; el texto se muestra al pulsar (sin display:none aquí para que el toggle funcione) */

  .atmosphere-grounding {
    padding-top: 0.5rem;
    gap: 0.5rem;
  }
  html.theme-atmosphere .atmosphere-grounding::after {
    top: calc(0.5rem + 3px);
    animation-duration: 12s;
  }
  html.theme-atmosphere .observatory-hero .atmosphere-grounding {
    --hero-place-to-orbital-pad: 0.3rem;
    padding-top: var(--hero-place-to-orbital-pad);
    gap: var(--hero-grounding-step);
  }
  html.theme-atmosphere .observatory-hero .atmosphere-grounding::after {
    top: calc(var(--hero-place-to-orbital-pad) + 3px);
  }

  .atmosphere-grounding .cta-observatory,
  .hero-observatory-upper .cta-observatory {
    margin-top: 0;
    padding: 0.4rem 0.75rem;
    font-size: 0.88rem;
  }

  .atmosphere-grounding .cta-microcopy,
  .atmosphere-grounding .trust-microcopy,
  .hero-observatory-upper .cta-microcopy,
  .hero-observatory-upper .trust-microcopy {
    font-size: 0.74rem;
  }

  /* Strata: bloque de lectura sin desborde en narrow; misma identidad */
  .ground-strata .strata-lines {
    max-width: 100%;
    padding-left: 1rem;
  }
  .ground-strata .strata-line {
    font-size: var(--text-small);
  }
  .ground-strata .strata-line + .strata-line {
    margin-top: 0.2rem;
    padding-top: 0.5rem;
  }

  .panel-recent,
  .panel-horizon,
  .local-climate,
  .ground-strata {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

.warmup-hint {
  margin-top: 0.28rem;
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.85;
  line-height: 1.5;
}

.degree-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.degree-value-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
}

.degree-scale-label {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.6;
  margin-left: 0.5rem;
  font-weight: 500;
  font-family: var(--font-serif);
}

/* En el hero no se muestra la escala: el número respira solo; la métrica va al panel "i". */
.observatory-hero .degree-scale-label {
  display: none;
}

.degree-label {
  color: var(--muted);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  font-family: var(--font-sans);
}

.degree-value {
  font-size: clamp(4.25rem, 11.7vw, 6.45rem);
  font-weight: 300;
  font-family: var(--font-reading);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  position: relative;
  display: inline-block;
  min-width: 1.75ch;
  min-height: 1em;
  text-align: center;
  padding-right: 0.22em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-shadow: 0 1px 0 #ffffff9a;
  transition: opacity 220ms ease;
}

/* Hero: número como lectura del cielo, integrado con la atmósfera (no blanco puro). Presencia sutil ligada al campo (--degree-presence 0.94→1). */
.observatory-hero .degree-value {
  color: #4a5c6e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: var(--degree-presence, 1);
}

.degree-value.is-pending {
  opacity: 0;
}

/* Inercia del instrumento: micro-desplazamiento al cambiar el número (solo con JS) */
.observatory-hero .degree-value {
  transition: transform 0.2s ease-out;
}

.observatory-hero .degree-value.degree-settle-in {
  transform: translateY(-5px);
}

.hero-instrument-line {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.degree-value::after {
  content: "";
  position: absolute;
  right: -0.01em;
  top: 0.06em;
  font-size: 0.32em;
  line-height: 1;
  color: #5b6d84;
  opacity: 0.84;
}

.condition-line {
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 500;
  font-family: var(--font-serif);
  line-height: 1.72;
  min-height: 1.72em;
}

.climate-instrument {
  margin-top: 0.75rem;
  padding: 0.5rem 2.25rem 0.5rem 0;
  position: relative;
  overflow: visible;
  min-height: 0;
}

.climate-instrument::before {
  display: none;
}

.climate-instrument.hidden {
  visibility: hidden;
  pointer-events: none;
  /* Mantiene el espacio para evitar layout shift al mostrar datos */
}

.climate-instrument-scope {
  margin: 0 0 0.4rem 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.85;
  font-weight: 600;
  font-family: var(--font-sans);
  position: relative;
}

.observatory-scope-range {
  margin: 0 0 0.35rem 0;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.75;
}

.observatory-scope-range.hidden {
  display: none;
}

.climate-metrics-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  flex-wrap: wrap;
}

.climate-metrics-row .climate-metrics-line {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* Botón info: solo en atmosphere-grounding, junto a trust-microcopy (no sobre el instrumento) */
.instrument-info-btn {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--muted) 50%, transparent);
  background: color-mix(in oklab, var(--bg) 92%, var(--line));
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
  box-sizing: border-box;
  touch-action: manipulation;
}

.instrument-info-btn:hover {
  opacity: 1;
  border-color: color-mix(in oklab, var(--muted) 85%, transparent);
}

.instrument-info-btn:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--text) 35%, transparent);
  outline-offset: 2px;
}

/* Sector trust-microcopy + botón "i": columna única para alinear con cta-microcopy */
.trust-microcopy-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  width: 100%;
  max-width: 34ch;
}
.trust-microcopy-wrap .trust-microcopy {
  margin: 0;
  text-align: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.atmosphere-grounding .trust-microcopy-wrap .instrument-info-btn {
  margin: 0;
  flex-shrink: 0;
  align-self: center;
}
.atmosphere-grounding .instrument-info-btn {
  margin: 0;
  flex-shrink: 0;
}

/* Tooltip/popover del botón "i": flotante, no desplaza el layout */
.instrument-info-popover {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.4rem;
  min-width: 16rem;
  max-width: 22rem;
  padding: 0.5rem 0.6rem;
  background: color-mix(in oklab, var(--bg) 94%, var(--layer-horizon));
  border: 1px solid color-mix(in oklab, var(--line) 50%, transparent);
  border-radius: 6px;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--text) 6%, transparent);
  z-index: 10;
}
.instrument-info-popover.is-open {
  display: block;
}
.instrument-info-popover .instrument-info-text,
.instrument-info-popover .instrument-info-technical {
  margin: 0;
}
.instrument-info-popover .instrument-info-technical {
  margin-top: 0.2rem;
}

@media (max-width: 480px) {
  .instrument-info-btn {
    width: 0.9rem;
    height: 0.9rem;
    min-width: 0.9rem;
    min-height: 0.9rem;
    font-size: 0.5rem;
    padding: 0;
  }
}

.instrument-info-text {
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--muted);
  opacity: 0.88;
}

.instrument-info-technical {
  font-size: 0.6rem;
  line-height: 1.35;
  color: var(--muted);
  opacity: 0.78;
}

.instrument-info-text.hidden,
.instrument-info-technical.hidden {
  display: none;
}

.climate-metrics-line {
  /* Compartido por capas: Atmosphere (instrumento), Nearby (.local-climate-metrics-line), Strata (.strata-metrics-line). Cada capa respeta su panel con estilos específicos. */
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted);
  opacity: 0.92;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  position: relative;
  overflow-wrap: break-word;
  word-break: break-word;
}

.climate-metrics-line .metric {
  white-space: nowrap;
}

.climate-metrics-line .metric-label {
  font-variant-numeric: normal;
  opacity: 0.88;
}

.climate-metrics-line .metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: color-mix(in oklab, var(--text) 35%, var(--muted));
}

.climate-metrics-line .metric-sep {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  margin: 0 0.2em;
}

.climate-metrics-line.hidden {
  display: none;
}

.climate-summary-line {
  margin-top: 0;
  margin-bottom: 0.85rem;
  font-size: var(--text-body);
  font-family: var(--font-reading);
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--muted);
  opacity: 0.9;
  font-style: italic;
}

.observatory-hero .contribute-invite-line {
  font-size: 0.72rem;
  opacity: 0.85;
  margin-top: 0.7rem;
}

.climate-summary-line::before {
  content: "\201C";
  margin-right: 0.08em;
}

.climate-summary-line::after {
  content: "\201D";
  margin-left: 0.08em;
}

.climate-summary-line.hidden {
  display: none;
}

.contribute-invite-line {
  margin-top: 0.85rem;
  margin-bottom: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
  opacity: 0.88;
  letter-spacing: 0.02em;
  font-family: var(--font-serif);
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  white-space: pre-line;
}

.reading-confidence-line {
  margin-top: -0.25rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: #5f7290;
  opacity: 0.78;
  letter-spacing: 0.01em;
}

.transient-reading-line {
  margin-top: 0.05rem;
  font-size: 0.8rem;
  color: #4f647c;
  opacity: 0;
  line-height: 1.4;
  transition: opacity 550ms ease;
}

.transient-reading-line.is-visible {
  opacity: 0.82;
}

/* Ritmo diario: una línea por franja (mañana / tarde / noche). */
.daily-tone-line {
  font-family: var(--font-observatory);
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.82;
  margin: 0.15rem 0 0.35rem;
  text-align: center;
  line-height: 1.35;
}
.daily-tone-line.hidden {
  display: none;
}
html.theme-atmosphere .daily-tone-line {
  color: rgba(255, 255, 255, 0.75);
}

/* Observatory pulse: señal breve cuando algo cambió en el campo. */
.observatory-pulse {
  margin-top: 0.5rem;
  font-family: var(--font-observatory);
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0;
  line-height: 1.4;
  transition: opacity 500ms ease;
}
.observatory-pulse.is-visible {
  opacity: 0.88;
}
.observatory-pulse.hidden {
  display: none;
}
.observatory-pulse-label {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.observatory-pulse-label::after {
  content: " ";
}
html.theme-atmosphere .observatory-pulse {
  color: rgba(255, 255, 255, 0.71);
  font-size: 0.68rem;
  text-shadow:
    0 0 6px rgba(201, 196, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.28);
}
html.theme-atmosphere .observatory-pulse.is-visible {
  opacity: 0.56;
}
html.theme-atmosphere .observatory-pulse-label {
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Patrón (type|mood) arriba del grado; el valor numérico va debajo */
/* Estado del campo (type·mood): peso secundario para no competir con la medición */
.degree-wrap .degree-pattern-line {
  margin-top: 0;
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--muted) 92%, var(--layer-horizon));
  opacity: 0.78;
  font-style: italic;
  font-family: var(--font-serif);
}

/* Unidad de grado: más pequeña y elevada para leer como medición */
.degree-value .degree-unit {
  font-size: 0.45em;
  position: relative;
  top: -0.4em;
  margin-left: -0.04em;
  font-weight: 400;
}

/* Jerarquía: el grado como centro visual del bloque */
.observatory-hero .degree-value-row {
  margin: 0.35rem 0 0.85rem;
}
.observatory-hero .hero-weather-panel .degree-value-row {
  margin: 0.05rem 0 0.2rem;
}
/* Debajo del eyebrow ATMOSPHERE; poco margen arriba, aire antes de la identidad */
.observatory-hero .hero-instrument-line {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.atmosphere-air .atm-reading-line {
  margin: 0.12rem 0 0.05rem;
  text-align: center;
}

/* Hero (tema atmósfera): contraste luminoso en textos — legibles sin perder misterio */
html.theme-atmosphere .observatory-hero .topbar-brand {
  color: color-mix(in oklab, var(--text) 97%, #ffffff);
  text-shadow:
    0 0 20px rgba(139, 108, 255, 0.16),
    0 1px 3px rgba(0, 0, 0, 0.5);
}
html.theme-atmosphere .observatory-hero .topbar-tooltip {
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
  background: color-mix(in oklab, var(--bg) 88%, var(--layer-horizon));
  border-color: color-mix(in oklab, var(--line) 55%, rgba(139, 108, 255, 0.12));
  box-shadow:
    0 4px 16px color-mix(in oklab, var(--text) 12%, transparent),
    0 0 24px rgba(92, 61, 255, 0.06);
}
/* Orbital: estilo “borde” en ~1026; no duplicar aquí para no recuperar brillo. */
html.theme-atmosphere .observatory-hero .eyebrow-layer.layer-title {
  color: color-mix(in oklab, var(--soft) 82%, #ffffff);
  text-shadow:
    0 0 16px rgba(201, 196, 255, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.48);
}
html.theme-atmosphere .observatory-hero .degree-value {
  color: color-mix(in oklab, #f4f2ff 88%, var(--soft));
  opacity: 0.95;
  text-shadow:
    0 0 32px rgba(139, 108, 255, 0.22),
    0 0 64px rgba(92, 61, 255, 0.09),
    0 2px 4px rgba(0, 0, 0, 0.42);
}
html.theme-atmosphere .observatory-hero .hero-weather-panel .climate-summary-line {
  color: color-mix(in oklab, var(--text) 96%, #ffffff);
  opacity: 0.96;
  text-shadow:
    0 0 16px rgba(201, 196, 255, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.45);
}
html.theme-atmosphere .observatory-hero .hero-weather-panel .atm-reading-line,
html.theme-atmosphere .observatory-hero .hero-weather-panel .atmospheric-weather-line {
  color: #f2efff;
  opacity: 0.94;
  text-shadow:
    0 0 12px rgba(139, 108, 255, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.42);
}
html.theme-atmosphere .observatory-hero .hero-scroll-hint.hero-scroll-hint--visible {
  color: color-mix(in oklab, var(--muted) 82%, var(--soft));
  opacity: 0.32;
  font-size: 0.63rem;
  letter-spacing: 0.11em;
  font-weight: 400;
  text-shadow: 0 0 14px rgba(92, 61, 255, 0.04);
  margin-top: 0;
  margin-bottom: 0.1rem;
  /* Un poco más arriba: lee como velo del campo / radar, no como paso previo al CTA. */
  transform: translateY(-3px);
}
html.theme-atmosphere .observatory-hero .warmup-hint {
  color: #ebe7ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
html.theme-atmosphere .observatory-hero .transient-reading-line.is-visible {
  color: #f4f1ff;
  text-shadow:
    0 0 12px rgba(139, 108, 255, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.42);
}
html.theme-atmosphere .observatory-hero .atmosphere-grounding .cta-microcopy,
html.theme-atmosphere .observatory-hero .atmosphere-grounding .trust-microcopy,
html.theme-atmosphere .observatory-hero .hero-observatory-upper .cta-microcopy,
html.theme-atmosphere .observatory-hero .hero-observatory-upper .trust-microcopy {
  color: #eae6fc;
  opacity: 0.58;
  font-size: 0.72rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
html.theme-atmosphere .observatory-hero .atmosphere-grounding .hero-bridge-sub--grounding,
html.theme-atmosphere .observatory-hero .hero-observatory-upper .hero-bridge-sub--grounding {
  color: rgba(248, 246, 255, 0.78);
  opacity: 0.62;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* Móvil: un pelo más de lectura en la franja medio-baja (sin volver a la densidad de escritorio). */
@media (max-width: 480px) {
  html.theme-atmosphere .observatory-hero .hero-scroll-hint.hero-scroll-hint--visible {
    opacity: 0.44;
    font-size: 0.64rem;
  }

  html.theme-atmosphere .observatory-pulse.is-visible {
    opacity: 0.65;
  }

  html.theme-atmosphere .observatory-hero .atmosphere-grounding .hero-bridge-sub--grounding,
  html.theme-atmosphere .observatory-hero .hero-observatory-upper .hero-bridge-sub--grounding {
    opacity: 0.68;
  }

  html.theme-atmosphere .observatory-hero .atmosphere-grounding .cta-microcopy,
  html.theme-atmosphere .observatory-hero .atmosphere-grounding .trust-microcopy,
  html.theme-atmosphere .observatory-hero .hero-observatory-upper .cta-microcopy,
  html.theme-atmosphere .observatory-hero .hero-observatory-upper .trust-microcopy {
    opacity: 0.7;
  }

  html.theme-atmosphere .observatory-hero .atmospheric-weather-caption-wrap .atmospheric-weather-caption {
    opacity: 0.46;
  }

  html.theme-atmosphere .observatory-hero .atmospheric-weather-caption-wrap .instrument-info-btn {
    opacity: 0.42;
  }
}
html.theme-atmosphere .observatory-hero .cta-observatory {
  color: color-mix(in oklab, var(--text) 92%, var(--soft));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.26);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 10px rgba(139, 108, 255, 0.07),
    0 2px 8px rgba(0, 0, 0, 0.12);
}
html.theme-atmosphere .observatory-hero .cta-observatory:hover {
  box-shadow:
    0 0 12px rgba(139, 108, 255, 0.08),
    0 2px 9px rgba(0, 0, 0, 0.1);
}
html.theme-atmosphere .observatory-hero .atmospheric-weather-caption:not(.hidden) {
  color: color-mix(in oklab, var(--soft) 72%, var(--muted));
  opacity: 0.48;
  text-shadow: none;
  font-size: 0.66rem;
}

.atmosphere-grounding .hero-instrument-line {
  margin: 0.35rem 0 0.5rem;
  text-align: center;
}

.cta-observatory-wrap {
  position: relative;
  display: inline-block;
}
.cta-observatory-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.65rem;
  font-family: var(--font-serif);
  font-size: 0.68rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
  background: color-mix(in oklab, var(--bg) 96%, var(--line));
  border: 1px solid color-mix(in oklab, var(--line) 40%, transparent);
  border-radius: 8px;
  box-shadow: 0 2px 10px color-mix(in oklab, var(--text) 10%, transparent);
  white-space: normal;
  max-width: min(36ch, 92vw);
  text-align: center;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.cta-observatory-wrap:hover .cta-observatory-tooltip,
.cta-observatory-wrap:focus-within .cta-observatory-tooltip {
  opacity: 1;
  visibility: visible;
}
.cta-observatory {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  border: 1px solid color-mix(in oklab, var(--text) 14%, transparent);
  background: color-mix(in oklab, #ffffff 40%, transparent);
  color: color-mix(in oklab, var(--text) 76%, var(--muted));
  box-shadow:
    0 1px 0 color-mix(in oklab, #ffffff 55%, transparent),
    0 2px 7px color-mix(in oklab, var(--text) 5%, transparent);
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.065em;
  opacity: 0.82;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.55s ease,
    opacity 0.55s ease,
    box-shadow 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reflejo / brillo sutil en el borde superior del botón */
.cta-observatory::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, #ffffff 35%, transparent) 0%,
    color-mix(in oklab, #ffffff 8%, transparent) 60%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0.75;
  transition: opacity 0.55s ease;
}

.cta-observatory:hover {
  border-color: color-mix(in oklab, var(--text) 20%, transparent);
  background: color-mix(in oklab, #ffffff 48%, transparent);
  color: color-mix(in oklab, var(--text) 82%, var(--muted));
  opacity: 0.88;
  box-shadow:
    0 1px 0 color-mix(in oklab, #ffffff 70%, transparent),
    0 2px 10px color-mix(in oklab, var(--text) 7%, transparent);
}

.cta-observatory:hover::before {
  opacity: 0.88;
}

.cta-observatory:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--text) 22%, #ffffff);
  outline-offset: 2px;
}

.cta-observatory:active {
  opacity: 0.78;
}

.cta-microcopy {
  margin-top: -0.1rem;
  font-size: 0.84rem;
  color: #6a7890;
  opacity: 0.74;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.trust-microcopy {
  margin-top: -0.48rem;
  max-width: 34ch;
  font-size: 0.69rem;
  line-height: 1.4;
  color: #667790;
  opacity: 0.7;
  letter-spacing: 0.01em;
}

.legal-links {
  margin-top: -0.42rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.69rem;
  line-height: 1.25;
  color: #61728a;
  opacity: 0.82;
}

.legal-links .text-link {
  border: 0;
  background: transparent;
  min-height: 0;
  padding: 0;
  font-size: inherit;
  line-height: 1.15;
  border-radius: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Support the Observatory: wrap + tooltip + caption motivacional */
.support-observatory-wrap {
  position: relative;
  display: inline-block;
}
.support-observatory-caption {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--text) 75%, var(--muted));
  font-weight: 400;
}
.support-observatory-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
  background: color-mix(in oklab, var(--bg) 96%, var(--line));
  border: 1px solid color-mix(in oklab, var(--line) 40%, transparent);
  border-radius: 8px;
  box-shadow: 0 2px 10px color-mix(in oklab, var(--text) 10%, transparent);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.support-observatory-wrap:hover .support-observatory-tooltip,
.support-observatory-wrap:focus-within .support-observatory-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Support the Observatory: brillo/reflejo para que destaque a primera vista */
.support-observatory-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow:
    0 0 10px color-mix(in oklab, var(--scope-accent, #7f8fb2) 35%, transparent),
    0 1px 0 color-mix(in oklab, #fff 70%, transparent);
  box-shadow:
    0 0 14px color-mix(in oklab, var(--scope-accent, #7f8fb2) 28%, transparent),
    0 0 24px color-mix(in oklab, var(--scope-accent, #7f8fb2) 14%, transparent);
  padding: 0.2rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 6px;
  transition: box-shadow 0.25s ease, text-shadow 0.25s ease, color 0.2s ease;
}

.support-observatory-link:hover {
  color: var(--text);
  text-shadow:
    0 0 14px color-mix(in oklab, var(--scope-accent, #7f8fb2) 50%, transparent),
    0 1px 0 color-mix(in oklab, #fff 80%, transparent);
  box-shadow:
    0 0 18px color-mix(in oklab, var(--scope-accent, #7f8fb2) 38%, transparent),
    0 0 32px color-mix(in oklab, var(--scope-accent, #7f8fb2) 18%, transparent);
}

.support-observatory-link:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--scope-accent, #7f8fb2) 70%, transparent);
  outline-offset: 2px;
}

.site-legal {
  width: 100%;
  margin: 1.25rem 0 0;
  text-align: center;
  font-family: var(--font-sans);
}

.page-footer-contribute {
  margin: 1.5rem 0 0;
  text-align: center;
  font-family: var(--font-sans);
}

.contribute-footer-link {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.88;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.contribute-footer-link:hover {
  opacity: 1;
  color: var(--text);
}

/* Un icono + panel (lista) — dentro de Strata, esquina inferior izquierda (no flotante global). */
.hidden-from-view-wrap {
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.hidden-from-view-wrap.hidden {
  display: none;
}

/* En flujo normal (fuera de Strata) no aplica esquina; Strata sobrescribe abajo. */
.hidden-from-view-cluster {
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  width: auto;
  min-height: 0;
  align-items: center;
}

/* Strata activa: anclar el control al borde inferior izquierdo de la capa (encima del gradiente ::after). */
.ground-strata.is-active .hidden-from-view-wrap:not(.hidden) {
  position: absolute;
  left: max(0.35rem, env(safe-area-inset-left, 0px));
  bottom: 0.55rem;
  z-index: 3;
  width: auto;
  max-width: none;
  text-align: left;
  pointer-events: none;
}

.ground-strata.is-active .hidden-from-view-wrap:not(.hidden) .hidden-from-view-cluster {
  pointer-events: auto;
}

/* Hueco para que el botón no tape la última línea / share cuando hay contenido Strata. */
.ground-strata.is-active:has(.hidden-from-view-wrap:not(.hidden)) {
  padding-bottom: max(3.75rem, calc(2rem + 2.75rem));
}

.ground-strata .hidden-from-view-trigger {
  border-color: rgba(255, 255, 255, 0.28);
  background: color-mix(in oklab, rgba(12, 8, 28, 0.55) 70%, rgba(92, 61, 255, 0.15));
  color: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.ground-strata .hidden-from-view-trigger:hover {
  border-color: rgba(201, 196, 255, 0.45);
  color: #fff;
}

/* Panel alineado al borde izquierdo del botón (no centrado al viewport). */
.ground-strata .hidden-from-view-panel {
  left: 0;
  right: auto;
  transform: none;
  animation: hidden-from-view-panel-in-strata 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hidden-from-view-panel-in-strata {
  from {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ground-strata .hidden-from-view-panel {
    animation: none;
  }
}

@media (max-width: 600px) {
  .hidden-from-view-trigger {
    -webkit-tap-highlight-color: color-mix(in oklab, var(--text) 14%, transparent);
    touch-action: manipulation;
  }
}

/* Solo botón ocultos sin líneas Strata: bloque compacto (renderStrata + clase en JS). */
.ground-strata.ground-strata--corner-only.is-active .strata-seeds-label,
.ground-strata.ground-strata--corner-only.is-active .strata-lines,
.ground-strata.ground-strata--corner-only.is-active .strata-share-wrap,
.ground-strata.ground-strata--corner-only.is-active .strata-metrics-line {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ground-strata.ground-strata--corner-only.is-active {
  min-height: 5.5rem;
  padding-top: 0.75rem;
}

.hidden-from-view-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--line) 45%, rgba(139, 108, 255, 0.18));
  border-radius: 50%;
  background: color-mix(in oklab, var(--bg-deep) 72%, rgba(36, 32, 88, 0.28));
  color: color-mix(in oklab, var(--soft) 55%, var(--text));
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.hidden-from-view-trigger:hover {
  border-color: color-mix(in oklab, var(--line) 55%, rgba(139, 108, 255, 0.35));
  color: var(--text);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(139, 108, 255, 0.12);
}

.hidden-from-view-trigger:focus {
  outline: none;
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.12),
    0 0 0 3px rgba(92, 61, 255, 0.22);
}

.hidden-from-view-trigger:focus-visible {
  outline: 2px solid rgba(139, 108, 255, 0.45);
  outline-offset: 2px;
}

.hidden-from-view-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
}

.hidden-from-view-wrap--open .hidden-from-view-trigger {
  border-color: rgba(139, 108, 255, 0.4);
  color: var(--text);
}

.hidden-from-view-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text);
  background: linear-gradient(145deg, rgba(92, 61, 255, 0.55), rgba(139, 108, 255, 0.35));
  border: 1px solid rgba(201, 196, 255, 0.35);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.hidden-from-view-badge:empty {
  display: none;
}

.hidden-from-view-panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%);
  z-index: 380;
  width: min(100vw - 2.5rem, 20rem);
  max-height: min(50vh, 16rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.55rem 0 0.45rem;
  text-align: left;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--line) 48%, rgba(139, 108, 255, 0.22));
  background: linear-gradient(180deg, rgba(18, 20, 42, 0.98) 0%, rgba(10, 12, 26, 0.99) 100%);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(139, 108, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-overflow-scrolling: touch;
  animation: hidden-from-view-panel-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hidden-from-view-panel-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(0.35rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hidden-from-view-panel {
    animation: none;
  }
}

.hidden-from-view-panel-hint {
  margin: 0 0.85rem 0.5rem;
  padding: 0 0.15rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: color-mix(in oklab, var(--soft) 65%, var(--text));
  font-weight: 400;
}

.hidden-from-view-list {
  list-style: none;
  margin: 0;
  padding: 0 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hidden-from-view-item {
  margin: 0;
  padding: 0.45rem 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.hidden-from-view-item:hover {
  background: color-mix(in oklab, rgba(92, 61, 255, 0.12) 40%, transparent);
  border-color: rgba(139, 108, 255, 0.12);
}

.hidden-from-view-item-label {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: color-mix(in oklab, var(--text) 88%, var(--soft));
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden-from-view-show-again {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(201, 196, 255, 0.85);
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 108, 255, 0.28);
  background: rgba(92, 61, 255, 0.12);
  text-decoration: none;
}

.hidden-from-view-show-again:hover {
  color: var(--text);
  border-color: rgba(139, 108, 255, 0.45);
  background: rgba(92, 61, 255, 0.2);
}

.page .site-legal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  margin: 0;
  padding: var(--site-bar-pad-y) var(--site-bar-pad-x) calc(env(safe-area-inset-bottom, 0px) + var(--site-bar-pad-y));
  min-height: var(--site-legal-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--site-bar-gap);
  background: color-mix(in oklab, var(--bg) 97%, var(--bg-deep));
  border-top: 1px solid color-mix(in oklab, var(--line) 75%, transparent);
  box-sizing: border-box;
}

/* Misma cromía que el top bar fijo del hero (tema observatorio) */
html.theme-atmosphere .page .site-legal {
  background: var(--site-bar-chrome-gradient);
  border-top: 1px solid color-mix(in oklab, var(--line) 42%, transparent);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
}

.site-legal-left {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.site-legal-strata-link {
  margin-left: auto;
  flex-shrink: 0;
}

/* Barra legal: misma barra fija que en desktop; Strata a la derecha; padding para no tapar contenido */
@media (max-width: 600px) {
  :root {
    --site-legal-height-mobile: 5.5rem;
  }

  .page:has(.site-legal) {
    padding-bottom: calc(
      var(--page-pad-bottom) + var(--site-legal-height-mobile) + env(safe-area-inset-bottom, 0px)
    );
  }

  .page .site-legal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: min(var(--site-bar-gap), 0.65rem);
    min-height: var(--site-legal-height);
    margin: 0;
    padding: var(--site-bar-pad-y) max(var(--site-bar-pad-x), env(safe-area-inset-left, 0px))
      calc(env(safe-area-inset-bottom, 0px) + var(--site-bar-pad-y)) max(var(--site-bar-pad-x), env(safe-area-inset-right, 0px));
    max-width: 100vw;
    box-sizing: border-box;
    background: color-mix(in oklab, var(--bg) 97%, var(--bg-deep));
    border-top: 1px solid color-mix(in oklab, var(--line) 75%, transparent);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
  }

  html.theme-atmosphere .page .site-legal {
    background: var(--site-bar-chrome-gradient);
    border-top: 1px solid color-mix(in oklab, var(--line) 42%, transparent);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
  }

  .site-legal-left {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 4.75rem);
    row-gap: 0.28rem;
    column-gap: 0.45rem;
    overflow-wrap: anywhere;
    text-align: left;
  }

  .site-legal-strata-link {
    margin-left: 0;
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    min-width: min(4.5rem, 22vw);
    max-width: none;
    display: inline-block;
    margin-top: 0;
    text-align: right;
    box-sizing: border-box;
    font-family: var(--font-observatory);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    color: color-mix(in oklab, var(--text) 88%, var(--soft));
    text-decoration: none;
    transition: color 0.2s ease;
    text-shadow:
      0 0 14px rgba(139, 108, 255, 0.14),
      0 1px 2px rgba(0, 0, 0, 0.45);
  }
  .site-legal-strata-link:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* Capa superior del observatorio: Orbital (scroll up). Régimen visual distinto: alta, fría, instrumentada. */
#orbital {
  scroll-margin-top: 4rem;
}
@media (max-width: 600px) {
  #orbital {
    /* Ancla "Orbital ↑" / hash: respeta barra + safe area en móvil. */
    scroll-margin-top: calc(3.75rem + env(safe-area-inset-top, 0px));
  }
}
.panel-orbital {
  position: relative;
  /* visible: overflow:hidden recortaba el disco 3D (translateZ + rotate) en Safari iOS / WebKit móvil. */
  overflow: visible;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 3rem) 1rem 2rem;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 35%, transparent);
}
.panel-orbital > * {
  position: relative;
  z-index: 1;
}

/* Fondo orbital: tinte alto/frío, puntos muy tenues, sensación de capa superior. */
.panel-orbital::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 140% 80% at 50% 0%, color-mix(in oklab, var(--bg) 92%, #7a8aa0) 0%, transparent 55%),
    radial-gradient(circle at 22px 22px, color-mix(in oklab, var(--line) 5%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px;
  background-repeat: no-repeat, repeat;
  opacity: 0.88;
  transition: opacity 2s ease;
}
.panel-orbital.is-in-view::before {
  opacity: 0.94;
}

/* Instrumento en espera: anillo como campo de observación, no ícono. Más grande, más sutil. */
.panel-orbital::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: min(320px, 85vw);
  height: min(320px, 85vw);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--line) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--line) 6%, transparent) inset;
  opacity: 0.5;
  transition: opacity 2.5s ease;
}
.panel-orbital.is-in-view::after {
  opacity: 0.58;
}
@media (prefers-reduced-motion: reduce) {
  .panel-orbital::before,
  .panel-orbital::after {
    transition: none;
  }
}
.orbital-title {
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 530;
  color: var(--text);
  margin: 0 0 0.25rem;
  letter-spacing: 0.02em;
}

.orbital-title.layer-title {
  font-size: 0.72rem;
  font-weight: 500;
  color: #6b7d8f;
  letter-spacing: 0.12em;
  margin: 0;
}

/* Primera capa: sin borde superior para no cortar el inicio */
.panel-orbital .layer-title {
  border-top: none;
  padding-top: 0;
}

/* Paso 1 Orbital: campo abstracto + marcador de traza; resonancia reservada en .orbital-resonance-slot */
.orbital-instrument {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(360px, 92vw);
  margin: 1rem auto 1.25rem;
  overflow: visible;
}
.orbital-empty {
  font-family: var(--font-observatory);
  font-size: 0.82rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
  margin: 0.55rem auto 0;
  max-width: 38ch;
  text-align: center;
}
.orbital-empty[hidden] {
  display: none !important;
}
.orbital-field-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}
/* Línea de traza (tipo · humor) + caption de vecinos: misma columna y ritmo interno (no el mismo gap que disco→texto). */
.orbital-field-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(40ch, 92vw);
  gap: 0.38rem;
  box-sizing: border-box;
}
/* Fila: lectura del momento + contador +N (más candidatos en ventana, no dibujados en el disco). */
.orbital-trace-anchor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.55rem;
  width: 100%;
  max-width: min(40ch, 92vw);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Qué traza ancla el disco (nota o tipo·ánimo). */
.orbital-trace-anchor-line {
  margin: 0;
  padding: 0 0.25rem;
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
  max-width: min(36ch, 92vw);
  width: auto;
  font-family: var(--font-observatory);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
  color: color-mix(in oklab, var(--text) 90%, var(--muted));
}
.orbital-trace-anchor-line[hidden] {
  display: none !important;
}
.orbital-trace-anchor-row .orbital-neighbor-overflow:not([hidden]) {
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--line) 48%, rgba(139, 108, 255, 0.12));
  background: color-mix(in oklab, var(--muted) 9%, transparent);
  line-height: 1.25;
}
.orbital-field-wrap[hidden] {
  display: none !important;
}

/* Entrada en vista Orbital: pulso breve (JS añade --enter ~600ms). Vecinos no dependen de esto. */
@keyframes orbital-layer-enter-glow {
  0% {
    filter: brightness(1);
  }
  42% {
    filter: brightness(1.035) drop-shadow(0 0 18px rgba(92, 61, 255, 0.14));
  }
  100% {
    filter: brightness(1);
  }
}
.orbital-field-wrap--enter,
.orbital-instrument--enter {
  animation: orbital-layer-enter-glow 0.62s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .orbital-field-wrap--enter,
  .orbital-instrument--enter {
    animation: none;
  }
}

/* Móvil: pulso más contenido (menos halo / menos coste de filter en pantallas estrechas). */
@media (max-width: 600px) {
  @keyframes orbital-layer-enter-glow-mobile {
    0% {
      filter: brightness(1);
    }
    48% {
      filter: brightness(1.018) drop-shadow(0 0 11px rgba(92, 61, 255, 0.085));
    }
    100% {
      filter: brightness(1);
    }
  }
  .orbital-field-wrap--enter,
  .orbital-instrument--enter {
    animation-name: orbital-layer-enter-glow-mobile;
    animation-duration: 0.52s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .orbital-instrument {
    touch-action: manipulation;
  }
  .orbital-field-readout {
    max-width: min(40ch, 92vw);
    padding-inline: max(0.35rem, env(safe-area-inset-left, 0px)) max(0.35rem, env(safe-area-inset-right, 0px));
  }
  .orbital-resonance-caption {
    font-size: 0.72rem;
  }
  /* Halo vecinos algo más corto en pantalla estrecha (sigue legible). */
  .orbital-neighbor {
    box-shadow:
      0 0 calc(7px + var(--orbital-neighbor-strength, 0.5) * 14px) rgba(170, 155, 255, calc(0.18 + var(--orbital-neighbor-strength, 0.5) * 0.28)),
      0 0 calc(3px + var(--orbital-neighbor-strength, 0.5) * 6px) rgba(139, 108, 255, 0.14);
  }
  .orbital-neighbor::before {
    font-size: 0.65rem;
    max-width: min(12.5rem, 86vw);
    padding: 0.36rem 0.5rem 0.4rem;
    bottom: calc(100% + 18px);
  }
  .orbital-neighbor[data-tooltip-placement="below"]::before {
    bottom: auto;
    top: calc(100% + 18px);
  }
}

/* Contenedor: vista en perspectiva; el gradiente vive en .orbital-field-surface-bg para no tapar translateZ de marcador/vecinos. */
.orbital-field-surface {
  /* Una sola fuente de verdad: móvil solo sobrescribe perspectiva/ángulos arriba; Z y tamaño del disco iguales en todos los viewports. */
  --orbital-field-bg-z: -16px;
  --orbital-field-stage-z: 10px;
  --orbital-surface-perspective: 680px;
  --orbital-surface-rotate-x: 7.5deg;
  --orbital-surface-rotate-y: -5deg;
  position: relative;
  width: min(300px, 78vw);
  height: min(300px, 78vw);
  margin: 0 auto;
  border-radius: 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform-origin: 50% 46%;
  overflow: visible;
  transform: perspective(var(--orbital-surface-perspective)) rotateX(var(--orbital-surface-rotate-x))
    rotateY(var(--orbital-surface-rotate-y));
}

/* Después del bloque base: en ≤600px solo se suaviza la inclinación; --orbital-field-bg-z / --orbital-field-stage-z no se tocan. */
@media (max-width: 600px) {
  .orbital-field-surface {
    --orbital-surface-perspective: 720px;
    --orbital-surface-rotate-x: 5.5deg;
    --orbital-surface-rotate-y: -3.5deg;
  }
}
.orbital-field-surface-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--line) 28%, transparent);
  background:
    radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--layer-horizon) 18%, transparent) 0%, transparent 62%),
    color-mix(in oklab, var(--bg) 92%, var(--layer-air));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--line) 10%, transparent),
    0 8px 32px color-mix(in oklab, var(--text) 6%, transparent);
  transform: translateZ(var(--orbital-field-bg-z, -16px));
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.orbital-field-surface-stage {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateZ(var(--orbital-field-stage-z, 10px));
  pointer-events: none;
  z-index: 1;
}
.orbital-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  background: color-mix(in oklab, var(--soft) 55%, #e8e4ff);
  border: 1px solid color-mix(in oklab, var(--line) 35%, rgba(139, 108, 255, 0.35));
  box-shadow:
    0 0 18px rgba(139, 108, 255, 0.45),
    0 0 36px rgba(92, 61, 255, 0.12);
  --orbital-center-depth: 0.45;
  transform: translate(-50%, -50%) translateZ(calc(var(--orbital-center-depth) * 18px))
    scale(calc(0.93 + var(--orbital-center-depth) * 0.12));
  transition:
    left 0.45s ease,
    top 0.45s ease,
    opacity 0.35s ease,
    transform 0.55s ease;
  pointer-events: none;
  z-index: 3;
}
/* Sin traza aún: mismo disco 3D, marcador oculto hasta el primer momento. */
.orbital-marker.orbital-marker--awaiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.orbital-field-surface--awaiting-trace {
  opacity: 0.97;
}

/* Traza activa: halo suave (respiración) — evidencia de “tu pulso” en el campo, sin métricas. */
.orbital-field-surface--with-trace .orbital-marker {
  overflow: visible;
}
.orbital-field-surface--with-trace .orbital-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, rgba(139, 108, 255, 0.35) 100%, transparent);
  box-shadow: 0 0 22px rgba(92, 61, 255, 0.1);
  pointer-events: none;
  z-index: -1;
  animation: orbital-marker-halo-breathe 5.2s ease-in-out infinite;
}
@keyframes orbital-marker-halo-breathe {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.78;
  }
}
.orbital-field-wrap--moment-sent .orbital-marker::after,
.orbital-field-surface--moment-sent .orbital-marker::after {
  animation: orbital-marker-halo-sent 0.95s cubic-bezier(0.22, 1, 0.36, 1) 2;
}
@keyframes orbital-marker-halo-sent {
  0% {
    transform: scale(0.85);
    opacity: 0.5;
  }
  45% {
    transform: scale(1.18);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.75;
  }
}
.orbital-marker--moment-sent {
  animation: orbital-marker-glow-pulse 0.72s ease-out 2;
}
@keyframes orbital-marker-glow-pulse {
  0%,
  100% {
    box-shadow:
      0 0 18px rgba(139, 108, 255, 0.45),
      0 0 36px rgba(92, 61, 255, 0.12);
  }
  50% {
    box-shadow:
      0 0 28px rgba(139, 108, 255, 0.78),
      0 0 52px rgba(92, 61, 255, 0.26);
  }
}
.orbital-field-surface--moment-sent .orbital-field-surface-bg {
  animation: orbital-surface-moment-sent 2.4s ease-out;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--line) 10%, transparent),
    0 8px 32px color-mix(in oklab, var(--text) 6%, transparent),
    0 0 48px rgba(139, 108, 255, 0.14);
}
@keyframes orbital-surface-moment-sent {
  0% {
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, var(--line) 10%, transparent),
      0 8px 32px color-mix(in oklab, var(--text) 6%, transparent),
      0 0 20px rgba(139, 108, 255, 0.06);
  }
  35% {
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, var(--line) 12%, transparent),
      0 10px 38px color-mix(in oklab, var(--text) 8%, transparent),
      0 0 56px rgba(92, 61, 255, 0.18);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, var(--line) 10%, transparent),
      0 8px 32px color-mix(in oklab, var(--text) 6%, transparent),
      0 0 40px rgba(139, 108, 255, 0.1);
  }
}

/* Paso 2 Orbital: vecinos abstractos (sin feed ni ranking); intensidad ~ similitud type/mood/tiempo. */
.orbital-neighbor {
  position: absolute;
  width: calc(7px + var(--orbital-neighbor-strength, 0.5) * 5px);
  height: calc(7px + var(--orbital-neighbor-strength, 0.5) * 5px);
  margin: 0;
  border-radius: 50%;
  /* Profundidad hacia la cámara (capa stage + fondo separado evita que el gradiente tape Z<0). */
  transform: translate(-50%, -50%)
    translateZ(calc(2px + var(--orbital-neighbor-depth, 0.5) * 16px));
  pointer-events: auto;
  z-index: 2;
  cursor: default;
  border: 1px solid color-mix(in oklab, var(--line) 52%, rgba(200, 190, 255, 0.35));
  background: color-mix(in oklab, var(--muted) 48%, var(--bg));
  box-shadow:
    0 0 calc(10px + var(--orbital-neighbor-strength, 0.5) * 18px) rgba(180, 165, 255, calc(0.2 + var(--orbital-neighbor-strength, 0.5) * 0.32)),
    0 0 calc(4px + var(--orbital-neighbor-strength, 0.5) * 8px) rgba(139, 108, 255, 0.18);
  transition:
    opacity 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
  opacity: calc(0.74 + var(--orbital-neighbor-strength, 0.5) * 0.26);
  box-sizing: border-box;
  outline: none;
}
.orbital-neighbor[data-neighbor-type="fertile"] {
  background: color-mix(in oklab, var(--glow) 36%, var(--bg));
  border-color: color-mix(in oklab, var(--glow) 40%, var(--line));
}
.orbital-neighbor[data-neighbor-type="avoidable"] {
  background: color-mix(in oklab, #dcc9ff 24%, var(--bg));
  border-color: color-mix(in oklab, var(--line) 48%, rgba(210, 190, 255, 0.45));
}
.orbital-neighbor[data-neighbor-type="observed"] {
  background: color-mix(in oklab, var(--muted) 42%, var(--bg));
}
/* Eco periférico: anillo tenue + pulso desfasado por vecino (proximidad, no posición en ranking). */
.orbital-field-surface--with-trace .orbital-neighbor::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, rgba(139, 108, 255, 0.28) 100%, transparent);
  pointer-events: none;
  z-index: -1;
  opacity: 0.35;
  animation: orbital-neighbor-ring 4.4s ease-in-out infinite;
  animation-delay: calc(var(--orbital-neighbor-index, 0) * 0.15s);
}
@keyframes orbital-neighbor-ring {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.32;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.55;
  }
}
.orbital-field-wrap--moment-sent .orbital-neighbor::after {
  animation-duration: 2.8s;
  opacity: 0.55;
}
.orbital-neighbor:hover,
.orbital-neighbor:focus-visible {
  opacity: 1;
  box-shadow:
    0 0 18px rgba(139, 108, 255, 0.35),
    0 0 28px rgba(92, 61, 255, 0.12);
  /* Por encima del resto de vecinos para que el tooltip no quede “entre” puntos. */
  z-index: 50;
  isolation: isolate;
}

/* Con perspectiva 3D, translateZ distinto por vecino puede pintar otros puntos encima del tooltip; al hover forzamos plano frontal. */
@media (prefers-reduced-motion: no-preference) {
  .orbital-neighbor:hover,
  .orbital-neighbor:focus-visible {
    transform: translate(-50%, -50%) translateZ(28px);
  }
}

/* Tooltip SlipUp (sin title nativo): lectura atmosférica, no panel.
 * Fondo opaco (no usar --card en gradiente: en theme-atmosphere es translúcido y se confunde con el disco). */
.orbital-neighbor::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 22px);
  transform: translateX(-50%) translateY(4px);
  min-width: 7.5rem;
  max-width: min(14rem, 70vw);
  padding: 0.4rem 0.65rem 0.45rem;
  font-family: var(--font-observatory);
  font-size: 0.68rem;
  font-weight: 450;
  line-height: 1.38;
  letter-spacing: 0.04em;
  text-align: center;
  color: color-mix(in oklab, var(--text) 94%, var(--soft));
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--line) 52%, rgba(139, 108, 255, 0.28));
  background: linear-gradient(
    165deg,
    color-mix(in oklab, var(--bg-deep) 94%, var(--bg-ink) 6%) 0%,
    color-mix(in oklab, var(--bg-deep) 82%, var(--bg-ink) 18%) 100%
  );
  box-shadow:
    0 6px 22px rgba(8, 10, 22, 0.42),
    0 0 0 1px color-mix(in oklab, var(--line) 28%, rgba(139, 108, 255, 0.12)),
    0 2px 0 color-mix(in oklab, var(--text) 6%, transparent);
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s;
}
.orbital-neighbor:hover::before,
.orbital-neighbor:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Vecinos en la parte superior del disco: tooltip debajo del punto (menos solape con el centro / otros nodos). */
.orbital-neighbor[data-tooltip-placement="below"]::before {
  bottom: auto;
  top: calc(100% + 22px);
  transform: translateX(-50%) translateY(-4px);
}
.orbital-neighbor[data-tooltip-placement="below"]:hover::before,
.orbital-neighbor[data-tooltip-placement="below"]:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
  .orbital-neighbor:active::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .orbital-neighbor[data-tooltip-placement="below"]:active::before {
    transform: translateX(-50%) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .orbital-neighbor::before {
    transition: opacity 0.12s ease, visibility 0.12s;
  }
  .orbital-neighbor:hover::before,
  .orbital-neighbor:focus-visible::before {
    transform: translateX(-50%) translateY(0);
  }
  .orbital-neighbor[data-tooltip-placement="below"]:hover::before,
  .orbital-neighbor[data-tooltip-placement="below"]:focus-visible::before {
    transform: translateX(-50%) translateY(0);
  }
}
.orbital-field-wrap--stale .orbital-neighbor {
  opacity: calc(0.35 + var(--orbital-neighbor-strength, 0.5) * 0.28);
}
html.theme-atmosphere .orbital-field-wrap--stale .orbital-neighbor {
  opacity: calc(0.52 + var(--orbital-neighbor-strength, 0.5) * 0.28);
}

.orbital-resonance-caption {
  font-family: var(--font-observatory);
  font-size: 0.68rem;
  line-height: 1.45;
  letter-spacing: 0.03em;
  color: color-mix(in oklab, var(--muted) 92%, var(--text));
  margin: 0;
  width: 100%;
  max-width: none;
  text-align: center;
}
.orbital-resonance-caption[hidden] {
  display: none !important;
}

.orbital-resonance-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  width: 100%;
  min-height: 0;
  margin: 0;
}

.orbital-neighbor-overflow {
  font-family: var(--font-observatory);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: color-mix(in oklab, var(--muted) 78%, var(--text));
  flex: 0 0 auto;
  align-self: center;
}
.orbital-neighbor-overflow[hidden] {
  display: none !important;
}

.orbital-field-wrap--stale .orbital-marker {
  opacity: 0.55;
}
.orbital-trace-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  font-family: var(--font-observatory);
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--muted) 92%, var(--text));
  margin: 0;
  width: 100%;
  max-width: none;
  text-align: center;
}
.orbital-trace-meta__primary {
  font-weight: 500;
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
}
.orbital-trace-view-hint {
  font-family: var(--font-observatory);
  font-size: 0.68rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--muted) 92%, var(--text));
  margin: 0.2rem 0 0;
  max-width: 18rem;
  text-align: center;
}
.orbital-trace-back-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
}
/* Past traces: una sola franja que envuelve — botón + chips en la misma línea cuando cabe. */
.orbital-history-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.45rem;
  row-gap: 0.28rem;
  max-width: min(100%, 44rem);
  margin: 0.45rem auto 0;
  padding: 0 0.5rem;
  text-align: center;
}
/* Debajo del caption de resonancia: el gap de .orbital-field-readout marca el ritmo. */
.orbital-field-readout > .orbital-history-wrap {
  margin: 0;
  width: 100%;
}
.orbital-history-toggle {
  margin: 0;
  flex: 0 0 auto;
  line-height: 1.2;
}
.orbital-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 10rem;
  justify-content: center;
  align-items: center;
  gap: 0.22rem 0.32rem;
  min-width: 0;
  font-size: 0.65rem;
}
.orbital-history-list li {
  flex: 0 1 auto;
  max-width: 100%;
}
.orbital-history-list a {
  display: inline-block;
  max-width: 11rem;
  padding: 0.1rem 0.4rem;
  line-height: 1.25;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in oklab, var(--muted) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--muted) 35%, transparent);
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.orbital-history-list a:hover,
.orbital-history-list a:focus-visible {
  background: color-mix(in oklab, var(--muted) 22%, transparent);
  border-color: color-mix(in oklab, var(--muted) 48%, transparent);
}
.orbital-history-toggle.text-button {
  padding: 0.12rem 0.42rem;
  font-size: 0.65rem;
  line-height: 1.25;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--muted) 38%, transparent);
  background: color-mix(in oklab, var(--muted) 10%, transparent);
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
}
.orbital-history-toggle.text-button:hover,
.orbital-history-toggle.text-button:focus-visible {
  background: color-mix(in oklab, var(--muted) 18%, transparent);
  text-decoration: none;
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
}
@media (prefers-reduced-motion: reduce) {
  .orbital-field-surface {
    transform: none;
    perspective: 560px;
  }
  .orbital-field-surface-bg {
    transform: translateZ(0);
  }
  .orbital-field-surface-stage {
    transform: translateZ(0);
  }
  .orbital-marker {
    transition: none;
  }
  .orbital-neighbor {
    transition: none;
    transform: translate(-50%, -50%);
  }
  .orbital-field-surface--with-trace .orbital-marker::after,
  .orbital-field-surface--with-trace .orbital-neighbor::after {
    animation: none;
  }
  .orbital-field-wrap--moment-sent .orbital-marker::after,
  .orbital-field-surface--moment-sent .orbital-marker::after {
    animation: none;
  }
  .orbital-field-surface--moment-sent .orbital-field-surface-bg {
    animation: none;
  }
  .orbital-marker--moment-sent {
    animation: none;
  }
}
html.theme-atmosphere .orbital-field-surface-bg {
  border-color: color-mix(in oklab, var(--line) 42%, rgba(139, 108, 255, 0.12));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--line) 14%, transparent),
    0 8px 36px rgba(92, 61, 255, 0.08);
}

/* Vecinos: más legibles sobre disco oscuro (contraste sin volverlos telemetría). */
html.theme-atmosphere .orbital-neighbor {
  opacity: calc(0.86 + var(--orbital-neighbor-strength, 0.5) * 0.14);
  border-color: color-mix(in oklab, var(--soft) 42%, var(--line));
  box-shadow:
    0 0 calc(12px + var(--orbital-neighbor-strength, 0.5) * 22px) rgba(210, 195, 255, calc(0.28 + var(--orbital-neighbor-strength, 0.5) * 0.3)),
    0 0 calc(5px + var(--orbital-neighbor-strength, 0.5) * 9px) rgba(160, 140, 255, 0.22);
}
html.theme-atmosphere .orbital-neighbor[data-neighbor-type="fertile"] {
  background: color-mix(in oklab, var(--glow) 42%, var(--bg));
  border-color: color-mix(in oklab, var(--glow) 48%, rgba(230, 220, 255, 0.35));
}
html.theme-atmosphere .orbital-neighbor[data-neighbor-type="avoidable"] {
  background: color-mix(in oklab, #e8ddff 28%, var(--bg));
}
html.theme-atmosphere .orbital-neighbor[data-neighbor-type="observed"] {
  background: color-mix(in oklab, var(--muted) 38%, var(--bg));
}
html.theme-atmosphere .orbital-field-surface--with-trace .orbital-neighbor::after {
  border-color: color-mix(in oklab, rgba(210, 195, 255, 0.55) 100%, transparent);
}
html.theme-atmosphere .orbital-field-surface.orbital-field-surface--moment-sent .orbital-field-surface-bg {
  animation: orbital-surface-moment-sent 2.4s ease-out;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--line) 10%, transparent),
    0 8px 32px color-mix(in oklab, var(--text) 6%, transparent),
    0 0 48px rgba(139, 108, 255, 0.14);
}

.orbital-transition-line {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
  opacity: 0;
  margin-bottom: 0.5rem;
  transition: opacity 0.4s ease;
}
.orbital-transition-line:not(.hidden) {
  opacity: 0.85;
}

/* Contribute en orbital: último elemento de la capa, invertido respecto al footer (arriba vs abajo). */
.orbital-contribute-wrap {
  margin: 0.5rem 0 0;
  text-align: right;
}
.orbital-contribute-link {
  font-family: var(--font-observatory);
  font-size: 0.8rem;
  color: var(--muted);
}
.orbital-contribute-link:hover {
  color: var(--text);
}

.orbital-seed-blocks {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in oklab, var(--line) 30%, transparent);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
}
.orbital-seed-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.6;
  margin: 0;
}

.ai-page {
  min-height: 100vh;
}

.panel-ai {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.2rem 1rem 1rem;
}

.ai-kicker {
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #60728b;
  opacity: 0.84;
  margin-bottom: 0.5rem;
}

.ai-title {
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  line-height: 1.25;
  font-weight: 530;
  margin-bottom: 0.5rem;
}

.ai-copy {
  color: #344a60;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  max-width: 56ch;
}

.ai-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.ai-actions .cta,
.ai-actions .text-link {
  min-height: 34px;
}

/* FUTURE: optional cue if the transition label returns. */
.scroll-cue {
  position: absolute;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  color: #7f89a04f;
  letter-spacing: 0.09em;
  font-size: 0.7rem;
  opacity: 0.54;
}

.section-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.6rem;
}

.panel-recent .section-row {
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-end;
}

/* View more bajo la lista (no en cabecera). */
.panel-recent .panel-recent-view-more-row {
  margin-top: 0.65rem;
  margin-bottom: 0;
}

.local-climate .section-row.nearby-view-more-wrap {
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-end;
  margin-bottom: 0.6rem;
}

.moment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.moment-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.84rem;
  line-height: 1.48;
}

.moment-item-empty-line {
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  opacity: 0.88;
}

.moment-item-empty-subtle {
  font-size: 0.72rem;
  opacity: 0.62;
  margin-top: 0.25rem;
}

.horizon-line {
  /* Hereda .layer-title */
}

.horizon-primary {
  font-size: 0.97rem;
  font-weight: 500;
  color: #2d4054;
  margin-bottom: var(--block-gap);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.56;
  text-align: center;
  max-width: 56ch;
}

.horizon-secondary {
  color: #3f5267;
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  font-size: 0.88rem;
  text-align: center;
  max-width: 56ch;
}

.horizon-pulse-line {
  font-size: 0.79rem;
  line-height: 1.38;
  color: #4e6077;
  opacity: 0.78;
  margin-bottom: 0.75rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 56ch;
}

.cta,
.text-button,
.text-link {
  border: 1px solid #9eb1c6;
  border-radius: 999px;
  background: #ffffffcc;
  color: #1f3348;
  text-decoration: none;
  font: inherit;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.cta:hover,
.text-button:hover,
.text-link:hover {
  background: #fff;
}

.cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: color-mix(in oklab, #ffffff 65%, transparent);
  border-color: color-mix(in oklab, var(--text) 10%, transparent);
  color: color-mix(in oklab, var(--text) 62%, var(--muted));
}

.text-button,
.text-link {
  padding: 0.4rem 0.75rem;
  font-size: 0.84rem;
}

.text-button {
  border: 0;
  background: transparent;
  color: #5d6f8a;
  padding: 0;
  border-radius: 0;
}

.text-button:hover {
  background: transparent;
  color: #4c5f78;
  text-decoration: underline;
}

.hidden {
  display: none;
}

.panel-recent {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0.6rem 0.2rem 0.5rem;
  position: relative;
  overflow: visible;
  margin-top: var(--layer-transition);
  text-align: center;
}

.silent-descent {
  opacity: 0.04;
  transform: translateY(14px);
  filter: blur(1px);
  transition:
    opacity 620ms ease,
    transform 720ms ease,
    filter 720ms ease;
}

.silent-descent.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.panel-recent .recent-context {
  margin: 0.35rem 0 0.1rem 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  letter-spacing: 0.01em;
  opacity: 0.66;
  user-select: none;
  pointer-events: none;
  text-align: center;
}

.panel-recent .recent-context.recent-context-hidden {
  display: none;
}

.panel-recent::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -58px;
  height: 88px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, color-mix(in oklab, var(--layer-horizon-soft) 55%, transparent) 0%, transparent 76%),
    linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--layer-horizon-soft) 48%, transparent) 58%, transparent 100%);
  opacity: 0.86;
}

/* Zona de condensación del campo: penumbra violeta muy suave entre horizonte y panel (observatorio) */
html.theme-atmosphere .panel-recent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -80px;
  height: 80px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(92, 61, 255, 0.05) 0%,
    rgba(92, 61, 255, 0.02) 45%,
    transparent 100%
  );
}

/* Capa Horizon: transición continua, sin caja de panel */
.panel-horizon {
  margin-top: var(--descent-gap-horizon);
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  background:
    linear-gradient(
      180deg,
      var(--layer-air) 0%,
      color-mix(in srgb, var(--layer-horizon) calc(52% + var(--atmo) * 0.22%), transparent) 35%,
      color-mix(in srgb, var(--layer-ground) calc(24% + var(--atmo) * 0.1%), transparent) 100%
    ),
    color-mix(in srgb, var(--card) calc(92% - var(--atmo) * 0.2%), var(--layer-horizon-soft));
  position: relative;
  overflow: hidden;
}

/* Transición observatorio: Horizon se funde hacia Strata (gradiente largo, sin corte) */
.panel-horizon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #ffffff00 0%,
    color-mix(in oklab, var(--layer-horizon-soft) 18%, transparent) 28%,
    color-mix(in srgb, var(--layer-ground) calc(28% + var(--atmo) * 0.1%), transparent) 55%,
    color-mix(in oklab, #5B4B8A 8%, transparent) 78%,
    color-mix(in oklab, var(--layer-ground-soft) 52%, transparent) 100%
  );
  opacity: 0.88;
}

/* Lectura: contraste un poco más suave que el cielo (luz que se amortigua) */
.panel-horizon .horizon-primary,
.panel-horizon .horizon-pulse-line {
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
  opacity: 0.92;
}

.horizon-time-of-day-line {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.35rem 0 0;
  opacity: 0.85;
}
.horizon-time-of-day-line.hidden {
  display: none;
}

/* Climate debug panel: solo visible con ?debug=1. Calibración en vivo (Activity, Spread, Persistence). */
.climate-debug-panel {
  position: fixed;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 9999;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted);
  background: color-mix(in oklab, var(--bg) 92%, var(--text));
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  min-width: 10rem;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--text) 12%, transparent);
  pointer-events: none;
}
.climate-debug-panel-title {
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text);
}
.climate-debug-panel-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.climate-debug-panel-row span:last-child {
  font-variant-numeric: tabular-nums;
}

/* Memoria de visitas (solo ?debug=1): lectura en texto, sin IDs ni métricas de producto. */
.visitor-memory-debug-panel {
  position: fixed;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 9998;
  font-family: var(--font-observatory, var(--font-sans));
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--muted);
  background: color-mix(in oklab, var(--bg) 94%, var(--text));
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  max-width: 14rem;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--text) 10%, transparent);
  pointer-events: none;
}

.panel-horizon::before {
  content: "";
  display: block;
  height: 48px;
  margin: -1.25rem -1.25rem 0.7rem;
  background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--layer-horizon-soft) 22%, transparent) 50%, transparent 100%);
}

.local-climate {
  padding: 0.35rem 0.15rem 1.2rem;
  margin-top: var(--descent-gap-nearby);
  background:
    linear-gradient(
      180deg,
      #ffffff00 0%,
      color-mix(in srgb, var(--layer-ground) calc(28% + var(--atmo) * 0.12%), transparent) 50%,
      color-mix(in srgb, var(--bg-deep) 14%, transparent) 100%
    );
}

.local-climate::after {
  content: "";
  display: block;
  height: 28px;
  margin-top: 1rem;
  background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--layer-ground-soft) 48%, transparent) 100%);
  opacity: 0.74;
}

/* Título unificado de capa (Orbital, Atmosphere, Nearby, Horizon, Strata) — estilo referencia: Nearby */
.layer-title {
  color: #6b7d8f;
  border-top: 1px solid color-mix(in srgb, var(--line) 85%, #ffffff);
  text-align: center;
  padding-top: 1.15rem;
  margin-bottom: 1rem;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0.85;
}

.layer-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  margin-right: 0.4rem;
  vertical-align: 0.15em;
}

/* Strata: mismo estilo sobre fondo oscuro */
.ground-strata .layer-title {
  color: rgba(255, 255, 255, 0.85);
  border-top-color: rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
  margin-bottom: 0.75rem;
}

.local-climate-line {
  /* Hereda .layer-title; sin reglas propias para mantener una sola fuente de verdad */
}

/* Móvil: títulos de capa más grandes — misma escala, peso y familia que Nearby (.layer-title) */
@media (max-width: 520px) {
  .layer-title {
    font-family: var(--font-ui);
    font-size: clamp(0.9rem, 4.1vw, 1.08rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    opacity: 0.94;
  }

  .orbital-title.layer-title {
    font-family: var(--font-ui);
    font-size: clamp(0.9rem, 4.1vw, 1.08rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #6b7d8f;
    opacity: 0.94;
  }

  .ground-strata .layer-title {
    font-size: clamp(0.9rem, 4.1vw, 1.08rem);
    font-weight: 600;
    letter-spacing: 0.1em;
  }

  .ground-strata .strata-seeds-label {
    font-family: var(--font-ui);
    font-size: clamp(0.9rem, 4.1vw, 1.08rem);
    font-weight: 600;
    letter-spacing: 0.1em;
  }

  /* Tema oscuro: mismo “acento” que el hero / Nearby (soft + halo), no gris plano */
  html.theme-atmosphere .panel-orbital .orbital-title.layer-title,
  html.theme-atmosphere .local-climate .layer-title,
  html.theme-atmosphere .panel-horizon .layer-title {
    color: color-mix(in oklab, var(--soft) 72%, var(--text));
    text-shadow:
      0 0 16px rgba(201, 196, 255, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.42);
    opacity: 0.97;
    border-top-color: color-mix(in oklab, var(--line) 50%, rgba(139, 108, 255, 0.12));
  }

  html.theme-atmosphere .ground-strata .layer-title,
  html.theme-atmosphere .ground-strata .strata-seeds-label {
    color: color-mix(in oklab, var(--soft) 82%, #ffffff);
    text-shadow:
      0 0 14px rgba(201, 196, 255, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.48);
    opacity: 0.96;
  }
}

/* Eco local del campo: subline que recontextualiza Nearby como capa del observatorio */
.nearby-signals-line {
  margin: -0.5rem 0 0.35rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--muted);
  opacity: 0.72;
  line-height: 1.35;
  text-align: center;
}

/* Eco de Nearby: pulso de presencia cuando el campo global se actualiza (600ms) */
@keyframes nearby-echo-pulse {
  0% { opacity: 0.72; }
  50% { opacity: 0.85; }
  100% { opacity: 0.72; }
}

.nearby-signals-line.echo-pulse,
.local-climate-intro.echo-pulse {
  animation: nearby-echo-pulse var(--echo-pulse-duration, 600ms) ease;
}

@media (prefers-reduced-motion: reduce) {
  .nearby-signals-line.echo-pulse,
  .local-climate-intro.echo-pulse { animation: none; }
}

/* Eco en la lectura local: fade breve (200ms) */
@keyframes nearby-intro-echo {
  0% { opacity: 0.78; }
  50% { opacity: 0.4; }
  100% { opacity: 0.78; }
}

.local-climate-intro.echo-fade {
  animation: nearby-intro-echo 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .local-climate-intro.echo-fade { animation: none; }
}

.local-climate-context {
  margin: -0.5rem 0 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.65;
  text-align: center;
}

.local-climate-intro {
  margin: -0.35rem 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  opacity: 0.78;
  text-align: center;
}

.nearby-panel-hidden {
  display: none !important;
}
.strata-panel-hidden {
  display: none !important;
}

.local-field-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}

.local-field-label {
  font-size: 0.7rem;
  color: #5b6e86;
  opacity: 0.8;
  letter-spacing: 0.02em;
}

.local-field-select {
  min-height: 30px;
  padding: 0.22rem 0.55rem;
  border: 1px solid color-mix(in oklab, var(--text) 16%, transparent);
  border-radius: 8px;
  background: color-mix(in oklab, #ffffff 58%, transparent);
  color: #2b3f53;
  font-size: 0.74rem;
  line-height: 1;
}

.local-climate-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.local-climate-degree {
  font-size: 0.9rem;
  color: #2c3f54;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.local-climate-mass {
  font-size: 0.72rem;
  color: #5f7390;
  line-height: 1.2;
  opacity: 0.78;
}

.local-climate-metrics-line {
  width: 100%;
  margin: 0.25rem 0 0;
  text-align: center;
}

.local-climate-primary {
  font-size: 0.89rem;
  font-weight: 500;
  color: #2d4054;
  line-height: 1.42;
  margin-bottom: 0.4rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 54ch;
}

.local-climate-secondary {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.36;
  opacity: 0.76;
  margin-bottom: 0.35rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 54ch;
}

.local-climate-echo {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #556983;
  line-height: 1.32;
  opacity: 0.75;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 54ch;
}

.local-climate-moments-label {
  margin-top: 1rem;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  opacity: 0.82;
  text-align: center;
}

.local-climate-moments {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 48ch;
  text-align: left;
}

.local-climate-moments .moment-item {
  padding: 0.5rem 0 0.6rem 0;
  font-size: 0.8rem;
}

.local-climate-moments .moment-item-nearby {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: none;
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  padding-bottom: 0;
}
.local-climate-moments .moment-item-nearby:first-child {
  margin-top: 0;
  padding-top: 0;
}
.local-climate-moments .moment-item-nearby .moment-note {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: 0.01em;
}
.local-climate-moments .moment-item-nearby .moment-context {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.82;
  letter-spacing: 0.02em;
}

.local-climate-moments .moment-item:not(.moment-item-nearby) {
  border-top: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
  padding: 0.4rem 0 0.4rem 0.75rem;
}
.local-climate-moments .moment-item:first-child {
  border-top: 0;
}

.local-climate-moments .moment-item-empty {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.local-climate-moments .moment-item-empty .empty-message {
  color: var(--muted);
  font-size: 0.84rem;
  display: block;
}
.local-climate-moments .moment-item-empty .empty-quiet {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.88;
  font-style: italic;
}
.local-climate-moments .moment-item-empty .empty-examples {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.88;
}
.local-climate-moments .moment-item-empty .empty-example-line {
  display: block;
  margin-top: 0.22rem;
  font-style: italic;
}
.local-climate-moments .moment-item-empty .empty-example-line:first-child {
  margin-top: 0;
}

/* Ritmo del scroll: espacio para que el ojo respire antes de "Señales cercanas" (silencio → eco). */
.local-climate-moments .moment-item-empty-header.nearby-signals-header {
  margin-top: 1.75rem;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  list-style: none;
}
/* Señales cercanas: solo texto y aire, sin tarjetas ni bordes (eco, murmullo). */
.local-climate-moments .signal-item {
  list-style: none;
  padding: 0.4rem 0 0.5rem 0;
  border: none;
  background: none;
  box-shadow: none;
}
.local-climate-moments .signal-item .signal-text {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}
.local-climate-moments .signal-item .signal-meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.9;
}
.local-climate-moments .moment-item-from-other-region {
  opacity: 0.92;
}

/* Móvil: calibración atmosférica — respiro como pausa, señales ligeras, final con aire. */
@media (max-width: 480px) {
  .local-climate-moments .moment-item-empty-header.nearby-signals-header {
    margin-top: 1.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.76rem;
  }
  .local-climate-moments .signal-item {
    padding: 0.35rem 0 0.4rem 0;
  }
  .local-climate-moments .signal-item .signal-text {
    font-size: 0.88rem;
    line-height: 1.45;
  }
  .local-climate-moments .signal-item .signal-meta {
    font-size: 0.68rem;
    margin-top: 0.15rem;
  }
  .local-climate {
    padding-bottom: 2.5rem;
  }
}
@media (max-width: 380px) {
  .local-climate-moments .moment-item-empty-header.nearby-signals-header {
    margin-top: 2rem;
  }
  .local-climate-moments .signal-item .signal-meta {
    font-size: 0.65rem;
  }
}
/* Pantallas intermedias (501–700px): respiro 24px para evitar exceso de aire. */
@media (min-width: 501px) and (max-width: 700px) {
  .local-climate-moments .moment-item-empty-header.nearby-signals-header {
    margin-top: 1.5rem;
  }
}

.local-climate-moments.hidden {
  display: none;
}

.nearby-view-more-wrap {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.nearby-view-more-wrap.hidden {
  display: none;
}
.nearby-view-more-wrap .nearby-view-more-btn {
  font-size: 0.8rem;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.25rem 0;
  text-decoration: underline;
}
.nearby-view-more-wrap .nearby-view-more-btn:hover {
  color: var(--text);
}

.ground-strata {
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  padding: 0 0.15rem;
  transition: opacity 600ms ease;
  position: relative;
  /* Violeta royal: mismo efecto (gradiente + borde) que el resto, tono Strata */
  --strata-royal-light: color-mix(in oklab, #5B4B8A 14%, transparent);
  --strata-royal-mid: color-mix(in oklab, #4a3a72 48%, transparent);
  --strata-royal-deep: color-mix(in oklab, #2d1b4e 42%, transparent);
  background:
    linear-gradient(
      180deg,
      var(--strata-royal-light) 0%,
      var(--strata-royal-mid) 40%,
      var(--strata-royal-deep) 100%
    );
  border-top: 1px solid color-mix(in oklab, #5B4B8A 28%, transparent);
}

/* Tierra: capa continua desde Horizon, transición observatorio (sin caja de panel). Borde superior en degradado horizonte → Strata. */
.ground-strata.is-active {
  height: auto;
  opacity: 1;
  pointer-events: auto;
  margin-top: var(--descent-gap-strata);
  margin-left: 0;
  margin-right: 0;
  padding: 1.25rem 1.1rem 2rem;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background-image:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--layer-ground-soft) 38%, var(--layer-horizon-soft)) 0%,
      color-mix(in oklab, #5B4B8A 20%, transparent) 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklab, #5B4B8A 16%, transparent) 0%,
      color-mix(in oklab, #4a3a72 52%, #1a0a2e 8%) 42%,
      color-mix(in oklab, #2d1b4e 48%, #1a0a2e 14%) 100%
    );
  background-size: 100% 36px, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
}

/* Transición observatorio: Horizon se funde en Strata (gradiente alto sobre el borde, sin corte) */
.ground-strata::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -120px;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in oklab, var(--layer-horizon-soft) 12%, transparent) 15%,
    color-mix(in oklab, #5B4B8A 4%, transparent) 28%,
    color-mix(in oklab, #5B4B8A 10%, transparent) 45%,
    color-mix(in oklab, #5B4B8A 18%, transparent) 65%,
    color-mix(in oklab, #4a3a72 38%, transparent) 85%,
    color-mix(in oklab, #4a3a72 52%, transparent) 100%
  );
  opacity: 0.92;
}

.ground-strata.is-active .strata-lines {
  margin-top: 0.25rem;
}
/* Mismo tamaño y espaciado que ATMOSPHERE / NEARBY / Horizon; color adaptado a fondo Strata */
.ground-strata .strata-seeds-label {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border: none;
  background: none;
}
.ground-strata.is-active .strata-share-wrap {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Cierre de capas: transición de color al final de Strata (estilo observatory) */
.ground-strata::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 45%,
    color-mix(in oklab, #2d1b4e 22%, transparent) 70%,
    color-mix(in oklab, #1a0a2e 50%, transparent) 88%,
    color-mix(in oklab, #0d0518 38%, transparent) 100%
  );
  opacity: 0.92;
}

/* Strata: efecto raíces blancas — texto blanco sobre violeta royal */
.ground-strata .strata-context {
  color: rgba(255, 255, 255, 0.88);
  opacity: 0.92;
}
.ground-strata .strata-line {
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.95;
}
.ground-strata .strata-line + .strata-line {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.ground-strata .strata-lines {
  border-left-color: rgba(255, 255, 255, 0.2);
}
.ground-strata .strata-lines::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.06) 100%
  );
}
.ground-strata .strata-share-btn {
  color: rgba(255, 255, 255, 0.8);
}
.ground-strata .strata-share-btn:hover {
  color: rgba(255, 255, 255, 1);
}
.ground-strata .strata-metrics-line {
  color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 900px) {
  .local-climate {
    padding-bottom: 0.78rem;
  }

  .ground-strata.is-active {
    margin-top: var(--descent-gap-strata);
    padding-bottom: 2.25rem;
  }
}

.strata-context {
  font-size: var(--text-caption);
  font-family: var(--font-reading);
  color: var(--muted);
  opacity: 0.72;
  letter-spacing: var(--tracking-normal);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--leading-normal);
  text-align: center;
  max-width: 52ch;
}

.strata-metrics-line {
  margin: 0.5rem 0 0.75rem;
  font-size: 0.8rem;
  color: color-mix(in oklab, var(--text) 75%, var(--muted));
  opacity: 0.88;
  text-align: center;
}

.strata-metrics-line.hidden {
  display: none;
}

/* Bloque de lectura en capas: una sola inscripción, no lista ni tabla */
.strata-lines {
  list-style: none;
  margin: 0 auto;
  padding: 0.75rem 0 0.5rem 1.25rem;
  display: block;
  max-width: 44ch;
  text-align: left;
  border-left: 1px solid color-mix(in oklab, #5B4B8A 32%, transparent);
  position: relative;
}
.strata-lines::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, #5B4B8A 24%, transparent) 0%,
    color-mix(in oklab, #5B4B8A 18%, transparent) 100%
  );
  opacity: 0.7;
}

.strata-line {
  font-size: var(--text-body);
  line-height: var(--leading-reading);
  font-family: var(--font-reading);
  font-style: italic;
  color: color-mix(in oklab, var(--text) 82%, var(--muted));
  opacity: 0.92;
  padding: 0.35rem 0 0.5rem 0;
  border: none;
  background: none;
  border-radius: 0;
  letter-spacing: var(--tracking-normal);
}
.strata-line + .strata-line {
  margin-top: 0.15rem;
  padding-top: 0.6rem;
  border-top: 1px solid color-mix(in oklab, #5B4B8A 14%, transparent);
}
.strata-line:first-child {
  margin-top: 0;
}

.strata-share-wrap {
  margin-top: 0.75rem;
  text-align: center;
}

.strata-share-wrap.hidden {
  display: none;
}

.strata-share-btn {
  font-size: 0.75rem;
  color: color-mix(in oklab, var(--text) 55%, var(--muted));
  opacity: 0.85;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.2rem 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.strata-share-btn:hover {
  color: color-mix(in oklab, var(--text) 75%, var(--muted));
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: #1e24351f;
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 110;
}

.shared-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 75vh;
  overflow: auto;
  background: #f8f6ffed;
  border-top: 1px solid #ffffff8a;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 1rem 1rem 1.15rem;
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 280ms ease,
    opacity 220ms ease;
  z-index: 120;
}

.shared-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}

.shared-sheet-head h2 {
  font-size: 0.9rem;
}

.shared-sheet-count {
  font-size: 0.8rem;
  color: var(--muted, #607189);
  margin: 0 0 0.4rem 0;
}
.shared-sheet-count.hidden {
  display: none;
}

.shared-sheet-list {
  display: grid;
  gap: 0.58rem;
  margin-top: 0.25rem;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.shared-sheet-list .moment-item {
  border-bottom: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
}

.shared-sheet-list .moment-item .moment-note {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in oklab, var(--text) 90%, var(--muted));
}

.shared-sheet-list .moment-item .moment-type-mood {
  font-size: 0.74rem;
  color: var(--muted);
  opacity: 0.85;
}

.shared-sheet-list .moment-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.shared-sheet-list .shared-sheet-sentinel {
  height: 0;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

.shared-sheet-empty {
  color: #607189;
  text-align: center;
  line-height: 1.5;
  margin-top: 0.9rem;
}

.sheet-backdrop.is-open {
  opacity: 1;
}

.shared-sheet.is-open {
  transform: translateY(0);
  opacity: 1;
}

.contribute-page .panel {
  max-width: 560px;
}

/* Observatory layer: "Atmosphere — Rise" (evaporation / contribution zone) */
.panel-contribute {
  --contribute-accent: #7f8fb2;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1.1rem 1.15rem 1.25rem;
  box-shadow: none;
  overflow: hidden;
}

/* Menú de tono (listbox): el panel no debe recortarse por overflow:hidden */
.panel-contribute:has(.contribute-mood-wrap--open) {
  overflow: visible;
  z-index: 4;
}

/* Brillo de fondo: glow sutil para la capa contribute */
.panel-contribute::before {
  content: "";
  position: absolute;
  inset: -20% -15% -30% -15%;
  top: -40%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(
      ellipse 90% 70% at 50% -15%,
      color-mix(in oklab, var(--contribute-accent) 14%, transparent) 0%,
      color-mix(in oklab, var(--contribute-accent) 6%, transparent) 35%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 100% 80% at 50% 20%,
      color-mix(in oklab, #e8ecf4 22%, transparent) 0%,
      color-mix(in oklab, #dde4f0 8%, transparent) 45%,
      transparent 70%
    );
  opacity: 0.92;
}

.contribute-layer-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  margin-bottom: 0.35rem;
}

.contribute-layer-eyebrow {
  color: var(--muted);
  font-size: clamp(0.88rem, 2.85vw, 1.06rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.25;
  text-transform: none;
  margin: 0;
}

.contribute-layer-context {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin: 0;
}

.contribute-layer-hint {
  margin: 0 0 1.25rem 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #607189;
  opacity: 0.85;
  letter-spacing: 0.01em;
  padding-bottom: 1rem;
  border-bottom: none;
  background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--contribute-accent) 12%, transparent) 50%, transparent 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.contribute-field-line {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted);
  opacity: 0.82;
  letter-spacing: 0.02em;
}

.contribute-page {
  padding-top: var(--page-pad-top);
}

.contribute-page .topbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.contribute-page .topbar h1 {
  width: 100%;
  text-align: center;
  font-size: clamp(1.08rem, 1.55vw, 1.32rem);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contribute-page .topbar .text-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid #a8b8ca;
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
  color: #23384d;
  border-radius: 10px;
  min-height: 36px;
  padding: 0.42rem 0.72rem;
  line-height: 1;
  opacity: 1;
  letter-spacing: 0.01em;
  font-weight: 500;
  text-decoration: none;
  box-shadow:
    0 1px 0 #ffffffde inset,
    0 0 0 0 transparent;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 180ms ease,
    opacity 160ms ease;
  white-space: nowrap;
  flex: 0 0 auto;
}

.contribute-page .topbar .text-link:hover {
  border-color: color-mix(in oklab, var(--text) 24%, #c8d6e7);
  background: linear-gradient(180deg, #ffffff 0%, #f8f4ff 100%);
  color: #23384d;
  opacity: 1;
  text-decoration: none;
}

.contribute-page .topbar .text-link:focus-visible {
  outline: none;
  border-color: color-mix(in oklab, #8fa9c9 74%, #ffffff);
  box-shadow:
    0 1px 0 #ffffffea inset,
    0 0 0 3px color-mix(in oklab, #8fa9c9 28%, transparent);
}

.contribute-page .topbar .text-link:active {
  opacity: 0.95;
}

.back-link-short {
  display: none;
}

#contributeForm {
  display: grid;
  gap: 0.9rem;
}

/* Bloque "Kind and tone": forma orgánica, como burbuja a punto de subir */
.contribute-rise-tone {
  padding: 0.9rem 1rem 1rem;
  border-radius: 20px;
  background: color-mix(in oklab, var(--bg) 94%, var(--line));
  border: 1px solid color-mix(in oklab, var(--line) 45%, transparent);
  box-shadow:
    0 2px 12px color-mix(in oklab, var(--text) 4%, transparent),
    0 1px 0 color-mix(in oklab, #fff 30%, transparent) inset;
}
.contribute-rise-tone-intro {
  margin: 0 0 0.65rem 0;
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  font-family: var(--font-reading);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.contribute-tone-interactive {
  display: grid;
  gap: 0.75rem;
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
.contribute-rise-tone:not(.contribute-rise-tone--revealed) .contribute-rise-tone-intro {
  opacity: 0.72;
}
.contribute-rise-tone--revealed .contribute-rise-tone-intro {
  opacity: 1;
}
.contribute-kind-states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.35rem;
  align-items: stretch;
}
.contribute-kind-state {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 2.85rem;
  margin: 0;
  padding: 0.5rem 0.4rem;
  cursor: pointer;
  border-radius: 13px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cobertura táctil completa (Safari/iOS: clip 1px + label no activaba el radio). */
.contribute-kind-state input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
  appearance: none;
  -webkit-appearance: none;
}
.contribute-kind-state-surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid transparent;
  background: transparent;
  transition:
    background 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.contribute-kind-state-label {
  position: relative;
  z-index: 1;
  pointer-events: none;
  font-size: 0.69rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.25;
  color: color-mix(in oklab, var(--muted) 58%, var(--text));
  opacity: 0.88;
  transition:
    opacity 0.35s ease,
    color 0.35s ease,
    font-weight 0.2s ease;
  font-family: var(--font-reading);
}
.contribute-kind-state:not(:has(:checked)) .contribute-kind-state-label {
  opacity: 0.74;
}
.contribute-kind-state--observed .contribute-kind-state-surface {
  background: color-mix(in oklab, #e8f4ff 55%, #faf7ff);
  border-color: color-mix(in oklab, #7eb8e8 35%, var(--muted));
  box-shadow: inset 0 0 0 1px rgba(100, 170, 220, 0.12);
}
.contribute-kind-state--avoidable .contribute-kind-state-surface {
  background: color-mix(in oklab, #fff5e8 40%, #f3f0fa);
  border-color: color-mix(in oklab, #d4a050 32%, var(--muted));
  box-shadow:
    inset 0 0 0 1px rgba(212, 160, 80, 0.14),
    0 1px 5px rgba(15, 24, 38, 0.07);
}
.contribute-kind-state--fertile .contribute-kind-state-surface {
  background: color-mix(in oklab, #e8fff5 45%, #faf7ff);
  border-color: color-mix(in oklab, #5ec9a0 30%, var(--muted));
  box-shadow: inset 0 0 0 1px rgba(94, 201, 160, 0.12);
  transform: translateY(-0.5px);
}
.contribute-kind-state:hover:not(:has(:checked)) .contribute-kind-state-surface {
  filter: brightness(1.03);
}
.contribute-kind-state:has(:checked) .contribute-kind-state-label {
  opacity: 1;
  font-weight: 600;
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
}
.contribute-kind-state--observed:has(:checked) .contribute-kind-state-surface {
  background: color-mix(in oklab, #d4eaff 42%, #faf7ff);
  border-color: color-mix(in oklab, #4a9fd4 55%, var(--text));
  box-shadow:
    0 0 0 2px rgba(74, 159, 212, 0.45),
    0 4px 14px rgba(74, 159, 212, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.contribute-kind-state--avoidable:has(:checked) .contribute-kind-state-surface {
  background: color-mix(in oklab, #ffe8cc 38%, #f3f0fa);
  border-color: color-mix(in oklab, #c48830 48%, var(--text));
  box-shadow:
    0 0 0 2px rgba(196, 136, 48, 0.42),
    0 4px 14px rgba(196, 136, 48, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.contribute-kind-state--fertile:has(:checked) .contribute-kind-state-surface {
  background: color-mix(in oklab, #d4f5e8 40%, #ffffff);
  border-color: color-mix(in oklab, #2fa878 42%, var(--text));
  box-shadow:
    0 0 0 2px rgba(47, 168, 120, 0.4),
    0 4px 14px rgba(47, 168, 120, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.contribute-kind-state:has(:focus-visible) {
  outline: 2px solid color-mix(in oklab, var(--muted) 55%, #8fa9c9);
  outline-offset: 3px;
  border-radius: 13px;
}
#contributeForm[data-kind-preview="observed"] #noteInput {
  box-shadow:
    0 1px 0 #ffffffde inset,
    0 2px 8px color-mix(in oklab, #2f455b 5%, transparent);
  filter: brightness(0.995);
}
#contributeForm[data-kind-preview="avoidable"] #noteInput {
  box-shadow:
    0 1px 0 #ffffffc5 inset,
    0 2px 11px color-mix(in oklab, #2f455b 9%, transparent);
  filter: brightness(0.97);
}
#contributeForm[data-kind-preview="fertile"] #noteInput {
  box-shadow:
    0 1px 0 #fffffff2 inset,
    0 2px 9px color-mix(in oklab, #fff 55%, transparent);
  filter: brightness(1.025);
}
#contributeForm #noteInput {
  transition:
    border-color 0.45s ease,
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.48s ease,
    filter 0.52s ease;
}

.contribute-rise-tone-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.contribute-rise-tone .field-tone {
  margin: 0;
  gap: 0.28rem;
}
.contribute-rise-tone .field-tone-label {
  font-size: 0.76rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-weight: 400;
  /* El texto no debe “comerse” el toque: el <select> debe recibir el hit (Safari/iOS). */
  pointer-events: none;
}
@media (max-width: 420px) {
  .contribute-kind-states {
    grid-template-columns: 1fr;
    gap: 0.42rem;
  }
  .contribute-rise-tone-fields {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .contribute-rise-tone {
    padding: 0.7rem 0.8rem 0.8rem;
  }
}

/* Contribute — móvil: evitar zoom por foco en iOS (inputs ≥16px), home indicator y toques */
@media (max-width: 600px) {
  .contribute-page {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  html.theme-atmosphere .contribute-page .field input[type="text"]#noteInput,
  html.theme-atmosphere .contribute-page .contribute-mood-trigger,
  .contribute-page .field input[type="text"]#noteInput,
  .contribute-page .contribute-mood-trigger {
    font-size: max(16px, 1rem);
    line-height: 1.35;
  }
  .contribute-kind-state {
    touch-action: manipulation;
    min-height: max(2.85rem, 44px);
  }
  .contribute-page #saveButton.cta.cta-contribute-submit,
  .contribute-page #saveButton.cta {
    touch-action: manipulation;
    min-height: 44px;
  }
  .contribute-page .field-inline input[type="checkbox"] {
    touch-action: manipulation;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
  }
  .contribute-page .contribute-mood-trigger {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contribute-kind-state,
  .contribute-kind-state-surface,
  .contribute-kind-state-label,
  .contribute-rise-tone-intro,
  #contributeForm[data-kind-preview] #noteInput {
    transition: none;
  }
  html.theme-atmosphere .contribute-page .field select:not(.contribute-mood-native),
  html.theme-atmosphere .contribute-page .field input[type="text"],
  html.theme-atmosphere .contribute-page #contributeForm #noteInput,
  html.theme-atmosphere .contribute-page #saveButton.cta,
  html.theme-atmosphere .contribute-page .panel-contribute::before,
  html.theme-atmosphere .contribute-page .contribute-rise-tone {
    transition: none;
  }
  html.theme-atmosphere main.page.contribute-page {
    animation: none;
  }
}

.field {
  display: grid;
  gap: 0.35rem;
  color: #2f455b;
}

.contribute-page .field > span {
  color: var(--muted);
  letter-spacing: 0.02em;
  font-weight: 400;
  font-size: 0.84rem;
}

.contribute-rise-examples-intro {
  margin: 1rem 0 0.75rem;
  padding: 0;
}

.contribute-rise-examples-intro-text {
  display: block;
  font-size: 0.75rem;
  color: #6b7d8f;
  opacity: 0.88;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

.contribute-rise-examples-live {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1rem;
  font-size: 0.88rem;
  color: #4a5c6f;
  opacity: 0.92;
  line-height: 1.4;
  font-style: italic;
}

.contribute-rise-example-line {
  padding-left: 0.6rem;
  border-left: 2px solid color-mix(in oklab, var(--muted) 22%, transparent);
}

.contribute-page .contribute-rise-label-hint {
  display: block;
  margin-top: 0.05rem;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  color: #5a6d82;
  opacity: 0.9;
}

.field select:not(.contribute-mood-native),
.field input[type="text"] {
  padding: 0.6rem 0.75rem;
  border: 1px solid color-mix(in oklab, #a8b8ca 85%, transparent);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
  color: #1d2e3f;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.35;
  text-transform: none;
  box-shadow:
    0 1px 0 #ffffffde inset,
    0 2px 8px color-mix(in oklab, #2f455b 6%, transparent);
  transition:
    border-color 160ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.contribute-page .contribute-mood-trigger,
.contribute-page #noteInput {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: #23384d;
  text-transform: none;
}

.contribute-page #noteInput::placeholder {
  color: #5a6d82;
  opacity: 0.88;
}

/* Lista bloqueada (noteContentPolicy.js): no envío hasta cambiar la frase */
.contribute-page #noteInput.contribute-note--blocked {
  border-color: color-mix(in oklab, #c06060 55%, #c8d6e7);
  box-shadow: 0 0 0 1px color-mix(in oklab, #c06060 35%, transparent);
}
.note-policy-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #8a4a4a;
  max-width: 36ch;
}
html.theme-atmosphere .contribute-page #noteInput.contribute-note--blocked {
  border-color: color-mix(in oklab, #c08080 50%, var(--line));
  box-shadow: 0 0 0 1px rgba(200, 100, 100, 0.35);
}
html.theme-atmosphere .note-policy-hint {
  color: color-mix(in oklab, #e8a0a0 75%, var(--muted));
}
/* Tone: listbox estilo observatorio (trigger + panel); el <select> va con .visually-hidden */
.contribute-mood-wrap {
  position: relative;
  width: 100%;
  z-index: 2;
}

.contribute-page .field select.contribute-mood-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  appearance: none;
  background: none;
  box-shadow: none;
}

.contribute-mood-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.5rem 0.75rem;
  padding-right: 2.35rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  border: 1px solid color-mix(in oklab, #a8b8ca 85%, transparent);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
  box-shadow:
    0 1px 0 #ffffffde inset,
    0 2px 8px color-mix(in oklab, #2f455b 6%, transparent);
  transition:
    border-color 160ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.contribute-mood-trigger:hover {
  border-color: color-mix(in oklab, var(--text) 24%, #c8d6e7);
}

.contribute-mood-trigger:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--text) 28%, #c8d6e7);
  box-shadow:
    0 1px 0 #ffffffde inset,
    0 0 0 3px color-mix(in oklab, #5c7a9a 22%, transparent);
}

.contribute-mood-trigger-label {
  flex: 1;
  min-width: 0;
}

.contribute-mood-trigger-chevron {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: -0.2rem;
  border-right: 1.5px solid color-mix(in oklab, #3f5267 85%, #8899aa);
  border-bottom: 1.5px solid color-mix(in oklab, #3f5267 85%, #8899aa);
  transform: rotate(45deg);
  transition: transform 0.22s ease;
  pointer-events: none;
}

.contribute-mood-wrap--open .contribute-mood-trigger-chevron {
  margin-top: 0.1rem;
  transform: rotate(225deg);
}

.contribute-mood-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 60;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, #a8b8ca 75%, transparent);
  background: linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%);
  box-shadow:
    0 12px 36px color-mix(in oklab, #2f455b 14%, transparent),
    0 1px 0 #ffffffc4 inset,
    0 0 0 1px color-mix(in oklab, #ffffff 40%, transparent);
  animation: contribute-mood-panel-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes contribute-mood-panel-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.contribute-mood-option {
  margin: 0;
  padding: 0.62rem 1rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: #1d2e3f;
  border-left: 3px solid transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.contribute-mood-option:hover,
.contribute-mood-option:focus {
  outline: none;
  background: color-mix(in oklab, #5c61ff 8%, #f5f3ff);
}

.contribute-mood-option[aria-selected="true"] {
  background: color-mix(in oklab, #5c61ff 12%, #f0ecff);
  border-left-color: color-mix(in oklab, #5c61ff 55%, #8899cc);
  font-weight: 600;
}

html.theme-atmosphere .contribute-mood-trigger {
  border: 1px solid color-mix(in oklab, var(--line) 45%, rgba(139, 108, 255, 0.14));
  background: rgba(11, 12, 26, 0.38);
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.025) inset;
  color: var(--text);
}

html.theme-atmosphere .contribute-mood-trigger:hover {
  border-color: color-mix(in oklab, var(--line) 55%, rgba(139, 108, 255, 0.22));
}

html.theme-atmosphere .contribute-mood-trigger:focus {
  border-color: rgba(139, 108, 255, 0.35);
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.055) inset,
    0 0 0 3px rgba(92, 61, 255, 0.18);
}

html.theme-atmosphere .contribute-mood-trigger-chevron {
  border-color: color-mix(in oklab, var(--soft) 55%, rgba(201, 196, 255, 0.5));
}

html.theme-atmosphere .contribute-mood-panel {
  border: 1px solid color-mix(in oklab, var(--line) 48%, rgba(139, 108, 255, 0.2));
  background: linear-gradient(
    180deg,
    rgba(18, 20, 42, 0.97) 0%,
    rgba(12, 14, 30, 0.98) 100%
  );
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(139, 108, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
}

html.theme-atmosphere .contribute-mood-option {
  color: color-mix(in oklab, var(--text) 94%, var(--soft));
}

html.theme-atmosphere .contribute-mood-option:hover,
html.theme-atmosphere .contribute-mood-option:focus {
  background: color-mix(in oklab, rgba(92, 61, 255, 0.18) 40%, rgba(18, 20, 42, 0.95));
}

html.theme-atmosphere .contribute-mood-option[aria-selected="true"] {
  background: color-mix(in oklab, rgba(92, 61, 255, 0.22) 45%, rgba(14, 16, 34, 0.92));
  border-left-color: rgba(139, 108, 255, 0.65);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .contribute-mood-panel {
    animation: none;
  }
}

.field select:not(.contribute-mood-native) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #faf7ff 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 5.8L8 10.3l4.5-4.5' fill='none' stroke='%233f5267' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 0.62rem center;
  background-size: auto, 0.9rem;
}

.field select:not(.contribute-mood-native):hover,
.field input[type="text"]:hover {
  border-color: color-mix(in oklab, var(--text) 24%, #c8d6e7);
}

/* Capitalización normal: listas, datos y filtros en toda la página */
.moment-item,
#recentMoments .moment-item,
.shared-sheet-list .moment-item,
.panel-recent,
.panel-recent .recent-context,
.panel-horizon .horizon-primary,
.panel-horizon .horizon-secondary,
.panel-horizon .horizon-pulse-line,
.local-field-select,
.local-climate-primary,
.local-climate-secondary,
.local-climate-echo,
.local-climate-metrics-line,
.local-climate-degree,
.local-climate-mass,
.ground-strata .strata-context,
.ground-strata .strata-metrics-line,
.ground-strata .strata-lines,
.climate-metrics-line,
.climate-summary-line,
.condition-line,
.shared-sheet-count {
  text-transform: none;
}

.field select:not(.contribute-mood-native):focus,
.field input[type="text"]:focus {
  outline: none;
  border-color: color-mix(in oklab, #8fa9c9 74%, #ffffff);
  box-shadow:
    0 1px 0 #ffffffea inset,
    0 0 0 3px color-mix(in oklab, #8fa9c9 28%, transparent);
  background: linear-gradient(180deg, #ffffff 0%, #f8f4ff 100%);
}

.field input[type="text"]::placeholder {
  color: color-mix(in oklab, var(--muted) 74%, #ffffff);
  opacity: 0.78;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.field-inline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.contribute-page .field-inline input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #5a7a9e;
}

.contribute-trust-note {
  margin: -0.1rem 0 0.08rem;
  font-size: 0.72rem;
  line-height: 1.38;
  color: #607189;
  opacity: 0.8;
}

.contribute-page .contribute-rise-from {
  margin: 0.2rem 0 1rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #5a6d82;
  opacity: 0.85;
  font-style: italic;
}

.contribute-page .contribute-shared-hint {
  margin: 0.2rem 0 0.08rem;
  font-size: 0.72rem;
  line-height: 1.38;
  color: #607189;
  opacity: 0.82;
}

.contribute-page #saveButton:disabled[aria-busy="true"] {
  cursor: wait;
}

.contribute-page .contribute-cta-hint {
  margin: 0.35rem 0 0.35rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: #5a6d82;
  opacity: 0.8;
}

.contribute-page .legal-bucket-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #607189;
  opacity: 0.85;
}

.contribute-back-wrap {
  margin: 0.45rem 0 0.2rem;
  width: 100%;
  text-align: right;
  align-self: stretch;
}
.contribute-page .contribute-back-link {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.88;
}

.contribute-page .contribute-back-wrap .contribute-back-link {
  font-size: 0.78rem;
  opacity: 0.8;
}
.contribute-page .contribute-back-link:hover {
  color: var(--text);
  opacity: 1;
}

.field-hint {
  margin-top: -0.08rem;
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--muted);
  opacity: 0.7;
  text-align: right;
}

.note-analysis-line {
  margin-top: 0.35rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted);
  opacity: 0.82;
}

.note-analysis-line[hidden] {
  display: none;
}

.form-status {
  color: #4b5f74;
  min-height: 1.25rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }

  .cta,
  .text-button,
  .text-link {
    transition: none;
  }

  .sheet-backdrop,
  .shared-sheet,
  .observatory-hero::before,
  .transient-reading-line {
    transition: none;
  }

  .ground-strata {
    transition: none;
  }

  .degree-value {
    transition: none;
  }

  .cta-observatory {
    transition: none;
  }

  .cta-observatory:hover,
  .cta-observatory:active {
    opacity: 0.88;
  }

  .scope-sweep,
  .panel-observatory.is-target-lock .scope-target {
    animation: none;
  }

  .space-cue {
    animation: none;
  }

  .silent-descent {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  body.loop-warp .page,
  body.loop-warp-up .page,
  body.loop-warp-down .page {
    transition: none;
    transform: none;
    filter: none;
    opacity: 1;
  }
}

@media (max-height: 700px) {
  .panel-observatory {
    gap: 0.82rem;
  }

  /* Evitar que el número se achique demasiado en viewports cortos */
  .degree-value {
    font-size: clamp(8rem, 24vw, 11rem);
  }

  .observatory-hero .hero-reading-split .degree-value {
    font-size: clamp(2.4rem, 12vw, 3.6rem);
  }

  .cta-observatory {
    margin-top: 0.42rem;
  }
}

@media (max-width: 360px) {
  .page {
    width: 94vw;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .panel {
    padding: 1rem 0.9rem;
    border-radius: 16px;
  }

  .panel-observatory {
    gap: 0.5rem;
  }

  .atmosphere-air {
    gap: 0.45rem;
  }

  .atmosphere-air .degree-wrap {
    margin-top: 1rem;
  }

  .atmosphere-air .condition-line,
  .atmosphere-air .climate-instrument,
  .observatory-hero > .climate-instrument {
    margin-top: 0.65rem;
  }

  .observatory-hero > .climate-instrument {
    margin-bottom: 0.75rem;
  }

  .atmosphere-value-prop {
    font-size: 0.78rem;
    padding: 0 0.5rem;
    margin-bottom: 0.4rem;
  }

  .atmosphere-air {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .atmosphere-grounding {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .observatory-hero .hero-observatory-upper,
  .observatory-hero .atmosphere-air,
  .observatory-hero .atmosphere-grounding {
    max-width: var(--hero-column-max, min(40ch, 100%));
  }

  .observatory-hero {
    padding: calc(env(safe-area-inset-top, 0px) + 4rem) 0 var(--page-pad-top);
  }

  .topbar h1 {
    font-size: clamp(0.95rem, 4.5vw, 1.1rem);
    padding: 0 0.25rem;
  }

  .observatory-hero .topbar h1 {
    font-size: clamp(1.08rem, 4.7vw, 1.32rem);
  }

  .observatory-hero .topbar-brand {
    min-width: 0;
    font-size: clamp(0.9rem, 4.2vw, 1.1rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .observatory-hero .topbar-ai {
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  .degree-value {
    font-size: clamp(12rem, 72vw, 17rem);
  }

  .observatory-hero .hero-reading-split .degree-value {
    font-size: clamp(2.5rem, 14vw, 3.65rem);
  }

  .degree-value .degree-unit {
    top: -0.38em;
  }

  .degree-scale-label {
    font-size: 0.72rem;
    margin-left: 0.35rem;
  }

  .degree-wrap {
    gap: 0.25rem;
  }


  .observatory-hero .hero-instrument-line {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  .nearby-signals-line {
    max-width: 95%;
  }

  .climate-instrument {
    padding: 0.6rem 2.25rem 0.7rem 0.65rem;
    margin-left: 0.15rem;
    margin-right: 0.15rem;
  }

  .climate-instrument-scope {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  .observatory-scope-range {
    font-size: 0.6rem;
  }

  .climate-metrics-line {
    font-size: 0.74rem;
  }

  .climate-metrics-line .metric-value {
    font-size: inherit;
  }

  .condition-line {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .atmosphere-air .condition-line {
    min-height: 1.35em;
    max-width: 26ch;
  }


  .moment-item {
    font-size: 0.8rem;
    gap: 0.65rem;
  }

  .shared-sheet {
    padding: 0.85rem 0.85rem 1rem;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }

  .moment-item {
    font-size: 0.8rem;
    gap: 0.65rem;
  }

  .local-climate {
    padding-bottom: 1.2rem;
    margin-top: 2.4rem;
  }

  .local-climate::after {
    height: 30px;
    margin-top: 1rem;
    opacity: 0.8;
  }

  .ground-strata::before {
    top: -32px;
    height: 36px;
  }

  .ground-strata.is-active {
    margin-top: 3.35rem;
  }

  .page .site-legal {
    font-size: 0.65rem;
  }

  .legal-links {
    gap: 0.35rem;
  }
}

@media (max-width: 320px) {
  .page {
    width: 98vw;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .observatory-hero {
    padding: calc(env(safe-area-inset-top, 0px) + 4rem) 0 var(--page-pad-top);
  }

  .atmosphere-value-prop {
    font-size: 0.78rem;
    padding: 0 0.35rem;
  }

  .degree-value {
    font-size: clamp(11rem, 75vw, 16rem);
  }

  .observatory-hero .hero-reading-split .degree-value {
    font-size: clamp(2.35rem, 13vw, 3.45rem);
  }

  .observatory-hero .hero-identity-line {
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
  }
  .observatory-hero .layer-title {
    font-size: clamp(0.86rem, 3.9vw, 1.02rem);
    font-weight: 600;
    letter-spacing: 0.1em;
  }
  .observatory-hero .hero-weather-panel .atm-reading-line,
  .observatory-hero .hero-weather-panel .climate-summary-line {
    font-size: 0.76rem;
  }
  .observatory-hero .atmosphere-air {
    gap: 0.9rem;
  }

  .observatory-hero .topbar-brand {
    font-size: clamp(0.82rem, 4vw, 1rem);
  }
  .observatory-hero .topbar-ai {
    font-size: 0.65rem;
  }

  /* Nodo de señal más compacto en pantallas muy estrechas */
  html.theme-atmosphere .atmosphere-grounding::after {
    width: min(320px, 90vw);
    height: 100px;
  }

  .climate-instrument {
    padding: 0.5rem 2rem 0.5rem 0.5rem;
  }

  .climate-metrics-line {
    font-size: 0.7rem;
  }

  .local-climate-metrics-line,
  .strata-metrics-line {
    font-size: 0.7rem;
  }

  .instrument-info-btn {
    width: 0.75rem;
    height: 0.75rem;
    min-width: 0.75rem;
    min-height: 0.75rem;
    font-size: 0.42rem;
  }

  /* Lectura atmosférica y horizonte: legibilidad en pantallas muy estrechas */
  .atmosphere-grounding .atm-reading-line {
    font-size: max(0.8rem, var(--text-label));
    min-height: 1.25em;
  }
  .horizon-pulse-bar {
    width: min(70%, 180px);
  }

  .panel {
    padding: 0.85rem 0.7rem;
  }

  /* Bloque lectura hero: evitar overflow y mantener legibilidad */
  .observatory-hero .hero-instrument-line {
    max-width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.85rem;
  }
  .observatory-hero .hero-weather-panel .climate-summary-line,
  .observatory-hero .hero-weather-panel .atm-reading-line {
    font-size: max(0.78rem, 2.4vw);
  }
  .degree-value-row {
    margin: 0.15rem 0 0.5rem;
  }
  .degree-value .degree-unit {
    top: -0.35em;
  }
}

@media (max-width: 520px) {
  .contribute-page .topbar {
    flex-direction: column;
    align-items: flex-start;
    column-gap: 0.44rem;
    margin-bottom: 0.56rem;
  }

  .contribute-page .topbar h1 {
    width: 100%;
    text-align: center;
    min-width: 0;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contribute-page .topbar .text-link {
    min-height: 30px;
    padding: 0.24rem 0.48rem;
    font-size: 0.7rem;
    max-width: 44vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contribute-page .panel {
    margin-top: 0.2rem;
  }

  .panel-contribute {
    padding: 0.9rem 1rem 1.1rem;
  }

  .contribute-layer-hint {
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    font-size: 0.68rem;
  }
}

@media (max-width: 380px) {
  .contribute-page .topbar {
    column-gap: 0.36rem;
  }

  .contribute-page .topbar h1 {
    font-size: 0.92rem;
  }

  .contribute-page .topbar .text-link {
    font-size: 0.66rem;
    padding: 0.2rem 0.4rem;
    max-width: 40vw;
  }

  .back-link-full {
    display: none;
  }

  .back-link-short {
    display: inline;
  }
}

/* --- Observatory: A shared sky (Drizzle preview) --- */
section.panel.panel-recent {
  margin-top: 2.15rem;
}

#recentMoments.moment-list {
  margin: 0.75rem auto 0;
  padding: 0;
  list-style: none;
  max-width: 48ch;
  text-align: left;
}

#recentMoments.moment-list .moment-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  padding: 0.9rem 0 0.95rem 0;
  margin-top: 0.5rem;
  border-top: none;
  opacity: 0.92;
  animation: drizzleFallIn 620ms ease both;
}

#recentMoments.moment-list .moment-item:first-child {
  margin-top: 0;
}

#recentMoments.moment-list .moment-item:nth-child(2) {
  animation-delay: 40ms;
}

#recentMoments.moment-list .moment-item:nth-child(3) {
  animation-delay: 80ms;
}

#recentMoments.moment-list .moment-item:nth-child(4) {
  animation-delay: 120ms;
}

#recentMoments.moment-list .moment-item:nth-child(5) {
  animation-delay: 160ms;
}

#recentMoments.moment-list .moment-item::before {
  content: none;
}

/* The Resonance Field: aura por nivel de resonancias (densidad atmosférica, no contador). */
.shared-sheet-list .moment-item {
  position: relative;
}
#recentMoments.moment-list .moment-item[data-resonance="1"],
.shared-sheet-list .moment-item[data-resonance="1"],
.local-climate-moments .moment-item[data-resonance="1"] {
  box-shadow: 0 0 12px color-mix(in oklab, var(--relate-accent) 8%, transparent);
}
#recentMoments.moment-list .moment-item[data-resonance="3"],
.shared-sheet-list .moment-item[data-resonance="3"],
.local-climate-moments .moment-item[data-resonance="3"] {
  box-shadow: 0 0 20px color-mix(in oklab, var(--relate-accent) 12%, transparent);
}
#recentMoments.moment-list .moment-item[data-resonance="7"],
.shared-sheet-list .moment-item[data-resonance="7"],
.local-climate-moments .moment-item[data-resonance="7"] {
  box-shadow: 0 0 28px color-mix(in oklab, var(--relate-accent) 18%, transparent);
  animation: moment-resonance-aura-pulse 4s ease-in-out infinite;
}
#recentMoments.moment-list .moment-item[data-resonance="15"],
.shared-sheet-list .moment-item[data-resonance="15"],
.local-climate-moments .moment-item[data-resonance="15"] {
  box-shadow: 0 0 32px color-mix(in oklab, var(--relate-accent) 22%, transparent);
}
@keyframes moment-resonance-aura-pulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}
#recentMoments.moment-list .moment-item.moment-item--resonance-pulse,
.shared-sheet-list .moment-item.moment-item--resonance-pulse,
.local-climate-moments .moment-item.moment-item--resonance-pulse {
  overflow: visible;
}
#recentMoments.moment-list .moment-item.moment-item--resonance-pulse::after,
.shared-sheet-list .moment-item.moment-item--resonance-pulse::after,
.local-climate-moments .moment-item.moment-item--resonance-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 10px;
  box-shadow: 0 0 24px color-mix(in oklab, var(--relate-accent) 28%, transparent);
  opacity: 0.6;
  pointer-events: none;
  animation: moment-resonance-brief-halo 0.45s ease-out forwards;
}
@keyframes moment-resonance-brief-halo {
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #recentMoments.moment-list .moment-item[data-resonance="7"],
  .shared-sheet-list .moment-item[data-resonance="7"],
  .local-climate-moments .moment-item[data-resonance="7"] {
    animation: none;
  }
  #recentMoments.moment-list .moment-item.moment-item--resonance-pulse::after,
  .shared-sheet-list .moment-item.moment-item--resonance-pulse::after,
  .local-climate-moments .moment-item.moment-item--resonance-pulse::after {
    animation: none;
    opacity: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  #recentMoments.moment-list .moment-item:hover {
    background: color-mix(in oklab, #ffffff 65%, transparent);
  }
}

@keyframes drizzleFallIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 0.92;
    transform: translateY(0);
  }
}

@keyframes scopeSweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes scopeTargetPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--scope-accent) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in oklab, var(--scope-accent) 25%, transparent);
  }
}

@keyframes spaceCueLift {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.32;
  }
  50% {
    transform: translateY(-2px);
    opacity: 0.44;
  }
}

/* La frase del momento es la señal principal (Across the atmosphere) */
#recentMoments.moment-list .moment-item .moment-note {
  display: block;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
  margin-bottom: 0.15rem;
}

#recentMoments.moment-list .moment-item .moment-type-mood {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.82;
}

#recentMoments.moment-list .moment-item > span.moment-meta {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  opacity: 0.78;
  margin-top: 0.05rem;
}

#recentMoments.moment-list .moment-item > span.moment-meta::before {
  content: none;
}
.shared-sheet-list .moment-item > span.moment-meta::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  margin-right: 0.35rem;
  vertical-align: 0.15em;
}

.shared-sheet-list .moment-item > span.moment-meta {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  opacity: 0.85;
  flex-shrink: 0;
  min-width: 0;
  text-align: left;
}

/* En viewports estrechos el meta no compite con el texto: va debajo */
@media (max-width: 480px) {
  .shared-sheet-list .moment-item,
  #recentMoments.moment-list .moment-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .shared-sheet-list .moment-item > span.moment-meta,
  #recentMoments.moment-list .moment-item > span.moment-meta {
    min-width: 0;
    text-align: left;
    margin-top: 0.15rem;
  }
}

/* Contenedor: botón de acción + botón "i" + Remove + Report. Una sola barra continua, estilo observatory. */
.moment-relate-controls {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.28rem;
}

/* Micro-frase al resonar: visible ~1s, luego se oculta. */
.moment-resonance-feedback {
  font-size: 0.65rem;
  font-style: italic;
  color: color-mix(in oklab, var(--relate-accent) 75%, var(--muted));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  max-width: 10ch;
}
.moment-resonance-feedback.is-visible {
  opacity: 0.9;
}

/* Moment Constellations: indicador sutil, no analytics. */
.moment-constellation-wrap {
  margin-top: 0.4rem;
  padding: 0.25rem 0;
  border-top: 1px solid color-mix(in oklab, var(--line) 25%, transparent);
}
.moment-constellation-line {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted);
  opacity: 0.8;
  margin: 0 0 0.25rem;
}
.moment-constellation-related {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.75;
}
.moment-constellation-related li {
  padding: 0.08rem 0;
  padding-left: 0.5rem;
  position: relative;
}
.moment-constellation-related li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  opacity: 0.6;
}

#recentMoments.moment-list .moment-item .moment-relate-controls {
  align-self: flex-end;
}

/* Móvil: barra única con fondo sutil para que no se vean líneas discontinuas; estilo observatory. */
@media (max-width: 600px) {
  .moment-relate-controls {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem 0.4rem;
    padding: 0.35rem 0.5rem;
    margin-top: 0.35rem;
    background: color-mix(in oklab, var(--bg) 94%, var(--line));
    border: 1px solid color-mix(in oklab, var(--line) 35%, transparent);
    border-radius: 12px;
    box-shadow: 0 1px 0 color-mix(in oklab, #fff 25%, transparent) inset;
  }
  .moment-relate-controls .moment-relate-btn {
    padding: 0.28rem 0.5rem;
    font-size: 0.68rem;
  }
  .moment-relate-controls .moment-control-wrap {
    margin-left: 0;
  }
  .moment-relate-controls .moment-control-symbol.moment-remove-btn,
  .moment-relate-controls .moment-control-symbol.moment-report-btn {
    margin-left: 0;
  }
  .moment-relate-controls .moment-relate-info-btn {
    width: 1.2rem;
    height: 1.2rem;
    min-width: 1.2rem;
    min-height: 1.2rem;
    font-size: 0.6rem;
  }
}

/* Tema atmosphere: en móvil la barra de controles con tinte violeta suave. */
@media (max-width: 600px) {
  html.theme-atmosphere .moment-relate-controls {
    background: color-mix(in oklab, rgba(92, 61, 255, 0.08) 40%, var(--bg));
    border-color: color-mix(in oklab, rgba(92, 61, 255, 0.2) 50%, transparent);
  }
}

.moment-relate-info-btn {
  flex: 0 0 auto;
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--muted) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 90%, var(--line));
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  cursor: help;
  opacity: 0.78;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  touch-action: manipulation;
}
.moment-relate-info-btn:hover {
  opacity: 1;
  color: color-mix(in oklab, var(--relate-accent) 75%, var(--muted));
  border-color: color-mix(in oklab, var(--relate-accent) 35%, transparent);
}
.moment-relate-info-btn:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--relate-accent) 50%, transparent);
  outline-offset: 2px;
}

.moment-relate-info-tooltip {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.35rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: color-mix(in oklab, var(--text) 85%, var(--muted));
  background: color-mix(in oklab, var(--bg) 94%, var(--line));
  border: 1px solid color-mix(in oklab, var(--relate-accent) 22%, transparent);
  border-radius: 8px;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--text) 12%, transparent);
  z-index: 5;
  pointer-events: none;
}

.moment-relate-info-tooltip.is-visible {
  display: block;
}

@media (max-width: 480px) {
  .moment-relate-info-btn {
    width: 0.9rem;
    height: 0.9rem;
    min-width: 0.9rem;
    min-height: 0.9rem;
    font-size: 0.58rem;
  }

  /* Área táctil mayor sin agrandar el círculo (tap más fiable en móvil) */
  .moment-relate-info-btn::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
  }
}

/* Botón señal/eco •)) → •))) : resonancia, no like. Micro-animación al presionar. */
.moment-relate-controls .moment-relate-btn {
  margin-top: 0;
}
.moment-relate-btn {
  position: relative;
  overflow: visible;
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.32rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  font-family: var(--font-sans);
  color: color-mix(in oklab, var(--relate-accent) 78%, var(--text));
  background: color-mix(in oklab, var(--relate-accent-soft) 14%, var(--bg));
  border: 1px solid color-mix(in oklab, var(--relate-accent) 38%, transparent);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--relate-accent) 18%, transparent),
    inset 0 1px 0 color-mix(in oklab, #fff 50%, transparent);
  cursor: pointer;
  opacity: 0.92;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}
.moment-relate-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in oklab, var(--relate-accent) 35%, transparent);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.moment-relate-btn--ripple::before {
  animation: moment-relate-ripple 0.4s ease-out forwards;
}
@keyframes moment-relate-ripple {
  0% { transform: scale(0); opacity: 0.55; }
  100% { transform: scale(2.5); opacity: 0; }
}
.moment-relate-btn--pulse {
  animation: moment-relate-echo 0.18s ease;
}
@keyframes moment-relate-echo {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.moment-relate-btn--glow {
  animation: moment-relate-glow 0.4s ease-out forwards;
}
@keyframes moment-relate-glow {
  0% {
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--relate-accent) 18%, transparent),
      0 0 14px color-mix(in oklab, var(--relate-accent) 32%, transparent),
      inset 0 1px 0 color-mix(in oklab, #fff 50%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--relate-accent) 18%, transparent),
      inset 0 1px 0 color-mix(in oklab, #fff 50%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .moment-relate-btn--pulse { animation: none; }
  .moment-relate-btn--ripple::before { animation: none; }
  .moment-relate-btn--glow { animation: none; }
}

.moment-relate-btn:hover {
  opacity: 1;
  color: color-mix(in oklab, var(--relate-accent) 88%, var(--text));
  border-color: color-mix(in oklab, var(--relate-accent) 52%, transparent);
  background: color-mix(in oklab, var(--relate-accent-soft) 28%, var(--bg));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--relate-accent) 28%, transparent),
    inset 0 1px 0 color-mix(in oklab, #fff 55%, transparent);
}

.moment-relate-btn:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--relate-accent) 55%, transparent);
  outline-offset: 2px;
}

.moment-relate-btn.is-active {
  color: color-mix(in oklab, var(--relate-accent) 95%, var(--text));
  border-color: color-mix(in oklab, var(--relate-accent) 58%, transparent);
  background: color-mix(in oklab, var(--relate-accent-soft) 36%, var(--bg));
  opacity: 1;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--relate-accent) 32%, transparent),
    inset 0 1px 0 color-mix(in oklab, #fff 60%, transparent);
}

.moment-control-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.moment-control-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
  background: color-mix(in oklab, var(--bg) 96%, var(--line));
  border: 1px solid color-mix(in oklab, var(--line) 40%, transparent);
  border-radius: 8px;
  box-shadow: 0 2px 10px color-mix(in oklab, var(--text) 10%, transparent);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.moment-control-wrap:hover .moment-control-tooltip,
.moment-control-wrap:focus-within .moment-control-tooltip {
  opacity: 1;
  visibility: visible;
}

.moment-remove-btn,
.moment-report-btn {
  font: inherit;
  font-size: 0.7rem;
  color: var(--text-muted, #666);
  background: none;
  border: none;
  padding: 0 0.25rem;
  cursor: pointer;
  margin-left: 0.35rem;
  text-decoration: none;
}

.moment-control-symbol.moment-remove-btn,
.moment-control-symbol.moment-report-btn {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  margin-left: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
  border-radius: 50%;
  opacity: 0.78;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.moment-control-symbol.moment-remove-btn:hover,
.moment-control-symbol.moment-report-btn:hover {
  opacity: 1;
  color: var(--text);
  background: color-mix(in oklab, var(--line) 25%, transparent);
  text-decoration: none;
}


.moment-report-btn:focus-visible,
.moment-remove-btn:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--text) 35%, transparent);
  outline-offset: 2px;
}

.local-climate-moments .moment-item-nearby .moment-relate-controls {
  align-self: flex-end;
  margin-top: 0.28rem;
}
.local-climate-moments .moment-item-nearby .moment-relate-btn {
  font-size: 0.65rem;
  opacity: 0.78;
  margin-top: 0;
}
.local-climate-moments .moment-item-nearby .moment-relate-btn:hover {
  opacity: 0.95;
}

.view-more-wrap {
  position: relative;
  display: inline-block;
}
.view-more-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
  background: color-mix(in oklab, var(--bg) 96%, var(--line));
  border: 1px solid color-mix(in oklab, var(--line) 40%, transparent);
  border-radius: 8px;
  box-shadow: 0 2px 10px color-mix(in oklab, var(--text) 10%, transparent);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.view-more-wrap:hover .view-more-tooltip,
.view-more-wrap:focus-within .view-more-tooltip {
  opacity: 1;
  visibility: visible;
}
#viewMoreButton.text-button {
  display: inline-block;
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  #recentMoments.moment-list .moment-item:hover {
    background: transparent;
  }

  #recentMoments.moment-list .moment-item {
    animation: none;
  }
}