feat(gyms): show gym logos in navbar buttons and brand; accept JPEG XL uploads

site/assets/css/style.css

@@ -437,14 +437,20 @@ section[id] {
 
 .gym-switch-btn { display: inline-flex; align-items: center; gap: .5rem; }
 
-/* The logo is a mask filled with the text colour, so any single-colour logo
-   follows the button (brand colour, hover state, light or dark brand). */
+/* With a logo the button shows the gym's wordmark in its own colours on a
+   light face, framed by the brand colour; the name is the image's alt. The
+   hover face stays light too, so dark parts of the logo never vanish. */
+.gym-switch-btn--logo {
+  --btn-face: #fff;
+  background: #fff;
+  padding: 4px 12px;
+}
 .gym-switch-logo {
-  height: 1.4em;
-  aspect-ratio: 1;
-  background-color: currentColor;
-  -webkit-mask: var(--logo) center / contain no-repeat;
-  mask: var(--logo) center / contain no-repeat;
+  display: block;
+  height: 30px;
+  width: auto;
+  max-width: 130px;
+  object-fit: contain;
 }
 
 /* ── Button hover: the same spinning edge as the Mensalidades cards ───────────