diff --git a/plan-tranquilidad.html b/plan-tranquilidad.html
index daa3949..c4ac297 100644
--- a/plan-tranquilidad.html
+++ b/plan-tranquilidad.html
@@ -6,119 +6,326 @@
     <title>Plan Tranquilidad Eléctrica - IntegraRepara</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
     <style>
-        :root {
-            --primary: #2563eb;
-            --secondary: #f59e0b;
-            --app-bg: #f4f7f9;
+        :root { --primary: #2563eb; --secondary: #f59e0b; --app-bg: #f8fafc; }
+        body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
+        
+        .glass-header { background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); }
+        
+        .plan-card { 
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
+            border: 2px solid transparent;
         }
-        body { background-color: var(--app-bg); }
-        .card-plan { transition: all 0.3s ease; border: 2px solid transparent; }
-        .card-plan.active { border-color: var(--primary); background-color: #eff6ff; }
-        .legal-box { height: 200px; overflow-y: auto; font-size: 11px; line-height: 1.4; }
+        .plan-card.active { 
+            border-color: var(--primary); 
+            background-color: #fff;
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        }
+        
+        #signature-pad { 
+            background: #fff; 
+            touch-action: none; 
+            cursor: crosshair;
+            border: 2px solid #e2e8f0;
+        }
+
+        .benefit-icon {
+            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+        }
+
+        @keyframes pulse-soft {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+            100% { transform: scale(1); }
+        }
+        .animate-offer { animation: pulse-soft 2s infinite; }
     </style>
 </head>
-<body class="text-slate-800 font-sans antialiased pb-10">
+<body class="text-slate-800 font-sans antialiased pb-20">
 
-    <header class="bg-primary-dynamic text-white px-6 pt-12 pb-20 rounded-b-[2.5rem] relative shadow-lg" style="background-color: var(--primary);">
-        <button onclick="window.history.back()" class="absolute top-8 left-6 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-md">
-            <i data-lucide="arrow-left" class="w-5 h-5"></i>
+    <header class="glass-header text-white px-6 pt-12 pb-24 rounded-b-[3rem] relative shadow-2xl overflow-hidden">
+        <div class="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
+        
+        <button onclick="window.history.back()" class="absolute top-8 left-6 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-md active:scale-90 transition-transform z-10">
+            <i data-lucide="chevron-left" class="w-6 h-6"></i>
         </button>
-        <div class="text-center mt-4">
-            <h1 class="text-2xl font-black tracking-tight">Plan Tranquilidad</h1>
-            <p class="text-white/80 text-sm font-medium">Tu hogar siempre protegido</p>
+
+        <div class="relative z-10 text-center space-y-2">
+            <span class="bg-blue-400/30 text-blue-100 text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-[0.2em] backdrop-blur-sm">Servicio Exclusivo</span>
+            <h1 class="text-3xl font-black tracking-tight leading-none">Plan Tranquilidad <span class="text-blue-300">Hogar</span></h1>
+            <p class="text-blue-100/80 text-sm font-medium">Olvídate de las averías eléctricas para siempre</p>
         </div>
     </header>
 
-    <main class="px-6 -mt-12 space-y-6">
+    <main class="px-6 -mt-16 space-y-6 relative z-20">
         
-        <div class="bg-white p-6 rounded-[2rem] shadow-xl border border-slate-100">
-            <h2 class="text-lg font-black text-slate-800 mb-4 flex items-center gap-2">
-                <i data-lucide="shield-check" class="text-primary-dynamic" style="color: var(--primary);"></i> ¿Qué incluye tu plan?
-            </h2>
-            <ul class="space-y-4">
-                <li class="flex gap-3">
-                    <div class="w-6 h-6 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center shrink-0"><i data-lucide="check" class="w-4 h-4"></i></div>
-                    <p class="text-sm"><strong>Urgencias 24/7:</strong> Asistencia en menos de 3h para apagones o cortos.</p>
-                </li>
-                <li class="flex gap-3">
-                    <div class="w-6 h-6 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center shrink-0"><i data-lucide="check" class="w-4 h-4"></i></div>
-                    <p class="text-sm"><strong>Sin Gastos:</strong> Desplazamiento y 3h de mano de obra GRATIS.</p>
-                </li>
-                <li class="flex gap-3">
-                    <div class="w-6 h-6 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center shrink-0"><i data-lucide="check" class="w-4 h-4"></i></div>
-                    <p class="text-sm"><strong>Manitas Eléctrico:</strong> 2h al año para colgar lámparas o cambiar enchufes.</p>
-                </li>
-            </ul>
+        <div class="grid grid-cols-1 gap-4">
+            <div class="bg-white p-5 rounded-[2.5rem] shadow-xl border border-slate-100">
+                <div class="space-y-5">
+                    <div class="flex items-center gap-4">
+                        <div class="benefit-icon w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 shadow-sm">
+                            <i data-lucide="zap" class="text-blue-600 w-6 h-6"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-black text-slate-800 text-sm uppercase tracking-tight">Urgencias 24h Premium</h3>
+                            <p class="text-xs text-slate-500 leading-relaxed">Llegamos en < 3h. Incluye desplazamiento y 3h de mano de obra (2 veces/año).</p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-center gap-4">
+                        <div class="benefit-icon w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 shadow-sm">
+                            <i data-lucide="hammer" class="text-blue-600 w-6 h-6"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-black text-slate-800 text-sm uppercase tracking-tight">Manitas Eléctrico Incluido</h3>
+                            <p class="text-xs text-slate-500 leading-relaxed">1 visita anual (2h) para instalar tus lámparas, ventiladores o enchufes.</p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center gap-4">
+                        <div class="benefit-icon w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 shadow-sm">
+                            <i data-lucide="shield-check" class="text-blue-600 w-6 h-6"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-black text-slate-800 text-sm uppercase tracking-tight">Revisión de Seguridad</h3>
+                            <p class="text-xs text-slate-500 leading-relaxed">Chequeo anual de tu cuadro eléctrico y apriete de bornes anti-incendio.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
 
-        <div class="space-y-3">
-            <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest ml-2">Elige tu modalidad</h3>
+        <div class="space-y-4">
+            <div class="flex justify-between items-end px-2">
+                <h3 class="text-[11px] font-black text-slate-400 uppercase tracking-[0.15em]">Selecciona tu ahorro</h3>
+            </div>
+
+            <div onclick="selectPlan('yearly')" id="plan-yearly" class="plan-card active bg-white p-6 rounded-[2.5rem] shadow-lg flex justify-between items-center cursor-pointer overflow-hidden relative">
+                <div class="absolute top-0 right-0 bg-secondary text-white text-[9px] font-black px-4 py-1 rounded-bl-2xl uppercase tracking-tighter animate-offer" style="background-color: var(--secondary);">Recomendado</div>
+                <div class="flex items-center gap-4">
+                    <div id="radio-yearly" class="w-6 h-6 rounded-full border-2 border-blue-600 flex items-center justify-center">
+                        <div class="w-3 h-3 bg-blue-600 rounded-full"></div>
+                    </div>
+                    <div>
+                        <p class="font-black text-slate-800 text-base">Plan Anual Único</p>
+                        <p class="text-[11px] text-emerald-600 font-bold">Ahorras 2 cuotas mensuales</p>
+                    </div>
+                </div>
+                <div class="text-right">
+                    <p class="text-2xl font-black text-blue-600 leading-none">59,95€</p>
+                    <p class="text-[10px] font-bold text-blue-400 uppercase mt-1">IVA Incluido</p>
+                </div>
+            </div>
+
+            <div onclick="selectPlan('monthly')" id="plan-monthly" class="plan-card bg-slate-100/50 p-6 rounded-[2.5rem] shadow-sm flex justify-between items-center cursor-pointer border-slate-200">
+                <div class="flex items-center gap-4">
+                    <div id="radio-monthly" class="w-6 h-6 rounded-full border-2 border-slate-300 flex items-center justify-center">
+                        <div class="w-3 h-3 bg-blue-600 rounded-full hidden"></div>
+                    </div>
+                    <div>
+                        <p class="font-black text-slate-800 text-base">Suscripción Mensual</p>
+                        <p class="text-[11px] text-slate-500 font-medium">Sin permanencia</p>
+                    </div>
+                </div>
+                <div class="text-right">
+                    <p class="text-xl font-black text-slate-700 leading-none">6,90€<span class="text-xs text-slate-400">+IVA</span></p>
+                    <p class="text-[10px] font-bold text-slate-400 uppercase mt-1">Al mes</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-white p-6 rounded-[2.5rem] shadow-xl border border-slate-100 space-y-4">
+            <div class="text-center">
+                <h3 class="text-[11px] font-black text-slate-400 uppercase tracking-widest">Firma Digital del Contrato</h3>
+                <p class="text-[10px] text-slate-400 mt-1">Usa tu dedo para firmar dentro del recuadro</p>
+            </div>
             
-            <div onclick="selectPlan('monthly')" id="plan-monthly" class="card-plan bg-white p-5 rounded-3xl shadow-sm border border-slate-100 flex justify-between items-center cursor-pointer">
-                <div>
-                    <p class="font-black text-slate-800">Suscripción Mensual</p>
-                    <p class="text-xs text-slate-500">Sin permanencia, cancela cuando quieras.</p>
-                </div>
-                <div class="text-right">
-                    <p class="text-xl font-black text-primary-dynamic" style="color: var(--primary);">6,90€<span class="text-xs">+IVA</span></p>
-                    <p class="text-[10px] font-bold text-slate-400">AL MES</p>
-                </div>
-            </div>
-
-            <div onclick="selectPlan('yearly')" id="plan-yearly" class="card-plan bg-white p-5 rounded-3xl shadow-sm border border-slate-100 flex justify-between items-center cursor-pointer active">
-                <div>
-                    <div class="bg-amber-100 text-amber-700 text-[9px] font-black px-2 py-0.5 rounded-full w-max mb-1 uppercase tracking-tighter">Ahorra 2 meses</div>
-                    <p class="font-black text-slate-800">Pago Anual Único</p>
-                    <p class="text-xs text-slate-500">Protección total durante 1 año.</p>
-                </div>
-                <div class="text-right">
-                    <p class="text-xl font-black text-primary-dynamic" style="color: var(--primary);">59,95€</p>
-                    <p class="text-[10px] font-bold text-slate-400 text-primary-dynamic" style="color: var(--primary);">IVA INCLUIDO</p>
+            <canvas id="signature-pad" class="w-full h-44 rounded-3xl shadow-inner"></canvas>
+            
+            <div class="flex justify-between items-center">
+                <button onclick="clearSignature()" class="flex items-center gap-1 text-[10px] font-black text-rose-500 uppercase tracking-tighter">
+                    <i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Borrar Firma
+                </button>
+                <div class="flex items-center gap-1 text-emerald-600">
+                    <i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
+                    <span class="text-[9px] font-bold uppercase">Conexión Segura</span>
                 </div>
             </div>
         </div>
 
-        <div class="bg-white p-5 rounded-[2rem] border border-slate-200">
-            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 flex items-center gap-1">
-                <i data-lucide="file-text" class="w-3 h-3"></i> Condiciones del servicio
+        <div class="py-4">
+            <button onclick="processContract()" id="btnAction" class="w-full bg-blue-600 text-white font-black py-6 rounded-[2rem] shadow-[0_15px_30px_-5px_rgba(37,99,235,0.4)] active:scale-95 transition-all uppercase tracking-[0.15em] text-sm flex justify-center items-center gap-3">
+                <i data-lucide="crown" class="w-5 h-5"></i> Activar Mi Plan Ahora
+            </button>
+            <p class="text-center text-[9px] text-slate-400 mt-4 px-6 leading-relaxed font-medium">
+                Al activar el plan, confirmas que has leído las condiciones. El servicio tiene una <strong>carencia inicial de 15 días</strong>. Recibirás tu contrato firmado por email.
             </p>
-            <div class="legal-box text-slate-500 border-b border-slate-100 pb-3 mb-3 no-scrollbar">
-                <p><strong>1. OBJETO:</strong> Mantenimiento preventivo y urgencias eléctricas IntegraRepara...</p>
-                <p class="mt-2"><strong>2. COBERTURAS:</strong> Incluye desplazamiento y hasta 3h de mano de obra. Materiales no incluidos...</p>
-                <p class="mt-2"><strong>3. SERVICIO MANITAS:</strong> Una intervención anual de 2h para instalaciones de lámparas o mecanismos...</p>
-                <p class="mt-2"><strong>4. PAGOS:</strong> El primer año se garantiza el precio de oferta. Renovación automática...</p>
-                </div>
-            <label class="flex items-center gap-3 cursor-pointer">
-                <input type="checkbox" id="check-legal" class="w-5 h-5 rounded border-slate-300 text-primary-dynamic focus:ring-primary-dynamic">
-                <span class="text-xs font-medium text-slate-600">He leído y acepto las condiciones del servicio.</span>
-            </label>
         </div>
-
-        <button onclick="goToPayment()" class="w-full bg-primary-dynamic text-white font-black py-5 rounded-2xl shadow-lg hover:opacity-90 active:scale-95 transition-all uppercase tracking-widest text-sm flex justify-center items-center gap-2" style="background-color: var(--primary);">
-            <i data-lucide="credit-card" class="w-5 h-5"></i> Contratar Ahora
-        </button>
-
     </main>
 
+    <div id="pdf-contract-template" class="hidden">
+        <div style="padding: 50px; font-family: 'Helvetica', Arial, sans-serif; color: #1e293b; line-height: 1.6; font-size: 13px;">
+            <div style="display: flex; justify-content: space-between; border-bottom: 3px solid #2563eb; padding-bottom: 20px; margin-bottom: 30px;">
+                <div>
+                    <h1 style="color: #2563eb; margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -1px;">CONTRATO PLAN TRANQUILIDAD</h1>
+                    <p style="margin: 5px 0 0 0; color: #64748b; font-weight: 700; font-size: 11px; text-transform: uppercase;">Mantenimiento Eléctrico Residencial</p>
+                </div>
+                <div style="text-align: right;">
+                    <p style="font-weight: 900; font-size: 16px; margin: 0; color: #0f172a;">IntegraRepara</p>
+                    <p style="font-size: 10px; color: #64748b; margin: 2px 0;">Soporte Técnico Especializado</p>
+                </div>
+            </div>
+
+            <div style="margin-bottom: 25px; background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
+                <p style="margin: 0;"><strong>1. OBJETO:</strong> Prestación de servicios de asistencia técnica, urgencias y mantenimiento preventivo para la vivienda del Cliente.</p>
+                <p style="margin: 10px 0 0 0;"><strong>2. URGENCIAS 24/7:</strong> Cubre falta de suministro o riesgo de incendio. Asistencia < 3h. Máximo 2 intervenciones/año. Incluye desplazamiento y 3h de mano de obra. Materiales NO incluidos (se facturarán aparte).</p>
+                <p style="margin: 10px 0 0 0;"><strong>3. BRICOLAJE:</strong> 1 servicio anual de 2h para instalaciones menores. Es condición que el Cliente disponga de los materiales (lámparas, enchufes, etc.).</p>
+                <p style="margin: 10px 0 0 0;"><strong>4. REVISIÓN ANUAL:</strong> Visita de seguridad para testeo de diferenciales y reapriete de conexiones en el cuadro general.</p>
+                <p style="margin: 10px 0 0 0;"><strong>5. CARENCIA:</strong> El contrato entra en vigor a los <strong>15 días naturales</strong> de la firma. No se cubren averías producidas antes o durante este periodo.</p>
+                <p style="margin: 10px 0 0 0;"><strong>6. MODALIDAD:</strong> <span id="pdf-plan-name" style="color:#2563eb; font-weight:900;">Plan Anual</span>.</p>
+            </div>
+
+            <div style="margin-top: 60px;">
+                <div style="display: flex; justify-content: space-between; align-items: flex-end;">
+                    <div style="width: 280px; text-align: center;">
+                        <p style="font-size: 10px; text-transform: uppercase; font-weight: 800; color: #94a3b8; margin-bottom: 15px; text-align: left;">Firma del Titular:</p>
+                        <img id="pdf-signature-img" style="width: 220px; height: 110px; border-bottom: 2px solid #0f172a;">
+                        <p id="pdf-timestamp" style="font-size: 10px; color: #64748b; margin-top: 8px;">Firmado el: 01/01/2026</p>
+                    </div>
+                    <div style="width: 220px; text-align: right;">
+                        <div style="border: 3px double #2563eb; color: #2563eb; padding: 15px; border-radius: 15px; font-weight: 900; font-size: 12px; text-align: center; transform: rotate(-8deg);">
+                            SISTEMA DE ASISTENCIA<br>
+                            <span style="font-size: 16px;">INTEGRA REPARA</span><br>
+                            VALIDADO DIGITALMENTE
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div style="margin-top: 50px; text-align: center; color: #94a3b8; font-size: 9px; border-top: 1px solid #e2e8f0; padding-top: 20px;">
+                Este documento tiene validez legal como contrato de prestación de servicios bajo firma digital.
+            </div>
+        </div>
+    </div>
+
     <script>
         let selectedPlan = 'yearly';
+        const canvas = document.getElementById('signature-pad');
+        const ctx = canvas.getContext('2d');
+        let drawing = false;
+
+        // Inicialización
         lucide.createIcons();
+        
+        function setupCanvas() {
+            const ratio = Math.max(window.devicePixelRatio || 1, 1);
+            canvas.width = canvas.offsetWidth * ratio;
+            canvas.height = canvas.offsetHeight * ratio;
+            ctx.scale(ratio, ratio);
+            ctx.strokeStyle = "#1e293b";
+            ctx.lineWidth = 3;
+            ctx.lineCap = "round";
+        }
+        
+        window.addEventListener('resize', setupCanvas);
+        setTimeout(setupCanvas, 100);
+
+        // Lógica Firma
+        function getPos(e) {
+            const rect = canvas.getBoundingClientRect();
+            const clientX = e.clientX || e.touches[0].clientX;
+            const clientY = e.clientY || e.touches[0].clientY;
+            return { x: clientX - rect.left, y: clientY - rect.top };
+        }
+
+        function startDrawing(e) {
+            drawing = true;
+            const pos = getPos(e);
+            ctx.beginPath();
+            ctx.moveTo(pos.x, pos.y);
+        }
+
+        function draw(e) {
+            if (!drawing) return;
+            e.preventDefault();
+            const pos = getPos(e);
+            ctx.lineTo(pos.x, pos.y);
+            ctx.stroke();
+        }
+
+        canvas.addEventListener('mousedown', startDrawing);
+        canvas.addEventListener('mousemove', draw);
+        canvas.addEventListener('mouseup', () => drawing = false);
+        canvas.addEventListener('touchstart', startDrawing);
+        canvas.addEventListener('touchmove', draw);
+        canvas.addEventListener('touchend', () => drawing = false);
+
+        function clearSignature() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
 
         function selectPlan(type) {
             selectedPlan = type;
-            document.getElementById('plan-monthly').classList.remove('active');
-            document.getElementById('plan-yearly').classList.remove('active');
-            document.getElementById('plan-' + type).classList.add('active');
+            document.getElementById('plan-monthly').classList.toggle('active', type === 'monthly');
+            document.getElementById('plan-yearly').classList.toggle('active', type === 'yearly');
+            
+            document.getElementById('plan-monthly').classList.toggle('bg-white', type === 'monthly');
+            document.getElementById('plan-monthly').classList.toggle('bg-slate-100/50', type !== 'monthly');
+            
+            document.querySelector('#radio-monthly div').classList.toggle('hidden', type !== 'monthly');
+            document.querySelector('#radio-yearly div').classList.toggle('hidden', type !== 'yearly');
         }
 
-        function goToPayment() {
-            if(!document.getElementById('check-legal').checked) {
-                alert("Debes aceptar las condiciones legales para continuar.");
+        async function processContract() {
+            // Verificamos si ha firmado (mirando si el canvas está vacío)
+            const blank = document.createElement('canvas');
+            blank.width = canvas.width; blank.height = canvas.height;
+            if (canvas.toDataURL() === blank.toDataURL()) {
+                alert("⚠️ Por favor, firma el contrato antes de continuar.");
                 return;
             }
-            // Aquí redirigirías a la ruta de Stripe de tu server
-            alert("Redirigiendo a pasarela de pago segura para el plan: " + selectedPlan);
+
+            const btn = document.getElementById('btnAction');
+            btn.disabled = true;
+            btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Generando Contrato...';
+            lucide.createIcons();
+
+            // 1. Inyectar datos en la plantilla PDF
+            document.getElementById('pdf-signature-img').src = canvas.toDataURL("image/png");
+            document.getElementById('pdf-plan-name').innerText = selectedPlan === 'yearly' ? 'Plan Anual (59,95€ IVA Incl.)' : 'Suscripción Mensual (6,90€ + IVA)';
+            document.getElementById('pdf-timestamp').innerText = "Documento firmado el " + new Date().toLocaleDateString('es-ES') + " a las " + new Date().toLocaleTimeString('es-ES');
+
+            const element = document.getElementById('pdf-contract-template');
+            element.classList.remove('hidden');
+
+            const opt = {
+                margin: 0,
+                filename: `Contrato_Plan_Tranquilidad_${Date.now()}.pdf`,
+                image: { type: 'jpeg', quality: 0.98 },
+                html2canvas: { scale: 2, useCORS: true },
+                jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
+            };
+
+            try {
+                await html2pdf().set(opt).from(element).save();
+                
+                setTimeout(() => {
+                    alert("✅ Contrato generado con éxito.\n\nAhora vamos a conectar con Stripe para formalizar el pago seguro.");
+                    // Aquí iría el enlace a tu Checkout de Stripe
+                    // window.location.href = "TU_URL_DE_STRIPE";
+                    btn.disabled = false;
+                    btn.innerHTML = '<i data-lucide="crown" class="w-5 h-5"></i> Activar Mi Plan Ahora';
+                    lucide.createIcons();
+                }, 1500);
+
+            } catch (err) {
+                alert("Error al crear el PDF. Reintenta.");
+                btn.disabled = false;
+            } finally {
+                element.classList.add('hidden');
+            }
         }
     </script>
 </body>
