Idiomas en un desplegable con un globo, y 12 idiomas más

- La cabecera cambia los botones por un desplegable (<details>, sin
  JavaScript) con un globo y el nombre de cada idioma en su lengua.
- Nuevos: català, euskara, galego, Deutsch, Nederlands, svenska, polski,
  ελληνικά, Türkçe, العربية (de derecha a izquierda), हिन्दी y 中文, en
  takethestreet.net y tomalacalle.net. En total, 17 idiomas.
- hreflang con todos los idiomas en cada página.

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

sites/tomalacalle/css/web.css

@@ -25,9 +25,17 @@ img { max-width: 100%; }
 .cab h1 { margin: 0; line-height: 0; }
 .firma { display: block; line-height: 0; }
 .firma .logotipo { height: 72px; }
-.idiomas { justify-self: end; display: flex; gap: 6px; font: 20px/1 var(--bt); letter-spacing: .04em; }
-.idiomas a { border: var(--bd); border-radius: 6px; padding: 4px 9px 2px; text-decoration: none; box-shadow: 3px 3px 0 var(--fg); }
-.idiomas a[aria-current] { background: var(--fg); color: var(--bg); box-shadow: 3px 3px 0 var(--neon); }
+.idiomas { justify-self: end; position: relative; font: 22px/1 var(--bt); letter-spacing: .04em; }
+.idiomas summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; border: var(--bd); border-radius: 8px; padding: 5px 12px 3px 8px; background: var(--fg); color: var(--bg); box-shadow: 3px 3px 0 var(--neon); user-select: none; }
+.idiomas summary::-webkit-details-marker { display: none; }
+.idiomas summary svg { width: 26px; height: 26px; margin-top: -2px; }
+.idiomas summary::after { content: ""; border: 6px solid transparent; border-top-color: currentColor; margin: 4px 0 0 2px; }
+.idiomas[open] summary::after { border-top-color: transparent; border-bottom-color: currentColor; margin: -6px 0 0 2px; }
+.idiomas ul { position: absolute; right: 0; top: calc(100% + 10px); z-index: 1000; display: grid; grid-template-columns: repeat(2, max-content); gap: 2px 6px; margin: 0; padding: 8px; list-style: none; background: var(--bg); border: var(--bd); border-radius: 10px; box-shadow: 5px 5px 0 var(--fg); font: 16px/1.2 var(--txt); letter-spacing: 0; }
+.idiomas li a { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
+.idiomas li a b { font: 400 16px/1 var(--bt); letter-spacing: .05em; color: var(--neon); min-width: 1.6em; }
+.idiomas li a:hover, .idiomas li a:focus { background: #f2f2f2; }
+.idiomas li a[aria-current] { background: var(--fg); color: var(--bg); }
 
 .portada { padding: 0 0 24px; border-bottom: var(--bd); text-align: center; overflow: hidden; }
 h1 { margin: 0; font: 400 clamp(52px, 8vw, 112px)/.92 var(--bt); text-transform: uppercase; }
@@ -153,8 +161,8 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp
 @media (max-width: 640px) {
   .acciones { flex-direction: column; align-items: stretch; gap: 14px; max-width: 460px; margin: 18px auto 0; }
   .bt { display: block; font-size: 30px; padding: 18px 16px 15px; text-align: center; }
-  .idiomas { gap: 8px; font-size: 22px; }
-  .idiomas a { padding: 8px 12px 6px; }
+  .idiomas summary { padding: 8px 14px 6px 10px; }
+  .idiomas ul { right: auto; left: 50%; transform: translateX(-50%); }
   .cifras { gap: 8px 18px; }
   .cifras b { font-size: 44px; }
   .cifras span { font-size: 17px; }
@@ -177,3 +185,7 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp
   .mapa-osm.vivo { height: 70vh; box-shadow: 4px 4px 0 var(--fg); }
   .saltos button { font-size: 22px; padding: 9px 14px 7px; }
 }
+
+/* De derecha a izquierda (árabe): el desplegable se abre hacia dentro y las etiquetas y cuentas se leen en su orden */
+[dir="rtl"] .idiomas ul { right: auto; left: 0; }
+.tags span, .etiquetas span, h3 small { unicode-bidi: isolate; direction: ltr; }