/* Tokens visuais do AItrilha — a fonte única da paleta e das medidas compartilhadas entre o painel
   e o site institucional.

   site/styles/tokens.css é uma cópia byte a byte deste arquivo, e um teste em Go compara o hash dos
   dois. Se você mudar um valor aqui, copie o arquivo inteiro para lá — senão o teste do site falha.

   Os valores abaixo são exatamente os que o painel já usava inline nos templates; esta extração não
   mudou nenhuma cor nem nenhuma medida. */
:root {
  --familia: system-ui, sans-serif;
  --largura-conteudo: 56rem;
  --raio: 4px;

  --cor-texto: #16202c;
  --cor-texto-suave: #6b7683;
  --cor-acao: #2f6feb;
  --cor-superficie: #fff;
  --cor-fundo-suave: #f6f7f9;
  --cor-borda: #dfe3e8;
  --cor-borda-campo: #c3cad3;
  --cor-erro-fundo: #fdecec;
  --cor-erro-texto: #8b1a1a;
}
/* CSS do site institucional.

   As cores e as medidas compartilhadas com o painel vêm de tokens.css, que é embutido logo acima
   deste arquivo no <style> de cada página. O que está aqui é só do site: a grade de tipos e a
   trilha do hero não têm equivalente no painel, e enfiá-las em tokens.css sujaria o arquivo que o
   painel também carrega.

   Uma cor de ação só. Não há verde de "bom" nem vermelho de "ruim": o destaque vem de peso e
   tamanho, não de matiz. */

:root {
  /* Escala de tipos, razão 1.25. Poucos degraus, bem separados — dois tamanhos parecidos lado a
     lado leem como erro de digitação, não como hierarquia. */
  --t-xs: 0.8rem;
  --t-sm: 1rem;
  --t-md: 1.25rem;
  --t-lg: 1.5625rem;
  --t-xl: 1.953rem;
  --t-2xl: 2.441rem;
  --t-display: clamp(2.441rem, 6vw, 3.815rem);

  /* Medida de leitura confortável. 65ch é o alvo do corpo de texto; 45ch é o do subtítulo do
     hero, que é maior e por isso cabe menos por linha. */
  --medida: 65ch;
  --medida-curta: 45ch;

  --espaco-secao: clamp(3rem, 8vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--t-sm)/1.6 var(--familia);
  color: var(--cor-texto);
  background: var(--cor-superficie);
  /* Sem tema claro/escuro e sem prefers-color-scheme: um tema só. */
}

main { max-width: var(--largura-conteudo); margin: 0 auto; padding: 0 1.25rem; }

p { max-width: var(--medida); }

a { color: var(--cor-acao); }

/* Todo número que muda de valor entre uma renderização e outra — preço, cota, os três resultados
   da calculadora de ROI — usa esta classe. Sem ela os dígitos dançam de largura e a coluna
   parece desalinhada. */
.num { font-variant-numeric: tabular-nums; }

/* ---- Hierarquia ------------------------------------------------------------------------- */

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--t-display); font-weight: 800; margin: 0 0 1rem; }
h2 { font-size: var(--t-xl); font-weight: 700; margin: 0 0 1rem; }
h3 { font-size: var(--t-md); font-weight: 600; margin: 0 0 .5rem; }

/* ---- Foco e navegação por teclado ------------------------------------------------------- */

/* :focus-visible sozinho deixa de fora navegador que não o implementa; o par com :focus cobre os
   dois sem acender o anel no clique de mouse do resto. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cor-acao);
  outline-offset: 2px;
}

.pular { position: absolute; left: -9999px; }
.pular:focus {
  left: 1rem; top: 1rem; z-index: 10;
  padding: .6rem 1rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

/* ---- Cabeçalho e rodapé ----------------------------------------------------------------- */

.cabecalho {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--largura-conteudo); margin: 0 auto;
  padding: 1rem 1.25rem;
  /* O entalhe do iPhone come a lateral do cabeçalho em retrato. */
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
  border-bottom: 1px solid var(--cor-borda);
}

/* O logotipo: "ai" leve, "Trilha" pesado, e o pingo do "i" desenhado como o marcador da trilha.
   É a única piada visual do site, e ela é sobre o produto. */
/* O logotipo é link para a home, e no celular ele é alvo de toque como qualquer outro: 44 px de
   altura, sem inflar a altura visual do cabeçalho. */
.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--cor-texto);
  font-size: var(--t-md);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.marca b { font-weight: 800; }

/* O glifo é "ı", i sem pingo, então não há pingo original para cobrir — o marcador é o único
   ponto ali. */
.marca__i { position: relative; font-style: normal; }
.marca__i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .78em; /* logo acima da haste, onde o pingo cairia */
  width: .2em; height: .2em;
  margin-left: -.1em;
  border-radius: 50%;
  background: var(--cor-acao);
}

.cabecalho nav ul, .rodape ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0;
}

/* Alvo de toque de 44 px em todo link de navegação, sem inflar a altura visual do cabeçalho. */
.cabecalho nav a { display: inline-flex; align-items: center; min-height: 44px; }

.rodape {
  max-width: var(--largura-conteudo); margin: 0 auto;
  padding: var(--espaco-secao) 1.25rem 2rem;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--cor-borda);
  font-size: var(--t-xs);
}
.rodape h2 {
  font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cor-texto-suave); margin: 0 0 .5rem;
}
.rodape ul { flex-direction: column; gap: .4rem; }
.rodape a { color: var(--cor-texto); text-decoration: none; }
.rodape a:hover { color: var(--cor-acao); text-decoration: underline; }
.creditos {
  color: var(--cor-texto-suave); max-width: none;
  margin: 2.5rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--cor-borda);
}

/* Três colunas — Produto · Empresa · Legal — a partir do tablet; empilhadas no celular. */
.rodape__colunas { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .rodape__colunas { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Menu do celular -------------------------------------------------------------------- */

.menu > summary {
  display: inline-flex; align-items: center; min-height: 44px;
  cursor: pointer; font-weight: 600;
  list-style: none; /* tira o triângulo em Firefox */
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > nav ul { flex-direction: column; padding: .5rem 0; }

@media (min-width: 56rem) {
  /* No desktop a navegação fica sempre visível, sem duplicar marcação e sem script. São dois
     mecanismos porque os navegadores escondem o conteúdo de um <details> fechado de duas formas
     diferentes, conforme a idade:

     - display:contents tira a caixa do <details>, e nos navegadores mais antigos isso basta;
     - Chromium de 2024 em diante esconde via ::details-content { content-visibility: hidden },
       que sobrevive ao display:contents e precisa ser desfeito explicitamente.

     Medido: sem a segunda regra, a navegação some no desktop no Edge atual. Não é hipótese. */
  .menu { display: contents; }
  .menu::details-content { content-visibility: visible; }
  .menu > summary { display: none; }
  .menu > nav ul { flex-direction: row; }
}

/* ---- Botões ----------------------------------------------------------------------------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .55rem 1.15rem;
  border: 1px solid var(--cor-borda-campo); border-radius: var(--raio);
  text-decoration: none; color: var(--cor-texto); font-weight: 600;
}
.botao--primario { background: var(--cor-texto); border-color: var(--cor-texto); color: var(--cor-superficie); }

.acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; max-width: none; }
.cabecalho__acoes { display: flex; align-items: center; gap: 1rem; margin: 0; max-width: none; }

/* ---- Hero ------------------------------------------------------------------------------- */

.hero { padding: var(--espaco-secao) 0 0; }
.hero__sub { font-size: var(--t-md); max-width: var(--medida-curta); color: var(--cor-texto-suave); margin: 0; }

/* ---- Seções ----------------------------------------------------------------------------- */

.secao { padding: var(--espaco-secao) 0 0; }
.secao__sub { font-size: var(--t-md); color: var(--cor-texto-suave); }

/* A seção da conversa tem o mesmo peso do hero: é ela que protege contra decepção no primeiro
   dia de uso. O destaque vem de respiro e de uma placa de fundo, não de cor. */
.secao--forte {
  margin-top: var(--espaco-secao);
  padding: var(--espaco-secao) 1.5rem;
  background: var(--cor-fundo-suave);
  border-radius: 12px;
}
.secao--historia p { font-size: var(--t-md); }

.ressalva { color: var(--cor-texto-suave); font-size: var(--t-xs); margin-top: 1.5rem; }

/* ---- Faixa de fatos --------------------------------------------------------------------- */

.fatos {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin: var(--espaco-secao) 0 0; padding: 1rem 0;
  border-top: 1px solid var(--cor-borda); border-bottom: 1px solid var(--cor-borda);
  font-size: var(--t-xs); color: var(--cor-texto-suave);
}

/* ---- Antes e depois --------------------------------------------------------------------- */

.pares { display: grid; gap: 1.5rem; }
.par {
  display: grid; gap: .5rem;
  padding: 1.25rem 0; border-top: 1px solid var(--cor-borda);
}
.par p { margin: 0; max-width: none; }
.par__antes { color: var(--cor-texto-suave); }
.par__depois { font-weight: 600; }

@media (min-width: 48rem) {
  .par { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
}

/* ---- Quatro passos ---------------------------------------------------------------------- */

.passos { list-style: none; counter-reset: passo; display: grid; gap: 2rem; margin: 0; padding: 0; }
.passos > li { counter-increment: passo; padding-left: 3rem; position: relative; }
.passos > li::before {
  content: counter(passo);
  position: absolute; left: 0; top: -.15rem;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--cor-texto); color: var(--cor-superficie);
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}

@media (min-width: 56rem) {
  .passos { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
}

/* ---- Mockup de conversa ----------------------------------------------------------------- */

.atos { display: grid; gap: 2.5rem; }
.ato > p { color: var(--cor-texto-suave); }

.conversa {
  display: grid; gap: .5rem;
  padding: 1rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
}
.fala {
  margin: 0; max-width: 34rem;
  padding: .55rem .8rem;
  border-radius: 10px;
  font-size: var(--t-xs);
}
.fala__quem {
  display: block;
  font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cor-texto-suave);
  margin-bottom: .15rem;
}
/* O lead à esquerda, a resposta à direita — a mesma leitura de qualquer aplicativo de mensagem.
   A distinção não depende só do lado nem só da cor: cada bolha diz de quem é. */
.fala--lead { background: var(--cor-fundo-suave); justify-self: start; }
.fala--ia { background: var(--cor-fundo-suave); justify-self: end; border: 1px solid var(--cor-borda); }
.fala--operador { background: var(--cor-superficie); justify-self: end; border: 1px dashed var(--cor-borda-campo); }
.fala--sistema {
  background: none; justify-self: stretch; max-width: none;
  padding: .35rem 0; color: var(--cor-texto-suave); font-style: italic;
}

/* Os três atos ficam empilhados, e não lado a lado. Em três colunas cada conversa vira uma tira
   de 15rem e as bolhas mal cabem duas palavras por linha — e esta é a seção que o brief manda ter
   o peso do hero. Empilhado, cada ato ganha a explicação à esquerda e a conversa à direita, com
   largura de verdade, e a leitura fica na ordem em que os três acontecem. */
@media (min-width: 48rem) {
  .ato {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    align-items: start;
  }
  .ato h3 { grid-column: 1; }
  .ato > p { grid-column: 1; margin: 0; }
  .ato .conversa { grid-row: 1 / span 2; grid-column: 2; }
}

/* ---- Mockup do funil -------------------------------------------------------------------- */

.funil { display: grid; gap: .1rem; }
.funil__linha {
  display: grid; grid-template-columns: 1fr auto minmax(0, 55%);
  align-items: center; gap: .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--cor-borda);
  font-size: var(--t-xs);
}
.funil__nome { font-weight: 600; }
.funil__valor { text-align: right; }
.funil__barra { display: block; }
.funil__barra > span {
  display: block; height: 1rem; min-width: 2px;
  background: var(--cor-acao); border-radius: 2px;
}
.funil__sem-fonte { grid-column: 2 / -1; color: var(--cor-texto-suave); }

/* Larguras das barras do mockup, em passos de 5%. Existem como classe, e não como atributo style
   no elemento, porque a CSP do site é style-src 'self' e bloqueia estilo inline. Gerado à mão uma
   vez; o passo de 5% é fino o bastante para um mockup e curto o bastante para caber aqui. */
.larg-0 { width: 0%; }
.larg-5 { width: 5%; }
.larg-10 { width: 10%; }
.larg-15 { width: 15%; }
.larg-20 { width: 20%; }
.larg-25 { width: 25%; }
.larg-30 { width: 30%; }
.larg-35 { width: 35%; }
.larg-40 { width: 40%; }
.larg-45 { width: 45%; }
.larg-50 { width: 50%; }
.larg-55 { width: 55%; }
.larg-60 { width: 60%; }
.larg-65 { width: 65%; }
.larg-70 { width: 70%; }
.larg-75 { width: 75%; }
.larg-80 { width: 80%; }
.larg-85 { width: 85%; }
.larg-90 { width: 90%; }
.larg-95 { width: 95%; }
.larg-100 { width: 100%; }

@media (max-width: 30rem) {
  .funil__linha { grid-template-columns: 1fr auto; }
  .funil__barra { grid-column: 1 / -1; }
}

/* ---- Balas e cartões -------------------------------------------------------------------- */

.balas { display: grid; gap: 1.75rem; }
.bala p { color: var(--cor-texto-suave); margin: 0; }

@media (min-width: 48rem) {
  .balas { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; }
}

.cartoes { list-style: none; display: grid; gap: .1rem; margin: 0; padding: 0; }
.cartoes li { border-top: 1px solid var(--cor-borda); }
.cartoes a {
  display: block; padding: 1rem 0;
  font-size: var(--t-md); font-weight: 600; text-decoration: none; color: var(--cor-texto);
}
.cartoes a:hover { color: var(--cor-acao); }

/* ---- Chamada final ---------------------------------------------------------------------- */

.chamada { padding-bottom: var(--espaco-secao); }

/* ---- Subpáginas ------------------------------------------------------------------------- */

.pagina { padding: var(--espaco-secao) 0; }
.pagina__abertura { margin-bottom: var(--espaco-secao); }
.intro { font-size: var(--t-md); color: var(--cor-texto-suave); max-width: var(--medida-curta); }
.pagina section { margin-bottom: 2.5rem; }
.pagina h2 { margin-top: 2.5rem; }
/* Aparte: fundo, sem contorno e sem barra. É o que o distingue do aviso (contorno) e da citação
   (barra), sem que nenhum dos três precise de cor própria. */
.nota {
  padding: .8rem 1.1rem;
  background: var(--cor-fundo-suave);
  border-radius: var(--raio);
  color: var(--cor-texto-suave);
  max-width: var(--medida);
}
/* ---- Calculadora de retorno ------------------------------------------------------------- */

/* Nenhum verde e nenhum vermelho aqui, nem no resultado negativo: o sistema tem uma cor de ação
   só, e ela é do botão. O que separa os três resultados é peso e tamanho. */
.roi {
  margin: var(--espaco-secao) 0 0;
  padding: 2rem 1.5rem;
  background: var(--cor-fundo-suave);
  border-radius: 12px;
}
.roi__sub { color: var(--cor-texto-suave); }

.roi__grade { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 56rem) {
  .roi__grade { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
}

/* No celular os quatro campos empilham e o teclado numérico abre direto (inputmode="decimal"). */
.roi__campos .campo { margin-bottom: 1.1rem; }
.roi__campos input { background: var(--cor-superficie); }

.roi__linha { margin: 0 0 1rem; max-width: none; }
.roi__rotulo { display: block; font-size: var(--t-xs); color: var(--cor-texto-suave); }
.roi__valor { display: block; font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; }
.roi__linha--forte .roi__valor { font-size: var(--t-2xl); font-weight: 800; }
.roi__traducao { display: block; font-size: var(--t-xs); color: var(--cor-texto-suave); }

/* As premissas ficam coladas nos números, não em letra miúda de rodapé: são elas que determinam
   o resultado inteiro. */
.roi__premissas {
  margin: 1.5rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
  font-size: var(--t-xs); color: var(--cor-texto-suave);
  max-width: none;
}
/* A ressalva some quando o tom é "normal" — :empty evita uma caixa vazia ocupando espaço. */
.roi__ressalva { margin: 1rem 0 0; font-weight: 600; max-width: none; }
.roi__ressalva:empty { display: none; margin: 0; }

/* O segundo bloco é separado do primeiro por uma régua e um título, e não por cor: o de cima é
   economia que já acontece, o de baixo é o tamanho de um ativo que ainda depende de um recurso não
   publicado. Misturar os dois num número só seria a desonestidade mais fácil desta página. */
.roi__base { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--cor-borda); }
.roi__base h3 { font-size: var(--t-md); margin: 0; }
.roi__base .roi__grade { margin-top: 1.5rem; }

.roi__fecho { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--cor-borda); }
.roi__fecho p { margin: 0 0 1rem; }

/* ---- Planos ----------------------------------------------------------------------------- */

/* O aviso de preço provisório precisa parar o olho, mas não com cor: a paleta tem uma cor de ação
   só, e ela é do botão. O contorno completo é o que o separa da nota, que usa o mesmo fundo sem
   contorno. */
.aviso {
  padding: .9rem 1.1rem;
  background: var(--cor-fundo-suave);
  border: 1px solid var(--cor-texto);
  border-radius: var(--raio);
  max-width: var(--medida);
}

.faixas { display: grid; gap: 1.5rem; }
.faixa {
  display: flex; flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--cor-borda); border-radius: 12px;
}
/* A faixa em destaque se separa por peso de borda, não por cor: uma cor de ação só, e ela é do
   botão. */
.faixa--destaque { border-color: var(--cor-texto); border-width: 2px; }
.faixa h2 { font-size: var(--t-md); margin: 0 0 .75rem; }
.faixa__preco { margin: 0; }
.faixa__preco strong { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.02em; }
.faixa__preco span { color: var(--cor-texto-suave); font-size: var(--t-xs); }
.faixa__cota { margin: .25rem 0 1rem; color: var(--cor-texto-suave); font-size: var(--t-xs); }
.faixa__para { margin: 0 0 1rem; }
.faixa ul { margin: 0 0 1.5rem; padding-left: 1.1rem; font-size: var(--t-xs); }
.faixa ul li { margin-bottom: .35rem; }
.faixa > p:last-child { margin: auto 0 0; } /* botão colado no rodapé do cartão */

@media (min-width: 56rem) {
  .faixas { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

/* Tabela larga rola dentro da própria caixa. É o que impede a página inteira de rolar na
   horizontal no celular — a única conferência de layout que não admite opinião. */
.tabela-rolavel { overflow-x: auto; }
.comparacao { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--t-xs); }
.comparacao th, .comparacao td {
  text-align: left; padding: .55rem .7rem;
  border-bottom: 1px solid var(--cor-borda);
}
.comparacao thead th { border-bottom: 2px solid var(--cor-texto); }
.comparacao td { text-align: center; color: var(--cor-texto-suave); }
.comparacao tbody th { font-weight: 600; }

.duvidas { max-width: var(--medida); }
.duvidas dt { font-weight: 700; margin-top: 1.5rem; }
.duvidas dd { margin: .35rem 0 0; color: var(--cor-texto-suave); }

/* ---- Formulário de contato -------------------------------------------------------------- */

.contato__email { font-size: var(--t-md); font-weight: 600; }

.formulario { max-width: 34rem; }
.campo { display: grid; gap: .25rem; margin: 0 0 1.25rem; max-width: none; }
.campo label { font-weight: 600; font-size: var(--t-xs); }
.campo__opcional { font-weight: 400; color: var(--cor-texto-suave); }
.campo__ajuda { color: var(--cor-texto-suave); font-size: var(--t-xs); }
.campo input, .campo textarea {
  width: 100%; padding: .6rem;
  border: 1px solid var(--cor-borda-campo); border-radius: var(--raio);
  font: inherit; font-size: 1rem; /* 16px impede o iOS de dar zoom ao focar o campo */
  background: var(--cor-superficie); color: var(--cor-texto);
}
.campo textarea { resize: vertical; }

/* ---- Artigos ---------------------------------------------------------------------------- */

.artigo__meta { color: var(--cor-texto-suave); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.artigo__corpo > * { max-width: var(--medida); }
.artigo__corpo h2 { margin-top: 2.5rem; }

.lista-artigos { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.lista-artigos li { padding: 1.5rem 0; border-top: 1px solid var(--cor-borda); }
.lista-artigos h2 { font-size: var(--t-md); margin: 0 0 .5rem; }
.lista-artigos h2 a { color: var(--cor-texto); text-decoration: none; }
.lista-artigos h2 a:hover { color: var(--cor-acao); }
.lista-artigos p { margin: 0 0 .5rem; color: var(--cor-texto-suave); }

.relacionado {
  margin-top: var(--espaco-secao);
  padding-top: 1.5rem;
  border-top: 1px solid var(--cor-borda);
}
.relacionado h2 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--cor-texto-suave); margin: 0 0 .5rem;
}
.relacionado p { font-size: var(--t-md); font-weight: 600; margin: 0; }

.indice { font-size: var(--t-xs); }
.indice h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--cor-texto-suave); margin: 0 0 .5rem; }
.indice ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }

@media (min-width: 56rem) {
  .pagina--com-indice { display: grid; grid-template-columns: 14rem 1fr; gap: 3rem; align-items: start; }
  .pagina--com-indice .pagina__abertura { grid-column: 1 / -1; }
  .indice { position: sticky; top: 1.5rem; }
}

/* ---- A trilha do lead ------------------------------------------------------------------- */

/* Este é o único elemento animado do site. Se algo mais na página se mexer sozinho, é bug.
   A animação toca uma vez e para — não é laço.

   Nada se move por baixo de texto: a trilha é uma faixa própria, abaixo da cópia do hero. Por
   isso não há véu translúcido aqui — véu existe para proteger contraste de texto sobre fundo em
   movimento, e não há esse caso. O pior quadro da animação tem exatamente o mesmo contraste que
   o primeiro, porque o que se move é um ponto decorativo, não o fundo dos rótulos. */

/* A faixa é quem ancora a linha e o ponto que percorre. Ela existe separada do <ol> porque um
   <ol> só aceita <li> como filho, e o ponto não é item de lista — é decoração. */
.trilha-faixa {
  container-type: inline-size; /* habilita cqw, que é como o ponto sabe o comprimento do percurso */
  position: relative;
  margin: var(--espaco-secao) 0 0;
  padding: 2.5rem 0 0;
}

/* A linha vai do centro do primeiro ponto ao centro do último — daí os 12.5% de cada lado, que
   são meia coluna de quatro. */
.trilha-faixa::before {
  content: "";
  position: absolute;
  top: .5rem;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--cor-borda-campo);
}

.trilha {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin: 0;
  padding: 0;
  text-align: center;
}

.trilha li {
  position: relative;
  font-size: var(--t-xs);
  color: var(--cor-texto-suave);
}

/* Os pontos parados. O último é maior e preenchido: é o lead que chegou ao fim. */
.trilha li::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--cor-superficie);
  box-shadow: inset 0 0 0 1px var(--cor-texto-suave);
}
.trilha li:last-child::before {
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  background: var(--cor-texto);
  box-shadow: none;
}

/* O ponto que percorre. Decorativo: os rótulos é que carregam o significado, então ele é
   aria-hidden no HTML e some para quem usa leitor de tela. */
.trilha__ponto {
  position: absolute;
  top: .5rem;
  left: 12.5%;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--cor-acao);
  /* Só transform e opacity — nunca background-position, que força repintura a cada quadro. */
  animation: trilha-percorrer 2s cubic-bezier(.4, 0, .2, 1) .4s 1 both;
}

/* 75cqw é a distância do primeiro ao último ponto: a trilha tem quatro colunas iguais, e o
   percurso são três delas. */
@keyframes trilha-percorrer {
  from { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  to   { transform: translateX(75cqw); opacity: 1; }
}

/* Sem exceção: quem pediu menos movimento vê a trilha estática, com o ponto já no fim. O estado
   parado é escrito com left, e não com transform, porque assim não depende de cqw — é o mesmo
   estado que serve de fallback logo abaixo. */
@media (prefers-reduced-motion: reduce) {
  .trilha__ponto { animation: none; transform: none; left: 87.5%; }
}

/* Navegador sem unidade de container (anterior a 2022–2023) descartaria o translateX do keyframe
   e deixaria o ponto parado no início, o que lê como coisa quebrada. Parado no fim lê como
   desenho. */
@supports not (width: 1cqw) {
  .trilha__ponto { animation: none; transform: none; left: 87.5%; }
}

/* No celular a terceira etapa é a única que não cabe numa linha; a quebra é controlada no HTML
   com um <br> para ela partir onde faz sentido, e não no meio de "escalado". */
@media (max-width: 30rem) {
  .trilha { gap: .25rem; }
  .trilha li { font-size: .75rem; }
}