/* ============================================================
   TlamatiniAI · Sistema visual místico-cósmico
   Repositorio Dinámico Simbiótico Verificable
   v3.15.0 — Códices-TlamatiniAI
   ============================================================ */

:root {
  color-scheme: dark;

  /* Paleta base: obsidiana, oro tlamatini, turquesa Quetzalcóatl */
  --bg: #07060a;
  --bg-deep: #030206;
  --bg-veil: #0d0a14;
  --panel: #14101c;
  --panel-hot: #1b1426;
  --ink: #f5ead4;
  --muted: #c8b993;
  --muted-strong: #ddc993;

  /* Acentos cromáticos */
  --gold: #c59032;
  --gold-hot: #f0b847;
  --gold-cool: #d9a04d;
  --jade: #1da2d8;
  --jade-deep: #0d7eb0;
  --quetzal: #2bbf8f;
  --obsidian: #6b3aff;
  --copal: #ff6a3d;
  --rojo-tlatoani: #b53b3b;

  /* Líneas y bordes */
  --line: rgba(197, 144, 50, .34);
  --line-soft: rgba(197, 144, 50, .18);
  --line-strong: rgba(240, 184, 71, .62);
  --line-jade: rgba(29, 162, 216, .32);
  --line-quetzal: rgba(43, 191, 143, .35);

  /* Sombras profundas */
  --shadow-deep: 0 32px 95px rgba(0, 0, 0, .68);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, .42);
  --shadow-glow: 0 0 48px rgba(240, 184, 71, .22);
  --shadow-glow-jade: 0 0 48px rgba(29, 162, 216, .24);

  /* Tipografía */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-glyph: "Cormorant Garamond", Georgia, serif;

  /* Capas */
  --z-stars: 0;
  --z-base: 1;
  --z-orbit: 2;
  --z-planet: 3;
  --z-panel: 4;
  --z-ribbon: 6;
  --z-nav: 7;
  --z-modal: 30;

  /* Transiciones */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.45, 0, .55, 1);
}

* { box-sizing: border-box; }
*::selection { background: rgba(240, 184, 71, .42); color: #0a0708; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  position: relative;
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv02", "cv03";
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3, p, li, a, span {
  overflow-wrap: break-word;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-stars);
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, rgba(240, 184, 71, .07), transparent 32%),
    radial-gradient(circle at 82% 68%, rgba(29, 162, 216, .06), transparent 36%),
    radial-gradient(circle at 50% 92%, rgba(107, 58, 255, .045), transparent 40%);
}

a { color: inherit; }

img { max-width: 100%; }

/* Canvas de estrellas dibujado por JS */
#starfield {
  position: fixed;
  inset: 0;
  z-index: var(--z-stars);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Topbar + Knowledge ribbon
   ------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding: 12px clamp(18px, 4vw, 48px);
  background: rgba(7, 6, 10, .82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  min-width: 0;
}

.brand {
  position: relative;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--gold);
  text-decoration: none;
  text-shadow: 0 0 24px rgba(240, 184, 71, .35);
}

.brand::before {
  content: "✶";
  display: inline-block;
  margin-right: 6px;
  color: var(--gold-hot);
  font-size: 18px;
  transform: translateY(-2px);
}

nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

nav a {
  position: relative;
  padding: 6px 2px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .22s var(--ease-out);
}

nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--gold-hot);
  box-shadow: 0 0 12px rgba(240, 184, 71, .6);
  transform: translateX(-50%);
  transition: width .22s var(--ease-out);
}

nav a:hover { color: var(--ink); }
nav a:hover::after { width: 100%; }
nav a.active { color: var(--gold-hot); }
nav a.active::after { width: 100%; }

.knowledge-ribbon {
  position: sticky;
  top: 68px;
  z-index: var(--z-ribbon);
  overflow: hidden;
  min-height: 40px;
  border-bottom: 1px solid rgba(240, 184, 71, .22);
  background:
    linear-gradient(90deg, rgba(3, 2, 6, .96), rgba(28, 18, 8, .96), rgba(3, 2, 6, .96));
  box-shadow: 0 10px 36px rgba(0, 0, 0, .5);
}

.knowledge-ribbon span {
  display: inline-block;
  min-width: 100%;
  padding: 11px 48px;
  color: var(--gold-hot);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(240, 184, 71, .42);
  animation: ribbonDrift 38s linear infinite;
}

/* ------------------------------------------------------------
   Buttons (sistema de botones unificado)
   ------------------------------------------------------------ */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--line);
  background: rgba(20, 16, 28, .72);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
  overflow: hidden;
}

.button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 235, 195, .18) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .55s var(--ease-out);
  pointer-events: none;
}

.button:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .42), 0 0 24px rgba(240, 184, 71, .18);
}

.button:hover::after { transform: translateX(110%); }

.button.primary {
  background: linear-gradient(180deg, var(--gold-hot), var(--gold));
  color: #150e04;
  border-color: var(--gold-hot);
  text-shadow: 0 1px 0 rgba(255, 235, 195, .35);
}

.button.primary:hover {
  background: linear-gradient(180deg, #ffd273, var(--gold-hot));
  box-shadow: 0 16px 36px rgba(0, 0, 0, .54), 0 0 30px rgba(240, 184, 71, .42);
}

.button.secondary {
  background: transparent;
  color: var(--gold-hot);
  border-color: rgba(240, 184, 71, .55);
}

.button.ghost {
  background: transparent;
  color: var(--muted-strong);
  border-color: var(--line-soft);
}

.button.jade {
  background: linear-gradient(180deg, var(--jade), var(--jade-deep));
  color: #04161e;
  border-color: var(--jade);
}

.button.disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .55;
  background: transparent;
  color: var(--muted);
  border-color: var(--line-soft);
}

.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Tipografía y utilidades
   ------------------------------------------------------------ */

.eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--gold-hot);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow.jade { color: var(--jade); }
.eyebrow.quetzal { color: var(--quetzal); }

h1, h2, h3 { margin: 0 0 14px; font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em; }

h1 { font-size: clamp(46px, 6.8vw, 92px); line-height: .98; }
h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1.08; color: var(--gold); }
h3 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; color: var(--gold-hot); }

.lead {
  max-width: 760px;
  margin: 0;
  color: var(--muted-strong);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.5;
}

.section-intro {
  max-width: 940px;
  margin: 0 0 40px;
}

.section-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.section-intro h2 {
  margin: 0 0 14px;
}

.eyebrow-decor {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  color: var(--gold-hot);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow-decor::before,
.eyebrow-decor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 184, 71, .42), transparent);
  max-width: 80px;
}

/* ------------------------------------------------------------
   Planetarium Hero (la corona del sitio)
   ------------------------------------------------------------ */

.planetarium-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(700px, 64vw) minmax(360px, 1fr);
  align-items: start;
  min-height: calc(100vh - 108px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(240, 184, 71, .14), transparent 36%),
    radial-gradient(ellipse at 70% 65%, rgba(29, 162, 216, .11), transparent 42%),
    radial-gradient(ellipse at 50% 95%, rgba(107, 58, 255, .08), transparent 38%),
    linear-gradient(160deg, #030206 0%, #0a0610 46%, #050307 100%);
}

.planetarium-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(240, 184, 71, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 184, 71, .06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 32% 48%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 32% 48%, #000 0%, transparent 75%);
}

.planetarium-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .04) 0 1px, transparent 2px) 0 0 / 4vw 4vw,
    radial-gradient(circle at 70% 60%, rgba(240, 184, 71, .045) 0 1px, transparent 2px) 0 0 / 6vw 6vw;
  opacity: .55;
}

.planetarium-stage {
  position: relative;
  height: calc(100vh - 108px);
  min-height: 720px;
  border-right: 1px solid var(--line);
  overflow: visible;
  isolation: isolate;
}

/* Anillos zodiacales (5 Soles) flotando en el borde del stage */
.zodiac-marks {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  opacity: .58;
}

.zodiac-marks span {
  position: absolute;
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(240, 184, 71, .68);
  text-shadow: 0 0 12px rgba(240, 184, 71, .35);
  white-space: nowrap;
}

.zodiac-marks span:nth-child(1) { top: 4%; left: 50%; transform: translateX(-50%); }
.zodiac-marks span:nth-child(2) { top: 38%; right: 3%; transform: rotate(75deg); transform-origin: center; }
.zodiac-marks span:nth-child(3) { bottom: 14%; right: 8%; transform: rotate(145deg); transform-origin: center; }
.zodiac-marks span:nth-child(4) { bottom: 14%; left: 8%; transform: rotate(-145deg); transform-origin: center; }
.zodiac-marks span:nth-child(5) { top: 38%; left: 3%; transform: rotate(-75deg); transform-origin: center; }

/* Anillos del planetario — capa decorativa, gira sutilmente */
.planetarium-orbits {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-orbit);
  width: min(58vw, calc(100vh - 138px), 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(240, 184, 71, .28) 0 1px, transparent 2px) 50% 50% / 31px 31px,
    repeating-conic-gradient(from 14deg, rgba(240, 184, 71, .1) 0 1deg, transparent 1deg 12deg),
    radial-gradient(circle at 50% 50%, transparent 27%, rgba(197, 144, 50, .3) 28%, transparent 29%),
    radial-gradient(circle at 50% 50%, transparent 43%, rgba(240, 184, 71, .2) 44%, transparent 45%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(29, 162, 216, .25) 59%, transparent 60%),
    radial-gradient(circle at 50% 50%, transparent 72%, rgba(197, 144, 50, .18) 73%, transparent 74%);
  box-shadow: inset 0 0 80px rgba(29, 162, 216, .12), 0 0 80px rgba(240, 184, 71, .07);
  animation: planetariumSlow 180s linear infinite;
}

.planetarium-orbits::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px dashed rgba(43, 191, 143, .22);
  pointer-events: none;
}

/* Glifo central decorativo detrás del sol */
.planetarium-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-base);
  width: min(48vw, calc(100vh - 200px), 560px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .42;
  filter: drop-shadow(0 0 18px rgba(240, 184, 71, .22));
  animation: glyphPulse 9s ease-in-out infinite;
}

/* Cuerpos planetarios (sol + 6 códices).
   IMPORTANTE: el JS ahora posiciona vía --orbit-x / --orbit-y,
   pero los keys p1..p6 + planet-core siguen presentes para el verificador.

   Cada esfera muestra la ESENCIA del mural (cover focal en el sujeto central).
   En hover/active se transforma en TARJETA 2:3 con el mural COMPLETO + texto debajo. */
.planet-body {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-planet);
  display: block;
  width: clamp(112px, 9.5vw, 158px);
  aspect-ratio: 1;
  padding: 0;
  color: var(--gold-hot);
  border: 1px solid rgba(240, 184, 71, .68);
  border-radius: 50%;
  cursor: pointer;
  overflow: visible;
  /* Sintaxis explícita (no shorthand) para garantizar cover + focal en TODOS los browsers.
     Zoom 210% para recortar marcos superior ("CÓDICE N") e inferior
     (título grande del códice) y mostrar SOLO el sujeto central del MuralAI. */
  background-color: #060309;
  background-image:
    radial-gradient(circle at 36% 22%, rgba(255, 238, 188, .22), transparent 24%),
    linear-gradient(180deg, transparent 0 60%, rgba(0, 0, 0, .35) 95%),
    var(--planet-image);
  background-position: center, center, var(--planet-focus, 50% 28%);
  background-size: 100% 100%, 100% 100%, auto 210%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, .72),
    inset 0 0 18px rgba(0, 0, 0, .42),
    0 0 24px rgba(240, 184, 71, .12);
  transform: translate(calc(-50% + var(--orbit-x, 0px)), calc(-50% + var(--orbit-y, 0px)));
  transition:
    width .42s var(--ease-out),
    aspect-ratio .42s var(--ease-out),
    border-radius .42s var(--ease-out),
    filter .32s var(--ease-out),
    box-shadow .32s var(--ease-out),
    border-color .32s var(--ease-out),
    opacity .32s var(--ease-out),
    background-size .42s var(--ease-out);
}

.planet-body::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(29, 162, 216, .26);
  border-radius: inherit;
  opacity: .7;
  pointer-events: none;
  transition: inset .42s var(--ease-out), border-color .32s var(--ease-out), opacity .32s var(--ease-out);
}

/* ::after reservado para revelar el SUBTÍTULO debajo del label en hover/active.
   Por defecto invisible. Se posiciona debajo del .planet-text. */
.planet-body::after {
  content: attr(data-subtitle);
  position: absolute;
  left: 50%;
  top: calc(100% + 46px);
  transform: translate(-50%, 6px);
  z-index: 3;
  max-width: 220px;
  padding: 0 6px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 0 18px rgba(7, 5, 12, .98),
    0 0 8px rgba(7, 5, 12, .98),
    0 2px 4px rgba(0, 0, 0, .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s var(--ease-out), transform .32s var(--ease-out);
}

.planet-text {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  z-index: 4;
  display: inline-block;
  padding: 6px 12px;
  color: var(--gold-hot);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(7, 5, 12, .85);
  border: 1px solid rgba(240, 184, 71, .42);
  text-shadow: 0 0 10px rgba(240, 184, 71, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  transform: translateX(-50%);
  transition:
    top .42s var(--ease-out),
    padding .32s var(--ease-out),
    font-size .32s var(--ease-out),
    background .32s var(--ease-out),
    color .32s var(--ease-out),
    border-color .32s var(--ease-out);
}

/* Sol central — la OBRA MADRE.
   ESFERA circular en reposo (coherente con todo el sistema planetario).
   Focal en la figura central (Coatlicue con el orbe), excluyendo marcos.
   Al hover/focus se expande a portada 2:3 completa como los códices. */
.planet-core {
  z-index: 5;
  width: clamp(240px, 22vw, 340px);
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(240, 184, 71, .86);
  animation: planetGlow 7s ease-in-out infinite;
  /* Focal sobre Coatlicue con el orbe — figura central de la portada.
     Zoom 220% para que la ventana circular muestre SOLO la figura,
     recortando los marcos superior (4T Democracia/calumnia) e inferior (título "TlamatiniAI"). */
  --planet-focus: 50% 26%;
  --orbit-x: 0px;
  --orbit-y: 0px;
  background-color: #060309;
  background-image:
    radial-gradient(circle at 36% 22%, rgba(255, 238, 188, .24), transparent 22%),
    linear-gradient(180deg, transparent 0 62%, rgba(0, 0, 0, .35) 96%),
    var(--planet-image);
  background-position: center, center, var(--planet-focus);
  background-size: 100% 100%, 100% 100%, auto 220%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  box-shadow:
    0 36px 92px rgba(0, 0, 0, .82),
    inset 0 0 30px rgba(0, 0, 0, .42),
    0 0 56px rgba(240, 184, 71, .26),
    0 0 90px rgba(29, 162, 216, .2);
}

.planet-core::before {
  /* Doble anillo dorado externo, marca al "sol" del sistema */
  inset: -14px;
  border: 1px solid rgba(240, 184, 71, .38);
  border-radius: inherit;
  opacity: 1;
}

.planet-core::after {
  /* El sol NO usa subtítulo (es la obra integral, no un códice) */
  display: none;
}

/* Label "TlamatiniAI" debajo del sol, en banda serif grande */
.planet-core .planet-text {
  display: inline-block;
  top: calc(100% + 18px);
  padding: 10px 24px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: none;
  color: var(--gold-hot);
  background: rgba(7, 5, 12, .82);
  border: 1px solid var(--line-strong);
  text-shadow: 0 0 24px rgba(240, 184, 71, .48);
}

/* Posiciones iniciales fallback si JS no carga (mantienen p1..p6 visibles).
   --planet-focus calibrado al sujeto principal de cada MuralAI:
   - cada portada tiene marco superior "CÓDICE N" (0-15%) + mural (15-60%) + título (60-100%)
   - el focal centra la ventana en el sujeto principal del mural (figura central),
     dejando fuera los marcos superior/inferior. */
.p1 { --orbit-x: 0px;    --orbit-y: -280px; --planet-focus: 50% 28%; }
.p2 { --orbit-x: 240px;  --orbit-y: -140px; --planet-focus: 50% 30%; }
.p3 { --orbit-x: 240px;  --orbit-y: 140px;  --planet-focus: 50% 28%; }
.p4 { --orbit-x: 0px;    --orbit-y: 280px;  --planet-focus: 50% 28%; }
.p5 { --orbit-x: -240px; --orbit-y: 140px;  --planet-focus: 50% 30%; }
.p6 { --orbit-x: -240px; --orbit-y: -140px; --planet-focus: 50% 26%; }

/* Estados interactivos: solo al HOVER real se atenúan los OTROS códices.
   El sol nunca se atenúa; al cargar (is-active inicial) nadie está atenuado. */
.planetarium-stage:has(.planet-body:not(.planet-core):hover) .planet-body:not(.planet-core):not(:hover) {
  opacity: .42;
  filter: saturate(.6) brightness(.72);
}

/* Activo: códice se transforma en TARJETA 2:3 con mural COMPLETO + label + subtítulo */
.planetarium-stage .planet-body:not(.planet-core):hover,
.planetarium-stage .planet-body:not(.planet-core):focus-visible,
.planetarium-stage .planet-body:not(.planet-core).is-active {
  z-index: 12;
  opacity: 1;
  width: clamp(180px, 17vw, 240px);
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  border-color: var(--gold-hot);
  filter: saturate(1.18) brightness(1.1);
  background-color: #08050c;
  background-image: var(--planet-image);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow:
    0 38px 92px rgba(0, 0, 0, .82),
    0 0 64px rgba(240, 184, 71, .4),
    0 0 84px rgba(29, 162, 216, .22);
}

/* Anillo externo en hover: pegado al borde rectangular */
.planetarium-stage .planet-body:not(.planet-core):hover::before,
.planetarium-stage .planet-body:not(.planet-core):focus-visible::before,
.planetarium-stage .planet-body:not(.planet-core).is-active::before {
  inset: -8px;
  border-color: rgba(240, 184, 71, .42);
  opacity: 1;
}

/* Label dorado brillante en hover */
.planetarium-stage .planet-body:not(.planet-core):hover .planet-text,
.planetarium-stage .planet-body:not(.planet-core):focus-visible .planet-text,
.planetarium-stage .planet-body:not(.planet-core).is-active .planet-text {
  top: calc(100% + 14px);
  padding: 8px 16px;
  font-size: 12.5px;
  letter-spacing: .18em;
  background: linear-gradient(180deg, #ffd273, var(--gold-hot));
  color: #150e04;
  border-color: var(--gold-hot);
  text-shadow: 0 1px 0 rgba(255, 235, 195, .35);
}

/* Subtítulo revelado debajo del label */
.planetarium-stage .planet-body:not(.planet-core):hover::after,
.planetarium-stage .planet-body:not(.planet-core):focus-visible::after,
.planetarium-stage .planet-body:not(.planet-core).is-active::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Sol central — is-active inicial: SOLO glow extra (no expand a card).
   Esto mantiene la esfera circular al cargar.
   El user verá la portada completa solo al pasar el mouse (hover). */
.planetarium-stage .planet-core.is-active {
  z-index: 6;
  opacity: 1;
  filter: saturate(1.1) brightness(1.04);
  border-color: var(--gold-hot);
  box-shadow:
    0 36px 92px rgba(0, 0, 0, .82),
    inset 0 0 30px rgba(0, 0, 0, .42),
    0 0 70px rgba(240, 184, 71, .42),
    0 0 110px rgba(29, 162, 216, .26);
}

/* Sol central — hover/focus REAL: se expande a portada 2:3 completa
   con la portada COMPLETA visible (como los códices). */
.planetarium-stage .planet-core:hover,
.planetarium-stage .planet-core:focus-visible {
  z-index: 12;
  opacity: 1;
  width: clamp(220px, 21vw, 300px);
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  filter: saturate(1.18) brightness(1.1);
  border-color: var(--gold-hot);
  background-color: #08050c;
  background-image: var(--planet-image);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .84),
    0 0 80px rgba(240, 184, 71, .48),
    0 0 120px rgba(29, 162, 216, .28);
}

/* Label del core en hover: chip dorado brillante (como códices) */
.planetarium-stage .planet-core:hover .planet-text,
.planetarium-stage .planet-core:focus-visible .planet-text {
  top: calc(100% + 14px);
  padding: 10px 20px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.9vw, 28px);
  background: linear-gradient(180deg, #ffd273, var(--gold-hot));
  color: #150e04;
  border-color: var(--gold-hot);
  text-shadow: 0 1px 0 rgba(255, 235, 195, .35);
}

/* Cuando hover en el core, atenuar los otros códices */
.planetarium-stage:has(.planet-core:hover) .planet-body:not(.planet-core) {
  opacity: .42;
  filter: saturate(.6) brightness(.72);
}

.planet-body:focus-visible {
  outline: 2px solid var(--gold-hot);
  outline-offset: 12px;
}

/* Panel lateral con la ficha del cuerpo seleccionado */
.planet-info-panel {
  position: relative;
  z-index: var(--z-panel);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 720px;
  max-height: calc(100vh - 108px);
  overflow: auto;
  padding: clamp(28px, 3.6vw, 56px);
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 184, 71, .35) transparent;
}

.planet-info-panel::-webkit-scrollbar { width: 6px; }
.planet-info-panel::-webkit-scrollbar-thumb { background: rgba(240, 184, 71, .35); }

.panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.panel-eyebrow::before {
  content: "◉";
  font-size: 10px;
  color: var(--gold-hot);
}

.planet-info-panel h1 {
  margin: 0;
  font-size: clamp(42px, 4.6vw, 76px);
  color: var(--ink);
  text-shadow: 0 0 28px rgba(240, 184, 71, .26);
}

.panel-subtitle {
  margin: 8px 0 16px;
  color: var(--gold-hot);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.3;
}

.panel-cover {
  display: none;
  width: min(38%, 180px);
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: #08050c;
  float: right;
  margin: 0 0 16px 22px;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft), 0 0 38px rgba(240, 184, 71, .18);
}

.planet-info-panel.is-focused .panel-cover {
  display: block;
}

.panel-promise {
  margin: 0 0 22px;
  color: var(--ink);
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.55;
}

.panel-details {
  display: grid;
  gap: 10px;
  clear: both;
  margin: 0 0 22px;
}

.panel-details div {
  padding: 14px 16px;
  border: 1px solid rgba(240, 184, 71, .26);
  background: rgba(10, 7, 14, .6);
  transition: border-color .22s var(--ease-out), background .22s var(--ease-out);
}

.panel-details div:hover {
  border-color: rgba(240, 184, 71, .55);
  background: rgba(20, 14, 26, .76);
}

.panel-details dt {
  margin: 0 0 5px;
  color: var(--gold-hot);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.panel-details dd {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.52;
  font-size: 15px;
}

.panel-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}

.codex-origin {
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(197, 144, 50, .12), rgba(29, 162, 216, .08));
  border: 1px solid var(--line);
}

.codex-origin h2 {
  margin: 0 0 8px;
  color: var(--gold-hot);
  font-family: var(--font-serif);
  font-size: 22px;
}

.codex-origin p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   Reveal-on-scroll
   ------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .04s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .20s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .28s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .36s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .44s; }

/* ------------------------------------------------------------
   Layout de secciones
   ------------------------------------------------------------ */

.section {
  position: relative;
  padding: clamp(60px, 9vw, 130px) clamp(20px, 6vw, 84px);
  border-top: 1px solid var(--line);
}

.section.tight { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.section.no-border { border-top: 0; }

.section--veiled {
  background: linear-gradient(180deg, var(--bg-veil), var(--bg) 80%);
}

.section--obsidian {
  background:
    radial-gradient(circle at 12% 18%, rgba(240, 184, 71, .12), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(29, 162, 216, .1), transparent 32%),
    linear-gradient(180deg, #06040a 0%, #030206 100%);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  min-width: 0;
}

.container.wide { max-width: 1360px; }
.container.narrow { max-width: 940px; }

/* ------------------------------------------------------------
   Manifesto narrativo
   ------------------------------------------------------------ */

.manifesto {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.manifesto-side h2 { margin: 0 0 18px; }

.manifesto-side p {
  margin: 0 0 16px;
  color: var(--muted-strong);
  font-size: 18px;
  line-height: 1.7;
}

.manifesto-side p strong {
  color: var(--gold-hot);
  font-weight: 700;
}

.manifesto-quote {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 18%, rgba(240, 184, 71, .14), transparent 40%),
    linear-gradient(160deg, rgba(20, 16, 28, .82), rgba(10, 8, 16, .92));
  box-shadow: var(--shadow-deep), inset 0 0 60px rgba(240, 184, 71, .06);
}

.manifesto-quote::before {
  content: "“";
  position: absolute;
  top: -30px;
  left: 18px;
  font-family: var(--font-serif);
  font-size: 180px;
  line-height: 1;
  color: rgba(240, 184, 71, .22);
  pointer-events: none;
}

.manifesto-quote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.4;
  color: var(--ink);
}

.manifesto-quote cite {
  display: block;
  margin-top: 20px;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Eras cíclicas — los 5 Soles + 4T cuántica
   ------------------------------------------------------------ */

.eras-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 40px;
}

.eras-track::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 4%;
  right: 4%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 184, 71, .5), rgba(29, 162, 216, .5), rgba(43, 191, 143, .55), transparent);
  z-index: 0;
}

.era-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 14px 22px;
  text-align: center;
}

.era-marker {
  position: absolute;
  top: 14px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--gold-hot);
  border-radius: 50%;
  background: var(--bg-deep);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-hot);
  transform: translateX(-50%);
  box-shadow: 0 0 18px rgba(240, 184, 71, .42);
}

.era-card.current .era-marker {
  border-color: var(--quetzal);
  color: var(--quetzal);
  box-shadow: 0 0 24px rgba(43, 191, 143, .6);
}

.era-glyph {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4vw, 56px);
  color: var(--gold-hot);
  text-shadow: 0 0 14px rgba(240, 184, 71, .42);
  line-height: 1;
}

.era-card.current .era-glyph {
  color: var(--quetzal);
  text-shadow: 0 0 20px rgba(43, 191, 143, .6);
}

.era-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}

.era-when {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.era-desc {
  margin: 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.5;
}

/* ------------------------------------------------------------
   Por qué ahora — 3 columnas
   ------------------------------------------------------------ */

.tri-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.tri-card {
  position: relative;
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(20, 16, 28, .68), rgba(10, 8, 16, .82));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.tri-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-hot), transparent);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}

.tri-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft), 0 0 32px rgba(240, 184, 71, .18);
}

.tri-card:hover::before { opacity: 1; }

.tri-num {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--gold-hot);
  line-height: 1;
}

.tri-card h3 {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--ink);
  font-family: var(--font-serif);
}

.tri-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   Comparativa (tabla mística)
   ------------------------------------------------------------ */

.compare-wrap { overflow-x: auto; }

.compare {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 30px;
}

.compare th, .compare td {
  padding: 18px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  vertical-align: top;
}

.compare thead th {
  position: sticky;
  top: 0;
  background: rgba(7, 6, 10, .96);
  color: var(--gold-hot);
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}

.compare thead th:first-child {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.compare tbody th {
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  background: rgba(20, 16, 28, .42);
  width: 26%;
}

.compare td { color: var(--muted-strong); }

.compare td.tla {
  background: linear-gradient(180deg, rgba(240, 184, 71, .08), transparent);
  color: var(--ink);
  border-left: 2px solid var(--gold-hot);
  border-right: 2px solid var(--gold-hot);
  font-weight: 600;
}

.compare tr:last-child td.tla { border-bottom: 2px solid var(--gold-hot); }
.compare tr:first-of-type td.tla { border-top: 2px solid var(--gold-hot); }

.compare td .check { color: var(--quetzal); font-weight: 800; }
.compare td .cross { color: var(--rojo-tlatoani); font-weight: 800; }

/* ------------------------------------------------------------
   Counters — prueba del aparato
   ------------------------------------------------------------ */

.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.counter-card {
  padding: 28px 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(240, 184, 71, .06), rgba(20, 16, 28, .68));
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
}

.counter-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(240, 184, 71, .14), rgba(20, 16, 28, .82));
}

.counter-value {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(46px, 6vw, 78px);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-hot);
  text-shadow: 0 0 24px rgba(240, 184, 71, .35);
}

.counter-suffix {
  font-size: .5em;
  color: var(--gold);
  margin-left: 2px;
  font-weight: 500;
}

.counter-label {
  display: block;
  margin-top: 10px;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.counter-detail {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ------------------------------------------------------------
   Códices gateway (reusable cross-page)
   ------------------------------------------------------------ */

.codex-gateway {
  position: relative;
  padding: clamp(54px, 8vw, 110px) clamp(20px, 5vw, 80px);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 14% 16%, rgba(240, 184, 71, .14), transparent 30%),
    radial-gradient(circle at 86% 90%, rgba(29, 162, 216, .12), transparent 32%),
    linear-gradient(180deg, #0c0810 0%, #060410 100%);
}

.band-intro {
  max-width: 940px;
  margin: 0 auto 40px;
  text-align: center;
}

.band-intro h2 { margin: 0 0 14px; color: var(--gold); }
.band-intro p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 18px;
  line-height: 1.65;
}

/* ============================================================
   Codex deck — cards comerciales con portada + ficha + CTAs
   Layout 3x2 en desktop, 1xN en mobile. SIN aire negro.
   ============================================================ */

.codex-deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 40px;
}

.codex-deck-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  /* align-items: stretch (default del grid) → cards iguales en altura, CTAs alineados al bottom */
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(20, 16, 28, .82), rgba(10, 8, 16, .92));
  border: 1px solid var(--line);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.codex-deck-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -10%, rgba(240, 184, 71, .22), transparent 50%);
  opacity: 0;
  transition: opacity .25s var(--ease-out);
  pointer-events: none;
}

.codex-deck-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-hot);
  background: linear-gradient(180deg, rgba(30, 22, 12, .94), rgba(12, 8, 18, .98));
  box-shadow: 0 22px 48px rgba(0, 0, 0, .55), 0 0 32px rgba(240, 184, 71, .26);
}

.codex-deck-card:hover::before { opacity: 1; }

/* Portada — SIN aire negro, ratio 2:3 estricto.
   align-self: start mantiene la cover en su tamaño natural aunque el
   padre se estire al alto del grid (cards iguales). */
.codex-deck-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  align-self: start;
  overflow: hidden;
  border: 1px solid rgba(240, 184, 71, .32);
  background: #08050c;
  transition: border-color .25s var(--ease-out), transform .35s var(--ease-out);
}

.codex-deck-cover picture {
  display: block;
  width: 100%;
  height: 100%;
}

.codex-deck-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .5s var(--ease-out);
}

.codex-deck-card:hover .codex-deck-cover {
  border-color: var(--gold-hot);
  box-shadow: 0 0 24px rgba(240, 184, 71, .35);
}

.codex-deck-card:hover .codex-deck-cover img {
  transform: scale(1.04);
}

/* Badge eliminado: era redundante con el "CÓDICE N" que ya está
   dentro del marco superior de cada portada del libro. */
.codex-deck-badge { display: none; }

/* Body de la card: contenido textual y CTAs.
   La portada del libro YA contiene el título y subtítulo del códice, así
   que el body NO los repite. Aporta complemento comercial: promesa de
   transformación, audiencia, qué resuelve, formatos y CTA.
   height: 100% para que .codex-deck-actions con margin-top: auto se
   alinee al bottom del card y los CTAs queden alineados entre cards. */
.codex-deck-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  height: 100%;
  align-self: stretch;
}

.codex-deck-promise {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  font-style: italic;
}

.codex-deck-meta {
  display: grid;
  gap: 6px;
  margin: 4px 0 4px;
  padding: 12px 14px;
  background: rgba(7, 5, 12, .56);
  border-left: 2px solid var(--gold-hot);
}

.codex-deck-meta > div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
}

.codex-deck-meta dt {
  margin: 0;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
}

.codex-deck-meta dd {
  margin: 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.45;
}

.codex-deck-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.codex-deck-chips li {
  padding: 4px 9px;
  background: rgba(20, 16, 28, .72);
  border: 1px solid rgba(240, 184, 71, .24);
  color: var(--gold-hot);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

.codex-deck-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
}

.codex-deck-actions .button {
  min-height: 38px;
  padding: 0 14px;
  font-size: 12px;
}

/* CTA grande de cierre del bloque */
.codex-deck-cta {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 36px;
  padding: 32px 36px;
  background:
    radial-gradient(circle at 20% 30%, rgba(240, 184, 71, .18), transparent 50%),
    linear-gradient(180deg, rgba(28, 20, 38, .92), rgba(12, 8, 18, .96));
  border: 1px solid var(--gold-hot);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .56), 0 0 50px rgba(240, 184, 71, .18);
}

.codex-deck-cta-eyebrow {
  margin: 0 0 6px;
  color: var(--gold-hot);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.codex-deck-cta h3 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 36px);
  color: var(--ink);
  line-height: 1.1;
}

.codex-deck-cta p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 15px;
  line-height: 1.55;
}

.codex-deck-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.codex-deck-cta-actions .button {
  width: 100%;
  justify-content: center;
}

/* ------------------------------------------------------------
   Genealogía — línea cronológica de pensamiento
   ------------------------------------------------------------ */

.genealogy {
  position: relative;
  margin-top: 36px;
  padding-left: 28px;
  border-left: 2px solid var(--line);
}

.genealogy::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-hot), var(--jade), var(--quetzal), transparent);
}

.genealogy-item {
  position: relative;
  padding: 18px 0 26px 22px;
}

.genealogy-item::before {
  content: "";
  position: absolute;
  top: 26px;
  left: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--gold-hot);
  box-shadow: 0 0 18px rgba(240, 184, 71, .42);
}

.genealogy-item h4 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
}

.genealogy-when {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-hot);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.genealogy-item p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.6;
  font-size: 15px;
}

/* ------------------------------------------------------------
   Lead magnet (opt-in)
   ------------------------------------------------------------ */

.lead-magnet {
  position: relative;
  padding: clamp(50px, 8vw, 100px) clamp(24px, 6vw, 80px);
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 184, 71, .18), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(29, 162, 216, .14), transparent 55%),
    linear-gradient(180deg, #100820 0%, #06040a 100%);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  overflow: hidden;
}

.lead-magnet::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    repeating-conic-gradient(from 0deg, rgba(240, 184, 71, .04) 0 1deg, transparent 1deg 18deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 60%, black 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 60%, black 100%);
  pointer-events: none;
}

.lead-magnet .container { position: relative; }

.magnet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.magnet-eyebrow {
  color: var(--gold-hot);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.magnet-side h2 {
  margin: 14px 0 16px;
  font-size: clamp(34px, 4.5vw, 56px);
  color: var(--ink);
  line-height: 1.05;
}

.magnet-side h2 em {
  font-style: italic;
  color: var(--gold-hot);
}

.magnet-side p {
  margin: 0 0 14px;
  color: var(--muted-strong);
  font-size: 17px;
  line-height: 1.65;
}

.magnet-list {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.magnet-list li {
  position: relative;
  padding-left: 26px;
  color: var(--muted-strong);
  font-size: 15px;
  line-height: 1.5;
}

.magnet-list li::before {
  content: "✶";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-hot);
  font-size: 14px;
}

.magnet-form {
  position: relative;
  padding: clamp(28px, 4vw, 42px);
  background: linear-gradient(180deg, rgba(20, 16, 28, .92), rgba(10, 8, 16, .96));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-deep), 0 0 60px rgba(240, 184, 71, .14);
}

.magnet-form::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(240, 184, 71, .22);
  pointer-events: none;
}

.magnet-form h3 {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--gold-hot);
}

.magnet-form p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }

.magnet-fields { display: grid; gap: 12px; }

.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.field-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(7, 6, 10, .82);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.field-input:focus {
  outline: none;
  border-color: var(--gold-hot);
  box-shadow: 0 0 0 1px var(--gold-hot), 0 0 28px rgba(240, 184, 71, .18);
}

.magnet-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.magnet-actions .button { width: 100%; justify-content: center; }

.magnet-form .note {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.magnet-form .note a { color: var(--gold-hot); }

.magnet-status {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: rgba(43, 191, 143, .08);
  color: var(--quetzal);
  font-size: 14px;
  font-weight: 700;
}

.magnet-status.is-visible { display: block; }
.magnet-status.is-error {
  border-color: rgba(181, 59, 59, .55);
  background: rgba(181, 59, 59, .1);
  color: #ff9a8d;
}

/* ------------------------------------------------------------
   FAQ acordeón
   ------------------------------------------------------------ */

.faq-list { display: grid; gap: 12px; margin-top: 36px; }

.faq-item {
  background: rgba(20, 16, 28, .58);
  border: 1px solid var(--line);
  transition: border-color .22s var(--ease-out), background .22s var(--ease-out);
}

.faq-item[open] {
  border-color: var(--line-strong);
  background: rgba(28, 20, 38, .76);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-hot);
  transition: transform .25s var(--ease-out);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-body {
  padding: 0 22px 22px;
  color: var(--muted-strong);
  font-size: 15px;
  line-height: 1.7;
}

.faq-body p { margin: 0 0 12px; }
.faq-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   CTA final
   ------------------------------------------------------------ */

.cta-band {
  position: relative;
  padding: clamp(60px, 8vw, 110px) clamp(24px, 6vw, 80px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 184, 71, .2), transparent 55%),
    linear-gradient(180deg, #0c0814 0%, #07050c 100%);
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(240, 184, 71, .3) 0 1px, transparent 2px);
  background-size: 28px 28px;
  opacity: .18;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
}

.cta-band .container { position: relative; }

.cta-band h2 {
  font-size: clamp(36px, 5vw, 64px);
  color: var(--ink);
  text-shadow: 0 0 28px rgba(240, 184, 71, .3);
}

.cta-band p {
  max-width: 720px;
  margin: 16px auto 30px;
  color: var(--muted-strong);
  font-size: 18px;
  line-height: 1.6;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Footer expandido
   ------------------------------------------------------------ */

footer.site-footer {
  position: relative;
  padding: clamp(40px, 6vw, 70px) clamp(20px, 5vw, 64px) 30px;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 36px;
}

.footer-brand h4 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--gold);
}

.footer-brand p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 360px;
}

.footer-col h5 {
  margin: 0 0 14px;
  color: var(--gold-hot);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.footer-col a {
  color: var(--muted-strong);
  font-size: 14px;
  text-decoration: none;
  transition: color .18s var(--ease-out);
}

.footer-col a:hover { color: var(--gold-hot); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 13px;
}

footer:not(.site-footer) {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 28px clamp(18px, 4vw, 48px);
  color: var(--muted);
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* ------------------------------------------------------------
   Códices page reusing tokens
   ------------------------------------------------------------ */

.content {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 78px) 20px;
  min-width: 0;
}

.content h1 { margin: 0 0 14px; color: var(--ink); }

.content > p, .content > .lead, .content li {
  color: var(--muted-strong);
  line-height: 1.7;
}

.content.codices-page { max-width: 1280px; }

.codices-decision {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  margin-top: 30px;
}

.decision-panel {
  padding: 22px;
  background: linear-gradient(180deg, rgba(240, 184, 71, .08), rgba(20, 16, 28, .82));
  border: 1px solid var(--line);
}

.decision-panel h2 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  color: var(--gold);
  font-size: 22px;
}

.decision-panel p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.6;
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 0;
}

.codex-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.codex-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
  padding: 24px;
  background:
    radial-gradient(circle at 16% 12%, rgba(240, 184, 71, .12), transparent 38%),
    linear-gradient(180deg, rgba(28, 20, 38, .88), rgba(10, 8, 16, .94));
  border: 1px solid var(--line);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}

.codex-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-hot);
  box-shadow: var(--shadow-soft), 0 0 38px rgba(240, 184, 71, .2);
}

.codex-cover-wrap {
  width: 100%;
  aspect-ratio: 2 / 3;
  margin: 0;
  border: 1px solid rgba(240, 184, 71, .34);
  background: #1a1208;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .42);
  overflow: hidden;
}

.codex-cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #1a1208;
}

.codex-number {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--gold-hot);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.codex-card h2 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  color: var(--gold-hot);
  font-size: 26px;
  line-height: 1.12;
}

.codex-subtitle {
  margin: 0 0 6px;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}

.codex-card p { margin: 0; color: var(--muted-strong); line-height: 1.6; font-size: 14px; }

.format-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 6px 0 2px;
}

.format-pill {
  padding: 5px 10px;
  border: 1px solid rgba(240, 184, 71, .32);
  color: var(--gold-hot);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}

.codex-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
}

.codex-actions .button {
  min-height: 40px;
  padding: 0 14px;
  font-size: 12px;
}

.codex-package-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ------------------------------------------------------------
   Comprar — value stacking
   ------------------------------------------------------------ */

.buy-hero {
  position: relative;
  padding: clamp(40px, 6vw, 90px) clamp(20px, 5vw, 80px);
  background:
    radial-gradient(circle at 20% 24%, rgba(240, 184, 71, .12), transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(29, 162, 216, .1), transparent 36%),
    linear-gradient(180deg, #0a0610 0%, #050308 100%);
  border-bottom: 1px solid var(--line);
}

.buy-hero .container {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
  min-height: min(720px, calc(100vh - 148px));
  min-width: 0;
}

.buy-hero h1 {
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  color: var(--ink);
}

.buy-hero .lead { margin-top: 18px; color: var(--muted-strong); }

.buy-hero-side {
  position: relative;
  display: flex;
  justify-content: center;
}

.buy-hero-side .badge {
  position: absolute;
  top: -16px;
  right: -10px;
  z-index: 2;
  padding: 10px 16px;
  background: var(--gold-hot);
  color: #150e04;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  transform: rotate(4deg);
}

.buy-hero-cover {
  width: auto;
  max-width: min(100%, 520px);
  max-height: min(72vh, 760px);
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: #08050c;
  border: 1px solid var(--line-strong);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .58), 0 0 50px rgba(240, 184, 71, .18);
}

.buy-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0 12px;
}

.buy-guide article {
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(240, 184, 71, .07), rgba(10, 8, 16, .85));
  border: 1px solid var(--line);
}

.buy-guide h2 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  color: var(--gold-hot);
  font-size: 22px;
}

.buy-guide p { margin: 0; color: var(--muted-strong); line-height: 1.6; font-size: 14px; }

.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 360px;
  padding: 26px;
  background:
    radial-gradient(circle at 18% 14%, rgba(240, 184, 71, .1), transparent 36%),
    linear-gradient(180deg, rgba(24, 18, 32, .88), rgba(8, 6, 14, .94));
  border: 1px solid var(--line);
  transition: transform .22s var(--ease-out), border-color .22s var(--ease-out), box-shadow .22s var(--ease-out);
}

.product:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft), 0 0 30px rgba(240, 184, 71, .14);
}

.product.recommended {
  border-color: var(--gold-hot);
  box-shadow: 0 0 0 1px var(--gold-hot), 0 24px 50px rgba(0, 0, 0, .5), 0 0 50px rgba(240, 184, 71, .26);
}

.product.recommended::before {
  content: "Recomendado";
  position: absolute;
  top: -14px;
  left: 22px;
  padding: 6px 14px;
  background: var(--gold-hot);
  color: #150e04;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}

.product h2 {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--gold-hot);
  font-size: 24px;
}

.price {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
}

.price small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; margin-top: 4px; font-family: var(--font-sans); }

.product p { margin: 0; color: var(--muted-strong); line-height: 1.55; font-size: 14px; }

.product .delivery { font-size: 13px; color: var(--muted); }

.product .includes {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.product .includes li {
  position: relative;
  padding-left: 22px;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.45;
}

.product .includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--quetzal);
  font-weight: 800;
}

.product .button { margin-top: auto; justify-content: center; }

.steps {
  margin-top: 36px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(240, 184, 71, .07), rgba(10, 8, 16, .82));
  border: 1px solid var(--line);
}

.steps h2 { margin: 0 0 14px; color: var(--gold); font-family: var(--font-serif); }

.steps ol {
  margin: 0;
  padding-left: 22px;
  color: var(--muted-strong);
  line-height: 1.65;
}

.steps ol li { margin-bottom: 8px; }
.steps ol li:last-child { margin-bottom: 0; }

.steps a { color: var(--gold-hot); text-decoration: underline; }

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.trust-pill {
  padding: 18px;
  background: rgba(20, 16, 28, .58);
  border: 1px solid var(--line);
  text-align: center;
}

.trust-pill strong {
  display: block;
  color: var(--gold-hot);
  font-family: var(--font-serif);
  font-size: 18px;
  margin-bottom: 4px;
}

.trust-pill span { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ------------------------------------------------------------
   Repositorio + Anexos
   ------------------------------------------------------------ */

.repo-page { max-width: 1180px; }

.qr-sheet {
  display: block;
  width: min(100%, 920px);
  margin: 28px 0;
  border: 1px solid var(--line);
  background: #eeddbf;
}

.repo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.repo-card {
  padding: 22px;
  background: linear-gradient(180deg, rgba(20, 16, 28, .78), rgba(10, 8, 16, .88));
  border: 1px solid var(--line);
  transition: border-color .22s var(--ease-out), transform .22s var(--ease-out);
}

.repo-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.repo-card h2 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  color: var(--gold-hot);
  font-size: 22px;
}

.repo-card p { margin: 0 0 12px; color: var(--muted-strong); line-height: 1.55; font-size: 14px; }

.repo-card a {
  color: var(--ink);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: rgba(240, 184, 71, .4);
}

.annex-list { display: grid; gap: 10px; margin-top: 28px; }

.annex-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(20, 16, 28, .7), rgba(10, 8, 16, .82));
  border: 1px solid var(--line);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out), transform .2s var(--ease-out);
}

.annex-item:hover {
  border-color: var(--gold-hot);
  background: linear-gradient(180deg, rgba(28, 20, 38, .82), rgba(12, 8, 18, .9));
  transform: translateX(4px);
}

.annex-item a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}

.annex-item a:hover { color: var(--gold-hot); }

.annex-item span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 1180px) {
  .planetarium-hero { grid-template-columns: minmax(560px, 58vw) minmax(340px, 1fr); }
  .planetarium-orbits { width: min(60vw, calc(100vh - 138px), 680px); }
  .planet-core { width: clamp(220px, 23vw, 330px); }
  .planet-body { width: clamp(94px, 8vw, 124px); }
  .gateway-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .codex-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .codex-deck-card { grid-template-columns: 160px 1fr; gap: 18px; padding: 18px; }
  .codex-deck-cta { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  .manifesto { grid-template-columns: 1fr; }
  .magnet-grid { grid-template-columns: 1fr; }
  .tri-grid { grid-template-columns: 1fr; }
  .counter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .codices-decision { grid-template-columns: 1fr; }
  .codex-grid { grid-template-columns: 1fr; }
  .repo-grid { grid-template-columns: 1fr; }
  .buy-guide { grid-template-columns: 1fr; }
  .products { grid-template-columns: 1fr; }
  .buy-hero .container { grid-template-columns: 1fr; }
  .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eras-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .eras-track::before { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 10px; padding-bottom: 14px; }
  nav { justify-content: flex-start; }
  .knowledge-ribbon { position: relative; top: auto; }
  .knowledge-ribbon span { padding: 11px 20px; font-size: 12px; animation-duration: 46s; }

  .planetarium-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .planetarium-stage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 14px;
    height: auto;
    min-height: auto;
    padding: 30px 18px 48px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }
  .planetarium-orbits {
    left: 50%;
    top: 50%;
    width: min(92vw, 620px);
    opacity: .22;
  }
  .planetarium-glyph { width: min(80vw, 480px); opacity: .2; }
  .zodiac-marks { display: none; }

  /* En mobile: tarjeta 2:3 estable con mural completo. Texto debajo. */
  .planet-body, .planet-core {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 auto 30px;
    transform: none;
    animation: none;
    --orbit-x: 0px;
    --orbit-y: 0px;
  }
  .planet-body:not(.planet-core) {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    background-color: #08050c;
    background-image: var(--planet-image);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .planet-body:not(.planet-core)::before { inset: -6px; border-radius: inherit; opacity: .5; }
  .planet-body:not(.planet-core)::after {
    /* Mostramos siempre el subtítulo debajo del label en mobile */
    opacity: 1;
    transform: translate(-50%, 0);
    top: calc(100% + 42px);
    white-space: normal;
  }
  .planet-body:not(.planet-core) .planet-text {
    top: calc(100% + 12px);
    background: linear-gradient(180deg, #ffd273, var(--gold-hot));
    color: #150e04;
    border-color: var(--gold-hot);
    text-shadow: 0 1px 0 rgba(255, 235, 195, .35);
  }
  /* Mobile: sin hover real, los planetas presumen su portada COMPLETA
     como cards 2:3 (incluido el sol central). En desktop sí son esferas
     que se expanden al hover. */
  .planet-core {
    grid-column: 1 / -1;
    width: min(60vw, 260px);
    aspect-ratio: 2 / 3;
    border-radius: 14px;
    margin-bottom: 58px;
    background-color: #08050c;
    background-image: var(--planet-image);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .planet-core .planet-text {
    font-size: clamp(20px, 5.6vw, 28px);
    padding: 9px 18px;
  }
  .planetarium-stage .planet-body:hover,
  .planetarium-stage .planet-body:focus-visible,
  .planetarium-stage .planet-body.is-active,
  .planetarium-stage .planet-core:hover,
  .planetarium-stage .planet-core:focus-visible,
  .planetarium-stage .planet-core.is-active {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    transform: translateY(-2px);
  }
  .planetarium-stage .planet-core:hover,
  .planetarium-stage .planet-core:focus-visible,
  .planetarium-stage .planet-core.is-active {
    aspect-ratio: 2 / 3;
    border-radius: 14px;
    max-width: min(60vw, 260px);
  }
  .planet-info-panel { max-width: 100%; max-height: none; padding: 30px 22px 48px; }
  .panel-cover { display: block; float: none; width: min(46vw, 200px); margin: 0 auto 18px; }
  .planet-info-panel.is-focused .panel-cover { display: block; }
  .gateway-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gateway-card { min-height: 0; }
  .codex-deck { grid-template-columns: 1fr; gap: 18px; }
  .codex-deck-card { grid-template-columns: 140px 1fr; gap: 16px; padding: 16px; }
  .codex-deck-cta { grid-template-columns: 1fr; gap: 18px; padding: 24px; text-align: center; }
  .codex-deck-cta-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .codex-deck-cta-actions .button { flex: 1; min-width: 180px; }
}

@media (max-width: 560px) {
  .topbar { padding: 12px 18px; }
  nav { width: 100%; gap: 10px; }
  nav a { font-size: 13px; }
  .content { padding-left: 16px; padding-right: 16px; }
  .content h1 { font-size: clamp(40px, 15vw, 58px); }
  .codex-card { padding: 18px; }
  .buy-hero { padding-left: 20px; padding-right: 20px; }
  .buy-hero h1 { font-size: clamp(38px, 14vw, 52px); }
  .planetarium-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .planet-body:not(.planet-core) { max-width: 160px; }
  .planet-core { width: min(72vw, 280px); }
  .eras-track { grid-template-columns: 1fr; }
  .counter-grid { grid-template-columns: 1fr; }
  .gateway-grid { grid-template-columns: 1fr; }
  .codex-deck-card { grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; }
  .codex-deck-body h3 { font-size: 20px; }
  .compare { min-width: 560px; }
  .trust-row { grid-template-columns: 1fr; }
  .magnet-actions .button { width: 100%; }
  footer:not(.site-footer) { flex-direction: column; }
}

/* ------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------ */

@keyframes ribbonDrift {
  0% { transform: translateX(6%); }
  100% { transform: translateX(-42%); }
}

@keyframes planetariumSlow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes glyphPulse {
  0%, 100% { opacity: .42; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { opacity: .58; transform: translate(-50%, -50%) rotate(2deg) scale(1.02); }
}

@keyframes planetGlow {
  0%, 100% {
    box-shadow:
      0 30px 86px rgba(0, 0, 0, .82),
      inset 0 0 32px rgba(0, 0, 0, .5),
      0 0 48px rgba(240, 184, 71, .22);
  }
  50% {
    box-shadow:
      0 36px 96px rgba(0, 0, 0, .86),
      inset 0 0 34px rgba(0, 0, 0, .44),
      0 0 64px rgba(29, 162, 216, .26),
      0 0 60px rgba(240, 184, 71, .26);
  }
}

@keyframes shimmerLine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================================
   Convergencia papal — Magnifica Humanitas (25 mayo 2026)
   Sección con paleta crema/púrpura para diferenciarse del resto
   y señalar la validación externa institucional.
   ============================================================ */

.section--papal {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 24%, rgba(216, 191, 124, .14), transparent 40%),
    radial-gradient(ellipse at 82% 78%, rgba(107, 58, 255, .12), transparent 46%),
    linear-gradient(180deg, #0d0814 0%, #07050c 100%);
  border-top: 1px solid rgba(216, 191, 124, .32);
  border-bottom: 1px solid rgba(216, 191, 124, .32);
}

.section--papal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(216, 191, 124, .8), rgba(107, 58, 255, .6), rgba(216, 191, 124, .8), transparent);
}

.papal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(216, 191, 124, .12);
  border: 1px solid rgba(216, 191, 124, .42);
  color: #e8d5a4 !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
}

.papal-eyebrow::before,
.papal-eyebrow::after {
  display: none !important;
}

.papal-pulse {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e8d5a4;
  box-shadow: 0 0 0 0 rgba(232, 213, 164, .6);
  animation: pulsePapal 2.6s ease-in-out infinite;
}

@keyframes pulsePapal {
  0%   { box-shadow: 0 0 0 0 rgba(232, 213, 164, .65); }
  70%  { box-shadow: 0 0 0 16px rgba(232, 213, 164, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 213, 164, 0); }
}

/* Quote papal — bloque destacado serif italic */
.papal-quote {
  position: relative;
  max-width: 920px;
  margin: 40px auto;
  padding: 38px clamp(28px, 4vw, 56px);
  background:
    linear-gradient(180deg, rgba(216, 191, 124, .08), rgba(20, 14, 28, .82));
  border-left: 4px solid #e8d5a4;
  border-right: 1px solid rgba(216, 191, 124, .26);
  border-top: 1px solid rgba(216, 191, 124, .26);
  border-bottom: 1px solid rgba(216, 191, 124, .26);
}

.papal-quote::before {
  content: "“";
  position: absolute;
  top: -22px;
  left: 22px;
  font-family: var(--font-serif);
  font-size: 110px;
  line-height: 1;
  color: rgba(216, 191, 124, .42);
  pointer-events: none;
}

.papal-quote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
  color: #fdf3da;
}

.papal-quote figcaption {
  margin-top: 18px;
  color: #c9b783;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Tabla de convergencia · 8 paralelos */
.convergence-table {
  display: grid;
  gap: 12px;
  margin: 40px auto 0;
  max-width: 1120px;
}

.convergence-row {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(20, 16, 28, .72), rgba(10, 8, 16, .88));
  border: 1px solid rgba(216, 191, 124, .22);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}

.convergence-row:hover {
  transform: translateY(-2px);
  border-color: rgba(216, 191, 124, .55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .42), 0 0 32px rgba(216, 191, 124, .14);
}

.convergence-head {
  background: linear-gradient(180deg, rgba(216, 191, 124, .18), rgba(20, 16, 28, .94));
  border-color: rgba(216, 191, 124, .55);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
}

.convergence-head [role="columnheader"] {
  color: #fdf3da;
  letter-spacing: .01em;
}

.convergence-row [role="cell"] strong {
  display: block;
  margin-bottom: 6px;
  color: #e8d5a4;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.convergence-row [role="cell"] p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.5;
}

.convergence-row [role="cell"]:first-child p {
  font-style: italic;
}

.convergence-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(216, 191, 124, .12);
  border: 1px solid rgba(216, 191, 124, .42);
  color: #e8d5a4;
  font-size: 22px;
  font-weight: 700;
}

.convergence-head .convergence-arrow {
  background: rgba(216, 191, 124, .22);
}

.convergence-note {
  max-width: 920px;
  margin: 36px auto 0;
  padding: 24px 28px;
  background: rgba(10, 8, 16, .58);
  border: 1px dashed rgba(216, 191, 124, .42);
}

.convergence-note p {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}
.convergence-note p:last-child { margin-bottom: 0; }
.convergence-note strong { color: #e8d5a4; }

.convergence-cite {
  color: var(--muted) !important;
  font-size: 14px !important;
  font-style: italic;
}

.convergence-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

/* Launch banner variante papal — más prominente */
.launch-banner--papal {
  background: linear-gradient(90deg, rgba(40, 28, 14, .96), rgba(60, 40, 18, .96), rgba(40, 28, 14, .96));
  border-bottom-color: rgba(216, 191, 124, .55);
  color: #fdf3da;
  font-size: 14px;
}

.launch-banner--papal .pulse {
  background: #e8d5a4;
  box-shadow: 0 0 0 0 rgba(232, 213, 164, .6);
  animation: pulsePapal 2.4s ease-in-out infinite;
}

.launch-banner--papal strong {
  color: #e8d5a4;
  font-weight: 800;
  letter-spacing: .02em;
}

.launch-banner--papal a {
  color: #ffd273;
  text-decoration: underline;
  text-decoration-color: rgba(232, 213, 164, .55);
  text-underline-offset: 3px;
  font-weight: 700;
}

/* Sticky CTA variante papal */
.sticky-cta--papal {
  background: linear-gradient(180deg, rgba(28, 20, 10, .94), rgba(16, 10, 4, .98));
  border-top-color: rgba(216, 191, 124, .55);
}

.sticky-cta--papal .sticky-cta-text strong {
  color: #e8d5a4;
}

/* Responsive */
@media (max-width: 760px) {
  .convergence-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 20px;
  }
  .convergence-arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
    transform: rotate(90deg);
  }
  .convergence-head {
    display: none; /* en mobile, los headers redundan con los strong de cada cell */
  }
  .convergence-actions .button { width: 100%; justify-content: center; }
  .papal-quote { padding: 28px 22px; }
  .papal-quote::before { font-size: 78px; top: -14px; }
}

/* ============================================================
   Hints de precio, microcopy CTA y trust micro-components
   ============================================================ */

.panel-price-hint {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .02em;
}
.panel-price-hint strong {
  color: var(--gold-hot);
  font-weight: 700;
}
.panel-price-hint a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(240, 184, 71, .42);
  text-underline-offset: 3px;
}
.panel-price-hint a:hover { color: var(--gold-hot); }

.cta-microcopy {
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .02em;
}
.cta-microcopy a {
  color: var(--gold-hot);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Prueba social — testimonios
   ============================================================ */

.social-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(20, 16, 28, .72), rgba(10, 8, 16, .82));
  border: 1px solid var(--line);
  position: relative;
}

.testimonial::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--gold-hot);
}

.testimonial blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}

.testimonial blockquote::before {
  content: "“";
  display: inline-block;
  margin-right: 4px;
  color: var(--gold-hot);
  font-size: 28px;
  vertical-align: -10px;
  line-height: 0;
}

.testimonial cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-style: normal;
}
.testimonial cite strong {
  color: var(--gold-hot);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}
.testimonial cite span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}

.proof-disclaimer {
  margin-top: 22px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

/* ============================================================
   Bloque "Sobre el autor"
   ============================================================ */

.author-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 32px;
  padding: 36px;
  background:
    radial-gradient(circle at 18% 12%, rgba(240, 184, 71, .12), transparent 38%),
    linear-gradient(180deg, rgba(28, 20, 38, .72), rgba(10, 8, 16, .88));
  border: 1px solid var(--line);
}

.author-glyph {
  width: 200px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(240, 184, 71, .12), transparent 70%);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 82px;
  font-weight: 600;
  color: var(--gold-hot);
  text-shadow: 0 0 32px rgba(240, 184, 71, .4);
}

.author-body h3 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--ink);
}
.author-role {
  margin: 0 0 18px;
  color: var(--gold-hot);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.author-body p {
  margin: 0 0 14px;
  color: var(--muted-strong);
  line-height: 1.65;
}
.author-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.author-credentials span {
  padding: 6px 12px;
  border: 1px solid rgba(240, 184, 71, .3);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ============================================================
   Garantía editorial
   ============================================================ */

.guarantee-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  align-items: center;
  margin-top: 32px;
  padding: 22px 26px;
  background: linear-gradient(180deg, rgba(43, 191, 143, .1), rgba(10, 8, 16, .88));
  border: 1px solid var(--line-quetzal);
}

.guarantee-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--quetzal);
  border-radius: 50%;
  color: var(--quetzal);
  font-family: var(--font-serif);
  font-size: 32px;
  background: rgba(43, 191, 143, .08);
}

.guarantee-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--quetzal);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
}

.guarantee-card p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 920px) {
  .social-proof { grid-template-columns: 1fr; }
  .author-card { grid-template-columns: 1fr; text-align: center; }
  .author-glyph { margin: 0 auto; width: 140px; font-size: 60px; }
  .author-credentials { justify-content: center; }
  .guarantee-card { grid-template-columns: 1fr; text-align: center; }
  .guarantee-icon { margin: 0 auto; }
}

/* ============================================================
   CRO / Marketing components
   - Skip-to-content link (A11y)
   - Sticky CTA bar (reveal on scroll)
   - Share buttons
   - Urgencia / launch banner
   - Cookie consent banner
   - Breadcrumb
   ============================================================ */

/* Skip-to-content (accesibilidad + SEO) */
.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 999;
  display: inline-block;
  padding: 10px 18px;
  background: var(--gold-hot);
  color: #150e04;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid var(--gold-hot);
  transform: translateY(-200%);
  transition: transform .2s var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Sticky CTA bar — aparece al hacer scroll después del hero */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(7, 5, 12, .92), rgba(7, 5, 12, .98));
  border-top: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 -16px 48px rgba(0, 0, 0, .6);
  transform: translateY(110%);
  transition: transform .45s var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }

.sticky-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sticky-cta-text strong {
  color: var(--gold-hot);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}
.sticky-cta-text span {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.3;
}
.sticky-cta-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.sticky-cta-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.sticky-cta-close:hover { border-color: var(--gold-hot); color: var(--gold-hot); }

/* Share buttons (Web Share API + fallback social) */
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0;
  padding: 16px 20px;
  background: rgba(20, 16, 28, .54);
  border: 1px solid var(--line);
}
.share-row .share-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-right: 6px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(7, 5, 12, .65);
  border: 1px solid var(--line);
  color: var(--muted-strong);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.share-btn:hover {
  border-color: var(--gold-hot);
  color: var(--gold-hot);
  background: rgba(20, 14, 26, .82);
  transform: translateY(-1px);
}
.share-btn[data-share="copy"].is-copied {
  background: rgba(43, 191, 143, .18);
  color: var(--quetzal);
  border-color: var(--quetzal);
}

/* Launch banner (urgencia editorial sin manipulación) */
.launch-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(43, 191, 143, .12), rgba(29, 162, 216, .12), rgba(43, 191, 143, .12));
  border-bottom: 1px solid var(--line-quetzal);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
}

.launch-banner span:last-child {
  min-width: 0;
  text-align: center;
}
.launch-banner .pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--quetzal);
  box-shadow: 0 0 0 0 rgba(43, 191, 143, .6);
  animation: pulse 2.4s ease-in-out infinite;
}
.launch-banner a {
  color: var(--gold-hot);
  text-decoration: underline;
  text-decoration-color: rgba(240, 184, 71, .42);
  text-underline-offset: 3px;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(43, 191, 143, .6); }
  70% { box-shadow: 0 0 0 14px rgba(43, 191, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 191, 143, 0); }
}

/* Cookie consent banner */
.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 38;
  display: none;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(20, 16, 28, .96), rgba(10, 8, 16, .98));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-deep), 0 0 40px rgba(240, 184, 71, .12);
}
.cookie-consent.is-visible { display: block; }
.cookie-consent p {
  margin: 0 0 14px;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.5;
}
.cookie-consent p strong { color: var(--gold-hot); }
.cookie-consent p a { color: var(--gold-hot); text-decoration: underline; }
.cookie-consent-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie-consent .button { min-height: 38px; padding: 0 14px; font-size: 12px; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .04em;
}
.breadcrumb a {
  color: var(--muted-strong);
  text-decoration: none;
  transition: color .18s;
}
.breadcrumb a:hover { color: var(--gold-hot); }
.breadcrumb .sep {
  color: var(--muted);
  opacity: .6;
}
.breadcrumb .current {
  color: var(--gold-hot);
  font-weight: 600;
}

/* Trust strip (debajo del topbar opcionalmente) */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 12px clamp(18px, 4vw, 48px);
  background: rgba(20, 16, 28, .5);
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.trust-strip span::before {
  content: "✓";
  color: var(--quetzal);
  font-weight: 900;
}

/* Ajuste para que el sticky CTA no tape contenido */
body.has-sticky-cta { padding-bottom: 76px; }

@media (max-width: 700px) {
  .sticky-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .sticky-cta-text strong { font-size: 16px; }
  .sticky-cta-actions { justify-content: stretch; }
  .sticky-cta-actions .button { flex: 1; min-height: 42px; }
  body.has-sticky-cta { padding-bottom: 120px; }
  .launch-banner { font-size: 12px; padding: 10px 14px; flex-wrap: wrap; }
  .share-row { padding: 12px 14px; gap: 8px; }
  .trust-strip { gap: 14px; font-size: 11px; }
}

/* Accesibilidad: usuarios con prefers-reduced-motion no ven movimiento */
@media (prefers-reduced-motion: reduce) {
  .planetarium-orbits,
  .planetarium-glyph,
  .planet-core,
  .knowledge-ribbon span,
  .launch-banner .pulse,
  .button::after { animation: none !important; }

  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .sticky-cta { transition: none; }
  html { scroll-behavior: auto; }
}