/* ============================================================
   auto.css — página /auto/ (onda 5, pacote P13a)
   ------------------------------------------------------------
   Depois da unificação, o shell vem do base.css e TODO o simulador (quadro,
   wizard, painel, fichas, régua comparativa e veredito) vem do sim-ui.css.
   Contrato onda 5, interface 3 — aqui só entra:
     1. o acento da página;
     2. a dobra de resultado que só o carro tem (os contextos);
     3. o rótulo da segunda marca de destaque, que só existe nesta página.

   Redefinir qualquer classe de base.css ou sim-ui.css neste arquivo é defeito.
   ============================================================ */

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

/* ---------- 2. Rótulo da ficha "melhor com carro" ----------
   Estado exclusivo desta página: o carro tem DOIS destaques (o melhor saldo
   geral e o melhor entre os que terminam com o carro na garagem). Sem esta
   linha, as duas fichas anunciariam "Melhor saldo" e a página mentiria. */
.caminho.is-melhor-carro:not(.is-melhor)::after { content: "Melhor com carro"; }

/* ---------- 3. Dobra dos contextos (só o carro tem) ----------
   Quatro leituras curtas na gramática narrativa: quando cada caminho faz
   sentido pra quem está lendo. A moldura (.dobra .dobra--alt .dobra__titulo)
   é compartilhada; aqui fica só a grade e a fatia de texto. */
.contextos__titulo { margin-bottom: clamp(22px, 3.4vh, 34px); }

.contextos__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.contexto {
  padding-left: 18px;
  border-left: 2px solid var(--dourado);
}

.contexto__titulo {
  font-size: clamp(1.18rem, 4.6vw, 1.4rem);
  line-height: 1.18;
  text-wrap: balance;
  color: var(--bordo);
}

.contexto__texto {
  max-width: 52ch;
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--tinta-suave);
}

@media (min-width: 900px) {
  .contextos__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    row-gap: 34px;
  }

  .contexto { padding-left: 22px; }
}