Apply premium BusinessDetailsView redesign: adapted to app colors, added Playfair Display, and removed map route button

frontend/src/views/BusinessDetailsView.vue

@@ -45,17 +45,6 @@ function getImageUrl(path: string | null | undefined) {
 
 const goBack = () => router.back()
 
-function handleDirections() {
-  analyticsService.logEvent({
-    event_name: 'promo_click',
-    item_id: 'directions_' + business.value?.name,
-    properties: { 
-        business_id: business.value?.id,
-        action: 'get_directions'
-    }
-  })
-  window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(business.value?.address || '')}`, '_blank')
-}
 </script>
 
 <template>
@@ -155,15 +144,6 @@ function handleDirections() {
             <p>{{ business.social_media }}</p>
           </div>
         </div>
-        <div class="info-card">
-          <span class="material-icons">directions</span>
-          <div class="info-text">
-            <h4>Cómo llegar</h4>
-            <button class="track-directions-btn" @click="handleDirections">
-                Ver mapa y ruta
-            </button>
-          </div>
-        </div>
       </div>
 
       <!-- Offers Section -->
@@ -208,6 +188,8 @@ function handleDirections() {
   font-family: 'Playfair Display', serif;
 }
 
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap');
+
 /* Hero Section */
 .hero-section {
   position: relative;
@@ -300,12 +282,13 @@ function handleDirections() {
 /* Content */
 .details-container {
   max-width: 1000px;
-  margin: -40px auto 0;
+  margin: -60px auto 0;
   position: relative;
   background: var(--bg-primary);
-  border-radius: 30px 30px 0 0;
+  border-top: 1px solid var(--border-color);
+  border-radius: 40px 40px 0 0;
   padding: 60px 40px;
-  box-shadow: 0 -20px 40px rgba(0,0,0,0.1);
+  box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
 }
 
 .premium-story {
@@ -349,9 +332,10 @@ function handleDirections() {
 }
 
 .divider {
-  width: 100%;
-  height: 1px;
-  background: var(--border-color);
+  width: 40px;
+  height: 3px;
+  background: var(--active-color);
+  border-radius: 2px;
 }
 
 .highlight-item p {
@@ -378,7 +362,10 @@ function handleDirections() {
 
 .info-card .material-icons {
   color: var(--active-color);
-  font-size: 2rem;
+  font-size: 1.8rem;
+  background: var(--active-bg);
+  padding: 10px;
+  border-radius: 12px;
 }
 
 .info-text h4 {