diff --git a/resources/views/livewire/show-promociones.blade.php b/resources/views/livewire/show-promociones.blade.php
index 914a5ea..caac29f 100755
--- a/resources/views/livewire/show-promociones.blade.php
+++ b/resources/views/livewire/show-promociones.blade.php
@@ -59,7 +59,7 @@
             <div class="swiper-container overflow-hidden py-4 px-3" wire:ignore>
                 <div class="swiper-wrapper">
                     @foreach ($categorias as $categoria1)
-                        <div wire:key="banner-{{ $categoria1->id }}" class="swiper-slide cursor-pointer transition hover:scale-105 rounded-lg overflow-hidden shadow bg-white"
+                        <div wire:key="banner-{{ $categoria1->id }}" class="swiper-slide relative cursor-pointer transition hover:scale-105 rounded-lg overflow-hidden shadow bg-white"
                             x-on:click="
                                 seleccionada = {
                                     nombre: '{{ $categoria1->nombre }}',
@@ -68,10 +68,12 @@
                                 $wire.set('categorian', '{{ $categoria1->nombre }}')
                             "
                         >
-                            <img src="{{ asset($categoria1->imagen) }}" class="w-full h-12 md:h-full object-cover object-center" alt="imagen de {{ $categoria1->nombre }}">
-                            <div class="p-2 text-center md:hidden">
-                                <h2 class="text-xs font-semibold text-gray-800">{{ $categoria1->nombre }}</h2>
-                            </div>
+                            <img src="{{ asset($categoria1->imagen) }}" class="w-full h-14 md:h-full object-cover object-center" alt="imagen de {{ $categoria1->nombre }}">
+                   <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent flex items-end justify-center p-1 md:hidden">
+                        <span class="text-xs sm:text-sm md:text-base font-medium text-white text-center drop-shadow-md">
+                            {{ $categoria1->nombre }}
+                        </span>
+                    </div>
                         </div>
                     @endforeach
                 </div>