*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo-suave);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
a { color: var(--marca-escura); }

.container { max-width: var(--largura); margin: 0 auto; padding: 0 1rem; }

.topo {
  position: sticky; top: 0; z-index: 10;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}
.topo-linha {
  display: flex; align-items: center; gap: 1rem;
  min-height: 60px; flex-wrap: wrap;
}
.topo-marca { font-weight: 700; color: var(--marca-escura); }
.topo-espaco { margin-left: auto; }

.menu { display: flex; gap: .25rem; flex-wrap: wrap; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 .9rem; border-radius: var(--raio-p);
  color: var(--tinta); text-decoration: none;
}
.menu a[aria-current="page"] { background: var(--marca-suave); color: var(--marca-escura); }

.grade { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .grade--2 { grid-template-columns: repeat(2, 1fr); }
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
}

main { padding: 1.25rem 0 4rem; }
.rolagem-lateral { overflow-x: auto; }

/* No celular o menu do painel tem itens demais para caber empilhado sem comer
   a tela inteira. Vira uma faixa que rola de lado. */
@media (max-width: 760px) {
  .menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    order: 3;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { flex: 0 0 auto; }
  .topo-espaco { display: none; }
}