hotfic

next-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
-import "./.next/types/root-params.d.ts";
+import "./.next/dev/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/app/(landing)/components/CookieBanner.tsx

@@ -23,7 +23,7 @@ export const CookieBanner = (_props: ThemeProps) => {
     <div
       role="dialog"
       aria-label="Aviso de cookies"
-      className="fixed bottom-6 left-1/2 z-50 w-[calc(100%-3rem)] max-w-xl -translate-x-1/2 px-6 py-4 shadow-2xl"
+      className="fixed-blur fixed bottom-6 left-1/2 z-50 w-[calc(100%-3rem)] max-w-xl -translate-x-1/2 px-6 py-4 shadow-2xl"
       style={{
         background: 'color-mix(in srgb, var(--card) 97%, transparent)',
         border: '1px solid var(--border)',

src/app/(landing)/components/FloatingButtons.tsx

@@ -32,7 +32,7 @@ export const FloatingButtons = ({ setIsNavyBg: _setIsNavyBg }: FloatingButtonsPr
       <button
         onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
         aria-label="Volver arriba"
-        className="fixed bottom-6 left-6 z-50 flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-transform hover:scale-110 active:scale-95"
+        className="fixed-blur fixed bottom-6 left-6 z-50 flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-transform hover:scale-110 active:scale-95"
         style={{
           background: toggleBg,
           border: `1px solid ${toggleBorder}`,

src/app/(landing)/components/Navbar.tsx

@@ -49,7 +49,7 @@ export const Navbar = () => {
         role="banner"
       >
         <div
-          className="flex w-full max-w-7xl items-center justify-between gap-4 rounded-full px-4 py-2.5 transition-shadow duration-300"
+          className="fixed-blur flex w-full max-w-7xl items-center justify-between gap-4 rounded-full px-4 py-2.5 transition-shadow duration-300"
           style={{
             background: 'color-mix(in srgb, var(--card) 72%, transparent)',
             border: '1px solid var(--border)',
@@ -163,7 +163,7 @@ export const Navbar = () => {
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: -12, scale: 0.97 }}
             transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
-            className="fixed inset-x-4 top-[76px] z-40 rounded-3xl p-5 md:hidden"
+            className="fixed-blur fixed inset-x-4 top-[76px] z-40 rounded-3xl p-5 md:hidden"
             style={{
               background: 'color-mix(in srgb, var(--card) 96%, transparent)',
               border: '1px solid var(--border)',

src/app/globals.css

@@ -294,6 +294,19 @@
   }
 }
 
+/* backdrop-filter en elementos fixed/siempre-visibles (navbar, botones
+   flotantes, banner de cookies) obliga a Safari/iOS a recomponer el blur
+   en cada frame de scroll — esto es un cuello de botella de WebKit, no de
+   potencia de GPU (pasa igual en un iPhone de gama alta). En mobile se
+   quita el blur y se deja solo el fondo semi-opaco (ya definido inline),
+   que es prácticamente gratis de pintar. */
+@media (max-width: 767px) {
+  .fixed-blur {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+}
+
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {