/*! © 2026 Yael Gtz · Zion Presenter · zionpresenter.com · Código propietario. Prohibida su copia, modificación o ingeniería inversa. */
:root{--zion-active:#3a6cf4;--zion-active-hover:#4f7ef7;--zion-active-rgb:58, 108, 244;--zion-active-soft-rgb:127, 160, 248}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{display:grid;grid-template-rows:52px minmax(0,1fr) 25px;height:100dvh;color:#f5f5f7;background:radial-gradient(ellipse at 50% 35%,#182040,#07080d 70%);font:12px -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;color-scheme:dark}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--zion-active);outline-offset:3px}.demo-header{display:flex;justify-content:space-between;align-items:center;gap:12px;height:44px;margin:8px 12px 0;padding:0 6px 0 14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 42%),rgba(22,23,34,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 44px -22px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5)}.brand,.header-actions{display:flex;align-items:center;gap:10px}.brand{font-size:13px;font-weight:600;white-space:nowrap}.demo-header p{margin:0;color:#d6d8e1}.demo-header p span{color:#a3a7b3}.header-actions{gap:6px}.header-actions button,.header-actions a{display:inline-flex;align-items:center;height:28px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.07);border-radius:9px;padding:0 10px;white-space:nowrap;font-size:11.5px;font-weight:500;transition:background-color .15s ease}.header-actions a{background:var(--zion-active);color:#fff;border-color:transparent;font-weight:600}.header-actions a:hover{background:var(--zion-active-hover)}.header-actions button:hover{background:rgba(255,255,255,.12)}.header-actions button[aria-pressed=true]{background:rgba(255,255,255,.16)}.header-actions a.site-language{background:0 0;border-color:transparent;padding:0 8px;color:rgba(255,255,255,.5);font-weight:500;transition:color .15s ease}.header-actions a.site-language:hover{background:0 0;color:#fff}footer .site-language{color:rgba(255,255,255,.5);white-space:nowrap;transition:color .15s ease}footer .site-language:hover{color:#fff}.demo-screen,#demo-screen-custom{display:inline-flex;align-items:center;gap:6px}#demo-screen-custom[hidden]{display:none}.demo-screen select,.demo-screen input{height:28px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.07);color:#e8e9f0;font:inherit;font-size:11.5px}.demo-screen select{padding:0 8px;font-weight:500}.demo-screen select option{background:#16171f;color:#e8e9f0}.demo-screen input{width:64px;padding:0 8px;font-variant-numeric:tabular-nums}#demo-screen-custom>span{color:#a3a7b3;font-size:11.5px}.experience{position:relative;min-height:0;display:grid;grid-template-rows:minmax(0,40fr) minmax(0,60fr);width:100%;max-width:1600px;margin:auto;height:100%;padding:4px 18px 8px}.stage{position:relative;min-height:0;overflow:hidden;container-type:size;border-radius:18px 18px 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}.stage-backdrop{position:absolute;inset:0;background:radial-gradient(34% 48%at 50% 34%,rgba(var(--zion-active-rgb),.3),transparent 72%),repeating-linear-gradient(90deg,rgba(255,255,255,.035)0 1px,transparent 1px 38px),repeating-linear-gradient(0deg,rgba(255,255,255,.025)0 1px,transparent 1px 38px),linear-gradient(180deg,#0d1122 0%,#0a0c18 58%,#06070d 100%)}.stage-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(4% 26%at 8% 80%,rgba(255,176,102,.32),transparent 70%),radial-gradient(4% 26%at 20% 80%,rgba(255,176,102,.26),transparent 70%),radial-gradient(4% 26%at 80% 80%,rgba(255,176,102,.26),transparent 70%),radial-gradient(4% 26%at 92% 80%,rgba(255,176,102,.32),transparent 70%)}.stage-haze{position:absolute;inset:-10% -15%;background:radial-gradient(30% 40%at 30% 40%,rgba(var(--zion-active-rgb),.16),transparent 70%),radial-gradient(28% 36%at 72% 46%,rgba(var(--zion-active-soft-rgb),.1),transparent 70%),radial-gradient(40% 30%at 50% 70%,rgba(var(--zion-active-rgb),.1),transparent 70%);animation:stage-haze 26s ease-in-out infinite alternate;will-change:transform}@keyframes stage-haze{0%{transform:translateX(-4%) scale(1.02)}to{transform:translateX(4%) scale(1.08)}}.stage-truss{position:absolute;top:2%;left:3%;right:3%;height:10px;border-top:2px solid #3a3e52;border-bottom:2px solid #3a3e52;background:repeating-linear-gradient(60deg,transparent 0 7px,rgba(160,166,190,.35) 7px 8px,transparent 8px 13px);z-index:3}.stage-truss span{position:absolute;top:100%;width:14px;height:14px;margin-left:-7px;border-radius:3px 3px 8px 8px;background:linear-gradient(#2a2d3d,#12141e)}.stage-truss span::after{content:"";position:absolute;left:3px;right:3px;bottom:1px;height:5px;border-radius:50%;background:#eef2ff;box-shadow:0 0 10px 3px rgba(205,218,255,.75);animation:stage-lens 3.2s ease-in-out infinite alternate}@keyframes stage-lens{0%{opacity:.55}to{opacity:1}}.stage-truss span:nth-child(1),.stage-beams i:nth-child(1){left:10%}.stage-truss span:nth-child(2),.stage-beams i:nth-child(2){left:22%}.stage-truss span:nth-child(3),.stage-beams i:nth-child(3){left:34%}.stage-truss span:nth-child(4),.stage-beams i:nth-child(4){left:66%}.stage-truss span:nth-child(5),.stage-beams i:nth-child(5){left:78%}.stage-truss span:nth-child(6),.stage-beams i:nth-child(6){left:90%}.stage-beams i{position:absolute;top:calc(2% + 20px);width:18%;height:96%;margin-left:-9%;transform-origin:50%0;filter:blur(6px);mix-blend-mode:screen;animation:stage-sweep 9s ease-in-out infinite alternate;will-change:transform,opacity}.stage-beams i::before{content:"";position:absolute;inset:0;clip-path:polygon(47%0,53%0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(150,178,255,.5),rgba(150,178,255,.12) 55%,rgba(150,178,255,0) 92%)}.stage-beams i:nth-child(even)::before{background:linear-gradient(180deg,rgba(225,232,255,.42),rgba(225,232,255,.1) 55%,rgba(225,232,255,0) 92%)}.stage-beams i:nth-child(1){animation-duration:10s;animation-delay:-2s}.stage-beams i:nth-child(2){animation-duration:8s;animation-delay:-5s}.stage-beams i:nth-child(3){animation-duration:11s;animation-delay:-1s}.stage-beams i:nth-child(4){animation-duration:9s;animation-delay:-6s;animation-direction:alternate-reverse}.stage-beams i:nth-child(5){animation-duration:12s;animation-delay:-3s;animation-direction:alternate-reverse}.stage-beams i:nth-child(6){animation-duration:10s;animation-delay:-7s;animation-direction:alternate-reverse}@keyframes stage-sweep{0%{transform:rotate(-14deg);opacity:.65}50%{opacity:1}to{transform:rotate(14deg);opacity:.7}}.stage-array{position:absolute;top:calc(2% + 12px);width:3.2%;min-width:16px;display:flex;flex-direction:column;gap:2px;z-index:3}.stage-array.is-left{left:4.5%}.stage-array.is-right{right:4.5%}.stage-array b{display:block;height:13px;border:1px solid #2c2f40;border-radius:3px;background:repeating-linear-gradient(90deg,#141724 0 3px,#0b0c14 3px 5px);box-shadow:0 6px 14px rgba(0,0,0,.45)}.stage-array.is-left b:nth-child(4){transform:rotate(3deg)}.stage-array.is-left b:nth-child(5){transform:rotate(7deg) translateX(1px)}.stage-array.is-left b:nth-child(6){transform:rotate(12deg) translateX(3px)}.stage-array.is-right b:nth-child(4){transform:rotate(-3deg)}.stage-array.is-right b:nth-child(5){transform:rotate(-7deg) translateX(-1px)}.stage-array.is-right b:nth-child(6){transform:rotate(-12deg) translateX(-3px)}.stage-deck{position:absolute;left:0;right:0;bottom:0;height:12%;border-top:2px solid rgba(var(--zion-active-soft-rgb),.45);background:radial-gradient(26% 120%at 50% 0%,rgba(var(--zion-active-rgb),.32),transparent 72%),linear-gradient(180deg,#1c2034 0%,#0c0e18 100%);box-shadow:0-14px 40px -14px rgba(var(--zion-active-rgb),.55);z-index:4}.stage-deck::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:rgb(var(--zion-active-soft-rgb));box-shadow:0 0 12px 2px rgba(var(--zion-active-rgb),.6);animation:stage-lens 4s ease-in-out infinite alternate}.stage-set{position:absolute;bottom:11.4%;z-index:5;overflow:visible}.stage-set.is-left{left:2.5%;width:min(33cqw,calc(50cqw - min(68.4cqh,31cqw) - 4cqw));height:48%}.stage-set.is-right{right:2.5%;width:min(33cqw,calc(50cqw - min(68.4cqh,31cqw) - 4cqw));height:48%}.stage-set.is-center{left:38%;width:24%;height:15%}.stage-set .set-led-edge{animation:stage-lens 2.6s ease-in-out infinite alternate}.stage-set .set-led-dot,.stage-set .set-screen{animation:stage-lens 1.8s ease-in-out infinite alternate}.projection-frame{position:absolute;margin:0;padding:3px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:#09090f;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 70px -18px rgba(var(--zion-active-rgb),.35),0 22px 60px -30px rgba(0,0,0,.8)}.projection-frame .frame-viewport{border-radius:3px}.projection-frame figcaption{position:absolute;left:50%;transform:translateX(-50%);padding:3px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(10,11,20,.72);color:#d6d8e1;font-size:10px;font-weight:500;white-space:nowrap}.screen-main{top:6%;bottom:17%;left:50%;transform:translateX(-50%);aspect-ratio:16/9;max-width:62%;z-index:2}.screen-backstage{top:9%;right:9.5%;height:34%;aspect-ratio:16/9;max-width:20%;z-index:2}.screen-backstage figcaption{top:calc(100% + 6px)}.frame-viewport{position:relative;width:100%;height:100%;overflow:hidden;background:#07070d}iframe{position:absolute;top:0;left:0;display:block;border:0;transform-origin:top left}.computer{position:relative;min-height:0;width:min(100%,1190px);margin:0 auto;padding-bottom:10px}.computer-lid{position:relative;width:100%;height:100%;border:1px solid #676574;border-radius:13px 13px 2px 2px;padding:14px 6px 5px;background:linear-gradient(135deg,#373640,#11131b 30%,#2a2934);box-shadow:0 18px 50px #0009}.camera{position:absolute;width:4px;height:4px;border-radius:50%;background:#080910;box-shadow:0 0 0 1px #595b714d;top:5px;left:50%}.panel-viewport{border-radius:5px 5px 0 0}.computer-base{position:absolute;height:10px;left:-12px;right:-12px;bottom:0;background:linear-gradient(#92919e,#474650 45%,#171820);border-radius:0 0 35% 35%}.computer-base::before{content:"";position:absolute;left:42%;right:42%;top:0;height:4px;background:#36343e;border-radius:0 0 5px 5px}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#0b0c16;color:#a3a7b3;font-size:13px;pointer-events:none}#loading[hidden]{display:none}footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 22px;color:#a3a7b3;font-size:10px}footer .demo-note{margin-left:auto}body.panel-expanded .experience{grid-template-rows:minmax(0,22fr) minmax(0,78fr)}body.panel-expanded .computer{width:100%}body.panel-expanded .projection-frame figcaption{display:none}body.panel-expanded .stage-set.is-center{display:none}html.panel-real,html.panel-real body{height:auto;overflow-x:hidden;overflow-y:auto}body.panel-real{min-height:100dvh;grid-template-rows:52px auto 25px}body.panel-real .demo-header{position:sticky;top:8px;z-index:5;background:rgba(22,23,34,.86)}body.panel-real .experience{height:auto;grid-template-rows:auto auto;gap:12px;max-width:none}body.panel-real .stage{height:min(34vh,300px)}body.panel-real .computer{width:100%}body.panel-real .computer-lid{height:auto}body.panel-real .projection-frame figcaption{display:none}@media (max-width:760px){.demo-header{margin:8px 8px 0;padding:0 6px 0 10px}.demo-header p{display:none}.experience{padding-left:10px;padding-right:10px}.computer-base{left:-5px;right:-5px}footer{padding:0 12px}footer .demo-note{display:none}}@media (max-width:480px){.brand span{display:none}body{grid-template-rows:48px minmax(0,1fr) 25px}.demo-header{height:40px}.experience{grid-template-rows:minmax(0,33fr) minmax(0,67fr)}.header-actions button,.header-actions a{font-size:11px;padding:0 8px}}.demo-mobile-note{display:none}footer,.demo-mobile-note{position:relative;z-index:2}@media (max-width:760px){#expand-panel,#real-size-panel,.demo-screen{display:none}.experience{grid-template-rows:auto auto;align-content:center;gap:18px}.stage{aspect-ratio:3/4}.screen-main{top:9%;bottom:auto;width:86%;max-width:none}.stage-set.is-left,.stage-set.is-right{height:34%;width:45%}.stage-set.is-center{display:none}.stage-array{display:none}.screen-backstage{display:none}.computer{position:absolute;left:-200vw;top:0;width:1200px;height:700px;visibility:hidden;pointer-events:none}.demo-mobile-note{display:block;margin:0 auto 10px;max-width:340px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.05);color:#d6d8e1;font-size:12px;line-height:1.45;text-align:center}}@media (prefers-reduced-motion:reduce){.stage-haze,.stage-beams i,.stage-truss span::after,.stage-deck::after,.stage-set *{animation:none!important}}