/* Identidade visual: preto e dourado.
   Cores em variáveis: para ajustar o tom, troque só aqui. */
:root {
  --fundo: #070707;
  --cartao: #121110;
  --cartao-borda: #2b2519;
  --texto: #f4ecdc;          /* marfim: leitura confortável sobre o preto */
  --texto-suave: #d8cdb6;       /* mais claro: textos pequenos legíveis sobre o preto */
  --ouro: #d4af37;
  --ouro-claro: #f0d27a;
  --ouro-escuro: #a57f22;
  --campo: #1b1916;
  --campo-borda: #3a3223;
  --erro: #ff8a7a;           /* vermelho claro: legível sobre o preto */
  --raio: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(212, 175, 55, .16), transparent 60%),
    var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;               /* 16px evita zoom automático no iPhone */
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 28px 16px;
  /* Textos da interface em MAIÚSCULAS. É só a aparência: o texto original,
     os dados digitados e o que é enviado ao servidor continuam como estão. */
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cartao {
  position: relative;
  background: linear-gradient(180deg, #171511 0%, var(--cartao) 100%);
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--cartao-borda);
  border-radius: var(--raio);
  padding: 30px 22px 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(240, 210, 122, .06);
  overflow: hidden;
}

/* Filete dourado no topo do cartão */
.filete {
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--ouro-escuro), var(--ouro-claro), var(--ouro-escuro), transparent);
}

h1 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 6px 0 22px;
  text-align: center;
  color: var(--ouro-claro);
  background: linear-gradient(180deg, var(--ouro-claro), var(--ouro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
h1:focus { outline: none; }

.campo { margin-bottom: 16px; }
label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ouro);
  margin-bottom: 6px;
}

/* Campos: o que a pessoa digita aparece exatamente como digitado */
input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  padding: 13px 14px;
  border: 1px solid var(--campo-borda);
  border-radius: 10px;
  background: var(--campo);
  color: var(--texto);
  caret-color: var(--ouro);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #6f6656; text-transform: none; }
input:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .22);
}
input[aria-invalid="true"] { border-color: var(--erro); }
input:-webkit-autofill {                      /* autopreenchimento sem fundo amarelo */
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: 0 0 0 40px var(--campo) inset;
  caret-color: var(--ouro);
}

.erro { color: var(--erro); font-size: .84rem; font-weight: 600; margin: 6px 0 0; min-height: 1em; }
.erro:empty { display: none; }
.erro--geral { text-align: center; }

.botao {
  display: block;
  width: 100%;
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;     /* botões não herdam do body */
  text-align: center;
  text-decoration: none;
  padding: 15px 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ouro-claro) 0%, var(--ouro) 45%, var(--ouro-escuro) 100%);
  color: #0a0a0a;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 8px 22px rgba(212, 175, 55, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: filter .15s, transform .05s;
}
.botao:hover { filter: brightness(1.06); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }
.botao:disabled { opacity: .65; cursor: wait; }
.botao[aria-disabled="true"] {
  background: #2a261f; color: var(--texto-suave); box-shadow: none; pointer-events: none;
}

.privacidade {
  font-size: .82rem; line-height: 1.55; letter-spacing: .05em; color: var(--texto-suave);
  text-align: center; margin: 18px 0 0;
}

/* Esconde o campo-armadilha de pessoas, sem usar display:none (alguns robôs ignoram esse) */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Aviso de ambiente de teste (só fora de altustv.com.br) */
.aviso-demo {
  background: rgba(212, 175, 55, .08);
  border: 1px dashed var(--ouro-escuro);
  color: var(--ouro-claro);
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 10px;
  margin: 0 0 16px;
}

/* Tela 2 */
#tela-conclusao { text-align: center; }
.check {
  width: 64px; height: 64px; margin: 4px auto 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ouro-claro), var(--ouro) 55%, var(--ouro-escuro));
  color: #0a0a0a;
  font-size: 32px; font-weight: 900; line-height: 64px;
  box-shadow: 0 0 0 6px rgba(212, 175, 55, .12), 0 10px 26px rgba(212, 175, 55, .25);
}
#tela-conclusao h1 { margin-bottom: 18px; }
.rotulo-codigo {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--ouro); margin: 0 0 8px;
}
.codigo {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.35rem, 7.4vw, 2rem);   /* cabe numa linha até em telas de 320 px */
  font-weight: 800;
  letter-spacing: .1em;
  white-space: nowrap;           /* o código nunca é partido em duas linhas */
  text-transform: none;          /* o código aparece exatamente como gerado */
  color: var(--texto);
  background: var(--campo);
  border: 1.5px dashed var(--ouro);
  border-radius: 10px;
  padding: 12px;
  margin: 0 0 18px;
  user-select: all;
}
.instrucao { color: var(--texto); font-size: 1rem; font-weight: 500; line-height: 1.6; letter-spacing: .03em; margin: 0 0 18px; }

/* Celulares estreitos */
@media (max-width: 360px) {
  .cartao { padding: 26px 16px 22px; }
  h1 { font-size: 1.25rem; }
}