/* ===== Hero planeta cinematográfico + intro ===== */
html.intro-on, html.intro-on body{overflow:hidden}
body{background:#03050A}

/* header oculto: aparece con el scroll */
.nav{transform:translateY(-120%);transition:transform .6s var(--ease),background .4s;background:linear-gradient(180deg,rgba(3,5,10,.85),rgba(3,5,10,0))}
.nav.show{transform:none}
body.menu-open .nav{transform:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:580px;overflow:hidden;background:radial-gradient(ellipse 60% 55% at 50% 50%,#0B1729 0%,#060B15 50%,#03050A 100%);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.hero.dragging{cursor:grabbing}
.globe{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}

.cards{position:absolute;left:0;top:0;width:0;height:0}
.card{position:absolute;left:0;top:0;padding:0;border:0;background:none;cursor:pointer;will-change:transform;text-align:left;visibility:hidden}
.cards.on .card{visibility:visible}
.card .in{display:block;opacity:0;transform:scale(2.4) translateY(-40px);filter:blur(14px)}
.cards.on .card .in{animation:cardFly 1.4s var(--ease) forwards}
@keyframes cardFly{to{opacity:1;transform:none;filter:none}}
.card .frame{display:block;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 40px rgba(0,0,0,.55);transition:box-shadow .3s}
.card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .8s var(--ease)}
.card .cap{display:flex;justify-content:space-between;gap:10px;margin-top:10px;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s var(--ease);white-space:nowrap}
.card .cap b{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:-.01em}
.card .cap span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cielo);align-self:center}
.card:hover .frame,.card:focus-visible .frame,.card.on .frame{box-shadow:0 0 0 1px var(--cielo),0 24px 50px rgba(0,0,0,.6)}
.card:hover img,.card.on img{transform:scale(1.06)}
.card:hover .cap,.card:focus-visible .cap,.card.on .cap{opacity:1;transform:none}
.card:focus-visible{outline:none}

.pin-label{position:absolute;left:0;top:0;z-index:6;white-space:nowrap;pointer-events:none;padding-left:14px;border-left:1px solid var(--cielo);opacity:0;transition:opacity .5s}
.pin-label b{color:#fff;font-weight:500}
.pin-label.on{opacity:1}

/* elementos que entran al final de la intro */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.hero.ready .reveal{opacity:1;transform:none}
.hero.ready .hero-head.reveal{transition-delay:.15s}
.hero.ready .scroll-cue.reveal{transition-delay:.5s}

.hero-meta{position:absolute;left:0;right:0;top:clamp(26px,5vh,44px);z-index:10;text-align:center;font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.42);pointer-events:none}

.hero-head{position:absolute;left:var(--pad);bottom:clamp(26px,5vh,48px);z-index:10;max-width:min(620px,48vw);pointer-events:none}
.kicker{margin:0 0 14px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:10px;font-size:10px}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--cielo);box-shadow:0 0 10px var(--cielo)}
.hero-head h1{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(24px,min(2.6vw,5vh),42px);line-height:1.04;letter-spacing:-.025em}
.hero-head .line{display:block}
.hero-head em{font-style:normal;color:var(--cielo);pointer-events:auto}

.scroll-cue{position:absolute;right:var(--pad);bottom:clamp(26px,5vh,48px);z-index:10;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.5);text-decoration:none;font-size:10px;letter-spacing:.2em}
.scroll-cue i{position:relative;width:1px;height:46px;background:rgba(255,255,255,.18);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:#fff;animation:cue 2s var(--ease) infinite}
@keyframes cue{to{top:110%}}
.scroll-cue:hover{color:#fff}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:100;pointer-events:auto}
.intro.gone{pointer-events:none}
.intro.hidden{display:none}
.bar-top,.bar-bot{position:absolute;left:0;right:0;height:11vh;background:#000;z-index:3;transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
.bar-top{top:0}.bar-bot{bottom:0}
.intro.open .bar-top{transform:translateY(-100%)}
.intro.open .bar-bot{transform:translateY(100%)}
.logo-split{position:absolute;left:50%;top:50%;display:flex;align-items:center;transform:translate(-50%,-50%);z-index:4}
.lp{display:block;height:auto;will-change:transform,opacity,filter}
.lp-left,.lp-right{opacity:0;filter:blur(14px)}
.lp-left{transform:translateX(-50px)}
.lp-right{transform:translateX(50px)}
.lp-globe{opacity:0;transform:scale(.4) rotate(-90deg);filter:drop-shadow(0 0 0 rgba(39,170,225,0))}
.intro.s1 .lp-left,.intro.s1 .lp-right{opacity:1;filter:none;transform:none;transition:opacity 1.1s var(--ease),filter 1.1s var(--ease),transform 1.3s var(--ease)}
.intro.s1 .lp-right{transition-delay:.12s}
.intro.s1 .lp-globe{opacity:1;transform:none;filter:drop-shadow(0 0 24px rgba(39,170,225,.55));transition:opacity .8s .25s var(--ease),transform 1.4s .25s cubic-bezier(.2,1.4,.3,1),filter 1.4s .4s}
.intro-sub{position:absolute;left:0;right:0;top:calc(50% + 70px);text-align:center;z-index:4;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.5em;opacity:0;transition:opacity 1s,letter-spacing 2s var(--ease)}
.intro-sub i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cielo);vertical-align:middle;margin:0 14px}
.intro.s2 .intro-sub{opacity:1;letter-spacing:.32em}
.intro-tc{position:absolute;left:var(--pad);bottom:calc(11vh + 18px);z-index:4;color:rgba(255,255,255,.35);font-size:10px;letter-spacing:.16em;opacity:0;transition:opacity .6s}
.intro.s1 .intro-tc{opacity:1}
.skip{position:absolute;right:var(--pad);bottom:calc(11vh + 10px);z-index:5;border:0;background:none;color:rgba(255,255,255,.5);cursor:pointer;padding:10px 0;font-size:10px;letter-spacing:.16em;transition:color .2s,opacity .4s}
.skip:hover{color:#fff}
.intro.zoom .intro-sub,.intro.zoom .intro-tc,.intro.zoom .skip{opacity:0;transition:opacity .35s}

@media (max-width:860px){
  .hero-head{max-width:none;right:var(--pad);bottom:84px}
  .hero-head h1{font-size:clamp(24px,7vw,34px)}
  .scroll-cue{right:auto;left:var(--pad);bottom:26px}
  .scroll-cue i{height:30px}
  .intro-sub{top:calc(50% + 40px);font-size:9px}
}