/* ==========================================================
   O CICLO COMPLETO (#ciclo, Como funciona): as três fases num percurso só
   Em cada fase: o cabeçalho e as perguntas à esquerda, as etapas à direita e, embaixo, o que fica pronto.
   No celular, tudo em uma coluna, nessa ordem: cabeçalho, perguntas, etapas, o que fica pronto.
   ========================================================== */
.percurso-indice { margin-top: var(--espaco-5); }
.percurso-fase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cabeca etapas" "perguntas etapas" "pronto pronto"; gap: var(--espaco-5) clamp(32px, 5vw, 80px); margin-top: var(--espaco-7); padding-top: var(--espaco-5); border-top: 3px solid var(--texto); align-items: start; }
.percurso-cabeca { grid-area: cabeca; display: flex; flex-direction: column; gap: var(--espaco-3); }
.percurso-num { font-size: var(--texto-legenda); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.percurso-num span { font-weight: 500; letter-spacing: .08em; }
.percurso-cabeca h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.percurso-assinatura { font-size: var(--texto-destaque); line-height: 1.45; font-weight: 500; }
.percurso-perguntas { grid-area: perguntas; display: flex; flex-direction: column; gap: 10px; }
.percurso-etapas { grid-area: etapas; }
.percurso-pronto { grid-area: pronto; }
.percurso-fase .rotulo { margin: 0 0 var(--espaco-2); }

/* As perguntas (os antigos Desafios): abrem e fecham pelo próprio navegador */
.desafio { border: 1px solid var(--linha); background: var(--fundo); }
.desafio[open] { background: var(--superficie); border-color: var(--borda-controle); }
.desafio summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: var(--espaco-3); align-items: start; min-height: 56px; padding: 16px 18px; font-size: var(--texto-corpo); font-weight: 600; line-height: 1.4; }
.desafio summary::-webkit-details-marker { display: none; }
.desafio[open] .mais::after { transform: translate(-50%, -50%) rotate(0deg); }
.desafio > p { padding: 0 18px 18px; font-size: var(--texto-apoio); }

/* As etapas: numeradas, em sequência, ligadas por um traço */
.percurso-etapas ol { list-style: none; margin: 0; padding: 0; }
.percurso-etapas li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linha); font-size: var(--texto-corpo); line-height: 1.45; }
.etapa-num { display: grid; place-items: center; width: 40px; height: 40px; font: 600 16px/1 var(--font-titulo); border: 2px solid var(--texto); }

/* O que fica pronto: em duas colunas no computador */
.percurso-pronto ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.percurso-pronto li { padding: 16px 0 16px 22px; border-bottom: 1px solid var(--linha); position: relative; }
.percurso-pronto li::before { content: ""; position: absolute; left: 0; top: 25px; width: 8px; height: 8px; background: var(--acento); }
.percurso-pronto h5 { margin: 0 0 6px; font-size: var(--texto-corpo); font-weight: 600; line-height: 1.35; }
.percurso-pronto p { font-size: var(--texto-apoio); }
.percurso-pronto .link-seta { margin-top: var(--espaco-4); }

.percurso-fim { margin-top: var(--espaco-7); display: flex; flex-direction: column; gap: var(--espaco-3); max-width: 60ch; }
.percurso-fim h3 { font-size: clamp(24px, 2.6vw, 32px); margin-top: var(--espaco-4); }

@media (max-width: 900px) {
  .percurso-fase { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeca" "perguntas" "etapas" "pronto"; margin-top: var(--espaco-6); }
  .percurso-pronto ul { grid-template-columns: minmax(0, 1fr); }
}