/* ===================================================================
   metricas.css — cifras duras
   Variantes: fila · tarjetas

   El patrón habitual —número enorme, etiqueta chica, degradado de
   acento— es el que produce cualquier plantilla. Aquí las cifras se
   componen como el cuadro de datos de un plano: una caja de línea
   delgada dividida en celdas, con la etiqueta arriba en tipografía
   técnica y el dato abajo. Es el mismo vocabulario del rótulo del
   hero, así que el sistema se siente de una pieza.
   =================================================================== */

.metricas__titulo {
  font-size: var(--paso-2);
  margin-bottom: var(--e-5);
  max-width: 40rem;
}

.metricas__cuadro {
  display: grid;
  grid-template-columns: repeat(var(--columnas, 3), minmax(0, 1fr));
}

.metrica {
  padding: var(--e-5) var(--e-5) var(--e-5) 0;
  border-top: 1px solid var(--sobre-fondo);
}

.metrica__etiqueta {
  font-family: var(--tipo-tecnica);
  font-size: var(--paso--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
}

.metrica__valor {
  font-family: var(--tipo-titulo);
  font-size: clamp(var(--paso-4), 4.4vw, var(--paso-5));
  font-weight: var(--peso-fuerte);
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: var(--e-3) 0 0;   /* dd trae 40px de margen por defecto */
  display: flex;
  align-items: baseline;
  gap: 0.08em;
}

.metrica__sufijo {
  font-size: 0.5em;
  font-weight: var(--peso-medio);
  color: var(--color-acento);
}

.fondo--claro .metrica__sufijo { color: var(--color-secundario); }

/* ── Variante: fila ────────────────────────────────────────────
   Una sola regla superior continua, celdas separadas por líneas
   verticales delgadas. Se lee como una sola pieza de dibujo.     */

.metricas--fila .metrica + .metrica {
  padding-left: var(--e-5);
  border-left: 1px solid var(--linea);
}

/* ── Variante: tarjetas ────────────────────────────────────────── */

.metricas--tarjetas .metricas__cuadro { gap: var(--e-4); }

.metricas--tarjetas .metrica {
  border: 1px solid var(--linea);
  border-top: 2px solid var(--color-acento);
  padding: var(--e-5);
  background: color-mix(in srgb, var(--sobre-fondo) 3%, transparent);
}

@media (max-width: 900px) {
  .metricas__cuadro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metricas--fila .metrica:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .metricas__cuadro { grid-template-columns: 1fr; }
  .metricas--fila .metrica {
    padding-left: 0;
    border-left: 0;
  }
}