/* AUTOGENERATED por scripts/build-chrome.js — não edite este arquivo.
   A fonte é SITE_HEADER_CSS em functions/_lib/siteChrome.js. */

/* A altura da barra é a referência de tudo que precisa ficar abaixo dela
   (offset do body, hero da landing, faixa de abas do cardápio, bloco "DESDE
   2019" do portal). Muda aqui, muda em todo lugar. */
:root { --sh-altura: 68px; }

/* ⚠ nowrap em TODA a cadeia: a barra em duas linhas no celular foi o bug de
   ago/2026. Em vez de esconder link (ou virar menu hambúrguer), tipografia,
   gaps e paddings encolhem junto com a tela via clamp() — a régua do meio é
   em vw, então a adaptação é contínua de 320px a 1440px, sem depender de
   breakpoint por aparelho. */
.sh {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap;
  gap: clamp(5px, 1.6vw, 16px);
  /* vertical também em clamp: no desktop volta aos 14px originais (a barra
     tinha encolhido 8px sem necessidade); no celular aperta pra 8px. */
  padding: clamp(8px, 1.6vw, 14px) clamp(8px, 3vw, 32px);
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background 220ms ease, border-color 220ms ease;
}
.sh[data-transparent="true"]:not(.sh--scrolled) {
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.sh-offset { padding-top: var(--sh-altura); }

.sh-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.sh-brand img { height: clamp(20px, 5.4vw, 30px); width: auto; display: block; filter: invert(1); }

.sh-nav {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: clamp(6px, 2vw, 22px);
  min-width: 0;
}
.sh-nav a {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(8px, 2.3vw, 11px);
  letter-spacing: clamp(0.01em, 0.22vw, 0.22em);
  text-transform: uppercase;
  color: var(--bone); opacity: 0.7; text-decoration: none;
  white-space: nowrap;
  /* Aumenta a área de toque na vertical (o header tem 44px de altura no
     celular) sem custar um pixel de largura, que é o recurso escasso aqui. */
  padding: 6px 0;
  transition: opacity 180ms ease, color 180ms ease;
}
.sh-nav a:hover { opacity: 1; color: var(--surreal-red); }
.sh-nav a[aria-current="page"] { opacity: 1; color: var(--bone); border-bottom: 1px solid var(--surreal-red); }

.sh-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(5px, 1.5vw, 10px); flex-shrink: 0; }
.sh-cta {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(8px, 2.3vw, 11px);
  letter-spacing: clamp(0.01em, 0.22vw, 0.22em);
  text-transform: uppercase; color: var(--bone);
  background: var(--surreal-red);
  padding: clamp(7px, 1.9vw, 10px) clamp(9px, 2.8vw, 18px);
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: filter 180ms ease;
}
.sh-cta:hover { filter: brightness(1.1); }

/* Faixa de idioma — linha PRÓPRIA, abaixo da barra do topo.
   Ficava dentro da barra até ago/2026 e era o que truncava a navegação em
   inglês e espanhol, onde os rótulos são mais longos. O visual segue o mesmo
   conceito do seletor do blog e da /reviews (pílulas com o nome do idioma por
   extenso), pra as três páginas parecerem o mesmo sistema.
   ⚠ É só apresentação: a lógica de idioma (localStorage/?lang=) não muda. */
.sh-langbar {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: nowrap; gap: clamp(4px, 1.4vw, 8px);
}
.sh-langbar button {
  font-family: var(--font-mono);
  font-size: clamp(9px, 2.2vw, 11px);
  letter-spacing: 0.02em;
  padding: clamp(4px, 1.3vw, 6px) clamp(8px, 2.6vw, 14px);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent; color: var(--fg-muted, #B8B0A0);
  cursor: pointer; white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.sh-langbar button:hover { color: var(--bone); border-color: var(--bone); }
.sh-langbar button[aria-pressed="true"] {
  background: var(--surreal-red); border-color: var(--surreal-red); color: var(--bone);
}

/* ⚠ Estes degraus são só a ESTIMATIVA INICIAL, usada até o JS medir a barra.
   A altura real é contínua (tudo é clamp), então degrau nenhum acerta em toda
   largura — perseguir isso com mais breakpoints já falhou em 500px e 620px.
   Quem define o valor final é siteHeaderScript()/o efeito nos componentes
   React, medindo o elemento. Por isso os números aqui são GENEROSOS: sobrar
   alguns pixels é inofensivo, faltar esconde conteúdo sob a barra. */
@media (max-width: 900px) { :root { --sh-altura: 68px; } }
@media (max-width: 620px) { :root { --sh-altura: 56px; } }
@media (max-width: 380px) {
  :root { --sh-altura: 46px; }
}
/* Telas muito estreitas (320px, iPhone SE antigo): o conjunto cabia, mas com
   3px de folga — margem fina demais pra variação de renderização de fonte
   entre aparelhos. Os pixels vêm da moldura (logo, paddings e gaps), NÃO de
   mais redução de tipografia: a fonte fica nos 8px do clamp, que é o piso de
   legibilidade que definimos. */
@media (max-width: 340px) {
  .sh { padding-left: 6px; padding-right: 6px; gap: 4px; }
  .sh-brand img { height: 17px; }
  .sh-nav { gap: 5px; }
  .sh-cta { padding-left: 7px; padding-right: 7px; }
}