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/App.tsx

@@ -1,10 +1,9 @@
+import { lazy, Suspense } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { AuthProvider, useAuth } from "./lib/auth";
-import { LoginPage } from "./pages/LoginPage";
+import type { User } from "../shared/types";
 import { AppShell } from "./components/AppShell";
 import { AdminShell } from "./components/AdminShell";
-import { DashboardPage } from "./pages/DashboardPage";
-import { CalendarPage } from "./pages/CalendarPage";
 import { EmployeesPage } from "./pages/EmployeesPage";
 import { ServicesPage } from "./pages/ServicesPage";
 import { ClientsPage } from "./pages/ClientsPage";
@@ -19,28 +18,90 @@ import { AdminBusinessesPage } from "./pages/admin/AdminBusinessesPage";
 import { AdminBusinessDetailPage } from "./pages/admin/AdminBusinessDetailPage";
 import BookingPage from "./pages/public/BookingPage";
 
-function Protected() {
-  const { user, loading } = useAuth();
-  if (loading) {
-    return (
-      <div className="flex h-screen items-center justify-center bg-[#f6f7fb]">
-        <div className="flex flex-col items-center gap-3 text-slate-500">
-          <div className="h-9 w-9 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
-          <span className="text-sm font-medium">Cargando AgendaMax…</span>
-        </div>
-      </div>
-    );
-  }
-  if (!user) return <LoginPage />;
+// Las dos páginas públicas van aparte del bundle principal por dos razones que
+// apuntan en direcciones opuestas, y por eso importan las dos: quien ya tiene
+// sesión nunca las ve y no debe descargarlas, y quien llega a la landing no debe
+// descargar FullCalendar ni recharts para leer una página de venta.
+//
+// El login tiene que ser lazy junto con la landing, no solo la landing: es el único
+// consumidor eager de framer-motion, y con él en el chunk de entrada Rollup mete
+// `lib/motion` ahí también. Eso obliga al chunk de la landing a importar el de
+// entrada, que a su vez arrastra `charts` y `calendar`. Medido: 39 kB gzip de
+// motion en cada carga del panel, más recharts y FullCalendar en la landing.
+const LandingPage = lazy(() => import("./pages/LandingPage"));
+const LoginPage = lazy(() =>
+  import("./pages/LoginPage").then((m) => ({ default: m.LoginPage }))
+);
 
-  const isAdmin = user.role === "admin";
+// Las dos únicas páginas que importan librerías pesadas: recharts (~111 KB gzip) y
+// FullCalendar (~76 KB gzip). Eager, viven en el chunk de entrada, que se descarga
+// en TODA visita — incluida la landing, que no grafica ni agenda nada. Su frontera
+// de Suspense está en el <Outlet> de AppShell.
+const DashboardPage = lazy(() =>
+  import("./pages/DashboardPage").then((m) => ({ default: m.DashboardPage }))
+);
+const CalendarPage = lazy(() =>
+  import("./pages/CalendarPage").then((m) => ({ default: m.CalendarPage }))
+);
+
+/** Destino del usuario según su rol. Única definición de la regla. */
+export function homePathFor(user: User): string {
+  if (user.role === "admin") return "/admin";
+  return user.role === "owner" ? "/dashboard" : "/calendar";
+}
+
+function Splash() {
+  return (
+    <div className="flex h-screen-safe items-center justify-center bg-[#f6f7fb]">
+      <div className="flex flex-col items-center gap-3 text-slate-500">
+        <div className="h-9 w-9 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
+        <span className="text-sm font-medium">Cargando AgendaMax…</span>
+      </div>
+    </div>
+  );
+}
+
+function AppRoutes() {
+  const { user, loading } = useAuth();
+  if (loading) return <Splash />;
+
+  const home = user ? homePathFor(user) : "/login";
+  const isAdmin = user?.role === "admin";
 
   return (
     <Routes>
-      {/* Admin routes */}
-      {isAdmin && (
+      {/* ---- Públicas ---- */}
+      <Route
+        path="/"
+        element={
+          user ? (
+            <Navigate to={home} replace />
+          ) : (
+            <Suspense fallback={<Splash />}>
+              <LandingPage />
+            </Suspense>
+          )
+        }
+      />
+      <Route
+        path="/login"
+        element={
+          user ? (
+            <Navigate to={home} replace />
+          ) : (
+            <Suspense fallback={<Splash />}>
+              <LoginPage />
+            </Suspense>
+          )
+        }
+      />
+
+      {/* Sin sesión, cualquier otra ruta manda al login. */}
+      {!user && <Route path="*" element={<Navigate to="/login" replace />} />}
+
+      {/* ---- Admin de plataforma ---- */}
+      {user && isAdmin && (
         <Route element={<AdminShell />}>
-          <Route path="/" element={<Navigate to="/admin" replace />} />
           <Route path="/admin" element={<AdminOverviewPage />} />
           <Route path="/admin/businesses" element={<AdminBusinessesPage />} />
           <Route path="/admin/businesses/:id" element={<AdminBusinessDetailPage />} />
@@ -48,10 +109,9 @@ function Protected() {
         </Route>
       )}
 
-      {/* Business routes */}
-      {!isAdmin && (
+      {/* ---- Negocio ---- */}
+      {user && !isAdmin && (
         <Route element={<AppShell />}>
-          <Route path="/" element={<Navigate to={user.role === "owner" ? "/dashboard" : "/calendar"} replace />} />
           {user.role === "owner" ? (
             <Route path="/dashboard" element={<DashboardPage />} />
           ) : (
@@ -67,9 +127,9 @@ function Protected() {
           {user.role === "owner" && <Route path="/cash" element={<CashPage />} />}
           {user.role === "owner" && <Route path="/notifications" element={<NotificationsPage />} />}
           {user.role === "owner" && <Route path="/settings" element={<SettingsPage />} />}
-          {/* Block business users from admin */}
-          <Route path="/admin/*" element={<Navigate to="/" replace />} />
-          <Route path="*" element={<Navigate to={user.role === "owner" ? "/dashboard" : "/calendar"} replace />} />
+          {/* La autorización real vive en los middlewares del servidor; esto es UX. */}
+          <Route path="/admin/*" element={<Navigate to={home} replace />} />
+          <Route path="*" element={<Navigate to={home} replace />} />
         </Route>
       )}
     </Routes>
@@ -79,8 +139,16 @@ function Protected() {
 export default function App() {
   return (
     <Routes>
+      {/* Reservas públicas: fuera del AuthProvider a propósito, no asumas usuario. */}
       <Route path="/b/:slug" element={<BookingPage />} />
-      <Route path="*" element={<AuthProvider><Protected /></AuthProvider>} />
+      <Route
+        path="*"
+        element={
+          <AuthProvider>
+            <AppRoutes />
+          </AuthProvider>
+        }
+      />
     </Routes>
   );
 }