/* =========================================================
 * ITFIX - Carrusel de Logos
 * Efecto: logo activo a color y ampliado; resto en B/N.
 * ======================================================= */

.itfix-logo-carousel {
	/* Variables controlables desde el panel de Estilo de Elementor */
	--itfix-lc-active-scale: 1.15;
	--itfix-lc-inactive-scale: 0.78;
	--itfix-lc-inactive-opacity: 0.5;
	--itfix-lc-inactive-grayscale: 100%;
	--itfix-lc-logo-max-height: 90px;
	--itfix-lc-transition: 0.45s;

	position: relative;
	width: 100%;
	padding: 20px 0;
}

/* Base mínima de Swiper (respaldo por si su CSS no carga) */
.itfix-logo-carousel .itfix-lc-swiper {
	overflow: hidden;
	width: 100%;
}

.itfix-logo-carousel .swiper-wrapper {
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

/* --- Cada logo (estado por defecto = inactivo) --- */
.itfix-logo-carousel .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* Caja de altura uniforme: todos los logos miden igual de alto */
	height: var(--itfix-lc-logo-max-height);
	padding: 0 8px;
	transition:
		transform var(--itfix-lc-transition) ease,
		filter var(--itfix-lc-transition) ease,
		opacity var(--itfix-lc-transition) ease;
	transform: scale(var(--itfix-lc-inactive-scale));
	filter: grayscale(var(--itfix-lc-inactive-grayscale));
	opacity: var(--itfix-lc-inactive-opacity);
}

.itfix-logo-carousel .swiper-slide img {
	display: block;
	width: auto;
	height: auto;
	/* La imagen se ajusta dentro de la caja sin deformarse */
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

.itfix-logo-carousel .itfix-lc-link {
	display: inline-flex;
	line-height: 0;
}

/* --- Logo activo (centrado) = a color y más grande --- */
.itfix-logo-carousel .swiper-slide-active {
	transform: scale(var(--itfix-lc-active-scale));
	filter: grayscale(0%);
	opacity: 1;
	position: relative;
	z-index: 2;
}

/* --- Flechas de navegación --- */
.itfix-logo-carousel .itfix-lc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.06);
	color: #333;
	transition: background 0.2s ease, color 0.2s ease;
}

.itfix-logo-carousel .itfix-lc-arrow:hover {
	background: rgba(0, 0, 0, 0.12);
}

.itfix-logo-carousel .itfix-lc-prev {
	left: 0;
}

.itfix-logo-carousel .itfix-lc-next {
	right: 0;
}

.itfix-logo-carousel .itfix-lc-arrow.swiper-button-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* --- Paginación --- */
.itfix-logo-carousel .swiper-pagination.itfix-lc-pagination {
	position: static;
	margin-top: 16px;
	text-align: center;
}