.ohl-lang { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; letter-spacing: .06em; }
/* .68, not .55: the inactive language is real text, and white at .55 over
   --azul lands at 4.29:1 — under AA. .68 clears it at 5.89:1 (more over the
   footer's darker --azul-hondo) while still reading as the quieter of the two. */
.ohl-lang__item { color: inherit; text-decoration: none; opacity: .68; transition: opacity .2s, color .2s; }
.ohl-lang__item.is-current { opacity: 1; }
.ohl-lang__item:hover { opacity: 1; color: var(--amarillo, #faff00); }
.ohl-lang__sep { opacity: .35; }

/* .footer__links is a nowrap, centered flex row (theme styles.css, not
   touched here) that already fills the available width on narrow viewports.
   A 3rd inline child overflows it, and .footer has overflow:hidden, so the
   email link gets visually clipped. Wrapping the row would grow the page
   height and shift everything below it (its own regression, worse than the
   one it fixes). Instead, take the footer switcher out of flow on mobile —
   it does not affect .footer__links' width/centering or the page height —
   and drop it into the existing whitespace above .footer__line. */
@media (max-width: 480px) {
	.ohl-lang--footer {
		position: absolute;
		left: 50%;
		top: 100%;
		margin-top: .5rem;
		transform: translateX(-50%);
	}
}