diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index b35fbe7..36d87c1 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -12,7 +12,6 @@ import { telemetryService } from "@/services/telemetryService";
 import { analyticsService } from "@/services/analyticsService";
 
 import BusStopInfoModal from "@/components/BusStopInfoModal.vue";
-import OffersBadge from "@/components/common/OffersBadge.vue";
 import type { BusStop } from '@/types'
 
 const router = useRouter();
@@ -922,16 +921,19 @@ function clearNavigation() {
           
           <!-- Floating UI Elements -->
           <div class="map-floating-controls">
-            <!-- Promos Toggle Button (High-Tech Animation) -->
-            <div 
-              v-if="isLoaded && couponStore.coupons.length > 0" 
-              class="promos-badge-wrapper" 
+            <!-- Promos FAB Button -->
+            <button
+              v-if="isLoaded && couponStore.coupons.length > 0"
+              class="offers-fab"
+              :class="{ 'offers-fab--open': showPromos }"
               @click="showPromos = !showPromos"
-              :class="{ 'active': showPromos }"
               title="Ver Ofertas"
             >
-              <OffersBadge :is-close="showPromos" />
-            </div>
+              <span class="material-icons offers-fab-icon">
+                {{ showPromos ? 'close' : 'local_offer' }}
+              </span>
+              <span v-if="!showPromos" class="offers-fab-badge">{{ couponStore.coupons.length }}</span>
+            </button>
 
             <!-- Location Button (Animated Pin) -->
             <button 
@@ -1097,71 +1099,80 @@ function clearNavigation() {
       </Transition>
     </div>
 
-        <!-- Floating Promos Carousel -->
-        <Transition name="promo-slide">
-          <div v-if="showPromos && couponStore.coupons.length > 0" class="floating-promos-container">
-            <div class="carousel-container glass-morphism">
-              <div class="carousel-header">
-                <span class="material-icons">stars</span>
-                <h2>Ofertas SIBU</h2>
-                <button class="close-promos-btn" @click="showPromos = false">
-                  <span class="material-icons">close</span>
-                </button>
-              </div>
+        <!-- Offers Bottom Sheet -->
+        <Transition name="sheet-slide">
+          <div v-if="showPromos && couponStore.coupons.length > 0" class="offers-sheet">
+            <!-- Handle -->
+            <div class="sheet-handle"></div>
 
-              <div class="carousel-viewport">
-                <div class="carousel-track">
-                  <Transition name="carousel-slide" mode="out-in">
-                    <div 
-                      v-if="currentPromo"
-                      :key="currentPromo.id"
-                      class="promo-card-premium"
-                      @mouseenter="stopCarousel"
-                      @mouseleave="startCarousel"
-                    >
-                      <div class="promo-image-wrapper">
-                        <img :src="getImageUrl(currentPromo.image_url)" class="promo-img-full" />
-                        <div class="promo-brand-badge">
-                          {{ currentPromo.business_name || 'SIBU' }}
-                        </div>
-                        <div v-if="currentPromo.discount_percentage" class="promo-discount-tag">
-                          -{{ currentPromo.discount_percentage }}%
-                        </div>
-                      </div>
-                      
-                      <div class="promo-info-premium">
-                        <h3 class="promo-title-premium">{{ currentPromo.title }}</h3>
-                        <p class="promo-desc-premium">{{ currentPromo.description }}</p>
-                        <button class="promo-btn-premium" @click="router.push('/business/' + currentPromo.business_id)">
-                          Ver Negocio
-                        </button>
-                      </div>
-                    </div>
-                  </Transition>
-                </div>
-
-                <!-- Carousel Controls -->
-                <div class="carousel-dots">
-                  <button 
-                    v-for="(_, index) in couponStore.coupons" 
-                    :key="index"
-                    class="dot"
-                    :class="{ active: index === currentCarouselIndex }"
-                    @click="currentCarouselIndex = index"
-                  ></button>
-                </div>
-                
-              </div>
-              
-                <button class="carousel-nav prev" @click="prevPromo">
-                  <span class="material-icons">chevron_left</span>
-                </button>
-                <button class="carousel-nav next" @click="nextPromo">
-                  <span class="material-icons">chevron_right</span>
-                </button>
+            <!-- Header -->
+            <div class="sheet-header">
+              <div class="sheet-header-left">
+                <span class="material-icons sheet-star">stars</span>
+                <span class="sheet-title">Ofertas SIBU</span>
+                <span class="sheet-count-badge">{{ couponStore.coupons.length }} disponibles</span>
               </div>
+              <button class="sheet-close" @click="showPromos = false">
+                <span class="material-icons">close</span>
+              </button>
             </div>
-          </Transition>
+
+            <!-- Card area with nav arrows -->
+            <div class="sheet-card-area">
+              <!-- Arrow prev -->
+              <button class="sheet-nav sheet-nav--prev" @click="prevPromo" :disabled="couponStore.coupons.length < 2">
+                <span class="material-icons">chevron_left</span>
+              </button>
+
+              <!-- Promo Card -->
+              <Transition name="carousel-slide" mode="out-in">
+                <div
+                  v-if="currentPromo"
+                  :key="currentPromo.id"
+                  class="sheet-card"
+                  @mouseenter="stopCarousel"
+                  @touchstart="stopCarousel"
+                  @mouseleave="startCarousel"
+                >
+                  <!-- Image -->
+                  <div class="sheet-img-wrap">
+                    <img :src="getImageUrl(currentPromo.image_url)" class="sheet-img" :alt="currentPromo.title" />
+                    <span v-if="currentPromo.discount_percentage" class="sheet-discount">
+                      -{{ currentPromo.discount_percentage }}%
+                    </span>
+                  </div>
+
+                  <!-- Info -->
+                  <div class="sheet-info">
+                    <p class="sheet-biz-name">{{ currentPromo.business_name || 'SIBU' }}</p>
+                    <h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
+                    <p class="sheet-promo-desc">{{ currentPromo.description }}</p>
+                    <button class="sheet-cta" @click="router.push('/business/' + currentPromo.business_id)">
+                      Ver Negocio
+                      <span class="material-icons" style="font-size:1rem">arrow_forward</span>
+                    </button>
+                  </div>
+                </div>
+              </Transition>
+
+              <!-- Arrow next -->
+              <button class="sheet-nav sheet-nav--next" @click="nextPromo" :disabled="couponStore.coupons.length < 2">
+                <span class="material-icons">chevron_right</span>
+              </button>
+            </div>
+
+            <!-- Dots -->
+            <div class="sheet-dots">
+              <button
+                v-for="(_, i) in couponStore.coupons"
+                :key="i"
+                class="sheet-dot"
+                :class="{ 'sheet-dot--active': i === currentCarouselIndex }"
+                @click="currentCarouselIndex = i; startCarousel()"
+              ></button>
+            </div>
+          </div>
+        </Transition>
         </div>
       </div>
 
@@ -1227,236 +1238,282 @@ function clearNavigation() {
   height: 100%;
 }
 
-/* Premium Carousel Styles */
-.carousel-container {
-  padding: 24px;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  border-radius: 28px;
-  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
-}
-
-.glass-morphism {
-  background: var(--card-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--border-color);
-}
-
-.carousel-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: var(--active-color);
+/* ═══════════════════════════════════════
+   OFFERS FAB BUTTON
+═══════════════════════════════════════ */
+.offers-fab {
   position: relative;
-  padding-left: 48px; /* Space for the absolute close button */
-}
-
-.carousel-header h2 {
-  font-size: 1.6rem; /* Slightly smaller for better fit */
-  font-weight: 800;
-  margin: 0;
-  flex: 1;
-}
-
-.close-promos-btn {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-  background: var(--bg-secondary);
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: var(--active-color);
+  color: #101820;
   border: none;
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  box-shadow: 0 4px 20px rgba(254, 231, 21, 0.45);
+  transition: transform 0.2s, box-shadow 0.2s;
+  flex-shrink: 0;
+}
+
+.offers-fab:hover { transform: scale(1.08); }
+.offers-fab:active { transform: scale(0.96); }
+
+.offers-fab--open {
+  background: var(--bg-secondary);
   color: var(--text-primary);
-  transition: all 0.2s;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+  border: 1px solid var(--border-color);
 }
 
-.close-promos-btn:hover {
-  background: var(--hover-bg);
-  color: #f44336;
-}
+.offers-fab-icon { font-size: 1.5rem; transition: color 0.2s; }
 
-.carousel-viewport {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.carousel-track {
-  width: 100%;
-  height: 440px;
-  position: relative;
-}
-
-.promo-card-premium {
+.offers-fab-badge {
   position: absolute;
-  width: 100%;
-  height: 100%; /* Fill the carousel viewport */
-  background: var(--card-bg);
-  border-radius: 24px;
-  overflow: hidden;
-  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+  top: -4px;
+  right: -4px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  background: #ef4444;
+  color: #ffffff;
+  font-size: 0.625rem;
+  font-weight: 800;
+  border-radius: 99px;
+  border: 2px solid var(--bg-primary);
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
 }
 
-.promo-image-wrapper {
+/* ═══════════════════════════════════════
+   OFFERS BOTTOM SHEET
+═══════════════════════════════════════ */
+.offers-sheet {
+  position: fixed;
+  bottom: 64px; /* above bottom nav */
+  left: 0;
+  right: 0;
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-color);
+  border-radius: 20px 20px 0 0;
+  z-index: 1300;
+  padding: 0 0 1rem;
+  box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
+}
+
+.sheet-handle {
+  width: 40px;
+  height: 4px;
+  border-radius: 99px;
+  background: var(--border-color);
+  margin: 10px auto 8px;
+}
+
+.sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.sheet-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sheet-star { color: var(--active-color); font-size: 1.125rem; }
+
+.sheet-title {
+  font-size: 1rem;
+  font-weight: 800;
+  color: var(--text-primary);
+}
+
+.sheet-count-badge {
+  background: var(--active-color);
+  color: #101820;
+  font-size: 0.6875rem;
+  font-weight: 800;
+  padding: 0.15rem 0.5rem;
+  border-radius: 99px;
+}
+
+.sheet-close {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: color 0.2s;
+}
+.sheet-close:hover { color: var(--text-primary); }
+.sheet-close .material-icons { font-size: 1.125rem; }
+
+/* Card area */
+.sheet-card-area {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.75rem 0.5rem 0.375rem;
+  min-height: 110px;
+}
+
+.sheet-nav {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.18s;
+}
+.sheet-nav:disabled { opacity: 0.3; cursor: default; }
+.sheet-nav:not(:disabled):hover { background: var(--active-color); color: #101820; border-color: var(--active-color); }
+.sheet-nav .material-icons { font-size: 1.25rem; }
+
+.sheet-card {
+  flex: 1;
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.sheet-img-wrap {
   position: relative;
-  height: 180px; /* Reduced from 280px to save space */
-  min-height: 180px;
+  flex-shrink: 0;
+  width: 88px;
+  height: 88px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bg-primary);
 }
 
-.promo-img-full {
+.sheet-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.promo-brand-badge {
+.sheet-discount {
   position: absolute;
-  top: 12px;
-  left: 12px;
-  background: rgba(255,255,255,0.9);
-  color: #101820;
-  padding: 4px 10px;
-  border-radius: 8px;
+  top: 6px;
+  left: 6px;
+  background: #ef4444;
+  color: #ffffff;
+  font-size: 0.6875rem;
   font-weight: 800;
-  font-size: 0.75rem;
-  backdrop-filter: blur(5px);
+  padding: 0.15rem 0.4rem;
+  border-radius: 6px;
+  line-height: 1.2;
 }
 
-.promo-discount-tag {
-  position: absolute;
-  bottom: -15px;
-  right: 16px;
-  background: #E91E63;
-  color: white;
-  padding: 6px 14px;
-  border-radius: 10px;
-  font-weight: 800;
-  font-size: 1.1rem;
-  box-shadow: 0 5px 15px rgba(233, 30, 99, 0.4);
-  z-index: 2;
-}
-
-.promo-info-premium {
-  padding: 24px 20px 20px; /* Reduced padding */
+.sheet-info {
+  flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  flex: 1;
+  gap: 0.2rem;
 }
 
-.promo-title-premium {
-  font-size: 1.2rem; /* Reduced from 1.5rem */
-  font-weight: 800;
-  margin-bottom: 8px;
-  color: var(--text-primary);
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  line-clamp: 1;
-  overflow: hidden;
-}
-
-.promo-desc-premium {
-  color: var(--text-secondary);
-  line-height: 1.4;
-  font-size: 0.9rem;
-  margin-bottom: 16px;
-  display: -webkit-box;
-  -webkit-line-clamp: 3; /* Limit description to 3 lines */
-  -webkit-box-orient: vertical;
-  line-clamp: 3;
-  overflow: hidden;
-  flex: 1; /* Push the button to the bottom */
-}
-
-.promo-btn-premium {
-  width: 100%;
-  background: var(--text-primary);
-  color: var(--bg-primary);
-  border: none;
-  padding: 12px;
-  border-radius: 12px;
+.sheet-biz-name {
+  margin: 0;
+  font-size: 0.6875rem;
   font-weight: 700;
-  cursor: pointer;
-  transition: transform 0.2s;
-  margin-top: auto; /* Ensure button stays at bottom */
+  color: var(--active-color);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-.promo-btn-premium:hover {
-  transform: translateY(-3px);
+.sheet-promo-title {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sheet-promo-desc {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+
+.sheet-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 0.375rem;
+  padding: 0.4rem 0.875rem;
   background: var(--active-color);
-  color: white;
+  color: #101820;
+  border: none;
+  border-radius: 99px;
+  font-size: 0.8125rem;
+  font-weight: 800;
+  font-family: inherit;
+  cursor: pointer;
+  transition: transform 0.15s;
+  align-self: flex-start;
 }
+.sheet-cta:active { transform: scale(0.97); }
 
-/* Dots and Nav */
-.carousel-dots {
+/* Dots */
+.sheet-dots {
   display: flex;
   justify-content: center;
-  gap: 8px;
-  margin-top: 24px;
+  gap: 6px;
+  padding: 0.25rem 0 0.25rem;
 }
 
-.dot {
+.sheet-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--border-color);
   border: none;
+  background: var(--border-color);
   cursor: pointer;
-  transition: all 0.3s;
+  transition: all 0.25s;
+  padding: 0;
 }
 
-.dot.active {
-  width: 24px;
+.sheet-dot--active {
+  width: 20px;
   border-radius: 4px;
   background: var(--active-color);
 }
 
-.carousel-nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: rgba(255,255,255,0.8);
-  border: none;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
-  z-index: 5;
-}
-
-.carousel-nav.prev { left: -25px; }
-.carousel-nav.next { right: -25px; }
-
 /* Carousel Slide Animation */
 .carousel-slide-enter-active,
 .carousel-slide-leave-active {
-  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.carousel-slide-enter-from {
-  opacity: 0;
-  transform: translateX(100px);
-}
-
-.carousel-slide-leave-to {
-  opacity: 0;
-  transform: translateX(-100px);
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
+.carousel-slide-enter-from { opacity: 0; transform: translateX(32px); }
+.carousel-slide-leave-to   { opacity: 0; transform: translateX(-32px); }
 
 /* Uber-like Search Interface Styles */
 .uber-search-container {
@@ -1902,78 +1959,30 @@ function clearNavigation() {
   100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(254, 231, 21, 0); }
 }
 
-.floating-promos-container {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 400px;
-  max-width: calc(100vw - 40px);
-  z-index: 1300; 
+/* Bottom sheet transition */
+.sheet-slide-enter-active,
+.sheet-slide-leave-active {
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
 }
-
-/* Transitions */
-.promo-slide-enter-active,
-.promo-slide-leave-active {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.promo-slide-enter-from,
-.promo-slide-leave-to {
+.sheet-slide-enter-from,
+.sheet-slide-leave-to {
+  transform: translateY(100%);
   opacity: 0;
-  transform: translateY(20px) scale(0.95);
 }
 
 .location-button .material-icons { font-size: 24px; }
 
 /* Responsive */
 @media (max-width: 900px) {
-  .uber-search-container {
-    top: 80px;
-  }
-  
-  .floating-promos-container {
-    width: 92%;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
+  .uber-search-container { top: 80px; }
 
-  /* Reposition floating controls for mobile thumb reach */
   .map-floating-controls {
-    bottom: 120px; /* Más espacio para pulgares en móvil */
-    right: 15px;
-    align-items: center;
-    z-index: 1100;
+    bottom: 130px;
+    right: 14px;
   }
 
-  /* Adjust carousel height for smaller screens if needed */
-  /* Adjust carousel size for mobile */
-  .carousel-track {
-    height: 350px;
-  }
-  
-  .promo-image-wrapper {
-    height: 120px;
-    min-height: 120px;
-  }
-
-  .carousel-header h2 {
-    font-size: 1.2rem;
-  }
-
-  .promo-title-premium {
-    font-size: 1rem;
-  }
-
-  .promo-desc-premium {
-    font-size: 0.8rem;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-  }
-
-  .promo-info-premium {
-    padding: 16px 15px;
+  .offers-sheet {
+    bottom: 60px;
   }
 }