/* Hero scroll-scrub (solo con html.scrub). El hero queda sticky y el wrapper aporta recorrido de scroll. */
.hero-scroll { position: relative; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; display: block; }
.hero__canvas[hidden] { display: none; }
html.scrub .hero-scroll { height: 230vh; }
html.scrub .hero { position: sticky; top: 0; min-height: 100svh; }
html.scrub .hero.is-seq .hero__bg { visibility: hidden; }
html.scrub .hero__title, html.scrub .hero__kicker, html.scrub .cd-unit b { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
html.scrub .hero__scrollhint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .9; pointer-events: none; }
html.scrub .hero__scrollhint i { width: 1px; height: 28px; background: linear-gradient(180deg, var(--accent), transparent); animation: scrollhint 1.6s ease-in-out infinite; }
@keyframes scrollhint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
html.scrub .hero.is-seq .hero__scrollhint { opacity: .9; }
.hero__scrollhint { display: none; }
@media (min-width: 1200px) { html.scrub .hero-scroll { height: 250vh; } }
@media (prefers-reduced-motion: reduce) { .hero__scrollhint i { animation: none; } }

/* ---------- Índice que se enciende ---------- */
.hero__jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; min-height: 40px; }
.jump { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(21,22,28,.72); color: var(--text); font-size: .875rem; font-weight: 600; text-decoration: none; opacity: .55; transition: opacity 260ms var(--ease, ease), border-color 260ms, color 260ms, box-shadow 260ms, transform 260ms; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.jump .ic--jump { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.jump:hover, .jump:focus-visible { opacity: 1; border-color: var(--muted); outline: none; }
.jump.is-on { opacity: 1; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px rgba(25,227,255,.35), 0 0 18px rgba(25,227,255,.25); animation: jumppop 260ms var(--ease, ease); }
.jump.is-on .ic--jump { fill: rgba(25,227,255,.25); }
@keyframes jumppop { 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
html:not(.scrub) .jump { opacity: 1; border-color: var(--accent); color: var(--accent); }
html.scrub .hero__scrollhint.is-done { opacity: 0; transition: opacity 300ms; }
section[id] { scroll-margin-top: 16px; }
@media (max-width: 767px) {
  .hero__jump { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .hero__jump::-webkit-scrollbar { display: none; }
  .jump { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .jump.is-on { animation: none; } }
@media (max-width: 767px) { html.scrub .hero__in { padding-bottom: 52px; } }