{"id":24613,"date":"2025-11-14T13:16:25","date_gmt":"2025-11-14T13:16:25","guid":{"rendered":"https:\/\/web.guarguero.com\/?page_id=24613"},"modified":"2025-12-11T14:36:09","modified_gmt":"2025-12-11T14:36:09","slug":"reservas","status":"publish","type":"page","link":"https:\/\/web.guarguero.com\/en\/reservas\/","title":{"rendered":"Reservas"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"24613\" class=\"elementor elementor-24613\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-40c8888 elementor-section-content-top elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"40c8888\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wide\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f16c856\" data-id=\"f16c856\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-ae10f33 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ae10f33\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-f62ee55\" data-id=\"f62ee55\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1f469d6 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"1f469d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \r\n  SISTEMA DE RESERVAS Desarrollado por DS8 Agency\r\n  Versi\u00f3n: 10.1 (Popup Warning Update)\r\n-->\r\n<div id=\"la-cuadra-widget\" class=\"la-cuadra-scope\"><\/div>\r\n\r\n<!-- 1. ESTILOS Y FUENTES -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n<!-- 2. LIBRER\u00cdAS EXTERNAS -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@3\/dist\/email.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n<!-- 3. CONFIGURACI\u00d3N DE ESTILOS (Tailwind Scoped) -->\r\n<script>\r\n  tailwind.config = {\r\n    important: '#la-cuadra-widget', \r\n    corePlugins: { preflight: false },\r\n    theme: {\r\n      extend: {\r\n        fontFamily: {\r\n          serif: ['\"Playfair Display\"', 'serif'],\r\n          sans: ['\"Lato\"', 'sans-serif'],\r\n        },\r\n        colors: {\r\n          brand: {\r\n            DEFAULT: '#AF8F41', \/\/ Gold DS8 Updated\r\n            gold: '#AF8F41',\r\n            dark: '#1a1a1a',\r\n            cream: '#f5f5f4'\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n<\/script>\r\n\r\n<style>\r\n  \/* Reset y Estilos de Rescate para Elementor *\/\r\n  #la-cuadra-widget {\r\n    font-family: 'Lato', sans-serif;\r\n    width: 100%;\r\n    background-color: #ffffff;\r\n    line-height: 1.5;\r\n  }\r\n  #la-cuadra-widget * { box-sizing: border-box; }\r\n  \r\n  \/* Inputs y botones limpios *\/\r\n  #la-cuadra-widget button,\r\n  #la-cuadra-widget input,\r\n  #la-cuadra-widget select,\r\n  #la-cuadra-widget textarea {\r\n    border-style: solid;\r\n    font-family: inherit;\r\n    line-height: inherit;\r\n    color: inherit;\r\n  }\r\n  #la-cuadra-widget input,\r\n  #la-cuadra-widget select,\r\n  #la-cuadra-widget textarea {\r\n    background-color: #fff;\r\n    border-color: #d6d3d1;\r\n    border-width: 1px;\r\n  }\r\n  \r\n  \/* Scrollbar Personalizado *\/\r\n  #la-cuadra-widget .custom-scrollbar::-webkit-scrollbar { width: 6px; }\r\n  #la-cuadra-widget .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }\r\n  #la-cuadra-widget .custom-scrollbar::-webkit-scrollbar-thumb { background: #AF8F41; border-radius: 3px; }\r\n<\/style>\r\n\r\n<!-- 4. MAPA DE IMPORTACIONES -->\r\n<script type=\"importmap\">\r\n{\r\n  \"imports\": {\r\n    \"react\": \"https:\/\/esm.sh\/react@18.2.0\",\r\n    \"react-dom\/client\": \"https:\/\/esm.sh\/react-dom@18.2.0\/client\",\r\n    \"lucide-react\": \"https:\/\/esm.sh\/lucide-react@0.344.0\",\r\n    \"react-dom\/\": \"https:\/\/aistudiocdn.com\/react-dom@^19.2.0\/\",\r\n    \"react\/\": \"https:\/\/aistudiocdn.com\/react@^19.2.0\/\"\r\n  }\r\n}\r\n<\/script>\r\n\r\n<!-- 5. L\u00d3GICA DE LA APLICACI\u00d3N -->\r\n<script type=\"text\/babel\" data-type=\"module\">\r\n  import React, { useState, useEffect, useMemo } from 'react';\r\n  import { createRoot } from 'react-dom\/client';\r\n  import { \r\n    Users, Clock, MapPin, Calendar as CalendarIcon, ArrowRight, \r\n    Loader2, AlertCircle, ChevronLeft, ChevronRight, \r\n    CheckCircle, Printer, ArrowLeft, Info, AlertTriangle \r\n  } from 'lucide-react';\r\n\r\n  \/\/ =================================================================\r\n  \/\/ \ud83d\udc47 CONFIGURACI\u00d3N DS8 AGENCY\r\n  \/\/ =================================================================\r\n  \r\n  const BRAND_COLOR = '#AF8F41'; \r\n\r\n  const EMAILJS_CONFIG = {\r\n    SERVICE_ID: \"service_wbr3ebo\",\r\n    TEMPLATE_ID: \"template_8cszfo6\",\r\n    TEMPLATE_ID_ADMIN: \"template_8cszfo6\",\r\n    PUBLIC_KEY: \"jTn5QN4LV8txOhjSO\",\r\n    ADMIN_EMAIL: \"reservas@guarguero.com\"\r\n  };\r\n\r\n  const LOCATION_INFO = {\r\n    name: \"Restaurant Guarg\u00fcero\",\r\n    address: \"Av. la Paz 1025, Miraflores, Lima\",\r\n    phone: \"965 391 773\",\r\n    email: \"reservas@guarguero.com\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1514362545857-3bc16c4c7d1b?q=80&w=1920&auto=format&fit=crop\"\r\n  };\r\n\r\n  const CONFIG = {\r\n    MAX_GUESTS: 12,\r\n    MIN_GUESTS: 1,\r\n    OPENING_HOUR: 12,\r\n    SLOT_INTERVAL: 30\r\n  };\r\n\r\n  const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));\r\n\r\n  const api = {\r\n    checkAvailability: async (dateStr, guests) => {\r\n      const dateObj = new Date(dateStr + 'T12:00:00');\r\n      const day = dateObj.getDay(); \/\/ 0=Dom, 1=Lun...\r\n\r\n      \/\/ REGLA: Dom 6pm, Otros 11pm\r\n      const closingHour = (day === 0) ? 18 : 23;\r\n\r\n      const slots = [];\r\n      for (let hour = CONFIG.OPENING_HOUR; hour < closingHour; hour++) {\r\n        for (let min = 0; min < 60; min += CONFIG.SLOT_INTERVAL) {\r\n          const timeString = `${hour.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}`;\r\n          \r\n          const now = new Date();\r\n          const slotDate = new Date(`${dateStr}T${timeString}:00`);\r\n          const isPast = slotDate < now;\r\n          \r\n          slots.push({ time: timeString, available: !isPast });\r\n        }\r\n      }\r\n\r\n      \/\/ \ud83d\udd0c CONEXI\u00d3N CON PLUGIN DE HORARIOS (Si existe)\r\n      try {\r\n        const response = await fetch(`\/wp-json\/guarguero\/v1\/slots?date=${dateStr}`);\r\n        if (response.ok) {\r\n          const apiSlots = await response.json(); \r\n          if (Array.isArray(apiSlots) && apiSlots.length > 0) {\r\n              return apiSlots;\r\n          }\r\n        }\r\n      } catch (err) {\r\n        \/\/ Fallback a l\u00f3gica local\r\n      }\r\n\r\n      return slots;\r\n    },\r\n\r\n    createReservation: async (data) => {\r\n      await delay(1500);\r\n\r\n      if (!data.email.includes('@')) throw new Error(\"Email inv\u00e1lido\");\r\n\r\n      const confirmationToken = `RES-${Math.floor(Math.random() * 100000)}`;\r\n      \r\n      const responseData = {\r\n        ...data,\r\n        id: crypto.randomUUID(),\r\n        confirmationToken,\r\n        status: 'confirmed',\r\n        createdAt: new Date().toISOString(),\r\n        emailSent: false,\r\n        emailError: null\r\n      };\r\n\r\n      \/\/ 1. GUARDAR EN BASE DE DATOS WP (Plugin DS8)\r\n      try {\r\n        await fetch('\/wp-json\/ds8\/v1\/reservation', {\r\n          method: 'POST',\r\n          headers: { 'Content-Type': 'application\/json' },\r\n          body: JSON.stringify({\r\n            name: data.name,\r\n            email: data.email,\r\n            phone: data.phone,\r\n            date: data.date, \/\/ Formato YYYY-MM-DD\r\n            time: data.time,\r\n            guests: data.guests,\r\n            zone: data.zone,\r\n            confirmationToken: confirmationToken,\r\n            observations: data.observations || ''\r\n          })\r\n        });\r\n        console.log(\"\u2705 Reserva guardada en base de datos.\");\r\n      } catch (dbErr) {\r\n        console.warn(\"\u26a0\ufe0f No se pudo guardar en DB (\u00bfPlugin inactivo?):\", dbErr);\r\n      }\r\n\r\n      \/\/ 2. ENVIAR CORREOS (EmailJS)\r\n      try {\r\n        if (typeof emailjs !== 'undefined') {\r\n          emailjs.init(EMAILJS_CONFIG.PUBLIC_KEY);\r\n\r\n          const clientParams = {\r\n            from_name: \"Sistema de Reserva Guarg\u00fcero\",\r\n            to_email: data.email,         \r\n            reply_to: EMAILJS_CONFIG.ADMIN_EMAIL,         \r\n            to_name: data.name,\r\n            nombre: data.name,            \r\n            codigo_reserva: confirmationToken, \r\n            fecha: data.date,             \r\n            hora: data.time,              \r\n            personas: data.guests,        \r\n            zona: data.zone,\r\n            observaciones: data.observations || 'Ninguna',\r\n            titulo_correo: 'Solicitud de Reserva Recibida',\r\n            mensaje_reserva: 'Gracias por solicitar tu reserva, pronto nos pondremos en contacto contigo.'\r\n          };\r\n\r\n          await emailjs.send(\r\n            EMAILJS_CONFIG.SERVICE_ID, \r\n            EMAILJS_CONFIG.TEMPLATE_ID, \r\n            clientParams\r\n          );\r\n\r\n          const adminParams = {\r\n             ...clientParams,\r\n             from_name: \"Sistema de Reservas\",\r\n             to_email: EMAILJS_CONFIG.ADMIN_EMAIL, \r\n             reply_to: data.email,                 \r\n             to_name: \"Administrador\",\r\n             titulo_correo: 'NUEVA RESERVA WEB',\r\n             mensaje_reserva: 'Nueva reserva recibida desde la web.'\r\n          };\r\n\r\n          emailjs.send(\r\n            EMAILJS_CONFIG.SERVICE_ID, \r\n            EMAILJS_CONFIG.TEMPLATE_ID_ADMIN, \r\n            adminParams\r\n          ).catch(err => console.warn(\"Admin copy failed\", err));\r\n          \r\n          responseData.emailSent = true;\r\n\r\n        } else {\r\n          throw new Error(\"Librer\u00eda EmailJS no cargada.\");\r\n        }\r\n      } catch (e) {\r\n        console.error(\"\u274c Error enviando emails:\", e);\r\n        responseData.emailSent = false;\r\n        responseData.emailError = e.text || e.message || \"Error desconocido\";\r\n      }\r\n\r\n      return responseData;\r\n    }\r\n  };\r\n\r\n  \/\/ =================================================================\r\n  \/\/ COMPONENTES\r\n  \/\/ =================================================================\r\n\r\n  const Spinner = ({ className = \"h-6 w-auto\" }) => (\r\n    <Loader2 className={`animate-spin ${className}`} \/>\r\n  );\r\n\r\n  const Calendar = ({ selectedDate, onDateSelect }) => {\r\n    const [currentMonth, setCurrentMonth] = useState(new Date());\r\n    const today = new Date();\r\n    today.setHours(0,0,0,0);\r\n    const MONTHS = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];\r\n    const DAYS_OF_WEEK = ['Dom', 'Lun', 'Mar', 'Mi\u00e9', 'Jue', 'Vie', 'S\u00e1b'];\r\n\r\n    const days = useMemo(() => {\r\n      const year = currentMonth.getFullYear();\r\n      const month = currentMonth.getMonth();\r\n      const firstDayOfMonth = new Date(year, month, 1);\r\n      const daysInMonth = new Date(year, month + 1, 0).getDate();\r\n      const startDay = firstDayOfMonth.getDay();\r\n      const calendarDays = [];\r\n      \r\n      for (let i = 0; i < startDay; i++) {\r\n        calendarDays.push({ date: null });\r\n      }\r\n      for (let i = 1; i <= daysInMonth; i++) {\r\n        const d = new Date(year, month, i);\r\n        d.setHours(0,0,0,0);\r\n        calendarDays.push({\r\n          date: d,\r\n          isToday: d.getTime() === today.getTime(),\r\n          isPast: d.getTime() < today.getTime()\r\n        });\r\n      }\r\n      return calendarDays;\r\n    }, [currentMonth, today]);\r\n\r\n    const handleMonthChange = (val) => {\r\n      const newDate = new Date(currentMonth);\r\n      newDate.setMonth(newDate.getMonth() + val);\r\n      setCurrentMonth(newDate);\r\n    };\r\n\r\n    const isSelected = (d) => selectedDate && d && d.toDateString() === selectedDate.toDateString();\r\n\r\n    return (\r\n      <div className=\"bg-white p-2 md:p-4 rounded-lg shadow-sm border border-stone-200 w-full font-sans\">\r\n        <div className=\"flex justify-between items-center mb-4\">\r\n          <button type=\"button\" onClick={() => handleMonthChange(-1)} className=\"p-2 hover:bg-stone-100 rounded-full transition-colors border-0 bg-transparent cursor-pointer\">\r\n            <ChevronLeft size={20} className=\"text-stone-600\" \/>\r\n          <\/button>\r\n          <span className=\"font-serif text-base md:text-lg font-semibold capitalize select-none\" style={{ color: BRAND_COLOR }}>\r\n            {MONTHS[currentMonth.getMonth()]} {currentMonth.getFullYear()}\r\n          <\/span>\r\n          <button type=\"button\" onClick={() => handleMonthChange(1)} className=\"p-2 hover:bg-stone-100 rounded-full transition-colors border-0 bg-transparent cursor-pointer\">\r\n            <ChevronRight size={20} className=\"text-stone-600\" \/>\r\n          <\/button>\r\n        <\/div>\r\n        <div className=\"grid grid-cols-7 gap-1 mb-2\">\r\n          {DAYS_OF_WEEK.map(day => (\r\n            <div key={day} className=\"text-center text-[10px] md:text-xs font-bold text-stone-400 uppercase tracking-wider\">{day}<\/div>\r\n          ))}\r\n        <\/div>\r\n        <div className=\"grid grid-cols-7 gap-1\">\r\n          {days.map((day, idx) => {\r\n             if (!day.date) return <div key={idx}><\/div>;\r\n             const isDaySelected = isSelected(day.date);\r\n             const isToday = day.isToday && !isDaySelected;\r\n             \r\n             return (\r\n                <button\r\n                  key={idx}\r\n                  type=\"button\"\r\n                  onClick={() => !day.isPast && onDateSelect(day.date)}\r\n                  disabled={day.isPast}\r\n                  style={{ \r\n                      backgroundColor: isDaySelected ? BRAND_COLOR : undefined,\r\n                      color: isToday ? BRAND_COLOR : undefined,\r\n                      borderColor: isToday ? BRAND_COLOR : 'transparent',\r\n                  }}\r\n                  className={`\r\n                    h-8 md:h-9 w-full flex items-center justify-center text-xs md:text-sm rounded-md transition-all duration-200 border-0 cursor-pointer\r\n                    ${day.isPast ? 'text-stone-300 cursor-not-allowed bg-transparent opacity-50' : 'hover:bg-stone-100 text-stone-700 bg-white'}\r\n                    ${isDaySelected ? '!text-white shadow-md font-bold' : ''}\r\n                    ${isToday ? 'font-bold border' : ''}\r\n                  `}\r\n                >\r\n                  {day.date.getDate()}\r\n                <\/button>\r\n             );\r\n          })}\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  };\r\n\r\n  const Confirmation = ({ reservation, onReset }) => {\r\n    return (\r\n      <div className=\"bg-white w-full mx-auto rounded-lg shadow-sm border border-stone-200 animate-in zoom-in-95 duration-300 font-sans\">\r\n        <div className=\"bg-green-50 p-8 text-center border-b border-green-100\">\r\n          <div className=\"w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n              <CheckCircle className=\"text-green-600 w-8 h-8\" \/>\r\n          <\/div>\r\n          <h2 className=\"font-serif text-2xl md:text-3xl text-green-800 mb-2\">\u00a1Solicitud Enviada!<\/h2>\r\n          \r\n          {reservation.emailSent ? (\r\n            <p className=\"text-green-700\">Hemos enviado tu solicitud a <span className=\"font-semibold\">{reservation.email}<\/span>.<br\/>Pronto nos pondremos en contacto contigo.<\/p>\r\n          ) : (\r\n            <div className=\"mt-4 p-4 bg-red-50 border border-red-200 rounded-lg text-left\">\r\n              <div className=\"flex items-start gap-3\">\r\n                 <AlertTriangle size={20} className=\"text-red-600 mt-1 flex-shrink-0\" \/>\r\n                 <div>\r\n                    <h4 className=\"text-red-800 font-bold text-sm mb-1\">Error enviando correo<\/h4>\r\n                    <p className=\"text-xs text-red-700 font-mono mb-2 break-all\">{reservation.emailError}<\/p>\r\n                 <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          )}\r\n\r\n        <\/div>\r\n        <div className=\"p-6 md:p-8 space-y-6\">\r\n          <div className=\"flex justify-between items-center pb-4 border-b border-stone-100\">\r\n              <span className=\"text-sm text-stone-500 uppercase tracking-wider font-semibold\">C\u00f3digo<\/span>\r\n              <span className=\"text-xl md:text-2xl font-mono font-bold\" style={{ color: BRAND_COLOR }}>{reservation.confirmationToken}<\/span>\r\n          <\/div>\r\n          <div className=\"grid grid-cols-2 gap-4 md:gap-6\">\r\n              <div><p className=\"text-xs uppercase font-bold text-stone-500\">Fecha<\/p><p className=\"text-base md:text-lg font-medium text-stone-800\">{reservation.date}<\/p><\/div>\r\n              <div><p className=\"text-xs uppercase font-bold text-stone-500\">Hora<\/p><p className=\"text-base md:text-lg font-medium text-stone-800\">{reservation.time}<\/p><\/div>\r\n              <div><p className=\"text-xs uppercase font-bold text-stone-500\">Personas<\/p><p className=\"text-base md:text-lg font-medium text-stone-800\">{reservation.guests}<\/p><\/div>\r\n              <div><p className=\"text-xs uppercase font-bold text-stone-500\">Zona<\/p><p className=\"text-base md:text-lg font-medium text-stone-800\">{reservation.zone}<\/p><\/div>\r\n          <\/div>\r\n          \r\n          <div className=\"bg-stone-50 p-4 rounded border border-stone-200 text-xs md:text-sm text-stone-600\">\r\n              \u00bfNecesitas hacer cambios? Cont\u00e1ctanos al <span className=\"font-bold\" style={{ color: BRAND_COLOR }}>{LOCATION_INFO.phone}<\/span>\r\n          <\/div>\r\n\r\n          <div className=\"flex gap-4 pt-4 flex-col sm:flex-row\">\r\n              <button type=\"button\" onClick={() => window.print()} className=\"cursor-pointer flex-1 flex items-center justify-center space-x-2 border border-stone-300 hover:bg-stone-50 text-stone-700 py-3 rounded-lg transition-colors\">\r\n                  <Printer size={18} \/><span>Imprimir<\/span>\r\n              <\/button>\r\n              <button \r\n                type=\"button\" \r\n                onClick={onReset} \r\n                className=\"cursor-pointer flex-1 flex items-center justify-center space-x-2 hover:opacity-90 py-3 rounded-lg transition-all text-white\"\r\n                style={{ backgroundColor: BRAND_COLOR }}\r\n              >\r\n                  <ArrowLeft size={18} \/><span>Nueva Reserva<\/span>\r\n              <\/button>\r\n          <\/div>\r\n          \r\n          {\/* CR\u00c9DITOS FOOTER (RIGHT PANEL) *\/}\r\n          <div className=\"text-center pt-6 mt-2\">\r\n            <a href=\"https:\/\/ds8marketing.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-[10px] text-stone-400 hover:text-stone-600 transition-colors no-underline\">\r\n              Sistema de reserva desarrollado por DS8 Agency\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  };\r\n\r\n  const ReservationForm = ({ onSuccess }) => {\r\n    const [date, setDate] = useState(null);\r\n    const [guests, setGuests] = useState(2);\r\n    const [selectedTime, setSelectedTime] = useState(null);\r\n    const [zone, setZone] = useState('Sal\u00f3n Principal');\r\n    const [name, setName] = useState('');\r\n    const [email, setEmail] = useState('');\r\n    const [phone, setPhone] = useState('');\r\n    const [notes, setNotes] = useState('');\r\n    const [slots, setSlots] = useState([]);\r\n    const [loadingSlots, setLoadingSlots] = useState(false);\r\n    const [submitting, setSubmitting] = useState(false);\r\n    const [step, setStep] = useState(1);\r\n    const [error, setError] = useState(null);\r\n    const [showWarning, setShowWarning] = useState(false);\r\n\r\n    useEffect(() => {\r\n      if (date) {\r\n        setLoadingSlots(true);\r\n        const dateStr = date.toISOString().split('T')[0];\r\n        api.checkAvailability(dateStr, guests)\r\n          .then(s => {\r\n              setSlots(s);\r\n              if (selectedTime && !s.find(sl => sl.time === selectedTime && sl.available)) setSelectedTime(null);\r\n          })\r\n          .catch(() => setError('Error de conexi\u00f3n con el servidor.'))\r\n          .finally(() => setLoadingSlots(false));\r\n      }\r\n    }, [date, guests]);\r\n\r\n    const handleGuestChange = (d) => {\r\n      const val = guests + d;\r\n      if (val >= CONFIG.MIN_GUESTS && val <= CONFIG.MAX_GUESTS) { \r\n          setGuests(val); \r\n          setSelectedTime(null);\r\n          if (val === 10 && d > 0) {\r\n              setShowWarning(true);\r\n          }\r\n      }\r\n    };\r\n\r\n    const handleSubmit = async (e) => {\r\n      e.preventDefault();\r\n      if (!name || !email || !phone) return setError('Por favor complete todos los campos obligatorios.');\r\n      \r\n      setSubmitting(true);\r\n      try {\r\n        const dateStr = date?.toLocaleDateString('es-PE', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });\r\n        \r\n        \/\/ Objeto interno para uso en confirmaci\u00f3n\r\n        \/\/ Nota: para la DB, el date debe ser YYYY-MM-DD. Para el email\/pantalla, texto.\r\n        \/\/ Hacemos un h\u00edbrido para el callback onSuccess\r\n        const dateISO = date?.toISOString().split('T')[0];\r\n        \r\n        const r = await api.createReservation({ \r\n          date: dateISO, \/\/ Enviamos ISO para la DB\r\n          time: selectedTime, \r\n          guests, \r\n          zone, \r\n          name, \r\n          email, \r\n          phone, \r\n          observations: notes \r\n        });\r\n        \r\n        \/\/ Ajustamos la fecha para mostrar bonito en la pantalla de \u00e9xito\r\n        r.date = dateStr; \r\n        \r\n        onSuccess(r);\r\n      } catch (e) { setError('Error al procesar la reserva. Intente nuevamente.'); } \r\n      finally { setSubmitting(false); }\r\n    };\r\n\r\n    return (\r\n      <div className=\"bg-white w-full flex flex-col md:flex-row min-h-[500px] shadow-sm border border-stone-200 rounded-lg overflow-hidden font-sans relative\">\r\n        \r\n        {\/* POPUP: AVISO GRUPO GRANDE *\/}\r\n        {showWarning && (\r\n            <div className=\"absolute inset-0 z-50 flex items-center justify-center bg-black\/50 p-4 backdrop-blur-sm\">\r\n                <div className=\"bg-white rounded-xl shadow-xl p-6 max-w-xs w-full text-center space-y-4 animate-in zoom-in-95 duration-200 border border-stone-100\">\r\n                    <div className=\"w-12 h-12 bg-amber-50 text-amber-600 rounded-full flex items-center justify-center mx-auto\">\r\n                        <Info size={24} \/>\r\n                    <\/div>\r\n                    <div className=\"space-y-2\">\r\n                        <h3 className=\"font-serif text-lg font-bold text-stone-800\">Aviso<\/h3>\r\n                        <p className=\"text-sm text-stone-600\">\r\n                            Nota: Reservas de 10 personas a m\u00e1s debe ser verificado por el restaurante.\r\n                        <\/p>\r\n                    <\/div>\r\n                    <button \r\n                        type=\"button\"\r\n                        onClick={() => setShowWarning(false)}\r\n                        className=\"cursor-pointer w-full py-2.5 rounded-lg text-white font-medium text-sm transition-opacity hover:opacity-90\"\r\n                        style={{ backgroundColor: BRAND_COLOR }}\r\n                    >\r\n                        Continuar con mi reservaci\u00f3n\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        )}\r\n\r\n        {\/* PANEL IZQUIERDO (NEGRO) *\/}\r\n        <div className=\"bg-stone-900 text-white p-6 md:p-8 md:w-1\/3 lg:w-1\/4 flex flex-col gap-6 relative\">\r\n           <div className=\"absolute inset-0 z-0\">\r\n             <img src={LOCATION_INFO.image} className=\"w-full h-full object-cover opacity-20\" alt=\"Restaurant\" \/>\r\n           <\/div>\r\n           <div className=\"relative z-10 mt-6\">\r\n             <h3 className=\"font-serif text-2xl text-white mb-6\">Tu Reserva<\/h3>\r\n             <div className=\"space-y-4 text-sm\">\r\n                <div className=\"flex items-center gap-3\"><Users className=\"text-stone-400 w-4 h-4\"\/><div><span className=\"block text-stone-500 text-[10px] uppercase font-bold\">Personas<\/span><span className=\"font-medium\">{guests}<\/span><\/div><\/div>\r\n                <div className=\"flex items-center gap-3\"><CalendarIcon className=\"text-stone-400 w-4 h-4\"\/><div><span className=\"block text-stone-500 text-[10px] uppercase font-bold\">Fecha<\/span><span className=\"font-medium\">{date ? date.toLocaleDateString('es-PE', {day:'numeric', month:'short'}) : '--'}<\/span><\/div><\/div>\r\n                <div className=\"flex items-center gap-3\"><Clock className=\"text-stone-400 w-4 h-4\"\/><div><span className=\"block text-stone-500 text-[10px] uppercase font-bold\">Hora<\/span><span className=\"font-medium\">{selectedTime || '--:--'}<\/span><\/div><\/div>\r\n             <\/div>\r\n\r\n             <div className=\"mt-6 pt-6 border-t border-stone-700\/50\">\r\n               <h4 className=\"text-white text-xs font-bold uppercase tracking-wider mb-3 flex items-center gap-2\">\r\n                 <Info size={14} \/> Horario de Atenci\u00f3n\r\n               <\/h4>\r\n               <div className=\"space-y-2\">\r\n                 <p className=\"text-xs text-stone-300\">\r\n                   <span className=\"font-semibold\" style={{ color: BRAND_COLOR }}>Lunes a S\u00e1bado:<\/span><br\/>12:00 pm. A 11:00 pm.\r\n                 <\/p>\r\n                 <p className=\"text-xs text-stone-300\">\r\n                   <span className=\"font-semibold\" style={{ color: BRAND_COLOR }}>Domingo:<\/span><br\/>12:00 pm. A 6:00 pm.\r\n                 <\/p>\r\n               <\/div>\r\n             <\/div>\r\n           <\/div>\r\n           \r\n           <div className=\"relative z-10 mt-auto pt-4 border-t border-stone-700\">\r\n              <p className=\"text-[10px] text-stone-600 font-sans tracking-wide\"><\/p>\r\n           <\/div>\r\n        <\/div>\r\n\r\n        {\/* PANEL DERECHO (BLANCO) *\/}\r\n        <div className=\"p-4 md:p-8 md:w-2\/3 lg:w-3\/4 bg-white relative flex flex-col\">\r\n          <div className=\"flex-grow\">\r\n            {step === 1 && (\r\n              <div className=\"space-y-6 animate-in fade-in duration-300\">\r\n                  <div><h2 className=\"font-serif text-2xl\" style={{ color: BRAND_COLOR }}>Seleccionar Mesa<\/h2><\/div>\r\n                  \r\n                  <div className=\"flex items-center gap-4 bg-white p-3 rounded-lg w-fit border border-stone-100 shadow-sm\">\r\n                      <span className=\"text-xs font-bold text-stone-400 uppercase tracking-wide\">Personas<\/span>\r\n                      <div className=\"flex items-center gap-3\">\r\n                          <button type=\"button\" onClick={() => handleGuestChange(-1)} disabled={guests <= CONFIG.MIN_GUESTS} className=\"cursor-pointer w-8 h-8 rounded-full bg-stone-100 text-stone-600 hover:text-white flex items-center justify-center border-0 transition-colors disabled:opacity-50\" style={{ '--hover-bg': BRAND_COLOR }} onMouseEnter={e => e.currentTarget.style.backgroundColor = BRAND_COLOR} onMouseLeave={e => e.currentTarget.style.backgroundColor = '#f5f5f4'}>-<\/button>\r\n                          <span className=\"font-bold w-6 text-center text-lg\">{guests}<\/span>\r\n                          <button type=\"button\" onClick={() => handleGuestChange(1)} disabled={guests >= CONFIG.MAX_GUESTS} className=\"cursor-pointer w-8 h-8 rounded-full bg-stone-100 text-stone-600 hover:text-white flex items-center justify-center border-0 transition-colors disabled:opacity-50\" style={{ '--hover-bg': BRAND_COLOR }} onMouseEnter={e => e.currentTarget.style.backgroundColor = BRAND_COLOR} onMouseLeave={e => e.currentTarget.style.backgroundColor = '#f5f5f4'}>+<\/button>\r\n                      <\/div>\r\n                  <\/div>\r\n\r\n                  <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\r\n                      <div><label className=\"block text-xs font-bold text-stone-500 mb-2 uppercase\">Fecha<\/label><Calendar selectedDate={date} onDateSelect={setDate} \/><\/div>\r\n                      <div>\r\n                          <label className=\"block text-xs font-bold text-stone-500 mb-2 uppercase\">Horario<\/label>\r\n                          {!date ? <div className=\"h-40 flex items-center justify-center bg-stone-50 rounded text-xs text-stone-400 border border-stone-100\">Elige fecha primero<\/div> : \r\n                          loadingSlots ? <div className=\"h-40 flex items-center justify-center\"><Spinner className=\"h-8 w-auto text-stone-400\"\/><\/div> :\r\n                          <div className=\"grid grid-cols-3 gap-2 max-h-60 overflow-y-auto custom-scrollbar pr-1\">\r\n                              {slots.map((s, i) => (\r\n                                  <button key={i} type=\"button\" disabled={!s.available} onClick={() => setSelectedTime(s.time)}\r\n                                      style={selectedTime === s.time ? { backgroundColor: BRAND_COLOR, color: 'white', borderColor: BRAND_COLOR } : {}}\r\n                                      className={`cursor-pointer py-2 text-xs rounded border transition-all ${selectedTime === s.time ? 'font-bold' : !s.available ? 'opacity-40 bg-stone-50 line-through' : 'hover:border-stone-400 hover:bg-stone-50'}`}\r\n                                  >{s.time}<\/button>\r\n                              ))}\r\n                              {slots.length === 0 && <p className=\"col-span-3 text-xs text-stone-400 text-center py-4\">No hay turnos disponibles.<\/p>}\r\n                          <\/div>}\r\n                          \r\n                          <div className=\"mt-4\">\r\n                              <label className=\"block text-xs font-bold text-stone-500 mb-2 uppercase\">Zona<\/label>\r\n                              <select \r\n                                value={zone} \r\n                                onChange={e=>setZone(e.target.value)} \r\n                                className=\"w-full p-2 border border-stone-300 rounded bg-white text-sm focus:outline-none\"\r\n                                style={{ borderColor: '#d6d3d1' }}\r\n                              >\r\n                                  <option value=\"Sal\u00f3n Principal\">Sal\u00f3n Principal<\/option>\r\n                                  <option value=\"Lounge\">Lounge<\/option>\r\n                                  <option value=\"Privado\">Privado<\/option>\r\n                                  <option value=\"Terraza\">Terraza<\/option>\r\n                              <\/select>\r\n                          <\/div>\r\n                      <\/div>\r\n                  <\/div>\r\n\r\n                  <div className=\"flex justify-end pt-4 border-t border-stone-100\">\r\n                      <button \r\n                        type=\"button\" \r\n                        onClick={() => setStep(2)} \r\n                        disabled={!date || !selectedTime} \r\n                        style={{ backgroundColor: (!date || !selectedTime) ? '#d6d3d1' : BRAND_COLOR }}\r\n                        className=\"cursor-pointer flex items-center gap-2 text-white px-6 py-3 rounded-lg font-medium disabled:cursor-not-allowed transition-all shadow-md hover:shadow-lg\"\r\n                      >\r\n                          Continuar <ArrowRight size={16} \/>\r\n                      <\/button>\r\n                  <\/div>\r\n              <\/div>\r\n            )}\r\n\r\n            {step === 2 && (\r\n              <div className=\"space-y-5 animate-in slide-in-from-right-4 duration-300\">\r\n                  <div className=\"flex justify-between items-center\">\r\n                      <h2 className=\"font-serif text-2xl\" style={{ color: BRAND_COLOR }}>Finalizar Reserva<\/h2>\r\n                      <button type=\"button\" onClick={()=>setStep(1)} className=\"text-xs underline text-stone-500 hover:text-stone-800 cursor-pointer\">Volver<\/button>\r\n                  <\/div>\r\n                  <form onSubmit={handleSubmit} className=\"space-y-4\">\r\n                      <input type=\"text\" required value={name} onChange={e=>setName(e.target.value)} className=\"w-full p-3 border border-stone-300 rounded outline-none placeholder-stone-400 focus:border-opacity-100\" style={{ borderColor: '#d6d3d1' }} onFocus={e => e.target.style.borderColor = BRAND_COLOR} onBlur={e => e.target.style.borderColor = '#d6d3d1'} placeholder=\"Nombre Completo\" \/>\r\n                      <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n                          <input type=\"email\" required value={email} onChange={e=>setEmail(e.target.value)} className=\"w-full p-3 border border-stone-300 rounded outline-none placeholder-stone-400\" style={{ borderColor: '#d6d3d1' }} onFocus={e => e.target.style.borderColor = BRAND_COLOR} onBlur={e => e.target.style.borderColor = '#d6d3d1'} placeholder=\"Email\" \/>\r\n                          <input type=\"tel\" required value={phone} onChange={e=>setPhone(e.target.value)} className=\"w-full p-3 border border-stone-300 rounded outline-none placeholder-stone-400\" style={{ borderColor: '#d6d3d1' }} onFocus={e => e.target.style.borderColor = BRAND_COLOR} onBlur={e => e.target.style.borderColor = '#d6d3d1'} placeholder=\"Tel\u00e9fono\" \/>\r\n                      <\/div>\r\n                      <textarea rows={3} value={notes} onChange={e=>setNotes(e.target.value)} className=\"w-full p-3 border border-stone-300 rounded outline-none resize-none placeholder-stone-400\" style={{ borderColor: '#d6d3d1' }} onFocus={e => e.target.style.borderColor = BRAND_COLOR} onBlur={e => e.target.style.borderColor = '#d6d3d1'} placeholder=\"Observaciones \/ Alergias (Opcional)\" \/>\r\n                      \r\n                      {error && <div className=\"text-red-600 text-sm bg-red-50 p-2 rounded border border-red-100 flex items-center gap-2\"><AlertCircle size={14}\/> {error}<\/div>}\r\n                      \r\n                      <button \r\n                        type=\"submit\" \r\n                        disabled={submitting} \r\n                        className=\"cursor-pointer w-full bg-stone-900 font-serif text-lg py-3 rounded hover:bg-black transition-colors flex justify-center items-center text-white\"\r\n                        style={{ backgroundColor: BRAND_COLOR }}\r\n                      >\r\n                          {submitting ? <Spinner className=\"mr-2 h-5 w-auto text-white\"\/> : null}\r\n                          {submitting ? 'Confirmando...' : 'Confirmar Reserva'}\r\n                      <\/button>\r\n                      <p className=\"text-xs text-center text-stone-400 mt-2\">Sus datos est\u00e1n seguros y ser\u00e1n usados solo para la gesti\u00f3n de su reserva.<\/p>\r\n                  <\/form>\r\n              <\/div>\r\n            )}\r\n          <\/div>\r\n\r\n          {\/* CR\u00c9DITOS FOOTER (RIGHT PANEL) *\/}\r\n          <div className=\"text-center pt-6 mt-2\">\r\n            <a href=\"https:\/\/ds8marketing.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-[10px] text-stone-400 hover:text-stone-600 transition-colors no-underline\">\r\n              Sistema de reserva desarrollado por DS8 Agency\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  };\r\n\r\n  const App = () => {\r\n    const [view, setView] = useState('form');\r\n    const [data, setData] = useState(null);\r\n    \r\n    const scrollToTop = () => {\r\n        const el = document.getElementById('la-cuadra-widget');\r\n        if(el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n    };\r\n\r\n    const handleSuccess = (d) => { setData(d); setView('conf'); scrollToTop(); };\r\n    const handleReset = () => { setData(null); setView('form'); scrollToTop(); };\r\n\r\n    return (\r\n      <div className=\"w-full bg-white\">\r\n        {view === 'form' ? <ReservationForm onSuccess={handleSuccess} \/> : <Confirmation reservation={data} onReset={handleReset} \/>}\r\n      <\/div>\r\n    );\r\n  }\r\n\r\n  \/\/ MONTAJE SEGURO DE LA APLICACI\u00d3N\r\n  const rootElement = document.getElementById('la-cuadra-widget');\r\n  if (rootElement) {\r\n    const root = createRoot(rootElement);\r\n    root.render(<App \/>);\r\n  } else {\r\n    console.error(\"DS8 Error: Widget container not found.\");\r\n  }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8811636 elementor-widget elementor-widget-spacer\" data-id=\"8811636\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c0a1aa4 elementor-section-content-top elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c0a1aa4\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wide\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-90a1f95\" data-id=\"90a1f95\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-64a4982 elementor-widget elementor-widget-neuros_gallery\" data-id=\"64a4982\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"neuros_gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n        <div class=\"neuros-gallery-widget isotope\">\n\n            \n            <div class=\"archive-listing\">\n                <div class=\"gallery-wrapper isotope-trigger gallery-masonry columns-2\">\n                                                \n                            <div class=\"gallery-item-wrapper isotope-item elementor-repeater-item-554cf50\">\n                                <div class=\"gallery-item\">\n                                    <a class=\"gallery-item-link\" href=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-13-min.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"64a4982\" data-elementor-lightbox-title=\"Privado\" data-elementor-lightbox-description=\"Privado\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjQ4MTMsInVybCI6Imh0dHBzOlwvXC93ZWIuZ3Vhcmd1ZXJvLmNvbVwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyNVwvMTFcL3dlYi1ndWFyZ3Vlcm8tMTMtbWluLmpwZyIsInNsaWRlc2hvdyI6IjY0YTQ5ODIifQ%3D%3D\"><span class=\"gallery-item-media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-13-min.jpg\" class=\"attachment-full size-full wp-image-24813\" alt=\"Privado\" srcset=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-13-min.jpg 1024w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-13-min-300x225.jpg 300w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-13-min-768x576.jpg 768w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-13-min-16x12.jpg 16w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-13-min-500x374.jpg 500w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-13-min-384x287.jpg 384w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-13-min-320x239.jpg 320w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-13-min-600x450.jpg 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/span><span class=\"gallery-item-content-wrapper\"><span class=\"gallery-item-content\"><span class=\"post-title\">Privado<\/span><\/span><\/span><\/a>                                <\/div>\n                            <\/div>\n                                                    \n                            <div class=\"gallery-item-wrapper isotope-item elementor-repeater-item-82aba2d\">\n                                <div class=\"gallery-item\">\n                                    <a class=\"gallery-item-link\" href=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-3-min-1.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"64a4982\" data-elementor-lightbox-title=\"Terraza\" data-elementor-lightbox-description=\"Terraza\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjQ4MTAsInVybCI6Imh0dHBzOlwvXC93ZWIuZ3Vhcmd1ZXJvLmNvbVwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyNVwvMTFcL3dlYi1ndWFyZ3Vlcm8tMy1taW4tMS5qcGciLCJzbGlkZXNob3ciOiI2NGE0OTgyIn0%3D\"><span class=\"gallery-item-media\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-3-min-1.jpg\" class=\"attachment-full size-full wp-image-24810\" alt=\"Terraza\" srcset=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-3-min-1.jpg 1024w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-3-min-1-300x225.jpg 300w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-3-min-1-768x576.jpg 768w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-3-min-1-16x12.jpg 16w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-3-min-1-500x374.jpg 500w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-3-min-1-384x287.jpg 384w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-3-min-1-320x239.jpg 320w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-3-min-1-600x450.jpg 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/span><span class=\"gallery-item-content-wrapper\"><span class=\"gallery-item-content\"><span class=\"post-title\">Terraza<\/span><\/span><\/span><\/a>                                <\/div>\n                            <\/div>\n                                                    \n                            <div class=\"gallery-item-wrapper isotope-item elementor-repeater-item-b60b30b\">\n                                <div class=\"gallery-item\">\n                                    <a class=\"gallery-item-link\" href=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-14-min.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"64a4982\" data-elementor-lightbox-title=\"Lounge\" data-elementor-lightbox-description=\"Lounge\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjQ4MTEsInVybCI6Imh0dHBzOlwvXC93ZWIuZ3Vhcmd1ZXJvLmNvbVwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyNVwvMTFcL3dlYi1ndWFyZ3Vlcm8tMTQtbWluLmpwZyIsInNsaWRlc2hvdyI6IjY0YTQ5ODIifQ%3D%3D\"><span class=\"gallery-item-media\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-14-min.jpg\" class=\"attachment-full size-full wp-image-24811\" alt=\"Lounge\" srcset=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-14-min.jpg 1024w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-14-min-300x225.jpg 300w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-14-min-768x576.jpg 768w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-14-min-16x12.jpg 16w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-14-min-500x374.jpg 500w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-14-min-384x287.jpg 384w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-14-min-320x239.jpg 320w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-14-min-600x450.jpg 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/span><span class=\"gallery-item-content-wrapper\"><span class=\"gallery-item-content\"><span class=\"post-title\">Lounge<\/span><\/span><\/span><\/a>                                <\/div>\n                            <\/div>\n                                                    \n                            <div class=\"gallery-item-wrapper isotope-item elementor-repeater-item-565b4df\">\n                                <div class=\"gallery-item\">\n                                    <a class=\"gallery-item-link\" href=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-5-min.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"64a4982\" data-elementor-lightbox-title=\"Sal\u00f3n principal\" data-elementor-lightbox-description=\"Sal\u00f3n principal\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjQ4MTIsInVybCI6Imh0dHBzOlwvXC93ZWIuZ3Vhcmd1ZXJvLmNvbVwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyNVwvMTFcL3dlYi1ndWFyZ3Vlcm8tNS1taW4uanBnIiwic2xpZGVzaG93IjoiNjRhNDk4MiJ9\"><span class=\"gallery-item-media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-5-min.jpg\" class=\"attachment-full size-full wp-image-24812\" alt=\"Sal\u00f3n principal\" srcset=\"https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-5-min.jpg 1024w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-5-min-300x225.jpg 300w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-5-min-768x576.jpg 768w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-5-min-16x12.jpg 16w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-5-min-500x374.jpg 500w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-5-min-384x287.jpg 384w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-5-min-320x239.jpg 320w, https:\/\/web.guarguero.com\/wp-content\/uploads\/2025\/11\/web-guarguero-5-min-600x450.jpg 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/span><span class=\"gallery-item-content-wrapper\"><span class=\"gallery-item-content\"><span class=\"post-title\">Sal\u00f3n<\/span><\/span><\/span><\/a>                                <\/div>\n                            <\/div>\n                        <div class=\"grid-sizer\"><\/div>                <\/div>\n                            <\/div>\n        <\/div>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0cabde7 elementor-widget elementor-widget-spacer\" data-id=\"0cabde7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-796a00e elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"796a00e\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4dea170\" data-id=\"4dea170\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-80ba296 elementor-widget elementor-widget-google_maps\" data-id=\"80ba296\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"google_maps.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-custom-embed\">\n\t\t\t<iframe loading=\"lazy\"\n\t\t\t\t\tsrc=\"https:\/\/maps.google.com\/maps?q=Av.%20la%20Paz%201025%2C%20Miraflores%2C%20Lima&#038;t=m&#038;z=17&#038;output=embed&#038;iwloc=near\"\n\t\t\t\t\ttitle=\"Av. la Paz 1025, Miraflores, Lima\"\n\t\t\t\t\taria-label=\"Av. la Paz 1025, Miraflores, Lima\"\n\t\t\t><\/iframe>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-24613","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/web.guarguero.com\/en\/wp-json\/wp\/v2\/pages\/24613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.guarguero.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web.guarguero.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web.guarguero.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web.guarguero.com\/en\/wp-json\/wp\/v2\/comments?post=24613"}],"version-history":[{"count":174,"href":"https:\/\/web.guarguero.com\/en\/wp-json\/wp\/v2\/pages\/24613\/revisions"}],"predecessor-version":[{"id":25511,"href":"https:\/\/web.guarguero.com\/en\/wp-json\/wp\/v2\/pages\/24613\/revisions\/25511"}],"wp:attachment":[{"href":"https:\/\/web.guarguero.com\/en\/wp-json\/wp\/v2\/media?parent=24613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}