/* ==========================================================================
   equipo-hero.css — EQUIPO · sección 1: viewport (imagen full-bleed + intro).
   Frame Figma: EQUIPO 11:19 — imagen 35:146 (1440×602) + viewport 35:145.
   Depende de tokens.css + layout.css. Solo tokens; medido en la copia Pro.

   MEDIDO: imagen 602 · imagen→H1 101 · H1→subtítulo 19 · subtítulo→párrafo 35 ·
   intro→Santiago 106. H1 ExtraBold 50/lh57, subtítulo REGULAR 39/lh~49, párrafo
   Regular 27/lh35. Todo navy sobre blanco.
   ========================================================================== */

.lfi-equipo-hero {
  background: var(--lfi-white);
}

/* Banda de imagen full-bleed.
   DECISIÓN MÓVIL: aspect-ratio para que no ocupe toda la pantalla; a partir de
   1024 recupera el alto fijo del Figma (602px). */
.lfi-equipo-hero__media {
  width: 100%;
  aspect-ratio: 1440 / 602;
  background: var(--lfi-soft);   /* degrada si falta la imagen */
  overflow: hidden;
}
.lfi-equipo-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bloque de intro (medidas reales; gaps desiguales -> márgenes por bloque). */
.lfi-equipo-hero__intro {
  display: flex;
  flex-direction: column;
  padding-block: var(--lfi-equipo-py-mobile);   /* móvil */
}
.lfi-equipo-hero__title    { margin-bottom: var(--lfi-equipo-hero-gap-title); }  /* 19 */
.lfi-equipo-hero__subtitle { margin-bottom: var(--lfi-equipo-hero-gap-sub); }    /* 35 */

.lfi-equipo-hero__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-30);                  /* móvil */
  line-height: var(--lfi-lh-heading);           /* 57/50 = 1.14 */
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
  max-width: var(--lfi-content-read);
}
.lfi-equipo-hero__subtitle {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);        /* CORRECCIÓN: Regular, no ExtraBold */
  font-size: var(--lfi-fs-24);                  /* móvil */
  line-height: var(--lfi-lh-tight-body);        /* ~49/39 */
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
  max-width: var(--lfi-content-read);
}
.lfi-equipo-hero__text {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-19);                  /* móvil */
  line-height: var(--lfi-lh-tight-body);        /* 35/27 = 1.30 */
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
  max-width: var(--lfi-content-read);
}

/* ==========================================================================
   BREAKPOINTS — la escala tipográfica del Figma es desktop; se adapta.
   ========================================================================== */
@media (min-width: 768px) {
  .lfi-equipo-hero__title    { font-size: var(--lfi-fs-40); }
  .lfi-equipo-hero__subtitle { font-size: var(--lfi-fs-30); }
  .lfi-equipo-hero__text     { font-size: var(--lfi-fs-23); }
}
@media (min-width: 1024px) {
  .lfi-equipo-hero__media { aspect-ratio: auto; height: var(--lfi-equipo-hero-img-h); }
  .lfi-equipo-hero__intro {
    padding-top: var(--lfi-equipo-hero-pt);      /* 101 (Figma) */
    padding-bottom: var(--lfi-equipo-hero-pb);   /* 106 (Figma) */
  }
  .lfi-equipo-hero__title    { font-size: var(--lfi-fs-50); }   /* réplica Figma */
  .lfi-equipo-hero__subtitle { font-size: var(--lfi-fs-39); }
  .lfi-equipo-hero__text     { font-size: var(--lfi-fs-27); }
}