From c4673cbae1e44a41a92dc619740856c75e7076fd Mon Sep 17 00:00:00 2001
From: Emmanuel Rojas <fco3190@gmail.com>
Date: Tue, 6 Oct 2026 08:46:38 -0500
Subject: [PATCH] hotfic

---
 next-env.d.ts                                    |  4 ++--
 src/app/(landing)/components/CookieBanner.tsx    |  2 +-
 src/app/(landing)/components/FloatingButtons.tsx |  2 +-
 src/app/(landing)/components/Navbar.tsx          |  4 ++--
 src/app/globals.css                              | 13 +++++++++++++
 5 files changed, 19 insertions(+), 6 deletions(-)

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 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-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) => {
     <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)',
diff --git a/src/app/(landing)/components/FloatingButtons.tsx b/src/app/(landing)/components/FloatingButtons.tsx
index be88187..fceba0f 100644
--- a/src/app/(landing)/components/FloatingButtons.tsx
+++ b/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}`,
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"
       >
         <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)',
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 {