/* ==========================================================================
   equipo-santiago.css — EQUIPO · sección 2: Santiago (banda soft, foto izq).
   Frame Figma: EQUIPO 11:19 — Santiago 17:2 (banda soft, 768px).
   Depende de tokens.css + layout.css. Medido en la copia Pro.

   CORRECCIÓN: la banda es --lfi-soft (navy 5%), NO blanca, y la foto va a sangre
   full-height a la izquierda (44%), sin border-radius (no es una card). A la
   derecha, centrado en vertical: nombre (ExtraBold 52, navy), cargo (SemiBold
   36, ROJO), cita (Regular Italic 28, navy). Verificado con screenshot de 17:2.
   ========================================================================== */

.lfi-equipo-santiago {
  background: var(--lfi-soft);
}

/* DECISIÓN MÓVIL: 1 columna — foto arriba (a sangre), texto debajo. En ≥1024 se
   recupera el par foto-izquierda (44%) / texto-derecha del Figma. */
.lfi-equipo-santiago__inner {
  display: flex;
  flex-direction: column;
}

.lfi-equipo-santiago__media {
  width: 100%;
  aspect-ratio: 636 / 768;   /* proporción de la foto del Figma */
  background: var(--lfi-soft);
  overflow: hidden;
}
.lfi-equipo-santiago__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lfi-equipo-santiago__body {
  display: flex;
  flex-direction: column;
  padding: var(--lfi-equipo-py-mobile) var(--lfi-gutter);   /* móvil */
}
.lfi-equipo-santiago__role  { margin-top: var(--lfi-equipo-santiago-gap-name); }  /* 7 */
.lfi-equipo-santiago__quote { margin-top: var(--lfi-equipo-santiago-gap-role); }  /* 16 */

.lfi-equipo-santiago__name {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-31);              /* móvil */
  line-height: var(--lfi-lh-solid);         /* 49/52 */
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}
.lfi-equipo-santiago__role {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-semibold);
  font-size: var(--lfi-fs-23);              /* móvil */
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-red);                    /* cargo en ROJO */
}
.lfi-equipo-santiago__quote {
  margin: var(--lfi-equipo-santiago-gap-role) 0 0;
  font-family: var(--lfi-font);
  font-style: italic;
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-19);              /* móvil */
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width: 768px) {
  .lfi-equipo-santiago__name  { font-size: var(--lfi-fs-40); }
  .lfi-equipo-santiago__role  { font-size: var(--lfi-fs-28); }
  .lfi-equipo-santiago__quote { font-size: var(--lfi-fs-23); }
}
@media (min-width: 1024px) {
  /* Par foto-izquierda / texto-derecha del Figma; foto a sangre full-height. */
  .lfi-equipo-santiago__inner {
    display: grid;
    grid-template-columns: var(--lfi-equipo-santiago-img-w) 1fr;   /* 44% / resto */
    min-height: var(--lfi-equipo-santiago-h);                      /* 768 */
    align-items: stretch;
  }
  .lfi-equipo-santiago__media { aspect-ratio: auto; height: 100%; }
  .lfi-equipo-santiago__body {
    justify-content: center;   /* texto centrado en vertical (como el Figma) */
    /* texto arranca en 44% + col-gap = ~720; margen derecho = gutter. */
    padding: 0 var(--lfi-gutter) 0 var(--lfi-equipo-santiago-col-gap);
  }
  .lfi-equipo-santiago__name  { font-size: var(--lfi-fs-52); }   /* réplica Figma */
  .lfi-equipo-santiago__role  { font-size: var(--lfi-fs-36); }
  .lfi-equipo-santiago__quote { font-size: var(--lfi-fs-28); }
}