/* ═══════════════════════════════════════════════════════════════
   CIFRAS — partials/cifras.php

   La banda de números: recuadros blancos sobre una franja gris. Cuántos
   haya lo decide config/cifras.php; la rejilla se adapta.

   Hoja aparte y no dentro de servicios.css porque el partial encaja
   igual en la portada y en un futuro «About», y esas páginas no tienen
   por qué cargar el CSS de las fichas de servicios para dibujar unos
   recuadros de texto. Misma razón por la que trabajemos.css se separó
   de equipo.css.


   EL PREFIJO ES cif- Y NO cf-, Y ESO NO ES UN CAPRICHO

   Nació con cf-, de «cifras», y chocaba de frente con css/contacto.css,
   que ya usaba cf- para el formulario. Tres clases se llamaban igual y
   querían decir cosas opuestas:

     .cf         la sección del formulario  |  la franja gris de aquí
     .cf-caja    el panel de campos         |  un recuadro de cifra
     .cf-dentro  la rejilla de dos columnas |  el contenedor de ancho

   No se veía porque hoy ninguna página carga las dos hojas: /contact
   pide 'contacto' y /services pide 'cifras'. Pero este partial existe
   justamente para poder ponerlo en OTRA página — la portada, un
   «About»—, y esas son las que sí llevan formulario. El día que
   coincidieran, la que cargara segunda repintaría a la primera y
   quedaría un formulario con fondo gris o unos recuadros con la rejilla
   del formulario dentro. Y sin dar ningún error.

   REGLA PARA HOJAS NUEVAS: antes de elegir prefijo, comprobar que no lo
   use ninguna otra.  grep -o "\.xx[a-z-]*" css/*.css | sort -u
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Los recuadros van BLANCOS sobre la franja gris. Es la misma pareja
     de la FAQ, del formulario de contacto y de las tarjetas del equipo:
     superficie gris, y lo que va encima en blanco. */
  --cif-encima: #ffffff;
}

/* La franja gris va de filo a filo de la pantalla, no del contenido:
   cortada a 1440 se leería como una tarjeta enorme en vez de como un
   cambio de sección. */
.cif {
  background: var(--gris);
  padding: clamp(46px, 8vh, 100px) var(--hd-pad);
}

.cif-dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
}

.cif-titular {
  margin-bottom: clamp(28px, 5vh, 60px);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .98;
  color: var(--tinta-alta);
  text-align: center;
}

/* FLEX Y NO GRID, y el motivo es la última fila.

   Empezó siendo auto-fit: a 1440 metía cuatro por fila y las seis
   cifras salían 4+2. Pasó a grid de tres columnas fijas, que cuadraba
   con seis — hasta que se quitó la de «24–48h» y quedaron CINCO. Con
   grid, cinco en tres columnas dejan la última fila con dos pegadas a
   la izquierda y un hueco a la derecha, que no se lee como una decisión
   sino como una tarjeta que no cargó.

   Flex con wrap y justify-content: center resuelve eso solo: las filas
   completas se ven idénticas a como se veían con grid, y la incompleta
   se centra. Y deja de importar cuántas cifras haya — con cuatro, con
   cinco o con siete, la última fila siempre queda centrada.

   El flex-basis reproduce el cálculo de las tres columnas: el ancho
   total menos los dos huecos, partido en tres. */
.cif-rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cif-caja {
  /* Tres por fila: el ancho total menos los dos huecos, partido en tres.
     min-width: 0 no es adorno — un elemento flexible no baja del ancho
     de su contenido por defecto, y una palabra larga ensancharía la caja
     por encima del tercio que le toca. */
  flex: 0 1 calc((100% - 2 * clamp(12px, 1.4vw, 22px)) / 3);
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: clamp(22px, 2.6vw, 40px) clamp(18px, 2vw, 32px);
  border-radius: clamp(14px, 1.5vw, 24px);
  background: var(--cif-encima);
  border: 1px solid var(--border);
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.cif-caja:hover {
  transform: translateY(-4px);
  border-color: var(--acento);
}

.cif-numero {
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--tinta-alta);
  /* Las cifras son texto, no números: '24–48h' lleva su sufijo dentro.
     Con las cifras en distinto ancho se descuadraban entre sí, y esto
     les da a todas el mismo paso. */
  font-variant-numeric: tabular-nums;
}

.cif-rotulo {
  margin-top: clamp(8px, 1.2vh, 14px);
  font-size: clamp(11px, .95vw, 14px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-alta);
}

/* Corta y centrada, no un borde de filo a filo: separa el dato de su
   explicación sin partir el recuadro en dos mitades. */
.cif-regla {
  width: clamp(28px, 3vw, 44px);
  height: 1px;
  margin: clamp(14px, 2.2vh, 22px) 0;
  background: var(--border);
}

.cif-texto {
  max-width: 42ch;
  font-size: clamp(12.5px, 1vw, 14.5px);
  line-height: 1.62;
  color: var(--muted);
}


/* ═══════════════════════════════════════════════════════════════
   Tamaños
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Dos por fila. A tres, el párrafo del pie baja de 30 caracteres por
     renglón y se lee a tirones. Con cinco cifras salen 2+2+1, y la
     suelta se centra sola por el justify-content de arriba. */
  .cif-caja { flex-basis: calc((100% - clamp(12px, 1.4vw, 22px)) / 2); }
}

@media (max-width: 560px) {
  /* Una por fila, y se le quita aire de dentro: a pantalla de móvil,
     cajas de 40px de relleno dejan el párrafo en cuatro palabras por
     renglón. */
  .cif-caja {
    flex-basis: 100%;
    padding: clamp(20px, 6vw, 28px) clamp(16px, 5vw, 22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cif-caja { transition: none; }
  .cif-caja:hover { transform: none; }
}