/* ── HERO WRAPPER — crea el espacio de scroll mientras #hero queda sticky ──── */
#hero-wrapper {
  position: relative;
  height: 350vh;
}

/* ── HERO — sticky durante todo el scroll del wrapper ───────────────────── */
#hero {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}