/* XZ Academy · aula oscura con la XZ azul como protagonista */
:root{
  --bg:#0B1020; --bg2:#121A31; --panel:#18213D; --line:#28335A;
  --ink:#EEF2FB; --muted:#9AA6C4;
  --xz:#3D6BFF; --xz2:#8FB0FF; --xz-glow:rgba(61,107,255,.55);
  --rec:#FF5A4E; --ok:#3CCB8B;
  --scr:#F6F7FA; --scr-ink:#14203A; --scr-line:#DCE1EA; --scr-muted:#5E6A80;
  --f-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --f-body:"Onest",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 700px at 75% 20%,#16224A 0%,var(--bg) 60%);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.45;
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left,0px));-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--xz2);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- La XZ ---------- */
.xz{position:relative;display:grid;place-items:center;aspect-ratio:1;width:min(100%,var(--xz-size,260px))}
.xz .letras{position:relative;z-index:2;display:flex;gap:.02em;font-family:var(--f-display);font-weight:800;font-size:calc(var(--xz-size,260px)*.42);line-height:1;letter-spacing:-.02em;color:var(--xz);
  text-shadow:0 0 calc(var(--xz-size,260px)*.08) var(--xz-glow)}
.xz .letras span{display:inline-block;transform-origin:50% 80%;transition:transform .08s linear,color .4s}
.xz .anillo{position:absolute;inset:14%;border-radius:50%;border:2px solid var(--xz);opacity:0;z-index:1}
.xz .halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,var(--xz-glow) 0%,transparent 65%);opacity:.35;z-index:0;transition:opacity .3s,transform .1s linear}
/* reposo: respira despacio */
.xz.reposo .letras{animation:respira 4s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
/* habla: las letras se mueven con la voz (--lvl de 0 a 1; en los móviles, onda simulada) */
.xz.habla .letras span:nth-child(1){transform:translateY(calc(var(--lvl,0)*-7%)) scaleY(calc(1 + var(--lvl,0)*.16)) rotate(calc(var(--lvl,0)*-3deg))}
.xz.habla .letras span:nth-child(2){transform:translateY(calc(var(--lvl2,0)*-7%)) scaleY(calc(1 + var(--lvl2,0)*.16)) rotate(calc(var(--lvl2,0)*3deg))}
.xz.habla .halo{opacity:calc(.35 + var(--lvl,0)*.6);transform:scale(calc(1 + var(--lvl,0)*.12))}
.xz.habla.sim .letras span:nth-child(1){animation:onda .46s ease-in-out infinite alternate}
.xz.habla.sim .letras span:nth-child(2){animation:onda .38s ease-in-out infinite alternate-reverse}
.xz.habla.sim .halo{animation:latido .9s ease-in-out infinite}
@keyframes onda{0%{transform:translateY(0) scaleY(1)}35%{transform:translateY(-6%) scaleY(1.14)}70%{transform:translateY(-2%) scaleY(1.04)}100%{transform:translateY(-5%) scaleY(1.1)}}
@keyframes latido{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}
/* escucha: letras quietas y más claras, ondas que se abren despacio hacia fuera */
.xz.escucha .letras{color:var(--xz2);text-shadow:0 0 calc(var(--xz-size,260px)*.05) var(--xz-glow)}
.xz.escucha .letras span{transform:scale(.92)}
.xz.escucha .anillo{animation:onda-escucha 2.4s ease-out infinite}
.xz.escucha .anillo:nth-of-type(2){animation-delay:.8s}
.xz.escucha .anillo:nth-of-type(3){animation-delay:1.6s}
.xz.escucha .halo{opacity:.2}
@keyframes onda-escucha{0%{transform:scale(.75);opacity:.75}100%{transform:scale(1.45);opacity:0}}
/* piensa: brillo que recorre las letras */
.xz.piensa .letras{background:linear-gradient(100deg,var(--xz) 20%,#fff 45%,var(--xz) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 1.4s linear infinite}
@keyframes brillo{from{background-position:120% 0}to{background-position:-130% 0}}
/* Xzen viva (canvas): oculta la XZ de CSS y deja que el lienzo desborde alrededor */
.xz[data-vivo]>:not(.xz-vivo){display:none}
.xz-vivo{position:absolute;left:-50%;top:-50%;width:200%;height:200%;pointer-events:none}
.estado-xz{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;min-height:1.4em}
.estado-xz b{color:var(--xz2);font-weight:500}

/* ---------- Entrar ---------- */
.entrar{min-height:100%;display:grid;place-items:center;padding-block:32px}
.entrar form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.entrar h1{font-family:var(--f-display);font-size:28px;margin:0 0 4px;text-wrap:balance}
.entrar p{margin:0;color:var(--muted)}
.campo{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.campo input,select{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--ink);font:inherit;font-size:16px}
.btn{border:none;border-radius:14px;padding:14px 18px;font-weight:600;background:var(--panel);border:1px solid var(--line)}
.btn.pri{background:var(--xz);border-color:var(--xz);color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.enlace{background:none;border:none;color:var(--xz2);padding:6px 0;text-align:left;font-size:14px}
.msg{font-size:14px;color:var(--muted);min-height:1.3em}
.msg.err{color:var(--rec)}
.atras{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;flex:none}

/* ---------- Pantalla esquemática de la app ---------- */
.movil{background:var(--scr);color:var(--scr-ink);border:10px solid #0A0E1A;border-radius:34px;padding:14px 14px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px var(--line)}
.movil .top{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;color:var(--scr-muted)}
.movil .tit{display:flex;gap:8px;align-items:center;font-weight:700;font-size:17px}
.movil .tit .v{color:var(--scr-muted);font-weight:500}
.el{border:1px solid var(--scr-line);border-radius:12px;padding:10px 12px;background:#fff;transition:box-shadow .3s,transform .3s,border-color .3s;font-size:14px}
.el .d{display:block;color:var(--scr-muted);font-size:12px;margin-top:2px}
.el.boton-principal{background:var(--rec);color:#fff;border:none;text-align:center;font-weight:700;font-size:16px;border-radius:999px;padding:14px}
.el.boton-principal .d{color:rgba(255,255,255,.85)}
.el.boton{border-radius:999px;text-align:center;font-weight:600;border-color:#C8D0DE}
.el.campo{background:#F0F3F8}
.el.campo::before{content:"✎ ";color:var(--scr-muted)}
.el.aviso{background:#EAF0FF;border-color:#C9D6FF}
.el.texto{border:none;background:none;padding:2px 2px;color:var(--scr-muted)}
.el.pestanas{display:flex;gap:4px;padding:4px;background:#E7EBF2;border:none}
.el.pestanas span{flex:1;text-align:center;padding:6px;border-radius:9px;font-size:12.5px}
.el.pestanas span:first-child{background:#fff;font-weight:600}
.el.marca{box-shadow:0 0 0 3px var(--xz),0 0 0 9px rgba(61,107,255,.25);border-color:var(--xz);transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}