/* Fontes self-hosted (Google Fonts subset latin+latin-ext) — servidas de /fonts,
   zero dependência externa render-blocking. font-display:swap mantém o texto instantâneo.
   Inter e Inter Tight são variáveis (1 arquivo cobre a faixa de peso). */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibmplexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibmplexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibmplexmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibmplexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/intertight-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/intertight-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===========================================================================
   LAYOUT das páginas SEO/SSR (só estas páginas carregam este arquivo — o chat
   v5, a home e o /admin usam o ds-v5.css puro e NÃO são afetados).

   PADRÃO ÚNICO DE LARGURA (Daniel, 29/07/2026): header, texto e TABELA
   compartilham a MESMA coluna (.pagina, ~980px, centrada) — a mesma de todas as
   páginas públicas do Tomé. Sem breakout: antes a tabela escapava para
   1500–1660px enquanto o header ficava em 980px, e as bordas não batiam (o
   título começava ~260–340px à direita da borda esquerda da tabela). Isso
   quebrava a consistência visual entre as páginas. Agora tudo alinha nas mesmas
   bordas; tabelas largas rolam DENTRO do próprio container (overflow-x:auto),
   nunca sangram para a largura do monitor. Usa só tokens do ds-v5.css.
   =========================================================================== */

/* A tabela ocupa a largura da coluna de leitura e alinha as bordas com o
   header/texto. Se uma tabela densa não couber, rola só ela — a PÁGINA nunca
   ganha scroll horizontal nem full-bleed. */
.pagina .rolagem-x {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pagina .rolagem-x > table {
  width: 100%;
  min-width: 0;
}

/* A TABELA GANHA O MONITOR — a prosa NÃO (05/08/2026)
   -------------------------------------------------------------------------
   Medido em produção: `.pagina` trava tudo em max-width 980px (conteúdo real
   924px) e nada cresce com a tela. Num monitor de 3456px a tabela usa 27% da
   largura e sobram 2.532px vazios, enquanto o nome do fundo quebra em 4-5
   linhas dentro de ~150px de coluna.

     3456px -> tabela 924px (27%)  ·  2560px -> 36%  ·  1920px -> 48%

   Por que só a TABELA e não a página inteira: a régua de legibilidade de texto
   é 60-80 caracteres por linha, e 980px acerta isso. Prosa esticada em 2.500px
   fica ilegível — alargar tudo trocaria um defeito por outro. Quem sofre com o
   teto é a tabela densa, que tem 5-6 colunas e nomes longos.

   Técnica: a caixa da tabela sai da coluna por margem negativa simétrica, então
   continua centrada com o resto e as bordas do texto ficam no lugar. `min()`
   com a viewport garante que nunca encoste na borda da tela. Abaixo de 1200px
   nada muda — lá o teto não é o problema, e a rolagem interna já resolve.
   O `.pagina{max-width:980px}` do ds-v5 fica INTOCADO: é do design system
   inteiro, e mexer nele mudaria telas que não são minhas. */
@media (min-width: 1200px) {
  /* 1) A COLUNA cresce com o monitor. Tudo que está dentro passa a compartilhar
        a MESMA borda esquerda — que é o que faltava na primeira tentativa: eu
        alarguei só a tabela por margem negativa e a página ficou com DOIS
        alinhamentos (título e intro começavam 311px à direita da tabela). Um
        bloco largo e outro estreito não é hierarquia, é desalinho.
        1680px porque a tabela mais larga (o ranking de FII, 6 colunas) pede
        1576px de conteúdo — medido, não estimado. Com 1680 menos o padding de
        28px de cada lado sobram 1624, e ela deixa de ser comprimida. */
  /* 1440 e não 1680. A medição mostrou o que estava errado: com a coluna em 1680 a
     tabela ia a 1624 e o parágrafo de abertura, travado na régua de leitura, parava
     em 719 — sobravam 905px de vão à direita do texto, e a razão texto/dados ficava
     em 0,44. O design system do produto especifica outra coisa: "texto estreito,
     dados largos" com coluna de 760 e tabela escapando para ~1000, ou seja razão
     ~0,76. Eu tinha ficado quase na metade disso, e o efeito na tela é o texto
     quebrando no meio com um deserto do lado — foi o que o Daniel viu.
     Em 1440 a tabela fica em 1384 e o texto em ~940: razão 0,68, dentro da ordem de
     grandeza do padrão, e a tabela ainda ganha 460px sobre os 924 originais, que era
     o problema que iniciou tudo. */
  .pagina {
    max-width: min(1240px, calc(100vw - 80px));
  }

  /* O RODAPÉ mora FORA de `.pagina` (é `<footer class="pub-rodape">` no shell) e
     por isso ficou preso em 980px enquanto o resto crescia — 262px fora do
     alinhamento de todo mundo. Mesma medida, mesma borda. */
  .pub-rodape {
    max-width: min(1240px, calc(100vw - 80px));
  }

  /* 2) A tabela ocupa o que PRECISA, não a coluna inteira à força.
        `width:100%` esticava a tabela de FIAGRO (3 colunas, 667px naturais) e a
        de defasados (4 colunas, 872px) para os 1504px da coluna — daí os vãos
        enormes entre o nome do fundo e o valor. Uma tabela de 3 colunas não fica
        melhor ocupando 1,5 mil pixels; fica oca. `max-content` limitado a 100%
        dá a cada uma a largura do seu próprio conteúdo. */
  .pagina .rolagem-x {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  /* Todas as tabelas da página terminam na MESMA borda direita — esse é o
     padrão. `max-content` dava a cada uma a largura do seu conteúdo e o
     resultado foi um direito esfarrapado: o ranking em 1624px e a tabela de
     FIAGRO logo abaixo em 689px, 2,4x menor. Duas tabelas irmãs com larguras
     tão diferentes não leem como hierarquia, leem como defeito. */
  .pagina .rolagem-x > table {
    width: 100%;
  }

  /* Nenhuma coluna leva a folga inteira — o layout automático reparte.
     Tentei dar `width:100%` à coluna do nome para ela absorver tudo, e o efeito
     colateral foi pior que o problema: a coluna da Administradora foi
     estrangulada até a largura mínima e "XP Investimentos Corretora de Câmbio,
     Títulos e VAL MOB S/A" passou a quebrar em 5 linhas, triplicando a altura de
     cada linha da tabela. Numa tabela de 6 colunas com DOIS campos de nome
     longo, eleger um vencedor sempre custa o outro.
     O que fica travado é só o que não pode quebrar em hipótese alguma: valor,
     data e contagem. "R$ 2,9" numa linha e "bi" na seguinte é ilegível, e é o
     único caso onde a quebra é sempre erro. */
  .pagina .rolagem-x > table th.n,
  .pagina .rolagem-x > table td.n {
    white-space: nowrap;
  }

  /* 3) O TEXTO mantém largura de leitura, ancorado na MESMA borda esquerda.
        A régua é 60-80 caracteres por linha: prosa esticada em 1.500px fica
        ilegível, e essa é a razão de a coluna larga não valer para texto.
        `ch` acompanha a fonte, então a medida continua certa se a tipografia
        mudar. */
  /* O TÍTULO NÃO ENTRA NA RÉGUA DE LEITURA. `.pg-head` estava aqui e travava o h1
     em 754px: "Maiores FIDCs do Brasil por patrimônio líquido" quebrava em duas
     linhas com 900px vazios ao lado. Régua de 60-80 caracteres existe para PARÁGRAFO,
     onde o olho precisa achar o início da linha seguinte — um título de uma linha não
     tem linha seguinte. Título quebrado ao lado de espaço vazio não é composição, é
     defeito.
     96ch e não 76: com a coluna em 1440 isso dá ~940px de texto contra 1384 de
     tabela, razão 0,68. Ainda é largura de leitura confortável e o vão à direita cai
     de 905px para ~440. */
  /* `.pg-head` é flex e seu único filho estava encolhendo para 754px dentro de um
     container de 1384 — item de flex dimensiona por max-content, e o max-content ali
     ficava preso ao teto de leitura dos parágrafos internos. Resultado: o h1
     "Maiores FIDCs do Brasil por patrimônio líquido" quebrava em DUAS linhas com
     630px vazios ao lado, que é o "texto que quebra no meio" que o Daniel apontou.
     Tirar o `.pg-head` da régua de 96ch não bastou: era preciso o filho ocupar a
     coluna para que o título tivesse onde caber. */
  .pagina .pg-head > * {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  /* A CONTA QUE FALTAVA. Eu vinha escolhendo a largura da coluna no chute — 1680,
     depois 1440 — sem nunca medir quanto as tabelas PRECISAM. Medido agora, largura
     natural (max-content) das 16 tabelas das 11 páginas: de 867px (gestoras) a
     1.908px (fundos em silêncio), mediana ~1.290. Não existe largura em que todas
     caibam: a mais estreita fica oca e a mais larga rola de qualquer jeito.
     Então a coluna deixa de ser escolhida pela tabela e passa a ser escolhida pelo
     TEXTO, que é o que o leitor percebe como desalinho. Em 1240 a coluna útil é
     1.184 e a prosa em 104ch dá ~985px: sobram ~200px à direita do texto, contra os
     476px de 1440 e os 905px do 1680. As tabelas largas continuam rolando dentro do
     próprio container, como sempre fizeram, e a mais larga do site ganha 260px sobre
     os 924 originais.
     `.pg-sub` sai do teto: é uma frase curta de ~85 caracteres que cabe numa linha
     em qualquer largura, e prendê-la em ch só criava mais um bloco de largura
     diferente empilhado com os outros. */
  .pagina .texto,
  .pagina .rodape-meta,
  .pagina .rodape p {
    max-width: 104ch;
  }

  /* BLOCO COM FUNDO ACOMPANHA A COLUNA; o TEXTO DENTRO dele é que tem régua.
     Prender a caixa inteira em 76ch fazia o FAQ e o card de CTA pararem em 43%
     da coluna, e uma caixa com fundo cortada no meio não lê como "prosa
     estreita", lê como bloco quebrado — foi exatamente a queixa do "um bloco
     grande e outro pequeno". A régua de leitura continua valendo: ela só se
     aplica ao parágrafo dentro da caixa, não à borda dela. */
  .pagina .aviso-bloco,
  .pagina .cta-fim,
  .pagina .faq,
  .pagina .faq > details {
    max-width: none;
  }
  /* O aviso não entra aqui de propósito: o texto dele é filho direto da caixa
     (não há parágrafo interno para segurar), e uma barra de aviso ocupando a
     coluna inteira é o padrão esperado desse componente. */
  /* MESMA régua do resto da prosa. Estes dois ficaram em 76ch quando o resto subiu
     para 104 e viraram o último bloco de largura destoante da página: o texto do card
     de CTA media 719px dentro de um card de 1.184. Um teto de leitura que só vale
     para dois blocos não é régua, é sobra de refatoração. */
  .pagina .cta-fim p,
  .pagina .faq .resp {
    max-width: 104ch;
  }
}

/* ===========================================================================
   C · Card de descoberta contextual "Onde está o dinheiro deste fundo →"
   (no /f/<cnpj> de FII) + D · lista da página /novidades. Reutiliza os mesmos
   tokens do ds-v5.css → adapta a claro/escuro sozinho. Ver backend/novidades.ts.
   =========================================================================== */
.disc-card{display:flex;gap:14px;align-items:center;text-align:left;
  border:1px solid var(--linha);border-left:3px solid var(--verm);border-radius:14px;background:var(--campo);
  padding:16px 18px;margin:18px 0;box-shadow:0 2px 10px rgba(13,13,13,.04);
  color:var(--tinta);text-decoration:none}
.disc-card:hover{background:var(--hover)}
[data-theme="escuro"] .disc-card:hover{background:var(--hover)}
.disc-card .glyph{width:42px;height:42px;border-radius:11px;background:var(--lateral);border:1px solid var(--linha);
  display:grid;place-items:center;flex-shrink:0}
.disc-card .glyph svg{width:22px;height:22px}
.disc-card .tx{flex:1;min-width:0}
.disc-card .h{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.35}
.disc-card .h .rot{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.05em;font-weight:700;
  color:var(--verm);border:1px solid var(--verm);border-radius:5px;padding:1px 5px;text-transform:uppercase}
.disc-card .d{font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.5}
.disc-card .ir{color:var(--verm);font-weight:700;font-size:13px;white-space:nowrap;flex-shrink:0}
@media(max-width:560px){
  .disc-card{flex-direction:column;align-items:flex-start;gap:10px}
  .disc-card .ir{align-self:flex-start}
}
/* D · página /novidades — lista de cards-arquivo */
.nov-lista{display:flex;flex-direction:column;gap:12px;margin:22px 0}
.nov-lista .disc-card{margin:0}
.disc-card.nov-arq .nov-data{flex-basis:100%;font-size:11px;color:var(--sutil);margin-top:2px}


/* ===========================================================================
   TABELA DENSA NO CELULAR — o nome fica, o número vem até você
   ---------------------------------------------------------------------------
   Medido em produção: em 390px o container tem 334px e a tabela do ranking pede
   574 a 1.045. Ela rola dentro de si mesma, então nada estoura — mas o que cabe
   na primeira tela é "#" e o nome do fundo, e o PL, que é o MOTIVO da página
   existir, fica fora. O leitor precisa rolar às cegas para a direita e, quando
   chega no número, já perdeu de vista de quem ele é. Foi assim desde sempre;
   não é regressão, é um defeito antigo que ninguém tinha medido.

   Duas mudanças, as duas só abaixo de 700px:

   1. A COLUNA DE POSIÇÃO SOME. Numa lista ordenada, a posição já está dita pela
      ordem das linhas — repetir "1, 2, 3" custa ~30px de uma tela de 334 para
      informar o que o olho já sabe. No desktop ela fica, porque lá o espaço
      sobra e o número ajuda a citar uma linha ("o 14º").

   2. O NOME GRUDA NA BORDA ESQUERDA. Rolando para o lado, o nome do fundo
      permanece e os números passam por baixo dele. É o que transforma a rolagem
      de "perdi a referência" em leitura: a pergunta no celular é sempre "quanto
      tem ESTE fundo", e agora as duas metades da resposta ficam na tela juntas.

   O seletor cobre os dois desenhos de tabela que existem no site sem exigir
   classe nova no HTML: quando não há coluna de posição, o nome é a primeira
   célula; quando há, ela vem marcada `.n` e o nome é a seguinte.
   =========================================================================== */
@media (max-width: 700px) {
  /* DOIS BLOQUEADORES DO STICKY, os dois herdados do ds-v5 e nenhum óbvio:
     · `border-collapse: collapse` — o Chrome não posiciona célula de tabela
       colapsada como sticky. Com `separate` + `border-spacing: 0` o desenho fica
       IDÊNTICO aqui, porque o design system só define `border-bottom` nas células
       (não há borda lateral para dobrar).
     · `overflow: hidden` na própria `table` — ela vira o container de rolagem e o
       sticky passa a se referir a ela em vez de à `.rolagem-x`, então nunca gruda.
       Esse `hidden` existe só para recortar os cantos arredondados; abro mão do
       recorte no celular, que é onde a leitura vale mais que o canto.
     Sem esses dois, o `position: sticky` abaixo é computado como sticky e mesmo
     assim não gruda — foi exatamente o que a medição mostrou antes deste ajuste. */
  .pagina .rolagem-x > table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
  }

  .pagina .rolagem-x > table th.n:first-child,
  .pagina .rolagem-x > table td.n:first-child {
    display: none;
  }

  .pagina .rolagem-x > table th:first-child:not(.n),
  .pagina .rolagem-x > table td:first-child:not(.n),
  .pagina .rolagem-x > table th.n:first-child + th,
  .pagina .rolagem-x > table td.n:first-child + td {
    position: sticky;
    left: 0;
    z-index: 1;
    /* Fundo opaco é obrigatório: sem ele os números passam POR BAIXO do texto do
       nome e as duas coisas se sobrepõem, o que é pior que o problema original.
       `--fundo` acompanha o tema claro/escuro sozinho. */
    background: var(--fundo);
    /* A borda marca onde a coluna fixa termina e o conteúdo que rola começa —
       sem ela o leitor não percebe que há mais coisa à direita. */
    box-shadow: 1px 0 0 var(--linha);
    /* A largura é em vw porque as duas metades da resposta têm de caber JUNTAS:
       nome + valor. Medido em 390px, o nome sozinho ficava com 141px e o nome do
       fundo quebrava em 5 ou 6 linhas; em 46vw ele ganha ~180px e a coluna de
       valor (~125px) ainda termina dentro do container. Em 360px a conta refaz
       sozinha (165 + 125 = 290 de 304), que é a razão de ser vw e não pixel fixo.
       O teto existe para o nome não engolir o valor, que é o que se veio ver. */
    /* LARGURA FIXA, não faixa. Com min 46vw / max 56vw eu deixava o layout
       automático escolher, e ele escolhia o TETO quando o nome era longo: em
       360px o ranking de FII levava a coluna a 56vw e empurrava o valor 24px
       para fora da tela — de volta ao defeito que esta regra veio consertar,
       só que agora só nos fundos de nome comprido, que é pior porque não
       aparece em todo teste. 46vw é o maior valor em que nome + valor cabem
       nos dois tamanhos: 390px -> 179 + 125 = 304 de 334; 360px -> 165 + 125 =
       290 de 304. Em vw e não em pixel porque a conta tem de se refazer sozinha
       em qualquer largura de tela. */
    /* 42vw, não 46. Medido na SEGUNDA tabela do /maiores-fidcs a 390px: nome 179px +
       valor 166px = 345 de 334 disponíveis, e o valor saía cortado exibindo "R$ 15,7"
       SEM o "bi" — quinze reais e quinze bilhões viram a mesma coisa. Eu tinha
       calibrado o 46vw só na tabela principal, cuja coluna de valor é mais estreita.
       A tabela mais exigente é que manda: 42vw dá 164px em 390 e 151 em 360, e sobra
       para a coluna de valor mais larga do site. */
    width: 42vw;
    min-width: 42vw;
    max-width: 42vw;
  }

  /* O cabeçalho fixo tem de ficar ACIMA das células, senão a primeira linha
     do corpo passa por cima dele ao rolar. */
  .pagina .rolagem-x > table th:first-child:not(.n),
  .pagina .rolagem-x > table th.n:first-child + th {
    z-index: 2;
  }

  /* NÚMERO CORTADO É NÚMERO ERRADO. Medido a 390px na segunda tabela do
     /maiores-fidcs: a coluna de valor ficava metade dentro e metade fora, e o
     leitor via "R$ 15,7" — sem o "bi". Quinze reais e quinze bilhões viram a mesma
     coisa. Reduzir o passo da coluna numérica é o que faz o valor INTEIRO caber ao
     lado do nome fixo, que é o par que responde a pergunta do celular. */
  .pagina .rolagem-x > table td.n,
  .pagina .rolagem-x > table th.n {
    padding-left: 8px;
    padding-right: 10px;
    font-size: 12px;
  }

  /* ANOTAÇÃO NÃO ATRAVESSA A COLUNA. As observações ("· mudou de regime em
     20/01/2026 — segue ativo em outra classe") são `.mono` com `nowrap`, herdado de
     onde a coluna é larga. A 390px a maior delas transbordava 329px da célula e era
     desenhada POR CIMA da coluna de valor — o texto de uma coluna riscando a outra.
     No estreito ela quebra linha como qualquer texto. */
  .pagina .rolagem-x > table td .mono,
  .pagina .rolagem-x > table td .obs {
    white-space: normal;
  }

  /* Piso de legibilidade: 10px num cabeçalho de dado financeiro é pequeno demais. */
  .pagina .rolagem-x > table th {
    font-size: 11.5px;
  }

  /* O CABEÇALHO QUEBRA; O VALOR NÃO. A coluna numérica era dimensionada pelo RÓTULO,
     não pelo dado: "ÚLTIMO SALDO DECLARADO" reservava 190px para exibir "R$ 1,8 bi",
     e o excedente empurrava o valor para fora da tela em 4 das 11 páginas — sempre na
     tabela cujo cabeçalho é mais longo. Cabeçalho de duas palavras quebrando em duas
     linhas não custa nada; valor cortado ao meio muda o número. */
  .pagina .rolagem-x > table th.n {
    white-space: normal;
  }
}


/* SELO DE SITUAÇÃO ao lado do nome do fundo ("· cancelado 20/10/2025").
   Vinha com `white-space:nowrap` no style INLINE, que vence qualquer folha — e por
   isso a regra de celular que eu havia escrito não tinha efeito algum. Agora o
   comportamento mora aqui: não quebra onde há espaço, quebra onde não há. */
.selo-sit {
  opacity: .7;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .selo-sit {
    white-space: normal;
  }
}


/* ===========================================================================
   UMA BORDA ESQUERDA SÓ — a régua da página
   ---------------------------------------------------------------------------
   Medido em produção: breadcrumb, h1, intro, tabela, títulos de seção, FAQ e o
   texto do rodapé alinhavam todos em x=91. Duas coisas fugiam:

   · o TEXTO dentro do card de CTA, em x=116. O card tem 24px de padding e a
     caixa dele está certa (91) — mas o título dentro dele é um `h2` empilhado
     logo abaixo do `h2` "Veja também", que está em 91. Dois títulos do mesmo
     nível, um 25px à direita do outro, lê como indentação por engano, e foi
     assim que apareceu na revisão visual.
     Solução: a CAIXA sangra 24px para fora e o TEXTO volta para 91. É o padrão
     "container sangra, conteúdo alinha" — o fundo do card fica um pouco mais
     largo que a coluna, o que é intencional e discreto, e todo texto da página
     passa a nascer na mesma vertical.

   · o FILETE do rodapé, em x=63 contra texto em 91. A `border-top` mora no
     `.pub-rodape`, que tem 28px de padding, então a linha sobra 28px de cada
     lado do texto que ela separa. Isso fica evidente no tema escuro, onde a
     linha é clara sobre fundo quase preto. A borda vai para dentro, no primeiro
     filho, e passa a medir exatamente o bloco que separa.
   =========================================================================== */
.pagina .cta-fim {
  /* SÓ NO DESKTOP. A sangria alinha o TEXTO do card com a coluna, e no desktop
     isso é o certo. No celular ela empurrava o card para x=3 contra x=28 de todo o
     resto — 3px da borda da tela, lido como estouro de layout. Foi um defeito que
     EU criei ao consertar o alinhamento, e que só apareceu quando alguém olhou o
     celular. Abaixo de 700px o card volta a alinhar a CAIXA, que é o padrão de
     cartão em tela estreita. */
  margin-inline: -25px;
}

.pub-rodape {
  border-top: none;
  padding-top: 0;
}
.pub-rodape > *:first-child {
  border-top: 1px solid var(--linha);
  padding-top: 24px;
}

/* ===========================================================================
   TEMA ESCURO: a tabela precisa continuar sendo um OBJETO
   ---------------------------------------------------------------------------
   No claro a tabela tem borda externa arredondada e divisórias nítidas. No
   escuro `--linha` (#26272c) fica quase igual ao fundo (#121316): a moldura some
   e as 150 linhas do /reapresentacoes-do-mes viram um bloco contínuo de texto,
   sem onde o olho se apoiar. A faixa de cabeçalho também deixa de se distinguir.
   A correção não inventa cor nova: usa `--campo`/`--hover`, que já existem no
   design system para superfície elevada, e uma divisória um passo mais clara.
   =========================================================================== */
[data-theme="escuro"] .pagina .rolagem-x > table {
  border-color: #34363d;
}
[data-theme="escuro"] .pagina .rolagem-x > table thead th {
  background: #1e2026;
  border-bottom-color: #3a3d45;
}
[data-theme="escuro"] .pagina .rolagem-x > table td {
  border-bottom-color: #2c2e35;
}

@media (max-width: 700px) {
  .pagina .cta-fim {
    margin-inline: 0;
  }
}

/* ===========================================================================
   AFORDÂNCIA DE ROLAGEM — a tabela avisa que continua
   ---------------------------------------------------------------------------
   O defeito, medido no celular nas 11 páginas: o conteúdo é cortado em x=361, a
   borda do container, e o corte cai NO MEIO DO GLIFO. "jun/2026" vira `jun/202`;
   em /maiores-crs vira `jun/20`. Não é só feio: são strings que o leitor lê como
   datas VÁLIDAS e erradas, e ele sai da página achando que a competência é 2020.
   Não havia reticência, sombra nem gradiente — os pixels na borda eram fundo
   chapado, então nada dizia que faltava conteúdo.

   A técnica é o "scroll shadow" clássico: dois gradientes presos ao CONTAINER
   (background-attachment: local) e duas sombras presas ao CONTEÚDO. Quando não há
   o que rolar, a sombra fica escondida atrás do gradiente; quando há, ela aparece
   exatamente do lado em que existe conteúdo fora da tela. É puro CSS, sem
   JavaScript, e se corrige sozinho quando a largura muda.

   Corrige também o inverso, que a revisão visual pegou: havia um degradê que
   aparecia SÓ no tema escuro e SÓ em 1366, onde a tabela nem rola — a afordância
   estava desenhada onde não era necessária e ausente onde era.
   =========================================================================== */
/* ⚠️ CORREÇÃO: os gradientes abaixo são `background`, e background fica ATRÁS do
   conteúdo — a sombra de rolagem existia no CSS e era invisível na tela. Medido no
   celular: a tabela de documentos tem 470px dentro de um container de 334px (136px
   fora, 29% invisível) e o corte era seco, sem nenhum sinal. Datas renderizavam
   "03/08/2" com o ano truncado no meio.
   A sombra passa a ser desenhada por um pseudo-elemento POSICIONADO ACIMA, preso à
   direita do container, que só aparece quando há o que rolar (o `background-attachment:
   local` do gradiente branco continua cobrindo a sombra quando a rolagem está no fim). */
.pagina .rolagem-x {
  position: relative;
  background:
    linear-gradient(to right, var(--fundo) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,  var(--fundo) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(13, 13, 13, .16), rgba(13, 13, 13, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(13, 13, 13, .16), rgba(13, 13, 13, 0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}
[data-theme="escuro"] .pagina .rolagem-x {
  background:
    linear-gradient(to right, var(--fundo) 30%, rgba(18, 19, 22, 0)) left center,
    linear-gradient(to left,  var(--fundo) 30%, rgba(18, 19, 22, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ===========================================================================
   O LINK PRECISA PARECER LINK
   ---------------------------------------------------------------------------
   A página escreve "Clique em qualquer fundo para o dossiê completo" — e medido:
   a cor do link é IDÊNTICA à do texto comum, não há sublinhado, e o fundo da
   linha não muda no hover. O único sinal era `cursor: pointer`. Numa tabela onde
   três células por linha são links e duas não são, todas com a mesma cor e peso,
   não há como saber onde clicar: é o caminho de conversão inteiro apagado.
   Sublinhado discreto em repouso (a cor da marca só no hover, para não pintar a
   tabela de vermelho) + realce da linha inteira, que também ajuda a não perder a
   linha em tabela larga.
   =========================================================================== */
.pagina .rolagem-x > table tbody a {
  text-decoration: underline;
  text-decoration-color: var(--linha);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pagina .rolagem-x > table tbody a:hover {
  color: var(--verm);
  text-decoration-color: var(--verm);
}
.pagina .rolagem-x > table tbody tr:hover td {
  background: var(--hover);
}
/* A coluna fixa do celular tem fundo próprio — sem isto o realce da linha passa
   por baixo dela e a linha fica com duas cores. */
@media (max-width: 700px) {
  .pagina .rolagem-x > table tbody tr:hover td:first-child:not(.n),
  .pagina .rolagem-x > table tbody tr:hover td.n:first-child + td {
    background: var(--hover);
  }
}


/* ===========================================================================
   CABEÇALHO DE TABELA QUE ACOMPANHA A ROLAGEM
   ---------------------------------------------------------------------------
   O problema: `/fundos-em-silencio` tem 13.222px de página e 407 linhas na
   segunda tabela; `/reapresentacoes-do-mes` tinha 10.458px. Os rótulos somem em
   y≈460 e daí para baixo o leitor navega dezenas de telas sem saber qual coluna
   é qual — agravado por páginas onde DUAS colunas trazem o mesmo texto (em
   /maiores-fidcs, "BB Gestao de Recursos DTVM S.A" aparece em Administradora E
   em Gestora na mesma linha). Sem cabeçalho na tela, são indistinguíveis.

   Por que só a partir de 1240px, e não em toda largura: `position: sticky` no
   `thead` se ancora no ancestral que ROLA, e `.rolagem-x` tem `overflow-x: auto`
   — o que faz o navegador computar `overflow-y: auto` também. Com isso o
   cabeçalho gruda no topo do próprio container, que é tão alto quanto a tabela,
   e nunca aparece. Só funciona se o container deixar de ser scrollport.
   Medido nas 11 páginas: em 1366 e 1240 NENHUMA tabela precisa rolar na
   horizontal (a largura de 100% já as acomoda); em 1024 e 768, três precisam.
   Então acima de 1240 o `overflow` sai com segurança e o sticky passa a valer;
   abaixo, a rolagem horizontal é mais importante que o cabeçalho fixo.

   `top` acompanha a barra superior fixa do site (56px) para o cabeçalho não
   grudar por baixo dela.
   =========================================================================== */
@media (min-width: 1240px) {
  .pagina .rolagem-x {
    overflow: visible;
  }
  .pagina .rolagem-x > table thead th {
    position: sticky;
    top: 56px;
    z-index: 3;
  }
  /* O `overflow:hidden` da tabela (que recorta os cantos arredondados) volta a
     ser scrollport e mataria o sticky do mesmo jeito. Nesta faixa o recorte do
     canto cede lugar ao cabeçalho — a moldura continua desenhada pela borda. */
  .pagina .rolagem-x > table {
    overflow: visible;
  }
}


/* ===========================================================================
   O OLHO NÃO PODE PERDER A LINHA
   ---------------------------------------------------------------------------
   Medido em /maiores-gestoras a 1366: "BB Gestao de Recursos DTVM S.A" termina em
   x=385 e "R$ 61,3 bi" começa em x=847 — 462px de nada entre o nome e o número,
   em todas as 50 linhas. Em /maiores-fiis o vão chega a 542px ("XP Malls FII").
   Sem zebra e sem guia, ler a linha inteira exige régua.

   Por que NÃO estreitei a coluna: a alternativa é `width: max-content`, que já foi
   tentada e produziu o direito esfarrapado — ranking em 1624px e a tabela seguinte
   em 689 —, exatamente o "um bloco grande e outro pequeno" que o dono reprovou.
   Largura uniforme é a decisão; o custo dela é o vão, e o vão se resolve com
   listra, não com largura.

   A listra é de 2% de tinta: separa a linha sem virar padrão de tabela contábil.
   =========================================================================== */
.pagina .rolagem-x > table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--tinta) 2.5%, transparent);
}
[data-theme="escuro"] .pagina .rolagem-x > table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
}
/* O realce do hover tem de vencer a listra, senão a linha par não reage. */
.pagina .rolagem-x > table tbody tr:hover td {
  background: var(--hover);
}
/* No celular a coluna fixa é opaca por necessidade — a listra dela acompanha,
   senão a linha par fica com duas cores. */
@media (max-width: 700px) {
  .pagina .rolagem-x > table tbody tr:nth-child(even) td:first-child:not(.n),
  .pagina .rolagem-x > table tbody tr:nth-child(even) td.n:first-child + td {
    background: color-mix(in srgb, var(--fundo) 97.5%, var(--tinta));
  }
  [data-theme="escuro"] .pagina .rolagem-x > table tbody tr:nth-child(even) td:first-child:not(.n),
  [data-theme="escuro"] .pagina .rolagem-x > table tbody tr:nth-child(even) td.n:first-child + td {
    background: color-mix(in srgb, var(--fundo) 96%, var(--tinta));
  }
}

/* ===========================================================================
   UMA TIPOGRAFIA SÓ NO CABEÇALHO
   ---------------------------------------------------------------------------
   O `thead` misturava duas famílias na MESMA linha: "FUNDO" e "ADMINISTRADORA" em
   Inter, "COMPETÊNCIA CORRIGIDA" e "LAG (DIAS)" em IBM Plex Mono — letras
   visivelmente mais largas e espaçadas, na mesma faixa cinza. A regra `.n` existe
   para alinhar NÚMERO à direita com dígito de largura fixa, e cabeçalho não é
   número: é rótulo. A monoespaçada fica onde serve (as células de valor, onde a
   tabulação alinha as casas); o cabeçalho inteiro passa a falar uma língua só.
   O alinhamento à direita continua, porque ele acompanha o dado que rotula.
   =========================================================================== */
.pagina .rolagem-x > table thead th.n {
  font-family: inherit;
  letter-spacing: .05em;
}


/* ===========================================================================
   O CTA FLUTUANTE NÃO PODE COMER DADO
   ---------------------------------------------------------------------------
   O botão "Tomé no WhatsApp" é `position: fixed` no canto inferior direito, com
   175×37px. Sendo fixo, ele SEMPRE cobre o que estiver naquele canto — medido em
   1366: sobrepõe ~98px da última coluna da linha visível mais baixa, e a cada
   rolagem é uma célula diferente que fica mutilada. O pior caso é o celular: a
   390px ele cobre a PRIMEIRA linha de dados da tabela já na abertura da página, e
   em /fundos-em-silencio cai em cima do texto do aviso "Importante" — uma
   ressalva de leitura tapada por um botão.

   NÃO removo o botão: é decisão de produto, e um CTA flutuante cobrir algo é o
   preço conhecido do padrão. O que dá para fazer sem tirá-lo:

   · no CELULAR ele vira compacto (só o ícone), caindo de 175px para ~44px de
     largura — deixa de cobrir uma linha inteira e passa a cobrir um canto;
   · a PÁGINA ganha espaço no fim, para que ao chegar embaixo o que está sob o
     botão seja margem, e não a última linha da tabela ou o rodapé.

   O estilo do botão é inline (definido em JS), e inline vence folha — por isso
   `!important` aqui. Não é preguiça: é a única forma de ajustar sem editar o
   arquivo de outra frente de trabalho.
   =========================================================================== */
.pagina,
.pub-rodape {
  scroll-margin-bottom: 80px;
}
body:has(.pagina) {
  padding-bottom: 72px;
}
@media (max-width: 700px) {
  #waCtaLink {
    font-size: 0 !important;
    gap: 0 !important;
    padding: 12px !important;
    line-height: 1 !important;
  }
  #waCtaLink span[aria-hidden] {
    font-size: 20px !important;
  }
  /* O X encosta demais no botão quando ele vira círculo — a folga volta. */
  #waCtaFechar {
    margin-left: -6px !important;
  }
}


/* ===========================================================================
   DUAS TABELAS IRMÃS, UMA GEOMETRIA
   ---------------------------------------------------------------------------
   /fundos-em-silencio empilha duas tabelas com as MESMAS cinco colunas e os
   mesmos rótulos — mas o layout automático dimensiona cada uma pelo próprio
   conteúdo, e a segunda tem o selo de situação colado ao nome do fundo. Medido:
   as divisórias caíam 26px deslocadas entre uma e outra, e antes de unificar
   estrutura e rótulos a diferença chegava a 135px na coluna do nome.
   Duas tabelas empilhadas na mesma coluna, com todas as divisórias em lugares
   diferentes, leem como duas coisas sem relação — e elas são a mesma leitura
   partida em dois recortes.

   `table-layout: fixed` só é seguro porque as colunas AGORA são idênticas nas
   duas: mesmo número, mesma ordem, mesmo rótulo. As larguras saem do papel de
   cada coluna — o nome leva a maior parte, os três números o que precisam, a
   administradora o resto.
   =========================================================================== */
.pagina .rolagem-x.tab-silencio > table {
  table-layout: fixed;
}
.pagina .rolagem-x.tab-silencio > table th:nth-child(1) { width: 38%; }
.pagina .rolagem-x.tab-silencio > table th:nth-child(2) { width: 16%; }
.pagina .rolagem-x.tab-silencio > table th:nth-child(3) { width: 14%; }
.pagina .rolagem-x.tab-silencio > table th:nth-child(4) { width: 12%; }
.pagina .rolagem-x.tab-silencio > table th:nth-child(5) { width: 20%; }
@media (max-width: 700px) {
  /* No estreito a tabela rola e a coluna fixa manda na largura — porcentagem
     sobre um container de 334px espremeria tudo. */
  .pagina .rolagem-x.tab-silencio > table {
    table-layout: auto;
  }
}


/* Coluna que só existe onde há largura para ela. Usada na tabela de documentos da
   companhia, cujo campo "Assunto" é texto livre de tamanho ilimitado — medido, 67%
   preenchido e o maior causador de estouro no celular. Some abaixo de 700px em vez
   de espremer as colunas que identificam a linha. */
@media (max-width: 700px) {
  .pagina .rolagem-x > table th.so-largo,
  .pagina .rolagem-x > table td.so-largo {
    display: none;
  }
}


/* A sombra que se VÊ. O gradiente de `background` fica atrás do conteúdo; este
   pseudo-elemento fica na frente, colado na borda direita do container de rolagem, e
   sinaliza que a tabela continua. `pointer-events:none` para não roubar o clique dos
   links da última coluna. Só abaixo de 1240px, que é onde alguma tabela realmente rola
   — acima disso a tabela cabe e a sombra seria enfeite mentiroso. */
@media (max-width: 1239px) {
  .pagina .rolagem-x::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to left, var(--fundo), rgba(255, 255, 255, 0));
    z-index: 2;
  }
  [data-theme="escuro"] .pagina .rolagem-x::after {
    background: linear-gradient(to left, var(--fundo), rgba(18, 19, 22, 0));
  }
}

/* CABEÇALHO FIXO 5px ATRÁS DA BARRA DO SITE. `th { top: 56px }` mas o header sticky
   termina em bottom:61px, e com z-index 20 contra 3 do th o topo do cabeçalho da
   tabela sumia sob a barra ao rolar. */
@media (min-width: 1240px) {
  .pagina .rolagem-x > table thead th {
    top: 61px;
  }
}

/* TÍTULO DE SEÇÃO PRECISA SER LEGÍVEL COMO TÍTULO. Medido: h1 26px, h2 17px, corpo
   16px — a diferença entre "título de seção" e "texto corrido" era de UM pixel mais o
   peso. Numa página de 5.357px com 8 seções, não dava para achar "Quem controla"
   rolando rápido: era preciso ler. Sobe para 21px, ganha respiro antes e uma régua
   fina que marca onde cada seção começa. Foi apontado como a mudança de maior retorno
   por menor esforço da revisão inteira. */
.pagina h2.sec {
  font-size: 21px;
  margin-top: 52px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  letter-spacing: -.015em;
}
/* O primeiro h2 da página não leva régua: não há o que separar acima dele. */
.pagina h2.sec:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 34px;
}

/* ── MERCADO (topo da página de companhia aberta) ─────────────────────────────
   Hierarquia em três degraus: dois números-herói, quatro apoios, o gráfico.

   UMA GRADE SÓ, de quatro colunas. Eram duas grades independentes — heróis em 1fr 1fr
   e KPIs em repeat(4,1fr) — e as bordas direitas erravam por 5px (1297 contra 1292 no
   2560). Cinco pixels é o pior valor possível: pequeno demais para parecer intenção,
   grande demais para não ser visto. Lê como tremida.

   TIPOGRAFIA DO RESTO DO DOSSIÊ. Todo número factual da página é IBM Plex Mono 600 —
   "6.527 documentos", "fev/2003", "03/08/2026". O bloco usava Inter 700 e por isso
   parecia de outro sistema, fazendo o restante da página parecer rascunho. Não é o topo
   que era premium demais: era ele que falava outra língua. */
.mk {
  margin: 24px 0 8px;
  padding: 24px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--campo);
  box-shadow: 0 2px 10px rgb(13 13 13 / 4%);
}
.mk-grade-topo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.mk-hero { grid-column: span 2 }
.mk-hero .r,
.mk-kpi .r {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 8px;
}
.mk-hero .n,
.mk-kpi .n {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  display: block;
}
.mk-hero .n {
  font-size: 32px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.mk-hero .n .v { font-size: 16px; margin-left: 8px; letter-spacing: 0; white-space: nowrap }
.mk-hero .d {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sutil);
}
.mk-kpi .n { font-size: 18px; font-weight: 600; white-space: nowrap }
/* Sublinha de referência do KPI (ex.: o que o BOVA11 fez na mesma janela). Fonte de
   texto, não mono: ela não é um dado da companhia, é a régua contra a qual o dado é
   lido — e vestir as duas coisas igual faria parecer que são a mesma. */
.mk-kpi .ref {
  display: block;
  margin-top: 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--sutil);
  white-space: normal;
}
/* A cor da variação vinha de `.sobe`/`.desce`, que perdiam a especificidade para
   `.mk-kpi .n { color: var(--tinta) }`: os KPIs carregavam a classe certa e renderizavam
   PRETO. Três tratamentos para a mesma grandeza no mesmo cartão. Aninhar resolve. */
.mk .sobe, .lista-viz .sobe { color: var(--ok) }
.mk .desce, .lista-viz .desce { color: var(--verm-texto) }

.mk-graf { margin-top: 32px }
.g-preco { display: block; width: 100%; overflow: visible }
.g-preco .gx {
  font-size: 12px;
  fill: var(--mut);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
/* Halo da cor do cartão: o rótulo fica DENTRO do desenho e pode cair sobre a série.
   `paint-order` desenha o contorno antes do preenchimento — sem isso o contorno come o
   miolo da letra. */
.g-preco .halo {
  stroke: var(--campo);
  stroke-width: 3.5;
  paint-order: stroke fill;
  stroke-linejoin: round;
}
.g-preco .forte { fill: var(--tinta); font-weight: 600 }
.mk-nota,
.mk-selo {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sutil);
}
.mk-selo { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linha) }
/* O SVG do telefone tem viewBox de 308 e desenha em ~308px, então a fonte sai no
   tamanho declarado. Sem essa regra o rótulo do telefone era o menor texto do site. */
.g-mob .gx { font-size: 13px }
.g-mob { display: none }

@media (max-width: 700px) {
  .mk { padding: 16px; margin-inline: -4px; border-radius: 12px }
  /* Dois heróis lado a lado no telefone dariam 24px de número — tamanho de corpo de
     texto, deixa de ser herói. Herói ocupa a linha; KPI vai a dois por linha. */
  .mk-grade-topo { grid-template-columns: 1fr 1fr; gap: 16px }
  .mk-hero { grid-column: 1 / -1 }
  .mk-hero .n { font-size: 27px }
  .mk-kpi .n { font-size: 16px; white-space: normal }
  /* Rótulo de KPI ocupa duas linhas SEMPRE no telefone. "Giro médio diário (30 pregões)"
     quebra e "faixa de 12 meses" não — sem altura fixa os dois valores ao lado ficam em
     linhas de base diferentes, e a fileira parece desmontada. */
  .mk-kpi .r { min-height: 2.6em }
  /* O KPI de provento ocupa a linha inteira no telefone: a composição (dividendo + JCP +
     o que não tem natureza) é o texto mais longo do cartão e em meia largura quebrava em
     oito linhas, deixando a célula vizinha vazia. */
  .mk-kpi.larga { grid-column: 1 / -1 }
  .mk-kpi.larga .r { min-height: 0 }
  .mk-graf { margin-top: 24px }
  .g-desk { display: none }
  .g-mob { display: block }
}

/* Vizinhança de setor — o caminho da página de companhia para OUTRA companhia.
   Grade, não lista corrida: seis nomes empilhados num texto de 104ch deixariam
   1.000px de branco à direita de cada linha. */
.lista-viz {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px 26px;
}
.lista-viz li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}
.lista-viz .pp {
  font-size: 12.5px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.lista-viz .pp.sem { font-style: italic }
@media (max-width: 700px) { .lista-viz { grid-template-columns: 1fr } }

/* Tabela de poucas colunas curtas NÃO se estica.
   Medido em /f/<companhia>: "Assembleia" na coluna 1 e o "13" a 600px de distância,
   com nada entre os dois. Esticar três colunas curtas para 1.184px obriga o olho a
   atravessar o vão para ligar o rótulo ao número — a distância vira trabalho, e a
   leitura erra de linha. A tabela de documentos continua larga porque a coluna
   ASSUNTO tem texto de verdade; largura é do conteúdo, não do continente. */
.pagina .rolagem-x > table.tab-curta {
  width: auto;
  max-width: min(100%, 700px);
}
@media (max-width: 700px) {
  .pagina .rolagem-x > table.tab-curta { width: 100%; max-width: none }
}

/* Resultado declarado — quatro números numa faixa, não uma tabela.
   Tabela pediria cabeçalho, borda e uma coluna de rótulo que repetiria o que já está
   escrito em cada item. Quatro blocos numa grade dizem a mesma coisa em metade da
   altura, e a página de companhia já é longa. */
.res-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 24px;
  margin: 16px 0 4px;
  padding: 18px 20px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--campo);
}
.res-item .r {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 7px;
}
.res-item .n {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}
.res-item .yoy {
  display: inline-block;
  margin-top: 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 600;
}
.res-item .ref {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--sutil);
}
.res-grade .sobe { color: var(--ok) }
.res-grade .desce { color: var(--verm-texto) }
@media (max-width: 700px) {
  .res-grade { grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: 14px 14px }
  .res-item .n { font-size: 17px }
  .res-item .r { min-height: 2.6em }
}


/* ===========================================================================
   SELO DE FRESCOR — "dados da competência jun/2026 · atualizado em 06/08/2026"
   ---------------------------------------------------------------------------
   Uma linha sob o subtítulo, em toda página pública que publica número
   agregado. Procedência, não aviso: se gritasse, competiria com o h1 e com o
   número, que são o conteúdo. Por isso 12px, mono (é data, e mono é a família
   que o site já usa para dado) e na cor do texto sutil.

   Só tokens do ds-v5 (--sutil), que já invertem em [data-theme="escuro"] — o
   selo herda os dois temas sem uma regra própria por tema, que é o jeito de
   não haver um tema esquecido na próxima mudança de paleta.

   FORA da régua de 104ch de propósito: é uma linha curta que cabe em qualquer
   largura, e prendê-la ao teto de leitura só criaria mais um bloco de largura
   diferente empilhado com os outros (mesmo motivo já registrado para .pg-sub).
   =========================================================================== */
.pagina .frescor {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  line-height: 1.6;
  color: var(--sutil);
}

/* O separador é decoração: `aria-hidden` no HTML tira do leitor de tela, e a
   opacidade tira do primeiro plano visual sem sumir com a estrutura. */
.pagina .frescor i {
  font-style: normal;
  opacity: .45;
}

/* CELULAR: as duas informações EMPILHAM em vez de quebrarem no meio da frase.
   Medido a 390px, em linha única "dados da competência jun/2026 · atualizado
   em 06/08/2026" tem 55 caracteres e quebra ANTES do "·", deixando o ponto
   órfão no começo da segunda linha — que lê como bullet de lista, não como
   separador. Empilhado, cada fato ocupa a sua linha e o separador some. */
@media (max-width: 560px) {
  .pagina .frescor {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px 0;
  }
  .pagina .frescor i {
    display: none;
  }
}


/* O bloco .rd-* do /radar SAIU daqui em 09/09/2026: o radar virou MÓDULO
   (frontend/radar.html) e carrega os estilos rd-* inline, com tokens do
   ds-v5 — manter a cópia aqui seria duas verdades divergentes (§🧬). */