/* ============================================================
   Bloque "Colaboran" de la portada (entre el Club de Cigüeñas y
   el footer). Hereda el sistema visual de la franja de horario
   (.ecc-horario-bar en site.css): textura muro-pared con velo
   claro, tipografía Space Mono para la etiqueta, ancho interior
   1180px. Solo se carga en la portada (includes/colaboradores.php).

   La animación de marquesina es CSS pura y solo se activa cuando
   colaboradores.js añade .ecc-colab--marquee (logos desbordando el
   ancho). Sin JS: fila/cuadrícula estática centrada con enlaces.
   ============================================================ */

.ecc-colab {
	background: var(--ecc-hueso, #EFE6D8);
	background-image: linear-gradient(rgba(239, 230, 216, .85), rgba(239, 230, 216, .85)), url('../img/textura-muro-pared.jpg');
	background-size: cover;
	background-position: center;
	padding: 22px 24px 26px;
	/* Los bloques vecinos viven dentro de contenedores de Elementor con
	   padding:10px; este bloque se inyecta fuera de todo contenedor, así que
	   replica ese margen para medir igual que ellos (mismo gotcha que .ecc-djs). */
	margin: 10px;
	--ecc-colab-gap: 18px;
}

/* Fuera de la portada (agenda) no hay contenedores de Elementor que compensar:
   el bloque va a ancho completo como sus secciones vecinas. */
.ecc-colab--full { margin: 0; }

.ecc-colab__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.ecc-colab__titulo {
	margin: 0 0 18px;
	text-align: center;
	font-family: 'Space Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #5a5142;
}

/* Zona del carrusel. En modo marquesina recorta y funde los laterales con
   mask (funciona sobre el fondo con textura, cosa que un degradado opaco no). */
.ecc-colab__viewport {
	position: relative;
}

.ecc-colab__track {
	display: flex;
	justify-content: center;
}

.ecc-colab__set {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ecc-colab-gap);
}

/* La copia visual del bucle (creada por JS, aria-hidden) solo existe en
   modo marquesina. */
.ecc-colab__set--dup { display: none; }

.ecc-colab__item { margin: 0; }

/* Tarjeta neutra individual: caja común que normaliza la altura visual de
   logos con proporciones muy distintas, sin deformarlos ni recortarlos. */
.ecc-colab__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	min-width: 72px;
	padding: 0 20px;
	border-radius: 12px;
	transition: transform .2s, box-shadow .2s;
}

.ecc-colab__item--claro a {
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(27, 23, 18, .08);
}

/* Para logos blancos o muy claros (p. ej. versiones "white" oficiales). */
.ecc-colab__item--oscuro a {
	background: var(--ecc-noche, #1B1712);
	border: 1px solid rgba(27, 23, 18, .3);
}

.ecc-colab__item a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(27, 23, 18, .14);
}

.ecc-colab__item a:focus-visible {
	outline: 2px solid var(--ecc-hiedra, #4C6344);
	outline-offset: 3px;
}

.ecc-colab__img {
	display: block;
	max-height: 40px;
	max-width: 168px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ---------- Modo marquesina (activado por JS al desbordar) ---------- */

.ecc-colab--marquee .ecc-colab__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

.ecc-colab--marquee .ecc-colab__track {
	justify-content: flex-start;
	width: max-content;
	/* La duración exacta la fija colaboradores.js para mantener ~35 px/s
	   aunque cambie el número de logos (recorrido completo 25-45 s). */
	animation: ecc-colab-desfile var(--ecc-colab-dur, 35s) linear infinite;
	will-change: transform;
}

.ecc-colab--marquee .ecc-colab__set {
	flex: none;
	flex-wrap: nowrap;
	justify-content: flex-start;
	/* El hueco entre el final de un set y el comienzo de su copia debe medir
	   igual que el hueco entre logos: así el desplazamiento del 50% del track
	   (= un set + este padding) empalma sin salto visible. */
	padding-right: var(--ecc-colab-gap);
}

.ecc-colab--marquee .ecc-colab__set--dup { display: flex; }

/* Recorrido de izquierda a derecha: el track parte desplazado exactamente un
   período (un set + un hueco, en px — lo fija colaboradores.js, que también
   añade las copias necesarias) y avanza hacia la derecha hasta su posición
   natural; al reiniciar, la copia siguiente ocupa el mismo píxel: sin saltos. */
@keyframes ecc-colab-desfile {
	from { transform: translateX(calc(-1 * var(--ecc-colab-shift, 50%))); }
	to   { transform: translateX(0); }
}

/* Pausa: puntero encima, interacción táctil en curso o foco dentro. */
.ecc-colab--marquee .ecc-colab__viewport:hover .ecc-colab__track,
.ecc-colab--marquee .ecc-colab__viewport:active .ecc-colab__track,
.ecc-colab--marquee .ecc-colab__viewport:focus-within .ecc-colab__track {
	animation-play-state: paused;
}

/* Foco de TECLADO: además de pausar, el track vuelve a su posición natural
   (la animación se retira y con ella el transform) para que el set original
   — el único tabulable — quede alineado al borde visible y el enlace
   enfocado pueda verse; colaboradores.js ajusta el scroll interno si el set
   desborda. Con foco por ratón (:focus a secas) no aplica, para no mover el
   enlace justo cuando se está pulsando. */
.ecc-colab--marquee .ecc-colab__viewport:has(a:focus-visible) .ecc-colab__track {
	animation: none;
}

/* ---------- Movimiento reducido: sin animación, cuadrícula estática ---------- */

@media (prefers-reduced-motion: reduce) {
	.ecc-colab .ecc-colab__track {
		animation: none !important;
		width: auto;
		justify-content: center;
	}
	.ecc-colab .ecc-colab__set {
		flex-wrap: wrap;
		justify-content: center;
		padding-right: 0;
	}
	.ecc-colab .ecc-colab__set--dup { display: none !important; }
	.ecc-colab .ecc-colab__viewport {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
	.ecc-colab { padding: 18px 16px 22px; --ecc-colab-gap: 14px; }
	.ecc-colab__titulo { font-size: 13px; margin-bottom: 14px; }
	.ecc-colab__item a { height: 54px; padding: 0 14px; min-width: 60px; border-radius: 10px; }
	.ecc-colab__img { max-height: 32px; max-width: 132px; }
}

@media (max-width: 400px) {
	.ecc-colab__img { max-width: 116px; }
}