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/components/landing/HeroSection.tsx

@@ -0,0 +1,119 @@
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { ArrowRight, ChevronDown } from "lucide-react";
+import { EASE_EXPO, revealStagger, revealUp } from "../../lib/motion";
+import { useReducedMotion } from "../../lib/useReducedMotion";
+import { SwatchFanVisual } from "./visuals/SwatchFanVisual";
+import { FloatingMomentsLayer, MomentsStack } from "./visuals/FloatingMomentsVisual";
+
+export function HeroSection() {
+  const reduced = useReducedMotion();
+
+  return (
+    <section
+      data-ld-section
+      className="landing-papel relative isolate overflow-hidden pt-24 ld-section sm:pt-28"
+    >
+      {/* Lavados de color. Los tres tonos son los que el panel ya usa como fondo suave:
+          brand-50 (#eef4ff, el "hoy" del calendario), orange-50 (#fff7ed) y
+          emerald-50 (#ecfdf5). Van detrás de todo y no llevan texto, así que no
+          compiten con la lectura. */}
+      <div className="pointer-events-none absolute inset-0 -z-10">
+        <div
+          className="absolute -left-24 -top-24 h-[26rem] w-[26rem] rounded-full opacity-90 blur-3xl"
+          style={{ background: "radial-gradient(circle, #eef4ff 0%, transparent 70%)" }}
+        />
+        <div
+          className="absolute -right-20 top-24 h-[30rem] w-[30rem] rounded-full opacity-85 blur-3xl"
+          style={{ background: "radial-gradient(circle, #fff7ed 0%, transparent 70%)" }}
+        />
+        <div
+          className="absolute bottom-0 left-1/3 h-[24rem] w-[24rem] rounded-full opacity-80 blur-3xl"
+          style={{ background: "radial-gradient(circle, #ecfdf5 0%, transparent 70%)" }}
+        />
+      </div>
+
+      <div className="ld-wrap grid grid-cols-1 items-center gap-14 lg:grid-cols-[1.05fr_1fr] lg:gap-10">
+        {/* ---- Columna de texto ---- */}
+        <motion.div initial="hidden" animate="show" variants={revealStagger(reduced, 0.09)}>
+          <motion.p
+            className="ld-eyebrow mb-5 inline-flex items-center gap-2 rounded-full bg-white/80 py-2 pl-2 pr-4 ring-1 ring-black/[0.05]"
+            variants={revealUp(reduced, 12)}
+          >
+            {/* Los cuatro primeros de la paleta del panel, en su orden. */}
+            <span className="flex gap-1" aria-hidden="true">
+              {["var(--ld-azul)", "var(--ld-naranja)", "var(--ld-esmeralda)", "var(--ld-purpura)"].map(
+                (c) => (
+                  <span key={c} className="h-3 w-3 rounded-full" style={{ background: c }} />
+                )
+              )}
+            </span>
+            Salones · Barberías · Spas
+          </motion.p>
+
+          <h1 data-ld-hero-title className="ld-display">
+            <motion.span className="block" variants={revealUp(reduced, 26)}>
+              Tu agenda llena.
+            </motion.span>
+            <motion.span className="ld-gradient-text block" variants={revealUp(reduced, 26)}>
+              Tu domingo libre.
+            </motion.span>
+          </h1>
+
+          <motion.p className="ld-lead mt-7 max-w-lg" variants={revealUp(reduced)}>
+            Guarda la libreta y la calculadora. AgendaMax te dice quién viene hoy, quién dejó de
+            venir y cuánto llevas ganando este mes. Todo en una pantalla.
+          </motion.p>
+
+          <motion.div
+            className="mt-9 grid grid-cols-1 gap-3 sm:flex sm:items-center"
+            variants={revealUp(reduced)}
+          >
+            <Link to="/login" className="ld-cta">
+              Entrar y probarlo
+              <ArrowRight className="h-4 w-4" />
+            </Link>
+            <a href="#dolor" className="ld-cta-ghost">
+              Ver cómo se ve
+              <ChevronDown className="h-4 w-4" />
+            </a>
+          </motion.div>
+
+          <motion.p
+            className="mt-5 text-[0.9rem] font-semibold"
+            style={{ color: "var(--ld-muted)" }}
+            variants={revealUp(reduced, 8)}
+          >
+            No pide tarjeta. No pide registro. Entras y ya está adentro.
+          </motion.p>
+        </motion.div>
+
+        {/* ---- Columna del muestrario ----
+            El padding vertical en lg no es decorativo: reserva la banda superior e
+            inferior donde se posan los avisos flotantes. Sin él se estrellan contra
+            el abanico, que es la parte más ancha del dibujo. */}
+        <div className="relative lg:py-16">
+          <SwatchFanVisual />
+          {/* Los avisos flotan solo cuando hay espacio real alrededor del abanico.
+              Por debajo de lg se apilan bajo él: superpuestos en 390px taparían el
+              muestrario completo. */}
+          <FloatingMomentsLayer className="hidden lg:block" />
+          <MomentsStack className="mt-8 lg:hidden" />
+        </div>
+      </div>
+
+      {/* Indicador de scroll: respira, y se apaga con movimiento reducido. */}
+      {!reduced && (
+        <motion.div
+          className="mx-auto mt-14 flex w-fit items-center gap-2 text-[0.8rem] font-bold uppercase tracking-widest"
+          style={{ color: "var(--ld-muted)" }}
+          animate={{ y: [0, 7, 0], opacity: [0.5, 1, 0.5] }}
+          transition={{ duration: 2.6, repeat: Infinity, ease: EASE_EXPO }}
+        >
+          Sigue bajando
+          <ChevronDown className="h-4 w-4" />
+        </motion.div>
+      )}
+    </section>
+  );
+}