/* ==========================================================================
   servicios-home.css — teaser "servicios y sectores" del HOME.
   Frame Figma: node 7:205, fondo navy, 355px.
   Depende de tokens.css + layout.css.

   Titular ExtraBold fs-40 SIN tracking (--lfi-ls-none), BLANCO, ancho ~1198.
   CTA "VER SERVICIOS" (Regular fs-30, BLANCO) -> /servicios-y-sectores/.

   CORRECCIÓN DE FIDELIDAD (get_design_context de 7:205/7:230/7:232): sobre la
   banda navy, TANTO el titular COMO el botón "VER SERVICIOS" son BLANCOS. El
   maquetado previo puso el CTA en rojo; el Figma lo tiene blanco. Se corrige.

   ESPACIADOS MEDIDOS (frame 7:205): aire sup/inf 94/95, titular→CTA 16.
   ========================================================================== */

.lfi-servicios-home {
  background: var(--lfi-navy);
  color: var(--lfi-white);
}
.lfi-servicios-home .lfi-container {
  min-height: var(--lfi-servicios-home-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--lfi-servicios-home-gap);        /* 16px titular→CTA (Figma) */
  padding-block: var(--lfi-servicios-home-pad-y);   /* 94px (Figma) */
}

/* Titular (ExtraBold, SIN tracking) -------------------------------------- */
.lfi-servicios-home__title {
  max-width: var(--lfi-servicios-home-max-w);
  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);
}

/* CTA "VER SERVICIOS" (BLANCO sobre navy, texto-enlace) ------------------- */
.lfi-servicios-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: blanco sobre navy -> vira a ROJO (acento de marca), mismo patrón
   blanco->rojo del nav sobre fondo oscuro. El Figma no define hover; decisión
   documentada acorde a la regla del brief. */
.lfi-servicios-home__cta:hover,
.lfi-servicios-home__cta:focus-visible {
  color: var(--lfi-red);
}

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

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