correccion

src/app/(landing)/blog/BlogPage.tsx

@@ -112,6 +112,8 @@ function BlogContent() {
                         <img
                           src={art.imageUrl}
                           alt={art.title}
+                          loading="lazy"
+                          decoding="async"
                           style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                           onError={(e) => {
                             (e.currentTarget as HTMLImageElement).style.display = "none";

src/app/(landing)/blog/[slug]/ArticlePage.tsx

@@ -278,6 +278,8 @@ export default function ArticlePage() {
               <img
                 src={imageUrl}
                 alt={post.title}
+                fetchPriority="high"
+                decoding="async"
                 style={{ width: "100%", height: "100%", objectFit: "cover" }}
               />
             </motion.div>

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

@@ -51,12 +51,14 @@ export const Footer = ({ isNavyBg }: ThemeProps) => {
               <img
                 src={isNavyBg ? "/icons/Logo_blanco.svg" : "/icons/Logo_negro.svg"}
                 alt="Logo"
+                loading="lazy"
+                decoding="async"
                 className="h-12 w-12 shrink-0 object-contain"
               />
               <div className="flex flex-col leading-none">
                 <span
                   style={{
-                    fontFamily: "'Quicksand', sans-serif",
+                    fontFamily: 'var(--font-sans-public), sans-serif',
                     fontWeight: 700,
                     fontSize: 21,
                     letterSpacing: "-0.01em",
@@ -67,7 +69,7 @@ export const Footer = ({ isNavyBg }: ThemeProps) => {
                 </span>
                 <span
                   style={{
-                    fontFamily: "'Quicksand', sans-serif",
+                    fontFamily: 'var(--font-sans-public), sans-serif',
                     fontWeight: 500,
                     fontSize: 13,
                     letterSpacing: "0.04em",

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

@@ -66,12 +66,12 @@ export const Navbar = () => {
             <img src="/icons/Logo_blanco.svg" alt="Logo" className="hidden h-8 w-8 shrink-0 object-contain dark:block" />
             <span className="flex flex-col leading-none">
               <span
-                style={{ fontFamily: "'Quicksand', sans-serif", fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: 'var(--foreground)' }}
+                style={{ fontFamily: 'var(--font-sans-public), sans-serif', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: 'var(--foreground)' }}
               >
                 Rynext
               </span>
               <span
-                style={{ fontFamily: "'Quicksand', sans-serif", fontWeight: 500, fontSize: 10, letterSpacing: '0.04em', color: 'var(--muted-foreground)' }}
+                style={{ fontFamily: 'var(--font-sans-public), sans-serif', fontWeight: 500, fontSize: 10, letterSpacing: '0.04em', color: 'var(--muted-foreground)' }}
               >
                 Technologies
               </span>

src/app/(landing)/components/ui/hero-01-utils/brand-slider.tsx

@@ -44,6 +44,9 @@ export default function BrandSlider() {
             <img
               src={assetUrl(brand.logoUrl)}
               alt={brand.name}
+              loading="lazy"
+              decoding="async"
+              height={150}
               className="h-[150px] w-auto max-w-[150px] object-contain"
               onError={(e) => {
                 (e.currentTarget.closest("[title]") as HTMLElement | null)?.style.setProperty("display", "none")

src/app/(landing)/home/sections/Clients.tsx

@@ -53,6 +53,9 @@ function ClientsInner({ isNavyBg }: ThemeProps) {
               <img
                 src={assetUrl(c.logoUrl)}
                 alt={c.name}
+                loading="lazy"
+                decoding="async"
+                height={150}
                 style={{
                   height: 150,
                   width: "auto",

src/app/(landing)/home/sections/Partners.tsx

@@ -44,6 +44,9 @@ export const Partners = ({ isNavyBg }: ThemeProps) => {
               <img
                 src={assetUrl(p.logoUrl)}
                 alt={p.name}
+                loading="lazy"
+                decoding="async"
+                height={150}
                 className="h-[150px] w-auto max-w-[150px] object-contain"
                 onError={(e) => {
                   (e.currentTarget as HTMLImageElement).style.display = "none";

src/app/(landing)/home/sections/Portfolio.tsx

@@ -106,6 +106,8 @@ function PortfolioInner({ isNavyBg }: ThemeProps) {
                     <img
                       src={assetUrl(cover.url)}
                       alt={p.title}
+                      loading="lazy"
+                      decoding="async"
                       style={{
                         width: "100%",
                         height: "100%",

src/app/(landing)/portafolio/PortafolioPage.tsx

@@ -93,6 +93,8 @@ function PortafolioContent() {
                         <img
                           src={assetUrl(cover.url)}
                           alt={p.title}
+                          loading="lazy"
+                          decoding="async"
                           style={{
                             width: "100%",
                             height: "100%",

src/app/(landing)/portafolio/[id]/CaseStudyPage.tsx

@@ -161,7 +161,7 @@ export default function CaseStudyPage() {
               transition={{ duration: 0.4 }}
               style={{ overflow: "hidden", borderRadius: 4, aspectRatio: "16/7", marginTop: -1 }}
             >
-              <img src={activeUrl} alt={project.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+              <img src={activeUrl} alt={project.title} fetchPriority="high" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
             </motion.div>
             {gallery.length > 1 && (
               <div style={{ display: "flex", gap: 10, padding: "16px 0 24px" }}>
@@ -175,7 +175,7 @@ export default function CaseStudyPage() {
                       opacity: i === activeImage ? 1 : 0.6,
                     }}
                   >
-                    <img src={assetUrl(img.url)} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
+                    <img src={assetUrl(img.url)} alt="" loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                   </button>
                 ))}
               </div>

src/app/(landing)/sobre-nosotros/SobreNosotrosPage.tsx

@@ -145,6 +145,7 @@ function SobreNosotrosContent() {
               <img
                 src={TEAM_IMAGE}
                 alt="Equipo Rynext Technologies"
+                decoding="async"
                 style={{
                   width: "100%",
                   aspectRatio: "4/3",

src/app/admin/components/sidebar/Sidebar.tsx

@@ -476,7 +476,7 @@ export default function Sidebar({
           >
             <span
               style={{
-                fontFamily: "'Quicksand',sans-serif",
+                fontFamily: 'var(--font-quicksand), sans-serif',
                 fontWeight: 700,
                 fontSize: 19,
                 letterSpacing: "-0.01em",
@@ -487,7 +487,7 @@ export default function Sidebar({
             </span>
             <span
               style={{
-                fontFamily: "'Quicksand',sans-serif",
+                fontFamily: 'var(--font-quicksand), sans-serif',
                 fontWeight: 500,
                 fontSize: 12,
                 letterSpacing: "0.04em",

src/app/admin/login/_components/Login.tsx

@@ -128,7 +128,7 @@ export default function Login() {
           <div className="flex flex-col leading-none">
             <span
               style={{
-                fontFamily: "'Quicksand', sans-serif",
+                fontFamily: 'var(--font-quicksand), sans-serif',
                 fontWeight: 700,
                 fontSize: 17,
                 letterSpacing: "-0.01em",
@@ -139,7 +139,7 @@ export default function Login() {
             </span>
             <span
               style={{
-                fontFamily: "'Quicksand', sans-serif",
+                fontFamily: 'var(--font-quicksand), sans-serif',
                 fontWeight: 500,
                 fontSize: 11,
                 letterSpacing: "0.04em",

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 {

src/app/layout.tsx

@@ -1,6 +1,18 @@
 import type { Metadata, Viewport } from 'next';
+import { Quicksand } from 'next/font/google';
 import './globals.css';
 
+// next/font/google auto-hospeda la fuente y la incrusta en el build, sin el
+// round-trip extra a fonts.googleapis.com que tenía el @import de globals.css
+// (ese @import era bloqueante: retrasaba el primer pintado de texto en todo
+// el sitio, sobre todo en móvil con latencia alta).
+const quicksand = Quicksand({
+  subsets: ['latin'],
+  weight: ['300', '400', '500', '600', '700'],
+  variable: '--font-sans-public',
+  display: 'swap',
+});
+
 export const metadata: Metadata = {
   metadataBase: new URL('https://rynext.com.mx'),
   title: 'Rynext Technologies | Software Empresarial 100% Mexicano',
@@ -35,7 +47,7 @@ export const viewport: Viewport = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="es">
+    <html lang="es" className={quicksand.variable}>
       <body>
         {children}
       </body>