/* ============================================================
   Regulariza — Quiz styles (Fase 3)
   Reusa tokens de styles.css (:root). Monta em #quiz-app.
   ============================================================ */

.quiz-live{
  border:1px solid var(--border);
  background:var(--cream-card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0;max-width:680px;margin:0 auto;overflow:hidden;
  text-align:left;
}

.quiz-step{padding:30px 28px 28px;animation:quizIn .35s ease both}
@keyframes quizIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.quiz-step{animation:none}}
.quiz-step:focus{outline:none}

/* progresso */
.quiz-prog{height:5px;background:var(--cream-2);border-radius:99px;overflow:hidden;margin-bottom:22px}
.quiz-prog span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--telha));
  transition:width .4s ease;border-radius:99px}

/* pergunta */
.quiz-q{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(22px,3.4vw,28px);line-height:1.22;color:var(--green-deep);
  margin-bottom:20px;
}

/* opções */
.quiz-opts{display:flex;flex-direction:column;gap:10px}
.quiz-opt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--cream);border:1.5px solid var(--border);border-radius:11px;
  padding:15px 17px;font-size:16px;color:var(--ink);cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .1s ease;
  font-family:inherit;
}
.quiz-opt:hover{border-color:var(--green-line);background:#fff}
.quiz-opt:active{transform:scale(.995)}
.quiz-opt-dot{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--border);background:#fff;transition:all .15s ease;
}
.quiz-opt.sel{border-color:var(--telha);background:rgba(212,106,44,.06)}
.quiz-opt.sel .quiz-opt-dot{border-color:var(--telha);background:var(--telha);
  box-shadow:inset 0 0 0 3px #fff}

/* feedback educativo */
.quiz-fb{
  margin-top:16px;padding:14px 16px;border-radius:10px;font-size:14.5px;line-height:1.55;
  border-left:4px solid;animation:quizIn .3s ease both;
}
.quiz-fb strong{font-weight:700;margin-right:4px}
.quiz-fb.tone-ok{background:rgba(31,86,65,.08);border-color:var(--green-line);color:#1c3b2e}
.quiz-fb.tone-warn{background:rgba(201,169,97,.12);border-color:var(--gold);color:#5c4d23}
.quiz-fb.tone-alert{background:rgba(212,106,44,.10);border-color:var(--telha);color:#8a3d18}

/* navegação */
.quiz-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px}
.quiz-back{
  background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:600;color:var(--ink-mute);padding:8px 4px;
}
.quiz-back:hover{color:var(--green-deep)}
.quiz-next{font-size:16px !important;padding:13px 26px}
.quiz-next:disabled{opacity:.4;cursor:not-allowed;transform:none !important;filter:none !important}

/* info / mei intro */
.quiz-info-txt{font-size:17px;color:var(--ink-soft);line-height:1.6;margin-bottom:8px}
.quiz-info-txt strong{color:var(--green-deep)}

/* ---------- captura (formulário) ---------- */
.quiz-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.quiz-form > label{
  display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--green-deep);
}
.quiz-form input,.quiz-form select{
  font-family:inherit;font-size:16px;font-weight:400;color:var(--ink);
  padding:13px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--cream);
  transition:border-color .15s ease;
}
.quiz-form input:focus,.quiz-form select:focus{outline:none;border-color:var(--telha);background:#fff}
.quiz-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quiz-optins{display:flex;flex-direction:column;gap:10px;margin:4px 0}
.chk{
  display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;
  color:var(--ink-soft);cursor:pointer;line-height:1.4;
}
.chk input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--telha)}
.quiz-lgpd{font-size:12.5px;color:var(--ink-mute);margin-top:2px}
.quiz-lgpd a{color:var(--telha);text-decoration:underline}
.quiz-err{
  background:rgba(212,106,44,.10);border:1px solid var(--telha);color:#8a3d18;
  border-radius:9px;padding:11px 14px;font-size:14px;
}
.quiz-submit{margin-top:6px}

/* ---------- resultado ---------- */
.quiz-result{text-align:center;padding:40px 30px}
.res-emoji{font-size:46px;display:block;margin-bottom:8px}
.res-tag{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 13px;border-radius:99px;margin-bottom:14px;
}
.res-titulo{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(26px,4vw,34px);
  line-height:1.18;color:var(--green-deep);margin-bottom:14px;
}
.res-texto{font-size:16px;color:var(--ink-soft);line-height:1.6;max-width:54ch;margin:0 auto 22px}
.res-wa-note{font-size:14px;color:var(--ink-mute);margin-bottom:16px}
.res-cta{display:inline-block;margin-bottom:14px}
.res-email-note{font-size:13px;color:var(--ink-mute)}

/* cores por quadrante (faixa superior + tag) */
.res-verde{border-top:5px solid #1F5641}
.res-verde .res-tag{background:rgba(31,86,65,.12);color:#1c3b2e}
.res-silencioso{border-top:5px solid var(--gold)}
.res-silencioso .res-tag{background:rgba(201,169,97,.18);color:#6b5618}
.res-aberto{border-top:5px solid var(--telha)}
.res-aberto .res-tag{background:rgba(212,106,44,.14);color:#8a3d18}
.res-fora{border-top:5px solid var(--green-line)}
.res-fora .res-tag{background:rgba(42,107,82,.14);color:#1c3b2e}

@media (max-width:520px){
  .quiz-form-row{grid-template-columns:1fr}
  .quiz-step{padding:24px 18px}
}