/* Casos novos: só o que estilo.css ainda não tem (passos, gráficos de barras em SVG, destaques).
   Usa apenas as variáveis de estilo.css, sem cor, fonte ou medida literal de identidade. */

/* passos: lista ordenada numerada por contador, com filete entre os itens */
.passos { list-style: none; counter-reset: passo; margin: 0 0 var(--esp-5); padding: 0; border-top: var(--filete-fino) solid var(--filete); }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--esp-4); padding-block: var(--esp-4); border-bottom: var(--filete-fino) solid var(--filete); }
.passos li::before {
  content: counter(passo);
  grid-row: 1 / span 2;
  font-family: var(--familia-serifada);
  font-variation-settings: var(--eixos-exibicao);
  font-size: var(--escala-600);
  font-weight: var(--peso-leve);
  line-height: 1;
  color: var(--numeral-destaque);
}
.caso-detalhe__texto .passos h3 { margin: 0 0 var(--esp-2); }
.caso-detalhe__texto .passos p { margin: 0; font-size: var(--escala-300); color: var(--texto-fraco); }

/* gráficos de barras em SVG estático: as cores vêm dos tokens e acompanham o tema */
.grafico { margin: var(--esp-4) 0 var(--esp-6); padding: var(--esp-4) var(--esp-4) var(--esp-3); border: var(--filete-fino) solid var(--filete); background: var(--fundo); }
.caso-detalhe__texto .grafico { max-width: 46rem; }
.grafico svg { display: block; width: 100%; height: auto; }
.grafico figcaption { margin-top: var(--esp-3); }
.grafico__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); margin: 0 0 var(--esp-3); padding: 0; list-style: none; font-family: var(--familia-sem-serifa); font-size: var(--escala-200); color: var(--texto); }
.grafico__legenda li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.grafico__amostra { width: 0.875rem; height: 0.875rem; border: var(--filete-medio) solid var(--texto-fraco); background: var(--fundo); }
.grafico__amostra--depois { border-color: var(--marca); background: var(--marca); }
.barra-antes { fill: var(--fundo); stroke: var(--texto-fraco); stroke-width: 2; }
.barra-depois { fill: var(--marca); stroke: var(--marca); stroke-width: 2; }
.grafico__valor { font-family: var(--familia-sem-serifa); font-size: var(--escala-300); font-weight: var(--peso-forte); fill: var(--texto); font-variant-numeric: lining-nums tabular-nums; }
.grafico__rotulo { font-family: var(--familia-sem-serifa); font-size: var(--escala-300); fill: var(--texto); }
.grafico__ref { font-family: var(--familia-sem-serifa); font-size: var(--escala-100); fill: var(--texto-fraco); }
.grafico__ref-linha { stroke: var(--texto-fraco); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico__base { stroke: var(--filete-forte); stroke-width: 1; }

/* destaques: dois números com a frase que os explica */
.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--esp-5) var(--calha); margin: var(--esp-6) 0; padding-top: var(--esp-5); border-top: var(--filete-fino) solid var(--filete); }
.caso-detalhe__texto .destaques { max-width: 46rem; }
.destaque__valor { display: block; font-family: var(--familia-serifada); font-variation-settings: var(--eixos-exibicao); font-size: var(--escala-600); font-weight: var(--peso-medio); line-height: 1; letter-spacing: var(--tracking-titulo); font-variant-numeric: lining-nums tabular-nums; }
.caso-detalhe__texto .destaque p { margin: var(--esp-2) 0 0; font-size: var(--escala-300); color: var(--texto-fraco); }