/* ==========================================================================
   casos-home.css — sección "Casos de éxito" del HOME.
   Frame Figma: node 7:269, fondo blanco, 1168px.
   Depende de tokens.css + layout.css. Incluye la tarjeta del home
   (.lfi-caso-home-card, markup en template-parts/cards/card-caso-home.php).

   Estructura: titular "CASOS EXITO" (ExtraBold fs-40, ROJO, izq) + 2 tarjetas
   grandes (594×594) + CTA "SABER MÁS" (fs-28, rojo). gap tarjetas 43 en el
   Figma -> se usa --lfi-gap-grid (40, consolidado en tokens).

   ESPACIADOS MEDIDOS (frame 7:269): pad sup 66 (tras la banda lawyers) / inf 60,
   titular→rejilla 40 (Figma 37), rejilla→SABER MÁS 31. Alineación del CTA a la
   izquierda con el título (documentado).
   ========================================================================== */

.lfi-casos-home {
  background: var(--lfi-white);
  color: var(--lfi-navy);
}
.lfi-casos-home .lfi-container {
  padding-top: var(--lfi-casos-home-pad-top);       /* 66px (Figma) */
  padding-bottom: var(--lfi-casos-home-pad-bottom); /* 60px (Figma) */
}

/* Titular rojo ------------------------------------------------------------ */
.lfi-casos-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-tight);
  text-transform: uppercase;
  color: var(--lfi-red);
  margin-bottom: var(--lfi-casos-home-title-gap);   /* 40px título -> rejilla (Figma) */
}

/* Rejilla de 2 tarjetas grandes -----------------------------------------
   En desktop 2 columnas iguales (calca las 2 tarjetas 594 del Figma). Aguanta
   N por si el WP_Query devolviera menos/más: auto-fill con mínimo acotado. */
/* auto-fit + min 340: 1 columna en móvil y tablet (≤~1000px), 2 columnas en
   desktop (las 2 tarjetas del Figma llenan el ancho). auto-fit colapsa pistas
   vacías, así que si el WP_Query devolviera 1 caso ocupa el ancho sin quedar a
   medias. min(100%,…) evita desborde en pantallas estrechas. */
.lfi-casos-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--lfi-gap-grid);   /* 40px */
}

/* CTA "SABER MÁS" (rojo, texto-enlace). DECISIÓN MÓVIL: centrado; en desktop
   recupera la alineación izquierda del Figma (7:189, x112). */
.lfi-casos-home__cta {
  margin-top: var(--lfi-casos-home-cta-mt);
  text-align: center;
}
.lfi-casos-home__more {
  display: inline-block;
  padding-block: 8px;               /* área táctil ~44px en móvil */
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-28);
  letter-spacing: var(--lfi-ls-tight);
  text-transform: uppercase;
  color: var(--lfi-red);
  transition: color 0.2s ease;
}
/* HOVER: inversión aprobada rojo -> azul (legible sobre fondo blanco). */
.lfi-casos-home__more:hover,
.lfi-casos-home__more:focus-visible {
  color: var(--lfi-navy);
}

/* ==========================================================================
   TARJETA DEL HOME (.lfi-caso-home-card)
   Frame Figma 16:84 / 16:85 (get_design_context + muestreo de píxeles):
     - Tarjeta 594×594, radius 24, fondo --lfi-soft.
     - Panel 594×310 (radius solo arriba) con el LOGO del cliente centrado sobre
       su COLOR DE MARCA (card1 claro #F0F0F0, card2 #00659D). El color va inline
       desde ACF; aquí el panel claro por defecto.
     - Testimonio: Regular Italic fs-25, navy, tracking -0.03em.
     - "VER MÁS": Regular fs-23, ROJO, anclado abajo.
   SIN título (diferencia con la tarjeta de archive).
   ========================================================================== */
.lfi-caso-home-card {
  background: var(--lfi-soft);
  border-radius: var(--lfi-radius-card);   /* 24px */
  overflow: hidden;
  height: 100%;                            /* iguala altura entre columnas */
}
.lfi-caso-home-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--lfi-navy);
}

/* Panel de marca (310 sobre 594, radius solo arriba por el overflow:hidden).
   Los assets de cliente son paneles compuestos (logo sobre su color de fondo),
   así que la imagen llena el panel a sangre (object-cover), como en el Figma
   (16:84/16:85). El texto de respaldo se apila en la misma celda con grid. */
.lfi-caso-home-card__media {
  width: 100%;
  aspect-ratio: 594 / 310;   /* proporción del panel del Figma */
  background: var(--lfi-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lfi-caso-home-card__logo {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Respaldo sin imagen: tipo_operacion como texto centrado. Navy sobre el panel
   claro; en panel oscuro (is-dark, si hay cliente_color) pasa a blanco. */
.lfi-caso-home-card__fallback {
  grid-area: 1 / 1;
  padding: var(--lfi-pad-card);
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-23);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  text-transform: uppercase;
  text-align: center;
  color: var(--lfi-navy);
}
.lfi-caso-home-card__media.is-dark .lfi-caso-home-card__fallback {
  color: var(--lfi-white);
}

/* Cuerpo: testimonio + VER MÁS (empujado al fondo). */
.lfi-caso-home-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--lfi-pad-card);   /* 40px (Figma ~40/45) */
}
.lfi-caso-home-card__quote {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-style: italic;
  font-size: var(--lfi-fs-25);           /* 25px (Figma) */
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}
.lfi-caso-home-card__more {
  margin-top: auto;                      /* ancla "VER MÁS" al fondo (como el Figma) */
  padding-top: var(--lfi-casos-card-gap);
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-23);           /* 23px (Figma) */
  letter-spacing: var(--lfi-ls-tight);
  text-transform: uppercase;
  color: var(--lfi-red);
  transition: color 0.2s ease;
}
/* HOVER: al pasar por la tarjeta, "VER MÁS" invierte rojo -> azul (regla 6). */
.lfi-caso-home-card__link:hover .lfi-caso-home-card__more,
.lfi-caso-home-card__link:focus-visible .lfi-caso-home-card__more {
  color: var(--lfi-navy);
}

/* ==========================================================================
   DECISIÓN MÓVIL: rejilla a 1 columna (el minmax colapsa a 100%) y titular/CTA
   reducidos. Mobile-first: escala a los tamaños del Figma en desktop.
   ========================================================================== */
.lfi-casos-home__title { font-size: var(--lfi-fs-30); }  /* móvil: display contenido */
.lfi-casos-home__more  { font-size: var(--lfi-fs-23); }

@media (min-width: 768px) {
  .lfi-casos-home__title { font-size: var(--lfi-fs-36); }
}
@media (min-width: 1024px) {
  .lfi-casos-home__title { font-size: var(--lfi-fs-40); }  /* réplica Figma */
  .lfi-casos-home__more  { font-size: var(--lfi-fs-28); }
  .lfi-casos-home__cta   { text-align: left; }             /* Figma: izquierda */
}