/* =====================================================================
   QUIZ "QUAL CADEIRA VOCÊ TEM OCUPADO?" — ESTILO
   Escola Mais Profundo
   Usa os tokens (cores, fontes) definidos em style.css —
   aqui só o que é específico da experiência do quiz.
===================================================================== */

.quiz-page{ padding:80px 0 120px; }
.quiz-shell{ max-width:640px; margin:0 auto; }

.screen{ display:none; }
.screen.active{ display:block; animation:qFade .35s ease; }
@keyframes qFade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* Tela 1 — intro */
#screen-intro h1{ font-size:clamp(30px,4.4vw,44px); margin:16px 0 22px; font-weight:400; max-width:16ch; }
.intro-texto{ color:var(--text-soft); font-size:16px; white-space:pre-line; margin-bottom:34px; max-width:52ch; }

/* Progresso */
.quiz-step-label{ font-family:var(--font-label); font-size:12px; letter-spacing:0.08em; color:var(--text-soft); text-transform:uppercase; margin-bottom:14px; }
.quiz-progress{ height:2px; background:var(--line); margin-bottom:44px; position:relative; }
.quiz-progress-bar{ height:100%; background:var(--latao); width:0%; transition:width .35s ease; }

/* Cartão de pergunta */
.q-card h2{ font-size:clamp(21px,2.8vw,28px); font-weight:400; margin-bottom:28px; max-width:24ch; line-height:1.3; }
.q-options{ display:flex; flex-direction:column; gap:12px; }
.q-option{ position:relative; }
.q-option input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; }
.q-option label{
  display:block; padding:19px 22px; border:1px solid var(--line); background:var(--bg-elevated-2);
  font-size:15px; color:var(--off-white); cursor:pointer; transition:border-color .18s ease, background .18s ease;
  line-height:1.5;
}
.q-option label:hover{ border-color:var(--azul-claro); }
.q-option input:checked + label{ border-color:var(--latao); background:var(--azul-institucional); }
.q-option input:focus-visible + label{ outline:2px solid var(--azul-claro); outline-offset:2px; }

.quiz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.quiz-nav .btn[disabled]{ opacity:0.3; pointer-events:none; }

/* Tela 3 — captura de lead */
#screen-gate h2{ font-size:clamp(22px,3vw,28px); font-weight:400; max-width:20ch; margin-top:14px; }
#screen-gate > p{ color:var(--text-soft); margin:14px 0 26px; max-width:46ch; font-size:15px; }
.quiz-field{ margin-bottom:20px; }
.quiz-field label{ display:block; font-family:var(--font-label); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-soft); margin-bottom:8px; }
.quiz-field input{
  width:100%; padding:15px 18px; background:var(--bg-elevated-2); border:1px solid var(--line);
  color:var(--off-white); font-family:var(--font-body); font-size:15px; border-radius:1px;
}
.quiz-field input:focus{ outline:none; border-color:var(--latao); }
.quiz-checkbox{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-soft); cursor:pointer; margin-bottom:26px; line-height:1.5; }
.quiz-checkbox input{ margin-top:3px; accent-color:var(--latao); flex-shrink:0; }
.quiz-consent{ font-size:12.5px; color:var(--text-soft); margin-top:18px; line-height:1.6; }
.quiz-consent a{ color:var(--azul-claro); text-decoration:underline; }
.quiz-erro{ display:none; color:#E5A3A3; font-size:13.5px; margin:0 0 22px; padding:12px 16px; background:rgba(229,163,163,0.08); border:1px solid rgba(229,163,163,0.25); }

/* Tela 4 — resultado */
.result-abertura{ font-size:15.5px; color:var(--text-soft); margin-bottom:6px; }
.result-titulo{ font-size:clamp(30px,4.6vw,44px); font-weight:400; margin-bottom:22px; max-width:18ch; }
.result-intro{ font-size:16.5px; color:var(--off-white); max-width:56ch; line-height:1.75; margin-bottom:44px; }

.result-block{ padding:30px 0; border-top:1px solid var(--line); }
.result-block h3{ font-size:16px; font-family:var(--font-label); font-weight:500; letter-spacing:0.03em; color:var(--azul-claro); margin-bottom:16px; text-transform:none; }
.result-block ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.result-block li{ font-size:15px; color:var(--text-soft); padding-left:22px; position:relative; line-height:1.6; }
.result-block li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:1px; background:var(--latao); }
.result-block p{ font-size:15px; color:var(--text-soft); line-height:1.7; }
.result-block.highlight{ background:var(--bg-elevated); padding:26px 28px; border:none; margin:18px 0; }
.result-block.highlight h3{ color:var(--latao-suave); }
.result-block.highlight p{ color:var(--off-white); font-size:15.5px; }

.frase-seguranca{ font-style:italic; font-family:var(--font-display); color:var(--text-soft); font-size:16px; text-align:center; max-width:44ch; margin:50px auto; line-height:1.6; }

.result-cta-band{ background:var(--bg-elevated); text-align:center; padding:56px 32px; margin:20px 0 44px; }
.result-cta-band h2{ font-size:clamp(24px,3.2vw,32px); font-weight:400; max-width:22ch; margin:0 auto 14px; }
.result-cta-band p{ color:var(--text-soft); max-width:42ch; margin:0 auto 30px; font-size:15px; }
.result-cta-band .btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.result-recomendacoes h3{ font-family:var(--font-label); font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-soft); margin-bottom:20px; font-weight:500; }
.rec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rec-card{ display:block; border:1px solid var(--line); padding:22px; background:var(--bg-elevated-2); }
.rec-card .tag{ font-family:var(--font-label); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--azul-claro); }
.rec-card h3{ font-size:15.5px; margin-top:8px; color:var(--off-white); font-family:var(--font-body); font-weight:500; }

@media (max-width:620px){
  .quiz-page{ padding:56px 0 80px; }
  .q-option label{ padding:16px 18px; font-size:14.5px; }
  .rec-grid{ grid-template-columns:1fr; }
  .result-cta-band{ padding:40px 22px; }
}