@font-face{font-family:'Michroma';src:url(../fonts/michroma.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(../fonts/archivo-var.woff2) format('woff2-variations'),url(../fonts/archivo-var.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url(../fonts/archivo-var-ext.woff2) format('woff2-variations'),url(../fonts/archivo-var-ext.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/plexmono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/plexmono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
img,video{max-width:100%}
.scene img,.scene .orb img{max-width:none}
:focus-visible{outline:2px solid #D9DCE0;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ring{animation-duration:40s}
body{margin:0;background:#0B0B0C}
a{color:#D9DCE0}a:hover{color:#FFFFFF}

/* Michroma: tipografía libre (SIL Open Font License), de estilo BankGothic */
.bg{font-family:'Michroma',sans-serif;font-weight:400;text-transform:uppercase}

.silver{background:linear-gradient(180deg,#F4F5F7 0%,#C9CDD3 45%,#9AA0A8 60%,#D6D9DE 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.outline{color:transparent;-webkit-text-stroke:1.5px rgba(217,220,224,0.14)}
.phd{background-color:#16171A;background-image:repeating-linear-gradient(135deg,rgba(217,220,224,0.05) 0 2px,transparent 2px 14px)}

/* ---------- Medidas del hero ---------- */
.hero{--r:470px;--cw:210px;--ch:144px;--lw:300px;--h:640px;--nav:88px;position:relative;overflow:hidden}

/* ---------- Órbita 3D ---------- */
.stage{position:relative;z-index:6;height:var(--h);perspective:1700px;display:flex;align-items:center;justify-content:center}
.scene{position:relative;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-9deg)}
.ring{position:absolute;left:0;top:0;transform-style:preserve-3d;animation-name:spin;animation-timing-function:linear;animation-iteration-count:infinite}
.stage:hover .ring{animation-play-state:paused}
.orb{position:absolute;left:calc(var(--cw) / -2);top:calc(var(--ch) / -2);width:var(--cw);height:var(--ch);box-sizing:border-box;transform:rotateY(calc(var(--i) * 36deg)) translateZ(var(--r));border:1px solid #3A3D43;border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;gap:4px;box-shadow:0 20px 40px rgba(0,0,0,0.55);animation:fadein .8s ease-out both;animation-delay:calc(4.7s + var(--i) * 0.07s)}
.logo3d,.sunset,.sunglow{position:absolute;left:calc(var(--lw) / -2);top:calc(var(--lw) / -2);width:var(--lw);aspect-ratio:1359 / 1330}
.logo3d{height:auto;transform:translateZ(0);animation:logoin 1.4s ease-out 4.3s both}
.sunset,.sunglow{-webkit-mask-image:url(../img/logo-bordes.png);mask-image:url(../img/logo-bordes.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;background:linear-gradient(115deg,transparent 0%,transparent 36%,#8E3FB0 41%,#FF4F87 45%,#FF7A45 48%,#FFF4D6 50%,#FFC46B 52%,#FF7A45 55%,#FF4F87 59%,#8E3FB0 62%,transparent 67%,transparent 100%);background-size:300% 300%;background-position:100% 50%;opacity:0;animation:burn 2.8s cubic-bezier(.45,.05,.35,1) 4.35s both}
.sunset{transform:translateZ(2px)}
.sunglow{transform:translateZ(1px);filter:blur(7px)}
@keyframes spin{from{transform:rotateY(0deg)}to{transform:rotateY(-360deg)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes logoin{0%{opacity:0;filter:brightness(1.6)}35%{opacity:1}100%{opacity:1;filter:none}}
@keyframes burn{0%{opacity:0;background-position:100% 50%}6%{opacity:1}90%{opacity:1;background-position:0% 50%}100%{opacity:0;background-position:0% 50%}}

/* ---------- Intro de carga ---------- */
/* Todo el hero espera quieto hasta que se pulsa «Entrar» (el navegador solo deja sonar música tras un clic) */
.hero:not(.go) *,.hero:not(.go) *::before,.hero:not(.go) *::after{animation-play-state:paused !important}
.hero:not(.go) .gate *{animation-play-state:running !important}
.pre{height:100vh;overflow:hidden}
.gate{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px;text-align:center}
.gate-ball{position:relative;width:0;height:40px}
.gate-ball .core{left:0;top:20px}
@keyframes breathe{0%,100%{opacity:0.5}50%{opacity:1}}
.breathe{animation:breathe 2.4s ease-in-out infinite}
.loader{position:fixed;inset:0;z-index:5;background:#000;pointer-events:none;animation:loaderout .7s ease-in 4.35s both}
@keyframes loaderout{to{opacity:0;visibility:hidden}}
/* Cámara del dron: no se ve ni circuito ni dron, solo lo que graba persiguiendo la bola */
.cam{position:absolute;inset:0;overflow:hidden;--by:calc(var(--nav) + var(--h) / 2 + 70px);--vy:calc(var(--nav) + var(--h) / 2 - 40px)}
.roll{position:absolute;inset:0;transform-origin:50% var(--by);animation:bank 3.45s cubic-bezier(.45,0,.55,1) both}
@keyframes bank{0%{transform:rotate(0)}12%{transform:translateX(-30px) rotate(-16deg)}26%{transform:rotate(-4deg)}38%{transform:translateX(36px) rotate(14deg)}52%{transform:translateX(20px) rotate(19deg)}64%{transform:translateX(-24px) rotate(-12deg)}78%{transform:translateX(-40px) rotate(-21deg)}90%{transform:rotate(6deg)}100%{transform:translateY(40px) rotate(0)}}
.shake{position:absolute;inset:0;animation:jit .12s steps(4) infinite}
@keyframes jit{0%{transform:translate(0,0)}25%{transform:translate(1.5px,-1px)}50%{transform:translate(-1px,1.5px)}75%{transform:translate(1px,1px)}100%{transform:translate(0,0)}}
.ground{position:absolute;left:50%;top:calc(var(--by) + 30px);width:460px;height:140px;margin-left:-230px;border-radius:50%;background:radial-gradient(ellipse at 50% 25%,rgba(255,130,40,0.38),rgba(255,80,0,0.08) 45%,rgba(0,0,0,0) 70%);animation:flick .09s steps(2) infinite alternate,gone .3s linear 3.45s forwards}
@keyframes flick{to{opacity:0.7}}
.chase{position:absolute;left:50%;top:var(--by);width:0;height:0;animation:rise .45s cubic-bezier(.5,0,.9,.6) 3.45s both}
.wob{position:absolute;left:0;top:0;animation:wob 3.45s cubic-bezier(.45,0,.55,1) both}
@keyframes wob{0%{transform:none}12%{transform:translateX(28px) rotate(12deg)}38%{transform:translateX(-30px) rotate(-10deg)}52%{transform:translateX(-14px) rotate(-14deg)}64%{transform:translateX(22px) rotate(9deg)}78%{transform:translateX(36px) rotate(15deg)}100%{transform:none}}
.core{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle,#FFFFFF 0%,#FFF1C2 28%,#FF9A2E 60%,rgba(255,80,0,0) 74%);box-shadow:0 0 22px 8px rgba(255,140,40,0.9),0 0 90px 34px rgba(255,80,0,0.35);animation:pulse .08s linear infinite alternate}
@keyframes pulse{to{transform:scale(1.14)}}
.flame{position:absolute;left:-36px;top:-4px;width:72px;height:200px;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,244,214,0.95) 0%,rgba(255,170,60,0.7) 18%,rgba(255,90,20,0.32) 50%,rgba(255,60,0,0) 100%);filter:blur(4px);transform-origin:50% 0;animation:lick .07s linear infinite alternate}
@keyframes lick{to{transform:scaleY(0.84) scaleX(1.12)}}
@keyframes gone{to{opacity:0}}
/* Visor de la cámara */
.hud{position:absolute;inset:28px;pointer-events:none;font-family:'Michroma',sans-serif;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(217,220,224,0.75);animation:gone .3s linear 3.5s forwards}
.hud .c{position:absolute;width:28px;height:28px;border:0 solid rgba(217,220,224,0.55)}
.hud .tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.hud .tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.hud .bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.hud .br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF3B30;box-shadow:0 0 8px #FF3B30;margin-right:10px;vertical-align:middle;animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@property --v{syntax:'<integer>';inherits:false;initial-value:0}
.vel{animation:vel 3.3s cubic-bezier(.2,.6,.3,1) forwards;counter-reset:v var(--v)}
.vel::after{content:counter(v) ' km/h'}
@keyframes vel{to{--v:312}}
.loadinfo{position:absolute;left:0;right:0;bottom:56px;display:flex;flex-direction:column;align-items:center;gap:14px}
@property --p{syntax:'<integer>';inherits:false;initial-value:0}
.pct{animation:count 4.2s cubic-bezier(.3,.1,.3,1) forwards;counter-reset:p var(--p)}
.pct::after{content:counter(p) '%'}
@keyframes count{to{--p:100}}
.bar{width:220px;height:1px;background:#26282C;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,#FF8A1F,#FFE7A8);transform-origin:left;animation:barfill 4.2s cubic-bezier(.3,.1,.3,1) forwards}
@keyframes barfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{0%{opacity:1;transform:translateY(0) scaleY(1)}30%{transform:translateY(-120px) scaleY(3)}100%{opacity:1;transform:translateY(-1200px) scaleY(5)}}

/* Caída sobre el logo (dentro del escenario, en su centro exacto) */
.drop{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#FFFFFF 0%,#FFD27A 45%,#FF7A1A 75%);box-shadow:0 0 24px 10px rgba(255,140,40,0.85),0 0 80px 30px rgba(255,90,0,0.35);opacity:0;z-index:3;pointer-events:none;animation:drop .5s cubic-bezier(.55,0,1,.45) 3.85s both}
@keyframes drop{0%{opacity:1;transform:translateY(-1000px) scaleY(5)}92%{opacity:1;transform:translateY(-10px) scaleY(2)}100%{opacity:0;transform:translateY(0) scale(2.2)}}
.impact{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(255,190,120,0.9);box-shadow:0 0 30px rgba(255,140,60,0.7),inset 0 0 30px rgba(255,140,60,0.5);opacity:0;z-index:3;pointer-events:none;animation:ring 1.1s cubic-bezier(.1,.7,.2,1) 4.33s both}
.flash{position:absolute;left:50%;top:50%;width:600px;height:600px;margin:-300px 0 0 -300px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,170,0.55) 0%,rgba(255,120,60,0.18) 35%,rgba(255,120,60,0) 65%);opacity:0;z-index:2;pointer-events:none;animation:flash 1.2s ease-out 4.33s both}
@keyframes ring{0%{opacity:1;transform:scale(0.1)}100%{opacity:0;transform:scale(6)}}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

.enter{animation:enter .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}


/* ---------- Fotos ---------- */
.orb{padding:0;overflow:hidden}
.orb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.orb-lab{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:22px 10px 9px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.85))}
.feat img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.feat:hover img{transform:scale(1.03)}
.thumb img{transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s;opacity:.85}
.thumb:hover img{transform:scale(1.06);opacity:1}
.pcard .pimg img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pimg img{transform:scale(1.05)}
.masonry{columns:4 250px;column-gap:14px}
.mitem{position:relative;display:block;width:100%;margin:0 0 14px;padding:0;border:1px solid #26282C;border-radius:6px;overflow:hidden;background:#121316;cursor:pointer;break-inside:avoid}
.mitem img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mitem:hover img{transform:scale(1.04)}
.mcap{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;text-align:left;font-size:13px;line-height:1.35;color:#F1F2F4;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.85));opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.mitem:hover .mcap,.mitem:focus-visible .mcap{opacity:1;transform:none}
@media (hover: none){.mcap{opacity:1;transform:none}}
/* Visor */
.lb{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;box-sizing:border-box;animation:fadein .25s ease-out both}
.lb-bg{position:absolute;inset:0;background:rgba(5,5,6,0.94);border:0;cursor:zoom-out}
.lb-top,.lb-bottom{position:relative;z-index:1;width:min(1200px,100%);display:flex;align-items:center;justify-content:space-between;gap:14px}
.lb-img{position:relative;z-index:1;max-width:min(1200px,100%);max-height:calc(100vh - 170px);object-fit:contain;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,0.6)}
.lb-btn{width:48px;height:48px;flex:none;border-radius:50%;border:1.5px solid #3A3D43;background:#121316;color:#D9DCE0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.lb-btn:hover{border-color:#D9DCE0}

/* ---------- Marquesinas ---------- */
.marquee{overflow:hidden;white-space:nowrap;width:100%}
.track{display:inline-flex;animation:mq 38s linear infinite}
.track.fast{animation-duration:22s}
.track.rev{animation-direction:reverse}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Tarjetas ---------- */
.pcard .pimg{transition:transform .7s cubic-bezier(.2,.7,.2,1),border-color .4s}
.pcard:hover .pimg{transform:scale(1.025);border-color:#8E939B}
.pcard .line{transform:scaleX(0.12);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .line{transform:scaleX(1)}
.lift{transition:transform .4s,border-color .4s}
.lift:hover{transform:translateY(-6px);border-color:#6B7078}

@supports (animation-timeline: view()){
.reveal{animation:up linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}
@keyframes up{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(8px);opacity:1}}
.cue{animation:cue 2.2s ease-in-out infinite}

@media (min-width: 761px){
.wide{grid-column:span 2}
}
@media (max-width: 760px){
.hero{--r:210px;--cw:118px;--ch:82px;--lw:170px;--h:430px;--nav:132px}
.hud{inset:14px}
}
@media (prefers-reduced-motion: reduce){
.loader,.drop,.impact,.flash,.gate{display:none}
.pre{height:auto;overflow:visible}
.ring,.track,.cue{animation:none}
.sunset,.sunglow{display:none}
.orb,.logo3d,.enter,.reveal{animation:none;opacity:1}
}

/* ---------- Visitas repetidas: sin intro ---------- */
.skip .loader,.skip .drop,.skip .impact,.skip .flash,.skip .sunset,.skip .sunglow{display:none}
.skip .logo3d,.skip .enter{animation-delay:0s !important}
.skip .orb{animation-delay:calc(var(--i) * 0.07s) !important}
body.lb-lock{overflow:hidden}
.field{width:100%;font-family:inherit;font-size:16px;color:#F1F2F4;background:#0B0B0C;border:1.5px solid #3A3D43;border-radius:6px;padding:14px 16px;min-height:50px}
.field:focus{border-color:#D9DCE0;outline:none}
.flabel{font-family:'Michroma',sans-serif;text-transform:uppercase;font-size:10px;letter-spacing:0.2em;color:#A9ADB4}
button[disabled]{opacity:.6;cursor:wait}
@media (max-width: 560px){
.hud > span:nth-of-type(6),.hud > span:nth-of-type(8){display:none}
}