/* Héroe: la balanza en equilibrio (solo index) */

.hero{height:620vh;position:relative;z-index:1}
.hero-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
#balanza{
  position:absolute;left:50%;top:50%;
  width:min(62vh,86vw);height:min(62vh,86vw);
  transform:translate(-50%,-47%);
  overflow:visible;
}
#balanza .draw{stroke-dasharray:4000;stroke-dashoffset:4000}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(7,13,24,0) 38%,rgba(7,13,24,.6) 100%);
}

/* Bandas de texto */
.band{
  position:absolute;z-index:3;max-width:min(38ch,42vw);
  opacity:0;text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-14% -10%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 90% 80% at 50% 50%,rgba(6,11,20,.6) 0%,rgba(6,11,20,.38) 46%,rgba(6,11,20,0) 76%);
}
.band .kicker{display:block;margin-bottom:1rem}
.band h2,.band .h1{
  font-family:var(--font-display);font-weight:600;line-height:1.12;
  font-size:clamp(1.7rem,3.4vw,2.9rem);
  color:var(--text-primary);margin-top:0;
}
.band p{margin-top:1rem;color:var(--text-secondary);font-size:clamp(.98rem,1.3vw,1.12rem)}
.b-left{left:clamp(1.5rem,6vw,7rem);top:50%;transform:translateY(-50%)}
.b-right{right:clamp(1.5rem,6vw,7rem);top:50%;transform:translateY(-50%);text-align:right}
.b-right::before{inset:-14% -10%}

.band-settle{
  left:50%;top:11%;transform:translateX(-50%);
  text-align:center;max-width:min(64ch,88vw);
}
.band-settle .h1{font-size:clamp(2.3rem,5vw,4rem);font-weight:700}
.band-settle p{max-width:56ch;margin-left:auto;margin-right:auto}
.band-settle .cta-row{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.7rem;
}

/* Palabras y caracteres coreografiados */
.band .w{display:inline-block;white-space:pre}
.band .c{display:inline-block;white-space:pre}

/* blur-to-sharp: dos copias apiladas */
.blur-stack{position:relative;display:block}
.blur-stack .soft{
  position:absolute;inset:0;filter:blur(10px);
  opacity:calc(1 - var(--k,0));
}
.blur-stack .sharp{opacity:var(--k,0)}

/* drift-down */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-24px));
}

/* scatter (caracteres) */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
           rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}

/* grid snap-align (caracteres, orden de lectura) */
.e-grid .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}

/* rise escalonado del cierre */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*30px));
}
.band-settle .sub{--ks:clamp(0,(var(--k,0) - .58)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*18px))}
.band-settle .cta-row{--kb:clamp(0,(var(--k,0) - .74)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.band-settle .kicker{--kk:clamp(0,var(--k,0)*2.4,1);opacity:var(--kk)}

/* Indicador de scroll */
.scroll-cue{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-secondary);
  transition:opacity .5s var(--ease-soft);
}
.scroll-cue::after{
  content:"";width:1px;height:44px;
  background:linear-gradient(180deg,var(--accent),transparent);
  animation:cue 2.6s var(--ease-soft) -1.2s infinite;
}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(1);opacity:0}}
.hero.past .scroll-cue{opacity:0}

/* Copy estático (móvil / reduced motion) */
.hero-static{
  display:none;position:relative;z-index:3;
  flex-direction:column;align-items:center;text-align:center;
  padding:8.5rem 1.5rem 4rem;gap:1.2rem;
}
.hero-static .h1{
  font-family:var(--font-display);font-weight:700;line-height:1.1;
  font-size:clamp(2.2rem,8.5vw,3.4rem);text-shadow:var(--tshadow);
}
.hero-static p{color:var(--text-secondary);max-width:34ch;font-size:1.05rem;text-shadow:var(--tshadow)}
.hero-static .cta-row{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:.8rem}

/* ===== LAS CINCO PUERTAS (idénticas en JS) ===== */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .hero-stage{
    position:relative;height:auto;min-height:100vh;
    flex-direction:column;justify-content:flex-start;
  }
  #balanza{
    position:relative;left:auto;top:auto;transform:none;
    width:min(52vh,80vw);height:min(52vh,80vw);
    margin:-1.5rem auto 2rem;
  }
  #balanza .draw{stroke-dashoffset:0!important}
  #balanza [data-static-hide]{display:none}
  .band,.scroll-cue{display:none}
  .hero-static{display:flex}
}

/* Pantalla de escritorio corta: se mantiene el scrub, se ocultan adornos */
@media (max-height:560px) and (min-width:721px){
  .scroll-cue{display:none}
}