:root {
  --tinta: #14202b;
  --tinta-suave: #5a6b7a;
  --linha: #dde4ea;
  --fundo: #eef2f5;
  --papel: #ffffff;
  --acento: #0b6ea8;
  --erro: #b3261e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  justify-content: center;
}

.cartao {
  background: var(--papel);
  width: 100%;
  max-width: 430px;
  padding: 28px 24px 20px;
  border-radius: 14px;
  border: 1px solid var(--linha);
}
.cartao-largo { max-width: 720px; }

.marca {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
}

h1 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; }
h2 { font-size: 18px; margin: 22px 0 6px; }
h3 { font-size: 16px; margin: 18px 0 4px; }
.subtitulo { margin: 0 0 22px; color: var(--tinta-suave); font-size: 15px; }

.campo { margin-bottom: 18px; }

label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }

input[type="text"], input[type="tel"] {
  width: 100%;
  padding: 11px 12px;
  font-size: 16px; /* 16px evita o zoom automatico do iOS ao focar */
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 8px;
}
input[type="text"]:focus, input[type="tel"]:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

.dica { margin: 5px 0 0; font-size: 13px; color: var(--tinta-suave); }

.campo-aceite { margin: 22px 0; }
.aceite {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
}
.aceite input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.versao { color: var(--tinta-suave); }

button {
  width: 100%;
  padding: 13px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--acento);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
button:disabled { background: #94a7b4; cursor: not-allowed; }
button:not(:disabled):hover { background: #095a89; }

.erro { margin: 6px 0 0; color: var(--erro); font-size: 14px; }
.erro-geral { margin-top: 14px; }

.sucesso h2 { margin-top: 0; }
.rodape-nota { color: var(--tinta-suave); font-size: 14px; }

.rodape {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  color: var(--tinta-suave);
  font-size: 13px;
}
.rodape p { margin: 0; }

a { color: var(--acento); }

.documento { font-size: 15px; }
.documento h2:first-child { margin-top: 0; }
.documento ul { padding-left: 20px; }
.carregando { color: var(--tinta-suave); }

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e8edf2; --tinta-suave: #9aabb8; --linha: #2b3947;
    --fundo: #0e161e; --papel: #16212c; --acento: #4aa8dd; --erro: #f2857c;
  }
  button { color: #08131c; }
}

/* Distincao visual entre a caixa obrigatoria e a opcional: as duas sao
   independentes, e a pessoa precisa enxergar isso antes de marcar. */
.obrigatorio { font-size: 12px; color: var(--tinta-suave); font-weight: 600; }
.opcional { display: block; margin-top: 2px; font-size: 12px; color: var(--tinta-suave); }
.aceite + .aceite { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.aviso h2 { margin-top: 0; }