/* /diagnostico/ — experiência de diagnóstico. Só carrega nesta página (layout.php inclui pagina-<pagina>.css).
   Sem JavaScript: formulário longo sobre o marinho. Com JavaScript (.dx[data-ativo]): uma pergunta por tela;
   em .dx.foco a experiência ocupa a tela inteira. O mapa é o contorno do símbolo da Bruhen: cada resposta acende um ponto. */

.pg-diagnostico .topo-nav,.pg-diagnostico .topo-menu{display:none}
.pg-diagnostico .topo-acoes .btn svg{width:18px;height:18px}

.dx{--claro:rgba(250,249,245,.72);--fio:rgba(250,249,245,.22);position:relative;isolation:isolate;overflow:hidden;background:var(--marinho);color:var(--papel);padding:calc(var(--topo) + clamp(36px,7vh,88px)) 0 clamp(64px,9vw,120px)}
.dx :focus-visible{outline-color:var(--sinal)}
.dx-fundo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 45%,rgba(74,168,255,.16),transparent 70%),radial-gradient(rgba(250,249,245,.09) 1px,transparent 1.6px) 0 0/30px 30px;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000 55%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000 55%)}

/* ---- O mapa ---- */
.dx-mapa{position:absolute;z-index:-1;right:max(-6vw,calc(50vw - 800px));top:50%;height:min(100vh,960px);width:auto;transform:translateY(-50%);overflow:visible;pointer-events:none}
.dx-mapa-fundo{fill:rgba(250,249,245,.025);stroke:rgba(250,249,245,.32);stroke-width:1.5;stroke-dasharray:1 9;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:fill 1.6s var(--suave)}
.dx-mapa-linha{fill:none;stroke:var(--sinal);stroke-width:34;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--suave);filter:drop-shadow(0 0 60px rgba(74,168,255,.55))}
.dx-pt{fill:var(--marinho);stroke:rgba(250,249,245,.45);stroke-width:22;transition:fill .5s,stroke .5s,r .5s var(--suave)}
.dx-pt.on{fill:var(--sinal);stroke:var(--papel);stroke-width:26}
.dx-pt-anel{fill:none;stroke:var(--sinal);stroke-width:14;opacity:0;transform-box:fill-box;transform-origin:center}
.dx-pt-anel.vivo{animation:dx-anel 1.4s var(--suave) 1}
@keyframes dx-anel{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
.dx.completo .dx-mapa-fundo{fill:rgba(74,168,255,.14);stroke:rgba(74,168,255,.5)}

/* ---- Palco e telas ---- */
.dx-palco{position:relative;width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--borda)}
.dx-form,.dx-resultado{max-width:min(680px,52vw)}
.dx-tela+.dx-tela{margin-top:clamp(56px,8vw,96px)}
.dx-abre .t0{margin-top:4px;max-width:11ch}
.dx-abre .lead{margin-top:clamp(18px,2.4vw,28px);color:var(--claro);max-width:50ch}
.dx-abre .h1-rotulo::before,.dx-resultado .h1-rotulo::before{background:var(--sinal);box-shadow:0 0 0 6px rgba(74,168,255,.18)}
.dx-abre-acoes{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:clamp(28px,3.4vw,40px)}
.dx-abre-nota{color:var(--claro);font-size:.9375rem}
.dx-selos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(48px,7vh,80px);max-width:820px}
.dx-selos li{position:relative;padding-top:18px;border-top:1px solid var(--fio);display:grid;gap:4px;font-size:.9375rem;color:var(--claro)}
.dx-selos li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--sinal)}
.dx-selos strong{color:var(--papel);font-weight:600}

.dx-tela legend{display:block;padding:0;margin-bottom:clamp(20px,2.6vw,30px);font:600 clamp(1.55rem,3.1vw,2.7rem)/1.12 var(--tit);letter-spacing:-.035em;text-wrap:balance;max-width:22ch}
.dx-num{display:flex;align-items:baseline;gap:2px;margin-bottom:14px;font:600 .9375rem/1 var(--txt);letter-spacing:.02em;color:var(--sinal)}
.dx-num i{font-style:normal;color:rgba(250,249,245,.45)}
.dx-dica{margin:-8px 0 22px;color:var(--claro);max-width:52ch}

/* opções grandes, com letra de atalho */
.dx-ops{display:grid;gap:10px;max-width:560px}
.dx-ops-linha{grid-template-columns:repeat(3,minmax(0,1fr));max-width:640px}
.dx-ops-duas{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.dx-op{position:relative;display:block}
.dx-op input,.dx-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dx-op span{display:flex;align-items:center;gap:14px;min-height:58px;height:100%;padding:12px 18px 12px 14px;border:1.5px solid var(--fio);border-radius:12px;background:rgba(250,249,245,.04);font-weight:500;font-size:1.0625rem;line-height:1.3;transition:background .2s,border-color .2s,color .2s,transform .2s var(--suave)}
.dx-op kbd,.dx-tecla kbd{flex:none;display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border:1px solid rgba(250,249,245,.38);border-radius:6px;font:600 .75rem/1 var(--txt);color:var(--claro);transition:background .2s,color .2s,border-color .2s}
.dx-op:hover span{border-color:rgba(250,249,245,.7);background:rgba(250,249,245,.08)}
.dx-op input:checked+span{background:var(--papel);color:var(--marinho);border-color:var(--papel)}
.dx-op input:checked+span kbd{background:var(--marinho);color:var(--papel);border-color:var(--marinho)}
.dx-op input[type=checkbox]+span::after{content:"";margin-left:auto;flex:none;width:20px;height:20px;border-radius:5px;border:1.5px solid rgba(250,249,245,.45)}
.dx-op input[type=checkbox]:checked+span::after{border-color:var(--marinho);background:var(--marinho) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23faf9f5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.dx-op input:focus-visible+span,.dx-chip input:focus-visible+span{outline:2px solid var(--sinal);outline-offset:3px}
.dx-op input:checked+span{animation:dx-pisca .32s var(--suave)}
@keyframes dx-pisca{50%{transform:scale(.985)}}

/* chips de valor */
.dx-grupo{margin-top:22px}
.dx-grupo:first-of-type{margin-top:0}
.dx-grupo-t{margin-bottom:10px;font-weight:600}
.dx-grupo-t em{font-style:normal;font-weight:400;color:var(--claro)}
.dx-grupo-sub{margin-top:clamp(26px,3vw,36px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--fio)}
.dx-chips{display:flex;flex-wrap:wrap;gap:8px}
.dx-chip{position:relative}
.dx-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--fio);border-radius:999px;font-size:.9375rem;font-weight:500;transition:background .2s,border-color .2s,color .2s}
.dx-chip:hover span{border-color:rgba(250,249,245,.7)}
.dx-chip input:checked+span{background:var(--sinal);border-color:var(--sinal);color:var(--marinho)}

/* campos: só a linha de baixo, texto grande */
.dx-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;max-width:720px}
.dx-campo{display:grid;gap:4px}
.dx-campo span{font-size:.9375rem;font-weight:600;color:var(--claro)}
.dx-campo em{font-style:normal;font-weight:400;color:rgba(250,249,245,.5)}
.dx-campo input{width:100%;min-height:52px;padding:6px 0;background:transparent;border:0;border-bottom:2px solid var(--fio);border-radius:0;color:var(--papel);font-size:clamp(1.125rem,1.5vw,1.375rem);transition:border-color .2s}
.dx-campo input::placeholder{color:rgba(250,249,245,.32)}
.dx-campo input:hover{border-color:rgba(250,249,245,.5)}
.dx-campo input:focus{outline:none;border-color:var(--sinal)}
.dx-campo input[aria-invalid=true]{border-color:#ff8f7a}
.dx-campo-larga{grid-column:1/-1}
.dx-campo-solto{margin-top:26px;max-width:560px}
.dx-aceite{display:flex;gap:12px;align-items:flex-start;margin-top:26px;max-width:620px;font-size:.9375rem;color:var(--claro)}
.dx-aceite input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--sinal)}
.dx-aceite input[aria-invalid=true]{outline:2px solid #ff8f7a;outline-offset:2px}
.dx-aceite a{color:var(--papel)}

.dx-erro{max-width:620px;margin:0 0 22px;padding:12px 16px;border-radius:8px;background:#fff1ee;color:#8c1d0b;border-left:3px solid #c2391f;font-weight:500}
.dx-acoes{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.4vw,40px)}
.dx-acoes .btn[disabled]{opacity:.65;pointer-events:none}
.dx-voltar{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--fio);color:var(--papel);transition:border-color .2s,background .2s}
.dx-voltar:hover{border-color:var(--papel);background:rgba(250,249,245,.08)}
.dx-tecla{display:none;font-size:.875rem;color:rgba(250,249,245,.55)}
.dx-tecla kbd{margin-left:4px}

/* ---- Com JavaScript ---- */
.dx[data-ativo] .dx-tela:not(.dx-abre),.dx[data-ativo] .dx-acoes,.dx[data-ativo] .dx-form>.dx-erro{display:none}
.dx[data-ativo] [data-canal]:not(.vale),.dx[data-ativo] [data-site-url]:not(.vale),.dx[data-ativo] [data-ramo-txt]:not(.vale){display:none}
.dx[data-ativo] [data-ramo-txt].vale,.dx[data-ativo] [data-site-url].vale{animation:dx-sobe .4s var(--suave) both}
.dx-acoes [data-avancar].pronto{animation:dx-chama 1.8s ease-out infinite}
@keyframes dx-chama{0%{box-shadow:0 0 0 0 rgba(74,168,255,.55)}70%,100%{box-shadow:0 0 0 12px rgba(74,168,255,0)}}
.dx.foco{position:fixed;inset:0;z-index:150;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:0}
.dx.foco .dx-abre,.dx.foco~*{display:none}
/* no foco o mapa e o fundo ficam presos à tela: não rolam com as perguntas nem criam rolagem lateral */
.dx.foco .dx-mapa,.dx.foco .dx-fundo{position:fixed}
.dx.foco .dx-palco{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:clamp(40px,8vh,96px)}
.dx.foco .dx-tela.on{display:block;animation:dx-entra .6s var(--suave) both}
.dx.foco .dx-tela.on.volta{animation-name:dx-volta}
.dx.foco .dx-tela.on .dx-ops>*,.dx.foco .dx-tela.on .dx-chips>*,.dx.foco .dx-tela.on .dx-campos>*{animation:dx-sobe .5s var(--suave) both;animation-delay:calc(.12s + var(--i,0) * .04s)}
.dx.foco .dx-acoes{display:flex}
.dx.foco .dx-form>.dx-erro:not([hidden]){display:block}
@keyframes dx-entra{from{opacity:0;transform:translateY(34px)}}
@keyframes dx-volta{from{opacity:0;transform:translateY(-34px)}}
@keyframes dx-sobe{from{opacity:0;transform:translateY(14px)}}
.dx-entrando .dx-abre{animation:dx-sai .45s var(--suave) both}
@keyframes dx-sai{to{opacity:0;transform:translateY(-24px)}}
html.dx-foco,html.dx-foco body{overflow:hidden}
@media (hover:hover) and (pointer:fine){.dx.foco .dx-tecla{display:inline}}

/* barra de progresso (só no modo foco) */
.dx-barra{position:fixed;top:0;left:0;right:0;z-index:151;display:flex;align-items:center;gap:18px;height:72px;padding-inline:var(--borda);background:linear-gradient(var(--marinho) 55%,rgba(13,41,62,0))}
.dx-barra .logo{width:104px;flex:none}
.dx-barra .logo-simbolo,.dx-barra .logo-letras{fill:var(--papel)}
.dx-prog{flex:1;height:3px;border-radius:3px;background:rgba(250,249,245,.14);overflow:hidden}
.dx-prog span{display:block;height:100%;width:0;background:var(--sinal);border-radius:inherit;transition:width .8s var(--suave);box-shadow:0 0 12px var(--sinal)}
.dx-prog-n{flex:none;font-size:.875rem;font-weight:600;color:var(--claro);font-variant-numeric:tabular-nums}
.dx-sair{flex:none;min-height:40px;padding:0 16px;border:1.5px solid var(--fio);border-radius:999px;font-size:.875rem;font-weight:600;color:var(--papel)}
.dx-sair:hover{border-color:var(--papel)}

/* painel raio-X (desktop, modo foco) */
.dx-painel{position:fixed;z-index:152;right:clamp(24px,4vw,64px);bottom:clamp(24px,4vh,48px);width:330px;max-height:calc(100dvh - 140px);overflow:auto;padding:20px 22px 18px;border:1px solid rgba(250,249,245,.16);border-radius:16px;background:rgba(13,41,62,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.dx:not(.foco) .dx-painel{display:none}
.dx-painel-t{display:flex;align-items:center;gap:10px;font:600 .8125rem/1 var(--txt);letter-spacing:.08em;text-transform:uppercase;color:var(--claro)}
.dx-pulso{width:8px;height:8px;border-radius:50%;background:var(--sinal);box-shadow:0 0 0 0 rgba(74,168,255,.6);animation:dx-pulso 2s infinite}
@keyframes dx-pulso{70%{box-shadow:0 0 0 9px rgba(74,168,255,0)}100%{box-shadow:0 0 0 0 rgba(74,168,255,0)}}
.dx-painel-l{display:grid;gap:0;margin-top:12px}
.dx-painel-l div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:9px 0;border-top:1px solid rgba(250,249,245,.1);font-size:.875rem;animation:dx-sobe .45s var(--suave) both}
.dx-painel-l dt{color:rgba(250,249,245,.6)}
.dx-painel-l dd{margin:0;font-weight:600;text-align:right}
.dx-painel-l .grande{grid-template-columns:1fr;gap:2px}
.dx-painel-l .grande dd{text-align:left;font:600 1.5rem/1.15 var(--tit);letter-spacing:-.03em;color:var(--sinal)}
.dx-painel-l .grande dd small{display:block;margin-top:4px;font:500 .8125rem/1.3 var(--txt);letter-spacing:0;color:var(--claro)}
.dx-painel-n{margin-top:10px;padding-top:12px;border-top:1px solid rgba(250,249,245,.1);font-size:.875rem;line-height:1.45;color:var(--claro)}
.dx-painel-vazio{padding:12px 0 2px;font-size:.875rem;color:rgba(250,249,245,.55)}

/* ---- Resultado ---- */
.dx-resultado:focus{outline:none}
.dx.foco .dx-resultado{padding-top:12px;animation:dx-entra .8s var(--suave) both}
.dx-resultado .t1{max-width:16ch;margin-top:6px}
.dx-res-lead{margin-top:16px;max-width:52ch;color:var(--claro);font-size:clamp(1.0625rem,1.3vw,1.25rem)}
.dx-numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(26px,3vw,36px);max-width:720px}
.dx-numeros div{padding:16px 18px;border:1px solid rgba(250,249,245,.16);border-radius:12px;background:rgba(13,41,62,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dx-numeros dt{font-size:.8125rem;color:rgba(250,249,245,.6)}
.dx-numeros dd{margin:6px 0 0;font:600 clamp(1rem,1.35vw,1.25rem)/1.2 var(--tit);letter-spacing:-.03em;text-wrap:balance}
.dx-pontos-t{margin-top:clamp(28px,3.4vw,40px);font:600 .8125rem/1 var(--txt);letter-spacing:.08em;text-transform:uppercase;color:var(--sinal)}
.dx-pontos{display:grid;gap:12px;margin-top:14px;max-width:640px;counter-reset:p}
.dx-pontos li{counter-increment:p;position:relative;padding:14px 16px 14px 54px;border:1px solid rgba(250,249,245,.14);border-radius:12px;background:rgba(13,41,62,.78);line-height:1.5}
.dx-pontos li::before{content:counter(p);position:absolute;left:14px;top:13px;width:26px;height:26px;border-radius:50%;background:var(--sinal);color:var(--marinho);font:700 .8125rem/26px var(--txt);text-align:center}
.dx-agenda{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:clamp(28px,3.4vw,40px)}
.dx-agenda-nota{flex-basis:100%;font-size:.9375rem;color:var(--claro)}

/* ---- Seções abaixo ---- */
.dx-leva .t1{max-width:14ch}
.dx-leva-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(36px,5vw,64px)}
.dx-leva-g li{display:grid;align-content:start;gap:12px;padding-top:22px;border-top:1.5px solid var(--tinta)}
.dx-leva-n{font:600 clamp(2.4rem,4vw,3.4rem)/1 var(--tit);letter-spacing:-.04em;color:var(--marinho)}
.dx-leva-g p{color:var(--aco)}
.dx-como-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,90px);align-items:start}
.dx-como .lead{margin-top:14px}
.dx-passos{display:grid;gap:0;counter-reset:c}
.dx-passos li{counter-increment:c;position:relative;display:grid;gap:4px;padding:0 0 30px 52px}
.dx-passos li::before{content:counter(c);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--marinho);color:var(--papel);font:600 .875rem/32px var(--txt);text-align:center}
.dx-passos li:not(:last-child)::after{content:"";position:absolute;left:15px;top:38px;bottom:6px;width:2px;background:var(--linha)}
.dx-passos strong{font:600 1.125rem/1.3 var(--txt)}
.dx-passos span{color:var(--aco)}
.dx-fieis-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin-top:clamp(28px,4vw,48px)}
.dx-fieis-l li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 0;border-bottom:1px solid var(--linha);font:600 clamp(1.1rem,1.6vw,1.35rem)/1.2 var(--tit);letter-spacing:-.03em}
.dx-fieis-l a{text-decoration:none}
.dx-fieis-l a:hover{text-decoration:underline;text-underline-offset:5px}
.dx-fieis-l b{font:600 .9375rem/1 var(--txt);letter-spacing:0;color:var(--aco);white-space:nowrap}

/* ---- Telas menores ---- */
@media (max-width:1100px){
  .dx-painel{display:none!important}
  .dx-form,.dx-resultado{max-width:760px}
  .dx-mapa{opacity:.45;right:-22vw}
}
@media (max-width:760px){
  .dx{padding-top:calc(var(--topo) + 28px)}
  .dx-mapa{height:78vh;right:-48vw;top:44%;opacity:.32}
  .dx-selos{grid-template-columns:1fr;gap:14px}
  .dx-ops-linha,.dx-ops-duas,.dx-campos{grid-template-columns:1fr}
  .dx-campos{gap:16px}
  .dx-op span{min-height:54px}
  .dx.foco .dx-palco{justify-content:flex-start;padding-top:88px;padding-bottom:0}
  .dx.foco .dx-acoes{position:sticky;bottom:0;z-index:2;margin-inline:calc(var(--borda) * -1);padding:16px var(--borda) calc(14px + env(safe-area-inset-bottom));background:linear-gradient(rgba(13,41,62,0),var(--marinho) 30%)}
  .dx.foco .dx-acoes .btn{flex:1}
  .dx-barra{height:64px;gap:12px}
  .dx-barra .logo{display:none}
  .dx-numeros{grid-template-columns:1fr}
  .dx-agenda .btn{width:100%}
  .dx-leva-g,.dx-como-g,.dx-fieis-l{grid-template-columns:1fr}
  .pg-diagnostico .topo-wa-txt{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dx *,.dx *::before,.dx *::after{animation:none!important;transition:none!important}
}
@media (hover:none){.dx-op kbd{display:none}.dx-op span{padding-left:18px}}