/* Intro 5 «Polvo estelar» + sonido «Aprender» (aislada bajo #intro) */
#intro #stage{position:fixed;inset:0;width:100%;height:100%;display:block}
#intro{position:fixed;inset:0;z-index:50;background:#120726;transition:opacity .7s var(--ease),transform .7s var(--ease)}
#intro.gone{opacity:0;transform:scale(1.02);pointer-events:none}
#intro /* textos finales */
.copy{position:absolute;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom));text-align:center;padding:0 20px;pointer-events:none}
#intro /* coreografía de textos: solo anima al entrar; al reiniciar vuelve sin transición */
.copy .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .14em;margin:-.04em -.02em -.14em}
#intro .copy .w>span{display:inline-block;transform:translateY(105%);opacity:0}
#intro .copy p{opacity:0;transform:translateY(8px)}
#intro .copy .go{opacity:0;transform:translateY(10px) scale(.94);filter:blur(4px)}
#intro .copy .btn svg{transform:translateX(-6px);opacity:0}
#intro .copy .seal img{opacity:0;transform:translateY(4px)}
#intro .copy .seal i{transform:scaleX(0)}
#intro .copy .seal i:first-child{transform-origin:right}
#intro .copy .seal i:last-child{transform-origin:left}
#intro.ready .copy .w>span{transform:none;opacity:1;transition:transform 1.05s cubic-bezier(.22,1,.36,1) var(--d),opacity .7s ease var(--d)}
#intro.ready .copy p{opacity:1;transform:none;transition:opacity .9s ease .55s,transform 1s cubic-bezier(.22,1,.36,1) .55s}
#intro.ready .copy .go{opacity:1;transform:none;filter:none;pointer-events:auto;transition:opacity .8s ease .8s,transform 1s cubic-bezier(.22,1,.36,1) .8s,filter .8s ease .8s}
#intro.ready .copy .btn svg{transform:none;opacity:1;transition:transform .7s cubic-bezier(.22,1,.36,1) 1.25s,opacity .5s ease 1.25s}
#intro.ready .copy .seal img{opacity:.9;transform:none;transition:opacity .8s ease 1.2s,transform .8s cubic-bezier(.22,1,.36,1) 1.2s}
#intro.ready .copy .seal i{transform:scaleX(1);transition:transform 1s cubic-bezier(.22,1,.36,1) 1.35s}
@media (prefers-reduced-motion:reduce){#intro .copy .w>span,#intro .copy p,#intro .copy .go,#intro .copy .btn svg,#intro .copy .seal img,#intro .copy .seal i{transition:none!important;transform:none!important;opacity:1;filter:none}
}
#intro .copy h1{font:700 clamp(1.45rem,3vw,2.15rem)/1.1 var(--display);color:var(--purple);letter-spacing:-.005em}
#intro .copy h1 em{font-style:normal;color:var(--red)}
#intro .copy p{color:var(--muted);margin-top:.5rem}
#intro .copy .go{margin-top:1.3rem}
#intro .btn{min-height:52px;padding:0 28px;border:0;border-radius:999px;display:inline-flex;align-items:center;gap:10px;font:600 1rem var(--body);cursor:pointer;color:#fff;background:linear-gradient(120deg,var(--navy),var(--purple) 60%,var(--burgundy));box-shadow:0 14px 30px -14px rgba(0,0,102,.7);transition:transform .2s var(--ease),box-shadow .2s}
#intro .btn{position:relative;overflow:hidden;isolation:isolate}
#intro .btn::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);pointer-events:none;opacity:0}
#intro.ready .copy .btn::after{animation:bhiShine 4.8s 2.4s cubic-bezier(.4,0,.2,1) infinite}
#intro.ready .copy .btn{animation:bhiPulse 4.8s 2.4s ease-out infinite}
@keyframes bhiShine{0%{left:-60%;opacity:0}6%{opacity:1}30%{left:120%;opacity:1}31%,100%{left:120%;opacity:0}}
@keyframes bhiPulse{0%{box-shadow:0 14px 30px -14px rgba(0,0,102,.7),0 0 0 0 rgba(229,36,59,.18)}40%{box-shadow:0 14px 30px -14px rgba(0,0,102,.7),0 0 0 9px rgba(229,36,59,0)}100%{box-shadow:0 14px 30px -14px rgba(0,0,102,.7),0 0 0 0 rgba(229,36,59,0)}}
#intro.photo .btn::after{background:linear-gradient(100deg,rgba(229,36,59,0) 0%,rgba(229,36,59,.28) 50%,rgba(229,36,59,0) 100%)}
@media (prefers-reduced-motion:reduce){#intro.ready .copy .btn,#intro.ready .copy .btn::after{animation:none}
}
@keyframes bhiEq{0%,100%{height:3px}50%{height:10px}}
#intro .btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(0,0,102,.8)}
#intro .btn svg{width:18px;height:18px}
#intro .seal{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#intro .seal img{height:16px;width:auto;opacity:.9}
#intro .seal i{width:28px;height:1px;background:currentColor;opacity:.35}
#intro.photo .copy h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
#intro.photo .copy h1 em{color:#ff8394}
#intro.photo .copy p,#intro.photo .seal{color:rgba(255,255,255,.85)}
#intro.photo .seal img{filter:brightness(0) invert(1)}
#intro.photo .btn{background:#fff;color:var(--purple)}
#intro.photo .btn svg{color:var(--red)}
#intro .skip{position:fixed;top:16px;right:16px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(120,100,180,.35);background:rgba(255,255,255,.55);backdrop-filter:blur(10px);color:var(--purple);font:500 .9rem var(--body);cursor:pointer;z-index:5;transition:opacity .4s}
#intro.ready .skip{opacity:0;pointer-events:none}
#intro /* selector de intros */

/* pantalla siguiente (demostración) */
@media (max-width:640px){.copy{bottom:calc(64px + env(safe-area-inset-bottom))}}
#intro .snd{position:fixed;top:16px;left:16px;z-index:6;min-height:44px;padding:0 16px 0 12px;display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(22,10,56,.55);backdrop-filter:blur(10px);color:#fff;font:500 .88rem var(--body);cursor:pointer;opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s,background .3s,color .3s}
#intro .snd.show{opacity:1;transform:none}
#intro .snd svg{width:18px;height:18px}
#intro .snd .on{display:none}
#intro .snd[aria-pressed="true"] .on{display:block}
#intro .snd[aria-pressed="true"] .off{display:none}
#intro.ready .snd{background:rgba(255,255,255,.6);color:var(--purple);border-color:rgba(120,100,180,.3)}
#intro .snd .eq{display:none;gap:2px;align-items:flex-end;height:12px}
#intro .snd[aria-pressed="true"] .eq{display:inline-flex}
#intro .snd .eq i{width:2px;height:3px;border-radius:1px;background:var(--red);animation:bhiEq .9s ease-in-out infinite}
#intro .snd .eq i:nth-child(2){animation-delay:.15s}
#intro .snd .eq i:nth-child(3){animation-delay:.3s}
#intro .snd.ended .eq i{animation:none}
@keyframes bhiEq{0%,100%{height:3px}50%{height:12px}}
#intro .skip{background:rgba(22,10,56,.45);color:#fff;border-color:rgba(255,255,255,.22)}
@keyframes spin{to{transform:rotate(360deg)}}