:root{
  --verde:#7cc242;
  --verde-escuro:#5da02c;
  --tinta:#1c2119;
  --tinta-suave:#68716a;
  --fundo:#fbfcfa;
  --superficie:#fff;
  --linha:#e6e9e4;
  --livre:#f2f8ec;
  --raio:10px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--fundo);color:var(--tinta);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
a{color:inherit}
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;background:var(--superficie);
  border-bottom:1px solid var(--linha);
}
.marca{font-weight:800;letter-spacing:.08em;text-decoration:none}
.marca span{color:var(--verde)}
.topo nav{display:flex;gap:1.25rem;font-size:.9rem}
.topo nav a{color:var(--tinta-suave);text-decoration:none}
.topo nav a:hover{color:var(--tinta)}
main{max-width:1100px;margin:0 auto;padding:1.5rem 1.25rem 8rem}
.cabecalho-grelha{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap;
}
h1{font-size:1.5rem;margin:0 0 .25rem}
.sub{margin:0;color:var(--tinta-suave);font-size:.9rem}
.navegacao{display:flex;gap:.5rem}
.btn-nav{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--superficie);text-decoration:none;
}
.btn-nav:hover{border-color:var(--verde)}
.btn-nav.inativo{opacity:.3}