/* ==========================================================
   A GESTÃO VIA ASSOCIAÇÃO (#gestao): as 3 etapas, do planejamento até a operação
   Como no slide do sócio (palestra do ENACON): três etapas lado a lado, ligadas por setas largas.
   No celular, uma embaixo da outra.
   ========================================================== */
.marca-provisoria { margin-top: var(--espaco-2); }
.gestao-etapas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--espaco-3); align-items: start; list-style: none; margin-top: var(--espaco-5); }
.gestao-etapa { display: flex; flex-direction: column; gap: var(--espaco-3); min-height: 100%; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--raio); background: var(--superficie); box-shadow: 0 0 0 1px var(--linha); }
.gestao-num { font: 400 44px/1 var(--font-titulo); color: var(--numero-gestao); }
.gestao-etapa h3 { font-size: 21px; line-height: 1.3; }
.gestao-etapa > p { font-size: var(--texto-apoio); color: var(--texto-suave); }
.gestao-etapa ul { list-style: none; margin-top: var(--espaco-2); padding-top: var(--espaco-3); border-top: 1px solid var(--linha); }
.gestao-etapa li { position: relative; padding-left: 18px; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--texto-suave); }
.gestao-etapa li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.gestao-seta { align-self: center; color: var(--acento); --seta-largura: 76px; }  /* setas maiores (o sócio, 27/10) */

/* O cartão que abre: o título é o botão; o cartão inteiro responde ao clique (js/secoes/gestao.js) */
.js .gestao-etapa { cursor: pointer; transition: box-shadow .25s; }
.js .gestao-etapa:hover { box-shadow: 0 0 0 1px var(--texto); }
.gestao-abrir { display: block; width: 100%; min-height: 44px; margin: -9px 0; padding: 9px 0; font: inherit; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
.gestao-ver { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--espaco-2); font-size: 14px; font-weight: 500; color: var(--texto-suave); }
.gestao-sinal { position: relative; width: 24px; height: 24px; border: 1px solid var(--borda-controle); border-radius: 50%; }
.gestao-sinal::before, .gestao-sinal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--texto); transform: translate(-50%, -50%); transition: transform .3s; }
.gestao-sinal::after { transform: translate(-50%, -50%) rotate(90deg); }
.gestao-etapa.aberta .gestao-sinal::after { transform: translate(-50%, -50%) rotate(0deg); }
.js .gestao-etapa:not(.aberta) ul { display: none; }
.js .gestao-etapa.aberta ul { animation: abrir-lista .35s ease both; }
html:not(.js) .gestao-ver { display: none; }
@keyframes abrir-lista { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .gestao-etapas { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .gestao-seta { justify-self: center; }
  .gestao-seta .seta { transform: rotate(90deg); }
}