/* =========================================================================
   ASTRONUMEROLOGÍA · Calculadora — site styles
   Built on assets/tokens.css (single source of truth for brand tokens).
   Vars consumed by app.js (do NOT rename): --violet, --lime, --sun, --lav,
   --red, --stroke, --line.
   ========================================================================= */

:root {
  /* ── Bridge tokens used by app.js ─────────────────────────────────────── */
  --violet:   var(--color-purple-deep);    /* A,B,C,D — base */
  --lime:     var(--color-gold-mystic);    /* E,F,G,H — etapas */
  --sun:      var(--color-gold-soft);      /* I — subconsciente positivo */
  --lav:      var(--color-purple-300);     /* J — pareja / inconsciente */
  --red:      var(--color-burgundy);       /* K..S — bloqueos / sombra */
  --stroke:   var(--color-gold-400);       /* líneas del pináculo */
  --line:     var(--color-ink-100);        /* divisor */

  /* layout */
  --wrap:     1200px;
  --gutter:   24px;
  --section-y: clamp(56px, 8vw, 96px);
}

/* Scoped resets — solo dentro del contenedor del plugin para NO tocar el theme */
.astro-calc, .astro-calc * { box-sizing: border-box; }
.astro-calc img { max-width: 100%; height: auto; display: block; }
.astro-calc button { cursor: pointer; font: inherit; }

.astro-calc .wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.astro-calc .hidden { display: none !important; }

/* NOTA: el plugin NO renderiza ninguna nav/header — el theme se encarga.
   Se eliminaron los selectores .site-nav / .nav-menu / .nav-toggle / .brand
   porque colisionaban con .nav-menu (clase por defecto de wp_nav_menu) y
   pintaban subrayados sobre el menú del theme. */

/* =========================================================================
   HERO  (calmer · single soft nebula · few stars · no floating numerals)
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 112px) 0 clamp(72px, 9vw, 120px);
  isolation: isolate;
  text-align: center;
  background: var(--color-black-cosmic);
  color: var(--color-cream);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 30%, rgba(77, 35, 109, 0.42), transparent 70%),
    var(--color-black-cosmic);
  z-index: -2;
}
.hero__bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 14% 26%, rgba(232, 238, 255, 0.55), transparent 50%),
    radial-gradient(1px 1px at 82% 32%, rgba(232, 238, 255, 0.45), transparent 50%),
    radial-gradient(1.2px 1.2px at 68% 72%, rgba(217, 196, 142, 0.55), transparent 50%),
    radial-gradient(1px 1px at 22% 78%, rgba(232, 238, 255, 0.4), transparent 50%);
  opacity: 0.7;
}

.hero__inner {
  position: relative;
  max-width: 760px;
  z-index: 1;
}
.hero__title {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 12px 0 16px;
  text-transform: none;
  color: var(--color-cream);
}
.hero__lead {
  color: rgba(250, 247, 240, 0.78);
  font-size: clamp(15px, 1.15vw, 17px);
  max-width: 600px;
  margin: 0 auto 32px;
  line-height: 1.55;
}
.hero__note {
  margin-top: 18px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(250, 247, 240, 0.45);
}

/* eyebrow variants */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-mystic);
  margin: 0;
}
.eyebrow--gold { color: var(--color-gold-400); }
.eyebrow--burgundy {
  font-family: var(--font-italic-eyebrow);
  font-style: italic;
  font-size: var(--text-lg);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-burgundy);
}

/* =========================================================================
   HERO FORM (glass card · refined)
   ========================================================================= */
.form.glass {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  align-items: end;
  background: rgba(250, 247, 240, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 196, 142, 0.22);
  border-radius: var(--radius-xl);
  padding: 18px;
  text-align: left;
  box-shadow: 0 24px 64px rgba(5, 9, 18, 0.45);
  max-width: 720px;
  margin: 0 auto;
}
.form.glass .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form.glass label {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-gold-400);
}
.form.glass input {
  font-family: var(--font-body);
  font-size: var(--text-md);
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(217, 196, 142, 0.30);
  background: rgba(19, 16, 13, 0.55);
  color: var(--color-cream);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.form.glass input::placeholder { color: rgba(250, 247, 240, 0.45); }
.form.glass input:focus {
  border-color: var(--color-gold-mystic);
  box-shadow: 0 0 0 4px rgba(176, 144, 40, 0.18);
}
.form.glass input:invalid:not(:placeholder-shown) {
  border-color: rgba(139, 44, 61, 0.6);
}
.form.glass input[type="date"] { color-scheme: dark; }

.form__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 720px) {
  .form.glass { grid-template-columns: 1fr; }
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-black);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--color-gold-mystic);
  outline-offset: 4px;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--color-purple-deep);
  color: var(--color-cream);
  flex: 1 1 auto;
  min-width: 200px;
  padding: 16px 28px;
}
.btn--primary:hover {
  background: var(--color-purple-700);
  box-shadow: var(--shadow-glow-gold);
}

.btn--ghost {
  background: transparent;
  color: var(--color-cream);
  border-color: rgba(217, 196, 142, 0.4);
}
.btn--ghost:hover {
  background: rgba(217, 196, 142, 0.08);
  color: var(--color-gold-soft);
}

.btn--secondary {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-ink-200);
}
.btn--secondary:hover {
  border-color: var(--color-purple-deep);
  color: var(--color-purple-deep);
}

.btn--gold {
  background: var(--color-gold-mystic);
  color: var(--color-black-cosmic);
}
.btn--gold:hover {
  background: var(--color-gold-700);
  box-shadow: var(--shadow-glow-gold);
}

/* =========================================================================
   SECTIONS / CARDS
   ========================================================================= */
main.wrap { padding-top: 0; padding-bottom: 0; }
main > .section,
main > .card { margin-top: var(--section-y); }
main > .section:last-of-type { margin-bottom: var(--section-y); }

.section--cream {
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-2xl);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-sm);
}
.section--cosmic {
  background: var(--color-black-cosmic);
  color: var(--color-cream);
  border-radius: var(--radius-2xl);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
.section--cosmic::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 12% 18%, rgba(77, 35, 109, 0.45), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 82%, rgba(43, 79, 138, 0.30), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.section--cosmic > * { position: relative; z-index: 1; }

/* ── Variante MÍSTICA CLARA  (cream + lavanda + dorado) ──
   Se usa en la sección del Mapa Numerológico para que el pináculo
   no se vea tan oscuro y respire más. */
.section--mystic {
  background:
    radial-gradient(ellipse 60% 50% at 15% 12%, rgba(77, 35, 109, 0.08), transparent 70%),
    radial-gradient(ellipse 50% 45% at 90% 85%, rgba(176, 144, 40, 0.10), transparent 70%),
    linear-gradient(180deg, #F8F4FB 0%, var(--color-cream) 100%);
  border: 1px solid var(--color-gold-200);
  border-radius: var(--radius-2xl);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.section--mystic > * { position: relative; z-index: 1; }
.section--mystic h2 { color: var(--color-purple-deep); }
.section--mystic .eyebrow { color: var(--color-gold-mystic); }

.title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.title-row h2 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-black);
  margin: 8px 0 0;
}
.title-row--invert h2 { color: var(--color-cream); }

/* INTRO card */
.card--intro {
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-2xl);
  padding: clamp(32px, 5vw, 56px);
  box-shadow: var(--shadow-sm);
  margin-top: calc(var(--section-y) * 0.6);
}
.introBox { max-width: 720px; }
.introTitle {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  margin: 12px 0 14px;
  color: var(--color-black);
  text-transform: none;
}
.introLead { color: var(--color-ink-600); margin-bottom: 24px; }
.intro-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.intro-list li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-lg);
  background: var(--color-bone);
}
.intro-list__num {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  color: var(--color-gold-mystic);
}
.intro-list strong {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-black);
}
.intro-list span:not(.intro-list__num) {
  font-size: var(--text-sm);
  color: var(--color-ink-600);
}

/* AUDIO BTN */
.audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-ink-200);
  background: var(--color-white);
  color: var(--color-black);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.audio-btn:hover { border-color: var(--color-gold-mystic); color: var(--color-purple-deep); }
.audio-btn--invert {
  background: rgba(250, 247, 240, 0.06);
  border-color: rgba(217, 196, 142, 0.3);
  color: var(--color-cream);
}
.audio-btn--invert:hover { color: var(--color-gold-soft); border-color: var(--color-gold-soft); }

/* =========================================================================
   3 NÚMEROS CLAVE
   ========================================================================= */
.main3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 880px) { .main3 { grid-template-columns: 1fr; } }

.numCard {
  position: relative;
  padding: 32px 28px;
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-xl);
  background: var(--color-bone);
  text-align: left;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.numCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(19, 16, 13, 0.08);
}
.numCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(176, 144, 40, 0.10), transparent 55%);
  pointer-events: none;
}
.numCard .big {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(72px, 8vw, 110px);
  line-height: 1;
  color: var(--color-gold-mystic);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.numCard .subtitle {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--color-black);
  margin: 0 0 12px;
}
.numCard p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-600);
  margin: 0;
}
.numCard p b {
  font-family: var(--font-italic-eyebrow);
  font-style: italic;
  font-weight: 500;
  color: var(--color-purple-deep);
}

/* =========================================================================
   CHIPS + ACCORDION
   ========================================================================= */
.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-black);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--color-purple-deep); }
.chip .v {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gold-100);
  color: var(--color-gold-700);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
}
.chip.active {
  background: var(--color-purple-deep);
  border-color: var(--color-purple-deep);
  color: var(--color-cream);
}
.chip.active .v {
  background: var(--color-gold-mystic);
  color: var(--color-black-cosmic);
}

.accordion details {
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--color-white);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.accordion details[open] {
  border-color: var(--color-gold-400);
  box-shadow: var(--shadow-sm);
}
.accordion summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--color-black);
  font-weight: 500;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span {
  color: var(--color-gold-mystic);
  transition: transform var(--dur-base) var(--ease-out);
  font-size: 14px;
}
.accordion details[open] summary span { transform: rotate(180deg); }
.accordion .desc {
  padding: 0 20px 18px;
  color: var(--color-ink-600);
  line-height: 1.6;
  font-size: var(--text-sm);
}

/* =========================================================================
   MAPA / PINÁCULO  ·  tratamiento de constelación + geometría sagrada
   ========================================================================= */
/* Texto-guía didáctico arriba del mapa */
.mapHint {
  margin: -8px 0 22px;
  font-family: var(--font-italic-eyebrow);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-gold-soft);
  max-width: 620px;
  line-height: 1.5;
}
.mapHint::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-gold-mystic);
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 3px;
}

.mapGrid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) { .mapGrid { grid-template-columns: 1fr; } }

.canvasWrap {
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(43, 79, 138, 0.18), transparent 70%),
    rgba(5, 9, 18, 0.55);
  border: 1px solid rgba(217, 196, 142, 0.18);
  border-radius: var(--radius-2xl);
  padding: 20px 18px 18px;
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(5, 9, 18, 0.6);
}
/* Capa de fondo: anillos + triángulo + estrellas + etiquetas
   alineada con el padding del canvasWrap para que los anillos centren
   sobre el cluster de nodos del pináculo. */
.canvasWrap__geometry {
  position: absolute;
  top: 20px;
  left: 18px;
  right: 18px;
  bottom: 18px;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.canvasWrap > #pinaculoSvg,
.canvasWrap > .legend,
.canvasWrap > .nodeDesc,
.canvasWrap > .fs-bar { position: relative; z-index: 1; }

.canvasWrap .watermark {
  position: absolute;
  bottom: 14px;
  right: 18px;
  width: 110px;
  height: auto;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
#pinaculoSvg { display: block; max-width: 100%; height: auto; }

/* ---- LÍNEAS (gLines) ---------- */
/* app.js setea stroke="var(--stroke)" stroke-width="3"; CSS gana porque
   los presentation attrs tienen specificity 0. */
#pinaculoSvg > g[stroke] line {
  stroke: rgba(217, 196, 142, 0.45) !important;
  stroke-width: 1 !important;
  stroke-linecap: round;
}

/* ---- NODOS ---------- */
.node {
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
  transform-origin: center;
  transform-box: fill-box;
}
.node:hover { transform: scale(1.04); }

/* Reset del fill / stroke que setea inline app.js */
.node circle {
  fill: var(--color-purple-900);
  stroke-width: 2;
  filter: drop-shadow(0 2px 6px rgba(5, 9, 18, 0.6));
  transition: stroke var(--dur-fast) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}

/* Color del anillo según rol del nodo */
.node[data-key="A"] circle,
.node[data-key="B"] circle,
.node[data-key="C"] circle,
.node[data-key="D"] circle { stroke: var(--color-purple-400); }

.node[data-key="E"] circle,
.node[data-key="F"] circle,
.node[data-key="G"] circle,
.node[data-key="H"] circle { stroke: var(--color-gold-mystic); }

.node[data-key="I"] circle { stroke: var(--color-gold-soft); }
.node[data-key="J"] circle { stroke: var(--color-purple-300); }

.node[data-key="K"] circle,
.node[data-key="L"] circle,
.node[data-key="M"] circle,
.node[data-key="N"] circle,
.node[data-key="O"] circle,
.node[data-key="P"] circle,
.node[data-key="Q"] circle,
.node[data-key="R"] circle,
.node[data-key="S"] circle { stroke: var(--color-burgundy); }

/* Vibraciones complementarias: P (sombra) · T (triplicidad) · W (ausencias) */
.node[data-key="T"] circle { stroke: var(--color-gold-mystic); }
.node[data-key="W"] circle { stroke: var(--color-purple-300); }

/* W puede contener varios dígitos separados por coma → tipografía menor */
.node[data-key="W"] text:nth-of-type(1) {
  font-size: 11px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

/* Hover: aro brillante */
.node:hover circle { filter: drop-shadow(0 0 10px rgba(217, 196, 142, 0.55)); }

/* Texto: número grande dorado + letra pequeña debajo */
.node text {
  pointer-events: none;
  fill: var(--color-cream);
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0;
}
.node text:last-of-type {
  fill: rgba(217, 196, 142, 0.55) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 9px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Pulse al click */
.node.pulse circle {
  animation: nodePulse 1.4s var(--ease-out) 1;
}
@keyframes nodePulse {
  0%   { filter: drop-shadow(0 0 0 rgba(217, 196, 142, 0)) drop-shadow(0 2px 6px rgba(5, 9, 18, 0.6)); }
  40%  { filter: drop-shadow(0 0 22px rgba(217, 196, 142, 0.85)) drop-shadow(0 0 6px rgba(176, 144, 40, 0.7)); }
  100% { filter: drop-shadow(0 0 0 rgba(217, 196, 142, 0)) drop-shadow(0 2px 6px rgba(5, 9, 18, 0.6)); }
}

/* ---- LEGEND ---------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(217, 196, 142, 0.15);
  list-style: none;
  font-size: var(--text-xs);
  color: rgba(250, 247, 240, 0.7);
  letter-spacing: var(--tracking-wide);
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: help;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.legend__item:hover {
  background: rgba(217, 196, 142, 0.08);
  color: var(--color-gold-soft);
}
.legend--meta {
  font-style: italic;
  color: rgba(250, 247, 240, 0.4);
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
  font-size: 11px;
}
.legend__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.legend__dot--violet { background: var(--color-purple-400); box-shadow: 0 0 0 1px rgba(140, 99, 174, 0.5); }
.legend__dot--lime   { background: var(--color-gold-mystic); box-shadow: 0 0 0 1px rgba(176, 144, 40, 0.5); }
.legend__dot--sun    { background: var(--color-gold-soft); box-shadow: 0 0 0 1px rgba(217, 196, 142, 0.5); }
.legend__dot--lav    { background: var(--color-purple-300); box-shadow: 0 0 0 1px rgba(180, 152, 203, 0.5); }
.legend__dot--red    { background: var(--color-burgundy); box-shadow: 0 0 0 1px rgba(139, 44, 61, 0.5); }
/* Dot bicolor para "Complementarias" — gradiente dorado→púrpura */
.legend__dot--complementaria {
  background: linear-gradient(135deg, var(--color-gold-mystic) 0%, var(--color-purple-300) 100%);
  box-shadow: 0 0 0 1px rgba(176, 144, 40, 0.5);
}

/* =========================================================================
   MAPA · variante MÍSTICA CLARA
   Overrides cuando el pináculo vive en .section--mystic en lugar de cosmic.
   ========================================================================= */
.section--mystic .mapHint {
  color: var(--color-purple-deep);
  font-style: italic;
}
.section--mystic .mapHint::before { background: var(--color-gold-mystic); }

.section--mystic .canvasWrap {
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(176, 144, 40, 0.10), transparent 70%),
    var(--color-white);
  border: 1px solid var(--color-gold-200);
  box-shadow:
    inset 0 0 0 1px rgba(217, 196, 142, 0.15),
    var(--shadow-sm);
}
/* Anillos orbitales y triángulo: dorado más visible */
.section--mystic .canvasWrap__geometry > g[fill="none"] { stroke: rgba(176, 144, 40, 0.18) !important; }
/* Estrellas → ocultas en modo claro (ya no pegan) */
.section--mystic .canvasWrap__geometry > g[fill="rgba(232,238,255,0.6)"] { display: none; }
/* Nebulosa de fondo: dorado sutil sobre cream */
.section--mystic .canvasWrap__geometry rect[fill] {
  fill: url(#bgGlowLight) !important;
}
/* Bandas (Camino de Vida / Vibraciones complementarias) → dorado profundo,
   pero respetamos los colores propios de las zonas (positiva/negativa). */
.section--mystic .canvasWrap__geometry > g > text { fill: rgba(176, 144, 40, 0.75) !important; }
.section--mystic .zone-tag[data-zone="positiva"] text { fill: rgba(176, 144, 40, 0.90) !important; }
.section--mystic .zone-tag[data-zone="negativa"] text { fill: rgba(139, 44, 61, 0.85) !important; }
.section--mystic .zone-tag[data-zone="positiva"] line,
.section--mystic .zone-tag[data-zone="positiva"] path { stroke: rgba(176, 144, 40, 0.65) !important; }
.section--mystic .zone-tag[data-zone="negativa"] line,
.section--mystic .zone-tag[data-zone="negativa"] path { stroke: rgba(139, 44, 61, 0.65) !important; }

/* Líneas del pináculo: dorado profundo + visible sobre cream */
.section--mystic #pinaculoSvg > g[stroke] line {
  stroke: rgba(176, 144, 40, 0.55) !important;
  stroke-width: 1.2 !important;
}

/* Nodos: relleno blanco, anillo en color de rol (más oscuro para contraste) */
.section--mystic .node circle {
  fill: var(--color-white);
  filter: drop-shadow(0 2px 6px rgba(77, 35, 109, 0.10));
}
.section--mystic .node[data-key="A"] circle,
.section--mystic .node[data-key="B"] circle,
.section--mystic .node[data-key="C"] circle,
.section--mystic .node[data-key="D"] circle { stroke: var(--color-purple-deep); }
.section--mystic .node[data-key="E"] circle,
.section--mystic .node[data-key="F"] circle,
.section--mystic .node[data-key="G"] circle,
.section--mystic .node[data-key="H"] circle { stroke: var(--color-gold-mystic); }
.section--mystic .node[data-key="I"] circle { stroke: var(--color-gold-700); }
.section--mystic .node[data-key="J"] circle { stroke: var(--color-purple-500); }
.section--mystic .node[data-key="K"] circle,
.section--mystic .node[data-key="L"] circle,
.section--mystic .node[data-key="M"] circle,
.section--mystic .node[data-key="N"] circle,
.section--mystic .node[data-key="O"] circle,
.section--mystic .node[data-key="P"] circle,
.section--mystic .node[data-key="Q"] circle,
.section--mystic .node[data-key="R"] circle,
.section--mystic .node[data-key="S"] circle { stroke: var(--color-burgundy); }

/* Vibraciones complementarias en mystic */
.section--mystic .node[data-key="T"] circle { stroke: var(--color-gold-mystic); }
.section--mystic .node[data-key="W"] circle { stroke: var(--color-purple-500); }

.section--mystic .node:hover circle {
  filter: drop-shadow(0 0 12px rgba(176, 144, 40, 0.45));
}
.section--mystic .node text {
  fill: var(--color-black-cosmic) !important;
  font-weight: 500 !important;
}
.section--mystic .node text:last-of-type {
  fill: var(--color-ink-500) !important;
}
.section--mystic .node.pulse circle {
  animation: nodePulseLight 1.4s var(--ease-out) 1;
}
@keyframes nodePulseLight {
  0%   { filter: drop-shadow(0 0 0 rgba(176, 144, 40, 0)) drop-shadow(0 2px 6px rgba(77, 35, 109, 0.1)); }
  40%  { filter: drop-shadow(0 0 22px rgba(176, 144, 40, 0.65)) drop-shadow(0 0 6px rgba(217, 196, 142, 0.55)); }
  100% { filter: drop-shadow(0 0 0 rgba(176, 144, 40, 0)) drop-shadow(0 2px 6px rgba(77, 35, 109, 0.1)); }
}

/* nodeDesc en cream */
.section--mystic .nodeDesc {
  background: var(--color-bone);
  border-color: var(--color-gold-200);
  color: var(--color-ink-700);
}
.section--mystic .nodeDesc:has(b) {
  border-color: var(--color-gold-mystic);
  box-shadow: 0 0 0 4px rgba(176, 144, 40, 0.10);
  background: var(--color-gold-50);
}
.section--mystic .nodeDesc b:first-of-type {
  background: linear-gradient(180deg, var(--color-purple-deep) 0%, var(--color-purple-800) 100%);
  border-color: var(--color-gold-mystic);
  color: var(--color-gold-soft);
}
.section--mystic .nodeDesc b:nth-of-type(2) { color: var(--color-gold-700); }
.section--mystic .nodeDesc:not(:has(b)) { color: var(--color-ink-500); }

/* Lista lateral en blanco */
.section--mystic .mapList {
  background: var(--color-white);
  border-color: var(--color-gold-200);
  box-shadow: var(--shadow-sm);
}
.section--mystic .mapListScroller::-webkit-scrollbar-thumb {
  background: rgba(176, 144, 40, 0.4);
}
.section--mystic .mapListHeader {
  color: var(--color-purple-deep);
  border-color: var(--color-gold-200);
  font-weight: 600;
}
.section--mystic .mItem .mTitle { color: var(--color-ink-800); }
.section--mystic .mItem .mVal { color: var(--color-gold-700); font-weight: 500; }
.section--mystic .mTag {
  background: var(--color-gold-50);
  border-color: var(--color-gold-mystic);
  color: var(--color-purple-deep);
}
.section--mystic .mItem:hover { background: var(--color-gold-50); }
.section--mystic .mItem.active {
  background: var(--color-gold-50);
  border-color: var(--color-gold-mystic);
  box-shadow: 0 0 0 3px rgba(176, 144, 40, 0.12),
              0 6px 18px rgba(77, 35, 109, 0.06);
}
.section--mystic .mItem.active .mTag {
  background: var(--color-purple-deep);
  border-color: var(--color-gold-soft);
  color: var(--color-gold-soft);
}
.section--mystic .mItem.active .mTitle { color: var(--color-purple-deep); }
.section--mystic .mItem.active .mVal { color: var(--color-purple-deep); }
.section--mystic .pad { color: var(--color-ink-700); }
.section--mystic .pad b { color: var(--color-gold-700); }

/* Leyenda */
.section--mystic .legend {
  color: var(--color-ink-600);
  border-color: var(--color-gold-200);
}
.section--mystic .legend__item:hover {
  background: var(--color-gold-50);
  color: var(--color-purple-deep);
}
.section--mystic .legend--meta { color: var(--color-ink-500); font-style: italic; }

/* Botones FS */
.section--mystic .fs-btn {
  border-color: var(--color-gold-300);
  color: var(--color-ink-700);
  background: var(--color-white);
}
.section--mystic .fs-btn:hover {
  border-color: var(--color-gold-mystic);
  color: var(--color-purple-deep);
}

/* Audio btn dentro de mystic */
.section--mystic .audio-btn { background: var(--color-white); }

/* ---- nodeDesc ---------- */
/* JS injects:  <b>J</b> · Valor: <b>4</b><br>{descripción}
   We turn the first <b> into a circular gold tag mirroring .mTag */
.nodeDesc {
  position: relative;
  margin-top: 20px;
  padding: 18px 20px 18px 72px;
  background: rgba(250, 247, 240, 0.04);
  border: 1px solid rgba(217, 196, 142, 0.20);
  border-radius: var(--radius-lg);
  color: rgba(250, 247, 240, 0.85);
  font-size: var(--text-sm);
  line-height: 1.65;
  min-height: 64px;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.nodeDesc:has(b) {
  border-color: rgba(217, 196, 142, 0.45);
  box-shadow: 0 0 0 4px rgba(176, 144, 40, 0.08);
}
.nodeDesc b:first-of-type {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-purple-700) 0%, var(--color-purple-900) 100%);
  border: 1px solid var(--color-gold-mystic);
  color: var(--color-gold-soft);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  box-shadow: var(--shadow-glow-gold);
}
.nodeDesc b:nth-of-type(2) {
  color: var(--color-gold-soft);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  margin-left: 4px;
}
/* When the description is the default placeholder (no <b>'s), pad-left collapses */
.nodeDesc:not(:has(b)) { padding-left: 20px; font-style: italic; color: rgba(250, 247, 240, 0.55); }

/* Flash al actualizar contenido (vía MutationObserver en index.html) */
.nodeDesc.is-flash { animation: descFlash 700ms var(--ease-out); }
@keyframes descFlash {
  0%   { box-shadow: 0 0 0 0 rgba(176, 144, 40, 0.0); }
  35%  { box-shadow: 0 0 0 6px rgba(176, 144, 40, 0.18); }
  100% { box-shadow: 0 0 0 4px rgba(176, 144, 40, 0.08); }
}

.fs-bar { margin-top: 12px; display: flex; justify-content: flex-end; }
.fs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(217, 196, 142, 0.30);
  color: var(--color-cream);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.fs-btn:hover { border-color: var(--color-gold-mystic); }

/* =========================================================================
   MODO PRESENTACIÓN  ·  body.is-presenting → #mapGrid pasa a fullscreen virtual
   Cross-device. NO usa Fullscreen API (iOS no la soporta en elementos no-video).
   ========================================================================= */
html:has(body.is-presenting),
body.is-presenting {
  overflow: hidden !important;
  height: 100%;
}

body.is-presenting #mapGrid {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;            /* fallback */
  height: 100dvh;           /* viewport dinámico iOS/Android */
  z-index: var(--z-modal);
  margin: 0;
  padding: 24px;
  background: linear-gradient(180deg, #F8F4FB 0%, #FAF7F0 100%);
  /* Flex column es más fiable que grid en Android para fullscreen virtual */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

/* Niños del flex: tomar tamaño correcto y no empujarse */
body.is-presenting #mapGrid > .canvasWrap {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  background: var(--color-white) !important;
  border: 1px solid var(--color-gold-200) !important;
  box-shadow: var(--shadow-md);
}
body.is-presenting #mapGrid > .mapList {
  flex: 0 0 360px;
  background: var(--color-white) !important;
  border: 1px solid var(--color-gold-200) !important;
  max-height: none;
  align-self: stretch;
}
body.is-presenting #mapGrid .mapListScroller {
  max-height: none;
  overflow: visible;
}
body.is-presenting #mapGrid .nodeDesc {
  background: var(--color-bone);
  color: var(--color-ink-700);
}
body.is-presenting #mapGrid .legend {
  color: var(--color-ink-700);
}
body.is-presenting #mapGrid .legend--meta {
  color: var(--color-ink-500);
}

/* En presentación, ocultamos la barra original — el botón X de la esquina la reemplaza */
body.is-presenting .fs-bar { display: none !important; }

/* ── Botón X de salida — esquina superior derecha, dorado con X blanca ── */
.presentation-close {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--color-gold-soft);
  border-radius: 50%;
  background: var(--color-gold-mystic);
  color: var(--color-white);
  cursor: pointer;
  z-index: calc(var(--z-modal) + 10);
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(176, 144, 40, 0.45),
              0 0 0 6px rgba(176, 144, 40, 0.10);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.presentation-close:hover,
.presentation-close:focus-visible {
  background: var(--color-gold-700);
  transform: scale(1.06) rotate(90deg);
  outline: none;
  box-shadow: 0 14px 36px rgba(176, 144, 40, 0.55),
              0 0 0 8px rgba(176, 144, 40, 0.15);
}
.presentation-close:active { transform: scale(0.96); }

body.is-presenting .presentation-close { display: inline-flex; }

/* En móvil un poco más chiquito y separación menor */
@media (max-width: 640px) {
  .presentation-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
}

@media print {
  .presentation-close { display: none !important; }
}

/* En presentación, ocultar elementos flotantes que estorbarían */
body.is-presenting .action-dock,
body.is-presenting .scroll-hint,
body.is-presenting .toast { display: none !important; }

/* ── TABLET / MOBILE: flex columna, todo apilado, scroll vertical ── */
@media (max-width: 980px) {
  body.is-presenting #mapGrid {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }
  body.is-presenting #mapGrid > .canvasWrap,
  body.is-presenting #mapGrid > .mapList {
    flex: 0 0 auto;
    width: 100%;
    align-self: stretch;
  }
}

/* ── MOBILE pequeño ── */
@media (max-width: 640px) {
  body.is-presenting #mapGrid {
    padding: 12px;
    gap: 12px;
  }
  body.is-presenting #mapGrid > .canvasWrap { padding: 10px; }
  body.is-presenting #mapGrid > .mapList { padding: 12px; }
  body.is-presenting #mapGrid .mItem .mTitle { font-size: 13px; }
  body.is-presenting #mapGrid .mapListHeader { font-size: 10px; }
  /* Asegurar que el SVG no fuerce un mínimo que rompa el layout */
  body.is-presenting #pinaculoSvg { min-height: 0 !important; }
}

@media print {
  body.is-presenting #mapGrid {
    position: static !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* MAP LIST */
.mapList {
  background: rgba(250, 247, 240, 0.04);
  border: 1px solid rgba(217, 196, 142, 0.18);
  border-radius: var(--radius-xl);
  padding: 18px;
  max-height: 760px;
}
.mapListScroller {
  max-height: 720px;
  overflow-y: auto;
  padding-right: 6px;
}
.mapListScroller::-webkit-scrollbar { width: 6px; }
.mapListScroller::-webkit-scrollbar-thumb { background: rgba(217, 196, 142, 0.3); border-radius: 3px; }

.mapListHeader {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-gold-soft);
  margin: 18px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(217, 196, 142, 0.14);
}
.mapListHeader:first-child { margin-top: 0; }

.mItem {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.mItem:hover { background: rgba(217, 196, 142, 0.06); }
.mItem.active {
  background: rgba(217, 196, 142, 0.12);
  border-color: var(--color-gold-mystic);
  box-shadow: 0 0 0 3px rgba(176, 144, 40, 0.10),
              0 8px 24px rgba(5, 9, 18, 0.45);
}
.mItem.active::before {
  content: "";
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 22px;
  background: var(--color-gold-mystic);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(176, 144, 40, 0.7);
}
.mItem.active .mTag {
  background: var(--color-purple-deep);
  border-color: var(--color-gold-soft);
  color: var(--color-gold-soft);
  box-shadow: 0 0 0 1px rgba(217, 196, 142, 0.35);
}
.mItem.active .mTitle { color: var(--color-gold-soft); }
.mItem.active .mVal   { color: var(--color-gold-soft); }

.mTag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-purple-900);
  border: 1px solid rgba(217, 196, 142, 0.35);
  color: var(--color-gold-soft);
  font-family: var(--font-display);
  font-size: 13px;
  transition: all var(--dur-fast) var(--ease-out);
}
.mTitle {
  font-size: var(--text-sm);
  color: var(--color-cream);
  transition: color var(--dur-fast) var(--ease-out);
}
.mVal {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-gold-mystic);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.pad { padding: 8px 12px; color: rgba(250, 247, 240, 0.7); font-size: var(--text-sm); }

/* =========================================================================
   STAGES (Etapas de vida)
   ========================================================================= */
.stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 980px) { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stages { grid-template-columns: 1fr; } }

.stage {
  position: relative;
  padding: 28px 22px;
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-xl);
  background: var(--color-bone);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.stage .big {
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 84px);
  line-height: 1;
  color: var(--color-gold-mystic);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.stage div b { font-weight: 600; color: var(--color-black); }
.stage div { color: var(--color-ink-600); font-size: var(--text-sm); line-height: 1.6; }
.stage p {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-600);
  font-family: var(--font-italic-eyebrow);
  font-style: italic;
}
.stage.active {
  border-color: var(--color-gold-mystic);
  box-shadow: var(--shadow-glow-gold);
  background: var(--color-white);
}
.stage.active::after {
  content: "Etapa actual";
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-gold-700);
  background: var(--color-gold-100);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.ctaBar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--color-ink-100);
}

/* =========================================================================
   ACTION DOCK FLOTANTE  (aparece después de calcular)
   ========================================================================= */
.action-dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(19, 16, 13, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(217, 196, 142, 0.32);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px rgba(5, 9, 18, 0.50),
              0 0 0 1px rgba(217, 196, 142, 0.08) inset;
  transform: translateY(0) scale(1);
  opacity: 1;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.action-dock.hidden {
  display: flex !important;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
}
.action-dock__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-soft);
}
.action-dock__buttons {
  display: flex;
  gap: 8px;
}

.btn--sm {
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 600px) {
  .action-dock {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .action-dock__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .btn--sm { width: 100%; }
}

@media print {
  .action-dock { display: none !important; }
}

/* =========================================================================
   SCROLL HINT  ·  flota tras calcular invitando a bajar a los resultados
   ========================================================================= */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-gold-mystic) 0%, var(--color-gold-700) 100%);
  color: var(--color-black-cosmic);
  border: 2px solid rgba(255, 255, 255, 0.85);
  cursor: pointer;
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(176, 144, 40, 0.45),
              0 0 0 6px rgba(176, 144, 40, 0.12);
  animation: scrollHintBounce 1.8s ease-in-out infinite;
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
/* Forzamos fill:none — algunos themes aplican svg path { fill: currentColor } y "rellenan" la flecha hasta hacerla desaparecer */
.scroll-hint svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  pointer-events: none;
}
.scroll-hint svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scroll-hint:hover {
  background: linear-gradient(180deg, var(--color-gold-700) 0%, var(--color-burgundy) 120%);
  color: var(--color-cream);
}
.scroll-hint.hidden {
  display: inline-flex !important;
  opacity: 0;
  pointer-events: none;
}
@keyframes scrollHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}
@media (max-width: 600px) {
  .scroll-hint {
    bottom: 110px; /* deja espacio al action dock que ahora es full-width */
    width: 52px; height: 52px;
  }
}
@media print {
  .scroll-hint { display: none !important; }
}

/* =========================================================================
   TOAST  ·  notificación pasajera para "Enlace copiado"
   ========================================================================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(40px);
  z-index: var(--z-toast);
  padding: 14px 22px;
  background: rgba(19, 16, 13, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-gold-soft);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  border: 1px solid rgba(217, 196, 142, 0.35);
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 16px 40px rgba(5, 9, 18, 0.55);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  max-width: calc(100vw - 32px);
}
.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media print {
  .toast { display: none !important; }
}


/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  margin-top: var(--section-y);
  padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 4vw, 40px);
  background: var(--color-black-cosmic);
  color: rgba(250, 247, 240, 0.7);
  border-top: 1px solid rgba(217, 196, 142, 0.18);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__brand img { height: 36px; opacity: 0.95; }
.site-footer__brand p {
  margin: 12px 0 0;
  font-size: var(--text-sm);
  max-width: 340px;
  color: rgba(250, 247, 240, 0.55);
}
.site-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(250, 247, 240, 0.45);
  text-align: right;
}
@media (max-width: 720px) {
  .site-footer__meta { text-align: left; }
}

/* =========================================================================
   FADE animation hook (set inline by app.js)
   ========================================================================= */
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* =========================================================================
   RESPONSIVE  ·  TABLET (≤ 980 px)  ·  PHONE (≤ 640 px)
   Más breakpoints para suavizar la transición entre pantallas.
   ========================================================================= */
@media (max-width: 1080px) {
  :root { --gutter: 20px; }
  .mapGrid { grid-template-columns: 1fr 320px; gap: 20px; }
  .mapList { max-height: 660px; }
  .mapListScroller { max-height: 620px; }
}

@media (max-width: 880px) {
  :root { --section-y: 56px; }

  /* Hero más compacto */
  .hero { padding: 56px 0 64px; }
  .hero__title { font-size: clamp(28px, 7vw, 38px); }
  .hero__lead   { font-size: 15px; }

  /* Form: vertical, full-width */
  .form.glass { padding: 14px; gap: 12px; }
  .form__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn--primary { min-width: 0; padding: 14px 20px; }

  /* Cards: padding razonable */
  .section--cream,
  .section--cosmic,
  .section--mystic { padding: 24px 18px; border-radius: var(--radius-xl); }
  .card--intro { padding: 28px 22px; }

  /* Title-row: stack title + audio btn */
  .title-row { align-items: flex-start; gap: 12px; }
  .title-row h2 { font-size: clamp(24px, 5vw, 30px); }

  /* Mapa: lista debajo del lienzo, sin altura fija */
  .mapGrid { grid-template-columns: 1fr; gap: 18px; }
  .mapList { max-height: none; }
  .mapListScroller { max-height: none; overflow: visible; padding-right: 0; }
  .canvasWrap { padding: 14px 12px 12px; }

  /* Stages: 2x2 (no 1col) — usa mejor el ancho */
  .stages { grid-template-columns: repeat(2, 1fr); }
  .stage { padding: 22px 18px; }

  /* Tres números clave: 1 col centrado */
  .main3 { grid-template-columns: 1fr; }
  .numCard { padding: 28px 24px; }
  .numCard .big { font-size: 84px; }

  /* Chips se hacen más compactos */
  .chip { padding: 8px 12px; font-size: 13px; }

  /* nodeDesc */
  .nodeDesc { padding: 16px 16px 16px 64px; }
  .nodeDesc b:first-of-type { width: 36px; height: 36px; font-size: 14px; left: 14px; }

  /* Action dock */
  .action-dock { padding: 12px 14px; }
  .action-dock__label { font-size: 9px; }
}

@media (max-width: 540px) {
  .hero__title { font-size: 26px; line-height: 1.2; }
  .hero__lead { font-size: 14px; }

  .stages { grid-template-columns: 1fr; }
  .intro-list { grid-template-columns: 1fr; }
  .ctaBar { justify-content: stretch; }
  .ctaBar .btn { flex: 1; }

  .legend { gap: 4px 10px; }
  .legend__item { padding: 3px 6px; font-size: 11px; }

  /* Pináculo SVG: garantizar que se vea entero */
  #pinaculoSvg { min-height: 480px; }
  .canvasWrap__geometry text { font-size: 9px !important; letter-spacing: 2px !important; }
}

/* =========================================================================
   PRINT
   ========================================================================= */
.print-header,
.print-footer { display: none; }

@media print {
  /* ── Página A4 con márgenes razonables ── */
  @page {
    size: A4;
    margin: 16mm 14mm 18mm 14mm;
  }

  /* Forzar que los colores impriman (Chrome/Safari) */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  html, body {
    background: white !important;
    color: #111 !important;
    font-size: 11pt;
  }

  /* Ocultos en print */
  .site-nav,
  .site-footer,
  .hero,
  .audio-btn,
  .ctaBar,
  .fs-bar,
  .mapHint,
  .action-dock,
  #intro { display: none !important; }

  main.wrap { padding: 0 !important; max-width: none !important; }

  .section--cream,
  .section--cosmic,
  .section--mystic {
    background: white !important;
    color: #111 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    border-radius: 0 !important;
    margin: 14px 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .section--cosmic::before,
  .section--mystic::before { display: none !important; }
  .title-row h2,
  .title-row--invert h2 {
    color: #111 !important;
    font-size: 22px !important;
    border-bottom: 1px solid #d9c48e;
    padding-bottom: 6px;
  }
  .title-row .eyebrow,
  .title-row .eyebrow--gold { color: #B09028 !important; }

  /* ── Pináculo imprimible: claro, hairline gris, anillos gold-soft ── */
  .canvasWrap {
    background: #FAF7F0 !important;
    border: 1px solid #E8E1CC !important;
    box-shadow: none !important;
    padding: 16px !important;
  }
  /* Fondo decorativo: ocultar nebulosa + estrellas, mantener anillos suaves */
  .canvasWrap__geometry rect[fill],
  .canvasWrap__geometry > g[fill="rgba(232,238,255,0.6)"] { display: none !important; }
  .canvasWrap__geometry > g[fill="none"] { stroke: #E8E1CC !important; }
  .canvasWrap__geometry text { fill: #B09028 !important; opacity: 0.85; }
  .canvasWrap__geometry line { stroke: #B09028 !important; opacity: 0.45; }

  /* Líneas del pináculo en gris medio */
  #pinaculoSvg > g[stroke] line {
    stroke: #948877 !important;
    stroke-width: 1 !important;
  }

  /* Nodos: relleno blanco, anillo en color de rol */
  .node circle {
    fill: white !important;
    filter: none !important;
    stroke-width: 1.8 !important;
  }
  .node text {
    fill: #13100D !important;
    font-weight: 500 !important;
  }
  .node text:last-of-type {
    fill: #6B6055 !important;
  }

  /* nodeDesc en cream */
  .nodeDesc {
    background: #FAF7F0 !important;
    color: #111 !important;
    border-color: #E8E1CC !important;
    box-shadow: none !important;
    padding-left: 64px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .nodeDesc b:first-of-type {
    background: #4D236D !important;
    border-color: #B09028 !important;
    color: #F8F2E4 !important;
    box-shadow: none !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  .nodeDesc b:nth-of-type(2) { color: #B09028 !important; }

  /* Mapa lista lateral: 2 columnas para aprovechar el ancho de la hoja */
  .mapGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .mapList {
    background: white !important;
    border: 1px solid #E8E1CC !important;
    max-height: none !important;
    padding: 14px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .mapListScroller {
    max-height: none !important;
    overflow: visible !important;
    column-count: 2;
    column-gap: 24px;
    column-rule: 1px solid #F0E6CC;
  }
  .mapListHeader {
    color: #4D236D !important;
    border-color: #E8E1CC !important;
    break-after: avoid;
    page-break-after: avoid;
  }
  .mItem {
    color: #111 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .mItem .mTitle { color: #111 !important; }
  .mItem .mVal { color: #B09028 !important; }
  .mTag {
    background: #FAF7F0 !important;
    color: #4D236D !important;
    border-color: #B09028 !important;
  }
  .mItem.active {
    background: #FCF9F1 !important;
    border-color: #B09028 !important;
    box-shadow: none !important;
  }
  .mItem.active::before { display: none; }
  .pad { color: #444 !important; }

  /* Etapas: 2x2 en print, no 4 col chiquitas */
  .stages {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .stage {
    background: white !important;
    border: 1px solid #E8E1CC !important;
    padding: 16px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .stage.active {
    background: #FCF9F1 !important;
    border-color: #B09028 !important;
    box-shadow: none !important;
  }
  .stage.active::after {
    display: inline-block !important;
    background: #F8F2E4 !important;
    color: #B09028 !important;
    border: 1px solid #E0C97A;
  }
  .stage .big { color: #B09028 !important; font-size: 56px !important; }

  /* Tres números clave: 1 fila, 3 columnas en print */
  .main3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  .numCard {
    background: white !important;
    border: 1px solid #E8E1CC !important;
    box-shadow: none !important;
    padding: 18px 16px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .numCard::before { display: none !important; }
  .numCard .big { color: #B09028 !important; font-size: 60px !important; }
  .numCard .subtitle { font-size: 14px !important; }
  .numCard p { font-size: 11px !important; }

  /* Chips & legenda: ocultos */
  .chips, .legend, .legend--meta { display: none !important; }
  .accordion details {
    border: 1px solid #E8E1CC !important;
    background: white !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .accordion details[open] { box-shadow: none !important; }
  .accordion details:not([open]) { display: none !important; } /* solo imprime los abiertos */

  /* Saltos de página estratégicos */
  #mapa { page-break-before: always; break-before: page; }
  #stages { page-break-before: avoid; break-before: avoid; }

  /* Encabezado / pie de página de impresión */
  .print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #B09028;
    margin-bottom: 16px;
  }
  .print-header img { height: 38px; }
  .ph-title { font-family: var(--font-headline); font-weight: 600; font-size: 18px; margin-bottom: 4px; color: #4D236D; }
  .ph-meta { font-size: 12px; color: #444; }

  .print-footer {
    display: block !important;
    text-align: center;
    border-top: 1px solid #E8E1CC;
    padding-top: 10px;
    margin-top: 24px;
    font-size: 11px;
    color: #6B6055;
    letter-spacing: 0.04em;
  }
}