/* ==========================================================================
   equipo-home.css — teaser "equipo" / "Mucho más que" del HOME.
   Frame Figma: node 7:196, 355px.
   Depende de tokens.css + layout.css.

   CORRECCIÓN DE FIDELIDAD (verificado con get_design_context del frame 7:196):
   la banda es ROJA (no navy) y TODO el texto es BLANCO, incluido el CTA
   "CONÓCENOS". El maquetado previo la puso navy con CTA rojo por haberse hecho
   a ciegas (MCP rate-limited). El fondo del Figma es una imagen roja full-bleed;
   se replica con el token de marca --lfi-red (equivalente fiel y más ligero).

   Titular ExtraBold fs-40 SIN tracking, blanco. Párrafo Regular fs-30, blanco.
   CTA "CONÓCENOS" (Regular fs-30, BLANCO) -> /equipo/.

   ESPACIADOS MEDIDOS (frame 7:196): aire sup 82, titular→párrafo ~4,
   párrafo→CONÓCENOS 41.
   ========================================================================== */

.lfi-equipo-home {
  background: var(--lfi-red);
  color: var(--lfi-white);
}
.lfi-equipo-home .lfi-container {
  min-height: var(--lfi-equipo-home-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--lfi-equipo-home-pad-y);   /* 82px (Figma) */
}
.lfi-equipo-home__title { margin-bottom: var(--lfi-equipo-home-gap-title); }  /* 4px */
.lfi-equipo-home__text  { margin-bottom: var(--lfi-equipo-home-gap-text); }   /* 41px */

/* Titular (ExtraBold, SIN tracking) -------------------------------------- */
.lfi-equipo-home__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-40);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-none);   /* esta sección va sin tracking (brief) */
  color: var(--lfi-white);
}

/* Párrafo (Regular) ------------------------------------------------------- */
.lfi-equipo-home__text {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-30);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-none);
  color: var(--lfi-white);
}

/* CTA "CONÓCENOS" (BLANCO sobre la banda roja, texto-enlace) -------------- */
.lfi-equipo-home__cta {
  align-self: flex-start;
  display: inline-block;
  padding-block: 8px;               /* área táctil ~44px en móvil (absorbida por
                                       el centrado de la banda; imperceptible) */
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-30);
  letter-spacing: var(--lfi-ls-none);
  text-transform: uppercase;
  color: var(--lfi-white);
  transition: color 0.2s ease;
}
/* HOVER: el CTA es blanco sobre rojo. Aplicando la inversión de marca
   (rojo<->azul), sobre el fondo rojo vira a navy, que es legible. DECISIÓN
   documentada: el Figma no define hover; se sigue la regla del brief. */
.lfi-equipo-home__cta:hover,
.lfi-equipo-home__cta:focus-visible {
  color: var(--lfi-navy);
}

/* ==========================================================================
   DECISIÓN MÓVIL: display reducido; el contenido ya apila en 1 columna.
   ========================================================================== */
.lfi-equipo-home__title { font-size: var(--lfi-fs-28); }
.lfi-equipo-home__text,
.lfi-equipo-home__cta   { font-size: var(--lfi-fs-23); }

@media (min-width: 768px) {
  .lfi-equipo-home__title { font-size: var(--lfi-fs-36); }
  .lfi-equipo-home__text,
  .lfi-equipo-home__cta   { font-size: var(--lfi-fs-27); }
}
@media (min-width: 1024px) {
  .lfi-equipo-home__title { font-size: var(--lfi-fs-40); }  /* réplica Figma */
  .lfi-equipo-home__text,
  .lfi-equipo-home__cta   { font-size: var(--lfi-fs-30); }
}