/* ==========================================================
   AS FASES (#fases, página inicial): só a estrutura
   As abas (computador) e a lista que se abre (celular) são montadas por js/secoes/fases.js.
   A aparência (cores, bordas, letras) fica em css/rota.css, porque muda com a rota visual.
   ========================================================== */
.fases-cabeca { display: flex; flex-direction: column; gap: var(--espaco-3); max-width: 760px; }
.fases { margin-top: var(--espaco-5); }
.fases-abas { display: none; }
.fase-titulo { margin: 0; }
.fase-num, .fase-nome { display: block; }
.fase-corpo { display: grid; gap: var(--espaco-4); }
.fase-pronto ul { margin: var(--espaco-3) 0 0; padding: 0; list-style: none; }
.fase-pronto li { position: relative; padding: 10px 0 10px 22px; font-size: var(--texto-apoio); line-height: 1.5; }
.fase-pronto li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; background: var(--acento); }
.fase-pronto .link-seta { margin-top: var(--espaco-4); }
.fases-mais { margin-top: var(--espaco-5); }

/* Lista que se abre (celular, com JavaScript): o título é um botão de toda a largura */
.fase-abrir { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: var(--espaco-3); align-items: center; width: 100%; min-height: 64px; padding: 16px 0; text-align: left; background: none; border: 0; cursor: pointer; }
.fase-abrir[aria-expanded="true"] .mais::after { transform: translate(-50%, -50%) rotate(0deg); }
.fase-abrir + * { margin-top: 0; }
.fase-corpo { padding-bottom: var(--espaco-4); }

/* Abas (computador, com JavaScript): a fileira de abas e um painel por vez */
.fases.em-abas .fases-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fases.em-abas .fase-titulo { display: none; }
.fase-aba { display: flex; flex-direction: column; gap: 4px; min-height: 88px; padding: 18px 20px; text-align: left; background: none; border: 0; cursor: pointer; }
.fases.em-abas .fase { padding-top: var(--espaco-5); }
.fases.em-abas .fase-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: 0; }

/* Sem JavaScript: as três fases abertas, uma embaixo da outra */
html:not(.js) .fase-titulo { padding: var(--espaco-4) 0 var(--espaco-3); }