/* ==========================================================================
   servicios-sectores.css — SECTORES DE ACTIVIDAD (frame 11:613 — 18:451..453).
   Depende de tokens.css + layout.css. Medido en la copia Pro.

   Título de sección "SECTORES DE ACTIVIDAD" (ExtraBold 40, ROJO) + N tarjetas
   soft (radius 24) en rejilla (2 col desktop, 1 móvil). Cada tarjeta: icono
   rojo + título (Bold 24, uppercase, navy) + cuerpo (Regular 20, navy).
   ========================================================================== */

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

/* Título de sección (ExtraBold, ROJO) */
.lfi-servicios-sectores__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 → tarjetas (Figma) */
}

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

/* Tarjeta de sector (fondo soft, radius 24): icono + título + cuerpo.
   DECISIÓN MÓVIL: icono y texto CENTRADOS; en desktop recuperan la alineación
   izquierda del Figma (18:451..453). */
.lfi-servicios-sectores__card {
  display: flex;
  flex-direction: column;
  gap: var(--lfi-servicios-sectores-card-gap);
  background: var(--lfi-soft);
  border-radius: var(--lfi-radius-card);
  padding: var(--lfi-pad-card);   /* 40 */
  align-items: center;
  text-align: center;
}
.lfi-servicios-sectores__icon {
  height: var(--lfi-servicios-icon);   /* 56; ancho auto */
  width: auto;
  align-self: center;                  /* móvil: centrado */
  flex: 0 0 auto;
}
.lfi-servicios-sectores__card-title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-bold);
  font-size: var(--lfi-fs-21);          /* móvil */
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
  text-transform: uppercase;
}
.lfi-servicios-sectores__card-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, título reducido.
   ========================================================================== */
@media (min-width: 768px) {
  .lfi-servicios-sectores__title      { font-size: var(--lfi-fs-36); }
  .lfi-servicios-sectores__card-title { font-size: var(--lfi-fs-24); }
}
@media (min-width: 1024px) {
  .lfi-servicios-sectores {
    padding-top: var(--lfi-servicios-sectores-pad-top);       /* 40 (Figma) */
    padding-bottom: var(--lfi-servicios-sectores-pad-bottom); /* 111 (Figma) */
  }
  .lfi-servicios-sectores__title { font-size: var(--lfi-fs-40); }   /* réplica Figma */
  /* Desktop: alineación izquierda del Figma. */
  .lfi-servicios-sectores__card { align-items: flex-start; text-align: left; }
  .lfi-servicios-sectores__icon { align-self: flex-start; }
}