@charset "UTF-8";
/**
 * @file
 * Stats counter styles — mobile-first.
 * Figma: Home desktop 26:1808, Home mobile 26:5393.
 */
/* ==========================================================================
   Mobile base (xs) — Figma 26:5393
   ========================================================================== */
.vel-stats {
  background: var(--vel-primary);
  overflow: hidden;
}

.vel-stats__inner {
  padding: var(--vel-space-xl) var(--vel-space-md); /* 32px 16px */
}

.vel-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vel-space-md); /* 16px */
  padding: 0 var(--vel-space-md); /* 16px internal */
}

.vel-stats__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vel-space-sm); /* 8px */
  text-align: center;
  height: 88px; /* Figma mobile: h-88px */
}

.vel-stats__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vel-space-sm);
}

.vel-stats__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.vel-stats__number {
  font-family: var(--vel-font-heading);
  font-size: var(--vel-text-3xl-plus); /* 36px */
  font-weight: 800;
  color: var(--vel-bg-white);
  line-height: var(--vel-leading-heading-sm-plus); /* 48px */
  letter-spacing: var(--vel-tracking-snug); /* -0.75px */
}

/* Números que son texto (ej: "Nuevos", "Despliegues") — 30px en mobile Figma */
.vel-stats__number--text {
  font-size: var(--vel-text-3xl); /* 30px */
}

.vel-stats__suffix {
  font-size: 0.6em;
}

.vel-stats__label {
  font-family: var(--vel-font-body);
  font-size: var(--vel-text-xs); /* 12px */
  font-weight: 600;
  color: var(--vel-bg-white);
  text-transform: uppercase;
  letter-spacing: var(--vel-tracking-label); /* 0.6px */
  text-align: center;
  line-height: var(--vel-leading-meta); /* 16px */
}

/* ==========================================================================
   lg (992px) — Desktop: 4 inline — Figma 26:1808
   ========================================================================== */
@media (min-width: 992px) {
  .vel-stats__inner {
    padding: var(--vel-space-2xl) var(--vel-content-padding); /* 48px 80px */
  }
  .vel-stats__grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    gap: 0;
  }
  .vel-stats__card {
    flex: 0 1 auto;
    height: auto;
    gap: var(--vel-space-xl); /* 32px */
  }
  /* Figma card widths: 282, 304, 335, 442 */
  .vel-stats__card:nth-child(1) {
    width: 282px;
  }
  .vel-stats__card:nth-child(2) {
    width: 304px;
  }
  .vel-stats__card:nth-child(3) {
    width: 335px;
  }
  .vel-stats__card:nth-child(4) {
    width: 442px;
  }
  .vel-stats__header {
    gap: var(--vel-space-md);
  }
  .vel-stats__icon {
    width: 42px;
    height: 42px;
  }
  .vel-stats__number,
  .vel-stats__number--text {
    font-size: 48px;
    line-height: var(--vel-leading-heading-md); /* 48px */
  }
  .vel-stats__label {
    font-size: var(--vel-text-lg); /* 18px */
    letter-spacing: var(--vel-tracking-label);
    line-height: var(--vel-leading-card-body); /* 18px */
    min-height: 85px; /* Figma: h-85px for vertical alignment */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Labels largos: font-size reducido para que quepan en la card */
  .vel-stats__label--long {
    font-size: var(--vel-text-lg); /* 18px */
  }
}
/* ==========================================================================
   Variante 'conoce' — gap header→label 16px, cards iguales
   ========================================================================== */
@media (min-width: 992px) {
  .vel-stats--conoce .vel-stats__card {
    gap: var(--vel-space-md); /* 16px — Figma conoce: gap 16px vs 32px home */
    width: 282px; /* All cards same width in conoce */
  }
  /* Override per-card widths from home variant */
  .vel-stats--conoce .vel-stats__card:nth-child(2) {
    width: 296px;
  }
  .vel-stats--conoce .vel-stats__card:nth-child(3) {
    width: 282px;
  }
  .vel-stats--conoce .vel-stats__card:nth-child(4) {
    width: 282px;
  }
  .vel-stats--conoce .vel-stats__label {
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85px;
    text-align: center;
    width: 100%;
  }
}
/* xl (1200px) — Featured */
@media (min-width: 1200px) {
  .vel-stats__header {
    gap: var(--vel-space-lg);
  }
  .vel-stats__icon {
    width: 64px;
    height: 64px;
  }
  .vel-stats__number,
  .vel-stats__number--text {
    font-size: 64px;
    line-height: var(--vel-leading-heading-sm); /* 36px */
  }
  .vel-stats__label {
    font-size: var(--vel-text-2xl); /* 24px */
    letter-spacing: var(--vel-tracking-normal); /* 2px */
    line-height: normal;
  }
  .vel-stats__label--long {
    font-size: var(--vel-text-lg); /* 18px */
  }
}
/* ==========================================================================
   Laptop tier (1366–1599px) — Cirugía pixel-perfect según Figma
   Frames: Home 272:3259, Conoce 272:3098.
   Todas las dimensiones, padding, sombras, tracking, color y wrap del
   label se han extraído directamente del design context Figma laptop.
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1599px) {
  /* ------------------------------------------------------------------
     Variante HOME — Figma 272:3259
     Section: bg #00466e, items-center justify-between, px 48 py 32.
     Cards: flex-[1_0_0], px 16 py 18, rounded 24, transparent, gap 8.
     ------------------------------------------------------------------ */
  .vel-stats--home .vel-stats__inner {
    padding: 32px 48px;
  }
  .vel-stats--home .vel-stats__grid {
    gap: 0;
    justify-content: space-between;
    /* stretch = todas las cards a la misma altura y alineadas por arriba,
       así los valores comparten la misma línea (antes 'center' subía la
       card 4 al tener contenido distinto). */
    align-items: stretch;
  }
  .vel-stats--home .vel-stats__card,
  .vel-stats--home .vel-stats__card:nth-child(1),
  .vel-stats--home .vel-stats__card:nth-child(2),
  .vel-stats--home .vel-stats__card:nth-child(3),
  .vel-stats--home .vel-stats__card:nth-child(4) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    min-height: 116px;
    height: auto;
    padding: 18px 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0);
    align-items: stretch;
    gap: 8px;
  }
  /* Card 4 (variante text — "Despliegues") — gap 8 como el resto para que
     el label quede a la misma altura que los demás (antes 16 lo bajaba). */
  .vel-stats--home .vel-stats__card:has(.vel-stats__number--text) {
    gap: 8px;
  }
  .vel-stats--home .vel-stats__header {
    width: 100%;
    justify-content: center;
    /* Valor pegado abajo del header con altura fija: todos los títulos
       (números y el de texto) comparten la misma línea base inferior. */
    align-items: flex-end;
    min-height: 38px;
  }
  .vel-stats--home .vel-stats__number {
    font-size: 38px;
    line-height: 38px;
    letter-spacing: -0.5px;
    text-align: center;
  }
  /* Variante text en card 4 — "Despliegues" 32 px. LH igualada a la caja
     de los números (38px) para que la línea base inferior coincida. */
  .vel-stats--home .vel-stats__number--text {
    font-size: 32px;
    line-height: 38px;
  }
  .vel-stats--home .vel-stats__label {
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    min-height: 0;
    margin: 0 auto;
  }
  /* El widget `string_textarea` de los campos del bloque permite a los
     editores insertar saltos de línea reales que el extractor convierte
     en <br>. No hace falta line-clamp ni max-width: el editor controla
     directamente el wrap como en Figma. `display: block` garantiza que
     los <br> internos se rendericen como saltos reales (el padre flex
     blockifica el span y un inline-block convertía los <br> en espacios
     a este viewport). */
  .vel-stats--home .vel-stats__label-text {
    display: block;
  }
  /* ------------------------------------------------------------------
     Variante CONOCE — Figma 272:3098
     Section: px 80 py 48. Cards: rounded 38.27, drop-shadow, gap 16,
     header gap 24, icon 48, label h-33 w-282 white tracking 2.
     ------------------------------------------------------------------ */
  .vel-stats--conoce .vel-stats__inner {
    padding: 48px 80px;
  }
  .vel-stats--conoce .vel-stats__grid {
    gap: 26px;
    justify-content: flex-start;
    align-items: center;
  }
  .vel-stats--conoce .vel-stats__card,
  .vel-stats--conoce .vel-stats__card:nth-child(1),
  .vel-stats--conoce .vel-stats__card:nth-child(2),
  .vel-stats--conoce .vel-stats__card:nth-child(3),
  .vel-stats--conoce .vel-stats__card:nth-child(4) {
    /* Fluido: encoge por debajo de 1366, tope 282 para clavar el frame
       Figma a 1366+. Antes era width:282 fijo + overflow:hidden, que
       recortaba el texto al reducir el viewport (o con zoom). */
    flex: 1 1 0;
    min-width: 0;
    max-width: 282px;
    width: auto;
    min-height: 97px;
    height: auto;
    border-radius: 38.27px;
    filter: drop-shadow(0px 14.949px 14.949px rgba(0, 0, 0, 0.25));
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  /* Card 4 conoce — Card Content gap 8 (Figma 272:3122 vs gap 16). */
  .vel-stats--conoce .vel-stats__card:nth-child(4) {
    gap: 8px;
  }
  .vel-stats--conoce .vel-stats__header {
    gap: 24px;
    align-items: center;
    justify-content: center;
  }
  .vel-stats--conoce .vel-stats__icon {
    width: 48px;
    height: 48px;
  }
  .vel-stats--conoce .vel-stats__number {
    font-size: 38px;
    line-height: 36px;
    letter-spacing: -0.75px;
  }
  .vel-stats--conoce .vel-stats__label {
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 2px;
    color: var(--vel-bg-white);
    text-align: center;
    /* Wrap libre: sin width/height fijos el label se ajusta a la card y
       hace salto de línea en vez de cortarse. */
    max-width: 100%;
    overflow-wrap: break-word;
    padding-left: 0;
    min-height: 0;
  }
}
/*# sourceMappingURL=stats-counter.css.map */