From 1db0e7a18500a45de534ff3738c5f0eb01bca9dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauricio=20L=C3=B3pez=20Coria?=
 <mlopez@mini.hostingdelsur.net>
Date: Wed, 1 Jul 2026 23:44:28 -0300
Subject: [PATCH] fix: resolve 5 UI issues from post-deploy review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CloudDivider: replace Tailwind fill classes with inline CSS var() (fixes black separators)
- ServiceCard: add p-6 md:p-7 padding, reduce border-top to 3px (fixes broken card layout)
- Hero: increase eyebrow font-size 0.7rem→0.8rem, badges text-sm→text-base (fixes tiny fonts)
- LenisScroll: duration 1.2→0.8, remove double RAF bug, add ScrollTrigger.update sync, reduced-motion guard (fixes slow scroll + missing animations)
- global.css: remove scroll-behavior:smooth from html (conflicted with Lenis)
---
 src/components/CloudDivider.astro |  8 ++---
 src/components/Hero.astro         |  2 +-
 src/components/LenisScroll.astro  | 53 +++++++++++++++----------------
 src/components/ServiceCard.astro  |  4 +--
 src/pages/index.astro             |  6 ++--
 src/styles/global.css             |  3 +-
 6 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/src/components/CloudDivider.astro b/src/components/CloudDivider.astro
index b8457d0..fd79613 100644
--- a/src/components/CloudDivider.astro
+++ b/src/components/CloudDivider.astro
@@ -2,20 +2,20 @@
 interface Props {
   variant?: 'wave' | 'cloud';
   flip?: boolean;
-  fillClass?: string;
+  fill?: string;
 }
-const { variant = 'wave', flip = false, fillClass = 'fill-hds-bg' } = Astro.props;
+const { variant = 'wave', flip = false, fill = 'var(--hds-bg)' } = Astro.props;
 ---
 {variant === 'wave' ? (
   <div class={`w-full overflow-hidden leading-none ${flip ? 'rotate-180' : ''}`} aria-hidden="true">
     <svg class="w-full h-12 md:h-16" viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
-      <path class={fillClass} d="M0,32 C240,80 480,0 720,32 C960,64 1200,16 1440,48 L1440,80 L0,80 Z" />
+      <path style={`fill: ${fill};`} d="M0,32 C240,80 480,0 720,32 C960,64 1200,16 1440,48 L1440,80 L0,80 Z" />
     </svg>
   </div>
 ) : (
   <div class={`w-full overflow-hidden leading-none ${flip ? 'rotate-180' : ''}`} aria-hidden="true">
     <svg class="w-full h-16 md:h-24" viewBox="0 0 1440 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
-      <path class={fillClass} d="M0,60 C120,100 240,20 360,50 C480,80 600,30 720,55 C840,80 960,40 1080,60 C1200,80 1320,45 1440,65 L1440,120 L0,120 Z" />
+      <path style={`fill: ${fill};`} d="M0,60 C120,100 240,20 360,50 C480,80 600,30 720,55 C840,80 960,40 1080,60 C1200,80 1320,45 1440,65 L1440,120 L0,120 Z" />
     </svg>
   </div>
 )}
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 9a588e6..a950399 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -100,7 +100,7 @@ const { t, whatsappUrl } = Astro.props;
         </a>
       </div>
 
-      <div id="hero-badges" class="flex flex-wrap items-center gap-x-8 gap-y-3 text-sm opacity-0" style="color: var(--hds-fg-muted);">
+      <div id="hero-badges" class="flex flex-wrap items-center gap-x-8 gap-y-3 text-base opacity-0" style="color: var(--hds-fg-muted);">
         <span class="flex items-center gap-2">
           <span style="color: var(--color-hds-naranja);">●</span>
           {t('hero.badge26')}
diff --git a/src/components/LenisScroll.astro b/src/components/LenisScroll.astro
index 9b04284..7dbd03b 100644
--- a/src/components/LenisScroll.astro
+++ b/src/components/LenisScroll.astro
@@ -1,37 +1,34 @@
 ---
-// Lenis smooth scroll — Phase 5
-// Synced with GSAP ticker for scroll-driven animations
+// Lenis smooth scroll — synced with GSAP ScrollTrigger
+// Skipped entirely when prefers-reduced-motion is active
 ---
 <script>
   import Lenis from '@studio-freight/lenis';
   import gsap from 'gsap';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
-  const lenis = new Lenis({
-    duration: 1.2,
-    easing: (t: number) => 1 - Math.pow(1 - t, 3),
-    smoothWheel: true,
-    wheelMultiplier: 1,
-    touchMultiplier: 1.5,
-  });
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
-  function raf(time: number) {
-    lenis.raf(time);
-    requestAnimationFrame(raf);
+  if (!prefersReducedMotion) {
+    // Disable native smooth scroll — Lenis handles it
+    document.documentElement.style.scrollBehavior = 'auto';
+
+    const lenis = new Lenis({
+      duration: 0.8,
+      easing: (t: number) => 1 - Math.pow(1 - t, 4),
+      smoothWheel: true,
+      wheelMultiplier: 1,
+      touchMultiplier: 1.5,
+    });
+
+    // Sync Lenis scroll → ScrollTrigger (critical for scroll-driven animations)
+    lenis.on('scroll', ScrollTrigger.update);
+
+    // Drive Lenis via GSAP ticker only — NO separate requestAnimationFrame
+    gsap.ticker.add((time: number) => {
+      lenis.raf(time * 1000);
+    });
+
+    gsap.ticker.lagSmoothing(0);
   }
-
-  requestAnimationFrame(raf);
-
-  // Sync Lenis with GSAP ScrollTrigger
-  gsap.ticker.add((time: number) => {
-    lenis.raf(time * 1000);
-  });
-
-  gsap.ticker.lagSmoothing(0);
-
-  // Connect GSAP ScrollTrigger to Lenis scroll
-  const scrollTriggerConfig = {
-    onUpdate: (self: { direction: number; progress: number }) => {
-      // Lenis handles the actual scroll, GSAP reads from it
-    }
-  };
 </script>
diff --git a/src/components/ServiceCard.astro b/src/components/ServiceCard.astro
index d174593..91b3c4c 100644
--- a/src/components/ServiceCard.astro
+++ b/src/components/ServiceCard.astro
@@ -13,8 +13,8 @@ const { href, title, description, Icon, borderColor = 'var(--color-hds-naranja)'
 ---
 <a
   href={href}
-  class="glass-card group flex flex-col h-full"
-  style={`border-top: 4px solid ${borderColor}; padding-top: 1.5rem;`}
+  class="glass-card group flex flex-col h-full p-6 md:p-7"
+  style={`border-top: 3px solid ${borderColor};`}
 >
   <div class="icon-circle mb-5" style="width: 48px; height: 48px;">
     <Icon class="w-6 h-6" />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ca7b78e..fdb8797 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -26,16 +26,16 @@ const description = lang === 'en'
 >
   <Hero t={t} whatsappUrl={whatsappUrl} />
 
-  <CloudDivider fillClass="fill-hds-bg-soft" />
+  <CloudDivider fill="var(--hds-bg-soft)" />
 
   <StatsSection t={t} lang={lang} />
   <DifferenceCards t={t} />
 
-  <CloudDivider fillClass="fill-hds-bg" flip={true} />
+  <CloudDivider fill="var(--hds-bg)" flip={true} />
 
   <ServicesSection t={t} lang={lang} />
 
-  <CloudDivider fillClass="fill-hds-bg-soft" />
+  <CloudDivider fill="var(--hds-bg-soft)" />
 
   <ProcessSteps t={t} />
 
diff --git a/src/styles/global.css b/src/styles/global.css
index 0f48f60..40e279c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -103,7 +103,6 @@
   }
 
   html {
-    scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%;
   }
 
@@ -210,7 +209,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
-    font-size: 0.7rem;
+    font-size: 0.8rem;
     font-weight: 600;
     letter-spacing: var(--tracking-eyebrow);
     text-transform: uppercase;