diff --git a/index.html b/index.html
index 638c75b..f8cb439 100644
--- a/index.html
+++ b/index.html
@@ -430,7 +430,7 @@
             }, 300);
         }
 
-        // ==========================================
+       // ==========================================
         // CÁLCULO DE ETA (TIEMPO ESTIMADO) INTELIGENTE
         // ==========================================
         async function calculateClientETA(serviceId, destAddress) {
@@ -470,38 +470,52 @@
                     const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
                     const km = R * c;
                     
-                    // Tiempo basado directamente en la distancia (sin restar)
+                    // Tiempo total estimado basado en la distancia
                     const totalMins = Math.round((km/35)*60) + 5; 
-                    let remainingMins = totalMins; 
                     
-                    // Porcentaje visual para la barra animada
-                    let progressPercent = 5;
+                    // Extraemos la hora exacta en la que el técnico pulsó el botón
+                    let startedAt = new Date().getTime();
                     if (data.location.updated_at) {
-                        const startedAt = new Date(data.location.updated_at).getTime();
-                        if (!isNaN(startedAt)) {
-                            const diffMins = Math.floor((new Date().getTime() - startedAt) / 60000);
-                            progressPercent = (diffMins / totalMins) * 100;
-                        }
+                        const parsed = new Date(data.location.updated_at).getTime();
+                        if (!isNaN(parsed)) startedAt = parsed;
                     }
-                    
-                    if (progressPercent > 95) progressPercent = 95;
-                    if (progressPercent < 5) progressPercent = 5;
 
-                    container.innerHTML = `
-                        <p class="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
-                            <i data-lucide="clock" class="w-3.5 h-3.5"></i> Llegada en aprox. <span class="text-indigo-700 text-sm ml-0.5">${remainingMins} min</span>
-                        </p>
-                        <div class="w-full bg-indigo-100 rounded-full h-2.5 overflow-hidden shadow-inner">
-                            <div class="bg-indigo-500 h-full rounded-full transition-all duration-1000 relative" style="width: ${progressPercent}%">
-                                <div class="absolute right-0 top-0 bottom-0 w-4 bg-white/40 animate-pulse"></div>
+                    // CREAMOS UNA FUNCIÓN INTERNA PARA ACTUALIZAR EN TIEMPO REAL
+                    function renderETA() {
+                        const now = new Date().getTime();
+                        const diffMins = Math.floor((now - startedAt) / 60000);
+                        
+                        // Restamos el tiempo que ya ha pasado conduciendo
+                        let remainingMins = totalMins - diffMins;
+                        if (remainingMins < 1) remainingMins = 1; // Nunca bajará de 1 minuto
+                        
+                        let progressPercent = (diffMins / totalMins) * 100;
+                        if (progressPercent > 95) progressPercent = 95;
+                        if (progressPercent < 5) progressPercent = 5;
+
+                        container.innerHTML = `
+                            <p class="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
+                                <i data-lucide="clock" class="w-3.5 h-3.5"></i> Llegada en aprox. <span class="text-indigo-700 text-sm ml-0.5">${remainingMins} min</span>
+                            </p>
+                            <div class="w-full bg-indigo-100 rounded-full h-2.5 overflow-hidden shadow-inner">
+                                <div class="bg-indigo-500 h-full rounded-full transition-all duration-1000 relative" style="width: ${progressPercent}%">
+                                    <div class="absolute right-0 top-0 bottom-0 w-4 bg-white/40 animate-pulse"></div>
+                                </div>
                             </div>
-                        </div>
-                        <div class="flex justify-between items-center mt-1 px-1">
-                            <p class="text-[8px] font-black uppercase text-indigo-300">Saliendo</p>
-                            <p class="text-[8px] font-black uppercase text-indigo-400">A ${km.toFixed(1)} km</p>
-                        </div>
-                    `;
-                    lucide.createIcons();
+                            <div class="flex justify-between items-center mt-1 px-1">
+                                <p class="text-[8px] font-black uppercase text-indigo-300">Saliendo</p>
+                                <p class="text-[8px] font-black uppercase text-indigo-400">A ${km.toFixed(1)} km</p>
+                            </div>
+                        `;
+                        lucide.createIcons();
+                    }
+
+                    // 1. Lo pintamos inmediatamente al cargar
+                    renderETA();
+                    
+                    // 2. Lo actualizamos automáticamente cada 60 segundos (Magia en tiempo real)
+                    setInterval(renderETA, 60000);
+                    
                 } else {
                     container.innerHTML = `<p class="text-xs font-bold text-indigo-600 leading-tight">El técnico está en camino hacia tu domicilio.</p>`;
                 }