/* ============================================================
   Diagnóstico de maturidade
   Roda inteiramente no navegador. Nenhuma resposta é transmitida.
   ============================================================ */

.diag{max-width:820px;margin:0 auto;}

/* ---------------- barra de progresso ---------------- */
.diag__topo{
  position:sticky;top:calc(var(--topo) + 62px);z-index:20;
  background:linear-gradient(180deg,var(--ground) 76%,rgba(8,15,19,0) 100%);
  padding:14px 0 20px;
}
.diag__meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:9px;
}
.diag__meta b{color:var(--teal);font-weight:600;font-variant-numeric:tabular-nums;}
.diag__barra{height:2px;background:var(--line);overflow:hidden;}
.diag__barra span{
  display:block;height:100%;width:0;background:var(--teal);
  transition:width .32s cubic-bezier(.2,.7,.3,1);
}

/* ---------------- passo ---------------- */
.passo{display:none;}
.passo.ativo{display:block;animation:entra .34s cubic-bezier(.2,.7,.3,1) both;}
@keyframes entra{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.passo__eixo{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber);margin:0 0 12px;
}
.passo h2{margin:0 0 10px;font-size:clamp(21px,2.6vw,29px);line-height:1.24;}
.passo__lei{
  font-family:var(--f-mono);font-size:11.5px;color:var(--text-faint);
  margin:0 0 22px;letter-spacing:.03em;
}
.passo__ajuda{
  color:var(--text-dim);font-size:15px;line-height:1.6;margin:0 0 24px;
  border-left:2px solid var(--line);padding-left:15px;
}

/* ---------------- opções ---------------- */
.opcoes{display:grid;gap:9px;margin-bottom:26px;}
.opcao{
  display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:15px 17px;transition:border-color .18s ease,background .18s ease;
}
.opcao:hover{border-color:var(--teal-deep);background:var(--surface-2);}
.opcao input{position:absolute;opacity:0;width:0;height:0;}
.opcao__tecla{
  flex:none;width:22px;height:22px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--f-mono);font-size:11px;color:var(--text-faint);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  transition:all .18s ease;
}
.opcao__txt{color:var(--text);line-height:1.45;}
.opcao__txt small{display:block;color:var(--text-faint);font-size:13px;margin-top:3px;line-height:1.45;}
.opcao input:checked + .opcao__tecla{background:var(--teal);border-color:var(--teal);color:#04100E;font-weight:700;}
.opcao:has(input:checked){border-color:var(--teal);background:var(--surface-2);}
.opcao input:focus-visible + .opcao__tecla{outline:2px solid var(--teal);outline-offset:2px;}

/* seleção múltipla do passo de contexto */
.opcao--multi .opcao__tecla{border-radius:2px;}

/* ---------------- navegação ---------------- */
.diag__nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.diag__nav .btn{margin:0;}
.diag__dica{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  color:var(--text-faint);margin-left:auto;
}
.diag__dica kbd{
  font-family:var(--f-mono);background:var(--surface);border:1px solid var(--line);
  border-radius:2px;padding:1px 6px;color:var(--text-dim);font-size:11px;
}

/* ---------------- campos do passo inicial ---------------- */
.campo{margin-bottom:22px;}
.campo > label{
  display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:9px;
}
.campo select{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:3px;
  color:var(--text);font-family:var(--f-body);font-size:16px;padding:13px 15px;
}
.campo select:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

/* ---------------- resultado ---------------- */
.resultado{display:none;}
.resultado.ativo{display:block;animation:entra .4s cubic-bezier(.2,.7,.3,1) both;}

.nota{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:3px;background:var(--surface);
  padding:28px 30px;margin-bottom:14px;
}
.nota__n{
  font-family:var(--f-display);font-size:64px;line-height:1;font-weight:660;
  color:var(--teal);font-variant-numeric:tabular-nums;
}
.nota__n sup{font-size:22px;font-weight:400;color:var(--text-faint);top:-1.4em;}
.nota__faixa{font-family:var(--f-display);font-size:23px;font-weight:620;margin:0 0 5px;}
.nota__txt{flex:1;min-width:250px;color:var(--text-dim);line-height:1.55;margin:0;}

.nota--critico .nota__n,.nota--critico .nota__faixa{color:var(--red);}
.nota--inicial .nota__n,.nota--inicial .nota__faixa{color:var(--amber);}
.nota--desenv .nota__n,.nota--desenv .nota__faixa{color:var(--amber);}
.nota--consol .nota__n,.nota--consol .nota__faixa{color:var(--teal);}

/* eixos */
.eixos{display:grid;gap:2px;margin:26px 0 30px;}
.eixo{
  display:grid;grid-template-columns:1fr 58px;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.eixo__nome{font-size:15.5px;color:var(--text);margin:0;}
.eixo__lei{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);display:block;margin-top:3px;}
.eixo__b{grid-column:1 / -1;height:2px;background:var(--line);overflow:hidden;}
.eixo__b span{display:block;height:100%;background:var(--teal);transition:width .8s cubic-bezier(.2,.7,.3,1);}
.eixo__p{
  font-family:var(--f-mono);font-size:15px;text-align:right;color:var(--teal);
  font-variant-numeric:tabular-nums;margin:0;
}
.eixo--baixo .eixo__b span,.eixo--baixo .eixo__p{background:var(--red);color:var(--red);}
.eixo--baixo .eixo__p{background:none;}
.eixo--medio .eixo__b span,.eixo--medio .eixo__p{background:var(--amber);color:var(--amber);}
.eixo--medio .eixo__p{background:none;}

/* alerta de alto risco */
.risco{
  border:1px solid var(--red-deep);border-left:3px solid var(--red);
  background:linear-gradient(90deg,rgba(168,27,16,.14),rgba(168,27,16,.04));
  border-radius:3px;padding:24px 26px;margin:0 0 30px;
}
.risco h3{color:var(--red-soft);margin:0 0 10px;font-size:19px;}
.risco p{margin:0 0 10px;line-height:1.62;}
.risco p:last-child{margin-bottom:0;}
.risco b{color:var(--red-soft);}

/* prioridades */
.prio{display:grid;gap:10px;margin:0 0 32px;counter-reset:p;}
.prio__i{
  display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:17px 19px;
}
.prio__i::before{
  counter-increment:p;content:counter(p,decimal-leading-zero);
  font-family:var(--f-mono);font-size:13px;color:var(--amber);padding-top:2px;
}
.prio__i h4{margin:0;font-size:16.5px;line-height:1.35;}
.prio__i p{margin:0;color:var(--text-dim);font-size:14.5px;line-height:1.58;}
.prio__i em{font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:var(--text-faint);display:block;margin-top:7px;}

/* privacidade do próprio diagnóstico */
.selo{
  border:1px solid var(--teal-deep);border-radius:3px;
  background:rgba(15,142,130,.09);padding:20px 24px;margin:0 0 30px;
}
.selo h3{color:var(--teal);margin:0 0 8px;font-size:16px;}
.selo p{margin:0;color:var(--text-dim);font-size:14.5px;line-height:1.6;}

/* ---------------- impressão ---------------- */
@media print{
  /* Linearizacao para o papel. O site monta as secoes numa grade de duas
     colunas, trilho mais conteudo, com cerca de 1126 px de largura. A folha
     tem 816 px. Sem desmontar essa grade o relatorio inteiro cai fora da
     area imprimivel e o PDF sai praticamente em branco, com apenas a coluna
     lateral na primeira pagina. */
  @page{size:A4;margin:14mm 12mm;}
  html,body{width:auto !important;}
  .wrap{max-width:none !important;padding:0 !important;margin:0 !important;}
  .bloco{display:block !important;padding:0 !important;}
  .trilho{display:none !important;}
  .diag{max-width:none !important;margin:0 !important;}

  .alertbar,.nav,.rodape,.diag__topo,.passo,.diag__nav,.selo,
  .pular-para-conteudo,.imprimir-nao{display:none !important;}
  body{background:#fff !important;color:#111 !important;}
  .hero,.hero__fundo,.hero__scrim{display:none !important;}
  main{padding:0 !important;}
  .resultado{display:block !important;}
  .nota,.prio__i,.eixo,.risco{
    background:#fff !important;border-color:#bbb !important;
    break-inside:avoid;page-break-inside:avoid;
  }
  .nota__n,.nota__faixa,.eixo__p{color:#111 !important;}
  .eixo__b{background:#ddd !important;}
  .eixo__b span{background:#555 !important;}
  .risco{border-color:#111 !important;border-left-width:3px !important;background:#fff !important;}
  .risco h3,.risco b{color:#111 !important;}
  .prio__i h4,.eixo__nome,h1,h2,h3{color:#111 !important;}
  .prio__i p,.nota__txt,.eixo__lei,.prio__i em{color:#333 !important;}
  a{color:#111 !important;text-decoration:none;}
  .rodape-impressao{display:block !important;}
}
.rodape-impressao{display:none;margin-top:26px;padding-top:14px;border-top:1px solid #bbb;
  font-size:11px;color:#444;line-height:1.5;}

@media (max-width:640px){
  .nota{padding:22px;gap:18px;}
  .nota__n{font-size:52px;}
  .diag__dica{display:none;}
}