diff --git a/next-env.d.ts b/next-env.d.ts
index ce4e94a..a419cbe 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,7 +1,7 @@
///
///
-import "./.next/types/routes.d.ts";
-import "./.next/types/root-params.d.ts";
+import "./.next/dev/types/routes.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.
diff --git a/src/app/(landing)/components/CookieBanner.tsx b/src/app/(landing)/components/CookieBanner.tsx
index 84d1f9b..d8d0f25 100644
--- a/src/app/(landing)/components/CookieBanner.tsx
+++ b/src/app/(landing)/components/CookieBanner.tsx
@@ -23,7 +23,7 @@ export const CookieBanner = (_props: ThemeProps) => {
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}`,
diff --git a/src/app/(landing)/components/Navbar.tsx b/src/app/(landing)/components/Navbar.tsx
index f50e0d4..cc355d2 100644
--- a/src/app/(landing)/components/Navbar.tsx
+++ b/src/app/(landing)/components/Navbar.tsx
@@ -49,7 +49,7 @@ export const Navbar = () => {
role="banner"
>
{
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)',
diff --git a/src/app/globals.css b/src/app/globals.css
index fd30e51..9cb3b8f 100644
--- a/src/app/globals.css
+++ b/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 {