.metrics {
  background-color: #161616;
  padding-block: clamp(3rem, 7vw, 5rem);
  text-align: center;
}

.metrics__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.metrics__title,
.metrics__subtitle {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-default), transform 0.6s var(--ease-default);
}

.metrics__title.in-view,
.metrics__subtitle.in-view {
  opacity: 1;
  transform: none;
}

.metrics__subtitle.in-view {
  transition-delay: 0.08s;
}

.metrics__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--white);
}

.metrics__subtitle {
  margin-top: 1rem;
  color: var(--gray);
  font-weight: 600;
  line-height: 1.5;
}

.metrics__subtitle strong {
  color: var(--white);
  font-weight: 700;
}

.metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  /* Largura suficiente para cada legenda caber em uma linha só. */
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-default), transform 0.5s var(--ease-default);
}

.metric.in-view {
  opacity: 1;
  transform: none;
}

.metric:nth-child(2).in-view {
  transition-delay: 0.06s;
}

.metric:nth-child(3).in-view {
  transition-delay: 0.12s;
}

.metric:nth-child(4).in-view {
  transition-delay: 0.18s;
}

/* Todos os números com o mesmo tamanho — a escala acompanha a menor
   coluna disponível para que nenhum deles quebre linha. */
.metric__number {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 800;
  color: var(--light-green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: filter 0.3s var(--ease-default);
}

.metric:hover .metric__number {
  filter: brightness(1.3);
}

.metric__label {
  color: var(--gray);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .metrics__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .metrics__grid {
    grid-template-columns: 1fr;
  }
}