/* ---------- Card (envolve cada pergunta) ---------- */
.card {
  background: var(--cor-navy-claro);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--raio);
  padding: 28px 22px;
  box-shadow: var(--sombra);
}
.etapa-rotulo {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cor-ouro);
  font-weight: 700;
  margin-bottom: 12px;
}
.card h1 { font-size: 1.5rem; line-height: 1.25; margin-bottom: 12px; }
.card h2 { font-size: 1.22rem; line-height: 1.3; margin-bottom: 6px; }
.obrig { color: var(--cor-ouro); }
.ajuda { color: var(--cor-prata); font-size: .9rem; margin-bottom: 4px; }

/* ---------- Campos de texto ---------- */
.campo {
  width: 100%;
  padding: 14px;
  margin-top: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .14);
  border-radius: var(--raio-sm);
  color: var(--cor-branco);
  transition: border-color .2s, background .2s;
}
.campo::placeholder { color: rgba(161, 166, 173, .65); }
.campo:focus {
  outline: none;
  border-color: var(--cor-ouro);
  background: rgba(255, 255, 255, .06);
}
.campo-outro { margin-top: 10px; }

/* ---------- Opções (única / múltipla) ---------- */
.opcoes { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.opcao {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .14);
  border-radius: var(--raio-sm);
  color: var(--cor-branco);
  transition: border-color .18s, background .18s;
}
.opcao::before {
  content: "";
  flex: 0 0 20px;
  height: 20px;
  border: 2px solid var(--cor-prata);
  border-radius: 50%;
  transition: all .18s;
}
.opcoes.multi .opcao::before { border-radius: 6px; }
.opcao:hover { border-color: var(--cor-ouro); }
.opcao.sel { border-color: var(--cor-ouro); background: rgba(235, 184, 108, .12); }
.opcao.sel::before {
  border-color: var(--cor-ouro);
  background: var(--cor-ouro);
  box-shadow: inset 0 0 0 4px var(--cor-navy-claro);
}

/* ---------- Mensagem de erro ---------- */
.erro { color: var(--cor-erro); font-size: .86rem; margin-top: 12px; }
.erro:empty { display: none; }

/* ---------- Navegação ---------- */
.nav { display: flex; gap: 12px; margin-top: 24px; }
.btn {
  padding: 14px 20px;
  border-radius: var(--raio-sm);
  font-weight: 700;
  transition: transform .12s, filter .2s, opacity .2s, border-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primario {
  flex: 1;
  background: linear-gradient(90deg, var(--cor-ouro-escuro), var(--cor-ouro));
  color: var(--cor-navy);
}
.btn-primario:hover { filter: brightness(1.06); }
.btn-primario:disabled { opacity: .65; cursor: default; }

/* ---------- Seta do "Avançar" ----------
   Ao marcar uma escolha: a seta recebe um zoom pulsante e o botão
   ganha uma borda levemente pulsante (tom mais claro que o dourado). */
.seta { display: inline-block; transform-origin: center; }
.btn-primario.animar { animation: acep-borda-pulso 1.5s ease-in-out infinite; }
.btn-primario.animar .seta {
  animation: acep-seta-zoom 1.5s ease-in-out infinite;
}
@keyframes acep-seta-zoom {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}
@keyframes acep-borda-pulso {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(247, 216, 168, .22); }
  50%      { box-shadow: 0 0 0 2.5px rgba(247, 216, 168, .65); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primario.animar,
  .btn-primario.animar .seta { animation: none; }
}
.btn-voltar {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .18);
  color: var(--cor-prata);
}
.btn-voltar:hover { border-color: var(--cor-prata); }

/* ---------- Tela inicial (intro) ---------- */
.card-intro { text-align: center; }
.selo {
  display: inline-block;
  background: rgba(235, 184, 108, .14);
  color: var(--cor-ouro);
  border: 1px solid rgba(235, 184, 108, .4);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.card-intro p { color: var(--cor-prata); margin-bottom: 22px; }
.card-intro .btn-primario { width: 100%; flex: none; }
.lgpd-mini { font-size: .78rem; margin-top: 18px; }

/* ---------- Consentimento (LGPD) ---------- */
.aceite { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin-top: 8px; }
.aceite input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--cor-ouro); flex: 0 0 auto; }
.aceite span { font-size: .98rem; }
.lgpd { font-size: .8rem; margin-top: 16px; }

/* ---------- Tela final (confirmação + número da sorte) ---------- */
.card-final { text-align: center; }
.coracao-final {
  display: inline-block;
  height: 64px;
  margin-bottom: 16px;
  font-size: 58px;          /* repouso */
  line-height: 64px;
  color: var(--cor-ouro);
  transform-origin: center;
  animation: acep-coracao-bate 1.6s ease-in-out infinite;
}
/* Batida suave: o pico chega a ~98px (58 × 1.69) */
@keyframes acep-coracao-bate {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.69); }   /* lub */
  28%  { transform: scale(1.25); }
  42%  { transform: scale(1.52); }   /* dub */
  62%, 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .coracao-final { animation: none; }
}
.card-final p { color: var(--cor-prata); margin-bottom: 14px; }
.numero-sorte {
  background: linear-gradient(135deg, var(--cor-navy), var(--cor-navy-fundo));
  border: 1.5px solid var(--cor-ouro);
  border-radius: var(--raio);
  padding: 22px;
  margin: 20px 0;
}
.numero-sorte span {
  display: block;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cor-prata);
  margin-bottom: 8px;
}
.numero-sorte strong {
  font-size: 3.1rem;
  color: var(--cor-ouro);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* Spinner do botão "Enviando..." */
.carregando {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(21, 33, 43, .35);
  border-top-color: var(--cor-navy);
  border-radius: 50%;
  animation: girar .7s linear infinite;
  vertical-align: -3px;
  margin-right: 8px;
}
@keyframes girar { to { transform: rotate(360deg); } }