/* ============================================================================
   Diagnóstico de Maturidade em IA — visual do site BlueBed (Manual de Marca v2)
   Só Inter, paleta Navy / Blue / Azure / Mist, cartões arredondados e pílulas.
   Os nomes de classe e os ids são os mesmos do diagnóstico antigo, então a
   lógica (conteudo.js, app.js e companhia) segue funcionando sem alteração.
   ========================================================================= */
:root{
  --background:#ffffff; --foreground:#0b1420; --ink:#0b1420; --deep:#0b1d35;
  --muted:#54637a; --subtle:#a9b7c8; --line:#dce5f1;
  --surface:#e4ecf7; --surface-2:#d3deee;
  --accent:#0b5dbd; --accent-from:#107de9; --accent-to:#0b5dbd; --sky:#8ec3ff;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; margin:0; padding:0 }
[hidden]{ display:none !important }
[data-foco]:focus{ outline:none }
html{ font-size:16px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth }
html{ font-size:clamp(.875rem, calc(11.714px + .2976vw), 1.125rem) }   /* fonte raiz contínua: 14px em 768, 16px em 1440, teto 18px; sem serrote e acompanha o zoom */
@media (max-width:640px){ html{ font-size:clamp(.875rem, 3.733333vw, .9375rem) } }
body{ background:var(--background); color:var(--foreground); font-family:'Inter',Arial,Helvetica,sans-serif; overflow-x:hidden }
body.travado{ overflow:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul,ol{ list-style:none }
fieldset{ border:0 }
.opcao input{ position:absolute; opacity:0; width:1px; height:1px }
.opcao:focus-within{ box-shadow:inset 0 0 0 2px var(--accent-from) }
input[type=checkbox]{ width:1.15rem; height:1.15rem; margin-top:.1rem; accent-color:var(--accent-from); flex:none }
img,svg{ display:block }
:focus-visible{ outline:2px solid var(--accent-from); outline-offset:3px }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.tnum{ font-variant-numeric:tabular-nums }
.shell{ width:100%; max-width:80rem; margin-inline:auto; padding-inline:1.25rem }
@media (min-width:640px){ .shell{ padding-inline:2rem } }

/* ---------- revelações ---------- */
.rv{ opacity:0; transform:translateY(var(--rv-y,16px)); transition:opacity .8s var(--ease-out) var(--d,0ms), transform .8s var(--ease-out) var(--d,0ms) }
.rv.in{ opacity:1; transform:none }

/* ---------- pílulas ---------- */
.btn{ display:inline-flex; align-items:center; gap:.75rem; border-radius:9999px; font-size:.9375rem; font-weight:500; white-space:nowrap;
  padding:.875rem 1.75rem; transition:transform .35s var(--ease), background .25s, color .25s, border-color .25s }
.btn-primario{ background:var(--ink); color:#fff; padding:.375rem .375rem .375rem 1.5rem }
.btn-primario::after{ content:"→"; display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:9999px; background:#fff; color:var(--ink);
  font-size:1rem; transition:transform .35s var(--ease) }
.btn-fantasma{ border:1px solid var(--line); color:var(--foreground) }
@media (hover:hover){
  .btn:hover{ transform:scale(1.03) }
  .btn-primario:hover::after{ transform:translateX(3px) }
  .btn-fantasma:hover{ border-color:var(--accent-from); color:var(--accent) }
}
.acoes{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem }
.acoes-centro{ justify-content:center; margin-top:2.5rem }
/* as quatro saídas do resultado ficam na mesma linha no computador */
.diag .acoes{ flex-wrap:nowrap; align-items:center }
.diag .acoes .btn{ padding-inline:1.25rem }
.diag .acoes .btn-primario{ padding:.375rem .375rem .375rem 1.25rem }
.diag .acoes #btnPdf{ margin-left:auto }
@media (max-width:860px){
  .diag .acoes{ flex-wrap:wrap }
  .diag .acoes #btnPdf{ margin-left:0 }
}

/* ---------- loader ---------- */
#loader{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  background:var(--ink); color:#fff; border-radius:0 0 2rem 2rem; transition:transform 1s cubic-bezier(.76,0,.24,1) }
#loader.sai{ transform:translateY(-100%) }
#loader .marca{ display:flex; align-items:center; gap:.55rem; font-size:1.625rem; font-weight:600; letter-spacing:-.01em }
#loader .marca svg{ width:1.9rem; height:1.9rem; color:var(--accent-from) }
#loader p{ max-width:26ch; font-size:.875rem; color:rgba(255,255,255,.55); text-align:center }
#loader .trilho{ width:min(22rem,72vw); height:1px; background:rgba(255,255,255,.15) }

/* o mesmo carregamento em todas as páginas: marca, frase, Carregando + contador */
#loader .frase{ max-width:26ch; text-align:center; font-size:.875rem; line-height:1.5; color:rgba(255,255,255,.55) }
#loader .barra{ display:flex; flex-direction:column; gap:.75rem; width:min(22rem,72vw) }
#loader .barra .trilho{ width:100% }
#loader .linha{ display:flex; justify-content:space-between; font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.62) }
#loader .linha span+span{ color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums }
#loader .trilho i{ display:block; height:100%; width:0; background:var(--accent-from) }

/* ---------- selo da submarca ---------- */
.sub{ display:inline-flex; align-items:center; margin-left:.125rem; padding:.2rem .5rem; border-radius:9999px; font-size:.625rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; line-height:1; background:rgba(16,125,233,.12); color:var(--accent) }

/* ---------- cabeçalho ---------- */
.topo{ position:absolute; inset-inline:0; top:0; z-index:50; color:#fff }
.topo .dentro{ max-width:80rem; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem }
@media (min-width:640px){ .topo .dentro{ padding:1.5rem 2rem } }
.marca{ display:inline-flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600; letter-spacing:-.01em; transition:transform .35s var(--ease) }
.marca svg{ width:1.25rem; height:1.25rem; color:var(--accent-from) }
.marca .sub{ background:rgba(142,195,255,.16); color:var(--sky) }
@media (hover:hover){ .marca:hover{ transform:scale(1.04) } }
.topo nav{ display:none; gap:2rem; font-size:.875rem; font-weight:500 }
@media (min-width:1024px){ .topo nav{ display:flex } }
.topo nav a{ opacity:.8; transition:opacity .3s, transform .3s var(--ease) }
@media (hover:hover){ .topo nav a:hover{ opacity:1; transform:translateY(-2px) } }
.topo .direita{ display:flex; align-items:center; gap:.75rem }
.topo-sub, .topo-num{ font-size:.75rem; font-weight:500; color:rgba(255,255,255,.6) }
.topo-num{ font-variant-numeric:tabular-nums }
.topo .fale{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:9999px; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08); font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; transition:background .3s }
.topo .fale:hover{ background:rgba(255,255,255,.18) }
@media (max-width:640px){ .topo .fale{ display:none } }
/* nas etapas internas o topo vira escuro sobre fundo claro */
body:not([data-etapa="intro"]) .topo{ color:var(--foreground) }
body:not([data-etapa="intro"]) .topo nav a[aria-current]{ color:var(--accent) }
body:not([data-etapa="intro"]) .marca .sub{ background:rgba(16,125,233,.12); color:var(--accent) }
body:not([data-etapa="intro"]) .topo .fale{ border-color:var(--line); background:#fff; color:var(--foreground) }
body:not([data-etapa="intro"]) .topo-sub, body:not([data-etapa="intro"]) .topo-num{ color:var(--muted) }

/* ---------- aviso de privacidade ---------- */
.aviso-local{ position:absolute; inset-inline:0; top:1.5rem; z-index:40; display:flex; justify-content:center; gap:.5rem; padding:0 1.25rem;
  font-size:.75rem; color:rgba(255,255,255,.62) }
.aviso-local span{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .9rem; border-radius:9999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06) }
.aviso-local span::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:#34d399 }
.aviso-local a{ align-self:center; color:var(--sky); text-decoration:underline }
body:not([data-etapa="intro"]) .aviso-local{ color:var(--muted) }
body:not([data-etapa="intro"]) .aviso-local span{ border-color:var(--line); background:var(--surface) }

/* ============ ETAPAS ============ */
.etapa{ max-width:80rem; margin-inline:auto; padding:5rem 1.25rem 5rem }
@media (min-width:640px){ .etapa{ padding:6rem 2rem 6rem } }
.etapa[hidden]{ display:none }

/* abertura: cena escura, como o topo das outras páginas */
#etapa-intro{ position:relative; max-width:none; padding:0; background:var(--ink); color:#fff; overflow:hidden }
.intro-grade{ position:relative; z-index:2; max-width:80rem; margin-inline:auto; padding:7rem 1.25rem 4rem }
@media (min-width:640px){ .intro-grade{ padding:7rem 2rem 4rem } }
@media (min-width:1024px){ .intro-grade{ display:grid; align-content:center; min-height:100lvh; padding-bottom:6rem } }
.intro-grade > div{ max-width:34rem }
@media (min-width:1024px){ .intro-grade > div{ max-width:40rem } }
.selo{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:var(--muted) }
.selo::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:currentColor; opacity:.7 }
#etapa-intro .selo{ color:rgba(255,255,255,.75) }
.selo-azul{ color:var(--accent) }
#etapa-intro .selo-azul{ color:var(--sky) }
.titulo{ margin-top:1.25rem; font-size:2.25rem; font-weight:600; line-height:.98; letter-spacing:-.02em }
@media (min-width:640px){ .titulo{ font-size:3rem } }
@media (min-width:768px){ .titulo{ font-size:3.75rem } }
.grad{ color:var(--sky) }                       /* sem gradiente roxo: azul da marca */
.subtitulo{ margin-top:1.5rem; max-width:34rem; font-size:1.0625rem; font-weight:500; line-height:1.5; color:var(--foreground) }
#etapa-intro .subtitulo{ color:rgba(255,255,255,.85) }
.apoio{ margin-top:1rem; max-width:40rem; font-size:.9375rem; line-height:1.6; color:var(--muted) }
#etapa-intro .apoio{ color:rgba(255,255,255,.6) }
#etapa-intro .btn-fantasma{ border-color:rgba(255,255,255,.3); color:#fff }
#etapa-intro .btn-primario{ background:var(--accent-from) }
#etapa-intro .btn-primario::after{ background:#fff; color:var(--accent) }

/* a cena do scanner (imagem entra depois; sem ela, o desenho em código se sustenta) */
.cena{ position:absolute; inset:0; z-index:1; overflow:hidden; background:radial-gradient(60% 50% at 62% 40%, #123762, #060b14 72%) }
.cena .veu{ position:absolute; inset:0 }
@media (min-width:1024px){
  .cena .veu{ background:linear-gradient(90deg, #0B1420 8%, rgba(11,20,32,.92) 32%, rgba(11,20,32,.45) 56%, rgba(11,20,32,.1) 78%),
                        linear-gradient(0deg, var(--ink) 2%, transparent 26%) }
}
@media (max-width:1023px){
  /* no celular a foto fica só na faixa de cima e o texto vem no navy limpo */
  .cena{ inset:0 0 auto 0; height:56vh }
  .cena .veu{ background:linear-gradient(180deg, rgba(11,20,32,.45) 0%, rgba(11,20,32,.05) 26%, rgba(11,20,32,.75) 74%, var(--ink) 97%) }
  .cena img{ object-position:64% 14% }
  .intro-grade{ padding-top:46vh }
}
.cena img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:64% center }
.cena img[hidden]{ display:none }
.cena.com-foto{ background:#0a1424 }
#cenaB, #cenaSinal{ -webkit-mask-image:var(--lente); mask-image:var(--lente);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat }
.cena canvas{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none }
.cena .linha{ position:absolute; inset-inline:0; z-index:3; height:2px;
  background:linear-gradient(90deg, transparent 8%, rgba(142,195,255,.85) 50%, transparent 92%);
  box-shadow:0 0 26px rgba(142,195,255,.7); transition:opacity .6s linear }

/* como funciona */
.como{ position:relative; z-index:2; max-width:80rem; margin-inline:auto; padding:0 1.25rem 5rem }
@media (min-width:640px){ .como{ padding:0 2rem 6rem } }
.passos{ margin-top:1.5rem; display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:768px){ .passos{ grid-template-columns:repeat(3,1fr) } }
.passo{ padding:1.75rem; border-radius:1.25rem; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.passo-n{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:9999px; background:var(--accent-from); color:#fff;
  font-size:.8125rem; font-weight:600 }
.passo-t{ margin-top:1.5rem; font-size:1.25rem; font-weight:600; letter-spacing:-.015em; color:#fff }
.passo-p{ margin-top:.5rem; font-size:.9375rem; line-height:1.55; color:rgba(255,255,255,.6) }

/* ---------- cadastro ---------- */
.centro{ max-width:44rem; margin-inline:auto }
.sub-titulo{ margin-top:1rem; font-size:1.875rem; font-weight:600; letter-spacing:-.02em; line-height:1.1 }
@media (min-width:768px){ .sub-titulo{ font-size:2.25rem } }
.campos{ margin-top:2rem; display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:640px){ .campos{ grid-template-columns:1fr 1fr } }
.f{ display:flex; flex-direction:column; gap:.4rem }
.f label{ font-size:.8125rem; font-weight:600; color:var(--muted) }
.f input, .f select, textarea{ width:100%; border:1px solid var(--line); background:rgba(228,236,247,.45); border-radius:.875rem; padding:.85rem 1rem;
  font:inherit; font-size:.9375rem; color:inherit; outline:none; transition:border-color .3s, background .3s }
.f input:focus, .f select:focus, textarea:focus{ border-color:var(--accent-from); background:#fff }
.armadilha{ position:absolute; left:-9999px }
.consent{ margin-top:1.5rem; display:flex; gap:.75rem; align-items:flex-start; font-size:.875rem; color:var(--muted) }
.consent a{ color:var(--accent); text-decoration:underline }
.erro{ margin-top:.5rem; font-size:.8125rem; font-weight:500; color:#c0392b }

/* ---------- perguntas ---------- */
#etapa-perguntas, #etapa-aberta, #etapa-processando, #etapa-resultado{ max-width:64rem }
.progresso{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.prog-pct{ font-size:.8125rem; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums }
.trilho{ margin-top:.75rem; height:.35rem; border-radius:9999px; background:var(--surface-2); overflow:hidden }
.prog-fill{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--accent-to), var(--accent-from));
  transition:width .5s var(--ease) }
.pergunta-topo{ position:relative; margin-top:3rem }
.numero-fundo{ position:absolute; right:0; top:-1.5rem; font-size:8rem; font-weight:700; line-height:1; color:rgba(11,20,32,.05); pointer-events:none }
.qcat{ font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent) }
.qtexto{ margin-top:1rem; max-width:34ch; font-size:1.875rem; font-weight:600; line-height:1.15; letter-spacing:-.02em }
@media (min-width:768px){ .qtexto{ font-size:2.5rem } }
.opcoes{ margin-top:2.5rem; display:grid; grid-template-columns:1fr; gap:.75rem }
.opcao{ display:flex; align-items:center; gap:1rem; width:100%; padding:1.1rem 1.25rem; border-radius:1rem; background:#fff; text-align:left;
  box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .3s, transform .3s var(--ease), background .3s }
.opcao-letra{ display:grid; place-items:center; width:2rem; height:2rem; flex:none; border-radius:9999px; background:var(--surface);
  font-size:.8125rem; font-weight:600; color:var(--accent) }
.opcao-texto{ font-size:1rem; font-weight:500; line-height:1.4 }
@media (hover:hover){ .opcao:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--accent-from) } }
.opcao.escolhida{ background:var(--ink); color:#fff; box-shadow:none }
.opcao.escolhida .opcao-letra{ background:var(--accent-from); color:#fff }
.aberta-campo{ margin-top:2rem }
textarea{ min-height:10rem; resize:vertical; line-height:1.55 }
.contador{ display:block; margin-top:.5rem; font-size:.75rem; color:var(--muted); text-align:right }
.dica{ margin-top:.75rem; font-size:.8125rem; color:var(--muted) }

/* ---------- processando ---------- */
.proc{ max-width:56rem; margin-inline:auto; text-align:center }
.proc-titulo{ margin-top:1rem; font-size:1.875rem; font-weight:600; letter-spacing:-.02em; line-height:1.1 }
@media (min-width:768px){ .proc-titulo{ font-size:2.5rem } }
.proc-palco{ margin-top:3rem; display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center }
@media (min-width:860px){ .proc-palco{ grid-template-columns:20rem 1fr; gap:3.5rem; text-align:left } }

/* o sonar */
.proc-radar{ position:relative; width:min(20rem,78vw); aspect-ratio:1; margin-inline:auto }
.sonar{ width:100%; height:100%; overflow:visible }
.sonar-anel{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:.6 }
.sonar-eixo{ stroke:rgba(255,255,255,.12); stroke-width:.6 }
.sonar-varre{ transform-origin:100px 100px; animation:gira 2.6s linear infinite; transition:opacity .6s }
.proc-radar.pronto .sonar-varre{ opacity:0 }
.proc-radar.pronto .sonar-area{ filter:drop-shadow(0 0 12px rgba(16,125,233,.55)) }
@keyframes gira{ to{ transform:rotate(360deg) } }
.sonar-area{ fill:rgba(16,125,233,.25); stroke:var(--accent-from); stroke-width:1.6; stroke-linejoin:round;
  transition:all .9s cubic-bezier(.16,1,.3,1) }
.sonar-bola{ fill:var(--sky); opacity:0; transition:opacity .6s, cx .9s cubic-bezier(.16,1,.3,1), cy .9s cubic-bezier(.16,1,.3,1) }
.proc-num{ position:absolute; inset:0; display:grid; place-content:center; pointer-events:none }
.proc-num::before{ content:""; position:absolute; left:50%; top:50%; width:8.5rem; height:8.5rem; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, var(--ink) 45%, rgba(11,20,32,.75) 70%, transparent 78%) }
.proc-num span, .proc-num i{ position:relative }
.proc-num span{ font-size:2.75rem; font-weight:600; letter-spacing:-.03em; line-height:1 }
.proc-num i{ font-style:normal; font-size:.75rem; font-weight:600; letter-spacing:.1em; color:var(--sky); margin-top:.35rem }

/* as etapas */
.proc-lista{ display:flex; flex-direction:column; gap:.5rem; font-size:.9375rem }
.proc-linha{ display:flex; align-items:center; gap:.875rem; padding:.875rem 1rem; border-radius:1rem;
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  animation:entra .5s cubic-bezier(.16,1,.3,1) both }
@keyframes entra{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.proc-ponto{ position:relative; width:1.125rem; height:1.125rem; flex:none; border-radius:50%;
  border:2px solid rgba(142,195,255,.35); border-top-color:var(--accent-from); animation:roda .9s linear infinite }
@keyframes roda{ to{ transform:rotate(360deg) } }
.proc-linha.feito .proc-ponto{ border-color:var(--accent-from); background:var(--accent-from); animation:none }
.proc-linha.feito .proc-ponto::after{ content:""; position:absolute; left:.3rem; top:.1rem; width:.25rem; height:.5rem;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg) }
.proc-meio{ display:flex; flex-direction:column; gap:.15rem; text-align:left }
.proc-texto{ font-weight:500; color:#fff }
.proc-detalhe{ font-size:.75rem; color:rgba(255,255,255,.62) }
.proc-ok{ margin-left:auto; font-size:.75rem; font-weight:600; letter-spacing:.06em; color:var(--sky) }
.proc-barra{ margin-top:2.5rem; height:.35rem; border-radius:9999px; background:rgba(255,255,255,.12); overflow:hidden }
.proc-barra i{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--accent-to), var(--accent-from)) }

/* ---------- resultado ---------- */
.nivel-nome.grad{ -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.nivel-nome{ margin-top:1rem; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
@media (min-width:640px){ .nivel-nome{ font-size:3rem } }
.nivel-status{ margin-top:.75rem; max-width:44rem; font-size:1.0625rem; line-height:1.55; color:var(--muted) }
.res-grade{ margin-top:3rem; display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:768px){ .res-grade{ grid-template-columns:.8fr 1.2fr } }
.res-caixa{ padding:1.75rem; border-radius:1.5rem; background:var(--surface) }
.caixa-radar{ padding:1.5rem 1.25rem }
.res-grade .res-caixa:first-child{ background:linear-gradient(160deg, var(--ink), var(--deep)); color:#fff;
  display:grid; place-items:center; align-content:center; gap:1.5rem; min-height:22rem }
.medidor{ position:relative; width:14rem; max-width:100%; aspect-ratio:1 }
.medidor svg{ width:100%; height:100%; transform:rotate(-90deg) }
.medidor-trilho{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:8 }
.medidor-arco{ fill:none; stroke:url(#gradMedidor); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1.2s var(--ease) }
.medidor-txt{ position:absolute; inset:0; display:grid; place-content:center; text-align:center }
.medidor-rot{ font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55) }
.medidor-num{ font-size:3.25rem; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.medidor-suf{ font-size:.8125rem; color:var(--sky) }
.radar-box{ position:relative; width:100%; max-width:30rem; margin:1.25rem auto 0; aspect-ratio:1/1 }
.radar-svg{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none;
  filter:drop-shadow(0 8px 24px rgba(16,125,233,.18)) }
.radar-anel{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:.4 }
.radar-anel:last-of-type{ stroke:rgba(255,255,255,.18) }
.radar-eixo{ stroke:rgba(255,255,255,.12); stroke-width:.4 }
.radar-realce{ stroke:var(--accent-from); stroke-width:.8; opacity:0; transition:opacity .25s }
.radar-realce.on{ opacity:.7 }
.radar-area{ fill:url(#gradRadar); stroke:var(--accent-from); stroke-width:1.4; stroke-linejoin:round }
.radar-ponto{ fill:var(--sky); transition:r .25s var(--ease), fill .25s }
.radar-ponto.on{ r:3.4; fill:#fff }
.radar-alvo{ fill:transparent; pointer-events:all; cursor:default }
.radar-box.com-tip .radar-area{ opacity:.55 }

.radar-nome{ position:absolute; transform:translate(-50%,-50%); max-width:7.5rem; text-align:center;
  font-size:.75rem; font-weight:600; line-height:1.2; color:rgba(255,255,255,.62);
  transition:color .25s, transform .25s var(--ease); cursor:default }
.radar-nome.on{ color:#fff }
.radar-nome.n0{ transform:translate(-50%,-115%) }
.radar-nome.n3{ transform:translate(-50%,15%) }
.radar-nome.n1, .radar-nome.n2{ transform:translate(-14%,-50%); text-align:left }
.radar-nome.n4, .radar-nome.n5{ transform:translate(-86%,-50%); text-align:right }

.radar-tip{ position:absolute; z-index:4; width:min(15rem,74%); transform:translate(-50%,-50%); pointer-events:none;
  padding:.9rem 1rem; border-radius:1rem; background:rgba(9,16,26,.96);
  box-shadow:0 20px 50px -22px #000, inset 0 0 0 1px rgba(142,195,255,.22) }
.radar-tip-titulo{ display:block; font-size:.8125rem; font-weight:600; color:#fff }
.radar-tip-nota{ display:block; margin-top:.1rem; font-size:.75rem; font-weight:600; color:var(--sky) }
.radar-tip p{ margin-top:.5rem; font-size:.75rem; line-height:1.5; color:rgba(255,255,255,.7) }
.radar-dica{ margin-top:1rem; font-size:.75rem; color:rgba(255,255,255,.62); text-align:center }

.cartoes{ margin-top:1rem; display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:768px){ .cartoes{ grid-template-columns:1fr 1fr } }
.cartao-titulo{ margin-top:1rem; font-size:1.25rem; font-weight:600; letter-spacing:-.015em }
.cartao-texto{ margin-top:.5rem; font-size:.9375rem; line-height:1.55; color:var(--muted) }
.diag{ margin-top:1rem; padding:2.5rem; border-radius:1.5rem; background:linear-gradient(160deg, var(--ink), var(--deep)); color:#fff }
.diag .selo{ color:rgba(255,255,255,.7) }
.diag-texto{ margin-top:1rem; max-width:48rem; font-size:1.0625rem; line-height:1.6; color:rgba(255,255,255,.8) }
.diag .btn-primario{ background:#fff; color:var(--ink) }
.diag .btn-primario::after{ background:var(--accent-from); color:#fff }
.diag .btn-fantasma{ border-color:rgba(255,255,255,.25); color:#fff }

/* ---------- rodapé ---------- */
.rodape{ position:relative; overflow:hidden; border-radius:2rem 2rem 0 0; background:var(--ink); color:#fff;
  margin-top:0; padding-bottom:8rem }
.rodape-grade{ position:relative; z-index:2; max-width:80rem; margin-inline:auto; display:grid; grid-template-columns:1fr; gap:2.5rem;
  padding:5rem 1.25rem 2.5rem }
@media (min-width:640px){ .rodape-grade{ padding-inline:2rem } }
@media (min-width:1024px){ .rodape-grade{ grid-template-columns:2fr 1fr 1fr } }
.rodape-marca{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600 }
.rodape-cel p{ margin-top:1rem; max-width:24rem; font-size:.875rem; line-height:1.55; color:rgba(255,255,255,.55) }
.rodape-cel h3{ font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62) }
.rodape-cel ul{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.75rem; font-size:.9375rem }
.rodape-cel ul a{ color:rgba(255,255,255,.72); transition:color .2s }
.rodape-cel ul a:hover{ color:#fff }
.rodape-sistema{ font-size:.8125rem; line-height:1.7; color:rgba(255,255,255,.62) }
.rodape-copy{ position:relative; z-index:2; max-width:80rem; margin-inline:auto; padding:2rem 1.25rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.8125rem; color:rgba(255,255,255,.62) }
@media (min-width:640px){ .rodape-copy{ padding-inline:2rem } }
.marca-dagua{ position:absolute; inset-inline:0; bottom:1rem; z-index:1; text-align:center; font-weight:700; line-height:1;
  font-size:min(13rem,15vw);
  letter-spacing:-.02em; color:rgba(255,255,255,.035); pointer-events:none; user-select:none }

/* ---------- avisos e prévia ---------- */
.toast{ position:fixed; left:50%; bottom:1.5rem; z-index:120; transform:translateX(-50%); padding:.85rem 1.25rem; border-radius:9999px;
  background:var(--ink); color:#fff; font-size:.875rem; box-shadow:0 18px 40px -18px rgba(11,20,32,.6) }
.previa{ width:min(60rem,92vw); height:80vh; border:0; border-radius:1.5rem; padding:1rem; background:#fff }
.previa::backdrop{ background:rgba(11,20,32,.6) }
.previa-topo{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem .5rem 1rem }
.previa iframe{ width:100%; height:calc(100% - 3.5rem); border:0; border-radius:1rem; background:var(--surface) }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } .rv{ opacity:1; transform:none } }


/* ============================================================================
   TEMA ESCURO — a página inteira, não só a abertura.
   As etapas (perguntas, cadastro, resultado) ficam sobre o Navy da marca,
   com os cartões em vidro claro e o azul #107DE9 como cor de escolha.
   ========================================================================= */
body{ background:var(--ink); color:#fff }

/* cabeçalho e tarja seguem sempre no claro sobre escuro */
body:not([data-etapa="intro"]) .topo{ color:#fff }
body:not([data-etapa="intro"]) .marca .sub{ background:rgba(142,195,255,.16); color:var(--sky) }
body:not([data-etapa="intro"]) .topo .fale{ border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff }
body:not([data-etapa="intro"]) .topo-sub, body:not([data-etapa="intro"]) .topo-num{ color:rgba(255,255,255,.6) }
body:not([data-etapa="intro"]) .topo nav a[aria-current]{ color:var(--sky) }
body:not([data-etapa="intro"]) .aviso-local{ color:rgba(255,255,255,.62) }
body:not([data-etapa="intro"]) .aviso-local span{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.06) }

/* a abertura perde o recorte: o fundo já é escuro */
#etapa-intro{ border-radius:0 }

/* textos */
.selo{ color:rgba(255,255,255,.65) }
.selo-azul, #etapa-intro .selo-azul{ color:var(--sky) }
.subtitulo{ color:rgba(255,255,255,.85) }
.apoio, .nivel-status, .cartao-texto, .proc-lista, .contador, .dica, .consent{ color:rgba(255,255,255,.6) }
.qcat{ color:var(--sky) }
.numero-fundo{ color:rgba(255,255,255,.05) }
.erro{ color:#ff9c9c }
.consent a, .proc-ok{ color:var(--sky) }

/* botões */
.btn-primario{ background:var(--accent-from); color:#fff }
.btn-primario::after{ background:#fff; color:var(--accent) }
.btn-fantasma{ border-color:rgba(255,255,255,.25); color:#fff }
@media (hover:hover){ .btn-fantasma:hover{ border-color:var(--sky); color:var(--sky) } }

/* opções da pergunta */
.opcao{ background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.opcao-letra{ background:rgba(255,255,255,.1); color:var(--sky) }
@media (hover:hover){ .opcao:hover{ background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--accent-from) } }
.opcao.escolhida{ background:var(--accent-from); color:#fff; box-shadow:none }
.opcao.escolhida .opcao-letra{ background:#fff; color:var(--accent) }

/* barras de progresso */
.trilho, .proc-barra{ background:rgba(255,255,255,.12) }

/* formulário */
.f label{ color:rgba(255,255,255,.6) }
.f input, .f select, textarea{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; color-scheme:dark }
.f input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.62) }
.f input:focus, .f select:focus, textarea:focus{ border-color:var(--accent-from); background:rgba(255,255,255,.1) }
.f select option{ background:var(--deep); color:#fff }

/* resultado */
.res-caixa{ background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.res-grade .res-caixa:first-child{ background:linear-gradient(160deg, #0d1c30, #060d18) }
.medidor-extra{ width:100%; margin-top:2rem; display:grid; grid-template-columns:1fr auto; gap:.6rem 1rem;
  font-size:.8125rem; border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem }
.medidor-extra dt{ color:rgba(255,255,255,.62) }
.medidor-extra dd{ text-align:right; font-weight:600; color:#fff }
.diag{ background:linear-gradient(160deg, #0d1c30, #060d18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.radar-anel{ stroke:rgba(255,255,255,.14) }
.radar-eixo{ stroke:rgba(255,255,255,.16) }
.radar-area{ fill:rgba(16,125,233,.28) }
.radar-ponto{ fill:var(--sky) }
.radar-nome{ color:rgba(255,255,255,.6) }
.radar-nome b{ color:#fff }
.medidor-trilho{ stroke:rgba(255,255,255,.12) }

/* o rodapé encosta no conteúdo sem degrau de cor */
.rodape{ border-radius:0 }
.toast{ box-shadow:0 18px 40px -18px #000; outline:1px solid rgba(255,255,255,.12) }


/* ============================================================================
   UMA TELA SÓ — a abertura e as perguntas nunca podem pedir rolagem.
   As medidas encolhem conforme a altura da janela, em vez de estourar.
   ========================================================================= */
#etapa-perguntas, #etapa-aberta{ min-height:100lvh; display:flex; flex-direction:column; justify-content:center;
  padding-top:3rem; padding-bottom:3rem }
#etapa-perguntas .pergunta-topo, #etapa-aberta .pergunta-topo{ margin-top:1.75rem }

@media (max-height:920px), (max-width:640px){
  #etapa-perguntas, #etapa-aberta{ padding-top:2rem; padding-bottom:2rem }
  #etapa-perguntas .pergunta-topo, #etapa-aberta .pergunta-topo{ margin-top:1.25rem }
  .qtexto{ font-size:1.5rem }
  .opcoes{ margin-top:1.25rem; gap:.5rem }
  .opcao{ padding:.7rem 1rem }
  .opcao-texto{ font-size:.9375rem; line-height:1.35 }
  .acoes{ margin-top:1.25rem }
  .numero-fundo{ font-size:5rem; top:-.75rem }
  textarea{ min-height:7rem }
}

@media (max-height:780px), (max-width:420px){
  .qtexto{ font-size:1.3125rem }
  .opcao{ padding:.55rem .85rem; border-radius:.75rem }
  .opcao-texto{ font-size:.875rem; line-height:1.3 }
  .opcao-letra{ width:1.6rem; height:1.6rem; font-size:.75rem }
  .opcoes{ gap:.4rem }
  .numero-fundo{ display:none }
  textarea{ min-height:6rem }
}

/* a abertura também: no celular o texto encolhe um pouco para caber com a foto */
@media (max-width:640px){
  .intro-grade{ padding-top:44vh; padding-bottom:2rem }
  #etapa-intro .subtitulo{ font-size:1rem; margin-top:1rem }
  #etapa-intro .apoio{ font-size:.875rem; margin-top:.75rem }
  #etapa-intro .acoes{ margin-top:1.5rem }
}
@media (max-width:640px) and (max-height:780px){
  #etapa-intro .titulo{ font-size:2rem }
  #etapa-intro .apoio{ display:none }        /* sobra o essencial na primeira tela */
}


/* ============================================================================
   O RESULTADO — escada de níveis, barras por competência, citação e saídas.
   ========================================================================= */

/* a escada: os quatro níveis, com o seu aceso */
.escada{ margin-top:2rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem }
@media (min-width:768px){ .escada{ grid-template-columns:repeat(4,1fr); gap:.75rem } }
.degrau{ position:relative; padding:1rem 1.1rem; border-radius:1rem; background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.degrau-nome{ display:block; font-size:.9375rem; font-weight:600; color:rgba(255,255,255,.55) }
.degrau-faixa{ display:block; margin-top:.15rem; font-size:.75rem; color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums }
.degrau.seu{ background:linear-gradient(140deg, var(--accent-from), var(--accent-to));
  box-shadow:0 14px 34px -18px rgba(16,125,233,.9) }
.degrau.seu .degrau-nome{ color:#fff }
.degrau.seu .degrau-faixa{ color:rgba(255,255,255,.7) }
.degrau-voce{ display:inline-block; margin-top:.6rem; padding:.2rem .6rem; border-radius:9999px;
  background:rgba(255,255,255,.2); color:#fff; font-size:.6875rem; font-weight:600; letter-spacing:.02em }

/* as barras por competência */
.bloco-barras{ margin-top:1rem; padding:1.75rem }
.barras{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.75rem }
.barra{ display:grid; grid-template-columns:1fr; gap:.35rem; align-items:center }
@media (min-width:640px){ .barra{ grid-template-columns:11rem 1fr 3rem; gap:1rem } }
.barra-nome{ font-size:.875rem; font-weight:500; color:rgba(255,255,255,.75) }
.barra-trilho{ position:relative; height:.5rem; border-radius:9999px; background:rgba(255,255,255,.1); overflow:hidden }
.barra-trilho i{ display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg, var(--accent-to), var(--accent-from));
  transition:width 1.1s cubic-bezier(.16,1,.3,1) }
.barra-num{ font-size:.9375rem; font-weight:600; text-align:right; color:#fff }
.barra.forte .barra-trilho i{ background:linear-gradient(90deg, var(--accent-from), var(--sky)) }
.barra.fraca .barra-trilho i{ background:linear-gradient(90deg, #27405c, #5b7794) }
.barra-tag{ margin-left:.5rem; padding:.1rem .45rem; border-radius:9999px; font-style:normal; font-size:.625rem;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:rgba(142,195,255,.14); color:var(--sky) }
.barra.fraca .barra-tag{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.55) }
.barras-apoio{ margin-top:1.25rem; font-size:.75rem; line-height:1.5; color:rgba(255,255,255,.62) }

/* o que a pessoa escreveu */
.citacao{ margin-top:1rem; padding:1.75rem; display:none }   /* só no PDF */
.citacao blockquote{ margin-top:1rem; padding-left:1.25rem; border-left:2px solid var(--accent-from);
  font-size:1.0625rem; line-height:1.6; color:rgba(255,255,255,.8) }

/* as saídas: PDF e site */
.acoes-fim{ margin-top:1.5rem; justify-content:flex-end }

.print-cabecalho{ display:none }

/* ---------------------------------------------------------------- impressão
   O PDF sai claro, com o conteúdo do resultado e nada de interface.        */
@media print{
  @page{ size:A4; margin:9mm }
  html{ font-size:9.6px }                     /* tudo encolhe junto: cabe numa folha */
  body{ background:#fff !important; color:#0b1420 !important }
  .aviso-local, .toast, .acoes, .acoes-fim, .previa, #loader{ display:none !important }
  .etapa[hidden]{ display:none !important }          /* só o resultado vai para o papel */
  #etapa-resultado{ display:block !important; padding:0 !important; min-height:0 !important; max-width:none }
  .print-cabecalho{ display:flex !important; align-items:baseline; gap:1rem; flex-wrap:wrap;
    padding-bottom:1rem; margin-bottom:1.5rem; border-bottom:1px solid #dce5f1 }
  .print-marca{ display:flex; align-items:center; gap:.4rem; font-weight:600; font-size:1.125rem; color:#0b1420 }
  .print-marca svg{ width:1.1rem; height:1.1rem; color:#107de9 }
  .print-titulo{ font-size:1rem; font-weight:600; color:#0b1420 }
  .print-quem{ margin-left:auto; font-size:.8125rem; color:#54637a }

  /* uma página só: menos respiro, duas colunas onde dá */
  #blocoAberta:not([hidden]){ display:block !important }
  .escada{ margin-top:1rem; grid-template-columns:repeat(4,1fr) !important; gap:.5rem }
  .degrau{ padding:.6rem .7rem }
  .res-grade{ margin-top:1rem; grid-template-columns:.85fr 1.15fr !important; gap:.75rem }
  .res-caixa, .diag, .bloco-barras, .citacao{ padding:1rem !important; margin-top:.75rem }
  .res-grade .res-caixa:first-child{ min-height:0 }
  .medidor{ width:11rem }
  .medidor-extra{ margin-top:1rem; padding-top:.75rem; gap:.3rem 1rem }
  .radar-box{ max-width:22rem; margin-top:.5rem }
  .radar-dica{ display:none }
  .barras{ margin-top:.75rem; gap:.45rem }
  .cartoes{ margin-top:.75rem; grid-template-columns:1fr 1fr !important; gap:.75rem }
  .cartao-titulo{ margin-top:.5rem; font-size:1.0625rem }
  .nivel-nome{ margin-top:.25rem }
  .nivel-status{ margin-top:.4rem }
  .diag-texto{ margin-top:.5rem }
  .citacao blockquote{ margin-top:.5rem; font-size:.9375rem }
  .selo, .barras-apoio, .nivel-status, .cartao-texto, .barra-nome{ color:#44586e !important }
  .res-caixa, .degrau, .diag, .citacao, .bloco-barras{ background:#f4f8fd !important; color:#0b1420 !important;
    box-shadow:inset 0 0 0 1px #dce5f1 !important; break-inside:avoid }
  .res-grade .res-caixa:first-child{ background:#0b1420 !important; color:#fff !important }
  .diag{ background:#0b1420 !important; color:#fff !important }
  .diag .diag-texto{ color:rgba(255,255,255,.85) !important }
  .degrau .degrau-nome{ color:#0b1420 !important }
  .degrau .degrau-faixa{ color:#54637a !important }
  .barra-tag{ background:#e4ecf7 !important; color:#0b5dbd !important }
  .degrau.seu{ background:#107de9 !important }
  .degrau.seu .degrau-nome, .degrau.seu .degrau-faixa, .degrau-voce{ color:#fff !important }
  .barra-num, .cartao-titulo, .nivel-nome{ color:#0b1420 !important }
  .barra-trilho{ background:#dce5f1 !important }
  .barra-trilho i{ background:#107de9 !important }
  .citacao blockquote{ color:#0b1420 !important }
  .radar-anel{ stroke:rgba(11,20,32,.18) !important }
  .radar-eixo{ stroke:rgba(11,20,32,.2) !important }
  .radar-nome{ color:#44586e !important }
  .radar-nome b{ color:#0b1420 !important }
  .res-grade, .cartoes{ break-inside:avoid }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
}

/* ---------- topo: marca e volta para o site ---------- */
.topo-diag{ position:absolute; inset-inline:0; top:0; z-index:45; display:flex; align-items:center; justify-content:space-between;
  max-width:80rem; margin-inline:auto; padding:1.25rem 1.25rem; color:#fff }
@media (min-width:640px){ .topo-diag{ padding:1.4rem 2rem } }
/* todas as etapas são escuras: o topo fica sempre branco */
.topo-marca{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.125rem }
.topo-marca svg{ width:1.25rem; height:1.25rem; color:var(--accent-from) }
.topo-sub{ font-size:.75rem; font-weight:500; opacity:.65; margin-left:.15rem }
.topo-voltar{ font-size:.875rem; font-weight:500; opacity:.8; transition:opacity .3s }
.topo-voltar:hover{ opacity:1 }
@media (max-width:640px){ .aviso-local{ top:4.25rem } }

/* Space Mono: a segunda voz do manual — rótulos, numeração e fonte de dado. Texto corrido e números grandes seguem em Inter. */
.selo, .qcat, .proc-num, .topo-num, #loaderNum{ font-family:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase }

/* a resposta aberta (textarea com data-foco) precisa mostrar onde está o foco */
textarea[data-foco]:focus-visible{ outline:2px solid var(--accent-from); outline-offset:2px }