/* Matrix depth and a continuous digital DNA spine, behind readable content. */
body{isolation:isolate;background:#050a10}body>main,body>.ux-footer{position:relative;z-index:1}
.ecosystem-background{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict;background:radial-gradient(ellipse at 80% 25%,#12302c55,transparent 55%),radial-gradient(ellipse at 20% 72%,#39265945,transparent 65%),#050a10}
.ecosystem-background canvas{display:block;width:100%;height:100%;opacity:.85}
.ecosystem-background:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050a1020,#050a1066 24%,#050a1055 65%,#050a1008),radial-gradient(ellipse at 46% 45%,#050a1020,transparent 80%)}
.ecosystem-dna{position:fixed;top:0;right:-18px;bottom:0;width:clamp(150px,18vw,260px);z-index:0;pointer-events:none;contain:strict;opacity:.88;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 92%,transparent)}
.ecosystem-dna canvas{display:block;width:100%;height:100%}
.ecosystem-dna canvas[hidden]{display:none}
.ecosystem-motion{position:fixed;left:20px;bottom:18px;z-index:82;display:flex;align-items:center;gap:9px;min-height:44px;background:#080f18ed;border:1px solid #b69cdf4d;border-radius:24px;color:#d6e3e6;backdrop-filter:blur(16px);padding:10px 14px;font-size:10px;line-height:1.5;cursor:pointer}
.ecosystem-motion>i{height:5px;width:5px;border-radius:50%;background:#77e7b9;box-shadow:0 0 10px #77e7b9;flex:none}.ecosystem-motion[aria-pressed=true]>i{background:#a49aae;box-shadow:none}
.cinema-stage{background:linear-gradient(90deg,#050a1066,#050a102d 50%,#050a1008);}
.cinema-topline{color:#a8c2c1}.cinema-topline>span:first-child{color:#a8d6c6}
.cinema-kicker{color:#bcdad0}.cinema-panels{text-shadow:0 2px 16px #03070b}
.cinema-rail{right:13px}.cinema-rail button{background:#080d164d;border-radius:50%;border:1px solid transparent}.cinema-rail button[aria-current=step]{border-color:#cdb0ef88;background:#111526c9}
.ux-section{width:min(1240px,calc(100% - 128px))}.ux-heading,.ux-service-intro,.ux-service-row,.ux-process,.ux-faq,.ux-closing{position:relative;isolation:isolate}
.ux-heading:before,.ux-service-intro:before,.ux-service-row:before,.ux-process:before,.ux-faq:before,.ux-closing:before{content:'';position:absolute;inset:-16px -22px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 40% 45%,#050a10d9 22%,#050a1099 62%,transparent 100%)}
.ux-original-scene{box-shadow:0 0 0 1px #8eb4b21a,0 30px 80px #0005}.ux-finder{background:#080f18ed}.ux-demo-note{background:#080d146e}
.cinema-header.commerce-mode{background:#070e17e8}.ux-footer{padding-bottom:86px}.cinema-footer{bottom:80px}
.motion-paused .ux-original-camera{animation-play-state:paused}
@media(max-width:1000px){.ux-section{width:calc(100% - 100px)}}
@media(max-width:650px){.ecosystem-dna{width:24px;right:0;opacity:.78}.ux-section{width:calc(100% - 58px);margin-left:18px;margin-right:40px}.ecosystem-background canvas{opacity:.68}.ecosystem-motion{left:12px;bottom:12px;font-size:9px;padding:10px 12px;min-height:44px}.ecosystem-motion>span{max-width:145px}.cinema-rail{right:1px}.cinema-rail button{width:36px;min-width:36px}.cinema-rail button span{right:37px}.cinema-footer{bottom:71px}.cinema-options{gap:10px}.cinema-footer .motion-label{display:none}.ux-footer{padding-bottom:86px}.ux-heading:before,.ux-service-intro:before,.ux-service-row:before{inset:-12px -12px}}
@media(prefers-reduced-motion:reduce){.ecosystem-motion,.ecosystem-background,.ecosystem-dna{transition:none}}
@media(max-width:650px){body:has(#ux-selection:not([hidden])) .ecosystem-motion{bottom:88px}}

/* Phone composition: the brand gets its own large entrance, scenes get the width. */
@media(max-width:650px){
  .cinematic-journey{--mobile-scene-height:max(780px,90vw + 430px);min-height:calc(var(--mobile-scene-height)*8)}
  .cinema-stage{--intro-travel:max(0px,var(--mobile-scene-height) - 100dvh);min-height:var(--mobile-scene-height);top:min(0px,100dvh - var(--mobile-scene-height))}
  .cinema-panel,.intro-panel{left:18px;right:18px;width:auto;max-width:none;bottom:auto}
  .intro-panel{top:max(430px,90vw + 112px);transform:translate3d(0,24px,0)}
  .intro-panel.is-current{transform:none}
  .cinema-fallback{transform:scale(.82);transform-origin:center}
  .intro-panel h1{font-size:clamp(42px,12vw,55px);line-height:1.03;letter-spacing:-2.2px}
  .intro-panel .cinema-description{font-size:14px;line-height:1.6;max-width:none;margin:18px 0}
  .cinema-topline{left:18px;right:18px;top:77px}
  .cinema-shot,.project-shot{left:12px;right:12px;top:calc(var(--intro-travel) + 90px);height:auto;bottom:auto;aspect-ratio:16/9}
  .cinema-shot .shot-image{height:100%;aspect-ratio:16/9}
  .cinema-shot figcaption{position:static;display:flex;background:none;padding:10px 0;font-size:9px}
  .cinema-shot figcaption>span{display:inline}
  .cinema-shot figcaption small{font-size:8px;color:#b4afc4}
  .world-panel{top:calc(var(--intro-travel) + (100vw - 24px)*.5625 + 135px);transform:translate3d(0,24px,0)}
  .world-panel.is-current{transform:none}
  .world-panel h2{font-size:clamp(30px,8.8vw,39px);line-height:1.06}
  .world-panel .cinema-description{font-size:14px;line-height:1.55}
  .world-panel .cinema-services{gap:8px 15px}
  .cinema-footer{left:auto;right:12px;bottom:12px;display:flex;justify-content:flex-end}
  .cinema-footer .cinema-position,.cinema-footer .cinema-options{display:none}
  .cinema-next{font-size:7px;gap:8px;max-width:180px}
  .cinema-rail{top:calc(var(--intro-travel) + 95px);right:0;opacity:.65;transform:none}
  .cinema-rail button{width:24px;min-width:24px;min-height:36px}
  .cinema-rail button span{display:none}
  .ecosystem-dna{z-index:0;width:100px;opacity:.52;right:-24px}
  .ux-section{width:calc(100% - 24px);margin-left:12px;margin-right:12px}
  #ux-detail{width:calc(100% - 8px)}
  .ux-detail-layout{padding:22px 12px}
  .ux-original-stage,.ux-detail-main .ux-original-stage{aspect-ratio:16/10}
  .ux-original-camera img,.ux-detail-main figure.ux-original-scene img{object-fit:cover}
  .ux-detail-main figure.ux-original-scene,.ux-detail-main .ux-original-video{margin-left:-12px;margin-right:-12px}
  .ux-detail-main figure.ux-original-scene figcaption,.ux-detail-main .ux-original-video figcaption{padding:14px}
  .ux-original-scene figcaption{font-size:14px}
  .ux-concept-label{font-size:9px;max-width:70%;padding:6px 8px}
  .ux-heading:before,.ux-service-intro:before,.ux-service-row:before{inset:-12px -10px}
}
.cinema-finish-label{font:9px/1.5 Consolas,monospace;color:#d8bb74}
.development-brand-shot .shot-image picture{display:block;width:100%;height:100%}
.development-brand-shot .shot-image picture img{display:block;width:100%;height:100%;object-fit:contain;transform:none;transition:opacity .25s}
.cinema-stage[data-ready="true"] .development-brand-shot[data-screen-ready="true"] .shot-image picture img{opacity:0}
@media(max-width:650px){
  .cinema-stage{--development-picture-height:min(calc((100vw - 24px)*1.3396),calc(100dvh - 180px))}
  .development-brand-shot{height:var(--development-picture-height);aspect-ratio:auto}
  .development-brand-shot .shot-image{height:100%;aspect-ratio:auto}
  .development-brand-shot .shot-image:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 42%,#050a1088 64%,#050a10e8 90%,#050a10)}
  .development-brand-shot figcaption{display:none}
  .world-panel[data-world="desarrollo"]{top:calc(var(--intro-travel) + 90px + var(--development-picture-height)*.59)}
  .world-panel[data-world="desarrollo"] .cinema-description{max-width:36ch}
}
@media(max-width:650px) and (max-height:620px){
  .world-panel[data-world="desarrollo"] .cinema-description{display:none}
  .world-panel[data-world="desarrollo"] .cinema-kicker{margin-bottom:6px}
  .world-panel[data-world="desarrollo"] h2{font-size:clamp(24px,6vw,28px);margin:8px 0}
}
@media(max-width:650px) and (max-height:620px){
  .world-panel .cinema-description,.world-panel .cinema-services{display:none}
  .world-panel h2{font-size:30px;margin:10px 0 14px}
  .world-panel .cinema-kicker{font-size:8px}
  .cinema-stage:not([data-chapter="0"]) .cinema-topline{display:none}
}