/* Quiz do site da Loreta Andrade (página quiz/ e o destaque na home), gerado por refazer/fontes/loreta-andrade/paginas_quiz.py.
   Base: o quiz.css da KAIEN, com os tokens deste site (--fundo, --fundo-2, --texto, --suave, --corpo, --acento, --acento-forte,
   --sobre-acento, --linha, --foco, --raio, --serif, --sans, --ease); nenhuma cor escrita aqui, para o tema claro/escuro trocar.
   Sem JS: a lista inteira, cada resposta num <details>. Com JS (.quiz-vivo): uma pergunta por vez. */
.pagina-quiz .dentro{max-width:880px}
.quiz-cabeca{padding:clamp(40px,8vw,96px) 0 24px}
.quiz-titulo{font-size:clamp(2rem,1.2rem + 3.6vw,3.6rem);line-height:1.04;letter-spacing:-.025em;margin:.3em 0 .4em;text-wrap:balance}
.quiz-sem-js{color:var(--suave);font-size:.95rem}
.quiz-sem-js[hidden]{display:none}

.quiz-perguntas{list-style:none;margin:0;padding:0;display:grid;gap:20px;counter-reset:q}
.quiz-q{border:1px solid var(--linha);border-radius:var(--raio);background:var(--fundo-2);padding:clamp(20px,4vw,36px)}
.quiz-q[hidden]{display:none}
.quiz-q{scroll-margin-top:calc(var(--topo-h, 76px) + 96px)}
/* .botao do site define display: o [hidden] do navegador perderia (o Começar apareceria sem JS) */
.quiz [hidden],.quiz-cabeca [hidden]{display:none!important}
.quiz-meta{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.quiz-n{font-family:var(--sans);color:var(--suave);font-size:.85rem;letter-spacing:.04em}
.quiz-enunciado{font-size:clamp(1.2rem,1rem + 1vw,1.6rem);line-height:1.25;margin:0 0 20px;text-wrap:pretty}
.quiz-enunciado:focus{outline:none}
.quiz-enunciado:focus-visible{outline:3px solid var(--foco);outline-offset:4px;border-radius:4px}
.quiz-opcoes{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.quiz-opcao{display:flex;gap:12px;align-items:flex-start;color:var(--corpo);line-height:1.45}
.quiz-letra{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;border:1px solid var(--suave);
  font-family:var(--sans);font-size:.78rem;color:var(--texto)}
.quiz-texto{padding-top:3px}

/* com JS: a alternativa vira um botão do tamanho da linha */
.quiz-botao{all:unset;box-sizing:border-box;display:flex;gap:12px;align-items:flex-start;width:100%;padding:14px 16px;cursor:pointer;
  border:1px solid var(--linha);border-radius:calc(var(--raio) * .75);background:var(--fundo);color:var(--corpo);
  transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease)}
.quiz-botao:hover:not(:disabled){border-color:var(--acento);color:var(--texto)}
.quiz-botao:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.quiz-botao:disabled{cursor:default}
.quiz-vivo .quiz-opcao{display:block}
.quiz-opcao.certa .quiz-botao{border-color:var(--acento);background:var(--fundo-2);color:var(--texto)}
.quiz-opcao.certa .quiz-letra{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.quiz-opcao.errada .quiz-botao{border-style:dashed;color:var(--suave)}
.quiz-opcao.errada .quiz-texto{text-decoration:line-through;text-decoration-thickness:1px}

.quiz-resposta{border-top:1px solid var(--linha);padding-top:14px}
.quiz-resposta summary{cursor:pointer;color:var(--texto);font-weight:600;list-style:none;display:inline-flex;gap:8px;align-items:center}
.quiz-resposta summary::-webkit-details-marker{display:none}
.quiz-resposta summary::before{content:"+";font-family:var(--sans);color:var(--acento-forte)}
.quiz-resposta[open] summary::before{content:"\2212"}
.quiz-resposta summary:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:4px}
.quiz-resposta p{color:var(--corpo);line-height:1.6;margin:.8em 0}
.quiz-veredito{font-weight:700;color:var(--texto)}
.quiz-veredito:empty{display:none}
.quiz-certa span:nth-of-type(1){font-family:var(--sans);color:var(--acento-forte)}
.quiz-fonte{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:.92rem}
.quiz-fonte cite{font-style:normal;color:var(--suave)}

.quiz-acoes{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.quiz-acoes:empty{display:none}
.quiz-painel{position:sticky;top:72px;z-index:2;padding:12px 0;background:var(--fundo)}
.quiz-painel[hidden]{display:none}
.quiz-barra{height:4px;border-radius:999px;background:var(--linha);overflow:hidden}
.quiz-barra span{display:block;height:100%;width:var(--progresso,0%);background:var(--acento);transition:width .4s var(--ease)}
.quiz-topo{display:flex;justify-content:space-between;gap:12px;margin:10px 0 0;font-family:var(--sans);font-size:.85rem;color:var(--suave)}

/* antes de começar, com JS: só a chamada e o botão */
.quiz-vivo:not(.quiz-jogando) .quiz-perguntas{display:none}
.quiz-terminou .quiz-perguntas{display:grid}
.quiz-terminou .quiz-q{opacity:.92}
.quiz-q.certa{border-color:var(--acento)}
.quiz-q.errada{border-style:dashed}

/* placar */
.quiz-fim{margin:8px 0 32px;padding:clamp(24px,5vw,48px);border:1px solid var(--suave);border-radius:var(--raio);background:var(--fundo-2)}
.quiz-fim[hidden]{display:none}
.quiz-placar{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;align-items:center}
.quiz-anel{grid-row:span 2;width:clamp(96px,22vw,140px);height:auto;transform:rotate(-90deg)}
.quiz-anel circle{fill:none;stroke-width:8}
.quiz-anel-trilho{stroke:var(--linha)}
.quiz-anel-arco{stroke:var(--acento);stroke-linecap:round;stroke-dasharray:var(--placar,0) 100}
.quiz-nota{font-size:clamp(2.6rem,2rem + 3vw,4rem);line-height:1;margin:0;letter-spacing:-.03em}
.quiz-nota:focus{outline:none}
.quiz-nota span{color:var(--suave);font-size:.5em;letter-spacing:0}
.quiz-faixas{list-style:none;margin:24px 0 0;padding:0}
.quiz-faixa[hidden]{display:none}
.quiz-faixa h3{margin:0 0 .3em;font-size:1.3rem}
.quiz-faixa p{color:var(--corpo);margin:0;line-height:1.6}
.quiz-status{min-height:1.4em;color:var(--texto);margin:0}
.quiz-copia{user-select:all;font-family:var(--sans);font-size:.85rem;padding:12px;border:1px dashed var(--suave);border-radius:8px;color:var(--corpo)}
.quiz-copia[hidden]{display:none}
.quiz-resumo-t{margin:24px 0 0;color:var(--suave);font-family:var(--sans);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}

.quiz-cta{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin:40px 0 16px;
  padding:clamp(24px,5vw,40px);border-radius:var(--raio);background:var(--fundo-2);border:1px solid var(--linha)}
.quiz-cta h2{margin:0;font-size:clamp(1.3rem,1rem + 1.2vw,1.8rem);max-width:28ch}
.quiz-aviso{color:var(--suave);font-size:.88rem;line-height:1.55;margin:0 0 64px}

/* destaque na home */
.quiz-destaque-grade{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.quiz-destaque-n{font-size:clamp(5rem,14vw,11rem);line-height:.8;margin:0;color:var(--acento);font-weight:700;letter-spacing:-.05em}
@media (max-width:640px){.quiz-destaque-grade{grid-template-columns:1fr}.quiz-destaque-n{display:none}}

@media (prefers-reduced-motion:no-preference){
  .quiz-jogando .quiz-q:not([hidden]){animation:quiz-entra .45s var(--ease) both}
  .quiz-anel-arco{transition:stroke-dasharray 1.2s var(--ease) .2s}
  @keyframes quiz-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.quiz-botao,.quiz-barra span{transition:none}}

/* ajustes do site da Loreta: títulos em serifa, aviso educativo visível no topo, tema da pergunta e CTA com dois botões */
.quiz-titulo,.quiz-enunciado,.quiz-nota,.quiz-faixa h3,.quiz-cta h2,.quiz-destaque h2{font-family:var(--serif)}
.quiz-tema{font:600 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--acento)}
.quiz-aviso-topo{margin:16px 0 0;padding:12px 16px;border:1px solid var(--linha);border-left:3px solid var(--acento);
  border-radius:calc(var(--raio) * .5);background:var(--fundo-2);color:var(--texto)}
.quiz-cta p{margin:.4em 0 0;color:var(--corpo);max-width:48ch}
.quiz-cta-acoes{display:flex;flex-wrap:wrap;gap:12px}