Actualizar index.html

index.html

@@ -85,29 +85,24 @@
 </div>
         </header>
 
-        <div onclick="window.location.href='plan-tranquilidad.html?token=' + urlToken" class="cursor-pointer mb-8 fade-in relative group overflow-hidden bg-slate-900 rounded-[2rem] p-6 shadow-2xl border border-slate-800 transition-all hover:shadow-blue-500/20 hover:-translate-y-1">
+        <div id="promo-banner" onclick="window.location.href='plan-tranquilidad.html?token=' + urlToken" class="hidden cursor-pointer mt-6 mb-2 mx-5 fade-in bg-[#131b2c] rounded-[2.5rem] p-8 shadow-lg transition-all hover:shadow-xl active:scale-[0.98]">
-                    <div class="absolute -top-24 -right-24 w-48 h-48 bg-blue-500 rounded-full blur-[80px] opacity-30 group-hover:opacity-50 transition-opacity"></div>
+                    <div class="flex flex-col items-center text-center">
-                    <div class="absolute -bottom-24 -left-24 w-48 h-48 bg-amber-500 rounded-full blur-[80px] opacity-20 group-hover:opacity-40 transition-opacity"></div>
+                        <div class="w-14 h-14 bg-[#232b3e] rounded-2xl flex items-center justify-center mb-5">
-                    
-                    <div class="relative z-10 flex flex-col items-center text-center">
-                        <div class="w-12 h-12 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center mb-4 border border-white/10 shadow-inner">
                             <i data-lucide="zap" class="w-6 h-6 text-amber-400"></i>
                         </div>
-                        
+                        <h3 class="text-white font-black text-2xl tracking-tight mb-3">Protege tu hogar todo el año</h3>
-                        <h3 class="text-white font-black text-lg leading-tight mb-2 tracking-wide flex items-center justify-center gap-2">
+                        <p class="text-slate-400 text-sm font-medium leading-relaxed mb-7 px-2">
-                            <span class="text-blue-400">**</span><i data-lucide="wrench" class="w-4 h-4 text-slate-300"></i> ¡NO ESPERES A UNA AVERÍA! ÚNETE AL PLAN TRANQUILIDAD HOY
+                            Olvídate de las averías imprevistas con nuestro Plan Tranquilidad. Incluye urgencias gratuitas y revisión anual.
-                        </h3>
-                        
-                        <p class="text-slate-300 text-xs font-medium leading-relaxed px-2 mb-6">
-                            Olvídate de facturas sorpresa. Cobertura de URGENCIAS y REVISIÓN ANUAL incluida.
                         </p>
-                        
+                        <button class="w-full bg-white text-[#131b2c] font-black py-4 rounded-2xl text-xs uppercase tracking-widest">
-                        <button class="w-full bg-gradient-to-r from-amber-400 to-amber-500 text-amber-950 font-black py-4 rounded-xl shadow-[0_0_20px_rgba(245,158,11,0.3)] uppercase tracking-widest text-[11px] flex items-center justify-center gap-2 group-hover:scale-[1.02] transition-transform">
+                            Ver planes y precios
-                            DAR DE ALTA MI PLAN CON UN CLICK <i data-lucide="chevron-right" class="w-4 h-4"></i>
                         </button>
                     </div>
                 </div>
             
+
+
+                            
                 <div id="activeServicesContainer" class="space-y-5 fade-in fade-in-delay-1"></div>
                 
                 <div id="noActiveServices" class="hidden text-center p-8 bg-white rounded-[2.5rem] shadow-sm border border-slate-100 mt-2">
@@ -376,9 +371,18 @@
                 if (!data.ok) throw new Error("Token inválido");
                 
                 const servicesList = data.services || [];
-                
                 currentQuotes = data.quotes || [];
 
+                // 🛑 LÓGICA DEL BANNER: Si NO tiene suscripción activa, se lo enseñamos
+                const promoBanner = document.getElementById('promo-banner');
+                if (promoBanner) {
+                    if (data.subscription) {
+                        promoBanner.classList.add('hidden'); // Ya tiene el plan, lo ocultamos
+                    } else {
+                        promoBanner.classList.remove('hidden'); // No tiene el plan, lo mostramos
+                    }
+                }
+
                 renderPortal(data.client, data.company, servicesList);
                 
                 renderQuotes();