:root {
  --dourado: #C8A96E;
  --dourado-claro: #E9CD8F;
  --off-white: #F5F5F3;
  --escuro-topo: #14110C;
  --escuro-base: #070706;

  --placa: #191510;              /* placa de opção — SÓLIDA, jamais translúcida */
  --placa-ativa: #221c14;
  --borda: rgba(200, 169, 110, 0.3);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;

  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400;
  color: var(--off-white);

  background-color: var(--escuro-base);
  background-image:
    radial-gradient(70ch 70ch at 50% 28%, rgba(200, 169, 110, 0.14), transparent 70%),
    linear-gradient(180deg, var(--escuro-topo), var(--escuro-base));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.progresso { position: fixed; inset: 0 0 auto; height: 3px; }
.progresso__barra { height: 100%; width: 0; transition: width 250ms ease; }

.topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 0; gap: 12px;
}
.topo__logo { height: 32px; width: auto; }
.topo__voltar {
  min-width: 44px; min-height: 44px;
  background: none; border: 0; cursor: pointer; font-size: 22px;
}

.palco {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px 40px;
}

.tela { width: 100%; max-width: 560px; }

/* A transição é o que dá a sensação de Typeform. Sem ela, é formulário comum. */
.tela--entrando { animation: subir 250ms ease both; }
@keyframes subir {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tela--entrando { animation: none; }
  .progresso__barra { transition: none; }
}

.tela__titulo { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.25; margin: 0 0 24px; }
.tela__linha  { margin: 0 0 8px; }
.tela__texto  { margin: 0 0 28px; line-height: 1.5; }
.tela__rodape { margin: 20px 0 0; font-size: 0.8rem; line-height: 1.45; }

.opcoes { display: grid; gap: 12px; }
.opcao {
  display: block; width: 100%; min-height: 56px;
  padding: 16px 18px; text-align: left;
  border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1.35;
}

.campos { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo__rotulo { font-size: 0.85rem; }
.campo__entrada {
  width: 100%; min-height: 52px; padding: 14px 16px;
  border-radius: 12px; font: inherit; font-size: 1rem;
}
.campo__erro { font-size: 0.8rem; min-height: 1.1em; }

.botao {
  width: 100%; min-height: 56px; margin-top: 24px;
  padding: 16px 24px; border: 0; border-radius: 12px;
  font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.botao[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- identidade EB ---------- */

.progresso { background: rgba(245, 245, 243, 0.08); }
.progresso__barra { background: var(--dourado); }

.topo__voltar { color: var(--dourado); }
.topo__voltar:hover { color: var(--dourado-claro); }

.tela__titulo { font-weight: 700; letter-spacing: -0.01em; }
.tela__linha  { color: var(--dourado); font-weight: 700; font-size: 0.9rem;
                text-transform: uppercase; letter-spacing: 0.08em; }
.tela__texto  { color: rgba(245, 245, 243, 0.75); }
.tela__rodape { color: rgba(245, 245, 243, 0.5); }

/* Placa OPACA. Translúcida sobre o fundo já foi reprovada — não voltar atrás. */
.opcao {
  background: var(--placa);
  color: var(--off-white);
  border: 1px solid var(--borda);
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.opcao:hover, .opcao:focus-visible {
  background: var(--placa-ativa);
  border-color: var(--dourado);
  transform: translateY(-1px);
}

.campo__rotulo { color: rgba(245, 245, 243, 0.7); }
.campo__entrada {
  background: var(--placa);
  color: var(--off-white);
  border: 1px solid var(--borda);
}
.campo__entrada::placeholder { color: rgba(245, 245, 243, 0.35); }
.campo__entrada:focus { outline: none; border-color: var(--dourado); }
.campo__entrada[aria-invalid='true'] { border-color: #d98b6a; }
.campo__erro { color: #d98b6a; }

/* Único elemento dourado cheio da tela — é pra onde o olho vai. */
.botao {
  background: var(--dourado);
  color: var(--escuro-base);
  transition: background-color 150ms ease;
}
.botao:hover:not([disabled]) { background: var(--dourado-claro); }

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

.botao--link {
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 24px;
}
.botao--link[hidden] {
  display: none;
}