/* Un caso, en su ventana y en su página: cifras como KPI y tres bloques con icono. */
.caso { max-width: 52rem; margin-inline: auto; }
.encabezado--centrado { text-align: center; }
.encabezado--centrado h1, .encabezado--centrado .encabezado__texto { margin-inline: auto; }

.kpis { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-2); }
.kpis > li { grid-column: span 4; }
.kpis--1 > li { grid-column: 4 / span 6; }
.kpis--2 > li { grid-column: span 6; }
.kpis--4 > li { grid-column: span 3; }
.kpis--5 > li:nth-child(n + 4) { grid-column: span 6; }
.kpis > li { background: var(--tinte); border-radius: var(--radio); padding: var(--e-3) var(--e-3) var(--e-2); text-align: center; }
.kpi__valor { font: 600 clamp(2rem, 3vw + 1rem, 2.75rem)/1 var(--fuente-titulos); color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi__texto { margin-top: var(--e-1); font-size: 1rem; color: var(--tinta); }

.caso__bloques { display: grid; gap: var(--e-4); }
.caso__bloque { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--e-2); }
.caso__bloque h3 { font-size: 1.25rem; color: var(--navy); line-height: 1.3; margin-bottom: var(--e-1); }
.caso__bloque p + p { margin-top: var(--e-1); }

.caso-modal { border: 0; padding: 0; width: min(46rem, 92vw); max-height: 88vh; border-radius: var(--radio); background: var(--fondo); color: var(--tinta); }
.caso-modal::backdrop { background: rgb(18 52 71 / 0.65); }
.caso-modal__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4) var(--e-2); position: sticky; top: 0; background: var(--fondo); z-index: 1; }
.caso-modal__cabecera h2 { font-size: var(--t-3); line-height: 1.2; color: var(--navy); text-align: left; }
.caso-modal__cuerpo { padding: var(--e-2) var(--e-4) var(--e-4); }

@media (max-width: 760px) {
  .kpis > li, .kpis--1 > li, .kpis--5 > li:nth-child(n + 4) { grid-column: span 12; }
  .kpis--4 > li, .kpis--5 > li:nth-child(-n + 4), .kpis--6 > li { grid-column: span 6; }
  .kpis--5 > li:nth-child(5) { grid-column: span 12; }
  .kpi__valor { font-size: 1.875rem; }
  .kpis > li { padding: var(--e-2) var(--e-2) var(--e-1); }
  .caso-modal__cabecera, .caso-modal__cuerpo { padding-inline: var(--e-3); }
}