/* ============================================================================
   ConVencer — Módulo Quiz "Diagnóstico"
   Isca digital: 7 perguntas → score + gargalo → botão WhatsApp Naiane.
   Usado em: (1) hero da landing, (2) página /diagnostico.
   Wrappers de layout (posicionamento no hero, centralização na página
   standalone) ficam nas próprias páginas — este arquivo cobre apenas o card
   e o conteúdo interno (prefixo qz-).
   ============================================================================ */

.qz-card {
  width:90%; max-width:720px; display:flex; flex-direction:column; min-height:700px;
  background: var(--bg-card, #0f0f0f); border:1px solid rgba(201,149,42,0.35);
  border-radius: 20px; padding: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.qz-progresso { height:4px; background:var(--border, rgba(255,255,255,.08)); border-radius:99px; overflow:hidden; display:none; margin-bottom:6px; }
.qz-progresso.on { display:block; }
.qz-progresso i { display:block; height:100%; width:0%; background:var(--gold, #c9952a); border-radius:99px; transition:width .45s ease; }
.qz-passo { font-size:12px; color:var(--text-dim, #8a857a); text-align:center; letter-spacing:.08em; text-transform:uppercase; display:none; margin-bottom:10px; }
.qz-passo.on { display:block; }
.qz-tela { flex:1; display:none; flex-direction:column; justify-content:center; gap:14px; animation:qzEntra .4s ease both; }
.qz-tela.ativa { display:flex; }
@keyframes qzEntra { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.qz-pergunta { font-family:var(--font-display, inherit); font-weight:700; font-size:23px; line-height:1.32; color:var(--text, #f2efe6); padding-bottom:.06em; }
.qz-opcoes { display:flex; flex-direction:column; gap:9px; }
.qz-op {
  background:var(--bg, #080808); border:1px solid var(--border-mid, #2a2a2a);
  border-radius:12px; padding:15px 17px; font-size:16px; color:var(--text, #F0EDE8);
  font-weight:500; line-height:1.45;
  text-align:left; cursor:pointer; display:flex; align-items:center; gap:10px;
  transition:border-color .15s, background .15s; font-family:inherit; width:100%;
}
.qz-op:hover { border-color:var(--gold, #c9952a); }
.qz-op.sel { border-color:var(--gold, #c9952a); background:rgba(201,149,42,0.12); }
.qz-op .qz-letra { flex:none; width:24px; height:24px; border-radius:7px; border:1px solid rgba(201,149,42,0.45); color:var(--gold, #c9952a); font-weight:700; font-size:12px; display:grid; place-items:center; }
.qz-nai { display:flex; align-items:flex-start; gap:10px; }
.qz-nai img { width:82px; flex:none; animation:qzPop .5s cubic-bezier(.34,1.56,.64,1) both, qzVida 4.2s ease-in-out .6s infinite; }
.qz-fala {
  position:relative; background:var(--bg, #080808); border:1px solid rgba(201,149,42,0.35);
  border-radius:12px; padding:11px 15px 12px; font-size:14.5px; line-height:1.5; color:var(--text, #f2efe6);
  margin-top:10px; animation:qzPop .5s cubic-bezier(.34,1.56,.64,1) .08s both;
}
.qz-fala::before {
  content:''; position:absolute; left:-6px; top:16px; width:11px; height:11px;
  background:var(--bg, #0b0b0b); transform:rotate(45deg);
  border-left:1px solid rgba(201,149,42,0.35); border-bottom:1px solid rgba(201,149,42,0.35);
}
@keyframes qzPop { from{opacity:0;transform:scale(.55) translateY(12px)} 60%{opacity:1;transform:scale(1.05)} to{opacity:1;transform:scale(1)} }
@keyframes qzVida { 0%,100%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-3px) rotate(-1deg)} 65%{transform:translateY(-1px) rotate(.8deg)} }
@media (prefers-reduced-motion: reduce){ .qz-tela{animation:none} .qz-nai img{animation:none} .qz-start-img{animation:none} }
.qz-start-img { width:130px; margin:0 auto; animation:qzPop .55s cubic-bezier(.34,1.56,.64,1) both, qzFlutua 3.6s ease-in-out .6s infinite; }
@keyframes qzFlutua { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.qz-hero-foto { position:relative; border-radius:14px; overflow:hidden; height:300px; }
.qz-hero-foto img { width:100%; height:100%; object-fit:cover; object-position:100% 40%; display:block; }
.qz-hero-foto::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%); }
.qz-hero-foto span { position:absolute; left:12px; bottom:9px; z-index:1; font-size:11.5px; color:var(--gold-light, #e0b45a); font-weight:600; }
.qz-start-titulo { font-family:var(--font-display, inherit); font-weight:700; font-size:27px; text-align:center; line-height:1.3; color:var(--text, #f2efe6); }
.qz-start-areas { color:var(--text-mid, #A09890); font-size:15px; text-align:center; line-height:1.55; }
.qz-campo label { display:block; font-size:12.5px; color:var(--text-mid, #b8b3a6); margin-bottom:5px; }
.qz-campo { margin-bottom:11px; }
.qz-campo input {
  width:100%; background:var(--bg, #0b0b0b); border:1px solid var(--border-mid, rgba(255,255,255,.14));
  border-radius:11px; padding:12px 14px; color:var(--text, #f2efe6); font-size:15px; font-family:inherit;
}
.qz-campo input:focus { outline:none; border-color:var(--gold, #c9952a); }
.qz-lgpd { font-size:11.5px; color:var(--text-dim, #8a857a); line-height:1.5; }
.qz-score { display:flex; align-items:baseline; gap:8px; justify-content:center; font-family:var(--font-display, inherit); }
.qz-score b { font-size:38px; color:var(--gold, #c9952a); }
.qz-score small { color:var(--text-dim, #8a857a); font-size:13px; }
.qz-areas { display:flex; flex-direction:column; gap:9px; }
.qz-area-cab { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:4px; color:var(--text-mid, #b8b3a6); }
.qz-nota-ok{color:#4caf7d} .qz-nota-medio{color:var(--gold-light, #e0b45a)} .qz-nota-ruim{color:#e05c5c}
.qz-barra { height:6px; background:var(--border, rgba(255,255,255,.08)); border-radius:99px; overflow:hidden; }
.qz-barra i { display:block; height:100%; border-radius:99px; transition:width .8s ease; }
.qz-barra i.ok{background:#4caf7d} .qz-barra i.medio{background:var(--gold, #c9952a)} .qz-barra i.ruim{background:#e05c5c}
.qz-gargalo { background:var(--bg, #0b0b0b); border:1px solid rgba(201,149,42,0.3); border-radius:12px; padding:14px; }
.qz-gargalo h3 { font-family:var(--font-display, inherit); font-size:15px; font-weight:700; color:var(--gold-light, #e0b45a); line-height:1.3; margin:0 0 6px; }
.qz-gargalo p { color:var(--text-mid, #b8b3a6); font-size:13px; line-height:1.55; margin:0; }
.qz-cta.btn-primary {
  background: linear-gradient(135deg, var(--gold, #C9952A), var(--gold-light, #E0AA3E));
  border: none; border-radius: 10px;
  padding: 17px 26px; font-size: 17px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(201,149,42,0.35);
  animation: qzPulsa 2.2s ease-in-out 1s infinite;
  transition: transform .12s ease, box-shadow .2s ease;
}
.qz-cta.btn-primary:hover { background: linear-gradient(135deg, var(--gold-light, #E0AA3E), var(--gold-light, #E0AA3E)); transform: translateY(-2px); box-shadow: 0 14px 38px rgba(201,149,42,0.5); }
@keyframes qzPulsa { 0%,100% { box-shadow: 0 10px 30px rgba(201,149,42,0.35); } 50% { box-shadow: 0 12px 40px rgba(201,149,42,0.6); } }
@media (prefers-reduced-motion: reduce){ .qz-cta.btn-primary { animation:none; } }
.qz-ghost { background:none; border:none; color:var(--text-dim, #5a5450); font-size:13.5px; font-weight:500; line-height:1.4; cursor:pointer; padding:8px; font-family:inherit; }
.qz-ghost:hover { color:var(--text, #f2efe6); }

@media (max-width: 768px) {
  .qz-card { width:100%; max-width:none; min-height: 520px; padding: 20px; }
  .qz-hero-foto { height: 190px; }
  .qz-start-titulo { font-size: 21px; }
  .qz-pergunta { font-size: 19px; }
  .qz-op { font-size: 15px; padding: 13px 15px; }
  .qz-nai img { width: 64px; }
}