/* Landing d'A Guilda (aguilda.app). Só tokens de design/marca/tokens/tokens.css: nada de cor solta
   (site/site.test.mjs confere). Grade de 8px, alvo de toque de 44px, foco com o anel `foco`. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--anil);
  font: 400 17px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--linha); font-weight: 600; text-underline-offset: 3px; }
a:focus-visible, .botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--radius-md); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

.pular { position: absolute; left: var(--space-4); top: -64px; background: var(--papel-alto); padding: var(--space-2) var(--space-4); z-index: 2; }
.pular:focus { top: var(--space-2); }

/* Topo */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  max-width: 1120px; margin: 0 auto; padding: var(--space-4);
}
.marca { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--anil); text-decoration: none; min-height: 44px; }
.marca span { font: 800 22px/1 var(--font-display); white-space: nowrap; }
.brasao { width: 40px; height: 40px; }
.topo nav { display: flex; align-items: center; gap: var(--space-2); }
.link-topo { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); color: var(--anil); white-space: nowrap; }
@media (max-width: 420px) { .link-topo { display: none; } }

/* Botões (design/marca/componentes/botao.md). Principal: uma vez por tela, com a sombra carimbo. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 var(--space-6); border-radius: var(--radius-md); border: 2px solid var(--anil);
  background: var(--papel-alto); color: var(--anil); font: 600 16px/1 var(--font-sans); text-decoration: none;
}
.botao-principal { background: var(--linha); color: var(--sobre-linha); box-shadow: var(--sombra-carimbo); }
.botao-principal:active { transform: translate(3px, 3px); box-shadow: none; }
.botao-leve { border-color: transparent; background: transparent; color: var(--linha); }

/* Selos em Silkscreen: curtos, maiúsculos */
.selo {
  display: inline-flex; align-self: flex-start; font: 12px/16px var(--font-pixel); text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px var(--space-2); border-radius: var(--radius-ponto);
  background: var(--trama); color: var(--anil);
}
.selo-linha { background: var(--linha-suave); color: var(--linha); }
.selo-mostarda { background: var(--mostarda); color: var(--sobre-mostarda); }

main { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }

/* Abertura com a grade de pontos ao fundo */
.abertura {
  display: grid; gap: var(--space-4); justify-items: start;
  padding: var(--space-12) 0 var(--space-12);
  background-image: radial-gradient(var(--trama) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
}
.abertura h1 { font-size: clamp(36px, 7vw, 64px); max-width: 16ch; }
.chamada { font-size: 19px; max-width: 60ch; color: var(--anil-suave); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

.faixa { padding: var(--space-12) 0; border-top: 2px solid var(--trama); display: grid; gap: var(--space-4); }
.faixa h2 { font-size: clamp(28px, 4.5vw, 40px); max-width: 24ch; }
.sub { color: var(--anil-suave); }

/* Os quatro pilares */
.cards { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6);
  background: var(--papel-alto); border: 2px solid var(--anil); border-radius: var(--radius-lg); box-shadow: var(--sombra-carimbo);
}
.card img, .exemplos img, .forja-icone { filter: drop-shadow(0 0 1px var(--icone-halo)); }
.card h3 { font-size: 24px; }
.card p { flex: 1; }
.card a { display: inline-flex; align-items: center; min-height: 44px; }

/* Mão e máquina */
.exemplos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.exemplos li { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 2px solid var(--trama); border-radius: var(--radius-md); }
.exemplos img { flex: none; }

/* Forja de Luz: o mostarda é o feixe do laser (só preenchimento) */
.forja {
  display: grid; gap: var(--space-6); align-items: start; padding: var(--space-8) var(--space-6);
  background: var(--papel-alto); border: 2px solid var(--anil); border-left: var(--space-2) solid var(--mostarda);
  border-radius: var(--radius-lg); box-shadow: var(--sombra-carimbo);
}
.forja > div { display: grid; gap: var(--space-4); justify-items: start; }
.lista { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-2); }
@media (min-width: 720px) { .forja { grid-template-columns: 96px 1fr; padding: var(--space-8); } }

.guilda p { max-width: 64ch; }

.rodape {
  max-width: 1120px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12);
  border-top: 2px solid var(--trama); display: grid; gap: var(--space-4);
}
.rodape nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.rodape nav a { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .botao-principal:active { transform: none; } }