/*
  Header global FIXO. Transparente sobre o hero; ao passar de 60% do scroll
  do hero, ganha fundo terra-escura — a classe .is-scrolled é alternada pelo
  header.js (progresso do scroll dentro do hero, mesmo cálculo do scrub do
  vídeo). A barra interna (.hero__bar e filhos) reaproveita os estilos
  definidos em hero.css.
*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color var(--t);
}

.site-header.is-scrolled {
  background-color: var(--color-terra-mais-escura-bg);
}

/* Transições suaves ao compactar o header na 2ª versão */
.site-header .hero__bar {
  transition: padding var(--t);
}
.site-header .hero__logo {
  transition: opacity var(--t), height var(--t);
}

/* 2ª versão (scrolled): header mais baixo e logo menor */
.site-header.is-scrolled .hero__bar {
  padding-block: var(--sp-4);
}
.site-header.is-scrolled .hero__logo {
  height: 20px;
}

/* Itens do menu um degrau abaixo do ui-centi (0.75rem) — não há passo menor
   na escala, então usa-se o mesmo micro-tamanho do rodapé. */
.site-header .text-ui-centi,
.site-header .hero__lang-sep {
  font-size: 0.625rem;
}