feat(event-detail): enhance event detail page with improved layout and additional features

feat(counter-to): add countdown component for event timing
feat(fonts): include Gotham Book font for better typography
fix(location-map): make map height responsive with CSS variables

src/app/shared/components/counter-to/counter-to.component.html

@@ -0,0 +1,12 @@
+@if (countdown(); as timer) {
+  <div class="counter-to" aria-label="Tiempo restante para el evento">
+    @if (timer.finished) {
+      <span>El evento comenzó</span>
+    } @else {
+      <div><strong>{{ timer.days }}</strong><small>DÍAS</small></div>
+      <div><strong>{{ timer.hours }}</strong><small>HORAS</small></div>
+      <div><strong>{{ timer.minutes }}</strong><small>MINUTOS</small></div>
+      <div><strong>{{ timer.seconds }}</strong><small>SEGUNDOS</small></div>
+    }
+  </div>
+}

src/app/shared/components/counter-to/counter-to.component.scss

@@ -0,0 +1,6 @@
+:host { display: block; margin-top: 9px; }
+.counter-to { min-height: 30px; padding-block: 12px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; text-align: center; border: 1px solid #d7d9db; border-radius: 3px; }
+.counter-to > div + div { border-left: 1px solid #e6e7e8; }
+.counter-to strong { display: block; color: #666666; font-size: 16px; font-weight: 700; line-height: 1.1; }
+.counter-to small { display: block; margin-top: 1px; color: #666666; font-size: 11px; font-weight: 400; letter-spacing: .02em; }
+.counter-to > span { grid-column: 1 / -1; font-weight: 600; }

src/app/shared/components/counter-to/counter-to.component.ts

@@ -0,0 +1,37 @@
+import { isPlatformBrowser } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, PLATFORM_ID, computed, inject, input, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-counter-to',
+  templateUrl: './counter-to.component.html',
+  styleUrl: './counter-to.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CounterToComponent {
+  readonly startsAt = input<string | null | undefined>(null);
+
+  private readonly now = signal(Date.now());
+
+  protected readonly countdown = computed(() => {
+    const startsAt = this.startsAt();
+    const instant = startsAt ? Date.parse(startsAt) : NaN;
+    if (!Number.isFinite(instant)) return null;
+
+    const remaining = Math.max(0, instant - this.now());
+    const seconds = Math.floor(remaining / 1000);
+    return {
+      finished: remaining === 0,
+      days: Math.floor(seconds / 86400),
+      hours: Math.floor((seconds % 86400) / 3600),
+      minutes: Math.floor((seconds % 3600) / 60),
+      seconds: seconds % 60,
+    };
+  });
+
+  constructor() {
+    if (isPlatformBrowser(inject(PLATFORM_ID))) {
+      const timer = setInterval(() => this.now.set(Date.now()), 1000);
+      inject(DestroyRef).onDestroy(() => clearInterval(timer));
+    }
+  }
+}

src/app/shared/components/location-map/location-map.component.scss

@@ -5,10 +5,10 @@
 
 .location-map {
   width: 100%;
-  min-height: 22rem;
+  min-height: var(--location-map-min-height, 22rem);
   overflow: hidden;
   background: #e9ecef;
-  border-radius: 0.75rem;
+  border-radius: var(--location-map-border-radius, 0.75rem);
 }
 
 :host ::ng-deep .leaflet-popup-content {
@@ -27,6 +27,6 @@
 
 @media (max-width: 575.98px) {
   .location-map {
-    min-height: 18rem;
+    min-height: var(--location-map-min-height, 18rem);
   }
 }