diff --git a/plan-tranquilidad.html b/plan-tranquilidad.html
new file mode 100644
index 0000000..daa3949
--- /dev/null
+++ b/plan-tranquilidad.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <title>Plan Tranquilidad Eléctrica - IntegraRepara</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        :root {
+            --primary: #2563eb;
+            --secondary: #f59e0b;
+            --app-bg: #f4f7f9;
+        }
+        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; }
+    </style>
+</head>
+<body class="text-slate-800 font-sans antialiased pb-10">
+
+    <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>
+        </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>
+    </header>
+
+    <main class="px-6 -mt-12 space-y-6">
+        
+        <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>
+
+        <div class="space-y-3">
+            <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest ml-2">Elige tu modalidad</h3>
+            
+            <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>
+                </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
+            </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>
+
+    <script>
+        let selectedPlan = 'yearly';
+        lucide.createIcons();
+
+        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');
+        }
+
+        function goToPayment() {
+            if(!document.getElementById('check-legal').checked) {
+                alert("Debes aceptar las condiciones legales para continuar.");
+                return;
+            }
+            // Aquí redirigirías a la ruta de Stripe de tu server
+            alert("Redirigiendo a pasarela de pago segura para el plan: " + selectedPlan);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
