/* ==========================================================================
   RÉGUA DE NÚMEROS COM CONTAGEM — prefixo stat-
   Números gigantes lado a lado, separados por filete vertical, com um rótulo
   curto em caixa alta embaixo. A contagem é do script; aqui não há um único
   keyframe.

   Tokens usados: --fg --fg-muted --rule --accent --display --sans --radius-media
   Primitivas do core (usadas, não recopiadas): .wrap .sec-pad .sec-head
   .eyebrow h2.sec-title .sec-lead .pill .btn / .btn-ghost — e .glass na
   variação .stat-band--card.

   Não existe @media(prefers-reduced-motion) neste arquivo, e a ausência é
   deliberada: a entrada da faixa é [data-rv], que o core já desliga, e a
   contagem é texto trocado pelo JS, que a desliga por conta própria. Não
   sobrou movimento em CSS para desligar.
   ========================================================================== */

/* Só a largura e a centralização dos filhos: o resto vem de .sec-head. */
.stat-head{--head-max:680px}
.stat-head .eyebrow,
.stat-head .sec-title,
.stat-head .sec-lead{margin-inline:auto}

/* ---------------------------------------------------------------- a régua */
/* --stat-cols é o único ajuste de quantidade. Três é o padrão; quatro pede
   --stat-size menor (a ficha traz o valor). O empilhamento do mobile NÃO lê
   esta variável de propósito: assim quem escrever --stat-cols:4 num style
   inline não consegue quebrar o mobile sem querer.

   Sem filete horizontal por padrão. O que separa a régua do cabeçalho é o
   respiro; filete em cima e embaixo mais os verticais fecha uma moldura e a
   faixa deixa de ler como régua e passa a ler como tabela. */
.stat-band{
  --stat-cols:3;
  --stat-gap:clamp(16px,2.5vw,44px);    /* respiro interno de cada célula */
  --stat-size:clamp(52px,7.5vw,92px);   /* corpo do número */
  margin-top:clamp(38px,6vh,64px);
  display:grid;
  grid-template-columns:repeat(var(--stat-cols),minmax(0,1fr));
}

.stat-item{padding:0 var(--stat-gap)}
/* Primeiro e último encostam na coluna: a régua tem de nascer e morrer
   alinhada ao .wrap, senão parece um bloco solto dentro do grid. */
.stat-item:first-child{padding-left:0}
.stat-item:last-child{padding-right:0}
/* O filete. Vive no :not(:last-child) — dois filetes para três itens. */
.stat-item:not(:last-child){border-right:1px solid var(--rule)}

/* ---------------------------------------------------------------- o número */
.stat-num{
  font-family:var(--display);font-weight:700;
  font-size:var(--stat-size);
  line-height:.88;letter-spacing:-.04em;
  color:var(--fg);

  /* OBRIGATÓRIO, não é refinamento. Na maioria das fontes proporcionais cada
     algarismo tem avanço próprio — o 1 é estreito, o 8 é largo. Sem
     tabular-nums o número treme lateralmente a cada frame da contagem, porque
     a largura muda a cada troca de dígito. Com ele, todo algarismo ocupa o
     mesmo avanço e a largura só cresce quando entra um dígito NOVO: o número
     cresce, não vibra. Se a --display do tema não tiver algarismos tabulares,
     veja o gotcha da ficha antes de desistir do componente. */
  font-variant-numeric:tabular-nums;

  /* Nunca quebra linha. Se quebrasse no meio da contagem — de "99" para
     "1.240" — o rótulo saltaria para baixo junto. Número comprido demais
     transborda a célula, e transbordar é para ser visto e corrigido. */
  white-space:nowrap;
}

.stat-label{
  font-family:var(--sans);
  font-size:11.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
  margin-top:clamp(12px,1.6vh,18px);
  /* Guarda-corpo, não regra de quebra: um rótulo de 2 a 4 palavras cabe numa
     linha e é assim que ele lê melhor, embaixo de um número de 92px. O teto
     existe só para o rótulo longo demais não atravessar uma célula larga
     (--stat-cols:2) como se fosse parágrafo. Precisa quebrar em ponto certo?
     Ponha um <br> no markup, como faz a régua do hero. */
  max-width:36ch;
}

/* ---------------------------------------------------------------- rodapé */
/* Onde mora a data de apuração e, se houver, um botão. Número sem data é
   promessa; a pílula é o lugar barato de resolver isso. Centralizado porque
   o cabeçalho padrão é centralizado — sem .sec-head, troque para
   justify-content:flex-start no tema. */
.stat-foot{
  margin-top:clamp(28px,4.5vh,48px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,24px);
}

/* ---------------------------------------------------------------- variações */
/* Números na cor de marca. Use quando a régua É o assunto da dobra; em página
   que já gasta accent em título e botão, deixe em --fg. */
.stat-band--accent .stat-num{color:var(--accent)}

/* Régua dentro de card de vidro. Compõe a primitiva .glass do core — junte as
   duas classes no mesmo elemento (class="glass stat-band stat-band--card"),
   não recopie a superfície. Os filetes ficam: dentro do card eles continuam
   sendo a estrutura. */
.stat-band--card{
  padding:clamp(24px,3.4vw,44px);
  border-radius:var(--radius-media);
}

/* ---------------------------------------------------------------- mobile */
/* Empilha e o filete troca de eixo: mesma função, outra direção.
   O seletor é IDÊNTICO ao do desktop (.stat-item:not(:last-child)), com a
   mesma especificidade e mais adiante na folha — é assim que se troca uma
   borda sem forçar prioridade. O original resolvia marcando o border-right:0
   como importante, que o contrato §6 não aceita. */
@media(max-width:860px){
  .stat-band{grid-template-columns:1fr}
  .stat-item{padding:clamp(24px,4vh,34px) 0}
  .stat-item:first-child{padding-top:0}
  .stat-item:last-child{padding-bottom:0}
  .stat-item:not(:last-child){border-right:0;border-bottom:1px solid var(--rule)}
  .stat-band--card{padding:clamp(20px,5vw,30px)}
}