/* Carrusel de auto-scroll infinito calcado de .brands-section de
   propuesta-v2.html. La lista se duplica en el propio render() de PHP (no
   con JS) para el loop sin salto: .marcas-track anima translateX(-50%) y,
   al ser dos copias idénticas, el final de la primera empalma con el
   arranque de la segunda sin corte visible. */
.omega-hw-marcas {
	--omega-marcas-alto: 92px;
	--omega-marcas-gap: 12px;
	--omega-marcas-duracion: 34s;
	padding: 8px 0;
	/* Sin margen inferior (pedido 2026-10-07): el espacio debajo se maneja
	   desde el padding de la sección en Elementor. */
	margin-bottom: 0;
}
/* El tamaño de logo (92px de alto / 172px de ancho) es el valor por
   defecto pensado para desktop -- el control responsive de Elementor
   (Style → Carrusel) permite pisarlo por breakpoint, pero si nadie cargó
   todavía un valor de mobile queda ese mismo tamaño grande en pantallas
   chicas (apenas 2-3 logos visibles a la vez). Este default de acá es solo
   el piso -- cualquier valor puesto a mano en Elementor para mobile sigue
   ganando, porque el CSS que genera Elementor por widget usa un selector
   más específico ({{WRAPPER}} con el ID del elemento) que le gana a este
   por especificidad, sin necesitar !important. */
@media (max-width: 768px) {
	.omega-hw-marcas {
		--omega-marcas-alto: 56px !important;
		--omega-marcas-gap: 8px !important;
	}
}
/* Mismo patrón eyebrow + título grande que .cats-title-row del widget de
   categorías, para mantener el mismo diseño de encabezado de sección. */
.marcas-title-row { margin-bottom: 20px; }
.marcas-eyebrow {
	font-family: Gotham, sans-serif !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #64748b !important;
	margin-bottom: 6px;
}
.marcas-heading {
	font-family: Gotham, sans-serif;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	font-weight: 800;
	color: #0f172a;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
}

.marcas-viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marcas-track {
	display: flex;
	align-items: center;
	gap: var(--omega-marcas-gap);
	width: max-content;
	animation: omega-marcas-marquee var(--omega-marcas-duracion) linear infinite;
	will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
	.omega-hw-marcas-pausable .marcas-viewport:hover .marcas-track { animation-play-state: paused; }
}
@keyframes omega-marcas-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marcas-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
	.marcas-viewport { -webkit-mask-image: none; mask-image: none; }
}

.marca-logo-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--omega-marcas-alto);
	width: calc(var(--omega-marcas-alto) * 1.87); /* misma proporción 172/92 de la propuesta */
	padding: 8px 14px;
	transition: transform 200ms cubic-bezier(0.23,1,0.32,1);
}
.marca-logo-item[aria-hidden="true"] { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
	.marca-logo-item:hover { transform: scale(1.1); }
}
.marca-logo-item:active { transform: scale(0.96); }
.marca-logo-item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	pointer-events: none;
}