{"id":533,"date":"2026-06-11T05:57:39","date_gmt":"2026-06-11T05:57:39","guid":{"rendered":"https:\/\/internationaltoursmedellin.com\/?page_id=533"},"modified":"2026-07-11T18:18:33","modified_gmt":"2026-07-11T18:18:33","slug":"checkout","status":"publish","type":"page","link":"https:\/\/internationaltoursmedellin.com\/en\/checkout\/","title":{"rendered":"Checkout"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Checkout \u2014 International Tours Medell\u00edn<\/title>\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\/sweetalert2@11\"><\/script>\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0\r\n }\r\n\r\n :root {\r\n --g: #1A6B3C;\r\n --g-hover: #155530;\r\n --g-light: #e8f5ee;\r\n --g-mid: #2E8B57;\r\n --err: #c0392b;\r\n --border: #e0e0e0;\r\n --text: #2C2C2C;\r\n --muted: #888;\r\n --bg: #f7f8f6;\r\n --radius: 8px;\r\n --font: 'Montserrat', sans-serif;\r\n }\r\n\r\n body {\r\n font-family: var(--font);\r\n background: var(--bg);\r\n color: var(--text)\r\n }\r\n\r\n .co-wrap {\r\n padding: 2rem 1.5rem;\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 340px;\r\n gap: 20px;\r\n align-items: start\r\n }\r\n\r\n .co-card {\r\n background: #fff;\r\n border: 0.5px solid var(--border);\r\n border-radius: 12px;\r\n padding: 1.5rem\r\n }\r\n\r\n .co-cal-card {\r\n background: var(--bg);\r\n border: 0.5px solid var(--border);\r\n border-radius: 12px;\r\n padding: 1.25rem 1rem;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .co-section-title {\r\n font-size: 10px;\r\n font-weight: 600;\r\n color: var(--g);\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n margin-bottom: 1rem;\r\n border-left: 2px solid var(--g);\r\n padding-left: 8px\r\n }\r\n\r\n .co-grid2 {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px\r\n }\r\n\r\n .co-grid-contact {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px\r\n }\r\n\r\n .co-contact-right {\r\n display: grid;\r\n grid-template-columns: 110px 1fr;\r\n gap: 8px\r\n }\r\n\r\n .co-field {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px\r\n }\r\n\r\n .co-field label {\r\n font-size: 11px;\r\n color: var(--muted);\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em\r\n }\r\n\r\n .co-field input,\r\n .co-field select,\r\n .co-field textarea {\r\n width: 100%;\r\n border: 0.5px solid #ccc;\r\n border-radius: var(--radius);\r\n padding: 0 12px;\r\n font-size: 13px;\r\n font-family: var(--font);\r\n color: var(--text);\r\n background: #fff;\r\n outline: none;\r\n transition: border-color 0.15s;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n height: 38px\r\n }\r\n\r\n .co-field textarea {\r\n height: 80px;\r\n padding: 9px 12px;\r\n resize: vertical;\r\n line-height: 1.5\r\n }\r\n\r\n .co-field input:focus,\r\n .co-field select:focus,\r\n .co-field textarea:focus {\r\n border-color: var(--g)\r\n }\r\n\r\n .co-field .err-msg {\r\n font-size: 11px;\r\n color: var(--err);\r\n display: none\r\n }\r\n\r\n .co-field.has-error .err-msg {\r\n display: block\r\n }\r\n\r\n .co-field.has-error input,\r\n .co-field.has-error select {\r\n border-color: var(--err)\r\n }\r\n\r\n .co-select-wrap {\r\n position: relative\r\n }\r\n\r\n .co-select-wrap select {\r\n width: 100%;\r\n padding-right: 24px;\r\n cursor: pointer\r\n }\r\n\r\n .co-select-wrap::after {\r\n content: '\u25be';\r\n position: absolute;\r\n right: 9px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: var(--muted);\r\n pointer-events: none;\r\n font-size: 12px;\r\n z-index: 1\r\n }\r\n\r\n \/* Flatpickr inline -- se deja en su tama\u00f1o natural (el que Flatpickr calcula\r\n solo) y se centra dentro de la tarjeta, en vez de forzar el ancho al 100%.\r\n Eso era justamente lo que causaba el bug de los d\u00edas \"apretados\". *\/\r\n .flatpickr-calendar.inline {\r\n box-shadow: none !important;\r\n border: none !important;\r\n background: transparent !important;\r\n margin: 0 auto;\r\n }\r\n\r\n .flatpickr-months,\r\n .flatpickr-innerContainer,\r\n .flatpickr-rContainer,\r\n .flatpickr-days,\r\n .dayContainer {\r\n background: transparent !important;\r\n }\r\n\r\n .flatpickr-current-month .numInputWrapper {\r\n display: none !important\r\n }\r\n\r\n .flatpickr-month {\r\n padding: 0 0 12px !important\r\n }\r\n\r\n .flatpickr-monthDropdown-months {\r\n font-family: var(--font) !important;\r\n font-size: 13px !important;\r\n font-weight: 600 !important;\r\n color: var(--text) !important;\r\n background: transparent !important;\r\n border: none !important;\r\n appearance: none !important;\r\n -webkit-appearance: none !important\r\n }\r\n\r\n .flatpickr-prev-month,\r\n .flatpickr-next-month {\r\n color: var(--g) !important;\r\n fill: var(--g) !important\r\n }\r\n\r\n .flatpickr-prev-month:hover,\r\n .flatpickr-next-month:hover {\r\n color: var(--g-hover) !important;\r\n fill: var(--g-hover) !important;\r\n background: var(--g-light) !important;\r\n border-radius: 6px !important\r\n }\r\n\r\n .flatpickr-day.selected,\r\n .flatpickr-day.selected:hover {\r\n background: var(--g) !important;\r\n border-color: var(--g) !important;\r\n color: #fff !important;\r\n border-radius: 6px !important\r\n }\r\n\r\n .flatpickr-day:hover {\r\n background: var(--g-light) !important;\r\n border-radius: 6px !important\r\n }\r\n\r\n .flatpickr-day.today {\r\n border-color: var(--g) !important\r\n }\r\n\r\n .flatpickr-day.today.selected {\r\n color: #fff !important\r\n }\r\n\r\n .flatpickr-day {\r\n max-width: none !important;\r\n flex: 0 0 13.2% !important;\r\n border-radius: 6px !important;\r\n height: 36px !important;\r\n line-height: 36px !important;\r\n font-size: 13px !important;\r\n font-family: var(--font) !important;\r\n margin: 2px 0 !important\r\n }\r\n\r\n .dayContainer {\r\n display: flex !important;\r\n flex-wrap: wrap !important;\r\n justify-content: space-between !important;\r\n row-gap: 4px !important\r\n }\r\n\r\n .flatpickr-weekday {\r\n flex: 1 !important;\r\n font-size: 11px !important;\r\n font-weight: 600 !important;\r\n color: var(--g) !important;\r\n font-family: var(--font) !important\r\n }\r\n\r\n .flatpickr-weekdays {\r\n background: transparent !important;\r\n border-bottom: 0.5px solid var(--border) !important;\r\n margin-bottom: 6px !important\r\n }\r\n\r\n \/* Tour img *\/\r\n .co-tour-img-preview {\r\n width: 100%;\r\n height: 140px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n margin-top: 10px;\r\n display: none\r\n }\r\n\r\n .co-tour-img-preview.visible {\r\n display: block\r\n }\r\n\r\n \/* Pasajeros *\/\r\n .co-counter-row {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 10px 0\r\n }\r\n\r\n .co-counter-row+.co-counter-row {\r\n border-top: 0.5px solid var(--border)\r\n }\r\n\r\n .co-counter-label {\r\n font-size: 13px;\r\n color: var(--text);\r\n font-weight: 500\r\n }\r\n\r\n .co-counter-sub {\r\n font-size: 11px;\r\n color: var(--muted);\r\n margin-top: 2px\r\n }\r\n\r\n .co-counter {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px\r\n }\r\n\r\n .co-counter button {\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n border: 0.5px solid #ccc;\r\n background: transparent;\r\n font-size: 16px;\r\n color: var(--text);\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.15s;\r\n font-family: var(--font);\r\n line-height: 1\r\n }\r\n\r\n .co-counter button:hover {\r\n border-color: var(--g);\r\n color: var(--g);\r\n background: var(--g-light)\r\n }\r\n\r\n .co-counter span {\r\n font-size: 15px;\r\n font-weight: 600;\r\n color: var(--text);\r\n min-width: 20px;\r\n text-align: center\r\n }\r\n\r\n .co-pasajero-group {\r\n padding: 12px 0\r\n }\r\n\r\n .co-pasajero-group+.co-pasajero-group {\r\n border-top: 0.5px solid var(--border)\r\n }\r\n\r\n .co-pasajero-tipo {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--g);\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n margin-bottom: 8px\r\n }\r\n\r\n \/* Radio *\/\r\n .co-radio-group {\r\n display: flex;\r\n gap: 16px;\r\n align-items: center;\r\n margin-top: 4px\r\n }\r\n\r\n .co-radio-opt {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n cursor: pointer;\r\n font-size: 13px;\r\n color: var(--text)\r\n }\r\n\r\n .co-radio-opt input[type=radio] {\r\n accent-color: var(--g);\r\n width: 14px;\r\n height: 14px;\r\n cursor: pointer\r\n }\r\n\r\n \/* Checkbox *\/\r\n .co-check-opt {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 8px;\r\n cursor: pointer;\r\n font-size: 13px;\r\n color: var(--text);\r\n line-height: 1.5\r\n }\r\n\r\n .co-check-opt input[type=checkbox] {\r\n accent-color: var(--g);\r\n width: 14px;\r\n height: 14px;\r\n margin-top: 2px;\r\n flex-shrink: 0;\r\n cursor: pointer\r\n }\r\n\r\n .co-check-opt a {\r\n color: var(--g);\r\n text-decoration: none\r\n }\r\n\r\n .co-check-opt a:hover {\r\n text-decoration: underline\r\n }\r\n\r\n .co-comentarios-box {\r\n margin-top: 10px;\r\n display: none\r\n }\r\n\r\n .co-comentarios-box.visible {\r\n display: block\r\n }\r\n\r\n \/* Resumen *\/\r\n .co-summary-img {\r\n width: 100%;\r\n height: 130px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n background: #f0f0f0;\r\n margin-bottom: 1rem;\r\n display: block\r\n }\r\n\r\n .co-summary-tour-name {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--text);\r\n margin-bottom: 3px\r\n }\r\n\r\n .co-summary-tour-detail {\r\n font-size: 12px;\r\n color: var(--muted);\r\n margin-bottom: 2px\r\n }\r\n\r\n .co-price-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 7px 0;\r\n font-size: 12px;\r\n color: #666;\r\n border-top: 0.5px solid var(--border)\r\n }\r\n\r\n .co-price-row span:last-child {\r\n color: var(--text)\r\n }\r\n\r\n .co-price-row.total {\r\n font-size: 14px;\r\n font-weight: 600;\r\n border-top: 0.5px solid #ccc;\r\n margin-top: 4px;\r\n padding-top: 10px\r\n }\r\n\r\n .co-price-row.total span:last-child {\r\n color: var(--g)\r\n }\r\n\r\n .co-empty-state {\r\n text-align: center;\r\n padding: 1.5rem 0;\r\n color: #aaa;\r\n font-size: 13px\r\n }\r\n\r\n .co-paypal-wrap {\r\n margin-top: 1.25rem\r\n }\r\n\r\n .co-payment-note {\r\n background: var(--g-light);\r\n border: 0.5px solid #cfe8da;\r\n border-radius: 10px;\r\n padding: 10px 12px;\r\n margin-bottom: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px\r\n }\r\n\r\n .co-payment-note p {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 7px;\r\n font-size: 11.5px;\r\n line-height: 1.45;\r\n color: var(--text)\r\n }\r\n\r\n .co-payment-note p span.flag {\r\n flex-shrink: 0\r\n }\r\n\r\n .co-pp-loading {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: 12px;\r\n font-size: 13px;\r\n color: var(--muted);\r\n }\r\n\r\n .co-spinner {\r\n width: 16px;\r\n height: 16px;\r\n border: 2px solid var(--border);\r\n border-top-color: var(--g);\r\n border-radius: 50%;\r\n animation: co-spin 0.7s linear infinite;\r\n flex-shrink: 0;\r\n }\r\n\r\n @keyframes co-spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n #paypal-button-container {\r\n min-height: 44px;\r\n display: none\r\n }\r\n\r\n .co-btn-disabled {\r\n width: 100%;\r\n padding: 11px;\r\n background: var(--bg);\r\n border: 0.5px solid var(--border);\r\n border-radius: 50px;\r\n font-size: 13px;\r\n color: #aaa;\r\n text-align: center;\r\n cursor: not-allowed;\r\n font-family: var(--font)\r\n }\r\n\r\n .co-pay-separator {\r\n display: none;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 12px 0;\r\n font-size: 11px;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em\r\n }\r\n\r\n .co-pay-separator.visible {\r\n display: flex\r\n }\r\n\r\n .co-pay-separator::before,\r\n .co-pay-separator::after {\r\n content: '';\r\n flex: 1;\r\n height: 1px;\r\n background: var(--border)\r\n }\r\n\r\n .co-whatsapp-btn {\r\n display: none;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: 11px;\r\n background: #25D366;\r\n border: none;\r\n border-radius: 50px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: #fff;\r\n text-align: center;\r\n cursor: pointer;\r\n font-family: var(--font);\r\n transition: background 0.15s;\r\n text-decoration: none\r\n }\r\n\r\n .co-whatsapp-btn.visible {\r\n display: flex\r\n }\r\n\r\n .co-whatsapp-btn:hover {\r\n background: #1ebe5a\r\n }\r\n\r\n .co-whatsapp-btn svg {\r\n flex-shrink: 0\r\n }\r\n\r\n \/* Checklist progreso *\/\r\n .co-checklist {\r\n list-style: none;\r\n font-size: 12px;\r\n color: var(--muted)\r\n }\r\n\r\n .co-checklist li {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 4px 0\r\n }\r\n\r\n .co-checklist li.done {\r\n color: var(--g);\r\n font-weight: 500\r\n }\r\n\r\n .co-checklist li .ck-icon {\r\n display: inline-flex;\r\n flex-shrink: 0\r\n }\r\n\r\n \/* Sidebar sticky *\/\r\n .co-sidebar {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n position: sticky;\r\n top: 1.5rem;\r\n align-self: flex-start\r\n }\r\n\r\n @media(max-width:820px) {\r\n .co-wrap {\r\n grid-template-columns: 1fr;\r\n padding: 1rem\r\n }\r\n\r\n .co-grid2 {\r\n grid-template-columns: 1fr\r\n }\r\n\r\n .co-grid-contact {\r\n grid-template-columns: 1fr\r\n }\r\n\r\n .co-contact-right {\r\n grid-template-columns: 110px 1fr\r\n }\r\n\r\n .co-sidebar {\r\n position: static\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <div class=\"co-wrap\" id=\"co-wrap\">\r\n\r\n <!-- COLUMNA IZQUIERDA -->\r\n <div style=\"display:flex;flex-direction:column;gap:14px;\">\r\n\r\n <!-- 1. Datos de la reserva -->\r\n <div class=\"co-card\">\r\n <p class=\"co-section-title\" id=\"sec-datos-reserva\">Datos de la reserva<\/p>\r\n <div style=\"display:flex;flex-direction:column;gap:12px;\">\r\n <div class=\"co-grid2\">\r\n <div class=\"co-field\" id=\"f-nombre\">\r\n <label id=\"lbl-nombre\">Nombre<\/label>\r\n <input type=\"text\" id=\"nombre\" placeholder=\"Juan\"\r\n oninput=\"validateField('f-nombre','nombre');updateSummary()\">\r\n <span class=\"err-msg\" id=\"err-nombre\">Campo requerido<\/span>\r\n <\/div>\r\n <div class=\"co-field\" id=\"f-apellido\">\r\n <label id=\"lbl-apellido\">Apellidos<\/label>\r\n <input type=\"text\" id=\"apellido\" placeholder=\"Garc\u00eda P\u00e9rez\"\r\n oninput=\"validateField('f-apellido','apellido');updateSummary()\">\r\n <span class=\"err-msg\" id=\"err-apellido\">Campo requerido<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"co-grid-contact\">\r\n <div class=\"co-field\" id=\"f-email\">\r\n <label id=\"lbl-email\">Correo electr\u00f3nico<\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"juan@email.com\"\r\n oninput=\"validateEmail();updateSummary()\">\r\n <span class=\"err-msg\" id=\"err-email\">Correo inv\u00e1lido<\/span>\r\n <\/div>\r\n <div class=\"co-contact-right\">\r\n <div class=\"co-field\">\r\n <label id=\"lbl-prefijo\">Prefijo<\/label>\r\n <div class=\"co-select-wrap\">\r\n <select id=\"prefix-select\" onchange=\"updateSummary()\">\r\n <option value=\"+57\">\ud83c\udde8\ud83c\uddf4 +57<\/option>\r\n <option value=\"+54\">\ud83c\udde6\ud83c\uddf7 +54<\/option>\r\n <option value=\"+52\">\ud83c\uddf2\ud83c\uddfd +52<\/option>\r\n <option value=\"+58\">\ud83c\uddfb\ud83c\uddea +58<\/option>\r\n <option value=\"+51\">\ud83c\uddf5\ud83c\uddea +51<\/option>\r\n <option value=\"+56\">\ud83c\udde8\ud83c\uddf1 +56<\/option>\r\n <option value=\"+593\">\ud83c\uddea\ud83c\udde8 +593<\/option>\r\n <option value=\"+55\">\ud83c\udde7\ud83c\uddf7 +55<\/option>\r\n <option value=\"+1\">\ud83c\uddfa\ud83c\uddf8 +1<\/option>\r\n <option value=\"+34\">\ud83c\uddea\ud83c\uddf8 +34<\/option>\r\n <option value=\"+33\">\ud83c\uddeb\ud83c\uddf7 +33<\/option>\r\n <option value=\"+49\">\ud83c\udde9\ud83c\uddea +49<\/option>\r\n <option value=\"+1\">\ud83c\uddf5\ud83c\uddf7 +1<\/option>\r\n <option value=\"+1\">\ud83c\udde9\ud83c\uddf4 +1<\/option>\r\n <option value=\"+507\">\ud83c\uddf5\ud83c\udde6 +507<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"co-field\" id=\"f-tel\">\r\n <label id=\"lbl-telefono\">Tel\u00e9fono m\u00f3vil<\/label>\r\n <input type=\"tel\" id=\"telefono\" placeholder=\"300 123 4567\"\r\n oninput=\"validateField('f-tel','telefono');updateSummary()\">\r\n <span class=\"err-msg\" id=\"err-telefono\">Campo requerido<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2. Tour -->\r\n <div class=\"co-card\">\r\n <p class=\"co-section-title\">Tour<\/p>\r\n <div class=\"co-field\" id=\"f-tour\">\r\n <div class=\"co-select-wrap\">\r\n <select id=\"tour\" onchange=\"onTourChange()\">\r\n <option value=\"\" id=\"opt-tour-placeholder\">Selecciona un tour<\/option>\r\n <option value=\"medellin\">Tour de ciudad de Medell\u00edn<\/option>\r\n <option value=\"guatape\">Tour de Guatap\u00e9<\/option>\r\n <option value=\"feria_flores\">Tour Feria de las Flores<\/option>\r\n <option value=\"test\">Tour Test<\/option>\r\n <\/select>\r\n <\/div>\r\n <span class=\"err-msg\" id=\"err-tour\">Selecciona un tour<\/span>\r\n <\/div>\r\n <img decoding=\"async\" id=\"tour-img-preview\" class=\"co-tour-img-preview\" src=\"\" alt=\"Imagen del tour\">\r\n <\/div>\r\n\r\n <!-- 3. Pasajeros -->\r\n <div class=\"co-card\">\r\n <p class=\"co-section-title\" id=\"sec-pasajeros\">Pasajeros<\/p>\r\n <div class=\"co-counter-row\">\r\n <div>\r\n <div class=\"co-counter-label\" id=\"lbl-adultos-title\">Adultos<\/div>\r\n <div class=\"co-counter-sub\" id=\"sub-adultos\">Mayor de 12 a\u00f1os<\/div>\r\n <\/div>\r\n <div class=\"co-counter\">\r\n <button onclick=\"cambiar('adultos',-1)\">\u2212<\/button>\r\n <span id=\"adultos\">1<\/span>\r\n <button onclick=\"cambiar('adultos',1)\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"co-counter-row\">\r\n <div>\r\n <div class=\"co-counter-label\" id=\"lbl-ninos-title\">Ni\u00f1os<\/div>\r\n <div class=\"co-counter-sub\" id=\"sub-ninos\">De 2 a 12 a\u00f1os<\/div>\r\n <\/div>\r\n <div class=\"co-counter\">\r\n <button onclick=\"cambiar('ninos',-1)\">\u2212<\/button>\r\n <span id=\"ninos\">0<\/span>\r\n <button onclick=\"cambiar('ninos',1)\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n <div id=\"datos-pasajeros\" style=\"margin-top:12px;\"><\/div>\r\n <\/div>\r\n\r\n <!-- 5. Preferencias -->\r\n <div class=\"co-card\">\r\n <p class=\"co-section-title\" id=\"sec-preferencias\">Preferencias<\/p>\r\n <div style=\"display:flex;flex-direction:column;gap:14px;\">\r\n <div>\r\n <div id=\"lbl-idioma-tour\"\r\n style=\"font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;\">\r\n Idioma del tour<\/div>\r\n <div class=\"co-radio-group\">\r\n <label class=\"co-radio-opt\"><input type=\"radio\" name=\"idioma\" value=\"english\"\r\n onchange=\"updateSummary()\"> English<\/label>\r\n <label class=\"co-radio-opt\"><input type=\"radio\" name=\"idioma\" value=\"spanish\" checked\r\n onchange=\"updateSummary()\"> Spanish<\/label>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"co-check-opt\">\r\n <input type=\"checkbox\" id=\"chk-comentarios\" onchange=\"toggleComentarios()\">\r\n <span id=\"lbl-comentarios\">Comentarios al proveedor<\/span>\r\n <\/label>\r\n <div class=\"co-comentarios-box\" id=\"comentarios-box\">\r\n <div class=\"co-field\" style=\"margin-top:8px;\">\r\n <textarea id=\"comentarios\"\r\n placeholder=\"Escribe aqu\u00ed cualquier comentario o requerimiento especial...\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div style=\"border-top:0.5px solid var(--border);padding-top:12px;\">\r\n <label class=\"co-check-opt\">\r\n <input type=\"checkbox\" id=\"chk-privacidad\" onchange=\"updateSummary()\">\r\n <span id=\"lbl-privacidad-text\">Acepto la <a href=\"#\">pol\u00edtica de privacidad<\/a> y las <a\r\n href=\"#\">condiciones generales<\/a><\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- COLUMNA DERECHA \/ SIDEBAR -->\r\n <div class=\"co-sidebar\">\r\n\r\n <!-- Fecha -->\r\n <div class=\"co-cal-card\">\r\n <p class=\"co-section-title\" id=\"sec-fecha\">Selecciona tu fecha<\/p>\r\n <div id=\"cal\"><\/div>\r\n <\/div>\r\n\r\n <!-- Resumen -->\r\n <div class=\"co-card\">\r\n <p class=\"co-section-title\" id=\"sec-resumen\">Resumen<\/p>\r\n <div id=\"summary-content\">\r\n <div class=\"co-empty-state\">Selecciona un tour para ver el resumen<\/div>\r\n <\/div>\r\n <div class=\"co-paypal-wrap\">\r\n <div class=\"co-payment-note\" id=\"payment-note\">\r\n <p><span class=\"flag\">\ud83c\udde8\ud83c\uddf4<\/span><span id=\"note-co\">Si est\u00e1s en Colombia: realiza tu pago a trav\u00e9s de WhatsApp.<\/span><\/p>\r\n <p><span class=\"flag\">\ud83c\udf0e<\/span><span id=\"note-intl\">Si est\u00e1s fuera de Colombia: puedes pagar con PayPal o tambi\u00e9n por WhatsApp.<\/span><\/p>\r\n <\/div>\r\n <div id=\"paypal-button-container\"><\/div>\r\n <div class=\"co-pp-loading\" id=\"pp-loading\">\r\n <div class=\"co-spinner\"><\/div>\r\n <span id=\"lbl-pp-loading\">Cargando opciones de pago\u2026<\/span>\r\n <\/div>\r\n <div class=\"co-btn-disabled\" id=\"btn-disabled\">Completa el formulario para pagar<\/div>\r\n <div class=\"co-pay-separator\" id=\"pay-separator\"><span id=\"lbl-separator\">o<\/span><\/div>\r\n <a href=\"#\" class=\"co-whatsapp-btn\" id=\"whatsapp-button\" onclick=\"pagarPorWhatsapp(event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.85 9.85 0 0 0 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2Zm5.8 14.07c-.24.68-1.4 1.3-1.93 1.38-.49.08-1.11.11-1.79-.11-.41-.13-.94-.3-1.62-.6-2.85-1.23-4.71-4.1-4.85-4.29-.14-.19-1.16-1.54-1.16-2.94 0-1.4.73-2.09 1-2.38.26-.28.57-.35.76-.35.19 0 .38 0 .54.01.17.01.41-.07.64.49.24.58.81 2 .88 2.15.07.15.12.32.02.51-.09.19-.14.31-.28.48-.14.17-.29.37-.42.5-.14.14-.28.29-.12.57.16.28.71 1.17 1.52 1.9 1.05.94 1.93 1.23 2.21 1.37.28.14.44.12.6-.07.17-.19.71-.83.9-1.11.19-.28.38-.24.63-.14.26.09 1.65.78 1.93.92.28.14.47.21.53.33.07.12.07.68-.17 1.36Z\"\/><\/svg>\r\n <span id=\"lbl-whatsapp-btn\">Pagar por WhatsApp<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Checklist de progreso -->\r\n <div class=\"co-card\">\r\n <p class=\"co-section-title\" id=\"sec-progreso\">Progreso<\/p>\r\n <ul class=\"co-checklist\" id=\"checklist\">\r\n <li id=\"ck-tour\"><span class=\"ck-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#ccc\" stroke-width=\"1.5\" \/>\r\n <\/svg><\/span><span class=\"ck-label\" id=\"ck-tour-label\">Tour seleccionado<\/span><\/li>\r\n <li id=\"ck-fecha\"><span class=\"ck-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#ccc\" stroke-width=\"1.5\" \/>\r\n <\/svg><\/span><span class=\"ck-label\" id=\"ck-fecha-label\">Fecha seleccionada<\/span><\/li>\r\n <li id=\"ck-datos\"><span class=\"ck-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#ccc\" stroke-width=\"1.5\" \/>\r\n <\/svg><\/span><span class=\"ck-label\" id=\"ck-datos-label\">Datos de contacto<\/span><\/li>\r\n <li id=\"ck-pasajeros\"><span class=\"ck-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\r\n fill=\"none\">\r\n <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#ccc\" stroke-width=\"1.5\" \/>\r\n <\/svg><\/span><span class=\"ck-label\" id=\"ck-pasajeros-label\">Datos de pasajeros<\/span><\/li>\r\n <li id=\"ck-privacidad\"><span class=\"ck-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\r\n fill=\"none\">\r\n <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#ccc\" stroke-width=\"1.5\" \/>\r\n <\/svg><\/span><span class=\"ck-label\" id=\"ck-privacidad-label\">Pol\u00edtica de privacidad<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\r\n <script>\r\n var selectedTour = null, selectedDate = null;\r\n\r\n \/\/ \u2500\u2500\u2500 Idioma seg\u00fan la URL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n \/\/ Si la ruta empieza con \/en (ej. \/en\/checkout\/) se usa ingl\u00e9s; cualquier\r\n \/\/ otra ruta se queda en espa\u00f1ol. No depende de eventos del plugin de\r\n \/\/ traducci\u00f3n: cada cambio de idioma en TranslatePress recarga la p\u00e1gina\r\n \/\/ en la nueva URL, as\u00ed que basta con leer la ruta al cargar el script.\r\n var IS_EN = \/^\\\/en(\\\/|$)\/.test(window.location.pathname);\r\n document.documentElement.lang = IS_EN ? \"en\" : \"es\";\r\n\r\n \/\/ Atajo para elegir string seg\u00fan idioma sin repetir el if en cada lugar.\r\n function t(es, en) { return IS_EN ? en : es; }\r\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n \/\/ Precios actualizados: todas las tarifas aplican por persona (adulto y ni\u00f1o pagan lo mismo)\r\n var TOURS = {\r\n medellin: { nombre: \"Tour de ciudad de Medell\u00edn\", adulto: 37, nino: 37, img: \"https:\/\/internationaltoursmedellin.com\/wp-content\/uploads\/2026\/05\/others1.png\" },\r\n guatape: { nombre: \"Tour de Guatap\u00e9\", adulto: 39, nino: 39, img: \"https:\/\/internationaltoursmedellin.com\/wp-content\/uploads\/2026\/05\/others2.png\" },\r\n feria_flores: { nombre: \"Tour Feria de las Flores\", adulto: 199, nino: 199, img: \"https:\/\/internationaltoursmedellin.com\/wp-content\/uploads\/2026\/05\/car3.png\" },\r\n test: { nombre: \"Tour Test\", adulto: 1, nino: 1, img: \"https:\/\/internationaltoursmedellin.com\/wp-content\/uploads\/2026\/05\/others3.png\" }\r\n };\r\n\r\n var NACIONALIDADES = [\"Colombia\", \"Argentina\", \"M\u00e9xico\", \"Venezuela\", \"Per\u00fa\", \"Chile\", \"Ecuador\", \"Brasil\", \"Estados Unidos\", \"Espa\u00f1a\", \"Francia\", \"Alemania\", \"Puerto Rico\", \"Rep\u00fablica Dominicana\", \"Panam\u00e1\", \"Otro\"];\r\n\r\n var SVG_DONE = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#1A6B3C\"\/><path d=\"M4 7l2 2 4-4\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>';\r\n var SVG_PEND = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#ccc\" stroke-width=\"1.5\"\/><\/svg>';\r\n\r\n \/\/ Traducci\u00f3n a espa\u00f1ol integrada aqu\u00ed mismo (no depende de un script externo\r\n \/\/ que a veces no cargaba, dejando el calendario en ingl\u00e9s). Para ingl\u00e9s se\r\n \/\/ usa el locale \"default\" de Flatpickr (ya viene en ingl\u00e9s).\r\n var LOCALE_ES = {\r\n weekdays: {\r\n shorthand: ['Dom', 'Lun', 'Mar', 'Mi\u00e9', 'Jue', 'Vie', 'S\u00e1b'],\r\n longhand: ['Domingo', 'Lunes', 'Martes', 'Mi\u00e9rcoles', 'Jueves', 'Viernes', 'S\u00e1bado']\r\n },\r\n months: {\r\n shorthand: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],\r\n longhand: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']\r\n },\r\n firstDayOfWeek: 1,\r\n rangeSeparator: ' a '\r\n };\r\n\r\n \/\/ Flatpickr inline -- tama\u00f1o natural, dentro del sidebar (columna 2), arriba del Resumen.\r\n flatpickr(\"#cal\", {\r\n inline: true,\r\n locale: IS_EN ? \"default\" : LOCALE_ES,\r\n minDate: \"today\",\r\n dateFormat: \"Y-m-d\",\r\n animate: false,\r\n disable: [function (d) { return d.getDay() === 0; }],\r\n onChange: function (dates) { selectedDate = dates[0] || null; updateSummary(); }\r\n });\r\n\r\n \/\/ \u2500\u2500\u2500 Traducci\u00f3n de los textos est\u00e1ticos del HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n \/\/ Se corre una sola vez al cargar la p\u00e1gina (no hay \"evento de cambio de\r\n \/\/ idioma\" real porque TranslatePress recarga la p\u00e1gina al cambiar de idioma).\r\n function traducirEstaticosSiIngles() {\r\n if (!IS_EN) return;\r\n\r\n var textos = {\r\n \"sec-datos-reserva\": \"Booking details\",\r\n \"lbl-nombre\": \"First name\",\r\n \"lbl-apellido\": \"Last name\",\r\n \"lbl-email\": \"Email address\",\r\n \"lbl-prefijo\": \"Prefix\",\r\n \"lbl-telefono\": \"Mobile phone\",\r\n \"sec-pasajeros\": \"Passengers\",\r\n \"lbl-adultos-title\": \"Adults\",\r\n \"sub-adultos\": \"Over 12 years old\",\r\n \"lbl-ninos-title\": \"Children\",\r\n \"sub-ninos\": \"2 to 12 years old\",\r\n \"sec-preferencias\": \"Preferences\",\r\n \"lbl-idioma-tour\": \"Tour language\",\r\n \"lbl-comentarios\": \"Comments for the provider\",\r\n \"sec-fecha\": \"Select your date\",\r\n \"sec-resumen\": \"Summary\",\r\n \"lbl-pp-loading\": \"Loading payment options\u2026\",\r\n \"sec-progreso\": \"Progress\"\r\n };\r\n Object.keys(textos).forEach(function (id) {\r\n var el = document.getElementById(id);\r\n if (el) el.textContent = textos[id];\r\n });\r\n\r\n var errores = {\r\n \"err-nombre\": \"Required field\",\r\n \"err-apellido\": \"Required field\",\r\n \"err-email\": \"Invalid email\",\r\n \"err-telefono\": \"Required field\",\r\n \"err-tour\": \"Please select a tour\"\r\n };\r\n Object.keys(errores).forEach(function (id) {\r\n var el = document.getElementById(id);\r\n if (el) el.textContent = errores[id];\r\n });\r\n\r\n var placeholder = document.getElementById(\"opt-tour-placeholder\");\r\n if (placeholder) placeholder.textContent = \"Select a tour\";\r\n\r\n var btnDisabled = document.getElementById(\"btn-disabled\");\r\n if (btnDisabled) btnDisabled.textContent = \"Complete the form to pay\";\r\n\r\n var lblSeparator = document.getElementById(\"lbl-separator\");\r\n if (lblSeparator) lblSeparator.textContent = \"or\";\r\n var lblWhatsappBtn = document.getElementById(\"lbl-whatsapp-btn\");\r\n if (lblWhatsappBtn) lblWhatsappBtn.textContent = \"Pay via WhatsApp\";\r\n\r\n var noteCo = document.getElementById(\"note-co\");\r\n if (noteCo) noteCo.textContent = \"If you're in Colombia: pay through WhatsApp.\";\r\n var noteIntl = document.getElementById(\"note-intl\");\r\n if (noteIntl) noteIntl.textContent = \"If you're outside Colombia: you can pay with PayPal or also via WhatsApp.\";\r\n\r\n \/\/ Nombre \/ Apellido placeholders de ejemplo\r\n var nombreInput = document.getElementById(\"nombre\");\r\n if (nombreInput) nombreInput.placeholder = \"John\";\r\n var apellidoInput = document.getElementById(\"apellido\");\r\n if (apellidoInput) apellidoInput.placeholder = \"Smith\";\r\n var emailInput = document.getElementById(\"email\");\r\n if (emailInput) emailInput.placeholder = \"john@email.com\";\r\n var comentariosInput = document.getElementById(\"comentarios\");\r\n if (comentariosInput) comentariosInput.placeholder = \"Write any comment or special request here...\";\r\n\r\n \/\/ Checkbox de pol\u00edtica de privacidad (mantiene los mismos links, solo cambia el texto)\r\n var privacidadTexto = document.getElementById(\"lbl-privacidad-text\");\r\n if (privacidadTexto) {\r\n privacidadTexto.innerHTML = 'I accept the <a href=\"#\">privacy policy<\/a> and the <a href=\"#\">terms and conditions<\/a>';\r\n }\r\n\r\n \/\/ Checklist de progreso: ahora cada label es un <span> propio con su\r\n \/\/ propio id, as\u00ed que se traduce directo sin tocar el \u00edcono para nada.\r\n var checklistEnglish = {\r\n \"ck-tour-label\": \"Tour selected\",\r\n \"ck-fecha-label\": \"Date selected\",\r\n \"ck-datos-label\": \"Contact details\",\r\n \"ck-pasajeros-label\": \"Passenger details\",\r\n \"ck-privacidad-label\": \"Privacy policy\"\r\n };\r\n Object.keys(checklistEnglish).forEach(function (id) {\r\n var el = document.getElementById(id);\r\n if (el) el.textContent = checklistEnglish[id];\r\n });\r\n }\r\n traducirEstaticosSiIngles();\r\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n function toggleComentarios() {\r\n var box = document.getElementById(\"comentarios-box\");\r\n document.getElementById(\"chk-comentarios\").checked ? box.classList.add(\"visible\") : box.classList.remove(\"visible\");\r\n }\r\n\r\n function onTourChange() {\r\n var val = document.getElementById(\"tour\").value;\r\n var f = document.getElementById(\"f-tour\");\r\n var img = document.getElementById(\"tour-img-preview\");\r\n if (!val) {\r\n selectedTour = null;\r\n f.classList.add(\"has-error\");\r\n img.classList.remove(\"visible\");\r\n img.src = \"\";\r\n } else {\r\n selectedTour = TOURS[val];\r\n f.classList.remove(\"has-error\");\r\n img.src = selectedTour.img;\r\n img.classList.add(\"visible\");\r\n }\r\n updateSummary();\r\n }\r\n\r\n function cambiar(campo, delta) {\r\n var el = document.getElementById(campo);\r\n var min = campo === \"adultos\" ? 1 : 0;\r\n var val = parseInt(el.textContent) + delta;\r\n if (val < min) val = min;\r\n if (val > 10) val = 10;\r\n el.textContent = val;\r\n renderDatosPasajeros();\r\n updateSummary();\r\n }\r\n\r\n function nacSelect(id) {\r\n return '<div class=\"co-select-wrap\"><select id=\"' + id + '\" onchange=\"onNacionalidadChange(this)\">' +\r\n '<option value=\"\">' + t('Selecciona', 'Select') + '<\/option>' +\r\n NACIONALIDADES.map(function (n) { return '<option>' + n + '<\/option>'; }).join('') +\r\n '<\/select><\/div>';\r\n }\r\n\r\n \/\/ Una vez elegida una nacionalidad real, se deshabilita la opci\u00f3n\r\n \/\/ \"Selecciona\" para que el usuario no pueda volver a dejar el campo\r\n \/\/ vac\u00edo por accidente.\r\n function onNacionalidadChange(selectEl) {\r\n if (selectEl.value !== \"\") {\r\n var placeholder = selectEl.querySelector('option[value=\"\"]');\r\n if (placeholder) placeholder.disabled = true;\r\n }\r\n updateSummary();\r\n }\r\n\r\n \/\/ Valida que el DNI\/Pasaporte solo tenga n\u00fameros; si detecta letras u otros\r\n \/\/ caracteres, marca el campo en rojo y muestra el mensaje de error.\r\n function validateDni(inputId, fieldId) {\r\n var input = document.getElementById(inputId);\r\n var f = document.getElementById(fieldId);\r\n var v = input.value.trim();\r\n var soloNumeros = \/^[0-9]*$\/.test(v);\r\n if (!soloNumeros) {\r\n f.classList.add(\"has-error\");\r\n } else {\r\n f.classList.remove(\"has-error\");\r\n }\r\n return soloNumeros && v.length > 0;\r\n }\r\n\r\n function renderDatosPasajeros() {\r\n var cont = document.getElementById(\"datos-pasajeros\");\r\n var a = parseInt(document.getElementById(\"adultos\").textContent);\r\n var n = parseInt(document.getElementById(\"ninos\").textContent);\r\n var html = \"\";\r\n for (var i = 0; i < a; i++) {\r\n var dniFieldId = \"f-dni-a-\" + i;\r\n var dniInputId = \"dni-a-\" + i;\r\n html += '<div class=\"co-pasajero-group\">' +\r\n '<div class=\"co-pasajero-tipo\">' + t('Adulto', 'Adult') + (a > 1 ? ' ' + (i + 1) : '') + '<\/div>' +\r\n '<div class=\"co-grid2\">' +\r\n '<div class=\"co-field\"><label>' + t('Nacionalidad', 'Nationality') + '<\/label>' + nacSelect(\"nac-a-\" + i) + '<\/div>' +\r\n '<div class=\"co-field\" id=\"' + dniFieldId + '\"><label>' + t('DNI \/ Pasaporte', 'ID \/ Passport') + '<\/label>' +\r\n '<input type=\"text\" id=\"' + dniInputId + '\" placeholder=\"1234567890\" ' +\r\n 'oninput=\"validateDni(\\'' + dniInputId + '\\',\\'' + dniFieldId + '\\');updateSummary()\">' +\r\n '<span class=\"err-msg\">' + t('Solo se permiten n\u00fameros', 'Only numbers are allowed') + '<\/span><\/div>' +\r\n '<\/div><\/div>';\r\n }\r\n for (var j = 0; j < n; j++) {\r\n var dniFieldIdN = \"f-dni-n-\" + j;\r\n var dniInputIdN = \"dni-n-\" + j;\r\n html += '<div class=\"co-pasajero-group\">' +\r\n '<div class=\"co-pasajero-tipo\">' + t('Ni\u00f1o', 'Child') + (n > 1 ? ' ' + (j + 1) : '') + '<\/div>' +\r\n '<div class=\"co-grid2\">' +\r\n '<div class=\"co-field\"><label>' + t('Nacionalidad', 'Nationality') + '<\/label>' + nacSelect(\"nac-n-\" + j) + '<\/div>' +\r\n '<div class=\"co-field\" id=\"' + dniFieldIdN + '\"><label>' + t('DNI \/ Pasaporte', 'ID \/ Passport') + '<\/label>' +\r\n '<input type=\"text\" id=\"' + dniInputIdN + '\" placeholder=\"1234567890\" ' +\r\n 'oninput=\"validateDni(\\'' + dniInputIdN + '\\',\\'' + dniFieldIdN + '\\');updateSummary()\">' +\r\n '<span class=\"err-msg\">' + t('Solo se permiten n\u00fameros', 'Only numbers are allowed') + '<\/span><\/div>' +\r\n '<\/div><\/div>';\r\n }\r\n cont.innerHTML = html;\r\n }\r\n\r\n function validateField(fieldId, inputId) {\r\n var f = document.getElementById(fieldId);\r\n var v = document.getElementById(inputId).value.trim();\r\n if (!v) { f.classList.add(\"has-error\"); } else { f.classList.remove(\"has-error\"); }\r\n return !!v;\r\n }\r\n\r\n function validateEmail() {\r\n var f = document.getElementById(\"f-email\");\r\n var v = document.getElementById(\"email\").value.trim();\r\n var ok = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(v);\r\n if (!ok) { f.classList.add(\"has-error\"); } else { f.classList.remove(\"has-error\"); }\r\n return ok;\r\n }\r\n\r\n function isDatosComplete() {\r\n if (!document.getElementById(\"nombre\").value.trim()) return false;\r\n if (!document.getElementById(\"apellido\").value.trim()) return false;\r\n if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(document.getElementById(\"email\").value.trim())) return false;\r\n if (!document.getElementById(\"telefono\").value.trim()) return false;\r\n return true;\r\n }\r\n\r\n function isPasajerosComplete() {\r\n var a = parseInt(document.getElementById(\"adultos\").textContent);\r\n var n = parseInt(document.getElementById(\"ninos\").textContent);\r\n if (a < 1) return false;\r\n for (var i = 0; i < a; i++) {\r\n var nac = document.getElementById(\"nac-a-\" + i);\r\n var dniInput = document.getElementById(\"dni-a-\" + i);\r\n if (!nac || !nac.value) return false;\r\n if (!dniInput || !validateDni(\"dni-a-\" + i, \"f-dni-a-\" + i)) return false;\r\n }\r\n for (var j = 0; j < n; j++) {\r\n var nacn = document.getElementById(\"nac-n-\" + j);\r\n var dniInputN = document.getElementById(\"dni-n-\" + j);\r\n if (!nacn || !nacn.value) return false;\r\n if (!dniInputN || !validateDni(\"dni-n-\" + j, \"f-dni-n-\" + j)) return false;\r\n }\r\n return true;\r\n }\r\n\r\n function isFormComplete() {\r\n return selectedTour && selectedDate && isDatosComplete() && isPasajerosComplete() && document.getElementById(\"chk-privacidad\").checked;\r\n }\r\n\r\n function calcTotal() {\r\n if (!selectedTour) return 0;\r\n var a = parseInt(document.getElementById(\"adultos\").textContent);\r\n var n = parseInt(document.getElementById(\"ninos\").textContent);\r\n return (a * selectedTour.adulto) + (n * selectedTour.nino);\r\n }\r\n\r\n \/\/ \u2500\u2500\u2500 Env\u00edo de correos tras el pago \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n function collectReservaData() {\r\n var a = parseInt(document.getElementById(\"adultos\").textContent);\r\n var n = parseInt(document.getElementById(\"ninos\").textContent);\r\n var pasajeros = [];\r\n\r\n for (var i = 0; i < a; i++) {\r\n var nac = document.getElementById(\"nac-a-\" + i);\r\n var dni = document.getElementById(\"dni-a-\" + i);\r\n pasajeros.push({\r\n tipo: \"Adulto\" + (a > 1 ? \" \" + (i + 1) : \"\"),\r\n nacionalidad: nac ? nac.value : \"\",\r\n dni: dni ? dni.value : \"\"\r\n });\r\n }\r\n for (var j = 0; j < n; j++) {\r\n var nacn = document.getElementById(\"nac-n-\" + j);\r\n var dnin = document.getElementById(\"dni-n-\" + j);\r\n pasajeros.push({\r\n tipo: \"Ni\u00f1o\" + (n > 1 ? \" \" + (j + 1) : \"\"),\r\n nacionalidad: nacn ? nacn.value : \"\",\r\n dni: dnin ? dnin.value : \"\"\r\n });\r\n }\r\n\r\n var idiomaEl = document.querySelector('input[name=idioma]:checked');\r\n var comentariosEl = document.getElementById(\"comentarios\");\r\n var fechaStr = selectedDate\r\n ? selectedDate.toLocaleDateString(\"es-CO\", { day: \"numeric\", month: \"long\", year: \"numeric\" })\r\n : \"\";\r\n\r\n return {\r\n nombre: document.getElementById(\"nombre\").value.trim(),\r\n apellido: document.getElementById(\"apellido\").value.trim(),\r\n email: document.getElementById(\"email\").value.trim(),\r\n telefono: getFullPhone(),\r\n tour: selectedTour ? selectedTour.nombre : \"\",\r\n fecha: fechaStr,\r\n adultos: a,\r\n ninos: n,\r\n idioma: idiomaEl ? (idiomaEl.value === \"english\" ? \"English\" : \"Spanish\") : \"Spanish\",\r\n comentarios: comentariosEl ? comentariosEl.value.trim() : \"\",\r\n total: calcTotal().toFixed(2),\r\n pasajeros: pasajeros\r\n };\r\n }\r\n\r\n function enviarCorreoReserva() {\r\n var data = collectReservaData();\r\n fetch(\"\/wp-json\/itm\/v1\/reserva\", {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify(data)\r\n })\r\n .then(function (res) { return res.json(); })\r\n .then(function (json) { console.log(\"Correos de reserva:\", json); })\r\n .catch(function (err) { console.error(\"No se pudo enviar el correo de reserva:\", err); });\r\n }\r\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n \/\/ \u2500\u2500\u2500 Confirmaci\u00f3n visual + limpieza + redirecci\u00f3n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n function mostrarConfirmacionYRedirigir(nombrePayer) {\r\n Swal.fire({\r\n icon: \"success\",\r\n title: t(\"\u00a1Pago completado!\", \"Payment completed!\"),\r\n html: t(\r\n \"Gracias, <strong>\" + nombrePayer + \"<\/strong>.<br>Recibir\u00e1s un correo de confirmaci\u00f3n en breve.\",\r\n \"Thank you, <strong>\" + nombrePayer + \"<\/strong>.<br>You will receive a confirmation email shortly.\"\r\n ),\r\n confirmButtonText: t(\"Aceptar\", \"Accept\"),\r\n confirmButtonColor: \"#1A6B3C\",\r\n allowOutsideClick: false,\r\n timer: 6000,\r\n timerProgressBar: true\r\n }).then(function () {\r\n limpiarFormulario();\r\n window.location.href = \"\/\";\r\n });\r\n }\r\n\r\n function limpiarFormulario() {\r\n \/\/ Datos de contacto\r\n document.getElementById(\"nombre\").value = \"\";\r\n document.getElementById(\"apellido\").value = \"\";\r\n document.getElementById(\"email\").value = \"\";\r\n document.getElementById(\"telefono\").value = \"\";\r\n document.getElementById(\"prefix-select\").selectedIndex = 0;\r\n\r\n \/\/ Tour\r\n document.getElementById(\"tour\").value = \"\";\r\n selectedTour = null;\r\n document.getElementById(\"tour-img-preview\").classList.remove(\"visible\");\r\n document.getElementById(\"tour-img-preview\").src = \"\";\r\n\r\n \/\/ Pasajeros\r\n document.getElementById(\"adultos\").textContent = \"1\";\r\n document.getElementById(\"ninos\").textContent = \"0\";\r\n renderDatosPasajeros();\r\n\r\n \/\/ Preferencias\r\n document.querySelector('input[name=idioma][value=spanish]').checked = true;\r\n document.getElementById(\"chk-comentarios\").checked = false;\r\n document.getElementById(\"comentarios-box\").classList.remove(\"visible\");\r\n document.getElementById(\"comentarios\").value = \"\";\r\n document.getElementById(\"chk-privacidad\").checked = false;\r\n\r\n \/\/ Fecha\r\n var fp = document.getElementById(\"cal\")._flatpickr;\r\n if (fp) fp.clear();\r\n selectedDate = null;\r\n\r\n \/\/ Quita errores visuales que hayan quedado marcados\r\n document.querySelectorAll(\".has-error\").forEach(function (el) {\r\n el.classList.remove(\"has-error\");\r\n });\r\n\r\n \/\/ PayPal -- cierra la instancia anterior (si existe) antes de vaciar\r\n \/\/ el contenedor, para no dejar componentes \"zombie\" corriendo.\r\n if (ppButtonsInstance) {\r\n ppButtonsInstance.close().catch(function () {});\r\n ppButtonsInstance = null;\r\n }\r\n document.getElementById(\"paypal-button-container\").innerHTML = \"\";\r\n ppRendered = false;\r\n ppLastAmount = 0;\r\n\r\n \/\/ WhatsApp\r\n document.getElementById(\"pay-separator\").classList.remove(\"visible\");\r\n document.getElementById(\"whatsapp-button\").classList.remove(\"visible\");\r\n\r\n updateSummary();\r\n }\r\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n function setCheck(id, done) {\r\n var li = document.getElementById(id);\r\n if (!li) return;\r\n var icon = li.querySelector(\".ck-icon\");\r\n if (icon) icon.innerHTML = done ? SVG_DONE : SVG_PEND;\r\n done ? li.classList.add(\"done\") : li.classList.remove(\"done\");\r\n }\r\n\r\n \/\/ \u2500\u2500\u2500 WhatsApp \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n var WHATSAPP_PHONE = \"573104594044\";\r\n\r\n \/\/ Arma el mismo detalle de la reserva que ya se env\u00eda por correo\r\n \/\/ (collectReservaData) pero en formato de texto legible para WhatsApp.\r\n \/\/ El idioma del mensaje sigue al radio \"Idioma del tour\" elegido por el\r\n \/\/ usuario (English\/Spanish), NO al idioma de la URL (t()\/IS_EN) -- son\r\n \/\/ dos cosas distintas: la URL controla el idioma de la p\u00e1gina, el radio\r\n \/\/ controla en qu\u00e9 idioma quiere el tour (y por lo tanto, en qu\u00e9 idioma\r\n \/\/ le conviene escribir al proveedor).\r\n function buildWhatsappMessage() {\r\n var data = collectReservaData();\r\n var lineas = [];\r\n\r\n lineas.push(t(\"\u00a1Hola! Vengo de su sitio web Internacional Tours Medell\u00edn y quiero pagar mi reserva:\", \"Hello! I'm visiting from your website, Internacional Tours Medell\u00edn, and I'd like to pay for my reservation:\"));\r\n lineas.push(\"\");\r\n lineas.push(t(\"Tour: \", \"Tour: \") + data.tour);\r\n lineas.push(t(\"Fecha: \", \"Date: \") + data.fecha);\r\n lineas.push(t(\"Pasajeros: \", \"Passengers: \") + data.adultos + \" \" + t(\"adulto(s)\", \"adult(s)\") + (data.ninos > 0 ? \", \" + data.ninos + \" \" + t(\"ni\u00f1o(s)\", \"child(ren)\") : \"\"));\r\n lineas.push(t(\"Idioma del tour: \", \"Tour language: \") + data.idioma);\r\n lineas.push(\"\");\r\n lineas.push(t(\"Datos de contacto:\", \"Contact details:\"));\r\n lineas.push(t(\"Nombre: \", \"Name: \") + data.nombre + \" \" + data.apellido);\r\n lineas.push(t(\"Correo: \", \"Email: \") + data.email);\r\n lineas.push(t(\"Tel\u00e9fono: \", \"Phone: \") + data.telefono);\r\n lineas.push(\"\");\r\n lineas.push(t(\"Pasajeros:\", \"Passengers:\"));\r\n data.pasajeros.forEach(function (p) {\r\n lineas.push(\"- \" + p.tipo + \" \u2014 \" + t(\"Nacionalidad\", \"Nationality\") + \": \" + p.nacionalidad + \" \u2014 \" + t(\"DNI\/Pasaporte\", \"ID\/Passport\") + \": \" + p.dni);\r\n });\r\n if (data.comentarios) {\r\n lineas.push(\"\");\r\n lineas.push(t(\"Comentarios: \", \"Comments: \") + data.comentarios);\r\n }\r\n lineas.push(\"\");\r\n lineas.push(t(\"Total a pagar: $\", \"Total to pay: $\") + data.total + \" USD\");\r\n\r\n return lineas.join(\"\\n\");\r\n }\r\n\r\n function pagarPorWhatsapp(e) {\r\n e.preventDefault();\r\n if (!isFormComplete()) return;\r\n\r\n \/\/ A diferencia de PayPal, aqu\u00ed NO se env\u00eda el correo de reserva --\r\n \/\/ el pago por WhatsApp se confirma manualmente entre el cliente y el\r\n \/\/ negocio, as\u00ed que el correo solo debe salir cuando el pago con\r\n \/\/ PayPal se completa de verdad (ver onApprove en renderPaypalButton).\r\n \/\/ enviarCorreoReserva();\r\n\r\n var mensaje = encodeURIComponent(buildWhatsappMessage());\r\n var url = \"https:\/\/api.whatsapp.com\/send?phone=\" + WHATSAPP_PHONE + \"&text=\" + mensaje;\r\n window.open(url, \"_blank\");\r\n }\r\n\r\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n \/\/ \u2500\u2500\u2500 PayPal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n var PAYPAL_CLIENT_ID = \"Afd20LzpUsUDLe9V_wth5TT2nroClcj6xc-6u1K4qxoIbXLg1RGjLe_DHKn5y9pvn9qxRYCr64rMhS-s\";\r\n\r\n var ppSdkLoaded = false;\r\n var ppSdkLoading = false;\r\n var ppRendered = false;\r\n var ppLastAmount = 0;\r\n \/\/ Guardamos la instancia devuelta por paypal.Buttons() para poder cerrarla\r\n \/\/ correctamente con .close() antes de volver a renderizar o de limpiar el\r\n \/\/ formulario. Antes solo se hac\u00eda container.innerHTML = \"\", lo que borraba\r\n \/\/ el HTML pero dejaba la instancia interna de PayPal (Zoid) viva en memoria.\r\n \/\/ Si el usuario completaba\/correg\u00eda el formulario varias veces seguidas,\r\n \/\/ pod\u00edan quedar varias instancias compitiendo por el mismo contenedor y\r\n \/\/ eso es lo que produc\u00eda el \"genericError\" intermitente en el checkout.\r\n var ppButtonsInstance = null;\r\n\r\n function getFullPhone() {\r\n var prefix = document.getElementById(\"prefix-select\").value;\r\n var tel = document.getElementById(\"telefono\").value.trim();\r\n return prefix + \" \" + tel;\r\n }\r\n\r\n function renderPaypalButton(total, onReady) {\r\n var container = document.getElementById(\"paypal-button-container\");\r\n\r\n \/\/ Si el monto no cambi\u00f3 y ya est\u00e1 renderizado, no hay nada que esperar\r\n if (ppRendered && ppLastAmount === total) {\r\n if (onReady) onReady();\r\n return;\r\n }\r\n\r\n \/\/ Cierra correctamente cualquier instancia previa antes de crear una nueva\r\n if (ppButtonsInstance) {\r\n ppButtonsInstance.close().catch(function () {});\r\n ppButtonsInstance = null;\r\n }\r\n\r\n container.innerHTML = \"\";\r\n ppRendered = false;\r\n ppLastAmount = total;\r\n\r\n ppButtonsInstance = paypal.Buttons({\r\n style: { layout: \"vertical\", color: \"gold\", shape: \"pill\", label: \"pay\" },\r\n createOrder: function (data, actions) {\r\n return actions.order.create({\r\n purchase_units: [{\r\n description: selectedTour.nombre,\r\n amount: { currency_code: \"USD\", value: total.toFixed(2) }\r\n }]\r\n });\r\n },\r\n onApprove: function (data, actions) {\r\n return actions.order.capture().then(function (details) {\r\n console.log(\"Tel\u00e9fono:\", getFullPhone(), \"| Detalles:\", details);\r\n enviarCorreoReserva();\r\n mostrarConfirmacionYRedirigir(details.payer.name.given_name);\r\n });\r\n },\r\n onCancel: function () {\r\n console.log(\"Pago cancelado por el usuario.\");\r\n },\r\n onError: function (err) {\r\n console.error(\"PayPal error:\", err);\r\n Swal.fire({\r\n icon: \"error\",\r\n title: t(\"Hubo un error\", \"There was an error\"),\r\n text: t(\"No pudimos procesar el pago. Por favor intenta nuevamente.\", \"We could not process the payment. Please try again.\"),\r\n confirmButtonColor: \"#1A6B3C\"\r\n });\r\n }\r\n });\r\n\r\n \/\/ .render() devuelve una promesa: reci\u00e9n cuando resuelve, el bot\u00f3n\r\n \/\/ est\u00e1 realmente pintado en pantalla -- ah\u00ed es cuando ocultamos el loader.\r\n ppButtonsInstance.render(\"#paypal-button-container\").then(function () {\r\n ppRendered = true;\r\n if (onReady) onReady();\r\n }).catch(function (err) {\r\n console.error(\"No se pudo renderizar el bot\u00f3n de PayPal:\", err);\r\n if (onReady) onReady();\r\n });\r\n }\r\n\r\n function loadPaypalSdk(callback) {\r\n if (ppSdkLoaded) { callback(); return; }\r\n if (ppSdkLoading) {\r\n \/\/ Esperar a que termine de cargar\r\n var interval = setInterval(function () {\r\n if (ppSdkLoaded) { clearInterval(interval); callback(); }\r\n }, 100);\r\n return;\r\n }\r\n ppSdkLoading = true;\r\n var script = document.createElement(\"script\");\r\n script.src = \"https:\/\/www.paypal.com\/sdk\/js?client-id=\" + PAYPAL_CLIENT_ID + \"¤cy=USD\";\r\n script.onload = function () {\r\n ppSdkLoaded = true;\r\n ppSdkLoading = false;\r\n callback();\r\n };\r\n script.onerror = function () {\r\n ppSdkLoading = false;\r\n console.error(\"No se pudo cargar el SDK de PayPal. Verifica tu Client ID y conexi\u00f3n.\");\r\n document.getElementById(\"pp-loading\").style.display = \"none\";\r\n \/\/ Mostrar bot\u00f3n de fallback\r\n document.getElementById(\"paypal-button-container\").style.display = \"block\";\r\n document.getElementById(\"paypal-button-container\").innerHTML =\r\n '<div style=\"background:#ffc439;border-radius:50px;padding:12px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;color:#1a1a1a;\" ' +\r\n 'onclick=\"alert(' + JSON.stringify(t('SDK de PayPal no disponible. Verifica tu Client ID en PAYPAL_CLIENT_ID.', 'PayPal SDK not available. Check your Client ID in PAYPAL_CLIENT_ID.')) + ')\">' + t('Pagar con PayPal', 'Pay with PayPal') + '<\/div>';\r\n };\r\n document.head.appendChild(script);\r\n }\r\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n \/\/ \u2500\u2500\u2500 Debounce para el bloque de PayPal dentro de updateSummary \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n \/\/ updateSummary() se dispara en casi cada oninput\/onchange del formulario.\r\n \/\/ El resumen (precio, checklist, etc.) se sigue actualizando al instante --\r\n \/\/ eso no tiene costo. Pero cargar el SDK y renderizar el bot\u00f3n de PayPal s\u00ed\r\n \/\/ es costoso y, si el formulario pasa de completo a incompleto y viceversa\r\n \/\/ muy r\u00e1pido (t\u00edpico mientras el usuario escribe), puede disparar renders\r\n \/\/ en carrera. Por eso ese bloque espec\u00edfico se espera 350ms de inactividad\r\n \/\/ antes de ejecutarse.\r\n var ppDebounceTimer = null;\r\n function schedulePaypalRender(total) {\r\n if (ppDebounceTimer) clearTimeout(ppDebounceTimer);\r\n ppDebounceTimer = setTimeout(function () {\r\n var ppContainer = document.getElementById(\"paypal-button-container\");\r\n var ppLoading = document.getElementById(\"pp-loading\");\r\n loadPaypalSdk(function () {\r\n renderPaypalButton(total, function () {\r\n ppLoading.style.display = \"none\";\r\n ppContainer.style.display = \"block\";\r\n });\r\n });\r\n }, 350);\r\n }\r\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n function updateSummary() {\r\n var cont = document.getElementById(\"summary-content\");\r\n var a = parseInt(document.getElementById(\"adultos\").textContent);\r\n var n = parseInt(document.getElementById(\"ninos\").textContent);\r\n var total = calcTotal();\r\n var idiomaEl = document.querySelector('input[name=idioma]:checked');\r\n var idioma = idiomaEl ? idiomaEl.value : \"spanish\";\r\n\r\n if (!selectedTour) {\r\n cont.innerHTML = '<div class=\"co-empty-state\">' + t('Selecciona un tour para ver el resumen', 'Select a tour to see the summary') + '<\/div>';\r\n } else {\r\n var fechaStr = selectedDate\r\n ? selectedDate.toLocaleDateString(IS_EN ? \"en-US\" : \"es-CO\", { day: \"numeric\", month: \"long\", year: \"numeric\" })\r\n : '<span style=\"color:var(--err);font-size:11px;\">' + t('Sin fecha seleccionada', 'No date selected') + '<\/span>';\r\n cont.innerHTML =\r\n '<img decoding=\"async\" class=\"co-summary-img\" src=\"' + selectedTour.img + '\" alt=\"' + selectedTour.nombre + '\">' +\r\n '<div class=\"co-summary-tour-name\">' + selectedTour.nombre + '<\/div>' +\r\n '<div class=\"co-summary-tour-detail\">' + fechaStr + '<\/div>' +\r\n '<div class=\"co-summary-tour-detail\">' + a + ' ' + t('adulto', 'adult') + (a !== 1 ? 's' : '') +\r\n (n > 0 ? ' \u00b7 ' + n + ' ' + t('ni\u00f1o', 'child') + (n !== 1 ? (IS_EN ? 'ren' : 's') : '') : '') +\r\n ' \u00b7 ' + (idioma === 'english' ? 'English' : 'Spanish') + '<\/div>' +\r\n (a > 0 ? '<div class=\"co-price-row\"><span>' + t('Adultos', 'Adults') + ' (' + a + ' \u00d7 $' + selectedTour.adulto + ')<\/span><span>$' + (a * selectedTour.adulto).toFixed(2) + '<\/span><\/div>' : '') +\r\n (n > 0 ? '<div class=\"co-price-row\"><span>' + t('Ni\u00f1os', 'Children') + ' (' + n + ' \u00d7 $' + selectedTour.nino + ')<\/span><span>$' + (n * selectedTour.nino).toFixed(2) + '<\/span><\/div>' : '') +\r\n '<div class=\"co-price-row total\"><span>' + t('Total', 'Total') + '<\/span><span>$' + total.toFixed(2) + ' USD<\/span><\/div>';\r\n }\r\n\r\n setCheck(\"ck-tour\", !!selectedTour);\r\n setCheck(\"ck-fecha\", !!selectedDate);\r\n setCheck(\"ck-datos\", isDatosComplete());\r\n setCheck(\"ck-pasajeros\", isPasajerosComplete());\r\n setCheck(\"ck-privacidad\", document.getElementById(\"chk-privacidad\").checked);\r\n\r\n var complete = isFormComplete();\r\n var btnDisable = document.getElementById(\"btn-disabled\");\r\n var ppContainer = document.getElementById(\"paypal-button-container\");\r\n var ppLoading = document.getElementById(\"pp-loading\");\r\n var paySeparator = document.getElementById(\"pay-separator\");\r\n var whatsappBtn = document.getElementById(\"whatsapp-button\");\r\n\r\n if (complete) {\r\n btnDisable.style.display = \"none\";\r\n \/\/ Mientras el SDK carga y el bot\u00f3n se pinta, mostramos el loader\r\n \/\/ en vez de dejar el espacio vac\u00edo.\r\n ppContainer.style.display = \"none\";\r\n ppLoading.style.display = \"flex\";\r\n schedulePaypalRender(total);\r\n\r\n \/\/ El bot\u00f3n de WhatsApp no depende del SDK de PayPal, as\u00ed que se\r\n \/\/ muestra de inmediato en cuanto el formulario est\u00e1 completo.\r\n paySeparator.classList.add(\"visible\");\r\n whatsappBtn.classList.add(\"visible\");\r\n } else {\r\n btnDisable.style.display = \"block\";\r\n ppContainer.style.display = \"none\";\r\n ppLoading.style.display = \"none\";\r\n paySeparator.classList.remove(\"visible\");\r\n whatsappBtn.classList.remove(\"visible\");\r\n\r\n \/\/ Si hab\u00eda un render de PayPal programado (debounce) que todav\u00eda no\r\n \/\/ se ejecut\u00f3, se cancela: no tiene sentido pintar el bot\u00f3n si el\r\n \/\/ formulario ya volvi\u00f3 a estar incompleto.\r\n if (ppDebounceTimer) {\r\n clearTimeout(ppDebounceTimer);\r\n ppDebounceTimer = null;\r\n }\r\n\r\n \/\/ Cierra la instancia de PayPal correctamente (en vez de solo\r\n \/\/ vaciar el HTML) para no dejar componentes hu\u00e9rfanos en memoria.\r\n if (ppButtonsInstance) {\r\n ppButtonsInstance.close().catch(function () {});\r\n ppButtonsInstance = null;\r\n }\r\n ppContainer.innerHTML = \"\";\r\n ppRendered = false;\r\n }\r\n }\r\n\r\n \/\/ \u2500\u2500\u2500 Pre-llenado desde la URL (viene del widget de reserva del home) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n \/\/ Ej: \/checkout\/?tour=medellin&fecha=2026-07-15&adultos=2&ninos=1\r\n function precargarDesdeURL() {\r\n var params = new URLSearchParams(window.location.search);\r\n var tourParam = params.get(\"tour\");\r\n var fechaParam = params.get(\"fecha\");\r\n var adultosParam = params.get(\"adultos\");\r\n var ninosParam = params.get(\"ninos\");\r\n\r\n if (tourParam && TOURS[tourParam]) {\r\n document.getElementById(\"tour\").value = tourParam;\r\n onTourChange();\r\n }\r\n\r\n if (adultosParam) {\r\n var a = parseInt(adultosParam);\r\n if (!isNaN(a) && a >= 1) document.getElementById(\"adultos\").textContent = Math.min(a, 10);\r\n }\r\n if (ninosParam) {\r\n var n = parseInt(ninosParam);\r\n if (!isNaN(n) && n >= 0) document.getElementById(\"ninos\").textContent = Math.min(n, 10);\r\n }\r\n renderDatosPasajeros();\r\n\r\n if (fechaParam) {\r\n var fp = document.getElementById(\"cal\")._flatpickr;\r\n if (fp) {\r\n fp.setDate(fechaParam, true); \/\/ true = dispara onChange -> actualiza selectedDate\r\n }\r\n }\r\n }\r\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n renderDatosPasajeros();\r\n precargarDesdeURL();\r\n updateSummary();\r\n <\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\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":"<p>Checkout \u2014 International Tours Medell\u00edn Datos de la reserva Nombre Campo requerido Apellidos Campo requerido Correo electr\u00f3nico Correo inv\u00e1lido Prefijo \ud83c\udde8\ud83c\uddf4 +57\ud83c\udde6\ud83c\uddf7 +54\ud83c\uddf2\ud83c\uddfd +52\ud83c\uddfb\ud83c\uddea +58\ud83c\uddf5\ud83c\uddea +51\ud83c\udde8\ud83c\uddf1 +56\ud83c\uddea\ud83c\udde8 +593\ud83c\udde7\ud83c\uddf7 +55\ud83c\uddfa\ud83c\uddf8 +1\ud83c\uddea\ud83c\uddf8 +34\ud83c\uddeb\ud83c\uddf7 +33\ud83c\udde9\ud83c\uddea +49\ud83c\uddf5\ud83c\uddf7 +1\ud83c\udde9\ud83c\uddf4 +1\ud83c\uddf5\ud83c\udde6 +507 Tel\u00e9fono m\u00f3vil Campo requerido Tour Selecciona un tourTour de ciudad de Medell\u00ednTour de Guatap\u00e9Tour Feria de las FloresTour Test […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-533","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/internationaltoursmedellin.com\/en\/wp-json\/wp\/v2\/pages\/533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/internationaltoursmedellin.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/internationaltoursmedellin.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/internationaltoursmedellin.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/internationaltoursmedellin.com\/en\/wp-json\/wp\/v2\/comments?post=533"}],"version-history":[{"count":70,"href":"https:\/\/internationaltoursmedellin.com\/en\/wp-json\/wp\/v2\/pages\/533\/revisions"}],"predecessor-version":[{"id":834,"href":"https:\/\/internationaltoursmedellin.com\/en\/wp-json\/wp\/v2\/pages\/533\/revisions\/834"}],"wp:attachment":[{"href":"https:\/\/internationaltoursmedellin.com\/en\/wp-json\/wp\/v2\/media?parent=533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}