/* Cabecera en móvil — hoja compartida.
 *
 * Por qué existe: el 11-ago-2026 Giora reportó desde un Samsung que "las pestañas
 * del menú están muy pegadas a los bordes" y que "no reacciona al navegar".
 * Medido con el navegador a 360px, eran dos fallos distintos:
 *
 *   1. /en/ y el resto de páginas NO tenían ni una sola media query. Con el
 *      header en `justify-content: space-between` y sin envolver, el último
 *      enlace ("en") quedaba a -9px del borde: fuera de la pantalla, y la
 *      página scrolleaba en horizontal (369px de ancho en una de 360).
 *   2. Los enlaces medían 20px de alto. Android pide 48dp para algo que se
 *      toca con el dedo. Por eso "no reaccionaba": el toque caía fuera.
 *
 * Sólo la home en español tenía este bloque en línea. En vez de copiarlo siete
 * veces, vive aquí y cada página lo enlaza. El siguiente arreglo se hace una vez.
 *
 * Va enlazado DESPUÉS del <style> en línea de cada página para que gane sin
 * necesidad de !important.
 */

@media (max-width: 560px) {
  header.bar .wrap {
    height: auto;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .brand img {
    height: 40px;
  }

  .brand .wm {
    font-size: 20px;
  }

  /* El menú ocupa su propia línea y se centra, en vez de amontonarse contra un
     borde o salirse por el otro. */
  nav {
    font-size: 13px;
    gap: 20px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* 14px arriba y abajo sobre un texto de 21px = 49px de zona tocable, justo
     por encima de los 48dp que pide Android. El texto no cambia de tamaño. */
  nav a {
    padding: 14px 4px;
  }
}