/*
 * Quiz do Cronograma na landing, antes do checkout.
 *
 * Tudo escopado em #quiz e com prefixo qz-: a landing já usa .step, .wrap e
 * `section` com padding próprio, e o quiz não pode herdar nem vazar estilo.
 * Os componentes (opções, pilares, meses, chips) seguem os da ferramenta de
 * membros, na paleta da landing — é a mesma pessoa vendo as mesmas perguntas
 * de novo se precisar refazer depois da compra.
 */

#quiz{
  --qz-line:#E4E0DA;
  --qz-soft:#FFF0F4;
  --qz-green:#2E8B57;
  --qz-red:#c0392b;
  --qz-yellow:#F2B705;
  background:var(--cream);
  scroll-margin-top:0;
}
#quiz .qz-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
#quiz .qz-of{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:14px;color:var(--gray)}
#quiz .qz-rail{height:5px;background:var(--qz-line);margin-bottom:28px}
#quiz .qz-rail span{display:block;height:100%;width:0;background:var(--pink);transition:width .3s ease}

#quiz .qz-card{background:var(--white);border:1px solid var(--qz-line);padding:36px;min-width:0}
@media (max-width:720px){ #quiz .qz-card{padding:22px 16px} }

#quiz .qz-step{display:none}
#quiz .qz-step.is-active{display:block;animation:qz-fade .28s ease}
@keyframes qz-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#quiz .qz-step h3{font-size:clamp(28px,4vw,42px);margin-bottom:12px}
#quiz .qz-lead{font-size:16px;line-height:1.55;color:var(--gray);max-width:70ch}

#quiz .qz-fld{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin-bottom:7px}
#quiz .qz-help{font-size:13px;color:var(--gray);margin-top:6px}
#quiz input[type=text],#quiz input[type=email],#quiz select{
  width:100%;font-family:'Inter',sans-serif;font-size:16px;padding:12px 14px;
  border:1px solid var(--qz-line);border-radius:6px;background:#fff;color:var(--black)
}
#quiz input:focus,#quiz select:focus{outline:2px solid var(--black);outline-offset:1px;border-color:var(--black)}
#quiz .qz-fields{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);margin-top:24px}
#quiz .qz-fields.three{grid-template-columns:repeat(3,1fr)}
#quiz .qz-fields .full{grid-column:1/-1}

#quiz .qz-opts{display:grid;gap:12px;margin-top:24px}
#quiz .qz-opts.two{grid-template-columns:repeat(2,1fr)}
#quiz .qz-opts.three{grid-template-columns:repeat(3,1fr)}
#quiz .qz-opts.four{grid-template-columns:repeat(4,1fr)}
#quiz .opt{
  display:flex;flex-direction:column;justify-content:flex-start;
  border:1.5px solid var(--qz-line);background:#fff;border-radius:8px;padding:15px 16px;cursor:pointer;
  text-align:left;font-family:'Inter',sans-serif;color:var(--black);transition:border-color .15s,background .15s
}
#quiz .opt:hover{border-color:var(--black)}
#quiz .opt.sel{border-color:var(--pink);background:var(--qz-soft)}
#quiz .opt .t{font-weight:700;font-size:14.5px;display:block}
#quiz .opt .d{font-size:12.5px;color:var(--gray);line-height:1.45;margin-top:5px;display:block}

#quiz .qz-warn{margin-top:18px;border-left:4px solid var(--qz-yellow);background:#fffaeb;padding:14px 16px;font-size:13.5px;line-height:1.5;color:#6b5300}
#quiz .qz-warn.stop{border-color:var(--qz-red);background:#fdecea;color:#8c2b20}
#quiz .hidden{display:none}

#quiz .qz-pillars{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);margin-top:24px}
#quiz .qz-pillar{border:1px solid var(--qz-line);border-radius:8px;padding:18px;text-align:center}
#quiz .qz-pillar .name{font-weight:700;font-size:15px}
#quiz .qz-pillar .desc{font-size:12px;color:var(--gray);line-height:1.4;margin:7px 0 12px;min-height:34px}
#quiz .qz-stepper{display:flex;align-items:center;justify-content:center;gap:10px}
#quiz .qz-stepper button{width:36px;height:36px;border:1px solid var(--qz-line);background:var(--cream);border-radius:6px;font-weight:700;font-size:18px;cursor:pointer;color:var(--black)}
#quiz .qz-stepper button:hover{background:var(--qz-soft);color:var(--pink)}
#quiz .qz-stepper .val{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px;color:var(--pink);min-width:36px}
#quiz .qz-sum{margin-top:16px;font-size:14px;font-weight:700;color:var(--gray)}
#quiz .qz-sum b{font-family:'Barlow Condensed',sans-serif;font-size:20px}
#quiz .qz-sum.ok b{color:var(--qz-green)}
#quiz .qz-sum.bad b{color:var(--qz-red)}

#quiz .qz-months{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
#quiz .qz-month{border:1px solid var(--qz-line);border-radius:8px;padding:14px;min-width:0}
#quiz .qz-month h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
#quiz .qz-month input[type=text]{margin-top:8px;font-size:13px;padding:8px 10px}
#quiz .chips{display:flex;flex-wrap:wrap;gap:6px}
#quiz .chip{border:1px solid var(--qz-line);background:var(--cream);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:600;color:var(--gray);cursor:pointer;font-family:'Inter',sans-serif}
#quiz .chip:hover{border-color:var(--black)}
#quiz .chip.sel{background:var(--black);border-color:var(--black);color:#fff}
#quiz .qz-formato{margin-top:20px}

#quiz .qz-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
/* Mesma especificidade de #quiz .hidden e declarada depois: sem esta linha o
   display:flex acima vence e os botões aparecem na tela final. */
#quiz .qz-nav.hidden{display:none}
#quiz .qz-hint{font-size:13.5px;color:var(--gray);flex:1 1 260px;min-height:1.4em}
#quiz .qz-hint.erro{color:var(--qz-red);font-weight:600}
#quiz .qz-btns{display:flex;gap:10px}
#quiz .qz-back{
  background:transparent;border:1.5px solid var(--black);color:var(--black);cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:17px;padding:14px 22px
}
#quiz .qz-back:disabled{opacity:.35;cursor:default}
#quiz .qz-nav .cta-btn:disabled{opacity:.6;cursor:wait;transform:none}

#quiz .qz-final{text-align:center;padding:12px 0}
#quiz .qz-final .qz-lead{margin:0 auto 28px}
#quiz .cta-sub{color:var(--gray)}

@media (max-width:900px){
  #quiz .qz-opts.four,#quiz .qz-pillars,#quiz .qz-months{grid-template-columns:repeat(2,1fr)}
  #quiz .qz-opts.three,#quiz .qz-fields.three{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  #quiz .qz-opts.two,#quiz .qz-opts.three,#quiz .qz-opts.four,
  #quiz .qz-fields,#quiz .qz-fields.three,#quiz .qz-months{grid-template-columns:1fr}
  #quiz .qz-nav{flex-direction:column;align-items:stretch}
  #quiz .qz-btns{justify-content:space-between}
  #quiz .qz-btns .cta-btn{flex:1;justify-content:center}
  #quiz .qz-pillars{gap:10px}
  #quiz .qz-pillar{padding:14px 6px}
  #quiz .qz-stepper{gap:4px}
  #quiz .qz-stepper button{width:32px;height:32px}
}