/* Lei na Real — cabeçalho e menu de todas as páginas (HTML gerado por coleta/menu.py) */
header { border-bottom: 1px solid var(--linha); background: var(--papel); position: sticky; top: 0; z-index: 10; }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1080px; }
.marca { display: flex; align-items: center; gap: 10px; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 21px; text-decoration: none; letter-spacing: -0.3px; }
.marca i { width: 14px; height: 14px; border-radius: 50%; background: var(--destaque); }
nav { display: flex; gap: 24px; font-size: 15px; font-weight: 500; }
nav a { text-decoration: none; color: var(--tinta-2); white-space: nowrap; }
nav a:hover { color: var(--tinta); }
nav a.ativo { color: var(--tinta); font-weight: 700; }
.menu-botao { display: none; }

/* Celular e tela estreita: o menu vira um botão ☰ que abre a lista embaixo do cabeçalho */
@media (max-width: 980px) {
  .menu-botao { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -6px; background: none; border: 0; border-radius: 12px; cursor: pointer; color: var(--tinta); }
  .menu-botao:focus-visible { outline: 2px solid var(--destaque); }
  .menu-botao span, .menu-botao span::before, .menu-botao span::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, background-color .2s; }
  .menu-botao span { position: relative; }
  .menu-botao span::before, .menu-botao span::after { content: ""; position: absolute; left: 0; }
  .menu-botao span::before { top: -7px; }
  .menu-botao span::after { top: 7px; }
  header.aberto .menu-botao span { background: transparent; }
  header.aberto .menu-botao span::before { transform: translateY(7px) rotate(45deg); }
  header.aberto .menu-botao span::after { transform: translateY(-7px) rotate(-45deg); }

  nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 4px 20px 12px; background: var(--papel); border-bottom: 1px solid var(--linha); box-shadow: 0 12px 24px rgba(21, 23, 28, .08); font-size: 17px; }
  header.aberto nav { display: flex; }
  nav a { padding: 13px 0; border-bottom: 1px solid var(--linha); }
  nav a:last-child { border-bottom: 0; }
  nav a.ativo { color: var(--destaque); }
}