/* S5 Cifras.
   Dos filas: dos cifras arriba y tres abajo, cada una centrada en su celda.
   El número crece con el hueco disponible, así que la fila de dos lo lleva
   más grande que la de tres. En móvil van las cinco en una columna. */

.cifras {
  padding: clamp(80px, 10cqi, 144px) clamp(20px, 5.5cqi, 80px);
}

.cifras__interior {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gi);
  box-sizing: border-box;
}

.cifras__fila {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cifras__fila + .cifras__fila {
  margin-top: 40px;
}

.cifras__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.cifras__fila:first-of-type .cifras__item:first-child {
  border-top: none;
}

.cifras__valor {
  font: 700 var(--fs-h1)/1 var(--fd);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #03081b;
}

.cifras__etiqueta {
  font: 400 var(--fs-cuerpo-grande)/1.35 var(--fb);
  color: var(--ink2);
  max-width: 22ch;
}

/* A partir de tablet, cada fila en sus columnas y separadas por una línea. */
@media (min-width: 768px) {
  .cifras__fila {
    grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
    row-gap: 0;
  }

  .cifras__fila + .cifras__fila {
    margin-top: 0;
    border-top: 1px solid var(--line);
    padding-top: 48px;
  }

  .cifras__item {
    padding: 8px 22px;
    border-top: none;
  }

  .cifras__item + .cifras__item {
    border-left: 1px solid var(--line);
  }

  .cifras__fila:first-of-type {
    padding-bottom: 48px;
  }

  .cifras__valor {
    font-size: var(--fs-h1);
  }

  .cifras__fila:last-of-type .cifras__valor {
    font-size: var(--fs-h1);
  }
}

/* Móvil: todas las cifras empiezan en la misma línea izquierda que el resto
   de la web, más pequeñas y más juntas. Antes iban centradas y a 64 px:
   cada una se comía una pantalla entera. */
@media (max-width: 767px) {
  .cifras {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .cifras__fila {
    row-gap: 0;
  }

  .cifras__fila + .cifras__fila {
    margin-top: 0;
  }

  .cifras__item {
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    padding: 18px 0;
  }

  .cifras__valor {
    font-size: var(--fs-h1);
  }

  .cifras__etiqueta {
    font-size: var(--fs-cuerpo);
    max-width: none;
  }
}