/* =========================================================
   km_home_especialidades — carrusel de iconos.
   El track es scroll nativo con scroll-snap; las flechas sólo
   llaman a scrollBy() desde el JS de la sección.
   ========================================================= */

.km-home-especialidades {
	--km-esp-gap: 24px;
	--km-esp-per-view: 5;
	/* Alto del icono. Se toca sólo aquí: lo leen el contenedor y la imagen. */
	--km-esp-icon: 114px;

	padding: 70px 0 60px;
	background: var(--km-white);
}

/* Iconos visibles en escritorio (lo elige el editor en el builder).
   Los selectores de atributo mantienen la misma especificidad que las
   media queries de más abajo, para que en móvil ganen ellas. */
.km-home-especialidades[data-per-view="4"] { --km-esp-per-view: 4; }
.km-home-especialidades[data-per-view="5"] { --km-esp-per-view: 5; }
.km-home-especialidades[data-per-view="6"] { --km-esp-per-view: 6; }

.km-home-especialidades__title {
	text-align: center;
	font-size: clamp(25px, 2.77vw, 35px);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--km-heading);
	margin: 0 0 40px;
}

.km-home-especialidades__carousel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
}

/* ---------- Track ---------- */
.km-home-especialidades__track {
	list-style: none;
	margin: 0;
	padding: 4px;
	display: flex;
	gap: var(--km-esp-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.km-home-especialidades__track::-webkit-scrollbar {
	display: none;
}

.km-home-especialidades__item {
	flex: 0 0 calc((100% - (var(--km-esp-per-view) - 1) * var(--km-esp-gap)) / var(--km-esp-per-view));
	scroll-snap-align: start;
}

.km-home-especialidades__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	padding: 10px 4px;
	color: var(--km-accent-dark);
	border-radius: var(--km-radius);
	transition: transform var(--km-trans), color var(--km-trans);
}

a.km-home-especialidades__card:hover,
a.km-home-especialidades__card:focus-visible {
	color: var(--km-primary);
	transform: translateY(-4px);
}

.km-home-especialidades__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--km-esp-icon);
}

.km-home-especialidades__icon-img {
	max-height: var(--km-esp-icon);
	width: auto;
	object-fit: contain;
}

.km-home-especialidades__label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	color: inherit;
}

/* ---------- Flechas ---------- */
.km-home-especialidades__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--km-accent);
	cursor: pointer;
	transition: color var(--km-trans), background var(--km-trans), opacity var(--km-trans);
}

.km-home-especialidades__arrow:hover {
	background: var(--km-bg);
	color: var(--km-accent-dark);
}

.km-home-especialidades__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
	background: transparent;
}

@media (max-width: 1024px) {
	.km-home-especialidades[data-per-view] { --km-esp-per-view: 4; }
}

@media (max-width: 768px) {
	.km-home-especialidades[data-per-view] { --km-esp-per-view: 3; }

	.km-home-especialidades {
		--km-esp-gap: 16px;
		--km-esp-icon: 87px;
		padding: 52px 0 44px;
	}

	.km-home-especialidades__title { margin-bottom: 28px; }
}

@media (max-width: 520px) {
	.km-home-especialidades[data-per-view] { --km-esp-per-view: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.km-home-especialidades__track {
		scroll-behavior: auto;
	}
}