/* ==========================================================================
   NEXUS theme-final / assets/css/sections/header.css
   Cabeçalho fixo: wordmark + navegação + CTA, transparente no topo, ganha
   fundo com blur ao rolar (classe alternada por scroll, ver partials/
   header.js). Em telas estreitas vira botão de menu que abre navegação em
   tela cheia.

   Reaproveita .container / .container--wide de 02-base.css e .btn de
   03-ui.css. Só consome tokens de 01-tokens.css: nenhum hex, nenhum px de
   raio, nenhuma família de fonte literal. Motion: só transform e opacity
   animam; nada aqui transiciona width, height, top, left, margin, padding,
   filter, backdrop-filter, clip-path ou box-shadow (o blur ao rolar troca
   de valor de forma discreta, junto com a classe, nunca em transição).

   Ponto de quebra mobile/desktop: 880px, literal e compartilhado com o
   matchMedia de partials/header.js (não existe token de breakpoint no
   contrato para isto).

   EXCEÇÃO: a variante `html[data-nx-menu="capsula"]` (07-studio.css §19.2)
   estica essa janela até 1039,98px — o CTA colide com a cápsula entre 880 e
   1023px, limite físico da variante, não de preset. O portão fica todo em
   07-studio.css, gated por `[data-nx-menu="capsula"]`; nada aqui muda.

   Índice:
   1. Chassi fixo e estado ao rolar
   2. Barra: marca, navegação, ações
   3. Marca (wordmark inline em currentColor)
   4. Navegação de desktop
   4.1 Alternador de claro e escuro
   4.2 Seletor de idioma
   5. Botão de alternância (hambúrguer / fechar)
   6. Menu de tela cheia (mobile)
   7. Impressão
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Chassi fixo e estado ao rolar
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  background-color: transparent;
  border-block-end: var(--hairline) solid transparent;
  transition:
    background-color calc(var(--dur-base) * var(--motion)) var(--ease-out),
    border-color calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

/* Alfa 0.94, nao 0.82. A barra e a unica superficie fixed cujo fundo e a
   pagina inteira rolando: no modo claro o conteudo escuro que passa por baixo
   puxava o composto para rgb(209-211) enquanto a tinta ficava parada em
   rgb(107), e a navegacao primaria media 3,52:1 contra o piso de 4,5:1 do §8,
   em 18 ocorrencias. Tinta nenhuma resolve fundo que varia: quem resolve e a
   opacidade. 0.92 ainda reprova (4,47:1); 0.94 da 4,68:1 sobre o pior backdrop
   medido, e 4,68:1 tambem no escuro. Sobram 6% de translucidez: continua vidro,
   deixou de ser vidro que aposta. Mesma correcao ja aplicada em
   06-skin-glass.css, onde o defeito apareceu primeiro com o sinal trocado. */
.header--scrolled,
.header--menu-open {
  background-color: hsl(var(--background) / 0.94);
  border-block-end-color: hsl(var(--border));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* Sem suporte a backdrop-filter: cai para fundo quase opaco, sem o vidro,
   mantendo a mesma hierarquia de leitura. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header--scrolled,
  .header--menu-open {
    background-color: hsl(var(--background) / 0.97);
  }
}

/* --------------------------------------------------------------------------
   2. Barra: marca, navegação, ações
   -------------------------------------------------------------------------- */

.header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  block-size: var(--header-h);
}

/* --------------------------------------------------------------------------
   3. Marca (wordmark inline em currentColor)
   -------------------------------------------------------------------------- */

.header__brand {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  flex: none;
  color: hsl(var(--foreground));
  text-decoration: none;
  border-radius: var(--radius-sm);
}

/* A MEDIDA PASSA A SER A ALTURA, não a largura.

   O wordmark redesenhado (partials/header.js) tem proporção 495x120, ou seja
   4,125:1, contra 7,42:1 do traçado anterior. Continuar dimensionando pela
   largura faria a marca nova nascer com quase o dobro da altura da antiga na
   mesma barra. Altura é também o requisito que o dono escreveu ("precisa
   funcionar em 24px de altura"), e é o eixo em que uma marca convive com a
   navegação ao lado: a caixa alta do wordmark alinha com a altura de x do
   menu, não com uma largura arbitrária.

   1.375rem é 22px na escala de fábrica e acompanha --scale como todo o resto
   da tipografia. O clamp cobre de 20px a 26px entre 360px e 1900px de
   viewport, faixa em que a fresta do X (8 unidades de 120) mede de 1,3px a
   1,7px e continua sendo uma fresta, não um artefato. */
.header__mark {
  display: inline-flex;
  block-size: calc(clamp(1.25rem, 1.1rem + 0.42vw, 1.625rem) * var(--scale));
}

.header__mark svg {
  block-size: 100%;
  inline-size: auto;
  overflow: visible;
}

/* O EVENTO DA MARCA: os dois pedaços da diagonal partida do X se afastam ao
   longo do próprio eixo, e o braço inteiro cede um pouco na direção
   contrária. É o gesto do símbolo da marca (dois braços que passam um atrás
   do outro) tocado uma vez, em transform e nada mais.

   `transform-box: fill-box` para que a origem seja a caixa do próprio path e
   não o viewBox inteiro, senão a translação de um dos braços arrasta o
   sistema de coordenadas dos outros. */
.nx-wordmark__x {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

/* O deslocamento é ao longo do EIXO da diagonal, não na vertical: a direção
   do braço partido é (-58, +120), normalizada (-0,44 / +0,90). Seis unidades
   de grade em cada pedaço, convertidas em porcentagem da caixa de cada path
   (b1 mede 53x56, b2 mede 59x56), dão os quatro números abaixo. A fresta abre
   de 8 para cerca de 19 unidades, o que a 22px de altura é 3,5px: um gesto,
   não uma letra quebrada. A diagonal inteira (--a) fica parada de propósito,
   e é ela que segura o X no lugar enquanto a outra abre. */
.header__brand:hover .nx-wordmark__x--b1,
.header__brand:focus-visible .nx-wordmark__x--b1 {
  transform: translate3d(5%, -9.6%, 0);
}

.header__brand:hover .nx-wordmark__x--b2,
.header__brand:focus-visible .nx-wordmark__x--b2 {
  transform: translate3d(-4.4%, 9.6%, 0);
}

/* --------------------------------------------------------------------------
   4. Navegação de desktop
   -------------------------------------------------------------------------- */

.header__nav {
  display: none;
  min-inline-size: 0;
}

@media (min-width: 880px) {
  .header__nav {
    display: flex;
  }
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-5), 0.6rem + 1.4vw, var(--space-8));
}

.header__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-2);
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.header__nav-link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 100%;
  block-size: max(1px, 0.06em);
  background-color: hsl(var(--primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.header__nav-link:hover,
.header__nav-link:focus-visible {
  color: hsl(var(--foreground));
}

.header__nav-link:hover::after,
.header__nav-link:focus-visible::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.header__cta {
  display: none;
}

@media (min-width: 880px) {
  .header__cta {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   4.1 Alternador de claro e escuro

   Presente em TODAS as larguras e em todas as páginas, ao contrário do CTA
   (que só entra a partir de 880px) e do hambúrguer (que só existe abaixo
   disso): a escolha de modo é do visitante e não pode depender de abrir um
   menu. Mesma geometria do hambúrguer, para os dois lerem como um par quando
   aparecem lado a lado no mobile.

   Os dois glifos ficam empilhados no mesmo quadrado e trocam por opacidade e
   transform, nunca por display: é transição pontual em duas propriedades
   compostas (§6.0), e trocar display mataria a transição.
   -------------------------------------------------------------------------- */

.header__tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  border-radius: var(--radius-md);
  color: hsl(var(--foreground));
  background-color: transparent;
  transition: background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.header__tema:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.header__tema-icon {
  position: relative;
  display: inline-flex;
  inline-size: 1.25em;
  block-size: 1.25em;
}

.header__tema-glyph {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

/* No escuro (aria-pressed="true") mostra o SOL, porque o sol é o destino do
   clique. Botão de alternância nomeia a ação, não o estado corrente. */
.header__tema-glyph--sol {
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
}

.header__tema-glyph--lua {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.header__tema[aria-pressed="true"] .header__tema-glyph--sol {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.header__tema[aria-pressed="true"] .header__tema-glyph--lua {
  opacity: 0;
  transform: rotate(45deg) scale(0.7);
}

/* --------------------------------------------------------------------------
   4.2 Seletor de idioma

   O site existe em SEIS rotas: `/` em português, `/en` em inglês, `/es` em
   espanhol, `/de` em alemão, `/ru` em russo e `/zh` em chinês simplificado. O
   seletor é um botão só, colado ao alternador de claro e escuro, que abre uma
   lista com as seis. Ele existe em TODAS as larguras e em todas as páginas,
   pelo mesmo motivo do alternador de tema: escolher o idioma é do visitante e
   não pode depender de abrir um menu.

   POR QUE UM BOTÃO E NÃO SEIS LINKS NA BARRA. Já com três, três alvos de 44px
   somariam 132px ao lado do tema e do hambúrguer e o wordmark sairia da barra
   em 360px de viewport. Com seis a conta vira 264px e nem se discute. O botão
   custa um clique a mais e devolve a largura inteira.

   A FORMA CONTINUA SENDO UMA COLUNA SÓ, e isso foi reavaliado quando o menu
   passou de três para seis itens (06/08/2026). As duas alternativas foram
   consideradas e recusadas:

   - DUAS COLUNAS de três. A lista dobraria de largura, para cerca de 22rem, e
     ela é ancorada pelo FIM do botão, que vive no canto direito das ações: em
     360px de viewport a lista encostaria na borda esquerda da tela. Além
     disso, duas colunas quebram a relação entre a seta para baixo e o próximo
     item, que é justamente o teclado que este seletor já tem.
   - AGRUPAR POR REGIÃO ou por escrita, com cabeçalho de grupo. Seis itens não
     é uma lista longa; é uma lista média. Cabeçalho de grupo acrescentaria
     dois nós de leitura para o leitor de tela e nenhuma informação que o
     endônimo já não dê.

   O que a coluna única precisou ganhar foi TETO DE ALTURA COM ROLAGEM, e só
   isso: seis itens de 44px mais espaçamento e borda somam cerca de 19rem, o
   que cabe folgado num telefone em pé e NÃO cabe num telefone deitado (um
   iPhone SE em paisagem tem 320px de altura útil). Sem teto, os últimos itens
   ficariam abaixo da dobra, sem rolagem própria, e o visitante em chinês, que
   é o último da lista, seria o único que não conseguiria se escolher. Ver o
   bloco `.header__idioma-lista`.

   A LISTA ABERTA E A LISTA FECHADA são o mesmo nó: `visibility` mais
   `opacity` mais `transform`, a receita do menu de tela cheia do §6. Trocar
   `display` mataria a transição, e `visibility: hidden` é o que tira os seis
   links da ordem de tabulação e da árvore de acessibilidade sem JavaScript
   cronometrando nada.

   POSIÇÃO: ancorada ao botão, alinhada pelo fim (inset-inline-end: 0), porque
   o botão vive no canto das ações e uma lista alinhada pelo início vazaria
   para fora da viewport em tela estreita.
   -------------------------------------------------------------------------- */

.header__idioma {
  position: relative;
  display: inline-flex;
  flex: none;
}

.header__idioma-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  color: hsl(var(--foreground));
  background-color: transparent;
  transition: background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.header__idioma-toggle:hover,
.header__idioma.is-open .header__idioma-toggle {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.header__idioma-glifo {
  display: inline-flex;
  inline-size: 1.25em;
  block-size: 1.25em;
}

/* A sigla de duas letras ao lado do globo. É redundante com o glifo de
   propósito: o globo sozinho diz "idioma", e a sigla diz QUAL, sem exigir que
   a pessoa abra a lista para descobrir. Fica `aria-hidden` porque o nome
   acessível do botão já traz o idioma corrente por extenso. */
.header__idioma-atual {
  font-size: var(--fs-xs);
  font-weight: 700;
  /* A sigla é rótulo curto em caixa alta, o mesmo papel do texto monoespaçado
     do sistema, e usa o mesmo token de espaçamento por isso. Caixa alta sem
     abrir a letra vira mancha. */
  letter-spacing: var(--tracking-mono);
  line-height: 1;
}

/* Abaixo de 380px a barra fica apertada com wordmark, idioma, tema e
   hambúrguer. A sigla sai e sobra o globo, que continua sendo alvo de 44px e
   continua nomeado. */
@media (max-width: 379px) {
  .header__idioma-atual {
    display: none;
  }
}

.header__idioma-lista {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-1);
  min-inline-size: 12rem;

  /* TETO DE ALTURA COM ROLAGEM PRÓPRIA, desde que a lista passou de três para
     seis itens. A conta: o botão fica a cerca de 4rem do topo da viewport, a
     lista abre 0.5rem abaixo dele, e `svh` é a altura da viewport com as
     barras do navegador VISÍVEIS, que é o pior caso (dvh encolheria o teto
     junto com a barra e a lista pularia durante a rolagem; vh é proibido pelas
     regras da casa e mediria a viewport errada no celular).

     Nas alturas normais o teto nunca entra em ação: seis itens medem cerca de
     19rem e o teto só aperta abaixo de uns 26rem de viewport, que é telefone
     deitado. Quando aperta, a lista rola por dentro em vez de sair da tela.

     `overscroll-behavior: contain` impede que a rolagem, ao chegar ao fim da
     lista, continue na página atrás dela. */
  max-block-size: calc(100svh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;

  padding: var(--space-2);
  border: var(--hairline) solid hsl(var(--border));
  border-radius: var(--radius-md);
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -0.375rem, 0);
  transition:
    opacity calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    visibility 0s linear calc(var(--dur-fast) * var(--motion));
}

.header__idioma.is-open .header__idioma-lista {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    visibility 0s linear 0s;
}

.header__idioma-op {
  display: grid;
  grid-template-columns: 1.75rem 1fr 1rem;
  align-items: center;
  gap: var(--space-2);
  min-block-size: calc(var(--tap-min) * 0.8);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  color: hsl(var(--popover-foreground));
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

/* No dedo o alvo vai a 44px cheios (§7.5). No ponteiro fino a linha fica mais
   compacta, e é a mesma escada que 03-ui.css usa nos itens de lista. */
@media (pointer: coarse) {
  .header__idioma-op {
    min-block-size: var(--tap-min);
  }
}

.header__idioma-op:hover,
.header__idioma-op:focus-visible {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.header__idioma-sigla {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  color: hsl(var(--muted-foreground));
}

.header__idioma-op:hover .header__idioma-sigla,
.header__idioma-op:focus-visible .header__idioma-sigla {
  color: inherit;
}

/* O idioma corrente é marcado por um sinal de conferido, não só por cor: cor
   sozinha reprova no §8, e "qual está ativo" é justamente a informação que a
   lista precisa passar. O sinal ocupa a terceira coluna em todos os itens,
   então nada se desloca quando ele aparece. */
.header__idioma-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.header__idioma-op[aria-current="true"] {
  color: hsl(var(--primary));
}

.header__idioma-op[aria-current="true"] .header__idioma-marca {
  opacity: 1;
}

.header__idioma-op[aria-current="true"] .header__idioma-sigla {
  color: hsl(var(--primary));
}

/* --------------------------------------------------------------------------
   5. Botão de alternância (hambúrguer / fechar)
   -------------------------------------------------------------------------- */

.header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  border-radius: var(--radius-md);
  color: hsl(var(--foreground));
  background-color: transparent;
  transition: background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

@media (min-width: 880px) {
  .header__toggle {
    display: none;
  }
}

.header__toggle:hover {
  background-color: hsl(var(--accent));
}

.header__toggle-icon {
  position: relative;
  display: inline-flex;
  inline-size: 1.375em;
  block-size: 1.375em;
}

.header__toggle-glyph {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition:
    opacity calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.header__toggle-glyph--close {
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
}

.header__toggle[aria-expanded="true"] .header__toggle-glyph--menu {
  opacity: 0;
  transform: rotate(45deg) scale(0.7);
}

.header__toggle[aria-expanded="true"] .header__toggle-glyph--close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* --------------------------------------------------------------------------
   6. Menu de tela cheia (mobile)
   Fica sempre no DOM (nunca [hidden]): visibility + opacity resolvem a
   entrada/saída em transform e opacity só, e visibility remove o painel da
   ordem de tabulação e da árvore de acessibilidade quando fechado, sem
   precisar de JS cronometrando a troca de "display".
   -------------------------------------------------------------------------- */

.header__menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-block-size: 100svh;
  padding: calc(var(--header-h) + var(--space-8)) var(--gutter) var(--space-10);
  overflow-y: auto;
  background-color: hsl(var(--background) / 0.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -0.75rem, 0);
  transition:
    opacity calc(var(--dur-base) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out),
    visibility 0s linear calc(var(--dur-base) * var(--motion));
}

.header__menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--dur-base) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out),
    visibility 0s linear 0s;
}

@media (min-width: 880px) {
  .header__menu {
    display: none;
  }
}

.header__menu-nav {
  inline-size: 100%;
  max-inline-size: 24rem;
}

.header__menu-list {
  display: grid;
  gap: var(--space-2);
  text-align: center;
}

.header__menu-link {
  display: block;
  padding-block: var(--space-3);
  color: hsl(var(--foreground));
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
  transition: color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.header__menu-link:hover,
.header__menu-link:focus-visible {
  color: hsl(var(--primary));
}

.header__menu-cta {
  inline-size: 100%;
  max-inline-size: 24rem;
}

/* Paisagem de altura curta: aperta o ritmo vertical para o menu inteiro
   continuar visível sem depender de rolagem. */
@media (max-height: 560px) and (orientation: landscape) {
  .header__menu {
    justify-content: flex-start;
    gap: var(--space-4);
    padding-block: calc(var(--header-h) + var(--space-4)) var(--space-6);
  }

  .header__menu-link {
    padding-block: var(--space-2);
    font-size: var(--fs-lead);
  }
}

/* --------------------------------------------------------------------------
   7. Impressão
   -------------------------------------------------------------------------- */

@media print {
  .header {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. Cor, logo e respiro: os quatro controles novos do grupo Menu

   Pedido do dono (agosto de 2026): poder mudar a cor de fundo da barra, a
   cor da tinta dos links, o tamanho do wordmark e o respiro horizontal da
   barra. `core/theme.js` escreve --menu-bg, --menu-fg, --logo-scale e
   --menu-pad-x como custom property inline no <html>, e SÓ quando o valor
   difere do derivado. Tudo aqui é acréscimo: nenhuma regra acima foi
   reescrita.

   POR QUE TRÊS DELAS SÃO PORTEADAS POR `[style*="--…"]`, e não escritas
   soltas com fallback. Estas regras precisam de especificidade alta para
   vencer as peles (ver abaixo), e uma regra alta que valesse SEMPRE tomaria
   das peles um cabeçalho que hoje é delas. Nos três casos o custo é
   concreto:

   1. cor da barra: no estado derivado o fallback resolveria para
      `hsl(var(--background) / 0.94)`, que NÃO é o que as peles pintam. A
      barra de vidro é `--glass-header-fill` com o alfa dela; a de metal é
      `--surface-2` opaco. Sem o portão, a folha de seção passaria a ditar o
      preenchimento do cabeçalho nas quatro páginas sem ninguém ter pedido.
   2. tinta: `.header__nav-link` já tem hover, foco e um estado próprio na
      pele de superfície. Uma regra de `color` valendo sempre passaria a ser
      a tinta oficial do link em toda página, e o estado derivado deixaria
      de vir de quem hoje o define.
   3. respiro: `html[data-nx-menu="flutuante"] .header__bar` (07-studio.css)
      declara o próprio `padding-inline`. Uma regra solta aqui venceria por
      ordem e quebraria a variante flutuante mesmo com o respiro no valor de
      fábrica. Com o portão ela só vence quando o dono mexeu no respiro, que
      é a precedência certa: o controle explícito ganha do padrão da
      variante.

   O efeito comum dos três portões é o que interessa: no estado limpo
   nenhuma regra deste bloco casa com nada, a cascata é byte por byte a de
   antes, e as ~20 mil medições de contraste do §8 continuam medindo o mesmo
   estado. Medido em browserless: zero custom property inline no <html> e as
   mesmas medidas de cabeçalho nas quatro páginas.

   O `--logo-scale` é o único sem portão porque em 0.8 (fábrica de agosto de
   2026; era 1) ele reproduz byte a byte a declaração de `.header__mark`
   abaixo: não existe estado em que valer sempre mude alguma coisa. O
   fallback do `var()` tem que ser o MESMO número de `DEFAULTS.logoScale`
   (core/theme.js): sem inline (estado limpo), `knobs()` não escreve
   `--logo-scale` porque bate com `baseMap()`, e quem resolve é este
   fallback.

   POR QUE `html[data-theme]` NA FRENTE. As peles pintam o cabeçalho com
   seletores de especificidade alta, e elas carregam DEPOIS desta folha:
   `06-skin-glass.css` usa (0,2,1) e `09-skin-cult.css` usa (0,3,0). Um
   portão só com `[style*="…"]` empata ou perde, e o controle não sairia do
   lugar em index2 e index4. `data-theme` está sempre no <html> (o script
   inline do <head> o escreve antes do primeiro paint, e apply() o mantém),
   então ele não muda quando a regra vale: ele só paga o degrau de
   especificidade que faz o controle do dono vencer a pele. Nenhum
   `!important` entra aqui.
   -------------------------------------------------------------------------- */

/* 8.1 Fundo da barra rolada/aberta. Mesmo alfa 0.94 da regra de origem, pelo
   mesmo motivo medido lá em cima: quem resolve fundo que varia é a
   opacidade, não a tinta. */
html[data-theme][style*="--menu-bg"] header.header--scrolled,
html[data-theme][style*="--menu-bg"] header.header--menu-open {
  background-color: hsl(var(--menu-bg, var(--background)) / 0.94);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme][style*="--menu-bg"] header.header--scrolled,
  html[data-theme][style*="--menu-bg"] header.header--menu-open {
    background-color: hsl(var(--menu-bg, var(--background)) / 0.97);
  }
}

/* 8.2 Na pele de vidro acima de 768px quem pinta NÃO é a faixa, é a cápsula
   (`.header__bar`, 06-skin-glass.css §4.1): a faixa é transparente de
   propósito nesse regime. Pintar a faixa ali entregaria uma banda de borda a
   borda atrás de uma cápsula flutuante, que é justamente o que aquela pele
   desmontou. Então o alvo acompanha a superfície que existe. Só
   `background-color`: o brilho (`--glass-sheen`) e o desfoque continuam
   sendo da pele, e a folha da pele não é tocada. */
@media (min-width: 768px) {
  html[data-theme][style*="--menu-bg"][data-skin="glass"] header.header--scrolled,
  html[data-theme][style*="--menu-bg"][data-skin="glass"] header.header--menu-open {
    background-color: transparent;
  }

  html[data-theme][style*="--menu-bg"][data-skin="glass"] .header__bar {
    background-color: hsl(var(--menu-bg, var(--background)) / 0.94);
  }
}

/* 8.3 Tinta dos links. O par hover/foco é REDECLARADO logo abaixo, com um
   degrau a mais de especificidade, porque sem ele a regra de cima achataria
   os dois estados: o link ficaria na mesma tinta parado e sob o cursor, e a
   navegação perderia o retorno que ela tem hoje. O destino do hover continua
   sendo `--foreground`, o par de contraste mais alto do projeto. */
html[data-theme][style*="--menu-fg"] .header__nav-link {
  color: hsl(var(--menu-fg, var(--muted-foreground)));
}

html[data-theme][style*="--menu-fg"] .header__nav-link:hover,
html[data-theme][style*="--menu-fg"] .header__nav-link:focus-visible {
  color: hsl(var(--foreground));
}

/* 8.4 Tamanho do wordmark. A medida continua sendo a ALTURA e continua
   acompanhando `--scale`: o multiplicador entra como terceiro fator, sem
   tocar no clamp que calibra a fresta do X. */
.header__mark {
  block-size: calc(
    clamp(1.25rem, 1.1rem + 0.42vw, 1.625rem) * var(--scale) * var(--logo-scale, 0.8)
  );
}

/* 8.5 Respiro horizontal do conteúdo da barra. A base é `--gutter`, que é o
   mesmo `padding-inline` que `.container` dá a ela em 02-base.css: o
   controle multiplica o respiro do site, não inventa um valor próprio. */
html[data-theme][style*="--menu-pad-x"] .header__bar {
  padding-inline: calc(var(--gutter) * var(--menu-pad-x, 1));
}