/* ==========================================================================
   Sección "Marcas que trabajamos" — Pisos Gómez
   Va pegada abajo de "Somos fábrica" (mismo bloque, ver empresa.php).
   Fondo claro a propósito: separa esta tira del negro de .pg-empresa que
   tiene arriba y da un respiro antes de seguir bajando.
   Los cinco logos ya vienen resueltos como siluetas monocromáticas (una sola
   tinta #2d2d2d, ver marcas.php): por eso acá NO se recolorean por CSS. Se
   los dejó en una sola tinta para que el conjunto —tres logos blancos, uno
   rojo y uno a color— se leyera como una pared pareja y sin el rojo que la
   marca Gómez no usa.
   Todo prefijado con .pg-marcas para no chocar con Betheme.
   ========================================================================== */

.pg-marcas {
	--pg-mostaza-oscuro: #a97f13;
	--pg-borde: rgba(17, 17, 17, .1);
	--pg-ancho: 1220px;
	--pg-gutter: clamp(20px, 5vw, 40px);

	position: relative;
	background: #f7f6f2;
	color: #111111;
	padding: clamp(36px, 5vw, 56px) var(--pg-gutter);
	border-top: 1px solid var(--pg-borde);
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.pg-marcas__caja {
	max-width: var(--pg-ancho);
	margin: 0 auto;
}

.pg-marcas__volanta {
	margin: 0 0 28px;
	text-align: center;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pg-mostaza-oscuro);
}

/* --- la tira --------------------------------------------------------------
   En escritorio: fila estática, los 5 logos entran sin desplazarse.
   La lista "copia" (decorativa, aria-hidden) queda oculta.
   ---------------------------------------------------------------------- */

.pg-marcas__pista {
	overflow: hidden;
}

/* La cinta que se mueve. En escritorio es un bloque normal al 100%: la lista
   real de adentro reparte los 5 logos con space-between y la copia queda
   oculta. En celular (ver más abajo) se convierte en la marquesina animada. */
.pg-marcas__mover {
	width: 100%;
}

.pg-marcas__lista {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 24px;
	column-gap: clamp(20px, 4vw, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-marcas__lista--copia {
	display: none;
}

.pg-marcas__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* !important: Smush (WPMU DEV) reescribe estas <img> al hacer el lazy-load
   e inyecta su propio tamaño vía variables CSS (--smush-placeholder-width /
   --smush-placeholder-aspect-ratio) leídas por SU hoja de estilos, que
   empata en especificidad con esta regla y a veces carga después. Sin el
   !important los logos se ven a su tamaño real (747×310), gigantes y uno
   debajo del otro. Confirmado en producción el 19/08/2026. */
.pg-marcas__item img {
	display: block !important;
	height: 58px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

/* --- celular: la marquesina infinita --------------------------------------
   Marquee de CSS puro, sin JS ni librerías. La ventana (.__pista) recorta; la
   cinta (.__mover) lleva la lista real + una copia idéntica y se desliza en
   bucle un -50%. Como adentro va lista+copia, al llegar a -50% la copia quedó
   justo donde arrancó la lista: no hay corte, fluye continuo. La separación
   entre logos (44px) es igual dentro de cada lista y en la junta entre las dos
   (el padding-right de la primera), así que el paso es parejo en todo el loop.
   ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	.pg-marcas {
		padding-left: max(var(--pg-gutter), 20px);
		padding-right: max(var(--pg-gutter), 20px);
	}

	.pg-marcas__pista {
		display: flex;
		width: 100%;
		/* Desvanece los bordes en vez de cortar el logo a la mitad. */
		mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	}

	/* La cinta entera es lo que se anima (no cada lista por separado): así el
	   bucle es continuo y no se ve el reinicio. */
	.pg-marcas__mover {
		display: flex;
		flex: none;
		width: max-content;
		animation: pg-marcas-desliza 30s linear infinite;
	}

	.pg-marcas__lista,
	.pg-marcas__lista--copia {
		display: flex;
		flex: none;
		flex-wrap: nowrap;
		width: max-content;
		justify-content: flex-start;
		column-gap: 44px;
		padding-right: 44px; /* la junta entre lista y copia: mismo paso que adentro */
		margin: 0;
	}

	.pg-marcas__lista--copia {
		display: flex; /* se anula el "display:none" de escritorio */
	}

	.pg-marcas__item {
		width: auto; /* cada logo con su ancho real; los lienzos ya traen aire */
	}

	.pg-marcas__item img {
		height: 46px !important;
	}
}

@keyframes pg-marcas-desliza {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* la mitad = el ancho de una lista */
}

/* Reducir movimiento: se frena la marquesina y se deja deslizar a mano,
   mostrando solo los 5 logos reales (sin la copia). */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {

	.pg-marcas__pista {
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.pg-marcas__mover {
		animation: none;
		width: max-content;
	}

	.pg-marcas__lista {
		scroll-snap-align: start;
	}

	.pg-marcas__lista--copia {
		display: none;
	}

	.pg-marcas__item {
		scroll-snap-align: start;
	}
}