/* ==========================================================================
   stats.css
   --------------------------------------------------------------------------
   Sección de contadores de la home: rejilla de cifras con icono y etiqueta,
   sin tarjetas ni cajas — el número es el protagonista.

   Se carga DESPUÉS de hero.css y ANTES de responsive.css.

   POR QUÉ UN ARCHIVO PROPIO Y NO components.css: components.css guarda piezas
   reutilizables en cualquier sección (el botón, por ejemplo). Esto es una
   sección concreta de la home, igual que el hero, así que sigue el mismo
   criterio: una sección = un módulo, con sus propias media queries dentro para
   poder leerla entera sin saltar de archivo.

   Mobile-first: los estilos base son los de móvil.
   ========================================================================== */


/* --------------------------------------------------------------------------
   .gt-stats — contenedor de la sección
   --------------------------------------------------------------------------
   FONDO BLANCO. Se probó en gris —para que la franja tuviera principio y final
   entre el hero y «Nuestros servicios», que también es blanco— y el usuario lo
   descartó el 2026-09-01. Vuelve el blanco: lo único que delimita la sección es
   el aire de arriba y abajo.
   -------------------------------------------------------------------------- */

.gt-stats {
  background-color: var(--color-bg);
  padding-block: 56px;
}


/* --------------------------------------------------------------------------
   .gt-stats__grid — rejilla
   2 columnas ya en móvil (3 filas), 3 desde tablet.
   En una sola columna los seis contadores hacían la sección interminable; con
   dos, el bloque se lee de un vistazo sin apenas scroll.
   La separación vertical es mayor que la horizontal a propósito: entre filas
   hace falta más aire para que se lean como filas distintas.
   -------------------------------------------------------------------------- */

.gt-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 16px;

  /* Es una lista de verdad (<ul>/<li>), pero sin viñetas */
  margin: 0;
  padding: 0;
  list-style: none;
}


/* --------------------------------------------------------------------------
   .gt-stat — cada contador
   Jerarquía vertical: icono → número → etiqueta, con el espaciado creciendo
   hacia abajo para que la cifra quede visualmente ligada a su etiqueta y
   separada del icono.
   -------------------------------------------------------------------------- */

.gt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* SE PROBÓ BAJARLO A 44/56px y subir la cifra, y el usuario prefirió lo de
   antes. La medición le dio la razón: con la cifra a 48px, el dato pasaba a ser
   el segundo texto más grande de la portada —un 60% por encima de cualquier H2—
   y competía con el H1 del hero. Las medidas de aquí son las buenas. */
.gt-stat__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 12px;

  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hover muy leve, solo un guiño. El contador no es clicable, así que el efecto
   no debe sugerir que lo sea: nada de sombras ni cambios de color. */
.gt-stat:hover .gt-stat__icon {
  transform: scale(1.06);
}


/* --------------------------------------------------------------------------
   .gt-stat__value — cifra + unidad
   La cifra es lo único que anima el JS; la unidad va al lado, fija.
   -------------------------------------------------------------------------- */

.gt-stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;

  margin: 0 0 8px;

  font-family: var(--font-primary);

  /* 1.375rem y no más: con dos columnas, en una pantalla de 320px cada celda
     ronda los 130px, y "250.000" a un tamaño mayor se desbordaría o partiría. */
  font-size: 1.375rem;
  font-weight: 700;              /* bold */
  line-height: 1.1;
  color: var(--color-primary);
}

.gt-stat__number {
  /* Cifras de ancho fijo: durante el conteo los dígitos no bailan de anchura,
     que es lo que hace que una animación de contador se vea nerviosa. */
  font-variant-numeric: tabular-nums;
}

.gt-stat__suffix {
  font-size: 0.5em;              /* relativo a la cifra, para que escale con ella */
  font-weight: 600;              /* semibold: acompaña, no compite */
  line-height: 1.2;
}


/* --------------------------------------------------------------------------
   .gt-stat__label — etiqueta
   --------------------------------------------------------------------------
   NO VA EN NEGRO PURO. --color-text es #000 en todo el sitio, y aquí ese negro
   competía con la cifra: el rótulo la explica, no la acompaña de igual a igual.
   Se rebaja mezclándolo con el fondo en lugar de escribir un gris nuevo, para
   que siga colgando del token si algún día cambia.

   El resultado ronda el #575757, que sobre el gris de la sección pasa de 6:1 de
   contraste: muy por encima del 4.5:1 que pide la norma para texto pequeño.
   -------------------------------------------------------------------------- */

.gt-stat__label {
  margin: 0;
  max-width: 22ch;               /* evita etiquetas de una sola línea larguísima */

  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 66%, var(--color-bg));

  /* Con dos columnas estrechas, palabras como "Almacenamiento" pueden
     desbordar la celda antes de encontrar un punto de corte. */
  hyphens: auto;
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   Ampliaciones por breakpoint
   -------------------------------------------------------------------------- */

/* Móvil grande — a partir de 480px
   Sigue en dos columnas, pero ya sobra ancho para recuperar tamaño. */
@media (min-width: 480px) {

  .gt-stats__grid { gap: 40px 24px; }

  .gt-stat__icon  { width: 64px; height: 64px; margin-bottom: 14px; }
  .gt-stat__value { font-size: 1.625rem; }
  .gt-stat__label { font-size: 0.875rem; }

}

/* Tablet — a partir de 768px: tres columnas
   A este ancho cada celda pasa de 230px, de sobra para la cifra más larga.
   Se salta el paso por dos columnas: con seis contadores, 3x2 cuadra mejor
   que 2x3 y deja la misma retícula que en desktop. */
@media (min-width: 768px) {

  .gt-stats {
    padding-block: 80px;
  }

  .gt-stats__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px var(--gutter);
  }

  .gt-stat__icon  { width: 80px; height: 80px; margin-bottom: 18px; }
  .gt-stat__value { font-size: 2rem; gap: 6px; margin-bottom: 10px; }
  .gt-stat__label { font-size: 1rem; max-width: 24ch; }

}

/* Desktop — a partir de 1024px */
@media (min-width: 1024px) {

  .gt-stats {
    padding-block: 64px;
  }

  .gt-stats__grid {
    gap: 60px var(--gutter);
  }

  .gt-stat__icon  { width: 88px; height: 88px; }
  .gt-stat__value { font-size: 2.25rem; }

}

/* Desktop ancho — a partir de 1280px */
@media (min-width: 1280px) {

  .gt-stats {
    padding-block: 72px;
  }

  .gt-stat__value { font-size: 2.375rem; }

}


/* --------------------------------------------------------------------------
   Accesibilidad — movimiento reducido
   Sin escalado del icono. El conteo lo desactiva el propio JS, que en ese caso
   deja la cifra final ya impresa en el HTML.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .gt-stat__icon {
    transition: none;
  }

  .gt-stat:hover .gt-stat__icon {
    transform: none;
  }

}