/* ==========================================================================
   sections/caso-single.css — ficha de caso de éxito (single-caso_exito.php).
   Frame Figma: 11:276. Depende de tokens.css + base.css + layout.css.
   Mobile-first; desktop (1024) = réplica del Figma a 1440.

   NOTA: Figma rate-limited al maquetar. Tipos/colores desde tokens.css (extraído
   del frame). Espaciados verticales estimados → marcados "estimado; verificar".
   ========================================================================== */

/* Hero full-bleed ----------------------------------------------------------- */
.lfi-caso__hero {
  width: 100%;
  height: var(--lfi-caso-hero-h-mobile);
  margin: 0;
  overflow: hidden;
}
.lfi-caso__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lfi-caso__hero--placeholder {
  background: var(--lfi-soft);
}

/* Contenedor de lectura ----------------------------------------------------- */
.lfi-caso__inner {
  max-width: var(--lfi-content-read);
  margin-inline: auto;
  padding-inline: var(--lfi-gutter);
  padding-block: var(--lfi-gap-heading);
}

/* Título del caso ----------------------------------------------------------- */
.lfi-caso__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-36);          /* 35→36 consolidado */
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  text-transform: uppercase;
  color: var(--lfi-navy);
}

/* Testimonio (wysiwyg) ------------------------------------------------------ */
.lfi-caso__testimonio {
  margin-top: var(--lfi-caso-gap-title);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-23);
  line-height: var(--lfi-lh-normal);    /* Figma 12:27: leading normal */
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}
/* Ritmo entre párrafos del testimonio (blank line del Figma). Antes usaba un
   valor unitless (--lfi-lh-body = 1.48) como margin -> inválido, quedaba en 0. */
.lfi-caso__testimonio p + p {
  margin-top: var(--lfi-post-block-space);   /* 34px */
}

/* Bloque autor -------------------------------------------------------------- */
.lfi-caso__autor {
  margin-top: var(--lfi-caso-gap-autor);
  display: flex;
  flex-direction: column;
  gap: var(--lfi-caso-autor-line);
  color: var(--lfi-navy);
}
.lfi-caso__logo {
  margin-bottom: var(--lfi-caso-autor-line);
}
.lfi-caso__logo img {
  height: var(--lfi-caso-logo-h);
  width: auto;
}
.lfi-caso__nombre {
  font-weight: var(--lfi-weight-bold);
  font-style: italic;                    /* Bold Italic (Area Normal Bold Italic) */
  font-size: var(--lfi-fs-20);
  letter-spacing: var(--lfi-ls-tight);
}
.lfi-caso__cargo {
  font-weight: var(--lfi-weight-regular);
  font-style: italic;
  font-size: var(--lfi-fs-20);
  letter-spacing: var(--lfi-ls-tight);
}
/* Enlace del cliente: navy → rojo en hover (inversión rojo↔azul, regla). */
.lfi-caso__url {
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-20);
  color: var(--lfi-navy);
  transition: color 0.2s ease;
}
.lfi-caso__url:hover,
.lfi-caso__url:focus-visible {
  color: var(--lfi-red);
}

/* ==========================================================================
   BREAKPOINT 768 — tablet
   ========================================================================== */
@media (min-width: 768px) {
  .lfi-caso__hero { height: var(--lfi-caso-hero-h-tablet); }
  .lfi-caso__inner { padding-inline: var(--lfi-gutter-narrow); }
}

/* ==========================================================================
   BREAKPOINT 1024 — desktop (réplica Figma 1440)
   ========================================================================== */
@media (min-width: 1024px) {
  .lfi-caso__hero { height: var(--lfi-caso-hero-h); }
  .lfi-caso__inner { padding-inline: var(--lfi-gutter-wide); }
}