*{box-sizing:border-box}
:root{color-scheme:light;--ink:#153b5a;--deep:#0b3c63;--sky:#63add9;--sky2:#4e91c0;--screen:#235f8f;--white:#fff;--muted:#d9edf8}
html{font-family:"Segoe UI",Inter,Arial,Helvetica,sans-serif;background:#63add9;color:var(--ink)}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#69b2dd 0%,#5ea8d6 52%,#59a1cf 100%);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.22),transparent 30%),linear-gradient(90deg,rgba(255,255,255,.04),transparent 18%,transparent 82%,rgba(0,43,78,.05));mix-blend-mode:soft-light}
.experience{width:min(1180px,100%);min-height:100vh;margin:0 auto;padding:28px clamp(18px,4vw,54px) 24px;position:relative}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#fff;margin-bottom:18px}
.brand-lockup{display:flex;align-items:center;gap:11px}.brand-mark{width:32px;height:32px;border:1px solid rgba(255,255,255,.55);border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.09);box-shadow:inset 0 0 18px rgba(255,255,255,.08)}
.wordmark{font-size:17px;font-weight:900;letter-spacing:.11em}.wordmark span{font-weight:500;opacity:.82;margin-left:4px}.edition{font-size:10px;font-weight:700;letter-spacing:.19em;opacity:.82;text-align:right}
.hero{display:flex;flex-direction:column;align-items:center}.hero-copy{text-align:center;color:#fff;margin:4px auto 18px;max-width:760px}.eyebrow{margin:0 0 8px;font-size:10px;font-weight:800;letter-spacing:.34em;opacity:.76}.hero-copy h1{margin:0;font-size:clamp(30px,4.2vw,54px);font-weight:300;letter-spacing:.045em;line-height:1.05;text-wrap:balance}.description{margin:10px auto 0;max-width:650px;font-size:clamp(13px,1.5vw,16px);line-height:1.45;font-weight:400;opacity:.9;white-space:pre-line;overflow-wrap:anywhere}
.monitor-shell{width:min(920px,96vw);position:relative;filter:drop-shadow(0 24px 22px rgba(19,69,105,.24))}.monitor-bezel{position:relative;background:linear-gradient(155deg,#fff 0%,#f7fafc 56%,#dce6ed 100%);border:1px solid rgba(0,53,89,.28);border-radius:10px 10px 5px 5px;padding:12px 12px 0;box-shadow:0 2px 0 rgba(255,255,255,.9) inset,0 -3px 0 rgba(10,68,105,.16) inset,0 8px 30px rgba(14,75,115,.2)}
.monitor-screen{position:relative;min-height:500px;border:3px solid #123b58;background:linear-gradient(180deg,#326fa0 0%,#1d5a8a 55%,#124e7c 100%);overflow:hidden;box-shadow:inset 0 0 38px rgba(0,0,0,.15)}
.screen-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,rgba(142,218,255,.24),transparent 46%),linear-gradient(115deg,rgba(255,255,255,.08),transparent 24%,transparent 70%,rgba(255,255,255,.04));z-index:0}.screen-head{position:absolute;z-index:4;top:17px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#fff;pointer-events:none}.presented{font-size:9px;font-weight:800;letter-spacing:.23em;opacity:.75}.demo-label{max-width:44%;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.10);backdrop-filter:blur(8px);padding:8px 11px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
canvas{display:block;position:absolute;inset:46px 0 78px;width:100%;height:calc(100% - 124px);z-index:2;touch-action:pan-y;transition:filter .25s ease,transform .25s ease}.stage.demo-transitioning canvas{filter:drop-shadow(0 0 18px rgba(255,255,255,.7));transform:scale(1.018)}
.stage-bottom{position:absolute;z-index:4;left:20px;right:20px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:12px;border-top:1px solid rgba(255,255,255,.22);color:#fff;pointer-events:none}#status{margin:0;font-size:11px;line-height:1.35;opacity:.88;max-width:72%}.interaction-chip{font-size:9px;font-weight:900;letter-spacing:.13em;display:inline-flex;align-items:center;gap:7px;opacity:.9}.interaction-dot{width:7px;height:7px;border-radius:50%;background:#63f5d1;box-shadow:0 0 12px #63f5d1}
.monitor-dock{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:min(560px,78%);margin:0 auto;transform:translateY(-1px);position:relative;z-index:6;box-shadow:0 9px 20px rgba(11,60,99,.22)}.dock-card{height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:white;font-size:9px;font-weight:900;letter-spacing:.12em;text-align:center;border-right:1px solid rgba(255,255,255,.45);position:relative;overflow:hidden}.dock-card:last-child{border-right:0}.dock-card:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 54%,rgba(7,57,85,.13) 54%);pointer-events:none}.dock-icon{font-size:32px;line-height:1;font-weight:300}.dock-orange{background:#f9b92d}.dock-green{background:#63d95c}.dock-coral{background:#fb6868}.dock-blue{background:#5aa9eb}
.monitor-neck{height:70px;width:140px;margin:0 auto;background:linear-gradient(90deg,#d7e2e9 0%,#f7fafc 25%,#f4f7f9 72%,#cfdce4 100%);clip-path:polygon(14% 0,86% 0,93% 100%,7% 100%);box-shadow:0 7px 14px rgba(22,78,114,.12)}.monitor-foot{width:235px;height:9px;margin:-1px auto 0;background:linear-gradient(180deg,#f9fbfc,#d8e3ea);clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);box-shadow:0 6px 12px rgba(19,71,104,.18)}
.interaction-hint{margin:15px auto 0;text-align:center;color:#f7fdff;font-size:11px;line-height:1.45;letter-spacing:.02em;opacity:.86;max-width:630px}.interaction-hint:before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#fff;vertical-align:1px;box-shadow:0 0 9px rgba(255,255,255,.8)}
.page-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;color:#eaf8ff;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8}.unavailable{width:min(720px,94vw);margin:14vh auto 0;background:rgba(255,255,255,.93);border:1px solid rgba(14,71,108,.2);border-radius:18px;padding:40px;text-align:center;box-shadow:0 24px 60px rgba(15,63,96,.22)}.unavailable h2{margin:0 0 10px;font-size:32px}.unavailable p{margin:0;line-height:1.55}
[hidden]{display:none!important}
@media(max-width:760px){.experience{padding:18px 12px 20px}.page-head{margin-bottom:14px}.edition{font-size:8px;letter-spacing:.12em}.wordmark{font-size:14px}.brand-mark{width:28px;height:28px}.hero-copy{margin-bottom:14px}.eyebrow{font-size:8px;letter-spacing:.25em}.hero-copy h1{font-size:clamp(28px,9vw,40px)}.description{font-size:13px;max-width:92%}.monitor-shell{width:100%}.monitor-bezel{padding:8px 8px 0;border-radius:8px}.monitor-screen{min-height:470px}.screen-head{top:12px;left:14px;right:14px}.presented{font-size:7px;letter-spacing:.14em}.demo-label{font-size:8px;max-width:48%;padding:6px 8px}canvas{inset:40px 0 72px;height:calc(100% - 112px)}.stage-bottom{left:14px;right:14px;bottom:12px}.interaction-chip{font-size:7px}.monitor-dock{width:90%}.dock-card{height:74px;font-size:7px;letter-spacing:.07em}.dock-icon{font-size:25px}.monitor-neck{height:54px;width:112px}.monitor-foot{width:185px}.interaction-hint{font-size:10px;max-width:92%}.page-foot{font-size:7px;padding:18px 4px 0}.page-foot span:last-child{text-align:right}}
@media(max-width:460px){.monitor-screen{min-height:420px}.monitor-dock{width:94%}.dock-card{height:66px}.dock-icon{font-size:22px}.dock-card span:last-child{font-size:6px}.presented{display:none}.demo-label{margin-left:auto;max-width:66%}#status{max-width:66%;font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.interaction-dot{box-shadow:none}}

/* V12 · respuesta inmediata al hover/toque mientras termina de prepararse el segundo FBX */
.stage.demo-arming .interaction-dot{animation:emdev12pulse .55s ease-in-out infinite alternate}
.stage.demo-arming .stage-bottom{border-top-color:rgba(124,246,255,.72)}
@keyframes emdev12pulse{from{transform:scale(1);opacity:.65}to{transform:scale(1.7);opacity:1}}
@media(prefers-reduced-motion:reduce){.stage.demo-arming .interaction-dot{animation:none}}