/* ==========================================================================
   casos-intro.css — intro de la PÁGINA CASOS DE EXITO (frame 11:149).
   Titular grande que hace de H1. Depende de tokens.css + layout.css.

   NOTA: Figma MCP rate-limited al maquetar; no se pudo get_design_context del
   nodo 11:149. Tamaño y leading salen de tokens.css (--lfi-fs-50 documentado
   como "titulares de intro grandes: Servicios, Casos, Contacto"). Los paddings
   verticales son estimados (marcados PENDIENTE) a falta de medidas del frame.
   ========================================================================== */

.lfi-casos-intro {
  padding-block: var(--lfi-pad-card);   /* móvil (40) */
}
@media (min-width: 1024px) {
  .lfi-casos-intro {
    padding-top: var(--lfi-casos-intro-pad-top);        /* 124 (Figma) */
    padding-bottom: var(--lfi-casos-intro-pad-bottom);  /* 69 (Figma) */
  }
}

/* Titular (H1) ----------------------------------------------------------- */
.lfi-casos-intro__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-50);          /* escala consolidada de intros grandes */
  line-height: var(--lfi-lh-display);   /* 1.06 (53/50) */
  letter-spacing: var(--lfi-ls-tight);  /* -0.03em */
  color: var(--lfi-navy);
}

/* ==========================================================================
   DECISIÓN MÓVIL (Figma solo define 1440): el titular grande se reduce en
   móvil para no desbordar. Mobile-first: base más pequeño, escala al llegar a
   desktop. Los tamaños intermedios reutilizan la escala de tokens.
   ========================================================================== */
.lfi-casos-intro__title {
  font-size: var(--lfi-fs-36);          /* móvil */
}
@media (min-width: 768px) {
  .lfi-casos-intro__title { font-size: var(--lfi-fs-40); }
}
@media (min-width: 1024px) {
  .lfi-casos-intro__title { font-size: var(--lfi-fs-50); }  /* réplica Figma 1440 */
}