From dff830b386646a0713ce5bd321c7cffcca463f99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauricio=20L=C3=B3pez=20Coria?=
 <mlopez@mini.hostingdelsur.net>
Date: Thu, 2 Jul 2026 15:50:07 -0300
Subject: [PATCH] Hero light mode: cloud opacity 70%, floating shapes more
 opaque, badges darker for legibility

---
 src/components/Hero.astro | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 390a0f7..3b7c626 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -41,7 +41,7 @@ const { t, whatsappUrl } = Astro.props;
 
   <!-- Floating decorative shapes (parallax) -->
   <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
-    <div id="hero-float-top" class="absolute opacity-30" style="top: 15%; right: 12%;">
+    <div id="hero-float-top" class="absolute" style="top: 15%; right: 12%;">
       <svg width="120" height="120" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <rect x="0" y="0" width="12" height="12" fill="#EE7623" rx="1"/>
         <rect x="14" y="0" width="12" height="12" fill="#FA9F5C" rx="1"/>
@@ -54,7 +54,7 @@ const { t, whatsappUrl } = Astro.props;
         <rect x="28" y="28" width="12" height="12" fill="#EE7623" rx="1"/>
       </svg>
     </div>
-    <div id="hero-float-mid" class="absolute opacity-25" style="top: 55%; left: 8%;">
+    <div id="hero-float-mid" class="absolute" style="top: 55%; left: 8%;">
       <svg width="80" height="80" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
         <rect x="0" y="0" width="10" height="10" fill="#FA9F5C" rx="1"/>
         <rect x="12" y="0" width="10" height="10" fill="#EE7623" rx="1"/>
@@ -64,7 +64,7 @@ const { t, whatsappUrl } = Astro.props;
         <rect x="12" y="24" width="10" height="10" fill="#FFCBA1" rx="1"/>
       </svg>
     </div>
-    <div id="hero-float-bot" class="absolute opacity-20" style="bottom: 20%; right: 20%;">
+    <div id="hero-float-bot" class="absolute" style="bottom: 20%; right: 20%;">
       <svg width="64" height="64" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
         <rect x="0" y="0" width="8" height="8" fill="#EE7623" rx="1"/>
         <rect x="10" y="0" width="8" height="8" fill="#FFCBA1" rx="1"/>
@@ -83,12 +83,14 @@ const { t, whatsappUrl } = Astro.props;
   >
     <svg viewBox="0 0 240 140" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: auto;">
       <path
+        class="cloud-p1"
         d="M 55,110 C 30,110 18,92 25,72 C 12,60 18,40 38,38 C 44,18 68,16 80,30 C 92,12 118,16 125,34 C 140,22 165,28 170,46 C 190,44 205,62 198,78 C 215,82 210,110 190,110 Z"
-        fill="white" opacity="0.18"
+        fill="white"
       />
       <path
+        class="cloud-p2"
         d="M 70,115 C 50,115 40,100 45,85 C 35,76 40,62 55,60 C 60,45 78,44 87,55 C 97,42 117,45 122,58 C 135,50 152,55 156,68 C 170,67 178,80 173,92 C 185,95 182,115 168,115 Z"
-        fill="white" opacity="0.12"
+        fill="white"
       />
     </svg>
   </div>
@@ -260,4 +262,22 @@ const { t, whatsappUrl } = Astro.props;
   #hero-glass-ring {
     transform: translate(-50%, -50%) scale(0.85);
   }
+
+  /* Cloud opacity — light mode (dark mode keeps low opacity) */
+  .cloud-p1 { opacity: 0.18; }
+  .cloud-p2 { opacity: 0.12; }
+
+  /* Floating shapes — dark mode keeps subtle opacity */
+  #hero-float-top { opacity: 0.30; }
+  #hero-float-mid { opacity: 0.25; }
+  #hero-float-bot { opacity: 0.20; }
+
+  /* LIGHT MODE OVERRIDES — cloud more visible, shapes more opaque, badges darker */
+  :root:not(.dark) .cloud-p1 { opacity: 0.72; }
+  :root:not(.dark) .cloud-p2 { opacity: 0.55; }
+  :root:not(.dark) #hero-float-top { opacity: 0.55; }
+  :root:not(.dark) #hero-float-mid { opacity: 0.50; }
+  :root:not(.dark) #hero-float-bot { opacity: 0.45; }
+  :root:not(.dark) #hero-badges { color: var(--hds-fg-soft) !important; }
+
 </style>