/* =========================================================
   ÉDIA TORRES · Autoavaliação — Quiz interativo
   Reaproveita tokens de css/styles.css (cores, tipografia, --ease)
   ========================================================= */

.quiz-hero { padding: 150px 0 30px; text-align: center; }
.quiz-hero .maxw-head { max-width: 680px; margin: 0 auto; }
.quiz-hero__badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.quiz-hero__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); padding: 8px 16px; border-radius: var(--r-pill); }
.quiz-hero__badge svg { width: 15px; height: 15px; color: var(--clay); flex: none; }

.quiz-disclaimer { max-width: 680px; margin: 22px auto 0; font-size: 0.86rem; color: var(--ink-mute); background: var(--linen); border-radius: var(--r-sm); padding: 14px 18px; text-align: left; }

/* ---------- Cartão do quiz ---------- */
.quiz-wrap { padding: 20px 0 clamp(72px,10vw,120px); }
.quiz-card {
  position: relative; max-width: 640px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
  min-height: 480px; display: flex; flex-direction: column;
}

/* Barra de progresso */
.quiz-progress { height: 5px; background: var(--linen); position: relative; flex: none; }
.quiz-progress__bar { height: 100%; width: 0%; background: var(--clay); transition: width .5s var(--ease); }
.quiz-meta { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); flex: none; }
.quiz-meta__back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--evergreen); font-weight: 600; cursor: pointer; font-size: 0.86rem; letter-spacing: normal; text-transform: none; padding: 6px 4px; }
.quiz-meta__back:disabled { opacity: 0; pointer-events: none; }
.quiz-meta__back svg { width: 16px; height: 16px; }

.quiz-stage { position: relative; flex: 1; padding: 26px 30px 34px; display: flex; flex-direction: column; }

/* Telas (screens) */
.quiz-screen { display: none; flex-direction: column; flex: 1; animation: quizIn .5s var(--ease); }
.quiz-screen.active { display: flex; }
@keyframes quizIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.quiz-screen--out { animation: quizOut .3s var(--ease) forwards; }
@keyframes quizOut { to { opacity: 0; transform: translateY(-14px); } }

/* Intro dentro do card (tela 0) */
.quiz-intro { display: flex; flex-direction: column; flex: 1; text-align: center; justify-content: center; align-items: center; gap: 18px; padding: 20px 6px; }
.quiz-intro__icon { width: 56px; height: 56px; color: var(--clay); }
.quiz-intro h2 { font-size: clamp(1.5rem,4vw,2rem); }
.quiz-intro p { color: var(--ink-soft); max-width: 46ch; }
.quiz-intro__time { font-size: 0.85rem; color: var(--ink-mute); }

/* Pergunta */
.quiz-q__cat { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); font-weight: 700; margin-bottom: 10px; }
.quiz-q__text { font-family: var(--display); font-size: clamp(1.25rem,3.6vw,1.7rem); color: var(--evergreen); line-height: 1.28; margin-bottom: 26px; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.quiz-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--bone); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 15px 18px; cursor: pointer; font-family: var(--body); font-size: 0.98rem; color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease);
}
.quiz-opt__n { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 0.75rem; color: var(--ink-mute); transition: all .25s var(--ease); }
.quiz-opt:hover { border-color: var(--clay); background: #fff; transform: translateX(2px); }
.quiz-opt:hover .quiz-opt__n { border-color: var(--clay); color: var(--clay); }
.quiz-opt.selected { border-color: var(--clay); background: rgba(192,106,76,0.08); }
.quiz-opt.selected .quiz-opt__n { background: var(--clay); border-color: var(--clay); color: #fff; }
.quiz-opt:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* Formulário de contato */
.quiz-form { display: flex; flex-direction: column; gap: 16px; flex: 1; justify-content: center; }
.quiz-form h2 { font-size: clamp(1.3rem,3.4vw,1.7rem); margin-bottom: 4px; }
.quiz-form p.lead-note { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 6px; max-width: 50ch; }
.quiz-field { display: flex; flex-direction: column; gap: 6px; }
.quiz-field label { font-size: 0.82rem; font-weight: 600; color: var(--evergreen); }
.quiz-field input {
  font-family: var(--body); font-size: 1rem; padding: 14px 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2); background: var(--bone); color: var(--ink);
  transition: border-color .25s var(--ease);
}
.quiz-field input:focus { outline: none; border-color: var(--clay); background: #fff; }
.quiz-field__hint { font-size: 0.78rem; color: var(--ink-mute); }
.quiz-field__error { font-size: 0.8rem; color: var(--clay-2); min-height: 1.1em; margin: 0; }
.quiz-field.invalid input { border-color: var(--clay-2); background: #FCF3F0; }
.quiz-field.invalid input:focus { border-color: var(--clay-2); }
.quiz-privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; color: var(--ink-mute); background: var(--linen); border-radius: var(--r-sm); padding: 12px 14px; }
.quiz-privacy svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--clay); }

/* Loading (calculando) */
.quiz-loading { display: flex; flex-direction: column; flex: 1; text-align: center; justify-content: center; align-items: center; gap: 18px; }
.quiz-loading__spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--clay); animation: quizSpin 0.9s linear infinite; }
@keyframes quizSpin { to { transform: rotate(360deg); } }

/* Resultado */
.quiz-result { display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; flex: 1; padding: 6px 0; }
.quiz-result__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; }
.quiz-result__badge--low { background: rgba(143,168,155,0.22); color: var(--evergreen); }
.quiz-result__badge--medium { background: rgba(201,163,104,0.22); color: #8A6A2C; }
.quiz-result__badge--high { background: rgba(192,106,76,0.16); color: var(--clay-2); }
.quiz-result h2 { font-size: clamp(1.4rem,4vw,2rem); margin: 0 0 26px; }
.quiz-result p { color: var(--ink-soft); max-width: 50ch; margin: 0 auto 16px; }
.quiz-result__note { font-size: 0.82rem; color: var(--ink-mute); margin: -4px auto 28px; }
.quiz-result__cta { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 28px; width: 100%; }
.quiz-result__alt { margin-top: 14px; }
.quiz-result__alt a { font-size: 0.85rem; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px; }
.quiz-result__alt a:hover { color: var(--ink-soft); }
.quiz-crisis { margin-top: 28px; background: var(--linen); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 16px 18px; font-size: 0.88rem; color: var(--ink); text-align: left; }
.quiz-crisis strong { color: var(--clay-2); display: block; margin-bottom: 4px; }

.quiz-restart { margin-top: 20px; font-size: 0.85rem; color: var(--ink-mute); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Medidor de score — mostra visualmente onde a pontuação cai entre os 3 níveis */
.quiz-gauge { width: 100%; max-width: 420px; margin: 36px auto 28px; }
.quiz-gauge__track { position: relative; display: flex; height: 10px; border-radius: var(--r-pill); overflow: visible; background: var(--linen); }
.quiz-gauge__seg { display: block; height: 100%; }
.quiz-gauge__seg:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.quiz-gauge__seg:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.quiz-gauge__seg--low { background: var(--sage); }
.quiz-gauge__seg--medium { background: var(--ochre); }
.quiz-gauge__seg--high { background: var(--clay); }
.quiz-gauge__marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--evergreen); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.quiz-gauge__value { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-size: 0.74rem; font-weight: 700; color: var(--evergreen); white-space: nowrap; background: var(--surface); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); }
.quiz-gauge__labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-mute); }
.quiz-gauge__labels span:nth-child(2) { flex: 1; text-align: center; }

/* Painel "como chegamos a esse resultado" — transparência do cálculo */
.quiz-breakdown { width: 100%; max-width: 460px; margin: 0 auto 28px; background: var(--bone); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 20px; text-align: left; }
.quiz-breakdown__label { font-size: 0.78rem; font-weight: 600; color: var(--evergreen); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.quiz-breakdown__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-chip { display: inline-flex; align-items: center; font-size: 0.82rem; color: var(--evergreen); background: var(--surface); border: 1px solid var(--line-2); padding: 6px 13px; border-radius: var(--r-pill); }

/* Contagem de progresso textual (a11y) */
.quiz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .quiz-hero { padding: 128px 0 22px; }
  .quiz-card { border-radius: var(--r); min-height: 460px; }
  .quiz-meta { padding: 16px 20px 0; }
  .quiz-stage { padding: 20px 20px 26px; }
  .quiz-opt { padding: 13px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-screen, .quiz-screen--out { animation: none; }
}