perf: improve mobile loading path

src/layouts/MainLayout.astro

@@ -83,9 +83,17 @@ const structuredDataScripts = [
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
+      rel="preload"
+      as="style"
       href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap"
-      rel="stylesheet"
+      onload="this.onload=null;this.rel='stylesheet'"
     />
+    <noscript>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap"
+      />
+    </noscript>
     {
       structuredDataScripts.map((schema) => (
         <script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />

src/pages/index.astro

@@ -9,6 +9,12 @@ const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
 
   <!-- ─── HERO ─── -->
   <section class="hero-full">
+    <picture>
+      <source
+        media="(max-width: 47.99rem)"
+        srcset="/images/foto-bodas-mobile.webp"
+        type="image/webp"
+      />
       <img
         src="/images/foto-bodas.jpg"
         alt="MNQ Catering — salón de bodas premium"
@@ -18,7 +24,9 @@ const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
         height="848"
         loading="eager"
         fetchpriority="high"
+        decoding="async"
       />
+    </picture>
     <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;">

src/styles/animations.css

@@ -70,7 +70,7 @@
 .hero-enter-3 { animation-delay: 780ms; }
 .hero-enter-4 { animation-delay: 1050ms; }
 
-/* ─── GOLD SHIMMER (botones) ─────────────────── */
+/* ─── BUTTON OVERLAY (static) ────────────────── */
 
 .btn, .btn-pill, .btn-primary, .btn-dark, .btn-ghost {
   position: relative;
@@ -93,7 +93,8 @@
   );
   transform: translateX(-120%) skewX(-18deg);
   pointer-events: none;
-  transition: none;
+  opacity: 0;
+  transition: opacity 180ms ease;
 }
 
 .btn:hover::after,
@@ -101,31 +102,13 @@
 .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;
+  opacity: 1;
 }
 
-@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 (static idle) ───────────── */
 
 .whatsapp-float {
-  animation: wa-glow 2.8s ease-in-out infinite;
+  transition: transform 220ms ease, box-shadow 220ms ease;
 }
 
 /* ─── GOLD LINE DRAW ─────────────────────────── */
@@ -172,15 +155,10 @@
   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%)); }
-}
+/* ─── HEADER LOGO (no idle shimmer) ─────────── */
 
 .site-logo-banner {
-  animation: eye-shimmer 5s ease-in-out infinite;
+  transition: opacity 180ms ease;
 }
 
 /* ─── BENTO CARD HOVER LIFT ──────────────────── */