/* A própria composição da hero continua atrás do vidro. Sem cópias de imagens. */
:root {
  --header-brand-width: 86px;
  --header-block-padding: 10px;
  --header-min-height: 88px;
  --header-art-height: calc(max(var(--header-min-height), calc(var(--header-brand-width) * 129 / 160 + var(--header-block-padding) * 2)) + 1px);
  --hero-art-height: clamp(335px, 100vw, 485px);
}
.site-header {
  background: linear-gradient(180deg, rgb(9 9 8 / 64%), rgb(8 8 7 / 70%));
  -webkit-backdrop-filter: blur(2.5px) saturate(105%);
  backdrop-filter: blur(2.5px) saturate(105%);
  border-bottom-color: rgb(221 187 105 / 12%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%);
}
.site-header::before {
  background:
    radial-gradient(ellipse 25% 80% at 50% 45%, rgb(0 0 0 / 32%), transparent 100%),
    linear-gradient(118deg, transparent 12%, rgb(255 255 255 / 4%) 27%, transparent 48%);
}
.site-header::after { opacity: .25; }
.site-header__inner { height: calc(var(--header-art-height) - 1px); min-height: 0; padding-block: var(--header-block-padding); }
.brand img { width: var(--header-brand-width); filter: drop-shadow(0 1px 3px rgb(0 0 0 / 75%)); }

/* A altura extra cancela a sobreposição, preservando rosto, texto e CTA. */
.hero { margin-top: calc(var(--header-art-height) * -1); padding-top: var(--header-art-height); }
.hero__visual { height: var(--hero-art-height); }
.hero__scene { position: absolute; inset: calc(var(--header-art-height) * -1) 0 0; overflow: hidden; }
.hero__composition { position: absolute; top: var(--header-art-height); left: 0; width: 100%; height: var(--hero-art-height); overflow: visible; container-type: inline-size; }
.hero__composition::before { content: ""; position: absolute; top: calc(var(--header-art-height) * -1); left: 0; right: 0; height: var(--header-art-height); background: radial-gradient(ellipse at 54% 100%, #3b2b13, #080807 65%); }

/* Foto única com céu: a margem superior preenche o vidro até a diagonal. */
.facet--rio {
  --rio-render-width: 56cqw;
  --rio-head-top: calc(var(--hero-art-height) * .1);
  clip-path: polygon(0 -100%, 84% -100%, 24.8% 41%, 0 58%);
}
.facet--rio img {
  left: 0;
  top: calc(var(--rio-head-top) - var(--rio-render-width) * .635);
  width: var(--rio-render-width);
  height: auto;
  max-width: none;
  filter: saturate(.78) brightness(.82);
}
.facet--lente {
  top: calc(var(--header-art-height) * -1);
  clip-path: polygon(24% calc(var(--header-art-height) - var(--hero-art-height)), 100% calc(var(--header-art-height) - var(--hero-art-height)), 100% calc(var(--header-art-height) + var(--hero-art-height) * .57), 78% calc(var(--header-art-height) + var(--hero-art-height) * .42));
}
.facet--lente img { top: calc(var(--header-art-height) + var(--hero-art-height) * .02); height: calc(var(--hero-art-height) * .49); }
.facet--lente::before { top: calc(var(--header-art-height) - var(--hero-art-height) * .08); height: calc(var(--hero-art-height) * .64); }
.facet--lente::after { top: var(--header-art-height); }
@media (max-width: 359px) { :root { --header-brand-width: 77px; } }
@media (max-width: 539px) {
  .facet--rio { --rio-head-top: calc(var(--hero-art-height) * .04); clip-path: polygon(0 -100%, 84% -100%, 30.66% 27%, 0 40%); }
  .facet--lente { clip-path: polygon(24% calc(var(--header-art-height) - var(--hero-art-height)), 100% calc(var(--header-art-height) - var(--hero-art-height)), 100% calc(var(--header-art-height) + var(--hero-art-height) * .40), 72.64% calc(var(--header-art-height) + var(--hero-art-height) * .28)); }
  .facet--lente img { top: calc(var(--header-art-height) - var(--hero-art-height) * .01); height: auto; }
}
@media (min-width: 540px) { :root { --hero-art-height: 540px; } }
@media (min-width: 768px) { :root { --header-brand-width: 108px; --header-block-padding: 9px; --header-min-height: 103px; } }
@media (min-width: 1100px) {
  :root { --hero-art-height: 568px; }
}
@media (min-width: 768px) and (max-height: 800px) { :root { --hero-art-height: 460px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgb(8 8 7 / 82%); }
}