/* ==========================================================================
   sobre-nosotros.css — sección "sobre nosotros" del HOME.
   Frame Figma: node 21:24, fondo navy, 406px. Texto blanco.
   Depende de tokens.css + layout.css.

   Orden REAL (Figma 21:24): lead (Bold fs-31) · titular (ExtraBold fs-36) ·
   sub "ASÍ LO HACEMOS POSIBLE" (Regular fs-31). left del contenido ~117-125 en
   el Figma; se usa el gutter estándar (108) del contenedor, diferencia
   despreciable.

   ESPACIADOS MEDIDOS contra el frame 21:24 (copia Pro): aire 82/80, lead→titular
   35, titular→sub 11. Gaps desiguales -> se aplican con márgenes por bloque.
   ========================================================================== */

.lfi-sobre {
  background: var(--lfi-navy);
  color: var(--lfi-white);
}

/* La banda centra su contenido verticalmente para replicar el aire del Figma.
   Los gaps entre bloques son desiguales (35 / 11) -> se usan márgenes, no gap. */
.lfi-sobre .lfi-container {
  min-height: var(--lfi-sobre-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--lfi-sobre-pad-y);   /* 82px (Figma) */
}
.lfi-sobre__lead  { margin-bottom: var(--lfi-sobre-gap-lead); }   /* 35px (Figma) */
.lfi-sobre__title { margin-bottom: var(--lfi-sobre-gap-title); }  /* 11px (Figma) */

/* Lead (Bold) ------------------------------------------------------------- */
.lfi-sobre__lead {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-bold);
  font-size: var(--lfi-fs-31);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-white);
}

/* Subtítulo (Regular) ----------------------------------------------------- */
.lfi-sobre__sub {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-31);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-white);
}

/* Titular (ExtraBold) ----------------------------------------------------- */
.lfi-sobre__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-36);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-white);
}

/* ==========================================================================
   DECISIÓN MÓVIL: se reducen los display grandes para no desbordar a 1 columna.
   Mobile-first: base menor, escala a los tamaños del Figma en desktop.
   ========================================================================== */
.lfi-sobre__lead,
.lfi-sobre__sub  { font-size: var(--lfi-fs-25); }
.lfi-sobre__title { font-size: var(--lfi-fs-28); }

@media (min-width: 768px) {
  .lfi-sobre__lead,
  .lfi-sobre__sub  { font-size: var(--lfi-fs-28); }
  .lfi-sobre__title { font-size: var(--lfi-fs-31); }
}
@media (min-width: 1024px) {
  .lfi-sobre__lead,
  .lfi-sobre__sub  { font-size: var(--lfi-fs-31); }  /* réplica Figma */
  .lfi-sobre__title { font-size: var(--lfi-fs-36); }
}