/* ═══════════════════════════════════════════════════════════════════
   BLOQUE 6 v2 «Casos» · slider de casos de éxito
   Cada diapositiva es el bloque entero: la tarjeta del caso (.case--f de
   styles.css, 2/3) y el testimonio que explica su frase (1/3). Se desliza
   desde la derecha. «Ver todos los casos» y los botones no se deslizan:
   quedan fijos abajo en la columna derecha (en móvil, debajo del slider).

   - Prefijo cs__. Botones (.sl__btn--light) e iconos: comunes, en slider.css.
   - Se carga después de styles.css y slider.css, solo desde index-v2.html.
   - Lógica en js/slider.js: deja data-dir="fwd|back" en el slider y marca
     .is-leaving en la diapositiva que sale.
   ═══════════════════════════════════════════════════════════════════ */

/* ── conjunto: las diapositivas ocupan las dos columnas; los controles,
   la fila de abajo de la columna derecha, encima de ellas ── */
.cs {
	display:grid;
	grid-template-columns:minmax(0,2fr) minmax(0,1fr);
	grid-template-rows:1fr auto;
	column-gap:24px;
	margin-top:56px;
}
.cs__stage {
	grid-column:1 / -1;
	grid-row:1 / -1;
	display:grid;
	overflow:hidden;
}

/* Diapositivas, apiladas en la misma celda (la altura la marca la más alta).
   En espera: fuera, a la derecha y ocultas (sin transición, para que vuelvan
   a su sitio sin cruzar el escenario). La activa entra deslizándose; la que
   sale se va por la izquierda. */
.cs__s {
	grid-area:1 / 1;
	display:grid;
	grid-template-columns:minmax(0,2fr) minmax(0,1fr);
	column-gap:24px;
	align-items:start;
	transform:translateX(100%);
	visibility:hidden;
}
.cs__s.is-on,
.cs__s.is-leaving {
	visibility:visible;
	transition:transform .75s cubic-bezier(.7,0,.2,1);
}
.cs__s.is-on {
	transform:none;
}
.cs__s.is-leaving {
	transform:translateX(-100%);
}
/* hacia atrás (botón anterior, ←): entra por la izquierda y sale por la derecha */
[data-dir="back"] .cs__s:not(.is-on):not(.is-leaving) {
	transform:translateX(-100%);
}
[data-dir="back"] .cs__s.is-leaving {
	transform:translateX(100%);
}
@media (prefers-reduced-motion:reduce) {
	.cs__s.is-on,
	.cs__s.is-leaving {
		transition:none;
	}
}

/* ── testimonio: abajo deja sitio a los controles, que van encima ── */
.cs__quote {
	padding:clamp(0px,4vw,64px) 0 120px 16px;
}
.cs__quote p {
	margin-top:20px;
	font-size:clamp(17px,1.3vw,19px);
	line-height:1.6;
	color:var(--ink2);
}

/* ── controles fijos: «Ver todos los casos» y anterior · pausa · siguiente ── */
.cs__nav {
	grid-column:2;
	grid-row:2;
	align-self:end;
	position:relative;
	z-index:1;
	padding-left:16px;
}
.cs__all {
	display:inline-flex;
	align-items:center;
	gap:9px;
	font-size:16px;
	font-weight:600;
}
.cs__ctrl {
	display:flex;
	gap:10px;
	margin-top:24px;
}

/* ── una columna: tarjeta, testimonio debajo y controles bajo el slider ── */
@media (max-width:1100px) {
	.cs {
		grid-template-columns:minmax(0,1fr);
		grid-template-rows:auto auto;
	}
	.cs__stage {
		grid-row:1;
	}
	.cs__s {
		grid-template-columns:minmax(0,1fr);
	}
	.cs__quote {
		padding:20px 0 0;
	}
	.cs__nav {
		grid-column:1;
		grid-row:2;
		padding:24px 0 0;
	}
}