/* ============================================================
   Quiz da Delegação — carregado DEPOIS de styles.css,
   reaproveita os tokens do :root (navy, red, paper...).
   ============================================================ */

.quiz-body{
  background:
    radial-gradient(900px 480px at 50% -12%, rgba(0,44,102,.09), transparent 62%),
    var(--paper-2);
  min-height:100vh;display:flex;flex-direction:column;
}
.quiz-main{flex:1;padding-block:clamp(36px,6vw,64px) clamp(56px,8vw,88px)}
.wrap--quiz{max-width:760px}

.tela[hidden]{display:none}

.quiz-h1{font-size:clamp(27px,4.2vw,40px);font-weight:800;margin:0 0 20px;max-width:22ch}
.quiz-lead{font-size:clamp(16.5px,2vw,18.5px);margin:0 0 32px;max-width:60ch}

.quiz-nota{
  font-size:14px;line-height:1.65;color:var(--muted);margin:26px 0 0;max-width:62ch;
}
.quiz-nota strong{color:var(--ink);font-weight:600}

/* ---------- Intro: os 4 pilares ---------- */
.pilares-intro{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 30px;margin-bottom:32px;box-shadow:var(--shadow-sm);
}
.pilares-intro > p{margin:0 0 20px;font-size:16px}
.pilares-intro ol{list-style:none;margin:0;padding:0;counter-reset:pi;display:grid;gap:16px}
.pilares-intro li{counter-increment:pi;position:relative;padding-left:46px}
.pilares-intro li::before{
  content:counter(pi);position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.pilares-intro b{display:block;color:var(--navy);font-size:16.5px;font-weight:700;line-height:1.35}
.pilares-intro span{display:block;font-size:15px;line-height:1.5;color:var(--body)}

/* display:flex venceria o [hidden] do navegador — precisa ser reafirmado */
.retomar[hidden]{display:none}
.retomar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--red-100);border:1px solid rgba(199,36,55,.28);
  border-radius:var(--radius-sm);padding:16px 20px;margin-bottom:24px;
}
.retomar p{margin:0;font-size:15px;color:var(--navy)}

/* ---------- Progresso ---------- */
.progresso{margin-bottom:26px}
.progresso__meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.progresso__pilar{
  font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--red);
}
.progresso__contador{font-size:14px;font-weight:600;color:var(--muted)}
.progresso__trilho{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.progresso__barra{
  display:block;height:100%;width:0;border-radius:999px;background:var(--navy);
  transition:width .28s ease;
}

/* ---------- Cartão da pergunta ---------- */
.cartao-pergunta{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,4vw,40px);box-shadow:var(--shadow);
}
.enunciado{
  margin:0 0 28px;font-size:clamp(19px,2.6vw,24px);line-height:1.42;
  font-weight:600;color:var(--navy);
}
.enunciado b{font-weight:800;color:var(--red)}

.opcoes{display:grid;gap:11px}
.opcao{
  display:flex;align-items:center;gap:14px;width:100%;
  background:var(--paper-2);border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 20px;font:inherit;font-size:16.5px;font-weight:600;color:var(--ink);
  text-align:left;cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.opcao:hover{border-color:var(--navy);background:var(--white);transform:translateX(3px)}
.opcao__dot{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  border:2px solid #b9c3d6;background:var(--white);position:relative;
}
.opcao:hover .opcao__dot{border-color:var(--navy)}
.opcao.is-on{border-color:var(--red);background:var(--white)}
.opcao.is-on .opcao__dot{border-color:var(--red)}
.opcao.is-on .opcao__dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--red);
}

.quiz-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px}
.quiz-nav--fim{justify-content:center;margin-top:30px}
.quiz-nav__dica{font-size:13px;color:var(--muted)}
#btn-voltar{background:none;border:0;padding:0;font:inherit;cursor:pointer}
#btn-voltar:disabled{opacity:.34;cursor:default;text-decoration:none}
#btn-refazer{background:none;border:0;padding:0;font:inherit;cursor:pointer}
@media (max-width:520px){ .quiz-nav__dica{display:none} }

/* ---------- Resultado ---------- */
.score{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--navy);border-radius:var(--radius);
  padding:26px 30px;margin-bottom:28px;
}
.score__num{display:flex;align-items:baseline;gap:8px;color:#fff}
.score__num b{font-size:clamp(44px,7vw,60px);font-weight:800;line-height:1}
.score__num span{font-size:16px;font-weight:600;color:#a9bddc;white-space:nowrap}
.score__leg{margin:0;flex:1;min-width:230px;font-size:14.5px;line-height:1.6;color:#c3d1e8}

.res-texto{
  font-size:clamp(16.5px,2vw,18px);line-height:1.68;margin:0 0 40px;max-width:64ch;
}

.res-sub{font-size:19px;font-weight:800;margin:0 0 18px}

/* Medidores: uma cor só (mesma medida em 4 pilares).
   O vermelho marca o pilar mais frágil e vem sempre com rótulo em texto. */
.medidores{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:20px}
.medidor__topo{
  display:flex;align-items:baseline;gap:10px;margin-bottom:9px;flex-wrap:wrap;
}
.medidor__nome{font-weight:700;color:var(--navy);font-size:16.5px}
.medidor__tag{font-size:13px;font-weight:600;color:var(--muted)}
.medidor--fragil .medidor__tag{color:var(--red)}
.medidor__val{margin-left:auto;font-weight:800;color:var(--navy);font-size:17px}
.medidor__val span{font-weight:600;color:var(--muted);font-size:13.5px}

.medidor__trilho{
  height:12px;border-radius:999px;background:var(--line);overflow:hidden;
}
.medidor__preenche{
  display:block;height:100%;border-radius:999px;background:var(--navy);
  min-width:4px;transition:width .5s ease;
}
.medidor--fragil .medidor__preenche{background:var(--red)}

.acao{
  background:var(--white);border:1px solid var(--line);border-left:5px solid var(--red);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:26px 30px;margin-bottom:36px;box-shadow:var(--shadow-sm);
}
.acao__rot{
  margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--red);
}
.acao h3{font-size:21px;font-weight:800;margin:0 0 10px}
.acao p{margin:0;font-size:16px;line-height:1.62}

.res-cta{
  background:var(--navy);color:#c3d1e8;border-radius:var(--radius);
  padding:clamp(28px,4vw,40px);text-align:center;
}
.res-cta h3{color:#fff;font-size:clamp(22px,3vw,28px);font-weight:800;margin:0 0 12px}
.res-cta p{margin:0 0 24px;font-size:15.5px;line-height:1.62;max-width:52ch;margin-inline:auto}
.res-cta__alt{margin:18px 0 0!important;font-size:14px}
.res-cta__alt a{color:#a9bddc}
.res-cta[data-tom="suave"]{background:var(--paper-2);color:var(--body);border:1px solid var(--line)}
.res-cta[data-tom="suave"] h3{color:var(--navy)}
.res-cta[data-tom="suave"] .res-cta__alt a{color:var(--navy)}