qreastech/MNQ-Catering-y-Evento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: rediseño premium completo del sitio MNQ

Browse Source 
- 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
This commit is contained in:
Manuel
2026-05-08 01:12:03 +02:00
parent 50b4e75edd
commit f77d811f18
57 changed files with 2618 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/bodas-reales.astro
+207 -6
View File
@@ -2,11 +2,212 @@
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout title="Bodas Reales | MNQ Catering y Evento">
<section class="card section-stack-sm">
<p class="eyebrow">Servicio · Bodas Reales</p>
<h1>Bodas con identidad propia y ejecución impecable.</h1>
<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>
<MainLayout
title="Bodas Reales | MNQ Catering y Evento"
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."
activeNav="bodas"
>
<!-- ─── 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
+179 -21
View File
@@ -2,27 +2,185 @@
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout title="Contacto | MNQ Catering y Evento">
<section class="card section-stack-sm">
<p class="eyebrow">Contacto</p>
<h1>Coordinemos tu evento por WhatsApp.</h1>
<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>
<MainLayout
title="Contacto | MNQ Catering y Evento"
description="Hablemos de su próximo evento. Diseñamos experiencias gastronómicas a medida para bodas, corporativos y celebraciones familiares."
activeNav="contacto"
>
<form class="contact-form" aria-label="Formulario de contacto secundario">
<label>
Nombre
<input type="text" name="nombre" placeholder="Tu nombre" />
</label>
<label>
Email
<input type="email" name="email" placeholder="tu@email.com" />
</label>
<label>
Mensaje
<textarea name="mensaje" rows="4" placeholder="Contanos brevemente tu evento"></textarea>
</label>
<button type="submit" class="button-secondary">Enviar (secundario)</button>
</form>
<!-- ─── HERO ─── -->
<section class="contacto-hero">
<div class="page-wrap">
<div class="contacto-hero-grid">
<div class="contacto-hero-text">
<span class="section-eyebrow">Contacto</span>
<h1 class="text-display" style="margin-bottom: var(--space-8);">
Hablemos de su próximo evento.
</h1>
<p class="text-muted" style="line-height: 1.7; max-width: 32rem;">
Diseñamos experiencias gastronómicas a medida. Permítanos conocer sus necesidades para crear una propuesta única y exclusiva.
</p>
</div>
<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
+154 -6
View File
@@ -2,11 +2,159 @@
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout title="Corporativo & Business | MNQ Catering y Evento">
<section class="card section-stack-sm">
<p class="eyebrow">Servicio · Corporativo &amp; Business</p>
<h1>Eventos empresariales con timing, imagen y calidad premium.</h1>
<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>
<MainLayout
title="Corporativo & Business | MNQ Catering y Evento"
description="Elevamos la imagen de su empresa a través de experiencias gastronómicas impecables. Lanzamientos, galas institucionales y coffee breaks premium."
activeNav="corporativo"
>
<!-- ─── 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
+217 -6
View File
@@ -2,11 +2,222 @@
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout title="MNQ Catering y Evento | Home">
<section class="hero card">
<p class="eyebrow">Catering premium para eventos memorables</p>
<h1>Diseñamos experiencias gastronómicas a la altura de tu celebración.</h1>
<p>Con enfoque editorial, servicio impecable y ejecución personalizada para cada ocasión.</p>
<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>
<MainLayout title="MNQ Catering y Evento | Excelencia Culinaria">
<!-- ─── HERO ─── -->
<section class="hero-full">
<img
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
+144 -6
View File
@@ -2,11 +2,149 @@
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout title="Nosotros | MNQ Catering y Evento">
<section class="card section-stack-sm">
<p class="eyebrow">Nosotros</p>
<h1>Hospitalidad, estética y excelencia operativa.</h1>
<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>
<MainLayout
title="Nosotros | MNQ Catering y Evento"
description="El arte de la hospitalidad elevada. Descubra la filosofía, valores y equipo detrás de MNQ Catering y Evento."
activeNav="nosotros"
>
<!-- ─── 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
+270 -6
View File
@@ -2,11 +2,275 @@
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout title="Reuniones Familiares | MNQ Catering y Evento">
<section class="card section-stack-sm">
<p class="eyebrow">Servicio · Reuniones Familiares</p>
<h1>Celebraciones íntimas con calidez y refinamiento.</h1>
<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>
<MainLayout
title="Reuniones Familiares | MNQ Catering y Evento"
description="Creamos experiencias culinarias íntimas donde cada detalle cuenta. Bautizos, aniversarios y cenas privadas con el sello de excelencia MNQ."
activeNav="social"
>
<!-- ─── 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>