/* ============================================================
   ig-simuladores — viagens.css (onda 5, pacote P13b)
   ------------------------------------------------------------
   Página /viagens/ 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 termômetro visível/invisível do custo real;
     4. a conta linha a linha (as parcelas do recibo) e o total;
     5. o canhoto do embarque e o recado de prazo curto;
     6. a caixa de ferramentas.

   Nada de redefinir classe de base.css/sim-ui.css: isso é defeito de contrato.
   A única exceção está documentada no bloco 1 — e vai como desvio para o P12.
   ============================================================ */

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

/* DESVIO REPORTADO AO P12 (base.css §8): `.chip.is-ativo` pinta `--creme` sobre
   `var(--acento)`. Com bordô e terracota o contraste passa; com o dourado desta
   página cai para 2,2:1 e o axe acusa violação séria já no carregamento (o chip
   do valor padrão nasce ativo). Correção mínima aqui — a regra definitiva é a
   base trocar o texto do chip ativo por um tom que sobreviva aos três acentos. */
.pagina-vig .chip.is-ativo { color: 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. O termômetro ----------
   A viagem tem dois preços: o que ela enxergava e o pedaço que só aparece
   depois. O pagina.js grava --visivel aqui. Puro desenho, aria-hidden. */
.termometro {
  display: flex;
  width: 100%;
  max-width: 520px;
  height: 14px;
  background: rgba(230, 212, 188, 0.16);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.termometro__visivel {
  width: var(--visivel, 50%);
  background: var(--areia);
  transition: width 520ms var(--ease);
}

.termometro__invisivel {
  flex: 1;
  background: var(--dourado);
}

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

/* ---------- 4. A conta, linha a linha ----------
   O detalhamento do custo real: cada parcela mostra o nome, o valor e um fio
   proporcional à fatia que ocupa no total (--parte, gravado pelo pagina.js). */
.conta {
  width: 100%;
  max-width: 560px;
  text-align: left;
}

.conta__linhas { display: grid; }

.parcela {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 16px;
  padding-block: 12px;
  border-top: 1px solid rgba(230, 212, 188, 0.22);
}

.parcela__nome {
  font-family: var(--font-apoio);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--areia);
}

.parcela__nota {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: rgba(230, 212, 188, 0.74);
}

.parcela__valor {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--creme);
  text-align: right;
}

/* Fio proporcional: a fatia de cada parcela no custo real, sem virar gráfico. */
.parcela__fio {
  grid-column: 1 / -1;
  width: var(--parte, 0%);
  height: 2px;
  background: var(--dourado);
  border-radius: var(--r-pill);
  transition: width 520ms var(--ease);
}

.total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--dourado);
}

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

.total__valor {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--creme);
  text-align: right;
}

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

/* ---------- 5. O embarque ----------
   O canhoto (quanto por mês, durante quantos meses) e o corpo do cartão. */
.embarque__canhoto {
  align-content: center;
  justify-items: center;
  text-align: center;
}

.embarque__corpo { display: grid; gap: clamp(14px, 2.4vh, 20px); }

/* Recado de prazo curto: papel com fio de acento, nunca aviso de erro vermelho.
   Aqui ele nasce sobre a dobra --alt, então o fundo é o papel claro (nas outras
   duas páginas narrativas o recado cai sobre papel e usa o creme). */
.recado {
  padding: clamp(18px, 2.8vh, 24px) clamp(18px, 4vw, 26px);
  background: var(--creme-papel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--dourado);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ---------- 6. Caixa de ferramentas ----------
   Quatro fichas com o link de cada serviço; alvo de toque de 44px nos elos. */
.caixa__lista {
  display: grid;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
}

.ferramenta {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px 22px;
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
}

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

.ferramenta__elos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.elo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-family: var(--font-apoio);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bordo);
  background: var(--creme-papel);
  border: 1px solid var(--dourado);
  border-radius: var(--r-pill);
  transition: color 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}

.elo:hover {
  color: var(--creme);
  background: var(--bordo);
  border-color: var(--bordo);
}

/* ---------- 7. Ritmo das dobras no desktop ----------
   O embarque abre em canhoto + corpo; a caixa de ferramentas vira duas colunas. */
@media (min-width: 900px) {
  .embarque__inner {
    grid-template-columns: minmax(220px, 0.42fr) 1fr;
    align-items: center;
    column-gap: 48px;
    max-width: 1000px;
  }

  .caixa__inner { max-width: 1000px; }

  .caixa__lista {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}