/* ============================================================
   ig-simuladores — aposentadoria.css (onda 5, pacote P13b)
   ------------------------------------------------------------
   Página /aposentadoria/ no TEMPLATE ÚNICO. Shell, wizard, painel, CTA e rodapé
   vêm inteiros de base.css + sim-ui.css; aqui fica SÓ o que é desta página:

     1. o acento (contrato onda 5, interface 3);
     2. o stat protagonista que abre o resultado;
     3. o recado de "sem data marcada";
     4. a linha do tempo entre as duas idades;
     5. o recorte do INSS em duas colunas no desktop.

   Nada de redefinir classe de base.css/sim-ui.css: isso é defeito de contrato.
   ============================================================ */

/* ---------- 1. Acento da página (capítulo 04: bordô) ---------- */
/* Pinta o filete do quadro, a marca ativa da trilha e o chip selecionado. */
body { --acento: var(--bordo); }

/* ---------- 2. Stat protagonista ----------
   O número que abre o resultado é o único que cresce além da escala do .stat
   compartilhado — e ele é sempre o <h2> do resultado (#resultado-titulo).
   Regra idêntica nas três páginas da gramática narrativa. */
h2.stat {
  gap: clamp(8px, 1.6vh, 14px);
  padding: clamp(22px, 3.6vh, 34px) clamp(18px, 4vw, 34px);
}

h2.stat .stat__valor {
  font-size: clamp(2.5rem, 10.5vw, 4.2rem);
  white-space: nowrap;
}

/* ---------- 3. Recado sem data marcada ----------
   Quando o aporte de hoje não fecha o número, a dobra do prazo troca o título
   pelo recado. Ele é papel com fio de acento, nunca aviso de erro vermelho. */
.recado {
  width: 100%;
  max-width: 62ch;
  padding: clamp(18px, 2.8vh, 24px) clamp(18px, 4vw, 26px);
  text-align: left;
  background: var(--creme);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--dourado);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ---------- 4. Linha do tempo ----------
   Duas idades e o caminho entre elas. Sem rótulo: os números falam.
   Estrutura e ids preenchidos pelo pagina.js — só a pintura muda. */
.linha-tempo {
  display: grid;
  grid-template-columns: auto minmax(56px, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
}

.linha-tempo__marca {
  display: grid;
  place-items: center;
  min-width: 58px;
  min-height: 58px;
  padding: 6px;
  font-family: var(--font-apoio);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--tinta-suave);
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
}

.linha-tempo__marca--fim {
  font-weight: 700;
  color: var(--creme);
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: var(--shadow-sm);
}

/* O caminho: fio dourado com o losango da marca chegando na ponta. */
.linha-tempo__trilho {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, var(--areia) 0%, var(--dourado) 46%, var(--terracota) 100%);
}

.linha-tempo__trilho::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 7px;
  height: 7px;
  background: var(--terracota);
  transform: translateY(-50%) rotate(45deg);
}

/* ---------- 5. O recorte do INSS ----------
   No desktop a dobra se abre em duas colunas com um fio pontilhado no meio:
   a afirmação de um lado, a conta do outro. No telefone volta a coluna única. */
.inss__corpo { display: grid; gap: clamp(16px, 2.6vh, 24px); }

@media (min-width: 900px) {
  .inss__inner {
    grid-template-columns: 0.82fr 1.18fr;
    align-items: start;
    column-gap: 54px;
    max-width: 1000px;
  }

  .inss__inner .dobra__titulo { max-width: 13ch; }

  .inss__corpo {
    padding-left: 54px;
    border-left: 1px dashed var(--dourado);
  }
}