/* ===== casos-de-exito.css — Página Casos de éxito =====
   Reutiliza el hero de quienes-page.css (.qs-hero) y las cards de cases.css
   (.caso-card y descendientes). Aquí solo se define el hero corto y el grid
   de página completa, volcando las cards a layout vertical (imagen arriba).
   Variables y paleta: main.css. */

/* ══════════════════════════════════
   1. HERO corto (sin stats ni badges)
══════════════════════════════════ */
.qs-hero--short {
  padding: 150px 0 76px;
}

.casos-hero-body {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
  margin: 22px 0 0;
  max-width: 620px;
}

/* ══════════════════════════════════
   2. Grid de casos (3 columnas)
══════════════════════════════════ */
.casos-grid-section {
  padding: 84px 0 96px;
}

.casos-grid-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-x);
}

.casos-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Vuelca la .caso-card (horizontal en el home) a layout vertical:
   imagen arriba, contenido abajo — ideal para el grid de 3 columnas.
   Solo overrides de layout; tipografía, logo, arrow, hover vienen de cases.css. */
.casos-page-grid .caso-card {
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.casos-page-grid .caso-media {
  flex: 0 0 auto;
  width: 100%;
  height: 190px;
  min-height: 0;
}

/* El fade de la imagen ahora apunta hacia abajo (hacia el contenido) */
.casos-page-grid .caso-media-fade {
  background: linear-gradient(to bottom, transparent 55%, #fff);
}

/* ══════════════════════════════════
   3. Responsive
══════════════════════════════════ */
@media (max-width: 980px) {
  .casos-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .casos-grid-section {
    padding: 60px 0 72px;
  }
  .casos-page-grid {
    grid-template-columns: 1fr;
  }
  .casos-page-grid .caso-media {
    height: 200px;
  }
}