/* Atualização 088 — Correção fina do Hero: artistas no rodapé, preview consistente e botão ouvir melhor posicionado */
:root{
  --hero-menu-safe:112px;
  --hero-artist-gap-top:14px;
  --hero-artist-bottom-base:0px;
  --hero-play-bottom:30%;
}

body.dupla-sertaneja-layout .hero,
body.dupla-sertaneja-layout .hero--duo-scroll{
  overflow:hidden!important;
  padding-top:0!important;
}

/* A camada dos artistas começa abaixo do menu e limita a altura real das fotos dentro desse espaço. */
body.dupla-sertaneja-layout .hero-duo-layer{
  top:calc(var(--hero-menu-safe) + var(--hero-artist-gap-top))!important;
  bottom:0!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  z-index:6!important;
}

body.dupla-sertaneja-layout .hero-duo-artist{
  top:auto!important;
  bottom:var(--hero-artist-bottom-base)!important;
  height:auto!important;
  width:auto!important;
  max-height:calc(100svh - var(--hero-menu-safe) - var(--hero-artist-gap-top) - 2px)!important;
  max-width:56vw!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform-origin:center bottom!important;
  will-change:transform!important;
}

/*
  Novo mapeamento do Y:
  100 = foto apoiada no rodapé do Hero;
  acima de 100 = desce mais;
  abaixo de 100 = sobe.
  Isso deixa o comportamento igual ao texto do painel e evita que a foto salte para o topo.
*/
body.dupla-sertaneja-layout .hero-duo-artist--left{
  left:var(--duo-left-x,32%)!important;
  bottom:clamp(-24vh,calc((100 - var(--duo-left-y-num,100)) * .62vh),22vh)!important;
  transform:translateX(calc(-150% + var(--gate-progress,1) * 100%)) scale(var(--duo-left-scale,1))!important;
}
body.dupla-sertaneja-layout .hero-duo-artist--right{
  left:var(--duo-right-x,68%)!important;
  bottom:clamp(-24vh,calc((100 - var(--duo-right-y-num,100)) * .62vh),22vh)!important;
  transform:translateX(calc(50% - var(--gate-progress,1) * 100%)) scale(var(--duo-right-scale,1))!important;
}
body:not(.gate-loader-active).dupla-sertaneja-layout .hero-duo-artist--left{
  transform:translateX(-50%) scale(var(--duo-left-scale,1))!important;
}
body:not(.gate-loader-active).dupla-sertaneja-layout .hero-duo-artist--right{
  transform:translateX(-50%) scale(var(--duo-right-scale,1))!important;
}

/* Botão ouvir: sai do rosto/peito e fica como CTA flutuante premium na parte baixa do Hero. */
body.dupla-sertaneja-layout .hero-new-music-play{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:var(--hero-play-bottom)!important;
  transform:translateX(-50%) translate3d(calc(var(--hero-mouse-x,0px) * .12),calc(var(--hero-mouse-y,0px) * .08),0)!important;
  z-index:12!important;
  min-height:58px!important;
  padding:10px 24px 10px 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(244,203,120,.42)!important;
  background:linear-gradient(180deg,rgba(50,34,12,.72),rgba(19,13,7,.66))!important;
  box-shadow:0 18px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(16px) saturate(1.05)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.05)!important;
  color:#f5deb0!important;
  letter-spacing:.18em!important;
}
body.dupla-sertaneja-layout .hero-new-music-play span{
  width:42px!important;height:42px!important;
  background:#fff6df!important;
  box-shadow:0 0 0 8px rgba(244,203,120,.10),0 10px 22px rgba(0,0,0,.25)!important;
}
body.dupla-sertaneja-layout .hero-new-music-play span:before{
  border-left-color:#211306!important;
}

/* Letreiro fica atrás dos artistas e abaixo do botão, sem brigar com o CTA. */
body.dupla-sertaneja-layout .hero-new-music{
  top:auto!important;
  bottom:22%!important;
  z-index:4!important;
}

@media(max-width:760px){
  :root{--hero-menu-safe:88px;--hero-artist-gap-top:10px;--hero-play-bottom:17%;}
  body.dupla-sertaneja-layout .hero-duo-layer{
    top:calc(var(--hero-menu-safe) + var(--hero-artist-gap-top))!important;
  }
  body.dupla-sertaneja-layout .hero-duo-artist{
    max-width:82vw!important;
    max-height:calc(100svh - var(--hero-menu-safe) - var(--hero-artist-gap-top))!important;
  }
  body.dupla-sertaneja-layout .hero-duo-artist--left{
    left:var(--duo-left-x-mobile,31%)!important;
    bottom:clamp(-20vh,calc((100 - var(--duo-left-y-mobile-num,100)) * .48vh),18vh)!important;
    transform:translateX(calc(-155% + var(--gate-progress,1) * 105%)) scale(var(--duo-left-scale-mobile,.82))!important;
  }
  body.dupla-sertaneja-layout .hero-duo-artist--right{
    left:var(--duo-right-x-mobile,69%)!important;
    bottom:clamp(-20vh,calc((100 - var(--duo-right-y-mobile-num,100)) * .48vh),18vh)!important;
    transform:translateX(calc(55% - var(--gate-progress,1) * 105%)) scale(var(--duo-right-scale-mobile,.82))!important;
  }
  body:not(.gate-loader-active).dupla-sertaneja-layout .hero-duo-artist--left{transform:translateX(-50%) scale(var(--duo-left-scale-mobile,.82))!important;}
  body:not(.gate-loader-active).dupla-sertaneja-layout .hero-duo-artist--right{transform:translateX(-50%) scale(var(--duo-right-scale-mobile,.82))!important;}
  body.dupla-sertaneja-layout .hero-new-music-play{
    min-height:50px!important;
    padding:8px 16px 8px 8px!important;
    font-size:10px!important;
    bottom:var(--hero-play-bottom)!important;
  }
  body.dupla-sertaneja-layout .hero-new-music-play span{width:36px!important;height:36px!important;}
  body.dupla-sertaneja-layout .hero-new-music{bottom:11%!important;}
}