.etapas { background: var(--marrom-fundo); padding: var(--e6) var(--margem); }
.etapas__grade { display: grid; gap: var(--e6); }
/* Celular: o botão vem depois das etapas (ação natural depois de ler); a cabeça se desfaz para o botão virar item da grade. */
.etapas__cabeca { display: contents; }
.etapas__cabeca .botao { order: 2; justify-self: start; }
.etapas__lista { display: grid; gap: var(--e3); }
.etapas .etapa { position: sticky; top: calc(var(--altura-cabecalho) + var(--e3) + (var(--i) - 1) * 52px); min-height: 168px; padding: var(--e5); border-radius: var(--raio-cartao); color: var(--branco); }
.etapas .etapa:nth-child(1) { background: var(--etapa-1); }
.etapas .etapa:nth-child(2) { background: var(--etapa-2); }
.etapas .etapa:nth-child(3) { background: var(--etapa-3); }
.etapas .etapa:nth-child(4) { background: var(--etapa-4); }
.etapas .etapa:nth-child(5) { background: var(--etapa-5); }
.etapas .etapa:nth-child(6) { background: var(--etapa-6); }
.etapas .etapa .t-etapa { min-height: 20px; margin-bottom: var(--e4); }
.etapas .etapa__texto { font-size: 16px; line-height: 1.5; }
@media (min-width: 1000px) {
  .etapas { padding: var(--e8) var(--e7); }
  .etapas__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; column-gap: var(--e7); }
  .etapas__cabeca { display: grid; gap: var(--e5); justify-items: start; position: sticky; top: calc(var(--altura-cabecalho) + var(--e5)); }
  .etapas__cabeca .botao { order: 0; }
}