/* Quiz da live · estilo. So tokens do design system (ds/).
   Titulos em --font-serif-display (Playfair, substituto oficial da Tramillas) a pedido da Nanny: serifa no titulo, sans no corpo.
   Elementos novos, montados com tokens e a aprovar pela Evelyn: barra de progresso, opcao de resposta,
   circulo da nota, barras do Mapa de Evolucao. */

body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);-webkit-text-size-adjust:100%}
.ql-col{max-width:calc(var(--sp-24) * 6);margin:0 auto;padding:0 var(--sp-4)}

/* ---------- tipo ---------- */
.ql-display,.ql-pergunta,.ql-h1,.ql-h2,.ql-trava,.ql-fecho__grande,.ql-lista-ok__titulo{font-family:var(--font-serif-display);color:var(--text-display);letter-spacing:var(--ls-display);outline:none}
.ql-display{font-size:var(--fs-web-h1);line-height:var(--lh-snug);font-weight:var(--w-bold)}
.ql-pergunta{font-size:var(--fs-web-h3);line-height:var(--lh-snug);font-weight:var(--w-bold)}
.ql-h1{font-size:var(--fs-web-h2);line-height:var(--lh-snug);font-weight:var(--w-bold);margin-bottom:var(--sp-4)}
.ql-h2{font-size:var(--fs-web-h3);line-height:var(--lh-snug);font-weight:var(--w-bold);margin:var(--sp-2) 0 var(--sp-4)}
.ql-texto{font-size:var(--fs-web-body);line-height:var(--lh-normal);margin:0 0 var(--sp-4)}
.ql-apoio{font-size:var(--fs-web-body);line-height:var(--lh-normal);color:var(--ink-600);margin-top:var(--sp-2)}
.ql-letra-miuda{font-size:var(--fs-web-small);color:var(--ink-600);margin-top:var(--sp-3);line-height:var(--lh-normal)}
.ql-letra-miuda a{color:var(--text-link)}
.ql-centro{text-align:center}
.ql-ph{background:var(--cream-300);color:var(--rust-800);padding:0 var(--sp-1);border-radius:var(--r-xs)}

/* ---------- quiz: topo ---------- */
.ql-topo{position:sticky;top:0;z-index:3;background:var(--surface-page);padding:var(--sp-3) var(--sp-4) var(--sp-2)}
.ql-topo__linha{max-width:calc(var(--sp-24) * 5);margin:0 auto var(--sp-2);display:flex;justify-content:space-between;align-items:center}
.ql-voltar{background:none;border:0;padding:var(--sp-2);margin-left:calc(var(--sp-2) * -1);color:var(--ink-600);font:inherit;font-size:var(--fs-web-small);cursor:pointer}
.ql-contador{font-size:var(--fs-web-small);font-weight:var(--w-semibold);color:var(--ink-600)}
.ql-progresso{max-width:calc(var(--sp-24) * 5);margin:0 auto;height:var(--sp-1);background:var(--paper-3);border-radius:var(--r-pill);overflow:hidden}
.ql-progresso__barra{height:100%;width:0;background:var(--rust-700);border-radius:var(--r-pill);transition:width var(--dur-slow) var(--ease-out)}

/* ---------- quiz: palco ---------- */
.ql-palco{max-width:calc(var(--sp-24) * 5);margin:0 auto;padding:var(--sp-4) var(--sp-4) var(--sp-8)}
.ql-tela{opacity:0;transform:translateY(var(--sp-2));transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.ql-tela--in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ql-tela{transition:none;transform:none}}

.ql-opcoes{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}
.ql-opcao{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--sp-16);text-align:left;cursor:pointer;
  font:inherit;font-size:var(--fs-web-body);line-height:var(--lh-snug);color:var(--text-body);
  padding:var(--sp-4) var(--sp-5);background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--r-lg);
  transition:var(--transition-ui);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ql-opcao:hover{border-color:var(--border-strong)}
.ql-opcao.is-on{background:var(--surface-highlight);border-color:var(--rust-700);box-shadow:inset 0 0 0 1px var(--rust-700)}
.ql-opcao:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ql-opcao__caixa{flex:none;width:var(--sp-5);height:var(--sp-5);border:2px solid var(--border-strong);border-radius:var(--r-xs);background:var(--surface-page)}
.ql-opcao.is-on .ql-opcao__caixa{background:var(--rust-700);border-color:var(--rust-700);box-shadow:inset 0 0 0 3px var(--surface-page)}
.ql-continuar{margin-top:var(--sp-6)}
.ql-continuar:disabled{opacity:.45;cursor:not-allowed}

/* abertura: capa clara no formato do quiz da Bettina (selos, chamada + italico, foto embaixo) */
body.ql-quiz--abertura{background:var(--surface-raised)}
.ql-abertura{display:flex;flex-direction:column;gap:var(--sp-5);padding-top:var(--sp-4)}
.ql-abertura__marca .nf-wordmark{font-size:var(--fs-web-h3)}
.ql-selos{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.ql-selo{font-size:var(--fs-web-small);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-sm);border:1px solid var(--border-hairline);background:var(--surface-card);color:var(--text-display)}
.ql-selo--forte{background:var(--olive-900);border-color:var(--olive-900);color:var(--text-on-dark)}
.ql-abertura .ql-display{font-weight:var(--w-regular);font-size:var(--fs-web-h1);line-height:var(--lh-snug)}
.ql-abertura .ql-display em{color:var(--rust-700)}
.ql-abertura__texto{font-size:var(--fs-web-body);line-height:var(--lh-normal)}
.ql-abertura__texto b{color:var(--text-display)}
.ql-abertura__nota{font-size:var(--fs-web-small);line-height:var(--lh-normal);color:var(--ink-600);margin-top:calc(var(--sp-2) * -1)}
.ql-hero__linha2{font-family:var(--font-serif-display);font-style:italic;font-weight:var(--w-regular);font-size:var(--fs-web-h3);line-height:var(--lh-snug);color:var(--text-on-dark);margin:calc(var(--sp-3) * -1) 0 var(--sp-5)}
.ql-abertura__foto{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:var(--r-lg);margin-top:var(--sp-2)}

/* botao largo: quebra linha em vez de vazar do cartao no celular */
.nf-btn--block{box-sizing:border-box;width:100%;max-width:100%;white-space:normal;line-height:var(--lh-snug);text-align:center}

/* formulario */
.ql-form{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6)}
.ql-form .nf-input{font-size:var(--fs-web-body)} /* 18px: o Safari do iPhone nao da zoom no foco */
.ql-erro{font-size:var(--fs-web-small);color:var(--rust-700);font-weight:var(--w-semibold)}
.ql-form button:disabled{opacity:.7}

/* ---------- secoes (resultado e live) ---------- */
.ql-sec{padding:var(--sp-10) 0}
.ql-sec--raised{background:var(--surface-raised)}
.ql-sec--topo{padding:var(--sp-6) 0}
.ql-sec--escura{background:var(--surface-inverse);background-image:var(--grain);color:var(--text-on-dark)}
.ql-sec--escura .ql-display,.ql-sec--escura .ql-trava,.ql-sec--escura .ql-fecho__grande{color:var(--text-on-dark)}

.ql-lista-ok{display:flex;flex-direction:column;gap:var(--sp-3)}
.ql-lista-ok__titulo{font-size:var(--fs-web-h3);line-height:var(--lh-snug);font-weight:var(--w-bold)}
.ql-lista-ok .ql-texto{margin:0}

/* nota */
.ql-nota{display:flex;align-items:center;gap:var(--sp-5);margin:var(--sp-4) 0}
.ql-nota__circulo{flex:none;width:calc(var(--sp-24) + var(--sp-6));height:calc(var(--sp-24) + var(--sp-6));border-radius:var(--r-pill);
  border:var(--sp-1) solid var(--cream-300);box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.ql-nota__circulo b{font-family:var(--font-serif-display);font-size:var(--fs-web-h1);line-height:1;color:var(--text-on-dark-emphasis)}
.ql-nota__circulo span{font-size:var(--fs-web-small);color:var(--text-on-dark-muted);margin-left:var(--sp-1)}
.ql-nota__rotulo-eyebrow{font-size:var(--fs-web-small);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-weight:var(--w-bold);color:var(--text-on-dark-muted)}
.ql-nota__rotulo{font-family:var(--font-serif-display);font-size:var(--fs-web-h2);line-height:var(--lh-snug);font-weight:var(--w-bold);color:var(--text-on-dark)}
.ql-escura__leitura{font-size:var(--fs-web-body);line-height:var(--lh-normal);color:var(--text-on-dark-muted);margin-bottom:var(--sp-6)}
.ql-sec--escura .nf-dotted{margin:var(--sp-6) 0}
.ql-trava{font-size:var(--fs-web-h1);line-height:var(--lh-tight);font-weight:var(--w-bold);margin:var(--sp-2) 0 var(--sp-4);color:var(--text-on-dark-emphasis)}
.ql-sec--escura .ql-trava{color:var(--text-on-dark-emphasis)}
.ql-escura__frase{font-size:var(--fs-web-h3);line-height:var(--lh-snug);color:var(--text-on-dark)}

/* barras do Mapa */
.ql-barras{display:flex;flex-direction:column;gap:var(--sp-4);margin:var(--sp-5) 0}
.ql-barra__topo{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);font-size:var(--fs-web-body);margin-bottom:var(--sp-2)}
.ql-barra__topo b{font-variant-numeric:tabular-nums}
.ql-barra__topo em{font-style:normal;margin-left:var(--sp-2);font-size:var(--fs-web-small);font-weight:var(--w-semibold);color:var(--rust-700);text-transform:uppercase;letter-spacing:var(--ls-eyebrow)}
.ql-barra__trilho{height:var(--sp-3);background:var(--paper-3);border-radius:var(--r-pill);overflow:hidden;flex:1}
.ql-barra__valor{height:100%;background:var(--olive-600);border-radius:var(--r-pill)}
.ql-barra.is-baixa .ql-barra__valor{background:var(--rust-700)}
.ql-barra.is-baixa .ql-barra__topo b{color:var(--rust-700)}
.ql-nota-pe{font-size:var(--fs-web-small);line-height:var(--lh-normal);color:var(--ink-600)}

.ql-ecos{margin-bottom:var(--sp-5)}
.ql-ecos li,.ql-bullets li{line-height:var(--lh-normal);font-size:var(--fs-web-body)}
.ql-proximo{display:flex;flex-direction:column}
.ql-proximo .ql-h2{margin-top:var(--sp-1)}

.ql-pendente{font-size:var(--fs-web-small);background:var(--cream-300);color:var(--rust-800);padding:var(--sp-3);border-radius:var(--r-sm);margin:var(--sp-2) 0}

/* fechamento */
.ql-fecho{text-align:center;padding:var(--sp-16) 0}
.ql-fecho__grande{font-size:var(--fs-web-h1);line-height:var(--lh-tight);font-weight:var(--w-bold);margin-bottom:var(--sp-4)}
.ql-fecho .ql-escura__frase{margin-bottom:var(--sp-6)}
.ql-link-claro{color:var(--text-on-dark-emphasis);font-size:var(--fs-web-body)}
.ql-assinatura{margin-top:var(--sp-8);text-align:center}

/* ---------- live ---------- */
.ql-hero{padding:var(--sp-16) 0 var(--sp-12)}
.ql-hero .ql-display{font-size:var(--fs-web-hero);line-height:var(--lh-tight);margin:var(--sp-3) 0 var(--sp-5)}
.ql-hero__sub{font-size:var(--fs-web-h3);line-height:var(--lh-snug);color:var(--text-on-dark-muted);margin-bottom:var(--sp-8)}
.ql-bullets li{font-size:var(--fs-web-body);line-height:var(--lh-normal)}
.ql-convite .ql-h2{margin-bottom:var(--sp-2)}
.ql-quem{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--sp-6);align-items:center}
.ql-quem__foto{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ql-quem__linha{font-size:var(--fs-web-body);line-height:var(--lh-normal);margin-top:var(--sp-3)}
.ql-antes-depois{display:flex;flex-direction:column;gap:var(--sp-6);margin-top:var(--sp-6)}
.ql-ad__linha{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}
.ql-ad__rotulo{flex:none;width:var(--sp-12);font-size:var(--fs-web-small);color:var(--ink-600)}
.ql-barra__valor--antes{background:var(--sand-400)}
.ql-placeholder{border:2px dashed var(--rust-700);border-radius:var(--r-lg);padding:var(--sp-10) var(--sp-4);text-align:center;font-weight:var(--w-bold);color:var(--rust-700)}
@media (max-width:820px){.ql-quem{grid-template-columns:1fr}.ql-quem__foto{max-width:calc(var(--sp-24) * 3);margin:0 auto}}

/* ---------- rodape ---------- */
.ql-rodape{border-top:1px solid var(--border-hairline);padding:var(--sp-6) var(--sp-4) var(--sp-8);text-align:center}
.ql-rodape p.ql-rodape__link{margin-top:var(--sp-2);font-size:var(--fs-meta)}
.ql-rodape__link a{color:var(--ink-600)}
.ql-rodape p{max-width:calc(var(--sp-24) * 5);margin:0 auto;font-size:var(--fs-web-small);line-height:var(--lh-normal);color:var(--ink-600)}

@media (min-width:821px){
  .ql-display{font-size:var(--fs-web-hero)}
  .ql-pergunta{font-size:var(--fs-web-h2)}
  .ql-sec{padding:var(--sp-16) 0}
}

/* Botao do grupo do WhatsApp. EXCECAO ao design system, pedida pela Nanny em 28/10: cores exatas do WhatsApp
   (fora dos tokens de proposito). Nao reaproveitar estes valores em outro componente. */
.ql-btn-whats{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);box-sizing:border-box;width:100%;min-height:64px;text-wrap:balance;
  padding:var(--sp-3) var(--sp-5);border-radius:999px;font-size:var(--fs-web-body);line-height:var(--lh-snug);background:linear-gradient(90deg,#3DA34E 0%,#379548 50%,#308641 100%);
  color:#FFFFFF;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;text-align:center;
  text-decoration:none;box-shadow:0 6px 18px rgba(48,134,65,0.30);transition:filter .15s ease;-webkit-tap-highlight-color:transparent}
.ql-btn-whats:hover,.ql-btn-whats:active{filter:brightness(0.95);color:#FFFFFF}
.ql-btn-whats:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.ql-btn-whats__icone{flex:none}
.ql-texto-longo{display:flex;flex-direction:column;gap:var(--sp-3)}
.ql-texto-longo p,.ql-texto-longo li{font-size:var(--fs-web-body);line-height:var(--lh-normal)}
.ql-texto-longo .ql-h2{margin-top:var(--sp-5)}
.ql-texto-longo a{color:var(--rust-700)}
.ql-tel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
.ql-tel .nf-input{width:100%;min-width:0;box-sizing:border-box}