/* Linha do tempo da obra do playbook de engenharia e construção. Usa as variáveis e os blocos de /assets/nt.css
   (nt-calc, nt-campo, nt-botao); aqui só a linha do tempo e os blocos de resultado. Mobile-first. */
.pb-resultado { display: grid; gap: .75rem; margin: 1rem 0 0; }
.nt-corpo ol.pbo-fases { list-style: none; margin: 0; padding: 0; counter-reset: fase; display: grid; gap: .35rem; }
.pbo-fases li {
  counter-increment: fase; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .65rem; margin: 0;
  padding: .5rem .8rem; border: 1px solid var(--nt-borda-forte, rgba(255, 255, 255, .14)); border-radius: 10px;
  background: rgba(255, 255, 255, .02); color: var(--nt-texto-suave, #B8C2C4); font-size: .95rem; line-height: 1.4;
}
.pbo-fases li::before {
  content: counter(fase); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--nt-borda-forte, rgba(255, 255, 255, .14));
  font-family: var(--nt-fonte-titulo, "Roboto", system-ui, sans-serif); font-weight: 700; font-size: .85rem;
  color: var(--nt-cinza-claro, #95A5A6);
}
.pbo-nome { flex: 1 1 9rem; }
.pbo-tag {
  font-family: var(--nt-fonte-titulo, "Roboto", system-ui, sans-serif); font-size: .76rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nt-azul, #1296FC);
}
.pbo-tag:empty { display: none; }
.pbo-fases li.pbo-abordar { background: var(--nt-azul-fundo, rgba(18, 150, 252, .12)); border-color: rgba(18, 150, 252, .6); color: #ffffff; }
.pbo-fases li.pbo-abordar::before { color: var(--nt-azul, #1296FC); border-color: var(--nt-azul, #1296FC); }
.pbo-fases li.pbo-executar { border-style: dashed; border-color: var(--nt-azul, #1296FC); color: #ffffff; }
.pb-bloco {
  background: var(--nt-campo, #101214); border: 1px solid var(--nt-borda-forte, rgba(255, 255, 255, .14));
  border-radius: 12px; padding: .9rem 1rem;
}
.pb-bloco p { margin: 0 0 .4em; font-size: .97rem; line-height: 1.6; }
.pb-bloco > :last-child { margin-bottom: 0; }
.pb-cta { margin: .2rem 0 0; }
@media (min-width: 640px) {
  .pb-resultado { grid-template-columns: 1fr 1fr; }
  .pb-resultado > .pbo-fases, .pb-resultado > .pb-cta { grid-column: 1 / -1; }
}