correccion

src/app/globals.css

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
 @import "tailwindcss";
 
 @custom-variant dark (&:where(.dark, .dark *));
@@ -16,8 +15,8 @@
   --color-dark-surface: #0f1520;
   --color-dark-border: #1c2535;
 
-  --font-sans: 'Quicksand', system-ui, sans-serif;
-  --font-display: 'Quicksand', system-ui, sans-serif;
+  --font-sans: var(--font-sans-public), system-ui, sans-serif;
+  --font-display: var(--font-sans-public), system-ui, sans-serif;
   --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
 
   /* shadcn/ui tokens */
@@ -273,6 +272,28 @@
   animation-delay: 0.3s;
 }
 
+/* En móvil, blur(110px) animado para siempre es caro de recomponer en cada
+   frame (GPUs de gama media/baja) y compite por recursos con el scroll. Los
+   dejamos estáticos (sin animation) y con un blur más chico — la pieza
+   visual se mantiene, pero deja de costar algo en cada frame. */
+@media (max-width: 767px) {
+  .animate-hero-blob-a,
+  .animate-hero-blob-b {
+    animation: none;
+    opacity: 0.7;
+  }
+}
+
+/* blur(110px) es caro de recomponer en cada scroll/repintado en GPUs
+   móviles de gama media/baja. Hay ~8 blobs decorativos repartidos por el
+   sitio con este mismo blur — en vez de tocar cada sección, se achica acá
+   para todos a la vez en pantallas chicas. */
+@media (max-width: 767px) {
+  .blur-\[110px\] {
+    filter: blur(60px);
+  }
+}
+
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {