{"id":17,"date":"2026-03-03T03:20:28","date_gmt":"2026-03-03T03:20:28","guid":{"rendered":"https:\/\/playahawai.com\/booking\/?page_id=17"},"modified":"2026-03-10T16:34:41","modified_gmt":"2026-03-10T16:34:41","slug":"booking","status":"publish","type":"page","link":"https:\/\/playahawai.com\/booking\/","title":{"rendered":"Booking"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"17\" class=\"elementor elementor-17\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-484f0a6a e-flex e-con-boxed e-con e-parent\" data-id=\"484f0a6a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-41da754d elementor-widget elementor-widget-text-editor\" data-id=\"41da754d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<style>\n    :root {\n        --ph-orange: #F97316;\n        --ph-orange-light: #FFF7ED;\n        --ph-purple: #8B5CF6;\n        --ph-purple-light: #F5F3FF;\n        --ph-red: #EF4444;\n        --ph-red-light: #FEF2F2;\n        --ph-green: #22c55e;\n        --ph-green-light: #f0fdf4;\n        --ph-dark: #1E293B;\n        --ph-slate-100: #F1F5F9;\n        --ph-slate-200: #E2E8F0;\n        --ph-slate-400: #94A3B8;\n    }<\/p>\n<p>    .ph-app { font-family: 'Plus Jakarta Sans', sans-serif; max-width: 1200px; margin: 40px auto; color: var(--ph-dark); padding: 0 15px; }<\/p>\n<p>    \/* Animaciones *\/\n    .ph-fade-up { animation: phFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }\n    @keyframes phFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n    @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } 100% { transform: translateX(0); } }<\/p>\n<p>    \/* Inputs Generales *\/\n    .ph-input { width: 100%; padding: 14px 18px; border-radius: 14px; border: 2px solid var(--ph-slate-200); background: white; font-weight: 700; outline: none; transition: 0.2s; }\n    .ph-input:focus { border-color: var(--ph-orange); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1); }<\/p>\n<p>    \/* INPUTS DE EDAD INTELIGENTES (VISUALES) *\/\n    .ph-age-input-group { position: relative; transition: 0.3s; }\n    .ph-age-msg { font-size: 0.65rem; font-weight: 700; margin-top: 5px; display: block; min-height: 15px; }<\/p>\n<p>    \/* Estado Gratis *\/\n    .ph-age-input.is-free { border-color: var(--ph-green); background: var(--ph-green-light); color: var(--ph-green); }\n    .ph-age-input.is-free + .ph-age-msg { color: var(--ph-green); }<\/p>\n<p>    \/* Estado Ni\u00f1o *\/\n    .ph-age-input.is-child { border-color: var(--ph-orange); background: var(--ph-orange-light); color: var(--ph-orange); }\n    .ph-age-input.is-child + .ph-age-msg { color: var(--ph-orange); }<\/p>\n<p>    \/* Estado Adulto\/Excedido *\/\n    .ph-age-input.is-adult { border-color: var(--ph-red); background: var(--ph-red-light); color: var(--ph-red); animation: shake 0.3s; }\n    .ph-age-input.is-adult + .ph-age-msg { color: var(--ph-red); font-weight: 800; }<\/p>\n<p>    \/* Calendario PRO *\/\n    .ph-day-cell {\n        aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;\n        border-radius: 12px; cursor: pointer; transition: 0.2s all; font-size: 0.9rem; position: relative; overflow: hidden;\n        border: 1px solid transparent; background: white;\n    }\n    .ph-day-cell:hover:not(.disabled) { transform: scale(1.05); z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }<\/p>\n<p>    \/* Estados Calendario *\/\n    .ph-day-cell.past { background: #F1F5F9; color: #CBD5E1; pointer-events: none; }<\/p>\n<p>    .ph-day-cell.closed { background: var(--ph-red-light); color: var(--ph-red); opacity: 0.7; pointer-events: none; }\n    .ph-day-cell.closed::after { content:'CERRADO'; position:absolute; font-size:0.45rem; font-weight:900; top:50%; left:50%; transform:translate(-50%, -50%) rotate(-45deg); opacity:0.3; }<\/p>\n<p>    .ph-day-cell.offer { border: 2px solid var(--ph-purple); background: var(--ph-purple-light); color: var(--ph-purple); }\n    .ph-day-cell.offer span.ph-tag { \n        background: var(--ph-purple); color: white; position: absolute; top: 0; right: 0;\n        font-size: 0.5rem; padding: 2px 4px; border-bottom-left-radius: 6px; font-weight: 900; \n    }<\/p>\n<p>    .ph-day-cell.selected { background: var(--ph-orange) !important; color: white !important; font-weight: 800; border-color: var(--ph-orange); box-shadow: 0 10px 20px -5px rgba(249, 115, 22, 0.4); }\n    .ph-day-cell.in-range { background: var(--ph-orange-light) !important; color: var(--ph-orange); border-radius: 0; border-top: 2px solid var(--ph-orange); border-bottom: 2px solid var(--ph-orange); }\n    .ph-day-cell.range-start { border-radius: 12px 0 0 12px; }\n    .ph-day-cell.range-end { border-radius: 0 12px 12px 0; }<\/p>\n<p>    \/* Upsell Box *\/\n    .ph-upsell-box {\n        opacity: 0.8; filter: grayscale(1); border: 2px dashed var(--ph-slate-200);\n        background: #f8fafc; transition: 0.3s; cursor: pointer; padding: 20px; border-radius: 20px;\n        display: flex; gap: 15px; align-items: center; margin-bottom: 30px;\n    }\n    .ph-upsell-box:hover { opacity: 1; filter: grayscale(0); border-color: var(--ph-orange); }\n    .ph-upsell-box.active {\n        opacity: 1; filter: grayscale(0); background: #fff7ed; border: 2px solid var(--ph-orange);\n        transform: scale(1.02); box-shadow: 0 10px 20px rgba(249, 115, 22, 0.15);\n    }\n    .ph-upsell-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; background: white; transition: 0.3s;}\n    .ph-upsell-box.active .ph-upsell-check { background: var(--ph-orange); color: white; border-color: var(--ph-orange); }\n    \/* Extras Cards *\/\n    .ph-extra-card {\n        border: 2px solid var(--ph-slate-200);\n        border-radius: 16px;\n        padding: 20px;\n        cursor: pointer;\n        transition: 0.3s;\n        background: white;\n        position: relative;\n    }\n    .ph-extra-card:hover:not(.disabled) {\n        border-color: var(--ph-orange);\n        transform: translateY(-2px);\n        box-shadow: 0 8px 20px rgba(249, 115, 22, 0.1);\n    }\n    .ph-extra-card.active {\n        background: var(--ph-orange-light);\n        border-color: var(--ph-orange);\n        border-width: 3px;\n    }\n    .ph-extra-card.disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        filter: grayscale(1);\n    }\n    .ph-extra-check {\n        width: 28px;\n        height: 28px;\n        border-radius: 50%;\n        border: 2px solid var(--ph-slate-200);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: white;\n        transition: 0.3s;\n    }\n    .ph-extra-check.active {\n        background: var(--ph-orange);\n        color: white;\n        border-color: var(--ph-orange);\n    }<\/p>\n<p>    \/* Layout *\/\n    .ph-main-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }\n    .ph-item-card { cursor: pointer; border-radius: 24px; overflow: hidden; border: 1px solid var(--ph-slate-200); transition: 0.3s; background: white; }\n    .ph-item-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); border-color: var(--ph-orange); }\n    @media (max-width: 950px) { .ph-main-layout { grid-template-columns: 1fr; } }\n<\/style>\n<div class=\"ph-app\">\n<div class=\"ph-main-layout\">\n<div class=\"ph-views-column\">\n<div id=\"ph-grid-view\" class=\"ph-fade-up\">\n<div style=\"margin-bottom:32px;\">\n<h2 style=\"font-family:'Fredoka'; font-size:1.8rem; color:var(--ph-dark); margin:0;\">Pasad\u00edas <span style=\"font-size:1rem; font-family:'Plus Jakarta Sans'; color:var(--ph-slate-400); font-weight:600;\">\u2014 Selecciona tu plan<\/span><\/h2>\n<\/p><\/div>\n<div id=\"ph-items-container\" style=\"display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:25px;\"><\/div>\n<\/p><\/div>\n<div id=\"ph-config-view\" class=\"ph-fade-up\" style=\"display:none;\">\n                <button onclick=\"goBack()\" style=\"background:none; border:none; color:var(--ph-slate-400); font-weight:800; cursor:pointer; margin-bottom:20px; display:flex; align-items:center; gap:8px;\"><br \/>\n                    <i class=\"fas fa-arrow-left\"><\/i> Volver al Cat\u00e1logo<br \/>\n                <\/button><\/p>\n<div style=\"background:white; padding:40px; border-radius:32px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border:1px solid var(--ph-slate-200);\">\n<div style=\"display:flex; gap: 20px; align-items: center; margin-bottom: 30px;\">\n                        <img decoding=\"async\" id=\"ph-conf-img\" src=\"\" style=\"width: 80px; height: 80px; border-radius: 16px; object-fit: cover;\"><\/p>\n<div>\n<h2 id=\"ph-conf-title\" style=\"font-family:'Fredoka'; font-size:2rem; line-height:1.1; color:var(--ph-dark); margin-bottom: 5px;\">&#8211;<\/h2>\n<p id=\"ph-conf-desc\" style=\"font-size: 0.9rem; color: var(--ph-slate-400);\">Configura los detalles de tu reserva.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div style=\"display:grid; grid-template-columns: repeat(3, 1fr); gap:15px; margin-bottom:30px;\">\n<div>\n                            <label style=\"font-size:0.7rem; font-weight:800; color:var(--ph-slate-400); text-transform:uppercase; margin-bottom:8px; display:block;\">Adultos<\/label><br \/>\n                            <input type=\"number\" id=\"ph-qty-ad\" class=\"ph-input\" value=\"1\" min=\"1\" onchange=\"PHBooking.Calculator &#038;&#038; PHBooking.Calculator.calculateTotal()\">\n                        <\/div>\n<div>\n                            <label style=\"font-size:0.7rem; font-weight:800; color:var(--ph-slate-400); text-transform:uppercase; margin-bottom:8px; display:block;\">Ni\u00f1os<\/label><br \/>\n                            <input type=\"number\" id=\"ph-qty-ch\" class=\"ph-input\" value=\"0\" min=\"0\" onchange=\"PHBooking.Extras &#038;&#038; PHBooking.Extras.renderChildInputs()\">\n                        <\/div>\n<div>\n                            <label style=\"font-size:0.7rem; font-weight:800; color:var(--ph-slate-400); text-transform:uppercase; margin-bottom:8px; display:block;\">Mayores<\/label><br \/>\n                            <input type=\"number\" id=\"ph-qty-sr\" class=\"ph-input\" value=\"0\" min=\"0\" onchange=\"PHBooking.Calculator &#038;&#038; PHBooking.Calculator.calculateTotal()\">\n                        <\/div>\n<\/p><\/div>\n<div id=\"ph-ages-box\" style=\"display:none; background:white; border: 2px solid #f1f5f9; padding:20px; border-radius:20px; margin-bottom:30px; box-shadow: 0 4px 12px rgba(0,0,0,0.03);\">\n<p style=\"font-weight:800; font-size:0.85rem; margin-bottom:15px; color:var(--ph-dark); display:flex; align-items:center; gap:8px;\">\n                            <i class=\"fas fa-child\" style=\"color:var(--ph-orange);\"><\/i> Ingresa las edades exactas:\n                        <\/p>\n<div id=\"ph-ages-grid\" style=\"display:grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap:15px;\"><\/div>\n<\/p><\/div>\n<h3 style=\"font-family:'Fredoka'; margin-bottom:20px; font-size:1.4rem;\">Selecciona Fecha <span id=\"ph-date-helper\" style=\"font-size:0.8rem; font-family:'Plus Jakarta Sans'; color:var(--ph-slate-400); font-weight:400;\"><\/span><\/h3>\n<div style=\"border:1px solid var(--ph-slate-200); border-radius:24px; padding:25px; position:relative;\">\n<div style=\"position:absolute; top:25px; right:25px; display:flex; gap:10px; font-size:0.6rem; font-weight:bold;\">\n                             <span style=\"display:flex; align-items:center; gap:4px;\"><span style=\"width:8px; height:8px; background:#8B5CF6; border-radius:50%;\"><\/span> Oferta<\/span><br \/>\n                             <span style=\"display:flex; align-items:center; gap:4px;\"><span style=\"width:8px; height:8px; background:#ef4444; border-radius:50%;\"><\/span> Cerrado<\/span>\n                         <\/div>\n<div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;\">\n                            <button onclick=\"changeMonth(-1)\" class=\"ph-input\" style=\"width:40px; height:40px; padding:0; cursor:pointer;\">\u2039<\/button><br \/>\n                            <strong id=\"ph-month-label\" style=\"font-size:1.1rem; color:var(--ph-dark);\">Mes A\u00f1o<\/strong><br \/>\n                            <button onclick=\"changeMonth(1)\" class=\"ph-input\" style=\"width:40px; height:40px; padding:0; cursor:pointer;\">\u203a<\/button>\n                        <\/div>\n<div style=\"display:grid; grid-template-columns:repeat(7, 1fr); text-align:center; font-weight:800; font-size:0.7rem; color:var(--ph-slate-400); margin-bottom:15px;\">\n<div>DO<\/div>\n<div>LU<\/div>\n<div>MA<\/div>\n<div>MI<\/div>\n<div>JU<\/div>\n<div>VI<\/div>\n<div>SA<\/div>\n<\/p><\/div>\n<div id=\"ph-cal-grid\" style=\"display:grid; grid-template-columns:repeat(7, 1fr); gap:8px;\"><\/div>\n<\/p><\/div>\n<h3 style=\"font-family:'Fredoka'; margin: 40px 0 20px 0; font-size:1.4rem;\">Complementos<\/h3>\n<div id=\"ph-extras-container\" style=\"display:grid; grid-template-columns:1fr 1fr; gap:15px;\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"ph-ticket-column\">\n<div class=\"ph-ticket ph-fade-up\" style=\"background:white; border-radius:24px; overflow:hidden; box-shadow: 0 20px 50px -10px rgba(0,0,0,0.15); border:1px solid var(--ph-slate-200); position:sticky; top:20px;\">\n<div style=\"background:var(--ph-dark); padding:25px; text-align:center;\">\n                    <img decoding=\"async\" src=\"\" id=\"ph-logo-res\" style=\"height:40px; filter:brightness(0) invert(1);\"><\/p>\n<div style=\"color:rgba(255,255,255,0.4); font-size:0.65rem; margin-top:10px; letter-spacing:2px; font-weight:800;\">RESUMEN DE COMPRA<\/div>\n<\/p><\/div>\n<div style=\"padding:30px;\">\n<div style=\"margin-bottom:20px;\">\n<h4 id=\"ph-name-res\" style=\"font-size:1.1rem; font-weight:800; margin-bottom:5px; color:var(--ph-dark);\">Selecciona un plan<\/h4>\n<p id=\"ph-date-res\" style=\"color:var(--ph-orange); font-weight:700; font-size:0.9rem;\">&#8211;<\/p>\n<\/p><\/div>\n<div class=\"ph-ticket-cut\" style=\"height:1px; border-top:2px dashed var(--ph-slate-200); margin:20px 0;\"><\/div>\n<div style=\"font-size:0.85rem; color:var(--ph-slate-600); display:flex; flex-direction:column; gap:8px;\">\n<div style=\"display:flex; justify-content:space-between;\"><span>Adultos<\/span><strong id=\"ph-res-ad\">0<\/strong><\/div>\n<div style=\"display:flex; justify-content:space-between;\"><span>Ni\u00f1os<\/span><strong id=\"ph-res-ch\">0<\/strong><\/div>\n<div style=\"display:flex; justify-content:space-between;\"><span>Extras<\/span><strong id=\"ph-res-ex\">0<\/strong><\/div>\n<\/p><\/div>\n<div style=\"margin-top:30px; text-align:center;\">\n                        <span style=\"font-size:0.7rem; font-weight:800; color:var(--ph-slate-400); text-transform:uppercase;\">Total a Pagar<\/span><\/p>\n<div id=\"ph-total-res\" style=\"font-size:2.5rem; font-weight:900; color:var(--ph-dark); font-family:'Fredoka';\">$0<\/div>\n<\/p><\/div>\n<p>                    <button id=\"ph-btn-book\" onclick=\"processBooking()\" style=\"width:100%; margin-top:20px; padding:18px; border-radius:16px; border:none; background:var(--ph-orange); color:white; font-weight:800; cursor:pointer; opacity:0.5; pointer-events:none;\"><br \/>\n                        CONFIRMAR <i class=\"fas fa-check-circle\" style=\"margin-left:5px;\"><\/i><br \/>\n                    <\/button>\n                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\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":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/playahawai.com\/booking\/wp-json\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/playahawai.com\/booking\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/playahawai.com\/booking\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/playahawai.com\/booking\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/playahawai.com\/booking\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":8,"href":"https:\/\/playahawai.com\/booking\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/playahawai.com\/booking\/wp-json\/wp\/v2\/pages\/17\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/playahawai.com\/booking\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}