/* ==========================================================
   COMO ATUAMOS (#atuacao, O escritório): o propósito e os três pilares
   ========================================================== */
.atuacao-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.atuacao-proposito { display: flex; flex-direction: column; gap: var(--espaco-3); }
.atuacao-proposito .destaque { max-width: 30ch; }
.atuacao-proposito .destaque::before { content: ""; display: block; width: var(--filete-vermelho); height: 3px; background: var(--praca); margin-bottom: var(--espaco-4); }
.pilares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pilares > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px var(--espaco-3); padding: var(--espaco-4) 0; border-top: 1px solid var(--linha); }
.pilares > li:last-child { border-bottom: 1px solid var(--linha); }
.pilar-num { grid-row: span 3; font: 600 22px/1.2 var(--font-titulo); color: var(--texto-apagado); }
.pilares h3 { font-size: 22px; }
/* Os passos do acompanhamento, em sequência, com uma seta entre eles */
.pilar-passos { list-style: none; margin: var(--espaco-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; }
.pilar-passos li { display: inline-flex; align-items: center; font-size: var(--texto-apoio); font-weight: 600; }
.pilar-passos li + li::before { content: ""; width: 28px; aspect-ratio: 2 / 1; margin: 0 12px; background: var(--acento);
  -webkit-mask: var(--seta-forma) center / contain no-repeat; mask: var(--seta-forma) center / contain no-repeat; }

@media (max-width: 900px) {
  .atuacao-grade { grid-template-columns: minmax(0, 1fr); }
  .pilares > li { grid-template-columns: 44px minmax(0, 1fr); }
  .pilar-passos { flex-direction: column; gap: 0; }
  .pilar-passos li { padding: 4px 0; }
  .pilar-passos li + li::before { width: 20px; margin: 0 10px 0 0; transform: none; }
}