/* Interactive layer — Empleo Joven */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--teal),var(--violet));
  box-shadow:0 0 16px rgba(46,196,214,.45);
  pointer-events:none;
}
.cursor-glow{
  position:fixed;width:280px;height:280px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(46,196,214,.12),rgba(139,108,255,.08) 45%,transparent 70%);
  transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:0;transition:opacity .3s ease;
}
@media (hover:hover) and (pointer:fine){
  body.has-pointer .cursor-glow{opacity:1}
}

.nav-links a.is-active{color:#fff}
.nav-links a.is-active:not(.btn){
  background:rgba(46,196,214,.12);padding:.35rem .7rem;border-radius:999px;
}

.btn{position:relative;overflow:hidden;isolation:isolate}
.btn .ripple{
  position:absolute;border-radius:50%;transform:scale(0);
  background:rgba(255,255,255,.35);pointer-events:none;
  animation:ripple .55s ease-out forwards;
}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

.hero-media{transform:scale(1.08);will-change:transform}
.hero-copy{will-change:transform,opacity}
.hero.ready .hero-copy{animation:heroIn .9s cubic-bezier(.2,.9,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

.stat b .num{font-variant-numeric:tabular-nums}
.stat.in b{animation:statPop .5s cubic-bezier(.2,1.2,.3,1) both}
@keyframes statPop{from{transform:scale(.92);opacity:.5}to{transform:none;opacity:1}}

.tilt{
  transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  --rx:0deg;--ry:0deg;--mx:50%;--my:50%;
}
.tilt:hover{
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
  border-color:rgba(46,196,214,.35);
}
.tilt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.1),transparent 45%);
  opacity:0;transition:opacity .25s ease;
}
.tilt:hover::after{opacity:1}
.axis,.opp,.person,.study,.ally,.path,.mv article,.project{position:relative}

.axis{cursor:pointer;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.axis.is-open{
  border-color:rgba(46,196,214,.45);
  box-shadow:0 18px 50px rgba(0,0,0,.25),inset 0 0 0 1px rgba(46,196,214,.15);
}
.axis .axis-extra{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .4s ease,opacity .3s ease,margin .3s ease;
  color:rgba(244,241,251,.78);font-size:.9rem;margin:0;
}
.axis.is-open .axis-extra{max-height:120px;opacity:1;margin-top:.85rem}
.axis .axis-hint{display:block;margin-top:.9rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(46,196,214,.75)}
.axis.is-open .axis-hint{color:var(--teal)}

.person{cursor:pointer}
.person .person-more{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .4s ease,opacity .3s ease,margin .3s ease;
  color:var(--muted);font-size:.8rem;margin:0;
}
.person.is-open{
  border-color:rgba(139,108,255,.45);
  background:linear-gradient(180deg,rgba(139,108,255,.1),rgba(255,255,255,.03));
}
.person.is-open .person-more{max-height:140px;opacity:1;margin-top:.65rem}
.person-photo img{transition:transform .5s ease}
.person:hover .person-photo img,.person.is-open .person-photo img{transform:scale(1.06)}

.marquee-wrap{
  margin-top:1.75rem;overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.9rem 0;
}
.marquee{
  display:flex;gap:2rem;width:max-content;
  animation:marquee 28s linear infinite;
  font-weight:700;font-size:.92rem;letter-spacing:.02em;color:rgba(244,241,251,.7);
}
.marquee span{white-space:nowrap;opacity:.85}
.marquee span:after{content:"·";margin-left:2rem;color:var(--teal);opacity:.7}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.strat{transition:transform .2s ease,background .2s ease,padding .2s ease,border-radius .2s ease}
.strat:hover{transform:translateX(6px);background:rgba(46,196,214,.06);padding-left:.6rem;border-radius:12px}

.dock{
  position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%) translateY(120%);
  z-index:45;display:flex;gap:.55rem;padding:.55rem;
  background:rgba(8,10,18,.82);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:999px;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(.2,.9,.2,1);
}
.dock.show{transform:translateX(-50%) translateY(0)}
.dock .btn{min-height:42px;padding:.65rem 1rem;font-size:.85rem;white-space:nowrap}
@media (min-width:981px){
  .dock{display:none}
}

.reveal-stagger > *:nth-child(1){transition-delay:.05s}
.reveal-stagger > *:nth-child(2){transition-delay:.12s}
.reveal-stagger > *:nth-child(3){transition-delay:.19s}
.reveal-stagger > *:nth-child(4){transition-delay:.26s}
.reveal-stagger > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger > *{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
.reveal-stagger.is-animating > *{opacity:0;transform:translateY(18px)}
.reveal-stagger.is-animating.in > *{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .cursor-glow,.scroll-progress,.marquee,.hero-media,.tilt:hover,.btn .ripple{display:none!important}
  .dock{transform:translateX(-50%) translateY(0)}
  .reveal-stagger > *,.reveal-stagger.is-animating > *{opacity:1;transform:none}
}