/* Cabecalho do site: o MESMO em toda pagina, nova ou antiga.
   Esta separado de proposito — as paginas de texto (termos, privacidade,
   uso legitimo) nao podem carregar o interno.css inteiro, porque o
   a{color:inherit} de la apagaria a cor dos links dentro do documento. */
:root{
  --sinal:#3b9dff; --noite:#060b14; --linha:rgba(126,178,205,.14);
  --txt:#e8f1fa; --fraco:#8ba0b5;
}
/* ─── cabeçalho ─── */
header{position:sticky;top:0;z-index:60;background:rgba(6,11,20,.94);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--linha)}
/* header .barra e NAO .barra: o elemento e <div class="w barra">, e o interno.css
   carrega DEPOIS deste arquivo — ali o .w{padding:0 20px} empatava em
   especificidade e ganhava pela ordem, zerando o espaco de cima e de baixo. */
header .barra{display:flex;align-items:center;gap:12px;padding:11px 20px}
.logo img{height:32px;width:auto;display:block}
header .nav{display:flex;gap:0;margin-left:2px;margin-top:0;flex-wrap:wrap}
/* padding apertado de proposito: com 8 itens, 11px de cada lado estoura os 940px
   uteis do container e o menu cai para duas linhas. */
header .nav a{padding:8px 8px;margin:0;border-radius:8px;font-size:13px;
  color:var(--fraco);white-space:nowrap}
header .nav a:hover{color:var(--txt);background:rgba(255,255,255,.05)}
header .nav a[aria-current]{color:#06101d;background:var(--sinal);font-weight:700}
.pontinhos{display:none;margin-left:auto;width:42px;height:42px;place-items:center;
  background:transparent;border:1px solid var(--linha);border-radius:10px;
  color:var(--txt);font-size:20px;cursor:pointer;line-height:1}

/* 1060 e nao 900: com 8 itens o menu quebrava em duas linhas antes disso. */
@media (max-width:1060px){
  .nav{display:none;order:3;width:100%;flex-direction:column;gap:3px;padding:6px 0 10px}
  .nav.aberto{display:flex}
  .nav a{padding:12px 13px;font-size:15px}
  .pontinhos{display:grid}
  header .barra{flex-wrap:wrap}
}