diff --git a/src/_includes/partials/how-it-works.njk b/src/_includes/partials/how-it-works.njk
index 6b8691f..463f0c1 100644
--- a/src/_includes/partials/how-it-works.njk
+++ b/src/_includes/partials/how-it-works.njk
@@ -10,9 +10,10 @@
     </div>
 
     <div class="mt-14 grid gap-10 sm:grid-cols-3 sm:gap-6">
-      <!-- Step 1 -->
+      <!-- Step 1 (connector on desktop) -->
       <div class="relative text-center">
-        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-2xl font-extrabold text-white shadow-lg shadow-brand-600/30">1</div>
+        <div class="pointer-events-none absolute top-8 hidden h-px w-full bg-gradient-to-r from-brand-300 via-slate-300 to-brand-300 sm:left-1/2 sm:block dark:from-brand-700 dark:via-slate-700 dark:to-brand-700" aria-hidden="true"></div>
+        <div class="relative mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-2xl font-extrabold text-white shadow-lg shadow-brand-600/30">1</div>
         <h3 class="mt-5 text-lg font-bold">Crea tu comunidad</h3>
         <p class="mx-auto mt-2 max-w-xs text-sm leading-relaxed text-slate-600 dark:text-slate-400">Regístrate gratis, dale nombre a tu grupo y personaliza tu espacio en minutos.</p>
       </div>