/* ═══════════════════════════════════════════════════════════════════
   BLOQUE 3 v2 «Con deco…» · slider con pestañas y titular sobre imagen
   Una imagen por pestaña (21:9; 1:1 en móvil) con el titular encima,
   como las diapositivas con foto del hero.

   - Pestañas, barra de progreso, fundido, botones e iconos: comunes, en
     slider.css. Imagen a sangre, degradado y título: comunes, en foto.css
     (.foto, .foto--left, .foto__txt, .foto__big). Aquí solo la maquetación, con
     prefijo bn (beneficios).
   - Se carga después de styles.css, slider.css y foto.css, solo desde
     index-v2.html.
   - Lógica en js/slider.js.
   ═══════════════════════════════════════════════════════════════════ */

.bn {
	margin-top:clamp(32px,4vw,56px);
}

/* ── escenario: los seis paneles superpuestos ── */
.bn__stage {
	position:relative;
	aspect-ratio:21/9;
	border-radius:50px;
	overflow:hidden;
	background:var(--navy);
}
/* cada panel es una .foto (imagen + degradado desde la izquierda) */
.bn__s {
	position:absolute;
	inset:0;
}
.bn__s:focus-visible {
	outline-color:#fff;
	outline-offset:-6px;   /* el escenario recorta lo que sale por fuera */
}

/* ── titular + CTA, abajo a la izquierda ──
   Mismo margen que las flechas a la derecha. El CTA (.btn--s, 46 px)
   centrado con las flechas (44 px): 1 px más abajo que ellas. */
.bn__txt {
	max-width:60%;
	padding:0 0 calc(clamp(20px,3vw,48px) - 1px) clamp(20px,3vw,48px);
}

/* ── controles (anterior · pausa · siguiente), abajo a la derecha ── */
.bn__ctrl {
	position:absolute;
	right:clamp(20px,3vw,48px);
	bottom:clamp(20px,3vw,48px);
	z-index:3;
	display:flex;
	gap:10px;
}

/* ── móvil: cuadrado, radio 25 px, titular y CTA abajo, degradado desde abajo ── */
@media (max-width:760px) {
	.bn__stage {
		aspect-ratio:1/1;
		border-radius:25px;
	}
	/* degradado suave desde abajo (el de .foto por defecto): solo oscurece un poco */
	.bn__s.foto--left::before {
		background:var(--foto-bottom);
	}
	/* sin flechas: misma distancia al borde inferior que al izquierdo */
	.bn__txt {
		max-width:none;
		width:100%;
		padding:0 clamp(20px,3vw,48px) clamp(20px,3vw,48px);
	}
	/* en móvil se navega con las pestañas */
	.bn__ctrl {
		display:none;
	}
}