/* ═══════════════════════════════════════════════════════════════
   Test de DNA de aprendizaje · Máquina de Ventas Automáticas

   Réplica do tema "Plain Sun" do Typeform, que é a referência visual
   deste formulário: fundo branco, dourado nas perguntas e no botão,
   fonte Karla, uma pergunta por tela.

   Cores lidas da página original:
     pergunta  #b89837
     resposta  #e4ba3f   (botão, barra de progresso, cartões)
     fundo     #ffffff
   ═══════════════════════════════════════════════════════════════ */

:root{
  --pergunta:  #b89837;
  --resposta:  #e4ba3f;
  --fundo:     #ffffff;
  --tinta:     #171306;   /* texto dentro do botão */
  --raio:      8px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--fundo);
  color:var(--pergunta);
  font-family:Karla, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;            /* cada pergunta ocupa a tela inteira */
}

/* ═══════════════ BARRA DE PROGRESSO ═══════════════ */

.progresso{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  height:4px;
  background:rgba(184,152,55,.30);
}
.progresso span{
  display:block;
  height:100%;
  width:0;
  background:var(--resposta);
  border-radius:0 4px 4px 0;
  transition:width .35s cubic-bezier(.22,.61,.36,1);
}

/* ═══════════════ MARCA (deixa claro que é o MVA) ═══════════════ */

.marca{
  position:fixed;
  top:18px; left:24px;
  z-index:15;
  color:var(--pergunta);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.75;
}
.marca span{ font-weight:400; opacity:.8; }
@media (max-width:600px){
  .marca{ top:14px; left:18px; font-size:11px; }
}

/* ═══════════════ PALCO ═══════════════ */

.palco{
  position:relative;
  height:100dvh;
  overflow:hidden;
}

.tela{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 24px;
  opacity:0;
  visibility:hidden;
  transform:translateY(40px);
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), visibility .35s;
  overflow-y:auto;
}
.tela.esta-ativa{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
/* quem já passou sai por cima */
.tela.ja-passou{ transform:translateY(-40px); }

.tela__interno{
  width:100%;
  max-width:720px;
  margin:auto;
}

/* ═══════════════ PERGUNTA ═══════════════ */

.pergunta{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:28px;
}
.numero{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-top:7px;
  padding:3px 6px;
  border-radius:3px;
  background:var(--resposta);
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.numero svg{ width:8px; height:8px; fill:#fff; }

.enunciado{
  font-size:clamp(21px, 3.4vw, 26px);
  font-weight:400;
  line-height:1.3;
  color:var(--pergunta);
}
.enunciado .obrig{ font-size:.85em; opacity:.7; }

.ajuda{
  margin:-18px 0 26px 48px;
  color:var(--pergunta);
  font-size:15px;
  opacity:.72;
}

/* ═══════════════ CAMPO DE TEXTO ═══════════════ */

.campo{ margin:0 0 26px 48px; }

.campo input{
  width:100%;
  max-width:720px;
  padding:6px 2px 10px;
  border:0;
  border-bottom:1.5px solid rgba(184,152,55,.45);
  background:transparent;
  color:var(--pergunta);
  font-family:inherit;
  font-size:clamp(20px, 3vw, 26px);
  font-weight:400;
  line-height:1.3;
  transition:border-color .2s ease;
}
.campo input:focus{
  outline:0;
  border-bottom-color:var(--resposta);
}
.campo input::placeholder{ color:rgba(184,152,55,.45); }

/* o WhatsApp tem seletor de país antes do número */
.telefone{
  display:flex;
  align-items:flex-end;
  gap:12px;
  max-width:720px;
}
.telefone select{
  flex:none;
  padding:6px 26px 10px 2px;
  border:0;
  border-bottom:1.5px solid rgba(184,152,55,.45);
  background:transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b89837' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 4px center / 11px;
  color:var(--pergunta);
  font-family:inherit;
  font-size:clamp(17px, 2.4vw, 21px);
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.telefone select:focus{ outline:0; border-bottom-color:var(--resposta); }
.telefone input{ flex:1; min-width:0; }

/* ═══════════════ ALTERNATIVAS A / B / C ═══════════════ */

.opcoes{ margin:0 0 26px 48px; max-width:560px; }

.opcao{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin-bottom:10px;
  padding:11px 14px;
  border:1.5px solid rgba(228,186,63,.55);
  border-radius:var(--raio);
  background:rgba(228,186,63,.10);
  color:var(--pergunta);
  font-family:inherit;
  font-size:clamp(15px, 2vw, 17px);
  line-height:1.35;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.opcao:hover{ background:rgba(228,186,63,.26); }
.opcao .letra{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px; height:21px;
  border:1.5px solid rgba(228,186,63,.75);
  border-radius:4px;
  background:#fff;
  font-size:11px;
  font-weight:700;
  line-height:1;
}
.opcao[aria-pressed="true"]{
  background:rgba(228,186,63,.45);
  border-color:var(--resposta);
}
.opcao[aria-pressed="true"] .letra{
  background:var(--resposta);
  border-color:var(--resposta);
  color:#fff;
}

/* ═══════════════ BOTÃO OK ═══════════════ */

.linha-ok{ display:flex; align-items:center; gap:14px; margin-left:48px; }

.ok{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:11px 17px;
  border:0;
  border-radius:var(--raio);
  background:var(--resposta);
  color:var(--tinta);
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}
.ok:hover{ filter:brightness(1.06); }
.ok:active{ transform:scale(.98); }
.ok[disabled]{ opacity:.55; cursor:progress; }

.dica{ color:var(--pergunta); font-size:12px; opacity:.6; }
.dica b{ font-weight:700; }
@media (max-width:600px){ .dica{ display:none; } }

.erro{
  margin:-14px 0 20px 48px;
  padding:7px 12px;
  border-radius:var(--raio);
  background:#fdecea;
  color:#b3261e;
  font-size:14px;
  font-weight:600;
}

/* ═══════════════ RODAPÉ (setas) ═══════════════ */

.rodape{
  position:fixed;
  right:20px; bottom:18px;
  z-index:15;
  display:flex;
  gap:2px;
}
.seta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:34px;
  border:0;
  background:var(--resposta);
  color:var(--tinta);
  cursor:pointer;
  transition:filter .15s ease;
}
.seta:first-child{ border-radius:var(--raio) 0 0 var(--raio); }
.seta:last-child{ border-radius:0 var(--raio) var(--raio) 0; }
.seta:hover{ filter:brightness(1.06); }
.seta[disabled]{ opacity:.45; cursor:default; }
/* no resultado não há mais para onde navegar */
.rodape[hidden]{ display:none; }
.seta svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ═══════════════ RESULTADO ═══════════════ */

.tela--resultado .tela__interno{ max-width:620px; text-align:center; }

.resultado__emoji{ font-size:54px; line-height:1; margin-bottom:18px; }
.resultado__titulo{
  margin-bottom:16px;
  font-size:clamp(26px, 5vw, 36px);
  font-weight:700;
  line-height:1.2;
  color:var(--pergunta);
}
.resultado__titulo b{ font-weight:700; }
.resultado__texto{
  margin-bottom:26px;
  font-size:17px;
  line-height:1.55;
  color:var(--pergunta);
  opacity:.9;
}
.resultado__nota{
  display:inline-block;
  padding:12px 18px;
  border:1.5px solid rgba(228,186,63,.55);
  border-radius:var(--raio);
  background:rgba(228,186,63,.10);
  font-size:15px;
  line-height:1.5;
}

/* ═══════════════ CARREGANDO ═══════════════ */

.enviando{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--pergunta);
  font-size:17px;
}
.giro{
  width:22px; height:22px;
  border:2.5px solid rgba(228,186,63,.35);
  border-top-color:var(--resposta);
  border-radius:50%;
  animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

/* armadilha anti-robô: fora da tela, mas presente no DOM */
.armadilha{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* no celular o recuo de 48px come largura demais: tudo encosta na margem */
@media (max-width:600px){
  .tela{ padding:72px 20px; }
  .ajuda, .campo, .opcoes, .linha-ok, .erro{ margin-left:0; }
  .pergunta{ gap:10px; margin-bottom:22px; }
  .opcoes{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}