/* El Oráculo ERA · "Mandala y aurora"

   Los valores (colores, degradados, tamaños) vienen del diseño hecho en
   Claude Design. Lo que cambia respecto al mockup es lo que un teléfono de
   verdad exige: el alto es la ventana y no 844px fijos, y el cuerpo de cada
   escena puede desplazarse cuando la lectura es larga. */

:root {
  --noche: #04070F;
  --noche-media: #070D1E;
  --noche-alta: #101A33;
  --oro: #F0DCA4;
  --oro-fuerte: #FFF4E2;
  --oro-medio: #E0C078;
  --oro-hondo: #C9A24A;
  --marfil: #F8F1DF;
  --marfil-suave: #F3ECDE;
  --marfil-tenue: #DED5C2;
  --gris-voz: #ADA595;
  --gris-paso: #9C9585;
  /* El cierre toma el color del elemento de la carta. Tierra por defecto. */
  --elemento-tinte: rgba(62,70,41,.5);
  --elemento-borde: rgba(139,150,110,.5);
  --elemento-fondo: linear-gradient(165deg, #4E5633 0%, #333A21 58%, #1B200C 100%);
  --elemento-sombra: 0 18px 50px -16px rgba(90,99,64,.7);
  --elemento-kicker: #FFF6E4;
  --elemento-copy: #F0F3E6;
  --elemento-tinta: #2b3218;
  --serif: "Cormorant Garamond", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --sans: Geist, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--noche);
  color: var(--marfil-suave);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- El cielo ---------- */
.cielo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cielo__fondo { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 60% at 50% 8%, var(--noche-alta) 0%, var(--noche-media) 46%, var(--noche) 100%); }
.cielo__aurora {
  position: absolute; inset: -30%; opacity: .85; transform: rotate(-14deg); filter: blur(16px);
  background: linear-gradient(76deg, transparent 41%, rgba(120,200,255,.10) 45%, rgba(150,255,205,.10) 48%, rgba(255,240,170,.13) 51%, rgba(255,150,175,.11) 54%, rgba(190,155,255,.10) 57%, transparent 62%);
  animation: aurora 26s ease-in-out infinite;
}
.cielo__estrellas {
  position: absolute; inset: -14%; opacity: .85;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 28% 65%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 47% 12%, #fff, transparent),
    radial-gradient(1px 1px at 63% 78%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 78% 35%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 91% 58%, rgba(255,255,255,.7), transparent),
    radial-gradient(.9px .9px at 8% 88%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 35% 92%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 55% 44%, rgba(255,255,255,.7), transparent),
    radial-gradient(.9px .9px at 22% 55%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 70% 92%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 86% 14%, rgba(255,255,255,.7), transparent);
  animation: drift 220s linear infinite;
}
.cielo__titilar {
  position: absolute; inset: -14%; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 18% 40%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 52% 70%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 74% 50%, #fff, transparent),
    radial-gradient(.9px .9px at 40% 26%, rgba(255,255,255,.7), transparent);
  animation: twinkle 5.5s ease-in-out infinite;
}

/* ---------- La cabecera y los pasos ---------- */
.ritual-top { position: relative; z-index: 3; flex: none; display: flex; align-items: center; justify-content: space-between; padding: max(16px, env(safe-area-inset-top)) 22px 0; }
.ritual-mark { margin: 0; font: 400 15px/1 var(--serif); letter-spacing: .12em; color: var(--oro); }
.ritual-mark span { letter-spacing: .3em; }
.exit-action { border: 0; background: none; padding: 6px; color: var(--oro); font: 400 15px/1 var(--serif); letter-spacing: .16em; cursor: pointer; }
.exit-action:hover, .exit-action:focus-visible { color: var(--oro-fuerte); outline: none; }

/* Durante la revelación el marco se retira: la lectura no compite con la
   interfaz. Vuelve apenas la persona lo busca con el teclado o el puntero. */
body.en-revelacion .ritual-mark,
body.en-revelacion .exit-action { opacity: .28; transition: opacity .9s ease; }
body.en-revelacion .ritual-mark:hover,
body.en-revelacion .exit-action:hover,
body.en-revelacion .ritual-top:focus-within .ritual-mark,
body.en-revelacion .ritual-top:focus-within .exit-action { opacity: 1; }

.pasos { position: relative; z-index: 3; flex: none; padding: 9px 34px 0; display: flex; flex-direction: column; gap: 5px; max-width: 26rem; margin: 0 auto; width: 100%; }
.pasos[hidden] { display: none !important; }
.pasos__cuenta { margin: 0; text-align: center; font: 300 12px/1 var(--serif); letter-spacing: .1em; color: #BDB3A3; }
.pasos__linea { display: flex; align-items: center; }
.pasos__punto { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1px solid rgba(240,220,164,.3); display: flex; align-items: center; justify-content: center; color: rgba(240,220,164,.45); font: 400 11px/1 var(--serif); }
.pasos__punto.is-activo { border-color: var(--oro); background: rgba(240,220,164,.14); box-shadow: 0 0 18px -4px rgba(240,220,164,.7); color: var(--oro-fuerte); }
/* El paso ya andado se marca con un visto; el JS le vacía el número. */
.pasos__punto.is-hecho { border-color: rgba(240,220,164,.5); color: var(--oro); }
.pasos__punto.is-hecho::after { content: "✓"; font: 400 10px/1 var(--sans); }
.pasos__hilo { flex: 1; height: 1px; background: rgba(240,220,164,.28); }
.pasos__nombres { display: flex; }
.pasos__nombres span { flex: 1; font: 300 11.5px/1.2 var(--serif); color: var(--gris-paso); }
.pasos__nombres span:first-child { text-align: left; }
.pasos__nombres span:nth-child(2) { text-align: center; }
.pasos__nombres span:last-child { text-align: right; }
.pasos__nombres span.is-activo { font-weight: 500; color: var(--oro); }

/* ---------- Las escenas ---------- */
.ritual { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; width: 100%; max-width: 30rem; margin: 0 auto; }
.scene { flex: 1; min-height: 0; display: none; flex-direction: column; position: relative; }
.scene.is-active { display: flex; animation: sceneIn .8s cubic-bezier(.16,1,.3,1) both; }
.scene[hidden] { display: none !important; }

.scene__cuerpo { position: relative; z-index: 2; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
/* Nada se encoge dentro del cuerpo: lo que no cabe se desplaza. */
.scene__cuerpo > * { flex: none; }
.scene__pie { position: relative; z-index: 2; flex: none; padding: 12px 26px max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; }
/* En pantallas cortas el cuerpo se desplaza: este velo avisa que sigue. */
.scene__pie::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; pointer-events: none; background: linear-gradient(to top, rgba(4,7,15,.92), rgba(4,7,15,0)); }

/* El arte de cada escena: el mandala del conejo y el orbe de la pregunta. */
.scene__arte { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scene__arte img { mix-blend-mode: screen; animation: coreBreath 9s ease-in-out infinite; }
.scene__arte--orbe img { animation: orbeVivo 13s ease-in-out infinite; }
.scene__arte--conejo { height: min(164px, 20vh); margin-bottom: 22px; }
.scene__arte--conejo img { height: 132%; width: auto; max-width: 128%; object-fit: contain; }
.scene__arte--orbe { height: min(236px, 27vh); margin-bottom: 6px; }
.scene__arte--orbe img {
  width: min(336px, 92%); height: auto; filter: brightness(1.18);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 97%);
}
/* El aura de la carta: su lámina difusa detrás de la lectura. */
/* El arcano acompaña la lectura como aura: nunca se ve la carta, se ve su luz.
   Vive en el cielo, no en la escena, para coronar la pantalla entera desde
   arriba (detrás de la cabecera) igual que en el diseño. */
.cielo__arcano { position: absolute; top: -6%; left: 50%; transform: translateX(-50%); width: 168%; max-width: none; opacity: 0; mix-blend-mode: screen; filter: blur(18px) saturate(.65) brightness(1.6); transition: opacity 1.2s ease; animation: coreBreath 12s ease-in-out infinite; }
body.con-arcano .cielo__arcano { opacity: .56; }
body.con-arcano-bajo .cielo__arcano { opacity: .3; top: auto; bottom: -12%; width: 150%; }
/* El velo deja pasar el aura arriba y guarda el contraste donde va el texto. */
.scene--reading::before, .scene--reflection::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4,7,15,.04) 0%, rgba(4,7,15,.58) 32%, rgba(4,7,15,.9) 70%, rgba(4,7,15,.96) 100%); }
.scene--reflection::before { background: linear-gradient(180deg, rgba(4,7,15,.4) 0%, rgba(4,7,15,.7) 46%, rgba(4,7,15,.92) 100%); }
/* El cierre se tiñe del elemento del ritual que ERA sugiere. */
.scene__tinte { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4,7,15,.08) 0%, rgba(4,7,15,.32) 38%, var(--elemento-tinte) 100%); transition: background .8s ease; }

/* ---------- Voz ---------- */
.ritual-kicker { margin: 0; font: 400 11px/1.5 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--oro-medio); }
.scene h1 { margin: 0; font: 300 clamp(27px, 8vw, 31px)/1.16 var(--serif); color: var(--marfil); }
.scene h1 em { display: block; margin-top: 2px; font-weight: 400; font-style: italic; color: var(--oro); }
.filete { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--oro); font-size: 11px; }
.filete span:first-child { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(240,220,164,.34)); }
.filete span:last-child { flex: 1; height: 1px; background: linear-gradient(to left, transparent, rgba(240,220,164,.34)); }
.puerta-copy { margin: 0; font: 300 16px/1.6 var(--serif); color: var(--marfil-tenue); text-wrap: pretty; }
.puerta-copy strong { font-weight: 400; color: var(--oro); }
.puerta-copy--carta { font-size: 15px; color: rgba(222,213,194,.78); }
.campo-ayuda { margin: 0; text-align: center; font: 300 13px/1.5 var(--serif); color: var(--gris-voz); text-wrap: pretty; }
.soul-address { margin: 0; font: italic 300 17px/1.2 var(--serif); color: var(--marfil-tenue); }

/* ---------- Campos ---------- */
.puerta-form, .question-form, .reflection-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.campo { display: flex; align-items: center; gap: 12px; margin: 0; border: 1px solid rgba(240,220,164,.34); border-radius: 999px; background: rgba(6,11,26,.66); padding: 0 20px; transition: border-color .3s ease, box-shadow .3s ease; }
.campo--texto { align-items: flex-start; border-radius: 24px; padding: 13px 20px; box-shadow: 0 0 34px -14px rgba(240,220,164,.45); }
.campo:focus-within { border-color: var(--oro); }
.campo__icono { flex: none; color: rgba(240,220,164,.6); font-size: 15px; }
.campo--texto .campo__icono { font-size: 14px; padding-top: 3px; }
.campo input, .campo textarea { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--marfil); outline: none; font-family: var(--serif); }
.campo input { padding: 16px 0; font: 300 17px/1.3 var(--serif); }
.campo textarea { padding: 0; resize: none; font: italic 300 17px/1.5 var(--serif); }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(222,213,194,.5); }
.consent-label { display: flex; align-items: flex-start; gap: 11px; padding: 2px 6px; color: #CFC5B4; font: 300 13px/1.45 var(--serif); cursor: pointer; text-align: left; }
.consent-label input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--oro-hondo); }
.consent-label strong { font-weight: 400; color: var(--oro); }
.field-message { min-height: 1.1rem; margin: 0; text-align: center; color: var(--oro-medio); font: 300 13px/1.4 var(--serif); }
.puerta-legal { margin: 4px 0 0; text-align: center; font: 300 11.5px/1.5 var(--serif); color: var(--gris-voz); text-wrap: pretty; }
.puerta-legal a { color: var(--oro-medio); }

/* ---------- Botones ---------- */
.ritual-action {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px;
  border: 0; border-radius: 999px; padding: 15px 20px; cursor: pointer;
  background: linear-gradient(100deg, #8C6A3C 0%, #F0DCA4 34%, #FFF6E4 48%, #E9CC8C 64%, #8C6A3C 100%);
  background-size: 220% 100%;
  color: #1a1206; font: 500 15px/1 var(--serif);
  box-shadow: 0 10px 28px -12px rgba(240,220,164,.7);
  animation: shimmer 7s linear infinite;
}
.ritual-action span:first-child { font-size: 11px; }
.ritual-action span:nth-child(2) { flex: 1; }
.ritual-action span:last-child { font-size: 15px; }
.ritual-action:hover, .ritual-action:focus-visible { outline: none; filter: brightness(1.06); }
.ritual-action:disabled { opacity: .5; cursor: default; animation: none; }
.hollow-action { width: 100%; display: block; border: 1px solid rgba(240,220,164,.5); border-radius: 999px; background: rgba(6,11,26,.5); padding: 16px; color: var(--oro); font: 500 16px/1 var(--serif); text-align: center; text-decoration: none; cursor: pointer; }
.hollow-action:hover, .hollow-action:focus-visible { background: rgba(240,220,164,.14); outline: none; }
.quiet-action { width: 100%; border: 0; background: transparent; padding: 12px; color: var(--gris-voz); font: 300 15px/1 var(--serif); cursor: pointer; }
.quiet-action:hover, .quiet-action:focus-visible { color: var(--marfil-suave); outline: none; }

/* ---------- Puntos de partida ---------- */
.prompt-seeds { display: flex; flex-direction: column; gap: 2px; }
.prompt-seeds > p { margin: 10px 0 0; font: 300 11px/1.4 var(--serif); letter-spacing: .04em; color: var(--gris-voz); }
.prompt-seeds div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.prompt-seeds button { display: inline-flex; align-items: center; border: 0; background: transparent; min-height: 44px; padding: 4px 10px; color: #D8CDB8; font: 400 14px/1 var(--serif); letter-spacing: .03em; cursor: pointer; }
.prompt-seeds button + button::before { content: "·"; margin-right: 10px; margin-left: -10px; color: rgba(240,220,164,.42); }
.prompt-seeds button:hover, .prompt-seeds button:focus-visible { color: #FFF6E4; outline: none; }

.scene__pie .pie__signo { display: block; text-align: center; color: rgba(240,220,164,.6); font-size: 14px; }
.pie__nota { margin: 0; text-align: center; font: 300 12px/1.4 var(--serif); color: var(--gris-voz); }
/* El contador existe, pero se dice bajito: no es un tablero. */
.ritual-cuenta { margin: 0; text-align: center; font: 400 10px/1.6 var(--mono); letter-spacing: .3em; color: rgba(222,213,194,.42); }
.ritual-cuenta[hidden] { display: none !important; }
/* En el cierre el saldo lo dice ERA, con su voz. */
.cierre-voz { margin: 1.4rem 0 0; text-align: center; font: italic 300 17px/1.5 var(--serif); color: var(--marfil-tenue); }
.cierre-saldo { margin: .5rem 0 0; text-align: center; font: italic 300 16px/1.5 var(--serif); color: var(--oro); }
.cierre-saldo[hidden] { display: none !important; }

/* ---------- Las pausas ---------- */
/* Mientras ERA mira, la esfera late más fuerte y una órbita la rodea. */
.pausa-orbe { position: relative; width: min(300px, 76vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.pausa-orbe img { width: 100%; height: auto; mix-blend-mode: screen; filter: brightness(1.22); animation: orbeVivo 9s ease-in-out infinite; }
.pausa-orbita { position: absolute; inset: 6%; border: 1px dashed rgba(240,220,164,.28); border-radius: 50%; transform: rotate(-18deg); animation: spinSlow 34s linear infinite; }
.pausa-orbita::before, .pausa-orbita::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--oro-fuerte); box-shadow: 0 0 14px var(--oro); }
.pausa-orbita::before { top: -4px; left: 50%; }
.pausa-orbita::after { bottom: -4px; left: 30%; }

/* El umbral: una sola frase antes de revelar la lectura. */
.scene--umbral { align-items: center; justify-content: center; text-align: center; padding: 0 26px; }
.scene--umbral h2 { margin: 0; font: italic 300 clamp(28px, 8vw, 36px)/1.2 var(--serif); color: var(--oro); text-shadow: 0 0 3rem rgba(212,181,116,.35); animation: rise 1.1s cubic-bezier(.16,1,.3,1) both; }

.scene--pause { align-items: center; justify-content: center; gap: 2rem; text-align: center; padding: 0 26px; }
.pause-kicker { margin: 0 0 .6rem; font: 400 11px/1.5 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--oro-medio); }
.scene--pause h2 { margin: 0; font: italic 300 clamp(24px, 6.5vw, 30px)/1.2 var(--serif); color: var(--marfil); }
.scene--pause p { color: var(--marfil-tenue); font: 300 16px/1.6 var(--serif); }
.moon { width: 6rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 32%, #FFF6E4, #E9CC8C 46%, rgba(140,106,60,.2) 72%, transparent 78%); filter: drop-shadow(0 0 2.4rem rgba(240,220,164,.45)); animation: coreBreath 6s ease-in-out infinite; }
.moon span { display: none; }
.constellation { position: relative; width: 11rem; height: 6rem; }
.constellation i { position: absolute; width: .28rem; aspect-ratio: 1; border-radius: 50%; background: var(--oro-fuerte); box-shadow: 0 0 1rem var(--oro); animation: starBreath 3s ease-in-out infinite; }
.constellation i:nth-child(1) { left: 10%; top: 55%; }
.constellation i:nth-child(2) { left: 28%; top: 20%; animation-delay: .4s; }
.constellation i:nth-child(3) { left: 48%; top: 46%; animation-delay: .8s; }
.constellation i:nth-child(4) { left: 68%; top: 14%; animation-delay: 1.2s; }
.constellation i:nth-child(5) { left: 86%; top: 58%; animation-delay: 1.6s; }
.constellation--forming { animation: spinSlow 9s linear infinite; }

/* ---------- La lectura ---------- */
.scene--reading .scene__cuerpo { padding-top: 18px; gap: 16px; }
.reading-kicker { margin: 0; font: 400 11px/1.6 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--oro-medio); }
.reading-thread { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.reading-thread p { margin: 0; font: 300 19px/1.62 var(--serif); color: var(--marfil-suave); text-wrap: pretty; opacity: 0; transform: translateY(14px); animation: rise 1s cubic-bezier(.16,1,.3,1) forwards; }
.reading-thread p:nth-child(2) { animation-delay: .55s; }
.reading-thread p:nth-child(3) { animation-delay: 1.05s; }
.reading-thread p:nth-child(n+4) { animation-delay: 1.4s; }

/* ---------- La reflexión ---------- */
.scene--reflection .scene__cuerpo { padding-top: 34px; gap: 20px; }
/* Lo que ERA responde antes de preguntar. Va en la voz de la lectura, no en
   la de la pregunta: se lee primero y deja pasar a la pregunta, que es la que
   brilla. */
.reflection-eco { display: grid; gap: 11px; margin: 0; text-align: left; }
.reflection-eco p { margin: 0; font: 300 17px/1.62 var(--serif); color: var(--marfil-suave); text-wrap: pretty; }
.reflection-prompt { display: block; margin: 0; font: italic 400 clamp(22px, 6.4vw, 26px)/1.34 var(--serif); color: var(--oro); text-shadow: 0 0 2.8rem rgba(212,181,116,.3); text-wrap: pretty; text-align: left; }
.reflection-form textarea { width: 100%; resize: none; border: 1px solid rgba(240,220,164,.34); border-radius: 22px; background: rgba(6,11,26,.62); padding: 16px 18px; color: var(--marfil); font: 300 17px/1.55 var(--serif); outline: none; }
.reflection-form textarea:focus { border-color: var(--oro); }
.reflection-form textarea::placeholder { color: rgba(222,213,194,.5); }

/* ---------- El cierre ---------- */
.scene--closing .scene__cuerpo { padding-top: 20px; gap: 14px; text-align: left; }
.scene--closing .reading-kicker { text-align: center; }
.closing-kicker { margin: 0; font: 400 11px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--oro-medio); }
.scene--closing h2 { margin: 0; font: italic 300 clamp(25px, 7.4vw, 29px)/1.14 var(--serif); color: var(--oro); }
.closing-advice { margin: 0; font: 300 18px/1.6 var(--serif); color: var(--marfil-suave); text-wrap: pretty; }

/* La tarjeta del ritual toma el color del elemento de la carta. */
/* La tarjeta es una capa de color sobre el cielo, no un bloque opaco: el
   fondo estrellado se sigue viendo a través de ella. */
.ritual-suggestion { position: relative; overflow: hidden; margin: 6px 0 0; border: 1px solid var(--elemento-borde); border-radius: 22px; background: var(--elemento-fondo); backdrop-filter: blur(2px); box-shadow: var(--elemento-sombra); padding: 20px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ritual-suggestion::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 55% at 78% 6%, rgba(255,255,255,.12), transparent 70%); pointer-events: none; }
.ritual-suggestion > * { position: relative; }
.ritual-suggestion[hidden] { display: none !important; }
.suggestion-kicker { margin: 0; font: 400 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--elemento-kicker); }
.suggestion-name { margin: 0; font: 300 27px/1.14 var(--serif); color: #FFF6E4; }
.suggestion-name em { font-style: italic; color: var(--oro); }
.suggestion-copy { margin: 0; font: 300 16px/1.55 var(--serif); color: var(--elemento-copy); text-wrap: pretty; }
.suggestion-code { margin: 0; font: 400 14px/1.5 var(--serif); color: #FFF6E4; }
.suggestion-code[hidden] { display: none !important; }
.suggestion-action { display: block; margin-top: 6px; width: 100%; border: 0; border-radius: 12px; background: #F5EBD6; padding: 15px; color: var(--elemento-tinta); font: 500 16px/1 var(--serif); text-align: center; text-decoration: none; cursor: pointer; }
.suggestion-action:hover, .suggestion-action:focus-visible { background: #FFF6E4; outline: none; }

/* El puente: el ritual no llega como publicidad, llega como el desenlace de la
   lectura. Esta línea lo anuncia antes de que aparezca la tarjeta. */
.ritual-puente { margin: 34px 0 12px; text-align: center; font: 400 10px/1.5 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: rgba(240,220,164,.68); }
.ritual-puente[hidden] { display: none !important; }

/* ---------- La lectura, escenificada ----------
   No es un muro de texto: hay un primer bloque, una frase que se queda, el
   cierre que es el corazón, y el gesto concreto del final. Cada uno pesa
   distinto para que la lectura se recuerde como revelación + acción. */
.reading-thread--cierre { margin-top: 0; }
.reading-thread[hidden] { display: none !important; }

.reading-frase { margin: 34px auto; max-width: 34rem; text-align: center; font: italic 300 clamp(23px, 4.2vw, 32px)/1.35 var(--serif); color: var(--oro-fuerte); text-wrap: balance; }
.reading-frase[hidden] { display: none !important; }
.reading-frase::before,
.reading-frase::after { content: ""; display: block; width: 46px; height: 1px; margin: 0 auto; background: linear-gradient(to right, transparent, rgba(240,220,164,.5), transparent); }
.reading-frase::before { margin-bottom: 24px; }
.reading-frase::after { margin-top: 24px; }

.reading-gesto { margin: 34px auto 0; max-width: 34rem; padding: 20px 22px; border: 1px solid rgba(240,220,164,.2); border-radius: 18px; background: rgba(240,220,164,.045); }
.reading-gesto[hidden] { display: none !important; }
.gesto-kicker { margin: 0 0 10px; font: 400 10px/1.5 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--oro-medio); }
.gesto-texto { margin: 0; font: 300 19px/1.55 var(--serif); color: var(--marfil-suave); text-wrap: pretty; }

/* El Oráculo del Ser: la vivencia que ERA nombra, con su afirmación. Es el
   regalo de la lectura, y es lo que la persona se lleva impreso. */
.reading-vivencia { margin: 34px auto 0; max-width: 34rem; padding: 22px 24px; border: 1px solid rgba(240,220,164,.16); border-radius: 18px; background: rgba(4,7,15,.42); text-align: center; }
.reading-vivencia[hidden] { display: none !important; }
.vivencia-kicker { margin: 0 0 12px; font: 400 10px/1.5 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--oro-medio); }
.vivencia-nombre { margin: 0 0 14px; font: 300 25px/1.2 var(--serif); color: var(--marfil); }
.vivencia-frase { margin: 0; font: italic 300 20px/1.5 var(--serif); color: var(--oro-fuerte); text-wrap: balance; }

/* Los elementos, uno por carta. */
.elemento-tierra { --elemento-tinte: rgba(62,70,41,.34); --elemento-borde: rgba(139,150,110,.5); --elemento-fondo: linear-gradient(165deg, rgba(78,86,51,.62) 0%, rgba(51,58,33,.6) 58%, rgba(27,32,12,.58) 100%); --elemento-sombra: 0 18px 50px -20px rgba(90,99,64,.6); --elemento-kicker: #FFF6E4; --elemento-copy: #F0F3E6; --elemento-tinta: #2b3218; }
.elemento-fuego  { --elemento-tinte: rgba(102,37,15,.34); --elemento-borde: rgba(214,116,74,.5); --elemento-fondo: linear-gradient(165deg, rgba(142,61,28,.62) 0%, rgba(102,37,15,.6) 58%, rgba(43,15,7,.58) 100%); --elemento-sombra: 0 18px 50px -20px rgba(182,80,42,.6); --elemento-kicker: #FFF6E4; --elemento-copy: #F9E7DB; --elemento-tinta: #5c1f0e; }
.elemento-agua   { --elemento-tinte: rgba(20,58,64,.34); --elemento-borde: rgba(84,158,164,.5); --elemento-fondo: linear-gradient(165deg, rgba(38,98,104,.62) 0%, rgba(20,58,64,.6) 58%, rgba(6,22,26,.58) 100%); --elemento-sombra: 0 18px 50px -20px rgba(30,80,88,.6); --elemento-kicker: #CDEBEA; --elemento-copy: #E2F2F1; --elemento-tinta: #0B2A2E; }
.elemento-aire   { --elemento-tinte: rgba(56,42,84,.34); --elemento-borde: rgba(126,102,170,.5); --elemento-fondo: linear-gradient(165deg, rgba(92,70,130,.62) 0%, rgba(56,42,84,.6) 58%, rgba(26,18,48,.58) 100%); --elemento-sombra: 0 18px 50px -20px rgba(78,58,110,.6); --elemento-kicker: #DCCDF2; --elemento-copy: #EFE8FA; --elemento-tinta: #2e2145; }
.elemento-cosmos { --elemento-tinte: rgba(27,44,72,.34); --elemento-borde: rgba(88,126,168,.5); --elemento-fondo: linear-gradient(165deg, rgba(46,74,114,.62) 0%, rgba(27,44,72,.6) 58%, rgba(10,17,32,.58) 100%); --elemento-sombra: 0 18px 50px -20px rgba(31,53,86,.6); --elemento-kicker: #CBDCEA; --elemento-copy: #E6EDF3; --elemento-tinta: #0B1A2E; }

/* ---------- La invitación del 25% ---------- */
.oracle-invite { margin: 6px 0 0; padding: 20px; border: 1px solid rgba(240,220,164,.24); border-radius: 22px; background: rgba(240,220,164,.045); text-align: center; }
.oracle-invite[hidden] { display: none !important; }
.invite-lead { margin: 0 0 .6rem; font: italic 300 clamp(20px, 5.6vw, 23px)/1.3 var(--serif); color: var(--marfil); }
.invite-copy { margin: 0 0 1rem; color: rgba(238,231,219,.78); font: 300 15px/1.55 var(--serif); }
.invite-copy strong { font-weight: 400; color: var(--oro); }
.invite-form { display: flex; flex-direction: column; gap: .7rem; }
.invite-form input { width: 100%; border: 1px solid rgba(240,220,164,.28); border-radius: 999px; background: rgba(6,11,26,.6); padding: 13px 18px; color: var(--marfil); font: 300 16px/1.3 var(--serif); text-align: center; outline: none; }
.invite-form input:focus { border-color: var(--oro); }
.invite-form .consent-label { justify-content: center; }
.invite-result { min-height: 1.2rem; margin: .7rem 0 0; color: var(--oro); font: italic 300 16px/1.5 var(--serif); }
.invite-result[hidden] { display: none !important; }
.save-message { margin: .6rem 0 0; color: var(--marfil-tenue); font: italic 300 15px/1.5 var(--serif); }

/* ---------- La salida ---------- */
.exit-dialog { width: min(calc(100% - 2rem), 24rem); border: 1px solid rgba(240,220,164,.2); border-radius: 22px; padding: 24px; background: #0A1020; color: var(--marfil-suave); text-align: center; box-shadow: 0 2rem 8rem rgba(0,0,0,.7); }
.exit-dialog::backdrop { background: rgba(2,4,10,.76); backdrop-filter: blur(.3rem); }
.exit-dialog p { margin: 0 0 1.2rem; font: 300 22px/1.4 var(--serif); }
.exit-dialog div { display: flex; flex-direction: column; gap: .4rem; }

/* ---------- Movimiento ---------- */
@keyframes aurora { 50% { opacity: .5; transform: rotate(-11deg) translateY(-2%); } }
@keyframes drift { to { transform: translate3d(-60px, -100px, 0); } }
@keyframes twinkle { 0%, 100% { opacity: .5; } 50% { opacity: .12; } }
@keyframes coreBreath { 50% { transform: scale(1.07); opacity: 1; } }
/* La esfera está viva: respira, gira y cambia de brillo. */
@keyframes orbeVivo {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1.1); }
  50% { transform: scale(1.09) rotate(6deg); filter: brightness(1.32); }
}
@keyframes shimmer { to { background-position: 220% 0; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes starBreath { 50% { transform: scale(1.5); opacity: .6; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes sceneIn { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 700px) {
  .scene__cuerpo { padding: 0 20px; }
  .pasos { padding: 9px 26px 0; }
}
/* Teléfonos cortos: el rito se aprieta para que la puerta quepa entera. */
@media (max-height: 720px) {
  .scene__arte--conejo { height: 13vh; margin-bottom: 16px; }
  .scene__arte--orbe { height: 19vh; margin-bottom: 2px; }
  .scene__cuerpo { gap: 9px; }
  .scene--puerta .filete { display: none; }
  .scene--puerta h1 { font-size: 26px; }
  .puerta-copy { font-size: 15px; line-height: 1.5; }
  .campo input { padding: 13px 0; font-size: 16px; }
  .consent-label { font-size: 12.5px; }
  .puerta-legal { font-size: 11px; }
  .pasos { padding-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cielo__aurora, .cielo__estrellas, .cielo__titilar, .scene__arte img, .cielo__arcano,
  .pausa-orbe img, .pausa-orbita, .ritual-action, .moon, .constellation i,
  .constellation--forming { animation: none !important; }
  .scene--umbral h2 { animation: none; }
  .scene.is-active { animation: none; }
  .reading-thread p { opacity: 1; transform: none; animation: none; }
  * { scroll-behavior: auto !important; }
}