/* ==========================================================================
   hero.css — viewport / hero del HOME.
   Frame Figma: viewport (node 7:52, 1440×600). Imagen full-bleed, sin texto.
   Depende de tokens.css + layout.css.

   NOTA: Figma MCP rate-limited (plan Starter) al maquetar. El único dato del
   frame es el tamaño 1440×600 (alto 600 confirmado en el brief). No hay medidas
   internas porque el viewport no tiene hijos.
   ========================================================================== */

/* Full-bleed: el hero ocupa todo el ancho de la ventana (no usa .lfi-container).
   La imagen se recorta con object-fit para mantener el alto fijo del Figma. */
.lfi-hero {
  position: relative;   /* ancla el logo de marca superpuesto */
  width: 100%;
  overflow: hidden;
  background: var(--lfi-soft);   /* fondo mientras carga / si falta la imagen */
}

.lfi-hero__img {
  width: 100%;
  height: var(--lfi-hero-h-mobile);
  object-fit: cover;
  display: block;
}

/* Logo de marca superpuesto (Figma 7:73): a la izquierda, centrado en vertical.
   El lockup blanco (SVG limpiado) incluye el claim. El contenedor se acota al
   ancho de diseño y se centra, para que el logo quede a la izquierda del
   contenido como en el Figma. */
.lfi-hero__brand {
  position: absolute;
  top: 17%;                             /* Figma 7:73: top del bloque (no centrado) */
  left: 0;
  right: 0;
  margin-inline: auto;
  max-width: var(--lfi-design-width);   /* 1440 */
  padding-inline: var(--lfi-gutter);
  display: none;                        /* MÓVIL: sin logo superpuesto (punto 2) */
  pointer-events: none;                 /* no bloquea nada (no hay interacción) */
}
.lfi-hero__brand-logo {
  width: min(40%, 420px);               /* posición/tamaño horizontal ya validados */
  height: auto;
  display: block;
}
/* El logo superpuesto del hero SOLO se muestra en escritorio. */
@media (min-width: 1024px) {
  .lfi-hero__brand { display: block; }
}

/* ==========================================================================
   DECISIÓN MÓVIL (Figma solo define 1440): el alto del hero escala por
   breakpoint. Mobile-first: base 360, tablet 480, desktop 600 (réplica Figma).
   ========================================================================== */
@media (min-width: 768px) {
  .lfi-hero__img { height: var(--lfi-hero-h-tablet); }
}
@media (min-width: 1024px) {
  .lfi-hero__img { height: var(--lfi-hero-h); }   /* réplica Figma 1440×600 */
}