@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..900&family=JetBrains+Mono:wght@400;600;800&display=swap');

:root {
  --papel: #f4eee2;
  --papel-2: #ebe3d2;
  --branco: #fffdf8;
  --tinta: #141414;
  --tinta-2: #4a463f;
  --tinta-3: #8a857b;
  --vermelho: #e0311b;
  --amarelo: #ffd21f;
  --verde: #1f9d55;
  --verde-claro: #e3f6ea;
  --azul: #2458d6;
  --led: #ff5a1f;
  --raio: 0px;
  --sombra: 4px 4px 0 var(--tinta);
  --fonte: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--fonte); background: var(--papel); color: var(--tinta); line-height: 1.45; font-size: 15px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.titulo { font-weight: 900; font-variation-settings: 'wdth' 112; letter-spacing: -.02em; line-height: 1; }
.rotulo { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.fraco { color: var(--tinta-2); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none;
  background: var(--tinta); color: var(--papel); border: 2px solid var(--tinta); padding: 10px 16px; font-weight: 800;
  box-shadow: 3px 3px 0 rgba(20, 20, 20, .25); transition: transform .1s, box-shadow .1s; white-space: nowrap;
}
.botao:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(20, 20, 20, .35); }
.botao:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(20, 20, 20, .35); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.vermelho { background: var(--vermelho); color: #fff; }
.botao.amarelo { background: var(--amarelo); color: var(--tinta); }
.botao.verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.botao.claro { background: var(--branco); color: var(--tinta); }
.botao.fantasma { background: transparent; color: var(--tinta); box-shadow: none; }
.botao.pequeno { padding: 6px 10px; font-size: 13px; }
.botao.grande { padding: 16px 22px; font-size: 17px; }
.botao.cheio { width: 100%; }

.campo { display: grid; gap: 6px; align-content: start; }
.campo > span { font-size: 13px; font-weight: 700; }
.campo small { color: var(--tinta-2); font-size: 12.5px; }
.entrada, select.entrada, textarea.entrada {
  width: 100%; background: var(--branco); border: 2px solid var(--tinta); padding: 10px 12px; outline: none; border-radius: 0;
}
textarea.entrada { resize: vertical; min-height: 90px; line-height: 1.45; }
.entrada:focus { box-shadow: 0 0 0 3px var(--amarelo); }
.entrada.com-erro { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(224, 49, 27, .18); }
.erro-campo { color: var(--vermelho); font-size: 13px; font-weight: 600; }

.caixa { background: var(--branco); border: 2px solid var(--tinta); padding: 20px; }
.caixa.sombra { box-shadow: var(--sombra); }

.etiqueta { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border: 1.5px solid currentColor; white-space: nowrap; }
.etiqueta.verde { color: var(--verde); background: var(--verde-claro); }
.etiqueta.vermelha { color: var(--vermelho); background: #fde8e4; }
.etiqueta.amarela { color: #7a5b00; background: #fff4c2; }
.etiqueta.cinza { color: var(--tinta-2); background: var(--papel-2); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.aviso { border: 2px solid var(--tinta); padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; background: #fff4c2; }
.aviso.vermelho { background: #fde8e4; border-color: var(--vermelho); }
.aviso.verde { background: var(--verde-claro); border-color: var(--verde); }

.carregando { display: inline-block; width: 18px; height: 18px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.torrada {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; z-index: 99;
  background: var(--tinta); color: var(--papel); padding: 12px 18px; font-weight: 600; border: 2px solid var(--tinta);
  box-shadow: 4px 4px 0 var(--amarelo); transition: .25s; max-width: calc(100% - 32px);
}
.torrada.vis { opacity: 1; transform: translate(-50%, 0); }
.torrada.erro { box-shadow: 4px 4px 0 var(--vermelho); }

/* página simples de confirmação (link do WhatsApp) */
body.confirmacao { display: grid; place-items: center; min-height: 100vh; padding: 24px; text-align: center; }
body.confirmacao main { max-width: 380px; }
body.confirmacao h1 { font-size: 30px; font-weight: 900; margin: 18px 0 8px; font-variation-settings: 'wdth' 110; }
body.confirmacao p { color: var(--tinta-2); font-size: 17px; }
.selo-grande { width: 84px; height: 84px; margin: 0 auto; display: grid; place-items: center; font-size: 44px; font-weight: 900; border: 3px solid var(--tinta); box-shadow: var(--sombra); }
.selo-grande.ok { background: var(--verde); color: #fff; }
.selo-grande.erro { background: var(--amarelo); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }