/* ==========================================================================
   W Fintechs — secao Research
   --------------------------------------------------------------------------
   SO o que nao existe. A pagina reaproveita `relatorio.css` inteiro:
   `rp-capa` (a capa e as bandeiras), `rp-fig` (a moldura de grafico com
   titulo, fonte e nota), `rp-metodo` e as doze classes `g-*` da tipografia
   dos graficos.

   🔴 A PRIMEIRA VERSAO DESTA FOLHA ESTAVA ERRADA, e vale registrar por que.

   Ela desenhava os seis indicadores como CARTOES: fundo branco, borda,
   canto arredondado, sombra implicita, e a variacao numa pilula verde. Fica
   parecido com qualquer painel de qualquer produto, e nao se parece com
   ESTE site.

   O site ja tinha a resposta escrita, em dois lugares: `.rp-chamada`
   (relatorio.css) e `.wf-num` (site.css). Os dois fazem a MESMA coisa e
   nenhum deles usa cartao:

     · faixa continua, sem caixa e sem raio;
     · celulas separadas por um fio de 1px, nada mais;
     · o NUMERO primeiro e grande, o rotulo embaixo, a fonte embaixo do
       rotulo. Nao rotulo-em-cima-numero-embaixo, que e a ordem de um
       formulario e nao a de um placar;
     · mono com `letter-spacing:-.055em` e `tabular-nums`. Sem isso o IBM
       Plex Mono a 28px abre "5 , 65" com a virgula numa celula inteira, que
       foi exatamente como saiu.

   Entao `.rs-num` abaixo e `.rp-chamada` com seis colunas em vez de quatro.
   Nao foi reusada direto porque ela e `repeat(4,...)` cravado, e um
   `:nth-child` diferente para seis colunas mudaria o comportamento dela nas
   paginas de report.
   ========================================================================== */

/* ------------------------------------------- a faixa dos seis indicadores */
/* Escura e colada na capa, como a `rp-chamada` faz no report.

   🔴 SEGUNDA REVISÃO, e o que ela corrigiu (12/09/2026):

     1. LINHAS DESALINHADAS. Cada célula tinha número, rótulo, base, variação
        e nota empilhados. Quando um rótulo quebrava em duas linhas, tudo
        abaixo dele descia só naquela célula, e as variações ficavam em
        alturas diferentes na mesma fileira.
     2. REPETIÇÃO. "base: 08/2026" aparecia cinco vezes e "em 12 meses" seis.
        Agora o período é dito UMA vez, na legenda acima da fileira.
     3. CINCO CAMADAS TIPOGRÁFICAS numa célula de 180px. Agora são duas: a
        linha do número (com a variação ao lado) e o rótulo.
     4. 🔴 A COR MENTIA. A variação era verde quando subia e terracota quando
        descia. Fraude por 10 mil chaves CAIU 24,6% e saía em terracota, a
        cor de "ruim", sendo a melhor notícia da fileira. Agora a SETA diz a
        direção e a COR diz se é bom: verde e terracota só onde "melhor" está
        definido; nas outras a variação sai neutra, porque mais chaves por
        usuário não é bom nem ruim por si.

   O que continua da casa: faixa sem caixa, fio de 1px entre células, o
   número primeiro, mono com `-.055em` e `tabular-nums`. */
.rs-faixa{background:var(--ink);color:var(--on-dark);padding-bottom:clamp(8px,2vw,20px)}

.rs-num__legenda{font-size:.8125rem;color:var(--on-dark-3);margin:0;
  padding:var(--s5) 0 var(--s4);border-top:1px solid var(--line-dark)}

/* 🔴 COLUNAS CRAVADAS, e não `auto-fit`: com seis células só divisor de seis
   serve. `auto-fit` numa janela de ~800px dava 5 + 1. */
.rs-num{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.rs-num__c{padding:var(--s2) var(--s4) var(--s5) 0;border-right:1px solid var(--line-dark)}
.rs-num__c:last-child{border-right:0;padding-right:0}
.rs-num__c + .rs-num__c{padding-left:var(--s4)}

/* número e variação na MESMA linha de base: é o que alinha a fileira inteira,
   seja qual for o tamanho do rótulo embaixo */
.rs-num__linha{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px}
.rs-num .v{font-family:var(--mono);font-size:clamp(1.375rem,2.4vw,2rem);font-weight:500;
  letter-spacing:-.055em;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.rs-num .var{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--on-dark-2);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-num .var--bom{color:var(--green)}
.rs-num .var--ruim{color:#F0A18C}

/* `min-height` de duas linhas: um rótulo curto e um longo ocupam a mesma
   altura, e a fileira não fica em escada */
.rs-num .k{font-size:.8125rem;line-height:1.35;color:var(--on-dark-2);
  margin-top:var(--s3);min-height:2.7em}
.rs-num .k sup{font-size:.7em;color:var(--on-dark-3);margin-left:2px;vertical-align:super;line-height:0}

/* as definições saem das células e viram nota, uma vez, embaixo da fileira */
.rs-num__notas{list-style:none;margin:0;padding:var(--s3) 0 var(--s4);
  border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:4px 28px;
  font-size:.75rem;line-height:1.5;color:var(--on-dark-3)}
.rs-num__notas sup{margin-right:4px}

/* ------------------------------------------------------ o corpo da pagina */
/* Teto de leitura. Sem ele o h2 e a lista rotulo/valor esticavam ate os
   1320px do `wf-wrap`, e o valor de "Participantes com chaves" ficava a meia
   tela de distancia do rotulo. Mesmo teto que `.rp-fig` ja usa. */
.rs-corpo{width:min(100%,820px);min-width:0}

/* ------------------------------------------------ lista rotulo / valor */
/* Fio entre linhas, como `.rp-metodo li`. Sem caixa: a secao ja e o
   agrupamento, e uma borda em volta de tres linhas e moldura sobre moldura. */
.rs-kv{margin:0 0 var(--s5)}
.rs-kv > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);
  align-items:baseline;padding:11px 0;border-top:1px solid var(--line-2)}
.rs-kv > div:first-child{border-top:0;padding-top:0}
.rs-kv dt{font-size:.9375rem;color:var(--txt-2);margin:0}
.rs-kv dd{font-family:var(--mono);font-size:1rem;font-weight:500;color:var(--txt);
  margin:0;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}

/* -------------------------------------------------- numero de destaque */
.rs-metrica{font-family:var(--mono);font-size:clamp(2rem,4.5vw,3rem);font-weight:500;
  letter-spacing:-.055em;color:var(--txt);line-height:1;font-variant-numeric:tabular-nums}
.rs-sub{font-size:.9375rem;color:var(--txt-2);margin-top:var(--s3)}
.rs-var{font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;
  margin-top:var(--s3);color:#1F7A4C}
.rs-var--desce{color:var(--tarde)}

/* ------------------------------------------- dois graficos lado a lado */
.rs-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5)}
.rs-duo__t{font-size:.8125rem;font-weight:600;color:var(--txt);margin-bottom:var(--s2)}

/* ----------------------------------------------------------------- CTA */
/* `wf-cta` ja desenha a faixa escura, a malha, o h2 e a fileira de botoes
   (`wf-cta__acoes`). A UNICA coisa que falta e o olho verde que abre o
   bloco — o resto seria reescrever o que o site.css ja tem. */
.rs-cta__k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin-bottom:var(--s3);position:relative}

@media (max-width:1180px){
  .rs-num{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rs-num__c:nth-child(3n){border-right:0;padding-right:0}
  .rs-num__c:nth-child(3n+1){padding-left:0}
  .rs-num__c:nth-child(-n+3){border-bottom:1px solid var(--line-dark);margin-bottom:var(--s3)}
}
@media (max-width:640px){
  .rs-num{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-num__c{padding-right:var(--s3)}
  .rs-num__c:nth-child(3n){border-right:1px solid var(--line-dark);padding-right:var(--s3)}
  .rs-num__c:nth-child(3n+1){padding-left:var(--s4)}
  .rs-num__c:nth-child(2n){border-right:0;padding-right:0}
  .rs-num__c:nth-child(2n+1){padding-left:0}
  .rs-num__c:nth-child(-n+3){margin-bottom:0}
  .rs-num__c:nth-child(-n+4){border-bottom:1px solid var(--line-dark);margin-bottom:var(--s3)}
}

/* ══════════════════════════════════════════════ as leituras (Fases 3 e 4) */

/* O papel do corpo. `.rp-corpo` (relatorio.css) traz a grade de 216px com o
   índice fixo e o respiro de cima e de baixo, e vira coluna única abaixo de
   1024px. Por isso a seção não usa mais `wf-sec`: seriam dois paddings. */
.rs-papel{background:var(--paper)}

/* ── o que mudou na rodada ─────────────────────────────────────────────
   O fio à esquerda é o destaque editorial que a casa já tem
   (`.rp-texto p.destaque`), e não um cartão. Azul, e não verde, porque o
   verde fica reservado para a opinião marcada logo abaixo. */
#rs-rodada:empty{display:none}
.rs-rodada{margin-top:clamp(32px,4vw,56px);border-left:2px solid var(--blue);
  padding:2px 0 2px var(--s5);max-width:74ch}
.rs-rodada__k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin:0 0 var(--s2)}
.rs-rodada__t{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--txt);margin:0 0 var(--s2)}
.rs-rodada p{font-size:1.0625rem;line-height:1.6;color:var(--txt-2);margin:0}

/* ── a leitura da seção ───────────────────────────────────────────────
   Vem ANTES do gráfico: o leitor recebe o argumento e então confere. */
.rs-lead{font-size:1.0625rem;line-height:1.68;color:var(--txt-2);margin:0 0 var(--s4);max-width:70ch}

/* ── a opinião, marcada como opinião ──────────────────────────────────
   Mesmo fio da casa, verde, com o rótulo em cima. Fica num `aside` para o
   leitor de tela saber que é comentário e não o dado. */
.rs-nossa{margin:var(--s5) 0;border-left:2px solid var(--green);padding:2px 0 2px var(--s5);max-width:70ch}
.rs-nossa__k{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);margin:0 0 6px}
.rs-nossa p:last-child{font-size:1.125rem;line-height:1.55;color:var(--txt);margin:0}

/* ── o que derrubaria a leitura ──────────────────────────────────────── */
.rs-virada{font-size:.8125rem;line-height:1.5;color:var(--txt-3);margin:0 0 var(--s4);max-width:70ch}
.rs-virada::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--line-3);margin:0 8px 1px 0;vertical-align:middle}

/* ══════════════════════════════════════ uma fonte só, sem caixa alta (12/09/2026)

   Pedido do dono do site: nas páginas de research tudo sai na fonte do site
   (Outfit), e rótulo nunca em caixa alta, só com a primeira letra maiúscula.
   Os rótulos em IBM Plex Mono espaçado e em maiúsculas ("NESTA PÁGINA",
   "NOSSA LEITURA", "01") liam como painel de ferramenta.

   🔴 AQUI, E NÃO EM `relatorio.css`. As regras originais continuam valendo
   nas páginas de report, que não foram parte do pedido; este arquivo só
   carrega em `research.html` e `research/pix.html`, e vem depois do
   `relatorio.css`, então vence pela ordem.

   Número continua com `tabular-nums`: é o que mantém as casas alinhadas na
   faixa e no eixo, que era o motivo de ter usado a mono. */
.rp-indice__tt,.rp-sec__n,.rp-fig__fonte,.rs-cta__k,.rs-rodada__k,.rs-nossa__k{
  font-family:var(--sans);text-transform:none;letter-spacing:0}
.rp-indice__tt{font-size:.8125rem;font-weight:500}
.rp-sec__n{font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums}
.rp-fig__fonte{font-size:.75rem}
.rs-cta__k,.rs-rodada__k{font-size:.875rem;font-weight:600}
.rs-nossa__k{font-size:.8125rem;font-weight:600}

.rs-num .v,.rs-num .var,.rs-kv dd,.rs-metrica,.rs-var,.g-eixo,.g-num,.g-centro{
  font-family:var(--sans);font-variant-numeric:tabular-nums}
.rs-num .v{font-weight:600;letter-spacing:-.03em}
.rs-metrica{font-weight:600;letter-spacing:-.035em}
.rs-kv dd{font-weight:600;letter-spacing:-.01em}
.rs-var{letter-spacing:0}
.g-eixo{font-size:11px;letter-spacing:0}
.g-num{font-weight:600;letter-spacing:0}