/* ============================================================
   ig-simuladores — transicao.css (onda 5, pacote P13b)
   ------------------------------------------------------------
   Página /transicao/ 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 + o selo de reserva pronta;
     3. o recado de "sem data marcada";
     4. a régua do prazo (uma marca por ano de espera);
     5. a fita dos meses de fôlego;
     6. o duelo do acelerador (a medida de hoje contra a medida com R$ 500 a mais).

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

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

/* ---------- 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;
}

/* Reserva já alcançada: o selo mostra o que ela tem hoje, no eixo do número. */
#reserva-selo {
  justify-self: center;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}

/* ---------- 3. Recado sem data marcada ----------
   Quando a poupança de hoje não fecha a reserva, 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);
  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. A régua do prazo ----------
   Uma marca por ano de espera, com o losango da marca fechando a medida.
   O pagina.js grava --anos aqui; o resto é pintura. */
.regua {
  position: relative;
  width: 100%;
  height: 34px;
}

.regua__trilho {
  position: absolute;
  inset: auto 0 12px 0;
  height: 12px;
  background-image:
    linear-gradient(90deg, var(--dourado) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, transparent 0 11px, var(--terracota) 11px 12px);
  background-repeat: repeat-x, no-repeat;
  background-size: calc(100% / var(--anos, 4)) 100%, 100% 100%;
}

.regua__ponta {
  position: absolute;
  right: -3px;
  bottom: 9px;
  width: 8px;
  height: 8px;
  background: var(--bordo);
  transform: rotate(45deg);
}

/* Sem data marcada não sobra título nem régua: o recado assume a dobra sozinho. */
.prazo--sem-data .dobra__inner { max-width: 680px; }

/* ---------- 5. A fita dos meses de fôlego ----------
   Um talão por mês comprado; o pagina.js redesenha a fita a cada recálculo. */
.fita {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  width: 100%;
  height: 58px;
}

.fita__mes {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, rgba(195, 157, 120, 0.28) 0%, rgba(195, 157, 120, 0.62) 100%);
  border-bottom: 3px solid var(--terracota);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

/* O primeiro mês é o que ela saca já no dia seguinte: sai mais forte que os outros. */
.fita__mes:first-child {
  background: linear-gradient(180deg, rgba(155, 86, 50, 0.34) 0%, rgba(98, 32, 25, 0.5) 100%);
  border-bottom-color: var(--bordo);
}

/* ---------- 6. O duelo do acelerador ----------
   Duas medidas na mesma régua: o prazo de hoje e o prazo com R$ 500 a mais.
   O pagina.js grava --largura em cada preenchimento. */
.acelera__bloco {
  display: grid;
  gap: clamp(16px, 2.6vh, 24px);
  align-content: start;
}

.duelo {
  display: grid;
  gap: 18px;
  align-content: center;
  width: 100%;
  padding: clamp(20px, 3vh, 28px) clamp(18px, 3vw, 28px);
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
}

.duelo__linha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
}

.duelo__trilho {
  display: block;
  height: 10px;
  background: var(--areia-suave);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.duelo__preenche {
  display: block;
  width: var(--largura, 0%);
  height: 100%;
  background: var(--tinta-suave);
  border-radius: var(--r-pill);
  transition: width 520ms var(--ease);
}

.duelo__linha--rapida .duelo__preenche { background: var(--acento); }

.duelo__rotulo {
  font-family: var(--font-apoio);
  font-size: var(--fs-small);
  color: var(--tinta-suave);
  white-space: nowrap;
}

.duelo__linha--rapida .duelo__rotulo { font-weight: 600; color: var(--bordo); }

@media (prefers-reduced-motion: reduce) {
  .duelo__preenche { transition: none; }
}

/* ---------- 7. Ritmo das dobras no desktop ----------
   Cada dobra do resultado tem um desenho próprio: o salário abre a fita na
   largura inteira, o acelerador põe a leitura de um lado e a medida do outro. */
@media (min-width: 900px) {
  .salario__inner {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
    column-gap: 56px;
    max-width: 1000px;
  }

  .salario__inner .fita {
    grid-column: 1 / -1;
    height: 72px;
    gap: 8px;
  }

  .acelera__inner {
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    column-gap: 56px;
    max-width: 1000px;
  }
}