{"id":633,"date":"2026-01-09T19:07:38","date_gmt":"2026-01-09T19:07:38","guid":{"rendered":"https:\/\/mariamezcal.ec\/?page_id=633"},"modified":"2026-07-06T10:53:01","modified_gmt":"2026-07-06T15:53:01","slug":"reservas","status":"publish","type":"page","link":"https:\/\/mariamezcal.ec\/index.php\/reservas\/","title":{"rendered":"Reservas"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"633\" class=\"elementor elementor-633\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5e17ce8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5e17ce8\" data-element_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-top-column elementor-element elementor-element-bec89ae\" data-id=\"bec89ae\" data-element_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-d8f88ea elementor-widget elementor-widget-heading\" data-id=\"d8f88ea\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.19.0 - 07-02-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><p class=\"elementor-heading-title elementor-size-default\">Reservas<\/p>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c49ea20 elementor-widget-divider--view-line_icon elementor-view-default elementor-widget-divider--element-align-center elementor-widget elementor-widget-divider\" data-id=\"c49ea20\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.19.0 - 07-02-2024 *\/\n.elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#0c0d0e;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{margin:0 var(--divider-element-spacing);flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{display:block;content:\"\";border-block-end:0;flex-grow:1;border-block-start:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider--element-align-start .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-start .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-start .elementor-divider__element{margin-inline-start:0}.elementor-widget-divider--element-align-end .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-end .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-end .elementor-divider__element{margin-inline-end:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-block-start:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class*=elementor-widget-divider--view]) .elementor-divider-separator{width:100%;min-height:var(--divider-pattern-height);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url)}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}.e-con-inner>.elementor-widget-divider,.e-con>.elementor-widget-divider{width:var(--container-widget-width,100%);--flex-grow:var(--container-widget-flex-grow)}<\/style>\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon elementor-divider__element\">\n\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-spa\"><\/i><\/div>\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-38fe9fe elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"38fe9fe\" data-element_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-50 elementor-inner-column elementor-element elementor-element-5f509cf\" data-id=\"5f509cf\" data-element_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-4534839 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"4534839\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Vive el momento a otro nivel.<\/h2>\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<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-c026690\" data-id=\"c026690\" data-element_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-1f13d1b elementor-widget elementor-widget-html\" data-id=\"1f13d1b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<div style=\"display:flex; gap:12px; justify-content:center; flex-wrap:wrap;\">\r\n\r\n  <!-- BOTON WHATSAPP -->\r\n  <a href=\"https:\/\/wa.me\/593978959073?text=Hola,%20me%20gustar%C3%ADa%20recibir%20informaci%C3%B3n\" target=\"_blank\"\r\n     style=\"width:160px; background:#25D366; color:white; padding:12px; \r\n            border-radius:6px; text-decoration:none; \r\n            display:flex; justify-content:center; align-items:center; gap:8px; \r\n            font-weight:bold; text-align:center;\">\r\n    \r\n    <i class=\"fab fa-whatsapp\" style=\"font-size:18px;\"><\/i>\r\n    HOST VIRTUAL\r\n  <\/a>\r\n\r\n  <!-- BOTON RESERVA -->\r\n  <a href=\"https:\/\/api.whatsapp.com\/send?phone=593961982090&text=%C2%A1Hola!%20Quiero%20hacer%20una%20reserva%20VIP.\"\r\n     style=\"width:160px; background:#c9972c; color:white; padding:5px; \r\n            border-radius:6px; text-decoration:none; \r\n            display:flex; justify-content:center; align-items:center; \r\n            font-weight:bold; text-align:center;\">\r\n    \r\n    QUIERO RESERVAR UNA MESA VIP\r\n  <\/a>\r\n\r\n<\/div>\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-d987d5c elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d987d5c\" data-element_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-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-819c999\" data-id=\"819c999\" data-element_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-61fdc6d elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-html\" data-id=\"61fdc6d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<body>\r\n  <div class=\"leyenda_msg\">\r\n    Completa el formulario con tus datos para reservar ahora\r\n    <span class=\"flecha\">\u2193<\/span>\r\n  <\/div>\r\n  <div class=\"reserva-wrapper\">\r\n  <!-- PESTA\u00d1AS -->\r\n    <div class=\"tabs-reserva\">\r\n      <button type=\"button\" class=\"tab-btn active\" data-tab=\"tab-personal\">\r\n        Informaci\u00f3n\r\n      <\/button>\r\n\r\n      <button type=\"button\" class=\"tab-btn\" data-tab=\"tab-reserva\">\r\n        Reserva\r\n      <\/button>\r\n    <\/div>\r\n\r\n  <form id=\"form-reserva\" class=\"reserva-form\" method=\"POST\">\r\n\r\n\r\n    <!-- TAB 1: INFO PERSONAL -->\r\n    <div id=\"tab-personal\" class=\"tab-content active\">\r\n\r\n      <div class=\"reserva-row\">\r\n        <label>Nombre y Apellido *<\/label>\r\n        <input type=\"text\" name=\"nombre\" required>\r\n      <\/div>\r\n\r\n      <div class=\"reserva-row\">\r\n        <label>Email *<\/label>\r\n        <input type=\"email\" name=\"email\"\r\n        placeholder=\"cliente@email.com\" required>\r\n      <\/div>\r\n\r\n      <div class=\"reserva-row\">\r\n        <label>Tel\u00e9fono *<\/label>\r\n        <input type=\"text\" name=\"telefono\" id=\"telefono\" required  minlength=\"10\" maxlength=\"12\" pattern=\"[0-9]{10,12}\" inputmode=\"numeric\" placeholder=\"0999999999\"\r\n          oninput=\"this.value = this.value.replace(\/[^0-9]\/g, '')\">\r\n      <\/div>\r\n\r\n      <div class=\"reserva-row\" id=\"row_fecha_cumple\" style=\"display:block;\">\r\n        <label for=\"fecha_cumple\">Fecha de cumplea\u00f1os (Opcional)<\/label>\r\n\r\n        <div class=\"cumple-wrap\">\r\n          <input type=\"text\" id=\"fecha_cumple\" name=\"fecha_cumple\" placeholder=\"dd\/mm\/aaaa\" inputmode=\"numeric\"\r\n            maxlength=\"10\" autocomplete=\"bday\">\r\n\r\n          <button type=\"button\" id=\"btn-cal-cumple\" class=\"btn-calendario\" aria-label=\"Abrir calendario cumplea\u00f1os\">\r\n            \ud83d\udcc5\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <button type=\"button\" class=\"btn-siguiente-tab\" data-tab=\"tab-reserva\">\r\n        Siguiente\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n    <!-- TAB 2: RESERVA -->\r\n    <div id=\"tab-reserva\" class=\"tab-content\">\r\n\r\n      <div class=\"reserva-row\">\r\n        <label>N\u00famero de personas *<\/label>\r\n        <input id=\"numero_de_personas\" type=\"number\" name=\"numero_de_personas\" min=\"4\" max=\"10\" required>\r\n        <small class=\"hint-personas\"><strong>Obs: <\/strong>M\u00ednimo 4 y m\u00e1ximo 10 personas por reserva.<\/small>\r\n      <\/div>\r\n\r\n      <div class=\"reserva-row\">\r\n        <label>Fecha de reserva *<\/label>\r\n\r\n        <div id=\"fecha-seleccionada-txt\" style=\"margin:6px 0 10px; font-size:16px; color:#6b4f2a;\">\r\n        <\/div>\r\n\r\n        <div class=\"leyenda\">\r\n          <span class=\"color-dia-ocupado\"><\/span> D\u00edas ocupados\r\n        <\/div>\r\n\r\n        <input type=\"hidden\" id=\"fecha\" name=\"fecha\">\r\n\r\n        <div id=\"fecha_bloque\" class=\"fecha_bloque\">\r\n\r\n          <div id=\"mes-titulo\" class=\"mes-titulo\"><\/div>\r\n\r\n          <div class=\"fecha-strip\">\r\n            <div id=\"fecha-15\" class=\"fecha-15\"><\/div>\r\n\r\n            <button type=\"button\" id=\"btn-calendario\" class=\"btn-calendario\" aria-label=\"Abrir calendario\">\r\n              \ud83d\udcc5\r\n            <\/button>\r\n          <\/div>\r\n\r\n          <input type=\"text\" id=\"fecha-picker\" class=\"fecha-picker\" readonly>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div id=\"cover-info\" style=\"display:none; margin-top:10px; margin-bottom:10px\"><\/div>\r\n\r\n      <div class=\"reserva-row\" id=\"row-horas\">\r\n        <input type=\"hidden\" id=\"hora\" name=\"hora\">\r\n        <div id=\"horas\" class=\"horas-grid\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"reserva-row acp-condiciones-row\">\r\n        <label class=\"check-label\" for=\"acp_condiciones\">\r\n          <input type=\"checkbox\" id=\"acp_condiciones\" name=\"acp_condiciones\" value=\"1\" required>\r\n          <span class=\"check-custom\"><\/span>\r\n          <span>\r\n            Acepto los\r\n            <a href=\"\/index.php\/politicas\/\" target=\"_blank\"><u>\r\n                t\u00e9rminos y condiciones del servicio\r\n              <\/u><\/a>.\r\n          <\/span>\r\n        <\/label>\r\n      <\/div>\r\n\r\n      <button type=\"button\" class=\"btn-volver-tab\" data-tab=\"tab-personal\">\r\n        Volver\r\n      <\/button>\r\n\r\n      <button type=\"submit\" class=\"reserva-btn\">Reservar<\/button>\r\n\r\n    <\/div>\r\n\r\n  <\/form>\r\n  <\/div>\r\n\r\n  <div id=\"reserva-msg\"><\/div>\r\n\r\n<\/body>\r\n\r\n<style>\r\n  body {\r\n    background-color: #010100;\r\n  }\r\n\r\n  .reserva-form {\r\n    max-width: 600px;\r\n    margin: 30px auto;\r\n    padding: 20px;\r\n    background: #fff;\r\n    border-radius: 12px;\r\n  }\r\n\r\n  .reserva-row {\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .reserva-form input {\r\n    width: 100%;\r\n    padding: 10px;\r\n    border-radius: 8px;\r\n    border: 1px solid #ccc;\r\n  }\r\n\r\n  label {\r\n    color: #bc6c25;\r\n    ;\r\n  }\r\n\r\n  .calendar-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(7, 1fr);\r\n    gap: 10px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .calendar-day {\r\n    text-align: center;\r\n    padding: 10px;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    border: 2px solid #ccc;\r\n  }\r\n\r\n  .disponible {\r\n    background: #f0b844;\r\n  }\r\n\r\n  .completo {\r\n    border: 2px solid red;\r\n    color: red;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  .seleccionado {\r\n    background: #0b3d1a;\r\n    color: #fff;\r\n  }\r\n\r\n  .horas-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 10px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .hora-btn {\r\n    padding: 10px;\r\n    border-radius: 8px;\r\n    border: 1px solid #ccc;\r\n    cursor: pointer;\r\n    background: #eee;\r\n  }\r\n\r\n  .hora-btn.activa {\r\n    background: black;\r\n    color: white;\r\n  }\r\n\r\n  form#form-reserva button.reserva-btn {\r\n    width: 100%;\r\n    padding: 12px;\r\n    background: #d49a30;\r\n    border: none;\r\n    color: white;\r\n    border-radius: 8px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n    transition: background 0.3s, color 0.3s;\r\n  }\r\n\r\n  form#form-reserva button.reserva-btn:hover {\r\n    background: #000000;\r\n    color: #fff;\r\n  }\r\n\r\n  .flatpickr-day.dia-ocupado {\r\n    background: #b8945c !important;\r\n    color: white !important;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n  }\r\n\r\n\r\n  .flatpickr-day.dia-ocupado:hover {\r\n    background: #b8945c !important;\r\n  }\r\n\r\n  form#form-reserva input:not([type=\"checkbox\"]) {\r\n    width: 100%;\r\n    padding: 10px;\r\n    border: none;\r\n    border-bottom: 0.25px solid #B9945C;\r\n    border-radius: 0;\r\n    outline: none;\r\n    transition: border-color 0.3s;\r\n    background: transparent;\r\n  }\r\n\r\n  form#form-reserva input:focus {\r\n    border-bottom-color: #b87b1f;\r\n  }\r\n\r\n  .check-label {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    color: #bc6c25;\r\n    cursor: pointer;\r\n    line-height: 1.4;\r\n    position: relative;\r\n  }\r\n\r\n  \/* ocultamos el checkbox real *\/\r\n  .check-label input[type=\"checkbox\"] {\r\n    position: absolute;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    width: 1px;\r\n    height: 1px;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* caja visible *\/\r\n  .check-custom {\r\n    width: 18px;\r\n    height: 18px;\r\n    min-width: 18px;\r\n    border: 2px solid #d49a30;\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    position: relative;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* fondo al marcar *\/\r\n  .check-label input[type=\"checkbox\"]:checked+.check-custom {\r\n    background: #d49a30;\r\n    border-color: #d49a30;\r\n  }\r\n\r\n  \/* palomita blanca *\/\r\n  .check-label input[type=\"checkbox\"]:checked+.check-custom::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 0px;\r\n    width: 5px;\r\n    height: 10px;\r\n    border: solid #fff;\r\n    border-width: 0 2px 2px 0;\r\n    transform: rotate(45deg);\r\n  }\r\n\r\n  \/* foco accesible *\/\r\n  .check-label input[type=\"checkbox\"]:focus+.check-custom {\r\n    box-shadow: 0 0 0 3px rgba(212, 154, 48, 0.20);\r\n  }\r\n\r\n  .leyenda {\r\n    display: flex;\r\n    align-items: center;\r\n    font-size: 15px;\r\n    color: #000000;\r\n    margin-bottom: 10px;\r\n    margin-left: 10px;\r\n\r\n  }\r\n\r\n  .color-dia-ocupado {\r\n    display: inline-block;\r\n    width: 10px;\r\n    height: 10px;\r\n    background-color: #d49a30;\r\n    border-radius: 50%;\r\n    margin-right: 8px;\r\n    margin-left: 0%\r\n  }\r\n\r\n\r\n  .leyenda_msg {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 8px;\r\n\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 15px;\r\n    color: #fff;\r\n    margin: 0 auto 10px auto;\r\n    padding: 0 15px;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .flecha {\r\n    font-weight: 600;\r\n    font-size: 18px;\r\n    animation: bajar 1s infinite;\r\n  }\r\n\r\n  .tabs-reserva {\r\n    display: flex;\r\n    gap: 8px;\r\n    margin-bottom: 20px;\r\n    border-bottom: 1px solid #e2cba8;\r\n  }\r\n\r\n  .tab-btn {\r\n    flex: 1;\r\n    padding: 12px 10px;\r\n    background: #faf6ef;\r\n    border: 1px solid #d49a30;\r\n    border-bottom: none;\r\n    color: #bc6c25;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n    border-radius: 10px 10px 0 0;\r\n  }\r\n\r\n  .tab-btn.active {\r\n    background: #d49a30;\r\n    color: #fff;\r\n  }\r\n\r\n  .tab-content {\r\n    display: none;\r\n  }\r\n\r\n  .tab-content.active {\r\n    display: block;\r\n  }\r\n\r\n    .btn-siguiente-tab{\r\n    width: 25%;\r\n    padding: 6px;\r\n    background: #000;\r\n    border: none;\r\n    color: #fff;\r\n    border-radius: 8px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n    margin-top: 10px;\r\n    margin-bottom: 10px;\r\n    display: block;\r\n    margin-left: auto;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .btn-volver-tab {\r\n    width: 25%;\r\n    padding: 6px;\r\n    background: #000;\r\n    border: none;\r\n    color: #fff;\r\n    border-radius: 8px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n    margin-top: 10px;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .btn-siguiente-tab:hover,\r\n  .btn-volver-tab:hover {\r\n    background: #d49a30;\r\n  }\r\n\r\n  @keyframes bajar {\r\n    0% {\r\n      transform: translateY(0);\r\n    }\r\n\r\n    50% {\r\n      transform: translateY(3px);\r\n    }\r\n\r\n    100% {\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n\r\n  .fecha-strip {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    margin: 5px 5px 5px 5px;\r\n\r\n  }\r\n\r\n  .fecha-15 {\r\n    display: flex;\r\n    gap: 10px;\r\n    overflow-x: auto;\r\n    padding: 6px 2px;\r\n    flex: 1;\r\n  }\r\n\r\n  .fecha-chip {\r\n    min-width: 44px;\r\n    height: 44px;\r\n    border-radius: 12px;\r\n    border: 1.5px solid #d49a30;\r\n    background: #fff;\r\n    cursor: pointer;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    line-height: 1.05;\r\n    user-select: none;\r\n  }\r\n\r\n  .fecha-chip .dia {\r\n    font-size: 13px;\r\n    color: #000;\r\n  }\r\n\r\n  .fecha-chip .dow {\r\n    font-size: 11px;\r\n    opacity: .75;\r\n  }\r\n\r\n  .fecha-chip.activa {\r\n    background: #000000;\r\n    border-color: #000000;\r\n    color: #fff;\r\n  }\r\n\r\n  .fecha-chip.activa .dia,\r\n  .fecha-chip.activa .dow {\r\n    color: #fff;\r\n  }\r\n\r\n  .fecha-chip.ocupado {\r\n    background: #b8945c;\r\n    border-color: #b8945c;\r\n    color: #fff;\r\n    cursor: pointer;\r\n    opacity: .9;\r\n    opacity: .9;\r\n  }\r\n\r\n  .btn-calendario {\r\n    width: 44px;\r\n    height: 44px;\r\n    border-radius: 12px;\r\n    border: 1.5px solid #d49a30;\r\n    background: #fff;\r\n    cursor: pointer;\r\n    font-size: 18px;\r\n  }\r\n\r\n  .fecha-picker {\r\n    position: absolute;\r\n    opacity: 0;\r\n    width: 1px;\r\n    height: 1px;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .loading-fechas {\r\n    font-size: 12px;\r\n    opacity: .75;\r\n    margin: 6px 0 4px;\r\n  }\r\n\r\n  .cumple-wrap {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .cumple-wrap input {\r\n    flex: 1;\r\n  }\r\n\r\n  a {\r\n    color: #bc6c25\r\n  }\r\n\r\n\r\n\r\n  #row_fecha_cumple input[type=\"date\"] {\r\n    width: 100%;\r\n  }\r\n\r\n  #mes-titulo {\r\n\r\n    margin: 6px 6px 10px;\r\n    opacity: .75;\r\n    letter-spacing: .5px;\r\n    text-align: right;\r\n\r\n  }\r\n\r\n  #fecha_bloque {\r\n    padding: 6px 0 10px;\r\n    border: solid 0.25px #ccc;\r\n    border-radius: 12px;\r\n\r\n  }\r\n\r\n  .hint-personas {\r\n    display: none;\r\n    font-size: 12px;\r\n    margin-top: 6px;\r\n    color: #6b4f2a;\r\n  }\r\n\r\n  #cover-info {\r\n    background: #faf6ef;\r\n    border-left: 4px solid #d49a30;\r\n    padding: 10px 12px;\r\n    font-size: 13px;\r\n    border-radius: 6px;\r\n  }\r\n\r\n\r\n  #numero_de_personas:focus+.hint-personas {\r\n    display: block;\r\n  }\r\n\r\n  #fecha-seleccionada-txt {\r\n    background: #faf6ef;\r\n    border-left: 4px solid #d49a30;\r\n    padding: 8px 10px;\r\n    border-radius: 6px;\r\n    text-align: center;\r\n\r\n\r\n  }\r\n  \r\n.reserva-wrapper {\r\n  max-width: 680px;\r\n  margin: 30px auto;\r\n  padding: 0 15px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.tabs-reserva {\r\n  display: flex;\r\n  gap: 10px;\r\n  margin-bottom: 0;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n.tab-btn {\r\n  flex: 1;\r\n  padding: 6px 6px;\r\n  background: #faf6ef;\r\n  border: 1px solid #FFF1D8;\r\n  color: #bc6c25;\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  border-radius: 12px 12px 0 0;\r\n  font-size: 15px;\r\n}\r\n\r\n.tab-btn.active {\r\n  background: #d49a30;\r\n  color: #fff;\r\n  border-color: #d49a30;\r\n}\r\n\r\n.reserva-form {\r\n  width: 100%;\r\n  max-width: none;\r\n  margin: 0;\r\n  padding: 25px 20px 20px;\r\n  background: #fff;\r\n  border-radius: 0 0 12px 12px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.tab-content {\r\n  display: none;\r\n}\r\n\r\n.tab-content.active {\r\n  display: block;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .btn-siguiente-tab {\r\n    width: 50%;\r\n    margin-left: 0;\r\n    white-space: normal;\r\n    display: block;\r\n    margin-left: auto;\r\n  }\r\n  \r\n  .btn-volver-tab {\r\n    width: 50%;\r\n    margin-left: 0;\r\n    white-space: normal;\r\n  }\r\n}\r\n\r\n\r\n\r\n<\/style>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\r\n\r\n<script>\r\n\r\n\r\n  document.addEventListener('DOMContentLoaded', function () {\r\n\r\n    const form = document.getElementById('form-reserva');\r\n    \r\n    const telefonoInput = document.getElementById('telefono');\r\n\r\nif (telefonoInput) {\r\n  function validarTelefono() {\r\n    const telefono = telefonoInput.value.trim();\r\n\r\n    if (telefono === '') {\r\n      telefonoInput.setCustomValidity('Ingresa tu n\u00famero de tel\u00e9fono.');\r\n    } else if (telefono.length < 10) {\r\n      telefonoInput.setCustomValidity('El tel\u00e9fono debe tener m\u00ednimo 10 d\u00edgitos.');\r\n    } else if (telefono.length > 12) {\r\n      telefonoInput.setCustomValidity('El tel\u00e9fono no debe superar los 12 d\u00edgitos.');\r\n    } else {\r\n      telefonoInput.setCustomValidity('');\r\n    }\r\n  }\r\n\r\n  telefonoInput.addEventListener('input', function () {\r\n    this.value = this.value.replace(\/[^0-9]\/g, '');\r\n    validarTelefono();\r\n  });\r\n\r\n  telefonoInput.addEventListener('invalid', validarTelefono);\r\n}\r\n\r\n    function mostrarTab(tabId) {\r\n      document.querySelectorAll('.tab-content').forEach(tab => {\r\n        tab.classList.remove('active');\r\n      });\r\n\r\n      document.querySelectorAll('.tab-btn').forEach(btn => {\r\n        btn.classList.remove('active');\r\n      });\r\n\r\n      document.getElementById(tabId)?.classList.add('active');\r\n      document.querySelector(`.tab-btn[data-tab=\"${tabId}\"]`)?.classList.add('active');\r\n    }\r\n\r\n  document.querySelectorAll('.tab-btn, .btn-siguiente-tab, .btn-volver-tab').forEach(btn => {\r\n  btn.addEventListener('click', function () {\r\n    const tabId = this.dataset.tab;\r\n\r\n    \r\n    if (this.classList.contains('btn-siguiente-tab')) {\r\n      const tabActual = document.getElementById('tab-personal');\r\n      const campos = tabActual.querySelectorAll('input, select, textarea');\r\n\r\n      for (const campo of campos) {\r\n        if (!campo.checkValidity()) {\r\n          campo.reportValidity();\r\n          return;\r\n        }\r\n      }\r\n    }\r\n\r\n    mostrarTab(tabId);\r\n  });\r\n});\r\n\r\n\r\n    form?.addEventListener('invalid', function (e) {\r\n      const tab = e.target.closest('.tab-content');\r\n\r\n      if (tab && tab.id) {\r\n        mostrarTab(tab.id);\r\n      }\r\n    }, true);\r\n\r\n\r\n    if (window.__reserva_iniciada__) return;\r\n    window.__reserva_iniciada__ = true;\r\n\r\n    let coverInfo = {\r\n      enabled: false,\r\n      precio: 0,\r\n      consum_enabled: false,\r\n      consum_precio: 0,\r\n      aplica: { tarde: true, noche: true },\r\n      aplica_en_hora: false,\r\n      cover_aplica: false,\r\n      cover_precio: 0,\r\n      consumo_aplica: false,\r\n      consumo_precio: 0\r\n    };\r\n\r\n\r\n    const fechaHidden = document.getElementById('fecha');\r\n    const fechaStrip = document.getElementById('fecha-15');\r\n    const btnCal = document.getElementById('btn-calendario');\r\n    const fechaPicker = document.getElementById('fecha-picker');\r\n\r\n    const horasDiv = document.getElementById('horas');\r\n    const horaInput = document.getElementById('hora');\r\n\r\n    const mesTitulo = document.getElementById('mes-titulo');\r\n\r\n    const promoCumpleCheck = document.getElementById('promo_cumple');\r\n    const rowFechaCumple = document.getElementById('row_fecha_cumple');\r\n    const fechaCumpleInput = document.getElementById('fecha_cumple');\r\n\r\n    const acpCond = document.getElementById('acp_condiciones');\r\n\r\n    const btnCalCumple = document.getElementById('btn-cal-cumple');\r\n    let fpCumple;\r\n\r\n\r\n    const submitBtn = form.querySelector('button.reserva-btn');\r\n    const submitBtnDefaultText = submitBtn.textContent || 'Reservar';\r\n\r\n    function actualizarEstadoSubmit() {\r\n      const aceptado = !!acpCond?.checked;\r\n\r\n      submitBtn.disabled = !aceptado;\r\n      submitBtn.style.opacity = aceptado ? '1' : '0.55';\r\n      submitBtn.style.cursor = aceptado ? 'pointer' : 'not-allowed';\r\n    }\r\n\r\n    if (acpCond) {\r\n      acpCond.addEventListener('change', actualizarEstadoSubmit);\r\n      actualizarEstadoSubmit();\r\n    }\r\n\r\n\r\n    const personasInput = document.getElementById('numero_de_personas');\r\n\r\n    if (personasInput) {\r\n\r\n\r\n      const validarPersonas = () => {\r\n        const v = personasInput.value;\r\n        const n = parseInt(v, 10);\r\n\r\n\r\n        if (v === '') {\r\n          personasInput.setCustomValidity('');\r\n          return;\r\n        }\r\n\r\n        if (Number.isNaN(n)) {\r\n          personasInput.setCustomValidity('Ingresa un n\u00famero v\u00e1lido.');\r\n          return;\r\n        }\r\n\r\n        if (n < 4) {\r\n          personasInput.setCustomValidity('El m\u00ednimo por reserva es 4 personas.');\r\n        } else if (n > 10) {\r\n          personasInput.setCustomValidity(\r\n            'El m\u00e1ximo por reserva es 10 personas. Para m\u00e1s de 10, realiza otra reserva.'\r\n          );\r\n        } else {\r\n          personasInput.setCustomValidity('');\r\n        }\r\n      };\r\n\r\n      personasInput.addEventListener('input', validarPersonas);\r\n      personasInput.addEventListener('change', validarPersonas);\r\n      personasInput.addEventListener('invalid', validarPersonas);\r\n    }\r\n\r\n\r\n    const fechaTxt = document.getElementById('fecha-seleccionada-txt');\r\n    let fp;\r\n    let diasOcupadosSet = new Set();\r\n\r\n    if (fechaCumpleInput) {\r\n      fpCumple = flatpickr(fechaCumpleInput, {\r\n        dateFormat: \"d\/m\/Y\",\r\n        clickOpens: false,\r\n        allowInput: true,\r\n        disableMobile: true,\r\n        maxDate: \"today\",\r\n        locale: { firstDayOfWeek: 1 }\r\n      });\r\n\r\n      if (btnCalCumple) {\r\n        btnCalCumple.addEventListener('click', (e) => {\r\n          e.preventDefault();\r\n          e.stopPropagation();\r\n          fpCumple && fpCumple.open();\r\n        });\r\n      }\r\n\r\n      fechaCumpleInput.addEventListener('input', function () {\r\n        let v = this.value.replace(\/\\D\/g, '').slice(0, 8);\r\n\r\n        if (v.length > 4) {\r\n          v = v.slice(0, 2) + '\/' + v.slice(2, 4) + '\/' + v.slice(4);\r\n        } else if (v.length > 2) {\r\n          v = v.slice(0, 2) + '\/' + v.slice(2);\r\n        }\r\n\r\n        this.value = v;\r\n      });\r\n    }\r\n\r\n    render15Dias();\r\n\r\n    fetch('\/wp-admin\/admin-ajax.php?action=get_fechas_completas')\r\n      .then(res => res.json())\r\n      .then(diasOcupados => {\r\n\r\n        const normalizadas = (diasOcupados || []).map(s => {\r\n          s = String(s).trim();\r\n          if (\/^\\d{8}$\/.test(s)) {\r\n            return `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}`;\r\n          }\r\n          return s;\r\n        });\r\n\r\n        diasOcupadosSet = new Set(normalizadas);\r\n\r\n\r\n        render15Dias();\r\n\r\n        fp = flatpickr(fechaPicker, {\r\n          dateFormat: \"Y-m-d\",\r\n          minDate: \"today\",\r\n          \/\/maxDate: new Date().fp_incr(30),\r\n          clickOpens: false,\r\n          allowInput: false,\r\n          locale: { firstDayOfWeek: 1 },\r\n\r\n          onDayCreate(_, __, ___, dayElem) {\r\n            const fecha = dayElem.dateObj.toISOString().split('T')[0];\r\n            if (diasOcupadosSet.has(fecha)) {\r\n              dayElem.classList.add('dia-ocupado');\r\n            }\r\n          },\r\n\r\n          onChange(_, dateStr) {\r\n            seleccionarFecha(dateStr);\r\n          }\r\n        });\r\n\r\n        btnCal.addEventListener('click', e => {\r\n          e.preventDefault();\r\n          e.stopPropagation();\r\n          fp && fp.open();\r\n        });\r\n      })\r\n      .catch(err => console.error('Error cargando d\u00edas:', err));\r\n\r\n    function render15Dias() {\r\n      fechaStrip.innerHTML = '';\r\n\r\n      const dow = ['D', 'L', 'M', 'Mi', 'J', 'V', 'S'];\r\n      const hoy = new Date();\r\n      hoy.setHours(0, 0, 0, 0);\r\n\r\n      if (mesTitulo) {\r\n        const meses = new Set();\r\n\r\n        for (let i = 0; i < 9; i++) {\r\n          const d = new Date(hoy.getTime());\r\n          d.setDate(hoy.getDate() + i);\r\n\r\n          const key = d.toLocaleDateString('es-EC', { month: 'long' });\r\n          meses.add(key.toLowerCase());\r\n        }\r\n\r\n        mesTitulo.textContent = Array.from(meses).join(' \u00b7 ');\r\n      }\r\n\r\n      for (let i = 0; i < 9; i++) {\r\n        const d = new Date(hoy.getTime());\r\n        d.setDate(hoy.getDate() + i);\r\n\r\n        \/\/const iso = d.toISOString().split('T')[0];\r\n        const iso = getLocalYMD(d);\r\n\r\n        const chip = document.createElement('div');\r\n        chip.className = 'fecha-chip';\r\n        chip.dataset.fecha = iso;\r\n        chip.innerHTML = `\r\n      <div class=\"dia\">${String(d.getDate()).padStart(2, '0')}<\/div>\r\n      <div class=\"dow\">${dow[d.getDay()]}<\/div>\r\n    `;\r\n\r\n        if (diasOcupadosSet.has(iso)) {\r\n          chip.classList.add('ocupado');\r\n        }\r\n\r\n        chip.addEventListener('mousedown', e => {\r\n          e.preventDefault();\r\n          seleccionarFecha(iso);\r\n        });\r\n\r\n        fechaStrip.appendChild(chip);\r\n      }\r\n\r\n      \/\/seleccionarFecha(hoy.toISOString().split('T')[0]);\r\n      seleccionarFecha(getLocalYMD(hoy));\r\n    }\r\n\r\n\r\n    \/*function toggleFechaCumple() {\r\n      if (!promoCumpleCheck || !rowFechaCumple || !fechaCumpleInput) return;\r\n    \r\n      if (promoCumpleCheck.checked) {\r\n        rowFechaCumple.style.display = 'block';\r\n      } else {\r\n        rowFechaCumple.style.display = 'none';\r\n        fechaCumpleInput.required = false;\r\n        fechaCumpleInput.value = '';\r\n        if (fpCumple) fpCumple.clear();\r\n      }\r\n    }\r\n    \r\n    if (promoCumpleCheck) {\r\n      promoCumpleCheck.addEventListener('change', toggleFechaCumple);\r\n      toggleFechaCumple(); \r\n    }*\/\r\n\r\n    async function seleccionarFecha(dateStr) {\r\n      if (!dateStr) return;\r\n\r\n      fechaHidden.value = dateStr;\r\n      pintarFechaSeleccionada(dateStr);\r\n\r\n      horaInput.value = '';\r\n      horasDiv.innerHTML = '';\r\n\r\n      document.querySelectorAll('.fecha-chip').forEach(c => c.classList.remove('activa'));\r\n      document.querySelector(`.fecha-chip[data-fecha=\"${dateStr}\"]`)?.classList.add('activa');\r\n\r\n      fp && fp.setDate(dateStr, false);\r\n\r\n      await actualizarCover(dateStr);\r\n      mostrarHoras();\r\n      actualizarTextoBoton(dateStr);\r\n\r\n\r\n    }\r\n\r\n    function mm_bloqueHora(hora) {\r\n\r\n      const h = (hora || '').substring(0, 5);\r\n\r\n      if (['12:00', '13:00', '14:00', '15:00', '16:00'].includes(h)) return 'tarde';\r\n\r\n      if (['17:00', '17:30', '18:00', '18:30', '19:00'].includes(h)) return 'noche';\r\n\r\n      \/\/if (h === '17:00' || h === '00:00') return 'noche';\r\n\r\n      return '';\r\n    }\r\n\r\n    function mm_coverAplicaAHora(hora) {\r\n      if (!coverInfo?.enabled) return false;\r\n\r\n      const bloque = mm_bloqueHora(hora);\r\n      if (!bloque) return false;\r\n\r\n      const aplica = coverInfo.aplica || {};\r\n      return bloque === 'tarde' ? !!aplica.tarde : !!aplica.noche;\r\n    }\r\n\r\n    async function actualizarCover(fecha) {\r\n      const box = document.getElementById('cover-info');\r\n      if (!box) return;\r\n\r\n      box.style.display = 'none';\r\n      box.innerHTML = '';\r\n\r\n      const info = await consultarCover(fecha);\r\n\r\n      if (!info.enabled && !info.consum_enabled) return;\r\n\r\n      const aplica = info.aplica || {};\r\n      let aplicaTxt = '';\r\n      if (aplica.tarde && aplica.noche) aplicaTxt = 'Tarde y noche';\r\n      else if (aplica.tarde) aplicaTxt = 'Solo tarde';\r\n      else if (aplica.noche) aplicaTxt = 'Solo noche';\r\n      else aplicaTxt = 'No aplica a horarios';\r\n\r\n      let html = `<strong>Condiciones vigentes<\/strong><br>`;\r\n\r\n      if (info.enabled) {\r\n        html += `Cover: <strong>$${Number(info.precio).toFixed(2)}<\/strong> por persona.<br>`;\r\n      }\r\n\r\n      if (info.consum_enabled) {\r\n        html += `Consumo m\u00ednimo: <strong>$${Number(info.consum_precio).toFixed(2)}<\/strong> por persona.<br>`;\r\n      }\r\n\r\n      html += `<span style=\"opacity:.85;\">Aplica: ${aplicaTxt}<\/span>`;\r\n\r\n      box.innerHTML = html;\r\n      box.style.display = 'block';\r\n    }\r\n\r\n\r\n    \/\/\/\/\r\n\r\n\r\n    function pintarFechaSeleccionada(isoDate) {\r\n      if (!fechaTxt) return;\r\n      if (!isoDate) { fechaTxt.textContent = ''; return; }\r\n\r\n      const d = new Date(isoDate + 'T00:00:00');\r\n      const texto = d.toLocaleDateString('es-EC', {\r\n        weekday: 'long',\r\n        year: 'numeric',\r\n        month: 'long',\r\n        day: '2-digit'\r\n      });\r\n\r\n\r\n      fechaTxt.textContent = texto.charAt(0).toUpperCase() + texto.slice(1);\r\n    }\r\n\r\n\r\n\r\n    function actualizarTextoBoton(dateStr) {\r\n      const lleno = diasOcupadosSet.has(dateStr);\r\n      submitBtn.textContent = lleno ? 'Lista de espera' : submitBtnDefaultText;\r\n    }\r\n\r\n    async function consultarCover(fecha, hora = '') {\r\n      try {\r\n        const fd = new FormData();\r\n        fd.append('action', 'mm_get_cover');\r\n        fd.append('fecha', fecha);\r\n        fd.append('hora', hora);\r\n\r\n        const res = await fetch('\/wp-admin\/admin-ajax.php', { method: 'POST', body: fd });\r\n        const json = await res.json();\r\n\r\n        coverInfo = json.success ? json.data : {\r\n          enabled: false,\r\n          precio: 0,\r\n          consum_enabled: false,\r\n          consum_precio: 0,\r\n          aplica: { tarde: true, noche: true },\r\n          aplica_en_hora: false,\r\n          cover_aplica: false,\r\n          cover_precio: 0,\r\n          consumo_aplica: false,\r\n          consumo_precio: 0\r\n        };\r\n      } catch (e) {\r\n        coverInfo = {\r\n          enabled: false,\r\n          precio: 0,\r\n          consum_enabled: false,\r\n          consum_precio: 0,\r\n          aplica: { tarde: true, noche: true },\r\n          aplica_en_hora: false,\r\n          cover_aplica: false,\r\n          cover_precio: 0,\r\n          consumo_aplica: false,\r\n          consumo_precio: 0\r\n        };\r\n      }\r\n\r\n      return coverInfo;\r\n    }\r\n\r\n    function getLocalYMD(date = new Date()) {\r\n      const y = date.getFullYear();\r\n      const m = String(date.getMonth() + 1).padStart(2, '0');\r\n      const d = String(date.getDate()).padStart(2, '0');\r\n      return `${y}-${m}-${d}`;\r\n    }\r\n\r\n    function normalizarHoraHHMM(hora) {\r\n      return String(hora || '').substring(0, 5);\r\n    }\r\n\r\n    function horaYaPaso(horaBtn, fechaSeleccionada) {\r\n      const hoy = new Date();\r\n      const hoyYMD = getLocalYMD(hoy);\r\n\r\n      if (fechaSeleccionada !== hoyYMD) return false;\r\n\r\n      const hora = normalizarHoraHHMM(horaBtn);\r\n\r\n      const horasAlmuerzo = ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '17:30', '18:00', '18:30'];\r\n\r\n      if (!horasAlmuerzo.includes(hora)) {\r\n        return false;\r\n      }\r\n\r\n      const [hh, mm] = hora.split(':').map(Number);\r\n\r\n      const horaBoton = new Date();\r\n      horaBoton.setHours(hh, mm, 0, 0);\r\n\r\n      return hoy >= horaBoton;\r\n    }\r\n\r\n    \/* function mostrarHoras() {\r\n     const rowHoras = document.getElementById('row-horas');\r\n     horasDiv.innerHTML = '';\r\n   \r\n     if (!rowHoras.querySelector('label')) {\r\n       const label = document.createElement('label');\r\n       label.textContent = 'Horario *';\r\n       rowHoras.prepend(label);\r\n     }\r\n     const pad2 = (n) => String(n).padStart(2, '0');\r\n     const addSeparator = (text, withLine = false) => {\r\n       const sep = document.createElement('div');\r\n       sep.textContent = text;\r\n       sep.style.gridColumn = '1 \/ -1';\r\n       sep.style.fontWeight = 'bold';\r\n       sep.style.margin = '8px 0 4px';\r\n       \r\n       if (withLine) {\r\n       sep.style.borderTop = '1px solid #ccc';\r\n       sep.style.paddingTop = '8px';\r\n       sep.style.marginTop = '12px';\r\n     }\r\n   \r\n       \r\n       horasDiv.appendChild(sep);\r\n     };\r\n   \r\n     const addHourButton = (hora) => {\r\n       const btn = document.createElement('button');\r\n       btn.type = 'button';\r\n       btn.className = 'hora-btn';\r\n       btn.textContent = hora;\r\n   \r\n       btn.onclick = () => {\r\n         document.querySelectorAll('.hora-btn').forEach(b => b.classList.remove('activa'));\r\n         btn.classList.add('activa');\r\n         horaInput.value = hora;\r\n       };\r\n   \r\n       horasDiv.appendChild(btn);\r\n     };\r\n   \r\n   \r\n     addSeparator('Almuerzo');\r\n   \r\n     for (let h = 12; h <= 16; h++) {\r\n       addHourButton(`${pad2(h)}:00`);\r\n     }\r\n   \r\n     addSeparator('Noche', true);\r\n     \r\n     const addNocheButton = (label, horaSentinel) => {\r\n     const btn = document.createElement('button');\r\n     btn.type = 'button';\r\n     btn.className = 'hora-btn';\r\n     btn.textContent = label;\r\n   \r\n     btn.onclick = () => {\r\n       document.querySelectorAll('.hora-btn').forEach(b => b.classList.remove('activa'));\r\n       btn.classList.add('activa');\r\n   \r\n       \r\n       horaInput.value = horaSentinel;\r\n     };\r\n   \r\n     horasDiv.appendChild(btn);\r\n   };\r\n   \r\n       addNocheButton('Toda la noche', '00:00:00');\r\n       addNocheButton('Solo unas horas', '17:00:00');\r\n   }*\/\r\n\r\n    function mostrarHoras() {\r\n      const rowHoras = document.getElementById('row-horas');\r\n      horasDiv.innerHTML = '';\r\n\r\n      if (!rowHoras.querySelector('label')) {\r\n        const label = document.createElement('label');\r\n        label.textContent = 'Horario *';\r\n        rowHoras.prepend(label);\r\n      }\r\n\r\n      const fechaSeleccionada = fechaHidden.value;\r\n      const pad2 = (n) => String(n).padStart(2, '0');\r\n\r\n      const addSeparator = (text, withLine = false) => {\r\n        const sep = document.createElement('div');\r\n        sep.textContent = text;\r\n        sep.style.gridColumn = '1 \/ -1';\r\n        sep.style.fontWeight = 'bold';\r\n        sep.style.margin = '8px 0 4px';\r\n\r\n        if (withLine) {\r\n          sep.style.borderTop = '1px solid #ccc';\r\n          sep.style.paddingTop = '8px';\r\n          sep.style.marginTop = '12px';\r\n        }\r\n\r\n        horasDiv.appendChild(sep);\r\n      };\r\n\r\n      const addHourButton = (horaVisible, horaValor = null) => {\r\n        const valorReal = horaValor || horaVisible;\r\n\r\n        const btn = document.createElement('button');\r\n        btn.type = 'button';\r\n        btn.className = 'hora-btn';\r\n        btn.textContent = horaVisible;\r\n\r\n        const deshabilitada = horaYaPaso(valorReal, fechaSeleccionada);\r\n\r\n        if (deshabilitada) {\r\n          btn.disabled = true;\r\n          btn.style.opacity = '0.45';\r\n          btn.style.cursor = 'not-allowed';\r\n          btn.title = 'Este horario ya no est\u00e1 disponible para hoy';\r\n        } else {\r\n          btn.onclick = () => {\r\n            document.querySelectorAll('.hora-btn').forEach(b => b.classList.remove('activa'));\r\n            btn.classList.add('activa');\r\n            horaInput.value = valorReal;\r\n          };\r\n        }\r\n\r\n        horasDiv.appendChild(btn);\r\n      };\r\n\r\n      addSeparator('Tarde - Almuerzo');\r\n\r\n      for (let h = 12; h <= 16; h++) {\r\n        addHourButton(`${pad2(h)}:00`, `${pad2(h)}:00:00`);\r\n      }\r\n\r\n      addSeparator('Noche - (Entrada m\u00e1xima de las reservas 7pm)', true);\r\n\r\n      \/\/addHourButton('Toda la noche', '00:00:00');\r\n      \/\/addHourButton('Solo unas horas', '17:00:00');\r\n\r\n      for (let h = 17; h <= 19; h++) {\r\n        for (let m of [0, 30]) {\r\n          if (h === 19 && m > 0) continue;\r\n\r\n          const hour = pad2(h);\r\n          const min = pad2(m);\r\n\r\n          addHourButton(`${hour}:${min}`, `${hour}:${min}:00`);\r\n        }\r\n      }\r\n\r\n    }\r\n\r\n    form.addEventListener('submit', async (e) => {\r\n      e.preventDefault();\r\n      \r\n        if (!form.checkValidity()) {\r\n            form.reportValidity();\r\n            return;\r\n          }\r\n\r\n      if (!acpCond || !acpCond.checked) {\r\n        Swal.fire({\r\n          icon: 'warning',\r\n          title: 'Aviso',\r\n          text: 'Debe aceptar los t\u00e9rminos y condiciones para continuar.',\r\n          confirmButtonColor: '#d49a30'\r\n        });\r\n        return;\r\n      }\r\n\r\n      if (!fechaHidden.value || !horaInput.value) {\r\n        Swal.fire({\r\n          icon: 'warning',\r\n          title: 'Oops\u2026',\r\n          text: 'Seleccione fecha y hora',\r\n          confirmButtonColor: '#d49a30'\r\n        });\r\n        return;\r\n      }\r\n\r\n      const cover = await consultarCover(fechaHidden.value, horaInput.value);\r\n\r\n      if (cover.aplica_en_hora) {\r\n        let titulo = 'Condiciones de la reserva';\r\n        let html = '';\r\n\r\n        if (cover.cover_aplica) {\r\n          html += `<p>Este horario tiene un <strong>cover de $${Number(cover.cover_precio).toFixed(2)}<\/strong> por persona.<\/p>`;\r\n        }\r\n\r\n        if (cover.consumo_aplica) {\r\n          html += `<p>Este horario tiene un <strong>consumo m\u00ednimo de $${Number(cover.consumo_precio).toFixed(2)}<\/strong> por persona.<\/p>`;\r\n        }\r\n\r\n        html += `<p>\u00bfDeseas continuar con la reserva?<\/p>`;\r\n\r\n        const r = await Swal.fire({\r\n          icon: 'warning',\r\n          title: titulo,\r\n          html: html,\r\n          showCancelButton: true,\r\n          confirmButtonText: 'Aceptar',\r\n          cancelButtonText: 'Cancelar',\r\n          confirmButtonColor: '#d49a30'\r\n        });\r\n\r\n        if (!r.isConfirmed) {\r\n          return;\r\n        }\r\n      }\r\n      \/\/\/\/\r\n\r\n      const lleno = diasOcupadosSet.has(fechaHidden.value);\r\n      submitBtn.disabled = true;\r\n      submitBtn.textContent = 'Enviando...';\r\n      submitBtn.style.opacity = '0.7';\r\n      submitBtn.style.cursor = 'not-allowed';\r\n\r\n\r\n      Swal.fire({\r\n        title: lleno ? 'Enviando a lista de espera...' : 'Procesando reserva...',\r\n        text: 'Por favor espera un momento',\r\n        allowOutsideClick: false,\r\n        allowEscapeKey: false,\r\n        didOpen: () => Swal.showLoading()\r\n      });\r\n\r\n      try {\r\n        const data = new FormData(form);\r\n        data.append('action', 'crear_reserva');\r\n\r\n        const res = await fetch('\/wp-admin\/admin-ajax.php', {\r\n          method: 'POST',\r\n          body: data\r\n        });\r\n\r\n        const resp = await res.json();\r\n\r\n\r\n        Swal.close();\r\n\r\n        if (resp.success) {\r\n          Swal.fire({\r\n            icon: 'success',\r\n            title: 'Reserva registrada',\r\n            text: resp.data?.message || 'Listo',\r\n            html: `\r\n          <div style=\"font-size:15px; margin-bottom:10px;\">\r\n            ${resp.data?.message || 'Listo'}\r\n          <\/div>\r\n    \r\n          <div style=\"\r\n            margin-top:12px;\r\n            padding:10px;\r\n            border-left:4px solid #d49a30;\r\n            background:#faf6ef;\r\n            font-size:13px;\r\n          \">\r\n            <strong>Aviso importante<\/strong><br>\r\n            ${resp.data.notice}\r\n          <\/div>\r\n        `,\r\n            confirmButtonColor: '#d49a30'\r\n          }).then(() => {\r\n            form.reset();\r\n            horasDiv.innerHTML = '';\r\n            window.location.href = 'https:\/\/mariamezcal.ec\/index.php\/reserva-realizada\/';\r\n          });\r\n        } else {\r\n          Swal.fire({\r\n            icon: 'error',\r\n            title: 'Error',\r\n            text: resp.data?.message || 'No se pudo registrar la reserva',\r\n            confirmButtonColor: '#d49a30'\r\n          });\r\n\r\n\r\n          submitBtn.disabled = false;\r\n          submitBtn.style.opacity = '';\r\n          submitBtn.style.cursor = '';\r\n          actualizarTextoBoton(fechaHidden.value);\r\n        }\r\n\r\n      } catch (err) {\r\n        Swal.close();\r\n\r\n        Swal.fire({\r\n          icon: 'error',\r\n          title: 'Error',\r\n          text: 'Error al enviar la reserva',\r\n          confirmButtonColor: '#d49a30'\r\n        });\r\n\r\n        submitBtn.disabled = false;\r\n        submitBtn.style.opacity = '';\r\n        submitBtn.style.cursor = '';\r\n        actualizarTextoBoton(fechaHidden.value);\r\n      }\r\n    });\r\n\r\n  });\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e658d1e elementor-widget-divider--view-line_icon elementor-view-default elementor-widget-divider--element-align-center elementor-widget elementor-widget-divider\" data-id=\"e658d1e\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon elementor-divider__element\">\n\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-spa\"><\/i><\/div>\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-75dd2df elementor-widget elementor-widget-heading\" data-id=\"75dd2df\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">AVISO<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71f8db7 elementor-widget elementor-widget-heading\" data-id=\"71f8db7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Todas las reservas del horario de la noche ingresar\u00e1n hasta las 19:00. Una vez ingresadas las reservas, el ingreso estar\u00e1 sujeto a la disponibilidad del establecimiento.<\/h2>\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":"<p>Reservas Vive el momento a otro nivel. HOST VIRTUAL QUIERO RESERVAR UNA MESA VIP Completa el formulario con tus datos para reservar ahora \u2193 Informaci\u00f3n Reserva Nombre y Apellido * Email * Tel\u00e9fono * Fecha de cumplea\u00f1os (Opcional) \ud83d\udcc5 Siguiente N\u00famero de personas * Obs: M\u00ednimo 4 y m\u00e1ximo 10 personas por reserva. Fecha de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_joinchat":[]},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Reservas - Maria Mezcal Ecuador<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mariamezcal.ec\/index.php\/reservas\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reservas - Maria Mezcal Ecuador\" \/>\n<meta property=\"og:description\" content=\"Reservas Vive el momento a otro nivel. HOST VIRTUAL QUIERO RESERVAR UNA MESA VIP Completa el formulario con tus datos para reservar ahora \u2193 Informaci\u00f3n Reserva Nombre y Apellido * Email * Tel\u00e9fono * Fecha de cumplea\u00f1os (Opcional) \ud83d\udcc5 Siguiente N\u00famero de personas * Obs: M\u00ednimo 4 y m\u00e1ximo 10 personas por reserva. Fecha de [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mariamezcal.ec\/index.php\/reservas\/\" \/>\n<meta property=\"og:site_name\" content=\"Maria Mezcal Ecuador\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-06T15:53:01+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mariamezcal.ec\/index.php\/reservas\/\",\"url\":\"https:\/\/mariamezcal.ec\/index.php\/reservas\/\",\"name\":\"Reservas - Maria Mezcal Ecuador\",\"isPartOf\":{\"@id\":\"https:\/\/mariamezcal.ec\/#website\"},\"datePublished\":\"2026-01-09T19:07:38+00:00\",\"dateModified\":\"2026-07-06T15:53:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/mariamezcal.ec\/index.php\/reservas\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mariamezcal.ec\/index.php\/reservas\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mariamezcal.ec\/index.php\/reservas\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/mariamezcal.ec\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Reservas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mariamezcal.ec\/#website\",\"url\":\"https:\/\/mariamezcal.ec\/\",\"name\":\"Maria Mezcal Ecuador\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/mariamezcal.ec\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mariamezcal.ec\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/mariamezcal.ec\/#organization\",\"name\":\"Maria Mezcal Ecuador\",\"url\":\"https:\/\/mariamezcal.ec\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/mariamezcal.ec\/#\/schema\/logo\/image\/\",\"url\":\"\/wp-content\/uploads\/2023\/08\/maria-mezcal-cumbaya.webp\",\"contentUrl\":\"\/wp-content\/uploads\/2023\/08\/maria-mezcal-cumbaya.webp\",\"width\":236,\"height\":71,\"caption\":\"Maria Mezcal Ecuador\"},\"image\":{\"@id\":\"https:\/\/mariamezcal.ec\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Reservas - Maria Mezcal Ecuador","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mariamezcal.ec\/index.php\/reservas\/","og_locale":"es_ES","og_type":"article","og_title":"Reservas - Maria Mezcal Ecuador","og_description":"Reservas Vive el momento a otro nivel. HOST VIRTUAL QUIERO RESERVAR UNA MESA VIP Completa el formulario con tus datos para reservar ahora \u2193 Informaci\u00f3n Reserva Nombre y Apellido * Email * Tel\u00e9fono * Fecha de cumplea\u00f1os (Opcional) \ud83d\udcc5 Siguiente N\u00famero de personas * Obs: M\u00ednimo 4 y m\u00e1ximo 10 personas por reserva. Fecha de [&hellip;]","og_url":"https:\/\/mariamezcal.ec\/index.php\/reservas\/","og_site_name":"Maria Mezcal Ecuador","article_modified_time":"2026-07-06T15:53:01+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mariamezcal.ec\/index.php\/reservas\/","url":"https:\/\/mariamezcal.ec\/index.php\/reservas\/","name":"Reservas - Maria Mezcal Ecuador","isPartOf":{"@id":"https:\/\/mariamezcal.ec\/#website"},"datePublished":"2026-01-09T19:07:38+00:00","dateModified":"2026-07-06T15:53:01+00:00","breadcrumb":{"@id":"https:\/\/mariamezcal.ec\/index.php\/reservas\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mariamezcal.ec\/index.php\/reservas\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mariamezcal.ec\/index.php\/reservas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/mariamezcal.ec\/"},{"@type":"ListItem","position":2,"name":"Reservas"}]},{"@type":"WebSite","@id":"https:\/\/mariamezcal.ec\/#website","url":"https:\/\/mariamezcal.ec\/","name":"Maria Mezcal Ecuador","description":"","publisher":{"@id":"https:\/\/mariamezcal.ec\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mariamezcal.ec\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/mariamezcal.ec\/#organization","name":"Maria Mezcal Ecuador","url":"https:\/\/mariamezcal.ec\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mariamezcal.ec\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2023\/08\/maria-mezcal-cumbaya.webp","contentUrl":"\/wp-content\/uploads\/2023\/08\/maria-mezcal-cumbaya.webp","width":236,"height":71,"caption":"Maria Mezcal Ecuador"},"image":{"@id":"https:\/\/mariamezcal.ec\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/mariamezcal.ec\/index.php\/wp-json\/wp\/v2\/pages\/633"}],"collection":[{"href":"https:\/\/mariamezcal.ec\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mariamezcal.ec\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mariamezcal.ec\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mariamezcal.ec\/index.php\/wp-json\/wp\/v2\/comments?post=633"}],"version-history":[{"count":972,"href":"https:\/\/mariamezcal.ec\/index.php\/wp-json\/wp\/v2\/pages\/633\/revisions"}],"predecessor-version":[{"id":2972,"href":"https:\/\/mariamezcal.ec\/index.php\/wp-json\/wp\/v2\/pages\/633\/revisions\/2972"}],"wp:attachment":[{"href":"https:\/\/mariamezcal.ec\/index.php\/wp-json\/wp\/v2\/media?parent=633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}