/* ==========================================================================
   Top bar — Línea oscura (grafito) sobre el header con teléfono, email,
   ubicación y switcher de idioma. Mobile: empaquetada y compacta.
   ========================================================================== */

.top-bar {
	background: var(--color-graphite);
	color: var(--color-cream);
	font-size: var(--fz-topbar);
	letter-spacing: 0.02em;
	position: relative;
	z-index: var(--z-top-bar);
}

.top-bar__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 10px var(--container-pad-x);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3) var(--space-5);
}

.top-bar__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	align-items: center;
}

.top-bar__link {
	color: rgba(245, 239, 230, 0.85);
	transition: color var(--transition-fast);
}

.top-bar__link:hover,
.top-bar__link:focus-visible {
	color: var(--color-gold);
}

.top-bar__location {
	color: rgba(245, 239, 230, 0.5);
}

/* Separador visual entre items via CSS (regla del brief). */
.top-bar__contact > * + *::before {
	content: "·";
	color: rgba(245, 239, 230, 0.3);
	margin-right: var(--space-5);
}

.top-bar__lang {
	display: flex;
	align-items: center;
	gap: 2px;
	font-weight: 500;
}

.top-bar__lang-link {
	padding: 2px 8px;
	border-radius: var(--radius-tag);
	color: rgba(245, 239, 230, 0.85);
	transition: color var(--transition-fast);
}

.top-bar__lang-link.is-active {
	color: var(--color-gold);
}

.top-bar__lang-link:hover,
.top-bar__lang-link:focus-visible {
	color: var(--color-gold);
}

.top-bar__lang-sep {
	color: rgba(245, 239, 230, 0.3);
}

@media (max-width: 640px) {
	.top-bar__location {
		display: none;
	}
}