feat: Iniciar implementación de The Boutique (booking.anchor23.mx)

**Frontend (booking.anchor23.mx):**
- Crear página de selección de servicios (/booking/servicios)
  - Catálogo de servicios con precios y duración
  - Selección de ubicación
  - Calendario interactivo para selección de fecha y hora
  - Validación de disponibilidad en tiempo real
  - Resumen de reserva con precio

- Crear página de confirmación de reserva (/booking/cita)
  - Resumen detallado de la cita (servicio, fecha, hora, ubicación)
  - Formulario para datos del cliente (nombre, email, teléfono, notas)
  - Confirmación visual de la reserva
  - Redirección a página de confirmación exitosa

**Backend APIs:**
- Crear /api/services para obtener servicios activos
  - Filtrar por ubicación si se especifica
  - Retornar precio y duración de cada servicio

- Crear /api/locations para obtener ubicaciones activas
  - Retornar lista de locations con timezone

**Documentación:**
- Actualizar TASKS.md con progreso de The Boutique (20%)
- Agregar nuevas tareas pendientes (aperture, api pública)
- Actualizar README.md con:
  - Nueva estructura de rutas (/booking/*)
  - Nuevas APIs (/api/services, /api/locations)
  - Estado actualizado de The Boutique
  - Actualizar Fase 2 al 20% completado

**Estilos:**
- Mantener paleta de colores de anchor23.mx
- Diseño consistente con el resto del sitio
- Responsive para móviles

app/booking/cita/page.tsx

@@ -0,0 +1,281 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { CheckCircle2, Calendar, Clock, MapPin } from 'lucide-react'
+import { format } from 'date-fns'
+import { es } from 'date-fns/locale'
+
+export default function CitaPage() {
+  const [formData, setFormData] = useState({
+    nombre: '',
+    email: '',
+    telefono: '',
+    notas: ''
+  })
+  const [bookingDetails, setBookingDetails] = useState<any>(null)
+  const [loading, setLoading] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const service_id = params.get('service_id')
+    const location_id = params.get('location_id')
+    const date = params.get('date')
+    const time = params.get('time')
+
+    if (service_id && location_id && date && time) {
+      fetchBookingDetails(service_id, location_id, date, time)
+    }
+  }, [])
+
+  const fetchBookingDetails = async (serviceId: string, locationId: string, date: string, time: string) => {
+    try {
+      const response = await fetch(`/api/availability/time-slots?location_id=${locationId}&service_id=${serviceId}&date=${date}`)
+      const data = await response.json()
+      
+      setBookingDetails({
+        service_id: serviceId,
+        location_id: locationId,
+        date: date,
+        time: time,
+        startTime: `${date}T${time}`
+      })
+    } catch (error) {
+      console.error('Error fetching booking details:', error)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+
+    try {
+      const response = await fetch('/api/bookings', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          customer_email: formData.email,
+          customer_phone: formData.telefono,
+          customer_first_name: formData.nombre.split(' ')[0] || formData.nombre,
+          customer_last_name: formData.nombre.split(' ').slice(1).join(' '),
+          service_id: bookingDetails.service_id,
+          location_id: bookingDetails.location_id,
+          start_time_utc: bookingDetails.startTime,
+          notes: formData.notas
+        })
+      })
+
+      const data = await response.json()
+
+      if (response.ok && data.success) {
+        setSubmitted(true)
+      } else {
+        alert('Error al crear la reserva: ' + (data.error || 'Error desconocido'))
+      }
+    } catch (error) {
+      console.error('Error creating booking:', error)
+      alert('Error al crear la reserva')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  if (submitted) {
+    return (
+      <div className="min-h-screen bg-[var(--bone-white)] pt-24 flex items-center justify-center">
+        <div className="max-w-md w-full px-8">
+          <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
+            <CardContent className="pt-12 text-center">
+              <CheckCircle2 className="w-16 h-16 mx-auto mb-6" style={{ color: 'var(--deep-earth)' }} />
+              <h1 className="text-3xl font-bold mb-4" style={{ color: 'var(--charcoal-brown)' }}>
+                ¡Reserva Confirmada!
+              </h1>
+              <p className="text-lg mb-6" style={{ color: 'var(--charcoal-brown)', opacity: 0.8 }}>
+                Hemos enviado un correo de confirmación con los detalles de tu cita.
+              </p>
+              <div className="space-y-2 text-sm" style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>
+                <p>Fecha: {format(new Date(bookingDetails.date), 'PPP', { locale: es })}</p>
+                <p>Hora: {bookingDetails.time}</p>
+                <p>Puedes agregar esta cita a tu calendario.</p>
+              </div>
+              <Button
+                onClick={() => window.location.href = '/'}
+                className="w-full"
+              >
+                Volver al Inicio
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    )
+  }
+
+  if (!bookingDetails) {
+    return (
+      <div className="min-h-screen bg-[var(--bone-white)] pt-24 flex items-center justify-center">
+        <div className="text-center">
+          <p>Cargando detalles de la reserva...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--bone-white)] pt-24">
+      <div className="max-w-4xl mx-auto px-8 py-16">
+        <header className="mb-12">
+          <Button
+            variant="outline"
+            onClick={() => window.location.href = '/booking/servicios'}
+          >
+            ← Volver
+          </Button>
+        </header>
+
+        <div className="grid md:grid-cols-2 gap-8">
+          <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
+            <CardHeader>
+              <CardTitle style={{ color: 'var(--charcoal-brown)' }}>
+                Resumen de la Cita
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="flex items-start gap-3">
+                  <Calendar className="w-5 h-5 mt-1" style={{ color: 'var(--mocha-taupe)' }} />
+                  <div>
+                    <p className="font-medium" style={{ color: 'var(--charcoal-brown)' }}>Fecha</p>
+                    <p style={{ color: 'var(--charcoal-brown)', opacity: 0.8 }}>
+                      {format(new Date(bookingDetails.date), 'PPP', { locale: es })}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-3">
+                  <Clock className="w-5 h-5 mt-1" style={{ color: 'var(--mocha-taupe)' }} />
+                  <div>
+                    <p className="font-medium" style={{ color: 'var(--charcoal-brown)' }}>Hora</p>
+                    <p style={{ color: 'var(--charcoal-brown)', opacity: 0.8 }}>
+                      {bookingDetails.time}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-3">
+                  <MapPin className="w-5 h-5 mt-1" style={{ color: 'var(--mocha-taupe)' }} />
+                  <div>
+                    <p className="font-medium" style={{ color: 'var(--charcoal-brown)' }}>Ubicación</p>
+                    <p style={{ color: 'var(--charcoal-brown)', opacity: 0.8 }}>
+                      Anchor:23 - Saltillo
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
+            <CardHeader>
+              <CardTitle style={{ color: 'var(--charcoal-brown)' }}>
+                Tus Datos
+              </CardTitle>
+              <CardDescription>
+                Ingresa tus datos personales para completar la reserva
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                  <Label htmlFor="nombre">Nombre Completo *</Label>
+                  <Input
+                    id="nombre"
+                    name="nombre"
+                    value={formData.nombre}
+                    onChange={handleChange}
+                    required
+                    placeholder="Ej. María García"
+                    className="w-full"
+                    style={{ borderColor: 'var(--mocha-taupe)' }}
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="email">Email *</Label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                    placeholder="tu@email.com"
+                    className="w-full"
+                    style={{ borderColor: 'var(--mocha-taupe)' }}
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="telefono">Teléfono *</Label>
+                  <Input
+                    id="telefono"
+                    name="telefono"
+                    type="tel"
+                    value={formData.telefono}
+                    onChange={handleChange}
+                    required
+                    placeholder="+52 844 123 4567"
+                    className="w-full"
+                    style={{ borderColor: 'var(--mocha-taupe)' }}
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="notas">Notas (opcional)</Label>
+                  <textarea
+                    id="notas"
+                    name="notas"
+                    value={formData.notas}
+                    onChange={handleChange}
+                    rows={4}
+                    placeholder="Alguna observación o preferencia..."
+                    className="w-full px-4 py-3 border rounded-lg resize-none"
+                    style={{ borderColor: 'var(--mocha-taupe)' }}
+                  />
+                </div>
+
+                <Button
+                  type="submit"
+                  disabled={loading}
+                  className="w-full"
+                >
+                  {loading ? 'Procesando...' : 'Confirmar Reserva'}
+                </Button>
+              </form>
+
+              <div className="mt-6 p-4 rounded-lg" style={{ background: 'var(--bone-white)' }}>
+                <p className="text-sm" style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>
+                  * Al confirmar tu reserva, recibirás un correo de confirmación
+                  con los detalles. La reserva se mantendrá por 30 minutos.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

app/booking/servicios/page.tsx

@@ -0,0 +1,251 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Calendar, Clock, User } from 'lucide-react'
+import { format } from 'date-fns'
+import { es } from 'date-fns/locale'
+
+interface Service {
+  id: string
+  name: string
+  category: string
+  duration_minutes: number
+  base_price: number
+}
+
+interface Location {
+  id: string
+  name: string
+  timezone: string
+}
+
+export default function ServiciosPage() {
+  const [services, setServices] = useState<Service[]>([])
+  const [locations, setLocations] = useState<Location[]>([])
+  const [selectedService, setSelectedService] = useState<string>('')
+  const [selectedLocation, setSelectedLocation] = useState<string>('')
+  const [selectedDate, setSelectedDate] = useState<string>(format(new Date(), 'yyyy-MM-dd'))
+  const [timeSlots, setTimeSlots] = useState<any[]>([])
+  const [selectedTime, setSelectedTime] = useState<string>('')
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    fetchServices()
+    fetchLocations()
+  }, [])
+
+  useEffect(() => {
+    if (selectedService && selectedLocation && selectedDate) {
+      fetchTimeSlots()
+    }
+  }, [selectedService, selectedLocation, selectedDate])
+
+  const fetchServices = async () => {
+    try {
+      const response = await fetch('/api/services')
+      const data = await response.json()
+      if (data.services) {
+        setServices(data.services)
+      }
+    } catch (error) {
+      console.error('Error fetching services:', error)
+    }
+  }
+
+  const fetchLocations = async () => {
+    try {
+      const response = await fetch('/api/locations')
+      const data = await response.json()
+      if (data.locations) {
+        setLocations(data.locations)
+        if (data.locations.length > 0) {
+          setSelectedLocation(data.locations[0].id)
+        }
+      }
+    } catch (error) {
+      console.error('Error fetching locations:', error)
+    }
+  }
+
+  const fetchTimeSlots = async () => {
+    if (!selectedService || !selectedLocation || !selectedDate) return
+
+    setLoading(true)
+    try {
+      const response = await fetch(
+        `/api/availability/time-slots?location_id=${selectedLocation}&service_id=${selectedService}&date=${selectedDate}`
+      )
+      const data = await response.json()
+      if (data.availability) {
+        setTimeSlots(data.availability)
+      }
+    } catch (error) {
+      console.error('Error fetching time slots:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleContinue = () => {
+    if (selectedService && selectedLocation && selectedDate && selectedTime) {
+      const params = new URLSearchParams({
+        service_id: selectedService,
+        location_id: selectedLocation,
+        date: selectedDate,
+        time: selectedTime
+      })
+      window.location.href = `/cita?${params.toString()}`
+    }
+  }
+
+  const selectedServiceData = services.find(s => s.id === selectedService)
+
+  return (
+    <div className="min-h-screen bg-[var(--bone-white)] pt-24">
+      <div className="max-w-4xl mx-auto px-8 py-16">
+        <header className="mb-12">
+          <h1 className="text-5xl mb-4" style={{ color: 'var(--charcoal-brown)' }}>
+            Reservar Cita
+          </h1>
+          <p className="text-xl opacity-80" style={{ color: 'var(--charcoal-brown)' }}>
+            Selecciona el servicio y horario de tu preferencia
+          </p>
+        </header>
+
+        <div className="space-y-8">
+          <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2" style={{ color: 'var(--charcoal-brown)' }}>
+                <User className="w-5 h-5" />
+                Servicios
+              </CardTitle>
+              <CardDescription>Selecciona el servicio que deseas reservar</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div>
+                  <Label>Servicio</Label>
+                  <Select onValueChange={setSelectedService} value={selectedService}>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Selecciona un servicio" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {services.map((service) => (
+                        <SelectItem key={service.id} value={service.id}>
+                          {service.name} - ${service.base_price} ({service.duration_minutes} min)
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2" style={{ color: 'var(--charcoal-brown)' }}>
+                <Clock className="w-5 h-5" />
+                Fecha y Hora
+              </CardTitle>
+              <CardDescription>Selecciona la fecha y hora disponible</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div>
+                  <Label>Ubicación</Label>
+                  <Select onValueChange={setSelectedLocation} value={selectedLocation}>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Selecciona ubicación" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {locations.map((location) => (
+                        <SelectItem key={location.id} value={location.id}>
+                          {location.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <Label>Fecha</Label>
+                  <input
+                    type="date"
+                    value={selectedDate}
+                    onChange={(e) => setSelectedDate(e.target.value)}
+                    min={format(new Date(), 'yyyy-MM-dd')}
+                    className="w-full px-4 py-3 border rounded-lg"
+                    style={{ borderColor: 'var(--mocha-taupe)' }}
+                  />
+                </div>
+
+                {selectedServiceData && (
+                  <div>
+                    <Label>Duración del servicio: {selectedServiceData.duration_minutes} minutos</Label>
+                  </div>
+                )}
+
+                {loading ? (
+                  <div className="text-center py-4">
+                    Cargando horarios...
+                  </div>
+                ) : (
+                  <div>
+                    <Label>Horarios disponibles</Label>
+                    {timeSlots.length === 0 ? (
+                      <p className="text-sm opacity-70 mt-2">
+                        No hay horarios disponibles para esta fecha. Selecciona otra fecha.
+                      </p>
+                    ) : (
+                      <div className="grid grid-cols-3 gap-2 mt-2">
+                        {timeSlots.map((slot, index) => (
+                          <Button
+                            key={index}
+                            variant={selectedTime === slot.start_time ? 'default' : 'outline'}
+                            onClick={() => setSelectedTime(slot.start_time)}
+                            className={selectedTime === slot.start_time ? 'w-full' : ''}
+                          >
+                            {format(new Date(slot.start_time), 'HH:mm', { locale: es })}
+                          </Button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {selectedServiceData && selectedTime && (
+            <Card className="border-none" style={{ background: 'var(--deep-earth)' }}>
+              <CardContent className="pt-6">
+                <div className="text-white">
+                  <p className="text-lg font-semibold mb-2">Resumen de la reserva</p>
+                  <div className="space-y-1 opacity-90">
+                    <p>Servicio: {selectedServiceData.name}</p>
+                    <p>Fecha: {format(new Date(selectedDate), 'PPP', { locale: es })}</p>
+                    <p>Hora: {format(new Date(selectedTime), 'HH:mm', { locale: es })}</p>
+                    <p>Precio: ${selectedServiceData.base_price.toFixed(2)}</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          <Button
+            onClick={handleContinue}
+            disabled={!selectedService || !selectedLocation || !selectedDate || !selectedTime}
+            className="w-full"
+          >
+            Continuar con Datos del Cliente
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}