feat: public landing page with magic login, brand palette and demo build flag

Adds a public funnel landing at `/` and moves the login to `/login`, rebuilt
around the panel's own colors instead of an invented palette.

Landing (`src/components/landing/`, one section per file, no props):
- Seven funnel sections composed by `LandingPage`. The hero's eight swatches are
  literally `PIE_COLORS` from `DashboardPage`, the same hex values the seed hands
  to avatars and services, so "your colors become your numbers" is literal.
- `BrandMark` becomes the single source for the logo, replicating
  `public/favicon.svg`. Blue is the action surface, orange only ever marks.
- `NotebookVisual` is the one deliberate exception to the palette: it is what the
  product replaces.
- Copy drops all system vocabulary; motion comes from `src/lib/motion.ts` with a
  single easing, and reduced-motion resolves `initial` to the final state so a
  never-firing `whileInView` cannot leave a section invisible forever.

Routing and bundle:
- `homePathFor` is the single definition of each role's destination.
- Landing, login, dashboard and calendar load lazily. Eager, the login dragged
  framer-motion (~40 KB gz) into every panel load and the landing downloaded
  recharts + FullCalendar (~187 KB gz) without charting anything. `clsx` is
  pinned to the `react` chunk because Rollup otherwise assigns it to `charts`,
  making the entry import 111 KB gz for a 200-byte utility.

Responsiveness (iPhone/iPad), verified with `npm run audit:responsive`:
- No touch form field below 16px, `dvh` height utilities, safe-area insets, and
  40px touch targets keyed off `pointer: coarse` rather than `sm:`.
- New `.ld-gutter`: `.safe-x` lives outside `@layer` and beats Tailwind's `px-*`,
  so it left the login's side padding at 0 on anything but an iPhone in
  landscape. No overflow check could see it — there was no overflow, just zero
  margin. The audit now guards it with a `gutter` check.
- `shell-height` no longer fires on pages that legitimately scroll; the static
  `raw-viewport-unit` scan covers those instead.

Production build:
- The Dockerfile now sets `VITE_DEMO_UI=1` as a build arg. `DEMO` is a build-time
  constant, so without it Vite eliminated the magic login and the "Ver como…"
  switcher: the deployed landing promised "no registration" and led to an empty
  form. Verified by building both ways and diffing the bundle.
- Service worker cache bumped to v2 so the orphaned pre-landing chunks get purged
  from returning visitors' caches.

Verified: typecheck clean; unit 39/39, e2e 33/33, admin 17/17, booking 12/12,
landing 13/13 (WebKit), PWA passed against the real production build.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/lib/motion.ts

@@ -0,0 +1,38 @@
+import type { Transition, Variants } from "framer-motion";
+
+/**
+ * ease-out-expo. Un solo easing en toda la landing: es lo que produce la
+ * sensación de que los elementos "pesan algo y frenan solos", y mezclar curvas
+ * es exactamente lo que hace que una landing se sienta improvisada.
+ */
+export const EASE_EXPO = [0.16, 1, 0.3, 1] as const;
+
+export const baseTransition: Transition = { duration: 0.7, ease: EASE_EXPO };
+
+/**
+ * Reveal vertical. `reduced` colapsa el estado inicial al final: NO acorta la
+ * transición, la elimina. Si `hidden` dejara `opacity: 0` cuando el usuario pide
+ * menos movimiento, el contenido quedaría invisible para siempre porque la
+ * animación que lo revela nunca se dispara.
+ */
+export function revealUp(reduced: boolean, distance = 24): Variants {
+  return {
+    hidden: reduced ? { opacity: 1, y: 0 } : { opacity: 0, y: distance },
+    show: { opacity: 1, y: 0, transition: baseTransition },
+  };
+}
+
+/** Contenedor que escalona a sus hijos. Con movimiento reducido, stagger 0. */
+export function revealStagger(reduced: boolean, stagger = 0.08): Variants {
+  return {
+    hidden: {},
+    show: { transition: { staggerChildren: reduced ? 0 : stagger } },
+  };
+}
+
+/**
+ * Props de viewport compartidas para `whileInView`. Una sola pasada (`once`), con
+ * margen negativo para que el reveal arranque cuando la sección ya entró de
+ * verdad y no en el instante en que su borde roza la pantalla.
+ */
+export const inView = { once: true, margin: "-12% 0px -12% 0px" } as const;

src/lib/useBreakpoint.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Tres tamaños, alineados con los breakpoints del CSS del calendario:
+ *   phone   <= 640px    (iPhone 12: 390, iPhone 16 Pro Max: 440)
+ *   tablet  641-1024px  (iPad mini: 744, iPad 10.9": 820, iPad Pro portrait: 1024)
+ *   desktop >= 1025px   (iPad landscape: 1180, iPad Pro landscape: 1366)
+ *
+ * El límite de tablet incluye 1024 a propósito: un iPad Pro en portrait mide justo
+ * 1024px y, descontando la barra lateral, deja ~712px para el calendario. Con 7
+ * columnas son ~100px por día, y con dos citas solapadas los títulos quedan en
+ * "A...". No coincide con el `lg:` de Tailwind (también 1024), así que a 1024px hay
+ * barra lateral fija Y vista de 3 días: es justo lo que se busca en ese equipo.
+ */
+export type Breakpoint = "phone" | "tablet" | "desktop";
+
+const PHONE = "(max-width: 640px)";
+const TABLET = "(min-width: 641px) and (max-width: 1024px)";
+
+function currentBreakpoint(): Breakpoint {
+  if (typeof window === "undefined") return "desktop";
+  if (window.matchMedia(PHONE).matches) return "phone";
+  if (window.matchMedia(TABLET).matches) return "tablet";
+  return "desktop";
+}
+
+export function useBreakpoint(): Breakpoint {
+  const [bp, setBp] = useState<Breakpoint>(currentBreakpoint);
+
+  useEffect(() => {
+    const lists = [window.matchMedia(PHONE), window.matchMedia(TABLET)];
+    const onChange = () => setBp(currentBreakpoint());
+    lists.forEach((l) => l.addEventListener("change", onChange));
+    // Al rotar un iPad se cruza de 820 a 1180 y los media queries ya lo cubren,
+    // pero en iOS el evento de orientación llega antes de que se reasienten las
+    // medidas; re-evaluamos para no quedar con el layout de la orientación previa.
+    window.addEventListener("orientationchange", onChange);
+    return () => {
+      lists.forEach((l) => l.removeEventListener("change", onChange));
+      window.removeEventListener("orientationchange", onChange);
+    };
+  }, []);
+
+  return bp;
+}

src/lib/useReducedMotion.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+const QUERY = "(prefers-reduced-motion: reduce)";
+
+/**
+ * `true` cuando el sistema pide menos movimiento. Se suscribe a los cambios: en
+ * iOS la preferencia se activa desde Ajustes sin recargar la pestaña, así que
+ * leerla una sola vez al montar dejaría la landing animando de todas formas.
+ */
+export function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(() => window.matchMedia(QUERY).matches);
+
+  useEffect(() => {
+    const mq = window.matchMedia(QUERY);
+    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);
+    mq.addEventListener("change", onChange);
+    // Resincroniza: la preferencia pudo cambiar entre el render inicial y el efecto.
+    setReduced(mq.matches);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+
+  return reduced;
+}

src/lib/useSidebarCollapsed.ts

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from "react";
+
+const KEY = "ap_sidebar_collapsed";
+
+function read(): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(KEY) === "1";
+  } catch {
+    return false; // Safari en modo privado puede lanzar al leer localStorage.
+  }
+}
+
+/**
+ * Colapso de la barra lateral en pantallas grandes (lg+), recordado entre
+ * sesiones. En iPad Pro portrait (1024px) la barra expandida se lleva 256px de
+ * los 1024 disponibles, así que poder colapsarla a solo iconos es lo que más
+ * ancho devuelve al contenido.
+ */
+export function useSidebarCollapsed() {
+  const [collapsed, setCollapsed] = useState(read);
+
+  const toggle = useCallback(() => setCollapsed((c) => !c), []);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(KEY, collapsed ? "1" : "0");
+    } catch {
+      /* sin persistencia si el almacenamiento está bloqueado */
+    }
+  }, [collapsed]);
+
+  // Mantiene ambos shells (app y admin) en sincronía si se abren en dos pestañas.
+  useEffect(() => {
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === KEY && e.newValue !== null) setCollapsed(e.newValue === "1");
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+
+  return { collapsed, toggle };
+}