/* ═══════════════════════════════════════════════════════════════════
   SLIDER CON PESTAÑAS v2 · piezas comunes
   Las usan Destacados (destacados.css) y el bloque 3 (beneficios.css):
   pestañas sin marco, subrayado que hace de barra de progreso, fundido
   entre paneles, iconos de pausa / reanudar y botones translúcidos.

   - Prefijo sl- / sl__. Cada bloque pone su maquetación con su prefijo.
   - Se carga después de styles.css, solo desde index-v2.html.
   - Lógica en js/slider.js (arranca cada [data-slider]).
   ═══════════════════════════════════════════════════════════════════ */

/* ── pestañas ──
   Centradas cuando caben; si no, en una fila con scroll horizontal que
   llega al borde de la pantalla. Sin breakpoint: depende de si caben. */
.sl__tabs {
	position:relative;
	display:flex;
	gap:clamp(20px,2.8vw,48px);
	overflow-x:auto;
	scrollbar-width:none;
	margin:0 calc(-1 * var(--pad)) clamp(24px,2.6vw,40px);
	padding:4px var(--pad) 0;
}
.sl__tabs::-webkit-scrollbar {
	display:none;
}
/* Márgenes automáticos en la primera y la última: centran cuando sobra
   sitio y se anulan cuando no cabe. (Con justify-content:center, lo que
   desbordara por la izquierda quedaría fuera del alcance del scroll.) */
.sl__tab:first-child {
	margin-left:auto;
}
.sl__tab:last-child {
	margin-right:auto;
}
.sl__tab {
	position:relative;
	flex:0 0 auto;
	padding:10px 0 14px;
	border:0;
	background:none;
	cursor:pointer;
	font-size:clamp(14px,1.1vw,17px);
	font-weight:500;
	color:var(--ink3);
	white-space:nowrap;
}
.sl__tab:hover,
.sl__tab[aria-selected="true"] {
	color:var(--navy);
}
.sl__tab:focus-visible {
	outline:2px solid var(--navy);
	outline-offset:2px;
	border-radius:4px;
}

/* Subrayado de la activa = barra de progreso:
   línea tenue (::before) y relleno navy (::after), que JS escala con --p (0 a 1) */
.sl__tab::before,
.sl__tab::after {
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:3px;
	border-radius:3px;
	opacity:0;
}
.sl__tab::before {
	background:rgba(0,48,91,.14);
}
.sl__tab::after {
	background:var(--navy);
	transform:scaleX(var(--p,0));
	transform-origin:left center;
}
.sl__tab[aria-selected="true"]::before,
.sl__tab[aria-selected="true"]::after {
	opacity:1;
}

/* ── paneles: fundido cruzado ──
   El que sale mantiene visibility hasta acabar el fundido; así se cruzan. */
.sl__s {
	opacity:0;
	visibility:hidden;
	transition:opacity .6s ease,visibility 0s linear .6s;
}
.sl__s.is-on {
	opacity:1;
	visibility:visible;
	transition:opacity .6s ease,visibility 0s;
}
.sl__s:focus-visible {
	outline:2px solid var(--navy);
	outline-offset:6px;
}

/* ── botones translúcidos (como los del hero), para ir sobre imagen ── */
.sl__btn {
	width:44px;
	height:44px;
	padding:0;
	border-radius:999px;
	cursor:pointer;
	display:grid;
	place-items:center;
	background:rgba(25,26,28,.45);
	border:1px solid rgba(246,243,236,.35);
	color:#F6F3EC;
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	transition:background .2s;
}
.sl__btn:hover {
	background:rgba(25,26,28,.75);
}
.sl__btn:focus-visible {
	outline:2px solid #fff;
	outline-offset:3px;
}
/* variante para fondo claro: mismo botón, en navy */
.sl__btn--light {
	background:transparent;
	border-color:rgba(0,48,91,.28);
	color:var(--navy);
	-webkit-backdrop-filter:none;
	backdrop-filter:none;
}
.sl__btn--light:hover {
	background:rgba(0,48,91,.07);
}
.sl__btn--light:focus-visible {
	outline-color:var(--navy);
}

/* ── iconos de pausa / reanudar ── */
.sl-ico-play {
	display:none;
}
[data-slider].is-paused .sl-ico-play {
	display:block;
}
[data-slider].is-paused .sl-ico-pause {
	display:none;
}