fix(header): fit the header on narrow phones after the language selector

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

components/LanguageSelector.jsx

@@ -60,7 +60,7 @@ export default function LanguageSelector() {
 			<button
 				type="button"
 				onClick={() => setOpen(!open)}
-				className="flex h-11 min-w-[44px] items-center gap-1.5 rounded-full border border-line bg-surface px-3 text-sm font-semibold text-ink transition-colors hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-accent"
+				className="flex h-11 min-w-[44px] items-center justify-center gap-1.5 rounded-full border border-line bg-surface px-2.5 text-sm sm:px-3 font-semibold text-ink transition-colors hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-accent"
 				aria-haspopup="listbox"
 				aria-expanded={open}
 				aria-label={
@@ -84,10 +84,10 @@ export default function LanguageSelector() {
 						: `Idioma: ${currentLocale.label}`
 				}
 			>
-				<Globe className="h-4 w-4 text-muted" aria-hidden="true" />
+				<Globe className="hidden h-4 w-4 text-muted sm:block" aria-hidden="true" />
 				<span className="font-semibold">{currentLocale.short}</span>
 				<ChevronDown
-					className={`h-3 w-3 text-muted transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+					className={`hidden h-3 w-3 text-muted transition-transform duration-200 sm:block ${open ? "rotate-180" : ""}`}
 					aria-hidden="true"
 				/>
 			</button>