feat: rediseño premium completo del sitio MNQ

- Sistema visual nuevo: tokens CSS extendidos, tipografía Noto Serif + Inter, design system completo
- Navbar con logo generado por IA (☥MNQ ★★★★★), favicon ojo de Ra, WhatsApp CTA
- Páginas rediseñadas: Home, Bodas, Corporativo, Familiares, Nosotros, Contacto
- Imágenes premium: fotografías reales + imágenes generadas con Gemini AI via nanobanana
- Logos con fondo transparente generados y procesados
- WhatsApp actualizado a +34 678 17 15 13

.agents/skills/nanobanana-skill/SKILL.md

@@ -0,0 +1,141 @@
+---
+name: nanobanana-skill
+description: 'Generate or edit images using Google Gemini API via nanobanana. Triggers: "nanobanana", "generate image", "create image", "edit image", "AI drawing", "图片生成", "AI绘图", "图片编辑", "生成图片".'
+allowed-tools: Read, Write, Glob, Grep, Task, Bash(cat:*), Bash(ls:*), Bash(tree:*), Bash(python3:*)
+---
+
+# Nanobanana Image Generation Skill
+
+Generate or edit images using Google Gemini API through the nanobanana tool.
+
+## Requirements
+
+1. **GEMINI_API_KEY**: Must be configured in `~/.nanobanana.env` or `export GEMINI_API_KEY=<your-api-key>`
+2. **Python3 with dependent packages installed**: google-genai, Pillow, python-dotenv. They could be installed via `python3 -m pip install -r ./requirements.txt` if not installed yet.
+3. **Executable**: `./nanobanana.py`
+
+## Instructions
+
+### For image generation
+
+1. Ask the user for:
+   - What they want to create (the prompt)
+   - Desired aspect ratio/size (optional, defaults to 9:16 portrait)
+   - Output filename (optional, auto-generates UUID if not specified)
+   - Model preference (optional, defaults to gemini-3.1-flash-image-preview)
+   - Resolution (optional, defaults to 1K)
+
+2. Run the nanobanana script with appropriate parameters:
+
+   ```bash
+   python3 ./nanobanana.py --prompt "description of image" --output "filename.png"
+   ```
+
+3. Show the user the saved image path when complete
+
+### For image editing
+
+1. Ask the user for:
+   - Input image file(s) to edit
+   - What changes they want (the prompt)
+   - Output filename (optional)
+
+2. Run with input images:
+
+   ```bash
+   python3 ./nanobanana.py --prompt "editing instructions" --input image1.png image2.png --output "edited.png"
+   ```
+
+## Available Options
+
+### Aspect Ratios (--size)
+
+- `1024x1024` (1:1) - Square
+- `832x1248` (2:3) - Portrait
+- `1248x832` (3:2) - Landscape
+- `864x1184` (3:4) - Portrait
+- `1184x864` (4:3) - Landscape
+- `896x1152` (4:5) - Portrait
+- `1152x896` (5:4) - Landscape
+- `768x1344` (9:16) - Portrait (default)
+- `1344x768` (16:9) - Landscape
+- `1536x672` (21:9) - Ultra-wide
+
+### Models (--model)
+
+- `gemini-3.1-flash-image-preview` (default) - Latest, fast generation
+- `gemini-3-pro-image-preview` - Higher quality, supports thinking/reasoning
+
+### Resolution (--resolution)
+
+- `1K` (default)
+- `2K`
+- `4K`
+
+### Other Options
+
+- `--no-search` - Disable Google Search grounding (enabled by default)
+- `--no-think` - Disable thinking/reasoning mode
+
+## Examples
+
+### Generate a simple image
+
+```bash
+python3 ./nanobanana.py --prompt "A serene mountain landscape at sunset with a lake"
+```
+
+### Generate with specific size and output
+
+```bash
+python3 ./nanobanana.py \
+  --prompt "Modern minimalist logo for a tech startup" \
+  --size 1024x1024 \
+  --output "logo.png"
+```
+
+### Generate landscape image with high resolution
+
+```bash
+python3 ./nanobanana.py \
+  --prompt "Futuristic cityscape with flying cars" \
+  --size 1344x768 \
+  --resolution 2K \
+  --output "cityscape.png"
+```
+
+### Edit existing images
+
+```bash
+python3 ./nanobanana.py \
+  --prompt "Add a rainbow in the sky" \
+  --input photo.png \
+  --output "photo-with-rainbow.png"
+```
+
+### Use pro model for higher quality
+
+```bash
+python3 ./nanobanana.py \
+  --prompt "Detailed portrait of a cat in watercolor style" \
+  --model gemini-3-pro-image-preview \
+  --output "cat-portrait.png"
+```
+
+## Error Handling
+
+If the script fails:
+
+- Check that `GEMINI_API_KEY` is exported or set in ~/.nanobanana.env
+- Verify input image files exist and are readable
+- Ensure the output directory is writable
+- If no image is generated, try making the prompt more specific about wanting an image
+
+## Best Practices
+
+1. Be descriptive in prompts - include style, mood, colors, composition
+2. For logos/graphics, use square aspect ratio (1024x1024)
+3. For social media posts, use 9:16 for stories or 1:1 for posts
+4. For wallpapers, use 16:9 or 21:9
+5. Start with 1K resolution for testing, upgrade to 2K/4K for final output
+6. Use gemini-3-pro-image-preview for best quality, gemini-3.1-flash-image-preview (default) for speed

.agents/skills/nanobanana-skill/nanobanana.py

@@ -0,0 +1,167 @@
+#!/usr/bin/env python3
+# Generate or edit images using Google Gemini API
+import os
+import argparse
+import uuid
+from dotenv import load_dotenv
+from google import genai
+from google.genai import types
+from PIL import Image
+from io import BytesIO
+
+# Load environment variables
+load_dotenv(os.path.expanduser("~") + "/.nanobanana.env")
+
+# Google API configuration from environment variables
+api_key = os.getenv("GEMINI_API_KEY") or ""
+
+if not api_key:
+    raise ValueError(
+        "Missing GEMINI_API_KEY environment variable. Please check your .env file."
+    )
+
+# Initialize Gemini client
+client = genai.Client(api_key=api_key)
+
+# Aspect ratio to resolution mapping
+ASPECT_RATIO_MAP = {
+    "1024x1024": "1:1",  # 1:1
+    "832x1248": "2:3",  # 2:3
+    "1248x832": "3:2",  # 3:2
+    "864x1184": "3:4",  # 3:4
+    "1184x864": "4:3",  # 4:3
+    "896x1152": "4:5",  # 4:5
+    "1152x896": "5:4",  # 5:4
+    "768x1344": "9:16",  # 9:16
+    "1344x768": "16:9",  # 16:9
+    "1536x672": "21:9",  # 21:9
+}
+
+
+def main():
+    # Parse command-line arguments
+    parser = argparse.ArgumentParser(
+        description="Generate or edit images using Google Gemini API"
+    )
+    parser.add_argument(
+        "--prompt",
+        type=str,
+        required=True,
+        help="Prompt for image generation or editing",
+    )
+    parser.add_argument(
+        "--output",
+        type=str,
+        default=f"nanobanana-{uuid.uuid4()}.png",
+        help="Output image filename (default: nanobanana-<UUID>.png)",
+    )
+    parser.add_argument(
+        "--input", type=str, nargs="*", help="Input image files for editing (optional)"
+    )
+    parser.add_argument(
+        "--size",
+        type=str,
+        default="768x1344",
+        choices=list(ASPECT_RATIO_MAP.keys()),
+        help="Size/aspect ratio of the generated image (default: 768x1344 / 9:16)",
+    )
+    parser.add_argument(
+        "--model",
+        type=str,
+        default="gemini-3.1-flash-image-preview",
+        help="Model to use for image generation (default: gemini-3.1-flash-image-preview)",
+    )
+    parser.add_argument(
+        "--resolution",
+        type=str,
+        default="1K",
+        choices=["1K", "2K", "4K"],
+        help="Resolution of the generated image (default: 1K)",
+    )
+    parser.add_argument(
+        "--no-search",
+        action="store_true",
+        default=False,
+        help="Disable Google Search grounding (enabled by default)",
+    )
+    parser.add_argument(
+        "--no-think",
+        action="store_true",
+        default=False,
+        help="Disable thinking/reasoning (useful for models that don't support it)",
+    )
+
+    args = parser.parse_args()
+
+    # Get aspect ratio from size
+    aspect_ratio = ASPECT_RATIO_MAP.get(args.size, "16:9")
+
+    # Build contents list for the API call
+    contents = []
+
+    # Check if input images are provided
+    if args.input and len(args.input) > 0:
+        # Use images.generate_content() with images for editing
+        print(f"Editing images with prompt: {args.prompt}")
+        print(f"Input images: {args.input}")
+        print(f"Aspect ratio: {aspect_ratio} ({args.size})")
+
+        # Add prompt first
+        contents.append(args.prompt)
+
+        # Add all input images
+        for img_path in args.input:
+            image = Image.open(img_path)
+            contents.append(image)
+    else:
+        print(f"Generating image (size: {args.size}) with prompt: {args.prompt}")
+        contents.append(args.prompt)
+
+    # Build generation config
+    config_kwargs = {
+        "response_modalities": ["TEXT", "IMAGE"],
+        "image_config": types.ImageConfig(
+            aspect_ratio=aspect_ratio,
+            image_size=args.resolution,
+        ),
+    }
+    if not getattr(args, "no_search", False):
+        config_kwargs["tools"] = [types.Tool(google_search=types.GoogleSearch())]
+    if not getattr(args, "no_think", False):
+        config_kwargs["thinking_config"] = types.ThinkingConfig(include_thoughts=True)
+
+    # Generate or edit image
+    response = client.models.generate_content(
+        model=args.model,
+        contents=contents,
+        config=types.GenerateContentConfig(**config_kwargs),
+    )
+
+    if (
+        response.candidates is None
+        or len(response.candidates) == 0
+        or response.candidates[0].content is None
+        or response.candidates[0].content.parts is None
+    ):
+        raise ValueError("No data received from the API.")
+
+    # Extract image from response
+    image_saved = False
+    for part in response.candidates[0].content.parts:
+        if part.text is not None:
+            print(f"{part.text}", end="")
+        elif part.inline_data is not None and part.inline_data.data is not None:
+            image = Image.open(BytesIO(part.inline_data.data))
+
+            image.save(args.output)
+            image_saved = True
+            print(f"\n\nImage saved to: {args.output}")
+
+    if not image_saved:
+        print(
+            "\n\nWarning: No image data found in the API response. This usually means the model returned only text. Please try again with a different prompt to make image generation more clear."
+        )
+
+
+if __name__ == "__main__":
+    main()

.agents/skills/nanobanana-skill/requirements.txt

@@ -0,0 +1,4 @@
+python-dotenv
+httpx[socks]
+google-genai
+Pillow

.gitignore

@@ -3,4 +3,12 @@ node_modules
 .worktrees/
 dist/
 .opencode/
+
+# Stitch reference files (solo para desarrollo local)
+docs/stitch_mnq_premium_landing_page/
 docs/stitch_mnq_premium_landing_page.zip
+docs/stitch_mnq_premium_landing_pag3e.zip
+docs/plans/
+
+# Nanobanana generated images temp
+public/images/generated/test.jpg

skills-lock.json

@@ -0,0 +1,11 @@
+{
+  "version": 1,
+  "skills": {
+    "nanobanana-skill": {
+      "source": "feiskyer/claude-code-settings",
+      "sourceType": "github",
+      "skillPath": "skills/nanobanana-skill/SKILL.md",
+      "computedHash": "ace04861b1410614a3922b61186907cb59336398714b15bfc8964d9dea2f9daa"
+    }
+  }
+}

src/components/SiteFooter.astro

@@ -1,12 +1,45 @@
 <footer class="site-footer">
-  <div class="container footer-grid">
+  <div class="page-wrap">
-    <div>
+    <div class="footer-inner">
-      <p class="brand">MNQ Catering y Evento</p>
+
-      <p class="text-muted">Experiencias gastronómicas premium para bodas, eventos corporativos y celebraciones familiares.</p>
+      <div class="footer-brand">
+        <a href="/" aria-label="MNQ Catering y Eventos">
+          <img
+            src="/images/logo-secondary.png"
+            alt="MNQ Catering y Eventos"
+            style="height: 3.5rem; width: auto; mix-blend-mode: multiply; margin-bottom: 1rem;"
+          />
+        </a>
+        <p>© 2025 MNQ Catering y Evento. Excelencia culinaria para los momentos más importantes de su vida.</p>
       </div>
-    <div>
+
-      <p class="footer-title">Contacto directo</p>
+      <div class="footer-links">
-      <a href="https://wa.me/5491112345678" class="link-accent" target="_blank" rel="noreferrer">Escribir por WhatsApp</a>
+        <div class="footer-col">
+          <span class="footer-col-title">Servicios</span>
+          <a href="/bodas-reales"         class="footer-link">Bodas Reales</a>
+          <a href="/corporativo-business" class="footer-link">Corporativo</a>
+          <a href="/reuniones-familiares" class="footer-link">Social</a>
+          <a href="/nosotros"             class="footer-link">Nosotros</a>
+        </div>
+        <div class="footer-col">
+          <span class="footer-col-title">Compañía</span>
+          <a href="/contacto" class="footer-link">Contacto</a>
+          <a
+            href="https://wa.me/34678171513"
+            class="footer-link"
+            target="_blank"
+            rel="noreferrer"
+          >WhatsApp</a>
+          <a href="#" class="footer-link">Aviso Legal</a>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="footer-bottom">
+      <p class="text-body-sm text-muted opacity-60">
+        Excelencia culinaria · Diseño de eventos · Gastronomía de autor
+      </p>
     </div>
   </div>
 </footer>

src/components/SiteHeader.astro

@@ -1,14 +1,64 @@
+---
+interface Props {
+  activeNav?: string;
+}
+const { activeNav } = Astro.props;
+
+const links = [
+  { href: '/bodas-reales',         label: 'Bodas',       key: 'bodas' },
+  { href: '/corporativo-business', label: 'Corporativo', key: 'corporativo' },
+  { href: '/reuniones-familiares', label: 'Social',      key: 'social' },
+  { href: '/nosotros',             label: 'Nosotros',    key: 'nosotros' },
+  { href: '/contacto',             label: 'Contacto',    key: 'contacto' },
+];
+---
+
 <header class="site-header">
-  <div class="container nav-wrap">
+  <div class="page-wrap">
-    <a href="/" class="brand">MNQ Catering y Evento</a>
+
-    <nav aria-label="Principal">
+    <a href="/" class="site-brand-link" aria-label="MNQ Catering y Eventos — inicio">
-      <ul class="nav-list">
+      <img
-        <li><a href="/nosotros">Nosotros</a></li>
+        src="/images/logo-nav-dark.png"
-        <li><a href="/bodas-reales">Bodas Reales</a></li>
+        alt="MNQ Catering y Eventos"
-        <li><a href="/corporativo-business">Corporativo &amp; Business</a></li>
+        class="site-logo-banner"
-        <li><a href="/reuniones-familiares">Reuniones Familiares</a></li>
+        width="220"
-        <li><a href="/contacto">Contacto</a></li>
+        height="85"
-      </ul>
+      />
+    </a>
+
+    <nav class="site-nav" aria-label="Principal">
+      {links.map(({ href, label, key }) => (
+        <a href={href} class={`nav-link${activeNav === key ? ' active' : ''}`}>
+          {label}
+        </a>
+      ))}
     </nav>
+
+    <div class="nav-actions">
+      <a
+        href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
+        class="btn btn-pill"
+        target="_blank"
+        rel="noreferrer"
+        style="font-size: 0.6875rem; padding: 0.625rem 1.25rem;"
+      >
+        WhatsApp
+      </a>
+    </div>
+
   </div>
 </header>
+
+<style>
+  .site-brand-link {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .site-logo-banner {
+    height: 3.5rem;
+    width: auto;
+    object-fit: contain;
+  }
+</style>

src/components/WhatsAppButton.astro

@@ -1,9 +1,12 @@
 <a
   class="whatsapp-float"
-  href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
+  href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
   target="_blank"
   rel="noreferrer"
-  aria-label="Abrir conversación por WhatsApp"
+  aria-label="Consultar por WhatsApp"
 >
-  WhatsApp
+  <span>Consultar via WhatsApp</span>
+  <span class="whatsapp-float-icon" aria-hidden="true">
+    <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">chat</span>
+  </span>
 </a>

src/layouts/MainLayout.astro

@@ -11,9 +11,14 @@ import '../styles/utilities.css';
 interface Props {
   title: string;
   description?: string;
+  activeNav?: string;
 }
 
-const { title, description = 'MNQ Catering y Evento · Experiencias premium para momentos inolvidables.' } = Astro.props;
+const {
+  title,
+  description = 'MNQ Catering y Evento · Experiencias gastronómicas premium para bodas, eventos corporativos y celebraciones familiares.',
+  activeNav,
+} = Astro.props;
 ---
 
 <!doctype html>
@@ -23,10 +28,21 @@ const { title, description = 'MNQ Catering y Evento · Experiencias premium para
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{title}</title>
     <meta name="description" content={description} />
+    <link rel="icon" type="image/png" href="/images/logo-ojo-transparent.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
-    <SiteHeader />
+    <SiteHeader activeNav={activeNav} />
-    <main class="container section-stack">
+    <main>
       <slot />
     </main>
     <SiteFooter />

src/pages/bodas-reales.astro

@@ -2,11 +2,212 @@
 import MainLayout from '../layouts/MainLayout.astro';
 ---
 
-<MainLayout title="Bodas Reales | MNQ Catering y Evento">
+<MainLayout
-  <section class="card section-stack-sm">
+  title="Bodas Reales | MNQ Catering y Evento"
-    <p class="eyebrow">Servicio · Bodas Reales</p>
+  description="Creamos banquetes de boda inolvidables. Menú de autor, ambientación gastronómica y servicio impecable para el día más especial de su vida."
-    <h1>Bodas con identidad propia y ejecución impecable.</h1>
+  activeNav="bodas"
-    <p>Diseñamos menú, ambientación gastronómica y experiencia de servicio para que cada boda se sienta única, elegante y personal.</p>
+>
-    <a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20boda" target="_blank" rel="noreferrer">Cotizar boda por WhatsApp</a>
+
+  <!-- ─── HERO ─── -->
+  <section class="hero-tall" style="padding-top: var(--nav-h);">
+    <img
+      src="/images/generated/hero-bodas-gen.jpg"
+      alt="Bodas Reales — MNQ Catering"
+      class="hero-bg"
+      style="object-position: center 40%;"
+      loading="eager"
+      fetchpriority="high"
+    />
+    <div class="hero-overlay-bottom"></div>
+    <div class="hero-content" style="padding-inline: var(--space-page); padding-bottom: var(--space-20);">
+      <div class="page-wrap" style="padding: 0;">
+        <span class="section-eyebrow" style="color: var(--color-primary-fixed);">Portafolio Exclusivo</span>
+        <h1 class="text-display" style="color: #fff; max-width: 36rem;">Bodas Reales</h1>
+      </div>
+    </div>
   </section>
+
+  <!-- ─── NARRATIVA ─── -->
+  <section class="section-pad">
+    <div class="page-wrap">
+      <div class="grid-12" style="align-items: center;">
+        <div class="col-5" style="grid-column: span 12;">
+          <h2 class="text-headline-lg text-primary italic" style="margin-bottom: var(--space-8);">
+            Donde cada detalle cuenta una historia de amor.
+          </h2>
+          <p class="text-muted 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="col-7" style="grid-column: span 12; display: flex; align-items: center;">
+          <div class="border-left-gold">
+            <p class="label-caps text-muted" style="margin-bottom: var(--space-4);">Excelencia Culinaria</p>
+            <p class="text-headline-md">Sinfonía de sabores diseñada para el paladar más exigente.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── PORTFOLIO BENTO GRID ─── -->
+  <section style="padding-bottom: var(--space-section);">
+    <div class="page-wrap">
+      <div class="bento-grid">
+
+        <!-- Large feature -->
+        <div class="bento-card bento-large">
+          <img
+            src="/images/foto-bodas.png"
+            alt="Salón de bodas dorado — MNQ"
+            style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;"
+          />
+          <div class="bento-card-overlay"></div>
+          <div class="bento-card-body">
+            <h3 class="text-headline-lg text-white">Sofía &amp; Mateo</h3>
+            <p class="label-caps" style="color:rgb(255 255 255/70%);margin-top:var(--space-2);">Gran Salón Imperial · 2024</p>
+          </div>
+        </div>
+
+        <!-- Small cards -->
+        <div class="bento-card bento-small">
+          <img
+            src="/images/generated/gallery-4.jpg"
+            alt="Mesa de boda con flores"
+            style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"
+          />
+          <div style="position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0/55%),transparent);"></div>
+          <div class="bento-card-body"><span class="label-caps text-white">Detalles Florales</span></div>
+        </div>
+
+        <div class="bento-card bento-small">
+          <img
+            src="/images/generated/gallery-1.jpg"
+            alt="Postre de autor"
+            style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"
+          />
+          <div style="position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0/55%),transparent);"></div>
+          <div class="bento-card-body"><span class="label-caps text-white">Pastelería de Autor</span></div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── EL ARTE DE LA MESA ─── -->
+  <section class="section-pad bg-container">
+    <div class="page-wrap">
+      <div style="text-align: center; margin-bottom: var(--space-16);">
+        <h2 class="text-display text-primary" style="margin-bottom: var(--space-4);">El Arte de la Mesa</h2>
+        <p class="text-muted max-w-xl 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-3" style="align-items: start;">
+        <div style="text-align: center;">
+          <div class="img-zoom overflow-hidden rounded-lg" style="aspect-ratio:4/5;margin-bottom:var(--space-6);">
+            <img src="/images/generated/gallery-4.jpg" alt="Texturas nobles" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />
+          </div>
+          <h4 class="text-headline-md" style="margin-bottom:var(--space-2);">Texturas Nobles</h4>
+          <p class="text-body-sm text-muted">Linos y sedas seleccionados por su caída y tacto excepcional.</p>
+        </div>
+
+        <div style="text-align: center; margin-top: var(--space-12);">
+          <div class="img-zoom overflow-hidden rounded-lg" style="aspect-ratio:4/5;margin-bottom:var(--space-6);">
+            <img src="/images/foto-canapes.png" alt="Canapés premium" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />
+          </div>
+          <h4 class="text-headline-md" style="margin-bottom:var(--space-2);">Cristal &amp; Oro</h4>
+          <p class="text-body-sm text-muted">Detalles metálicos que aportan un brillo atemporal a su celebración.</p>
+        </div>
+
+        <div style="text-align: center; margin-top: var(--space-24);">
+          <div class="img-zoom overflow-hidden rounded-lg" style="aspect-ratio:4/5;margin-bottom:var(--space-6);">
+            <img src="/images/generated/gallery-3.jpg" alt="Platos de autor" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />
+          </div>
+          <h4 class="text-headline-md" style="margin-bottom:var(--space-2);">Platos de Autor</h4>
+          <p class="text-body-sm text-muted">Cada ingrediente es una nota en nuestra composición gastronómica.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── TESTIMONIOS ─── -->
+  <section class="section-pad">
+    <div class="page-wrap">
+      <div style="display:flex;flex-direction:column;gap:var(--space-8);">
+        <div style="max-width:24rem;">
+          <span class="section-eyebrow">Testimonios</span>
+          <h2 class="text-headline-lg">Palabras que nos inspiran.</h2>
+        </div>
+        <div class="grid-2">
+          <div class="testimonial-card">
+            <div class="quote-mark">"</div>
+            <p class="testimonial-quote">"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="testimonial-author">
+              <div class="testimonial-avatar"></div>
+              <div>
+                <p class="label-caps" style="font-size:0.7rem;">Elena &amp; Carlos</p>
+                <p class="text-body-sm text-muted">Finca La Montaña, Junio 2023</p>
+              </div>
+            </div>
+          </div>
+          <div class="testimonial-card">
+            <div class="quote-mark">"</div>
+            <p class="testimonial-quote">"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="testimonial-author">
+              <div class="testimonial-avatar"></div>
+              <div>
+                <p class="label-caps" style="font-size:0.7rem;">Patricia &amp; Javier</p>
+                <p class="text-body-sm text-muted">Castillo de Viñuelas, Septiembre 2023</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── CTA ─── -->
+  <section class="section-pad">
+    <div class="page-wrap">
+      <div class="cta-dark">
+        <div class="cta-dark-ring" style="width:16rem;height:16rem;top:-4rem;left:-4rem;"></div>
+        <div class="cta-dark-ring" style="width:24rem;height:24rem;bottom:-6rem;right:-6rem;"></div>
+        <div style="position:relative;z-index:10;">
+          <h2 class="text-display" style="color:var(--color-inverse-on-surface);margin-bottom:var(--space-8);">¿Comenzamos a planear su gran día?</h2>
+          <p style="color:rgb(248 240 226/80%);margin-bottom:var(--space-12);max-width:36rem;margin-inline:auto;">Solicite una asesoría personalizada y reciba un presupuesto a medida para su boda exclusiva.</p>
+          <a href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20boda" class="btn btn-dark" target="_blank" rel="noreferrer">
+            <span class="material-symbols-outlined">chat</span>
+            Consultar por WhatsApp
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
 </MainLayout>
+
+<style>
+  .bento-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-8);
+  }
+  .bento-large { position: relative; min-height: 28rem; }
+  .bento-small { position: relative; min-height: 20rem; }
+
+  @media (min-width: 48rem) {
+    .bento-grid {
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: auto auto;
+    }
+    .bento-large {
+      grid-column: span 2;
+      grid-row: span 2;
+      min-height: 48rem;
+    }
+    .bento-small { min-height: 23rem; }
+    .col-5 { grid-column: span 5 !important; }
+    .col-7 { grid-column: span 7 !important; }
+  }
+</style>

src/pages/contacto.astro

@@ -2,27 +2,185 @@
 import MainLayout from '../layouts/MainLayout.astro';
 ---
 
-<MainLayout title="Contacto | MNQ Catering y Evento">
+<MainLayout
-  <section class="card section-stack-sm">
+  title="Contacto | MNQ Catering y Evento"
-    <p class="eyebrow">Contacto</p>
+  description="Hablemos de su próximo evento. Diseñamos experiencias gastronómicas a medida para bodas, corporativos y celebraciones familiares."
-    <h1>Coordinemos tu evento por WhatsApp.</h1>
+  activeNav="contacto"
-    <p>Canal principal de atención para asesorarte rápido y enviarte una propuesta personalizada.</p>
+>
-    <a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20hablar%20sobre%20mi%20evento" target="_blank" rel="noreferrer">Iniciar conversación por WhatsApp</a>
 
-    <form class="contact-form" aria-label="Formulario de contacto secundario">
+  <!-- ─── HERO ─── -->
-      <label>
+  <section class="contacto-hero">
-        Nombre
+    <div class="page-wrap">
-        <input type="text" name="nombre" placeholder="Tu nombre" />
+      <div class="contacto-hero-grid">
-      </label>
+
-      <label>
+        <div class="contacto-hero-text">
-        Email
+          <span class="section-eyebrow">Contacto</span>
-        <input type="email" name="email" placeholder="tu@email.com" />
+          <h1 class="text-display" style="margin-bottom: var(--space-8);">
-      </label>
+            Hablemos de su próximo evento.
-      <label>
+          </h1>
-        Mensaje
+          <p class="text-muted" style="line-height: 1.7; max-width: 32rem;">
-        <textarea name="mensaje" rows="4" placeholder="Contanos brevemente tu evento"></textarea>
+            Diseñamos experiencias gastronómicas a medida. Permítanos conocer sus necesidades para crear una propuesta única y exclusiva.
-      </label>
+          </p>
-      <button type="submit" class="button-secondary">Enviar (secundario)</button>
+        </div>
-    </form>
+
+        <div class="contacto-hero-img overflow-hidden rounded-lg">
+          <img
+            src="/images/foto-bodas.png"
+            alt="MNQ Catering — salón de eventos premium"
+            style="width:100%;height:100%;object-fit:cover;object-position:center 35%;"
+            loading="eager"
+            fetchpriority="high"
+          />
+        </div>
+
+      </div>
+    </div>
   </section>
+
+  <!-- ─── CONTACT GRID ─── -->
+  <section class="section-pad">
+    <div class="page-wrap">
+      <div class="contacto-grid">
+
+        <!-- Info lateral -->
+        <aside class="contacto-info">
+
+          <div class="stack-4">
+            <span class="label-caps text-primary">Teléfono</span>
+            <div style="display:flex;align-items:center;gap:var(--space-4);">
+              <span class="material-symbols-outlined text-primary">call</span>
+              <p class="text-muted">+34 678 17 15 13</p>
+            </div>
+          </div>
+
+          <div class="stack-4">
+            <span class="label-caps text-primary">Email</span>
+            <div style="display:flex;align-items:center;gap:var(--space-4);">
+              <span class="material-symbols-outlined text-primary">mail</span>
+              <p class="text-muted">eventos@mnqcatering.com</p>
+            </div>
+          </div>
+
+          <div class="stack-4">
+            <span class="label-caps text-primary">WhatsApp</span>
+            <div style="display:flex;align-items:center;gap:var(--space-4);">
+              <span class="material-symbols-outlined text-primary">chat</span>
+              <p class="text-muted">Canal exclusivo de atención</p>
+            </div>
+          </div>
+
+          <div class="border-left-gold" style="padding-block:var(--space-4);">
+            <p class="text-headline-md text-primary italic">
+              "Excelencia en cada detalle, pasión en cada plato."
+            </p>
+          </div>
+
+          <a
+            href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20hablar%20sobre%20mi%20evento"
+            class="btn btn-primary"
+            target="_blank"
+            rel="noreferrer"
+            style="width:fit-content;"
+          >
+            Iniciar por WhatsApp
+          </a>
+
+        </aside>
+
+        <!-- Formulario -->
+        <div>
+          <form class="form-grid" aria-label="Formulario de contacto" method="dialog">
+
+            <div class="form-field">
+              <label class="form-label" for="nombre">Nombre Completo</label>
+              <input class="form-input" id="nombre" name="nombre" type="text" placeholder="Ej. Javier Sotomayor" />
+            </div>
+
+            <div class="form-field">
+              <label class="form-label" for="email">Correo Electrónico</label>
+              <input class="form-input" id="email" name="email" type="email" placeholder="javier@empresa.com" />
+            </div>
+
+            <div class="form-field">
+              <label class="form-label" for="tipo">Tipo de Evento</label>
+              <select class="form-select" id="tipo" name="tipo">
+                <option value="">Seleccione una opción</option>
+                <option value="boda">Boda</option>
+                <option value="corporativo">Evento Corporativo</option>
+                <option value="social">Celebración Social</option>
+                <option value="otro">Otro</option>
+              </select>
+            </div>
+
+            <div class="form-field">
+              <label class="form-label" for="fecha">Fecha Estimada</label>
+              <input class="form-input" id="fecha" name="fecha" type="date" />
+            </div>
+
+            <div class="form-field form-span-full">
+              <label class="form-label" for="mensaje">Mensaje o Requerimientos Especiales</label>
+              <textarea
+                class="form-textarea"
+                id="mensaje"
+                name="mensaje"
+                rows="5"
+                placeholder="Cuéntenos más sobre su visión..."
+              ></textarea>
+            </div>
+
+            <div class="form-span-full" style="display:flex;justify-content:flex-end;">
+              <button type="submit" class="btn-underline" style="display:inline-flex;align-items:center;gap:var(--space-3);">
+                Enviar Solicitud
+                <span class="material-symbols-outlined">arrow_forward</span>
+              </button>
+            </div>
+
+          </form>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
 </MainLayout>
+
+<style>
+  /* Hero */
+  .contacto-hero {
+    padding-top: calc(var(--nav-h) + var(--space-section));
+    padding-bottom: var(--space-section);
+  }
+
+  .contacto-hero-grid {
+    display: grid;
+    gap: var(--space-12);
+  }
+
+  .contacto-hero-img {
+    aspect-ratio: 4/3;
+  }
+
+  /* Contact layout */
+  .contacto-grid {
+    display: grid;
+    gap: var(--space-16);
+  }
+
+  .contacto-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-10);
+  }
+
+  @media (min-width: 48rem) {
+    .contacto-hero-grid {
+      grid-template-columns: 7fr 5fr;
+      align-items: center;
+    }
+
+    .contacto-grid {
+      grid-template-columns: 2fr 3fr;
+      align-items: start;
+    }
+  }
+</style>

src/pages/corporativo-business.astro

@@ -2,11 +2,159 @@
 import MainLayout from '../layouts/MainLayout.astro';
 ---
 
-<MainLayout title="Corporativo & Business | MNQ Catering y Evento">
+<MainLayout
-  <section class="card section-stack-sm">
+  title="Corporativo & Business | MNQ Catering y Evento"
-    <p class="eyebrow">Servicio · Corporativo &amp; Business</p>
+  description="Elevamos la imagen de su empresa a través de experiencias gastronómicas impecables. Lanzamientos, galas institucionales y coffee breaks premium."
-    <h1>Eventos empresariales con timing, imagen y calidad premium.</h1>
+  activeNav="corporativo"
-    <p>Ofrecemos propuestas ejecutivas para lanzamientos, directorios y jornadas corporativas con foco en puntualidad y presentación profesional.</p>
+>
-    <a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20propuesta%20corporativa" target="_blank" rel="noreferrer">Solicitar propuesta por WhatsApp</a>
+
+  <!-- ─── HERO ─── -->
+  <header style="padding-top:calc(var(--nav-h) + var(--space-section));padding-bottom:var(--space-section);overflow:hidden;">
+    <div class="page-wrap">
+      <div class="grid-12" style="align-items:center;gap:var(--space-8);">
+
+        <div style="grid-column:span 12;z-index:10;">
+          <p class="section-eyebrow">Excelencia en Eventos</p>
+          <h1 class="text-display" style="margin-bottom:var(--space-8);">Corporativo<br />&amp; Business</h1>
+          <p class="text-muted" style="max-width:32rem;line-height:1.7;margin-bottom:var(--space-10);">
+            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 style="display:flex;gap:var(--space-6);flex-wrap:wrap;align-items:center;">
+            <a href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20propuesta%20corporativa" class="btn btn-primary" target="_blank" rel="noreferrer">Solicitar Propuesta</a>
+            <a href="#servicios" class="btn-underline">Ver Servicios</a>
+          </div>
+        </div>
+
+        <div style="grid-column:span 12;position:relative;height:28rem;">
+          <img
+            src="/images/foto-corporativo.png"
+            alt="Eventos corporativos premium — MNQ"
+            class="rounded-lg border-outline-soft"
+            style="width:100%;height:100%;object-fit:cover;object-position:center top;"
+            loading="eager"
+          />
+        </div>
+
+      </div>
+    </div>
+  </header>
+
+  <!-- ─── SERVICIOS BENTO ─── -->
+  <section id="servicios" class="section-pad bg-container-low">
+    <div class="page-wrap">
+      <div style="text-align:center;margin-bottom:var(--space-16);">
+        <h2 class="text-headline-lg">Servicios Especializados</h2>
+        <div class="gold-line mx-auto" style="margin-top:var(--space-4);"></div>
+      </div>
+
+      <div class="corp-bento">
+
+        <div class="bento-card corp-wide">
+          <img src="/images/foto-corporativo.png" alt="Lanzamientos de marca" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;" loading="lazy" />
+          <div class="bento-card-overlay"></div>
+          <div class="bento-card-body">
+            <h3 class="text-headline-md" style="color:var(--color-on-surface);">Lanzamientos de Marca</h3>
+            <p class="text-muted" style="max-width:28rem;">Impacto visual y conceptual para presentaciones que trascienden.</p>
+          </div>
+        </div>
+
+        <div class="bento-card corp-tall">
+          <img src="/images/generated/gallery-2.jpg" alt="Coffee Breaks Premium" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;" loading="lazy" />
+          <div class="bento-card-overlay"></div>
+          <div class="bento-card-body">
+            <h3 class="text-headline-md" style="color:var(--color-on-surface);">Coffee Breaks Premium</h3>
+            <p class="text-muted">Pausas que inspiran productividad y networking de calidad.</p>
+          </div>
+        </div>
+
+        <div class="bento-card corp-wide">
+          <img src="/images/foto-bodas.png" alt="Galas y Cenas Anuales" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;" loading="lazy" />
+          <div class="bento-card-overlay"></div>
+          <div class="bento-card-body">
+            <h3 class="text-headline-md" style="color:var(--color-on-surface);">Galas &amp; Cenas Anuales</h3>
+            <p class="text-muted" style="max-width:28rem;">Protocolo impecable para los momentos más solemnes de su organización.</p>
+          </div>
+        </div>
+
+      </div>
+    </div>
   </section>
+
+  <!-- ─── EMPRESAS ─── -->
+  <section class="section-pad-sm bg-surface">
+    <div class="page-wrap" style="text-align:center;">
+      <p class="label-caps text-muted" style="margin-bottom:var(--space-12);opacity:0.8;">Empresas que confían en nuestra visión</p>
+      <div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-16);opacity:0.4;filter:grayscale(1);">
+        <span style="font-size:1.5rem;font-weight:700;letter-spacing:0.2em;color:var(--color-on-surface-variant);">LUMINA</span>
+        <span style="font-size:1.5rem;font-style:italic;color:var(--color-on-surface-variant);">Vanguard</span>
+        <span style="font-size:1.5rem;font-weight:900;text-transform:uppercase;color:var(--color-on-surface-variant);">Ethereal.</span>
+        <span style="font-size:1.5rem;color:var(--color-on-surface-variant);">Nordic Corp</span>
+        <span style="font-size:1.5rem;letter-spacing:-0.03em;color:var(--color-on-surface-variant);">Apex Sol.</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── FORMULARIO COTIZACIÓN ─── -->
+  <section class="section-pad bg-container-high" style="position:relative;overflow:hidden;">
+    <div class="page-wrap" style="position:relative;z-index:10;">
+      <div class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-12) var(--space-10);max-width:52rem;margin-inline:auto;">
+        <div style="text-align:center;margin-bottom:var(--space-16);">
+          <h2 class="text-headline-lg" style="margin-bottom:var(--space-4);">Cotización Corporativa</h2>
+          <p class="text-muted">Diseñamos una propuesta a la medida de sus objetivos empresariales.</p>
+        </div>
+        <form class="form-grid" aria-label="Formulario cotización corporativa" method="dialog">
+          <div class="form-field">
+            <label class="form-label" for="empresa">Empresa</label>
+            <input class="form-input" id="empresa" name="empresa" type="text" placeholder="Nombre de su empresa" />
+          </div>
+          <div class="form-field">
+            <label class="form-label" for="email-corp">Correo Corporativo</label>
+            <input class="form-input" id="email-corp" name="email" type="email" placeholder="nombre@empresa.com" />
+          </div>
+          <div class="form-field">
+            <label class="form-label" for="tipo-corp">Tipo de Evento</label>
+            <select class="form-select" id="tipo-corp" name="tipo">
+              <option value="">Tipo de Evento</option>
+              <option>Lanzamiento de Marca</option>
+              <option>Gala / Cena</option>
+              <option>Coffee Break</option>
+              <option>Otro</option>
+            </select>
+          </div>
+          <div class="form-field">
+            <label class="form-label" for="asistentes">Nº Asistentes</label>
+            <input class="form-input" id="asistentes" name="asistentes" type="number" placeholder="Cantidad estimada" min="1" />
+          </div>
+          <div class="form-field form-span-full">
+            <label class="form-label" for="detalles">Detalles Adicionales</label>
+            <textarea class="form-textarea" id="detalles" name="detalles" rows="3" placeholder="Cuéntenos sus objetivos y requerimientos..."></textarea>
+          </div>
+          <div class="form-span-full" style="display:flex;justify-content:center;padding-top:var(--space-8);">
+            <button type="submit" class="btn btn-primary" style="min-width:16rem;">Enviar Solicitud</button>
+          </div>
+        </form>
+      </div>
+    </div>
+    <div style="position:absolute;top:0;right:-4rem;width:30%;height:100%;background:rgb(208 197 175/10%);transform:skewX(-10deg);pointer-events:none;"></div>
+  </section>
+
 </MainLayout>
+
+<style>
+  .corp-bento {
+    display: grid;
+    gap: var(--space-8);
+  }
+  .corp-wide, .corp-tall { position: relative; min-height: 20rem; }
+
+  @media (min-width: 48rem) {
+    .corp-bento {
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: 22rem 22rem;
+    }
+    .corp-wide { grid-column: span 2; }
+    .corp-tall { grid-row: span 2; }
+    [style*="grid-column:span 12"] { grid-column: span 6 !important; }
+    [style*="height:28rem"] { height: 36rem !important; }
+  }
+</style>

src/pages/index.astro

@@ -2,11 +2,222 @@
 import MainLayout from '../layouts/MainLayout.astro';
 ---
 
-<MainLayout title="MNQ Catering y Evento | Home">
+<MainLayout title="MNQ Catering y Evento | Excelencia Culinaria">
-  <section class="hero card">
+
-    <p class="eyebrow">Catering premium para eventos memorables</p>
+  <!-- ─── HERO ─── -->
-    <h1>Diseñamos experiencias gastronómicas a la altura de tu celebración.</h1>
+  <section class="hero-full">
-    <p>Con enfoque editorial, servicio impecable y ejecución personalizada para cada ocasión.</p>
+    <img
-    <a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20asesoramiento%20para%20mi%20evento" target="_blank" rel="noreferrer">Cotizar por WhatsApp</a>
+      src="/images/foto-bodas.png"
+      alt="MNQ Catering — salón de bodas premium"
+      class="hero-bg"
+      style="object-position: center 30%;"
+      loading="eager"
+      fetchpriority="high"
+    />
+    <div class="hero-overlay" style="background: rgb(20 15 8 / 55%);"></div>
+    <div class="hero-content" style="padding-inline: var(--space-page);">
+      <div style="max-width: 52rem; margin-inline: auto; text-align: center;">
+        <p class="label-caps-wide" style="color: var(--color-primary-container); margin-bottom: var(--space-6);">
+          Catering premium para eventos memorables
+        </p>
+        <h1 class="text-display" style="color: #fff; margin-bottom: var(--space-8);">
+          MNQ: donde la tradición<br />se encuentra con la exclusividad
+        </h1>
+        <a
+          href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
+          class="btn btn-ghost"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Explorar Servicios
+        </a>
+      </div>
+    </div>
   </section>
+
+  <!-- ─── SERVICIOS EDITORIAL GRID ─── -->
+  <section class="section-pad">
+    <div class="page-wrap">
+      <div style="text-align: center; margin-bottom: var(--space-16);">
+        <span class="section-eyebrow">Nuestra Propuesta</span>
+        <h2 class="text-headline-lg">Experiencias Gastronómicas a Medida</h2>
+      </div>
+
+      <div class="services-grid">
+
+        <!-- Bodas -->
+        <div style="display: flex; flex-direction: column; gap: var(--space-6);">
+          <div class="overflow-hidden" style="border-radius: var(--radius-lg); aspect-ratio: 3/4;">
+            <img
+              src="/images/generated/hero-bodas-gen.jpg"
+              alt="Bodas Reales — MNQ Catering"
+              style="width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 700ms ease;"
+              onmouseenter="this.style.transform='scale(1.05)'"
+              onmouseleave="this.style.transform='scale(1)'"
+            />
+          </div>
+          <div style="display: flex; flex-direction: column; gap: var(--space-3);">
+            <h3 class="text-headline-md">Bodas</h3>
+            <p class="text-muted">El arte de celebrar el amor con un banquete inolvidable diseñado hasta el último detalle.</p>
+            <a href="/bodas-reales" class="btn-underline" style="width: fit-content;">Saber más</a>
+          </div>
+        </div>
+
+        <!-- Corporativo (staggered on desktop) -->
+        <div style="display: flex; flex-direction: column; gap: var(--space-6);" class="col-stagger">
+          <div class="overflow-hidden" style="border-radius: var(--radius-lg); aspect-ratio: 3/4;">
+            <img
+              src="/images/foto-corporativo.png"
+              alt="Corporativo — MNQ Catering"
+              style="width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 700ms ease;"
+              onmouseenter="this.style.transform='scale(1.05)'"
+              onmouseleave="this.style.transform='scale(1)'"
+            />
+          </div>
+          <div style="display: flex; flex-direction: column; gap: var(--space-3);">
+            <h3 class="text-headline-md">Eventos Corporativos</h3>
+            <p class="text-muted">Reforzamos la identidad de su empresa a través de una propuesta culinaria de primer nivel.</p>
+            <a href="/corporativo-business" class="btn-underline" style="width: fit-content;">Saber más</a>
+          </div>
+        </div>
+
+        <!-- Familiares -->
+        <div style="display: flex; flex-direction: column; gap: var(--space-6);">
+          <div class="overflow-hidden" style="border-radius: var(--radius-lg); aspect-ratio: 3/4;">
+            <img
+              src="/images/generated/hero-familiares-gen.jpg"
+              alt="Reuniones Familiares — MNQ Catering"
+              style="width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 700ms ease;"
+              onmouseenter="this.style.transform='scale(1.05)'"
+              onmouseleave="this.style.transform='scale(1)'"
+            />
+          </div>
+          <div style="display: flex; flex-direction: column; gap: var(--space-3);">
+            <h3 class="text-headline-md">Reuniones Familiares</h3>
+            <p class="text-muted">La calidez del hogar elevada por la excelencia de nuestra cocina de autor.</p>
+            <a href="/reuniones-familiares" class="btn-underline" style="width: fit-content;">Saber más</a>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── GALERÍA MOSAIC ─── -->
+  <section class="section-pad bg-container">
+    <div class="page-wrap">
+      <div class="flex-between" style="margin-bottom: var(--space-16);">
+        <div>
+          <span class="section-eyebrow">Galería</span>
+          <h2 class="text-headline-lg">Momentos MNQ</h2>
+        </div>
+        <p class="text-body-sm text-muted" style="max-width: 20rem; text-align: right; font-style: italic; display: none;" id="gallery-quote">
+          "La comida es la única forma de arte que nutre todos los sentidos."
+        </p>
+      </div>
+
+      <div class="mosaic">
+        <img src="/images/generated/gallery-1.jpg"   alt="Postre de autor con oro" class="rounded-lg" style="width:100%;" loading="lazy" />
+        <img src="/images/foto-canapes.png"           alt="Canapés premium" class="rounded-lg" style="width:100%;" loading="lazy" />
+        <img src="/images/generated/gallery-3.jpg"   alt="Vieiras con azafrán" class="rounded-lg" style="width:100%;" loading="lazy" />
+        <img src="/images/generated/gallery-4.jpg"   alt="Mesa de boda" class="rounded-lg" style="width:100%;" loading="lazy" />
+        <img src="/images/foto-plato-mnq.png"         alt="Plato MNQ Catering" class="rounded-lg" style="width:100%;" loading="lazy" />
+        <img src="/images/generated/gallery-2.jpg"   alt="Bartender de coctelería" class="rounded-lg" style="width:100%;" loading="lazy" />
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── TESTIMONIOS ─── -->
+  <section class="section-pad bg-surface">
+    <div class="page-wrap">
+      <div style="text-align: center; margin-bottom: var(--space-12);">
+        <div class="stars" style="margin-bottom: var(--space-8);">
+          <span class="star">★</span><span class="star">★</span><span class="star">★</span>
+          <span class="star">★</span><span class="star">★</span>
+        </div>
+        <h2 class="text-headline-lg" style="max-width: 40rem; margin-inline: auto; margin-bottom: var(--space-16);">
+          Lo que nuestros clientes dicen sobre nosotros
+        </h2>
+      </div>
+
+      <div class="grid-2">
+        <div class="testimonial-card">
+          <p class="testimonial-quote">
+            "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="testimonial-author">
+            <div class="testimonial-avatar"></div>
+            <div>
+              <p class="label-caps" style="font-size: 0.7rem;">Isabel &amp; Marcos</p>
+              <p class="text-body-sm text-muted">Boda en Hacienda del Sol</p>
+            </div>
+          </div>
+        </div>
+        <div class="testimonial-card">
+          <p class="testimonial-quote">
+            "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="testimonial-author">
+            <div class="testimonial-avatar"></div>
+            <div>
+              <p class="label-caps" style="font-size: 0.7rem;">Javier Ruiz</p>
+              <p class="text-body-sm text-muted">Director Ejecutivo, TechCorp</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── CTA FINAL ─── -->
+  <section class="section-pad">
+    <div class="page-wrap">
+      <div class="cta-dark">
+        <div class="cta-dark-ring" style="width: 16rem; height: 16rem; top: -4rem; left: -4rem;"></div>
+        <div class="cta-dark-ring" style="width: 24rem; height: 24rem; bottom: -6rem; right: -6rem;"></div>
+        <div style="position: relative; z-index: 10; margin-bottom: var(--space-8);">
+          <img
+            src="/images/logo-monograma.png"
+            alt="MNQ"
+            style="height: 5rem; width: auto; margin-inline: auto; display: block;"
+          />
+        </div>
+        <div style="position: relative; z-index: 10; max-width: 40rem; margin-inline: auto;">
+          <h2 class="text-display" style="color: var(--color-inverse-on-surface); margin-bottom: var(--space-8);">
+            ¿Comenzamos a planear su próximo evento?
+          </h2>
+          <p style="color: rgb(248 240 226 / 80%); margin-bottom: var(--space-12);">
+            Solicite una asesoría personalizada y reciba una propuesta a medida.
+          </p>
+          <a
+            href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
+            class="btn btn-dark"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <span class="material-symbols-outlined">chat</span>
+            Consultar por WhatsApp
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
 </MainLayout>
+
+<style>
+  @media (min-width: 48rem) {
+    .services-grid {
+      display: grid !important;
+      grid-template-columns: repeat(3, 1fr) !important;
+    }
+    .col-stagger { margin-top: var(--space-24); }
+    #gallery-quote { display: block !important; }
+  }
+  .services-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-8);
+    align-items: start;
+  }
+</style>

src/pages/nosotros.astro

@@ -2,11 +2,149 @@
 import MainLayout from '../layouts/MainLayout.astro';
 ---
 
-<MainLayout title="Nosotros | MNQ Catering y Evento">
+<MainLayout
-  <section class="card section-stack-sm">
+  title="Nosotros | MNQ Catering y Evento"
-    <p class="eyebrow">Nosotros</p>
+  description="El arte de la hospitalidad elevada. Descubra la filosofía, valores y equipo detrás de MNQ Catering y Evento."
-    <h1>Hospitalidad, estética y excelencia operativa.</h1>
+  activeNav="nosotros"
-    <p>MNQ nace para elevar celebraciones con una propuesta premium que combina gastronomía, diseño y coordinación integral del evento.</p>
+>
-    <a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20conocer%20su%20propuesta" target="_blank" rel="noreferrer">Hablar por WhatsApp</a>
+
+  <!-- ─── HERO EDITORIAL ─── -->
+  <section class="section-pad" style="padding-top:calc(var(--nav-h) + var(--space-section));">
+    <div class="page-wrap">
+      <div class="nosotros-hero-grid">
+
+        <div class="nosotros-text">
+          <span class="section-eyebrow">Nuestra Esencia</span>
+          <h1 class="text-display" style="margin-bottom:var(--space-8);">El arte de la hospitalidad elevada.</h1>
+          <p class="text-muted leading-relaxed" style="max-width:32rem;">
+            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="nosotros-image" style="position:relative;">
+          <div class="overflow-hidden rounded-lg" style="aspect-ratio:4/3;">
+            <img
+              src="/images/generated/hero-nosotros-gen.jpg"
+              alt="Chef ejecutiva MNQ — el arte de la hospitalidad"
+              style="width:100%;height:100%;object-fit:cover;object-position:center top;"
+              loading="eager"
+            />
+          </div>
+          <div class="quote-card-desktop border-outline-soft" style="position:absolute;bottom:-2.5rem;left:-2.5rem;background:var(--color-surface-container);padding:var(--space-10);display:none;">
+            <p class="text-headline-md text-primary italic">"La perfección no es un acto, es un hábito."</p>
+          </div>
+        </div>
+
+      </div>
+    </div>
   </section>
+
+  <!-- ─── FILOSOFÍA ─── -->
+  <section class="section-pad bg-container-low" style="border-top:1px solid rgb(208 197 175/10%);border-bottom:1px solid rgb(208 197 175/10%);">
+    <div class="page-wrap">
+      <div class="grid-2" style="gap:var(--space-16);">
+        <h2 class="text-headline-lg" style="margin-bottom:var(--space-8);">Filosofía de Exclusividad</h2>
+        <div style="display:flex;flex-direction:column;gap:var(--space-6);">
+          <p class="text-muted leading-relaxed">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="text-muted leading-relaxed">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 style="padding-top:var(--space-4);">
+            <a href="/contacto" class="btn-underline" style="display:inline-flex;align-items:center;gap:var(--space-3);">Explorar Menú de Autor</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── VALORES ─── -->
+  <section class="section-pad">
+    <div class="page-wrap">
+      <div style="text-align:center;margin-bottom:var(--space-24);">
+        <span class="section-eyebrow">Pilares de Marca</span>
+        <h2 class="text-headline-lg">Valores que nos definen</h2>
+      </div>
+      <div class="grid-3">
+        <div class="value-card">
+          <span class="material-symbols-outlined text-primary icon-lg">verified</span>
+          <h3 class="text-headline-md">Calidad</h3>
+          <p class="text-body-sm text-muted leading-relaxed">Innegociable. Desde la frescura del producto hasta el último detalle del servicio de sala.</p>
+        </div>
+        <div class="value-card">
+          <span class="material-symbols-outlined text-primary icon-lg">history_edu</span>
+          <h3 class="text-headline-md">Tradición</h3>
+          <p class="text-body-sm text-muted leading-relaxed">Honramos las técnicas clásicas que han forjado la gran cocina, aplicándolas con respeto.</p>
+        </div>
+        <div class="value-card">
+          <span class="material-symbols-outlined text-primary icon-lg">architecture</span>
+          <h3 class="text-headline-md">Vanguardia</h3>
+          <p class="text-body-sm text-muted leading-relaxed">Innovamos en presentaciones y texturas para sorprender a los paladares contemporáneos.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── EQUIPO ─── -->
+  <section class="section-pad bg-inverse" style="overflow:hidden;">
+    <div class="page-wrap">
+      <div style="display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-20);">
+        <div>
+          <span class="section-eyebrow" style="color:var(--color-primary-fixed);">El Capital Humano</span>
+          <h2 class="text-headline-lg" style="color:var(--color-surface);">Mentes tras el menú</h2>
+        </div>
+        <p class="text-body-sm" style="color:rgb(234 225 212/80%);max-width:24rem;">Un equipo multidisciplinar de chefs, sommeliers y diseñadores de eventos unidos por un propósito común.</p>
+      </div>
+
+      <div class="grid-4">
+        {[
+          { nombre: 'Mateo Navarro',  rol: 'Director Ejecutivo',     src: '/images/generated/gallery-2.jpg',        pos: 'center top' },
+          { nombre: 'Lucía Quintana', rol: 'Chef Creativa',          src: '/images/generated/hero-nosotros-gen.jpg', pos: 'center top' },
+          { nombre: 'Julián Marín',   rol: 'Head Sommelier',         src: '/images/foto-canapes.png',               pos: 'center 30%' },
+          { nombre: 'Elena Soler',    rol: 'Diseño de Experiencias', src: '/images/foto-plato-mnq.png',             pos: 'center top' },
+        ].map(({ nombre, rol, src, pos }) => (
+          <div style="display:flex;flex-direction:column;gap:var(--space-6);">
+            <div class="overflow-hidden team-card" style="aspect-ratio:3/4;">
+              <img
+                src={src}
+                alt={nombre}
+                style={`width:100%;height:100%;object-fit:cover;object-position:${pos};filter:grayscale(1);transition:filter 700ms;`}
+                loading="lazy"
+              />
+            </div>
+            <div>
+              <h4 style="font-size:1.25rem;color:var(--color-surface);font-family:var(--font-serif);margin-bottom:var(--space-1);">{nombre}</h4>
+              <p class="label-caps" style="font-size:0.625rem;color:var(--color-primary-fixed);">{rol}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── CTA ─── -->
+  <section class="section-pad" style="text-align:center;">
+    <div class="page-wrap">
+      <div style="max-width:40rem;margin-inline:auto;">
+        <h2 class="text-display" style="margin-bottom:var(--space-8);">¿Planeamos algo extraordinario?</h2>
+        <p class="text-muted" style="margin-bottom:var(--space-12);">Estamos listos para transformar su visión en una realidad gastronómica sin precedentes.</p>
+        <a href="/contacto" class="btn btn-primary" style="min-width:18rem;">Solicitar Dosier Exclusivo</a>
+      </div>
+    </div>
+  </section>
+
 </MainLayout>
+
+<style>
+  .team-card:hover img { filter: grayscale(0) !important; }
+
+  .nosotros-hero-grid {
+    display: grid;
+    gap: var(--space-12);
+  }
+
+  @media (min-width: 48rem) {
+    .nosotros-hero-grid {
+      grid-template-columns: 5fr 7fr;
+      align-items: center;
+    }
+    .quote-card-desktop { display: block !important; }
+  }
+</style>

src/pages/reuniones-familiares.astro

@@ -2,11 +2,275 @@
 import MainLayout from '../layouts/MainLayout.astro';
 ---
 
-<MainLayout title="Reuniones Familiares | MNQ Catering y Evento">
+<MainLayout
-  <section class="card section-stack-sm">
+  title="Reuniones Familiares | MNQ Catering y Evento"
-    <p class="eyebrow">Servicio · Reuniones Familiares</p>
+  description="Creamos experiencias culinarias íntimas donde cada detalle cuenta. Bautizos, aniversarios y cenas privadas con el sello de excelencia MNQ."
-    <h1>Celebraciones íntimas con calidez y refinamiento.</h1>
+  activeNav="social"
-    <p>Desde aniversarios hasta cenas privadas, creamos experiencias cuidadas para disfrutar en familia sin resignar elegancia.</p>
+>
-    <a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20reunion%20familiar" target="_blank" rel="noreferrer">Consultar por WhatsApp</a>
+
+  <!-- ─── HERO ─── -->
+  <section class="hero-full">
+    <img
+      src="/images/generated/hero-familiares-gen.jpg"
+      alt="Reuniones familiares — MNQ Catering"
+      class="hero-bg"
+      style="object-position: center 35%;"
+      loading="eager"
+      fetchpriority="high"
+    />
+    <div class="hero-overlay" style="background: rgb(20 15 8 / 45%);"></div>
+
+    <div class="hero-content" style="padding-inline: var(--space-page);">
+      <div class="page-wrap" style="padding: 0;">
+        <div class="hero-card-glass">
+          <span class="section-eyebrow">Eventos Sociales</span>
+          <h1 class="text-display" style="margin-bottom: var(--space-6);">Reuniones Familiares con Alma</h1>
+          <p class="text-muted leading-relaxed" style="margin-bottom: var(--space-8);">
+            Creamos experiencias culinarias íntimas donde cada detalle cuenta. Desde bautizos hasta aniversarios dorados, transformamos su mesa en un escenario de recuerdos inolvidables.
+          </p>
+          <a
+            href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20reuni%C3%B3n%20familiar"
+            class="btn btn-primary"
+            target="_blank"
+            rel="noreferrer"
+          >Reservar una Cita</a>
+        </div>
+      </div>
+    </div>
   </section>
+
+  <!-- ─── SERVICIOS ─── -->
+  <section class="section-pad">
+    <div class="page-wrap">
+
+      <div class="servicios-header">
+        <h2 class="text-headline-lg">Momentos que Merecen Excelencia</h2>
+        <p class="text-muted border-left-gold 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 class="grid-3" style="align-items: start;">
+
+        <!-- Bautizos -->
+        <div style="display: flex; flex-direction: column; gap: var(--space-6);">
+          <div class="overflow-hidden hover-scale rounded-lg border-outline-soft" style="aspect-ratio: 3/4;">
+            <img
+              src="/images/generated/gallery-4.jpg"
+              alt="Bautizos — mesa de celebración"
+              style="width:100%;height:100%;object-fit:cover;object-position:center top;"
+              loading="lazy"
+            />
+          </div>
+          <div>
+            <h3 class="text-headline-md" style="margin-bottom: var(--space-2);">Bautizos</h3>
+            <p class="text-body-sm text-muted" style="text-transform:uppercase;letter-spacing:0.1em;border-bottom:2px solid rgb(212 175 55/20%);display:inline-block;padding-bottom:0.25rem;">Cenas y Brunch Temáticos</p>
+          </div>
+        </div>
+
+        <!-- Aniversarios (staggered) -->
+        <div style="display: flex; flex-direction: column; gap: var(--space-6);" class="card-stagger">
+          <div class="overflow-hidden hover-scale rounded-lg border-outline-soft" style="aspect-ratio: 3/4;">
+            <img
+              src="/images/generated/hero-familiares-gen.jpg"
+              alt="Aniversarios — celebración familiar"
+              style="width:100%;height:100%;object-fit:cover;object-position:center 30%;"
+              loading="lazy"
+            />
+          </div>
+          <div>
+            <h3 class="text-headline-md" style="margin-bottom: var(--space-2);">Aniversarios</h3>
+            <p class="text-body-sm text-muted" style="text-transform:uppercase;letter-spacing:0.1em;border-bottom:2px solid rgb(212 175 55/20%);display:inline-block;padding-bottom:0.25rem;">Menús Degustación Privados</p>
+          </div>
+        </div>
+
+        <!-- Cenas privadas -->
+        <div style="display: flex; flex-direction: column; gap: var(--space-6);">
+          <div class="overflow-hidden hover-scale rounded-lg border-outline-soft" style="aspect-ratio: 3/4;">
+            <img
+              src="/images/generated/hero-nosotros-gen.jpg"
+              alt="Cenas privadas — chef ejecutiva"
+              style="width:100%;height:100%;object-fit:cover;object-position:center top;"
+              loading="lazy"
+            />
+          </div>
+          <div>
+            <h3 class="text-headline-md" style="margin-bottom: var(--space-2);">Cenas Privadas</h3>
+            <p class="text-body-sm text-muted" style="text-transform:uppercase;letter-spacing:0.1em;border-bottom:2px solid rgb(212 175 55/20%);display:inline-block;padding-bottom:0.25rem;">Chef en Casa &amp; Servicio Premium</p>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── GALERÍA PLATOS ─── -->
+  <section class="section-pad bg-container">
+    <div class="page-wrap">
+      <div style="margin-bottom: var(--space-16);">
+        <span class="section-eyebrow">Culinaria de Autor</span>
+        <h2 class="text-headline-lg">Platos que Cuentan Historias</h2>
+      </div>
+
+      <div class="platos-grid">
+        <!-- Featured plate -->
+        <div>
+          <div class="overflow-hidden rounded-lg border-outline-soft" style="aspect-ratio:16/9;margin-bottom:var(--space-6);">
+            <img
+              src="/images/generated/gallery-3.jpg"
+              alt="Vieiras de la Costa con Azafrán"
+              style="width:100%;height:100%;object-fit:cover;"
+              loading="lazy"
+            />
+          </div>
+          <div style="display:flex;justify-content:space-between;align-items:baseline;">
+            <h4 class="text-headline-md">Vieiras de la Costa con Azafrán</h4>
+            <span class="label-caps text-muted italic" style="font-size:0.7rem;">Entrante de Firma</span>
+          </div>
+        </div>
+
+        <!-- Secondary plates -->
+        <div style="display:flex;flex-direction:column;gap:var(--space-8);justify-content:center;">
+          <div>
+            <div class="overflow-hidden rounded-lg border-outline-soft" style="aspect-ratio:1/1;margin-bottom:var(--space-4);">
+              <img
+                src="/images/foto-plato-mnq.png"
+                alt="Postre de autor MNQ"
+                style="width:100%;height:100%;object-fit:cover;object-position:center top;"
+                loading="lazy"
+              />
+            </div>
+            <h4 class="text-headline-md" style="margin-bottom:var(--space-1);">Postre de Autor</h4>
+            <p class="text-body-sm text-muted">Elaboración artesanal con flor de azahar y crema de vainilla.</p>
+          </div>
+          <div>
+            <div class="overflow-hidden rounded-lg border-outline-soft" style="aspect-ratio:1/1;margin-bottom:var(--space-4);">
+              <img
+                src="/images/generated/gallery-1.jpg"
+                alt="Postre con láminas de oro"
+                style="width:100%;height:100%;object-fit:cover;"
+                loading="lazy"
+              />
+            </div>
+            <h4 class="text-headline-md" style="margin-bottom:var(--space-1);">Repostería Dorada</h4>
+            <p class="text-body-sm text-muted">Láminas de oro comestible sobre crema pastelera de temporada.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── PERSONALIZACIÓN ─── -->
+  <section class="section-pad">
+    <div class="page-wrap">
+      <div class="grid-2" style="align-items:center;gap:var(--space-16);">
+
+        <div class="overflow-hidden rounded-lg" style="aspect-ratio:4/5;">
+          <img
+            src="/images/foto-canapes.png"
+            alt="Canapés premium para reuniones familiares"
+            style="width:100%;height:100%;object-fit:cover;object-position:center top;"
+            loading="lazy"
+          />
+        </div>
+
+        <div>
+          <h2 class="text-headline-lg leading-tight" style="margin-bottom:var(--space-8);">
+            Menús Diseñados Exclusivamente para Usted
+          </h2>
+          <p class="text-muted leading-relaxed" style="margin-bottom:var(--space-10);">
+            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 style="display:flex;flex-direction:column;gap:var(--space-6);margin-bottom:var(--space-10);">
+            <li style="display:flex;align-items:flex-start;gap:var(--space-4);">
+              <span class="material-symbols-outlined text-primary">auto_awesome</span>
+              <div>
+                <h5 style="font-weight:600;margin-bottom:var(--space-1);">Consultoría Privada</h5>
+                <p class="text-body-sm text-muted">Reunión con nuestro Chef Ejecutivo para definir el concepto gastronómico.</p>
+              </div>
+            </li>
+            <li style="display:flex;align-items:flex-start;gap:var(--space-4);">
+              <span class="material-symbols-outlined text-primary">restaurant_menu</span>
+              <div>
+                <h5 style="font-weight:600;margin-bottom:var(--space-1);">Prueba de Degustación</h5>
+                <p class="text-body-sm text-muted">Sesión íntima para refinar sabores y presentaciones antes del gran día.</p>
+              </div>
+            </li>
+            <li style="display:flex;align-items:flex-start;gap:var(--space-4);">
+              <span class="material-symbols-outlined text-primary">local_florist</span>
+              <div>
+                <h5 style="font-weight:600;margin-bottom:var(--space-1);">Armonía Visual</h5>
+                <p class="text-body-sm text-muted">Coordinación de mantelería, vajilla y cristalería con el menú seleccionado.</p>
+              </div>
+            </li>
+          </ul>
+          <a
+            href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20reuni%C3%B3n%20familiar"
+            class="btn btn-primary"
+            target="_blank"
+            rel="noreferrer"
+          >Consultar Disponibilidad</a>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ─── CTA GOLD ─── -->
+  <section class="cta-gold section-pad">
+    <div class="page-wrap" style="text-align:center;">
+      <h2 class="text-headline-lg" style="color:#fff;margin-bottom:var(--space-8);">¿Comenzamos a planear su próximo encuentro?</h2>
+      <p style="color:rgb(255 255 255/88%);max-width:36rem;margin-inline:auto;margin-bottom:var(--space-12);">
+        Nuestro equipo está disponible para asesorarle de forma inmediata y personalizada a través de nuestro canal exclusivo de WhatsApp.
+      </p>
+      <a
+        href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20reuni%C3%B3n%20familiar"
+        class="btn"
+        style="background:var(--color-surface);color:var(--color-primary);border-radius:var(--radius-md);padding:1rem 2.5rem;gap:var(--space-3);"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <span class="material-symbols-outlined">chat</span>
+        Contactar por WhatsApp
+      </a>
+    </div>
+  </section>
+
 </MainLayout>
+
+<style>
+  .hero-card-glass {
+    max-width: 36rem;
+    background: rgb(255 248 240 / 92%);
+    backdrop-filter: blur(8px);
+    padding: var(--space-12);
+    border: 1px solid rgb(208 197 175 / 20%);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .servicios-header {
+    display: grid;
+    gap: var(--space-8);
+    margin-bottom: var(--space-16);
+  }
+
+  .platos-grid {
+    display: grid;
+    gap: var(--space-8);
+  }
+
+  @media (min-width: 48rem) {
+    .card-stagger { margin-top: var(--space-24); }
+
+    .servicios-header {
+      grid-template-columns: 5fr 7fr;
+      align-items: flex-end;
+    }
+
+    .platos-grid {
+      grid-template-columns: 8fr 4fr;
+      align-items: start;
+    }
+  }
+</style>

src/styles/base.css

@@ -1,9 +1,8 @@
-* {
+*, *::before, *::after {
   box-sizing: border-box;
 }
 
-html,
+html, body {
-body {
   margin: 0;
   padding: 0;
 }
@@ -16,12 +15,16 @@ body {
   background: var(--color-surface);
 }
 
-h1,
+::selection {
-h2,
+  background: var(--color-primary-container);
-h3 {
+  color: var(--color-on-surface);
+}
+
+h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-serif);
   line-height: 1.2;
   margin: 0;
+  font-weight: 400;
 }
 
 p {
@@ -30,4 +33,24 @@ p {
 
 a {
   color: inherit;
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+ul, ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.material-symbols-outlined {
+  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+  display: inline-block;
+  line-height: 1;
+  vertical-align: middle;
 }

src/styles/components.css

@@ -1,107 +1,687 @@
+/* ─────────────────────────────────────────────
+   SITE HEADER / NAV
+   ───────────────────────────────────────────── */
+
 .site-header {
-  border-bottom: 1px solid rgb(31 26 23 / 10%);
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 50;
+  height: var(--nav-h);
+  background: rgb(255 248 240 / 85%);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgb(127 118 99 / 10%);
+}
+
+.site-header .page-wrap {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.site-brand {
+  font-family: var(--font-serif);
+  font-size: var(--text-headline-md);
+  color: var(--color-primary);
+  letter-spacing: -0.02em;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.site-nav {
+  display: none;
+  align-items: center;
+  gap: var(--space-8);
+}
+
+.nav-link {
+  font-family: var(--font-sans);
+  font-size: var(--text-label-caps);
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-on-surface);
+  transition: color 200ms;
+  padding-bottom: 0.25rem;
+}
+
+.nav-link:hover {
+  color: var(--color-primary);
+}
+
+.nav-link.active {
+  color: var(--color-primary);
+  border-bottom: 2px solid var(--color-primary);
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+@media (min-width: 48rem) {
+  .site-nav {
+    display: flex;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   BUTTONS
+   ───────────────────────────────────────────── */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  min-height: 44px;
+  padding: 0.75rem 1.75rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-label-caps);
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  transition: opacity 200ms, transform 100ms, background 200ms;
+}
+
+.btn:active {
+  transform: scale(0.96);
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+  border-radius: var(--radius-md);
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-container);
+  color: var(--color-on-surface);
+}
+
+.btn-pill {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+  border-radius: var(--radius-full);
+}
+
+.btn-pill:hover {
+  opacity: 0.85;
+}
+
+.btn-outline {
+  background: transparent;
+  color: var(--color-primary);
+  border: 1px solid var(--color-primary-container);
+  border-radius: var(--radius-md);
+}
+
+.btn-outline:hover {
+  background: var(--color-primary-container);
+  color: var(--color-on-surface);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--color-on-primary);
+  border: 2px solid var(--color-primary-container);
+  border-radius: var(--radius-full);
+  padding: 1rem 2.5rem;
+}
+
+.btn-ghost:hover {
+  background: var(--color-primary-container);
+  color: var(--color-on-surface);
+}
+
+.btn-underline {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-family: var(--font-sans);
+  font-size: var(--text-label-caps);
+  font-weight: 600;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--color-primary);
+  border-bottom: 2px solid var(--color-primary);
+  padding-bottom: 0.375rem;
+  transition: opacity 200ms;
+  cursor: pointer;
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+
+.btn-underline:hover {
+  opacity: 0.65;
+}
+
+.btn-dark {
+  background: var(--color-primary-container);
+  color: var(--color-on-surface);
+  border-radius: var(--radius-full);
+  padding: 1.25rem 2.5rem;
+}
+
+.btn-dark:hover {
+  background: var(--color-primary-fixed);
+  transform: scale(1.03);
+}
+
+/* ─────────────────────────────────────────────
+   TYPOGRAPHY CLASSES
+   ───────────────────────────────────────────── */
+
+.text-display {
+  font-family: var(--font-serif);
+  font-size: var(--text-display);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  font-weight: 400;
+}
+
+.text-headline-lg {
+  font-family: var(--font-serif);
+  font-size: var(--text-headline-lg);
+  line-height: 1.2;
+  letter-spacing: 0.02em;
+  font-weight: 400;
+}
+
+.text-headline-md {
+  font-family: var(--font-serif);
+  font-size: var(--text-headline-md);
+  line-height: 1.3;
+  letter-spacing: 0.03em;
+  font-weight: 400;
+}
+
+.label-caps {
+  font-family: var(--font-sans);
+  font-size: var(--text-label-caps);
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+
+.label-caps-wide {
+  font-family: var(--font-sans);
+  font-size: var(--text-label-caps);
+  font-weight: 600;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+}
+
+.text-body-sm {
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  letter-spacing: 0.01em;
+}
+
+/* ─────────────────────────────────────────────
+   COLOR UTILITIES
+   ───────────────────────────────────────────── */
+
+.text-primary { color: var(--color-primary); }
+.text-muted   { color: var(--color-on-surface-variant); }
+.text-white   { color: #fff; }
+.text-inverse { color: var(--color-inverse-on-surface); }
+
+.bg-surface           { background: var(--color-surface); }
+.bg-container         { background: var(--color-surface-container); }
+.bg-container-low     { background: var(--color-surface-container-low); }
+.bg-container-high    { background: var(--color-surface-container-high); }
+.bg-inverse           { background: var(--color-inverse-surface); }
+.bg-primary           { background: var(--color-primary); }
+.bg-primary-container { background: var(--color-primary-container); }
+
+/* ─────────────────────────────────────────────
+   HERO SECTIONS
+   ───────────────────────────────────────────── */
+
+.hero-full {
+  position: relative;
+  height: 100svh;
+  min-height: 540px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.hero-tall {
+  position: relative;
+  height: 80svh;
+  min-height: 500px;
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.hero-gradient-placeholder {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, var(--color-inverse-surface) 0%, var(--color-primary) 50%, var(--color-primary-container) 100%);
+}
+
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgb(31 27 19 / 35%);
+}
+
+.hero-overlay-bottom {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 0%, rgb(31 27 19 / 50%) 100%);
+}
+
+.hero-content {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+}
+
+/* ─────────────────────────────────────────────
+   CARDS
+   ───────────────────────────────────────────── */
+
+.card-border {
+  border: 1px solid rgb(208 197 175 / 30%);
+  border-radius: var(--radius-lg);
   background: var(--color-surface);
 }
 
-.brand {
+.card-image {
-  font-weight: 600;
+  overflow: hidden;
-  text-decoration: none;
+  border-radius: var(--radius-lg);
+  border: 1px solid rgb(208 197 175 / 10%);
 }
 
-.site-footer {
+.card-image img {
-  border-top: 1px solid rgb(31 26 23 / 10%);
-  padding-block: var(--space-6);
-}
-
-.footer-title,
-.eyebrow {
-  font-size: var(--text-sm);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--color-secondary);
-}
-
-.card {
-  background: #fff;
-  border: 1px solid rgb(31 26 23 / 8%);
-  border-radius: var(--radius-md);
-  padding: var(--space-6);
-  box-shadow: var(--shadow-soft);
-  display: grid;
-  gap: var(--space-4);
-}
-
-.button-primary,
-.button-secondary {
-  width: fit-content;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 44px;
-  padding: 0.75rem 1rem;
-  border-radius: var(--radius-sm);
-  text-decoration: none;
-  border: 1px solid transparent;
-  font-weight: 600;
-}
-
-.button-primary {
-  background: var(--color-primary);
-  color: #201a14;
-}
-
-.button-primary:hover {
-  background: var(--color-secondary);
-  color: #fff;
-}
-
-.button-secondary {
-  background: transparent;
-  color: var(--color-on-surface);
-  border-color: rgb(31 26 23 / 25%);
-}
-
-.contact-form {
-  display: grid;
-  gap: var(--space-4);
-}
-
-.contact-form label {
-  display: grid;
-  gap: var(--space-2);
-  font-weight: 500;
-}
-
-.contact-form input,
-.contact-form textarea {
   width: 100%;
-  border-radius: var(--radius-sm);
+  height: 100%;
-  border: 1px solid rgb(31 26 23 / 20%);
+  object-fit: cover;
-  padding: 0.75rem;
+  transition: transform 700ms ease;
-  font: inherit;
-  background: #fff;
 }
 
-.contact-form input:focus,
+.card-image:hover img {
-.contact-form textarea:focus {
+  transform: scale(1.05);
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
 }
 
+/* Portfolio/bento cards */
+.bento-card {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  border: 1px solid rgb(208 197 175 / 10%);
+}
+
+.bento-card img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 700ms ease;
+}
+
+.bento-card:hover img {
+  transform: scale(1.05);
+}
+
+.bento-card-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgb(31 27 19 / 70%), transparent);
+}
+
+.bento-card-body {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--space-8);
+  z-index: 10;
+}
+
+/* Testimonial card */
+.testimonial-card {
+  padding: var(--space-10);
+  border: 1px solid rgb(208 197 175 / 30%);
+  border-radius: var(--radius-lg);
+  background: rgb(255 255 255 / 50%);
+  backdrop-filter: blur(4px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.testimonial-quote {
+  font-style: italic;
+  line-height: 1.6;
+  color: var(--color-on-surface);
+  flex: 1;
+}
+
+.testimonial-author {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding-top: var(--space-6);
+  border-top: 1px solid rgb(208 197 175 / 30%);
+}
+
+.testimonial-avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-full);
+  background: var(--color-surface-container-high);
+  border: 1px solid rgb(212 175 55 / 20%);
+  flex-shrink: 0;
+}
+
+/* Value card */
+.value-card {
+  padding: var(--space-10);
+  border: 1px solid rgb(208 197 175 / 30%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--space-4);
+  transition: background 300ms;
+}
+
+.value-card:hover {
+  background: var(--color-surface-container);
+}
+
+/* ─────────────────────────────────────────────
+   DIVIDERS / ACCENTS
+   ───────────────────────────────────────────── */
+
+.gold-line {
+  width: 3rem;
+  height: 2px;
+  background: var(--color-primary-container);
+}
+
+.border-left-gold {
+  border-left: 2px solid rgb(212 175 55 / 20%);
+  padding-left: var(--space-8);
+}
+
+/* ─────────────────────────────────────────────
+   FORMS
+   ───────────────────────────────────────────── */
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.form-label {
+  font-family: var(--font-sans);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--color-primary);
+}
+
+.form-input,
+.form-select,
+.form-textarea {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--color-outline-variant);
+  padding: var(--space-4) 0;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  color: var(--color-on-surface);
+  width: 100%;
+  transition: border-color 200ms;
+  outline: none;
+  appearance: none;
+}
+
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+  border-bottom-color: var(--color-primary-container);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--color-on-surface-variant);
+  opacity: 0.6;
+}
+
+.form-textarea {
+  resize: none;
+}
+
+.form-grid {
+  display: grid;
+  gap: var(--space-12);
+}
+
+@media (min-width: 48rem) {
+  .form-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .form-span-full {
+    grid-column: 1 / -1;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   FLOATING WHATSAPP CTA
+   ───────────────────────────────────────────── */
+
 .whatsapp-float {
   position: fixed;
-  right: var(--space-4);
+  right: var(--space-8);
-  bottom: var(--space-4);
+  bottom: var(--space-8);
-  z-index: 50;
+  z-index: 60;
-  background: #25d366;
-  color: #fff;
-  text-decoration: none;
-  min-height: 48px;
-  padding: 0.75rem 1rem;
-  border-radius: 999px;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  gap: var(--space-4);
-  font-weight: 700;
+  background: var(--color-primary);
-  box-shadow: var(--shadow-soft);
+  color: var(--color-on-primary);
+  padding: var(--space-4) var(--space-6);
+  padding-left: var(--space-8);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-sans);
+  font-size: var(--text-label-caps);
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  text-decoration: none;
+  transition: transform 200ms, box-shadow 200ms;
+}
+
+.whatsapp-float:hover {
+  transform: scale(1.04);
+  box-shadow: 0 30px 60px -15px rgb(115 92 0 / 35%);
+}
+
+.whatsapp-float:active {
+  transform: scale(0.97);
+}
+
+.whatsapp-float-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full);
+  background: rgb(255 255 255 / 15%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ─────────────────────────────────────────────
+   SITE FOOTER
+   ───────────────────────────────────────────── */
+
+.site-footer {
+  background: var(--color-surface-container);
+  border-top: 1px solid rgb(208 197 175 / 20%);
+}
+
+.footer-inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  padding-block: var(--space-section);
+}
+
+.footer-brand h3 {
+  font-family: var(--font-serif);
+  font-size: var(--text-headline-lg);
+  color: var(--color-on-surface);
+  margin-bottom: var(--space-4);
+}
+
+.footer-brand p {
+  font-size: var(--text-sm);
+  color: var(--color-on-surface-variant);
+  max-width: 20rem;
+}
+
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-16);
+}
+
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.footer-col-title {
+  font-family: var(--font-sans);
+  font-size: var(--text-label-caps);
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-primary);
+  margin-bottom: var(--space-2);
+}
+
+.footer-link {
+  font-size: var(--text-sm);
+  color: var(--color-on-surface-variant);
+  transition: color 200ms;
+}
+
+.footer-link:hover {
+  color: var(--color-primary);
+}
+
+.footer-bottom {
+  padding-block: var(--space-6);
+  border-top: 1px solid rgb(208 197 175 / 10%);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  align-items: flex-start;
+}
+
+@media (min-width: 48rem) {
+  .footer-inner {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  .footer-bottom {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   DARK CTA SECTION
+   ───────────────────────────────────────────── */
+
+.cta-dark {
+  background: var(--color-inverse-surface);
+  color: var(--color-inverse-on-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-16) var(--space-8);
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+}
+
+@media (min-width: 48rem) {
+  .cta-dark {
+    padding: var(--space-24) var(--space-20);
+  }
+}
+
+.cta-dark-ring {
+  position: absolute;
+  border: 2px solid rgb(255 224 136 / 10%);
+  border-radius: var(--radius-full);
+  pointer-events: none;
+}
+
+.cta-gold {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+  padding: var(--space-16) var(--space-8);
+  text-align: center;
+}
+
+/* ─────────────────────────────────────────────
+   BORDER UTILITIES
+   ───────────────────────────────────────────── */
+
+.border-outline-soft {
+  border: 1px solid rgb(208 197 175 / 30%);
+}
+
+.rounded-sm { border-radius: var(--radius-sm); }
+.rounded-md { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-full { border-radius: var(--radius-full); }
+
+/* ─────────────────────────────────────────────
+   IMAGE PLACEHOLDERS (no photo yet)
+   ───────────────────────────────────────────── */
+
+.img-placeholder {
+  background: linear-gradient(135deg, var(--color-surface-container-high) 0%, var(--color-surface-container) 100%);
+  width: 100%;
+  height: 100%;
+}
+
+.img-placeholder-hero {
+  background: linear-gradient(160deg, var(--color-inverse-surface) 0%, #3d3020 40%, var(--color-primary) 100%);
 }

src/styles/layout.css

@@ -1,47 +1,145 @@
-.container {
+/* Container */
-  width: min(100% - 2rem, 72rem);
+.page-wrap {
+  max-width: var(--max-w-content);
   margin-inline: auto;
+  padding-inline: var(--space-page);
 }
 
-.section-stack {
+/* Section spacing */
-  padding-block: var(--space-8) var(--space-12);
+.section-pad {
+  padding-block: var(--space-section);
 }
 
-.section-stack-sm {
+.section-pad-sm {
+  padding-block: var(--space-12);
+}
+
+/* Grids */
+.grid-2 {
   display: grid;
-  gap: var(--space-4);
+  gap: var(--space-8);
 }
 
-.nav-wrap {
+.grid-3 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-  padding-block: var(--space-4);
-}
-
-.nav-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.footer-grid {
   display: grid;
-  gap: var(--space-4);
+  gap: var(--space-8);
+}
+
+.grid-4 {
+  display: grid;
+  gap: var(--space-8);
+}
+
+.grid-12 {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--space-8);
 }
 
 @media (min-width: 48rem) {
-  .nav-wrap {
+  .grid-2 { grid-template-columns: repeat(2, 1fr); }
-    flex-direction: row;
+  .grid-3 { grid-template-columns: repeat(3, 1fr); }
+  .grid-4 { grid-template-columns: repeat(4, 1fr); }
+}
+
+/* Column spans (for use inside .grid-12) */
+.col-5  { grid-column: span 12; }
+.col-6  { grid-column: span 12; }
+.col-7  { grid-column: span 12; }
+.col-8  { grid-column: span 12; }
+
+@media (min-width: 48rem) {
+  .col-5  { grid-column: span 5; }
+  .col-6  { grid-column: span 6; }
+  .col-7  { grid-column: span 7; }
+  .col-8  { grid-column: span 8; }
+}
+
+/* Flex utilities */
+.flex-between {
+  display: flex;
   justify-content: space-between;
   align-items: center;
-  }
-
-  .footer-grid {
-    grid-template-columns: 1fr auto;
-    align-items: center;
-  }
 }
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.gap-4 { gap: var(--space-4); }
+.gap-6 { gap: var(--space-6); }
+.gap-8 { gap: var(--space-8); }
+.gap-12 { gap: var(--space-12); }
+
+/* Stack (vertical flex with gap) */
+.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
+.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
+.stack-8 { display: flex; flex-direction: column; gap: var(--space-8); }
+.stack-12 { display: flex; flex-direction: column; gap: var(--space-12); }
+
+/* Mosaic gallery (CSS columns) */
+.mosaic {
+  columns: 1;
+  gap: var(--space-8);
+}
+
+@media (min-width: 40rem) {
+  .mosaic { columns: 2; }
+}
+
+@media (min-width: 64rem) {
+  .mosaic { columns: 3; }
+}
+
+.mosaic > * {
+  break-inside: avoid;
+  margin-bottom: var(--space-8);
+}
+
+/* Aspect ratios */
+.aspect-portrait {
+  aspect-ratio: 3/4;
+}
+
+.aspect-square {
+  aspect-ratio: 1/1;
+}
+
+.aspect-video {
+  aspect-ratio: 16/9;
+}
+
+.aspect-wide {
+  aspect-ratio: 4/3;
+}
+
+.object-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+/* Overflow hidden for hover effects */
+.overflow-hidden {
+  overflow: hidden;
+}
+
+/* Text alignment */
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+/* Max width utilities */
+.max-w-sm { max-width: 24rem; }
+.max-w-md { max-width: 32rem; }
+.max-w-lg { max-width: 40rem; }
+.max-w-xl { max-width: 48rem; }
+.max-w-2xl { max-width: 56rem; }
+.mx-auto { margin-inline: auto; }

src/styles/tokens.css

@@ -1,28 +1,61 @@
 :root {
-  --color-primary: #d4af37;
+  /* Brand colors */
-  --color-secondary: #a67c1b;
+  --color-primary: #735c00;
-  --color-surface: #fffdf8;
+  --color-primary-container: #d4af37;
-  --color-on-surface: #1f1a17;
+  --color-primary-fixed: #ffe088;
+  --color-on-primary: #ffffff;
+  --color-secondary: #7b5900;
+  --color-surface: #fff8f0;
+  --color-surface-container: #f5eddf;
+  --color-surface-container-low: #fbf3e5;
+  --color-surface-container-high: #efe7da;
+  --color-on-surface: #1f1b13;
+  --color-on-surface-variant: #4d4635;
+  --color-outline: #7f7663;
+  --color-outline-variant: #d0c5af;
+  --color-inverse-surface: #343027;
+  --color-inverse-on-surface: #f8f0e2;
   --color-error: #b3261e;
 
+  /* Fonts */
   --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  --font-serif: 'Playfair Display', Georgia, serif;
+  --font-serif: 'Noto Serif', Georgia, serif;
 
-  --text-sm: 0.875rem;
+  /* Type scale */
+  --text-display: clamp(2.5rem, 6vw, 4rem);
+  --text-headline-lg: clamp(1.75rem, 4vw, 2.5rem);
+  --text-headline-md: 2rem;
+  --text-label-caps: 0.75rem;
   --text-base: 1rem;
-  --text-lg: 1.125rem;
+  --text-sm: 0.875rem;
-  --text-xl: clamp(1.5rem, 5vw, 2.25rem);
 
+  /* Spacing */
+  --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1rem;
   --space-6: 1.5rem;
   --space-8: 2rem;
+  --space-10: 2.5rem;
   --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+  --space-section: clamp(4rem, 10vw, 7.5rem);
+  --space-page: clamp(1.5rem, 5vw, 4rem);
+  --max-w-content: 80rem;
 
+  /* Border radius */
   --radius-sm: 6px;
   --radius-md: 12px;
   --radius-lg: 20px;
+  --radius-full: 9999px;
 
+  /* Shadows */
   --shadow-soft: 0 8px 24px rgb(31 26 23 / 8%);
+  --shadow-editorial: 0 10px 30px -10px rgb(115 92 0 / 5%);
+  --shadow-lg: 0 25px 50px -12px rgb(31 26 23 / 15%);
+
+  /* Nav height */
+  --nav-h: 5rem;
 }

src/styles/utilities.css

@@ -1,9 +1,121 @@
-.text-muted {
+/* Margin utilities */
-  color: rgb(31 26 23 / 72%);
+.mt-4  { margin-top: var(--space-4); }
+.mt-6  { margin-top: var(--space-6); }
+.mt-8  { margin-top: var(--space-8); }
+.mt-12 { margin-top: var(--space-12); }
+.mt-16 { margin-top: var(--space-16); }
+.mt-20 { margin-top: var(--space-20); }
+.mt-24 { margin-top: var(--space-24); }
+.mb-4  { margin-bottom: var(--space-4); }
+.mb-6  { margin-bottom: var(--space-6); }
+.mb-8  { margin-bottom: var(--space-8); }
+.mb-12 { margin-bottom: var(--space-12); }
+.mb-16 { margin-bottom: var(--space-16); }
+
+/* Padding utilities */
+.pt-nav { padding-top: var(--nav-h); }
+.p-10   { padding: var(--space-10); }
+.p-12   { padding: var(--space-12); }
+
+/* Display */
+.hidden { display: none; }
+.block  { display: block; }
+.flex   { display: flex; }
+.grid   { display: grid; }
+
+@media (min-width: 48rem) {
+  .md-block { display: block; }
+  .md-flex  { display: flex; }
+  .md-hidden { display: none; }
 }
 
-.link-accent {
+/* Width */
-  color: var(--color-secondary);
+.w-full { width: 100%; }
-  text-decoration: underline;
+
-  text-underline-offset: 0.2em;
+/* Overflow */
+.overflow-hidden { overflow: hidden; }
+
+/* Position */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.sticky-top { position: sticky; top: 0; }
+
+/* Z-index */
+.z-10 { z-index: 10; }
+
+/* Opacity */
+.opacity-30  { opacity: 0.3; }
+.opacity-60  { opacity: 0.6; }
+.opacity-80  { opacity: 0.8; }
+
+/* Grayscale */
+.grayscale   { filter: grayscale(1); }
+.grayscale-hover:hover { filter: none; }
+
+/* Transition */
+.transition { transition: all 300ms ease; }
+
+/* Italic */
+.italic { font-style: italic; }
+
+/* Weight */
+.font-bold { font-weight: 700; }
+.font-medium { font-weight: 500; }
+
+/* Leading */
+.leading-relaxed { line-height: 1.7; }
+.leading-tight   { line-height: 1.15; }
+
+/* Stars rating */
+.stars {
+  display: flex;
+  gap: var(--space-1);
+  justify-content: center;
+}
+
+.star {
+  color: var(--color-primary-container);
+  font-size: 1.25rem;
+}
+
+/* Section label */
+.section-eyebrow {
+  display: block;
+  font-family: var(--font-sans);
+  font-size: var(--text-label-caps);
+  font-weight: 600;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: var(--color-primary);
+  margin-bottom: var(--space-4);
+}
+
+/* Editorial quote accent */
+.quote-mark {
+  font-family: var(--font-serif);
+  font-size: 4rem;
+  line-height: 0.8;
+  color: var(--color-primary-container);
+  margin-bottom: var(--space-4);
+}
+
+/* Hover scale on cards */
+.hover-scale {
+  transition: transform 500ms ease;
+}
+.hover-scale:hover {
+  transform: scale(1.02);
+}
+
+/* Image hover zoom (applied to parent that clips) */
+.img-zoom img {
+  transition: transform 700ms ease;
+}
+.img-zoom:hover img {
+  transform: scale(1.08);
+}
+
+/* Icon size */
+.icon-lg {
+  font-size: 2.5rem;
 }