.escudos-bar {
	position: fixed;
	top: 68px;
	left: 0;
	right: 0;
	z-index: 90;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
	padding: 10px 24px;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	overflow: visible;
}

.escudo {
	position: relative;
	display: inline-flex;
	cursor: default;
}

.escudo img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	opacity: 0.65;
	transition: opacity 0.2s ease, transform 0.2s ease;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

.escudo:hover img {
	opacity: 1;
	transform: scale(1.2);
}

/* Tooltip */
.escudo::after {
	content: attr(data-name);
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	white-space: nowrap;
	background: var(--color-surface-dynamic);
	color: var(--color-text);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 200;
}

.escudo:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
	.escudos-bar {
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-ms-overflow-style: none;
		gap: 10px;
		padding: 10px 16px;
	}
	.escudos-bar::-webkit-scrollbar {
		display: none;
	}
}