/* ═══════════════════════════════════════════════════════════════════
   CAJA DE DESTACADOS v2 · maquetación
   Sin marco: pestañas de texto arriba; debajo, imagen (2/3) y texto (1/3).
   La reutiliza el bloque 7A (formación y soporte), con slides invertidos
   (.ds__s--rev: texto a la izquierda e imagen a la derecha).

   - Pestañas, barra de progreso, fundido e iconos: comunes, en slider.css.
     Aquí solo lo propio de este bloque, con prefijo ds- / ds__ para no
     chocar con .box, .tabs, .panel y .dots de styles.css (los usa index.html).
   - Se carga después de styles.css y slider.css, solo desde index-v2.html.
   - Lógica en js/slider.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ── escenario: imagen 2/3 + texto 1/3 ──
   Los cuatro paneles se apilan en la misma celda y heredan las pistas
   con subgrid. Las filas 1fr de arriba y abajo reparten lo que sobra,
   así el texto y los botones quedan centrados respecto a la imagen.
   Un solo juego de botones para todos los paneles (fila 3). */
.ds__stage {
	display:grid;
	grid-template-columns:minmax(0,2fr) minmax(0,1fr);
	grid-template-rows:1fr auto auto 1fr;
	column-gap:clamp(32px,4vw,72px);
}
.ds__s {
	grid-column:1 / -1;
	grid-row:1 / -1;
	display:grid;
	grid-template-columns:subgrid;
	grid-template-rows:subgrid;
}
.ds__media {
	grid-column:1;
	grid-row:1 / -1;
	align-self:center;
	position:relative;
	aspect-ratio:16/9;
	overflow:hidden;
	border-radius:25px;
	background:var(--bg2);
}
.ds__media img {
	width:100%;
	height:100%;
	object-fit:cover;
}
.ds__txt {
	grid-column:2;
	grid-row:2;
	align-self:end;
}
/* Variante invertida (.ds__s--rev): texto a la izquierda e imagen a la
   derecha. Las columnas no pueden heredarse con subgrid (serían 2fr 1fr),
   así que el panel pone las suyas en espejo (1fr 2fr) con el mismo hueco;
   las filas sí siguen heredadas, para que el centrado vertical no cambie. */
.ds__s--rev {
	grid-template-columns:minmax(0,1fr) minmax(0,2fr);
	column-gap:clamp(32px,4vw,72px);
}
.ds__s--rev .ds__media {
	grid-column:2;
}
.ds__s--rev .ds__txt {
	grid-column:1;
}
.ds__tag {
	font-size:clamp(20px,1.8vw,38px);
	font-weight:800;
	line-height:1.2;
	letter-spacing:.02em;
	color:var(--navy);
}
.ds__sub {
	margin-top:clamp(12px,1.2vw,20px);
	font-size:clamp(16px,1.1vw,19px);
	line-height:1.6;
	color:var(--ink2);
}

/* ── controles (anterior · pausa · siguiente) ── */
.ds__ctrl {
	grid-column:2;
	grid-row:3;
	position:relative;
	z-index:1;
	display:flex;
	gap:12px;
	margin-top:clamp(20px,2vw,32px);
	display:none;
}

/* ── una columna ── */
@media (max-width:1100px) {
	.ds__stage {
		grid-template-columns:minmax(0,1fr);
		grid-template-rows:auto auto auto;
	}
	.ds__media {
		grid-row:1;
	}
	.ds__txt {
		grid-column:1;
		grid-row:2;
		align-self:start;
		margin-top:clamp(20px,3vw,28px);
	}
	.ds__ctrl {
		grid-column:1;
	}
	/* en una columna, la variante invertida queda igual que las demás: imagen arriba */
	.ds__s--rev {
		grid-template-columns:subgrid;
	}
	.ds__s--rev .ds__media,
	.ds__s--rev .ds__txt {
		grid-column:1;
	}
}