/* ============================================================
   ig-simuladores — sim-ui.css (onda 5, pacote P12) · ARQUIVO NOVO
   ------------------------------------------------------------
   O componente ÚNICO do simulador. As 5 páginas consomem daqui:
   wizard, campos, painel de premissas e as duas gramáticas de resultado.
   Depende de tokens.css (interface 1) e de base.css (botões, campos, chips, stat).

   Contrato, interface 3 — o que a página AINDA pode fazer no seu <slug>.css:
     1. setar --acento no <body>;
     2. estilizar dobra de resultado que só ela tem.
   Redefinir qualquer classe deste arquivo no CSS de página é defeito.

   Ordem: 1 seção · 2 quadro/trilha · 3 passo/campo · 4 wizard nav
          · 5 premissas · 6 resultado · 7 gramática narrativa (dobra/stat)
          · 8 gramática comparativa (caminhos/barra/veredito)
   ============================================================ */

/* ---------- 1. Seção do simulador ---------- */
.simulador {
  padding-block: clamp(30px, 5vh, 64px) clamp(44px, 7vh, 88px);
  background: linear-gradient(180deg, var(--creme-papel) 0%, var(--creme) 22%, var(--creme) 100%);
  border-top: 1px solid var(--linha);
  scroll-margin-top: 12px;
}

.simulador__titulo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 2. Quadro do wizard ---------- */
.quadro {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(22px, 4.4vw, 38px) clamp(20px, 4vw, 40px) clamp(24px, 4vw, 34px);
  background: var(--creme-papel);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Filete do acento: a única cor que muda de página para página. */
.quadro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--acento);
}

.quadro__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: clamp(14px, 2.2vh, 20px);
  margin-bottom: clamp(14px, 2.4vh, 22px);
  border-bottom: 1px solid var(--areia-suave);
}

.quadro__status {
  font-family: var(--font-apoio);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--terracota);
}

/* Trilha de progresso: marcas finas, sem barra de dashboard. */
.trilha {
  display: flex;
  align-items: center;
  gap: 7px;
}

.trilha__marca {
  width: 22px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--areia-suave);
  transition: background 300ms var(--ease), width 300ms var(--ease);
}

.trilha__marca.is-feito { background: var(--dourado); }

.trilha__marca.is-ativo {
  width: 34px;
  background: var(--acento);
}

/* ---------- 3. Passo e campo ---------- */
.passo { display: none; }

.passo.is-ativo {
  display: grid;
  gap: 12px;
}

@media (prefers-reduced-motion: no-preference) {
  .passo.is-ativo { animation: passo-entra 340ms var(--ease) both; }

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

.passo__pergunta {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.28rem, 4.6vw, 1.62rem);
  line-height: 1.2;
  text-wrap: balance;
  color: var(--tinta);
}

.passo__apoio {
  max-width: 54ch;
  font-family: var(--font-apoio);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.campo { display: grid; gap: 8px; }

.campo__label {
  font-family: var(--font-apoio);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
}

/* Caixa do campo: sufixo ("anos", "%") ancorado dentro da borda do input. */
.campo__caixa {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.campo__caixa--curta { max-width: 220px; }

.campo__caixa:has(.campo__sufixo) .input-num,
.campo__caixa:has(.campo__sufixo) .input-money { padding-right: 4.6em; }

.campo__sufixo {
  position: absolute;
  right: 1em;
  font-family: var(--font-apoio);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--terracota);
  pointer-events: none;
}

.campo__erro {
  font-family: var(--font-apoio);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--vermelho);
}

/* Linha de atalhos do passo (os .chip vêm de base.css). */
.atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

/* ---------- 4. Navegação do wizard (interface 2 do contrato) ----------
   DOM: Continuar primeiro, Voltar depois.
   Mobile: coluna — pílula primária largura total em cima, Voltar como link abaixo.
   ≥860px: linha em row-reverse — Voltar à esquerda, primário à direita. */
.wizard__nav {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: clamp(16px, 2.8vh, 26px);
  padding-top: clamp(14px, 2.2vh, 20px);
  border-top: 1px solid var(--areia-suave);
}

.wizard__nav .btn-block { width: 100%; }

@media (min-width: 860px) {
  .wizard__nav {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }

  .wizard__nav .btn-block {
    width: auto;
    min-width: 240px;
  }
}

/* ---------- 5. Painel de premissas ---------- */
.premissas {
  padding-block: clamp(34px, 5.5vh, 68px);
  background: var(--creme);
  border-top: 1px solid var(--linha);
}

.painel {
  max-width: 860px;
  margin-inline: auto;
  background: var(--creme-papel);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.painel__resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px clamp(18px, 3.4vw, 28px);
  list-style: none;
  cursor: pointer;
  transition: background 220ms var(--ease);
}

.painel__resumo::-webkit-details-marker { display: none; }

.painel__resumo:hover { background: var(--areia-suave); }

.painel__titulo {
  font-family: var(--font-apoio);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--terracota);
}

.painel__seta {
  flex: 0 0 auto;
  width: 16px;
  height: 10px;
  color: var(--dourado);
  transition: transform 300ms var(--ease);
}

.painel[open] .painel__seta { transform: rotate(180deg); }

.painel__corpo {
  padding: 4px clamp(18px, 3.4vw, 28px) clamp(22px, 3.6vh, 30px);
  border-top: 1px solid var(--areia-suave);
}

.painel__apoio {
  max-width: 62ch;
  margin-block: 16px 20px;
  font-family: var(--font-apoio);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.painel__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 720px) {
  .painel__grade { grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
}

/* ---------- 6. Resultado ---------- */
.resultado[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .resultado.is-novo { animation: resultado-revela 780ms var(--ease) both; }

  @keyframes resultado-revela {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- 7. Gramática narrativa: dobras + números ----------
   Usada por aposentadoria, transição e viagens: uma ideia por dobra,
   alternando temperatura (papel claro / areia) para dar ritmo à leitura. */
.dobra {
  padding-block: clamp(40px, 6.5vh, 84px);
  background: var(--creme-papel);
  border-top: 1px solid var(--linha);
}

.dobra--alt {
  background:
    radial-gradient(60% 50% at 82% 0%, rgba(195, 157, 120, 0.16) 0%, rgba(195, 157, 120, 0) 64%),
    var(--creme);
}

.dobra--bordo {
  color: var(--areia);
  background: var(--grad-bordo);
  border-top-color: transparent;
}

.dobra--bordo .dobra__titulo { color: var(--creme); }
.dobra--bordo .dobra__texto { color: var(--areia); }
.dobra--bordo .stat { background: rgba(253, 250, 245, 0.06); border-color: rgba(230, 212, 188, 0.28); }
.dobra--bordo .stat__valor { color: var(--creme); }
.dobra--bordo .stat__rotulo { color: var(--dourado); }

.dobra__inner {
  display: grid;
  gap: clamp(16px, 2.6vh, 24px);
  max-width: 760px;
}

.dobra__inner--centro {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.dobra__titulo {
  max-width: 24ch;
  font-size: clamp(1.55rem, 5.4vw, 2.3rem);
  line-height: 1.14;
  color: var(--tinta);
}

.dobra__texto {
  max-width: 60ch;
  font-family: var(--font-text);
  font-size: clamp(1rem, 3.2vw, var(--fs-body-lg));
  line-height: 1.66;
  color: var(--tinta-suave);
}

/* Stat protagonista: o número que ABRE o resultado é o único que cresce além da
   escala do .stat (base.css §10). Na gramática narrativa ele é sempre o <h2> do
   resultado (#resultado-titulo) — por isso o seletor de elemento serve de gancho
   no markup que já existe. `.stat--abertura` é o apelido explícito para markup novo.
   Promovido das 3 páginas narrativas, onde o bloco era byte a byte idêntico. */
h2.stat,
.stat--abertura {
  gap: clamp(8px, 1.6vh, 14px);
  padding: clamp(22px, 3.6vh, 34px) clamp(18px, 4vw, 34px);
}

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

/* Grade de métricas: os .stat de base.css entram aqui. */
.dobra__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}

@media (min-width: 720px) {
  .dobra__stats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
}

/* ---------- 8. Gramática comparativa: caminhos + barras + veredito ----------
   Usada por casa e auto: os caminhos lado a lado, a régua com zero comum
   e a frase que fecha a decisão. */
.caminhos {
  padding-block: clamp(40px, 6.5vh, 84px);
  background: var(--creme-papel);
  border-top: 1px solid var(--linha);
}

.caminhos__titulo {
  max-width: 22ch;
  margin-bottom: clamp(22px, 3.4vh, 34px);
  font-size: clamp(1.6rem, 5.6vw, 2.4rem);
  line-height: 1.12;
  color: var(--tinta);
}

.caminhos__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 900px) {
  .caminhos__grade { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; }
}

.caminho {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px 22px;
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}

/* O caminho vencedor não muda de tamanho: muda de matéria. */
.caminho.is-melhor,
.caminho.is-melhor-carro {
  background: var(--creme-papel);
  border-color: var(--dourado);
  box-shadow: var(--shadow-md);
}

.caminho.is-melhor::after,
.caminho.is-melhor-carro::after {
  content: "Melhor saldo";
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 5px 12px;
  font-family: var(--font-apoio);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bordo);
  background: var(--grad-ouro-branco);
  border-radius: var(--r-pill);
}

.caminho__titulo {
  font-size: clamp(1.2rem, 4.4vw, 1.4rem);
  line-height: 1.2;
  color: var(--bordo);
}

.caminho__resumo {
  font-family: var(--font-apoio);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.linhas {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.linha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding-block: 9px;
  border-top: 1px solid var(--areia-suave);
}

.linha dt {
  font-family: var(--font-apoio);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--tinta-suave);
}

.linha dd {
  font-family: var(--font-apoio);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--tinta);
  text-align: right;
}

.linha--saldo {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--dourado);
}

.linha--saldo dt { color: var(--tinta); font-weight: 600; }

.linha--saldo dd { font-size: var(--fs-h4); color: var(--bordo); }

/* 8.1 Régua comparativa: zero comum, preenchimento a partir dele. */
.comparativo {
  padding-block: clamp(30px, 5vh, 60px);
  background: var(--creme);
  border-top: 1px solid var(--linha);
}

.barras {
  display: grid;
  gap: 16px;
  max-width: 860px;
  margin-inline: auto;
}

.barra {
  display: grid;
  grid-template-columns: minmax(96px, 0.42fr) 1fr auto;
  align-items: center;
  gap: 12px;
}

.barra__rotulo {
  font-family: var(--font-apoio);
  font-size: var(--fs-small);
  color: var(--tinta-suave);
}

.barra__trilho {
  position: relative;
  height: 12px;
  background: var(--areia-suave);
  border-radius: var(--r-pill);
  overflow: hidden;
}

/* Marca do zero relativo — a referência da régua. */
.barra__zero {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--zero, 0%);
  width: 1px;
  background: var(--tinta-suave);
  opacity: 0.5;
}

.barra__preenchimento {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--esquerda, 0%);
  width: var(--largura, 0%);
  background: var(--acento);
  border-radius: var(--r-pill);
  transition: left 520ms var(--ease), width 520ms var(--ease);
}

.barra__valor {
  font-family: var(--font-apoio);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--tinta);
  text-align: right;
}

@media (max-width: 559px) {
  .barra {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
  }

  .barra__trilho { grid-column: 1 / -1; }
}

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

/* 8.2 Veredito: a frase que fecha a decisão. */
.veredito {
  padding-block: clamp(40px, 6.5vh, 84px);
  color: var(--areia);
  background: var(--grad-bordo);
}

.veredito__inner {
  display: grid;
  gap: 16px;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.veredito__titulo {
  font-size: clamp(1.6rem, 5.6vw, 2.4rem);
  line-height: 1.14;
  color: var(--creme);
}

.veredito__texto {
  font-family: var(--font-text);
  font-size: clamp(1rem, 3.2vw, var(--fs-body-lg));
  line-height: 1.66;
  color: var(--areia);
}

.veredito__nota {
  font-family: var(--font-apoio);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(230, 212, 188, 0.78);
}

.veredito .num { color: var(--branco); }