/* GENERADO por src/esferas/build.py — no editar aquí.
   Tokens, reset y TODO el grabado del Árbol se heredan de src/lectura-v3/; lo propio de
   esta página vive en src/esferas/estilo.css. */
:root{
 --bg:#09070d; --bg2:#0b0812;
 --gold:#C9A86B; --goldB:#E8C87E; --goldW:#fff4d6; --goldDeep:#98793f; --cream:#F1E7CE;
 /* ── escala del texto (identidad corporativa v1.0, 2026-08-09) ─────────────────────────
    El oro DESTACA; el marfil SOSTIENE. Los niveles no se separan por claridad —todos son
    claros sobre negro— sino por cuánto oro llevan: la distancia entre el canal rojo y el
    azul. Antes el cuerpo iba en var(--marfil) (R−B = 45) y el 87 % del texto de la página salía
    teñido de oro; medido, el oro deja de destacar cuando es la masa. Ahora el cuerpo vale
    18 y de paso sube de 10.2:1 a 13.1:1 de contraste.
    --dim y --ash conservan su NOMBRE y su papel; cambia su tinte. */
 --oro:#E8C87E;      /* destaque · el término marcado, la cifra, el titular que enciende */
 --marfil:#D6D0C4;   /* cuerpo · la masa del texto */
 --dim:#ADA79B;      /* cuerpo secundario · pies y notas (era #b6a47a) */
 --ash:#8E877A;      /* etiqueta · lo que se consulta, no se lee (era #8b7f66) */
 --line:rgba(201,168,107,.18); --line2:rgba(201,168,107,.38);
 --daat:#A96BE8; --daatB:#C89BF2;
 --marte:#e08a72; --jupiter:#7fb3d5;
 --tinta:#2b2117;
 --display:'Cinzel Decorative','Cinzel',serif; --head:'Cormorant Garamond',Georgia,serif;
 --heb:'Frank Ruhl Libre',Georgia,serif; --body:'EB Garamond',Georgia,serif; --label:'Space Mono',ui-monospace,monospace;
 --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--cream);font-family:var(--body);font-size:19px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
@media(max-width:620px){.wrap{padding:0 20px}}

/* ── heredado de lectura-v3/base-v2.html ─────────────────────────────────────────── */
.nebula{position:fixed;inset:0;z-index:0;pointer-events:none;
 background:
  radial-gradient(72% 62% at 80% 6%, rgba(169,107,232,.07), transparent 78%),
  radial-gradient(74% 64% at 18% 24%, rgba(138,92,224,.045), transparent 80%),
  radial-gradient(78% 68% at 58% 84%, rgba(169,107,232,.04), rgba(201,168,107,.03) 48%, transparent 82%),
  radial-gradient(122% 94% at 50% 40%, transparent 50%, rgba(7,5,13,.62) 100%);
 animation:nebDrift 42s ease-in-out infinite alternate}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.motas{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.motas i{position:absolute;left:var(--x);bottom:-4%;width:var(--s,2px);height:var(--s,2px);border-radius:50%;
 background:#ffe9b0;box-shadow:0 0 6px rgba(232,200,126,.9);opacity:0;
 animation:mota var(--t,17s) linear var(--dl,0s) infinite}
@keyframes mota{
 0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}
 14%{opacity:.8}
 72%{opacity:.42}
 100%{opacity:0;transform:translate3d(var(--dx,10px),calc(-1 * var(--rise,320px)),0) scale(1)}}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(180deg,rgba(10,8,6,.85),rgba(10,8,6,0));backdrop-filter:blur(8px);transition:transform .4s,background .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(9,7,5,.82);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(180deg,rgba(10,8,6,.85),rgba(10,8,6,0));backdrop-filter:blur(8px);transition:transform .4s,background .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(9,7,5,.82);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav .mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav .mark .sello{width:40px;height:40px;display:block;flex:0 0 auto;
 filter:drop-shadow(0 0 11px rgba(169,107,232,.42))}
.nav .mark .wm{font-family:'Cinzel',Georgia,serif;font-weight:700;letter-spacing:.085em;
 font-size:11.34px;line-height:1.16;text-transform:uppercase;color:#EBCB86;
 text-shadow:0 0 15px rgba(235,203,134,.28)}
.nav .links{display:flex;gap:26px;align-items:center;font-family:var(--label);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.nav .links a{position:relative;transition:color .25s}
.nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--goldB);transition:right .3s;box-shadow:0 0 6px var(--goldB)}
.nav .links a:hover{color:var(--goldB)}
.nav .links a:hover::after{right:0}
.prog{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:linear-gradient(to right,rgba(201,168,107,.05),rgba(201,168,107,.5));transition:width .12s linear}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin:-8px -8px -8px 0;color:var(--goldB);z-index:2}
.navtoggle svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.navtoggle path{transition:transform .3s,opacity .2s;transform-origin:center;transform-box:fill-box}
@media(max-width:820px){
.navtoggle{display:inline-flex}
.nav .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
  background:rgba(9,7,5,.975);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .34s ease,opacity .28s;padding:0}
.nav.open .links{max-height:60vh;opacity:1;pointer-events:auto;padding:6px 0 10px}
.nav .links a{display:block;width:100%;padding:14px 24px;font-size:13px;color:var(--cream);border-top:1px solid rgba(201,168,107,.08)}
.nav .links a:first-child{border-top:0}
.nav .links a::after{display:none}
.nav.open .navtoggle .l1{transform:translateY(6.5px) rotate(45deg)}
.nav.open .navtoggle .l2{opacity:0}
.nav.open .navtoggle .l3{transform:translateY(-6.5px) rotate(-45deg)}
}
.arbol{position:relative;width:min(520px,88vw);margin:clamp(28px,4vw,44px) auto clamp(34px,5vw,56px)}
.arbol::before{content:"";position:absolute;left:-14%;right:-14%;top:-6%;bottom:-6%;z-index:0;pointer-events:none;
 background:radial-gradient(48% 46% at 50% 44%,rgba(201,168,107,.07),rgba(169,107,232,.04) 44%,transparent 74%)}
.ar{position:relative;z-index:1;width:100%;height:auto;overflow:visible;display:block}
.ar-cast{opacity:0;filter:blur(38px);transition:opacity 1.6s ease}
.arbol.in .ar-cast{opacity:.13;transition-delay:var(--d)}
.ar-pil line{stroke:var(--gold);stroke-width:15;stroke-opacity:.07;stroke-linecap:round;filter:blur(5px)}
.ar-p{fill:none;stroke:var(--gold);stroke-width:4.4;stroke-opacity:.2;stroke-linecap:round;
 stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.ar-pc{fill:none;stroke:#ffe9b8;stroke-width:1.15;stroke-opacity:.62;stroke-linecap:round;
 stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.arbol.in .ar-p,.arbol.in .ar-pc{animation:trazar 1.15s cubic-bezier(.35,0,.2,1) var(--d) forwards}
.ar-pf{fill:none;stroke:#fff3d6;stroke-width:3.2;stroke-linecap:round;opacity:0;
 filter:drop-shadow(0 0 7px rgba(232,200,126,.95)) drop-shadow(0 0 18px rgba(232,200,126,.55))}
.arbol.in .ar-pf{animation:arder 4.6s calc(var(--d) + 1.5s) ease-in-out infinite}
.ar-letras text{font-family:var(--heb);font-weight:700;font-size:21px;text-anchor:middle;dominant-baseline:central;
 fill:var(--gold);opacity:0;paint-order:stroke;stroke:#09070d;stroke-width:3.4}
.arbol.in .ar-letras text{animation:aparecerL 1s var(--d) ease-out forwards}
.arbol.in .ar-l.viva{animation:aparecerLv 1s var(--d) ease-out forwards}
.ar-daat{opacity:0}
.arbol.in .ar-daat{animation:aparecerD 1.4s var(--d) ease-out forwards}
.ar-daat-core{fill:url(#daatNucleo)}
.ar-daat-r1{fill:none;stroke:var(--daatB);stroke-width:1.9;stroke-dasharray:1.6 7.4;opacity:.9}
.ar-daat-r2{fill:none;stroke:#C5B0E0;stroke-width:1.2;stroke-dasharray:1 5;opacity:.7}
.ar-daat-n{fill:#f0e6ff;opacity:.85;filter:drop-shadow(0 0 6px rgba(169,107,232,.9))}
.ar-spin,.ar-spin-r{transform-box:fill-box;transform-origin:center}
.ar-spin{animation:sSpin 26s linear infinite}
.ar-spin-r{animation:sSpin 19s linear infinite reverse}
.ar-orb{opacity:0;transform-box:fill-box;transform-origin:center}
.arbol.in .ar-orb{animation:orbPop 1s var(--d) cubic-bezier(.22,.9,.3,1.15) forwards}
.ar-aura{opacity:.2;filter:blur(9px)}
.ar-filo{fill:none;stroke:var(--gold);stroke-width:1;opacity:.34}
.ar-disc{fill:url(#orbe)}
.ar-disc.t{fill:url(#orbeT)}
.ar-tex{fill:url(#hd);opacity:.2;mix-blend-mode:multiply}
.ar-hoja{fill:#fff;opacity:.17;mix-blend-mode:multiply;filter:url(#hojaOro)}
.ar-canto{fill:none;stroke:#fff7e0;stroke-width:1;opacity:.5;filter:url(#tinta)}
.ar-pla{fill:#241804;font-family:var(--head);font-weight:700;text-anchor:middle;dominant-baseline:central;opacity:.72}
.ar-orb.t .ar-aura{opacity:.34;animation:respirarT 6s ease-in-out infinite}
.arbol-pie{max-width:40ch;margin:0 auto;text-align:center;font-family:var(--label);
 font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#8c7f61;line-height:1.9}
@media(max-width:520px){
.arbol{width:min(320px,88vw)}
.ar-letras text{font-size:24px}
}
.sello-daat{width:clamp(128px,16vw,168px);margin:0 auto clamp(26px,4vw,38px);aspect-ratio:1;position:relative}
.sello-daat svg{width:100%;height:100%;overflow:visible;display:block}
.sd-ring{fill:none}
.sd-dot{stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:.5 13;opacity:.55;filter:drop-shadow(0 0 3px rgba(232,200,126,.5))}
.sd-fine{stroke-width:1.6;stroke-dasharray:.5 9;opacity:.42}
.sd-hair{stroke:var(--goldDeep);stroke-width:.6;opacity:.26}
.sd-geo{fill:none}
.sd-faint{stroke:var(--goldDeep);stroke-width:1;opacity:.34}
.sd-bright{stroke:var(--goldB);stroke-width:1;filter:drop-shadow(0 0 4px rgba(232,200,126,.5))}
.sd-disc-ring{fill:none;stroke:url(#sdVio);stroke-width:2.8}
.sd-disc-halo{fill:none;stroke:var(--daatB);stroke-width:1;opacity:.5}
.sd-heb{font-family:var(--heb);font-weight:700;fill:#E7D6FF;text-anchor:middle;letter-spacing:2px;
 filter:drop-shadow(0 0 12px rgba(169,107,232,.72)) drop-shadow(0 0 4px rgba(199,155,242,.9))}
.sd-spin74,.sd-spin60r,.sd-spin150{transform-origin:215px 215px;transform-box:view-box}
.sd-spin74{animation:sSpin 74s linear infinite}
.sd-spin60r{animation:sSpin 60s linear infinite reverse}
.sd-spin150{animation:sSpin 150s linear infinite}
.sd-breathe{transform-box:fill-box;transform-origin:center;animation:discGlow 8.5s ease-in-out infinite}
.sd-letra{transform-box:fill-box;transform-origin:center;animation:letterBreathe 8.5s ease-in-out infinite}
@keyframes nebDrift{from{transform:translate(0,0)}to{transform:translate(-26px,-34px)}}
@keyframes sSpin{to{transform:rotate(360deg)}}
@keyframes sHalo{0%,100%{opacity:.14;transform:scale(1)}50%{opacity:.5;transform:scale(1.16)}}
@keyframes trazar{to{stroke-dashoffset:0}}
@keyframes orbPop{0%{opacity:0;transform:scale(.35)}62%{opacity:1;transform:scale(1.09)}100%{opacity:1;transform:scale(1)}}
@keyframes aparecerL{to{opacity:.52}}
@keyframes aparecerLv{to{opacity:1}}
@keyframes aparecerD{to{opacity:1}}
@keyframes arder{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes respirarT{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}
@media(max-width:640px){
.sello-daat{width:118px;margin-bottom:20px}
}
@media(prefers-reduced-motion:reduce){
.ar-p,.ar-pc{stroke-dashoffset:0}
.ar-pf{opacity:.8}
.ar-orb,.ar-daat{opacity:1;transform:none}
.ar-cast{opacity:.2;transition:none}
.ar-letras text{opacity:.52}
.ar-l.viva{opacity:1}
.motas{display:none}
}
/* ── heredado de lectura-v3/extra.css ────────────────────────────────────────────── */
.arbol{width:min(620px,94vw)}
.ar{width:100%;height:auto;overflow:visible}
.ar-plato{opacity:0;transition:opacity 2.2s ease .4s}
.arbol.in .ar-plato{opacity:1}
.ar-plato-a{fill:none;stroke:var(--gold);stroke-width:1;opacity:.12;filter:url(#tinta)}
.ar-plato-b{fill:none;stroke:var(--gold);stroke-width:.8;opacity:.1;stroke-dasharray:2 11}
.ar-grado{stroke:var(--gold);stroke-width:.8;opacity:.14}
.ar-grado.mayor{stroke-width:1.4;opacity:.28}
.geo-l{fill:none;stroke-linejoin:round;stroke-linecap:round}
.geo-gir{transform-box:view-box;animation:sSpin var(--t) linear infinite}
.geo-gir.rev{animation-direction:reverse}
.ar-geo{opacity:0;transition:opacity 2.8s ease .3s}
.arbol.in .ar-geo{opacity:1}
@keyframes geoIn{to{opacity:.68}}
@keyframes geoInMovil{to{opacity:.42}}
.ar-haz{filter:blur(28px);opacity:0;transition:opacity 1.8s ease .6s}
.arbol.in .ar-haz{opacity:1}
.ar-rot{opacity:0}
.arbol.in .ar-rot{animation:aparecerD 1.1s .95s ease-out forwards}
.ar-rot-t{font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.26em;
 text-anchor:middle;fill:var(--ash)}
.ar-rot.ex .ar-rot-t{fill:var(--goldB)}
.ar-rot.fo .ar-rot-t{fill:#B292DE}
.ar-rot-d{fill:var(--gold);opacity:.45}
.ar-rot.ex .ar-rot-d{fill:var(--goldB);opacity:.9}
.ar-rot.fo .ar-rot-d{fill:#B292DE;opacity:.72}
.ar-rot-l{stroke:var(--line2);stroke-width:1}
.ar-rayo{pointer-events:none}
.ar-fulgor-h,.ar-fulgor,.ar-chispazo{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.ar-fulgor-h{stroke:#E8C87E;stroke-width:9;filter:blur(8px);
 stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.ar-fulgor{stroke:#fff7e2;stroke-width:2.2;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
 filter:drop-shadow(0 0 7px rgba(255,243,214,.95)) drop-shadow(0 0 20px rgba(232,200,126,.5))}
.ar-chispazo{stroke:#fffaf0;stroke-width:6.5;stroke-dasharray:.1 var(--len);stroke-dashoffset:0;
 filter:drop-shadow(0 0 10px #ffe9b8) drop-shadow(0 0 28px rgba(232,200,126,.9))}
.arbol.in .ar-fulgor-h,.arbol.in .ar-fulgor{animation:estela 13s 3.2s linear infinite}
.arbol.in .ar-chispazo{animation:chispazo 13s 3.2s linear infinite}
@keyframes estela{
 0%{opacity:0;stroke-dashoffset:var(--len)}
 2%{opacity:1}
 30%{opacity:1;stroke-dashoffset:0}
 48%{opacity:1;stroke-dashoffset:0}
 64%{opacity:0;stroke-dashoffset:0}
 100%{opacity:0;stroke-dashoffset:0}}
@keyframes chispazo{
 0%{opacity:0;stroke-dashoffset:0}
 1.5%{opacity:1}
 30%{opacity:1;stroke-dashoffset:var(--nlen)}
 33%{opacity:0;stroke-dashoffset:var(--nlen)}
 100%{opacity:0;stroke-dashoffset:var(--nlen)}}
.ar-chispa{fill:#fff8e6;opacity:0;transform-box:fill-box;transform-origin:center;
 pointer-events:none;filter:blur(2px) drop-shadow(0 0 16px rgba(255,240,205,.9))}
.arbol.in .ar-chispa{animation:chispa 13s var(--f) ease-out infinite}
@keyframes chispa{
 0%{opacity:0;transform:scale(.45)}
 2%{opacity:.95;transform:scale(1.06)}
 10%{opacity:0;transform:scale(2.25)}
 100%{opacity:0;transform:scale(2.25)}}
@media (prefers-reduced-motion:reduce){
.geo-gir{animation:none}
.ar-chispa,.ar-chispazo,.ar-fulgor-h{display:none}
.arbol.in .ar-fulgor{animation:none;opacity:.42;stroke-dashoffset:0}
.ar-plato,.ar-geo,.ar-haz{opacity:1;transition:none}
}
.ar-daat-h{font-family:var(--heb);font-weight:700;font-size:17px;fill:var(--daatB);opacity:.85;
 text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#09070d;stroke-width:3.4}
.ar-daat-t{font-family:var(--head);font-style:italic;font-size:14px;fill:#A48CC4;opacity:.82;
 text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#09070d;stroke-width:3}
.ar-num{font-family:var(--label);font-weight:700;fill:#241804;text-anchor:middle;
 dominant-baseline:central;opacity:.6}
.ar-heb{font-family:var(--heb);font-weight:700;font-size:19px;fill:var(--gold);opacity:.74;
 dominant-baseline:central;paint-order:stroke;stroke:#09070d;stroke-width:3.4}
.ar-nom{font-family:var(--display);font-weight:400;font-size:12.5px;letter-spacing:.1em;
 fill:var(--ash);dominant-baseline:central;paint-order:stroke;stroke:#09070d;stroke-width:3}
.arbol.in .ar-cast.on{opacity:.28}
.ar-halo{fill:none;stroke:var(--goldB);stroke-width:1.5;stroke-dasharray:2 7;opacity:.9;
 filter:drop-shadow(0 0 6px rgba(232,200,126,.75))}
.ar-orb.on .ar-num{opacity:.86}
.ar-orb.on .ar-canto{stroke:#fff7e0;stroke-width:1.6;opacity:1;
 filter:drop-shadow(0 0 7px rgba(232,200,126,.85))}
.ar-orb.on .ar-heb{fill:var(--goldW);opacity:1;font-size:21px}
.ar-orb.on .ar-nom{fill:var(--goldB);opacity:1;font-size:13.5px}
.ar-orb.on .ar-aura{opacity:.36}
.arbol.in .ar-orb.on{animation:orbPop 1s var(--d) cubic-bezier(.22,.9,.3,1.15) forwards,
 respira 4.6s calc(var(--d) + 1.2s) ease-in-out infinite}
@keyframes respira{0%,100%{filter:none}50%{filter:brightness(1.12)}}
@media(max-width:759px){
.arbol{width:100%}
.ar-nom{font-size:19px}
.ar-orb.on .ar-nom{font-size:19px}
.ar-heb{font-size:26px}
.ar-orb.on .ar-heb{font-size:26px}
.ar-rot-t{font-size:18px;letter-spacing:.2em}
.ar-letras text{font-size:27px}
.ar-daat-h{font-size:23px}
.ar-daat-t{font-size:17px}
}
/* ── propio de la calculadora ────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LA CALCULADORA DE ESFERAS · lo propio de esta página.

   El grabado del Árbol y la barra de la casa NO se escriben aquí: los hereda build.py de la
   landing de la Lectura, regla por regla. Quien calcule gratis hoy y compre después tiene que
   reconocer la misma lámina, y eso no se sostiene con dos copias del mismo CSS envejeciendo por
   separado.

   ── LAS CUATRO LEYES QUE ESTA HOJA OBEDECE, Y DE DÓNDE SALEN ────────────────────────────────

   1 · UN SOLO EJE, Y ES EL CENTRO. Está escrito en la hoja de la Lectura: el Árbol, el sello, el
       mandala y el portal son todos simétricos respecto a un eje vertical, y la página se compone
       sobre ese mismo eje. Sólo el texto de lectura sostenida queda en bandera DENTRO de su
       bloque, que sí está centrado. La primera versión de esta página puso todo en bandera
       izquierda bajo un Árbol perfectamente simétrico, y ese desajuste es lo que la hacía leer a
       plantilla en vez de a lámina.

   2 · EL ORO DESTACA, EL MARFIL SOSTIENE (tokens.json → color.escala_de_texto). Máximo 12 % del
       texto en oro y mínimo 45 % en neutro, y se verifica sobre el render, no de memoria: "puesto
       sobre la masa del texto el oro deja de destacar y sólo satura. Cuando todo pesa, nada
       pesa". El oro queda para el término marcado, la cifra y el título de sección. Nada más.
       El gate `gate.mjs` lo mide y falla si se pasa.

   3 · CAJA CON BORDE SÓLO DONDE HAY UNA ACCIÓN (tokens.json → web.reglas). Todo lo demás se
       separa con filete de oro al 18 % y con espacio. Un campo cerrado alrededor de un texto lee
       como interfaz, y este material es un grabado.

   4 · MÓVIL PRIMERO. Las medidas de abajo son las del teléfono; el escritorio entra por
       @media (min-width) como ampliación. El orden del pliegue en móvil no es el reparto de
       escritorio, y escribiéndolo al revés el teléfono hereda decisiones tomadas en una ventana
       de 1440.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── el escenario ───────────────────────────────────────────────────────────────────────── */
.escena{position:relative;z-index:3;padding:calc(66px + clamp(26px,5vh,64px)) 0 clamp(40px,7vh,90px)}
.wrap.eje{max-width:1120px}

/* Héroe a sangre: el recinto grabado detrás de todo. Es CAPA, no figura — se funde por arriba y
   por los lados para que no aparezca ningún canto, y el centro queda libre porque ahí se dibuja
   el Árbol. Si el archivo no existe, no pasa nada: queda el fondo del canal. */
/* EL RECINTO. En escritorio es el héroe a sangre y funciona: el arco enmarca la columna y el
   formulario queda en el umbral. En el teléfono NO servía, y la causa no era la opacidad: el
   grabado es 16:9 y `cover` sobre una pantalla vertical recorta la franja central, así que
   desaparecía el arco y sólo quedaba textura de piedra cortada por los cantos. Un recorte no
   arregla una composición: hace falta OTRA composición.
   Por eso hay dos láminas, una apaisada y una vertical, y cada formato usa la suya. */
.recinto{position:absolute;left:0;right:0;top:0;height:min(148vh,1500px);z-index:1;
 pointer-events:none;background-position:50% 0;background-size:cover;background-repeat:no-repeat;
 opacity:.34;
 -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,#000 24%,rgba(0,0,0,.62) 56%,transparent 86%);
 mask-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,#000 24%,rgba(0,0,0,.62) 56%,transparent 86%)}

/* EL VELO. Sin él el grabado del recinto corre por detrás del titular y el oro sobre negro deja
   de ser oro sobre negro: pasa a ser oro sobre piedra. Es el mismo recurso que la viñeta del
   héroe en la Lectura — el fondo se hunde justo donde vive el texto y respira en los bordes,
   que es donde la arquitectura tiene algo que aportar.
   z-index -1 lo deja detrás del contenido de .escena pero por delante del recinto, porque
   .escena abre su propio contexto de apilado. */
.escena::before{content:"";position:absolute;left:0;right:0;top:0;height:min(148vh,1500px);
 z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse 72% 44% at 50% 24%,rgba(9,7,13,.9) 0%,rgba(9,7,13,.72) 40%,rgba(9,7,13,0) 74%)}

/* El eje. Los tres bloques se reordenan por estado; el DOM no cambia nunca. */
.eje{display:flex;flex-direction:column;align-items:center;text-align:center}
.eje > *{width:100%}

/* EL ORDEN, que es lo que decide qué se ve primero en un teléfono:
     estado 1 → formulario · ÁRBOL · método      (quien llega a una calculadora viene a escribir)
     estado 2 → NOMBRE · Árbol · todo lo demás   (el hallazgo primero, la prueba después)
   El DOM es el mismo en los dos; sólo cambia `order`. */
#forma{order:1}
.lamina-caja{order:2}
.metodo{order:3}
body[data-estado="resultado"] #golpe-sec{order:0}
body[data-estado="resultado"] .lamina-caja{order:1}
body[data-estado="resultado"] #resultado{order:2}
body[data-estado="resultado"] .metodo{display:none}
/* En el resultado la lámina respira por arriba: el nombre acaba de ocupar el héroe. */
body[data-estado="resultado"] .lamina-caja{margin-top:clamp(20px,4vh,44px)}

/* La lámina. Grande y centrada, como en toda la casa: en la landing de la Lectura el Árbol ocupa
   1040 px y manda sobre su sección entera. Encogerlo a una columna lateral fue el otro error de
   la primera versión. */
.lamina-caja{margin:clamp(26px,5vh,56px) auto 0}
.arbol{width:min(560px,94vw);margin:0 auto;transition:opacity 1.4s ease,width .9s ease}
/* EN EL ESTADO 1 EL ÁRBOL YA NO SE APAGA. Estaba al 44 % y a 420 px: una miniatura gris debajo
   de un formulario. Y era justo al revés de lo que la página necesita — el Árbol trazándose solo,
   con el Fulgor descendiendo por los senderos, ES la demostración de lo que va a pasar cuando
   alguien escriba su fecha. Enseñarlo apagado es esconder el producto. */
body[data-estado="forma"] .arbol{width:min(520px,90vw);opacity:.9}
body[data-estado="resultado"] .arbol{opacity:1}
body[data-estado="resultado"] .lamina-caja{margin-top:0}

@media(min-width:900px){
 .arbol{width:min(680px,72vw)}
 body[data-estado="forma"] .arbol{width:min(640px,62vw)}
}

/* ── voces tipográficas ─────────────────────────────────────────────────────────────────────
   Las familias son las del manual y ninguna otra: Cormorant Garamond para título editorial,
   EB Garamond para cuerpo, Cinzel para nombre de entidad, Frank Ruhl Libre para hebreo y
   Space Mono para etiqueta. Cinzel Decorative NO aparece: no está cargada en /_assets/type.css
   y declararla sólo produce una caída silenciosa a Cinzel. */
.ceja{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.28em;
 text-transform:uppercase;color:var(--ash)}

h1.titular{font-family:var(--head);font-weight:400;font-size:clamp(32px,7.2vw,62px);
 line-height:1.14;color:var(--cream);margin:18px auto 0;max-width:15em;text-wrap:balance}
.nb{white-space:nowrap}
/* EL acento de oro del estado 1, y es uno solo. Lo que la página promete cabe en esas cuatro
   palabras; el resto sostiene. */
h1.titular em{font-style:normal;color:var(--oro);text-shadow:0 0 38px rgba(232,200,126,.36)}

h2.seccion{font-family:var(--head);font-weight:400;font-size:clamp(26px,3.6vw,40px);
 line-height:1.24;color:var(--cream);margin:12px auto 20px;max-width:16em;text-wrap:balance}
h3.rotulo{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.24em;
 text-transform:uppercase;color:var(--oro);margin:0 auto 12px}

/* Cuerpo. Centrado como bloque y en bandera dentro de él a partir de tableta: en el teléfono la
   columna mide lo mismo que la medida de lectura, así que centrarlo no cuesta nada y mantiene
   el eje; en escritorio el texto largo centrado se vuelve ilegible y pasa a bandera. */
p{font-family:var(--body);font-size:19px;line-height:1.78;color:var(--marfil);
 max-width:34em;margin-inline:auto;text-wrap:pretty}
p+p{margin-top:16px}
em{font-style:normal;color:var(--oro)}
b{font-weight:400;color:var(--cream)}

.bajada{font-size:19.5px;color:var(--marfil);margin-top:20px;max-width:30em}
.micro{margin-top:18px;font-size:16.5px;line-height:1.6;color:var(--dim);max-width:30em}
.micro b{color:var(--marfil)}

/* ── el filete con diamante: el separador de la casa ────────────────────────────────────── */
.filete{display:flex;align-items:center;gap:14px;margin:clamp(30px,5vh,52px) auto;
 max-width:36em;width:100%}
.filete::before,.filete::after{content:"";height:1px;background:var(--line2);flex:1}
.filete i{width:7px;height:7px;background:var(--daatB);transform:rotate(45deg);flex:none;
 box-shadow:0 0 14px rgba(169,107,232,.85)}

/* ═══ ESTADO 1 · el formulario ══════════════════════════════════════════════════════════ */
.forma{margin-top:clamp(28px,4.5vh,46px)}
.campos{display:grid;grid-template-columns:5rem 1fr 6.4rem;gap:11px;max-width:30rem;
 margin-inline:auto;text-align:left}
.campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.campo label{font-family:var(--label);font-size:16px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--dim)}
.campo input,.campo select{
 -webkit-appearance:none;appearance:none;width:100%;min-height:58px;padding:0 14px;
 background:rgba(232,200,126,.05);color:var(--cream);
 /* Borde permitido: aquí hay una acción. */
 border:1px solid var(--line2);border-radius:3px;
 font-family:var(--body);font-size:21px;line-height:1;
 transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.campo input{font-family:var(--label);font-weight:700;letter-spacing:.06em;text-align:center}
/* El select nativo de iOS ignora casi todo menos esto; la punta se pinta a mano porque
   appearance:none se la lleva. */
.campo select{padding-right:34px;
 background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
 background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
 background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.campo select option{background:#120d1c;color:var(--cream)}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--goldB);
 background:rgba(232,200,126,.09);box-shadow:0 0 0 3px rgba(232,200,126,.16)}
.campo input:focus-visible,.campo select:focus-visible{outline:2px solid var(--goldB);outline-offset:2px}
.campo.mal input,.campo.mal select{border-color:#e08a72;background:rgba(224,138,114,.07)}

.error{display:none;margin:14px auto 0;font-size:18px;line-height:1.6;color:#f0a992;max-width:30em}
.error.ver{display:block}
.error.bien{color:#8fd8ab}

.acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
 margin-top:26px}

/* ═══ LA FORMA DEL CTA ══════════════════════════════════════════════════════════════════════
   El manual la define y yo no la estaba usando (`voz.cta`):

     · forma  → "banda propia con filete y diamante; Cormorant itálica y Space Mono; cero emoji"
     · verbo  → "la acción completa y AL DOBLE DE TAMAÑO que la pregunta que la motiva"

   Así que un CTA de este canal no es un botón suelto: es una banda de tres pisos — la pregunta en
   Cormorant itálica y pequeña, el verbo entero y grande, y el detalle técnico en Space Mono
   debajo. La pregunta motiva, el verbo ocupa el doble, y el pie resuelve la duda que quedaría.

   Y el verbo va DENTRO de un botón con contorno, no suelto: la banda sola no parece pulsable, y
   un CTA que no parece pulsable no se pulsa. El contorno resuelve eso sin volver al cuadro de
   color plano, que era el problema de origen — un bloque saturado es el objeto menos Grimorio que
   puede haber en una página que por lo demás es un grabado.

   El color del contorno dice a dónde lleva: verde para WhatsApp, oro para lo de la casa. */
.cta-banda{margin:clamp(26px,4.4vh,42px) auto 0;max-width:34em}
.cta-pregunta{font-family:var(--head);font-style:italic;font-size:19px;line-height:1.45;
 color:var(--dim);margin:0 auto 14px;max-width:24em}
.cta-pie{font-family:var(--label);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--ash);margin-top:16px;max-width:none}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:13px;
 min-height:62px;padding:0 30px;cursor:pointer;
 /* Cormorant Garamond 400 es el único peso que existe de esa familia: pedirle un 600 haría que
    el navegador lo engordara solo y el rótulo dejaría de leer como el resto de la hoja. El peso
    lo da el CUERPO —el doble que la pregunta, como manda el manual— no un falso bold. */
 font-family:var(--head);font-weight:400;font-size:26px;line-height:1;
 background:transparent;background-image:none;border-radius:2px;
 border:1px solid var(--line2);color:var(--oro);
 transition:border-color .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}
.boton:hover{border-color:var(--goldB);background:rgba(232,200,126,.07);
 box-shadow:0 0 40px rgba(232,200,126,.22)}
.boton:active{transform:translateY(1px)}
.boton:focus-visible{outline:2px solid var(--goldW);outline-offset:3px}
.boton[disabled]{opacity:.6;cursor:progress}
/* El fantasma sigue siendo el secundario: más chico y en mono, porque ahí SÍ es una acción
   técnica (copiar, abrir en otro sitio) y no el acto principal. */
.boton.fantasma{min-height:48px;padding:0 20px;font-family:var(--label);font-weight:700;
 font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.boton.fantasma:hover{color:var(--oro);box-shadow:none}


/* ═══ ESTADO 2 · el resultado ═══════════════════════════════════════════════════════════ */
.golpe{margin-top:clamp(22px,3.6vh,38px)}
/* El hebreo es el término marcado y va en oro; el nombre es titular y va en marfil. Al revés
   —nombre en oro— el oro pasa a ser la masa y deja de destacar nada. El fulgor lo da la sombra,
   no el relleno. */
.golpe .heb{font-family:var(--heb);font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1;
 color:var(--oro);text-shadow:0 0 42px rgba(232,200,126,.5);margin:14px auto 0;max-width:none}
/* CINZEL DECORATIVE 700. El manual se la reserva a `titulo_web`: "títulos de página web y
   bloques ceremoniales", con el aviso de que NO es el logotipo — "son dos dibujos distintos de la
   misma familia y sólo uno es la marca". El nombre de la esfera es EL bloque ceremonial de esta
   página, así que es exactamente su sitio. Está cargada en /_assets/type.css en 400, 700 y 900;
   antes yo usaba Cinzel a secas, que es la del logotipo, y de paso desperdiciaba el único nivel
   tipográfico que el manual reserva para esto. */
.golpe .nombre{font-family:'Cinzel Decorative','Cinzel',Georgia,serif;font-weight:700;
 font-size:clamp(46px,10.5vw,116px);line-height:1;letter-spacing:.03em;text-transform:uppercase;
 color:var(--cream);margin:14px 0 0;
 text-shadow:0 0 60px rgba(232,200,126,.5),0 0 130px rgba(169,107,232,.3)}
.golpe .orden{font-family:var(--label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--ash);margin-top:18px;max-width:none}

/* La línea más importante de la página. Se compone como inscripción, no como párrafo. */
.esencia{font-family:var(--head);font-style:italic;font-weight:400;
 font-size:clamp(24px,3.6vw,38px);line-height:1.4;color:var(--cream);
 margin:clamp(24px,4vh,38px) auto 0;max-width:19em;text-wrap:balance}

.traza{font-family:var(--label);font-size:14px;line-height:1.7;color:var(--ash);
 letter-spacing:.02em;max-width:34em;margin-top:22px}

.bloque{margin-top:clamp(26px,4vh,42px)}

/* Las atribuciones, sin una sola caja. Se separan con filete y con aire. */
.atribs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.4vw,34px) clamp(14px,3vw,30px);
 margin:clamp(30px,5vh,50px) auto 0;max-width:38em;
 padding:clamp(24px,4vh,34px) 0;
 border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.atrib dt{font-family:var(--label);font-size:11px;font-weight:700;letter-spacing:.2em;
 text-transform:uppercase;color:var(--ash);margin-bottom:9px}
.atrib dd{font-family:var(--head);font-size:21px;line-height:1.32;color:var(--cream)}
.atrib .disco{display:inline-block;vertical-align:-3px;width:18px;height:18px;border-radius:50%;
 margin-right:9px;box-shadow:0 0 0 1px rgba(241,231,206,.3),0 0 18px 1px currentColor}
.atrib .glosa{display:block;margin-top:7px;font-family:var(--body);font-size:16px;
 line-height:1.52;color:var(--dim)}

/* El aviso: sin filete lateral ni caja. Se distingue por la voz —cursiva y un punto más
   apagada— que es como se distingue una acotación en una hoja impresa. */
.aviso{font-family:var(--head);font-style:italic;font-size:19px;line-height:1.66;
 color:var(--dim);max-width:32em;margin:clamp(28px,4.5vh,44px) auto 0}
.aviso b{font-style:normal;color:var(--cream)}

/* ── la décima ──────────────────────────────────────────────────────────────────────────── */
.decima{margin-top:clamp(46px,8vh,96px)}
/* ── los símbolos de la esfera ──────────────────────────────────────────────────────────────
   El emblema del Ep.5 va grande y sin caja: es un grabado con alfa sobre el negro de la página,
   así que no necesita recorte ni marco, sólo aire. Y cada símbolo lleva su glosa debajo, porque
   la doctrina dice que se leen como instrucciones y una instrucción sin su por qué es un adorno
   con nombre. */
.simbolos-sec{margin-top:clamp(34px,5.5vh,64px)}
.emblema{width:min(300px,64vw);margin:clamp(20px,3.4vh,32px) auto clamp(18px,3vh,28px)}
.emblema img{width:100%;height:auto;display:block;
 filter:drop-shadow(0 0 34px rgba(169,107,232,.3)) drop-shadow(0 0 60px rgba(232,200,126,.14))}
.simbolos{margin:0 auto;max-width:32em;text-align:left}
.sim{padding:15px 0;border-top:1px solid var(--line)}
.sim:first-child{border-top:0}
.sim dt{font-family:var(--head);font-size:21px;line-height:1.3;color:var(--oro);margin-bottom:5px}
.sim dd{font-family:var(--body);font-size:17.5px;line-height:1.6;color:var(--dim)}

.decima .remate{font-family:var(--head);font-style:italic;font-size:clamp(21px,2.8vw,28px);
 line-height:1.44;color:var(--cream);margin-top:22px;max-width:24em}

/* ── la entrega ─────────────────────────────────────────────────────────────────────────── */
.entrega{margin-top:clamp(40px,7vh,84px)}
.lista{list-style:none;margin:20px auto 0;padding:0;max-width:30em;text-align:left}
.lista li{position:relative;padding-left:24px;margin-top:11px;font-size:18px;line-height:1.6;
 color:var(--marfil)}
.lista li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
 background:var(--gold);transform:rotate(45deg);opacity:.7}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── el puente a la Lectura ─────────────────────────────────────────────────────────────── */
.puente{margin-top:clamp(40px,7vh,84px)}
.par{display:grid;grid-template-columns:1fr;gap:clamp(20px,3.4vw,40px);align-items:start;
 margin-top:26px}
.par-lam{margin-inline:auto;width:min(320px,68vw)}
.mini{width:100%;height:auto;display:block;overflow:visible}
.pie-fig{font-family:var(--label);font-size:13px;letter-spacing:.06em;line-height:1.5;
 color:var(--ash);margin-top:14px;max-width:26em}
.enlace{display:inline-block;margin-top:18px;font-family:var(--label);font-size:15px;
 letter-spacing:.11em;color:var(--oro);border-bottom:1px solid var(--line2);padding-bottom:4px;
 transition:border-color .2s ease,color .2s ease}
.enlace:hover{color:var(--goldW);border-color:var(--goldB)}
.enlace:focus-visible{outline:2px solid var(--goldB);outline-offset:3px}

@media(min-width:820px){
 .par{grid-template-columns:320px 1fr;text-align:left}
 .par-txt p{margin-inline:0}
 .par-lam{margin-inline:0}
 .pie-fig{margin-inline:0}
}

/* ── compartir y método ─────────────────────────────────────────────────────────────────── */
.compartir{margin-top:clamp(36px,6vh,70px)}
.copiado{display:none;margin-top:14px;font-family:var(--label);font-size:14px;letter-spacing:.1em;
 color:#7fd6a0;opacity:0;transition:opacity .25s ease}
.copiado.ver{opacity:1}
.metodo{margin-top:clamp(34px,6vh,72px)}

/* ── el pie ─────────────────────────────────────────────────────────────────────────────── */
.pie{position:relative;z-index:2;margin-top:clamp(46px,8vh,96px);padding:34px 0 48px;
 border-top:1px solid var(--line);text-align:center}
.pie p{font-family:var(--label);font-size:13px;letter-spacing:.13em;color:var(--ash);max-width:none}
.pie .sellos{margin-bottom:12px}
.pie a{color:var(--gold);border-bottom:1px solid transparent}
.pie a:hover{border-color:var(--line2)}

/* ═══ LA COREOGRAFÍA DEL HALLAZGO ══════════════════════════════════════════════════════════
   El orden importa: primero la lámina despierta entera, DESPUÉS se enciende la esfera, y sólo
   entonces entra el texto. Si el texto llegara antes que la luz, el resultado sería una tabla;
   llegando después, es un hallazgo. */

/* MICRO-BLACKOUT sobre el Árbol. Es el patrón del canal —atenuar todo lo demás para que el beat
   ilumine la escena— aplicado a la lámina: al encenderse una esfera, las otras nueve bajan al
   38 %. La ignición no se consigue subiendo la encendida (ya está al máximo), sino apagando el
   resto. En la primera versión la esfera encendida se perdía entre las diez porque todas
   brillaban igual. */
/* Y hay que hacerlo CON UNA ANIMACIÓN, no con una regla de opacidad: los orbes heredan
   `animation:orbPop ... forwards`, cuyo fotograma final fija opacity:1. Una animación con
   fill-mode le gana a la declaración, así que `opacity:.38` a secas no hacía absolutamente nada
   —el síntoma era que las diez esferas seguían igual de brillantes y la encendida no destacaba. */
body[data-estado="resultado"] .arbol.in .ar-orb:not(.on){
 animation:orbPop 1s var(--d) cubic-bezier(.22,.9,.3,1.15) forwards, atenuar .9s 1.15s ease both}
@keyframes atenuar{to{opacity:.34}}
body[data-estado="resultado"] .ar-letras,
body[data-estado="resultado"] .ar-paths{opacity:.5;transition:opacity 1.1s ease .15s}

.ar-halo{opacity:0;transition:opacity .8s ease .4s}
.ar-orb.on .ar-halo{opacity:.9}
.ar-cast{transition:opacity 1.4s ease,transform 1.4s ease}
.arbol.in .ar-cast.on{opacity:.34}
/* El aura de la encendida crece. En la Lectura el radio venía horneado más grande porque allá se
   sabía cuál era; aquí se escala, que es lo que permite que la misma lámina sirva para las diez
   respuestas. */
.ar-cast.on{transform-box:fill-box;transform-origin:center;transform:scale(1.3)}

/* El destello del canto al encenderse: un pulso único, no un bucle. Es el instante en que la
   fecha se vuelve un lugar del mapa. */
.ar-orb.on .ar-canto{animation:prender 1.6s cubic-bezier(.2,.85,.3,1) both}
@keyframes prender{
 0%{opacity:.5;stroke-width:1;filter:none}
 22%{opacity:1;stroke-width:3.6;filter:drop-shadow(0 0 30px rgba(255,247,224,1)) drop-shadow(0 0 68px rgba(232,200,126,.95))}
 100%{opacity:1;stroke-width:1.6;filter:drop-shadow(0 0 8px rgba(232,200,126,.9))}}

/* ── LA CHISPA ───────────────────────────────────────────────────────────────────────────
   Treinta y siete fotogramas de una ignición real, generada en video y atomizada a alfa por luma
   (la luz aditiva sobre negro ES su propia opacidad). Va como tira y se recorre con steps():
   fotograma a fotograma, sin códec de video de por medio, así que se comporta igual en el Safari
   de un iPhone que en Chrome de escritorio.

   ES UN AÑADIDO, NUNCA EL EFECTO. La ignición ya ocurre sin ella. La tira pesa 171 KB y sólo se
   pide DESPUÉS de que el resultado está en pantalla, y sólo si la conexión lo aguanta. Mobile
   first quiere decir esto: el teléfono con datos contados recibe la página entera y completa, y
   lo que se queda fuera es el adorno.

   Se coloca en las coordenadas REALES de la esfera encendida, en porcentaje del lienzo del SVG
   (680x950), que el build saca del propio SVG y no de una tabla escrita a mano. Los márgenes
   negativos van en %: un % de margen se resuelve contra el ANCHO del contenedor en los cuatro
   lados, así que -15 % centra igual en horizontal que en vertical. */
.chispa-alfa{position:absolute;z-index:3;pointer-events:none;
 left:var(--x,50%);top:var(--y,50%);
 width:23%;aspect-ratio:1;margin-left:-11.5%;margin-top:-11.5%;
 opacity:0;background-repeat:no-repeat;background-size:700% 600%}
.chispa-alfa[data-tira]{background-image:var(--tira)}
body[data-estado="resultado"] .chispa-alfa[data-tira].arde{
 animation:tira 3.083s steps(1) both, tiraFin 3.083s linear both}
/* 37 fotogramas en rejilla de 7x6: el fondo salta de celda en celda. El último renglón sólo
   tiene dos, y por eso la animación termina en el fotograma 37 y no en la celda 42. */
@keyframes tira{
 0%{background-position:0% 0%} 2.7%{background-position:16.667% 0%}
 5.4%{background-position:33.333% 0%} 8.1%{background-position:50% 0%}
 10.8%{background-position:66.667% 0%} 13.5%{background-position:83.333% 0%}
 16.2%{background-position:100% 0%}
 18.9%{background-position:0% 20%} 21.6%{background-position:16.667% 20%}
 24.3%{background-position:33.333% 20%} 27%{background-position:50% 20%}
 29.7%{background-position:66.667% 20%} 32.4%{background-position:83.333% 20%}
 35.1%{background-position:100% 20%}
 37.8%{background-position:0% 40%} 40.5%{background-position:16.667% 40%}
 43.2%{background-position:33.333% 40%} 45.9%{background-position:50% 40%}
 48.6%{background-position:66.667% 40%} 51.3%{background-position:83.333% 40%}
 54%{background-position:100% 40%}
 56.7%{background-position:0% 60%} 59.4%{background-position:16.667% 60%}
 62.1%{background-position:33.333% 60%} 64.8%{background-position:50% 60%}
 67.5%{background-position:66.667% 60%} 70.2%{background-position:83.333% 60%}
 72.9%{background-position:100% 60%}
 75.6%{background-position:0% 80%} 78.3%{background-position:16.667% 80%}
 81%{background-position:33.333% 80%} 83.7%{background-position:50% 80%}
 86.4%{background-position:66.667% 80%} 89.1%{background-position:83.333% 80%}
 91.8%{background-position:100% 80%}
 94.5%{background-position:0% 100%} 97.2%{background-position:16.667% 100%}
 100%{background-position:16.667% 100%}}
@keyframes tiraFin{0%,88%{opacity:1}100%{opacity:0}}

/* La entrada del discurso: escalonada, de arriba abajo, detrás de la luz. */
.entra{opacity:0;transform:translateY(15px)}
body[data-estado="resultado"] .entra{animation:sube .9s cubic-bezier(.2,.8,.25,1) both;
 animation-delay:calc(.42s + var(--i,0) * .1s)}
@keyframes sube{to{opacity:1;transform:none}}

/* Quien pidió menos movimiento recibe la MISMA información, sin coreografía. No es una versión
   recortada: se enciende igual, sólo que sin trayecto. */
@media (prefers-reduced-motion:reduce){
 .entra,body[data-estado="resultado"] .entra{animation:none;opacity:1;transform:none}
 .ar-orb.on .ar-canto{animation:none}
 .arbol,.ar-halo,.ar-cast,.boton{transition:none}
}

/* ── lo propio del teléfono ─────────────────────────────────────────────────────────────── */
@media(max-width:620px){
 .campos{grid-template-columns:4.5rem 1fr 5.6rem;gap:9px}
 .campo label{font-size:16px;letter-spacing:.1em}
 .campo input,.campo select{font-size:20px;padding:0 10px}
 .campo select{padding-right:30px;background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px)}
 /* A todo el ancho: es el objetivo táctil más grande que cabe, y con el teléfono en una mano el
    pulgar no llega igual a todos lados. */
 .boton{width:100%;padding:0 22px}
 .boton.fantasma{width:auto;flex:1 1 auto}
 .atribs{grid-template-columns:1fr;gap:22px}
 .bajada{font-size:18px;margin-top:15px}
 .escena{padding-top:calc(60px + 22px)}
 /* Los nombres de las esferas del pilar de la derecha se salen del lienzo del SVG, y con el
    recorte de la raíz eso se traduce en una etiqueta cortada por el canto de la pantalla. El
    Árbol cede unos puntos de ancho: prefiero un mapa algo menor a un nombre partido. */
 body[data-estado="resultado"] .arbol{width:min(520px,86vw)}
}
@media(max-width:380px){
 .campos{grid-template-columns:4.4rem 1fr}
 .campo.anio{grid-column:1 / -1}
}

/* ── la barra ───────────────────────────────────────────────────────────────────────────────
   La caja del logotipo se hereda de la Lectura y no se retoca: Cinzel 700 a .085em en dos
   líneas, que es lo que fija el manual.

   Los enlaces sí cambian. En la Lectura se pliegan en un cajón con hamburguesa por debajo de
   820px; aquí no, y se ocultan. Dos enlaces no justifican un control que hay que abrir, y en una
   calculadora el pliegue del teléfono es el recurso escaso: el campo tiene que verse sin
   desplazar. Los dos destinos siguen alcanzables — la Lectura aparece en su propio bloque
   después del resultado, y los dos están en el pie. */
@media(max-width:820px){
 .nav .links{display:none}
 .nav .wrap{height:60px;justify-content:center}
 .nav .mark .wm{font-size:12.5px}
 .nav .mark .sello{width:34px;height:34px}
}
/* Se pinta al desplazar, para que la barra no flote sobre el grabado sin separación. */
.nav.solid{background:rgba(9,7,13,.86)}

/* ── el mini Árbol del puente ───────────────────────────────────────────────────────────────
   La misma geometría de arriba a otra escala. Sin letras, sin plato y sin Da'at: a 280 px eso
   sería ruido, y aquí el dibujo tiene UNA cosa que decir — dos esferas encendidas en vez de una. */
.mini{width:100%;height:auto;display:block;overflow:visible}
.mini-p line{stroke:var(--gold);stroke-width:2.4;stroke-opacity:.22;stroke-linecap:round}
.mini-e{fill:rgba(232,200,126,.13);stroke:var(--gold);stroke-width:2.4;stroke-opacity:.42}
.mini-e.on{fill:var(--goldB);stroke:#fff7e0;stroke-width:3.4;stroke-opacity:1;
 filter:drop-shadow(0 0 14px rgba(232,200,126,.9))}

/* ── el desborde del plato ──────────────────────────────────────────────────────────────────
   El Árbol se dibuja con `overflow:visible` a propósito: el plato graduado llega a r=354 sobre un
   lienzo de 680 y las auras de las esferas se salen de la caja, y así tiene que ser — recortarlas
   en el SVG mataría el halo. Lo que no puede pasar es que eso genere barra horizontal en un
   teléfono, que es lo que medía el gate: 48 px de más a 390.

   `overflow-x:clip` en la raíz recorta sin crear contenedor de desplazamiento, así que a
   diferencia de `hidden` NO rompe el `position:sticky` ni el desplazamiento suave. `body` ya
   traía `hidden` heredado de la Lectura, pero el que cuenta para el ancho del documento es el
   elemento raíz. */
html{overflow-x:clip}

/* ═══ EL MEDALLÓN DE LA ESFERA ══════════════════════════════════════════════════════════════
   Va ARRIBA del nombre: primero se ve la figura, después se lee cómo se llama. Es el tratamiento
   aprobado de las diez fichas (out/ficha/_kit.py → sun_glyph + figura_del_numero) portado a la
   web, con lo único que el papel no podía tener: los aros giran en contra, la corona respira y el
   aura lleva el color de escala Reina de SU esfera.

   El manual, sobre los acentos por entidad: "viven en el AURA, nunca en el trazo. La esfera
   siempre es dorada; lo que cambia es la luz que la rodea". Por eso el disco y la figura van en
   oro en las nueve, y lo único que cambia de una a otra es el halo. */
.medallon-caja{width:min(268px,62vw);margin:0 auto clamp(6px,1.6vh,16px)}
.medallon{width:100%;height:auto;display:block;overflow:visible}
.m-aura{transform-box:fill-box;transform-origin:center;animation:mLatir 5.4s ease-in-out infinite}
@keyframes mLatir{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.m-corona{transform-box:view-box;transform-origin:130px 130px;animation:sSpin 96s linear infinite}
.m-ray{stroke:var(--gold);stroke-width:1.5;opacity:.5}
.m-ray.lg{stroke:var(--goldB);stroke-width:2.1;opacity:.9}
.m-aro-a,.m-aro-b{transform-box:view-box;transform-origin:130px 130px}
.m-aro-a{animation:sSpin 44s linear infinite}
.m-aro-b{animation:sSpin 31s linear infinite reverse}
.m-ring{fill:none;stroke:var(--goldB);stroke-width:1.7;opacity:.72}
.m-ring2{fill:none;stroke:var(--gold);stroke-width:1;opacity:.5;stroke-dasharray:2.4 7}
/* LA FIGURA DEL NÚMERO. Es el trazo que sostiene, así que pesa más que todo lo que la rodea:
   la jerarquía de trazo del canal pone `strong` en 3.4 sobre lienzo de 1080, y aquí el lienzo es
   260, pero el principio es el mismo — con todo a hairline el diagrama lee plano. */
.mfig{fill:none;stroke:#FDF6DF;stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round;
 opacity:1;filter:drop-shadow(0 0 5px rgba(253,246,223,.95)) drop-shadow(0 0 16px rgba(232,200,126,.7))}
.mfig-f{fill:var(--goldW);filter:drop-shadow(0 0 10px rgba(255,244,214,1))}
/* El núcleo pinta ENCIMA de la figura a propósito —así se dibujó el sol de las fichas— pero si
   crece de más se la traga. Se le pone un canto oscuro para que la figura salga de detrás con
   borde propio en vez de fundirse con el oro del disco. */
.m-core{filter:drop-shadow(0 0 22px rgba(232,200,126,.55));stroke:rgba(10,8,13,.55);stroke-width:2.4}
.m-core2{fill:none;stroke:rgba(255,244,214,.42);stroke-width:1}
/* Entra encendiéndose, como la esfera del Árbol. Una vez, no en bucle. */
body[data-estado="resultado"] .medallon{animation:mPrende 1.5s cubic-bezier(.2,.85,.3,1) both}
@keyframes mPrende{
 0%{opacity:0;transform:scale(.72)}
 55%{opacity:1;transform:scale(1.04)}
 100%{opacity:1;transform:scale(1)}}

/* ═══ EL BOTÓN DE WHATSAPP ══════════════════════════════════════════════════════════════════
   El único verde de la página, y el único logo ajeno. Va en el verde de la plataforma porque ese
   color ES la instrucción: dice a dónde lleva antes de que nadie lea el rótulo. */
/* El rótulo va en MARFIL, no en verde. En verde daba 2.31:1 contra el fondo del sitio —por
   debajo del mínimo de 3:1 para cuerpo grande— y el gate lo cazó antes de que llegara a nadie.
   El verde no se pierde: vive en el filete y en el logo, que es donde de verdad comunica a dónde
   lleva. Un color de marca no vale un rótulo que no se lee. */
.boton.wa{border-color:rgba(62,220,114,.6);color:var(--cream);
 box-shadow:0 0 30px rgba(46,196,106,.16)}
.boton.wa:hover{border-color:#3ddc72;color:#fff;background:rgba(46,196,106,.1);
 box-shadow:0 0 46px rgba(46,196,106,.34)}
.boton.wa:focus-visible{outline-color:#7ef2a8}
/* El logo va SIEMPRE en el verde de la plataforma, incluso cuando el rótulo no lo está: es el
   único sitio de la página donde un color ajeno está justificado, porque ese verde ES la
   instrucción. Dice a dónde lleva antes de que nadie lea. */
.ico-wa{width:25px;height:25px;flex:none;fill:#3ddc72}

/* ═══ LA INCÓGNITA ══════════════════════════════════════════════════════════════════════════
   El puente a la Lectura no argumenta, enseña: aquí está tu esfera, y aquí está la que todavía
   no conoces. Una operación sin resolver sobre uno mismo es lo único que mueve a alguien que
   acaba de recibir algo gratis. */
.incognita{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3.4vw,34px);
 margin:clamp(26px,4.4vh,42px) auto clamp(22px,3.4vh,34px);flex-wrap:nowrap}
.inc-lado{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.inc-rot{font-family:var(--label);font-size:11px;font-weight:700;letter-spacing:.2em;
 text-transform:uppercase;color:var(--ash)}
.inc-esf{font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:clamp(22px,4.4vw,38px);
 line-height:1.1;letter-spacing:.03em;text-transform:uppercase;color:var(--cream);
 text-shadow:0 0 32px rgba(232,200,126,.45)}
.inc-pie{font-family:var(--head);font-style:italic;font-size:15px;color:var(--dim)}
.inc-aspa{font-family:var(--head);font-size:clamp(20px,3vw,28px);color:var(--gold);opacity:.55;
 margin-top:14px;flex:none}
/* El lado que falta: late en violeta de Da'at, que es el color de lo que no se sabe. */
.inc-oculta .inc-rot,.inc-oculta .inc-pie{color:#8B7AA8}
.inc-q{color:var(--daatB);font-size:clamp(30px,6vw,52px);
 text-shadow:0 0 34px rgba(169,107,232,.85);animation:incLatir 2.6s ease-in-out infinite}
@keyframes incLatir{0%,100%{opacity:.62;text-shadow:0 0 22px rgba(169,107,232,.5)}
 50%{opacity:1;text-shadow:0 0 44px rgba(169,107,232,1)}}

@media (prefers-reduced-motion:reduce){
 .m-aura,.m-corona,.m-aro-a,.m-aro-b,.inc-q{animation:none}
 body[data-estado="resultado"] .medallon{animation:none;opacity:1;transform:none}
 .inc-q{opacity:1}
}
@media(max-width:620px){
 .incognita{gap:12px}
 .inc-esf{font-size:clamp(19px,5.2vw,26px)}
 .inc-rot{font-size:10px;letter-spacing:.14em}
 .inc-pie{font-size:13.5px}
 .boton.wa{padding:0 18px}
}

/* ═══ EL PROTAGONISMO DE LA ESFERA ENCENDIDA ════════════════════════════════════════════════
   La primera versión la encendía y punto: sobre diez esferas doradas, la que se enciende tenía
   que ganar por brillo, y el brillo solo no gana. Ahora ganan tres cosas a la vez y ninguna es
   sutil:

     1 · las otras nueve CEDEN (micro-blackout al 34 %), que es el patrón del canal;
     2 · el aura de la suya crece y respira;
     3 · y EMANA: dos anillos que salen de ella y se apagan al crecer, desfasados medio ciclo
         para que la emanación sea continua. Un parpadeo se lee a error de render; una emanación
         se lee a que ahí hay algo vivo.

   El color de los anillos es el de escala Reina de SU esfera, como manda el manual: el acento
   por entidad vive en el aura, nunca en el trazo. */
.ar-pulso{fill:none;stroke-width:2.2;opacity:0;transform-box:fill-box;transform-origin:center;
 pointer-events:none}
body[data-estado="resultado"] .arbol.in .ar-pulso.on{animation:emana 3.4s cubic-bezier(.2,.6,.35,1) infinite}
body[data-estado="resultado"] .arbol.in .ar-pulso.on.p1{animation-delay:1.7s}
@keyframes emana{
 0%{opacity:0;transform:scale(1);stroke-width:3.4}
 12%{opacity:.9}
 100%{opacity:0;transform:scale(3.6);stroke-width:.6}}

/* Y el aura respira de verdad: en la versión anterior era un brightness del 12 %, que sobre un
   fondo negro no se percibe. */
.ar-cast.on{animation:auraLatir 3.4s ease-in-out infinite}
@keyframes auraLatir{
 0%,100%{opacity:.3;transform:scale(1.24)}
 50%{opacity:.52;transform:scale(1.42)}}
.ar-orb.on .ar-aura{animation:auraOrbe 3.4s ease-in-out infinite}
@keyframes auraOrbe{0%,100%{opacity:.36}50%{opacity:.62}}
/* El halo girando se acelera y engorda: es lo que el ojo usa para volver a encontrarla después
   de haber leído el texto. */
.ar-orb.on .ar-halo{stroke-width:2.2;opacity:1;
 filter:drop-shadow(0 0 10px rgba(255,247,224,.95))}
.ar-orb.on .ar-spin{animation:sSpin 14s linear infinite}

@media (prefers-reduced-motion:reduce){
 .ar-pulso,.ar-cast.on,.ar-orb.on .ar-aura{animation:none}
 .ar-cast.on{opacity:.34;transform:scale(1.3)}
}

/* El heptagrama de la firma: {7/3} + {7/2} + aro, con la proporción de trazo y opacidad del
   canon (structure 0.95 · fine 0.40 · hair 0.32). La segunda estrella y el aro no compiten: son
   lo que hace que la figura se lea como LA del canal y no como una estrella de siete picos. */
.mfig-2{fill:none;stroke:#8a6f3e;stroke-width:1.9;stroke-linejoin:round;opacity:.55}
.mfig-aro{fill:none;stroke:#8a6f3e;stroke-width:1.2;opacity:.42}

/* ═══ EL INSTRUMENTO ════════════════════════════════════════════════════════════════════════
   La hoja de la Lectura lo dice de su propio mandala: "es CIMIENTO, no ornamento… la página abre
   con el instrumento y luego enseña el mapa que se lee sobre él". Yo heredaba todo el CSS de
   `.geo-*` y no colocaba una sola figura, así que el héroe era un formulario sobre negro.

   Va detrás de todo, con el centro VACIADO por máscara: ahí vive la única frase que la página
   necesita que se lea, y una maraña de cuerdas por detrás del titular lo mata. Comparte eje con
   el sello, así que salen concéntricos por construcción. */
.mandala-caja{position:absolute;left:50%;top:clamp(160px,34vh,340px);
 width:min(1180px,158vw);aspect-ratio:1;transform:translate(-50%,-50%);
 z-index:2;pointer-events:none;opacity:0;
 -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 19%,rgba(0,0,0,.4) 31%,#000 46%,rgba(0,0,0,.5) 68%,transparent 86%);
 mask-image:radial-gradient(circle at 50% 50%,transparent 19%,rgba(0,0,0,.4) 31%,#000 46%,rgba(0,0,0,.5) 68%,transparent 86%);
 animation:geoIn 3.4s 1s ease-out forwards}
.mandala-caja svg{width:100%;height:100%;display:block;overflow:visible}
/* En el resultado se retira: ahí el instrumento ya cumplió y el protagonista es la esfera. */
/* Y en el resultado el mandala se retira DEL TODO. Dejarlo al 24 % lo convertía en más líneas
   por detrás del Árbol, que es justo lo que se acaba de quitar de la lámina. El instrumento
   cumplió en el héroe; aquí el protagonista es la esfera encendida y nada más. */
body[data-estado="resultado"] .mandala-caja{opacity:0;transition:opacity 1s ease}

/* ── el sello de Da'at ──────────────────────────────────────────────────────────────────────
   La corona del héroe. Aros contrarrotantes con la letra al centro y el disco respirando; es la
   misma pieza que abre la landing de la Lectura, extraída del mismo sitio. Sin él la página
   empezaba en una línea de texto pequeño. */
.sello-daat{width:clamp(96px,15vw,148px);margin:0 auto clamp(18px,3vh,30px);aspect-ratio:1;
 position:relative;z-index:2}
.sello-daat svg{width:100%;height:100%;overflow:visible;display:block}
body[data-estado="resultado"] .sello-daat{display:none}

/* El héroe necesita su propio aire: el sello y el mandala piden sitio arriba. */
body[data-estado="forma"] .escena{padding-top:calc(66px + clamp(30px,6vh,74px))}

/* ── el botón del héroe ─────────────────────────────────────────────────────────────────────
   El del resultado va con contorno porque allí compite con el bloque de la Lectura y ninguno debe
   gritar. Éste no compite con nada: es la única acción de la pantalla, y con el mismo contorno
   fino se leía como un enlace secundario. Se le da cuerpo con un relleno de oro muy bajo y un
   resplandor propio — sigue sin ser un cuadro de color plano, que es lo que este canal no admite,
   pero ya pesa lo que tiene que pesar. */
#btn-calcular{font-size:29px;min-height:70px;padding:0 46px;
 border-color:rgba(232,200,126,.55);color:var(--goldB);
 background:linear-gradient(180deg,rgba(232,200,126,.13),rgba(232,200,126,.045));
 box-shadow:inset 0 0 34px rgba(232,200,126,.09),0 0 44px rgba(232,200,126,.16)}
#btn-calcular:hover{border-color:var(--goldB);color:var(--goldW);
 background:linear-gradient(180deg,rgba(232,200,126,.22),rgba(232,200,126,.08));
 box-shadow:inset 0 0 40px rgba(232,200,126,.14),0 0 66px rgba(232,200,126,.3)}
@media(max-width:620px){#btn-calcular{font-size:25px;min-height:64px}}


/* ── héroe a sangre (generado) ─────────────────────────────────────────── */
.recinto{background-image:url(/esferas/_assets/recinto.webp)}
@media(max-aspect-ratio:1/1){
 .recinto{background-image:url(/esferas/_assets/recinto-alto.webp);opacity:.3;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0%,#000 22%,rgba(0,0,0,.5) 60%,transparent 88%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0%,#000 22%,rgba(0,0,0,.5) 60%,transparent 88%)}
}