/**
 * Hexfy Slider de tecnologías - Carrusel automático infinito
 */

.hexfy-tech-slider {
	--hexfy-tech-bg: #0f172a;
	--hexfy-tech-text: #fff;
	--hexfy-tech-muted: #94a3b8;
	--hexfy-tech-card-bg: rgba(30, 41, 59, 0.5);
	--hexfy-tech-border: rgba(248, 250, 252, 0.12);
	--hexfy-tech-accent: #3b82f6;
	--hexfy-tech-speed: 30s;
	--hexfy-tech-count: 16;
} 

.hexfy-tech-slider {
	background: var(--hexfy-tech-bg);
	color: var(--hexfy-tech-text);
	padding: 4rem 0;
	overflow: hidden;
}

.hexfy-tech-slider__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.hexfy-tech-slider__title {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	text-align: center;
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
}

.hexfy-tech-slider__subtitle {
	font-size: 1rem;
	text-align: center;
	color: var(--hexfy-tech-muted);
	margin: 0 0 2.5rem;
}

.hexfy-tech-slider__slider {
	overflow: hidden;
	margin: 0 -0.5rem;
}

.hexfy-tech-slider__track {
	display: flex;
	width: 200%;
	animation: hexfy-tech-scroll var(--hexfy-tech-speed) linear infinite;
}

.hexfy-tech-slider__track:hover {
	animation-play-state: paused;
}

@keyframes hexfy-tech-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.hexfy-tech-slider__item {
	flex: 0 0 calc(100% / var(--hexfy-tech-count));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 0;
	padding: 1rem 0.75rem;
	margin: 0 0.5rem;
	background: var(--hexfy-tech-card-bg);
	border: 1px solid var(--hexfy-tech-border);
	border-radius: 12px;
	transition: border-color 0.2s;
}

.hexfy-tech-slider__item:hover {
	border-color: rgba(248, 250, 252, 0.25);
}

.hexfy-tech-slider__item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hexfy-tech-accent);
}

.hexfy-tech-slider__item-icon i,
.hexfy-tech-slider__item-icon svg {
	width: 2rem;
	height: 2rem;
	font-size: 2rem;
}

/* Que el icono herede el color del contenedor (por defecto o personalizado por ítem) */
.hexfy-tech-slider__item-icon i {
	color: inherit;
}

.hexfy-tech-slider__item-icon svg {
	fill: var(--hexfy-icon-custom, currentColor);
	stroke: var(--hexfy-icon-custom, currentColor);
	color: inherit;
}

.hexfy-tech-slider__item-label {
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}