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

src/layouts/MainLayout.astro

@@ -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

@@ -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>
+        <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">
+        <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

@@ -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>
+          <span class="section-eyebrow reveal">Contacto</span>
-          <h1 class="text-display" style="margin-bottom: var(--space-8);">
+          <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

@@ -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>
+          <p class="section-eyebrow reveal">Excelencia en Eventos</p>
-          <h1 class="text-display" style="margin-bottom:var(--space-8);">Corporativo<br />&amp; Business</h1>
+          <h1 class="text-display reveal" style="--reveal-delay: 150;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="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>
+        <h2 class="text-headline-lg reveal">Servicios Especializados</h2>
-        <div class="gold-line mx-auto" style="margin-top:var(--space-4);"></div>
+        <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

@@ -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>
+        <span class="section-eyebrow reveal">Nuestra Propuesta</span>
-        <h2 class="text-headline-lg">Experiencias Gastronómicas a Medida</h2>
+        <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>
+          <span class="section-eyebrow reveal">Galería</span>
-          <h2 class="text-headline-lg">Momentos MNQ</h2>
+          <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/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" style="width: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" style="width:100%;" 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" style="width:100%;" 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" style="width:100%;" 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" style="width:100%;" 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

@@ -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>
+          <span class="section-eyebrow reveal">Nuestra Esencia</span>
-          <h1 class="text-display" style="margin-bottom:var(--space-8);">El arte de la hospitalidad elevada.</h1>
+          <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>
+        <span class="section-eyebrow reveal">Pilares de Marca</span>
-        <h2 class="text-headline-lg">Valores que nos definen</h2>
+        <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>
+          <span class="section-eyebrow reveal" 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>
+          <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

@@ -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>
+          <span class="section-eyebrow reveal">Eventos Sociales</span>
-          <h1 class="text-display" style="margin-bottom: var(--space-6);">Reuniones Familiares con Alma</h1>
+          <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" style="margin-bottom: var(--space-8);">
+          <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>
+        <h2 class="text-headline-lg reveal">Momentos que Merecen Excelencia</h2>
-        <p class="text-muted border-left-gold italic">
+        <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>
+        <span class="section-eyebrow reveal">Culinaria de Autor</span>
-        <h2 class="text-headline-lg">Platos que Cuentan Historias</h2>
+        <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

@@ -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;
+  }
+}