:root{--bg:#f8fbff;--ink:#123;--glass:rgba(255,255,255,.72);--line:rgba(120,150,180,.25);--accent:#58d6ff;--accent2:#9b8cff;--soft:#eaf7ff;}
*{box-sizing:border-box} html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--ink);background:#dff5ff} canvas{display:block;width:100%;height:100%;touch-action:none;background:linear-gradient(#dff7ff,#f9fdff 58%,#d6eef6)}
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(88,214,255,.32),rgba(255,255,255,.75) 35%,rgba(233,241,255,.9));backdrop-filter:blur(8px);z-index:20}.hidden{display:none!important}
.brand-card{width:min(92vw,520px);padding:34px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(255,255,255,.62));box-shadow:0 30px 90px rgba(28,74,110,.18);text-align:center}.power-icon{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;box-shadow:0 0 38px rgba(88,214,255,.75)}.eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:#507188}.brand-card h1{font-size:54px;margin:2px 0 8px;letter-spacing:-.04em}.subtitle{font-size:17px;line-height:1.5;color:#40576a}.login-box{display:flex;gap:10px;margin:24px 0 12px}.login-box input,.chat-input-row input{flex:1;border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:white;color:var(--ink);outline:none}button{border:0;border-radius:16px;padding:14px 18px;font-weight:800;color:#123;background:linear-gradient(135deg,#85e4ff,#bdb4ff);cursor:pointer;box-shadow:0 10px 30px rgba(80,130,190,.18)}button:active{transform:translateY(1px)}.ghost{background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:none}
.hud{position:fixed;inset:0;pointer-events:none;z-index:10}.hud button,.hud input{pointer-events:auto}.topbar{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:20px;background:var(--glass);backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(30,70,100,.12)}.topbar strong{display:block;font-size:18px}.topbar span{font-size:13px;color:#557}
.chat-box{position:absolute;right:18px;bottom:18px;width:min(360px,calc(100vw - 36px));border:1px solid var(--line);border-radius:22px;background:var(--glass);backdrop-filter:blur(12px);box-shadow:0 20px 60px rgba(30,70,100,.15);overflow:hidden;pointer-events:auto}.chat-head{padding:12px 14px;font-weight:800;background:rgba(255,255,255,.55)}.chat-messages{height:136px;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.msg{padding:10px 12px;border-radius:14px;background:white;font-size:13px;line-height:1.35}.msg.me{align-self:flex-end;background:#dff7ff}.chat-input-row{display:flex;gap:8px;padding:10px}.chat-input-row button{padding:10px 12px;border-radius:12px}.prompt{position:absolute;left:50%;bottom:108px;transform:translateX(-50%);padding:14px 18px;border-radius:18px;background:rgba(18,35,50,.82);color:white;font-weight:800;box-shadow:0 12px 40px rgba(0,0,0,.18)}.instructions{position:absolute;left:18px;bottom:18px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:13px}.mobile-controls{display:none;position:absolute;left:18px;bottom:72px;pointer-events:auto}.mobile-controls button{width:54px;height:48px;margin:3px;padding:0;border-radius:16px;background:rgba(255,255,255,.82);border:1px solid var(--line)}
@media (max-width:760px){.brand-card{padding:24px;border-radius:24px}.brand-card h1{font-size:42px}.login-box{flex-direction:column}.chat-box{right:12px;bottom:12px;width:calc(100vw - 24px)}.chat-messages{height:94px}.mobile-controls{display:block}.desktop-only{display:none}.prompt{bottom:240px;max-width:88vw;text-align:center}.topbar{top:10px;left:10px;right:10px}.chat-box{max-height:210px}}


/* Avatar guía visible en la escena principal */
.guide-avatar{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);width:230px;pointer-events:none;filter:drop-shadow(0 28px 45px rgba(33,94,130,.20));transition:opacity .25s ease, transform .25s ease;z-index:3}.guide-avatar.hidden{opacity:0;transform:translateX(-50%) translateY(12px);pointer-events:none}.guide-card{position:relative;text-align:center;padding:18px 18px 16px;border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.58));border:1px solid rgba(120,150,180,.28);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}.guide-card:before{content:"";position:absolute;inset:-34px;border-radius:46px;background:radial-gradient(circle at 50% 30%,rgba(89,215,255,.45),rgba(155,140,255,.16) 42%,rgba(255,255,255,0) 70%);z-index:-1;animation:guidePulse 2.8s ease-in-out infinite}.guide-face{width:104px;height:104px;margin:0 auto 8px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#dff9ff,#78ddfa 72%);position:relative;box-shadow:0 0 0 10px rgba(132,226,255,.14),0 18px 30px rgba(75,160,195,.22)}.guide-face span{position:absolute;top:38px;width:9px;height:9px;border-radius:50%;background:#18384e}.guide-face span:first-child{left:33px}.guide-face span:nth-child(2){right:33px}.guide-face i{position:absolute;left:50%;top:56px;width:38px;height:20px;transform:translateX(-50%);border-bottom:4px solid rgba(24,56,78,.72);border-radius:0 0 30px 30px}.guide-body{height:76px;position:relative}.guide-neck{position:absolute;left:50%;top:0;transform:translateX(-50%);width:26px;height:24px;border-radius:10px;background:#c8f3ff}.guide-torso{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:106px;height:62px;border-radius:25px 25px 18px 18px;background:linear-gradient(135deg,#8b7cff,#bdb4ff);box-shadow:inset 0 15px 25px rgba(255,255,255,.22)}.guide-arm{position:absolute;top:28px;width:22px;height:58px;border-radius:18px;background:linear-gradient(#bdb4ff,#8b7cff)}.guide-arm.left{left:37px;transform:rotate(18deg)}.guide-arm.right{right:37px;transform:rotate(-38deg);transform-origin:top center;animation:wave 1.8s ease-in-out infinite}.guide-card strong{display:block;margin-top:5px;font-size:22px;letter-spacing:-.03em}.guide-card p{margin:4px auto 0;max-width:170px;font-size:13px;line-height:1.25;color:#37566a;font-weight:650}@keyframes wave{0%,100%{transform:rotate(-38deg)}50%{transform:rotate(-18deg)}}@keyframes guidePulse{0%,100%{opacity:.78;transform:scale(.98)}50%{opacity:1;transform:scale(1.03)}}
@media (max-width:760px){.guide-avatar{width:168px;bottom:230px;left:50%}.guide-card{padding:13px;border-radius:26px}.guide-face{width:76px;height:76px}.guide-face span{top:28px;width:7px;height:7px}.guide-face span:first-child{left:24px}.guide-face span:nth-child(2){right:24px}.guide-face i{top:41px;width:28px;height:16px;border-bottom-width:3px}.guide-body{height:56px}.guide-torso{width:82px;height:48px;top:12px}.guide-neck{width:20px;height:18px}.guide-arm{top:21px;width:17px;height:43px}.guide-arm.left{left:27px}.guide-arm.right{right:27px}.guide-card strong{font-size:18px}.guide-card p{font-size:11px}.chat-box{z-index:5}.topbar{z-index:6}}