Actualizar index.html

index.html

@@ -85,6 +85,53 @@
 </div>
         </header>
 
+<div id="promo-banner" class="hidden mt-4 mb-2 mx-5 fade-in relative">
+    <div onclick="openProtectionPlan()" class="cursor-pointer bg-gradient-to-r from-[#0f172a] via-[#162033] to-[#1e293b] rounded-[2rem] p-5 shadow-[0_12px_30px_rgba(15,23,42,0.18)] border border-slate-700/30 transition-all duration-300 hover:shadow-[0_16px_40px_rgba(15,23,42,0.22)] active:scale-[0.98] overflow-hidden relative">
+
+        <div class="absolute -right-8 -top-8 w-28 h-28 rounded-full bg-blue-500/10 blur-2xl"></div>
+        <div class="absolute -left-8 -bottom-8 w-24 h-24 rounded-full bg-amber-400/10 blur-2xl"></div>
+
+        <button onclick="event.stopPropagation(); closeProtectionBanner()" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 text-white/80 flex items-center justify-center transition-all">
+            <i data-lucide="x" class="w-4 h-4"></i>
+        </button>
+
+        <div class="flex items-start gap-4 relative z-10">
+            <div class="w-14 h-14 shrink-0 rounded-2xl bg-white/10 border border-white/10 flex items-center justify-center shadow-inner">
+                <i data-lucide="shield-check" class="w-7 h-7 text-amber-400"></i>
+            </div>
+
+            <div class="flex-1 min-w-0 pr-8">
+                <p class="text-[10px] font-black uppercase tracking-[0.22em] text-blue-200 mb-1">
+                    Protección recomendada
+                </p>
+                <h3 class="text-white font-black text-lg tracking-tight leading-tight">
+                    Plan Protección Eléctrica
+                </h3>
+                <p class="text-slate-300 text-xs font-medium mt-2 leading-relaxed">
+                    Evita imprevistos eléctricos en tu vivienda con asistencia prioritaria, revisión anual y cobertura para urgencias.
+                </p>
+
+                <div class="flex flex-wrap gap-2 mt-3">
+                    <span class="px-2.5 py-1 rounded-full bg-white/10 text-white text-[10px] font-black uppercase tracking-wider border border-white/10">
+                        Urgencias
+                    </span>
+                    <span class="px-2.5 py-1 rounded-full bg-white/10 text-white text-[10px] font-black uppercase tracking-wider border border-white/10">
+                        Revisión anual
+                    </span>
+                    <span class="px-2.5 py-1 rounded-full bg-amber-400 text-slate-900 text-[10px] font-black uppercase tracking-wider">
+                        Más tranquilidad
+                    </span>
+                </div>
+
+                <div class="mt-4 inline-flex items-center gap-2 bg-white text-slate-900 px-4 py-2.5 rounded-xl shadow-md font-black text-[11px] uppercase tracking-widest">
+                    Ver Plan
+                    <i data-lucide="arrow-right" class="w-4 h-4"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="w-full relative z-10">
             
             <div id="tabAvisos" class="tab-content active px-5 pt-6 pb-6">
@@ -363,6 +410,7 @@
             currentQuotes = data.quotes || [];
 
             renderPortal(data.client, data.company, servicesList);
+            initProtectionBanner(data.subscription);
 
             renderQuotes();
 
@@ -393,6 +441,37 @@
             }, 300);
         }
 
+        function openProtectionPlan() {
+    window.location.href = `plan-tranquilidad.html?token=${urlToken}`;
+}
+
+function closeProtectionBanner() {
+    localStorage.setItem(`promo_closed_${urlToken}`, 'true');
+    const banner = document.getElementById('promo-banner');
+    if (!banner) return;
+
+    banner.classList.add('opacity-0', 'translate-y-2', 'pointer-events-none');
+    setTimeout(() => {
+        banner.classList.add('hidden');
+    }, 250);
+}
+
+function initProtectionBanner(subscription) {
+    const banner = document.getElementById('promo-banner');
+    if (!banner) return;
+
+    const wasClosed = localStorage.getItem(`promo_closed_${urlToken}`) === 'true';
+    const isPlanPage = window.location.pathname.includes('plan-tranquilidad');
+
+    if (!subscription && !wasClosed && !isPlanPage) {
+        banner.classList.remove('hidden');
+    } else {
+        banner.classList.add('hidden');
+    }
+
+    lucide.createIcons();
+}
+
         // --- SISTEMA DE PESTAÑAS ---
         function toggleHistory() {
             const container = document.getElementById('historyServicesContainer');