/* Marquee — estilos del front
   Los valores que se editan desde el admin llegan como variables CSS. */

.marquee-gen {
	overflow: hidden;
	width: 100%;
	padding: 8px 0;
	font-family: var(--marquee-fuente, inherit);
	-webkit-user-select: none;
	user-select: none;
	/* Evita el resaltado azul al tocar en móvil */
	-webkit-tap-highlight-color: transparent;
}

.marquee-gen__pista {
	display: flex;
	width: max-content;
	gap: var(--marquee-separacion, 10px);
	animation: marquee-gen-desliza var(--marquee-velocidad, 52s) linear infinite;
	animation-direction: var(--marquee-direccion, normal);
}

/* Sólo donde hay un mouse de verdad. En pantallas táctiles el navegador
   simula el :hover y lo deja pegado tras el toque, lo que impediría
   reanudar la animación; ahí manda el toque, gestionado por JS. */
@media (hover: hover) {
	.marquee-gen:hover .marquee-gen__pista {
		animation-play-state: paused;
	}
}

.marquee-gen:focus-within .marquee-gen__pista {
	animation-play-state: paused;
}

.marquee-gen__grupo {
	display: flex;
	gap: var(--marquee-separacion, 10px);
	flex-shrink: 0;
	padding-right: var(--marquee-separacion, 10px);
}

.marquee-gen-pieza {
	width: var(--marquee-ancho, 210px);
	flex-shrink: 0;
	margin: 0;
}

.marquee-gen-pieza__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--marquee-proporcion, 3 / 4);
	object-fit: cover;
	border-radius: var(--marquee-radio, 10px);
}

.marquee-gen-pieza__enlace {
	display: block;
	text-decoration: none;
	color: inherit;
	/* El toque abre el enlace de inmediato, sin la espera de 300 ms */
	touch-action: manipulation;
}

/* La pieza entera responde al mouse: la imagen se levanta un poco
   y el título se subraya. Sólo al pasar por encima, nunca sola. */
.marquee-gen-pieza__enlace .marquee-gen-pieza__img {
	transition: transform .35s ease, filter .35s ease;
}

@media (hover: hover) {
	.marquee-gen-pieza__enlace:hover .marquee-gen-pieza__img {
		transform: scale(1.03);
		filter: brightness(.96);
	}

	.marquee-gen-pieza__enlace:hover .marquee-gen-pieza__pie {
		text-decoration: underline;
		text-underline-offset: 3px;
		text-decoration-thickness: 1px;
	}
}

.marquee-gen-pieza__enlace:focus-visible .marquee-gen-pieza__img {
	transform: scale(1.03);
	filter: brightness(.96);
}

.marquee-gen-pieza__enlace:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: var(--marquee-radio, 10px);
}

.marquee-gen-pieza__pie {
	font-family: var(--marquee-fuente, inherit);
	font-size: var(--marquee-pie-tamano, 14px);
	font-weight: var(--marquee-pie-peso, 400);
	color: var(--marquee-pie-color, inherit);
	letter-spacing: var(--marquee-pie-espaciado, 0);
	text-align: var(--marquee-pie-align, left);
	padding-top: 9px;
	line-height: 1.4;
}

@keyframes marquee-gen-desliza {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Quien tenga movimiento reducido activado ve el contenido quieto
   y puede desplazarlo a mano. */
@media (prefers-reduced-motion: reduce) {
	.marquee-gen__pista {
		animation: none;
	}
	.marquee-gen {
		overflow-x: auto;
	}
	.marquee-gen-pieza__enlace .marquee-gen-pieza__img {
		transition: none;
	}
	.marquee-gen-pieza__enlace:hover .marquee-gen-pieza__img {
		transform: none;
	}
}

/* Aviso que sólo ve quien administra el sitio */
.mqgen-aviso {
	padding: 16px;
	border: 1px dashed currentColor;
	border-radius: 6px;
	opacity: .7;
	font-size: .95rem;
}

/* Móvil: el título se aprieta un poco al borde de la pieza */
@media (max-width: 600px) {
	.marquee-gen-pieza__pie {
		padding-top: 7px;
		line-height: 1.35;
	}
}