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
This commit is contained in:
Manuel
@@ -1,12 +1,45 @@
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-grid">
|
||||
<div>
|
||||
<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="page-wrap">
|
||||
<div class="footer-inner">
|
||||
|
||||
<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 class="footer-links">
|
||||
<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>
|
||||
<p class="footer-title">Contacto directo</p>
|
||||
<a href="https://wa.me/5491112345678" class="link-accent" target="_blank" rel="noreferrer">Escribir por WhatsApp</a>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -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">
|
||||
<a href="/" class="brand">MNQ Catering y Evento</a>
|
||||
<nav aria-label="Principal">
|
||||
<ul class="nav-list">
|
||||
<li><a href="/nosotros">Nosotros</a></li>
|
||||
<li><a href="/bodas-reales">Bodas Reales</a></li>
|
||||
<li><a href="/corporativo-business">Corporativo & Business</a></li>
|
||||
<li><a href="/reuniones-familiares">Reuniones Familiares</a></li>
|
||||
<li><a href="/contacto">Contacto</a></li>
|
||||
</ul>
|
||||
<div class="page-wrap">
|
||||
|
||||
<a href="/" class="site-brand-link" aria-label="MNQ Catering y Eventos — inicio">
|
||||
<img
|
||||
src="/images/logo-nav-dark.png"
|
||||
alt="MNQ Catering y Eventos"
|
||||
class="site-logo-banner"
|
||||
width="220"
|
||||
height="85"
|
||||
/>
|
||||
</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 />
|
||||
<main class="container section-stack">
|
||||
<SiteHeader activeNav={activeNav} />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<SiteFooter />
|
||||
|
||||
@@ -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 & 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 & 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 & 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 & 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>
|
||||
|
||||
+179
-21
@@ -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>
|
||||
|
||||
@@ -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 & 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 />& 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 & 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>
|
||||
|
||||
+217
-6
@@ -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 & 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>
|
||||
|
||||
+144
-6
@@ -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>
|
||||
|
||||
@@ -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 & 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>
|
||||
|
||||
+29
-6
@@ -1,9 +1,8 @@
|
||||
* {
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -16,12 +15,16 @@ body {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
::selection {
|
||||
background: var(--color-primary-container);
|
||||
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;
|
||||
}
|
||||
|
||||
+671
-91
@@ -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 {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
.card-image {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid rgb(208 197 175 / 10%);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
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 {
|
||||
.card-image img {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid rgb(31 26 23 / 20%);
|
||||
padding: 0.75rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 700ms ease;
|
||||
}
|
||||
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
.card-image:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
bottom: var(--space-4);
|
||||
z-index: 50;
|
||||
background: #25d366;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
min-height: 48px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 999px;
|
||||
right: var(--space-8);
|
||||
bottom: var(--space-8);
|
||||
z-index: 60;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-soft);
|
||||
gap: var(--space-4);
|
||||
background: var(--color-primary);
|
||||
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%);
|
||||
}
|
||||
|
||||
+132
-34
@@ -1,47 +1,145 @@
|
||||
.container {
|
||||
width: min(100% - 2rem, 72rem);
|
||||
/* Container */
|
||||
.page-wrap {
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-page);
|
||||
}
|
||||
|
||||
.section-stack {
|
||||
padding-block: var(--space-8) var(--space-12);
|
||||
/* Section spacing */
|
||||
.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 {
|
||||
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 {
|
||||
.grid-3 {
|
||||
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 {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
.grid-2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.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;
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
+41
-8
@@ -1,28 +1,61 @@
|
||||
:root {
|
||||
--color-primary: #d4af37;
|
||||
--color-secondary: #a67c1b;
|
||||
--color-surface: #fffdf8;
|
||||
--color-on-surface: #1f1a17;
|
||||
/* Brand colors */
|
||||
--color-primary: #735c00;
|
||||
--color-primary-container: #d4af37;
|
||||
--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-xl: clamp(1.5rem, 5vw, 2.25rem);
|
||||
--text-sm: 0.875rem;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
+118
-6
@@ -1,9 +1,121 @@
|
||||
.text-muted {
|
||||
color: rgb(31 26 23 / 72%);
|
||||
/* Margin utilities */
|
||||
.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 {
|
||||
color: var(--color-secondary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
/* Width */
|
||||
.w-full { width: 100%; }
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user