/* ============================================================================
   TECNOLOGÍAS (banner de logos infinito)
   ============================================================================ */

.technologies {
	background: var(--dark-bg);
}

.banner {
	width: 100%;
	margin: 3rem auto 0;
	overflow: hidden;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* La animación corre sólo mientras la sección está visible (ver tech-banner.js) */
.banner-inner {
	display: flex;
	width: fit-content;
	animation: scrollBanner 30s linear infinite;
	animation-play-state: paused;
}

.banner-inner.is-running {
	animation-play-state: running;
}

.banner img {
	width: 6.5vw;
	height: 12vh;
	object-position: center;
	object-fit: contain;
	padding: 10px;
	margin: 10px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid var(--border-color);
	flex-shrink: 0;
	flex-grow: 0;
	backface-visibility: hidden;
	transition: filter 0.3s ease, transform 0.3s ease;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1024px) {
	.banner img:hover {
		filter: brightness(1.3);
		background: rgba(255, 255, 255, 0.15);
		transform: translateY(-8px);
		box-shadow: 0 16px 40px rgba(100, 200, 255, 0.2);
	}
}

@keyframes scrollBanner {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 767px) {
	.banner {
		min-height: 100px;
	}

	.banner img {
		width: 6rem;
		height: 4rem;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.banner img {
		width: 7rem;
		height: 5rem;
	}
}