diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index bc6fb98..190bc5b 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -177,6 +177,9 @@
     "noShuttles": "No tourist routes available at the moment.",
     "filterRoute": "Filter by route",
     "allRoutes": "All routes",
+    "category": "Category",
+    "local": "Local",
+    "interprovincial": "Interprovincial",
     "tripType": "Trip type",
     "oneWay": "One way",
     "roundTrip": "Round trip",
diff --git a/frontend/src/i18n/locales/es.json b/frontend/src/i18n/locales/es.json
index 28a5ad8..3d19ec6 100644
--- a/frontend/src/i18n/locales/es.json
+++ b/frontend/src/i18n/locales/es.json
@@ -179,6 +179,9 @@
     "noShuttles": "No hay rutas turísticas disponibles en este momento.",
     "filterRoute": "Filtrar por ruta",
     "allRoutes": "Todas las rutas",
+    "category": "Categoría",
+    "local": "Local",
+    "interprovincial": "Interprovincial",
     "tripType": "Tipo de viaje",
     "oneWay": "Ida",
     "roundTrip": "Vuelta",
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index b58bb3d..db93063 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -175,6 +175,7 @@ export interface Shuttle {
     phone_number?: string
     english_speaking?: boolean
     image_url?: string
+    category?: 'local' | 'interprovincial' | 'all'
     is_active: boolean
     created_at?: string
     updated_at?: string
diff --git a/frontend/src/views/AdminShuttles.vue b/frontend/src/views/AdminShuttles.vue
index ce44703..967d932 100644
--- a/frontend/src/views/AdminShuttles.vue
+++ b/frontend/src/views/AdminShuttles.vue
@@ -16,6 +16,8 @@ const shuttleForm = ref({
   origin: 'Boquete',
   destination: 'Santa Catalina',
   vehicle_type: 'Mini Van Compartida',
+  category: 'local',
+  description: '',
   price_per_person: 35,
   price_private_trip: 180,
   estimated_duration: '4.5 horas',
@@ -66,6 +68,8 @@ async function saveShuttle() {
       origin: shuttleForm.value.origin,
       destination: shuttleForm.value.destination,
       vehicle_type: shuttleForm.value.vehicle_type,
+      category: shuttleForm.value.category,
+      description: shuttleForm.value.description,
       company_name: shuttleForm.value.company_name,
       price_per_person: shuttleForm.value.price_per_person,
       price_private_trip: shuttleForm.value.price_private_trip,
@@ -144,9 +148,28 @@ async function saveShuttle() {
             </div>
           </div>
 
+          <div class="form-group grid-row">
+            <div class="input-box">
+              <label>Tipo de Vehículo</label>
+              <input v-model="shuttleForm.vehicle_type" type="text" placeholder="Mini Van Compartida">
+            </div>
+            <div class="input-box">
+              <label>Categoría</label>
+              <select v-model="shuttleForm.category" class="nexus-select">
+                <option value="local">Evento Local / Interno</option>
+                <option value="interprovincial">Interprovincial (Fuera de provincia)</option>
+              </select>
+            </div>
+          </div>
+
           <div class="form-group">
-            <label>Tipo de Vehículo</label>
-            <input v-model="shuttleForm.vehicle_type" type="text" placeholder="Mini Van Compartida">
+            <label>Descripción del Viaje</label>
+            <textarea 
+              v-model="shuttleForm.description" 
+              placeholder="Añade detalles sobre el itinerario, paradas, o qué incluye el viaje..."
+              rows="3"
+              class="nexus-textarea"
+            ></textarea>
           </div>
 
           <div class="form-group grid-row">
@@ -276,6 +299,11 @@ async function saveShuttle() {
                 </div>
               </div>
 
+              <!-- NUEVA DESCRIPCIÓN EN PREVIEW -->
+              <div class="shuttle-description-preview" v-if="shuttleForm.description">
+                <p>{{ shuttleForm.description }}</p>
+              </div>
+
               <!-- Precios prominentes -->
               <div class="price-block">
                 <div class="price-row-main">
@@ -339,6 +367,7 @@ async function saveShuttle() {
   font-weight: 800;
   margin: 0;
   background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -409,7 +438,7 @@ async function saveShuttle() {
   color: #94a3b8;
 }
 
-.form-group input {
+.form-group input, .nexus-select, .nexus-textarea {
   background: rgba(15, 23, 42, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 14px 16px;
@@ -420,11 +449,34 @@ async function saveShuttle() {
   transition: all 0.3s;
 }
 
-.form-group input:focus {
+.nexus-select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1.5em;
+  padding-right: 3rem;
+}
+
+.nexus-textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+.form-group input:focus, .nexus-select:focus, .nexus-textarea:focus {
   border-color: #fee715;
   box-shadow: 0 0 0 4px rgba(254, 231, 21, 0.1);
 }
 
+.shuttle-description-preview {
+  padding: 0 20px 14px;
+  color: rgba(255,255,255,0.7);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
 .file-upload-wrapper {
   position: relative;
   width: 100%;
diff --git a/frontend/src/views/DiscoverView.vue b/frontend/src/views/DiscoverView.vue
index 900b75c..20a3b58 100644
--- a/frontend/src/views/DiscoverView.vue
+++ b/frontend/src/views/DiscoverView.vue
@@ -142,7 +142,7 @@ function resetFilters() {
     </header>
 
     <!-- ── CHIPS DE CATEGORÍA ── -->
-    <div class="cat-chips-wrap">
+    <div class="cat-chips-wrap glass-effect">
       <div class="cat-chips-scroll">
         <button
           v-for="cat in categories"
@@ -151,7 +151,10 @@ function resetFilters() {
           :class="{ 'cat-chip--active': selectedCategory === cat }"
           @click="selectedCategory = cat"
         >
-          {{ catEmoji(cat) }} {{ catName(cat) }}
+          <span class="cat-chip-inner">
+            <span class="cat-emoji">{{ catEmoji(cat) }}</span>
+            <span class="cat-text">{{ catName(cat) }}</span>
+          </span>
         </button>
       </div>
     </div>
@@ -408,8 +411,9 @@ function resetFilters() {
   background: var(--bg-primary);
   border: 1.5px solid var(--border-color);
   border-radius: 0.875rem;
-  padding: 0.75rem 1rem;
-  transition: border-color 0.2s;
+  padding: 0.75rem 1.125rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
 .search-wrap:focus-within { border-color: var(--active-color); }
@@ -426,7 +430,12 @@ function resetFilters() {
   outline: none;
 }
 
-.search-input::placeholder { color: var(--text-secondary); }
+.search-input::placeholder { color: var(--text-secondary); opacity: 0.7; }
+
+.search-wrap:focus-within .search-icon {
+  transform: scale(1.1);
+  color: var(--active-color);
+}
 
 .search-clear {
   background: none;
@@ -445,11 +454,13 @@ function resetFilters() {
  ═══════════════════════════════════════════ */
 .cat-chips-wrap {
   background: var(--bg-secondary);
-  padding: 0.75rem 0;
+  padding: 0.875rem 0;
   border-bottom: 1px solid var(--border-color);
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: 100;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
 }
 
 .cat-chips-scroll {
@@ -465,27 +476,61 @@ function resetFilters() {
 .cat-chip {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem 0.875rem;
+  padding: 0.125rem;
   border-radius: 99px;
-  border: 1.5px solid var(--border-color);
+  border: 1px solid var(--border-color);
   background: var(--bg-primary);
   color: var(--text-secondary);
-  font-size: 0.8125rem;
-  font-weight: 700;
   font-family: inherit;
   cursor: pointer;
   white-space: nowrap;
   flex-shrink: 0;
-  transition: all 0.18s;
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
-.cat-chip:hover { border-color: var(--active-color); color: var(--text-primary); }
+.cat-chip-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem 0.5rem 0.625rem;
+}
+
+.cat-emoji {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--bg-secondary);
+  border-radius: 50%;
+  font-size: 1rem;
+  transition: transform 0.3s ease;
+}
+
+.cat-text {
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.cat-chip:hover {
+  border-color: var(--active-color);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.cat-chip:hover .cat-emoji {
+  transform: scale(1.1) rotate(5deg);
+}
 
 .cat-chip--active {
   background: var(--active-color);
   border-color: var(--active-color);
   color: #101820;
+  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.3);
+}
+
+.cat-chip--active .cat-emoji {
+  background: rgba(0, 0, 0, 0.1);
 }
 
 /* ═══════════════════════════════════════════
@@ -654,8 +699,9 @@ function resetFilters() {
 }
 
 .biz-card:hover {
-  transform: translateY(-4px);
+  transform: translateY(-6px) scale(1.02);
   border-color: var(--active-color);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
 }
 
 .biz-img-wrap {
diff --git a/frontend/src/views/TransporteLayout.vue b/frontend/src/views/TransporteLayout.vue
index 4e33f03..5482511 100644
--- a/frontend/src/views/TransporteLayout.vue
+++ b/frontend/src/views/TransporteLayout.vue
@@ -100,6 +100,8 @@ onMounted(async () => {
   border: 1px solid var(--border-color);
   width: 100%;
   max-width: 400px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(8px);
 }
 
 .hub-tab {
@@ -118,6 +120,30 @@ onMounted(async () => {
   justify-content: center;
   gap: 8px;
   text-decoration: none;
+  overflow: hidden;
+  position: relative;
+}
+
+.hub-tab::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background: white;
+  border-radius: 50%;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0);
+  transition: all 0.5s ease;
+}
+
+.hub-tab:active::after {
+  width: 200%;
+  height: 200%;
+  opacity: 0.1;
+  transform: translate(-50%, -50%) scale(1);
+  transition: 0s;
 }
 
 .hub-tab.active {
@@ -135,9 +161,9 @@ onMounted(async () => {
   width: calc(50% - 6px);
   background: #FEE715;
   border-radius: 12px;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 1;
-  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.4);
+  box-shadow: 0 4px 20px rgba(254, 231, 21, 0.4);
 }
 
 .fade-enter-active,
diff --git a/frontend/src/views/transporte/TaxisLocales.vue b/frontend/src/views/transporte/TaxisLocales.vue
index 6b1533b..dc35cc1 100644
--- a/frontend/src/views/transporte/TaxisLocales.vue
+++ b/frontend/src/views/transporte/TaxisLocales.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
 import { useTaxiStore } from '@/stores/taxi'
 import { analyticsService } from '@/services/analyticsService'
 import type { Taxi } from '@/types'
@@ -10,7 +9,6 @@ import { getImageUrl } from '@/utils/imageUrl'
 
 const { t } = useI18n()
 const taxiStore = useTaxiStore()
-const router = useRouter()
 
 const selectedZone = ref('all')
 const selectedShift = ref('all')
@@ -58,29 +56,38 @@ function getShiftLabel(shift: string) {
 <template>
   <div class="taxis-locales">
 <div class="filters-container">
-        <div class="filter-card">
+        <div class="filter-card glass-effect">
           <div class="selectors-side">
-            <div class="select-group">
-              <span class="material-icons">location_on</span>
-              <select v-model="selectedZone">
-                <option value="all">{{ t('taxi.allZones') }}</option>
-                <option v-for="zone in corregimientos.filter(z => z !== 'all')" :key="zone" :value="zone">{{ zone }}</option>
-              </select>
+            <div class="select-group-premium">
+              <div class="group-icon">
+                <span class="material-icons">location_on</span>
+              </div>
+              <div class="group-content">
+                <label>{{ t('taxi.allZones') }}</label>
+                <select v-model="selectedZone">
+                  <option value="all">{{ t('taxi.allZones') }}</option>
+                  <option v-for="zone in corregimientos.filter(z => z !== 'all')" :key="zone" :value="zone">{{ zone }}</option>
+                </select>
+              </div>
             </div>
-            <div class="select-group">
-              <span class="material-icons">schedule</span>
-              <select v-model="selectedShift">
-                <option value="all">{{ t('taxi.shift') }}</option>
-                <option v-for="s in shifts.filter(x => x !== 'all')" :key="s" :value="s">{{ getShiftLabel(s) }}</option>
-              </select>
+            <div class="select-group-premium">
+              <div class="group-icon">
+                <span class="material-icons">schedule</span>
+              </div>
+              <div class="group-content">
+                <label>{{ t('taxi.shift') }}</label>
+                <select v-model="selectedShift">
+                  <option value="all">{{ t('taxi.shift') }}</option>
+                  <option v-for="s in shifts.filter(x => x !== 'all')" :key="s" :value="s">{{ getShiftLabel(s) }}</option>
+                </select>
+              </div>
             </div>
           </div>
           <div class="lang-toggle-side">
-            <span class="lang-text">{{ t('taxi.englishLabel') }}</span>
-            <label class="checkbox-container">
-              <input type="checkbox" v-model="onlyEnglish">
-              <span class="checkmark"></span>
-            </label>
+            <div class="lang-pill" :class="{ 'lang-pill--active': onlyEnglish }" @click="onlyEnglish = !onlyEnglish">
+              <span class="material-icons">{{ onlyEnglish ? 'check_circle' : 'language' }}</span>
+              <span>English</span>
+            </div>
           </div>
         </div>
       </div>
@@ -100,23 +107,29 @@ function getShiftLabel(shift: string) {
       </div>
       
       <div v-else class="taxis-grid">
-        <div v-for="taxi in filteredTaxis" :key="taxi.id" v-memo="[taxi.id]" class="taxi-card-new">
+        <div v-for="taxi in filteredTaxis" :key="taxi.id" v-memo="[taxi.id]" class="taxi-card-new glass-effect">
           <div class="card-top">
-            <div class="driver-avatar">
-              <img 
-                :src="getImageUrl(taxi.image_url, 'taxi')" 
-                loading="lazy" 
-                decoding="async"
-                alt="Driver"
-                @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'taxi')"
-              >
+            <div class="driver-avatar-wrap">
+              <div class="driver-avatar">
+                <img 
+                  :src="getImageUrl(taxi.image_url, 'taxi')" 
+                  loading="lazy" 
+                  decoding="async"
+                  alt="Driver"
+                  @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'taxi')"
+                >
+              </div>
+              <div class="driver-status" :class="{ 'status-online': taxi.shift === 'dia' || taxi.shift === 'tarde' }"></div>
             </div>
             <div class="driver-info">
-              <h3>{{ taxi.owner_name }}</h3>
-              <div class="rating-stars">
-                <span v-for="i in 5" :key="i" class="material-icons">
-                  {{ i <= (taxi.rating || 5) ? 'star' : 'star_border' }}
-                </span>
+              <h3 class="driver-name">{{ taxi.owner_name }}</h3>
+              <div class="driver-meta">
+                <div class="rating-stars">
+                  <span class="material-icons star-filled">star</span>
+                  <span class="rating-value">{{ (taxi.rating || 5).toFixed(1) }}</span>
+                </div>
+                <span class="meta-dot">·</span>
+                <span class="shift-badge">{{ getShiftLabel(taxi.shift || '') }}</span>
               </div>
             </div>
             <div class="fav-icon-wrapper">
@@ -129,18 +142,25 @@ function getShiftLabel(shift: string) {
             </div>
           </div>
 
-          <div class="card-mid">
-            <div class="contact-info">
-              <span class="material-icons ph-icon">phone</span>
-              <span class="phone-num"> {{ taxi.phone_number }} </span>
+          <div class="card-details">
+            <div class="detail-item" v-if="taxi.corregimiento">
+              <span class="material-icons detail-icon">location_on</span>
+              <span class="detail-text">{{ taxi.corregimiento }}</span>
+            </div>
+            <div class="detail-item" v-if="taxi.english_speaking">
+              <span class="material-icons detail-icon">g_translate</span>
+              <span class="detail-text">{{ t('taxi.englishLabel') }}</span>
             </div>
           </div>
 
-          <div class="card-bottom">
-            <button class="call-btn-main" @click="handleCall(taxi)">
+          <div class="card-actions">
+            <a :href="`tel:${taxi.phone_number}`" class="call-btn-premium" @click="handleCall(taxi)">
               <span class="material-icons">phone_in_talk</span>
-              {{ t('taxi.callNow') }}
-            </button>
+              <div class="btn-content">
+                <span class="btn-label">{{ t('taxi.callNow') }}</span>
+                <span class="btn-subtext">{{ taxi.phone_number }}</span>
+              </div>
+            </a>
           </div>
         </div>
 
@@ -154,764 +174,366 @@ function getShiftLabel(shift: string) {
 </template>
 
 <style scoped>
-
-/* Transport Hub Tabs */
-.hub-tabs {
-  margin-top: 24px;
-  display: flex;
-  justify-content: center;
-}
-
-.tabs-background {
-  background: var(--bg-secondary);
-  padding: 4px;
-  border-radius: 16px;
-  display: flex;
-  position: relative;
-  border: 1px solid var(--border-color);
-  width: 100%;
-  max-width: 400px;
-}
-
-.hub-tab {
-  flex: 1;
-  padding: 12px;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-weight: 700;
-  font-size: 0.9rem;
-  cursor: pointer;
-  z-index: 2;
-  transition: color 0.3s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.hub-tab.active {
-  color: #101820 !important;
-}
-
-.hub-tab .material-icons {
-  font-size: 18px;
-}
-
-.tab-slider {
-  position: absolute;
-  top: 4px;
-  bottom: 4px;
-  width: calc(50% - 6px);
-  background: #FEE715;
-  border-radius: 12px;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 1;
-  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.4);
-}
-.retry-btn {
-  margin-top: 1rem;
-  padding: 10px 20px;
-  background: var(--active-color);
-  color: #101820;
-  border: none;
-  border-radius: 12px;
-  font-weight: 800;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: transform 0.2s;
-}
-.retry-btn:active {
-  transform: scale(0.95);
-}
-.retry-btn .material-icons {
-  font-size: 18px;
-}
-
-/* =============================================
-   SHUTTLE CARDS — DISEÑO PREMIUM CON FOTO
-   ============================================= */
-
-/* Backdrop modal al expandir */
-.shuttle-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.65);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  z-index: 50;
-  animation: fadeIn 0.25s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-/* Grid de cards */
-.shuttles-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 16px;
-  padding: 20px 16px;
-  position: relative;
-}
-
-/* ---- La tarjeta base ---- */
-.shuttle-card {
-  border-radius: 20px;
-  border: 1px solid rgba(255,255,255,0.12);
-  position: relative;
-  min-height: 170px;
-  display: flex;
-  flex-direction: column;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  cursor: pointer;
-  overflow: hidden;
-  background: linear-gradient(135deg, #0d1b2a 0%, #1a2a40 50%, #101820 100%);
-}
-
-.shuttle-card-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: 0;
-}
-
-/* Overlay oscuro base (compacto) */
-.shuttle-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.93) 0%,
-    rgba(0, 0, 0, 0.65) 55%,
-    rgba(0, 0, 0, 0.30) 100%
-  );
-  z-index: 1;
-  transition: background 0.4s ease;
-}
-
-/* Cuando está expandida, reforzar el overlay inferior */
-.shuttle-card.expanded {
-  border-color: #FEE715;
-  box-shadow: 0 0 0 2px #FEE715, 0 24px 50px rgba(0, 0, 0, 0.7);
-  z-index: 60;
-  position: relative;
-}
-
-.shuttle-card.expanded::before {
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.97) 0%,
-    rgba(0, 0, 0, 0.80) 45%,
-    rgba(0, 0, 0, 0.40) 100%
-  );
-}
-
-/* Todos los hijos van sobre el overlay */
-.shuttle-main-info,
-.shuttle-details {
-  position: relative;
-  z-index: 2;
-  padding: 18px 20px;
-}
-
-.shuttle-main-info {
-  padding-bottom: 14px;
-}
-
-/* Fila superior: badge empresa + precio */
-.shuttle-header-mini {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 14px;
-}
-
-.company-badge {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background: rgba(0, 0, 0, 0.60);
-  color: #FEE715;
-  padding: 5px 11px;
-  border-radius: 10px;
-  font-size: 0.75rem;
-  font-weight: 800;
-  border: 1px solid rgba(254, 231, 21, 0.45);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
-  letter-spacing: 0.02em;
-}
-
-.company-badge .material-icons {
-  font-size: 14px;
-}
-
-.price-pill {
-  background: #FEE715;
-  color: #101820;
-  padding: 5px 11px;
-  border-radius: 10px;
-  font-weight: 900;
-  font-size: 1rem;
-  display: flex;
-  align-items: baseline;
-  gap: 1px;
-  box-shadow: 0 4px 12px rgba(254, 231, 21, 0.35);
-}
-
-.price-pill .currency {
-  font-size: 0.8rem;
-  font-weight: 900;
-}
-
-.price-pill .amount {
-  font-size: 1rem;
-  font-weight: 900;
-}
-
-.price-pill-label {
-  font-size: 0.7rem;
-  font-weight: 700;
-  margin-left: 1px;
-  opacity: 0.75;
-}
-
-/* Ruta origen → destino */
-.shuttle-route-compact {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 1.1rem;
-  font-weight: 900;
-  color: #ffffff;
-  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.6);
-  margin-bottom: 14px;
-  letter-spacing: -0.01em;
-}
-
-.route-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.route-arrow {
-  color: #FEE715;
-  font-size: 20px;
-  flex-shrink: 0;
-  filter: drop-shadow(0 0 4px rgba(254,231,21,0.6));
-}
-
-/* Fila inferior: tipo vehículo + expand arrow */
-.shuttle-tags {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.vehicle-tag-mini {
-  padding: 5px 10px;
-  background: rgba(255, 255, 255, 0.12);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  border-radius: 8px;
-  font-size: 0.72rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: #ffffff;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
-  border: 1px solid rgba(255, 255, 255, 0.20);
-}
-
-.vehicle-tag-mini .material-icons {
-  font-size: 15px;
-  color: #FEE715;
-}
-
-.expand-indicator {
-  color: #FEE715;
-  display: flex;
-  align-items: center;
-  filter: drop-shadow(0 0 4px rgba(254,231,21,0.5));
-}
-
-/* =============================================
-   CONTENIDO EXPANDIDO
-   ============================================= */
-.shuttle-details {
-  padding-top: 0;
-  animation: slideDown 0.3s ease-out;
-}
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-/* Separador dashed */
-.shuttle-separator {
-  height: 1px;
-  background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent);
-  margin: 0 20px 16px;
-}
-
-.shuttle-body {
-  padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  margin-bottom: 20px;
-}
-
-.info-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.info-row .material-icons {
-  color: #FEE715;
-  font-size: 22px;
-  flex-shrink: 0;
-  filter: drop-shadow(0 0 4px rgba(254,231,21,0.4));
-}
-
-.info-row .label {
-  font-size: 0.65rem;
-  color: rgba(255, 255, 255, 0.55);
-  margin: 0;
-  text-transform: uppercase;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-}
-
-.info-row .value {
-  font-size: 0.95rem;
-  color: #ffffff;
-  margin: 2px 0 0;
-  font-weight: 700;
-  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
-}
-
-/* ---- Bloque de precios ---- */
-.price-block {
-  padding: 14px 20px;
-  background: rgba(0, 0, 0, 0.40);
-  border-top: 1px solid rgba(255,255,255,0.08);
-  border-bottom: 1px solid rgba(255,255,255,0.08);
-  margin-bottom: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.price-row-main {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-
-.price-amount-big {
-  font-size: 2rem;
-  font-weight: 900;
-  color: #FEE715;
-  text-shadow: 0 0 20px rgba(254,231,21,0.4), 0 2px 8px rgba(0,0,0,0.9);
-  line-height: 1;
-}
-
-.price-label-big {
-  font-size: 0.85rem;
-  color: rgba(255,255,255,0.75);
-  font-weight: 600;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
-}
-
-.price-row-secondary {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.price-icon-secondary {
-  font-size: 16px;
-  color: rgba(255,255,255,0.55);
-}
-
-.price-amount-secondary {
-  font-size: 1rem;
-  font-weight: 800;
-  color: rgba(255,255,255,0.85);
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
-}
-
-.price-label-secondary {
-  font-size: 0.78rem;
-  color: rgba(255,255,255,0.55);
-  font-weight: 600;
-}
-
-/* ---- Botones de contacto ---- */
-.contact-buttons {
-  display: flex;
-  gap: 10px;
-  padding: 0 20px 20px;
-}
-
-.contact-btn {
-  flex: 1;
-  height: 52px;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-size: 0.95rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  text-decoration: none;
-  border: none;
-  letter-spacing: 0.01em;
-}
-
-.btn-call {
-  background: rgba(255, 255, 255, 0.10);
-  color: #ffffff;
-  border: 1.5px solid rgba(255, 255, 255, 0.30);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
-}
-
-.btn-call:hover {
-  background: rgba(255, 255, 255, 0.18);
-  border-color: rgba(255, 255, 255, 0.50);
-  transform: translateY(-2px);
-}
-
-.btn-call .material-icons { font-size: 20px; }
-
-.btn-whatsapp {
-  background: #25d366;
-  color: #ffffff;
-  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
-}
-
-.btn-whatsapp:hover {
-  background: #1ebe5a;
-  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.50);
-  transform: translateY(-2px);
-}
-
-.btn-whatsapp .material-icons { font-size: 20px; }
-
-/* Original Styles */
-.taxi-view {
-  min-height: 100vh;
-  position: relative;
-  padding: 0 0 150px;
-}
-
-/* Tarjetas claras y elegantes */
-.filter-card,
-.taxi-card-new {
-  background: var(--card-bg);
-  border: 1px solid var(--border-color);
-}
-
-.header-main {
-    padding: 24px 16px;
-    text-align: center;
-}
-
-.brand-title {
-    color: var(--header-text);
-    font-size: 1.5rem;
-    font-weight: 800;
-    margin: 0;
-}
-
+   FILTROS PREMIUM
+ ═══════════════════════════════════════════ */
 .filters-container {
-    padding: 0 16px 24px;
+  padding: 0 1rem 1.5rem;
 }
 
 .filter-card {
-    background: var(--card-bg);
-    border-radius: 20px;
-    padding: 16px;
-    display: flex;
-    justify-content: space-between;
+  border-radius: 1.5rem;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  background: var(--card-bg);
+}
+
+@media (min-width: 640px) {
+  .filter-card {
+    flex-direction: row;
     align-items: center;
-    border: 1px solid var(--border-color);
-    box-shadow: 0 2px 8px var(--shadow);
+    justify-content: space-between;
+  }
 }
 
 .selectors-side {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
 }
 
-.select-group {
-    background: var(--bg-secondary);
-    border: 1.5px solid #fee715;
-    border-radius: 12px;
-    padding: 8px 12px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
+@media (min-width: 480px) {
+  .selectors-side {
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
-.select-group .material-icons {
-    color: #fee715;
-    font-size: 20px;
+.select-group-premium {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  padding: 0.625rem 0.875rem;
+  transition: all 0.3s ease;
 }
 
-.select-group select {
-    background: transparent;
-    border: none;
-    color: var(--text-primary);
-    width: 100%;
-    font-size: 0.9rem;
-    outline: none;
+.select-group-premium:focus-within {
+  border-color: var(--active-color);
+  box-shadow: 0 0 0 3px rgba(254, 231, 21, 0.1);
 }
 
-.select-group select option {
-    background: var(--card-bg);
-    color: var(--text-primary);
+.group-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--bg-secondary);
+  border-radius: 0.75rem;
+  color: var(--active-color);
 }
 
-.lang-toggle-side {
-    padding-left: 20px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
+.group-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-.lang-text {
-    color: var(--text-primary);
-    font-weight: 700;
-    font-size: 0.9rem;
+.group-content label {
+  font-size: 0.65rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+  line-height: 1;
+  margin-bottom: 0.25rem;
 }
 
-/* Custom Checkbox */
-.checkbox-container {
-    display: block;
-    position: relative;
-    width: 28px;
-    height: 28px;
-    cursor: pointer;
+.group-content select {
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  font-weight: 700;
+  font-size: 0.9375rem;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  width: 100%;
 }
 
-.checkbox-container input {
-    visibility: hidden;
-    width: 0;
-    height: 0;
+.lang-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  font-weight: 700;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
-.checkmark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 28px;
-    width: 28px;
-    background-color: transparent;
-    border: 2px solid #fee715;
-    border-radius: 4px;
-    transition: all 0.2s ease;
+.lang-pill--active {
+  background: rgba(254, 231, 21, 0.1);
+  border-color: var(--active-color);
+  color: var(--active-color);
 }
 
-.checkbox-container input:checked ~ .checkmark {
-    background-color: #fee715;
-}
-
-.checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-}
-
-.checkbox-container input:checked ~ .checkmark:after {
-    display: block;
-}
-
-.checkbox-container .checkmark:after {
-    left: 9px;
-    top: 5px;
-    width: 6px;
-    height: 12px;
-    border: solid #101820;
-    border-width: 0 3px 3px 0;
-    transform: rotate(45deg);
-}
-
-/* Grid & Cards */
+/* ═══════════════════════════════════════════
+   GRID Y TARJETAS PREMIUM
+ ═══════════════════════════════════════════ */
 .taxis-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-    gap: 24px;
-    padding: 24px 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.5rem;
+  padding: 1.5rem 1rem;
 }
 
 .taxi-card-new {
-    background: var(--card-bg);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    border-radius: 20px;
-    padding: 16px;
-    border: 1px solid var(--border-color);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+  border-radius: 1.5rem;
+  padding: 1.25rem;
+  border: 1px solid var(--border-color);
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  background: var(--card-bg);
 }
 
 .taxi-card-new:hover {
-    transform: translateY(-8px);
-    border-color: var(--active-color);
-    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+  transform: translateY(-8px);
+  border-color: var(--active-color);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }
 
 .card-top {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.driver-avatar-wrap {
+  position: relative;
+  flex-shrink: 0;
 }
 
 .driver-avatar {
-    width: 44px;
-    height: 44px;
-    border-radius: 12px;
-    overflow: hidden;
-    background: var(--bg-secondary);
-    border: 2px solid var(--border-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 1rem;
+  overflow: hidden;
+  background: var(--bg-secondary);
+  border: 2px solid var(--border-color);
 }
 
 .driver-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.driver-info h3 {
-    margin: 0 0 2px;
-    color: var(--text-primary);
-    font-size: 1rem;
-    font-weight: 800;
-    letter-spacing: -0.01em;
+.driver-status {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #94a3b8;
+  border: 3px solid var(--card-bg);
+}
+
+.status-online {
+  background: #22c55e;
+}
+
+.driver-info {
+  flex: 1;
+}
+
+.driver-name {
+  margin: 0 0 0.25rem;
+  font-size: 1.125rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.driver-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .rating-stars {
-    display: flex;
-    gap: 4px;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
-.rating-stars .material-icons {
-    color: var(--active-color);
-    font-size: 18px;
-    filter: drop-shadow(0 0 5px rgba(254, 231, 21, 0.5));
+.star-filled {
+  color: var(--active-color);
+  font-size: 1rem;
 }
 
-.fav-icon-wrapper {
-    position: absolute;
-    top: -4px;
-    right: -4px;
+.rating-value {
+  font-size: 0.875rem;
+  font-weight: 800;
+  color: var(--text-primary);
 }
 
-.card-mid {
-    padding: 12px 16px;
-    background: var(--bg-secondary);
-    border-radius: 16px;
-    border: 1px solid var(--border-color);
+.meta-dot {
+  color: var(--text-secondary);
+  opacity: 0.5;
 }
 
-.contact-info {
-    display: flex;
-    align-items: center;
-    gap: 12px;
+.shift-badge {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  text-transform: capitalize;
 }
 
-.ph-icon {
-    color: var(--active-color);
-    font-size: 20px;
+.card-details {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
 }
 
-.phone-num {
-    color: var(--text-primary);
-    font-size: 1rem;
-    font-weight: 700;
+.detail-item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  background: var(--bg-secondary);
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-secondary);
 }
 
-.call-btn-main {
-    width: 100%;
-    padding: 18px;
-    background: linear-gradient(135deg, #fee715 0%, #facc15 100%);
-    color: #101820;
-    border: none;
-    border-radius: 16px;
-    font-size: 1rem;
-    font-weight: 900;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 10px 20px rgba(254, 231, 21, 0.15);
+.detail-icon {
+  font-size: 1rem;
+  color: var(--active-color);
 }
 
-.call-btn-main:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 15px 30px rgba(254, 231, 21, 0.25);
+.card-actions {
+  margin-top: auto;
 }
 
-.state-container, .empty-state {
-    padding: 100px 24px;
-    text-align: center;
-    background: var(--header-bg);
-    border-radius: 32px;
-    border: 2px dashed var(--border-color);
+.call-btn-premium {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+  padding: 0.75rem 1.25rem;
+  background: var(--active-color);
+  color: #101820;
+  border-radius: 1.125rem;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.2);
 }
 
-.state-container .material-icons, .empty-state .material-icons {
-    font-size: 64px;
-    margin-bottom: 24px;
-    color: var(--active-color);
-    opacity: 0.5;
+.call-btn-premium:hover {
+  transform: scale(1.02);
+  box-shadow: 0 6px 20px rgba(254, 231, 21, 0.35);
+}
+
+.call-btn-premium:active {
+  transform: scale(0.98);
+}
+
+.call-btn-premium .material-icons {
+  font-size: 1.5rem;
+}
+
+.btn-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.btn-label {
+  font-size: 0.9375rem;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.btn-subtext {
+  font-size: 0.75rem;
+  font-weight: 700;
+  opacity: 0.7;
+}
+
+.empty-state {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 4rem 2rem;
+  color: var(--text-secondary);
+}
+
+.empty-state .material-icons {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.empty-state p {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.state-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  gap: 1rem;
 }
 
 .spin {
-    animation: spin 1s linear infinite;
+  animation: spin 1s infinite linear;
+  font-size: 3rem;
+  color: var(--active-color);
 }
 
 @keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.retry-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--active-color);
+  color: #101820;
+  border: none;
+  border-radius: 99px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.retry-btn:hover {
+  transform: scale(1.05);
 }
 
 @media (max-width: 600px) {
-    .taxis-grid, .shuttles-grid {
+    .taxis-grid {
         grid-template-columns: 1fr;
     }
 }
-
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/transporte/ViajesTuristicos.vue b/frontend/src/views/transporte/ViajesTuristicos.vue
index 2e8bb1a..848c536 100644
--- a/frontend/src/views/transporte/ViajesTuristicos.vue
+++ b/frontend/src/views/transporte/ViajesTuristicos.vue
@@ -10,29 +10,18 @@ const { t } = useI18n()
 const shuttleStore = useShuttleStore()
 const router = useRouter()
 
-const shuttleRouteFilter = ref('all')
+const shuttleCategoryFilter = ref('all')
 const shuttleTypeFilter = ref('all')
-const shuttleRefs = ref<Record<string, any>>({})
-
-const setShuttleRef = (el: any, id: string) => {
-  if (el) shuttleRefs.value[id] = el
-}
-
-const shuttleRoutes = computed(() => {
-  const routes = shuttleStore.shuttles.map(s => `${s.origin} - ${s.destination}`)
-  return [...new Set(routes)].sort()
-})
 
 const filteredShuttles = computed(() => {
   return shuttleStore.shuttles.filter(shuttle => {
-    const routeName = `${shuttle.origin} - ${shuttle.destination}`
-    const matchesRoute = shuttleRouteFilter.value === 'all' || routeName === shuttleRouteFilter.value
+    const matchesCategory = shuttleCategoryFilter.value === 'all' || shuttle.category === shuttleCategoryFilter.value
     const matchesType = shuttleTypeFilter.value === 'all' || shuttle.trip_type === shuttleTypeFilter.value
-    return matchesRoute && matchesType
+    return matchesCategory && matchesType
   })
 })
 
-const verDetalle = (shuttleId: number) => {
+const verDetalle = (shuttleId: string) => {
     router.push({
         name: 'ShuttleDetalle',
         params: { id: shuttleId }
@@ -46,20 +35,35 @@ onMounted(async () => {
     }
 })
 </script>
+
 <template>
   <div class="viajes-turisticos">
-<div class="filters-container">
-        <div class="filter-card">
-          <div class="selectors-side">
-            <div class="select-group">
+    <!-- FILTROS PREMIUM -->
+    <div class="filters-container">
+      <div class="filter-card glass-effect">
+        <div class="selectors-side">
+          <!-- Ruta Select -->
+          <div class="select-group-premium">
+            <div class="group-icon">
               <span class="material-icons">route</span>
-              <select v-model="shuttleRouteFilter">
-                <option value="all">{{ t('shuttle.allRoutes') }}</option>
-                <option v-for="route in shuttleRoutes" :key="route" :value="route">{{ route }}</option>
+            </div>
+            <div class="group-content">
+              <label>{{ t('shuttle.category') || 'Categoría' }}</label>
+              <select v-model="shuttleCategoryFilter">
+                <option value="all">{{ t('shuttle.allRoutes') || 'Todas las rutas' }}</option>
+                <option value="local">Local</option>
+                <option value="interprovincial">Interprovincial</option>
               </select>
             </div>
-            <div class="select-group">
+          </div>
+
+          <!-- Tipo de Viaje Select -->
+          <div class="select-group-premium">
+            <div class="group-icon">
               <span class="material-icons">sync_alt</span>
+            </div>
+            <div class="group-content">
+              <label>{{ t('shuttle.tripType') }}</label>
               <select v-model="shuttleTypeFilter">
                 <option value="all">{{ t('shuttle.tripType') }}</option>
                 <option value="one_way">{{ t('shuttle.oneWay') }}</option>
@@ -70,832 +74,359 @@ onMounted(async () => {
           </div>
         </div>
       </div>
+    </div>
 
-      <div v-if="shuttleStore.isLoading" class="state-container">
-        <span class="material-icons spin">refresh</span>
-        <p>{{ t('taxi.loadingTaxis') }}</p>
-      </div>
+    <!-- ESTADOS -->
+    <div v-if="shuttleStore.isLoading" class="state-container">
+      <span class="material-icons spin">refresh</span>
+      <p>{{ t('taxi.loadingTaxis') }}</p>
+    </div>
 
-      <div v-else-if="shuttleStore.error" class="state-container">
-        <span class="material-icons">error_outline</span>
-        <p>{{ shuttleStore.error }}</p>
-      </div>
+    <div v-else-if="shuttleStore.error" class="state-container">
+      <span class="material-icons">error_outline</span>
+      <p>{{ shuttleStore.error }}</p>
+      <button class="retry-btn" @click="shuttleStore.loadShuttles()">
+        <span class="material-icons">refresh</span>
+        {{ t('common.retry') || 'Reintentar' }}
+      </button>
+    </div>
 
-      <div v-else class="shuttles-grid">
-        <!-- OVERLAY BACKDROP when a card is expanded -->
-        <div 
-          v-for="shuttle in filteredShuttles" 
-          :key="shuttle.id" 
-          v-memo="[shuttle.id]"
-          :ref="el => setShuttleRef(el, shuttle.id)"
-          class="shuttle-card"
-          @click="() => { 
-            analyticsService.logEvent({ event_name: 'shuttle_view_detailed', item_id: shuttle.id });
-            verDetalle(shuttle.id);
-          }"
-        >
+    <!-- GRID PREMIUM -->
+    <div v-else class="shuttles-grid">
+      <div 
+        v-for="shuttle in filteredShuttles" 
+        :key="shuttle.id" 
+        v-memo="[shuttle.id]"
+        class="shuttle-card-premium glass-effect"
+        @click="verDetalle(shuttle.id)"
+      >
+        <div class="card-image-wrap">
           <img 
             :src="getImageUrl(shuttle.image_url, 'shuttle')" 
             loading="lazy" 
             decoding="async"
-            class="shuttle-card-bg"
+            class="shuttle-img"
+            alt="Shuttle"
             @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
           />
-          <!-- Collapsed info (always visible) -->
-          <div class="shuttle-main-info">
-            <div class="shuttle-header-mini">
-              <div class="company-badge" v-if="shuttle.company_name">
-                <span class="material-icons">business</span>
-                {{ shuttle.company_name }}
-              </div>
-            </div> <!-- Close shuttle-header-mini -->
-
-            <div class="shuttle-route-compact" v-if="shuttle.origin && shuttle.destination">
-              <span class="route-text">{{ shuttle.origin }}</span>
-              <span class="material-icons route-arrow">east</span>
-              <span class="route-text">{{ shuttle.destination }}</span>
-            </div>
-
-            <div class="shuttle-tags">
-              <div class="vehicle-tag-mini">
-                <span class="material-icons">directions_bus</span>
-                {{ shuttle.vehicle_type }}
-              </div>
-              <div class="expand-indicator">
-                <span class="material-icons">chevron_right</span>
-              </div>
-            </div>
-          </div> <!-- Close shuttle-main-info -->
+          <div class="company-tag" v-if="shuttle.company_name">
+            <span class="material-icons">business</span>
+            {{ shuttle.company_name }}
+          </div>
         </div>
 
-        <div v-if="filteredShuttles.length === 0" class="empty-state">
-          <span class="material-icons">directions_bus_filled</span>
-          <p>{{ t('shuttle.noShuttles') }}</p>
+        <div class="card-body-premium">
+          <div class="route-header">
+            <div class="route-main">
+              <span class="location-name">{{ shuttle.origin }}</span>
+              <span class="material-icons separator-icon">east</span>
+              <span class="location-name">{{ shuttle.destination }}</span>
+            </div>
+          </div>
+
+          <div class="card-meta">
+            <div class="meta-tag">
+              <span class="material-icons">directions_bus</span>
+              <span>{{ shuttle.vehicle_type }}</span>
+            </div>
+            <div class="meta-tag" v-if="shuttle.estimated_duration">
+              <span class="material-icons">schedule</span>
+              <span>{{ shuttle.estimated_duration }}</span>
+            </div>
+          </div>
+
+          <div class="card-footer-premium">
+            <div class="price-container">
+              <span class="price-label">{{ t('shuttle.from') || 'Desde' }}</span>
+              <span class="price-val">${{ shuttle.price_per_person }}</span>
+            </div>
+            <button class="view-details-btn">
+              <span class="material-icons">chevron_right</span>
+            </button>
+          </div>
         </div>
       </div>
-    
+
+      <!-- EMPTY STATE -->
+      <div v-if="filteredShuttles.length === 0" class="empty-state">
+        <span class="material-icons">directions_bus_filled</span>
+        <p>{{ t('shuttle.noShuttles') }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
-
-/* Transport Hub Tabs */
-.hub-tabs {
-  margin-top: 24px;
-  display: flex;
-  justify-content: center;
-}
-
-.tabs-background {
-  background: var(--bg-secondary);
-  padding: 4px;
-  border-radius: 16px;
-  display: flex;
-  position: relative;
-  border: 1px solid var(--border-color);
-  width: 100%;
-  max-width: 400px;
-}
-
-.hub-tab {
-  flex: 1;
-  padding: 12px;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-weight: 700;
-  font-size: 0.9rem;
-  cursor: pointer;
-  z-index: 2;
-  transition: color 0.3s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.hub-tab.active {
-  color: #101820 !important;
-}
-
-.hub-tab .material-icons {
-  font-size: 18px;
-}
-
-.tab-slider {
-  position: absolute;
-  top: 4px;
-  bottom: 4px;
-  width: calc(50% - 6px);
-  background: #FEE715;
-  border-radius: 12px;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 1;
-  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.4);
-}
-.retry-btn {
-  margin-top: 1rem;
-  padding: 10px 20px;
-  background: var(--active-color);
-  color: #101820;
-  border: none;
-  border-radius: 12px;
-  font-weight: 800;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: transform 0.2s;
-}
-.retry-btn:active {
-  transform: scale(0.95);
-}
-.retry-btn .material-icons {
-  font-size: 18px;
-}
-
-/* =============================================
-   SHUTTLE CARDS — DISEÑO PREMIUM CON FOTO
-   ============================================= */
-
-/* Backdrop modal al expandir */
-.shuttle-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.65);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  z-index: 50;
-  animation: fadeIn 0.25s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-/* Grid de cards */
-.shuttles-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 16px;
-  padding: 20px 16px;
-  position: relative;
-}
-
-/* ---- La tarjeta base ---- */
-.shuttle-card {
-  border-radius: 20px;
-  border: 1px solid rgba(255,255,255,0.12);
-  position: relative;
-  min-height: 170px;
-  display: flex;
-  flex-direction: column;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  cursor: pointer;
-  overflow: hidden;
-  background: linear-gradient(135deg, #0d1b2a 0%, #1a2a40 50%, #101820 100%);
-}
-
-.shuttle-card-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: 0;
-}
-
-/* Overlay oscuro base (compacto) */
-.shuttle-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.93) 0%,
-    rgba(0, 0, 0, 0.65) 55%,
-    rgba(0, 0, 0, 0.30) 100%
-  );
-  z-index: 1;
-  transition: background 0.4s ease;
-}
-
-/* Cuando está expandida, reforzar el overlay inferior */
-.shuttle-card.expanded {
-  border-color: #FEE715;
-  box-shadow: 0 0 0 2px #FEE715, 0 24px 50px rgba(0, 0, 0, 0.7);
-  z-index: 60;
-  position: relative;
-}
-
-.shuttle-card.expanded::before {
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.97) 0%,
-    rgba(0, 0, 0, 0.80) 45%,
-    rgba(0, 0, 0, 0.40) 100%
-  );
-}
-
-/* Todos los hijos van sobre el overlay */
-.shuttle-main-info,
-.shuttle-details {
-  position: relative;
-  z-index: 2;
-  padding: 18px 20px;
-}
-
-.shuttle-main-info {
-  padding-bottom: 14px;
-}
-
-/* Fila superior: badge empresa + precio */
-.shuttle-header-mini {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 14px;
-}
-
-.company-badge {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background: rgba(0, 0, 0, 0.60);
-  color: #FEE715;
-  padding: 5px 11px;
-  border-radius: 10px;
-  font-size: 0.75rem;
-  font-weight: 800;
-  border: 1px solid rgba(254, 231, 21, 0.45);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
-  letter-spacing: 0.02em;
-}
-
-.company-badge .material-icons {
-  font-size: 14px;
-}
-
-.price-pill {
-  background: #FEE715;
-  color: #101820;
-  padding: 5px 11px;
-  border-radius: 10px;
-  font-weight: 900;
-  font-size: 1rem;
-  display: flex;
-  align-items: baseline;
-  gap: 1px;
-  box-shadow: 0 4px 12px rgba(254, 231, 21, 0.35);
-}
-
-.price-pill .currency {
-  font-size: 0.8rem;
-  font-weight: 900;
-}
-
-.price-pill .amount {
-  font-size: 1rem;
-  font-weight: 900;
-}
-
-.price-pill-label {
-  font-size: 0.7rem;
-  font-weight: 700;
-  margin-left: 1px;
-  opacity: 0.75;
-}
-
-/* Ruta origen → destino */
-.shuttle-route-compact {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 1.1rem;
-  font-weight: 900;
-  color: #ffffff;
-  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.6);
-  margin-bottom: 14px;
-  letter-spacing: -0.01em;
-}
-
-.route-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.route-arrow {
-  color: #FEE715;
-  font-size: 20px;
-  flex-shrink: 0;
-  filter: drop-shadow(0 0 4px rgba(254,231,21,0.6));
-}
-
-/* Fila inferior: tipo vehículo + expand arrow */
-.shuttle-tags {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.vehicle-tag-mini {
-  padding: 5px 10px;
-  background: rgba(255, 255, 255, 0.12);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  border-radius: 8px;
-  font-size: 0.72rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: #ffffff;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
-  border: 1px solid rgba(255, 255, 255, 0.20);
-}
-
-.vehicle-tag-mini .material-icons {
-  font-size: 15px;
-  color: #FEE715;
-}
-
-.expand-indicator {
-  color: #FEE715;
-  display: flex;
-  align-items: center;
-  filter: drop-shadow(0 0 4px rgba(254,231,21,0.5));
-}
-
-/* =============================================
-   CONTENIDO EXPANDIDO
-   ============================================= */
-.shuttle-details {
-  padding-top: 0;
-  animation: slideDown 0.3s ease-out;
-}
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-/* Separador dashed */
-.shuttle-separator {
-  height: 1px;
-  background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent);
-  margin: 0 20px 16px;
-}
-
-.shuttle-body {
-  padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  margin-bottom: 20px;
-}
-
-.info-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.info-row .material-icons {
-  color: #FEE715;
-  font-size: 22px;
-  flex-shrink: 0;
-  filter: drop-shadow(0 0 4px rgba(254,231,21,0.4));
-}
-
-.info-row .label {
-  font-size: 0.65rem;
-  color: rgba(255, 255, 255, 0.55);
-  margin: 0;
-  text-transform: uppercase;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-}
-
-.info-row .value {
-  font-size: 0.95rem;
-  color: #ffffff;
-  margin: 2px 0 0;
-  font-weight: 700;
-  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
-}
-
-/* ---- Bloque de precios ---- */
-.price-block {
-  padding: 14px 20px;
-  background: rgba(0, 0, 0, 0.40);
-  border-top: 1px solid rgba(255,255,255,0.08);
-  border-bottom: 1px solid rgba(255,255,255,0.08);
-  margin-bottom: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.price-row-main {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-
-.price-amount-big {
-  font-size: 2rem;
-  font-weight: 900;
-  color: #FEE715;
-  text-shadow: 0 0 20px rgba(254,231,21,0.4), 0 2px 8px rgba(0,0,0,0.9);
-  line-height: 1;
-}
-
-.price-label-big {
-  font-size: 0.85rem;
-  color: rgba(255,255,255,0.75);
-  font-weight: 600;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
-}
-
-.price-row-secondary {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.price-icon-secondary {
-  font-size: 16px;
-  color: rgba(255,255,255,0.55);
-}
-
-.price-amount-secondary {
-  font-size: 1rem;
-  font-weight: 800;
-  color: rgba(255,255,255,0.85);
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
-}
-
-.price-label-secondary {
-  font-size: 0.78rem;
-  color: rgba(255,255,255,0.55);
-  font-weight: 600;
-}
-
-/* ---- Botones de contacto ---- */
-.contact-buttons {
-  display: flex;
-  gap: 10px;
-  padding: 0 20px 20px;
-}
-
-.contact-btn {
-  flex: 1;
-  height: 52px;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-size: 0.95rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  text-decoration: none;
-  border: none;
-  letter-spacing: 0.01em;
-}
-
-.btn-call {
-  background: rgba(255, 255, 255, 0.10);
-  color: #ffffff;
-  border: 1.5px solid rgba(255, 255, 255, 0.30);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
-}
-
-.btn-call:hover {
-  background: rgba(255, 255, 255, 0.18);
-  border-color: rgba(255, 255, 255, 0.50);
-  transform: translateY(-2px);
-}
-
-.btn-call .material-icons { font-size: 20px; }
-
-.btn-whatsapp {
-  background: #25d366;
-  color: #ffffff;
-  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
-}
-
-.btn-whatsapp:hover {
-  background: #1ebe5a;
-  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.50);
-  transform: translateY(-2px);
-}
-
-.btn-whatsapp .material-icons { font-size: 20px; }
-
-/* Original Styles */
-.taxi-view {
-  min-height: 100vh;
-  position: relative;
-  padding: 0 0 150px;
-}
-
-/* Tarjetas claras y elegantes */
-.filter-card,
-.taxi-card-new {
-  background: var(--card-bg);
-  border: 1px solid var(--border-color);
-}
-
-.header-main {
-    padding: 24px 16px;
-    text-align: center;
-}
-
-.brand-title {
-    color: var(--header-text);
-    font-size: 1.5rem;
-    font-weight: 800;
-    margin: 0;
+.viajes-turisticos {
+  padding-bottom: 2rem;
 }
 
+/* FILTROS CONSISTENTES */
 .filters-container {
-    padding: 0 16px 24px;
+  padding: 0 1rem 1.5rem;
 }
 
 .filter-card {
-    background: var(--card-bg);
-    border-radius: 20px;
-    padding: 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: 1px solid var(--border-color);
-    box-shadow: 0 2px 8px var(--shadow);
+  border-radius: 1.5rem;
+  padding: 1.25rem;
+  border: 1px solid var(--border-color);
+  background: var(--card-bg);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 
 .selectors-side {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
 }
 
-.select-group {
-    background: var(--bg-secondary);
-    border: 1.5px solid #fee715;
-    border-radius: 12px;
-    padding: 8px 12px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
+@media (min-width: 640px) {
+  .selectors-side {
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
-.select-group .material-icons {
-    color: #fee715;
-    font-size: 20px;
+.select-group-premium {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  padding: 0.625rem 0.875rem;
+  transition: all 0.3s ease;
 }
 
-.select-group select {
-    background: transparent;
-    border: none;
-    color: var(--text-primary);
-    width: 100%;
-    font-size: 0.9rem;
-    outline: none;
+.select-group-premium:focus-within {
+  border-color: var(--active-color);
 }
 
-.select-group select option {
-    background: var(--card-bg);
-    color: var(--text-primary);
+.group-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--bg-secondary);
+  border-radius: 0.75rem;
+  color: var(--active-color);
 }
 
-.lang-toggle-side {
-    padding-left: 20px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
+.group-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-.lang-text {
-    color: var(--text-primary);
-    font-weight: 700;
-    font-size: 0.9rem;
+.group-content label {
+  font-size: 0.65rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  margin-bottom: 0.125rem;
 }
 
-/* Custom Checkbox */
-.checkbox-container {
-    display: block;
-    position: relative;
-    width: 28px;
-    height: 28px;
-    cursor: pointer;
+.group-content select {
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  font-weight: 700;
+  font-size: 0.9375rem;
+  outline: none;
+  width: 100%;
 }
 
-.checkbox-container input {
-    visibility: hidden;
-    width: 0;
-    height: 0;
+/* GRID Y CARDS PREMIUM */
+.shuttles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+  padding: 0 1rem;
 }
 
-.checkmark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 28px;
-    width: 28px;
-    background-color: transparent;
-    border: 2px solid #fee715;
-    border-radius: 4px;
-    transition: all 0.2s ease;
+.shuttle-card-premium {
+  border-radius: 1.5rem;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  background: var(--card-bg);
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
 }
 
-.checkbox-container input:checked ~ .checkmark {
-    background-color: #fee715;
+.shuttle-card-premium:hover {
+  transform: translateY(-8px);
+  border-color: var(--active-color);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }
 
-.checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
+.card-image-wrap {
+  position: relative;
+  height: 180px;
+  width: 100%;
 }
 
-.checkbox-container input:checked ~ .checkmark:after {
-    display: block;
+.shuttle-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.checkbox-container .checkmark:after {
-    left: 9px;
-    top: 5px;
-    width: 6px;
-    height: 12px;
-    border: solid #101820;
-    border-width: 0 3px 3px 0;
-    transform: rotate(45deg);
+.company-tag {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(8px);
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.75rem;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-/* Grid & Cards */
-.taxis-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-    gap: 24px;
-    padding: 24px 0;
+.card-body-premium {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
-.taxi-card-new {
-    background: var(--card-bg);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    border-radius: 20px;
-    padding: 16px;
-    border: 1px solid var(--border-color);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+.route-main {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
 }
 
-.taxi-card-new:hover {
-    transform: translateY(-8px);
-    border-color: var(--active-color);
-    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+.location-name {
+  font-size: 1.125rem;
+  font-weight: 800;
+  color: var(--text-primary);
 }
 
-.card-top {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    position: relative;
+.separator-icon {
+  color: var(--active-color);
+  font-size: 1.25rem;
 }
 
-.driver-avatar {
-    width: 44px;
-    height: 44px;
-    border-radius: 12px;
-    overflow: hidden;
-    background: var(--bg-secondary);
-    border: 2px solid var(--border-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.card-meta {
+  display: flex;
+  gap: 1rem;
 }
 
-.driver-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.meta-tag {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
-.driver-info h3 {
-    margin: 0 0 2px;
-    color: var(--text-primary);
-    font-size: 1rem;
-    font-weight: 800;
-    letter-spacing: -0.01em;
+.meta-tag .material-icons {
+  font-size: 1.125rem;
+  color: var(--active-color);
 }
 
-.rating-stars {
-    display: flex;
-    gap: 4px;
+.card-footer-premium {
+  margin-top: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
 }
 
-.rating-stars .material-icons {
-    color: var(--active-color);
-    font-size: 18px;
-    filter: drop-shadow(0 0 5px rgba(254, 231, 21, 0.5));
+.price-container {
+  display: flex;
+  flex-direction: column;
 }
 
-.fav-icon-wrapper {
-    position: absolute;
-    top: -4px;
-    right: -4px;
+.price-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--text-secondary);
 }
 
-.card-mid {
-    padding: 12px 16px;
-    background: var(--bg-secondary);
-    border-radius: 16px;
-    border: 1px solid var(--border-color);
+.price-val {
+  font-size: 1.5rem;
+  font-weight: 900;
+  color: var(--active-color);
 }
 
-.contact-info {
-    display: flex;
-    align-items: center;
-    gap: 12px;
+.view-details-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
 }
 
-.ph-icon {
-    color: var(--active-color);
-    font-size: 20px;
+.shuttle-card-premium:hover .view-details-btn {
+  background: var(--active-color);
+  color: #101820;
+  border-color: var(--active-color);
+  transform: rotate(-45deg);
 }
 
-.phone-num {
-    color: var(--text-primary);
-    font-size: 1rem;
-    font-weight: 700;
-}
-
-.call-btn-main {
-    width: 100%;
-    padding: 18px;
-    background: linear-gradient(135deg, #fee715 0%, #facc15 100%);
-    color: #101820;
-    border: none;
-    border-radius: 16px;
-    font-size: 1rem;
-    font-weight: 900;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 10px 20px rgba(254, 231, 21, 0.15);
-}
-
-.call-btn-main:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 15px 30px rgba(254, 231, 21, 0.25);
-}
-
-.state-container, .empty-state {
-    padding: 100px 24px;
-    text-align: center;
-    background: var(--header-bg);
-    border-radius: 32px;
-    border: 2px dashed var(--border-color);
-}
-
-.state-container .material-icons, .empty-state .material-icons {
-    font-size: 64px;
-    margin-bottom: 24px;
-    color: var(--active-color);
-    opacity: 0.5;
+/* ESTADOS */
+.state-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4rem 2rem;
+  gap: 1rem;
+  text-align: center;
 }
 
 .spin {
-    animation: spin 1s linear infinite;
+  animation: spin 1s infinite linear;
+  font-size: 3rem;
+  color: var(--active-color);
 }
 
 @keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
-@media (max-width: 600px) {
-    .taxis-grid, .shuttles-grid {
-        grid-template-columns: 1fr;
-    }
+.retry-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--active-color);
+  color: #101820;
+  border: none;
+  border-radius: 99px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
-</style>
\ No newline at end of file
+.empty-state {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 4rem 2rem;
+  color: var(--text-secondary);
+}
+
+.empty-state .material-icons {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+</style>