/* 054 — cola o fim do Hero à faixa rotativa no desktop
   Mantém o mobile da 052/053 intacto. A faixa só entra depois que a
   rolagem do Hero termina, sem criar o vão visual entre os blocos. */

@media (min-width: 769px) {
  main > .hero-stage {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    line-height: normal !important;
  }

  main > .hero-stage > .hero {
    margin: 0 !important;
    border: 0 !important;
  }

  /* Quando existe vídeo/scrub no Hero, o palco mantém o tempo de rolagem.
     A próxima seção começa exatamente no final desse palco. */
  main > .hero-stage.has-scroll-video,
  main > .hero-stage.hero-stage--flush-marquee {
    height: var(--hero-stage-height, 265svh) !important;
    min-height: var(--hero-stage-height, 265svh) !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  main > .hero-stage.has-scroll-video > .hero,
  main > .hero-stage.hero-stage--flush-marquee > .hero {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
  }

  /* Remove o indicador antigo do rodapé do Hero, que podia dar sensação de
     “respiro”/vão antes da faixa. */
  main > .hero-stage::after {
    display: none !important;
  }

  /* Cola visualmente a faixa ao final do Hero. O -1px evita linha/vão causado
     por arredondamento de viewport, sem adiantar a faixa durante o vídeo. */
  main > .hero-stage + .marquee {
    clear: both !important;
    margin-top: -1px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 8 !important;
  }

  main > .hero-stage + .marquee,
  main > .hero-stage + .marquee .marquee-track,
  main > .hero-stage + .marquee .marquee-group {
    will-change: transform;
    backface-visibility: hidden;
  }

  main > .hero-stage + .marquee + .music.section {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  /* Não mexer no mobile: mantém exatamente o comportamento já aprovado. */
  main > .hero-stage + .marquee {
    margin-top: 0 !important;
  }
}