/* Nada aqui alcanca fora de .bl-cabecalho. */
.bl-cabecalho {
  position: sticky; top: 0; z-index: 50;
  /* Duas declaracoes de proposito: onde color-mix() nao existe, a segunda
     linha e descartada e sobra fundo SOLIDO. Sem o fallback, a barra fixa
     ficaria transparente e o texto dela leria por cima do que rola — falha
     total em vez de degradacao. Mesma disciplina do backdrop-filter abaixo,
     que sem suporte apenas deixa de borrar. */
  background: var(--bl-fundo);
  background: color-mix(in srgb, var(--bl-fundo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bl-borda);
}
.bl-cabecalho__barra {
  display: flex; align-items: center; gap: var(--bl-e4);
  min-height: 72px; flex-wrap: wrap;
}
.bl-cabecalho__marca { display: block; margin-right: auto; }
.bl-cabecalho__marca img { width: 168px; height: auto; }
.bl-cabecalho__nav { display: flex; gap: var(--bl-e4); }
.bl-cabecalho__nav a {
  /* 40px cabe inteiro na barra de 72px: o cabecalho nao cresce um pixel. */
  display: inline-flex; align-items: center; min-height: 2.5rem;
  font-size: .9375rem; font-weight: 400; text-decoration: none;
  color: var(--bl-texto-fraco); transition: color .15s ease;
}
@media (hover: hover) {
  .bl-cabecalho__nav a:hover { color: var(--bl-texto); }
}
.bl-cabecalho__nav a:active { color: var(--bl-texto); }
.bl-cabecalho__wa { padding: .7em 1.2em; font-size: .9375rem; }
/* A nav sumia abaixo de 900px sem substituto nenhum — nem hamburguer, nem
   aria-expanded, nem menu alternativo. Em vez de esconder, ela desce para a
   propria linha e vira indice em monoespacada: quatro destinos curtos cabem
   em 375px, e o registro da pagina comeca ja no cabecalho. */
@media (max-width: 900px) {
  .bl-cabecalho__barra {
    min-height: 56px; gap: var(--bl-e3); row-gap: 0; padding-bottom: .45rem;
  }
  .bl-cabecalho__nav {
    order: 3; flex-basis: 100%; gap: var(--bl-e3);
    font-family: var(--bl-fonte-mono); overflow-x: auto;
  }
  .bl-cabecalho__nav a {
    /* 32 e nao 44 de proposito: aqui a nav esta em linha propria, entao
       cada pixel vai direto para a altura de um cabecalho sticky, e 44
       comeria 12% de uma tela de 667px. 32 passa o piso de 24 com folga. */
    min-height: 2rem;
    font-size: .6875rem; white-space: nowrap; letter-spacing: .02em;
  }
}
@media (max-width: 520px) {
  .bl-cabecalho__wa { padding: .7em 1em; }
  .bl-cabecalho__marca img { width: 132px; }
}