/* metodologia: página que rola, com fluxogramas em HTML/CSS (horizontais no desktop, em pé no celular) */
body.doc{display:block;height:auto;overflow:auto}
.metodo{max-width:1000px;margin:0 auto;padding:24px 16px 56px}
.metodo h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:38px;letter-spacing:.04em;text-transform:uppercase;margin:8px 0 10px;line-height:1}
.metodo h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:24px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.metodo h3 .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--texto);color:var(--fundo);font-size:17px;display:inline-flex;align-items:center;justify-content:center}
.metodo h4{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--rotulo);margin:18px 0 8px}
.metodo p,.metodo li{line-height:1.55;color:#E8ECFF}.metodo p{margin:0 0 10px}.metodo ul{margin:0 0 10px;padding-left:20px}
.metodo a{color:var(--rotulo)}
.lead{font-size:18px;color:var(--texto)!important;max-width:760px}
.sub{color:var(--sutil)!important;font-size:14px;margin-bottom:14px!important}
.aviso-doc{border-left:3px solid var(--quente);padding:8px 12px;background:rgba(255,77,61,.08);max-width:760px}
.metodo section{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:20px;margin-top:18px;scroll-margin-top:12px}
.sumario{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.sumario a,.voltar{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto);text-decoration:none;padding:6px 10px;border:1px solid rgba(181,188,232,.35);border-radius:4px;min-height:32px;display:inline-flex;align-items:center}
.sumario a:hover,.voltar:hover{background:var(--texto);color:var(--fundo)}
.rodape-doc{margin-top:24px;text-align:center}

/* nós e setas */
.no{background:#0F2142;border:1px solid var(--linha);border-radius:8px;padding:10px 12px;min-width:0}
.no b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16px;letter-spacing:.03em;text-transform:uppercase;line-height:1.15}
.no small{display:block;font-size:12.5px;color:var(--sutil);line-height:1.35;margin-top:3px}
.no .ferr{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--rotulo);border:1px solid rgba(143,180,255,.35);border-radius:3px;padding:0 5px}
.no.destaque{background:var(--texto);color:var(--fundo);border-color:var(--texto)}.no.destaque small{color:#33415f}
.no.ok{border-color:var(--tom-calmo);background:rgba(46,125,107,.25)}
.no.nao{border-color:#6b7290;background:rgba(107,114,144,.18)}
.seta{flex:none;display:flex;align-items:center;justify-content:center;color:var(--linha);font-size:22px;line-height:1}
.seta::before{content:"→"}
.seta-rot{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11.5px;color:var(--sutil);text-align:center;max-width:110px;line-height:1.25}
.seta-rot::after{content:"→";color:var(--linha);font-size:22px;line-height:1}

/* fluxo em linha */
.fluxo{display:flex;align-items:stretch;gap:8px}
.fluxo>.no{flex:1}

/* 1. caminho: duas trilhas que se juntam */
.trilhas{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1.1fr);gap:10px;align-items:center}
.trilha{display:flex;flex-direction:column;gap:10px}
.trilha .rot{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rotulo);font-family:"Barlow Condensed",sans-serif;font-weight:600}
.trilha .linha{display:flex;gap:8px;align-items:stretch}.trilha .linha>.no{flex:1}
.junta{display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--linha)}.junta::before{content:"⟶"}
.resultado{display:flex;flex-direction:column;gap:8px}
.resultado .seta::before{content:"↓"}
.atraso{margin-top:16px}
.atraso .barra-t{position:relative;height:28px;border-radius:6px;background:linear-gradient(90deg,var(--b) 0 32%,#16294d 32% 100%);overflow:hidden}
.atraso .barra-t span{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600}
.atraso .marcas{display:flex;justify-content:space-between;font-size:12px;color:var(--sutil);margin-top:4px}

/* 2. árvore de decisão */
.arvore{display:flex;flex-direction:column;gap:0}
.passo{display:grid;grid-template-columns:minmax(0,1.3fr) 40px minmax(0,1fr);gap:8px;align-items:center}
.passo .pergunta{border-color:var(--texto)}
.passo .lado{display:flex;flex-direction:column;gap:6px}
.passo .lado .rot{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sutil)}
.desce{display:grid;grid-template-columns:minmax(0,1.3fr) 40px minmax(0,1fr);gap:8px}
.desce span{justify-self:center;color:var(--linha);font-size:20px;padding:4px 0;display:flex;align-items:center;gap:8px}
.desce span em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sutil)}
.confirma{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-size:13px;padding:6px 10px;border-radius:6px;background:rgba(181,188,232,.08);border:1px solid var(--borda)}
.chip b{color:var(--texto)}

/* 3. estados */
.estados{display:flex;align-items:center;gap:6px}
.estados .no{flex:1;text-align:center}
.estado-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.volta{margin-top:10px;display:flex;justify-content:center}
.volta span{font-size:12.5px;color:var(--sutil);border:1px dashed var(--linha);border-radius:6px;padding:6px 10px}

/* 4. indicadores */
.cartoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ind{background:#0F2142;border:1px solid var(--borda);border-radius:8px;padding:14px}
.ind b.t{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.03em}
.ind p{font-size:14px;margin:4px 0 10px!important}
.escala{position:relative;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--tom-calmo),var(--tom-tenso),var(--tom-exaltado))}
.escala.neutra{background:linear-gradient(90deg,#24406f,#8FB4FF)}
.escala.aderencia{background:linear-gradient(90deg,var(--tom-exaltado) 0 40%,#24406f 40%,#8FB4FF)}
.escala.nervos{background:linear-gradient(90deg,#8FB4FF,#24406f 50%,var(--tom-tenso))}
.escala .marca{position:absolute;top:-4px;width:2px;height:20px;background:var(--texto)}
.escala-rot{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sutil);margin-top:5px;gap:8px}
.posturas{display:flex;flex-wrap:wrap;gap:6px}
.posturas span{font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;border:1px solid rgba(181,188,232,.5);border-radius:3px}
.rubrica{display:flex;height:46px;gap:3px}
.rubrica div{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:4px;font-size:11.5px;line-height:1.15;text-align:center;padding:2px;color:#fff;min-width:0}
.rubrica div b{font-size:15px}
.citacao{font-size:13.5px;border-left:3px solid var(--rotulo);padding:6px 10px;background:rgba(143,180,255,.08);margin:0}
.ind-largo{grid-column:1/-1}

/* 5. tom */
.tom-ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mini-tm{display:flex;height:90px;gap:3px;border-radius:6px;overflow:hidden}
.mini-tm div{display:flex;align-items:flex-end;padding:6px;font-size:12px;font-weight:700}
.pesos{display:flex;height:40px;gap:3px;border-radius:6px;overflow:hidden;margin-top:6px}
.pesos div{display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;text-align:center;line-height:1.15;padding:2px}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--sutil);margin-top:8px}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* 6. resumos */
.linha-tempo{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.linha-tempo .no{text-align:center}
.reprova{display:flex;justify-content:flex-end;gap:10px;margin-top:8px;align-items:center}
.reprova .no{max-width:420px}
.reprova .seta::before{content:"↺"}

/* 7. neutralidade */
.regras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.regras .no b{font-size:15px}

/* 9. ferramentas */
.ferramentas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

@media (max-width:760px){
  .metodo h2{font-size:30px}
  .fluxo,.estados,.trilha .linha{flex-direction:column}
  .seta::before{content:"↓"}
  .seta-rot{max-width:none;flex-direction:row;gap:8px}.seta-rot::after{content:"↓"}
  .trilhas{grid-template-columns:minmax(0,1fr)}
  .junta::before{content:"↓"}
  .passo,.desce{grid-template-columns:minmax(0,1fr)}
  .passo>.seta-rot{justify-self:start;padding-left:30px}
  .passo>.no:last-child{margin-left:28px;border-left-width:3px}
  .passo{gap:4px}
  .desce span{justify-self:start;padding-left:14px}
  .desce>span:empty{display:none}
  .confirma,.cartoes,.tom-ex,.linha-tempo,.regras,.ferramentas{grid-template-columns:minmax(0,1fr)}
  .reprova{flex-direction:column;align-items:stretch}.reprova .no{max-width:none}
  .rubrica{height:auto;flex-wrap:wrap}.rubrica div{flex:1 1 30%!important;padding:6px 2px}
}