/* ─── Layout: duas colunas no desktop, empilhado no celular ───────────── */

.tela {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}

/* ── Coluna do formulário ─────────────────────────────────────────────── */

.conteudo {
  display: flex;
  justify-content: center;
  padding: var(--e-8) var(--e-5) var(--e-10);
}

.conteudo__caixa {
  width: 100%;
  max-width: 520px;
}

.cabecalho { margin-bottom: var(--e-6); }

.cabecalho__titulo {
  font-family: var(--face-display);
  font-weight: 800;
  font-size: var(--t-30);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--e-2);
}

.cabecalho__sub {
  color: var(--ink-soft);
  font-size: var(--t-14);
}

/* ── Régua de passos ──────────────────────────────────────────────────── */

.regua {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-2);
  margin-bottom: var(--e-8);
}

.regua__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--e-3);
  border-top: 3px solid var(--linha);
  color: var(--ink-fraco);
  transition: color var(--normal) var(--curva),
              border-color var(--normal) var(--curva);
}

.regua__num {
  font-size: var(--t-12);
  font-weight: 500;
}

.regua__nome {
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.regua__item[aria-current="step"] {
  border-top-color: var(--makro);
  color: var(--ink);
}

/* Passo já concluído: fica na cor do selo, não no vermelho da marca */
.regua__item[data-feito] {
  border-top-color: var(--seal);
  color: var(--ink-soft);
}

/* ── Passos do formulário ─────────────────────────────────────────────── */

.passo { display: grid; gap: var(--e-5); }
.passo[hidden] { display: none; }

.passo--entrando {
  animation: passo-entra var(--normal) var(--curva) both;
}

@keyframes passo-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.passo__titulo {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-18);
  letter-spacing: -0.01em;
}

/* ── Ações ────────────────────────────────────────────────────────────── */

.acoes {
  display: flex;
  gap: var(--e-3);
  margin-top: var(--e-8);
}

.acoes .botao--principal { margin-left: auto; }

/* ── Rodapé ───────────────────────────────────────────────────────────── */

.rodape {
  margin-top: var(--e-10);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linha);
  color: var(--ink-soft);
  font-size: var(--t-13);
  display: grid;
  gap: var(--e-1);
}

.rodape a { color: var(--ink-soft); }
.rodape a:hover { color: var(--makro-deep); }
.rodape__suporte { color: var(--ink-fraco); }

/* ══ Desktop ══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .tela { grid-template-columns: 50fr 50fr; }

  .conteudo {
    align-items: center;
    padding: var(--e-12) var(--e-10);
  }

  .cabecalho__titulo { font-size: var(--t-38); }
}

/* Em tela grande o painel fica um pouco maior que o formulário: o
   formulário já tem largura máxima, então o espaço extra é melhor gasto
   como respiro em volta da marca. */
@media (min-width: 1440px) {
  .tela { grid-template-columns: 55fr 45fr; }
  .conteudo__caixa { max-width: 560px; }
}