/* ==========================================================================
   Partners — "Nuestros aliados"
   Carrusel infinito de logos con CSS animation
   ========================================================================== */

/* --- Section --- */
.partners {
	padding: 40px 0;
	background: #FFFFFF;
	overflow: hidden;
}

/* --- Title --- */
.partners__title {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0%;
	color: #444444;
	text-align: center;
	margin: 0 0 32px;
}

/* --- Marquee container --- */
.partners__marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
}

/* --- Track (animación infinita) --- */
.partners__track {
	display: flex;
	align-items: center;
	gap: 60px;
	width: max-content;
	animation: partners-scroll 25s linear infinite;
}

.partners__track:hover {
	animation-play-state: paused;
}

/* --- Logo --- */
.partners__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.partners__logo img {
	height: 48px;
	width: auto;
	object-fit: contain;
	filter: grayscale(0%);
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

.partners__logo img:hover {
	opacity: 1;
}

/* --- Keyframes --- */
@keyframes partners-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-100% / 3));
	}
}

/* ==========================================================================
   Tablet — min-width: 768px
   ========================================================================== */

@media (min-width: 768px) {

	.partners {
		padding: 56px 0;
	}

	.partners__title {
		font-size: 20px;
	}

	.partners__track {
		gap: 80px;
	}

	.partners__logo img {
		height: 56px;
	}
}

/* ==========================================================================
   Desktop — min-width: 1024px
   ========================================================================== */

@media (min-width: 1024px) {

	.partners {
		padding: 64px 0;
	}

	.partners__track {
		gap: 100px;
	}

	.partners__logo img {
		height: 64px;
	}
}