/*
  Cifra del territorio (portada y Territorio en cifras)
  Cifra grande + frase corta + fuente y año siempre visibles (RN-M1-06).
  counters.js anima .stat__number desde 0 al aparecer; el valor final está
  siempre en el HTML y duplicado en un span.visually-hidden, así que sin JS
  o con movimiento reducido se ve la cifra real.
*/

.stat {
  display: grid;
  gap: var(--gap-3);
  align-content: start;
  padding-top: var(--padding-6);
  border-top: 1px solid var(--rule);
}

.stat__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gap-2);
  font-family: var(--heading);
  font-size: var(--font-size-11);
  line-height: var(--line-height-15);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.03em;
  color: var(--secondary-300);
}

.stat__unit {
  font-size: var(--font-size-7);
  line-height: var(--line-height-11);
  letter-spacing: -0.01em;
}

.stat__phrase {
  font-family: var(--heading);
  font-size: var(--font-size-6);
  line-height: var(--line-height-10);
  font-variation-settings: "SOFT" 50, "WONK" 0;
  max-width: 22ch;
}

.stat__source {
  font-size: var(--font-size-2);
  line-height: var(--line-height-6);
  color: var(--text-muted);
}

@media (min-width: 1280px) {
  .stat__figure {
    font-size: var(--font-size-12);
    line-height: var(--line-height-16);
  }
}