/* ============================================================
   Quiz de qualificação (lead scoring) — estilos compartilhados.
   Usado pela home (tema .qz--karppa) e pela /sessao/ (tema
   .qz--nicolas). Cada tema só redefine as variáveis --qz-*;
   a estrutura é a mesma nas duas páginas.
   ============================================================ */

.qz {
  /* tema padrão = home (azul profundo + laranja Karppa) */
  --qz-accent: #FE7959;             /* laranja claro: legível sobre fundo escuro */
  --qz-text: #FFFFFF;
  --qz-text-soft: rgba(255, 255, 255, 0.72);
  --qz-line: rgba(255, 255, 255, 0.38);   /* trilho da barra de progresso */
  --qz-ghost: rgba(255, 255, 255, 0.07);  /* hover do botão Voltar */

  /* Opções CLARAS sobre a página escura (decisão do dono p/ conversão:
     são o elemento mais claro da tela, o olho vai direto pra elas, e
     mantêm o padrão dos campos do formulário). Texto escuro e em negrito. */
  --qz-opt-bg: #E7EAF6;                   /* blue-50 da paleta */
  --qz-opt-bg-active: #FFFFFF;
  --qz-opt-text: #0C1322;                 /* azul quase preto da marca */
  --qz-opt-line: rgba(12, 19, 34, 0.2);
  --qz-dot-line: rgba(12, 19, 34, 0.4);
  --qz-opt-accent: #E63905;               /* laranja Karppa: seleção/hover */

  max-width: 640px;
  margin: 0 auto;
  color: var(--qz-text);
  text-align: left;
}
/* o foco inicial vai para o contêiner (leitores de tela); sem anel visual */
.qz:focus, .qz:focus-visible { outline: none; box-shadow: none; }

.qz--nicolas {
  --qz-accent: #C9A84C;             /* dourado do perfil */
  --qz-text: #F7F3EC;
  --qz-text-soft: rgba(247, 243, 236, 0.72);
  --qz-line: rgba(232, 216, 158, 0.45);

  /* mesma régua dos campos do formulário da captura: creme + tinta escura */
  --qz-opt-bg: #F7F3EC;
  --qz-opt-bg-active: #FFFFFF;
  --qz-opt-text: #1a1405;
  --qz-opt-line: rgba(26, 20, 5, 0.18);
  --qz-dot-line: rgba(26, 20, 5, 0.35);
  --qz-opt-accent: #8C7234;               /* dourado escuro: visível no claro */
}

/* ---------- Cabeçalho: confirmação + convite ----------
   Margens sempre explícitas: a home não tem reset universal de margin,
   então sem isso os <p>/<h3> herdariam margens diferentes por página.
   Textos CENTRALIZADOS (regra do dono: no mobile, preferência por texto
   centralizado; também casa com os títulos centralizados das duas páginas).
   Só as alternativas ficam à esquerda, por serem lista com marcador. */
.qz-head { margin: 0 0 22px; text-align: center; }
.qz-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: var(--qz-accent);
  font-weight: 700;
  font-size: 1.06rem;
}
.qz-check svg { width: 22px; height: 22px; flex: 0 0 22px; }
.qz-sub {
  margin: 10px 0 0;
  color: var(--qz-text-soft);
  font-size: 0.98rem;
  line-height: 1.55;
}
.qz-sub strong { color: var(--qz-text); }

/* ---------- Progresso ---------- */
.qz-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.qz-progress__bar {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--qz-line);
  overflow: hidden;
}
.qz-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: var(--qz-accent);
  transition: width 0.3s ease;
}
.qz-progress__label {
  font-size: 0.85rem;
  color: var(--qz-text-soft);
  white-space: nowrap;
}

/* ---------- Pergunta e opções ---------- */
.qz-q {
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 16px;
  outline: none;
  text-align: center;
  /* fixa a cor: os estilos globais de h3 das páginas não devem vazar aqui */
  color: var(--qz-text);
}
/* o foco no título é programático (leitores de tela); sem anel visual,
   e sem o box-shadow do :focus-visible global da home */
.qz-q:focus, .qz-q:focus-visible { outline: none; box-shadow: none; }
.qz-opts {
  display: grid;
  gap: 10px;
}
.qz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--qz-opt-line);
  background: var(--qz-opt-bg);
  color: var(--qz-opt-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 700; /* negrito: destaca o texto sobre o fundo claro (pedido do dono) */
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.qz-opt:hover { border-color: var(--qz-opt-accent); }
.qz-opt:active { transform: scale(0.99); }
.qz-opt:focus-visible { outline: 2px solid var(--qz-accent); outline-offset: 2px; box-shadow: none; }
.qz-opt[aria-pressed="true"] {
  border-color: var(--qz-opt-accent);
  background: var(--qz-opt-bg-active);
  /* reforça a borda da opção escolhida (1px + 1px) sem mudar o layout */
  box-shadow: 0 0 0 1px var(--qz-opt-accent);
}
.qz-dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--qz-dot-line);
  position: relative;
  transition: border-color 0.18s ease;
}
.qz-opt[aria-pressed="true"] .qz-dot { border-color: var(--qz-opt-accent); }
.qz-opt[aria-pressed="true"] .qz-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--qz-opt-accent);
}

/* ---------- Navegação (voltar / pular) ---------- */
.qz-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.qz-nav button {
  background: none;
  border: none;
  color: var(--qz-text-soft);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.qz-nav button:hover { color: var(--qz-text); background: var(--qz-ghost); }
.qz-nav button:focus-visible { outline: 2px solid var(--qz-accent); outline-offset: 2px; box-shadow: none; }
.qz-nav button[disabled] { opacity: 0.35; cursor: default; background: none; }

@media (prefers-reduced-motion: reduce) {
  .qz-progress__fill, .qz-opt, .qz-dot, .qz-nav button { transition: none; }
}