/* ============================================
   LA APP SE MUEVE SOLO DE ARRIBA ABAJO
   ============================================ */

/* Se notaba que esto es una web: se podía hacer pinza para alejar y luego
   arrastrar la pantalla en cualquier dirección. Las apps del móvil solo suben y
   bajan, y es lo que Alejandra echaba en falta: «me gustaría que solo se mueva
   en vertical como el resto de aplicaciones como ig».

   ── Por qué una hoja aparte y no theme.css ──────────────────────────────
   Cinco pantallas -acceso, index, demo, demo-cliente y presentation- no cargan
   theme.css: llevan sus propios estilos dentro. Metido allí, a esas cinco no
   les llegaría. Aquí va con su <link> propio, al lado de js/solo-en-vertical.js,
   y las dos piezas viajan juntas a las 31 pantallas.

   ── Por qué clip y no hidden ────────────────────────────────────────────
   `overflow-x: hidden` convierte la página en un contenedor de scroll y DESPEGA
   la barra de arriba (.header, position: sticky, que está en 20 pantallas).
   Comprobado en el navegador: con `hidden` la barra se iba a top -400 al bajar;
   con `clip` se queda en 0. `clip` recorta sin crear contenedor de scroll.

   ── Por qué pan-x pan-y y no none ───────────────────────────────────────
   `none` quitaría la pinza, sí, pero también el deslizar, y el carrusel de
   opciones de cada comida se desliza de lado a propósito. `pan-x pan-y` deja
   subir, bajar y deslizar, y quita la pinza y el doble-toque que hace zoom.

   En iPhone esto no basta: Safari se salta `user-scalable=no` desde iOS 10. De
   eso se encarga js/solo-en-vertical.js. */

html,
body {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
}

/* El destello gris al tocar un botón es otra cosa que delata al navegador. */
body {
  -webkit-tap-highlight-color: transparent;
}