:root{--logo-gutter:170px}
html:has(.opening-pending),body.opening-pending{overflow:hidden;background:#fff}
#opening{position:fixed;inset:0;z-index:1000;background:#fff;transition:opacity 1.5s ease}
#opening-white{position:absolute;inset:0;display:grid;place-items:center;background:#fff;z-index:2;transition:opacity .8s ease}
#opening-white img{width:calc(100% - var(--logo-gutter)*2);max-width:1200px;height:auto;object-fit:contain}
#opening-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;opacity:0;transition:opacity .8s ease}
#opening.playing #opening-film{opacity:1}
#opening.playing #opening-white{opacity:0;pointer-events:none}
#opening.finished{opacity:0;pointer-events:none}
#opening-skip{position:absolute;right:20px;bottom:20px;z-index:3;color:#123d4a;background:#ffffffbb;border-color:#99bdc4;font-size:12px}
#opening-play{position:absolute;z-index:4;left:50%;bottom:15%;transform:translateX(-50%);color:#123d4a;background:#fff;border-color:#99bdc4}
#opening-play[hidden]{display:none}
body.opening-pending header,body.opening-pending .navigation,body.opening-pending .social-rail,body.opening-pending .cursor-aura{visibility:hidden!important;opacity:0!important;pointer-events:none}
body.opening-pending main,body.opening-pending footer{visibility:hidden}
body.opening-pending.opening-finishing main{visibility:visible}
.intro{height:100svh!important;min-height:0!important;position:relative;overflow:hidden;background:#073346}
.intro .stage{display:none!important}
.ocean-final{position:absolute;inset:0;background:url('assets/universo.webp') center/cover no-repeat}
.hero-wordmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--logo-gutter)*2);max-width:1200px;aspect-ratio:2;background:linear-gradient(160deg,#78b9c9 0%,#d4fcff 28%,#82c9d5 44%,#edfff9 51%,#b3ede5 65%,#61aabc 100%);mask:url('assets/opening-logo.png') center/contain no-repeat;-webkit-mask:url('assets/opening-logo.png') center/contain no-repeat;filter:drop-shadow(0 0 12px #9ceae755);pointer-events:none}
body.opening-complete header,body.opening-complete .navigation,body.opening-complete .social-rail{animation:controls-arrive 1.1s ease both}
body.opening-complete .navigation{left:auto;right:24px;animation-delay:.18s}
body.opening-complete .social-rail{animation-delay:.3s}
@keyframes controls-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:850px){:root{--logo-gutter:90px}body.opening-complete .navigation{right:8px}}
@media(max-width:460px){:root{--logo-gutter:70px}.navigation a{max-width:60px}}
@media(prefers-reduced-motion:reduce){#opening,#opening-white,#opening-film{transition:none}body.opening-complete header,body.opening-complete .navigation,body.opening-complete .social-rail{animation:none}}
/* One shared four-row grid: LinkedIn / Inicio, TikTok / Servicios, Facebook / NAI. */
:root{--rail-row:48px;--rail-gap:18px;--rail-height:246px}
.navigation,.social-rail{top:50%;height:var(--rail-height);transform:translateY(-50%);display:grid;grid-template-rows:repeat(4,var(--rail-row));grid-auto-flow:row;gap:var(--rail-gap);align-content:start;padding:0}
.navigation a{height:var(--rail-row);min-height:var(--rail-row);margin:0;align-self:center;align-items:center;transition:filter .25s ease,color .25s ease,opacity .25s ease}
.social-rail{left:22px;align-items:center;justify-items:center}
.social-icon{width:48px;height:48px;min-height:48px;padding:9px;border-radius:50%}
.social-icon svg,.triangle{width:30px;height:30px;flex-shrink:0}
.social-icon:hover,.social-icon:disabled:hover,.social-icon:focus-visible,.social-icon:active,.navigation a:hover,.navigation a:focus-visible,.navigation a:active{filter:drop-shadow(0 0 5px #a9ffff) drop-shadow(0 0 15px #28c6ff);opacity:1;color:#e2ffff;background:transparent;transform:none}
.navigation a:hover polyline,.navigation a:focus-visible polyline{stroke:#b8ffff}
.cursor-aura{width:180px;height:180px;background:radial-gradient(circle,#efffffdb 0%,#8dffeeb0 3%,#52e9ec80 9%,#29bfff45 25%,#4affb822 43%,transparent 68%);mix-blend-mode:screen}
.cursor-aura.is-visible{opacity:1}
.cursor-aura.over-control{background:radial-gradient(circle,#ffffffec 0%,#a9fff2c0 4%,#54e3ff90 12%,#25c4ff58 28%,#6bffce22 46%,transparent 70%)}
.intro{isolation:isolate;perspective:1200px}
.ocean-final{z-index:0;transform:scale(1.04);transform-origin:50% 65%}
.hero-wordmark{z-index:2}
.intro #nano-waves{position:absolute;inset:0;z-index:1;opacity:.7;pointer-events:none}
.ocean-final::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 25% 78%,#84ffe931,transparent 34%),radial-gradient(ellipse at 75% 69%,#74dcff29,transparent 36%);opacity:.35;pointer-events:none}
body.opening-complete .ocean-final{animation:ocean-depth 24s ease-in-out infinite alternate}
body.opening-complete .ocean-final::after{animation:ocean-light 14s ease-in-out infinite alternate}
@keyframes ocean-depth{from{transform:scale(1.04) translate3d(-.35%,.25%,0) rotateX(.3deg)}to{transform:scale(1.07) translate3d(.35%,-.25%,0) rotateX(-.3deg)}}
@keyframes ocean-light{from{opacity:.25;transform:translate3d(-1%,1%,0)}to{opacity:.8;transform:translate3d(1%,-1%,0)}}
.world,.glow{animation:none}
.ocean-motion{position:absolute;bottom:18px;right:24px;z-index:3;font-size:12px;min-height:44px;padding:10px 14px;background:#06364770;border:1px solid #a8dfdf40;color:#d2f5ee}
body.motion-paused .ocean-final,body.motion-paused .ocean-final::after,body.ocean-offscreen .ocean-final,body.ocean-offscreen .ocean-final::after,body.page-hidden .ocean-final,body.page-hidden .ocean-final::after{animation-play-state:paused}
@media(max-width:850px){.social-rail{left:8px}.navigation a{flex-direction:column;justify-content:center;gap:2px;font-size:12px}.social-icon svg,.triangle{width:26px;height:26px}.ocean-motion{right:16px;bottom:12px}}
@media(max-width:460px){.social-rail{left:2px}.social-icon{width:44px;height:48px;padding:9px}.navigation a{max-width:60px}.ocean-motion{font-size:12px}}
@media(max-height:460px){:root{--rail-gap:4px;--rail-height:204px}.ocean-motion{bottom:4px}}
@media(hover:none),(pointer:coarse){.cursor-aura,.click-light{display:none}}
@media(prefers-reduced-motion:reduce){body.opening-complete .ocean-final,body.opening-complete .ocean-final::after{animation:none}.cursor-aura{display:none}}

/* Single video opening; exact decoded final frame keeps the same detail and framing. */
#opening-film{opacity:1;transition:none}
#opening{transition:opacity .8s ease}
.ocean-final{background-image:url('assets/opening-final-exact.webp');transform:none;transform-origin:center}
.hero-wordmark{display:none}
.ocean-final::after{opacity:0}
@keyframes ocean-depth{from{transform:scale(1) translate3d(0,0,0) rotateX(0)}to{transform:scale(1.025) translate3d(.2%,-.15%,0) rotateX(-.2deg)}}
@keyframes ocean-light{from{opacity:0;transform:translate3d(0,0,0)}to{opacity:.6;transform:translate3d(.6%,-.6%,0)}}
@media(prefers-reduced-motion:reduce){#opening{transition:none}}