/* Topo 3D: o calçadão de Copacabana. A rolagem anda pela orla e o dia vira pôr do sol. */
.trilho3d{height:220vh;position:relative}
.palco3d{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(#2E9BD6 0%,#FFE2A6 42%,#FFC078 52%,#E8CF9C 52%,#cdb486 100%)}
.palco3d.sem3d{background:url(../img/fundo-mesa-de-bar.jpg) center/cover}
#cena{position:absolute;inset:0;width:100%;height:100%;display:block}
.palco3d::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 120% at 0% 100%,rgba(27,16,48,.9) 0%,rgba(27,16,48,.62) 34%,rgba(27,16,48,0) 64%),linear-gradient(rgba(27,16,48,.25),rgba(27,16,48,0) 22%)}
.chamada3d{position:absolute;z-index:2;left:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));right:var(--pad);bottom:clamp(64px,11vh,120px);max-width:900px;will-change:transform,opacity}
.chamada3d h1{color:var(--creme);font-size:clamp(44px,min(6vw,11vh),88px);line-height:1.02;margin:0;text-shadow:0 4px 30px rgba(27,16,48,.4)}
.chamada3d h1 .marca{text-shadow:none}
.role3d{position:absolute;z-index:2;right:100px;bottom:36px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--creme);text-shadow:0 1px 10px rgba(27,16,48,.7)}
.onda3d{display:block;width:100%;height:clamp(40px,6vw,84px);margin-top:calc(-1*clamp(40px,6vw,84px) + 1px);position:relative;z-index:3}
@media(max-width:760px){
  .trilho3d{height:190vh}
  .palco3d::after{background:linear-gradient(rgba(27,16,48,.25),rgba(27,16,48,0) 20%,rgba(27,16,48,0) 36%,rgba(27,16,48,.74) 62%,rgba(27,16,48,.86))}
  .chamada3d{left:var(--pad);bottom:84px}
  .chamada3d h1{font-size:clamp(38px,10.5vw,52px)}
  .role3d{left:var(--pad);right:auto;bottom:40px}
}
/* página em inglês: passeio um pouco mais curto e título em 4 linhas */
html[lang="en"] .trilho3d{height:190vh}
html[lang="en"] .chamada3d h1{font-size:clamp(40px,min(5.4vw,10vh),78px)}
@media(max-width:760px){html[lang="en"] .trilho3d{height:170vh} html[lang="en"] .chamada3d h1{font-size:clamp(36px,10vw,48px)}}
/* cabeçalho quase opaco nas páginas com 3D: com fundo 100% opaco, alguns navegadores deixam de pintar a base da cena */
.top{background:rgba(255,249,238,.97)}