/* Contador animado da Home (Figma: Home nova / Contador animado,
   2292:1867). Redesenho: sem os ícones em círculo da versão antiga —
   agora é só o número grande (navy) com um "+" laranja avulso ao
   lado, uma linha fininha em cima que ganha um trecho laranja mais
   grosso (o "preenchimento" cresce junto com a contagem do número,
   ver main.js) e a descrição embaixo. */

.big-numbers { padding: 56px 0; }
@media (min-width: 1024px) {
  /* Linha dos números a y=1024 (60px depois do hero de 964px); 96px
     de baixo + 24px do topo do bloco seguinte = 120px até "Sistemas
     separados…" (1158 → 1278). */
  .big-numbers { padding: 60px 0 96px; }
}

.big-numbers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 560px) {
  .big-numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (min-width: 900px) {
  .big-numbers-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

.stat { text-align: left; }

.stat-line {
  position: relative;
  height: 1px;
  background: rgba(79, 96, 131, 0.2);
  margin-bottom: 24px;
}
@media (min-width: 900px) {
  .stat-line { margin-bottom: 30px; }
}
.stat-line-fill {
  position: absolute;
  top: -2px;
  left: 0;
  height: 5px;
  width: 0;
  background: var(--color-orange);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* JS acrescenta ".is-counted" no mesmo instante em que o número ao
   lado começa a contar (ver main.js) — cresce junto, mesmo sendo dois
   mecanismos diferentes (este é transition de CSS, o número é rAF). */
.stat-line-fill.is-counted { width: var(--fill); }
/* Sem JS (progressive enhancement): a linha já nasce no tamanho
   final, sem depender de nenhuma animação pra mostrar o valor certo. */
html:not(.js) .stat-line-fill { width: var(--fill); }

.stat-number-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 8px;
}
@media (min-width: 900px) {
  .stat-number-row { margin-bottom: 11px; }
}
.stat-number {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.32px;
  color: var(--color-navy);
}
@media (min-width: 900px) {
  .stat-number { font-size: 44px; letter-spacing: -0.44px; }
}

.stat-plus {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.24px;
  color: var(--color-orange);
}
@media (min-width: 900px) {
  .stat-plus { font-size: 32px; letter-spacing: -0.32px; }
}

.stat-desc {
  max-width: 220px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-gray-04);
}
@media (min-width: 900px) {
  .stat-desc { font-size: 16px; }
}