/* Base comum às quatro páginas: fontes, chassi e cabeçalho.
   Design system v2 — docs/design-system.md do guarda-chuva (§3.1, §6.6, §9.2).

   As fontes moram aqui, e não no Google Fonts: carregar de lá entregaria o IP
   de quem abre o site a um terceiro que a Política de Privacidade (v1.4) não
   lista para isso. Licença OFL, ao lado dos arquivos em /fontes. Só o
   subconjunto latino — cobre o português inteiro. */
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("/fontes/atkinson-next-latin.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible Mono";
  src:url("/fontes/atkinson-mono-latin.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}

:root{
  --chassi:#050708; --chassi-linha:#232a31;
  --sobre-chassi:#f2f4f6; --sobre-chassi-2:#8a949e;
  --neon:#48e300; --neon-pressionado:#3cc400;
  --marca-tinta:#b4ec96;
  --sans:"Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* O cabeçalho é o chassi: grafite nos dois temas. O nome é o da EMPRESA e fica
   em branco — o neon é a cor do produto, não da Officina Agri. */
.topo{
  background:var(--chassi); border-bottom:1px solid var(--chassi-linha);
  color:var(--sobre-chassi);
  padding-top:env(safe-area-inset-top, 0px);
}
.topo-in{
  max-width:72rem; margin:0 auto; padding:0 1.25rem; height:3.5rem;
  display:flex; align-items:center; gap:2rem;
}
.marca{
  display:inline-flex; align-items:center; gap:.55rem;
  font:700 1rem/1 var(--sans); letter-spacing:-.01em;
  color:var(--sobre-chassi); text-decoration:none; white-space:nowrap;
}
/* Símbolo da empresa (docs/brand/ do guarda-chuva). O alt fica vazio porque
   o nome ao lado já diz o que o link é: leitor de tela não precisa ler duas vezes. */
.marca img{width:1.75rem; height:1.75rem; flex:none}
.topo nav{display:flex; gap:1.75rem; margin-right:auto}
.topo nav a{
  font:500 .875rem/1 var(--sans); color:var(--sobre-chassi-2); text-decoration:none;
}
.topo nav a:hover{color:var(--sobre-chassi)}
.topo .entrar{
  margin-left:auto; flex:none;
  font:600 .875rem/1 var(--sans); color:var(--chassi); text-decoration:none;
  background:var(--sobre-chassi); padding:.6rem 1.1rem; border-radius:999px;
}
.topo .entrar:hover{background:#ffffff}
.topo a:focus-visible{outline:2px solid var(--marca-tinta); outline-offset:3px; border-radius:6px}
.topo .entrar:focus-visible{border-radius:999px}
/* com o menu visível, é ele que empurra o "Entrar" para a direita */
@media (min-width:48.01rem){ .topo nav + .entrar{margin-left:0} }
@media (max-width:48rem){ .topo nav{display:none} }