/* ═══ CINE · la entrada, la puerta y el universo ═════════════════════════════
   Un solo plano. El universo (#cine-cielo) dibuja el cielo, el cerebro y el
   sello; la capa #cine-entrada solo lleva el título y los dos mandos. Nada de
   la página asoma mientras la película está: aparece una sola vez, al final. */

#cine-cielo{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:#010A0A}

body.cine-intro{background:#010A0A!important}
body.cine-intro>*:not(#cine-entrada):not(#cine-cielo):not(script):not(style){opacity:0!important;pointer-events:none!important}
/* el paso 3 del traspaso: la cabecera (con su marca OG) aparece donde el sello se apaga */
body.cine-intro.cine-techo-ve>#techo{opacity:1!important;transition:opacity .3s ease}
body.cine-intro.cine-techo-espera>#techo{transition:opacity .3s ease}
/* el paso 4: lo demás, una sola vez */
body.cine-llega>*:not(#cine-entrada):not(#cine-cielo):not(#techo):not(script):not(style){animation:ceAparece .42s cubic-bezier(.2,.7,.2,1) both}
body.cine-llega #acceso .acc{animation:ceTarjeta .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes ceAparece{from{opacity:0}to{opacity:1}}
@keyframes ceTarjeta{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Con el universo de cielo, los cielos viejos se apartan. */
body.cine-cielo #galaxia,
body.cine-cielo .veta-svg,
body.cine-cielo:not(.en-app) #ae-cielo{display:none!important}
body.cine-cielo:not(.en-app){background:#010A0A}
body.cine-cielo #portada{position:relative;z-index:1}

/* ── la capa ── */
.ce{position:fixed;inset:0;z-index:9000;color:#F3ECD9;font-family:var(--sans,'Archivo',system-ui,sans-serif);
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.ce-titulo{position:absolute;left:0;right:0;top:62%;text-align:center;padding:0 16px;pointer-events:none}
.ce-pre{font:600 clamp(12.5px,3.3vw,15px)/1 var(--sans,'Archivo',sans-serif);letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;
  color:rgba(234,215,156,.9);margin:0 0 16px;opacity:0}
.ce-nombre{margin:0;font:700 clamp(34px,9.6vw,76px)/1.04 var(--serif,'Cinzel',serif);letter-spacing:.06em;white-space:nowrap}
.ce-nombre span{display:inline-block;
  background:linear-gradient(100deg,#B08A45 0%,#E8D193 30%,#FBF3D6 46%,#E2C680 60%,#B8924C 100%);
  background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  clip-path:inset(0 0 100% 0);transform:translateY(.18em)}
.ce-titulo-ve .ce-pre{animation:cePre 1s cubic-bezier(.2,.7,.2,1) forwards}
.ce-titulo-ve .ce-nombre span{animation:ceNombre 1.2s cubic-bezier(.2,.75,.15,1) .2s forwards, ceBrillo 1.4s ease-in-out .3s forwards}
.ce-corta.ce-titulo-ve .ce-pre{animation-duration:.5s}
.ce-corta.ce-titulo-ve .ce-nombre span{animation:ceNombre .6s cubic-bezier(.2,.75,.15,1) .05s forwards, ceBrillo 1.4s ease-in-out .3s forwards}
@keyframes cePre{from{opacity:0;letter-spacing:.6em;padding-left:.6em}to{opacity:1;letter-spacing:.34em;padding-left:.34em}}
@keyframes ceNombre{to{clip-path:inset(0 0 -20% 0);transform:none}}
@keyframes ceBrillo{from{background-position:100% 0}to{background-position:0 0}}
/* saltar con la app todavía bajando: el sello quieto y un «Cargando…» callado */
.ce-cargando{margin:18px 0 0;font:500 13px/1 var(--sans,'Archivo',sans-serif);color:var(--bruma,#AEC7C3);opacity:0;transition:opacity .3s ease}
.ce-cargando-ve .ce-cargando{opacity:1}

/* ── los mandos ── */
.ce-mandos{position:absolute;left:0;right:0;bottom:max(22px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;
  align-items:center;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-left))}
.ce-mandos button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(201,169,97,.38);background:rgba(2,22,22,.55);color:#EAD79C;
  font:600 14px/1 var(--sans,'Archivo',sans-serif);letter-spacing:.04em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.ce-mandos button:hover{background:rgba(201,169,97,.14);border-color:rgba(234,215,156,.7);color:#F8EFCF}
/* el anillo de foco solo después de usar el teclado (no en el primer cuadro) */
.ce .ce-mandos button:focus,.ce .ce-mandos button:focus-visible{outline:none}
.ce.teclado .ce-mandos button:focus-visible{outline:2px solid #EAD79C;outline-offset:3px}
.ce-mandos svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ce-son .ce-son-on{display:none}
.ce-con-son .ce-son .ce-son-on{display:block}
.ce-con-son .ce-son .ce-son-x{display:none}
.ce-saltar{padding-right:12px!important}
.ce-barra{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(201,169,97,.10)}
.ce-barra i{display:block;height:100%;background:linear-gradient(90deg,rgba(201,169,97,.2),#C9A961);transform-origin:0 50%;transform:scaleX(0)}
@media (min-width:900px){.ce-mandos{bottom:32px;padding:0 40px}}

/* ── el traspaso: el título se va (350 ms), el sello vuela (es del cielo) ── */
.ce-yendo{pointer-events:none}
.ce-yendo .ce-mandos,.ce-yendo .ce-barra{opacity:0;transition:opacity .3s ease}
.ce-yendo .ce-titulo{opacity:0;transition:opacity .35s ease}
.ce-yendo .ce-pre,.ce-yendo .ce-nombre span{animation-play-state:paused}

/* ── movimiento reducido: nada vuela, todo aparece ── */
.ce-quieto .ce-pre,.ce-quieto .ce-nombre span{animation:none!important;opacity:1;clip-path:none;transform:none}
.ce-quieto .ce-nombre span{background-position:40% 0}
.ce-quieto.ce-yendo .ce-titulo{transition:opacity .25s ease}
@media (prefers-reduced-motion:reduce){
  body.cine-llega>*:not(#cine-entrada):not(#cine-cielo),body.cine-llega #acceso .acc{animation:ceAparece .3s ease both!important}
}

/* ═══ LA PUERTA ════════════════════════════════════════════════════════════
   El cerebro ES AU-RA: su botón es una caja transparente del tamaño del
   cerebro (lo dibuja el cielo, centrado ahí) con un corazón de jade que late
   cada 2,4 s. Su nombre en Cinzel; lo que dice, en Archivo. */
#techo .marca{display:inline-flex;align-items:center}
.cine-og{width:40px;height:22px;margin-right:10px;flex:none}
body.cine-cielo #acceso .vidrio{background:rgba(2,22,22,.72);border-color:rgba(201,169,97,.26);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(234,215,156,.06)}
body.cine-cielo #acceso .campo input{background:rgba(1,16,16,.82);border-color:rgba(127,216,196,.22)}
body.cine-cielo #acceso .campo input:focus{border-color:var(--oro)}
body.cine-cielo #acceso .seg{background:rgba(1,14,14,.6)}
body.cine-cielo .techo .idiomas{background:rgba(1,16,16,.55)}
body.cine-cielo .ag-orbe{width:min(320px,calc(100vw - 48px));height:auto;aspect-ratio:1.6/1;margin:6px 0 0;border-radius:28px;background:none}
body.cine-cielo .ag-orbe canvas,body.cine-cielo .ag-orbe .ag-aro{display:none}
body.cine-cielo .ag-orbe::after{content:'';grid-area:1/1;width:30%;height:48%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(159,234,212,.55),rgba(62,217,160,.18) 55%,rgba(62,217,160,0));
  animation:agCorazon 2.4s ease-out infinite;opacity:.55}
@keyframes agCorazon{0%{opacity:.35;transform:scale(.92)}8%{opacity:.85;transform:scale(1.04)}24%{opacity:.6}40%,100%{opacity:.35;transform:scale(.92)}}
body.cine-cielo .ag-orbe:focus-visible{outline:2px solid var(--oroLt);outline-offset:4px}
body.cine-cielo .ag-firma{margin:28px 0 12px;letter-spacing:.14em;text-shadow:0 1px 12px rgba(1,10,10,.95)}
body.cine-cielo .ag-voz{font:500 18px/1.45 var(--sans);color:#F3ECD9;max-width:30ch;text-transform:none;min-height:0;
  text-shadow:0 1px 14px rgba(1,10,10,.95),0 0 2px rgba(1,10,10,.9);text-wrap:pretty}
body.cine-cielo .ag-voz::before{inset:-18px -28px;background:radial-gradient(closest-side,rgba(1,10,10,.6),rgba(1,10,10,.3) 60%,transparent)}
.ag-voz-cine{display:grid}
.ag-voz-cine>.ag-reserva,.ag-voz-cine>.ag-tecleo{grid-area:1/1}
.ag-voz-cine>.ag-reserva{visibility:hidden}
.ag-voz-cine>.ag-sigue{display:block;margin-top:10px;color:var(--bruma);font-weight:400;opacity:0;transition:opacity .5s ease}
.ag-voz-cine>.ag-sigue.ver{opacity:1}
.ag-nombre{font-family:var(--serif);font-weight:700;letter-spacing:.04em;color:var(--oroHi)}
@media (prefers-reduced-motion:reduce){body.cine-cielo .ag-orbe::after{animation:none}}
@media (max-height:720px){body.cine-cielo .ag-orbe{width:min(220px,calc(100vw - 48px))}}
@media (min-width:901px){
  body.cine-cielo #acceso{grid-template-columns:minmax(0,480px) 428px;column-gap:96px;justify-content:center;align-items:start;align-content:center}
  body.cine-cielo .acc-lado{justify-self:stretch;max-width:none}
  body.cine-cielo .acc-escena{align-items:center;text-align:center}
  body.cine-cielo .ag-orbe{width:360px;margin:0}
  body.cine-cielo #acceso .acc{width:100%;max-width:428px}
}
@media (min-width:1200px){body.cine-cielo .ag-voz{font-size:22px}}

/* ═══ EL NÚCLEO · v3 «Órbitas» ══════════════════════════════════════════════════
   El sistema lo pinta el lienzo (universo.js); aquí, la capa del DOM: un botón
   invisible sobre cada planeta (toque, teclado, lector), su rótulo, el saludo,
   el dock (Enviar · Todo · Recibir) y el portal de color hacia cada sección. */
body.cn-vivo #app{background:transparent!important}
body.cn-vivo #ae-cielo{display:block}
body.cn-vivo #aura-orbe{display:none!important}
#at-boton.cn-at-cabecera{position:fixed;right:auto;bottom:auto;width:44px;height:44px;background:rgba(2,22,22,.55);
  border:1px solid rgba(201,169,97,.38);color:var(--crema);box-shadow:none}
#at-boton.cn-at-cabecera svg{stroke:var(--crema)}
.cn-casa{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.cn-arrastre{position:absolute;inset:0;pointer-events:auto;touch-action:none;cursor:grab}
.cn-arrastre:active{cursor:grabbing}
.cn-capa{position:absolute;inset:0;pointer-events:none}
.cn-saludo{position:absolute;left:max(16px,env(safe-area-inset-left));top:calc(var(--cn-top,64px) + 10px);pointer-events:none;z-index:40;
  text-shadow:0 1px 12px rgba(1,10,10,.9);max-width:calc(100vw - 160px);transition:opacity .4s cubic-bezier(.2,.7,.2,1)}
.cn-saludo b{display:block;font:700 22px/1.15 var(--serif);color:var(--crema);letter-spacing:.03em}
.cn-saludo small{max-width:22ch;text-wrap:balance}
.cn-saludo small{display:block;margin-top:5px;font:400 13.5px/1.35 var(--sans);color:var(--bruma)}
@media (min-width:901px){
  .cn-saludo{left:calc(var(--cn-izq,232px) + 40px);top:34px;max-width:none}
  .cn-saludo b{font-size:28px}
  .cn-saludo small{font-size:15px}
}

/* el planeta: el botón no se ve (la esfera es del lienzo); el área de toque
   sigue al planeta y crece con él (mín. 44 px) */
.cn-pl{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;pointer-events:none;color:var(--crema);
  -webkit-tap-highlight-color:transparent;will-change:transform}
.cn-esfera{position:absolute;left:-50px;top:-50px;width:100px;height:100px;border-radius:50%;pointer-events:auto;cursor:pointer;will-change:transform}
.cn-pl:focus-visible{outline:none}
.cn-pl:focus-visible .cn-esfera{box-shadow:0 0 0 2px var(--oroLt), 0 0 0 7px rgba(234,215,156,.18)}
.cn-rot{position:absolute;left:0;top:0;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;pointer-events:none;will-change:transform,opacity;
  padding:3px 8px;border-radius:999px;background:rgba(1,10,10,.74);border:1px solid rgba(201,169,97,.25);
  font:600 12px/1.25 var(--sans);letter-spacing:.02em;color:rgba(248,239,207,.92);text-transform:none;transition:color .25s, border-color .25s}
@media (min-width:1200px){.cn-rot{font-size:13px}}
@media (max-width:600px){.cn-rot{height:22px;padding:2px 8px;font-size:11.5px;line-height:18px;background:rgba(1,10,10,.62);border-color:rgba(201,169,97,.18)}
  .cn-rot em{font-size:9.5px;padding:2px 5px}}
.cn-rot svg{width:11px;height:11px;fill:none;stroke:var(--oroLt);stroke-width:2}
.cn-rot em{font:600 10px/1 var(--sans);font-style:normal;letter-spacing:.06em;color:#021B1C;background:#C9A961;padding:3px 6px;border-radius:999px}
.ae-rotulo-sol.cn-rot{background:none;border:0;padding:0 22px 0 22px;height:auto;color:#EAD79C;font:600 13px/1 var(--serif);letter-spacing:.32em;text-shadow:0 1px 10px #010A0A}
.ae-rotulo-sol.cn-rot::before{content:'';position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#EAD79C;box-shadow:0 0 8px #EAD79C}
.cn-pl:hover .cn-rot,.cn-pl:focus-visible .cn-rot,.cn-pl.cn-mira .cn-rot,.cn-rot.tour-foco{color:#fff;border-color:rgba(234,215,156,.6)}
.cn-pronto .cn-rot{color:rgba(248,239,207,.72)}
/* el elegido: su nombre se arma letra por letra, con una raya de oro debajo */
.cn-elegido .cn-rot{translate:-50% 0;background:none;border:0;padding:0;color:#fff;font:600 clamp(20px,2.4vw,30px)/1.1 var(--serif);letter-spacing:.06em;text-shadow:0 2px 18px #010A0A}
.cn-elegido .cn-rot em,.cn-elegido .cn-rot svg{display:none}
.cn-letra{display:inline-block;opacity:0;transform:translateY(.35em)}   /* las mueve el reloj de la toma (nucleo-galaxia.js) */
@keyframes cnLetra{to{opacity:1;transform:none}}
.cn-elegido .cn-rot::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:1px;background:linear-gradient(90deg,transparent,#C9A961,transparent);
  transform:scaleX(0);animation:cnRaya .4s cubic-bezier(.16,1,.3,1) .25s forwards}
@keyframes cnRaya{to{transform:scaleX(1)}}
.cn-eligiendo .cn-saludo,.cn-eligiendo .cn-acciones{opacity:0;pointer-events:none}
.cn-eligiendo .cn-arrastre{cursor:default}
.cn-onda .cn-esfera::after{content:'';position:absolute;inset:18%;border-radius:50%;border:2px solid var(--oroLt);animation:cnOnda 1.1s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none}
@keyframes cnOnda{from{opacity:.95;transform:scale(.8)}to{opacity:0;transform:scale(1.9)}}

/* el velo: el color de la sección, liso, que toma la posta del portal del lienzo y se disuelve sobre la sección */
.cn-velo{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:1;transition:opacity .24s cubic-bezier(.2,.7,.2,1)}
.cn-velo.entra{opacity:0;animation:cnVeloEntra .2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes cnVeloEntra{to{opacity:1}}
.cn-velo.se-va{opacity:0}
/* sin acabado: el portal es un disco que escala (transform, no clip-path) */
.cn-portal{position:fixed;left:-50px;top:-50px;width:100px;height:100px;border-radius:50%;z-index:9000;pointer-events:none;opacity:0;will-change:transform,opacity}

/* la barra: Enviar · Todo · Recibir (Todo es el único lleno) */
.cn-acciones{position:absolute;left:calc(var(--cn-izq,0px) + (100% - var(--cn-izq,0px)) / 2);bottom:calc(var(--cn-bot,0px) + 20px);translate:-50% 0;z-index:40;
  max-width:calc(100% - var(--cn-izq,0px) - 24px);height:52px;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;pointer-events:auto;
  background:rgba(1,10,10,.6);border:1px solid rgba(201,169,97,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .4s cubic-bezier(.2,.7,.2,1)}
.cn-acciones button{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 18px;border-radius:999px;
  color:#F8EFCF;font:600 15px/1 var(--sans);letter-spacing:.01em;transition:background .2s, color .2s}
.cn-acciones button:hover,.cn-acciones button:focus-visible{background:rgba(201,169,97,.12);color:#fff}
.cn-acciones button:focus-visible{outline:2px solid var(--oroLt);outline-offset:1px}
.cn-acciones svg{width:17px;height:17px;fill:none;stroke:var(--oroLt);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cn-acciones .cn-todo{background:#C9A961;color:#021B1C}
.cn-acciones .cn-todo svg{stroke:#021B1C}
.cn-acciones .cn-todo:hover,.cn-acciones .cn-todo:focus-visible{background:#D9BC74;color:#021B1C}
@media (max-width:380px){.cn-acciones button{padding:0 13px;font-size:14px}}
.cn-escalado .cn-rot{font-size:calc(11.5px * var(--cn-esc,1))}

.cn-lista{position:fixed;inset:0;z-index:120;background:rgba(1,8,8,.55);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s}
.cn-lista.ver{opacity:1}
.cn-lista-hoja{width:min(560px,100%);max-height:86svh;overflow:auto;background:#031A19;border:1px solid rgba(201,169,97,.26);border-bottom:0;
  border-radius:24px 24px 0 0;padding:18px 14px calc(18px + env(safe-area-inset-bottom));transform:translateY(24px);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cn-lista.ver .cn-lista-hoja{transform:none}
@media (min-width:720px){.cn-lista{align-items:center}.cn-lista-hoja{border-radius:24px;border-bottom:1px solid rgba(201,169,97,.26)}}
.cn-lista-cab{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 12px}
.cn-lista-cab h2{font:700 18px/1.2 var(--sans);color:var(--crema)}
.cn-lista-x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--bruma)}
.cn-lista-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cn-lista ul,.cn-lista-en-linea ul{list-style:none;display:grid;gap:6px}
.cn-lista li button,.cn-lista-en-linea li button{width:100%;display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 10px;border-radius:16px;text-align:left;
  background:rgba(255,255,255,.025);border:1px solid rgba(201,169,97,.12)}
.cn-lista li button:hover,.cn-lista li button:focus-visible,.cn-lista-en-linea li button:hover{background:rgba(201,169,97,.08);border-color:rgba(201,169,97,.35)}
.cn-li-ico{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb, var(--halo) 50%, transparent);
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--halo) 22%, transparent), rgba(1,16,16,.9) 70%)}
.cn-li-ico svg{width:20px;height:20px;fill:none;stroke:#F3ECD9;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cn-li-txt{flex:1;min-width:0;display:grid;gap:2px}
.cn-li-txt b{font:600 15px/1.25 var(--sans);color:var(--crema)}
.cn-li-txt small{font:400 13px/1.35 var(--sans);color:var(--bruma)}
.cn-lista em,.cn-lista-en-linea em{font-style:normal;font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--oroLt);border:1px solid rgba(201,169,97,.35);padding:5px 8px;border-radius:999px}
.cn-li-ir{width:18px;height:18px;fill:none;stroke:var(--humo);stroke-width:2}
/* sin lugar (zoom 200 %, pantallas bajas): la lista dentro de la página */
.cn-lista-en-linea{display:none}
.cn-compacto .cn-capa,.cn-compacto .cn-acciones,.cn-compacto .cn-arrastre{display:none}
.cn-compacto .cn-lista-en-linea{display:block;position:absolute;left:var(--cn-izq,0px);right:0;top:calc(var(--cn-top,56px) + 70px);bottom:calc(var(--cn-bot,0px) + 8px);
  overflow:auto;padding:0 12px 12px;pointer-events:auto}


/* ═══ «LO NUEVO» · el recorrido ═══════════════════════════════════════════════ */
.ct{position:fixed;inset:0;z-index:8800;pointer-events:none;opacity:0;transition:opacity .25s ease}
.ct.ver{opacity:1}
.ct[hidden]{display:none}
body.ct-abierto #aura-tour{display:none!important}
body.ct-abierto{background-image:none!important}
body.ct-abierto::before,body.ct-abierto::after{background-image:none!important}
.ct-velo{position:absolute;inset:0;background:rgba(1,10,10,.72);pointer-events:auto;transition:opacity .3s}
.ct-con-foco .ct-velo{opacity:0}
.ct-foco{position:absolute;left:0;top:0;width:0;height:0;border-radius:18px;opacity:0;pointer-events:none;
  box-shadow:0 0 0 2px rgba(234,215,156,.85), 0 0 0 7px rgba(234,215,156,.14), 0 0 0 200vmax rgba(1,10,10,.72);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1), opacity .3s}
.ct-con-foco .ct-foco{opacity:1}
.ct-con-foco .ct-foco::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:2px solid rgba(234,215,156,.7);animation:ctLate 2s ease-out 3}
@keyframes ctLate{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}
.ct-carta{position:absolute;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));pointer-events:auto;
  background:linear-gradient(180deg,rgba(5,34,33,.97),rgba(2,22,22,.97));border:1px solid rgba(201,169,97,.32);border-radius:24px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(234,215,156,.08);padding:14px 16px 14px;color:var(--crema);
  max-height:calc(100svh - 24px);overflow:auto;transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s}
.ct-carta.arriba{bottom:auto;top:max(12px,env(safe-area-inset-top))}
@media (min-width:720px){
  .ct-carta{left:50%;right:auto;bottom:auto;top:50%;width:420px;transform:translate(-50%,-50%)}
  .ct-carta.suelta{transform:none;transition:left .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1), opacity .2s}
}
.ct-cambia .ct-ilu,.ct-cambia .ct-titulo,.ct-cambia .ct-texto{opacity:0;transform:translateY(6px)}
.ct-ilu,.ct-titulo,.ct-texto{transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1)}
.ct-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ct-cuenta{font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--oroLt);white-space:nowrap}
.ct-cab-der{display:flex;gap:6px;align-items:center}
.ct-cab button{min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;border:1px solid rgba(201,169,97,.28);color:var(--bruma);
  font:600 12.5px/1 var(--sans);display:inline-flex;align-items:center;gap:6px}
.ct-cab button:hover{color:var(--crema);border-color:rgba(234,215,156,.6)}
.ct-cab .ct-x{border:0;padding:0 6px;font:500 13px/1 var(--sans);color:var(--bruma);text-decoration:underline;text-decoration-color:rgba(207,224,219,.35);text-underline-offset:4px}
.ct-cab .ct-x:hover{color:var(--crema);text-decoration-color:currentColor}
.ct-voz svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-voz[aria-pressed="true"]{color:var(--oroLt);border-color:rgba(234,215,156,.6)}
.ct-titulo{font:700 21px/1.2 var(--sans);color:var(--crema);margin:12px 0 6px;outline:none}
.ct-texto{font:400 15.5px/1.5 var(--sans);color:#D2E3DF}
.ct-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.ct-pie button{min-height:46px;padding:0 18px;border-radius:999px;font:600 15px/1 var(--sans)}
.ct-atras{border:1px solid rgba(201,169,97,.35);color:var(--crema)}
.ct-atras[hidden]{display:inline-block!important;visibility:hidden}
.ct-sig{background:linear-gradient(180deg,#E3C77F,#C9A961);color:#2A1F05;min-width:120px}
.ct-sig:hover{filter:brightness(1.06)}
.ct-pie button:focus-visible,.ct-cab button:focus-visible{outline:2px solid var(--oroLt);outline-offset:3px}
@media (max-width:380px){.ct-titulo{font-size:19px}.ct-texto{font-size:14.5px}.ct-pie button{padding:0 14px}.ct-sig{min-width:104px}}

/* ── las viñetas ── */
.ct-ilu{height:132px;border-radius:18px;overflow:hidden;position:relative;
  background:radial-gradient(ellipse at 50% 40%, rgba(16,74,66,.55), rgba(2,18,18,.9) 70%);border:1px solid rgba(127,216,196,.12)}
@media (min-width:720px){.ct-ilu{height:150px}}
.cv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cv svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cv-mono{font-family:var(--mono);font-variant-ligatures:none}
.cv small{font:500 11px/1.3 var(--sans);color:var(--bruma);letter-spacing:.02em}
/* bienvenida */
.cv-og{width:70%;height:78%;animation:cvSube .9s cubic-bezier(.2,.8,.2,1) both}
.cv-orb{position:absolute;width:5px;height:5px;border-radius:50%;background:#EAD79C;box-shadow:0 0 10px #EAD79C;animation:cvOrbita 6s linear 3}
.cv-orb.b{animation-duration:8s;animation-direction:reverse;background:#7FD8C4;box-shadow:0 0 10px #7FD8C4}.cv-orb.c{animation-duration:11s}
@keyframes cvOrbita{from{transform:rotate(0) translateX(120px) rotate(0)}to{transform:rotate(360deg) translateX(120px) rotate(-360deg)}}
@keyframes cvSube{from{opacity:0;transform:scale(.92);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
/* inicio: mini galaxia */
.cv-sol{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#F3FFFB,#7FD8C4 30%,#0B3B35 80%);box-shadow:0 0 30px rgba(127,216,196,.6)}
.cv-pl{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;border:1px solid rgba(234,215,156,.6);
  background:radial-gradient(circle at 35% 30%,rgba(234,215,156,.5),#04201C 70%);box-shadow:0 0 12px rgba(234,215,156,.3)}
.cv-hilo{position:absolute;left:50%;top:50%;height:1px;transform-origin:0 0;background:linear-gradient(90deg,rgba(234,215,156,.45),rgba(234,215,156,.05))}
.cv-pl.p0{transform:translate(-92px,-34px)}.cv-pl.p1{transform:translate(-66px,38px)}.cv-pl.p2{transform:translate(0,-50px)}
.cv-pl.p3{transform:translate(84px,-30px)}.cv-pl.p4{transform:translate(70px,40px);width:24px;height:24px;margin:-12px;border-color:#EAD79C}.cv-pl.p5{transform:translate(0,52px)}
.cv-hilo.h0{width:98px;transform:rotate(200deg)}.cv-hilo.h1{width:76px;transform:rotate(150deg)}.cv-hilo.h2{width:50px;transform:rotate(270deg)}
.cv-hilo.h3{width:89px;transform:rotate(-20deg)}.cv-hilo.h4{width:80px;transform:rotate(30deg)}.cv-hilo.h5{width:52px;transform:rotate(90deg)}
.cv-dedo{position:absolute;left:calc(50% + 70px);top:calc(50% + 40px);width:44px;height:44px;margin:-22px;border-radius:50%;border:2px solid rgba(243,236,217,.8);
  animation:cvToque 2.4s ease-in-out 3 forwards}
@keyframes cvToque{0%,30%{opacity:0;transform:scale(1.6)}45%{opacity:1;transform:scale(1)}60%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(2)}}
/* número de cuenta */
.cv-tarjeta{position:relative;width:min(300px,88%);padding:14px 16px;border-radius:16px;background:rgba(1,16,16,.85);border:1px solid rgba(201,169,97,.35);display:grid;gap:6px}
.cv-tarjeta b{font-size:19px;color:var(--oroHi);letter-spacing:.04em}
.cv-btn{justify-self:start;display:inline-flex;gap:6px;align-items:center;padding:6px 11px;border-radius:999px;background:rgba(201,169,97,.16);color:var(--oroLt);font:600 12px/1 var(--sans);animation:cvPulsa 2.6s ease-in-out 3 forwards}
.cv-btn svg{width:14px;height:14px}
.cv-qr{position:absolute;right:14px;bottom:12px;width:34px;height:34px;color:var(--crema);opacity:.85}
.cv-qr svg{width:100%;height:100%}
.cv-tostada{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:inline-flex;gap:6px;align-items:center;white-space:nowrap;
  padding:6px 11px;border-radius:999px;background:#0D3B33;border:1px solid rgba(62,217,160,.5);font:600 11.5px/1 var(--sans);color:#C9F5E4;animation:cvTostada 2.6s ease-in-out 3 forwards}
.cv-tostada svg{width:13px;height:13px;color:var(--jade)}
.cv-numero .cv-tarjeta{margin-top:-24px}
@keyframes cvPulsa{0%,35%,100%{transform:none}40%{transform:scale(.94)}48%{transform:none}}
@keyframes cvTostada{0%,42%{opacity:0;transform:translate(-50%,8px)}52%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
/* enviar */
.cv-enviar{flex-direction:column;gap:10px}
.cv-campo{width:min(300px,88%);padding:9px 14px;border-radius:14px;border:1.5px solid rgba(127,216,196,.35);background:rgba(1,16,16,.85);display:grid;gap:3px}
.cv-campo b{color:var(--crema);font-size:16px;white-space:nowrap;overflow:hidden;width:0;animation:cvTipea 3.6s steps(14) 3 forwards}
@keyframes cvTipea{0%{width:0}45%,100%{width:14.2ch}}
.cv-quien{width:min(300px,88%);display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:rgba(13,59,51,.6);border:1px solid rgba(62,217,160,.35);
  animation:cvAparece 3.6s ease 3 forwards}
.cv-quien b{display:block;font:600 13.5px/1.2 var(--sans)}
.cv-cara{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#C9A961;color:#2A1F05;font:700 14px/1 var(--sans);font-style:normal}
.cv-si{margin-left:auto;display:inline-flex;gap:4px;align-items:center;padding:6px 9px;border-radius:999px;background:var(--oro);color:#2A1F05;font:600 11px/1 var(--sans);white-space:nowrap}
.cv-si svg{width:12px;height:12px}
@keyframes cvAparece{0%,48%{opacity:0;transform:translateY(6px)}58%,100%{opacity:1;transform:none}}
/* comprobante */
.cv-recibo{gap:14px}
.cv-hoja{width:170px;padding:12px 14px;border-radius:14px;background:#F3ECD9;color:#16302C;display:grid;gap:5px;justify-items:start;animation:cvSube .8s cubic-bezier(.2,.8,.2,1) both}
.cv-hoja small{color:#4D6B66}
.cv-hoja b{font-size:13.5px;color:#0D2B27}
.cv-ok{width:24px;height:24px;border-radius:50%;background:#18A374;color:#fff;display:grid;place-items:center}
.cv-ok svg{width:15px;height:15px;stroke-width:2.4}
.cv-linea{width:100%;height:5px;border-radius:3px;background:#D8CFB8}.cv-linea.corta{width:60%}
.cv-acciones{display:grid;gap:8px}
.cv-acciones span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(201,169,97,.4);color:var(--oroLt);animation:cvSube .6s ease both}
.cv-acciones span:nth-child(2){animation-delay:.12s}.cv-acciones span:nth-child(3){animation-delay:.24s}
.cv-acciones span.wa{color:#7FE3A8;border-color:rgba(127,227,168,.45)}
.cv-acciones svg{width:18px;height:18px}
/* monedas */
.cv-monedas{gap:8px;padding:0 10px}
.cv-moneda{flex:1;max-width:110px;display:grid;justify-items:center;gap:4px;text-align:center;animation:cvSube .7s cubic-bezier(.2,.8,.2,1) both}
.cv-moneda.m1{animation-delay:.12s}.cv-moneda.m2{animation-delay:.24s}
.cv-moneda i{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:1px;font-style:normal;
  color:color-mix(in srgb,var(--c) 30%,#1a1405);
  background:radial-gradient(circle at 50% 50%,transparent 58%,rgba(0,0,0,.28) 60%,transparent 63%),
    conic-gradient(from 210deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c),color-mix(in srgb,var(--c) 55%,#000),var(--c),color-mix(in srgb,var(--c) 70%,#fff));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 55%,#000),inset 0 2px 3px rgba(255,255,255,.45),inset 0 -2px 4px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.45)}
.cv-moneda i span{font:700 13px/1 var(--serif);letter-spacing:.04em;text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.25)}
.cv-moneda i small{font:600 5.5px/1 var(--sans)!important;letter-spacing:.12em;color:inherit!important;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.cv-moneda b{font:700 12.5px/1 var(--sans);letter-spacing:.06em}
.cv-moneda small{font-size:9.5px;line-height:1.25;color:var(--oroLt)}
.cv-mismo{position:absolute;top:8px;right:10px;display:inline-flex;gap:4px;align-items:center;font:600 10.5px/1 var(--sans);color:#C9F5E4}
.cv-mismo svg{width:12px;height:12px;color:var(--jade)}
/* origen */
.cv-origen{gap:14px;padding:0 14px}
.cv-disco{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(234,215,156,.6);
  background:radial-gradient(circle at 35% 30%,#FBF3D6,#C9A961 40%,#5E4A1C 100%);box-shadow:0 0 30px rgba(201,169,97,.35);animation:cvGiro 7s linear 3 forwards}
.cv-disco b{font:700 12px/1 var(--serif);color:#2A1F05;letter-spacing:.06em}
@keyframes cvGiro{50%{transform:scale(.94);filter:brightness(1.15)}}
.cv-ref{display:grid;gap:8px;font:500 12.5px/1.35 var(--sans);color:var(--crema)}
.cv-res{display:flex;gap:4px;align-items:center;color:var(--bruma);font-size:11.5px}
.cv-res i{width:9px;height:14px;border-radius:2px;background:linear-gradient(180deg,#EAD79C,#96793F)}
/* oro, plata y ONDK */
.cv-tres{flex-direction:column;align-items:stretch;justify-content:center;gap:6px;padding:0 14px}
.cv-fila{display:flex;align-items:center;gap:10px;padding:5px 10px;border-radius:12px;background:rgba(1,16,16,.6);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.cv-fila b{width:44px;font:700 12px/1 var(--sans);color:var(--c)}
.cv-traza{flex:1;height:20px;stroke:var(--c)!important;stroke-dasharray:160;stroke-dashoffset:160;animation:cvTraza 2.4s ease forwards}
@keyframes cvTraza{to{stroke-dashoffset:0}}
.cv-fila small{white-space:nowrap}
.cv-fila small.larga{white-space:normal}
.cv-aviso{font:500 10.5px/1.2 var(--sans);color:var(--oroLt);text-align:right;margin:0}
/* genesis */
.cv-id{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(1,16,16,.85);border:1px solid rgba(127,216,196,.4);z-index:1}
.cv-id b{display:block;font:600 14px/1.2 var(--sans)}
.cv-id small{display:inline-flex;gap:4px;align-items:center;color:#9FE3C9}
.cv-id small svg{width:12px;height:12px}
.cv-foto{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#AEC7C3 0 26%,transparent 27%),radial-gradient(circle at 50% 100%,#AEC7C3 0 40%,#0D3B33 41%)}
.cv-rayo{position:absolute;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--oroLt);border:1px solid rgba(201,169,97,.4);background:rgba(2,22,22,.9);animation:cvSube .6s ease both}
.cv-rayo svg{width:16px;height:16px}
.cv-rayo.r1{left:12%;top:16%}.cv-rayo.r2{right:12%;top:16%;animation-delay:.15s}.cv-rayo.r3{left:calc(50% - 16px);bottom:8%;animation-delay:.3s}
/* seguridad */
.cv-seg{gap:14px;padding:0 16px}
.cv-escudo{position:relative;flex:none;width:64px;height:72px;color:var(--oro)}
.cv-escudo>svg:first-child{width:100%;height:100%;stroke-width:1.4}
.cv-cand{position:absolute;left:50%;top:52%;width:26px;height:26px;margin:-13px;color:var(--oroHi)}
.cv-seg b{display:block;font:600 14px/1.2 var(--sans);margin-bottom:4px}
.cv-seg small{font-size:12px;color:var(--crema)}
/* AU-RA */
.cv-aura{gap:12px}
.cv-orbe{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F3FFFB,#9FEAD4 18%,#2E9C86 45%,#0B3B35 80%);
  box-shadow:0 0 40px rgba(127,216,196,.55);animation:cnLate 3.2s ease-in-out 3 forwards}
.cv-globo{padding:9px 13px;border-radius:16px 16px 16px 4px;background:rgba(201,169,97,.16);border:1px solid rgba(201,169,97,.45);color:var(--oroLt);font:600 13px/1.2 var(--sans);animation:cvSube .7s ease .3s both}
.ct-quieto *,.ct-quieto *::after{animation:none!important;transition:none!important}
.ct-quieto .cv-campo b{width:auto}
.ct-quieto .cv-tostada,.ct-quieto .cv-quien{opacity:1}
@media (max-width:900px){body.cine-cielo .ag-voz{min-height:122px}}

/* cielo tapado o en pausa: sus animaciones CSS también se detienen */
.cine-pausado .cn-capa *,.cine-pausado .cn-capa *::after,.cine-pausado .ag-orbe::after{animation-play-state:paused!important}

/* la cabecera del Núcleo: un solo tipo de botón (círculo de 40 px, filete de oro, ícono de 18 px) */
body.cn-vivo #musica-btn,body.cn-vivo #pantalla-llena,body.cn-vivo #at-boton.cn-at-cabecera{width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(201,169,97,.35);background:rgba(1,10,10,.55);color:#F8EFCF;box-shadow:none}
body.cn-vivo #musica-btn svg,body.cn-vivo #pantalla-llena svg,body.cn-vivo #at-boton.cn-at-cabecera svg{width:18px;height:18px;stroke-width:1.5}
body.cn-vivo #musica-btn.callada{color:rgba(248,239,207,.45)}
/* «no hay otro cielo»: la foto de marca, detrás de un vidrio verde profundo */
html body{background-image:linear-gradient(180deg, rgba(2,22,21,.80), rgba(1,14,14,.86) 50%, rgba(1,10,10,.9)), url('../assets/fondo.jpg')}

/* al entrar a la sección desde un planeta: las tarjetas suben mientras el velo se disuelve */
@keyframes cnEntra{from{opacity:1;transform:translateY(12px)}to{opacity:1;transform:none}}   /* el iris ya revela: las tarjetas solo se asientan */
@keyframes cnPista{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.cn-entra #lienzo{animation:none!important}
body.cn-entra #lienzo > *{animation:cnEntra .3s cubic-bezier(.16,1,.3,1) both}
body.cn-entra #lienzo > *:nth-child(2){animation-delay:30ms}
body.cn-entra #lienzo > *:nth-child(3){animation-delay:60ms}
body.cn-entra #lienzo > *:nth-child(4){animation-delay:90ms}
body.cn-entra #lienzo > *:nth-child(n+5){animation-delay:120ms}
@media (prefers-reduced-motion:reduce){body.cn-entra #lienzo > *{animation:none}}
.cn-pista{position:fixed;z-index:60;translate:-50% 0;pointer-events:none;font:600 11px/1 var(--sans);letter-spacing:.04em;color:#F8EFCF;
  background:rgba(1,10,10,.7);border:1px solid rgba(201,169,97,.3);border-radius:999px;padding:4px 8px;animation:cnPista .3s cubic-bezier(.16,1,.3,1) both;transition:opacity .4s}
.cn-pista.se-va{opacity:0}
.cn-guia{position:absolute;left:0;top:0;width:1px;height:1px;background:rgba(201,169,97,.35);transform-origin:0 50%;pointer-events:none;opacity:0;transition:opacity .25s}
.cn-brilla .cn-esfera{box-shadow:0 0 28px 6px rgba(234,215,156,.55);transition:box-shadow .3s}
body.cn-saliendo{background-image:none!important;background-color:transparent!important}
body.cn-saliendo #app{background:transparent!important}
body.cn-saliendo #ae-cielo{display:block}
/* la foto de las secciones, durante el iris (ida: debajo de la app; vuelta: encima del lienzo, con la copia de la sección) */
.cn-foto-capa{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cn-foto-capa.cn-vuelta{z-index:1}
.cn-foto{position:absolute;inset:0;background-color:var(--pozo,#021B1C);background-image:linear-gradient(180deg, rgba(2,22,21,.80), rgba(1,14,14,.86) 50%, rgba(1,10,10,.9)), url('../assets/fondo.jpg');background-size:cover,cover;background-position:center,center;background-repeat:no-repeat}
body.cn-saliendo main,body.cn-saliendo #app{overflow-x:clip}   /* la sección que se acerca (1,06) no ensancha la página */