/* ============================================================
   Blue Growth — quiz + opt-in que aparece antes do Telegram.
   Mesmos tokens do design system: nenhuma cor ou medida literal.
   ============================================================ */

.quiz{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5);
  background:var(--scrim);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  animation:bg-fade-up var(--dur-fast) var(--ease-out);
}

.quiz__card{
  position:relative;
  width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--sp-5);
  padding:var(--sp-6);
  background:var(--surface-overlay);
  border:1px solid var(--stroke-strong);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-overlay),var(--inner-top-light-strong);
  animation:bg-fade-up var(--dur-base) var(--ease-out);
}

/* ---------- topo: progresso ---------- */

.quiz__topo{display:flex;flex-direction:column;gap:var(--sp-3)}
.quiz__linha{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}

.quiz__fechar{
  width:32px;height:32px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);border:1px solid transparent;
  background:transparent;color:var(--text-muted);
  cursor:pointer;transition:var(--t-color);
}
.quiz__fechar:hover{background:rgba(255,255,255,.06);color:var(--text-hi)}

.quiz__trilha{
  height:6px;border-radius:var(--r-pill);
  background:var(--viz-track);overflow:hidden;
}
.quiz__barra{
  height:100%;border-radius:var(--r-pill);
  background:var(--grad-accent-bar);
  box-shadow:var(--glow-blue-md);
  transition:width var(--dur-slow) var(--ease-out);
}

/* ---------- perguntas ---------- */

.quiz__pergunta{text-wrap:pretty}

.quiz__opcoes{display:flex;flex-direction:column;gap:var(--sp-3)}

.quiz__opcao{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  width:100%;padding:var(--sp-4);text-align:left;
  border-radius:var(--r-md);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  color:var(--text-hi);
  font:var(--fw-medium) var(--fs-body)/1.4 var(--font-ui);
  cursor:pointer;
  transition:var(--t-color),var(--t-elevate);
}
.quiz__opcao i{font-size:13px;color:var(--text-dim);flex:none;transition:var(--t-color)}
.quiz__opcao:hover{
  border-color:var(--stroke-accent);
  background:var(--surface-accent-soft);
  transform:translateY(-1px);
}
.quiz__opcao:hover i{color:var(--blue-300)}
.quiz__opcao.is-ativa{border-color:var(--stroke-accent);background:var(--surface-accent-soft)}

.quiz__voltar{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);margin-top:calc(var(--sp-2) * -1);
  border:0;border-radius:var(--r-pill);background:transparent;
  color:var(--text-muted);
  font:var(--fw-medium) var(--fs-sm)/1 var(--font-ui);
  cursor:pointer;transition:var(--t-color);
}
.quiz__voltar i{transform:rotate(180deg);font-size:12px}
.quiz__voltar:hover{background:rgba(255,255,255,.06);color:var(--text-hi)}

/* ---------- opt-in ---------- */

.quiz__form{display:flex;flex-direction:column;gap:var(--sp-4)}
.quiz__campo{display:flex;flex-direction:column;gap:var(--sp-2)}
.quiz__rotulo{font:var(--fw-medium) var(--fs-sm)/1.4 var(--font-ui);color:var(--text-body)}

.quiz__campo input{
  height:var(--control-md);
  padding:0 var(--sp-3);
  background:var(--surface-input);
  border:1px solid var(--stroke);
  border-radius:var(--r-md);
  box-shadow:var(--inner-top-light);
  color:var(--text-hi);
  font:var(--fw-regular) var(--fs-body)/1.4 var(--font-ui);
  transition:var(--t-color),box-shadow var(--dur-fast) var(--ease-out);
}
.quiz__campo input:focus{
  outline:none;
  border-color:var(--stroke-focus);
  box-shadow:var(--glow-focus);
}

.quiz__consent{display:flex;align-items:flex-start;gap:var(--sp-3);cursor:pointer}
.quiz__consent input{
  width:18px;height:18px;flex:none;margin-top:1px;
  accent-color:var(--blue-500);cursor:pointer;
}

.quiz__enviar{width:100%;margin-top:var(--sp-1)}

/* ---------- celular ---------- */

@media (max-width:760px){
  .quiz{padding:var(--sp-3);align-items:flex-end}
  .quiz__card{
    max-width:none;max-height:94vh;
    padding:var(--sp-5);
    border-radius:var(--r-xl) var(--r-xl) var(--r-md) var(--r-md);
  }
}

/* Campo-isca contra robôs: fora da tela, nunca visível para pessoas. */
.quiz__isca{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}