/* Planeta vivo + microinteracciones. Sin estilos en linea: compatible con la CSP. */
.hero-section > .wrap, .page-hero > *:not(.planet), .agents-hero > *:not(.planet) { position: relative; z-index: 1; }
.planet {
  position: absolute; z-index: 0; pointer-events: none;
  right: -18%; top: -6%; width: min(860px, 120vw); aspect-ratio: 1;
  opacity: .75;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
@media (max-width: 699px) {
  .planet { right: -32%; top: 6%; width: 125vw; opacity: .8; }
}
.spot { position: relative; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(79, 216, 255, .14), transparent 60%);
  opacity: 0; transition: opacity .25s ease;
}
.spot.lit::before { opacity: 1; }
html.js .planet-reveal { opacity: 0; translate: 0 14px; transition: opacity .6s ease, translate .6s ease; }
html.js .planet-reveal.in { opacity: 1; translate: 0 0; }
html.js .planet-reveal:nth-child(2) { transition-delay: .06s; }
html.js .planet-reveal:nth-child(3) { transition-delay: .12s; }
html.js .planet-reveal:nth-child(4) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  html.js .planet-reveal { opacity: 1; translate: 0 0; transition: none; }
  .spot::before { transition: none; }
}
html.scroll-lock { overflow: hidden; }

/* Heroes de paginas internas: el planeta vive detras del titulo */
.page-hero, .agents-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero > *:not(.planet), .agents-hero > *:not(.planet) { position: relative; z-index: 1; }
.page-hero .planet, .agents-hero .planet { position: absolute; z-index: 0; right: -22%; top: -40%; width: min(720px, 110vw); opacity: .55; }
@media (max-width: 699px) {
  .page-hero .planet, .agents-hero .planet { right: -38%; top: -18%; width: 130vw; opacity: .6; }
}

/* Mantén título y planeta juntos en la primera vista de las páginas internas. */
.page-hero {
  min-height: max(520px, calc(100svh - var(--nav-h)));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(44px, 7vh, 84px);
}
.page-hero > :not(.planet) {
  position: relative;
  z-index: 1;
  max-width: min(660px, 60%);
}
.page-hero h1 {
  max-width: 100%;
  font-size: clamp(2.7rem, 5.8vw, 4.9rem);
  line-height: 1.02;
}
.page-hero .lede { max-width: 58ch; }
.page-hero .planet {
  top: 50%;
  right: -4%;
  width: min(44vw, 560px);
  height: min(44vw, 560px);
  transform: translateY(-50%);
  opacity: .62;
}

/* Agentes tiene un hero independiente; aplícale el mismo encuadre y planeta. */
.agents-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(520px, calc(100svh - var(--nav-h)));
  padding: clamp(44px, 7vh, 84px) max(16px, calc((100% - var(--max)) / 2));
  overflow: hidden;
  isolation: isolate;
}
.agents-hero > :not(.planet) {
  position: relative;
  z-index: 1;
}
.agents-hero .agents-shell { width: min(100%, var(--max)); }
.agents-hero h1,
.agents-hero p,
.agents-hero .hero-links,
.agents-hero .agents-signal {
  max-width: min(660px, 60%);
}
.agents-hero h1 {
  font-size: clamp(2.7rem, 5.8vw, 4.9rem);
  line-height: 1.02;
}
.agents-hero .planet {
  top: 50%;
  right: -4%;
  width: min(44vw, 560px);
  height: min(44vw, 560px);
  transform: translateY(-50%);
  opacity: .62;
}

@media (max-width: 767px) {
  .page-hero {
    min-height: max(500px, calc(100svh - var(--nav-h)));
    padding-block: clamp(40px, 7vh, 64px);
  }
  .page-hero > :not(.planet) { max-width: 100%; }
  .page-hero h1 { font-size: clamp(2.55rem, 12vw, 3.65rem); }
  .page-hero .planet {
    top: auto;
    right: -25%;
    bottom: -20%;
    width: min(100vw, 410px);
    height: min(100vw, 410px);
    transform: none;
    opacity: .25;
  }
  .agents-hero {
    min-height: max(540px, calc(100svh - var(--nav-h)));
    padding: clamp(44px, 7vh, 68px) 16px;
  }
  .agents-hero h1,
  .agents-hero p,
  .agents-hero .hero-links,
  .agents-hero .agents-signal { max-width: 100%; }
  .agents-hero h1 { font-size: clamp(2.55rem, 12vw, 3.65rem); }
  .agents-hero .planet {
    top: auto;
    right: -25%;
    bottom: -18%;
    width: min(100vw, 410px);
    height: min(100vw, 410px);
    transform: none;
    opacity: .22;
  }
}