docs: add redesign references and agent guidance

2026-05-07 23:39:53 +02:00
parent 51b0d1fb67
commit 50b4e75edd
20 changed files with 2451 additions and 0 deletions
@@ -2,3 +2,5 @@ node_modules
 .astro/
 .worktrees/
 dist/
+.opencode/
+docs/stitch_mnq_premium_landing_page.zip
@@ -0,0 +1,234 @@
+# Agency Agents Recomendados para MNQ Catering y Evento
+
+## Objetivo
+
+Definir qué agentes de `msitarzewski/agency-agents` conviene usar en este proyecto, según la fase de trabajo, para evitar ruido y usar solo los perfiles que realmente aportan valor.
+
+## Agentes instalados en este proyecto
+
+Los agentes quedaron disponibles en:
+
+- `.opencode/agents/`
+
+Instalados:
+
+- `frontend-developer`
+- `ui-designer`
+- `ux-architect`
+- `brand-guardian`
+- `accessibility-auditor`
+- `reality-checker`
+- `seo-specialist`
+- `cms-developer`
+- `security-engineer`
+
+---
+
+## 1. Etapa actual — cierre fino del sitio
+
+### Agentes recomendados
+
+- **`frontend-developer`**  
+  Para implementación en Astro/CSS/componentes.
+
+- **`ui-designer`**  
+  Para pulido visual premium y consistencia de interfaz.
+
+- **`ux-architect`**  
+  Para mejorar jerarquía, CTAs, estructura y flujo de navegación.
+
+- **`brand-guardian`**  
+  Para mantener el tono editorial premium de MNQ.
+
+- **`accessibility-auditor`**  
+  Para revisar accesibilidad real: foco, landmarks, semántica, legibilidad.
+
+### Orden recomendado
+
+1. `ux-architect`
+2. `ui-designer`
+3. `frontend-developer`
+4. `accessibility-auditor`
+5. `reality-checker`
+
+---
+
+## 2. Pre-SEO / antes de publicar
+
+### Agentes recomendados
+
+- **`seo-specialist`**  
+  Para titles, metas, estructura semántica, enlazado y oportunidades de posicionamiento.
+
+- **`brand-guardian`**  
+  Para que la optimización SEO no rompa el tono premium/editorial.
+
+- **`reality-checker`**  
+  Para validar si el sitio está realmente listo para salir.
+
+### Uso recomendado
+
+- auditoría SEO on-page
+- revisión de headings
+- revisión de copy transaccional/local
+- faltantes de metadata
+- oportunidades en páginas de servicio
+
+---
+
+## 3. Fase 2 — CMS con Strapi
+
+### Agente principal
+
+- **`cms-developer`**  
+  Para modelado de contenido, relaciones, estructuras editables y estrategia de integración CMS.
+
+### Agente de seguridad recomendado
+
+- **`security-engineer`**  
+  Para revisar superficie de ataque, configuración, integraciones, secretos, validaciones y riesgos antes de exponer CMS, formulario real y chatbot.
+
+### Agentes de apoyo
+
+- **`frontend-developer`**  
+  Para consumir contenido dinámico desde Astro.
+
+- **`ux-architect`**  
+  Para decidir qué contenido debe ser editable y qué conviene dejar fijo en frontend.
+
+### Recomendación clave
+
+No llevar todo al CMS. Priorizar solo contenido que realmente vaya a cambiar:
+
+- textos de páginas
+- CTAs
+- FAQs
+- bloques de servicio
+- datos de contacto
+- imágenes
+- testimonios
+
+Evitar meter al CMS estructura puramente técnica o layout fijo sin necesidad.
+
+---
+
+## 4. QA final antes de merge o publicación
+
+### Agentes recomendados
+
+- **`accessibility-auditor`**
+- **`security-engineer`**
+- **`reality-checker`**
+- **`seo-specialist`** (opcional, pero recomendable)
+
+### Orden recomendado
+
+1. `accessibility-auditor`
+2. `security-engineer`
+3. `seo-specialist`
+4. `reality-checker`
+
+### Criterio
+
+`reality-checker` debe entrar al final para dar el veredicto duro:
+
+- está listo
+- no está listo
+- qué falta exactamente
+
+---
+
+## Shortlist recomendada para MNQ
+
+Si hubiera que quedarse solo con los agentes más importantes para este proyecto:
+
+1. `frontend-developer`
+2. `ux-architect`
+3. `brand-guardian`
+4. `accessibility-auditor`
+5. `security-engineer`
+6. `cms-developer`
+
+## Por qué esta shortlist
+
+Porque cubre lo esencial del proyecto:
+
+- implementación real
+- criterio UX
+- consistencia de marca
+- accesibilidad
+- revisión de seguridad
+- preparación para la fase CMS
+
+---
+
+## Cuándo invocar `security-engineer`
+
+Conviene invocarlo especialmente en estos momentos:
+
+### 1. Antes de conectar el formulario a backend real
+
+Objetivo:
+- validar superficie de ataque
+- revisar tratamiento de inputs
+- revisar rate limiting
+- revisar exposición innecesaria
+
+Prompt sugerido:
+
+```text
+@security-engineer Revisá la implementación del formulario de contacto para identificar riesgos de validación, abuso, spam, exposición de datos y malas prácticas antes de conectarlo a backend real.
+```
+
+### 2. Antes de introducir Strapi en producción
+
+Objetivo:
+- revisar configuración inicial
+- revisar permisos y roles
+- revisar administración de secretos
+- revisar exposición pública de endpoints
+
+Prompt sugerido:
+
+```text
+@security-engineer Auditá esta propuesta de integración con Strapi para detectar riesgos de permisos, configuración insegura, fuga de datos, exposición administrativa y manejo de secretos.
+```
+
+### 3. Antes de incorporar PostgreSQL + pgvector + chatbot
+
+Objetivo:
+- revisar vectores de ataque
+- revisar sanitización de entradas
+- revisar aislamiento entre contenido interno y contenido público
+- revisar riesgos de prompt injection y data leakage
+
+Prompt sugerido:
+
+```text
+@security-engineer Revisá esta arquitectura con PostgreSQL, pgvector, embeddings y chatbot para detectar riesgos de prompt injection, fuga de información, abuso de endpoints y acceso indebido a contenido sensible.
+```
+
+### 4. Antes de merge o publicación
+
+Objetivo:
+- hacer una pasada final de endurecimiento
+- detectar configuraciones flojas
+- revisar headers, metadatos sensibles, formularios, links y exposición innecesaria
+
+Prompt sugerido:
+
+```text
+@security-engineer Hacé una revisión final de seguridad sobre este proyecto web antes de merge/publicación y marcá riesgos críticos, warnings y quick wins.
+```
+
+---
+
+## Siguiente paso sugerido
+
+Cuando haga falta acelerar el trabajo con estos agentes, conviene preparar prompts reutilizables por fase:
+
+- prompt de revisión visual premium
+- prompt de auditoría SEO
+- prompt de diseño de modelo Strapi
+- prompt de QA final antes de merge
+- prompt de revisión de seguridad pre-release
@@ -0,0 +1,165 @@
+# MNQ Sitewide Premium Redesign Design
+
+## Goal
+Elevar toda la web de MNQ Catering y Evento hacia una dirección visual premium-editorial fuerte, tomando como referencia dominante el material de `docs/stitch_mnq_premium_landing_page`, sin introducir cambios funcionales de backend ni de arquitectura de producto.
+
+## Approved Direction
+Se aprobó una **adaptación fiel del stitch** como norte visual. No se trata de copiar una landing aislada, sino de trasladar su atmósfera, jerarquía, ritmo y sofisticación visual a todas las páginas aprobadas del sitio.
+
+## Visual Intent
+MNQ debe sentirse como una marca de hospitalidad premium contemporánea:
+- clara
+- refinada
+- editorial
+- aspiracional
+- sobria
+- comercialmente efectiva
+
+El resultado buscado es “luxury without noise”: más dirección de arte, menos apariencia de scaffold; más composición editorial, menos cajas apiladas; más intención de marca, menos estructura genérica de landing.
+
+## Domain
+Los conceptos guía del dominio aprobados para el rediseño son:
+- hospitalidad premium
+- catering editorial
+- bodas elegantes
+- eventos corporativos sobrios
+- reuniones íntimas refinadas
+- asesoramiento cercano por WhatsApp
+
+## Color World
+La paleta debe seguir viviendo en el mundo ya definido por el proyecto y reforzado por el stitch:
+- marfil cálido
+- dorado envejecido
+- dorado profundo
+- tinta café-negra
+- blanco crema
+- sombras suaves tipo papel, lino o salón premium
+
+No se busca llenar superficies con dorado, sino usarlo como acento de lujo disciplinado.
+
+## Signature
+La firma visual del proyecto será **editorial hospitality**:
+- secciones amplias con aire
+- títulos con más presencia y control de ancho
+- cards tratadas como piezas curadas, no como widgets
+- CTA sobrios pero firmes
+- ritmo visual de revista premium aplicada a una web comercial de eventos
+
+## Defaults Rejected
+Se rechazaron explícitamente estos defaults:
+1. cards genéricas apiladas
+2. tipografía demasiado neutra en jerarquía
+3. CTAs genéricos de landing sin intención contextual
+
+## Structural Translation
+
+### Layout
+La web pasa de páginas lineales con bloques funcionales a páginas construidas por “escenas” o composiciones editoriales:
+- heroes más amplios
+- secciones con más respiración vertical
+- alternancia suave de superficies
+- contenedores controlados para mejorar la lectura del copy
+- menos sensación de stack repetitivo
+
+### Header
+Debe sentirse más premium y menos utilitario:
+- limpieza visual
+- mejor jerarquía entre marca, navegación y acción principal
+- integración armónica con el sistema visual nuevo
+
+### Hero Pattern
+Cada página debe arrancar con una estructura consistente:
+- eyebrow breve
+- título con más peso visual
+- párrafo corto y medido
+- CTA principal
+- CTA secundario si corresponde
+
+### Service Pages
+Las páginas de servicio compartirán sistema, pero no tono idéntico:
+- Bodas Reales: emocional, aspiracional, más atmósfera
+- Corporativo & Business: sobrio, reputacional, eficiente
+- Reuniones Familiares: cálido, íntimo, elegante
+
+### Contact Page
+Debe sentirse como un “concierge digital”, no como un formulario genérico:
+- WhatsApp como canal principal
+- copy de acompañamiento refinado
+- formulario visualmente serio y editorial
+- feedback elegante, no técnico
+
+## Components and System Rules
+
+### Cards
+Se mantienen, pero con otro tratamiento:
+- menos “caja funcional”
+- más superficie curada
+- padding más generoso
+- bordes más finos
+- fondos más controlados
+- mayor intención tipográfica
+
+### CTA System
+Se define un sistema de tres niveles:
+1. primario: WhatsApp
+2. secundario: explorar / conocer / ver propuesta
+3. textual contextual: links finos dentro de secciones y servicios
+
+### Typography
+Sin cambiar el ADN base del proyecto, se debe reforzar:
+- contraste entre eyebrow / heading / body
+- presencia de títulos
+- control de ancho de párrafos
+- labels más refinados
+
+### CSS Architecture
+No se reescribe el stack, se profundiza:
+- `src/styles/tokens.css` → decisiones tipográficas y de spacing más nítidas
+- `src/styles/base.css` → limpieza tipográfica y comportamiento base
+- `src/styles/layout.css` → composiciones editoriales y ritmo
+- `src/styles/components.css` → héroes, service sections, CTA groups, contact patterns, cards refinadas
+
+## Scope Included
+- refuerzo del sistema visual base
+- rediseño visual de `Home`
+- rediseño visual de `Nosotros`
+- rediseño visual de `Bodas Reales`
+- rediseño visual de `Corporativo & Business`
+- rediseño visual de `Reuniones Familiares`
+- rediseño visual de `Contacto`
+- ajustes necesarios en layout/header/footer/componentes compartidos
+
+## Scope Excluded
+- Strapi
+- backend
+- chatbot
+- PostgreSQL
+- RAG
+- nuevas features funcionales fuera del rediseño visual
+- cambios grandes de arquitectura de producto
+
+## Risks to Avoid
+- copiar el stitch sin adaptación al sitio real
+- dejar Home muy arriba del resto en calidad visual
+- meter ornamento visual sin mejorar conversión
+- romper accesibilidad por perseguir lujo
+- sobrediseñar páginas que necesitan seguir siendo claras y comerciales
+
+## Success Criteria
+El rediseño estará bien logrado si:
+- toda la web se siente del mismo universo visual
+- Home, Contacto y servicios tienen una presencia premium clara
+- el sitio parece una marca cuidada y seria, no un scaffold estilizado
+- WhatsApp sigue siendo la columna vertebral comercial
+- no se pierde claridad, legibilidad ni intención de conversión
+
+## Recommended Execution Order
+1. sistema visual base
+2. Home
+3. Contacto
+4. páginas de servicio
+5. Nosotros
+6. QA visual + accesibilidad + revisión final
+
+## Note on Commit
+El skill de brainstorming sugiere commitear este documento, pero no se hará commit automático porque en este entorno solo se puede commitear cuando el usuario lo pide explícitamente.
@@ -0,0 +1,186 @@
+# MNQ Sitewide Premium Redesign Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Redesign the full MNQ marketing site to align strongly with the approved premium-editorial stitch direction while preserving WhatsApp-first conversion and the existing Astro architecture.
+
+**Architecture:** Strengthen the shared visual system first, then redesign pages in descending impact order: Home, Contact, service pages, and Nosotros. Reuse shared patterns aggressively so the final result feels like one visual system rather than one premium page plus several leftovers.
+
+**Tech Stack:** Astro 5 SSR, `@astrojs/node`, custom CSS files (`tokens.css`, `base.css`, `layout.css`, `components.css`, `utilities.css`), shared Astro layouts/components.
+
+---
+
+### Task 1: Audit and Map the Stitch Reference to Shared Patterns
+
+**Files:**
+- Read: `docs/stitch_mnq_premium_landing_page/design.md`
+- Read: `docs/stitch_mnq_premium_landing_page/**`
+- Read: `src/layouts/MainLayout.astro`
+- Read: `src/components/SiteHeader.astro`
+- Read: `src/components/SiteFooter.astro`
+- Read: `src/styles/tokens.css`
+- Read: `src/styles/base.css`
+- Read: `src/styles/layout.css`
+- Read: `src/styles/components.css`
+
+**Step 1: Compare the current site against the stitch**
+Identify exact visual patterns worth adopting: hero rhythm, section pacing, card treatment, CTA composition, typography hierarchy, and whitespace behavior.
+
+**Step 2: Produce a shared pattern checklist**
+List the patterns that must become system-level rather than page-specific.
+
+**Step 3: Identify leftovers from the previous phase**
+Check for structural issues such as nested landmarks, inconsistent card treatments, or page-level classes that should become shared patterns.
+
+**Step 4: Verify no implementation yet**
+This task ends with a concrete mapping, not code changes.
+
+---
+
+### Task 2: Upgrade the Shared Visual System
+
+**Files:**
+- Modify: `src/styles/tokens.css`
+- Modify: `src/styles/base.css`
+- Modify: `src/styles/layout.css`
+- Modify: `src/styles/components.css`
+- Modify if needed: `src/layouts/MainLayout.astro`
+- Modify if needed: `src/components/SiteHeader.astro`
+- Modify if needed: `src/components/SiteFooter.astro`
+
+**Step 1: Refine typography tokens and base text rhythm**
+Strengthen heading hierarchy, label tone, paragraph measure, and spacing scale.
+
+**Step 2: Refine layout primitives**
+Create or adjust shared section, container, stack, grid, and editorial rhythm patterns.
+
+**Step 3: Refine CTA and card primitives**
+Ensure buttons, text links, CTA groups, and cards look like one premium system.
+
+**Step 4: Refine shared shell if needed**
+If header/footer/layout still feel structurally weaker than the new pages, align them visually.
+
+**Step 5: Run `npm run check`**
+Expected: no Astro/type issues.
+
+---
+
+### Task 3: Redesign Home as the Reference Page
+
+**Files:**
+- Modify: `src/pages/index.astro`
+- Modify if needed: `src/styles/layout.css`
+- Modify if needed: `src/styles/components.css`
+
+**Step 1: Remove structural flaws first**
+If the page has invalid landmark nesting or leftover scaffolding semantics, fix them before visual refinement.
+
+**Step 2: Recompose the hero**
+Keep the approved conversion logic, but redesign spacing, hierarchy, and CTA staging to match the stitch more strongly.
+
+**Step 3: Rebuild service overview as editorial sections**
+Avoid “three equal boxes only” thinking; keep them consistent but more art-directed.
+
+**Step 4: Strengthen value proposition and closing CTA**
+Use section contrast, composition, and visual pacing to make the page feel like a lead conversion asset.
+
+**Step 5: Run `npm run check`**
+Expected: clean output.
+
+---
+
+### Task 4: Redesign Contact as a Premium Concierge Page
+
+**Files:**
+- Modify: `src/pages/contacto.astro`
+- Modify if needed: `src/styles/layout.css`
+- Modify if needed: `src/styles/components.css`
+
+**Step 1: Keep WhatsApp-first hierarchy**
+Preserve commercial logic while upgrading the visual feel.
+
+**Step 2: Refine the concierge tone**
+The contact experience should feel premium, calm, and guided.
+
+**Step 3: Refine the visible non-sending form**
+Keep honesty and accessibility, but make it feel intentionally designed, not like a technical compromise.
+
+**Step 4: Refine feedback and fallback CTA**
+Ensure the status area and WhatsApp fallback feel integrated into the premium visual system.
+
+**Step 5: Run `npm run check`**
+Expected: clean output.
+
+---
+
+### Task 5: Redesign the Service Pages as One Family With Distinct Personalities
+
+**Files:**
+- Modify: `src/pages/bodas-reales.astro`
+- Modify: `src/pages/corporativo-business.astro`
+- Modify: `src/pages/reuniones-familiares.astro`
+- Modify if needed: `src/styles/layout.css`
+- Modify if needed: `src/styles/components.css`
+
+**Step 1: Establish a shared service-page structure**
+Create a consistent editorial skeleton across all three pages.
+
+**Step 2: Differentiate each page by intent**
+- Bodas: more emotional and aspirational
+- Corporativo: more sober and reputational
+- Familiares: more warm and intimate
+
+**Step 3: Refine contextual CTAs**
+Keep WhatsApp-first, but make copy and hierarchy fit each service better.
+
+**Step 4: Run `npm run check`**
+Expected: clean output.
+
+---
+
+### Task 6: Redesign Nosotros to Match the New Site Standard
+
+**Files:**
+- Modify: `src/pages/nosotros.astro`
+- Modify if needed: `src/styles/layout.css`
+- Modify if needed: `src/styles/components.css`
+
+**Step 1: Strengthen the brand narrative layout**
+Move it away from a simple informational block toward a composed editorial brand page.
+
+**Step 2: Align hierarchy and CTA treatment**
+Ensure Nosotros feels fully part of the redesigned site rather than an older leftover.
+
+**Step 3: Run `npm run check`**
+Expected: clean output.
+
+---
+
+### Task 7: Final QA, Accessibility, and Consistency Pass
+
+**Files:**
+- Review/modify if needed: all touched page, layout, and style files
+
+**Step 1: Run `npm run check`**
+Expected: 0 errors, 0 warnings, 0 hints.
+
+**Step 2: Manual visual review**
+Check Home, Contacto, Nosotros, and all service pages at mobile and desktop sizes.
+
+**Step 3: Accessibility review**
+Verify heading hierarchy, focus states, link semantics, landmark correctness, and CTA readability.
+
+**Step 4: Conversion review**
+Confirm WhatsApp remains the strongest CTA path everywhere.
+
+**Step 5: Prepare implementation summary**
+Document what changed, what improved, and what remains for later phases.
+
+---
+
+## Notes for Execution
+- Do not introduce backend, Strapi, or chatbot work in this redesign phase.
+- Do not build after changes; use `npm run check` only.
+- Respect the existing project docs: `README.md`, `AGENTS.md`, `DESIGN.md`, plus `docs/stitch_mnq_premium_landing_page/design.md`.
+- Preserve accessibility while upgrading visual sophistication.
+- If implementation starts from the current `feature/critical-fixes` branch, review and preserve the already approved work instead of flattening it blindly.
@@ -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.
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+
+<html class="light" lang="es"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Inter:wght@400;600&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "surface-variant": "#eae1d4",
+                    "error-container": "#ffdad6",
+                    "surface-dim": "#e1d9cc",
+                    "on-surface-variant": "#4d4635",
+                    "surface-container-high": "#efe7da",
+                    "primary-fixed": "#ffe088",
+                    "inverse-primary": "#e9c349",
+                    "primary-fixed-dim": "#e9c349",
+                    "on-primary": "#ffffff",
+                    "secondary-fixed": "#ffdea4",
+                    "secondary-fixed-dim": "#f1bf5a",
+                    "primary-container": "#d4af37",
+                    "error": "#ba1a1a",
+                    "tertiary-fixed-dim": "#b4c5ff",
+                    "surface": "#fff8f0",
+                    "inverse-surface": "#343027",
+                    "tertiary": "#415ba4",
+                    "on-error-container": "#93000a",
+                    "surface-container-lowest": "#ffffff",
+                    "on-secondary": "#ffffff",
+                    "secondary": "#7b5900",
+                    "on-tertiary-fixed-variant": "#27438a",
+                    "on-surface": "#1f1b13",
+                    "on-tertiary-container": "#254188",
+                    "tertiary-fixed": "#dbe1ff",
+                    "primary": "#735c00",
+                    "outline-variant": "#d0c5af",
+                    "surface-tint": "#735c00",
+                    "surface-bright": "#fff8f0",
+                    "on-primary-fixed-variant": "#574500",
+                    "on-error": "#ffffff",
+                    "on-background": "#1f1b13",
+                    "on-tertiary": "#ffffff",
+                    "on-primary-container": "#554300",
+                    "outline": "#7f7663",
+                    "on-secondary-container": "#755400",
+                    "on-primary-fixed": "#241a00",
+                    "on-tertiary-fixed": "#00174b",
+                    "inverse-on-surface": "#f8f0e2",
+                    "tertiary-container": "#97b0ff",
+                    "surface-container-low": "#fbf3e5",
+                    "secondary-container": "#fdca64",
+                    "on-secondary-fixed-variant": "#5d4200",
+                    "on-secondary-fixed": "#261900",
+                    "surface-container": "#f5eddf",
+                    "background": "#fff8f0",
+                    "surface-container-highest": "#eae1d4"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.25rem",
+                    "lg": "0.5rem",
+                    "xl": "0.75rem",
+                    "full": "9999px"
+            },
+            "spacing": {
+                    "margin-page": "64px",
+                    "section-gap": "120px",
+                    "container-max": "1280px",
+                    "gutter": "32px",
+                    "unit": "4px"
+            },
+            "fontFamily": {
+                    "headline-md": ["Noto Serif"],
+                    "label-caps": ["Inter"],
+                    "body-sm": ["Inter"],
+                    "body-lg": ["Inter"],
+                    "headline-lg": ["Noto Serif"],
+                    "display-lg": ["Noto Serif"]
+            },
+            "fontSize": {
+                    "headline-md": ["32px", {"lineHeight": "1.3", "letterSpacing": "0.03em", "fontWeight": "400"}],
+                    "label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.15em", "fontWeight": "600"}],
+                    "body-sm": ["14px", {"lineHeight": "1.5", "letterSpacing": "0.01em", "fontWeight": "400"}],
+                    "body-lg": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
+                    "headline-lg": ["40px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400"}],
+                    "display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "400"}]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+            display: inline-block;
+            line-height: 1;
+        }
+        body {
+            background-color: #fff8f0; /* Ivory background */
+        }
+        .hero-gradient {
+            background: linear-gradient(to bottom, rgba(31, 27, 19, 0) 0%, rgba(31, 27, 19, 0.4) 100%);
+        }
+    </style>
+</head>
+<body class="font-body-lg text-on-surface selection:bg-primary-fixed selection:text-on-primary-fixed">
+<!-- TopNavBar -->
+<nav class="fixed top-0 w-full z-50 h-20 bg-surface/80 backdrop-blur-md border-b border-outline/10">
+<div class="flex justify-between items-center px-margin-page max-w-container-max mx-auto h-full">
+<div class="font-headline-md text-headline-md text-primary tracking-tighter">
+                MNQ Catering
+            </div>
+<div class="hidden md:flex gap-gutter items-center">
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-primary border-b-2 border-primary pb-1" href="#">Bodas</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Corporativo</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Social</a>
+</div>
+<div class="flex items-center gap-4">
+<button class="material-symbols-outlined text-primary hover:opacity-80 transition-all duration-300 scale-95 active:scale-90" data-icon="chat">chat</button>
+<button class="bg-primary text-on-primary font-label-caps text-label-caps px-6 py-3 rounded-full hover:opacity-80 transition-all duration-300">WhatsApp</button>
+</div>
+</div>
+</nav>
+<main class="pt-20">
+<!-- Hero Section -->
+<section class="relative h-[819px] flex items-end overflow-hidden">
+<img alt="Bodas Reales Hero" class="absolute inset-0 w-full h-full object-cover" data-alt="A cinematic, wide-angle photograph of a lavish outdoor wedding reception at dusk. Long imperial tables are decorated with ivory linens and tall gold candelabras under a canopy of warm fairy lights. The atmosphere is sophisticated and romantic, with a soft golden glow illuminating the scene against a deep twilight sky. High-end editorial photography style with warm, luxurious tones." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzpzp2X1SXuVzQhO1EI31EhUb1lbyWIV1Ivo4lOQdWM9z-NJu4t9dLarlSog2Yy4rjJH98a_fKVfYn82OHOe0W0WeNJi_RvxFLWQ2jjwKA6QlZEIFfQJWmfLwhvQxx9e7njx0yfsvfWw9qsPZKiJF1zlJxb2zKAiDJV-TKVb__O5rtBObPe1vP8YfNwMQApk27KbJ4aP-qdBSPVL4JLTG5VDEBsWAZ9NAaH1LqyZx_ipTBklTm-xJAUX9TIMCrzwtNoQrm6IVLPlgk"/>
+<div class="absolute inset-0 hero-gradient"></div>
+<div class="relative z-10 px-margin-page max-w-container-max mx-auto w-full pb-20">
+<span class="font-label-caps text-label-caps text-primary-fixed uppercase tracking-[0.3em] mb-4 block">Portafolio Exclusivo</span>
+<h1 class="font-display-lg text-display-lg text-white max-w-3xl">Bodas Reales</h1>
+</div>
+</section>
+<!-- Intro Narrative -->
+<section class="py-section-gap px-margin-page max-w-container-max mx-auto">
+<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter items-center">
+<div class="md:col-span-5">
+<h2 class="font-headline-lg text-headline-lg text-primary mb-8 italic">Donde cada detalle cuenta una historia de amor.</h2>
+<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
+                        En MNQ Catering, entendemos que una boda no es solo un evento, sino el reflejo de una promesa. Nuestra narrativa visual se construye a través de texturas, aromas y sabores que trascienden lo ordinario para crear memorias eternas.
+                    </p>
+</div>
+<div class="md:col-start-8 md:col-span-5">
+<div class="border-l border-primary/20 pl-8">
+<p class="font-body-sm text-body-sm text-outline mb-4 uppercase tracking-widest">Excelencia Culinaria</p>
+<p class="font-headline-md text-headline-md">Sinfonía de sabores diseñada para el paladar más exigente.</p>
+</div>
+</div>
+</div>
+</section>
+<!-- Portfolio Bento Grid -->
+<section class="pb-section-gap px-margin-page max-w-container-max mx-auto">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-8 auto-rows-[400px]">
+<!-- Large Feature -->
+<div class="md:col-span-2 md:row-span-2 relative group overflow-hidden rounded-lg border border-outline-variant/10">
+<img alt="Boda de Sofía y Mateo" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Close-up of a beautifully arranged gourmet appetizer plate featuring delicate edible flowers and microgreens. The ceramic plate has a subtle ivory texture, and the lighting is soft and natural, emphasizing the freshness of the ingredients. The composition is elegant and minimalist, reflecting a high-end culinary experience in a bright, airy setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDye__BTKYA7KSaGUQoWDg4ATrq_PltyzWgjKMPCyoZ_QdtaZnckcGqzEX8NLVaVQcZVpkBBmeVkxm2-1nH71S94IkQYOfl2YZ6xiKidh8r2zTje8OCrORKYgfkA3sOTfkAuGKAkECvzFiCFmECDWTaSpuIFQQ8VuSp6UQAvcEx5YeoxP5jHpdBtc96-5jXyymtlucB4f2LBdi5i5YS5U1KYftUHsXtlkyd5lpCq3oPM4m3xpBOxVLsx57h860oIkejh0U2ECkF0lKS"/>
+<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-12">
+<h3 class="font-headline-lg text-white">Sofía &amp; Mateo</h3>
+<p class="text-white/80 font-label-caps text-label-caps mt-2">Palacio de Santa Coloma • 2024</p>
+</div>
+</div>
+<!-- Secondary Detail -->
+<div class="relative group overflow-hidden rounded-lg border border-outline-variant/10">
+<img alt="Montaje Floral" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Detailed view of an exquisite floral arrangement on a wedding table. It features cream-colored roses, pale eucalyptus leaves, and subtle gold accents. The background shows blurred crystal glassware and fine silverware, creating a sense of luxury and depth. The lighting is warm and inviting, highlighting the soft textures of the petals." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJrYjhGVTHj5mO0MBrtyY-nqliMoj_oTrFhwxLqmorwexRZawahjtDQIu0gD6qu4uJHnGk-ck-56aSUhA1zAUqT8nvoqCIlGhqSMrO1lL1t1nQgRAywwaxZ_I10o_ZzskXBCQjepOlGj0M7gdo0DuaC5bLRgLlebcrG5pycf_H03av6vAq68KzSP2_PEcNM54JlZgwa61uERNiU9l2WB6e25HahHPFs7HkQdmeUUIUzDiYEbEjiM5lgFvcSevVW4lXXqlsU_Ysxowk"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-8">
+<span class="text-white font-label-caps text-label-caps">Detalles Florales</span>
+</div>
+</div>
+<!-- Secondary Detail -->
+<div class="relative group overflow-hidden rounded-lg border border-outline-variant/10">
+<img alt="Cena al Aire Libre" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="An elegant wedding cake with minimal white frosting and real gold leaf accents standing on a marble pedestal. The setting is a bright, sunlit room with clean lines and a modern minimalist aesthetic. The image captures the texture of the gold leaf and the smooth finish of the cake, conveying a sense of luxury and sophisticated craftsmanship." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDkE12vhxPQyx4TmmFc4ooOAWXc5oM2XIdtYa3DUl7R_LsMcSHcQJ1X3IWycCGz2jxu-B3puYT04iLd-N0g_xBrLNwmDxGmAaLen4zxL6l3zuf5T3F-0CCqimNjTpk1rLaFid3zb9YiWjKRQvExc9R1pzVyDJ1ZvIkb_2yG5xD_tLUy7QhjHK1S6TSm5-geWaCyZBcxsheOSu9KlELaTUExlviu6OrF8Kfc-J-xoHpbjBooiLy-N5M_n9wLxc-1QtzArbuSwSrh5A_o"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-8">
+<span class="text-white font-label-caps text-label-caps">Pastelería de Autor</span>
+</div>
+</div>
+</div>
+</section>
+<!-- Feature Narrative: The Details -->
+<section class="bg-surface-container py-section-gap">
+<div class="px-margin-page max-w-container-max mx-auto">
+<div class="text-center mb-16">
+<h2 class="font-display-lg text-display-lg text-primary mb-4">El Arte de la Mesa</h2>
+<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto">Mantelería de lino fino, cristalería de bohemia y una curaduría floral que respira vida en cada rincón.</p>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
+<div class="text-center group">
+<div class="aspect-[4/5] overflow-hidden mb-6 rounded-xl">
+<img alt="Texturas" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" data-alt="A macro shot of luxurious ivory linen fabric with a subtle weave pattern, draped elegantly over a wooden surface. Soft, directional light creates gentle shadows, emphasizing the quality and tactile nature of the material. The color palette is warm and creamy, perfectly matching a high-end minimalist brand aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqzeskdMVJNYnJKY1xgWhJTgzOBPM5dGD0hA_r9HA8Pt8YkFQ5zttUR9zCRUG1C9OJ6-Ik2w0Il18iJ5J0kzdeRVBKuUXLkYAOqFlXAjUQzHjkntCoinm7cp5zG9n_SfY78pFSH8OcrtFUCzbYo35DoV-DDMimJqCpDdIPx7zzxrhyEITzTEQ09aR2ZHfFXbnQzWkU3qIkcNQLRU-cNQOeKzlUeE54aTRB6kHfkyfgPV8wIkc6CST0oBHKfdqHFnj8YPxfo11JKI1U"/>
+</div>
+<h4 class="font-headline-md text-headline-md mb-2">Texturas Nobles</h4>
+<p class="font-body-sm text-body-sm text-on-surface-variant">Linos y sedas seleccionados por su caída y tacto excepcional.</p>
+</div>
+<div class="text-center group mt-12 md:mt-0">
+<div class="aspect-[4/5] overflow-hidden mb-6 rounded-xl">
+<img alt="Cristalería" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" data-alt="Close-up of sparkling crystal wine glasses and champagne flutes arranged precisely on a set table. The sunlight catches the facets of the glass, creating brilliant highlights and a sense of celebration. In the background, a soft blur of a garden setting adds a touch of natural beauty to the sophisticated tabletop arrangement." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBtYPXIAPE4QK5IW-jwOMvc-3yekAfg5s_RJy_JYuBHVKnuUUqpUHz9AtAhVqyfbSu2Nemhg-dE-42dpQfoRBRcXH0ODW_6sAbWva2RqRS2nJVA0gJGr7DxKHkM3FdKLBVW-RydGCDp5fY-7uFhRJ_KON54R0viitBNHicvBJkuPb8M9p29I-nYfvSzZ_FJ0liErMkUBRaGBOEg2NJ6iRUJ-QQwpZ-glyPk0Vee0Z5O7m-UqsjXEUX3qYi2qUcbpZVAgl56E7LmVOjI"/>
+</div>
+<h4 class="font-headline-md text-headline-md mb-2">Cristal &amp; Oro</h4>
+<p class="font-body-sm text-body-sm text-on-surface-variant">Detalles metálicos que aportan un brillo atemporal a su celebración.</p>
+</div>
+<div class="text-center group mt-12 md:mt-24">
+<div class="aspect-[4/5] overflow-hidden mb-6 rounded-xl">
+<img alt="Platos" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" data-alt="A gourmet main course featuring a perfectly seared piece of sea bass served with a vibrant saffron-infused sauce and artistic vegetable garnishes. The food is presented on a minimalist dark ceramic plate that contrasts beautifully with the warm yellow of the sauce. The lighting is sophisticated, focusing on the textures and colors of the culinary creation." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6RSF4S6qvIH6TVQFe93dcUMZJ6cpcajpX-0BhvXVBQ3zTIqrv426fVa2N8eRPfJS7NQISPIukTFxhsOsM-HlQpLnVxQlO7sgn43P7rWbpUix9nMovFCdS41Ogh_tfjP-r1eaew4lHLbBYlua4yCN88V8K2rFUUEU94NAszH5xQspdQMDDdgMHeC-h8vCFLThJE7EX4qZZjKyR-rpCYPB4QetiT_R_pStXFgM6Z6_cBPkh_nxsgi4j7NQekHYPmQh9UXUSqA22uRAb"/>
+</div>
+<h4 class="font-headline-md text-headline-md mb-2">Platos de Autor</h4>
+<p class="font-body-sm text-body-sm text-on-surface-variant">Cada ingrediente es una nota en nuestra composición gastronómica.</p>
+</div>
+</div>
+</div>
+</section>
+<!-- Testimonials -->
+<section class="py-section-gap px-margin-page max-w-container-max mx-auto overflow-hidden">
+<div class="flex flex-col md:flex-row gap-gutter">
+<div class="md:w-1/3">
+<span class="font-label-caps text-label-caps text-primary uppercase tracking-widest mb-4 block">Testimonios</span>
+<h2 class="font-headline-lg text-headline-lg mb-8">Palabras que nos inspiran.</h2>
+</div>
+<div class="md:w-2/3 grid grid-cols-1 md:grid-cols-2 gap-gutter">
+<div class="bg-surface-container-low p-10 border border-outline-variant/30 flex flex-col h-full">
+<div class="text-primary-container mb-6">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">format_quote</span>
+</div>
+<p class="font-body-lg text-body-lg italic mb-8 flex-grow text-on-surface">"Superaron cualquier expectativa. No solo fue la comida, que fue espectacular, sino la tranquilidad que nos dieron durante todo el proceso. Fue un sueño hecho realidad."</p>
+<div class="border-t border-outline-variant pt-6">
+<p class="font-label-caps text-label-caps font-bold">Elena &amp; Carlos</p>
+<p class="font-body-sm text-body-sm text-outline">Finca La Montaña, Junio 2023</p>
+</div>
+</div>
+<div class="bg-surface-container-low p-10 border border-outline-variant/30 flex flex-col h-full">
+<div class="text-primary-container mb-6">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">format_quote</span>
+</div>
+<p class="font-body-lg text-body-lg italic mb-8 flex-grow text-on-surface">"Nuestros invitados todavía hablan del cóctel. La elegancia de cada bocado y la atención del personal fue impecable. MNQ es, sin duda, la mejor elección para una boda premium."</p>
+<div class="border-t border-outline-variant pt-6">
+<p class="font-label-caps text-label-caps font-bold">Patricia &amp; Javier</p>
+<p class="font-body-sm text-body-sm text-outline">Castillo de Viñuelas, Septiembre 2023</p>
+</div>
+</div>
+</div>
+</div>
+</section>
+<!-- WhatsApp CTA -->
+<section class="mb-section-gap px-margin-page max-w-container-max mx-auto">
+<div class="relative bg-inverse-surface text-inverse-on-surface rounded-3xl p-16 md:p-24 overflow-hidden text-center">
+<div class="absolute inset-0 opacity-10 pointer-events-none">
+<div class="absolute top-0 left-0 w-64 h-64 border-2 border-primary-fixed rounded-full -translate-x-1/2 -translate-y-1/2"></div>
+<div class="absolute bottom-0 right-0 w-96 h-96 border-2 border-primary-fixed rounded-full translate-x-1/2 translate-y-1/2"></div>
+</div>
+<h2 class="font-display-lg text-display-lg mb-8 relative z-10">¿Comenzamos a planear su gran día?</h2>
+<p class="font-body-lg text-body-lg text-inverse-on-surface/80 max-w-xl mx-auto mb-12 relative z-10">Solicite una asesoría personalizada y reciba un presupuesto a medida para su boda exclusiva.</p>
+<a class="inline-flex items-center gap-4 bg-primary-container text-on-primary-container font-label-caps text-label-caps px-10 py-5 rounded-full hover:bg-primary-fixed transition-all duration-300 scale-100 hover:scale-105 active:scale-95 relative z-10" href="#">
+<span class="material-symbols-outlined">chat</span>
+                    CONSULTAR POR WHATSAPP
+                </a>
+</div>
+</section>
+</main>
+<!-- Footer -->
+<footer class="bg-surface-container border-t border-outline-variant/20 w-full py-section-gap">
+<div class="flex flex-col md:flex-row justify-between items-start px-margin-page max-w-container-max mx-auto gap-gutter">
+<div class="flex flex-col gap-6">
+<div class="font-headline-lg text-headline-lg text-on-surface">MNQ Catering</div>
+<p class="font-body-sm text-body-sm text-on-surface-variant max-w-xs">© 2024 MNQ Catering y Eventos. Excelencia culinaria.</p>
+</div>
+<div class="grid grid-cols-2 gap-x-16 gap-y-4">
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Contacto</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Aviso Legal</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Instagram</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Facebook</a>
+</div>
+</div>
+</footer>
+</body></html>
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+
+<html class="light" lang="es"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>MNQ Catering y Eventos | Excelencia Culinaria</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Inter:wght@400;600&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "on-secondary-fixed": "#261900",
+                    "surface-container-high": "#efe7da",
+                    "surface": "#fff8f0",
+                    "inverse-surface": "#343027",
+                    "on-background": "#1f1b13",
+                    "secondary-fixed": "#ffdea4",
+                    "secondary": "#7b5900",
+                    "primary": "#735c00",
+                    "primary-container": "#d4af37",
+                    "primary-fixed": "#ffe088",
+                    "on-surface": "#1f1b13",
+                    "on-tertiary": "#ffffff",
+                    "background": "#fff8f0",
+                    "on-secondary-fixed-variant": "#5d4200",
+                    "on-tertiary-fixed": "#00174b",
+                    "tertiary": "#415ba4",
+                    "inverse-primary": "#e9c349",
+                    "on-error-container": "#93000a",
+                    "on-tertiary-container": "#254188",
+                    "surface-tint": "#735c00",
+                    "on-primary": "#ffffff",
+                    "tertiary-fixed-dim": "#b4c5ff",
+                    "on-secondary-container": "#755400",
+                    "on-secondary": "#ffffff",
+                    "tertiary-container": "#97b0ff",
+                    "on-primary-container": "#554300",
+                    "on-error": "#ffffff",
+                    "surface-container": "#f5eddf",
+                    "on-primary-fixed-variant": "#574500",
+                    "tertiary-fixed": "#dbe1ff",
+                    "on-tertiary-fixed-variant": "#27438a",
+                    "outline": "#7f7663",
+                    "surface-container-low": "#fbf3e5",
+                    "inverse-on-surface": "#f8f0e2",
+                    "error": "#ba1a1a",
+                    "on-primary-fixed": "#241a00",
+                    "secondary-container": "#fdca64",
+                    "surface-container-lowest": "#ffffff",
+                    "error-container": "#ffdad6",
+                    "primary-fixed-dim": "#e9c349",
+                    "surface-bright": "#fff8f0",
+                    "outline-variant": "#d0c5af",
+                    "surface-dim": "#e1d9cc",
+                    "secondary-fixed-dim": "#f1bf5a",
+                    "surface-variant": "#eae1d4",
+                    "surface-container-highest": "#eae1d4",
+                    "on-surface-variant": "#4d4635"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.25rem",
+                    "lg": "0.5rem",
+                    "xl": "0.75rem",
+                    "full": "9999px"
+            },
+            "spacing": {
+                    "gutter": "32px",
+                    "unit": "4px",
+                    "container-max": "1280px",
+                    "margin-page": "64px",
+                    "section-gap": "120px"
+            },
+            "fontFamily": {
+                    "headline-md": ["Noto Serif"],
+                    "label-caps": ["Inter"],
+                    "body-lg": ["Inter"],
+                    "display-lg": ["Noto Serif"],
+                    "headline-lg": ["Noto Serif"],
+                    "body-sm": ["Inter"]
+            },
+            "fontSize": {
+                    "headline-md": ["32px", {"lineHeight": "1.3", "letterSpacing": "0.03em", "fontWeight": "400"}],
+                    "label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.15em", "fontWeight": "600"}],
+                    "body-lg": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
+                    "display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "400"}],
+                    "headline-lg": ["40px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400"}],
+                    "body-sm": ["14px", {"lineHeight": "1.5", "letterSpacing": "0.01em", "fontWeight": "400"}]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        }
+        .editorial-shadow {
+            box-shadow: 0 10px 30px -10px rgba(115, 92, 0, 0.05);
+        }
+        body {
+            background-color: #fff8f0;
+            color: #1f1b13;
+        }
+    </style>
+</head>
+<body class="bg-background font-body-lg text-on-surface">
+<!-- TopNavBar -->
+<nav class="fixed top-0 w-full z-50 h-20 bg-surface/80 backdrop-blur-md border-b border-outline/10">
+<div class="flex justify-between items-center px-margin-page max-w-container-max mx-auto h-full">
+<div class="flex items-center">
+<img alt="MNQ Catering Logo" class="h-12 w-auto" src="https://lh3.googleusercontent.com/aida/ADBb0uhqIqIk9NTLCs19kisf1GVzVP1JQz2_bqRsfbVQ6s1mHkvzWCtp6Yhn0dXB6mW4IzvCH0x-ppctItG17PBVkCjrybDpOmhZemL90aq0qmQLSmjrUxBwgMx8dUwUjnJHiKPGBUOsJTa2RLGzpBI51xKQRHUeh_8xCafuV1fs8Y2JjC51ram4bbOc6DOlDMO2ruynyEZ-5-b9jM5K3eZ2WliI280uTBOwzHAfI-F98T_ZXsksjRfWzTuvUGa_nhCy6djLJUAcVft27w"/>
+</div>
+<div class="hidden md:flex gap-gutter">
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-primary border-b-2 border-primary pb-1" href="#">Bodas</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Corporativo</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Social</a>
+</div>
+<div class="flex items-center gap-4">
+<button class="material-symbols-outlined text-primary hover:opacity-80 transition-all scale-95 active:scale-90" data-icon="chat">chat</button>
+<button class="bg-primary text-on-primary px-6 py-2.5 rounded-full font-label-caps text-label-caps tracking-widest uppercase hover:opacity-90 transition-all scale-95 active:scale-90">WhatsApp</button>
+</div>
+</div>
+</nav>
+<!-- Hero Section -->
+<section class="relative h-screen w-full flex items-center justify-center overflow-hidden">
+<div class="absolute inset-0 z-0">
+<img class="w-full h-full object-cover" data-alt="A luxurious wedding table setting with pristine white linens, gleaming gold cutlery, and crystal glassware under warm, ambient lighting. The scene exudes high-end elegance with a minimalist Ivory aesthetic, featuring delicate floral arrangements and a sophisticated atmosphere of quiet luxury and bespoke hospitality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOlWE1bAR205cFVU_WY_ylYmnOJNG3vPGwN6Vvay2xPB8jGo_YDHDbYjFiQ8yEdo32JbLN7-VzJirdr0-4gqW9YmYYNWW295p9Xcf9MVqS1YyR9GuvMO-AukpvUGWAMPMGZzQRc-bntXt_n1uJ1vZCCyqZQotwEQ63JoK7_fYcJD0IFREs6bX52Rw9ggIQ6ichy3Xj0GMtEnpMzjUeGd2ZwfjlT1ootr9K5SIAwNWYu5Y-FyAG8okVlgUqVaLfsWsXpFBQccpAdd4B"/>
+<div class="absolute inset-0 bg-on-background/20 backdrop-brightness-75"></div>
+</div>
+<div class="relative z-10 text-center max-w-4xl px-margin-page">
+<h1 class="font-display-lg text-display-lg text-white mb-8">MNQ: Donde la tradición se encuentra con la exclusividad</h1>
+<div class="flex justify-center">
+<button class="border-2 border-primary-container text-white px-10 py-4 rounded-full font-label-caps text-label-caps tracking-[0.2em] uppercase hover:bg-primary-container hover:text-on-primary-container transition-all duration-500">Explorar Servicios</button>
+</div>
+</div>
+</section>
+<!-- Servicios (Editorial Grid) -->
+<section class="py-section-gap px-margin-page max-w-container-max mx-auto">
+<div class="mb-section-gap/2 flex flex-col items-center text-center">
+<span class="font-label-caps text-label-caps text-primary tracking-[0.3em] uppercase mb-4">Nuestra Propuesta</span>
+<h2 class="font-headline-lg text-headline-lg text-on-surface">Experiencias Gastronómicas a Medida</h2>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
+<!-- Bodas -->
+<div class="group cursor-pointer">
+<div class="overflow-hidden rounded-xl mb-6 aspect-[3/4]">
+<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="A close-up of an exquisitely plated wedding appetizer featuring fresh, colorful ingredients and gold leaf accents. The plating is minimalist and artistic, set against a warm ivory ceramic plate and captured with high-contrast, professional photography to highlight the culinary craftsmanship of MNQ Catering." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCnrzHB4KQTRYy-5QkY6oI0mfBOZGWI_dugRGmSqaPu3kan6V9cUCHyW12Yz1P2efdZU7Wq5mpsCz6UHkxb5HW_mIfj51Btgz8ONR6bZRVv_o_lO4fHfixgAL6ydd2WSo-cgz6n3cVYWCtXB3Uhh0AvctwV39np47Cp-NbXqUCIIvI4QlbiUodBJbCZqLOvcpAwzOSgc-w5N7_Sj79S90Z_2pVR7UNDAFoKW6HaN8GkQuzpTqhYNMzy3uleKOyq_1_wZlcgNjZvKzuf"/>
+</div>
+<h3 class="font-headline-md text-headline-md mb-2">Bodas</h3>
+<p class="font-body-lg text-body-lg text-on-surface-variant mb-4">El arte de celebrar el amor con un banquete inolvidable diseñado hasta el último detalle.</p>
+<a class="inline-block border-b-2 border-primary pb-1 font-label-caps text-label-caps tracking-widest uppercase text-primary hover:opacity-70 transition-opacity" href="#">Saber más</a>
+</div>
+<!-- Corporativo -->
+<div class="group cursor-pointer mt-12 md:mt-24">
+<div class="overflow-hidden rounded-xl mb-6 aspect-[3/4]">
+<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="An elegant corporate gala hall with long tables, warm lighting, and sophisticated floral decor. The environment is professional yet inviting, reflecting a high-end luxury lifestyle and meticulous planning for corporate entities seeking bespoke culinary experiences in a serene ivory-toned space." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD4IeYSbDW3gI04pA8ax29QYRJdk-x-n2K-Wl1IJ_unzVDv9ZtXDOh_LEH__yX2LBlOcet-k9ositBgVnystqHKQ8l1Y90_uzEj7CqsD_ftvnjNX5qCRyub7BVDCd4_rjyTnzVH99_MhvUak70aAWAAwbWF7ANzpFoFP0dfh-3jtHsD6w1IQEQoTzUzoeihxc7fETMVnQkWU2VZY0EwwBcJODD1jtX_GAq4Xf01jU-aqMqDo7FX_lTbmOZ0hrO-VaQ_oHab54k7l8g9"/>
+</div>
+<h3 class="font-headline-md text-headline-md mb-2">Eventos Corporativos</h3>
+<p class="font-body-lg text-body-lg text-on-surface-variant mb-4">Reforzamos la identidad de su empresa a través de una propuesta culinaria de primer nivel.</p>
+<a class="inline-block border-b-2 border-primary pb-1 font-label-caps text-label-caps tracking-widest uppercase text-primary hover:opacity-70 transition-opacity" href="#">Saber más</a>
+</div>
+<!-- Familiares -->
+<div class="group cursor-pointer">
+<div class="overflow-hidden rounded-xl mb-6 aspect-[3/4]">
+<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="A warm, intimate family reunion dinner held outdoors at dusk with fairy lights and artisanal tableware. The setting is cozy and upscale, featuring high-quality photography of gourmet small bites and shared platters, perfectly capturing the essence of personalized hospitality and contemporary minimalism." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2p5BhFdluKsZqxPx0dupyQdwCS6MZBFLKh1FCN8_DdJJa90fIk8Q0-wsX7-rSVcT0bA39I5Xbdjobsl57DpuoyLa1fWGuZE90BajT0LczJmRgypiCtJRudnvUl9dbv2pNaAbvhS1DGX9Bc9XbOqD2mV3Mi0KkaV-EVsTPZP1v5iTN-tNJLkGNb8i82ChCACUhBxydGa5-3JGCbEjvws51V57tHL6cwq6jJPoJl6Lj883G5HB6L5rpgQWM9hL574her-2WP1HImejL"/>
+</div>
+<h3 class="font-headline-md text-headline-md mb-2">Reuniones Familiares</h3>
+<p class="font-body-lg text-body-lg text-on-surface-variant mb-4">La calidez del hogar elevada por la excelencia de nuestra cocina de autor.</p>
+<a class="inline-block border-b-2 border-primary pb-1 font-label-caps text-label-caps tracking-widest uppercase text-primary hover:opacity-70 transition-opacity" href="#">Saber más</a>
+</div>
+</div>
+</section>
+<!-- Galería de Autor (Fluid Mosaic) -->
+<section class="bg-surface-container py-section-gap">
+<div class="px-margin-page max-w-container-max mx-auto">
+<div class="flex justify-between items-end mb-16">
+<div>
+<span class="font-label-caps text-label-caps text-primary tracking-[0.3em] uppercase mb-4 block">Galería</span>
+<h2 class="font-headline-lg text-headline-lg text-on-surface">Momentos MNQ</h2>
+</div>
+<div class="hidden md:block">
+<p class="font-body-lg text-on-surface-variant max-w-xs text-right italic">"La comida es la única forma de arte que nutre todos los sentidos."</p>
+</div>
+</div>
+<div class="columns-1 md:columns-2 lg:columns-3 gap-gutter space-y-gutter">
+<img class="rounded-xl w-full editorial-shadow" data-alt="Close-up of a premium cocktail being prepared with a citrus twist, highlighting the clarity of the ice and the vibrant golden liquid. The shot is bright and modern, utilizing low-contrast outlines and a high-key light mode aesthetic to emphasize luxury and quality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA6mOZT13ncQuIfeaYFHojyK5LxjzWXDjCJ-jbTGuaBx0gEMwsUgNvfR0MQ3wiyYEJejVt2kZWOnjcetrr9vOH0DfPkeVTuw-x25lMN5cfuuC53JeuBmV7BAth_SrR3PbDtdCduo4uYSVpqBVhaD3vCXpNnh8ido4L5XGPkb2QMCL5UQyqyWj_fwf9fPqFPVpsD2qnaU3wnr92Kl2Dh3CLmr_k5wAkYApZ97ndwYJ8yBzBcw_9pRpdrtiQpHqn3hYaAdxVkrQHGE16T"/>
+<img class="rounded-xl w-full editorial-shadow" data-alt="A beautifully arranged seafood platter with oysters and champagne, set on a marble surface. The lighting is soft and natural, emphasizing the textures and the premium ivory-gold color palette of the MNQ Catering brand identity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYnbQfgOpCkIJIK93-80ggl0gt8fM2sKaDN8rgkOHudfnZhyqkjsZNq1rK0ad4Af8dNUbJY0lAW64ydLjQFPiSbo6WeMuX44OG9mAe-vKqPcdCbxiMQV8AF4Ac7h2ZinEGgNcowCnuSxKC3b0pfQG2ORbAsWt2usBZbMZc9P6G9Nis32sZh8yMYRM6mRrxRPJYrlugf9ZbF8VHmyO1JXSGV_Jv6DRm27z3EQLZNFaQD3zKw1bHXl8ktqvnAG1DUfEu-ZLm6BEtnKZd"/>
+<img class="rounded-xl w-full editorial-shadow" data-alt="Macro photography of a gourmet dessert with gold leaf and edible flowers. The image is professional and high-contrast, focusing on the intricate details and the warm, creamy ivory background typical of contemporary luxury editorial design." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDYj99frOn75pq5WFgFK635meFw8BEl-oZxBLZC9ZgaOJQ8d8F6FL9VPg7OdUTTl97gkRaFQE5RL5WImd1qma6uAIPMC993Yb506MRNmq1vKutrvXhOCl1mQ-SUMrL_beLItaJ6zuNLA2e4pZhYgDfHgS7NXe_4vdj4mLx5QzITyIVDLlulXSaaKKyv3V8YX7WErz3xnIUQ4zchWh4BEQ_Gec2dVW1dz3ybAj6VOZKW99FQEyKN7nUKtsSL20_bKn-z0gen_9wvoj8H"/>
+<img class="rounded-xl w-full editorial-shadow" data-alt="The elegant interior of a MNQ catered event featuring long, minimalist tables and modern lighting fixtures. The space is vast and airy, showcasing the Swiss minimalism influence with intentional voids and a sophisticated, calm atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAa7mBiKAqgyDI9Rjl2t-mUS7sKeAFEJ7rhp_ffftPlWFh4zzdK8XnE4-i--q2mej-YwKYU4Eo1YY--vLgQMHBGb9UKGJs9PkFgEg8fSQ4KXEhzENwstT-P47XvsB784LAyeDB9-2yMDAXoXLSOuvxOHwzK9iFSlo47Vt3yGzdNv8R_ve1Gh-GrIng77ysmw12s_osIEngemzSs7t-viLIE8D7j6QALhl7FK10OQEEXI_wPOWInnig1BadZXbt_ylHBt9Xx3x6AAPxA"/>
+<img class="rounded-xl w-full editorial-shadow" data-alt="A professional chef carefully garnishing a high-end plate with tweezers, highlighting the precision and quiet confidence of MNQ's culinary team. The setting is clean and high-end, focusing on the craftsmanship and artisanal nature of the catering." src="https://lh3.googleusercontent.com/aida-public/AB6AXuChiZBaUPBSVC5wGydmzBABN1LHLjD_cBh3b8nz0n2pv0XwlSdyMCuvsszrWpylBiQtdhhLtYqCqsnuNr6u3f1WZIl86znLbLyZMuCt1GwHLZSYa3VHA-cexs9_KRvrFuMg7OK0k3oQT4ocK6tQ9F39AnB8dY1aKNPWkDii-H3VW3dEhQxLzTVeqHg_cIvGnQjaU3uZusyoyisCswIbOnDlZz_9SNIZtb0CuPWPtXg9YN8NRbhLd76hxpeLeFAv5yg-fitLReiEZphJ"/>
+<img class="rounded-xl w-full editorial-shadow" data-alt="Artistic shot of crystal glasses filled with sparkling wine, capturing the reflections and light flow through the glass. The mood is celebratory yet serene, matching the warm ivory and metallic gold visual tokens of the brand." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBPoLwnE6cGoLyGCXxPTz3iTsQL3FsA6KhK5kxS8VBSCdvulFTrjyBerd2nvjsvtgYt77KGR80ptaQeOWHaA18Kci-S6O6v2ld2o7TaDimeRufr9ohxm-9nY8u7La20l4VFMjwITIfwvd-TOJyrxmE0FbYrf6d1uFLsl3Tlq1ixGThkSo8gKLSJov19FLjnnfc_Pt0NZiAoz-6BSpl_3pSuwzn51D2sDRp_ucanjI33pXXsniFm1TQplF0wD_vGnniVIUSoR1p3Zq4-"/>
+</div>
+</div>
+</section>
+<!-- Social Proof & Testimonials -->
+<section class="py-section-gap bg-surface">
+<div class="px-margin-page max-w-container-max mx-auto text-center">
+<div class="flex justify-center mb-8">
+<img alt="MNQ Logo Detail" class="h-16 opacity-30 grayscale" src="https://lh3.googleusercontent.com/aida/ADBb0uhqIqIk9NTLCs19kisf1GVzVP1JQz2_bqRsfbVQ6s1mHkvzWCtp6Yhn0dXB6mW4IzvCH0x-ppctItG17PBVkCjrybDpOmhZemL90aq0qmQLSmjrUxBwgMx8dUwUjnJHiKPGBUOsJTa2RLGzpBI51xKQRHUeh_8xCafuV1fs8Y2JjC51ram4bbOc6DOlDMO2ruynyEZ-5-b9jM5K3eZ2WliI280uTBOwzHAfI-F98T_ZXsksjRfWzTuvUGa_nhCy6djLJUAcVft27w"/>
+</div>
+<div class="flex justify-center gap-2 mb-12">
+<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">star</span>
+<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">star</span>
+<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">star</span>
+<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">star</span>
+<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">star</span>
+</div>
+<div class="max-w-3xl mx-auto">
+<h2 class="font-headline-lg text-headline-lg mb-16">Lo que nuestros clientes dicen sobre nosotros</h2>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter text-left">
+<div class="p-10 border border-outline-variant/30 rounded-xl bg-white/50 backdrop-blur-sm">
+<p class="font-body-lg text-on-surface italic mb-6">"MNQ transformó nuestra boda en un sueño gastronómico. La atención al detalle y la calidad de los ingredientes superaron cualquier expectativa."</p>
+<div class="flex items-center gap-4">
+<div class="h-12 w-12 rounded-full bg-surface-container-high border border-primary/20"></div>
+<div>
+<h4 class="font-label-caps text-label-caps tracking-widest uppercase">Isabel &amp; Marcos</h4>
+<p class="font-body-sm text-on-surface-variant">Boda en Hacienda del Sol</p>
+</div>
+</div>
+</div>
+<div class="p-10 border border-outline-variant/30 rounded-xl bg-white/50 backdrop-blur-sm">
+<p class="font-body-lg text-on-surface italic mb-6">"Para nuestro evento corporativo anual necesitábamos algo que reflejara nuestra marca. MNQ fue la elección perfecta: sobriedad y sabor excepcional."</p>
+<div class="flex items-center gap-4">
+<div class="h-12 w-12 rounded-full bg-surface-container-high border border-primary/20"></div>
+<div>
+<h4 class="font-label-caps text-label-caps tracking-widest uppercase">Javier Ruiz</h4>
+<p class="font-body-sm text-on-surface-variant">Director Ejecutivo, TechCorp</p>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</section>
+<!-- Footer -->
+<footer class="w-full py-section-gap bg-surface-container border-t border-outline-variant/20">
+<div class="flex flex-col md:flex-row justify-between items-start px-margin-page max-w-container-max mx-auto gap-gutter">
+<div class="flex flex-col gap-6 max-w-sm">
+<h3 class="font-headline-lg text-headline-lg text-on-surface">MNQ Catering</h3>
+<p class="font-body-sm text-on-surface-variant">© 2024 MNQ Catering y Eventos. Excelencia culinaria. Creando memorias a través de sabores inigualables.</p>
+<div class="flex gap-4">
+<span class="material-symbols-outlined text-primary cursor-pointer hover:opacity-70 transition-opacity" data-icon="instagram">camera</span>
+<span class="material-symbols-outlined text-primary cursor-pointer hover:opacity-70 transition-opacity" data-icon="facebook">social_leaderboard</span>
+</div>
+</div>
+<div class="flex flex-wrap gap-16 md:gap-32">
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-label-caps tracking-widest uppercase text-primary mb-2">Servicios</span>
+<a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Bodas</a>
+<a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Corporativo</a>
+<a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Social</a>
+<a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Talleres</a>
+</div>
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-label-caps tracking-widest uppercase text-primary mb-2">Compañía</span>
+<a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Contacto</a>
+<a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Aviso Legal</a>
+<a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Cookies</a>
+<a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Sostenibilidad</a>
+</div>
+</div>
+</div>
+</footer>
+</body></html>
@@ -0,0 +1,156 @@
+---
+name: MNQ Catering y Eventos
+colors:
+  surface: '#fff8f0'
+  surface-dim: '#e1d9cc'
+  surface-bright: '#fff8f0'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#fbf3e5'
+  surface-container: '#f5eddf'
+  surface-container-high: '#efe7da'
+  surface-container-highest: '#eae1d4'
+  on-surface: '#1f1b13'
+  on-surface-variant: '#4d4635'
+  inverse-surface: '#343027'
+  inverse-on-surface: '#f8f0e2'
+  outline: '#7f7663'
+  outline-variant: '#d0c5af'
+  surface-tint: '#735c00'
+  primary: '#735c00'
+  on-primary: '#ffffff'
+  primary-container: '#d4af37'
+  on-primary-container: '#554300'
+  inverse-primary: '#e9c349'
+  secondary: '#7b5900'
+  on-secondary: '#ffffff'
+  secondary-container: '#fdca64'
+  on-secondary-container: '#755400'
+  tertiary: '#415ba4'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#97b0ff'
+  on-tertiary-container: '#254188'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#ffe088'
+  primary-fixed-dim: '#e9c349'
+  on-primary-fixed: '#241a00'
+  on-primary-fixed-variant: '#574500'
+  secondary-fixed: '#ffdea4'
+  secondary-fixed-dim: '#f1bf5a'
+  on-secondary-fixed: '#261900'
+  on-secondary-fixed-variant: '#5d4200'
+  tertiary-fixed: '#dbe1ff'
+  tertiary-fixed-dim: '#b4c5ff'
+  on-tertiary-fixed: '#00174b'
+  on-tertiary-fixed-variant: '#27438a'
+  background: '#fff8f0'
+  on-background: '#1f1b13'
+  surface-variant: '#eae1d4'
+typography:
+  display-lg:
+    fontFamily: Noto Serif
+    fontSize: 64px
+    fontWeight: '400'
+    lineHeight: '1.1'
+    letterSpacing: -0.02em
+  headline-lg:
+    fontFamily: Noto Serif
+    fontSize: 40px
+    fontWeight: '400'
+    lineHeight: '1.2'
+    letterSpacing: 0.02em
+  headline-md:
+    fontFamily: Noto Serif
+    fontSize: 32px
+    fontWeight: '400'
+    lineHeight: '1.3'
+    letterSpacing: 0.03em
+  body-lg:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.6'
+    letterSpacing: 0em
+  body-sm:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: '1.5'
+    letterSpacing: 0.01em
+  label-caps:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '600'
+    lineHeight: '1'
+    letterSpacing: 0.15em
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  unit: 4px
+  container-max: 1280px
+  gutter: 32px
+  margin-page: 64px
+  section-gap: 120px
+---
+
+## Brand & Style
+
+The visual identity of this design system is rooted in **Editorial Minimalism**. It prioritizes white space—specifically a warm, ivory negative space—to create an atmosphere of calm exclusivity and high-end curation. The aesthetic mirrors a luxury lifestyle magazine: sparse but intentional, where every element is given room to breathe.
+
+The target audience consists of high-net-worth individuals and corporate entities seeking bespoke culinary experiences. The UI must evoke a sense of quiet confidence; it does not shout for attention but relies on perfect proportions and subtle, metallic accents to signal quality. The primary design movement is Contemporary Luxury, blending the cleanliness of Swiss minimalism with the warmth of high-end hospitality.
+
+## Colors
+
+The palette is strictly curated to maintain a premium feel. The **Warm Ivory** surface provides a softer, more sophisticated canvas than pure white, reducing eye strain and evoking the texture of fine stationery. **Deep Graphite** is used for all typography to ensure legibility while maintaining a softer contrast than true black.
+
+**Premium Gold** is reserved strictly for high-impact accents: call-to-action iconography, small decorative dividers, and active states. It is a "surgical" color, used sparingly to retain its value. The **Deeper Gold** is utilized exclusively for hover and pressed states to provide tactile feedback without breaking the established luxury spectrum.
+
+## Typography
+
+Typography in this design system follows an editorial hierarchy. **Noto Serif** is used for headlines to provide a literary, authoritative, and timeless feel. Headlines must utilize generous letter-spacing (tracking) and ample line-height to reinforce the "airy" brand pillar. 
+
+**Inter** serves as the functional workhorse for body copy and UI labels, providing a contemporary, neutral counterpoint to the classicism of the serif headlines. For navigation and small metadata, an uppercase Inter style with increased letter spacing is employed to mimic the look of luxury fashion labels and menu headers.
+
+## Layout & Spacing
+
+This design system utilizes a **Fixed Grid** model centered within the viewport. The layout is structured around a 12-column grid with wide 32px gutters, ensuring that content never feels cramped. 
+
+A high "white-space-to-content" ratio is mandatory. Vertical rhythm is driven by a 4px baseline, but significant sections should be separated by large "air-gaps" (e.g., 120px) to allow the user to focus on one service or culinary highlight at a time. Alignment should favor asymmetrical editorial compositions—where text might occupy the left 4 columns and an image occupies the right 6, leaving intentional voids in the layout.
+
+## Elevation & Depth
+
+To maintain a minimalist and "flat luxury" aesthetic, this design system avoids heavy drop shadows. Depth is instead conveyed through:
+
+1.  **Low-Contrast Outlines:** Surfaces are separated by 1px borders in a slightly darker tint of the background or a very faint gold.
+2.  **Tonal Layering:** Using subtle shifts in surface color (e.g., a slightly more "creamy" ivory) to distinguish between the background and elevated cards.
+3.  **Opacity & Blur:** When a modal or overlay is required, a backdrop blur (frosted glass effect) is used over the ivory background to maintain light flow while establishing a new layer.
+
+## Shapes
+
+The shape language is refined and softened. While a purely sharp aesthetic can feel clinical, the use of a **12px (0.75rem) corner radius** for primary components strikes a balance between contemporary precision and welcoming hospitality. 
+
+Small UI elements like chips or tags use a pill-shape to contrast against the more architectural rectangular forms of image containers and cards. Images themselves should always maintain sharp 90-degree corners to emphasize the editorial, "framed photograph" feel.
+
+## Components
+
+### Buttons
+Primary buttons feature a 12px radius, a 1px border in Premium Gold, and Deep Graphite text. The padding is generous (at least 16px vertical, 32px horizontal). On hover, the border and text transition to Deeper Gold. Secondary buttons use a simple underline style (2px weight) with an uppercase label.
+
+### Cards
+Cards are used to showcase event spaces or menu items. They should have no shadow, instead using a fine 1px border. The image takes up the top 60% of the card, followed by a Noto Serif headline and a brief Inter body text.
+
+### Input Fields
+Inputs are minimalist: a single 1px bottom border that thickens and changes to Premium Gold upon focus. The label floats above the line in uppercase 12px Inter.
+
+### Lists & Navigation
+Navigation links use uppercase Inter with wide tracking. On hover, a thin gold line expands horizontally from the center beneath the text.
+
+### Imagery
+Images are a core component. They should be high-contrast, professional photography with a warm temperature to match the Ivory surface. They act as the primary "texture" of the design system.
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+
+<html class="light" lang="es"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&amp;family=Inter:wght@400;600&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "surface-variant": "#eae1d4",
+                    "error-container": "#ffdad6",
+                    "surface-dim": "#e1d9cc",
+                    "on-surface-variant": "#4d4635",
+                    "surface-container-high": "#efe7da",
+                    "primary-fixed": "#ffe088",
+                    "inverse-primary": "#e9c349",
+                    "primary-fixed-dim": "#e9c349",
+                    "on-primary": "#ffffff",
+                    "secondary-fixed": "#ffdea4",
+                    "secondary-fixed-dim": "#f1bf5a",
+                    "primary-container": "#d4af37",
+                    "error": "#ba1a1a",
+                    "tertiary-fixed-dim": "#b4c5ff",
+                    "surface": "#fff8f0",
+                    "inverse-surface": "#343027",
+                    "tertiary": "#415ba4",
+                    "on-error-container": "#93000a",
+                    "surface-container-lowest": "#ffffff",
+                    "on-secondary": "#ffffff",
+                    "secondary": "#7b5900",
+                    "on-tertiary-fixed-variant": "#27438a",
+                    "on-surface": "#1f1b13",
+                    "on-tertiary-container": "#254188",
+                    "tertiary-fixed": "#dbe1ff",
+                    "primary": "#735c00",
+                    "outline-variant": "#d0c5af",
+                    "surface-tint": "#735c00",
+                    "surface-bright": "#fff8f0",
+                    "on-primary-fixed-variant": "#574500",
+                    "on-error": "#ffffff",
+                    "on-background": "#1f1b13",
+                    "on-tertiary": "#ffffff",
+                    "on-primary-container": "#554300",
+                    "outline": "#7f7663",
+                    "on-secondary-container": "#755400",
+                    "on-primary-fixed": "#241a00",
+                    "on-tertiary-fixed": "#00174b",
+                    "inverse-on-surface": "#f8f0e2",
+                    "tertiary-container": "#97b0ff",
+                    "surface-container-low": "#fbf3e5",
+                    "secondary-container": "#fdca64",
+                    "on-secondary-fixed-variant": "#5d4200",
+                    "on-secondary-fixed": "#261900",
+                    "surface-container": "#f5eddf",
+                    "background": "#fff8f0",
+                    "surface-container-highest": "#eae1d4"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.25rem",
+                    "lg": "0.5rem",
+                    "xl": "0.75rem",
+                    "full": "9999px"
+            },
+            "spacing": {
+                    "margin-page": "64px",
+                    "section-gap": "120px",
+                    "container-max": "1280px",
+                    "gutter": "32px",
+                    "unit": "4px"
+            },
+            "fontFamily": {
+                    "headline-md": ["Noto Serif"],
+                    "label-caps": ["Inter"],
+                    "body-sm": ["Inter"],
+                    "body-lg": ["Inter"],
+                    "headline-lg": ["Noto Serif"],
+                    "display-lg": ["Noto Serif"]
+            },
+            "fontSize": {
+                    "headline-md": ["32px", {"lineHeight": "1.3", "letterSpacing": "0.03em", "fontWeight": "400"}],
+                    "label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.15em", "fontWeight": "600"}],
+                    "body-sm": ["14px", {"lineHeight": "1.5", "letterSpacing": "0.01em", "fontWeight": "400"}],
+                    "body-lg": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
+                    "headline-lg": ["40px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400"}],
+                    "display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "400"}]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
+        }
+        input:focus, textarea:focus {
+            outline: none;
+            border-bottom-color: #d4af37 !important;
+        }
+    </style>
+</head>
+<body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container">
+<!-- TopAppBar Shell -->
+<header class="fixed top-0 w-full z-50 h-20 bg-surface/80 backdrop-blur-md border-b border-outline/10">
+<nav class="flex justify-between items-center px-margin-page max-w-container-max mx-auto h-full">
+<div class="font-headline-md text-headline-md text-primary tracking-tighter">MNQ Catering</div>
+<div class="hidden md:flex gap-gutter items-center">
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface-variant hover:text-primary transition-colors duration-300" href="#">Bodas</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface-variant hover:text-primary transition-colors duration-300" href="#">Corporativo</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface-variant hover:text-primary transition-colors duration-300" href="#">Social</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-primary border-b-2 border-primary pb-1" href="#">Contacto</a>
+</div>
+<div class="flex items-center gap-4">
+<span class="material-symbols-outlined text-primary scale-95 active:scale-90 transition-transform cursor-pointer" data-icon="chat">chat</span>
+<button class="font-label-caps text-label-caps tracking-[0.15em] uppercase bg-primary text-on-primary px-6 py-3 rounded-[12px] hover:opacity-80 transition-all duration-300">WhatsApp</button>
+</div>
+</nav>
+</header>
+<main class="pt-40 pb-section-gap">
+<!-- Hero Section -->
+<section class="max-w-container-max mx-auto px-margin-page mb-section-gap">
+<div class="grid grid-cols-12 gap-gutter">
+<div class="col-span-12 md:col-span-7">
+<h1 class="font-display-lg text-display-lg text-on-surface mb-8">Hablemos de su próximo evento.</h1>
+<p class="font-body-lg text-body-lg text-on-surface-variant max-w-lg">
+                        Diseñamos experiencias gastronómicas a medida. Permítanos conocer sus necesidades para crear una propuesta única y exclusiva.
+                    </p>
+</div>
+</div>
+</section>
+<!-- Contact Content Grid -->
+<section class="max-w-container-max mx-auto px-margin-page">
+<div class="grid grid-cols-12 gap-section-gap items-start">
+<!-- Contact Info Column -->
+<div class="col-span-12 md:col-span-4 flex flex-col gap-12">
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-label-caps text-primary uppercase">Ubicación</span>
+<div class="flex items-start gap-4">
+<span class="material-symbols-outlined text-primary" data-icon="location_on">location_on</span>
+<p class="font-body-lg text-body-lg text-on-surface-variant">Paseo de la Castellana 120,<br/>28046 Madrid, España</p>
+</div>
+</div>
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-label-caps text-primary uppercase">Teléfono</span>
+<div class="flex items-center gap-4">
+<span class="material-symbols-outlined text-primary" data-icon="call">call</span>
+<p class="font-body-lg text-body-lg text-on-surface-variant">+34 912 345 678</p>
+</div>
+</div>
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-label-caps text-primary uppercase">Email</span>
+<div class="flex items-center gap-4">
+<span class="material-symbols-outlined text-primary" data-icon="mail">mail</span>
+<p class="font-body-lg text-body-lg text-on-surface-variant">eventos@mnqcatering.com</p>
+</div>
+</div>
+<div class="mt-8 border-l border-primary/20 pl-6 py-4">
+<p class="font-headline-md text-headline-md text-primary italic">"Excelencia en cada detalle, pasión en cada plato."</p>
+</div>
+</div>
+<!-- Form Column -->
+<div class="col-span-12 md:col-span-8">
+<form class="grid grid-cols-1 md:grid-cols-2 gap-x-gutter gap-y-12">
+<div class="flex flex-col gap-2">
+<label class="font-label-caps text-[10px] tracking-widest text-primary uppercase">Nombre Completo</label>
+<input class="bg-transparent border-t-0 border-x-0 border-b border-outline-variant py-4 font-body-lg text-on-surface focus:ring-0" placeholder="Ej. Javier Sotomayor" type="text"/>
+</div>
+<div class="flex flex-col gap-2">
+<label class="font-label-caps text-[10px] tracking-widest text-primary uppercase">Correo Electrónico</label>
+<input class="bg-transparent border-t-0 border-x-0 border-b border-outline-variant py-4 font-body-lg text-on-surface focus:ring-0" placeholder="javier@empresa.com" type="email"/>
+</div>
+<div class="flex flex-col gap-2">
+<label class="font-label-caps text-[10px] tracking-widest text-primary uppercase">Tipo de Evento</label>
+<select class="bg-transparent border-t-0 border-x-0 border-b border-outline-variant py-4 font-body-lg text-on-surface focus:ring-0 appearance-none">
+<option>Seleccione una opción</option>
+<option>Boda</option>
+<option>Evento Corporativo</option>
+<option>Celebración Social</option>
+<option>Otro</option>
+</select>
+</div>
+<div class="flex flex-col gap-2">
+<label class="font-label-caps text-[10px] tracking-widest text-primary uppercase">Fecha Estimada</label>
+<input class="bg-transparent border-t-0 border-x-0 border-b border-outline-variant py-4 font-body-lg text-on-surface focus:ring-0" type="date"/>
+</div>
+<div class="col-span-1 md:col-span-2 flex flex-col gap-2">
+<label class="font-label-caps text-[10px] tracking-widest text-primary uppercase">Mensaje o Requerimientos Especiales</label>
+<textarea class="bg-transparent border-t-0 border-x-0 border-b border-outline-variant py-4 font-body-lg text-on-surface focus:ring-0 resize-none" placeholder="Cuéntenos más sobre su visión..." rows="4"></textarea>
+</div>
+<div class="col-span-1 md:col-span-2 flex justify-end">
+<button class="group flex items-center gap-4 font-label-caps text-label-caps text-primary border-b-2 border-primary pb-2 uppercase tracking-[0.2em] hover:opacity-70 transition-opacity">
+                                Enviar Solicitud
+                                <span class="material-symbols-outlined transform group-hover:translate-x-2 transition-transform" data-icon="arrow_forward">arrow_forward</span>
+</button>
+</div>
+</form>
+</div>
+</div>
+</section>
+<!-- Stylized Map Section -->
+<section class="mt-section-gap max-w-container-max mx-auto px-margin-page">
+<div class="relative h-[500px] w-full rounded-lg overflow-hidden border border-outline-variant/20 grayscale contrast-75 brightness-105">
+<img alt="Mapa de Madrid" class="w-full h-full object-cover" data-alt="A high-end, minimalist architectural map visualization of a European city grid, rendered in soft ivory and muted grey tones to match a luxury aesthetic. The lighting is diffused and even, creating a calm and professional atmosphere. The map highlights key arteries in a subtle gold tint, emphasizing a premium and exclusive location context for a bespoke catering service." data-location="Madrid, Spain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDa1iS9fPPY_oBxiDtge7eQHmYG62AI1CJeDl00hJNDPBBJCZ073_OUQykqX1b0jW2pr103NyJxwr-HGiazBIBMvthNnhlgf_LrCVZf9BMAYFkFbqHu6phbYmePhKZpqQ1_gFHv5FxIXKBR7ajtzwbN1rDLIoRj0KwVkyRbjNAq9UNWVdTu0lAl1Xfy5RqV4PDVpGy-pmDcFFEGtRHuPk7DVRy3J-nUdZRQRyx-eW2ExDKT-UxDiR5cHU5UpF5AWnoDQxk-5LG9UzIN"/>
+<div class="absolute inset-0 bg-surface/10 pointer-events-none"></div>
+<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center animate-pulse">
+<div class="w-4 h-4 rounded-full bg-primary shadow-lg shadow-primary/50"></div>
+</div>
+</div>
+</div>
+</section>
+</main>
+<!-- Footer Shell -->
+<footer class="bg-surface-container border-t border-outline-variant/20 w-full py-section-gap">
+<div class="flex flex-col md:flex-row justify-between items-start px-margin-page max-w-container-max mx-auto gap-gutter">
+<div class="flex flex-col gap-6">
+<div class="font-headline-lg text-headline-lg text-on-surface">MNQ Catering</div>
+<p class="font-body-sm text-body-sm text-on-surface-variant max-w-[300px]">© 2024 MNQ Catering y Eventos. Excelencia culinaria.</p>
+</div>
+<div class="flex flex-wrap gap-x-12 gap-y-6">
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-[10px] text-primary uppercase">Menú</span>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Bodas</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Corporativo</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Social</a>
+</div>
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-[10px] text-primary uppercase">Compañía</span>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Contacto</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Aviso Legal</a>
+</div>
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-[10px] text-primary uppercase">Social</span>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Instagram</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Facebook</a>
+</div>
+</div>
+</div>
+</footer>
+<!-- Floating WhatsApp CTA -->
+<a class="fixed bottom-12 right-12 z-[60] flex items-center gap-4 bg-primary text-on-primary pl-8 pr-6 py-5 rounded-full shadow-2xl hover:scale-105 active:scale-95 transition-all duration-300 group" href="#">
+<span class="font-label-caps text-label-caps tracking-widest uppercase">Consultar via WhatsApp</span>
+<div class="w-10 h-10 rounded-full bg-on-primary/10 flex items-center justify-center">
+<span class="material-symbols-outlined text-on-primary" data-icon="chat" data-weight="fill" style="font-variation-settings: 'FILL' 1;">chat</span>
+</div>
+</a>
+</body></html>
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+
+<html class="light" lang="es"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&amp;family=Inter:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        }
+        .ivory-gradient {
+            background: linear-gradient(to bottom, #fff8f0, #f5eddf);
+        }
+        .gold-border-hover:hover {
+            border-bottom-color: #d4af37;
+        }
+        body {
+            background-color: #fff8f0;
+        }
+    </style>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "surface-variant": "#eae1d4",
+                        "error-container": "#ffdad6",
+                        "surface-dim": "#e1d9cc",
+                        "on-surface-variant": "#4d4635",
+                        "surface-container-high": "#efe7da",
+                        "primary-fixed": "#ffe088",
+                        "inverse-primary": "#e9c349",
+                        "primary-fixed-dim": "#e9c349",
+                        "on-primary": "#ffffff",
+                        "secondary-fixed": "#ffdea4",
+                        "secondary-fixed-dim": "#f1bf5a",
+                        "primary-container": "#d4af37",
+                        "error": "#ba1a1a",
+                        "tertiary-fixed-dim": "#b4c5ff",
+                        "surface": "#fff8f0",
+                        "inverse-surface": "#343027",
+                        "tertiary": "#415ba4",
+                        "on-error-container": "#93000a",
+                        "surface-container-lowest": "#ffffff",
+                        "on-secondary": "#ffffff",
+                        "secondary": "#7b5900",
+                        "on-tertiary-fixed-variant": "#27438a",
+                        "on-surface": "#1f1b13",
+                        "on-tertiary-container": "#254188",
+                        "tertiary-fixed": "#dbe1ff",
+                        "primary": "#735c00",
+                        "outline-variant": "#d0c5af",
+                        "surface-tint": "#735c00",
+                        "surface-bright": "#fff8f0",
+                        "on-primary-fixed-variant": "#574500",
+                        "on-error": "#ffffff",
+                        "on-background": "#1f1b13",
+                        "on-tertiary": "#ffffff",
+                        "on-primary-container": "#554300",
+                        "outline": "#7f7663",
+                        "on-secondary-container": "#755400",
+                        "on-primary-fixed": "#241a00",
+                        "on-tertiary-fixed": "#00174b",
+                        "inverse-on-surface": "#f8f0e2",
+                        "tertiary-container": "#97b0ff",
+                        "surface-container-low": "#fbf3e5",
+                        "secondary-container": "#fdca64",
+                        "on-secondary-fixed-variant": "#5d4200",
+                        "on-secondary-fixed": "#261900",
+                        "surface-container": "#f5eddf",
+                        "background": "#fff8f0",
+                        "surface-container-highest": "#eae1d4"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "full": "9999px"
+                    },
+                    "spacing": {
+                        "margin-page": "64px",
+                        "section-gap": "120px",
+                        "container-max": "1280px",
+                        "gutter": "32px",
+                        "unit": "4px"
+                    },
+                    "fontFamily": {
+                        "headline-md": ["Noto Serif"],
+                        "label-caps": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "body-lg": ["Inter"],
+                        "headline-lg": ["Noto Serif"],
+                        "display-lg": ["Noto Serif"]
+                    },
+                    "fontSize": {
+                        "headline-md": ["32px", {"lineHeight": "1.3", "letterSpacing": "0.03em", "fontWeight": "400"}],
+                        "label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.15em", "fontWeight": "600"}],
+                        "body-sm": ["14px", {"lineHeight": "1.5", "letterSpacing": "0.01em", "fontWeight": "400"}],
+                        "body-lg": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
+                        "headline-lg": ["40px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400"}],
+                        "display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "400"}]
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-surface text-on-surface font-body-lg">
+<!-- TopNavBar -->
+<nav class="fixed top-0 w-full z-50 h-20 bg-surface/80 backdrop-blur-md border-b border-outline/10">
+<div class="flex justify-between items-center px-margin-page max-w-container-max mx-auto h-full">
+<div class="font-headline-md text-headline-md text-primary tracking-tighter">MNQ Catering</div>
+<div class="hidden md:flex gap-gutter items-center">
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface-variant hover:text-primary transition-colors duration-300" href="#">Bodas</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-primary border-b-2 border-primary pb-1" href="#">Corporativo</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface-variant hover:text-primary transition-colors duration-300" href="#">Social</a>
+</div>
+<div class="flex items-center gap-4">
+<span class="material-symbols-outlined text-primary cursor-pointer hover:opacity-80 transition-all">chat</span>
+<button class="font-label-caps text-label-caps tracking-[0.15em] uppercase border border-primary-container px-6 py-2 rounded-lg text-primary hover:bg-primary-container hover:text-white transition-all duration-300">WhatsApp</button>
+</div>
+</div>
+</nav>
+<!-- Hero Section -->
+<header class="relative pt-40 pb-section-gap px-margin-page overflow-hidden">
+<div class="max-w-container-max mx-auto grid grid-cols-1 md:grid-cols-12 gap-gutter items-center">
+<div class="md:col-span-6 z-10">
+<p class="font-label-caps text-label-caps text-primary uppercase mb-6">Excelencia en Eventos</p>
+<h1 class="font-display-lg text-display-lg text-on-surface mb-8">Corporativo &amp; Business</h1>
+<p class="text-on-surface-variant max-w-lg mb-10 leading-relaxed">Elevamos la imagen de su empresa a través de experiencias gastronómicas impecables. Desde lanzamientos de marca disruptivos hasta galas institucionales de alto nivel.</p>
+<div class="flex gap-6">
+<button class="bg-primary-container text-on-primary font-label-caps text-label-caps px-8 py-4 rounded-lg hover:opacity-90 transition-opacity">Solicitar Propuesta</button>
+<button class="border-b-2 border-primary text-primary font-label-caps text-label-caps py-4 tracking-widest uppercase">Ver Catálogo</button>
+</div>
+</div>
+<div class="md:col-span-6 relative h-[600px]">
+<img alt="Corporate Event" class="w-full h-full object-cover rounded-xl shadow-sm border border-outline-variant/20" data-alt="A sophisticated corporate event setting in a bright minimalist hall with high ceilings. Professional attendees in business attire are engaged in conversation around high-end catering stations featuring artisanal hors d'oeuvres. The lighting is warm and natural, reflecting off polished ivory surfaces and subtle gold accents. The atmosphere is quiet, exclusive, and highly curated for a brand launch." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBwGttFkNMy3d8s0siK37fCUCUnvGFtXTj31XUJ4jlXsoOIJvrkA7CrtdfHj8sax5fZxYyaheAke8d1nUGUlEPKnkZbJVhyajIeGSln9Tft75eZBe6P_Hua03nK7rWjJ2wmHbJ5RVRPeLOhcJcETXUBNJ-41ad8-L2EIabd89d2SHiGX-jUA49pstBYA5ScWlQXWHEnG0nXfc7IQLPZn__HmvIjvzksDkb8KqUwpqbUBXjQ6P40ffqStNLOPfXWxJOrJHYYumqv3P5k"/>
+</div>
+</div>
+</header>
+<!-- Services Bento Grid -->
+<section class="py-section-gap px-margin-page bg-surface-container-low">
+<div class="max-w-container-max mx-auto">
+<div class="text-center mb-section-gap/2">
+<h2 class="font-headline-lg text-headline-lg text-on-surface mb-4">Servicios Especializados</h2>
+<div class="w-12 h-1 bg-primary-container mx-auto"></div>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-12 grid-rows-2 gap-gutter h-auto md:h-[800px]">
+<!-- Item 1: Brand Launches -->
+<div class="md:col-span-7 md:row-span-1 group relative overflow-hidden rounded-xl border border-outline-variant/30 bg-surface">
+<img alt="Lanzamientos" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" data-alt="Detail of a luxury brand launch catering setup with minimalist design. Artisanal food items are presented as art on white porcelain pedestals under focused soft lighting. The background is a clean ivory wall with a subtle golden logo visible. The composition is asymmetrical and modern, emphasizing the luxury lifestyle and high-end curation of the event." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPzgKnmXMmh2oeXBBJKjzfBYJpAuTSnLJRgejOH72yIYa67xESPqj9y-T2TMvgaF6fXWQeQ_EPiA6TIdjepwyrH_uB3NY4Ld9gDt5ndttrCtTdNraziTgvV_rdmRv5MnfRcoVbUEY0grlQ8WWZ7V0KW_lZvcTowGSwp52NVnn2rfTur-UiWWqLTttVXdR7NWWAMQhCdgooIuxkmMBWULehKJvb0FpVo_wOau6u0LgyYilMimu-gjrK0vuC8ZZx9YNNAseeZnLlDFfQ"/>
+<div class="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>
+<div class="absolute bottom-0 left-0 p-10">
+<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Lanzamientos de Marca</h3>
+<p class="text-on-surface-variant max-w-sm">Impacto visual y conceptual para presentaciones que trascienden.</p>
+</div>
+</div>
+<!-- Item 2: Coffee Breaks -->
+<div class="md:col-span-5 md:row-span-2 group relative overflow-hidden rounded-xl border border-outline-variant/30 bg-surface">
+<img alt="Coffee Breaks" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" data-alt="Premium coffee break setup for a corporate meeting. A sleek chrome espresso machine sits alongside delicate pastries and fresh fruit platters on a minimalist ivory countertop. Soft morning sunlight streams through a large window, creating a warm and welcoming atmosphere. The setting is clean, professional, and elegant, reflecting a high-standard business environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnD0onnD5vPxcBgFV-3c0eNE0f_qER8jHSuGhjnbFIjBxszaXltR2yNxJO_odwYKCbzGIOnUPX1d5s2LHmXJ1hWLnZJtx3DcH277Um4asP--yDsTiyDXa8TXO4rsFgMhBbVujhhi-Dt1Sb4QKLTlCb8OPRe6ybs1gyQak4XkrkD-iHuxQWXbbsPynGN8V8eVYBv_QwSnfBZ9gmj-gOl2r4oC7oEkh7HuS2dEwX4vVSpufYwXtOvcr9o0G-A13r2gfK1d9uGGKRVA7c"/>
+<div class="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>
+<div class="absolute bottom-0 left-0 p-10">
+<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Coffee Breaks Premium</h3>
+<p class="text-on-surface-variant">Pausas que inspiran productividad y networking de calidad.</p>
+</div>
+</div>
+<!-- Item 3: Galas -->
+<div class="md:col-span-7 md:row-span-1 group relative overflow-hidden rounded-xl border border-outline-variant/30 bg-surface">
+<img alt="Galas" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" data-alt="A grand gala dinner setup in a luxury venue. Long tables are dressed in fine white linen with crystal glassware and gold cutlery reflecting the warm ambient candlelight. The floral centerpieces are minimal yet elegant in white and green. The room is spacious and evokes a sense of high-end hospitality and exclusive corporate celebration." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBoZ97F9rWrnN-h0MTz6jQO2T9DpVf0zv1hNQQe48tVsQFQUZuOvRcoazntDJRdhp-YPgS1cvbDCCxUnY-Rhz1NVYjWnqZbvZPXo2zNMaahlGz7Sjwe5QIIrKJjGq0nA9ITz6MoEQigUdkhg83_7o2tsUodamZNP2M91aNYGd7U2YMrkyjBXt1oZRT5HjdihLf1vnacnVADtx3tL0KReWWAm29gW_EwkYjnojSzhfnezKNsNAjrYrTiOMUDUKKh5sPvBS2kqwIDWVuG"/>
+<div class="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>
+<div class="absolute bottom-0 left-0 p-10">
+<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Galas &amp; Cenas Anuales</h3>
+<p class="text-on-surface-variant max-w-sm">Protocolo impecable para los momentos más solemnes de su organización.</p>
+</div>
+</div>
+</div>
+</div>
+</section>
+<!-- Client Trust Section -->
+<section class="py-24 px-margin-page bg-surface">
+<div class="max-w-container-max mx-auto">
+<p class="font-label-caps text-label-caps text-outline text-center uppercase tracking-[0.2em] mb-12">Empresas que confían en nuestra visión</p>
+<div class="flex flex-wrap justify-center items-center gap-16 opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
+<span class="font-display-lg text-headline-md font-bold tracking-widest text-on-surface-variant">LUMINA</span>
+<span class="font-headline-lg text-headline-md italic text-on-surface-variant">Vanguard</span>
+<span class="font-body-lg text-headline-md font-extrabold uppercase text-on-surface-variant">Ethereal.</span>
+<span class="font-headline-md text-headline-md text-on-surface-variant">Nordic Corp</span>
+<span class="font-label-caps text-headline-md tracking-tighter text-on-surface-variant">Apex Sol.</span>
+</div>
+</div>
+</section>
+<!-- Quote Form Section -->
+<section class="py-section-gap px-margin-page bg-surface-container-high relative overflow-hidden">
+<div class="max-w-4xl mx-auto bg-surface p-12 md:p-20 rounded-xl border border-outline-variant/20 relative z-10">
+<div class="text-center mb-16">
+<h2 class="font-headline-lg text-headline-lg text-on-surface mb-4">Cotización Corporativa</h2>
+<p class="text-on-surface-variant font-body-lg">Diseñamos una propuesta a la medida de sus objetivos empresariales.</p>
+</div>
+<form class="space-y-12">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
+<div class="relative">
+<input class="w-full bg-transparent border-0 border-b border-outline-variant/50 focus:ring-0 focus:border-primary-container px-0 py-4 transition-all peer placeholder-transparent" id="company" placeholder="Empresa" type="text"/>
+<label class="absolute left-0 -top-4 font-label-caps text-label-caps text-outline uppercase peer-placeholder-shown:top-4 peer-placeholder-shown:text-body-lg peer-focus:-top-4 peer-focus:text-primary transition-all" for="company">Empresa</label>
+</div>
+<div class="relative">
+<input class="w-full bg-transparent border-0 border-b border-outline-variant/50 focus:ring-0 focus:border-primary-container px-0 py-4 transition-all peer placeholder-transparent" id="email" placeholder="Correo Corporativo" type="email"/>
+<label class="absolute left-0 -top-4 font-label-caps text-label-caps text-outline uppercase peer-placeholder-shown:top-4 peer-placeholder-shown:text-body-lg peer-focus:-top-4 peer-focus:text-primary transition-all" for="email">Correo Corporativo</label>
+</div>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
+<div class="relative">
+<select class="w-full bg-transparent border-0 border-b border-outline-variant/50 focus:ring-0 focus:border-primary-container px-0 py-4 transition-all peer" id="event_type">
+<option value="">Tipo de Evento</option>
+<option value="launch">Lanzamiento de Marca</option>
+<option value="gala">Gala / Cena</option>
+<option value="coffee">Coffee Break</option>
+<option value="other">Otro</option>
+</select>
+<label class="absolute left-0 -top-4 font-label-caps text-label-caps text-primary uppercase" for="event_type">Tipo de Evento</label>
+</div>
+<div class="relative">
+<input class="w-full bg-transparent border-0 border-b border-outline-variant/50 focus:ring-0 focus:border-primary-container px-0 py-4 transition-all peer placeholder-transparent" id="guests" placeholder="Nº Asistentes" type="number"/>
+<label class="absolute left-0 -top-4 font-label-caps text-label-caps text-outline uppercase peer-placeholder-shown:top-4 peer-placeholder-shown:text-body-lg peer-focus:-top-4 peer-focus:text-primary transition-all" for="guests">Nº Asistentes</label>
+</div>
+</div>
+<div class="relative">
+<textarea class="w-full bg-transparent border-0 border-b border-outline-variant/50 focus:ring-0 focus:border-primary-container px-0 py-4 transition-all peer placeholder-transparent" id="message" placeholder="Detalles Adicionales" rows="3"></textarea>
+<label class="absolute left-0 -top-4 font-label-caps text-label-caps text-outline uppercase peer-placeholder-shown:top-4 peer-placeholder-shown:text-body-lg peer-focus:-top-4 peer-focus:text-primary transition-all" for="message">Detalles Adicionales</label>
+</div>
+<div class="flex justify-center pt-8">
+<button class="bg-primary text-on-primary font-label-caps text-label-caps px-12 py-5 rounded-lg hover:bg-primary-container transition-colors tracking-widest uppercase" type="submit">Enviar Solicitud</button>
+</div>
+</form>
+</div>
+<!-- Abstract Background Shape -->
+<div class="absolute top-0 right-0 w-1/3 h-full bg-surface-variant/20 -skew-x-12 transform origin-top translate-x-1/2"></div>
+</section>
+<!-- Footer -->
+<footer class="w-full py-section-gap bg-surface-container border-t border-outline-variant/20">
+<div class="flex flex-col md:flex-row justify-between items-start px-margin-page max-w-container-max mx-auto gap-gutter">
+<div class="flex flex-col gap-6">
+<div class="font-headline-lg text-headline-lg text-on-surface">MNQ Catering</div>
+<p class="font-body-sm text-body-sm text-on-surface-variant max-w-xs">© 2024 MNQ Catering y Eventos. Excelencia culinaria para momentos memorables.</p>
+</div>
+<div class="grid grid-cols-2 gap-16">
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-label-caps text-primary uppercase">Empresa</span>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Contacto</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Aviso Legal</a>
+</div>
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-label-caps text-primary uppercase">Social</span>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Instagram</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Facebook</a>
+</div>
+</div>
+</div>
+</footer>
+</body></html>
@@ -0,0 +1,292 @@
+<!DOCTYPE html>
+
+<html class="light" lang="es"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Inter:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "surface-variant": "#eae1d4",
+                    "error-container": "#ffdad6",
+                    "surface-dim": "#e1d9cc",
+                    "on-surface-variant": "#4d4635",
+                    "surface-container-high": "#efe7da",
+                    "primary-fixed": "#ffe088",
+                    "inverse-primary": "#e9c349",
+                    "primary-fixed-dim": "#e9c349",
+                    "on-primary": "#ffffff",
+                    "secondary-fixed": "#ffdea4",
+                    "secondary-fixed-dim": "#f1bf5a",
+                    "primary-container": "#d4af37",
+                    "error": "#ba1a1a",
+                    "tertiary-fixed-dim": "#b4c5ff",
+                    "surface": "#fff8f0",
+                    "inverse-surface": "#343027",
+                    "tertiary": "#415ba4",
+                    "on-error-container": "#93000a",
+                    "surface-container-lowest": "#ffffff",
+                    "on-secondary": "#ffffff",
+                    "secondary": "#7b5900",
+                    "on-tertiary-fixed-variant": "#27438a",
+                    "on-surface": "#1f1b13",
+                    "on-tertiary-container": "#254188",
+                    "tertiary-fixed": "#dbe1ff",
+                    "primary": "#735c00",
+                    "outline-variant": "#d0c5af",
+                    "surface-tint": "#735c00",
+                    "surface-bright": "#fff8f0",
+                    "on-primary-fixed-variant": "#574500",
+                    "on-error": "#ffffff",
+                    "on-background": "#1f1b13",
+                    "on-tertiary": "#ffffff",
+                    "on-primary-container": "#554300",
+                    "outline": "#7f7663",
+                    "on-secondary-container": "#755400",
+                    "on-primary-fixed": "#241a00",
+                    "on-tertiary-fixed": "#00174b",
+                    "inverse-on-surface": "#f8f0e2",
+                    "tertiary-container": "#97b0ff",
+                    "surface-container-low": "#fbf3e5",
+                    "secondary-container": "#fdca64",
+                    "on-secondary-fixed-variant": "#5d4200",
+                    "on-secondary-fixed": "#261900",
+                    "surface-container": "#f5eddf",
+                    "background": "#fff8f0",
+                    "surface-container-highest": "#eae1d4"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.25rem",
+                    "lg": "0.5rem",
+                    "xl": "0.75rem",
+                    "full": "9999px"
+            },
+            "spacing": {
+                    "margin-page": "64px",
+                    "section-gap": "120px",
+                    "container-max": "1280px",
+                    "gutter": "32px",
+                    "unit": "4px"
+            },
+            "fontFamily": {
+                    "headline-md": ["Noto Serif"],
+                    "label-caps": ["Inter"],
+                    "body-sm": ["Inter"],
+                    "body-lg": ["Inter"],
+                    "headline-lg": ["Noto Serif"],
+                    "display-lg": ["Noto Serif"]
+            },
+            "fontSize": {
+                    "headline-md": ["32px", {"lineHeight": "1.3", "letterSpacing": "0.03em", "fontWeight": "400"}],
+                    "label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.15em", "fontWeight": "600"}],
+                    "body-sm": ["14px", {"lineHeight": "1.5", "letterSpacing": "0.01em", "fontWeight": "400"}],
+                    "body-lg": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
+                    "headline-lg": ["40px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400"}],
+                    "display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "400"}]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+        body { background-color: #fff8f0; }
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        }
+        .editorial-shadow { box-shadow: 0 10px 30px -15px rgba(115, 92, 0, 0.1); }
+    </style>
+</head>
+<body class="text-on-surface font-body-lg selection:bg-primary-fixed selection:text-on-primary-fixed">
+<!-- TopNavBar -->
+<nav class="fixed top-0 w-full z-50 h-20 bg-surface/80 backdrop-blur-md border-b border-outline/10">
+<div class="flex justify-between items-center px-margin-page max-w-container-max mx-auto h-full">
+<div class="font-headline-md text-headline-md text-primary tracking-tighter">MNQ Catering</div>
+<div class="hidden md:flex items-center gap-8">
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Bodas</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Corporativo</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Social</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-primary border-b-2 border-primary pb-1" href="#">Nosotros</a>
+</div>
+<div class="flex items-center gap-4">
+<button class="material-symbols-outlined text-primary hover:opacity-80 transition-all duration-300 scale-95 active:scale-90" data-icon="chat">chat</button>
+<button class="hidden md:block font-label-caps text-label-caps uppercase border border-primary px-6 py-2 rounded-[12px] text-primary hover:bg-primary hover:text-on-primary transition-all duration-300">WhatsApp</button>
+</div>
+</div>
+</nav>
+<main class="pt-20">
+<!-- Hero Section: Editorial Intro -->
+<section class="px-margin-page py-section-gap max-w-container-max mx-auto">
+<div class="grid grid-cols-12 gap-gutter items-center">
+<div class="col-span-12 md:col-span-5 mb-12 md:mb-0">
+<span class="font-label-caps text-label-caps uppercase text-primary tracking-widest mb-6 block">Nuestra Esencia</span>
+<h1 class="font-display-lg text-display-lg text-on-surface mb-8">El arte de la hospitalidad elevada.</h1>
+<p class="text-body-lg text-on-surface-variant max-w-md leading-relaxed">
+                        Desde nuestra fundación, MNQ Catering ha redefinido el concepto de exclusividad culinaria. No solo servimos comida; curamos momentos que perduran en la memoria de los paladares más exigentes.
+                    </p>
+</div>
+<div class="col-span-12 md:col-span-7 relative">
+<div class="aspect-[4/5] overflow-hidden rounded-lg">
+<img class="w-full h-full object-cover grayscale-[20%] hover:scale-105 transition-transform duration-700" data-alt="A high-end, luxury table setting in a sun-drenched, minimalist ivory room. The scene features delicate gold cutlery, fine bone china, and a single sculptural floral arrangement. The lighting is soft and directional, creating long shadows that emphasize the editorial and exclusive atmosphere of a high-society event. The color palette is strictly warm ivory, deep graphite, and metallic gold accents, reflecting a contemporary luxury aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEsy10c7TIuiKBlcDuPGrkutEtMuZbSwBvphj556kuPvK7igCXI-VWqHL6_MjslUd4lQNBGrkqtiqk9vpAhm3bK8RVgUhZ-OURzHtQ5reFcQ0rekIS3LEL26_KFk2GWzzSX_JROpWCAGaJfLZWdFIblN_YO-4rTPGeTtKXCFAcglZyaIe-wYb-av56YJfufKAOu1gdtyvppiopoBEeG8G40w22gLhoEKKK9xW45IoxpG6Bp7ywr4ExCya4wiMoEyTtPvr5kgimm75c"/>
+</div>
+<div class="absolute -bottom-10 -left-10 bg-surface-container p-10 hidden lg:block border border-outline-variant/30">
+<p class="font-headline-md text-headline-md text-secondary italic">"La perfección no es un acto, es un hábito."</p>
+</div>
+</div>
+</div>
+</section>
+<!-- Philosophy Section -->
+<section class="bg-surface-container-low py-section-gap border-y border-outline-variant/10">
+<div class="px-margin-page max-w-container-max mx-auto">
+<div class="grid grid-cols-12 gap-gutter">
+<div class="col-span-12 md:col-start-2 md:col-span-4">
+<h2 class="font-headline-lg text-headline-lg mb-8">Filosofía de Exclusividad</h2>
+</div>
+<div class="col-span-12 md:col-span-6 space-y-8">
+<p class="font-body-lg text-on-surface-variant">
+                            Creemos que cada evento tiene su propia alma. Nuestra filosofía se basa en la escucha activa y la personalización radical. En un mundo de producciones en serie, MNQ apuesta por lo artesanal, lo local y lo extraordinario.
+                        </p>
+<p class="font-body-lg text-on-surface-variant">
+                            Cada ingrediente es seleccionado por su trazabilidad y calidad superior, trabajando codo a codo con productores que comparten nuestra pasión por la excelencia.
+                        </p>
+<div class="pt-4">
+<a class="inline-block font-label-caps text-label-caps uppercase border-b-2 border-primary-container pb-1 text-on-surface hover:text-primary transition-all" href="#">Explorar Menú de Autor</a>
+</div>
+</div>
+</div>
+</div>
+</section>
+<!-- Values Grid -->
+<section class="px-margin-page py-section-gap max-w-container-max mx-auto">
+<div class="text-center mb-24">
+<span class="font-label-caps text-label-caps uppercase text-primary tracking-widest block mb-4">Pilares de Marca</span>
+<h2 class="font-headline-lg text-headline-lg">Valores que nos definen</h2>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
+<!-- Value 1 -->
+<div class="p-10 border border-outline-variant/30 hover:bg-surface-container transition-colors duration-500 text-center flex flex-col items-center">
+<span class="material-symbols-outlined text-4xl text-primary mb-6" data-icon="verified">verified</span>
+<h3 class="font-headline-md text-headline-md mb-4">Calidad</h3>
+<p class="font-body-sm text-on-surface-variant leading-relaxed">
+                        Innegociable. Desde la frescura del producto hasta el último detalle del servicio de sala.
+                    </p>
+</div>
+<!-- Value 2 -->
+<div class="p-10 border border-outline-variant/30 hover:bg-surface-container transition-colors duration-500 text-center flex flex-col items-center">
+<span class="material-symbols-outlined text-4xl text-primary mb-6" data-icon="history_edu">history_edu</span>
+<h3 class="font-headline-md text-headline-md mb-4">Tradición</h3>
+<p class="font-body-sm text-on-surface-variant leading-relaxed">
+                        Honramos las técnicas clásicas que han forjado la gran cocina, aplicándolas con respeto.
+                    </p>
+</div>
+<!-- Value 3 -->
+<div class="p-10 border border-outline-variant/30 hover:bg-surface-container transition-colors duration-500 text-center flex flex-col items-center">
+<span class="material-symbols-outlined text-4xl text-primary mb-6" data-icon="architecture">architecture</span>
+<h3 class="font-headline-md text-headline-md mb-4">Vanguardia</h3>
+<p class="font-body-sm text-on-surface-variant leading-relaxed">
+                        Innovamos en presentaciones y texturas para sorprender a los paladares contemporáneos.
+                    </p>
+</div>
+</div>
+</section>
+<!-- Team Portraits -->
+<section class="bg-on-background py-section-gap overflow-hidden">
+<div class="px-margin-page max-w-container-max mx-auto">
+<div class="flex flex-col md:flex-row justify-between items-end mb-20">
+<div>
+<span class="font-label-caps text-label-caps uppercase text-primary-fixed-dim tracking-widest block mb-4">El Capital Humano</span>
+<h2 class="font-headline-lg text-headline-lg text-surface-bright">Mentes tras el menú</h2>
+</div>
+<p class="text-surface-variant max-w-xs mt-6 md:mt-0 font-body-sm opacity-80">
+                        Un equipo multidisciplinar de chefs, sommeliers y diseñadores de eventos unidos por un propósito común.
+                    </p>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+<!-- Member 1 -->
+<div class="group">
+<div class="aspect-[3/4] overflow-hidden mb-6 bg-surface-dim">
+<img class="w-full h-full object-cover grayscale filter group-hover:grayscale-0 transition-all duration-700" data-alt="A minimalist, high-contrast black and white portrait of a professional chef wearing a crisp white designer uniform. The lighting is dramatic and moody, reminiscent of a luxury fashion magazine editorial. The chef is looking thoughtfully off-camera, against a deep graphite background that creates a sense of focused expertise and quiet confidence. The image quality is extremely high-resolution, highlighting the texture of the fabric and the subtle details of the setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB2HWdfbtlZzhTpPlhOvsGhIgTSKkngesYpZac0mVHtIX1oO6_FAouwwzj1X7r9NhWolfewWefTpJj5rlSHD9uL-3VeGVrfSZ0bM6DhgbyRyw8yOtw_vaPrBb3aB56JJ9jRDcj9OaQvVAYkHh1QJK5Zva6c01SOOVQyJKg-Lv1lPf8L9cDF0vOU9CEQvXoTwGN-Oebd4qjvrG_BAwSh2TeoldN-T0gVbGT1pjl4RurS188fIVVz_jyZXkYlH69C_4LRBuXFjGYb-mw5"/>
+</div>
+<h4 class="font-headline-md text-[20px] text-surface-bright mb-1">Mateo Navarro</h4>
+<p class="font-label-caps text-[10px] uppercase text-primary-fixed-dim tracking-widest">Director Ejecutivo</p>
+</div>
+<!-- Member 2 -->
+<div class="group">
+<div class="aspect-[3/4] overflow-hidden mb-6 bg-surface-dim">
+<img class="w-full h-full object-cover grayscale filter group-hover:grayscale-0 transition-all duration-700" data-alt="An editorial portrait of a female head chef in a minimalist studio environment. She is dressed in a contemporary dark culinary apron over a white shirt. The lighting is soft and warm, casting gentle shadows across a clean, ivory-toned background. Her expression is welcoming yet professional, embodying the high-end hospitality and creative leadership of MNQ Catering. The aesthetic is clean, spacious, and sophisticated, reflecting a luxury lifestyle brand." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBDTUo_hPm6uH3Iu69DoMjRDhuht6tOT9ysefoIfKxGdfnL6i8u8-iic_XWSA22icg8tcqXJd5uvcKFXSCXR25t3_XYAKx4NPD01z1RWgo0gJZGIZq2DYfRBirKItWguimzzVpOcMNMRzHS3C__BtXj5OhdSHcWULYZWP9pY41Eo-nGy-GrAcrkG6_Gg5eRaoC3JxZ2jpSo1i5PPF2VOcV50uw61MJQzMs5wXN300Ia6n1lq0RqMVloKtUwHQVDIoSBy1ota565rRIp"/>
+</div>
+<h4 class="font-headline-md text-[20px] text-surface-bright mb-1">Lucía Quintana</h4>
+<p class="font-label-caps text-[10px] uppercase text-primary-fixed-dim tracking-widest">Chef Creativa</p>
+</div>
+<!-- Member 3 -->
+<div class="group">
+<div class="aspect-[3/4] overflow-hidden mb-6 bg-surface-dim">
+<img class="w-full h-full object-cover grayscale filter group-hover:grayscale-0 transition-all duration-700" data-alt="A professional sommelier in a formal, well-tailored suit, captured in an editorial style. The scene is set in a dimly lit, high-end cellar environment with subtle glints of light reflecting off glass. The palette is dominated by deep warm tones and soft gold light, creating a mood of refined knowledge and luxury. The portrait is framed asymmetrically, leaving significant negative space that aligns with a minimalist editorial design system." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8tUrNTv6tThqFUgf0ma33h44TXZzaunQbmybY5EdTEV08KIHpBTObR11s7JH4iMnfXQsO3tBAPPv2QSN7wwB32RlpSIq7d4_oiZjUCqc1E4xXaDM5-iN1S2RDQ84sh5MpANGu8N2vq3Yy8wlGiBM7sEpdSBBX0vrGUBq96VW3a0ZFrvcjrEQ9EUZ0K99Rp_wYRN1WKkcgmjqbqneB5TI6-O103h3p1l2yE6ph9cQJVpus9094IYcFvUdD-fPDrqkx4pRNHvlolfFq"/>
+</div>
+<h4 class="font-headline-md text-[20px] text-surface-bright mb-1">Julián Marín</h4>
+<p class="font-label-caps text-[10px] uppercase text-primary-fixed-dim tracking-widest">Head Sommelier</p>
+</div>
+<!-- Member 4 -->
+<div class="group">
+<div class="aspect-[3/4] overflow-hidden mb-6 bg-surface-dim">
+<img class="w-full h-full object-cover grayscale filter group-hover:grayscale-0 transition-all duration-700" data-alt="A high-fashion editorial portrait of an event designer in a modern, light-filled office space. She is surrounded by architectural sketches and textile samples in neutral tones. The composition uses a shallow depth of field, focusing on her confident expression while the background softly blurs into ivory and gold textures. The overall lighting is bright and airy, signifying creativity and a meticulous eye for luxury event planning details." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQcsf26GhYpW_rbFJnYD8MaVWfcnSfqLC4kcVWwEMx7baaVu_tui4XfKOKXjlNXXCYRyIUWHz30hIB_S1V7wcMz45SKfp54sKNN8QXh3450n_-ExR8VfcWlyUTCJ4evEo8fsgbhjVdMkROeyteKxC3Zr1EI034zmAQsHtV4RAl5aEvUK_Q2FvmuJPE-BujE9ep_pvUhpPOBd0u_KfacYnFZCHKXFhaBnrCGr5HPpJdg-ECpN-VWkl8cEAxc-AtxI_hx0RDqCRjsm7I"/>
+</div>
+<h4 class="font-headline-md text-[20px] text-surface-bright mb-1">Elena Soler</h4>
+<p class="font-label-caps text-[10px] uppercase text-primary-fixed-dim tracking-widest">Diseño de Experiencias</p>
+</div>
+</div>
+</div>
+</section>
+<!-- CTA Section -->
+<section class="px-margin-page py-section-gap max-w-container-max mx-auto text-center">
+<div class="max-w-2xl mx-auto">
+<h2 class="font-display-lg text-display-lg mb-8">¿Planeamos algo extraordinario?</h2>
+<p class="font-body-lg text-on-surface-variant mb-12">Estamos listos para transformar su visión en una realidad gastronómica sin precedentes.</p>
+<button class="bg-primary text-on-primary px-12 py-5 rounded-[12px] font-label-caps text-label-caps uppercase tracking-widest hover:bg-primary-container transition-all shadow-lg shadow-primary/10">Solicitar Dosier Exclusivo</button>
+</div>
+</section>
+</main>
+<!-- Footer -->
+<footer class="bg-surface-container border-t border-outline-variant/20 w-full py-section-gap">
+<div class="flex flex-col md:flex-row justify-between items-start px-margin-page max-w-container-max mx-auto gap-gutter">
+<div class="mb-12 md:mb-0">
+<div class="font-headline-lg text-headline-lg text-on-surface mb-4">MNQ</div>
+<p class="font-body-sm text-on-surface-variant max-w-xs">
+                    Excelencia culinaria y diseño de eventos para los momentos más significativos de la vida.
+                </p>
+</div>
+<div class="grid grid-cols-2 gap-16">
+<div>
+<span class="font-label-caps text-[10px] uppercase text-primary mb-6 block">Navegación</span>
+<ul class="space-y-4">
+<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Eventos</a></li>
+<li><a class="font-body-sm text-primary underline" href="#">Nosotros</a></li>
+<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Gastronomía</a></li>
+<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Espacios</a></li>
+</ul>
+</div>
+<div>
+<span class="font-label-caps text-[10px] uppercase text-primary mb-6 block">Legal &amp; Social</span>
+<ul class="space-y-4">
+<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Contacto</a></li>
+<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Aviso Legal</a></li>
+<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Instagram</a></li>
+<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Facebook</a></li>
+</ul>
+</div>
+</div>
+</div>
+<div class="px-margin-page max-w-container-max mx-auto mt-24 pt-8 border-t border-outline-variant/10 flex flex-col md:flex-row justify-between items-center gap-4">
+<p class="font-body-sm text-on-surface-variant opacity-60">© 2024 MNQ Catering y Eventos. Excelencia culinaria.</p>
+<div class="flex gap-6">
+<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer transition-colors" data-icon="share">share</span>
+<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer transition-colors" data-icon="mail">mail</span>
+</div>
+</div>
+</footer>
+</body></html>
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+
+<html class="light" lang="es"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Inter:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "surface-variant": "#eae1d4",
+                    "error-container": "#ffdad6",
+                    "surface-dim": "#e1d9cc",
+                    "on-surface-variant": "#4d4635",
+                    "surface-container-high": "#efe7da",
+                    "primary-fixed": "#ffe088",
+                    "inverse-primary": "#e9c349",
+                    "primary-fixed-dim": "#e9c349",
+                    "on-primary": "#ffffff",
+                    "secondary-fixed": "#ffdea4",
+                    "secondary-fixed-dim": "#f1bf5a",
+                    "primary-container": "#d4af37",
+                    "error": "#ba1a1a",
+                    "tertiary-fixed-dim": "#b4c5ff",
+                    "surface": "#fff8f0",
+                    "inverse-surface": "#343027",
+                    "tertiary": "#415ba4",
+                    "on-error-container": "#93000a",
+                    "surface-container-lowest": "#ffffff",
+                    "on-secondary": "#ffffff",
+                    "secondary": "#7b5900",
+                    "on-tertiary-fixed-variant": "#27438a",
+                    "on-surface": "#1f1b13",
+                    "on-tertiary-container": "#254188",
+                    "tertiary-fixed": "#dbe1ff",
+                    "primary": "#735c00",
+                    "outline-variant": "#d0c5af",
+                    "surface-tint": "#735c00",
+                    "surface-bright": "#fff8f0",
+                    "on-primary-fixed-variant": "#574500",
+                    "on-error": "#ffffff",
+                    "on-background": "#1f1b13",
+                    "on-tertiary": "#ffffff",
+                    "on-primary-container": "#554300",
+                    "outline": "#7f7663",
+                    "on-secondary-container": "#755400",
+                    "on-primary-fixed": "#241a00",
+                    "on-tertiary-fixed": "#00174b",
+                    "inverse-on-surface": "#f8f0e2",
+                    "tertiary-container": "#97b0ff",
+                    "surface-container-low": "#fbf3e5",
+                    "secondary-container": "#fdca64",
+                    "on-secondary-fixed-variant": "#5d4200",
+                    "on-secondary-fixed": "#261900",
+                    "surface-container": "#f5eddf",
+                    "background": "#fff8f0",
+                    "surface-container-highest": "#eae1d4"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.25rem",
+                    "lg": "12px",
+                    "xl": "0.75rem",
+                    "full": "9999px"
+            },
+            "spacing": {
+                    "margin-page": "64px",
+                    "section-gap": "120px",
+                    "container-max": "1280px",
+                    "gutter": "32px",
+                    "unit": "4px"
+            },
+            "fontFamily": {
+                    "headline-md": ["Noto Serif"],
+                    "label-caps": ["Inter"],
+                    "body-sm": ["Inter"],
+                    "body-lg": ["Inter"],
+                    "headline-lg": ["Noto Serif"],
+                    "display-lg": ["Noto Serif"]
+            },
+            "fontSize": {
+                    "headline-md": ["32px", {"lineHeight": "1.3", "letterSpacing": "0.03em", "fontWeight": "400"}],
+                    "label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.15em", "fontWeight": "600"}],
+                    "body-sm": ["14px", {"lineHeight": "1.5", "letterSpacing": "0.01em", "fontWeight": "400"}],
+                    "body-lg": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
+                    "headline-lg": ["40px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400"}],
+                    "display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "400"}]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        }
+        .editorial-shadow {
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
+        }
+    </style>
+</head>
+<body class="bg-surface text-on-surface font-body-lg">
+<!-- TopNavBar -->
+<header class="fixed top-0 w-full z-50 h-20 bg-surface/80 dark:bg-on-background/80 backdrop-blur-md border-b border-outline/10 dark:border-outline-variant/10">
+<div class="flex justify-between items-center px-margin-page max-w-container-max mx-auto h-full">
+<a class="font-headline-md text-headline-md text-primary dark:text-primary-fixed-dim tracking-tighter" href="#">MNQ Catering</a>
+<nav class="hidden md:flex gap-8 items-center h-full">
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface dark:text-on-surface-variant hover:text-primary transition-colors duration-300" href="#">Bodas</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface dark:text-on-surface-variant hover:text-primary transition-colors duration-300" href="#">Corporativo</a>
+<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-primary dark:text-primary-fixed border-b-2 border-primary dark:border-primary-fixed pb-1" href="#">Social</a>
+</nav>
+<div class="flex items-center gap-6">
+<button class="flex items-center gap-2 font-label-caps text-label-caps uppercase text-primary hover:opacity-80 transition-all duration-300 scale-95 active:scale-90">
+<span class="material-symbols-outlined" data-icon="chat">chat</span>
+<span>WhatsApp</span>
+</button>
+</div>
+</div>
+</header>
+<main class="pt-20">
+<!-- Hero Section -->
+<section class="relative h-[819px] flex items-center overflow-hidden">
+<div class="absolute inset-0 z-0">
+<img class="w-full h-full object-cover" data-alt="A warm and intimate family gathering at a long wooden table decorated with minimalist ivory ceramics and gold cutlery. The scene is bathed in soft, natural golden hour sunlight streaming through large windows, creating a cozy and exclusive atmosphere. The interior features high-end contemporary luxury styling with neutral tones and elegant floral arrangements in the background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzD6Bz3BEmWyRLco41LMhaR24bodIWuZGwZ71tvx_zKONUijIrjl3gGWslh6SLyqqE9U9R5UaEHJcSm45kmdUAB2Lm1cuB0aqpdeqnNJ8HYSnL0X2E2ozXPpkakd3Xv6IIJ1NkSghWjKmdySf8HeRrxZDuke-aD4XAznECqXdMAbzj_IRACLeeSS2YIkDsdf2vALImFEGzNj0hQqYf0E68pofYDheGuvwk03OKSTlrcfZf63HDNBvSfKCHvxSLiLyUNRLZP-Tvoklr"/>
+<div class="absolute inset-0 bg-black/20"></div>
+</div>
+<div class="relative z-10 px-margin-page max-w-container-max mx-auto w-full">
+<div class="max-w-2xl bg-surface/90 backdrop-blur-sm p-12 editorial-shadow border border-outline-variant/20 rounded-lg">
+<span class="font-label-caps text-label-caps uppercase text-primary mb-4 block">Eventos Sociales</span>
+<h1 class="font-display-lg text-display-lg text-on-surface mb-6">Reuniones Familiares con Alma</h1>
+<p class="font-body-lg text-body-lg text-on-surface-variant mb-8 leading-relaxed">
+                        Creamos experiencias culinarias íntimas donde cada detalle cuenta. Desde bautizos hasta aniversarios dorados, transformamos su mesa en un escenario de recuerdos inolvidables.
+                    </p>
+<a class="inline-flex items-center px-8 py-4 bg-primary text-on-primary font-label-caps text-label-caps uppercase rounded-lg hover:bg-primary-container transition-all duration-300 tracking-widest" href="https://wa.me/#">
+                        Reservar una Cita
+                    </a>
+</div>
+</div>
+</section>
+<!-- Services Section -->
+<section class="py-section-gap px-margin-page max-w-container-max mx-auto">
+<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter items-end mb-20">
+<div class="md:col-span-5">
+<h2 class="font-headline-lg text-headline-lg mb-6">Momentos que Merecen Excelencia</h2>
+</div>
+<div class="md:col-span-7 pb-2">
+<p class="text-on-surface-variant border-l border-primary/30 pl-8 italic">
+                        "La familia es el corazón de todo lo que hacemos. Nuestra misión es permitirle ser el anfitrión perfecto sin las preocupaciones de la cocina."
+                    </p>
+</div>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
+<!-- Bautizos -->
+<div class="group">
+<div class="aspect-[3/4] overflow-hidden mb-6 rounded-lg border border-outline-variant/30 transition-transform duration-500 hover:scale-[1.02]">
+<img class="w-full h-full object-cover" data-alt="A delicate and elegant setup for a baptism celebration, featuring minimalist ivory white decor with subtle gold accents. The table is adorned with fine porcelain, artisanal small bites, and soft white flowers. The lighting is bright and ethereal, emphasizing a sense of purity and high-end hospitality in a serene garden setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuApNHgBODhVngwoT0T81GdsVtH5L_7-Z4bRNryPgJCv-ng2d7Z9XZBbENUTUwgLGHBqvnU88eHujI1vSmvlPUp9Nbs_ALP21hAmrrK4wEIsxO6gOXTw59-HfxyIfQ4vEpQrmeB1CgDpuWSwGOVVzKyvP11uOGvuFgz3d2FJBPlAWdbGvmwksr4i6izpt1pE0JvkkSksWrkA9aL6NlScfQkNaK5MIr__fiOaQ3sr9OrLuqH4nUKuTLoNM3VXNtBOXZKhBoqmcEtFzoSq"/>
+</div>
+<h3 class="font-headline-md text-headline-md mb-2">Bautizos</h3>
+<p class="text-on-surface-variant font-body-sm uppercase tracking-widest border-b-2 border-primary/20 inline-block pb-1">Cenas y Brunch Temáticos</p>
+</div>
+<!-- Aniversarios -->
+<div class="group md:mt-24">
+<div class="aspect-[3/4] overflow-hidden mb-6 rounded-lg border border-outline-variant/30 transition-transform duration-500 hover:scale-[1.02]">
+<img class="w-full h-full object-cover" data-alt="A romantic and exclusive anniversary dinner table for two in a private terrace. The setting includes crystal glassware, flickering candles, and a gourmet plated course. The overall mood is sophisticated and intimate, with a warm evening glow and high-contrast professional photography focusing on the premium culinary experience." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBB41fXJYVlYwnW1PNZ2owg-s-26uWbN54pxgZNsq7DQP2zeUjatpt-inYc9F3WKOJNqhq2SihPv6RD-725APAjda8DF5rPViqfbpwfrFy46h9KJ9fNN8NGagcZvFcFipGRJo-jBfthYDSgUj2a7kj3LO7ZFGc4ic_YH1Bi831ejfWc1bnNG0XN7uernawK8__ugrb3XbS741uTDUMO2ann4Urp2x-Y20b9bx-YkS13xXWF30bFIWXeXokO_fOqTu-P3GLOKnwDSkI-"/>
+</div>
+<h3 class="font-headline-md text-headline-md mb-2">Aniversarios</h3>
+<p class="text-on-surface-variant font-body-sm uppercase tracking-widest border-b-2 border-primary/20 inline-block pb-1">Menús Degustación Privados</p>
+</div>
+<!-- Cenas Privadas -->
+<div class="group">
+<div class="aspect-[3/4] overflow-hidden mb-6 rounded-lg border border-outline-variant/30 transition-transform duration-500 hover:scale-[1.02]">
+<img class="w-full h-full object-cover" data-alt="A high-end private chef preparing a signature dish in a modern luxury kitchen. The chef is plating with precision, using fresh artisanal ingredients. The lighting is soft but focused on the vibrant colors of the food, set against a background of warm ivory marble and sleek design elements." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDqPsBdhc1n9AWErwQX1DhC1X5b758n1uiUlSaZ3GXPKSf0ZNteZPk8LjkVTXyGpZA62mxSY1rzwHsUjunUtzVt1mWT56BtzDkK79z5nIRxdqKKRAyzdO01Qsd3tyW8UW6dl-PaNc1ciiI2QzWJReJmv9pCD6dVTME26JsyjJfb_HWJbBZiBZKiohYmnHBig3-ms5ln6nupRIMxpq7J9VDRCUwdRjBwsTWJk0MrziJJPaQOZ1kJxYiY4X3KhzBNOnl3E66Vn1eF765z"/>
+</div>
+<h3 class="font-headline-md text-headline-md mb-2">Cenas Privadas</h3>
+<p class="text-on-surface-variant font-body-sm uppercase tracking-widest border-b-2 border-primary/20 inline-block pb-1">Chef en Casa &amp; Servicio Premium</p>
+</div>
+</div>
+</section>
+<!-- Signature Dishes Gallery (Asymmetric) -->
+<section class="py-section-gap bg-surface-container">
+<div class="px-margin-page max-w-container-max mx-auto">
+<div class="mb-16">
+<span class="font-label-caps text-label-caps uppercase text-primary mb-2 block">Culinaria de Autor</span>
+<h2 class="font-headline-lg text-headline-lg">Platos que Cuentan Historias</h2>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
+<div class="md:col-span-8">
+<div class="aspect-video overflow-hidden rounded-lg border border-outline-variant/20 mb-6">
+<img class="w-full h-full object-cover" data-alt="An exquisite high-end seafood dish plated with artistic precision on a handmade ceramic ivory plate. The dish features fresh scallops with a golden sear, garnished with micro-greens and a subtle saffron sauce. The lighting is bright and clean, emphasizing textures and vibrant colors in a minimalist gourmet style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyuILgN6tdCIJCU_VeGpZEaH5TBPemQrqkmSxMZLLuYdt1QdZ8RGJfDPoQ9i7_sI-OZmWRD_vx1J46YoQNjo3Y5GpKt2M7f1diV7zLoqjbNyu5pER_y_YbHlfuj6TMS4UKfinSQN8SBT1iFrgfWHQseroS6yNnC6A_ot4BGCKxhEMWseUJqm-r5MZVLfljJ7UKDJqvfoQYmM8YKZy0yEnh_TiDwy4dQukDiuKzVll8N5J-YeY1SY5xltG1TPU5YUYhRywoppVcy1WR"/>
+</div>
+<div class="flex justify-between items-baseline">
+<h4 class="font-headline-md text-headline-md">Vieiras de la Costa con Azafrán</h4>
+<span class="font-label-caps text-label-caps text-outline italic">Entrante de Firma</span>
+</div>
+</div>
+<div class="md:col-span-4 flex flex-col justify-center">
+<div class="aspect-square overflow-hidden rounded-lg border border-outline-variant/20 mb-6">
+<img class="w-full h-full object-cover" data-alt="A masterfully prepared cut of premium beef, cooked to perfection and sliced to reveal a rich pink center. Served with seasonal roasted root vegetables and a dark balsamic reduction. The scene is sophisticated, using dark graphite tones for the plate to contrast against the ivory background of the table." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFQQgJ2S4bONPBKJhBE9-A0JRYauuAWRJ7jEiDZ7zbQkNiJO4LNVToFGivF9SWkg5lij8ZbLjv4tTaZ_OEU_RXhqNvloLZkdIBONouW6AURw_sEcrXKdT8L5H1Sx9jr8VEg_10FvjqJwq7vy7Varl07xhBP6VAWLj7ek6PbSDs0K2h5ax3JwabLCPYSeoueAhV0gKT6yvanMMCShSBAlSft7qpWgDR1Z4hoAKzlGl82-RogovhWkacxlCgqHYXJolMe1MV1KPH_ApF"/>
+</div>
+<h4 class="font-headline-md text-headline-md">Solomillo de Autor</h4>
+<p class="text-on-surface-variant font-body-sm mt-2">Cocción lenta de 24 horas con esencia de romero silvestre.</p>
+</div>
+</div>
+</div>
+</section>
+<!-- Personalization Section -->
+<section class="py-section-gap px-margin-page max-w-container-max mx-auto overflow-hidden">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-24 items-center">
+<div class="relative">
+<div class="aspect-square bg-surface-dim rounded-full absolute -top-12 -left-12 w-full h-full -z-10 opacity-30"></div>
+<img class="w-full aspect-[4/5] object-cover rounded-lg shadow-2xl" data-alt="A person writing on a beautiful linen menu card with a classic fountain pen. The desk is arranged with high-end stationery, a small vase of dried flowers, and a cup of artisanal coffee. The scene communicates a sense of bespoke personalization and meticulous attention to detail in event planning." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD3EcFW7uPHdKcFtimZUd1XfiElS1cGxLwFwRpl2GVu0WH7GKwiClUWhNMGPhBQsuxzYgko3n7AeF2h9soMdPhlSkVBU1JolFlTZCZ4lP6yF5VULFpmI7WgdqW-ODgCb0mbdrnGcWMDaQwlsPJdYsCliqRZbpCGToIVBb3DaYk_C84iVDXbmifOskUNASKTEd_Wz5GySf56w7BOx60E2P-LKt6IcUqvYxSGLkihO13iv8fz6sgAl5dQyihnTK9RG2V1t-S1BDoelFio"/>
+</div>
+<div>
+<h2 class="font-headline-lg text-headline-lg mb-8 leading-tight">Menús Diseñados Exclusivamente para Usted</h2>
+<p class="font-body-lg text-body-lg text-on-surface-variant mb-10 leading-relaxed">
+                        En MNQ Catering, entendemos que no hay dos familias iguales. Por ello, nuestro proceso de creación comienza con una conversación personal. Adaptamos cada plato a sus preferencias dietéticas, gustos personales y al tono del evento.
+                    </p>
+<ul class="space-y-6 mb-10">
+<li class="flex items-start gap-4">
+<span class="material-symbols-outlined text-primary" data-icon="auto_awesome">auto_awesome</span>
+<div>
+<h5 class="font-bold text-on-surface">Consultoría Privada</h5>
+<p class="text-body-sm text-on-surface-variant">Reunión con nuestro Chef Ejecutivo para definir el concepto gastronómico.</p>
+</div>
+</li>
+<li class="flex items-start gap-4">
+<span class="material-symbols-outlined text-primary" data-icon="restaurant_menu">restaurant_menu</span>
+<div>
+<h5 class="font-bold text-on-surface">Prueba de Degustación</h5>
+<p class="text-body-sm text-on-surface-variant">Sesión íntima para refinar sabores y presentaciones antes del gran día.</p>
+</div>
+</li>
+<li class="flex items-start gap-4">
+<span class="material-symbols-outlined text-primary" data-icon="local_florist">local_florist</span>
+<div>
+<h5 class="font-bold text-on-surface">Armonía Visual</h5>
+<p class="text-body-sm text-on-surface-variant">Coordinación de mantelería, vajilla y cristalería con el menú seleccionado.</p>
+</div>
+</li>
+</ul>
+</div>
+</div>
+</section>
+<!-- CTA WhatsApp -->
+<section class="py-24 bg-primary text-on-primary">
+<div class="px-margin-page max-w-container-max mx-auto text-center">
+<h2 class="font-headline-lg text-headline-lg mb-8">¿Comenzamos a planear su próximo encuentro?</h2>
+<p class="max-w-xl mx-auto mb-12 opacity-90 font-body-lg">
+                    Nuestro equipo está disponible para asesorarle de forma inmediata y personalizada a través de nuestro canal exclusivo de WhatsApp.
+                </p>
+<a class="inline-flex items-center gap-4 px-12 py-6 bg-surface text-primary rounded-lg font-bold uppercase tracking-widest hover:bg-surface-variant transition-all duration-300 scale-100 hover:scale-105 active:scale-95 shadow-xl" href="#">
+<span class="material-symbols-outlined" data-icon="chat">chat</span>
+                    Contactar por WhatsApp
+                </a>
+</div>
+</section>
+</main>
+<!-- Footer -->
+<footer class="w-full py-section-gap bg-surface-container dark:bg-on-background border-t border-outline-variant/20">
+<div class="flex flex-col md:flex-row justify-between items-start px-margin-page max-w-container-max mx-auto gap-gutter">
+<div class="mb-12 md:mb-0">
+<div class="font-headline-lg text-headline-lg text-on-surface dark:text-surface-bright mb-4">MNQ Catering</div>
+<p class="font-body-sm text-body-sm text-on-surface-variant dark:text-surface-variant max-w-xs">
+                    © 2024 MNQ Catering y Eventos. Excelencia culinaria para los momentos más importantes de su vida.
+                </p>
+</div>
+<div class="grid grid-cols-2 gap-16">
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-label-caps uppercase text-primary mb-2">Información</span>
+<a class="font-body-sm text-body-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">Contacto</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">Aviso Legal</a>
+</div>
+<div class="flex flex-col gap-4">
+<span class="font-label-caps text-label-caps uppercase text-primary mb-2">Social</span>
+<a class="font-body-sm text-body-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">Instagram</a>
+<a class="font-body-sm text-body-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">Facebook</a>
+</div>
+</div>
+</div>
+</footer>
+</body></html>