/* ==========================================================================
   servicios-intro.css — hero de imagen + intro (H1) de SERVICIOS & SECTORES.
   Frame Figma: 11:613 — viewport 18:7 (imagen 602) + titular 18:145.
   Depende de tokens.css + layout.css. Medido en la copia Pro.

   Banda de imagen full-bleed (602) + H1 ExtraBold 50/lh53, navy, sobre blanco.
   ========================================================================== */

/* Banda de imagen full-bleed (mismo patrón que home/equipo).
   DECISIÓN MÓVIL: aspect-ratio para no comerse la pantalla; alto fijo en ≥1024. */
.lfi-servicios-hero__media {
  width: 100%;
  aspect-ratio: 1440 / 602;
  background: var(--lfi-soft);   /* degrada si falta la imagen */
  overflow: hidden;
}
.lfi-servicios-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.lfi-servicios-intro__title {
  max-width: var(--lfi-servicios-intro-max-w);
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-28);          /* móvil */
  line-height: var(--lfi-lh-display);   /* 1.06 (53/50) */
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}

/* ==========================================================================
   BREAKPOINTS — el display grande del Figma es desktop; se adapta.
   ========================================================================== */
@media (min-width: 768px) {
  .lfi-servicios-intro__title { font-size: var(--lfi-fs-40); }
}
@media (min-width: 1024px) {
  .lfi-servicios-hero__media { aspect-ratio: auto; height: var(--lfi-servicios-hero-img-h); }
  .lfi-servicios-intro {
    padding-top: var(--lfi-servicios-intro-pad-top);       /* 88 (Figma) */
    padding-bottom: var(--lfi-servicios-intro-pad-bottom); /* 56 (Figma) */
  }
  .lfi-servicios-intro__title { font-size: var(--lfi-fs-50); }   /* réplica Figma */
}