/* Barra superior fixa, comum a todas as páginas do site (montar_site.py: topo()). Fonte: editar aqui.
   Usa as cores da página quando ela as define; nas páginas simples, os valores padrão abaixo. */
.topo{--t-bg:var(--bg,#eef0ec);--t-ink:var(--ink,#1d2421);--t-muted:var(--muted,#5d6a64);--t-line:var(--line,#cfd5cf);--t-grid:var(--grid,#e1e6e0);--t-accent:var(--accent,#2f7a5b);--t-accent-ink:var(--accent-ink,#fff)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .topo{--t-bg:var(--bg,#141917);--t-ink:var(--ink,#e7ece8);--t-muted:var(--muted,#97a49d);--t-line:var(--line,#33403a);--t-grid:var(--grid,#26302b);--t-accent:var(--accent,#55b98d);--t-accent-ink:var(--accent-ink,#0f1412)}}
:root[data-theme="dark"] .topo{--t-bg:var(--bg,#141917);--t-ink:var(--ink,#e7ece8);--t-muted:var(--muted,#97a49d);--t-line:var(--line,#33403a);--t-grid:var(--grid,#26302b);--t-accent:var(--accent,#55b98d);--t-accent-ink:var(--accent-ink,#0f1412)}
body{margin:0}  /* a barra vai de ponta a ponta (o relatório usava a margem padrão do navegador) */
.topo,.topo *{box-sizing:border-box}
.topo{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--t-bg) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--t-line)}
.topo .in{max-width:1080px;margin:0 auto;padding:8px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:14px}
.marca{font:700 19px var(--f-disp,"Barlow Condensed","Arial Narrow",Arial,sans-serif);color:var(--t-ink);text-decoration:none;white-space:nowrap;letter-spacing:.01em}
.marca span{color:var(--t-muted);font-weight:500}
/* a barra tem sempre no máximo 1080 px: o subtítulo da marca não cabe junto com o menu (fica no eyebrow de cada página) */
.marca span{display:none}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:13.5px;font-weight:500;color:var(--t-muted);text-decoration:none;padding:6px 8px;border-radius:4px;white-space:nowrap}
.nav a:hover{color:var(--t-ink);background:var(--t-grid)}
.nav a[aria-current="page"]{color:var(--t-ink);background:var(--t-grid)}
.apoiar{flex:none;display:inline-flex;align-items:center;gap:6px;font:700 14px var(--f-body,"IBM Plex Sans",system-ui,sans-serif);color:var(--t-accent-ink);background:var(--t-accent);
  border-radius:999px;padding:7px 15px;text-decoration:none;white-space:nowrap;box-shadow:0 2px 8px color-mix(in srgb,var(--t-accent) 40%,transparent);transition:transform .15s}
.apoiar:hover{transform:translateY(-1px);filter:brightness(1.08)}
.apoiar span{font-size:15px;line-height:1}
/* menu na própria linha quando não cabe ao lado da marca; no celular quebra em mais linhas em vez de cortar */
@media (max-width:1100px){.topo .in{flex-wrap:wrap;gap:6px 8px}.apoiar{margin-left:auto}.nav{order:3;margin-left:0;width:100%;flex-wrap:wrap;overflow:visible}}

/* seletor de idioma (PT · EN · ES), gerado por scripts/traducao.py no lugar de <!--IDIOMAS--> */
.idiomas{flex:none;display:flex;border:1px solid var(--t-line);border-radius:999px;overflow:hidden}
.idiomas a{font:600 11.5px var(--f-mono,"IBM Plex Mono",ui-monospace,monospace);letter-spacing:.04em;color:var(--t-muted);text-decoration:none;padding:5px 8px}
.idiomas a:hover{color:var(--t-ink);background:var(--t-grid)}
.idiomas a[aria-current]{color:var(--t-ink);background:var(--t-grid)}
@media (max-width:1100px){.idiomas{order:2}}
@media (max-width:720px){.topo{position:relative}}  /* no celular o menu ocupa várias linhas: não fica preso no topo */