From c60dfb0a90a7e3dfe528c0a8f1793ed818890558 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Wed, 11 Mar 2026 12:08:45 -0500
Subject: [PATCH] fix(landing): mejorar color de modal de instalacion y
 corregir TS bugs en scrolls

---
 frontend/src/views/LandingView.vue | 46 ++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/LandingView.vue b/frontend/src/views/LandingView.vue
index 3fc836e..437ba52 100644
--- a/frontend/src/views/LandingView.vue
+++ b/frontend/src/views/LandingView.vue
@@ -198,11 +198,14 @@ const onScroll = () => {
 const revealElements = () => {
   const reveals = document.querySelectorAll('.reveal')
   for (let i = 0; i < reveals.length; i++) {
+    const el = reveals[i]
+    if (!el) continue
+
     const windowHeight = window.innerHeight
-    const elementTop = reveals[i].getBoundingClientRect().top
+    const elementTop = el.getBoundingClientRect().top
     const elementVisible = 100
     if (elementTop < windowHeight - elementVisible) {
-      reveals[i].classList.add('active')
+      el.classList.add('active')
     }
   }
 }
@@ -418,6 +421,7 @@ const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
 }
 .text-gradient {
   background: linear-gradient(to right, #ffffff, #a1a1aa);
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -507,7 +511,16 @@ const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
 .install {
   padding: 120px 4%; position: relative;
   border-top: 1px solid var(--border-subtle);
-  background: linear-gradient(180deg, var(--bg-color) 0%, #0a0a0a 100%);
+  background: #050505;
+  overflow: hidden;
+}
+.install__gradient-bg {
+  position: absolute;
+  top: 50%; left: 50%; width: 100vw; height: 500px;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(ellipse at center, rgba(254, 231, 21, 0.08) 0%, rgba(6, 182, 212, 0.06) 40%, transparent 70%);
+  filter: blur(60px);
+  z-index: 1; pointer-events: none;
 }
 .install__wrap { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
 
@@ -519,20 +532,29 @@ const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
 .install__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px; }
 .install__sub { font-size: 1.1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto; line-height: 1.6; }
 
-.install__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 60px; }
+.install__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 60px; position: relative; z-index: 10; }
 
 .glass-card {
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 24px; padding: 40px 32px;
-  transition: all 0.3s ease;
+  transition: all 0.4s ease;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+}
+.glass-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0; height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 }
 .glass-card:hover {
   transform: translateY(-5px);
-  background: rgba(30, 30, 30, 0.6);
+  background: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.2);
-  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
 }
 
 .glass-card__head {
@@ -542,8 +564,8 @@ const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
   width: 56px; height: 56px; border-radius: 16px;
   display: flex; align-items: center; justify-content: center;
 }
-.apple-bg { background: rgba(255, 255, 255, 0.1); color: #fff; }
-.android-bg { background: rgba(52, 168, 83, 0.15); color: #34A853; }
+.apple-bg { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 0 0 20px rgba(255,255,255,0.05); }
+.android-bg { background: rgba(52, 168, 83, 0.15); color: #4ade80; box-shadow: inset 0 0 20px rgba(52, 168, 83, 0.05); }
 .glass-card__icon .material-icons { font-size: 32px; }
 
 .glass-card__title-group h3 { font-size: 1.2rem; font-weight: 700; }