/* ==========================================================================
   servicios-areas.css — ÁREAS DE PRÁCTICA (frame 11:613 — áreas 18:450).
   Depende de tokens.css + layout.css. Medido en la copia Pro.

   Título de sección "ÁREAS DE PRÁCTICA" (ExtraBold 40, ROJO) + caja soft
   (radius 24) con N áreas en rejilla (3 col desktop, 1 móvil). Cada área: icono
   rojo + título (Bold 21, uppercase, navy) + cuerpo (Regular 20, navy).
   ========================================================================== */

.lfi-servicios-areas {
  padding-block: var(--lfi-pad-card);   /* móvil (40) */
}

/* Título de sección (ExtraBold, ROJO) */
.lfi-servicios-areas__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-28);          /* móvil */
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-red);
  text-transform: uppercase;
  margin-bottom: var(--lfi-gap-grid);   /* 40, título → caja (Figma ~45) */
}

/* Caja grande (fondo soft, radius 24) */
.lfi-servicios-areas__box {
  background: var(--lfi-soft);
  border-radius: var(--lfi-radius-card);
  padding: var(--lfi-pad-card);         /* móvil */
}

/* Rejilla N (auto-fill): 1 col en móvil, hasta 3 en desktop. AGUANTA N. */
.lfi-servicios-areas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lfi-servicios-areas-col-min)), 1fr));
  gap: var(--lfi-gap-grid);
}

/* Item de área: icono (arriba) + título + cuerpo.
   DECISIÓN MÓVIL: icono y texto CENTRADOS y equilibrados; en desktop recuperan
   la alineación izquierda del Figma (18:450). */
.lfi-servicios-areas__item {
  display: flex;
  flex-direction: column;
  gap: var(--lfi-servicios-areas-item-gap);
  align-items: center;
  text-align: center;
}
.lfi-servicios-areas__icon {
  height: var(--lfi-servicios-icon);   /* 56; ancho auto -> respeta la proporción del SVG */
  width: auto;
  align-self: center;                  /* móvil: centrado */
  flex: 0 0 auto;
}
.lfi-servicios-areas__item-title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-bold);
  font-size: var(--lfi-fs-20);          /* móvil */
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
  text-transform: uppercase;
}
.lfi-servicios-areas__item-body {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-20);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}

/* ==========================================================================
   BREAKPOINTS — DECISIÓN MÓVIL: rejilla a 1 columna (min(100%,…) colapsa sin
   desbordes), título reducido y caja con menos padding.
   ========================================================================== */
.lfi-servicios-areas__item-title { font-size: var(--lfi-fs-20); }

@media (min-width: 768px) {
  .lfi-servicios-areas__title      { font-size: var(--lfi-fs-36); }
  .lfi-servicios-areas__item-title { font-size: var(--lfi-fs-21); }
}
@media (min-width: 1024px) {
  .lfi-servicios-areas {
    padding-top: var(--lfi-servicios-areas-pad-top);       /* 57 (Figma) */
    padding-bottom: var(--lfi-servicios-areas-pad-bottom); /* 73 (Figma) */
  }
  .lfi-servicios-areas__title { font-size: var(--lfi-fs-40); }   /* réplica Figma */
  .lfi-servicios-areas__box   { padding: var(--lfi-servicios-areas-box-pad); }  /* 52 */
  /* Desktop: alineación izquierda del Figma. */
  .lfi-servicios-areas__item { align-items: flex-start; text-align: left; }
  .lfi-servicios-areas__icon { align-self: flex-start; }
}