/* ==========================================================
   DEPOIS DA ENTREGA (#depois-da-entrega, página inicial): a governança em quatro momentos, num ciclo
   No computador, os quatro em fileira, com uma seta entre eles e a volta do 4 ao 1 embaixo;
   no celular, empilhados, com a seta para baixo e a volta pela esquerda.
   A cor das setas segue --acento (a rota visual pode trocar em css/rota.css).
   ========================================================== */
.depois-cabeca { display: flex; flex-direction: column; gap: var(--espaco-3); max-width: 46ch; }
.momentos-ciclo { position: relative; margin-top: var(--espaco-6); --vao: clamp(40px, 5vw, 72px); --grossura: 5px; }
.momentos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vao); }
.momentos li { position: relative; display: flex; flex-direction: column; gap: 10px; }
.momento-num { display: grid; place-items: center; width: 48px; height: 48px; font: 600 20px/1 var(--font-titulo); background: var(--texto); color: var(--fundo); }
.momentos h3 { font-size: 21px; }
.momentos p { font-size: var(--texto-apoio); color: var(--texto-suave); }
/* A seta entre um momento e o seguinte */
.momentos li + li::before { content: ""; position: absolute; top: 8px; left: calc(-1 * var(--vao) + 4px); width: calc(var(--vao) - 8px); aspect-ratio: 2 / 1; background: var(--acento);
  -webkit-mask: var(--seta-forma) center / contain no-repeat; mask: var(--seta-forma) center / contain no-repeat; }
/* A volta do 4 ao 1: uma linha que sai de baixo do momento 4 e sobe até o momento 1, com a ponta para cima.
   As pontas ficam sob o centro dos números (24 px da borda de cada coluna). */
.momentos-volta { position: relative; height: 44px; margin: var(--espaco-4) calc(25% - .75 * var(--vao) - 24px - var(--grossura) / 2) 0 calc(24px - var(--grossura) / 2);
  border: var(--grossura) solid var(--acento); border-top: 0; border-radius: 0 0 18px 18px; }
.momentos-volta::before { content: ""; position: absolute; left: calc(-1 * var(--grossura) / 2 - 9px); top: -16px; border: 9px solid transparent; border-top: 0; border-bottom: 16px solid var(--acento); }

@media (max-width: 900px) {
  .momentos-ciclo { --vao: 64px; }
  .momentos { grid-template-columns: minmax(0, 1fr); padding-left: 44px; }
  /* A seta para baixo, no meio do vão, sob o número */
  .momentos li + li::before { top: calc(-1 * var(--vao) / 2 - 12px); left: 0; width: 48px; transform: rotate(90deg); }
  /* A volta: uma linha pela esquerda, do último momento até o primeiro, com a ponta para cima */
  .momentos-volta { position: absolute; left: 0; top: 24px; bottom: 24px; width: 22px; height: auto; margin: 0; border: var(--grossura) solid var(--acento); border-right: 0; border-radius: 14px 0 0 14px; }
  .momentos-volta::before { content: none; }
  .momentos-volta::after { content: ""; position: absolute; right: -14px; top: calc(-1 * var(--grossura) - 7px); border: 8px solid transparent; border-right: 0; border-left: 14px solid var(--acento); }
}