docs: add redesign references and agent guidance

docs/stitch_mnq_premium_landing_page/design.md

@@ -0,0 +1,70 @@
+---
+name: MNQ Catering y Evento
+colors:
+  primary: "#D4AF37"
+  secondary: "#A67C1B"
+  surface: "#FFFDF8"
+  on-surface: "#1F1A17"
+  error: "#B3261E"
+typography:
+  body-md:
+    fontFamily: "Inter"
+    fontSize: "16px"
+    fontWeight: 400
+rounded:
+  sm: 6px
+  md: 12px
+  lg: 20px
+---
+
+# Design System
+
+## Overview
+
+MNQ debe sentirse como una marca de eventos premium contemporánea: clara, refinada, editorial y aspiracional. La experiencia visual tiene que transmitir elegancia sin pesadez, con una base marfil/blanca, acentos dorados y un ritmo visual aireado.
+
+## Colors
+
+- **Primary** (`#D4AF37`): dorado premium para detalles de marca, botones principales, subrayados y acentos de jerarquía.
+- **Secondary** (`#A67C1B`): dorado más profundo para hover states, bordes destacados y variaciones sofisticadas del acento principal.
+- **Surface** (`#FFFDF8`): fondo general claro, cálido y editorial; debe sostener una sensación premium, no clínica.
+- **On-surface** (`#1F1A17`): texto principal, títulos y elementos de contraste sobre superficies claras.
+- **Error** (`#B3261E`): validaciones y feedback crítico en formularios.
+
+## Typography
+
+- **Headlines**: combinación editorial elegante; títulos con alta presencia visual y espaciado generoso.
+- **Body**: `Inter`, peso 400–500, con tamaño base de `16px` y line-height cómodo para lectura prolongada.
+- **Labels**: `Inter`, peso 500–600, tamaño entre `12px` y `14px`, con uso moderado de letter spacing para sensación premium.
+
+## Components
+
+- **Buttons**: jerarquía clara, relleno oscuro o acento dorado controlado; radio medio, padding generoso y estados hover sobrios.
+- **Inputs**: fondos claros, bordes suaves, foco visible y limpio; nunca pesados ni visualmente toscos.
+- **Cards**: superficies claras con borde fino o sombra suave; composición editorial con mucho aire interior.
+
+## Layout & Responsive
+
+- Enfoque **mobile-first** desde el primer breakpoint.
+- Usar variables CSS para spacing, tipografía y color semántico.
+- Layouts con `grid` y `flex` según contexto, evitando widths rígidos.
+- Escalar tipografía y espacios de forma fluida o progresiva, no abrupta.
+- Priorizar touch targets cómodos y CTA visibles en mobile.
+
+## Conversión
+
+- WhatsApp es el CTA primario en todo el sitio.
+- Cada servicio debe tener CTA contextual propio.
+- La página de contacto debe priorizar acción inmediata sobre lectura extensa.
+- Las galerías deben ser específicas por servicio para reforzar relevancia comercial.
+
+## Do's and Don'ts
+
+- Do usar fondo claro cálido y mucha respiración visual.
+- Do usar el dorado como acento de lujo, no como color dominante de masas.
+- Do mantener narrativa visual editorial y limpia.
+- Do diseñar primero para mobile y escalar hacia desktop.
+- Don't recargar la interfaz con ornamentos innecesarios.
+- Don't usar colores chillones o combinaciones que rompan el posicionamiento premium.
+- Don't diseñar CTAs genéricos cuando el contexto del servicio permite mayor intención.
+- Don't separar una galería general si las imágenes venden mejor dentro de cada servicio.