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

feat: premium motion system — scroll reveal, hero cascade, gold accents

Browse Source
This commit is contained in:
Manuel
2026-05-10 14:27:44 +02:00
parent 801662e3f0
commit 97c05ff620
8 changed files with 343 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/MainLayout.astro
+32
View File
@@ -8,6 +8,7 @@ import '../styles/base.css';
import '../styles/layout.css';
import '../styles/components.css';
import '../styles/utilities.css';
import '../styles/animations.css';
interface Props {
title: string;
@@ -49,5 +50,36 @@ const {
<SiteFooter />
<WhatsAppButton />
<CookieBanner />
<script>
// ─── INTERSECTION OBSERVER ───────────────────
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!prefersReduced) {
const io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
io.unobserve(entry.target);
}
});
},
{ threshold: 0.1, rootMargin: '0px 0px -48px 0px' }
);
document.querySelectorAll('.reveal, .reveal-left, .reveal-scale, .gold-line, .section-eyebrow').forEach((el) => {
io.observe(el);
});
}
// ─── HEADER SCROLL ELEVATION ─────────────────
const header = document.querySelector('.site-header') as HTMLElement | null;
if (header) {
window.addEventListener('scroll', () => {
header.classList.toggle('is-scrolled', window.scrollY > 16);
}, { passive: true });
}
</script>
</body>
</html>
src/pages/bodas-reales.astro
+8 -8
View File
@@ -32,15 +32,15 @@ import MainLayout from '../layouts/MainLayout.astro';
<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);">
<h2 class="text-headline-lg text-primary italic reveal" style="margin-bottom: var(--space-8);">
Donde cada detalle cuenta una historia de amor.
</h2>
<p class="text-muted leading-relaxed">
<p class="text-muted leading-relaxed reveal" style="--reveal-delay: 200;">
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">
<div class="border-left-gold reveal" style="--reveal-delay: 300;">
<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>
@@ -97,15 +97,15 @@ import MainLayout from '../layouts/MainLayout.astro';
<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">
<h2 class="text-display text-primary reveal" style="margin-bottom: var(--space-4);">El Arte de la Mesa</h2>
<p class="text-muted max-w-xl mx-auto reveal" style="--reveal-delay: 150;">
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);">
<div class="img-zoom overflow-hidden rounded-lg reveal reveal-scale" style="--reveal-delay: 100; aspect-ratio:4/5;margin-bottom:var(--space-6);">
<img src="/images/generated/gallery-4.webp" 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>
@@ -113,7 +113,7 @@ import MainLayout from '../layouts/MainLayout.astro';
</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);">
<div class="img-zoom overflow-hidden rounded-lg reveal reveal-scale" style="--reveal-delay: 250; aspect-ratio:4/5;margin-bottom:var(--space-6);">
<img src="/images/foto-canapes.jpg" alt="Canapés premium" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />
</div>
<h4 class="text-headline-md" style="margin-bottom:var(--space-2);">Cristal &amp; Oro</h4>
@@ -121,7 +121,7 @@ import MainLayout from '../layouts/MainLayout.astro';
</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);">
<div class="img-zoom overflow-hidden rounded-lg reveal reveal-scale" style="--reveal-delay: 400; aspect-ratio:4/5;margin-bottom:var(--space-6);">
<img src="/images/generated/gallery-3.webp" 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>
src/pages/contacto.astro
+2 -2
View File
@@ -14,8 +14,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<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);">
<span class="section-eyebrow reveal">Contacto</span>
<h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom: var(--space-8);">
Hablemos de su próximo evento.
</h1>
<p class="text-muted" style="line-height: 1.7; max-width: 32rem;">
src/pages/corporativo-business.astro
+6 -6
View File
@@ -14,9 +14,9 @@ import MainLayout from '../layouts/MainLayout.astro';
<div class="grid-12" style="align-items:center;gap:var(--space-8);">
<div style="grid-column:span 12;z-index:10;">
<p class="section-eyebrow">Excelencia en Eventos</p>
<h1 class="text-display" style="margin-bottom:var(--space-8);">Corporativo<br />&amp; Business</h1>
<p class="text-muted" style="max-width:32rem;line-height:1.7;margin-bottom:var(--space-10);">
<p class="section-eyebrow reveal">Excelencia en Eventos</p>
<h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom:var(--space-8);">Corporativo<br />&amp; Business</h1>
<p class="text-muted reveal" style="--reveal-delay: 250;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;">
@@ -25,7 +25,7 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
</div>
<div style="grid-column:span 12;position:relative;height:28rem;">
<div style="grid-column:span 12;position:relative;height:28rem;" class="reveal" style="--reveal-delay: 350;">
<img
src="/images/foto-corporativo.jpg"
alt="Eventos corporativos premium — MNQ"
@@ -43,8 +43,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<h2 class="text-headline-lg reveal">Servicios Especializados</h2>
<div class="gold-line mx-auto reveal" style="margin-top:var(--space-4);--reveal-delay: 200;"></div>
</div>
<div class="corp-bento">
src/pages/index.astro
+23 -23
View File
@@ -17,15 +17,15 @@ import MainLayout from '../layouts/MainLayout.astro';
<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);">
<p class="label-caps-wide hero-enter-1" 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);">
<h1 class="text-display hero-enter-2" 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"
class="btn btn-ghost hero-enter-3"
target="_blank"
rel="noreferrer"
>
@@ -39,15 +39,15 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<span class="section-eyebrow reveal">Nuestra Propuesta</span>
<h2 class="text-headline-lg reveal" style="--reveal-delay: 150;">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;">
<div class="overflow-hidden reveal-scale reveal" style="--reveal-delay: 200; border-radius: var(--radius-lg); aspect-ratio: 3/4;">
<img
src="/images/generated/hero-bodas-gen.webp"
alt="Bodas Reales — MNQ Catering"
@@ -56,7 +56,7 @@ import MainLayout from '../layouts/MainLayout.astro';
onmouseleave="this.style.transform='scale(1)'"
/>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-3);">
<div style="display: flex; flex-direction: column; gap: var(--space-3);" class="reveal" style="--reveal-delay: 300;">
<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>
@@ -65,7 +65,7 @@ import MainLayout from '../layouts/MainLayout.astro';
<!-- 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;">
<div class="overflow-hidden reveal-scale reveal" style="--reveal-delay: 350; border-radius: var(--radius-lg); aspect-ratio: 3/4;">
<img
src="/images/foto-corporativo.jpg"
alt="Corporativo — MNQ Catering"
@@ -74,7 +74,7 @@ import MainLayout from '../layouts/MainLayout.astro';
onmouseleave="this.style.transform='scale(1)'"
/>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-3);">
<div style="display: flex; flex-direction: column; gap: var(--space-3);" class="reveal" style="--reveal-delay: 450;">
<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>
@@ -83,7 +83,7 @@ import MainLayout from '../layouts/MainLayout.astro';
<!-- 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;">
<div class="overflow-hidden reveal-scale reveal" style="--reveal-delay: 500; border-radius: var(--radius-lg); aspect-ratio: 3/4;">
<img
src="/images/generated/hero-familiares-gen.webp"
alt="Reuniones Familiares — MNQ Catering"
@@ -92,7 +92,7 @@ import MainLayout from '../layouts/MainLayout.astro';
onmouseleave="this.style.transform='scale(1)'"
/>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-3);">
<div style="display: flex; flex-direction: column; gap: var(--space-3);" class="reveal" style="--reveal-delay: 600;">
<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>
@@ -108,8 +108,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<span class="section-eyebrow reveal">Galería</span>
<h2 class="text-headline-lg reveal" style="--reveal-delay: 150;">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."
@@ -117,12 +117,12 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
<div class="mosaic">
<img src="/images/generated/gallery-1.webp" alt="Postre de autor con oro" class="rounded-lg" style="width:100%;" loading="lazy" />
<img src="/images/foto-canapes.jpg" alt="Canapés premium" class="rounded-lg" style="width:100%;" loading="lazy" />
<img src="/images/generated/gallery-3.webp" alt="Vieiras con azafrán" class="rounded-lg" style="width:100%;" loading="lazy" />
<img src="/images/generated/gallery-4.webp" alt="Mesa de boda" class="rounded-lg" style="width:100%;" loading="lazy" />
<img src="/images/foto-plato-mnq.jpg" alt="Plato MNQ Catering" class="rounded-lg" style="width:100%;" loading="lazy" />
<img src="/images/generated/gallery-2.webp" alt="Bartender de coctelería" class="rounded-lg" style="width:100%;" loading="lazy" />
<img src="/images/generated/gallery-1.webp" alt="Postre de autor con oro" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 100;" loading="lazy" />
<img src="/images/foto-canapes.jpg" alt="Canapés premium" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 200;" loading="lazy" />
<img src="/images/generated/gallery-3.webp" alt="Vieiras con azafrán" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 300;" loading="lazy" />
<img src="/images/generated/gallery-4.webp" alt="Mesa de boda" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 400;" loading="lazy" />
<img src="/images/foto-plato-mnq.jpg" alt="Plato MNQ Catering" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 500;" loading="lazy" />
<img src="/images/generated/gallery-2.webp" alt="Bartender de coctelería" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 600;" loading="lazy" />
</div>
</div>
</section>
@@ -131,17 +131,17 @@ import MainLayout from '../layouts/MainLayout.astro';
<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);">
<div class="stars reveal" 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);">
<h2 class="text-headline-lg reveal" 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">
<div class="testimonial-card reveal" style="--reveal-delay: 200;">
<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>
@@ -153,7 +153,7 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-card reveal" style="--reveal-delay: 400;">
<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>
src/pages/nosotros.astro
+6 -6
View File
@@ -14,8 +14,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<span class="section-eyebrow reveal">Nuestra Esencia</span>
<h1 class="text-display reveal" style="--reveal-delay: 150;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>
@@ -59,8 +59,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<span class="section-eyebrow reveal">Pilares de Marca</span>
<h2 class="text-headline-lg reveal" style="--reveal-delay: 150;">Valores que nos definen</h2>
</div>
<div class="grid-3">
<div class="value-card">
@@ -87,8 +87,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<span class="section-eyebrow reveal" style="color:var(--color-primary-fixed);">El Capital Humano</span>
<h2 class="text-headline-lg reveal" style="--reveal-delay: 150;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>
src/pages/reuniones-familiares.astro
+9 -9
View File
@@ -23,9 +23,9 @@ import MainLayout from '../layouts/MainLayout.astro';
<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);">
<span class="section-eyebrow reveal">Eventos Sociales</span>
<h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom: var(--space-6);">Reuniones Familiares con Alma</h1>
<p class="text-muted leading-relaxed reveal" style="--reveal-delay: 250;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
@@ -44,8 +44,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<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">
<h2 class="text-headline-lg reveal">Momentos que Merecen Excelencia</h2>
<p class="text-muted border-left-gold italic reveal" style="--reveal-delay: 200;">
"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>
@@ -108,8 +108,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<span class="section-eyebrow reveal">Culinaria de Autor</span>
<h2 class="text-headline-lg reveal" style="--reveal-delay: 150;">Platos que Cuentan Historias</h2>
</div>
<div class="platos-grid">
@@ -175,10 +175,10 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
<div>
<h2 class="text-headline-lg leading-tight" style="margin-bottom:var(--space-8);">
<h2 class="text-headline-lg leading-tight reveal" style="--reveal-delay: 100;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);">
<p class="text-muted leading-relaxed reveal" style="--reveal-delay: 200;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);">
src/styles/animations.css
+257
View File
@@ -0,0 +1,257 @@
/* ════════════════════════════════════════════
MNQ — PREMIUM ANIMATIONS
Elegant, slow, gold-accented. No bounce.
════════════════════════════════════════════ */
/* ─── SCROLL REVEAL ─────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(28px);
transition:
opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* stagger via CSS variable set by JS */
.reveal { transition-delay: calc(var(--reveal-delay, 0) * 1ms); }
/* Variante horizontal (desde izquierda) */
.reveal-left {
opacity: 0;
transform: translateX(-32px);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible {
opacity: 1;
transform: translateX(0);
}
/* Variante scale (para imágenes de galería) */
.reveal-scale {
opacity: 0;
transform: scale(0.94);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.visible {
opacity: 1;
transform: scale(1);
}
/* ─── HERO ENTRANCE ──────────────────────────── */
@keyframes mnq-rise {
from {
opacity: 0;
transform: translateY(36px);
filter: blur(4px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
.hero-enter {
animation: mnq-rise 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-enter-1 { animation-delay: 200ms; }
.hero-enter-2 { animation-delay: 500ms; }
.hero-enter-3 { animation-delay: 780ms; }
.hero-enter-4 { animation-delay: 1050ms; }
/* ─── GOLD SHIMMER (botones) ─────────────────── */
.btn, .btn-pill, .btn-primary, .btn-dark, .btn-ghost {
position: relative;
overflow: hidden;
}
.btn::after,
.btn-pill::after,
.btn-primary::after,
.btn-dark::after,
.btn-ghost::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 30%,
rgb(255 255 255 / 22%) 50%,
transparent 70%
);
transform: translateX(-120%) skewX(-18deg);
pointer-events: none;
transition: none;
}
.btn:hover::after,
.btn-pill:hover::after,
.btn-primary:hover::after,
.btn-dark:hover::after,
.btn-ghost:hover::after {
animation: shimmer-sweep 550ms cubic-bezier(0.25, 0, 0.6, 1) forwards;
}
@keyframes shimmer-sweep {
from { transform: translateX(-120%) skewX(-18deg); }
to { transform: translateX(160%) skewX(-18deg); }
}
/* ─── WHATSAPP PULSE GLOW ────────────────────── */
@keyframes wa-glow {
0%, 100% {
box-shadow:
0 0 0 0 rgb(212 175 55 / 50%),
0 25px 50px -12px rgb(31 26 23 / 20%);
}
50% {
box-shadow:
0 0 0 10px rgb(212 175 55 / 0%),
0 25px 50px -12px rgb(31 26 23 / 20%);
}
}
.whatsapp-float {
animation: wa-glow 2.8s ease-in-out infinite;
}
/* ─── GOLD LINE DRAW ─────────────────────────── */
.gold-line {
transform-origin: left center;
transform: scaleX(0);
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gold-line.visible {
transform: scaleX(1);
}
/* ─── HEADER SCROLL ELEVATION ────────────────── */
.site-header {
transition:
background 300ms ease,
box-shadow 300ms ease;
}
.site-header.is-scrolled {
box-shadow: 0 4px 24px rgb(0 0 0 / 10%);
background: rgb(255 248 240 / 97%);
}
/* ─── EYEBROW GOLD BLINK ─────────────────────── */
@keyframes eyebrow-in {
from {
opacity: 0;
letter-spacing: 0.5em;
color: transparent;
}
to {
opacity: 1;
letter-spacing: 0.3em;
color: var(--color-primary);
}
}
.section-eyebrow.reveal.visible {
animation: eyebrow-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* ─── LOGO EYE SUBTLE GLOW (header) ─────────── */
@keyframes eye-shimmer {
0%, 100% { filter: brightness(1) drop-shadow(0 0 0px rgb(212 175 55 / 0%)); }
50% { filter: brightness(1.08) drop-shadow(0 0 6px rgb(212 175 55 / 30%)); }
}
.site-logo-banner {
animation: eye-shimmer 5s ease-in-out infinite;
}
/* ─── BENTO CARD HOVER LIFT ──────────────────── */
.bento-card {
transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bento-card:hover {
transform: translateY(-4px);
}
/* ─── TESTIMONIAL CARD HOVER ─────────────────── */
.testimonial-card {
transition: transform 400ms ease, box-shadow 400ms ease;
}
.testimonial-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -12px rgb(115 92 0 / 12%);
}
/* ─── DARK CTA — CANDLE AMBIENT ──────────────── */
@keyframes candle-glow {
0%, 100% { opacity: 0.06; }
33% { opacity: 0.09; }
66% { opacity: 0.05; }
}
.cta-dark::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, var(--color-primary-container), transparent 65%);
pointer-events: none;
animation: candle-glow 6s ease-in-out infinite;
z-index: 0;
}
/* ─── NAV LINK UNDERLINE SLIDE ───────────────── */
.nav-link {
position: relative;
}
.nav-link:not(.active)::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: right;
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* ─── REDUCE MOTION ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}