/* ============================================================
   22-casos.css · "Casos de estudio" (#casos)
   Fondo gris claro · cards blancas con borde izquierdo azul
   profundo · filas label/value · "Sin la intervención" diferenciada.
   Reveal escalonado vía nav-reveal.js (.case__card).
   ============================================================ */

.cases {
  background: var(--vp-gris-claro);
  border-top: 1px solid var(--color-line);
}

.cases__grid {
  /* Una columna a ancho de lectura, centrada (espeja .diag-panel/.plinto-stack del
     sistema, max-width 760). Garantiza CERO huecos: 5 paneles de altura dispar se
     apilan, sin filas que emparejar ni 5ª huérfana con hueco al lado. */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: var(--content-max);
  margin: var(--space-lg) auto 0;
}

.case__card {
  background: var(--color-dominant);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--vp-azul-profundo);   /* acento conservado */
  border-radius: var(--radius-lg);                  /* era var(--radius-md): iguala paneles del sistema */
  padding: var(--space-lg);                          /* era var(--space-md) var(--space-lg): iguala paneles */
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-fast);
}

/* Hover de elevación (patrón de .service / .expert__block) */
.case__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--vp-lavanda);
  border-left-color: var(--vp-azul-profundo);        /* conserva el acento izquierdo en hover */
}

.case__row {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: var(--space-md);
  /* descomprime las 6 filas (era var(--space-sm) 0 = 16px) */
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-line);
}
.case__row:first-child { border-top: none; padding-top: 0; }

.case__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}

.case__value {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-ink);
}

/* "Sin la intervención" — consecuencia destacada */
.case__row--consequence {
  margin-top: var(--space-xs);
  border-top: 2px solid var(--vp-lavanda);
  background: rgba(155, 149, 221, 0.07);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}
.case__row--consequence .case__label { color: var(--vp-azul-profundo); }
.case__row--consequence .case__value { color: var(--color-ink-soft); }

@media (max-width: 560px) {
  .case__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Reduced motion: tarjetas estáticas (igual que el resto del sistema) ── */
@media (prefers-reduced-motion: reduce) {
  .case__card { transition: none !important; }
  .case__card:hover { transform: none !important; box-shadow: var(--shadow-sm); }
}