/* ==========================================================
   ORGANIZAÇÃO DAS CIDADES (#organizacao; nome provisório)
   A afirmação do urbanismo e da estruturação jurídica, e o fluxo
   em três colunas ligadas por setas largas e curvas.
   ========================================================== */
.organizacao-pre { font-size: 15px; color: var(--texto-suave); margin-bottom: var(--espaco-4); }
.organizacao-afirmacao { margin: 0; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.12; font-weight: 600; letter-spacing: -.015em; max-width: 22ch; }
.organizacao-afirmacao span { display: block; }
.organizacao-afirmacao span + span { margin-top: .35em; color: var(--texto-apagado); }
.fluxo { margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) var(--largura-seta) minmax(0, 1.45fr) var(--largura-seta) minmax(0, 1fr); column-gap: 12px; align-items: start; --largura-seta: clamp(56px, 5vw, 72px); }
.etapa-fluxo { position: relative; display: flex; flex-direction: column; gap: var(--espaco-3); padding-top: var(--espaco-3); border-top: 3px solid var(--cor-etapa); }
.etapa-fluxo h3 { font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--cor-etapa); }
.etapa-fluxo ul { list-style: none; margin: 0; padding: 0; }
.etapa-fluxo li { padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: var(--texto-apoio); color: var(--texto-suave); }
.ef-urbano { --cor-etapa: var(--texto-apagado); }
.ef-comunidade { --cor-etapa: var(--texto); }
.ef-juridica { --cor-etapa: var(--praca); --acento: var(--cinza-claro); background: var(--tinta); color: var(--quase-branco); border-top-width: 4px; padding: var(--espaco-4) clamp(24px, 2.4vw, 32px) var(--espaco-5); }
.ef-juridica h3 { color: var(--quase-branco); }
.ef-juridica ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--espaco-4); }
.ef-juridica li { color: var(--quase-branco); font-size: 16px; font-weight: 500; border-bottom-color: var(--linha-lista-sobre-escuro); display: flex; gap: 10px; align-items: baseline; }
.ef-juridica li::before { content: ""; flex: 0 0 6px; height: 6px; background: var(--acento); transform: translateY(-2px); }

.fechamento-conceito { margin-top: clamp(112px, 14vw, 176px); padding-bottom: var(--espaco-6); }
.fechamento-conceito::before { content: ""; display: block; width: 12px; height: 12px; background: var(--acento); margin-bottom: var(--espaco-4); }
.fechamento-conceito p { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.18; font-weight: 600; letter-spacing: -.012em; max-width: 24ch; }

/* Setas largas e levemente curvas entre as colunas (o sócio pediu setas "mais largas", "mais parrudas", "meio envergadas") */
.seta-fluxo { width: 100%; height: auto; margin-top: 30px; overflow: visible; }
.seta-fluxo .seta-corpo { fill: none; stroke: var(--acento); stroke-width: 18; stroke-linecap: round; }
.seta-fluxo .seta-ponta { fill: var(--acento); stroke: var(--acento); stroke-width: 4; stroke-linejoin: round; }

@media (max-width: 900px) {
  .fluxo { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  /* No celular as colunas se empilham e a seta aponta para baixo. */
  .seta-fluxo { width: 64px; margin: 26px 0 26px -6px; transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .ef-juridica ul { grid-template-columns: minmax(0, 1fr); }
}