/**
 * Carrusel mobile reutilizable (mecánica). El layout de cada ítem (anchos por
 * breakpoint) lo define el CSS de cada bloque. Tokens theme.json.
 */

.ipx-carousel,
.ipx-carousel *,
.ipx-carousel *::before,
.ipx-carousel *::after {
	box-sizing: border-box;
}

.ipx-carousel__track {
	display: flex;
	flex-direction: row;
	gap: 1.25rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.ipx-carousel__track::-webkit-scrollbar { display: none; }
/* El flex de cada ítem lo define el bloque consumidor (slider/stats/benefits);
   aquí NO se fija para no pisarlo por orden de cascada (misma especificidad). */
.ipx-carousel__item { scroll-snap-align: start; }

.ipx-carousel__nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.25rem;
}
.ipx-carousel__prev,
.ipx-carousel__next {
	flex: 0 0 auto;
	display: inline-flex;
	padding: 0.25rem;
	background: none;
	border: 0;
	line-height: 0;
	cursor: pointer;
}
.ipx-carousel__prev svg,
.ipx-carousel__next svg { display: block; }
.ipx-carousel__dots {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.25rem;
}
.ipx-carousel__dot {
	flex: 1;
	height: 4px;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--ipla-gray);
	cursor: pointer;
	transition: background-color 0.3s ease-in;
}
.ipx-carousel__dot.is-active { background: var(--wp--preset--color--ipla-blue); }

/* Desktop: por defecto el track se vuelve grid (flex-wrap) y la nav se oculta. */
@media (min-width: 768px) {
	.ipx-carousel__track {
		flex-wrap: wrap;
		overflow-x: visible;
		row-gap: 2rem;
	}
	.ipx-carousel__nav { display: none; }

	/* Variante scroll: mantiene el carrusel horizontal también en desktop
	   (ej. slider de carreras). La nav la decide el bloque. */
	.ipx-carousel--scroll .ipx-carousel__track {
		flex-wrap: nowrap;
		overflow-x: auto;
		row-gap: 0;
	}
	.ipx-carousel--scroll .ipx-carousel__nav { display: flex; }
	.ipx-carousel--scroll.ipx-carousel--fits .ipx-carousel__nav { display: none; }
}