/* ══════════════════════════════════════════════════════════════
   Prohall — Formulário de Sorteio

   Preto e branco por enquanto. Toda cor sai dos tokens abaixo: para
   trazer o vermelho da marca depois, basta trocar --cor-acao (e o
   hover) — nenhuma regra tem cor solta.
   ══════════════════════════════════════════════════════════════ */

:root {
  --cor-preto:       #0a0a0a;
  --cor-branco:      #ffffff;
  --cor-fundo:       #0a0a0a;
  --cor-campo:       #1a1a1a;
  --cor-campo-hover: #222222;
  --cor-campo-foco:  #141414;
  --cor-caixa:       #4a4a4a;
  --cor-texto:       #ffffff;
  --cor-suave:       #a3a3a3;
  --cor-fraco:       #6e6e6e;
  --cor-erro:        #ff8a80;
  --cor-erro-fundo:  #2a1513;

  /* Destaque: no fundo preto, o que chama atenção é branco */
  --cor-destaque:    var(--cor-branco);
  --cor-acao:        var(--cor-branco);
  --cor-acao-texto:  var(--cor-preto);
  --cor-acao-hover:  #e6e6e6;

  --raio: 14px;
  --fonte: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

img { max-width: 100%; display: block; }
input, button { font: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--cor-branco); color: var(--cor-preto); }

:focus-visible {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 3px;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------- casca */
/* Uma coluna só, centrada: logo em cima, formulário no meio, rodapé
   embaixo. Nada de painel ou cartão — a página é o formulário. */
.lp {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.lp__logo { width: 112px; height: auto; }

.lp__miolo {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp__texto {
  text-align: center;
  margin-bottom: 14px;
}

.lp__selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cor-suave);
  margin-bottom: 10px;
}

.lp__titulo {
  font-size: clamp(32px, 8vw, 40px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.lp__sub {
  margin-top: 10px;
  font-size: 16px;
  color: var(--cor-suave);
}

.lp__rodape {
  font-size: 12px;
  color: var(--cor-fraco);
}

/* -------------------------------------------------------- formulário */
.form { display: grid; gap: 10px; }

.campo { display: grid; }

.campo input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: var(--raio);
  background: var(--cor-campo);
  color: var(--cor-texto);
  font-size: 16px; /* 16px impede o zoom automático do iOS no foco */
  transition: background .15s ease, border-color .15s ease;
}

.campo input::placeholder { color: var(--cor-fraco); }

.campo input:hover { background: var(--cor-campo-hover); }

.campo input:focus {
  outline: none;
  background: var(--cor-campo-foco);
  border-color: var(--cor-destaque);
}

.campo input[aria-invalid="true"] {
  border-color: var(--cor-erro);
  background: var(--cor-erro-fundo);
}

.campo--mel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------------------------------------------- aceite */
.aceite {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 2px 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cor-suave);
  cursor: pointer;
}

.aceite input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.aceite__caixa {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--cor-caixa);
  border-radius: 5px;
  background: transparent;
  color: transparent;
  transition: background .15s ease, border-color .15s ease;
}

.aceite:hover .aceite__caixa { border-color: var(--cor-suave); }

.aceite input:checked + .aceite__caixa {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: var(--cor-preto);
}

.aceite input:focus-visible + .aceite__caixa {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 2px;
}

.aceite input[aria-invalid="true"] + .aceite__caixa { border-color: var(--cor-erro); }

/* ------------------------------------------------------------ botão */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--cor-acao);
  color: var(--cor-acao-texto);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.botao:hover { background: var(--cor-acao-hover); }
.botao:active { transform: scale(.985); }
.botao svg { transition: transform .2s ease; }
.botao:hover svg { transform: translateX(3px); }

.botao[aria-busy="true"] {
  opacity: .7;
  cursor: progress;
}

/* ------------------------------------------------------ erro / aviso */
.form__erro {
  padding: 12px 16px;
  border-radius: var(--raio);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
  font-size: 14px;
}

.aviso {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  color: var(--cor-suave);
  padding: 12px 0;
}

/* ---------------------------------------------------------- sucesso */
.sucesso {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 20px 0;
  outline: none;
}

.sucesso__icone {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cor-destaque);
  color: var(--cor-preto);
  margin-bottom: 10px;
  animation: surgir .45s cubic-bezier(.2, .8, .3, 1.2);
}

.sucesso h2 { font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.sucesso p  { color: var(--cor-suave); max-width: 320px; }

@keyframes surgir {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sucesso__icone { animation: none; }
  .botao, .botao svg { transition: none; }
}

/* -------------------------------------------------------------- 404 */
.nao-achou {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px 16px;
  text-align: center;
}

.nao-achou img { width: 140px; height: auto; margin-bottom: 14px; }
.nao-achou h1  { font-size: 30px; font-weight: 700; }
.nao-achou p   { color: var(--cor-suave); margin-bottom: 10px; }
.nao-achou .botao { width: auto; }