/* ═══════════════════════════════════════════════════════════════════
   FABRICANTES v2 · retícula de logos (desde 761 px) y carrusel (hasta 760 px)
   Una sola lista: .fb__list. En la retícula cada logo sale una vez; en
   móvil la misma lista se coloca en cuatro filas y se desliza en bucle.

   - Prefijo fb / fb__ para no chocar con .makers__rows / __row / __track
     de styles.css, que sigue usando index.html.
   - Se carga después de styles.css, solo desde index-v2.html.
   - Lógica en js/fabricantes.js (copias para el bucle y aparición).
   ═══════════════════════════════════════════════════════════════════ */

/* Filas del carrusel móvil. Va fuera de la media query porque el JS lo lee
   al cargar para calcular cuántas copias hacen falta para el bucle. */
.fb__list {
	--rows:4;
}

/* ── logo: gris y atenuado; en color al pasar el ratón ── */
.fb img {
	width:100%;
	height:auto;
	aspect-ratio:3/2;
	object-fit:contain;
	filter:grayscale(1);
	opacity:.6;
	transition:filter .3s,opacity .3s;
}
.fb img:hover {
	filter:none;
	opacity:1;
}

/* ── retícula ── */
@media (min-width:761px) {
	.fb__list {
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		gap:12px 24px;
		padding-inline:var(--pad);
	}
	.fb__list > li {
		flex:0 0 120px;
	}
	/* copias del carrusel móvil: aquí sobran */
	.fb__list > li[aria-hidden] {
		display:none;
	}

	/* Aparición: el JS añade .is-wait (ocultos y 16 px más abajo, al instante,
	   sin transición) y un --d al azar en cada li; al entrar en pantalla añade
	   .is-in, que lleva el fundido y la subida (0,9 s). El retardo va en el li
	   y el hover en el img, así el hover no espera al retardo. */
	.fb__list.is-wait > li {
		opacity:0;
		transform:translateY(16px);
	}
	.fb__list.is-wait.is-in > li {
		opacity:1;
		transform:none;
		transition:opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s);
	}
}

/* ── carrusel móvil: cuatro filas, 4 logos a la vista en cada una ──
   La lista se llena por columnas de --rows logos (de arriba abajo). Con las
   copias que añade el JS, al llegar a -50 % la imagen es idéntica a la del
   principio y el bucle no tiene salto. */
@media (max-width:760px) {
	.fb {
		-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
		mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
	}
	.fb__list {
		--w:min(120px,calc(25vw - 16px));
		display:grid;
		grid-template-rows:repeat(var(--rows),auto);
		grid-auto-flow:column;
		grid-auto-columns:var(--w);
		gap:12px 16px;
		width:max-content;
		padding-right:16px;
	}
	/* filas 2 y 4 desplazadas medio logo */
	.fb__list > li:nth-child(even) {
		translate:calc((var(--w) + 16px) / -2) 0;
	}
	.fb__list[data-loop] {
		animation:fb-marquee 110s linear infinite;
	}
}
@keyframes fb-marquee {
	to {
		transform:translateX(-50%);
	}
}
@media (prefers-reduced-motion:reduce) {
	.fb__list[data-loop] {
		animation:none;
	}
}