ORIZON Navbar - Hamburguesa Lateral + Anclas<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: #e9f0f5; \/* solo fondo de respaldo, no afecta al bloque *\/\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n }\n\n \/* Navbar glass *\/\n .navbar-glass {\n position: sticky;\n top: 0;\n z-index: 1000;\n background: rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(31, 38, 135, 0.4);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n }\n\n .nav-container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 1rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo img {\n height: 80px;\n width: auto;\n display: block;\n }\n\n \/* Men\u00fa desktop *\/\n .nav-menu {\n display: flex;\n gap: 2rem;\n list-style: none;\n align-items: center;\n }\n .nav-menu li a {\n text-decoration: none;\n font-weight: 600;\n color: #0F2028;\n transition: all 0.2s ease;\n padding: 0.5rem 0;\n position: relative;\n font-size: 1rem;\n }\n .nav-menu li a::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0%;\n height: 2px;\n background: #2ECFA0;\n transition: width 0.3s ease;\n }\n .nav-menu li a:hover {\n color: #2ECFA0;\n }\n .nav-menu li a:hover::after {\n width: 100%;\n }\n\n .btn-reservar-desktop {\n background: rgba(46, 207, 160, 0.25);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(46, 207, 160, 0.6);\n padding: 0.6rem 1.5rem;\n border-radius: 40px;\n font-weight: 700;\n color: #0F2028;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 0.9rem;\n font-family: inherit;\n }\n .btn-reservar-desktop:hover {\n background: #2ECFA0;\n color: white;\n border-color: #2ECFA0;\n box-shadow: 0 8px 20px rgba(46, 207, 160, 0.3);\n transform: translateY(-2px);\n }\n\n \/* Hamburguesa *\/\n .hamburger {\n display: none;\n flex-direction: column;\n cursor: pointer;\n gap: 6px;\n background: transparent;\n border: none;\n padding: 5px;\n z-index: 1100;\n }\n .hamburger span {\n width: 28px;\n height: 3px;\n background-color: #0F2028;\n border-radius: 4px;\n transition: 0.3s;\n }\n\n \/* Men\u00fa lateral off-canvas *\/\n .sidebar-menu {\n position: fixed;\n top: 0;\n right: -100%;\n width: 280px;\n height: 100vh;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);\n z-index: 1050;\n transition: right 0.4s ease;\n padding: 5rem 2rem 2rem 2rem;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n border-left: 1px solid rgba(255,255,255,0.5);\n }\n .sidebar-menu.active {\n right: 0;\n }\n .sidebar-menu ul {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 1.8rem;\n }\n .sidebar-menu ul li a {\n text-decoration: none;\n font-size: 1.3rem;\n font-weight: 600;\n color: #0F2028;\n transition: 0.2s;\n }\n .sidebar-menu ul li a:hover {\n color: #2ECFA0;\n padding-left: 8px;\n }\n .btn-reservar-mobile {\n background: rgba(46, 207, 160, 0.25);\n border: 1px solid #2ECFA0;\n padding: 0.8rem;\n border-radius: 40px;\n font-weight: 700;\n color: #0F2028;\n cursor: pointer;\n transition: 0.3s;\n font-size: 1rem;\n width: 100%;\n text-align: center;\n margin-top: 0.5rem;\n }\n .btn-reservar-mobile:hover {\n background: #2ECFA0;\n color: white;\n }\n .menu-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.3);\n backdrop-filter: blur(2px);\n z-index: 1040;\n opacity: 0;\n visibility: hidden;\n transition: 0.3s;\n }\n .menu-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .nav-container {\n padding: 0.8rem 1.5rem;\n }\n .logo img {\n height: 60px;\n }\n .nav-menu {\n display: none;\n }\n .btn-reservar-desktop {\n display: none;\n }\n .hamburger {\n display: flex;\n }\n }\n @media (min-width: 769px) {\n .sidebar-menu, .menu-overlay, .btn-reservar-mobile {\n display: none;\n }\n }\n\n \/* Scroll suave global y compensaci\u00f3n para que el navbar no tape el inicio de cada secci\u00f3n *\/\n html {\n scroll-behavior: smooth;\n }\n section[id], div[id] {\n scroll-margin-top: 100px;\n }\n <\/style>\n<\/head>\n<body>\n\n<nav class=\"navbar-glass\">\n <div class=\"nav-container\">\n <div class=\"logo\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/Logo-Hotel-scaled.png\" alt=\"ORIZON Santa Marta\">\n <\/div>\n \n <ul class=\"nav-menu\">\n <li><a href=\"#hero\">Inicio<\/a><\/li>\n <li><a href=\"#habitaciones-espacios\">Habitaciones<\/a><\/li>\n <li><a href=\"#motor-reservas\">Reservas<\/a><\/li>\n <li><a href=\"#experiencias\">Experiencias<\/a><\/li>\n <li><a href=\"#contacto\">Contacto<\/a><\/li>\n <\/ul>\n <button class=\"btn-reservar-desktop\" id=\"reservarBtnDesktop\">Reservar ahora<\/button>\n \n <button class=\"hamburger\" id=\"hamburgerBtn\" aria-label=\"Abrir men\u00fa\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/button>\n <\/div>\n<\/nav>\n\n\n<div class=\"sidebar-menu\" id=\"sidebarMenu\">\n <ul>\n <li><a href=\"#hero\">Inicio<\/a><\/li>\n <li><a href=\"#habitaciones-espacios\">Habitaciones<\/a><\/li>\n <li><a href=\"#motor-reservas\">Reservas<\/a><\/li>\n <li><a href=\"#experiencias\">Experiencias<\/a><\/li>\n <li><a href=\"#contacto\">Contacto<\/a><\/li>\n <\/ul>\n <button class=\"btn-reservar-mobile\" id=\"reservarBtnMobile\">Reservar ahora<\/button>\n<\/div>\n<div class=\"menu-overlay\" id=\"menuOverlay\"><\/div>\n\n<script>\n \/\/ Men\u00fa lateral\n const hamburger = document.getElementById('hamburgerBtn');\n const sidebar = document.getElementById('sidebarMenu');\n const overlay = document.getElementById('menuOverlay');\n const closeMenu = () => {\n sidebar.classList.remove('active');\n overlay.classList.remove('active');\n };\n const openMenu = () => {\n sidebar.classList.add('active');\n overlay.classList.add('active');\n };\n hamburger.addEventListener('click', (e) => {\n e.stopPropagation();\n if (sidebar.classList.contains('active')) closeMenu();\n else openMenu();\n });\n overlay.addEventListener('click', closeMenu);\n document.querySelectorAll('.sidebar-menu a, .sidebar-menu button').forEach(el => {\n el.addEventListener('click', closeMenu);\n });\n\n \/\/ Botones \"Reservar ahora\" llevan a #motor-reservas\n function scrollToReservas() {\n const target = document.getElementById('motor-reservas');\n if (target) target.scrollIntoView({ behavior: 'smooth' });\n else console.warn('El bloque Motor de Reservas a\u00fan no tiene id=\"motor-reservas\"');\n }\n const btnDesktop = document.getElementById('reservarBtnDesktop');\n const btnMobile = document.getElementById('reservarBtnMobile');\n if (btnDesktop) btnDesktop.addEventListener('click', scrollToReservas);\n if (btnMobile) btnMobile.addEventListener('click', scrollToReservas);\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0d9d996 e-con-full e-flex e-con e-parent\" data-id=\"0d9d996\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b337277 elementor-widget elementor-widget-html\" data-id=\"b337277\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON Hero<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n \/* Hero container con imagen de fondo *\/\n .hero-caribe {\n position: relative;\n width: 100%;\n min-height: 90vh;\n background-image: url('https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/Hero-Hotel-scaled.png');\n background-size: cover;\n background-position: center center;\n background-repeat: no-repeat;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-family: 'Segoe UI', 'Poppins', system-ui, -apple-system, sans-serif;\n }\n\n \/* Overlay glass (efecto vidrio sobre la imagen) *\/\n .hero-overlay {\n background: rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border-radius: 32px;\n border: 1px solid rgba(255, 255, 255, 0.3);\n padding: 3rem 2rem;\n max-width: 800px;\n margin: 2rem;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n transition: transform 0.3s ease;\n }\n\n .hero-overlay:hover {\n transform: scale(1.02);\n }\n\n \/* T\u00edtulos y texto *\/\n .hero-overlay h1 {\n font-size: 3.5rem;\n font-weight: 800;\n color: #0F2028;\n margin-bottom: 1rem;\n letter-spacing: -0.5px;\n text-shadow: 2px 2px 15px rgba(255,255,255,0.3);\n }\n\n .hero-overlay p {\n font-size: 1.2rem;\n color: #0F2028;\n margin-bottom: 2rem;\n font-weight: 500;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* Bot\u00f3n CTA glass con color verde mar *\/\n .btn-hero {\n display: inline-block;\n background: rgba(46, 207, 160, 0.25);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(46, 207, 160, 0.7);\n padding: 0.9rem 2.5rem;\n border-radius: 50px;\n font-weight: 700;\n font-size: 1rem;\n color: #0F2028;\n text-decoration: none;\n transition: all 0.3s ease;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n }\n\n .btn-hero:hover {\n background: #2ECFA0;\n color: white;\n border-color: #2ECFA0;\n box-shadow: 0 8px 25px rgba(46, 207, 160, 0.4);\n transform: translateY(-3px);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .hero-overlay h1 {\n font-size: 2.2rem;\n }\n .hero-overlay p {\n font-size: 1rem;\n }\n .hero-overlay {\n padding: 2rem 1.5rem;\n margin: 1rem;\n }\n .btn-hero {\n padding: 0.7rem 1.8rem;\n font-size: 0.9rem;\n }\n }\n\n @media (max-width: 480px) {\n .hero-overlay h1 {\n font-size: 1.8rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"hero-caribe\">\n <div class=\"hero-overlay\">\n <h1>ORIZON<br>Santa Marta<\/h1>\n <p>Lujo flotante sobre el Caribe. Vidrio, brisa y exclusividad frente al mar.<\/p>\n <a href=\"#\" class=\"btn-hero\" id=\"heroCta\">Explorar habitaciones<\/a>\n <\/div>\n <\/section>\n\n \n <script>\n document.getElementById('heroCta').addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.getElementById('habitaciones');\n if (target) {\n target.scrollIntoView({ behavior: 'smooth' });\n } else {\n console.log('El bloque de habitaciones se agregar\u00e1 con id=\"habitaciones\"');\n }\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3274ee7 e-con-full e-flex e-con e-parent\" data-id=\"3274ee7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-588bd3e elementor-widget elementor-widget-html\" data-id=\"588bd3e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Reservas - ORIZON Hotel Santa Marta<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIABLES \u2014 Paleta ORIZON\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n :root {\n --ocean-deep: #0F2028;\n --ocean-mid: #162F3A;\n --ocean-surface: #1C3D4A;\n --teal: #2ECFA0;\n --teal-dim: rgba(46,207,160,0.18);\n --teal-glow: rgba(46,207,160,0.35);\n --teal-border: rgba(46,207,160,0.45);\n --glass-white: rgba(255,255,255,0.07);\n --glass-card: rgba(255,255,255,0.06);\n --glass-hover: rgba(255,255,255,0.11);\n --glass-border: rgba(255,255,255,0.14);\n --glass-border-b:rgba(31,38,135,0.35);\n --indigo-glow: rgba(31,38,135,0.2);\n --white: #FFFFFF;\n --text-dim: rgba(255,255,255,0.55);\n --text-soft: rgba(255,255,255,0.78);\n --gold: #C9A46B;\n --gold-light: rgba(201,164,107,0.25);\n --warn: #E88C8C;\n --radius-sm: 10px;\n --radius: 18px;\n --radius-lg: 26px;\n --shadow: 0 16px 48px rgba(0,0,0,0.35);\n --shadow-teal: 0 8px 32px rgba(46,207,160,0.2);\n --font-title: 'Cormorant Garamond', serif;\n --font-body: 'DM Sans', sans-serif;\n }\n\n * { margin:0; padding:0; box-sizing:border-box; }\n\n body {\n font-family: var(--font-body);\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FONDO ANIMADO \u2014 OC\u00c9ANO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n \/* Ondas animadas \u2014 absolutas dentro de la secci\u00f3n *\/\n .or-bg {\n position: absolute; inset: 0; z-index: 0;\n pointer-events: none; overflow: hidden;\n }\n .or-bg-wave {\n position: absolute; width: 200%; height: 200%;\n top: -50%; left: -50%;\n background: radial-gradient(ellipse 40% 30% at 60% 40%, rgba(46,207,160,0.04) 0%, transparent 60%);\n animation: or-drift 18s ease-in-out infinite alternate;\n }\n .or-bg-wave-2 {\n animation: or-drift 24s ease-in-out infinite alternate-reverse;\n background: radial-gradient(ellipse 50% 40% at 30% 60%, rgba(31,38,135,0.08) 0%, transparent 60%);\n }\n @keyframes or-drift {\n from { transform: translate(0,0) rotate(0deg); }\n to { transform: translate(3%,2%) rotate(2deg); }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCI\u00d3N \u2014 todo el fondo aqu\u00ed, aislado\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-section {\n position: relative;\n overflow: hidden;\n padding: 5rem 2rem 6rem;\n color: var(--white);\n \/* Fondo oc\u00e9ano completo confinado al bloque *\/\n background:\n radial-gradient(ellipse 80% 60% at 70% 10%, rgba(46,207,160,0.09) 0%, transparent 60%),\n radial-gradient(ellipse 60% 80% at 10% 80%, rgba(31,38,135,0.18) 0%, transparent 60%),\n radial-gradient(ellipse 50% 50% at 90% 90%, rgba(46,207,160,0.05) 0%, transparent 50%),\n linear-gradient(160deg, #0F2028 0%, #121E2A 40%, #0D1C28 70%, #0F2028 100%);\n }\n \/* Patr\u00f3n de puntos sutil \u2014 solo dentro de la secci\u00f3n *\/\n .or-section::before {\n content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;\n background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);\n background-size: 32px 32px;\n }\n .or-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }\n\n \/* CABECERA *\/\n .or-header { text-align: center; margin-bottom: 3.5rem; }\n .or-tag {\n display: inline-flex; align-items: center; gap: 0.5rem;\n background: var(--teal-dim); border: 1px solid var(--teal-border);\n color: var(--teal); font-size: 0.7rem; font-weight: 600;\n letter-spacing: 0.18em; text-transform: uppercase;\n padding: 0.45rem 1.2rem; border-radius: 50px; margin-bottom: 1.2rem;\n }\n .or-title {\n font-family: var(--font-title); font-size: 3.2rem; font-weight: 300;\n color: var(--white); line-height: 1.1; margin-bottom: 0.7rem;\n letter-spacing: -0.01em;\n }\n .or-title strong { font-weight: 600; color: var(--teal); font-style: italic; }\n .or-subtitle {\n font-size: 0.92rem; color: var(--text-dim); max-width: 480px;\n margin: 0 auto; line-height: 1.6;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n STEPS BAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-steps {\n display: flex; align-items: center; justify-content: center;\n gap: 0; margin-bottom: 3rem; flex-wrap: wrap;\n }\n .or-step {\n display: flex; align-items: center; gap: 0.6rem;\n padding: 0.5rem 0.8rem; cursor: default;\n transition: all 0.3s;\n }\n .or-step.done { cursor: pointer; }\n .or-step-num {\n width: 30px; height: 30px; border-radius: 50%;\n border: 1.5px solid var(--glass-border);\n display: flex; align-items: center; justify-content: center;\n font-size: 0.75rem; font-weight: 600;\n color: var(--text-dim); background: var(--glass-white);\n transition: all 0.35s; flex-shrink: 0;\n backdrop-filter: blur(8px);\n }\n .or-step.active .or-step-num {\n background: var(--teal); border-color: var(--teal);\n color: var(--ocean-deep); box-shadow: 0 0 0 5px var(--teal-dim);\n }\n .or-step.done .or-step-num {\n background: var(--teal-dim); border-color: var(--teal-border); color: var(--teal);\n }\n .or-step-lbl {\n font-size: 0.78rem; font-weight: 500; color: var(--text-dim);\n transition: color 0.3s; white-space: nowrap;\n }\n .or-step.active .or-step-lbl { color: var(--white); }\n .or-step.done .or-step-lbl { color: var(--teal); }\n .or-step-line {\n width: 48px; height: 1px;\n background: var(--glass-border);\n transition: background 0.4s;\n }\n .or-step-line.done { background: var(--teal-border); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n LAYOUT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-layout {\n display: grid;\n grid-template-columns: 1fr 320px;\n gap: 1.5rem; align-items: start;\n }\n\n \/* CARD GLASS *\/\n .or-card {\n background: var(--glass-card);\n backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);\n overflow: hidden;\n }\n .or-card-head {\n padding: 1.6rem 2rem 1.2rem;\n border-bottom: 1px solid var(--glass-border);\n display: flex; align-items: center; gap: 0.9rem;\n }\n .or-card-ico {\n width: 40px; height: 40px; border-radius: 12px;\n background: var(--teal-dim); border: 1px solid var(--teal-border);\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n }\n .or-card-ico svg { width: 18px; height: 18px; stroke: var(--teal); }\n .or-card-title {\n font-family: var(--font-title); font-size: 1.25rem; font-weight: 600;\n color: var(--white); line-height: 1.2;\n }\n .or-card-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.1rem; }\n .or-card-body { padding: 1.8rem 2rem; }\n\n \/* PASO oculto\/visible *\/\n .or-pane { display: none; }\n .or-pane.active { display: block; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PASO 1 \u2014 FECHAS Y HU\u00c9SPEDES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n \/* Calendario *\/\n .or-cal-pair {\n display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;\n margin-bottom: 2rem;\n }\n .or-cal-box {}\n .or-cal-lbl {\n font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em;\n text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.7rem;\n display: flex; align-items: center; gap: 0.4rem;\n }\n .or-cal-lbl svg { width: 13px; height: 13px; stroke: var(--teal); }\n\n .or-cal {\n background: var(--glass-white);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius); overflow: hidden;\n }\n .or-cal-nav {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.8rem 1rem;\n border-bottom: 1px solid var(--glass-border);\n }\n .or-cal-month {\n font-family: var(--font-title); font-size: 1rem; font-weight: 600;\n color: var(--white);\n }\n .or-cal-btn {\n width: 28px; height: 28px; border-radius: 8px;\n background: var(--glass-white); border: 1px solid var(--glass-border);\n color: var(--text-soft); cursor: pointer; font-size: 0.9rem;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.2s;\n }\n .or-cal-btn:hover:not(:disabled) { background: var(--teal-dim); border-color: var(--teal-border); color: var(--teal); }\n .or-cal-btn:disabled { opacity: 0.25; cursor: not-allowed; }\n\n .or-cal-grid {\n display: grid; grid-template-columns: repeat(7,1fr);\n gap: 2px; padding: 0.7rem;\n }\n .or-cal-dow {\n text-align: center; font-size: 0.6rem; font-weight: 600;\n letter-spacing: 0.07em; text-transform: uppercase;\n color: var(--text-dim); padding: 0.3rem 0 0.5rem;\n }\n .or-cal-day {\n aspect-ratio: 1; border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.77rem; cursor: pointer; position: relative;\n color: var(--text-soft); transition: all 0.2s; font-weight: 400;\n }\n .or-cal-day:hover:not(.or-disabled):not(.or-empty) {\n background: var(--teal-dim); color: var(--teal);\n }\n .or-cal-day.or-today { color: var(--teal); font-weight: 600; }\n .or-cal-day.or-today::after {\n content:''; position:absolute; bottom:3px; left:50%;\n transform:translateX(-50%); width:4px; height:4px;\n border-radius:50%; background:var(--teal);\n }\n .or-cal-day.or-selected {\n background: var(--teal) !important; color: var(--ocean-deep) !important;\n font-weight: 700; box-shadow: var(--shadow-teal);\n }\n .or-cal-day.or-selected::after { display: none; }\n .or-cal-day.or-in-range {\n background: var(--teal-dim); color: var(--teal);\n border-radius: 0;\n }\n .or-cal-day.or-range-start { border-radius: 8px 0 0 8px; }\n .or-cal-day.or-range-end { border-radius: 0 8px 8px 0; }\n .or-cal-day.or-disabled { color: rgba(255,255,255,0.18); cursor:not-allowed; }\n .or-cal-day.or-empty { cursor: default; }\n\n \/* Indicador de noches *\/\n .or-nights-badge {\n display: flex; align-items: center; justify-content: center; gap: 0.5rem;\n background: var(--teal-dim); border: 1px solid var(--teal-border);\n border-radius: 10px; padding: 0.6rem 1rem; margin-bottom: 2rem;\n font-size: 0.82rem; color: var(--teal); font-weight: 500;\n transition: all 0.3s;\n }\n .or-nights-badge strong { font-size: 1.1rem; font-weight: 700; }\n .or-nights-badge.hidden { opacity: 0; pointer-events: none; }\n\n \/* Controles hu\u00e9spedes *\/\n .or-guests-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 0; }\n .or-guest-ctrl {\n background: var(--glass-white); border: 1px solid var(--glass-border);\n border-radius: var(--radius); padding: 1.1rem 1rem;\n text-align: center;\n }\n .or-guest-label { font-size: 0.68rem; font-weight: 600; letter-spacing:0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.8rem; }\n .or-guest-emoji { font-size: 1.4rem; margin-bottom: 0.5rem; display: block; }\n .or-guest-row { display: flex; align-items: center; justify-content: center; gap: 0.7rem; }\n .or-ctr-btn {\n width: 28px; height: 28px;\n min-width: 28px; min-height: 28px;\n aspect-ratio: 1 \/ 1;\n border-radius: 50%;\n background: var(--glass-white); border: 1px solid var(--glass-border);\n color: var(--text-soft); font-size: 1.1rem; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.2s; line-height: 1;\n padding: 0; flex-shrink: 0;\n }\n .or-ctr-btn:hover:not(:disabled) { background: var(--teal-dim); border-color: var(--teal-border); color: var(--teal); }\n .or-ctr-btn:disabled { opacity: 0.2; cursor: not-allowed; }\n .or-ctr-val { font-size: 1.2rem; font-weight: 700; color: var(--white); min-width: 20px; text-align: center; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PASO 2 \u2014 HABITACI\u00d3N\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-rooms { display: flex; flex-direction: column; gap: 1rem; }\n .or-room {\n background: var(--glass-white); border: 1.5px solid var(--glass-border);\n border-radius: var(--radius); overflow: hidden; cursor: pointer;\n transition: all 0.3s; display: flex;\n }\n .or-room:hover { border-color: rgba(46,207,160,0.35); background: var(--glass-hover); transform: translateY(-2px); }\n .or-room.selected {\n border-color: var(--teal); background: rgba(46,207,160,0.07);\n box-shadow: 0 0 0 1px var(--teal-dim), var(--shadow-teal);\n }\n\n .or-room-img {\n width: 130px; flex-shrink: 0;\n background: linear-gradient(135deg, var(--ocean-surface) 0%, var(--ocean-mid) 100%);\n position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;\n }\n .or-room-img-emoji { font-size: 2.5rem; opacity: 0.7; }\n .or-room-img-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to right, transparent 60%, rgba(15,32,40,0.5));\n }\n\n .or-room-body { flex: 1; padding: 1.1rem 1.3rem; }\n .or-room-tag {\n font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--teal); background: var(--teal-dim); border: 1px solid var(--teal-border);\n padding: 0.2rem 0.6rem; border-radius: 50px; display: inline-block; margin-bottom: 0.5rem;\n }\n .or-room-name {\n font-family: var(--font-title); font-size: 1.1rem; font-weight: 600;\n color: var(--white); margin-bottom: 0.3rem; line-height: 1.2;\n }\n .or-room-desc { font-size: 0.75rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 0.7rem; }\n .or-room-features { display: flex; flex-wrap: wrap; gap: 0.4rem; }\n .or-feat {\n font-size: 0.67rem; background: var(--glass-white); border: 1px solid var(--glass-border);\n border-radius: 50px; padding: 0.2rem 0.55rem; color: var(--text-soft);\n }\n\n .or-room-right { padding: 1.1rem 1.3rem; text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; min-width: 110px; }\n .or-room-price-lbl { font-size: 0.62rem; color: var(--text-dim); letter-spacing: 0.05em; }\n .or-room-price { font-family: var(--font-title); font-size: 1.3rem; font-weight: 700; color: var(--teal); line-height: 1; }\n .or-room-price-night { font-size: 0.68rem; color: var(--text-dim); }\n .or-room-check {\n width: 24px; height: 24px; border-radius: 50%;\n border: 2px solid var(--glass-border);\n display: flex; align-items: center; justify-content: center;\n transition: all 0.25s; background: var(--glass-white);\n }\n .or-room.selected .or-room-check { background: var(--teal); border-color: var(--teal); }\n .or-room-check svg { width: 10px; height: 10px; stroke: var(--ocean-deep); stroke-width: 2.5; opacity: 0; transform: scale(0.5); transition: all 0.2s; }\n .or-room.selected .or-room-check svg { opacity: 1; transform: scale(1); }\n\n \/* EXTRAS *\/\n .or-extras-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 1.8rem 0 0.9rem; }\n .or-extras-wrap { display: flex; flex-wrap: wrap; gap: 0.6rem; }\n .or-extra {\n display: flex; align-items: center; gap: 0.5rem;\n background: var(--glass-white); border: 1.5px solid var(--glass-border);\n border-radius: 50px; padding: 0.5rem 1rem; cursor: pointer;\n transition: all 0.25s; font-size: 0.78rem; color: var(--text-soft);\n }\n .or-extra:hover { border-color: rgba(46,207,160,0.35); }\n .or-extra.selected { border-color: var(--teal); background: var(--teal-dim); color: var(--teal); }\n .or-extra-price { font-size: 0.68rem; font-weight: 600; color: var(--text-dim); }\n .or-extra.selected .or-extra-price { color: var(--teal); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PASO 3 \u2014 DATOS PERSONALES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n .or-fg { display: flex; flex-direction: column; gap: 0.4rem; }\n .or-fg.full { grid-column: 1\/-1; }\n .or-lbl {\n font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;\n color: var(--text-dim); text-transform: uppercase;\n }\n .or-input, .or-select, .or-textarea {\n background: var(--glass-white); border: 1.5px solid var(--glass-border);\n border-radius: var(--radius-sm); padding: 0.78rem 1rem;\n font-size: 0.88rem; color: var(--white); font-family: var(--font-body);\n outline: none; transition: all 0.25s; width: 100%;\n backdrop-filter: blur(8px);\n }\n .or-input::placeholder, .or-textarea::placeholder { color: rgba(255,255,255,0.25); }\n .or-input:focus, .or-select:focus, .or-textarea:focus {\n border-color: var(--teal-border);\n box-shadow: 0 0 0 3px var(--teal-dim);\n background: rgba(255,255,255,0.09);\n }\n .or-select option { background: var(--ocean-mid); color: var(--white); }\n .or-textarea { resize: vertical; min-height: 85px; }\n\n \/* Selector de llegada estimada *\/\n .or-arrival-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n\n \/* Preferencias chips *\/\n .or-prefs-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n .or-pref {\n font-size: 0.74rem; padding: 0.38rem 0.85rem; border-radius: 50px;\n border: 1.5px solid var(--glass-border); background: var(--glass-white);\n cursor: pointer; transition: all 0.25s; color: var(--text-soft);\n }\n .or-pref:hover { border-color: var(--teal-border); }\n .or-pref.selected { border-color: var(--teal); background: var(--teal-dim); color: var(--teal); font-weight: 500; }\n\n \/* Pol\u00edticas *\/\n .or-policy {\n margin-top: 1.5rem; background: var(--glass-white);\n border: 1px solid var(--glass-border); border-radius: var(--radius-sm);\n padding: 1rem 1.2rem;\n }\n .or-policy-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.4rem; }\n .or-policy-title svg { width: 13px; height: 13px; stroke: var(--teal); }\n .or-policy-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.75rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 0.4rem; }\n .or-policy-item::before { content: '\u00b7'; color: var(--teal); font-size: 1rem; line-height: 1.1; flex-shrink: 0; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PASO 4 \u2014 CONFIRMACI\u00d3N\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-success { text-align: center; padding: 2rem 0 1rem; }\n .or-success-wave { font-size: 3.5rem; margin-bottom: 1rem; display: block; animation: or-float 3s ease-in-out infinite; }\n @keyframes or-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }\n .or-success-title { font-family: var(--font-title); font-size: 2rem; font-weight: 600; color: var(--white); margin-bottom: 0.5rem; }\n .or-success-title em { color: var(--teal); font-style: italic; }\n .or-success-text { font-size: 0.88rem; color: var(--text-dim); line-height: 1.7; max-width: 420px; margin: 0 auto 2rem; }\n .or-confirm-box {\n background: var(--glass-white); border: 1px solid var(--glass-border);\n border-radius: var(--radius); padding: 1.4rem 1.8rem; text-align: left; margin-bottom: 1.8rem;\n }\n .or-confirm-row {\n display: flex; justify-content: space-between; align-items: center;\n padding: 0.5rem 0; border-bottom: 1px solid var(--glass-border);\n font-size: 0.83rem;\n }\n .or-confirm-row:last-child { border-bottom: none; }\n .or-confirm-key { color: var(--text-dim); }\n .or-confirm-val { color: var(--white); font-weight: 600; text-align: right; }\n .or-confirm-val.accent { color: var(--teal); }\n .or-success-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BOTONES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; gap: 1rem; }\n .or-btn {\n padding: 0.8rem 2rem; border-radius: 50px; font-size: 0.88rem;\n font-weight: 600; cursor: pointer; border: none; font-family: var(--font-body);\n transition: all 0.3s; display: inline-flex; align-items: center; gap: 0.5rem;\n }\n .or-btn svg { width: 15px; height: 15px; }\n .or-btn-ghost {\n background: var(--glass-white); border: 1.5px solid var(--glass-border);\n color: var(--text-soft); backdrop-filter: blur(8px);\n }\n .or-btn-ghost:hover { border-color: rgba(255,255,255,0.3); color: var(--white); }\n .or-btn-teal {\n background: var(--teal); color: var(--ocean-deep);\n }\n .or-btn-teal:hover { background: #3de0ad; box-shadow: var(--shadow-teal), 0 4px 16px rgba(46,207,160,0.25); transform: translateY(-2px); }\n .or-btn-teal:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }\n .or-btn-outline {\n background: transparent; border: 1.5px solid var(--teal-border);\n color: var(--teal); backdrop-filter: blur(8px);\n }\n .or-btn-outline:hover { background: var(--teal-dim); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PANEL RESUMEN \u2014 STICKY\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-summary {\n position: sticky; top: 2rem;\n background: var(--glass-card); backdrop-filter: blur(28px);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.07);\n overflow: hidden;\n }\n .or-sum-head {\n background: linear-gradient(135deg, rgba(46,207,160,0.2) 0%, rgba(46,207,160,0.05) 100%);\n border-bottom: 1px solid var(--teal-border);\n padding: 1.4rem 1.6rem;\n }\n .or-sum-eye { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.3rem; }\n .or-sum-title { font-family: var(--font-title); font-size: 1.2rem; font-weight: 600; color: var(--white); }\n\n .or-sum-body { padding: 1.4rem 1.6rem; }\n .or-sum-row {\n display: flex; align-items: flex-start; gap: 0.75rem;\n padding: 0.75rem 0; border-bottom: 1px solid var(--glass-border);\n }\n .or-sum-row:last-of-type { border-bottom: none; }\n .or-sum-ico { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; margin-top: 0.1rem; }\n .or-sum-k { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.18rem; }\n .or-sum-v { font-size: 0.85rem; font-weight: 500; color: var(--white); line-height: 1.3; }\n .or-sum-v.muted { color: var(--text-dim); font-weight: 400; font-style: italic; font-size: 0.8rem; }\n .or-sum-v.accent { color: var(--teal); }\n\n .or-sum-div { height: 1px; background: var(--glass-border); margin: 0.8rem 0; }\n .or-sum-total-k { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.2rem; }\n .or-sum-total-v { font-family: var(--font-title); font-size: 2rem; font-weight: 700; color: var(--teal); line-height: 1; transition: all 0.3s; }\n .or-sum-currency { font-size: 0.7rem; color: var(--text-dim); margin-bottom: 1.2rem; }\n\n .or-guarantee {\n background: var(--teal-dim); border: 1px solid var(--teal-border);\n border-radius: 10px; padding: 0.75rem 0.9rem;\n display: flex; align-items: flex-start; gap: 0.6rem;\n font-size: 0.74rem; color: var(--text-soft); line-height: 1.45;\n }\n .or-guarantee svg { width: 14px; height: 14px; stroke: var(--teal); flex-shrink: 0; margin-top: 0.1rem; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @media (max-width: 960px) {\n .or-layout { grid-template-columns: 1fr; }\n .or-summary { position: static; }\n .or-cal-pair { grid-template-columns: 1fr; }\n }\n @media (max-width: 640px) {\n .or-section { padding: 3.5rem 1.2rem 5rem; }\n .or-title { font-size: 2.2rem; }\n .or-card-head, .or-card-body { padding-left: 1.3rem; padding-right: 1.3rem; }\n .or-guests-grid { grid-template-columns: 1fr 1fr; }\n .or-form-grid { grid-template-columns: 1fr; }\n .or-room { flex-direction: column; }\n .or-room-img { width: 100%; height: 100px; }\n .or-room-img-overlay { background: linear-gradient(to bottom, transparent 50%, rgba(15,32,40,0.6)); }\n .or-room-right { flex-direction: row; align-items: center; justify-content: space-between; }\n .or-steps { gap: 0; }\n .or-step-lbl { display: none; }\n .or-step-line { width: 24px; }\n }\n <\/style>\n<\/head>\n<body>\n\n\n<div class=\"or-bg\">\n <div class=\"or-bg-wave\"><\/div>\n <div class=\"or-bg-wave or-bg-wave-2\"><\/div>\n<\/div>\n\n<section class=\"or-section\" id=\"reservas\">\n <div class=\"or-inner\">\n\n \n <div class=\"or-header\">\n <div class=\"or-tag\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><\/svg>\n Motor de reservas\n <\/div>\n <h2 class=\"or-title\">Tu estad\u00eda en<br><strong>ORIZON<\/strong> empieza aqu\u00ed<\/h2>\n <p class=\"or-subtitle\">Reserva directamente con nosotros y obt\u00e9n la mejor tarifa garantizada. Sin comisiones.<\/p>\n <\/div>\n\n \n <div class=\"or-steps\" id=\"orSteps\"><\/div>\n\n \n <div class=\"or-layout\">\n <div>\n\n \n <div class=\"or-pane active\" id=\"orPane1\">\n <div class=\"or-card\">\n <div class=\"or-card-head\">\n <div class=\"or-card-ico\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-width=\"1.8\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"or-card-title\">\u00bfCu\u00e1ndo nos visitas?<\/div>\n <div class=\"or-card-sub\">Selecciona tus fechas de llegada y salida<\/div>\n <\/div>\n <\/div>\n <div class=\"or-card-body\">\n\n \n <div class=\"or-cal-pair\">\n <div class=\"or-cal-box\">\n <div class=\"or-cal-lbl\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n Check-in\n <\/div>\n <div class=\"or-cal\" id=\"orCalIn\"><\/div>\n <\/div>\n <div class=\"or-cal-box\">\n <div class=\"or-cal-lbl\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n Check-out\n <\/div>\n <div class=\"or-cal\" id=\"orCalOut\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"or-nights-badge hidden\" id=\"orNightsBadge\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2ECFA0\" stroke-width=\"2\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/><\/svg>\n <strong id=\"orNightsNum\">\u2014<\/strong>\n <span id=\"orNightsText\">noches seleccionadas<\/span>\n <\/div>\n\n \n <div class=\"or-cal-lbl\" style=\"margin-bottom:0.9rem\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" width=\"13\" height=\"13\" stroke=\"#2ECFA0\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n Hu\u00e9spedes y habitaciones\n <\/div>\n <div class=\"or-guests-grid\">\n <div class=\"or-guest-ctrl\">\n <div class=\"or-guest-label\">Adultos<\/div>\n <span class=\"or-guest-emoji\">\ud83e\uddd1<\/span>\n <div class=\"or-guest-row\">\n <button class=\"or-ctr-btn\" id=\"orAdultosMinus\">\u2212<\/button>\n <span class=\"or-ctr-val\" id=\"orAdultosVal\">2<\/span>\n <button class=\"or-ctr-btn\" id=\"orAdultosPlus\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"or-guest-ctrl\">\n <div class=\"or-guest-label\">Ni\u00f1os<\/div>\n <span class=\"or-guest-emoji\">\ud83d\udc76<\/span>\n <div class=\"or-guest-row\">\n <button class=\"or-ctr-btn\" id=\"orNinosMinus\">\u2212<\/button>\n <span class=\"or-ctr-val\" id=\"orNinosVal\">0<\/span>\n <button class=\"or-ctr-btn\" id=\"orNinosPlus\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"or-guest-ctrl\">\n <div class=\"or-guest-label\">Habitaciones<\/div>\n <span class=\"or-guest-emoji\">\ud83d\udecf\ufe0f<\/span>\n <div class=\"or-guest-row\">\n <button class=\"or-ctr-btn\" id=\"orHabMinus\">\u2212<\/button>\n <span class=\"or-ctr-val\" id=\"orHabVal\">1<\/span>\n <button class=\"or-ctr-btn\" id=\"orHabPlus\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-nav\" style=\"justify-content:flex-end\">\n <button class=\"or-btn or-btn-teal\" id=\"orNext1\" onclick=\"orGoStep(2)\" disabled>\n Elegir habitaci\u00f3n\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"or-pane\" id=\"orPane2\">\n <div class=\"or-card\">\n <div class=\"or-card-head\">\n <div class=\"or-card-ico\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-width=\"1.8\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"or-card-title\">Elige tu habitaci\u00f3n<\/div>\n <div class=\"or-card-sub\">Tarifa por noche \u00b7 Precio directo garantizado<\/div>\n <\/div>\n <\/div>\n <div class=\"or-card-body\">\n\n <div class=\"or-rooms\" id=\"orRooms\">\n\n <div class=\"or-room\" data-room=\"estandar\" data-name=\"Habitaci\u00f3n Est\u00e1ndar Vista Ciudad\" data-price=\"280000\" data-emoji=\"\ud83c\udfd9\ufe0f\">\n <div class=\"or-room-img\"><div class=\"or-room-img-emoji\">\ud83c\udfd9\ufe0f<\/div><div class=\"or-room-img-overlay\"><\/div><\/div>\n <div class=\"or-room-body\">\n <div class=\"or-room-tag\">Est\u00e1ndar<\/div>\n <div class=\"or-room-name\">Vista Ciudad<\/div>\n <div class=\"or-room-desc\">Cama king, 30 m\u00b2, aire acondicionado, minibar, Smart TV 55\"<\/div>\n <div class=\"or-room-features\">\n <span class=\"or-feat\">\ud83d\udec1 Ba\u00f1o privado<\/span>\n <span class=\"or-feat\">\ud83d\udcf6 WiFi<\/span>\n <span class=\"or-feat\">\u2615 Cafetera<\/span>\n <\/div>\n <\/div>\n <div class=\"or-room-right\">\n <div>\n <div class=\"or-room-price-lbl\">Desde<\/div>\n <div class=\"or-room-price\">$280K<\/div>\n <div class=\"or-room-price-night\">\/ noche<\/div>\n <\/div>\n <div class=\"or-room-check\">\n <svg fill=\"none\" viewBox=\"0 0 12 12\" stroke=\"currentColor\"><polyline points=\"1.5,6 4.5,9 10.5,3\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-room\" data-room=\"deluxe\" data-name=\"Suite Deluxe Vista Mar\" data-price=\"450000\" data-emoji=\"\ud83c\udf0a\">\n <div class=\"or-room-img\"><div class=\"or-room-img-emoji\">\ud83c\udf0a<\/div><div class=\"or-room-img-overlay\"><\/div><\/div>\n <div class=\"or-room-body\">\n <div class=\"or-room-tag\" style=\"background:rgba(201,164,107,0.2);border-color:rgba(201,164,107,0.45);color:#C9A46B\">Deluxe<\/div>\n <div class=\"or-room-name\">Suite Deluxe Vista Mar<\/div>\n <div class=\"or-room-desc\">Cama king, terraza privada, 48 m\u00b2, ba\u00f1era con vista al mar, minibar premium<\/div>\n <div class=\"or-room-features\">\n <span class=\"or-feat\">\ud83c\udf0a Vista al mar<\/span>\n <span class=\"or-feat\">\ud83d\udec1 Ba\u00f1era<\/span>\n <span class=\"or-feat\">\ud83c\udf77 Minibar<\/span>\n <span class=\"or-feat\">\ud83c\udf05 Terraza<\/span>\n <\/div>\n <\/div>\n <div class=\"or-room-right\">\n <div>\n <div class=\"or-room-price-lbl\">Desde<\/div>\n <div class=\"or-room-price\" style=\"color:#C9A46B\">$450K<\/div>\n <div class=\"or-room-price-night\">\/ noche<\/div>\n <\/div>\n <div class=\"or-room-check\">\n <svg fill=\"none\" viewBox=\"0 0 12 12\" stroke=\"currentColor\"><polyline points=\"1.5,6 4.5,9 10.5,3\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-room\" data-room=\"penthouse\" data-name=\"Penthouse Panor\u00e1mico\" data-price=\"850000\" data-emoji=\"\ud83c\udf07\">\n <div class=\"or-room-img\"><div class=\"or-room-img-emoji\">\ud83c\udf07<\/div><div class=\"or-room-img-overlay\"><\/div><\/div>\n <div class=\"or-room-body\">\n <div class=\"or-room-tag\" style=\"background:rgba(232,140,140,0.15);border-color:rgba(232,140,140,0.4);color:#E88C8C\">Premium<\/div>\n <div class=\"or-room-name\">Penthouse Panor\u00e1mico<\/div>\n <div class=\"or-room-desc\">Dos pisos, jacuzzi privado, 120 m\u00b2, sala de estar, cocina equipada, 360\u00b0 Caribe<\/div>\n <div class=\"or-room-features\">\n <span class=\"or-feat\">\u2668\ufe0f Jacuzzi<\/span>\n <span class=\"or-feat\">\ud83c\udf34 360\u00b0 Caribe<\/span>\n <span class=\"or-feat\">\ud83c\udf73 Cocina<\/span>\n <span class=\"or-feat\">\ud83d\udecb\ufe0f Sala<\/span>\n <\/div>\n <\/div>\n <div class=\"or-room-right\">\n <div>\n <div class=\"or-room-price-lbl\">Desde<\/div>\n <div class=\"or-room-price\" style=\"color:#E88C8C\">$850K<\/div>\n <div class=\"or-room-price-night\">\/ noche<\/div>\n <\/div>\n <div class=\"or-room-check\">\n <svg fill=\"none\" viewBox=\"0 0 12 12\" stroke=\"currentColor\"><polyline points=\"1.5,6 4.5,9 10.5,3\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"or-extras-title\">Servicios y experiencias adicionales<\/div>\n <div class=\"or-extras-wrap\">\n <div class=\"or-extra\" data-extra=\"desayuno\" data-price=\"45000\">\ud83c\udf73 Desayuno incluido <span class=\"or-extra-price\">+$45K\/noche<\/span><\/div>\n <div class=\"or-extra\" data-extra=\"spa\" data-price=\"120000\">\ud83d\udc86 Sesi\u00f3n de spa <span class=\"or-extra-price\">+$120K<\/span><\/div>\n <div class=\"or-extra\" data-extra=\"transfer\" data-price=\"80000\">\ud83d\ude90 Transfer aeropuerto <span class=\"or-extra-price\">+$80K<\/span><\/div>\n <div class=\"or-extra\" data-extra=\"romantico\" data-price=\"150000\">\ud83c\udf39 Paquete rom\u00e1ntico <span class=\"or-extra-price\">+$150K<\/span><\/div>\n <div class=\"or-extra\" data-extra=\"tour\" data-price=\"95000\">\u26f5 Tour en velero <span class=\"or-extra-price\">+$95K\/persona<\/span><\/div>\n <div class=\"or-extra\" data-extra=\"parking\" data-price=\"30000\">\ud83c\udd7f\ufe0f Parqueadero <span class=\"or-extra-price\">+$30K\/noche<\/span><\/div>\n <\/div>\n\n <div class=\"or-nav\">\n <button class=\"or-btn or-btn-ghost\" onclick=\"orGoStep(1)\">\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n Anterior\n <\/button>\n <button class=\"or-btn or-btn-teal\" id=\"orNext2\" onclick=\"orGoStep(3)\" disabled>\n Mis datos\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"or-pane\" id=\"orPane3\">\n <div class=\"or-card\">\n <div class=\"or-card-head\">\n <div class=\"or-card-ico\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-width=\"1.8\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"or-card-title\">Tus datos de contacto<\/div>\n <div class=\"or-card-sub\">Confirmamos tu reserva en menos de 2 horas<\/div>\n <\/div>\n <\/div>\n <div class=\"or-card-body\">\n\n <div class=\"or-form-grid\">\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Nombre *<\/label>\n <input type=\"text\" class=\"or-input\" id=\"orNombre\" placeholder=\"Tu nombre\">\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Apellido *<\/label>\n <input type=\"text\" class=\"or-input\" id=\"orApellido\" placeholder=\"Tu apellido\">\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Correo electr\u00f3nico *<\/label>\n <input type=\"email\" class=\"or-input\" id=\"orEmail\" placeholder=\"tu@correo.com\">\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">WhatsApp \/ Tel\u00e9fono *<\/label>\n <input type=\"tel\" class=\"or-input\" id=\"orTel\" placeholder=\"3XX XXX XXXX\">\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Pa\u00eds de origen<\/label>\n <select class=\"or-select\" id=\"orPais\">\n <option value=\"\">Selecciona tu pa\u00eds<\/option>\n <option value=\"CO\">\ud83c\udde8\ud83c\uddf4 Colombia<\/option>\n <option value=\"VE\">\ud83c\uddfb\ud83c\uddea Venezuela<\/option>\n <option value=\"EC\">\ud83c\uddea\ud83c\udde8 Ecuador<\/option>\n <option value=\"PE\">\ud83c\uddf5\ud83c\uddea Per\u00fa<\/option>\n <option value=\"MX\">\ud83c\uddf2\ud83c\uddfd M\u00e9xico<\/option>\n <option value=\"US\">\ud83c\uddfa\ud83c\uddf8 Estados Unidos<\/option>\n <option value=\"ES\">\ud83c\uddea\ud83c\uddf8 Espa\u00f1a<\/option>\n <option value=\"otro\">\ud83c\udf0e Otro<\/option>\n <\/select>\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Hora de llegada estimada<\/label>\n <select class=\"or-select\" id=\"orLlegada\">\n <option value=\"\">Selecciona una hora<\/option>\n <option>Antes de las 12:00<\/option>\n <option>12:00 \u2013 15:00<\/option>\n <option>15:00 \u2013 18:00<\/option>\n <option>18:00 \u2013 21:00<\/option>\n <option>Despu\u00e9s de las 21:00<\/option>\n <\/select>\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Tipo de viaje<\/label>\n <select class=\"or-select\" id=\"orTipoViaje\">\n <option value=\"\">\u00bfCu\u00e1l es la ocasi\u00f3n?<\/option>\n <option>Luna de miel \ud83d\udc91<\/option>\n <option>Vacaciones en familia \ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67<\/option>\n <option>Viaje de negocios \ud83d\udcbc<\/option>\n <option>Celebraci\u00f3n especial \ud83e\udd42<\/option>\n <option>Escapada de fin de semana \ud83c\udf34<\/option>\n <option>Otro<\/option>\n <\/select>\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">C\u00f3digo de descuento<\/label>\n <input type=\"text\" class=\"or-input\" id=\"orCodigo\" placeholder=\"ORIZON2025\">\n <\/div>\n <div class=\"or-fg full\">\n <label class=\"or-lbl\">Solicitudes especiales<\/label>\n <textarea class=\"or-textarea\" id=\"orNota\" placeholder=\"Ej: cama extra, habitaci\u00f3n en piso alto, alergias alimentarias, decoraci\u00f3n especial...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"or-cal-lbl\" style=\"margin:1.5rem 0 0.8rem\">Preferencias de habitaci\u00f3n<\/div>\n <div class=\"or-prefs-wrap\">\n <div class=\"or-pref\" data-pref=\"piso-alto\">\ud83c\udfe2 Piso alto<\/div>\n <div class=\"or-pref\" data-pref=\"piso-bajo\">\ud83c\udf3f Piso bajo<\/div>\n <div class=\"or-pref\" data-pref=\"silencioso\">\ud83e\udd2b Zona silenciosa<\/div>\n <div class=\"or-pref\" data-pref=\"accesible\">\u267f Accesible<\/div>\n <div class=\"or-pref\" data-pref=\"camas-separadas\">\ud83d\udecf Camas separadas<\/div>\n <div class=\"or-pref\" data-pref=\"cuna\">\ud83d\udc76 Cuna de beb\u00e9<\/div>\n <div class=\"or-pref\" data-pref=\"sin-alfombra\">\ud83e\uddf9 Sin alfombra<\/div>\n <\/div>\n\n \n <div class=\"or-policy\">\n <div class=\"or-policy-title\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"\/><\/svg>\n Pol\u00edticas de la reserva\n <\/div>\n <div class=\"or-policy-item\">Check-in: 3:00 PM \u00b7 Check-out: 12:00 PM<\/div>\n <div class=\"or-policy-item\">Cancelaci\u00f3n gratuita hasta 48h antes de la llegada<\/div>\n <div class=\"or-policy-item\">No incluye IVA (19%). Se calcula al confirmar.<\/div>\n <div class=\"or-policy-item\">Mascota permitida con notificaci\u00f3n previa (+$50K\/noche)<\/div>\n <\/div>\n\n <div class=\"or-nav\">\n <button class=\"or-btn or-btn-ghost\" onclick=\"orGoStep(2)\">\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n Anterior\n <\/button>\n <button class=\"or-btn or-btn-teal\" onclick=\"orConfirmar()\">\n Confirmar reserva\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"or-pane\" id=\"orPane4\">\n <div class=\"or-card\">\n <div class=\"or-card-body\">\n <div class=\"or-success\">\n <span class=\"or-success-wave\">\ud83c\udf0a<\/span>\n <h3 class=\"or-success-title\">\u00a1Reserva <em>recibida!<\/em><\/h3>\n <p class=\"or-success-text\">\n Tu solicitud lleg\u00f3 exitosamente. Nuestro equipo te contactar\u00e1 por WhatsApp\n en menos de <strong>2 horas<\/strong> para confirmar tu estad\u00eda en ORIZON.\n <\/p>\n <div class=\"or-confirm-box\" id=\"orConfirmBox\"><\/div>\n <div class=\"or-success-actions\">\n <button class=\"or-btn or-btn-ghost\" onclick=\"orReset()\">\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M1 4v6h6M23 20v-6h-6\"\/><path d=\"M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15\"\/><\/svg>\n Nueva reserva\n <\/button>\n <button class=\"or-btn or-btn-teal\" id=\"orWABtn\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"15\" height=\"15\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z\"\/><path d=\"M12 0C5.373 0 0 5.373 0 12c0 2.122.553 4.112 1.52 5.845L0 24l6.345-1.484A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.947 0-3.76-.524-5.31-1.435l-.38-.226-3.766.881.918-3.666-.248-.388A9.956 9.956 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z\"\/><\/svg>\n Abrir en WhatsApp\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"or-summary\">\n <div class=\"or-sum-head\">\n <div class=\"or-sum-eye\">Resumen<\/div>\n <div class=\"or-sum-title\">Tu reserva en ORIZON<\/div>\n <\/div>\n <div class=\"or-sum-body\">\n\n <div class=\"or-sum-row\">\n <div class=\"or-sum-ico\">\ud83d\udcc5<\/div>\n <div>\n <div class=\"or-sum-k\">Fechas<\/div>\n <div class=\"or-sum-v\" id=\"rDates\"><span class=\"muted\">Por elegir<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-sum-row\">\n <div class=\"or-sum-ico\">\ud83c\udf19<\/div>\n <div>\n <div class=\"or-sum-k\">Noches<\/div>\n <div class=\"or-sum-v\" id=\"rNights\"><span class=\"muted\">\u2014<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-sum-row\">\n <div class=\"or-sum-ico\">\ud83d\udc65<\/div>\n <div>\n <div class=\"or-sum-k\">Hu\u00e9spedes<\/div>\n <div class=\"or-sum-v accent\" id=\"rGuests\">2 adultos \u00b7 1 hab.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-sum-row\">\n <div class=\"or-sum-ico\">\ud83d\udecf\ufe0f<\/div>\n <div>\n <div class=\"or-sum-k\">Habitaci\u00f3n<\/div>\n <div class=\"or-sum-v\" id=\"rRoom\"><span class=\"muted\">Por elegir<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-sum-row\" id=\"rExtrasRow\" style=\"display:none\">\n <div class=\"or-sum-ico\">\u2728<\/div>\n <div>\n <div class=\"or-sum-k\">Extras<\/div>\n <div class=\"or-sum-v accent\" id=\"rExtras\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-sum-div\"><\/div>\n <div class=\"or-sum-total-k\">Estimado total<\/div>\n <div class=\"or-sum-total-v\" id=\"rTotal\">$0<\/div>\n <div class=\"or-sum-currency\">Pesos colombianos \u00b7 IVA no incluido<\/div>\n\n <div class=\"or-guarantee\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"\/><\/svg>\n <span>Mejor tarifa directa garantizada. Cancelaci\u00f3n gratuita 48h antes.<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<script>\n(function(){\n\n const WA = '573108085072'; \/\/ \u2190 tu n\u00famero\n const BOOKING_URL = ''; \/\/ \u2190 URL de tu PMS o pasarela (opcional)\n\n \/\/ \u2500\u2500 ESTADO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const S = {\n step: 1,\n checkin: null, checkout: null, nights: 0,\n adultos: 2, ninos: 0, habs: 1,\n room: null, roomName: '', roomPrice: 0,\n extras: new Set(),\n prefs: new Set(),\n nombre:'', apellido:'', email:'', tel:'',\n pais:'', llegada:'', tipoViaje:'', nota:'', codigo:'',\n calInYear: new Date().getFullYear(), calInMonth: new Date().getMonth(),\n calOutYear: new Date().getFullYear(), calOutMonth: new Date().getMonth(),\n };\n\n const MONTHS = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];\n const DAYS_S = ['D','L','M','M','J','V','S'];\n const DAYS_F = ['domingo','lunes','martes','mi\u00e9rcoles','jueves','viernes','s\u00e1bado'];\n\n function fmt(n){ return '$' + Math.round(n).toLocaleString('es-CO'); }\n function fmtDate(d){ return `${d.getDate()} ${MONTHS[d.getMonth()].slice(0,3)} ${d.getFullYear()}`; }\n function pad(n){ return String(n).padStart(2,'0'); }\n function toDateStr(d){ return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`; }\n\n \/\/ \u2500\u2500 STEPS NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const STEP_LABELS = ['Fechas','Habitaci\u00f3n','Tus datos','Confirmaci\u00f3n'];\n const stepsEl = document.getElementById('orSteps');\n STEP_LABELS.forEach((lbl, i) => {\n const n = i+1;\n if(i>0){ const ln = document.createElement('div'); ln.className='or-step-line'; ln.id='orLine'+i; stepsEl.appendChild(ln); }\n const el = document.createElement('div');\n el.className = 'or-step' + (n===1?' active':'');\n el.id = 'orSt'+n;\n el.dataset.step = n;\n el.innerHTML = `<div class=\"or-step-num\" id=\"orSN${n}\">${n}<\/div><span class=\"or-step-lbl\">${lbl}<\/span>`;\n stepsEl.appendChild(el);\n });\n\n function updateSteps(){\n STEP_LABELS.forEach((_,i) => {\n const n=i+1, el=document.getElementById('orSt'+n), sn=document.getElementById('orSN'+n);\n el.className='or-step';\n if(n<S.step){\n el.classList.add('done');\n sn.innerHTML='<svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"#2ECFA0\" stroke-width=\"2.5\" stroke-linecap=\"round\" viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>';\n el.onclick = ()=>orGoStep(n);\n } else if(n===S.step){\n el.classList.add('active'); sn.textContent=n;\n } else {\n sn.textContent=n;\n }\n if(i>0){\n const ln=document.getElementById('orLine'+i);\n ln.className='or-step-line'+(i<S.step?' done':'');\n }\n });\n }\n\n window.orGoStep = function(n){\n document.getElementById('orPane'+S.step).classList.remove('active');\n S.step=n;\n document.getElementById('orPane'+n).classList.add('active');\n updateSteps();\n updateSummary();\n document.getElementById('reservas').scrollIntoView({behavior:'smooth',block:'start'});\n };\n\n \/\/ \u2500\u2500 CALENDARIO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function buildCal(containerId, yearKey, monthKey, selectFn){\n const el = document.getElementById(containerId);\n const yr = S[yearKey], mo = S[monthKey];\n const today = new Date(); today.setHours(0,0,0,0);\n const firstDay = new Date(yr, mo, 1).getDay();\n const daysInMo = new Date(yr, mo+1, 0).getDate();\n\n let html = `<div class=\"or-cal-nav\">\n <button class=\"or-cal-btn\" id=\"${containerId}Prev\">←<\/button>\n <div class=\"or-cal-month\">${MONTHS[mo]} ${yr}<\/div>\n <button class=\"or-cal-btn\" id=\"${containerId}Next\">→<\/button>\n <\/div><div class=\"or-cal-grid\">`;\n\n DAYS_S.forEach(d => { html += `<div class=\"or-cal-dow\">${d}<\/div>`; });\n for(let i=0;i<firstDay;i++) html += `<div class=\"or-cal-day or-empty\"><\/div>`;\n\n for(let d=1;d<=daysInMo;d++){\n const date = new Date(yr,mo,d);\n const dStr = toDateStr(date);\n const isPast = date < today;\n const isToday = dStr === toDateStr(today);\n const isCkin = S.checkin && dStr === toDateStr(S.checkin);\n const isCkout = S.checkout && dStr === toDateStr(S.checkout);\n const inRange = S.checkin && S.checkout && date > S.checkin && date < S.checkout;\n\n let cls = 'or-cal-day';\n if(isPast) cls += ' or-disabled';\n if(isToday) cls += ' or-today';\n if(isCkin||isCkout) cls += ' or-selected';\n if(inRange) { cls += ' or-in-range'; if(isCkin) cls+=' or-range-start'; if(isCkout) cls+=' or-range-end'; }\n\n html += `<div class=\"${cls}\" data-date=\"${dStr}\">${d}<\/div>`;\n }\n html += '<\/div>';\n el.innerHTML = html;\n\n \/\/ Prev\/Next buttons\n const prevBtn = el.querySelector(`#${containerId}Prev`);\n const nextBtn = el.querySelector(`#${containerId}Next`);\n const nowY=today.getFullYear(), nowM=today.getMonth();\n if(yr===nowY && mo===nowM) prevBtn.disabled=true;\n\n prevBtn.addEventListener('click', ()=>{\n if(S[monthKey]===0){ S[monthKey]=11; S[yearKey]--; } else S[monthKey]--;\n buildCal(containerId,yearKey,monthKey,selectFn);\n });\n nextBtn.addEventListener('click', ()=>{\n if(S[monthKey]===11){ S[monthKey]=0; S[yearKey]++; } else S[monthKey]++;\n buildCal(containerId,yearKey,monthKey,selectFn);\n });\n\n \/\/ Day clicks\n el.querySelectorAll('.or-cal-day:not(.or-disabled):not(.or-empty)').forEach(day => {\n day.addEventListener('click', () => {\n const d = new Date(day.dataset.date+'T12:00:00');\n selectFn(d);\n });\n });\n }\n\n function rebuildCals(){\n buildCal('orCalIn','calInYear','calInMonth', d => {\n S.checkin = d;\n if(S.checkout && S.checkout <= d){ S.checkout=null; }\n calcNights();\n rebuildCals();\n checkStep1();\n });\n buildCal('orCalOut','calOutYear','calOutMonth', d => {\n if(S.checkin && d <= S.checkin){ alert('La fecha de salida debe ser posterior al check-in.'); return; }\n S.checkout = d;\n calcNights();\n rebuildCals();\n checkStep1();\n });\n }\n\n function calcNights(){\n if(S.checkin && S.checkout){\n S.nights = Math.round((S.checkout - S.checkin)\/(1000*60*60*24));\n const badge = document.getElementById('orNightsBadge');\n badge.classList.remove('hidden');\n document.getElementById('orNightsNum').textContent = S.nights;\n document.getElementById('orNightsText').textContent = S.nights===1?'noche seleccionada':'noches seleccionadas';\n } else {\n S.nights=0;\n document.getElementById('orNightsBadge').classList.add('hidden');\n }\n updateSummary();\n }\n\n \/\/ \u2500\u2500 HU\u00c9SPEDES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function makeCounter(minusId, plusId, valId, key, min=1, max=10, onChange){\n const minus = document.getElementById(minusId);\n const plus = document.getElementById(plusId);\n const val = document.getElementById(valId);\n function update(){\n val.textContent = S[key];\n minus.disabled = S[key]<=min;\n plus.disabled = S[key]>=max;\n if(onChange) onChange();\n updateSummary();\n }\n minus.addEventListener('click',()=>{ if(S[key]>min){ S[key]--; update(); }});\n plus.addEventListener('click', ()=>{ if(S[key]<max){ S[key]++; update(); }});\n update();\n }\n\n makeCounter('orAdultosMinus','orAdultosPlus','orAdultosVal','adultos',1,8);\n makeCounter('orNinosMinus','orNinosPlus','orNinosVal','ninos',0,6);\n makeCounter('orHabMinus','orHabPlus','orHabVal','habs',1,5);\n\n function checkStep1(){\n document.getElementById('orNext1').disabled = !(S.checkin && S.checkout && S.nights>0);\n updateSummary();\n }\n\n \/\/ \u2500\u2500 HABITACIONES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n document.querySelectorAll('.or-room').forEach(el => {\n el.addEventListener('click',()=>{\n document.querySelectorAll('.or-room').forEach(r=>r.classList.remove('selected'));\n el.classList.add('selected');\n S.room = el.dataset.room;\n S.roomName = el.dataset.name;\n S.roomPrice = parseInt(el.dataset.price);\n document.getElementById('orNext2').disabled=false;\n updateSummary();\n });\n });\n\n \/\/ EXTRAS\n document.querySelectorAll('.or-extra').forEach(el => {\n el.addEventListener('click',()=>{\n const k=el.dataset.extra;\n if(S.extras.has(k)){ S.extras.delete(k); el.classList.remove('selected'); }\n else { S.extras.add(k); el.classList.add('selected'); }\n updateSummary();\n });\n });\n\n \/\/ PREFERENCIAS\n document.querySelectorAll('.or-pref').forEach(el => {\n el.addEventListener('click',()=>{\n const k=el.dataset.pref;\n if(S.prefs.has(k)){ S.prefs.delete(k); el.classList.remove('selected'); }\n else { S.prefs.add(k); el.classList.add('selected'); }\n });\n });\n\n \/\/ \u2500\u2500 CONFIRMAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n window.orConfirmar = function(){\n S.nombre = document.getElementById('orNombre').value.trim();\n S.apellido = document.getElementById('orApellido').value.trim();\n S.email = document.getElementById('orEmail').value.trim();\n S.tel = document.getElementById('orTel').value.trim();\n S.pais = document.getElementById('orPais').value;\n S.llegada = document.getElementById('orLlegada').value;\n S.tipoViaje = document.getElementById('orTipoViaje').value;\n S.nota = document.getElementById('orNota').value.trim();\n S.codigo = document.getElementById('orCodigo').value.trim();\n\n if(!S.nombre||!S.apellido){ alert('Por favor ingresa tu nombre y apellido.'); return; }\n if(!S.email){ alert('Por favor ingresa tu correo electr\u00f3nico.'); return; }\n if(!S.tel){ alert('Por favor ingresa tu n\u00famero de WhatsApp.'); return; }\n\n const { extraNames, totalExtras, total } = calcTotal();\n\n \/\/ Construir resumen visual\n const box = document.getElementById('orConfirmBox');\n const extrasLine = extraNames.length ? extraNames.join(', ') : '\u2014';\n const prefsLine = S.prefs.size ? [...S.prefs].map(p=>p.replace(\/-\/g,' ')).join(', ') : '\u2014';\n box.innerHTML = `\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Hu\u00e9sped<\/span><span class=\"or-confirm-val\">${S.nombre} ${S.apellido}<\/span><\/div>\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Habitaci\u00f3n<\/span><span class=\"or-confirm-val\">${S.roomName}<\/span><\/div>\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Check-in<\/span><span class=\"or-confirm-val\">${fmtDate(S.checkin)}<\/span><\/div>\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Check-out<\/span><span class=\"or-confirm-val\">${fmtDate(S.checkout)}<\/span><\/div>\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Noches<\/span><span class=\"or-confirm-val\">${S.nights}<\/span><\/div>\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Hu\u00e9spedes<\/span><span class=\"or-confirm-val\">${S.adultos} adultos \u00b7 ${S.ninos} ni\u00f1os \u00b7 ${S.habs} hab.<\/span><\/div>\n ${extraNames.length?`<div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Extras<\/span><span class=\"or-confirm-val\">${extrasLine}<\/span><\/div>`:''}\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Total estimado<\/span><span class=\"or-confirm-val accent\">${fmt(total)}<\/span><\/div>\n `;\n\n \/\/ Mensaje WhatsApp\n let msg = `\u00a1Hola ORIZON! Soy *${S.nombre} ${S.apellido}* y quiero reservar.\\n\\n`;\n msg += `\ud83c\udfe8 *Habitaci\u00f3n:* ${S.roomName}\\n`;\n msg += `\ud83d\udcc5 *Check-in:* ${fmtDate(S.checkin)}\\n`;\n msg += `\ud83d\udcc5 *Check-out:* ${fmtDate(S.checkout)}\\n`;\n msg += `\ud83c\udf19 *Noches:* ${S.nights}\\n`;\n msg += `\ud83d\udc65 *Hu\u00e9spedes:* ${S.adultos} adultos, ${S.ninos} ni\u00f1os, ${S.habs} hab.\\n`;\n if(extraNames.length) msg += `\u2728 *Extras:* ${extrasLine}\\n`;\n if(prefsLine!=='\u2014') msg += `\ud83d\udcac *Preferencias:* ${prefsLine}\\n`;\n msg += `\ud83d\udcb0 *Total estimado:* ${fmt(total)}\\n\\n`;\n msg += `\ud83d\udce7 ${S.email} \u00b7 \ud83d\udcde ${S.tel}`;\n if(S.llegada) msg += `\\n\ud83d\udd50 Llegada estimada: ${S.llegada}`;\n if(S.tipoViaje) msg += `\\n\ud83c\udf34 Tipo de viaje: ${S.tipoViaje}`;\n if(S.nota) msg += `\\n\ud83d\udcdd Solicitud: ${S.nota}`;\n if(S.codigo) msg += `\\n\ud83c\udff7\ufe0f C\u00f3digo: ${S.codigo}`;\n\n document.getElementById('orWABtn').onclick = ()=>{\n window.open('https:\/\/wa.me\/'+WA+'?text='+encodeURIComponent(msg),'_blank');\n };\n\n if(BOOKING_URL){\n fetch(BOOKING_URL,{method:'POST',headers:{'Content-Type':'application\/json'},\n body:JSON.stringify({nombre:S.nombre+' '+S.apellido,email:S.email,tel:S.tel,\n checkin:toDateStr(S.checkin),checkout:toDateStr(S.checkout),noches:S.nights,\n adultos:S.adultos,ninos:S.ninos,habs:S.habs,habitacion:S.roomName,\n precio:S.roomPrice,extras:extrasLine,total,nota:S.nota})\n }).catch(e=>console.warn(e));\n }\n\n orGoStep(4);\n };\n\n \/\/ \u2500\u2500 CALCULAR TOTAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function calcTotal(){\n const extraNames=[]; let totalExtras=0;\n const extraPrices = {desayuno:45000,spa:120000,transfer:80000,romantico:150000,tour:95000,parking:30000};\n const extraLabels = {desayuno:'Desayuno',spa:'Spa',transfer:'Transfer aeropuerto',romantico:'Paq. rom\u00e1ntico',tour:'Tour velero',parking:'Parqueadero'};\n S.extras.forEach(k => {\n const p = extraPrices[k]||0;\n totalExtras += p; extraNames.push(extraLabels[k]||k);\n });\n const roomTotal = S.roomPrice * S.nights * S.habs;\n const total = roomTotal + totalExtras;\n return { extraNames, totalExtras, total };\n }\n\n \/\/ \u2500\u2500 RESUMEN STICKY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function updateSummary(){\n const { extraNames, total } = calcTotal();\n\n \/\/ Fechas\n const datesEl = document.getElementById('rDates');\n if(S.checkin && S.checkout) datesEl.innerHTML = `${fmtDate(S.checkin)} <span style=\"color:var(--text-dim)\">\u2192<\/span> ${fmtDate(S.checkout)}`;\n else datesEl.innerHTML = '<span class=\"muted\">Por elegir<\/span>';\n\n \/\/ Noches\n document.getElementById('rNights').innerHTML = S.nights ? `<span class=\"accent\">${S.nights} noche${S.nights!==1?'s':''}<\/span>` : '<span class=\"muted\">\u2014<\/span>';\n\n \/\/ Hu\u00e9spedes\n document.getElementById('rGuests').textContent = `${S.adultos} adulto${S.adultos!==1?'s':''} \u00b7 ${S.ninos} ni\u00f1o${S.ninos!==1?'s':''} \u00b7 ${S.habs} hab.`;\n\n \/\/ Habitaci\u00f3n\n const roomEl = document.getElementById('rRoom');\n if(S.roomName) roomEl.innerHTML=`<span class=\"accent\">${S.roomName}<\/span>`;\n else roomEl.innerHTML='<span class=\"muted\">Por elegir<\/span>';\n\n \/\/ Extras\n const extrasRow = document.getElementById('rExtrasRow');\n if(extraNames.length){\n extrasRow.style.display='flex';\n document.getElementById('rExtras').textContent = extraNames.join(' \u00b7 ');\n } else extrasRow.style.display='none';\n\n \/\/ Total\n document.getElementById('rTotal').textContent = fmt(total);\n }\n\n \/\/ \u2500\u2500 RESET \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n window.orReset = function(){\n S.step=1; S.checkin=null; S.checkout=null; S.nights=0;\n S.adultos=2; S.ninos=0; S.habs=1;\n S.room=null; S.roomName=''; S.roomPrice=0;\n S.extras.clear(); S.prefs.clear();\n S.calInYear=new Date().getFullYear(); S.calInMonth=new Date().getMonth();\n S.calOutYear=new Date().getFullYear(); S.calOutMonth=new Date().getMonth();\n document.querySelectorAll('.or-room').forEach(r=>r.classList.remove('selected'));\n document.querySelectorAll('.or-extra').forEach(e=>e.classList.remove('selected'));\n document.querySelectorAll('.or-pref').forEach(p=>p.classList.remove('selected'));\n ['orNombre','orApellido','orEmail','orTel','orNota','orCodigo'].forEach(id=>{\n const el=document.getElementById(id); if(el) el.value='';\n });\n ['orPais','orLlegada','orTipoViaje'].forEach(id=>{\n const el=document.getElementById(id); if(el) el.value='';\n });\n document.getElementById('orNext1').disabled=true;\n document.getElementById('orNext2').disabled=true;\n document.getElementById('orNightsBadge').classList.add('hidden');\n document.querySelectorAll('.or-pane').forEach(p=>p.classList.remove('active'));\n document.getElementById('orPane1').classList.add('active');\n updateSteps();\n rebuildCals();\n updateSummary();\n document.getElementById('reservas').scrollIntoView({behavior:'smooth',block:'start'});\n };\n\n \/\/ \u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n updateSteps();\n rebuildCals();\n updateSummary();\n\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a86dd1c e-con-full e-flex e-con e-parent\" data-id=\"a86dd1c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f38d11c elementor-widget elementor-widget-html\" data-id=\"f38d11c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Grid Habitaciones y Espacios<\/title>\n <style>\n \/* Bloque independiente: .orizon-grid-espacios *\/\n .orizon-grid-espacios {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-grid-espacios .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-grid-espacios .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-grid-espacios .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n \/* Grid 3 columnas para desktop *\/\n .orizon-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n }\n \/* Card glass *\/\n .orizon-card {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n overflow: hidden;\n border: 1px solid rgba(255,255,255,0.3);\n transition: all 0.3s ease;\n box-shadow: 0 8px 20px rgba(0,0,0,0.1);\n }\n .orizon-card:hover {\n border-color: #2ECFA0;\n transform: translateY(-5px);\n box-shadow: 0 15px 35px rgba(46,207,160,0.2);\n }\n .orizon-card img {\n width: 100%;\n height: 220px;\n object-fit: cover;\n display: block;\n }\n .orizon-card .contenido {\n padding: 1.5rem;\n }\n .orizon-card .contenido h3 {\n font-size: 1.3rem;\n color: #0F2028;\n margin-bottom: 0.5rem;\n }\n .orizon-card .contenido p {\n color: #0F2028;\n font-size: 0.9rem;\n line-height: 1.4;\n margin-bottom: 1rem;\n }\n .orizon-card .contenido a {\n display: inline-block;\n background: rgba(46,207,160,0.2);\n border: 1px solid #2ECFA0;\n padding: 0.5rem 1.2rem;\n border-radius: 40px;\n color: #0F2028;\n text-decoration: none;\n font-weight: 600;\n transition: 0.3s;\n }\n .orizon-card .contenido a:hover {\n background: #2ECFA0;\n color: white;\n }\n \/* Responsive: tablet 2 columnas, m\u00f3vil 1 columna *\/\n @media (max-width: 768px) {\n .orizon-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n .orizon-grid-espacios {\n padding: 1rem;\n margin: 1rem;\n }\n .orizon-card img {\n height: 180px;\n }\n }\n @media (max-width: 480px) {\n .orizon-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-grid-espacios\">\n <div class=\"titulo\">\n <h2>Habitaciones y Espacios<\/h2>\n <p>Lujo caribe\u00f1o en cada rinc\u00f3n de ORIZON<\/p>\n <\/div>\n <div class=\"orizon-grid\">\n \n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/HABITACION-STANDARD-DELUXE-scaled.png\" alt=\"Habitaci\u00f3n Standard Deluxe\">\n <div class=\"contenido\">\n <h3>Habitaci\u00f3n Standard Deluxe<\/h3>\n <p>Dise\u00f1o contempor\u00e1neo con vistas al jard\u00edn. Ba\u00f1o de m\u00e1rmol y amenities de lujo.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/PISCINA-INFINITY-scaled.png\" alt=\"Piscina Infinity\">\n <div class=\"contenido\">\n <h3>Piscina Infinity<\/h3>\n <p>Borde infinito con vista al mar Caribe. Camastros y servicio de bar incluido.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/LOBBY-PRINCIPAL-scaled.png\" alt=\"Lobby Principal\">\n <div class=\"contenido\">\n <h3>Lobby Principal<\/h3>\n <p>Espacios abiertos con acabados en m\u00e1rmol y vidrio. Recepci\u00f3n 24\/7.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/PENTHOUSE-PRESIDENCIAL-scaled.png\" alt=\"Penthouse Presidencial\">\n <div class=\"contenido\">\n <h3>Penthouse Presidencial<\/h3>\n <p>Suite de lujo con terraza privada, jacuzzi y vistas panor\u00e1micas al mar.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/SUITE-EJECUTIVA-scaled.png\" alt=\"Suite Ejecutiva\">\n <div class=\"contenido\">\n <h3>Suite Ejecutiva<\/h3>\n <p>Espaciosa \u00e1rea de trabajo y estar. Ideal para viajes de negocios.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/BAR-DEL-HOTEL-scaled.png\" alt=\"Bar del Hotel\">\n <div class=\"contenido\">\n <h3>Bar del Hotel<\/h3>\n <p>C\u00f3cteles de autor con ingredientes locales. Terraza con vistas al oc\u00e9ano.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n \n <\/div>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-96e4558 e-con-full e-flex e-con e-parent\" data-id=\"96e4558\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc54074 elementor-widget elementor-widget-html\" data-id=\"cc54074\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Experiencias del Hotel<\/title>\n <style>\n \/* Bloque independiente .orizon-experiencias-sinimg *\/\n .orizon-experiencias-sinimg {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-experiencias-sinimg .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-experiencias-sinimg .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-experiencias-sinimg .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n \/* Grid *\/\n .experiencias-sinimg-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n }\n \/* Card glass sin imagen *\/\n .experiencia-card-sinimg {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n border: 1px solid rgba(255,255,255,0.3);\n transition: all 0.3s ease;\n box-shadow: 0 8px 20px rgba(0,0,0,0.1);\n text-align: center;\n padding: 2rem 1.5rem;\n }\n .experiencia-card-sinimg:hover {\n border-color: #2ECFA0;\n transform: translateY(-5px);\n box-shadow: 0 15px 35px rgba(46,207,160,0.2);\n }\n \/* Icono grande (emoji o tipograf\u00eda) *\/\n .experiencia-icono {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n }\n .experiencia-card-sinimg .contenido h3 {\n font-size: 1.4rem;\n color: #0F2028;\n margin-bottom: 0.5rem;\n }\n .experiencia-card-sinimg .contenido p {\n color: #0F2028;\n font-size: 0.9rem;\n line-height: 1.4;\n margin-bottom: 1rem;\n }\n .btn-exp-sinimg {\n display: inline-block;\n background: rgba(46,207,160,0.2);\n border: 1px solid #2ECFA0;\n padding: 0.5rem 1.2rem;\n border-radius: 40px;\n color: #0F2028;\n text-decoration: none;\n font-weight: 600;\n transition: 0.3s;\n }\n .btn-exp-sinimg:hover {\n background: #2ECFA0;\n color: white;\n }\n @media (max-width: 768px) {\n .orizon-experiencias-sinimg {\n padding: 1rem;\n margin: 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-experiencias-sinimg\">\n <div class=\"titulo\">\n <h2>Experiencias \u00danicas<\/h2>\n <p>Vive el lujo caribe\u00f1o m\u00e1s all\u00e1 del alojamiento<\/p>\n <\/div>\n <div class=\"experiencias-sinimg-grid\">\n \n <div class=\"experiencia-card-sinimg\">\n <div class=\"experiencia-icono\">\u26f5<\/div>\n <div class=\"contenido\">\n <h3>Atardecer en Velero<\/h3>\n <p>Navega por el Caribe al atardecer con champ\u00e1n y m\u00fasica en vivo. Cupos limitados.<\/p>\n <a href=\"#\" class=\"btn-exp-sinimg\">Agendar \u2192<\/a>\n <\/div>\n <\/div>\n \n <div class=\"experiencia-card-sinimg\">\n <div class=\"experiencia-icono\">\ud83e\uddd8<\/div>\n <div class=\"contenido\">\n <h3>Yoga al Amanecer<\/h3>\n <p>Sesi\u00f3n de yoga en plataforma flotante con vista al mar. Instructores certificados.<\/p>\n <a href=\"#\" class=\"btn-exp-sinimg\">Agendar \u2192<\/a>\n <\/div>\n <\/div>\n \n <div class=\"experiencia-card-sinimg\">\n <div class=\"experiencia-icono\">\ud83e\udd43<\/div>\n <div class=\"contenido\">\n <h3>Cata de Ron Premium<\/h3>\n <p>Degusta los mejores rones del Caribe, maridados con chocolate local.<\/p>\n <a href=\"#\" class=\"btn-exp-sinimg\">Agendar \u2192<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2358fd0 e-con-full e-flex e-con e-parent\" data-id=\"2358fd0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc79ff8 elementor-widget elementor-widget-html\" data-id=\"fc79ff8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Gastronom\u00eda<\/title>\n <style>\n \/* Bloque independiente .orizon-gastronomia-sinimg *\/\n .orizon-gastronomia-sinimg {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-gastronomia-sinimg .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-gastronomia-sinimg .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-gastronomia-sinimg .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n .gastronomia-grid-sinimg {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n }\n .gastro-card-sinimg {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n border: 1px solid rgba(255,255,255,0.3);\n transition: all 0.3s ease;\n box-shadow: 0 8px 20px rgba(0,0,0,0.1);\n text-align: center;\n padding: 2rem 1.5rem;\n }\n .gastro-card-sinimg:hover {\n border-color: #2ECFA0;\n transform: translateY(-5px);\n box-shadow: 0 15px 35px rgba(46,207,160,0.2);\n }\n .gastro-icono {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n }\n .gastro-card-sinimg .contenido h3 {\n font-size: 1.4rem;\n color: #0F2028;\n margin-bottom: 0.5rem;\n }\n .gastro-card-sinimg .contenido p {\n color: #0F2028;\n font-size: 0.9rem;\n line-height: 1.4;\n margin-bottom: 1rem;\n }\n .btn-gastro-sinimg {\n display: inline-block;\n background: rgba(46,207,160,0.2);\n border: 1px solid #2ECFA0;\n padding: 0.5rem 1.2rem;\n border-radius: 40px;\n color: #0F2028;\n text-decoration: none;\n font-weight: 600;\n transition: 0.3s;\n }\n .btn-gastro-sinimg:hover {\n background: #2ECFA0;\n color: white;\n }\n @media (max-width: 768px) {\n .orizon-gastronomia-sinimg {\n padding: 1rem;\n margin: 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-gastronomia-sinimg\">\n <div class=\"titulo\">\n <h2>Gastronom\u00eda de Altura<\/h2>\n <p>Sabores del Caribe con fusi\u00f3n internacional<\/p>\n <\/div>\n <div class=\"gastronomia-grid-sinimg\">\n \n <div class=\"gastro-card-sinimg\">\n <div class=\"gastro-icono\">\ud83c\udf7d\ufe0f<\/div>\n <div class=\"contenido\">\n <h3>Restaurante Mare<\/h3>\n <p>Mariscos frescos y especialidades caribe\u00f1as en un ambiente frente al mar. Chef ejecutivo galardonado.<\/p>\n <a href=\"#\" class=\"btn-gastro-sinimg\">Ver men\u00fa \u2192<\/a>\n <\/div>\n <\/div>\n \n <div class=\"gastro-card-sinimg\">\n <div class=\"gastro-icono\">\ud83c\udf78<\/div>\n <div class=\"contenido\">\n <h3>SkyBar Glass<\/h3>\n <p>C\u00f3cteles de autor con vista panor\u00e1mica. Mixolog\u00eda molecular y atardeceres inolvidables.<\/p>\n <a href=\"#\" class=\"btn-gastro-sinimg\">Ver carta \u2192<\/a>\n <\/div>\n <\/div>\n \n <div class=\"gastro-card-sinimg\">\n <div class=\"gastro-icono\">\ud83c\udf34<\/div>\n <div class=\"contenido\">\n <h3>Terraza Caribe<\/h3>\n <p>Comida t\u00edpica coste\u00f1a, arepas de huevo, patacones y pescado frito. Ambiente relajado.<\/p>\n <a href=\"#\" class=\"btn-gastro-sinimg\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n \n <div class=\"gastro-card-sinimg\">\n <div class=\"gastro-icono\">\ud83d\udc1f<\/div>\n <div class=\"contenido\">\n <h3>Ostra Negra<\/h3>\n <p>Raw bar, ostiones, langosta y ceviches. Producto del d\u00eda directamente de la pesca local.<\/p>\n <a href=\"#\" class=\"btn-gastro-sinimg\">Reservar \u2192<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-74f79ba e-con-full e-flex e-con e-parent\" data-id=\"74f79ba\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-918e2a4 elementor-widget elementor-widget-html\" data-id=\"918e2a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Ubicaci\u00f3n y Mapa<\/title>\n <style>\n \/* Bloque independiente .orizon-ubicacion *\/\n .orizon-ubicacion {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-ubicacion .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-ubicacion .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-ubicacion .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n .ubicacion-contenedor {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n align-items: center;\n }\n \/* Informaci\u00f3n de direcci\u00f3n (glass card) *\/\n .ubicacion-info {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n padding: 1.8rem;\n border: 1px solid rgba(255,255,255,0.3);\n transition: 0.3s;\n }\n .ubicacion-info:hover {\n border-color: #2ECFA0;\n transform: translateY(-4px);\n }\n .ubicacion-info h3 {\n font-size: 1.6rem;\n color: #0F2028;\n margin-bottom: 1rem;\n }\n .ubicacion-info .direccion {\n font-size: 1.1rem;\n color: #0F2028;\n margin: 1.2rem 0;\n display: flex;\n align-items: center;\n gap: 0.8rem;\n }\n .ubicacion-info .detalle {\n margin: 1rem 0;\n color: #0F2028;\n line-height: 1.5;\n }\n .btn-mapa {\n display: inline-block;\n background: rgba(46,207,160,0.2);\n border: 1px solid #2ECFA0;\n padding: 0.7rem 1.5rem;\n border-radius: 40px;\n color: #0F2028;\n text-decoration: none;\n font-weight: 600;\n transition: 0.3s;\n margin-top: 1rem;\n }\n .btn-mapa:hover {\n background: #2ECFA0;\n color: white;\n }\n \/* Mapa (iframe responsivo) *\/\n .mapa-container {\n border-radius: 28px;\n overflow: hidden;\n box-shadow: 0 8px 20px rgba(0,0,0,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n height: 300px;\n }\n .mapa-container iframe {\n width: 100%;\n height: 100%;\n border: 0;\n display: block;\n }\n \/* Responsive *\/\n @media (max-width: 768px) {\n .orizon-ubicacion {\n padding: 1rem;\n margin: 1rem;\n }\n .ubicacion-contenedor {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n .mapa-container {\n height: 250px;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-ubicacion\">\n <div class=\"titulo\">\n <h2>Ubicaci\u00f3n Privilegiada<\/h2>\n <p>En el coraz\u00f3n del Caribe colombiano<\/p>\n <\/div>\n <div class=\"ubicacion-contenedor\">\n <div class=\"ubicacion-info\">\n <h3>\ud83d\udccd ORIZON Santa Marta<\/h3>\n <div class=\"direccion\">\n <span>\ud83c\udfe8<\/span>\n <strong>Carrera 1 # 11-23, El Rodadero<\/strong>\n <\/div>\n <div class=\"detalle\">\n Frente a la playa, a 5 minutos del centro hist\u00f3rico y rodeado de naturaleza exuberante.<br>\n Cerca al Aeropuerto Sim\u00f3n Bol\u00edvar (15 min en auto).\n <\/div>\n <a href=\"#\" class=\"btn-mapa\" id=\"btnComoLlegar\">C\u00f3mo llegar \u2192<\/a>\n <\/div>\n <div class=\"mapa-container\">\n \n <iframe \n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3917.34496062585!2d-74.212514!3d11.240221!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8ef4f5d2b8b0b8b1%3A0x8b8b8b8b8b8b8b8b!2zRWwgUm9kYWRlcm8sIFNhbnRhIE1hcnRh!5e0!3m2!1ses!2sco!4v1746890000000!5m2!1ses!2sco\" \n allowfullscreen=\"\" \n loading=\"lazy\" \n referrerpolicy=\"no-referrer-when-downgrade\">\n <\/iframe>\n <\/div>\n <\/div>\n<\/div>\n<script>\n \/\/ Simulaci\u00f3n de alerta para el bot\u00f3n \"C\u00f3mo llegar\" (no afecta otros bloques)\n const btn = document.getElementById('btnComoLlegar');\n if (btn) {\n btn.addEventListener('click', function(e) {\n e.preventDefault();\n alert('\ud83d\udccd ORIZON Santa Marta\\nCarrera 1 # 11-23, El Rodadero\\n\u00a1Te esperamos frente al mar Caribe!');\n });\n }\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ca77c4b e-con-full e-flex e-con e-parent\" data-id=\"ca77c4b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b4bfe0 elementor-widget elementor-widget-html\" data-id=\"0b4bfe0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Testimonios<\/title>\n <style>\n \/* Bloque independiente .orizon-testimonios *\/\n .orizon-testimonios {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-testimonios .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-testimonios .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-testimonios .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n \/* Carrusel *\/\n .testimonios-carrusel {\n position: relative;\n overflow: hidden;\n border-radius: 32px;\n }\n .testimonios-slides {\n display: flex;\n transition: transform 0.5s ease-in-out;\n }\n .testimonio-slide {\n flex: 0 0 100%;\n box-sizing: border-box;\n padding: 1rem;\n }\n .testimonio-card {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n padding: 2rem;\n text-align: center;\n border: 1px solid rgba(255,255,255,0.3);\n transition: 0.3s;\n box-shadow: 0 8px 20px rgba(0,0,0,0.1);\n }\n .testimonio-card:hover {\n border-color: #2ECFA0;\n transform: translateY(-5px);\n }\n .testimonio-avatar {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n object-fit: cover;\n margin-bottom: 1rem;\n border: 2px solid #2ECFA0;\n }\n .testimonio-card .nombre {\n font-size: 1.2rem;\n font-weight: 700;\n color: #0F2028;\n margin: 0.5rem 0 0.2rem;\n }\n .testimonio-card .ubicacion {\n font-size: 0.8rem;\n color: #0F2028;\n opacity: 0.8;\n margin-bottom: 1rem;\n }\n .testimonio-card .estrellas {\n color: #2ECFA0;\n font-size: 1.2rem;\n letter-spacing: 3px;\n margin: 0.5rem 0;\n }\n .testimonio-card .comentario {\n font-style: italic;\n color: #0F2028;\n font-size: 0.95rem;\n line-height: 1.5;\n }\n \/* Botones nav *\/\n .testi-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255,255,255,0.6);\n backdrop-filter: blur(4px);\n border: none;\n font-size: 2rem;\n cursor: pointer;\n padding: 0.4rem 1rem;\n border-radius: 50px;\n color: #0F2028;\n transition: 0.2s;\n z-index: 10;\n }\n .testi-btn:hover {\n background: #2ECFA0;\n color: white;\n }\n .testi-prev {\n left: 10px;\n }\n .testi-next {\n right: 10px;\n }\n \/* Dots *\/\n .testi-dots {\n text-align: center;\n margin-top: 1.5rem;\n }\n .testi-dot {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin: 0 5px;\n background-color: rgba(15,32,40,0.4);\n border-radius: 50%;\n cursor: pointer;\n transition: 0.2s;\n }\n .testi-dot.active {\n background-color: #2ECFA0;\n width: 24px;\n border-radius: 10px;\n }\n @media (max-width: 768px) {\n .orizon-testimonios {\n padding: 1rem;\n margin: 1rem;\n }\n .testimonio-card {\n padding: 1.5rem;\n }\n .testi-btn {\n font-size: 1.5rem;\n padding: 0.2rem 0.8rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-testimonios\">\n <div class=\"titulo\">\n <h2>Lo que dicen nuestros hu\u00e9spedes<\/h2>\n <p>Experiencias reales en ORIZON Santa Marta<\/p>\n <\/div>\n <div class=\"testimonios-carrusel\">\n <button class=\"testi-btn testi-prev\" id=\"testiPrev\">\u276e<\/button>\n <div class=\"testimonios-slides\" id=\"testiSlides\">\n \n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/68.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"Incre\u00edble experiencia, el servicio es de otro nivel. La piscina infinity y el atardecer son inolvidables. Volver\u00e9 sin duda.\"<\/div>\n <div class=\"nombre\">Mar\u00eda Gonz\u00e1lez<\/div>\n <div class=\"ubicacion\">Bogot\u00e1, Colombia<\/div>\n <\/div>\n <\/div>\n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/32.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"El mejor hotel frente al mar en Santa Marta. La suite ejecutiva es perfecta para trabajar y relajarse. Atenci\u00f3n 10\/10.\"<\/div>\n <div class=\"nombre\">Carlos M\u00e9ndez<\/div>\n <div class=\"ubicacion\">Medell\u00edn, Colombia<\/div>\n <\/div>\n <\/div>\n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/45.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"El rooftop lounge es espectacular. La cata de ron y la atenci\u00f3n del personal hicieron nuestra luna de miel perfecta.\"<\/div>\n <div class=\"nombre\">Laura Fern\u00e1ndez<\/div>\n <div class=\"ubicacion\">CDMX, M\u00e9xico<\/div>\n <\/div>\n <\/div>\n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/75.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"Desde el check-in hasta el check-out todo fue impecable. El desayuno en la Terraza Caribe es delicioso. Muy recomendado.\"<\/div>\n <div class=\"nombre\">Andr\u00e9s Rivas<\/div>\n <div class=\"ubicacion\">Panam\u00e1, Panam\u00e1<\/div>\n <\/div>\n <\/div>\n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/22.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"Vistas incre\u00edbles, habitaciones c\u00f3modas y el personal muy atento. El SkyBar es el mejor lugar para ver el atardecer.\"<\/div>\n <div class=\"nombre\">Sof\u00eda Ram\u00edrez<\/div>\n <div class=\"ubicacion\">Lima, Per\u00fa<\/div>\n <\/div>\n <\/div>\n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/91.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"Un para\u00edso escondido. La playa privada, la comida y las experiencias de velero son \u00fanicas. Volver\u00e9 cada a\u00f1o.\"<\/div>\n <div class=\"nombre\">Juan Pablo Torres<\/div>\n <div class=\"ubicacion\">Santiago, Chile<\/div>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"testi-btn testi-next\" id=\"testiNext\">\u276f<\/button>\n <\/div>\n <div class=\"testi-dots\" id=\"testiDots\"><\/div>\n<\/div>\n\n<script>\n (function() {\n const slidesContainer = document.getElementById('testiSlides');\n const slides = Array.from(document.querySelectorAll('.testimonio-slide'));\n const prevBtn = document.getElementById('testiPrev');\n const nextBtn = document.getElementById('testiNext');\n const dotsContainer = document.getElementById('testiDots');\n let currentIndex = 0;\n const totalSlides = slides.length;\n let autoInterval;\n\n function createDots() {\n dotsContainer.innerHTML = '';\n for (let i = 0; i < totalSlides; i++) {\n const dot = document.createElement('span');\n dot.classList.add('testi-dot');\n dot.dataset.index = i;\n dot.addEventListener('click', () => goToSlide(i));\n dotsContainer.appendChild(dot);\n }\n updateDots();\n }\n\n function updateDots() {\n const dots = document.querySelectorAll('.testi-dot');\n dots.forEach((dot, idx) => {\n if (idx === currentIndex) dot.classList.add('active');\n else dot.classList.remove('active');\n });\n }\n\n function goToSlide(index) {\n if (index < 0) index = totalSlides - 1;\n if (index >= totalSlides) index = 0;\n currentIndex = index;\n slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;\n updateDots();\n resetAutoPlay();\n }\n\n function nextSlide() {\n goToSlide(currentIndex + 1);\n }\n\n function prevSlide() {\n goToSlide(currentIndex - 1);\n }\n\n function startAutoPlay() {\n autoInterval = setInterval(() => {\n nextSlide();\n }, 5000); \/\/ Cambia cada 5 segundos\n }\n\n function stopAutoPlay() {\n if (autoInterval) clearInterval(autoInterval);\n }\n\n function resetAutoPlay() {\n stopAutoPlay();\n startAutoPlay();\n }\n\n \/\/ Eventos manuales\n nextBtn.addEventListener('click', nextSlide);\n prevBtn.addEventListener('click', prevSlide);\n\n \/\/ Pausar autoplay al hacer hover en el carrusel\n const carousel = document.querySelector('.testimonios-carrusel');\n carousel.addEventListener('mouseenter', stopAutoPlay);\n carousel.addEventListener('mouseleave', startAutoPlay);\n\n \/\/ Inicializar\n createDots();\n goToSlide(0);\n startAutoPlay();\n })();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-68b3650 e-con-full e-flex e-con e-parent\" data-id=\"68b3650\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8158fa elementor-widget elementor-widget-html\" data-id=\"b8158fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Estad\u00edsticas del Hotel<\/title>\n <style>\n \/* Bloque independiente .orizon-estadisticas *\/\n .orizon-estadisticas {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-estadisticas .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-estadisticas .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-estadisticas .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n .estadisticas-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2rem;\n text-align: center;\n }\n .estadistica-item {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n padding: 1.8rem 1rem;\n border: 1px solid rgba(255,255,255,0.3);\n transition: all 0.3s ease;\n }\n .estadistica-item:hover {\n border-color: #2ECFA0;\n transform: translateY(-5px);\n box-shadow: 0 15px 35px rgba(46,207,160,0.2);\n }\n .estadistica-numero {\n font-size: 3rem;\n font-weight: 800;\n color: #2ECFA0;\n line-height: 1.2;\n margin-bottom: 0.5rem;\n }\n .estadistica-label {\n font-size: 1rem;\n font-weight: 600;\n color: #0F2028;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 0.5rem;\n }\n .estadistica-desc {\n font-size: 0.85rem;\n color: #0F2028;\n opacity: 0.8;\n }\n \/* Responsive *\/\n @media (max-width: 768px) {\n .orizon-estadisticas {\n padding: 1rem;\n margin: 1rem;\n }\n .estadisticas-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n .estadistica-numero {\n font-size: 2.2rem;\n }\n }\n @media (max-width: 480px) {\n .estadisticas-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-estadisticas\">\n <div class=\"titulo\">\n <h2>ORIZON en n\u00fameros<\/h2>\n <p>Excelencia respaldada por experiencias reales<\/p>\n <\/div>\n <div class=\"estadisticas-grid\">\n <div class=\"estadistica-item\">\n <div class=\"estadistica-numero\">152<\/div>\n <div class=\"estadistica-label\">Habitaciones<\/div>\n <div class=\"estadistica-desc\">Suite Presidencial, Deluxe y vistas al mar<\/div>\n <\/div>\n <div class=\"estadistica-item\">\n <div class=\"estadistica-numero\">3<\/div>\n <div class=\"estadistica-label\">Restaurantes<\/div>\n <div class=\"estadistica-desc\">Gastronom\u00eda caribe\u00f1a e internacional<\/div>\n <\/div>\n <div class=\"estadistica-item\">\n <div class=\"estadistica-numero\">2.500+<\/div>\n <div class=\"estadistica-label\">Hu\u00e9spedes felices<\/div>\n <div class=\"estadistica-desc\">Calificaci\u00f3n promedio 4.9 \u2605<\/div>\n <\/div>\n <div class=\"estadistica-item\">\n <div class=\"estadistica-numero\">8<\/div>\n <div class=\"estadistica-label\">Piscinas<\/div>\n <div class=\"estadistica-desc\">Infinity, climatizadas y familiar<\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-659a95c e-con-full e-flex e-con e-parent\" data-id=\"659a95c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-abc292d elementor-widget elementor-widget-html\" data-id=\"abc292d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Contacto<\/title>\n <style>\n \/* Bloque independiente .orizon-contacto *\/\n .orizon-contacto {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-contacto .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-contacto .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-contacto .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n .contacto-contenedor {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n }\n \/* Informaci\u00f3n de contacto (lado izquierdo) *\/\n .contacto-info {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n padding: 1.8rem;\n border: 1px solid rgba(255,255,255,0.3);\n transition: 0.3s;\n }\n .contacto-info:hover {\n border-color: #2ECFA0;\n transform: translateY(-4px);\n }\n .contacto-info h3 {\n font-size: 1.5rem;\n color: #0F2028;\n margin-bottom: 1rem;\n }\n .info-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n margin: 1.2rem 0;\n color: #0F2028;\n }\n .info-icono {\n font-size: 1.5rem;\n min-width: 40px;\n }\n .info-texto {\n font-size: 1rem;\n line-height: 1.4;\n }\n .redes-sociales {\n display: flex;\n gap: 1rem;\n margin-top: 2rem;\n }\n .red-social {\n background: rgba(46,207,160,0.2);\n border: 1px solid #2ECFA0;\n border-radius: 50px;\n padding: 0.5rem 1rem;\n text-decoration: none;\n color: #0F2028;\n font-weight: 600;\n transition: 0.3s;\n }\n .red-social:hover {\n background: #2ECFA0;\n color: white;\n }\n \/* Formulario (lado derecho) *\/\n .contacto-formulario {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n padding: 1.8rem;\n border: 1px solid rgba(255,255,255,0.3);\n transition: 0.3s;\n }\n .contacto-formulario:hover {\n border-color: #2ECFA0;\n }\n .form-group {\n margin-bottom: 1.2rem;\n }\n .form-group label {\n display: block;\n font-weight: 600;\n color: #0F2028;\n margin-bottom: 0.4rem;\n font-size: 0.9rem;\n }\n .form-group input,\n .form-group textarea {\n width: 100%;\n padding: 0.8rem 1rem;\n border-radius: 40px;\n border: 1px solid rgba(15,32,40,0.3);\n background: rgba(255,255,255,0.5);\n font-family: inherit;\n font-size: 0.9rem;\n transition: 0.2s;\n }\n .form-group input:focus,\n .form-group textarea:focus {\n outline: none;\n border-color: #2ECFA0;\n background: rgba(255,255,255,0.8);\n }\n .form-group textarea {\n border-radius: 24px;\n resize: vertical;\n min-height: 100px;\n }\n .btn-enviar {\n background: rgba(46,207,160,0.25);\n border: 1px solid #2ECFA0;\n padding: 0.8rem 2rem;\n border-radius: 40px;\n font-weight: 700;\n color: #0F2028;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 1rem;\n width: 100%;\n }\n .btn-enviar:hover {\n background: #2ECFA0;\n color: white;\n box-shadow: 0 8px 20px rgba(46,207,160,0.3);\n transform: translateY(-2px);\n }\n \/* Responsive *\/\n @media (max-width: 768px) {\n .orizon-contacto {\n padding: 1rem;\n margin: 1rem;\n }\n .contacto-contenedor {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-contacto\">\n <div class=\"titulo\">\n <h2>Contacto<\/h2>\n <p>\u00bfListo para vivir la experiencia ORIZON? Escr\u00edbenos<\/p>\n <\/div>\n <div class=\"contacto-contenedor\">\n \n <div class=\"contacto-info\">\n <h3>\ud83d\udcde Hablemos<\/h3>\n <div class=\"info-item\">\n <div class=\"info-icono\">\ud83d\udccd<\/div>\n <div class=\"info-texto\">Carrera 1 # 11-23, El Rodadero<br>Santa Marta, Colombia<\/div>\n <\/div>\n <div class=\"info-item\">\n <div class=\"info-icono\">\ud83d\udce7<\/div>\n <div class=\"info-texto\">reservas@orizonhotel.com<\/div>\n <\/div>\n <div class=\"info-item\">\n <div class=\"info-icono\">\ud83d\udcde<\/div>\n <div class=\"info-texto\">+57 (605) 123 4567<br>WhatsApp: +57 310 123 4567<\/div>\n <\/div>\n <div class=\"info-item\">\n <div class=\"info-icono\">\u23f0<\/div>\n <div class=\"info-texto\">Atenci\u00f3n 24\/7 \u2013 Lobby y recepci\u00f3n<\/div>\n <\/div>\n <div class=\"redes-sociales\">\n <a href=\"#\" class=\"red-social\">Instagram<\/a>\n <a href=\"#\" class=\"red-social\">Facebook<\/a>\n <a href=\"#\" class=\"red-social\">LinkedIn<\/a>\n <\/div>\n <\/div>\n \n <div class=\"contacto-formulario\">\n <form id=\"contactForm\">\n <div class=\"form-group\">\n <label>Nombre completo<\/label>\n <input type=\"text\" id=\"nombreContacto\" placeholder=\"Ej: Mar\u00eda P\u00e9rez\" required>\n <\/div>\n <div class=\"form-group\">\n <label>Correo electr\u00f3nico<\/label>\n <input type=\"email\" id=\"emailContacto\" placeholder=\"maria@ejemplo.com\" required>\n <\/div>\n <div class=\"form-group\">\n <label>Mensaje<\/label>\n <textarea id=\"mensajeContacto\" placeholder=\"Cu\u00e9ntanos tu consulta o solicitud...\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn-enviar\" id=\"btnEnviarContacto\">Enviar consulta<\/button>\n <\/form>\n <\/div>\n <\/div>\n<\/div>\n<script>\n \/\/ Simulaci\u00f3n de env\u00edo (sin backend real)\n const form = document.getElementById('contactForm');\n if (form) {\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n const nombre = document.getElementById('nombreContacto').value.trim();\n const email = document.getElementById('emailContacto').value.trim();\n const mensaje = document.getElementById('mensajeContacto').value.trim();\n if (!nombre || !email) {\n alert('\u274c Por favor completa al menos el nombre y correo.');\n return;\n }\n \/\/ Simular \u00e9xito\n alert(`\u2705 \u00a1Gracias ${nombre}! Tu mensaje ha sido enviado a ORIZON. Te responderemos en menos de 24 horas.`);\n form.reset();\n });\n }\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b667eb1 e-con-full e-flex e-con e-parent\" data-id=\"b667eb1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65aa097 elementor-widget elementor-widget-html\" data-id=\"65aa097\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Footer Premium<\/title>\n <style>\n \/* Bloque independiente .orizon-footer-blanco *\/\n .orizon-footer-blanco {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 100%;\n margin: 2rem auto 0 auto;\n background: #FFFFFF;\n border-top: 2px solid rgba(46, 207, 160, 0.3);\n border-radius: 32px 32px 0 0;\n padding: 2rem 2rem 1rem 2rem;\n box-shadow: 0 -8px 32px rgba(0,0,0,0.05);\n }\n .footer-contenedor {\n max-width: 1400px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 2rem;\n }\n .footer-col .logo-footer img {\n height: 60px;\n width: auto;\n margin-bottom: 1rem;\n }\n .footer-col .descripcion {\n color: #0F2028;\n font-size: 0.9rem;\n line-height: 1.5;\n margin-top: 0.5rem;\n }\n .footer-col h4 {\n color: #0F2028;\n font-size: 1.2rem;\n font-weight: 700;\n margin-bottom: 1rem;\n border-left: 3px solid #2ECFA0;\n padding-left: 0.8rem;\n }\n .footer-col ul {\n list-style: none;\n padding: 0;\n }\n .footer-col ul li {\n margin-bottom: 0.6rem;\n }\n .footer-col ul li a {\n text-decoration: none;\n color: #0F2028;\n transition: 0.2s;\n font-size: 0.9rem;\n }\n .footer-col ul li a:hover {\n color: #2ECFA0;\n padding-left: 5px;\n }\n .contacto-item {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n margin-bottom: 0.8rem;\n font-size: 0.9rem;\n color: #0F2028;\n }\n .redes-footer {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n }\n .redes-footer a {\n background: rgba(46,207,160,0.1);\n border: 1px solid #2ECFA0;\n border-radius: 40px;\n padding: 0.4rem 1rem;\n text-decoration: none;\n color: #0F2028;\n font-weight: 500;\n font-size: 0.8rem;\n transition: 0.3s;\n }\n .redes-footer a:hover {\n background: #2ECFA0;\n color: white;\n }\n .footer-copyright {\n text-align: center;\n margin-top: 2rem;\n padding-top: 1.5rem;\n border-top: 1px solid rgba(15,32,40,0.1);\n font-size: 0.8rem;\n color: #0F2028;\n line-height: 1.5;\n }\n @media (max-width: 768px) {\n .orizon-footer-blanco {\n padding: 1.5rem;\n }\n .footer-contenedor {\n gap: 1.5rem;\n }\n .footer-col .logo-footer img {\n height: 50px;\n }\n }\n <\/style>\n<\/head>\n<body>\n<footer class=\"orizon-footer-blanco\">\n <div class=\"footer-contenedor\">\n <div class=\"footer-col\">\n <div class=\"logo-footer\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/Logo-Hotel-scaled.png\" alt=\"ORIZON Santa Marta\">\n <\/div>\n <div class=\"descripcion\">\n Lujo flotante sobre el Caribe. Vidrio, brisa y exclusividad frente al mar. Una experiencia \u00fanica en Santa Marta.\n <\/div>\n <\/div>\n <div class=\"footer-col\">\n <h4>Explora<\/h4>\n <ul>\n <li><a href=\"#\">Inicio<\/a><\/li>\n <li><a href=\"#\">Habitaciones<\/a><\/li>\n <li><a href=\"#\">Reservas<\/a><\/li>\n <li><a href=\"#\">Experiencias<\/a><\/li>\n <li><a href=\"#\">Gastronom\u00eda<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-col\">\n <h4>Legal<\/h4>\n <ul>\n <li><a href=\"#\">T\u00e9rminos y condiciones<\/a><\/li>\n <li><a href=\"#\">Pol\u00edtica de privacidad<\/a><\/li>\n <li><a href=\"#\">Cancelaciones<\/a><\/li>\n <li><a href=\"#\">Trabaja con nosotros<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-col\">\n <h4>Contacto<\/h4>\n <div class=\"contacto-item\">\ud83d\udccd Carrera 1 # 11-23, El Rodadero<\/div>\n <div class=\"contacto-item\">\ud83d\udcde +57 (605) 123 4567<\/div>\n <div class=\"contacto-item\">\u2709\ufe0f reservas@orizonhotel.com<\/div>\n <div class=\"redes-footer\">\n <a href=\"#\">IG<\/a>\n <a href=\"#\">FB<\/a>\n <a href=\"#\">X<\/a>\n <a href=\"#\">LI<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"footer-copyright\">\n \u00a9 2026 ORIZON Santa Marta \u2013 Hotel Premium. Todos los derechos reservados.<br>\n Este sitio fue dise\u00f1ado por dise\u00f1oweb.com y funciona gracias a SNTECHNOLOGY SAS.\n <\/div>\n<\/footer>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-caeae0a e-con-full e-flex e-con e-parent\" data-id=\"caeae0a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-326a651 elementor-widget elementor-widget-html\" data-id=\"326a651\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>WhatsApp Oficial<\/title>\n <style>\n \/* Bloque independiente - solo el \u00edcono oficial *\/\n .whatsapp-float {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 9999;\n }\n .whatsapp-float a {\n display: block;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background-color: #25D366;\n box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n transition: transform 0.2s ease;\n }\n .whatsapp-float a:hover {\n transform: scale(1.05);\n }\n .whatsapp-float svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n @media (max-width: 480px) {\n .whatsapp-float a {\n width: 48px;\n height: 48px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"whatsapp-float\">\n <a href=\"https:\/\/wa.me\/573001234567?text=Hola%2C%20vengo%20del%20sitio%20web%20ORIZON%2C%20me%20gustar%C3%ADa%20hacer%20una%20reserva\" target=\"_blank\" rel=\"noopener noreferrer\">\n \n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path fill=\"#FFFFFF\" d=\"M12 2C6.48 2 2 6.48 2 12c0 1.93.55 3.71 1.5 5.24L2.5 21.5l4.26-1.01C8.29 21.45 10.09 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm3.85 15.15c-1.05.55-2.24.85-3.46.85-3.67 0-6.66-2.99-6.66-6.66 0-1.22.3-2.41.85-3.46.55-1.05 1.34-1.94 2.32-2.58.98-.64 2.07-1.01 3.2-1.08.16-.01.31.02.46.07.15.05.28.13.39.24.11.11.19.24.24.39.05.15.07.3.06.46-.04.35-.15.69-.33 1-.18.31-.41.57-.68.78-.18.15-.32.34-.42.56-.1.22-.15.45-.15.68 0 .23.05.46.15.67.1.21.24.4.42.56.18.15.4.26.63.33.23.07.47.09.7.06.23-.03.45-.11.65-.23.13-.08.25-.19.35-.32.12-.15.26-.28.4-.39.14-.11.3-.19.46-.24.16-.05.33-.07.49-.05.33.03.65.13.94.29.29.16.54.38.74.63.2.25.35.54.44.85.09.31.12.63.09.95-.03.32-.11.63-.24.92-.14.29-.32.54-.55.75-.23.21-.49.37-.77.48z\"\/>\n <\/svg>\n <\/a>\n <\/div>\n<\/body>\n<\/html>\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>ORIZON Navbar – Hamburguesa Lateral + Anclas Inicio Habitaciones Reservas Experiencias Contacto Reservar ahora Inicio Habitaciones Reservas Experiencias Contacto Reservar […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":52,"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/pages\/7\/revisions\/81"}],"wp:attachment":[{"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n ORIZON Navbar - Hamburguesa Lateral + Anclas<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: #e9f0f5; \/* solo fondo de respaldo, no afecta al bloque *\/\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n }\n\n \/* Navbar glass *\/\n .navbar-glass {\n position: sticky;\n top: 0;\n z-index: 1000;\n background: rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(31, 38, 135, 0.4);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n }\n\n .nav-container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 1rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo img {\n height: 80px;\n width: auto;\n display: block;\n }\n\n \/* Men\u00fa desktop *\/\n .nav-menu {\n display: flex;\n gap: 2rem;\n list-style: none;\n align-items: center;\n }\n .nav-menu li a {\n text-decoration: none;\n font-weight: 600;\n color: #0F2028;\n transition: all 0.2s ease;\n padding: 0.5rem 0;\n position: relative;\n font-size: 1rem;\n }\n .nav-menu li a::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0%;\n height: 2px;\n background: #2ECFA0;\n transition: width 0.3s ease;\n }\n .nav-menu li a:hover {\n color: #2ECFA0;\n }\n .nav-menu li a:hover::after {\n width: 100%;\n }\n\n .btn-reservar-desktop {\n background: rgba(46, 207, 160, 0.25);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(46, 207, 160, 0.6);\n padding: 0.6rem 1.5rem;\n border-radius: 40px;\n font-weight: 700;\n color: #0F2028;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 0.9rem;\n font-family: inherit;\n }\n .btn-reservar-desktop:hover {\n background: #2ECFA0;\n color: white;\n border-color: #2ECFA0;\n box-shadow: 0 8px 20px rgba(46, 207, 160, 0.3);\n transform: translateY(-2px);\n }\n\n \/* Hamburguesa *\/\n .hamburger {\n display: none;\n flex-direction: column;\n cursor: pointer;\n gap: 6px;\n background: transparent;\n border: none;\n padding: 5px;\n z-index: 1100;\n }\n .hamburger span {\n width: 28px;\n height: 3px;\n background-color: #0F2028;\n border-radius: 4px;\n transition: 0.3s;\n }\n\n \/* Men\u00fa lateral off-canvas *\/\n .sidebar-menu {\n position: fixed;\n top: 0;\n right: -100%;\n width: 280px;\n height: 100vh;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);\n z-index: 1050;\n transition: right 0.4s ease;\n padding: 5rem 2rem 2rem 2rem;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n border-left: 1px solid rgba(255,255,255,0.5);\n }\n .sidebar-menu.active {\n right: 0;\n }\n .sidebar-menu ul {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 1.8rem;\n }\n .sidebar-menu ul li a {\n text-decoration: none;\n font-size: 1.3rem;\n font-weight: 600;\n color: #0F2028;\n transition: 0.2s;\n }\n .sidebar-menu ul li a:hover {\n color: #2ECFA0;\n padding-left: 8px;\n }\n .btn-reservar-mobile {\n background: rgba(46, 207, 160, 0.25);\n border: 1px solid #2ECFA0;\n padding: 0.8rem;\n border-radius: 40px;\n font-weight: 700;\n color: #0F2028;\n cursor: pointer;\n transition: 0.3s;\n font-size: 1rem;\n width: 100%;\n text-align: center;\n margin-top: 0.5rem;\n }\n .btn-reservar-mobile:hover {\n background: #2ECFA0;\n color: white;\n }\n .menu-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.3);\n backdrop-filter: blur(2px);\n z-index: 1040;\n opacity: 0;\n visibility: hidden;\n transition: 0.3s;\n }\n .menu-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .nav-container {\n padding: 0.8rem 1.5rem;\n }\n .logo img {\n height: 60px;\n }\n .nav-menu {\n display: none;\n }\n .btn-reservar-desktop {\n display: none;\n }\n .hamburger {\n display: flex;\n }\n }\n @media (min-width: 769px) {\n .sidebar-menu, .menu-overlay, .btn-reservar-mobile {\n display: none;\n }\n }\n\n \/* Scroll suave global y compensaci\u00f3n para que el navbar no tape el inicio de cada secci\u00f3n *\/\n html {\n scroll-behavior: smooth;\n }\n section[id], div[id] {\n scroll-margin-top: 100px;\n }\n <\/style>\n<\/head>\n<body>\n\n<nav class=\"navbar-glass\">\n <div class=\"nav-container\">\n <div class=\"logo\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/Logo-Hotel-scaled.png\" alt=\"ORIZON Santa Marta\">\n <\/div>\n \n <ul class=\"nav-menu\">\n <li><a href=\"#hero\">Inicio<\/a><\/li>\n <li><a href=\"#habitaciones-espacios\">Habitaciones<\/a><\/li>\n <li><a href=\"#motor-reservas\">Reservas<\/a><\/li>\n <li><a href=\"#experiencias\">Experiencias<\/a><\/li>\n <li><a href=\"#contacto\">Contacto<\/a><\/li>\n <\/ul>\n <button class=\"btn-reservar-desktop\" id=\"reservarBtnDesktop\">Reservar ahora<\/button>\n \n <button class=\"hamburger\" id=\"hamburgerBtn\" aria-label=\"Abrir men\u00fa\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/button>\n <\/div>\n<\/nav>\n\n\n<div class=\"sidebar-menu\" id=\"sidebarMenu\">\n <ul>\n <li><a href=\"#hero\">Inicio<\/a><\/li>\n <li><a href=\"#habitaciones-espacios\">Habitaciones<\/a><\/li>\n <li><a href=\"#motor-reservas\">Reservas<\/a><\/li>\n <li><a href=\"#experiencias\">Experiencias<\/a><\/li>\n <li><a href=\"#contacto\">Contacto<\/a><\/li>\n <\/ul>\n <button class=\"btn-reservar-mobile\" id=\"reservarBtnMobile\">Reservar ahora<\/button>\n<\/div>\n<div class=\"menu-overlay\" id=\"menuOverlay\"><\/div>\n\n<script>\n \/\/ Men\u00fa lateral\n const hamburger = document.getElementById('hamburgerBtn');\n const sidebar = document.getElementById('sidebarMenu');\n const overlay = document.getElementById('menuOverlay');\n const closeMenu = () => {\n sidebar.classList.remove('active');\n overlay.classList.remove('active');\n };\n const openMenu = () => {\n sidebar.classList.add('active');\n overlay.classList.add('active');\n };\n hamburger.addEventListener('click', (e) => {\n e.stopPropagation();\n if (sidebar.classList.contains('active')) closeMenu();\n else openMenu();\n });\n overlay.addEventListener('click', closeMenu);\n document.querySelectorAll('.sidebar-menu a, .sidebar-menu button').forEach(el => {\n el.addEventListener('click', closeMenu);\n });\n\n \/\/ Botones \"Reservar ahora\" llevan a #motor-reservas\n function scrollToReservas() {\n const target = document.getElementById('motor-reservas');\n if (target) target.scrollIntoView({ behavior: 'smooth' });\n else console.warn('El bloque Motor de Reservas a\u00fan no tiene id=\"motor-reservas\"');\n }\n const btnDesktop = document.getElementById('reservarBtnDesktop');\n const btnMobile = document.getElementById('reservarBtnMobile');\n if (btnDesktop) btnDesktop.addEventListener('click', scrollToReservas);\n if (btnMobile) btnMobile.addEventListener('click', scrollToReservas);\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0d9d996 e-con-full e-flex e-con e-parent\" data-id=\"0d9d996\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b337277 elementor-widget elementor-widget-html\" data-id=\"b337277\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON Hero<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n \/* Hero container con imagen de fondo *\/\n .hero-caribe {\n position: relative;\n width: 100%;\n min-height: 90vh;\n background-image: url('https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/Hero-Hotel-scaled.png');\n background-size: cover;\n background-position: center center;\n background-repeat: no-repeat;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-family: 'Segoe UI', 'Poppins', system-ui, -apple-system, sans-serif;\n }\n\n \/* Overlay glass (efecto vidrio sobre la imagen) *\/\n .hero-overlay {\n background: rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border-radius: 32px;\n border: 1px solid rgba(255, 255, 255, 0.3);\n padding: 3rem 2rem;\n max-width: 800px;\n margin: 2rem;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n transition: transform 0.3s ease;\n }\n\n .hero-overlay:hover {\n transform: scale(1.02);\n }\n\n \/* T\u00edtulos y texto *\/\n .hero-overlay h1 {\n font-size: 3.5rem;\n font-weight: 800;\n color: #0F2028;\n margin-bottom: 1rem;\n letter-spacing: -0.5px;\n text-shadow: 2px 2px 15px rgba(255,255,255,0.3);\n }\n\n .hero-overlay p {\n font-size: 1.2rem;\n color: #0F2028;\n margin-bottom: 2rem;\n font-weight: 500;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* Bot\u00f3n CTA glass con color verde mar *\/\n .btn-hero {\n display: inline-block;\n background: rgba(46, 207, 160, 0.25);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(46, 207, 160, 0.7);\n padding: 0.9rem 2.5rem;\n border-radius: 50px;\n font-weight: 700;\n font-size: 1rem;\n color: #0F2028;\n text-decoration: none;\n transition: all 0.3s ease;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n }\n\n .btn-hero:hover {\n background: #2ECFA0;\n color: white;\n border-color: #2ECFA0;\n box-shadow: 0 8px 25px rgba(46, 207, 160, 0.4);\n transform: translateY(-3px);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .hero-overlay h1 {\n font-size: 2.2rem;\n }\n .hero-overlay p {\n font-size: 1rem;\n }\n .hero-overlay {\n padding: 2rem 1.5rem;\n margin: 1rem;\n }\n .btn-hero {\n padding: 0.7rem 1.8rem;\n font-size: 0.9rem;\n }\n }\n\n @media (max-width: 480px) {\n .hero-overlay h1 {\n font-size: 1.8rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <section class=\"hero-caribe\">\n <div class=\"hero-overlay\">\n <h1>ORIZON<br>Santa Marta<\/h1>\n <p>Lujo flotante sobre el Caribe. Vidrio, brisa y exclusividad frente al mar.<\/p>\n <a href=\"#\" class=\"btn-hero\" id=\"heroCta\">Explorar habitaciones<\/a>\n <\/div>\n <\/section>\n\n \n <script>\n document.getElementById('heroCta').addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.getElementById('habitaciones');\n if (target) {\n target.scrollIntoView({ behavior: 'smooth' });\n } else {\n console.log('El bloque de habitaciones se agregar\u00e1 con id=\"habitaciones\"');\n }\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3274ee7 e-con-full e-flex e-con e-parent\" data-id=\"3274ee7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-588bd3e elementor-widget elementor-widget-html\" data-id=\"588bd3e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Reservas - ORIZON Hotel Santa Marta<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIABLES \u2014 Paleta ORIZON\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n :root {\n --ocean-deep: #0F2028;\n --ocean-mid: #162F3A;\n --ocean-surface: #1C3D4A;\n --teal: #2ECFA0;\n --teal-dim: rgba(46,207,160,0.18);\n --teal-glow: rgba(46,207,160,0.35);\n --teal-border: rgba(46,207,160,0.45);\n --glass-white: rgba(255,255,255,0.07);\n --glass-card: rgba(255,255,255,0.06);\n --glass-hover: rgba(255,255,255,0.11);\n --glass-border: rgba(255,255,255,0.14);\n --glass-border-b:rgba(31,38,135,0.35);\n --indigo-glow: rgba(31,38,135,0.2);\n --white: #FFFFFF;\n --text-dim: rgba(255,255,255,0.55);\n --text-soft: rgba(255,255,255,0.78);\n --gold: #C9A46B;\n --gold-light: rgba(201,164,107,0.25);\n --warn: #E88C8C;\n --radius-sm: 10px;\n --radius: 18px;\n --radius-lg: 26px;\n --shadow: 0 16px 48px rgba(0,0,0,0.35);\n --shadow-teal: 0 8px 32px rgba(46,207,160,0.2);\n --font-title: 'Cormorant Garamond', serif;\n --font-body: 'DM Sans', sans-serif;\n }\n\n * { margin:0; padding:0; box-sizing:border-box; }\n\n body {\n font-family: var(--font-body);\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FONDO ANIMADO \u2014 OC\u00c9ANO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n \/* Ondas animadas \u2014 absolutas dentro de la secci\u00f3n *\/\n .or-bg {\n position: absolute; inset: 0; z-index: 0;\n pointer-events: none; overflow: hidden;\n }\n .or-bg-wave {\n position: absolute; width: 200%; height: 200%;\n top: -50%; left: -50%;\n background: radial-gradient(ellipse 40% 30% at 60% 40%, rgba(46,207,160,0.04) 0%, transparent 60%);\n animation: or-drift 18s ease-in-out infinite alternate;\n }\n .or-bg-wave-2 {\n animation: or-drift 24s ease-in-out infinite alternate-reverse;\n background: radial-gradient(ellipse 50% 40% at 30% 60%, rgba(31,38,135,0.08) 0%, transparent 60%);\n }\n @keyframes or-drift {\n from { transform: translate(0,0) rotate(0deg); }\n to { transform: translate(3%,2%) rotate(2deg); }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCI\u00d3N \u2014 todo el fondo aqu\u00ed, aislado\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-section {\n position: relative;\n overflow: hidden;\n padding: 5rem 2rem 6rem;\n color: var(--white);\n \/* Fondo oc\u00e9ano completo confinado al bloque *\/\n background:\n radial-gradient(ellipse 80% 60% at 70% 10%, rgba(46,207,160,0.09) 0%, transparent 60%),\n radial-gradient(ellipse 60% 80% at 10% 80%, rgba(31,38,135,0.18) 0%, transparent 60%),\n radial-gradient(ellipse 50% 50% at 90% 90%, rgba(46,207,160,0.05) 0%, transparent 50%),\n linear-gradient(160deg, #0F2028 0%, #121E2A 40%, #0D1C28 70%, #0F2028 100%);\n }\n \/* Patr\u00f3n de puntos sutil \u2014 solo dentro de la secci\u00f3n *\/\n .or-section::before {\n content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;\n background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);\n background-size: 32px 32px;\n }\n .or-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }\n\n \/* CABECERA *\/\n .or-header { text-align: center; margin-bottom: 3.5rem; }\n .or-tag {\n display: inline-flex; align-items: center; gap: 0.5rem;\n background: var(--teal-dim); border: 1px solid var(--teal-border);\n color: var(--teal); font-size: 0.7rem; font-weight: 600;\n letter-spacing: 0.18em; text-transform: uppercase;\n padding: 0.45rem 1.2rem; border-radius: 50px; margin-bottom: 1.2rem;\n }\n .or-title {\n font-family: var(--font-title); font-size: 3.2rem; font-weight: 300;\n color: var(--white); line-height: 1.1; margin-bottom: 0.7rem;\n letter-spacing: -0.01em;\n }\n .or-title strong { font-weight: 600; color: var(--teal); font-style: italic; }\n .or-subtitle {\n font-size: 0.92rem; color: var(--text-dim); max-width: 480px;\n margin: 0 auto; line-height: 1.6;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n STEPS BAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-steps {\n display: flex; align-items: center; justify-content: center;\n gap: 0; margin-bottom: 3rem; flex-wrap: wrap;\n }\n .or-step {\n display: flex; align-items: center; gap: 0.6rem;\n padding: 0.5rem 0.8rem; cursor: default;\n transition: all 0.3s;\n }\n .or-step.done { cursor: pointer; }\n .or-step-num {\n width: 30px; height: 30px; border-radius: 50%;\n border: 1.5px solid var(--glass-border);\n display: flex; align-items: center; justify-content: center;\n font-size: 0.75rem; font-weight: 600;\n color: var(--text-dim); background: var(--glass-white);\n transition: all 0.35s; flex-shrink: 0;\n backdrop-filter: blur(8px);\n }\n .or-step.active .or-step-num {\n background: var(--teal); border-color: var(--teal);\n color: var(--ocean-deep); box-shadow: 0 0 0 5px var(--teal-dim);\n }\n .or-step.done .or-step-num {\n background: var(--teal-dim); border-color: var(--teal-border); color: var(--teal);\n }\n .or-step-lbl {\n font-size: 0.78rem; font-weight: 500; color: var(--text-dim);\n transition: color 0.3s; white-space: nowrap;\n }\n .or-step.active .or-step-lbl { color: var(--white); }\n .or-step.done .or-step-lbl { color: var(--teal); }\n .or-step-line {\n width: 48px; height: 1px;\n background: var(--glass-border);\n transition: background 0.4s;\n }\n .or-step-line.done { background: var(--teal-border); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n LAYOUT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-layout {\n display: grid;\n grid-template-columns: 1fr 320px;\n gap: 1.5rem; align-items: start;\n }\n\n \/* CARD GLASS *\/\n .or-card {\n background: var(--glass-card);\n backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);\n overflow: hidden;\n }\n .or-card-head {\n padding: 1.6rem 2rem 1.2rem;\n border-bottom: 1px solid var(--glass-border);\n display: flex; align-items: center; gap: 0.9rem;\n }\n .or-card-ico {\n width: 40px; height: 40px; border-radius: 12px;\n background: var(--teal-dim); border: 1px solid var(--teal-border);\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n }\n .or-card-ico svg { width: 18px; height: 18px; stroke: var(--teal); }\n .or-card-title {\n font-family: var(--font-title); font-size: 1.25rem; font-weight: 600;\n color: var(--white); line-height: 1.2;\n }\n .or-card-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.1rem; }\n .or-card-body { padding: 1.8rem 2rem; }\n\n \/* PASO oculto\/visible *\/\n .or-pane { display: none; }\n .or-pane.active { display: block; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PASO 1 \u2014 FECHAS Y HU\u00c9SPEDES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n \/* Calendario *\/\n .or-cal-pair {\n display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;\n margin-bottom: 2rem;\n }\n .or-cal-box {}\n .or-cal-lbl {\n font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em;\n text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.7rem;\n display: flex; align-items: center; gap: 0.4rem;\n }\n .or-cal-lbl svg { width: 13px; height: 13px; stroke: var(--teal); }\n\n .or-cal {\n background: var(--glass-white);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius); overflow: hidden;\n }\n .or-cal-nav {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.8rem 1rem;\n border-bottom: 1px solid var(--glass-border);\n }\n .or-cal-month {\n font-family: var(--font-title); font-size: 1rem; font-weight: 600;\n color: var(--white);\n }\n .or-cal-btn {\n width: 28px; height: 28px; border-radius: 8px;\n background: var(--glass-white); border: 1px solid var(--glass-border);\n color: var(--text-soft); cursor: pointer; font-size: 0.9rem;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.2s;\n }\n .or-cal-btn:hover:not(:disabled) { background: var(--teal-dim); border-color: var(--teal-border); color: var(--teal); }\n .or-cal-btn:disabled { opacity: 0.25; cursor: not-allowed; }\n\n .or-cal-grid {\n display: grid; grid-template-columns: repeat(7,1fr);\n gap: 2px; padding: 0.7rem;\n }\n .or-cal-dow {\n text-align: center; font-size: 0.6rem; font-weight: 600;\n letter-spacing: 0.07em; text-transform: uppercase;\n color: var(--text-dim); padding: 0.3rem 0 0.5rem;\n }\n .or-cal-day {\n aspect-ratio: 1; border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.77rem; cursor: pointer; position: relative;\n color: var(--text-soft); transition: all 0.2s; font-weight: 400;\n }\n .or-cal-day:hover:not(.or-disabled):not(.or-empty) {\n background: var(--teal-dim); color: var(--teal);\n }\n .or-cal-day.or-today { color: var(--teal); font-weight: 600; }\n .or-cal-day.or-today::after {\n content:''; position:absolute; bottom:3px; left:50%;\n transform:translateX(-50%); width:4px; height:4px;\n border-radius:50%; background:var(--teal);\n }\n .or-cal-day.or-selected {\n background: var(--teal) !important; color: var(--ocean-deep) !important;\n font-weight: 700; box-shadow: var(--shadow-teal);\n }\n .or-cal-day.or-selected::after { display: none; }\n .or-cal-day.or-in-range {\n background: var(--teal-dim); color: var(--teal);\n border-radius: 0;\n }\n .or-cal-day.or-range-start { border-radius: 8px 0 0 8px; }\n .or-cal-day.or-range-end { border-radius: 0 8px 8px 0; }\n .or-cal-day.or-disabled { color: rgba(255,255,255,0.18); cursor:not-allowed; }\n .or-cal-day.or-empty { cursor: default; }\n\n \/* Indicador de noches *\/\n .or-nights-badge {\n display: flex; align-items: center; justify-content: center; gap: 0.5rem;\n background: var(--teal-dim); border: 1px solid var(--teal-border);\n border-radius: 10px; padding: 0.6rem 1rem; margin-bottom: 2rem;\n font-size: 0.82rem; color: var(--teal); font-weight: 500;\n transition: all 0.3s;\n }\n .or-nights-badge strong { font-size: 1.1rem; font-weight: 700; }\n .or-nights-badge.hidden { opacity: 0; pointer-events: none; }\n\n \/* Controles hu\u00e9spedes *\/\n .or-guests-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 0; }\n .or-guest-ctrl {\n background: var(--glass-white); border: 1px solid var(--glass-border);\n border-radius: var(--radius); padding: 1.1rem 1rem;\n text-align: center;\n }\n .or-guest-label { font-size: 0.68rem; font-weight: 600; letter-spacing:0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.8rem; }\n .or-guest-emoji { font-size: 1.4rem; margin-bottom: 0.5rem; display: block; }\n .or-guest-row { display: flex; align-items: center; justify-content: center; gap: 0.7rem; }\n .or-ctr-btn {\n width: 28px; height: 28px;\n min-width: 28px; min-height: 28px;\n aspect-ratio: 1 \/ 1;\n border-radius: 50%;\n background: var(--glass-white); border: 1px solid var(--glass-border);\n color: var(--text-soft); font-size: 1.1rem; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.2s; line-height: 1;\n padding: 0; flex-shrink: 0;\n }\n .or-ctr-btn:hover:not(:disabled) { background: var(--teal-dim); border-color: var(--teal-border); color: var(--teal); }\n .or-ctr-btn:disabled { opacity: 0.2; cursor: not-allowed; }\n .or-ctr-val { font-size: 1.2rem; font-weight: 700; color: var(--white); min-width: 20px; text-align: center; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PASO 2 \u2014 HABITACI\u00d3N\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-rooms { display: flex; flex-direction: column; gap: 1rem; }\n .or-room {\n background: var(--glass-white); border: 1.5px solid var(--glass-border);\n border-radius: var(--radius); overflow: hidden; cursor: pointer;\n transition: all 0.3s; display: flex;\n }\n .or-room:hover { border-color: rgba(46,207,160,0.35); background: var(--glass-hover); transform: translateY(-2px); }\n .or-room.selected {\n border-color: var(--teal); background: rgba(46,207,160,0.07);\n box-shadow: 0 0 0 1px var(--teal-dim), var(--shadow-teal);\n }\n\n .or-room-img {\n width: 130px; flex-shrink: 0;\n background: linear-gradient(135deg, var(--ocean-surface) 0%, var(--ocean-mid) 100%);\n position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;\n }\n .or-room-img-emoji { font-size: 2.5rem; opacity: 0.7; }\n .or-room-img-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to right, transparent 60%, rgba(15,32,40,0.5));\n }\n\n .or-room-body { flex: 1; padding: 1.1rem 1.3rem; }\n .or-room-tag {\n font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;\n color: var(--teal); background: var(--teal-dim); border: 1px solid var(--teal-border);\n padding: 0.2rem 0.6rem; border-radius: 50px; display: inline-block; margin-bottom: 0.5rem;\n }\n .or-room-name {\n font-family: var(--font-title); font-size: 1.1rem; font-weight: 600;\n color: var(--white); margin-bottom: 0.3rem; line-height: 1.2;\n }\n .or-room-desc { font-size: 0.75rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 0.7rem; }\n .or-room-features { display: flex; flex-wrap: wrap; gap: 0.4rem; }\n .or-feat {\n font-size: 0.67rem; background: var(--glass-white); border: 1px solid var(--glass-border);\n border-radius: 50px; padding: 0.2rem 0.55rem; color: var(--text-soft);\n }\n\n .or-room-right { padding: 1.1rem 1.3rem; text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; min-width: 110px; }\n .or-room-price-lbl { font-size: 0.62rem; color: var(--text-dim); letter-spacing: 0.05em; }\n .or-room-price { font-family: var(--font-title); font-size: 1.3rem; font-weight: 700; color: var(--teal); line-height: 1; }\n .or-room-price-night { font-size: 0.68rem; color: var(--text-dim); }\n .or-room-check {\n width: 24px; height: 24px; border-radius: 50%;\n border: 2px solid var(--glass-border);\n display: flex; align-items: center; justify-content: center;\n transition: all 0.25s; background: var(--glass-white);\n }\n .or-room.selected .or-room-check { background: var(--teal); border-color: var(--teal); }\n .or-room-check svg { width: 10px; height: 10px; stroke: var(--ocean-deep); stroke-width: 2.5; opacity: 0; transform: scale(0.5); transition: all 0.2s; }\n .or-room.selected .or-room-check svg { opacity: 1; transform: scale(1); }\n\n \/* EXTRAS *\/\n .or-extras-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 1.8rem 0 0.9rem; }\n .or-extras-wrap { display: flex; flex-wrap: wrap; gap: 0.6rem; }\n .or-extra {\n display: flex; align-items: center; gap: 0.5rem;\n background: var(--glass-white); border: 1.5px solid var(--glass-border);\n border-radius: 50px; padding: 0.5rem 1rem; cursor: pointer;\n transition: all 0.25s; font-size: 0.78rem; color: var(--text-soft);\n }\n .or-extra:hover { border-color: rgba(46,207,160,0.35); }\n .or-extra.selected { border-color: var(--teal); background: var(--teal-dim); color: var(--teal); }\n .or-extra-price { font-size: 0.68rem; font-weight: 600; color: var(--text-dim); }\n .or-extra.selected .or-extra-price { color: var(--teal); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PASO 3 \u2014 DATOS PERSONALES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n .or-fg { display: flex; flex-direction: column; gap: 0.4rem; }\n .or-fg.full { grid-column: 1\/-1; }\n .or-lbl {\n font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;\n color: var(--text-dim); text-transform: uppercase;\n }\n .or-input, .or-select, .or-textarea {\n background: var(--glass-white); border: 1.5px solid var(--glass-border);\n border-radius: var(--radius-sm); padding: 0.78rem 1rem;\n font-size: 0.88rem; color: var(--white); font-family: var(--font-body);\n outline: none; transition: all 0.25s; width: 100%;\n backdrop-filter: blur(8px);\n }\n .or-input::placeholder, .or-textarea::placeholder { color: rgba(255,255,255,0.25); }\n .or-input:focus, .or-select:focus, .or-textarea:focus {\n border-color: var(--teal-border);\n box-shadow: 0 0 0 3px var(--teal-dim);\n background: rgba(255,255,255,0.09);\n }\n .or-select option { background: var(--ocean-mid); color: var(--white); }\n .or-textarea { resize: vertical; min-height: 85px; }\n\n \/* Selector de llegada estimada *\/\n .or-arrival-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n\n \/* Preferencias chips *\/\n .or-prefs-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n .or-pref {\n font-size: 0.74rem; padding: 0.38rem 0.85rem; border-radius: 50px;\n border: 1.5px solid var(--glass-border); background: var(--glass-white);\n cursor: pointer; transition: all 0.25s; color: var(--text-soft);\n }\n .or-pref:hover { border-color: var(--teal-border); }\n .or-pref.selected { border-color: var(--teal); background: var(--teal-dim); color: var(--teal); font-weight: 500; }\n\n \/* Pol\u00edticas *\/\n .or-policy {\n margin-top: 1.5rem; background: var(--glass-white);\n border: 1px solid var(--glass-border); border-radius: var(--radius-sm);\n padding: 1rem 1.2rem;\n }\n .or-policy-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.4rem; }\n .or-policy-title svg { width: 13px; height: 13px; stroke: var(--teal); }\n .or-policy-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.75rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 0.4rem; }\n .or-policy-item::before { content: '\u00b7'; color: var(--teal); font-size: 1rem; line-height: 1.1; flex-shrink: 0; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PASO 4 \u2014 CONFIRMACI\u00d3N\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-success { text-align: center; padding: 2rem 0 1rem; }\n .or-success-wave { font-size: 3.5rem; margin-bottom: 1rem; display: block; animation: or-float 3s ease-in-out infinite; }\n @keyframes or-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }\n .or-success-title { font-family: var(--font-title); font-size: 2rem; font-weight: 600; color: var(--white); margin-bottom: 0.5rem; }\n .or-success-title em { color: var(--teal); font-style: italic; }\n .or-success-text { font-size: 0.88rem; color: var(--text-dim); line-height: 1.7; max-width: 420px; margin: 0 auto 2rem; }\n .or-confirm-box {\n background: var(--glass-white); border: 1px solid var(--glass-border);\n border-radius: var(--radius); padding: 1.4rem 1.8rem; text-align: left; margin-bottom: 1.8rem;\n }\n .or-confirm-row {\n display: flex; justify-content: space-between; align-items: center;\n padding: 0.5rem 0; border-bottom: 1px solid var(--glass-border);\n font-size: 0.83rem;\n }\n .or-confirm-row:last-child { border-bottom: none; }\n .or-confirm-key { color: var(--text-dim); }\n .or-confirm-val { color: var(--white); font-weight: 600; text-align: right; }\n .or-confirm-val.accent { color: var(--teal); }\n .or-success-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BOTONES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; gap: 1rem; }\n .or-btn {\n padding: 0.8rem 2rem; border-radius: 50px; font-size: 0.88rem;\n font-weight: 600; cursor: pointer; border: none; font-family: var(--font-body);\n transition: all 0.3s; display: inline-flex; align-items: center; gap: 0.5rem;\n }\n .or-btn svg { width: 15px; height: 15px; }\n .or-btn-ghost {\n background: var(--glass-white); border: 1.5px solid var(--glass-border);\n color: var(--text-soft); backdrop-filter: blur(8px);\n }\n .or-btn-ghost:hover { border-color: rgba(255,255,255,0.3); color: var(--white); }\n .or-btn-teal {\n background: var(--teal); color: var(--ocean-deep);\n }\n .or-btn-teal:hover { background: #3de0ad; box-shadow: var(--shadow-teal), 0 4px 16px rgba(46,207,160,0.25); transform: translateY(-2px); }\n .or-btn-teal:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }\n .or-btn-outline {\n background: transparent; border: 1.5px solid var(--teal-border);\n color: var(--teal); backdrop-filter: blur(8px);\n }\n .or-btn-outline:hover { background: var(--teal-dim); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PANEL RESUMEN \u2014 STICKY\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .or-summary {\n position: sticky; top: 2rem;\n background: var(--glass-card); backdrop-filter: blur(28px);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.07);\n overflow: hidden;\n }\n .or-sum-head {\n background: linear-gradient(135deg, rgba(46,207,160,0.2) 0%, rgba(46,207,160,0.05) 100%);\n border-bottom: 1px solid var(--teal-border);\n padding: 1.4rem 1.6rem;\n }\n .or-sum-eye { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.3rem; }\n .or-sum-title { font-family: var(--font-title); font-size: 1.2rem; font-weight: 600; color: var(--white); }\n\n .or-sum-body { padding: 1.4rem 1.6rem; }\n .or-sum-row {\n display: flex; align-items: flex-start; gap: 0.75rem;\n padding: 0.75rem 0; border-bottom: 1px solid var(--glass-border);\n }\n .or-sum-row:last-of-type { border-bottom: none; }\n .or-sum-ico { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; margin-top: 0.1rem; }\n .or-sum-k { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.18rem; }\n .or-sum-v { font-size: 0.85rem; font-weight: 500; color: var(--white); line-height: 1.3; }\n .or-sum-v.muted { color: var(--text-dim); font-weight: 400; font-style: italic; font-size: 0.8rem; }\n .or-sum-v.accent { color: var(--teal); }\n\n .or-sum-div { height: 1px; background: var(--glass-border); margin: 0.8rem 0; }\n .or-sum-total-k { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.2rem; }\n .or-sum-total-v { font-family: var(--font-title); font-size: 2rem; font-weight: 700; color: var(--teal); line-height: 1; transition: all 0.3s; }\n .or-sum-currency { font-size: 0.7rem; color: var(--text-dim); margin-bottom: 1.2rem; }\n\n .or-guarantee {\n background: var(--teal-dim); border: 1px solid var(--teal-border);\n border-radius: 10px; padding: 0.75rem 0.9rem;\n display: flex; align-items: flex-start; gap: 0.6rem;\n font-size: 0.74rem; color: var(--text-soft); line-height: 1.45;\n }\n .or-guarantee svg { width: 14px; height: 14px; stroke: var(--teal); flex-shrink: 0; margin-top: 0.1rem; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @media (max-width: 960px) {\n .or-layout { grid-template-columns: 1fr; }\n .or-summary { position: static; }\n .or-cal-pair { grid-template-columns: 1fr; }\n }\n @media (max-width: 640px) {\n .or-section { padding: 3.5rem 1.2rem 5rem; }\n .or-title { font-size: 2.2rem; }\n .or-card-head, .or-card-body { padding-left: 1.3rem; padding-right: 1.3rem; }\n .or-guests-grid { grid-template-columns: 1fr 1fr; }\n .or-form-grid { grid-template-columns: 1fr; }\n .or-room { flex-direction: column; }\n .or-room-img { width: 100%; height: 100px; }\n .or-room-img-overlay { background: linear-gradient(to bottom, transparent 50%, rgba(15,32,40,0.6)); }\n .or-room-right { flex-direction: row; align-items: center; justify-content: space-between; }\n .or-steps { gap: 0; }\n .or-step-lbl { display: none; }\n .or-step-line { width: 24px; }\n }\n <\/style>\n<\/head>\n<body>\n\n\n<div class=\"or-bg\">\n <div class=\"or-bg-wave\"><\/div>\n <div class=\"or-bg-wave or-bg-wave-2\"><\/div>\n<\/div>\n\n<section class=\"or-section\" id=\"reservas\">\n <div class=\"or-inner\">\n\n \n <div class=\"or-header\">\n <div class=\"or-tag\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><\/svg>\n Motor de reservas\n <\/div>\n <h2 class=\"or-title\">Tu estad\u00eda en<br><strong>ORIZON<\/strong> empieza aqu\u00ed<\/h2>\n <p class=\"or-subtitle\">Reserva directamente con nosotros y obt\u00e9n la mejor tarifa garantizada. Sin comisiones.<\/p>\n <\/div>\n\n \n <div class=\"or-steps\" id=\"orSteps\"><\/div>\n\n \n <div class=\"or-layout\">\n <div>\n\n \n <div class=\"or-pane active\" id=\"orPane1\">\n <div class=\"or-card\">\n <div class=\"or-card-head\">\n <div class=\"or-card-ico\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-width=\"1.8\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"or-card-title\">\u00bfCu\u00e1ndo nos visitas?<\/div>\n <div class=\"or-card-sub\">Selecciona tus fechas de llegada y salida<\/div>\n <\/div>\n <\/div>\n <div class=\"or-card-body\">\n\n \n <div class=\"or-cal-pair\">\n <div class=\"or-cal-box\">\n <div class=\"or-cal-lbl\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n Check-in\n <\/div>\n <div class=\"or-cal\" id=\"orCalIn\"><\/div>\n <\/div>\n <div class=\"or-cal-box\">\n <div class=\"or-cal-lbl\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n Check-out\n <\/div>\n <div class=\"or-cal\" id=\"orCalOut\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"or-nights-badge hidden\" id=\"orNightsBadge\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2ECFA0\" stroke-width=\"2\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/><\/svg>\n <strong id=\"orNightsNum\">\u2014<\/strong>\n <span id=\"orNightsText\">noches seleccionadas<\/span>\n <\/div>\n\n \n <div class=\"or-cal-lbl\" style=\"margin-bottom:0.9rem\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" width=\"13\" height=\"13\" stroke=\"#2ECFA0\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n Hu\u00e9spedes y habitaciones\n <\/div>\n <div class=\"or-guests-grid\">\n <div class=\"or-guest-ctrl\">\n <div class=\"or-guest-label\">Adultos<\/div>\n <span class=\"or-guest-emoji\">\ud83e\uddd1<\/span>\n <div class=\"or-guest-row\">\n <button class=\"or-ctr-btn\" id=\"orAdultosMinus\">\u2212<\/button>\n <span class=\"or-ctr-val\" id=\"orAdultosVal\">2<\/span>\n <button class=\"or-ctr-btn\" id=\"orAdultosPlus\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"or-guest-ctrl\">\n <div class=\"or-guest-label\">Ni\u00f1os<\/div>\n <span class=\"or-guest-emoji\">\ud83d\udc76<\/span>\n <div class=\"or-guest-row\">\n <button class=\"or-ctr-btn\" id=\"orNinosMinus\">\u2212<\/button>\n <span class=\"or-ctr-val\" id=\"orNinosVal\">0<\/span>\n <button class=\"or-ctr-btn\" id=\"orNinosPlus\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"or-guest-ctrl\">\n <div class=\"or-guest-label\">Habitaciones<\/div>\n <span class=\"or-guest-emoji\">\ud83d\udecf\ufe0f<\/span>\n <div class=\"or-guest-row\">\n <button class=\"or-ctr-btn\" id=\"orHabMinus\">\u2212<\/button>\n <span class=\"or-ctr-val\" id=\"orHabVal\">1<\/span>\n <button class=\"or-ctr-btn\" id=\"orHabPlus\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-nav\" style=\"justify-content:flex-end\">\n <button class=\"or-btn or-btn-teal\" id=\"orNext1\" onclick=\"orGoStep(2)\" disabled>\n Elegir habitaci\u00f3n\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"or-pane\" id=\"orPane2\">\n <div class=\"or-card\">\n <div class=\"or-card-head\">\n <div class=\"or-card-ico\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-width=\"1.8\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"or-card-title\">Elige tu habitaci\u00f3n<\/div>\n <div class=\"or-card-sub\">Tarifa por noche \u00b7 Precio directo garantizado<\/div>\n <\/div>\n <\/div>\n <div class=\"or-card-body\">\n\n <div class=\"or-rooms\" id=\"orRooms\">\n\n <div class=\"or-room\" data-room=\"estandar\" data-name=\"Habitaci\u00f3n Est\u00e1ndar Vista Ciudad\" data-price=\"280000\" data-emoji=\"\ud83c\udfd9\ufe0f\">\n <div class=\"or-room-img\"><div class=\"or-room-img-emoji\">\ud83c\udfd9\ufe0f<\/div><div class=\"or-room-img-overlay\"><\/div><\/div>\n <div class=\"or-room-body\">\n <div class=\"or-room-tag\">Est\u00e1ndar<\/div>\n <div class=\"or-room-name\">Vista Ciudad<\/div>\n <div class=\"or-room-desc\">Cama king, 30 m\u00b2, aire acondicionado, minibar, Smart TV 55\"<\/div>\n <div class=\"or-room-features\">\n <span class=\"or-feat\">\ud83d\udec1 Ba\u00f1o privado<\/span>\n <span class=\"or-feat\">\ud83d\udcf6 WiFi<\/span>\n <span class=\"or-feat\">\u2615 Cafetera<\/span>\n <\/div>\n <\/div>\n <div class=\"or-room-right\">\n <div>\n <div class=\"or-room-price-lbl\">Desde<\/div>\n <div class=\"or-room-price\">$280K<\/div>\n <div class=\"or-room-price-night\">\/ noche<\/div>\n <\/div>\n <div class=\"or-room-check\">\n <svg fill=\"none\" viewBox=\"0 0 12 12\" stroke=\"currentColor\"><polyline points=\"1.5,6 4.5,9 10.5,3\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-room\" data-room=\"deluxe\" data-name=\"Suite Deluxe Vista Mar\" data-price=\"450000\" data-emoji=\"\ud83c\udf0a\">\n <div class=\"or-room-img\"><div class=\"or-room-img-emoji\">\ud83c\udf0a<\/div><div class=\"or-room-img-overlay\"><\/div><\/div>\n <div class=\"or-room-body\">\n <div class=\"or-room-tag\" style=\"background:rgba(201,164,107,0.2);border-color:rgba(201,164,107,0.45);color:#C9A46B\">Deluxe<\/div>\n <div class=\"or-room-name\">Suite Deluxe Vista Mar<\/div>\n <div class=\"or-room-desc\">Cama king, terraza privada, 48 m\u00b2, ba\u00f1era con vista al mar, minibar premium<\/div>\n <div class=\"or-room-features\">\n <span class=\"or-feat\">\ud83c\udf0a Vista al mar<\/span>\n <span class=\"or-feat\">\ud83d\udec1 Ba\u00f1era<\/span>\n <span class=\"or-feat\">\ud83c\udf77 Minibar<\/span>\n <span class=\"or-feat\">\ud83c\udf05 Terraza<\/span>\n <\/div>\n <\/div>\n <div class=\"or-room-right\">\n <div>\n <div class=\"or-room-price-lbl\">Desde<\/div>\n <div class=\"or-room-price\" style=\"color:#C9A46B\">$450K<\/div>\n <div class=\"or-room-price-night\">\/ noche<\/div>\n <\/div>\n <div class=\"or-room-check\">\n <svg fill=\"none\" viewBox=\"0 0 12 12\" stroke=\"currentColor\"><polyline points=\"1.5,6 4.5,9 10.5,3\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-room\" data-room=\"penthouse\" data-name=\"Penthouse Panor\u00e1mico\" data-price=\"850000\" data-emoji=\"\ud83c\udf07\">\n <div class=\"or-room-img\"><div class=\"or-room-img-emoji\">\ud83c\udf07<\/div><div class=\"or-room-img-overlay\"><\/div><\/div>\n <div class=\"or-room-body\">\n <div class=\"or-room-tag\" style=\"background:rgba(232,140,140,0.15);border-color:rgba(232,140,140,0.4);color:#E88C8C\">Premium<\/div>\n <div class=\"or-room-name\">Penthouse Panor\u00e1mico<\/div>\n <div class=\"or-room-desc\">Dos pisos, jacuzzi privado, 120 m\u00b2, sala de estar, cocina equipada, 360\u00b0 Caribe<\/div>\n <div class=\"or-room-features\">\n <span class=\"or-feat\">\u2668\ufe0f Jacuzzi<\/span>\n <span class=\"or-feat\">\ud83c\udf34 360\u00b0 Caribe<\/span>\n <span class=\"or-feat\">\ud83c\udf73 Cocina<\/span>\n <span class=\"or-feat\">\ud83d\udecb\ufe0f Sala<\/span>\n <\/div>\n <\/div>\n <div class=\"or-room-right\">\n <div>\n <div class=\"or-room-price-lbl\">Desde<\/div>\n <div class=\"or-room-price\" style=\"color:#E88C8C\">$850K<\/div>\n <div class=\"or-room-price-night\">\/ noche<\/div>\n <\/div>\n <div class=\"or-room-check\">\n <svg fill=\"none\" viewBox=\"0 0 12 12\" stroke=\"currentColor\"><polyline points=\"1.5,6 4.5,9 10.5,3\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"or-extras-title\">Servicios y experiencias adicionales<\/div>\n <div class=\"or-extras-wrap\">\n <div class=\"or-extra\" data-extra=\"desayuno\" data-price=\"45000\">\ud83c\udf73 Desayuno incluido <span class=\"or-extra-price\">+$45K\/noche<\/span><\/div>\n <div class=\"or-extra\" data-extra=\"spa\" data-price=\"120000\">\ud83d\udc86 Sesi\u00f3n de spa <span class=\"or-extra-price\">+$120K<\/span><\/div>\n <div class=\"or-extra\" data-extra=\"transfer\" data-price=\"80000\">\ud83d\ude90 Transfer aeropuerto <span class=\"or-extra-price\">+$80K<\/span><\/div>\n <div class=\"or-extra\" data-extra=\"romantico\" data-price=\"150000\">\ud83c\udf39 Paquete rom\u00e1ntico <span class=\"or-extra-price\">+$150K<\/span><\/div>\n <div class=\"or-extra\" data-extra=\"tour\" data-price=\"95000\">\u26f5 Tour en velero <span class=\"or-extra-price\">+$95K\/persona<\/span><\/div>\n <div class=\"or-extra\" data-extra=\"parking\" data-price=\"30000\">\ud83c\udd7f\ufe0f Parqueadero <span class=\"or-extra-price\">+$30K\/noche<\/span><\/div>\n <\/div>\n\n <div class=\"or-nav\">\n <button class=\"or-btn or-btn-ghost\" onclick=\"orGoStep(1)\">\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n Anterior\n <\/button>\n <button class=\"or-btn or-btn-teal\" id=\"orNext2\" onclick=\"orGoStep(3)\" disabled>\n Mis datos\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"or-pane\" id=\"orPane3\">\n <div class=\"or-card\">\n <div class=\"or-card-head\">\n <div class=\"or-card-ico\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-width=\"1.8\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"or-card-title\">Tus datos de contacto<\/div>\n <div class=\"or-card-sub\">Confirmamos tu reserva en menos de 2 horas<\/div>\n <\/div>\n <\/div>\n <div class=\"or-card-body\">\n\n <div class=\"or-form-grid\">\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Nombre *<\/label>\n <input type=\"text\" class=\"or-input\" id=\"orNombre\" placeholder=\"Tu nombre\">\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Apellido *<\/label>\n <input type=\"text\" class=\"or-input\" id=\"orApellido\" placeholder=\"Tu apellido\">\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Correo electr\u00f3nico *<\/label>\n <input type=\"email\" class=\"or-input\" id=\"orEmail\" placeholder=\"tu@correo.com\">\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">WhatsApp \/ Tel\u00e9fono *<\/label>\n <input type=\"tel\" class=\"or-input\" id=\"orTel\" placeholder=\"3XX XXX XXXX\">\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Pa\u00eds de origen<\/label>\n <select class=\"or-select\" id=\"orPais\">\n <option value=\"\">Selecciona tu pa\u00eds<\/option>\n <option value=\"CO\">\ud83c\udde8\ud83c\uddf4 Colombia<\/option>\n <option value=\"VE\">\ud83c\uddfb\ud83c\uddea Venezuela<\/option>\n <option value=\"EC\">\ud83c\uddea\ud83c\udde8 Ecuador<\/option>\n <option value=\"PE\">\ud83c\uddf5\ud83c\uddea Per\u00fa<\/option>\n <option value=\"MX\">\ud83c\uddf2\ud83c\uddfd M\u00e9xico<\/option>\n <option value=\"US\">\ud83c\uddfa\ud83c\uddf8 Estados Unidos<\/option>\n <option value=\"ES\">\ud83c\uddea\ud83c\uddf8 Espa\u00f1a<\/option>\n <option value=\"otro\">\ud83c\udf0e Otro<\/option>\n <\/select>\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Hora de llegada estimada<\/label>\n <select class=\"or-select\" id=\"orLlegada\">\n <option value=\"\">Selecciona una hora<\/option>\n <option>Antes de las 12:00<\/option>\n <option>12:00 \u2013 15:00<\/option>\n <option>15:00 \u2013 18:00<\/option>\n <option>18:00 \u2013 21:00<\/option>\n <option>Despu\u00e9s de las 21:00<\/option>\n <\/select>\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">Tipo de viaje<\/label>\n <select class=\"or-select\" id=\"orTipoViaje\">\n <option value=\"\">\u00bfCu\u00e1l es la ocasi\u00f3n?<\/option>\n <option>Luna de miel \ud83d\udc91<\/option>\n <option>Vacaciones en familia \ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67<\/option>\n <option>Viaje de negocios \ud83d\udcbc<\/option>\n <option>Celebraci\u00f3n especial \ud83e\udd42<\/option>\n <option>Escapada de fin de semana \ud83c\udf34<\/option>\n <option>Otro<\/option>\n <\/select>\n <\/div>\n <div class=\"or-fg\">\n <label class=\"or-lbl\">C\u00f3digo de descuento<\/label>\n <input type=\"text\" class=\"or-input\" id=\"orCodigo\" placeholder=\"ORIZON2025\">\n <\/div>\n <div class=\"or-fg full\">\n <label class=\"or-lbl\">Solicitudes especiales<\/label>\n <textarea class=\"or-textarea\" id=\"orNota\" placeholder=\"Ej: cama extra, habitaci\u00f3n en piso alto, alergias alimentarias, decoraci\u00f3n especial...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"or-cal-lbl\" style=\"margin:1.5rem 0 0.8rem\">Preferencias de habitaci\u00f3n<\/div>\n <div class=\"or-prefs-wrap\">\n <div class=\"or-pref\" data-pref=\"piso-alto\">\ud83c\udfe2 Piso alto<\/div>\n <div class=\"or-pref\" data-pref=\"piso-bajo\">\ud83c\udf3f Piso bajo<\/div>\n <div class=\"or-pref\" data-pref=\"silencioso\">\ud83e\udd2b Zona silenciosa<\/div>\n <div class=\"or-pref\" data-pref=\"accesible\">\u267f Accesible<\/div>\n <div class=\"or-pref\" data-pref=\"camas-separadas\">\ud83d\udecf Camas separadas<\/div>\n <div class=\"or-pref\" data-pref=\"cuna\">\ud83d\udc76 Cuna de beb\u00e9<\/div>\n <div class=\"or-pref\" data-pref=\"sin-alfombra\">\ud83e\uddf9 Sin alfombra<\/div>\n <\/div>\n\n \n <div class=\"or-policy\">\n <div class=\"or-policy-title\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"\/><\/svg>\n Pol\u00edticas de la reserva\n <\/div>\n <div class=\"or-policy-item\">Check-in: 3:00 PM \u00b7 Check-out: 12:00 PM<\/div>\n <div class=\"or-policy-item\">Cancelaci\u00f3n gratuita hasta 48h antes de la llegada<\/div>\n <div class=\"or-policy-item\">No incluye IVA (19%). Se calcula al confirmar.<\/div>\n <div class=\"or-policy-item\">Mascota permitida con notificaci\u00f3n previa (+$50K\/noche)<\/div>\n <\/div>\n\n <div class=\"or-nav\">\n <button class=\"or-btn or-btn-ghost\" onclick=\"orGoStep(2)\">\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n Anterior\n <\/button>\n <button class=\"or-btn or-btn-teal\" onclick=\"orConfirmar()\">\n Confirmar reserva\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"or-pane\" id=\"orPane4\">\n <div class=\"or-card\">\n <div class=\"or-card-body\">\n <div class=\"or-success\">\n <span class=\"or-success-wave\">\ud83c\udf0a<\/span>\n <h3 class=\"or-success-title\">\u00a1Reserva <em>recibida!<\/em><\/h3>\n <p class=\"or-success-text\">\n Tu solicitud lleg\u00f3 exitosamente. Nuestro equipo te contactar\u00e1 por WhatsApp\n en menos de <strong>2 horas<\/strong> para confirmar tu estad\u00eda en ORIZON.\n <\/p>\n <div class=\"or-confirm-box\" id=\"orConfirmBox\"><\/div>\n <div class=\"or-success-actions\">\n <button class=\"or-btn or-btn-ghost\" onclick=\"orReset()\">\n <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M1 4v6h6M23 20v-6h-6\"\/><path d=\"M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15\"\/><\/svg>\n Nueva reserva\n <\/button>\n <button class=\"or-btn or-btn-teal\" id=\"orWABtn\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"15\" height=\"15\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z\"\/><path d=\"M12 0C5.373 0 0 5.373 0 12c0 2.122.553 4.112 1.52 5.845L0 24l6.345-1.484A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.947 0-3.76-.524-5.31-1.435l-.38-.226-3.766.881.918-3.666-.248-.388A9.956 9.956 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z\"\/><\/svg>\n Abrir en WhatsApp\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"or-summary\">\n <div class=\"or-sum-head\">\n <div class=\"or-sum-eye\">Resumen<\/div>\n <div class=\"or-sum-title\">Tu reserva en ORIZON<\/div>\n <\/div>\n <div class=\"or-sum-body\">\n\n <div class=\"or-sum-row\">\n <div class=\"or-sum-ico\">\ud83d\udcc5<\/div>\n <div>\n <div class=\"or-sum-k\">Fechas<\/div>\n <div class=\"or-sum-v\" id=\"rDates\"><span class=\"muted\">Por elegir<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-sum-row\">\n <div class=\"or-sum-ico\">\ud83c\udf19<\/div>\n <div>\n <div class=\"or-sum-k\">Noches<\/div>\n <div class=\"or-sum-v\" id=\"rNights\"><span class=\"muted\">\u2014<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-sum-row\">\n <div class=\"or-sum-ico\">\ud83d\udc65<\/div>\n <div>\n <div class=\"or-sum-k\">Hu\u00e9spedes<\/div>\n <div class=\"or-sum-v accent\" id=\"rGuests\">2 adultos \u00b7 1 hab.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-sum-row\">\n <div class=\"or-sum-ico\">\ud83d\udecf\ufe0f<\/div>\n <div>\n <div class=\"or-sum-k\">Habitaci\u00f3n<\/div>\n <div class=\"or-sum-v\" id=\"rRoom\"><span class=\"muted\">Por elegir<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-sum-row\" id=\"rExtrasRow\" style=\"display:none\">\n <div class=\"or-sum-ico\">\u2728<\/div>\n <div>\n <div class=\"or-sum-k\">Extras<\/div>\n <div class=\"or-sum-v accent\" id=\"rExtras\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"or-sum-div\"><\/div>\n <div class=\"or-sum-total-k\">Estimado total<\/div>\n <div class=\"or-sum-total-v\" id=\"rTotal\">$0<\/div>\n <div class=\"or-sum-currency\">Pesos colombianos \u00b7 IVA no incluido<\/div>\n\n <div class=\"or-guarantee\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"\/><\/svg>\n <span>Mejor tarifa directa garantizada. Cancelaci\u00f3n gratuita 48h antes.<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<script>\n(function(){\n\n const WA = '573108085072'; \/\/ \u2190 tu n\u00famero\n const BOOKING_URL = ''; \/\/ \u2190 URL de tu PMS o pasarela (opcional)\n\n \/\/ \u2500\u2500 ESTADO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const S = {\n step: 1,\n checkin: null, checkout: null, nights: 0,\n adultos: 2, ninos: 0, habs: 1,\n room: null, roomName: '', roomPrice: 0,\n extras: new Set(),\n prefs: new Set(),\n nombre:'', apellido:'', email:'', tel:'',\n pais:'', llegada:'', tipoViaje:'', nota:'', codigo:'',\n calInYear: new Date().getFullYear(), calInMonth: new Date().getMonth(),\n calOutYear: new Date().getFullYear(), calOutMonth: new Date().getMonth(),\n };\n\n const MONTHS = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];\n const DAYS_S = ['D','L','M','M','J','V','S'];\n const DAYS_F = ['domingo','lunes','martes','mi\u00e9rcoles','jueves','viernes','s\u00e1bado'];\n\n function fmt(n){ return '$' + Math.round(n).toLocaleString('es-CO'); }\n function fmtDate(d){ return `${d.getDate()} ${MONTHS[d.getMonth()].slice(0,3)} ${d.getFullYear()}`; }\n function pad(n){ return String(n).padStart(2,'0'); }\n function toDateStr(d){ return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`; }\n\n \/\/ \u2500\u2500 STEPS NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const STEP_LABELS = ['Fechas','Habitaci\u00f3n','Tus datos','Confirmaci\u00f3n'];\n const stepsEl = document.getElementById('orSteps');\n STEP_LABELS.forEach((lbl, i) => {\n const n = i+1;\n if(i>0){ const ln = document.createElement('div'); ln.className='or-step-line'; ln.id='orLine'+i; stepsEl.appendChild(ln); }\n const el = document.createElement('div');\n el.className = 'or-step' + (n===1?' active':'');\n el.id = 'orSt'+n;\n el.dataset.step = n;\n el.innerHTML = `<div class=\"or-step-num\" id=\"orSN${n}\">${n}<\/div><span class=\"or-step-lbl\">${lbl}<\/span>`;\n stepsEl.appendChild(el);\n });\n\n function updateSteps(){\n STEP_LABELS.forEach((_,i) => {\n const n=i+1, el=document.getElementById('orSt'+n), sn=document.getElementById('orSN'+n);\n el.className='or-step';\n if(n<S.step){\n el.classList.add('done');\n sn.innerHTML='<svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"#2ECFA0\" stroke-width=\"2.5\" stroke-linecap=\"round\" viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>';\n el.onclick = ()=>orGoStep(n);\n } else if(n===S.step){\n el.classList.add('active'); sn.textContent=n;\n } else {\n sn.textContent=n;\n }\n if(i>0){\n const ln=document.getElementById('orLine'+i);\n ln.className='or-step-line'+(i<S.step?' done':'');\n }\n });\n }\n\n window.orGoStep = function(n){\n document.getElementById('orPane'+S.step).classList.remove('active');\n S.step=n;\n document.getElementById('orPane'+n).classList.add('active');\n updateSteps();\n updateSummary();\n document.getElementById('reservas').scrollIntoView({behavior:'smooth',block:'start'});\n };\n\n \/\/ \u2500\u2500 CALENDARIO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function buildCal(containerId, yearKey, monthKey, selectFn){\n const el = document.getElementById(containerId);\n const yr = S[yearKey], mo = S[monthKey];\n const today = new Date(); today.setHours(0,0,0,0);\n const firstDay = new Date(yr, mo, 1).getDay();\n const daysInMo = new Date(yr, mo+1, 0).getDate();\n\n let html = `<div class=\"or-cal-nav\">\n <button class=\"or-cal-btn\" id=\"${containerId}Prev\">←<\/button>\n <div class=\"or-cal-month\">${MONTHS[mo]} ${yr}<\/div>\n <button class=\"or-cal-btn\" id=\"${containerId}Next\">→<\/button>\n <\/div><div class=\"or-cal-grid\">`;\n\n DAYS_S.forEach(d => { html += `<div class=\"or-cal-dow\">${d}<\/div>`; });\n for(let i=0;i<firstDay;i++) html += `<div class=\"or-cal-day or-empty\"><\/div>`;\n\n for(let d=1;d<=daysInMo;d++){\n const date = new Date(yr,mo,d);\n const dStr = toDateStr(date);\n const isPast = date < today;\n const isToday = dStr === toDateStr(today);\n const isCkin = S.checkin && dStr === toDateStr(S.checkin);\n const isCkout = S.checkout && dStr === toDateStr(S.checkout);\n const inRange = S.checkin && S.checkout && date > S.checkin && date < S.checkout;\n\n let cls = 'or-cal-day';\n if(isPast) cls += ' or-disabled';\n if(isToday) cls += ' or-today';\n if(isCkin||isCkout) cls += ' or-selected';\n if(inRange) { cls += ' or-in-range'; if(isCkin) cls+=' or-range-start'; if(isCkout) cls+=' or-range-end'; }\n\n html += `<div class=\"${cls}\" data-date=\"${dStr}\">${d}<\/div>`;\n }\n html += '<\/div>';\n el.innerHTML = html;\n\n \/\/ Prev\/Next buttons\n const prevBtn = el.querySelector(`#${containerId}Prev`);\n const nextBtn = el.querySelector(`#${containerId}Next`);\n const nowY=today.getFullYear(), nowM=today.getMonth();\n if(yr===nowY && mo===nowM) prevBtn.disabled=true;\n\n prevBtn.addEventListener('click', ()=>{\n if(S[monthKey]===0){ S[monthKey]=11; S[yearKey]--; } else S[monthKey]--;\n buildCal(containerId,yearKey,monthKey,selectFn);\n });\n nextBtn.addEventListener('click', ()=>{\n if(S[monthKey]===11){ S[monthKey]=0; S[yearKey]++; } else S[monthKey]++;\n buildCal(containerId,yearKey,monthKey,selectFn);\n });\n\n \/\/ Day clicks\n el.querySelectorAll('.or-cal-day:not(.or-disabled):not(.or-empty)').forEach(day => {\n day.addEventListener('click', () => {\n const d = new Date(day.dataset.date+'T12:00:00');\n selectFn(d);\n });\n });\n }\n\n function rebuildCals(){\n buildCal('orCalIn','calInYear','calInMonth', d => {\n S.checkin = d;\n if(S.checkout && S.checkout <= d){ S.checkout=null; }\n calcNights();\n rebuildCals();\n checkStep1();\n });\n buildCal('orCalOut','calOutYear','calOutMonth', d => {\n if(S.checkin && d <= S.checkin){ alert('La fecha de salida debe ser posterior al check-in.'); return; }\n S.checkout = d;\n calcNights();\n rebuildCals();\n checkStep1();\n });\n }\n\n function calcNights(){\n if(S.checkin && S.checkout){\n S.nights = Math.round((S.checkout - S.checkin)\/(1000*60*60*24));\n const badge = document.getElementById('orNightsBadge');\n badge.classList.remove('hidden');\n document.getElementById('orNightsNum').textContent = S.nights;\n document.getElementById('orNightsText').textContent = S.nights===1?'noche seleccionada':'noches seleccionadas';\n } else {\n S.nights=0;\n document.getElementById('orNightsBadge').classList.add('hidden');\n }\n updateSummary();\n }\n\n \/\/ \u2500\u2500 HU\u00c9SPEDES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function makeCounter(minusId, plusId, valId, key, min=1, max=10, onChange){\n const minus = document.getElementById(minusId);\n const plus = document.getElementById(plusId);\n const val = document.getElementById(valId);\n function update(){\n val.textContent = S[key];\n minus.disabled = S[key]<=min;\n plus.disabled = S[key]>=max;\n if(onChange) onChange();\n updateSummary();\n }\n minus.addEventListener('click',()=>{ if(S[key]>min){ S[key]--; update(); }});\n plus.addEventListener('click', ()=>{ if(S[key]<max){ S[key]++; update(); }});\n update();\n }\n\n makeCounter('orAdultosMinus','orAdultosPlus','orAdultosVal','adultos',1,8);\n makeCounter('orNinosMinus','orNinosPlus','orNinosVal','ninos',0,6);\n makeCounter('orHabMinus','orHabPlus','orHabVal','habs',1,5);\n\n function checkStep1(){\n document.getElementById('orNext1').disabled = !(S.checkin && S.checkout && S.nights>0);\n updateSummary();\n }\n\n \/\/ \u2500\u2500 HABITACIONES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n document.querySelectorAll('.or-room').forEach(el => {\n el.addEventListener('click',()=>{\n document.querySelectorAll('.or-room').forEach(r=>r.classList.remove('selected'));\n el.classList.add('selected');\n S.room = el.dataset.room;\n S.roomName = el.dataset.name;\n S.roomPrice = parseInt(el.dataset.price);\n document.getElementById('orNext2').disabled=false;\n updateSummary();\n });\n });\n\n \/\/ EXTRAS\n document.querySelectorAll('.or-extra').forEach(el => {\n el.addEventListener('click',()=>{\n const k=el.dataset.extra;\n if(S.extras.has(k)){ S.extras.delete(k); el.classList.remove('selected'); }\n else { S.extras.add(k); el.classList.add('selected'); }\n updateSummary();\n });\n });\n\n \/\/ PREFERENCIAS\n document.querySelectorAll('.or-pref').forEach(el => {\n el.addEventListener('click',()=>{\n const k=el.dataset.pref;\n if(S.prefs.has(k)){ S.prefs.delete(k); el.classList.remove('selected'); }\n else { S.prefs.add(k); el.classList.add('selected'); }\n });\n });\n\n \/\/ \u2500\u2500 CONFIRMAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n window.orConfirmar = function(){\n S.nombre = document.getElementById('orNombre').value.trim();\n S.apellido = document.getElementById('orApellido').value.trim();\n S.email = document.getElementById('orEmail').value.trim();\n S.tel = document.getElementById('orTel').value.trim();\n S.pais = document.getElementById('orPais').value;\n S.llegada = document.getElementById('orLlegada').value;\n S.tipoViaje = document.getElementById('orTipoViaje').value;\n S.nota = document.getElementById('orNota').value.trim();\n S.codigo = document.getElementById('orCodigo').value.trim();\n\n if(!S.nombre||!S.apellido){ alert('Por favor ingresa tu nombre y apellido.'); return; }\n if(!S.email){ alert('Por favor ingresa tu correo electr\u00f3nico.'); return; }\n if(!S.tel){ alert('Por favor ingresa tu n\u00famero de WhatsApp.'); return; }\n\n const { extraNames, totalExtras, total } = calcTotal();\n\n \/\/ Construir resumen visual\n const box = document.getElementById('orConfirmBox');\n const extrasLine = extraNames.length ? extraNames.join(', ') : '\u2014';\n const prefsLine = S.prefs.size ? [...S.prefs].map(p=>p.replace(\/-\/g,' ')).join(', ') : '\u2014';\n box.innerHTML = `\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Hu\u00e9sped<\/span><span class=\"or-confirm-val\">${S.nombre} ${S.apellido}<\/span><\/div>\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Habitaci\u00f3n<\/span><span class=\"or-confirm-val\">${S.roomName}<\/span><\/div>\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Check-in<\/span><span class=\"or-confirm-val\">${fmtDate(S.checkin)}<\/span><\/div>\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Check-out<\/span><span class=\"or-confirm-val\">${fmtDate(S.checkout)}<\/span><\/div>\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Noches<\/span><span class=\"or-confirm-val\">${S.nights}<\/span><\/div>\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Hu\u00e9spedes<\/span><span class=\"or-confirm-val\">${S.adultos} adultos \u00b7 ${S.ninos} ni\u00f1os \u00b7 ${S.habs} hab.<\/span><\/div>\n ${extraNames.length?`<div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Extras<\/span><span class=\"or-confirm-val\">${extrasLine}<\/span><\/div>`:''}\n <div class=\"or-confirm-row\"><span class=\"or-confirm-key\">Total estimado<\/span><span class=\"or-confirm-val accent\">${fmt(total)}<\/span><\/div>\n `;\n\n \/\/ Mensaje WhatsApp\n let msg = `\u00a1Hola ORIZON! Soy *${S.nombre} ${S.apellido}* y quiero reservar.\\n\\n`;\n msg += `\ud83c\udfe8 *Habitaci\u00f3n:* ${S.roomName}\\n`;\n msg += `\ud83d\udcc5 *Check-in:* ${fmtDate(S.checkin)}\\n`;\n msg += `\ud83d\udcc5 *Check-out:* ${fmtDate(S.checkout)}\\n`;\n msg += `\ud83c\udf19 *Noches:* ${S.nights}\\n`;\n msg += `\ud83d\udc65 *Hu\u00e9spedes:* ${S.adultos} adultos, ${S.ninos} ni\u00f1os, ${S.habs} hab.\\n`;\n if(extraNames.length) msg += `\u2728 *Extras:* ${extrasLine}\\n`;\n if(prefsLine!=='\u2014') msg += `\ud83d\udcac *Preferencias:* ${prefsLine}\\n`;\n msg += `\ud83d\udcb0 *Total estimado:* ${fmt(total)}\\n\\n`;\n msg += `\ud83d\udce7 ${S.email} \u00b7 \ud83d\udcde ${S.tel}`;\n if(S.llegada) msg += `\\n\ud83d\udd50 Llegada estimada: ${S.llegada}`;\n if(S.tipoViaje) msg += `\\n\ud83c\udf34 Tipo de viaje: ${S.tipoViaje}`;\n if(S.nota) msg += `\\n\ud83d\udcdd Solicitud: ${S.nota}`;\n if(S.codigo) msg += `\\n\ud83c\udff7\ufe0f C\u00f3digo: ${S.codigo}`;\n\n document.getElementById('orWABtn').onclick = ()=>{\n window.open('https:\/\/wa.me\/'+WA+'?text='+encodeURIComponent(msg),'_blank');\n };\n\n if(BOOKING_URL){\n fetch(BOOKING_URL,{method:'POST',headers:{'Content-Type':'application\/json'},\n body:JSON.stringify({nombre:S.nombre+' '+S.apellido,email:S.email,tel:S.tel,\n checkin:toDateStr(S.checkin),checkout:toDateStr(S.checkout),noches:S.nights,\n adultos:S.adultos,ninos:S.ninos,habs:S.habs,habitacion:S.roomName,\n precio:S.roomPrice,extras:extrasLine,total,nota:S.nota})\n }).catch(e=>console.warn(e));\n }\n\n orGoStep(4);\n };\n\n \/\/ \u2500\u2500 CALCULAR TOTAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function calcTotal(){\n const extraNames=[]; let totalExtras=0;\n const extraPrices = {desayuno:45000,spa:120000,transfer:80000,romantico:150000,tour:95000,parking:30000};\n const extraLabels = {desayuno:'Desayuno',spa:'Spa',transfer:'Transfer aeropuerto',romantico:'Paq. rom\u00e1ntico',tour:'Tour velero',parking:'Parqueadero'};\n S.extras.forEach(k => {\n const p = extraPrices[k]||0;\n totalExtras += p; extraNames.push(extraLabels[k]||k);\n });\n const roomTotal = S.roomPrice * S.nights * S.habs;\n const total = roomTotal + totalExtras;\n return { extraNames, totalExtras, total };\n }\n\n \/\/ \u2500\u2500 RESUMEN STICKY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function updateSummary(){\n const { extraNames, total } = calcTotal();\n\n \/\/ Fechas\n const datesEl = document.getElementById('rDates');\n if(S.checkin && S.checkout) datesEl.innerHTML = `${fmtDate(S.checkin)} <span style=\"color:var(--text-dim)\">\u2192<\/span> ${fmtDate(S.checkout)}`;\n else datesEl.innerHTML = '<span class=\"muted\">Por elegir<\/span>';\n\n \/\/ Noches\n document.getElementById('rNights').innerHTML = S.nights ? `<span class=\"accent\">${S.nights} noche${S.nights!==1?'s':''}<\/span>` : '<span class=\"muted\">\u2014<\/span>';\n\n \/\/ Hu\u00e9spedes\n document.getElementById('rGuests').textContent = `${S.adultos} adulto${S.adultos!==1?'s':''} \u00b7 ${S.ninos} ni\u00f1o${S.ninos!==1?'s':''} \u00b7 ${S.habs} hab.`;\n\n \/\/ Habitaci\u00f3n\n const roomEl = document.getElementById('rRoom');\n if(S.roomName) roomEl.innerHTML=`<span class=\"accent\">${S.roomName}<\/span>`;\n else roomEl.innerHTML='<span class=\"muted\">Por elegir<\/span>';\n\n \/\/ Extras\n const extrasRow = document.getElementById('rExtrasRow');\n if(extraNames.length){\n extrasRow.style.display='flex';\n document.getElementById('rExtras').textContent = extraNames.join(' \u00b7 ');\n } else extrasRow.style.display='none';\n\n \/\/ Total\n document.getElementById('rTotal').textContent = fmt(total);\n }\n\n \/\/ \u2500\u2500 RESET \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n window.orReset = function(){\n S.step=1; S.checkin=null; S.checkout=null; S.nights=0;\n S.adultos=2; S.ninos=0; S.habs=1;\n S.room=null; S.roomName=''; S.roomPrice=0;\n S.extras.clear(); S.prefs.clear();\n S.calInYear=new Date().getFullYear(); S.calInMonth=new Date().getMonth();\n S.calOutYear=new Date().getFullYear(); S.calOutMonth=new Date().getMonth();\n document.querySelectorAll('.or-room').forEach(r=>r.classList.remove('selected'));\n document.querySelectorAll('.or-extra').forEach(e=>e.classList.remove('selected'));\n document.querySelectorAll('.or-pref').forEach(p=>p.classList.remove('selected'));\n ['orNombre','orApellido','orEmail','orTel','orNota','orCodigo'].forEach(id=>{\n const el=document.getElementById(id); if(el) el.value='';\n });\n ['orPais','orLlegada','orTipoViaje'].forEach(id=>{\n const el=document.getElementById(id); if(el) el.value='';\n });\n document.getElementById('orNext1').disabled=true;\n document.getElementById('orNext2').disabled=true;\n document.getElementById('orNightsBadge').classList.add('hidden');\n document.querySelectorAll('.or-pane').forEach(p=>p.classList.remove('active'));\n document.getElementById('orPane1').classList.add('active');\n updateSteps();\n rebuildCals();\n updateSummary();\n document.getElementById('reservas').scrollIntoView({behavior:'smooth',block:'start'});\n };\n\n \/\/ \u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n updateSteps();\n rebuildCals();\n updateSummary();\n\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a86dd1c e-con-full e-flex e-con e-parent\" data-id=\"a86dd1c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f38d11c elementor-widget elementor-widget-html\" data-id=\"f38d11c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Grid Habitaciones y Espacios<\/title>\n <style>\n \/* Bloque independiente: .orizon-grid-espacios *\/\n .orizon-grid-espacios {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-grid-espacios .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-grid-espacios .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-grid-espacios .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n \/* Grid 3 columnas para desktop *\/\n .orizon-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n }\n \/* Card glass *\/\n .orizon-card {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n overflow: hidden;\n border: 1px solid rgba(255,255,255,0.3);\n transition: all 0.3s ease;\n box-shadow: 0 8px 20px rgba(0,0,0,0.1);\n }\n .orizon-card:hover {\n border-color: #2ECFA0;\n transform: translateY(-5px);\n box-shadow: 0 15px 35px rgba(46,207,160,0.2);\n }\n .orizon-card img {\n width: 100%;\n height: 220px;\n object-fit: cover;\n display: block;\n }\n .orizon-card .contenido {\n padding: 1.5rem;\n }\n .orizon-card .contenido h3 {\n font-size: 1.3rem;\n color: #0F2028;\n margin-bottom: 0.5rem;\n }\n .orizon-card .contenido p {\n color: #0F2028;\n font-size: 0.9rem;\n line-height: 1.4;\n margin-bottom: 1rem;\n }\n .orizon-card .contenido a {\n display: inline-block;\n background: rgba(46,207,160,0.2);\n border: 1px solid #2ECFA0;\n padding: 0.5rem 1.2rem;\n border-radius: 40px;\n color: #0F2028;\n text-decoration: none;\n font-weight: 600;\n transition: 0.3s;\n }\n .orizon-card .contenido a:hover {\n background: #2ECFA0;\n color: white;\n }\n \/* Responsive: tablet 2 columnas, m\u00f3vil 1 columna *\/\n @media (max-width: 768px) {\n .orizon-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n .orizon-grid-espacios {\n padding: 1rem;\n margin: 1rem;\n }\n .orizon-card img {\n height: 180px;\n }\n }\n @media (max-width: 480px) {\n .orizon-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-grid-espacios\">\n <div class=\"titulo\">\n <h2>Habitaciones y Espacios<\/h2>\n <p>Lujo caribe\u00f1o en cada rinc\u00f3n de ORIZON<\/p>\n <\/div>\n <div class=\"orizon-grid\">\n \n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/HABITACION-STANDARD-DELUXE-scaled.png\" alt=\"Habitaci\u00f3n Standard Deluxe\">\n <div class=\"contenido\">\n <h3>Habitaci\u00f3n Standard Deluxe<\/h3>\n <p>Dise\u00f1o contempor\u00e1neo con vistas al jard\u00edn. Ba\u00f1o de m\u00e1rmol y amenities de lujo.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/PISCINA-INFINITY-scaled.png\" alt=\"Piscina Infinity\">\n <div class=\"contenido\">\n <h3>Piscina Infinity<\/h3>\n <p>Borde infinito con vista al mar Caribe. Camastros y servicio de bar incluido.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/LOBBY-PRINCIPAL-scaled.png\" alt=\"Lobby Principal\">\n <div class=\"contenido\">\n <h3>Lobby Principal<\/h3>\n <p>Espacios abiertos con acabados en m\u00e1rmol y vidrio. Recepci\u00f3n 24\/7.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/PENTHOUSE-PRESIDENCIAL-scaled.png\" alt=\"Penthouse Presidencial\">\n <div class=\"contenido\">\n <h3>Penthouse Presidencial<\/h3>\n <p>Suite de lujo con terraza privada, jacuzzi y vistas panor\u00e1micas al mar.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/SUITE-EJECUTIVA-scaled.png\" alt=\"Suite Ejecutiva\">\n <div class=\"contenido\">\n <h3>Suite Ejecutiva<\/h3>\n <p>Espaciosa \u00e1rea de trabajo y estar. Ideal para viajes de negocios.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n <div class=\"orizon-card\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/BAR-DEL-HOTEL-scaled.png\" alt=\"Bar del Hotel\">\n <div class=\"contenido\">\n <h3>Bar del Hotel<\/h3>\n <p>C\u00f3cteles de autor con ingredientes locales. Terraza con vistas al oc\u00e9ano.<\/p>\n <a href=\"#\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n \n <\/div>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-96e4558 e-con-full e-flex e-con e-parent\" data-id=\"96e4558\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc54074 elementor-widget elementor-widget-html\" data-id=\"cc54074\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Experiencias del Hotel<\/title>\n <style>\n \/* Bloque independiente .orizon-experiencias-sinimg *\/\n .orizon-experiencias-sinimg {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-experiencias-sinimg .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-experiencias-sinimg .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-experiencias-sinimg .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n \/* Grid *\/\n .experiencias-sinimg-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n }\n \/* Card glass sin imagen *\/\n .experiencia-card-sinimg {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n border: 1px solid rgba(255,255,255,0.3);\n transition: all 0.3s ease;\n box-shadow: 0 8px 20px rgba(0,0,0,0.1);\n text-align: center;\n padding: 2rem 1.5rem;\n }\n .experiencia-card-sinimg:hover {\n border-color: #2ECFA0;\n transform: translateY(-5px);\n box-shadow: 0 15px 35px rgba(46,207,160,0.2);\n }\n \/* Icono grande (emoji o tipograf\u00eda) *\/\n .experiencia-icono {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n }\n .experiencia-card-sinimg .contenido h3 {\n font-size: 1.4rem;\n color: #0F2028;\n margin-bottom: 0.5rem;\n }\n .experiencia-card-sinimg .contenido p {\n color: #0F2028;\n font-size: 0.9rem;\n line-height: 1.4;\n margin-bottom: 1rem;\n }\n .btn-exp-sinimg {\n display: inline-block;\n background: rgba(46,207,160,0.2);\n border: 1px solid #2ECFA0;\n padding: 0.5rem 1.2rem;\n border-radius: 40px;\n color: #0F2028;\n text-decoration: none;\n font-weight: 600;\n transition: 0.3s;\n }\n .btn-exp-sinimg:hover {\n background: #2ECFA0;\n color: white;\n }\n @media (max-width: 768px) {\n .orizon-experiencias-sinimg {\n padding: 1rem;\n margin: 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-experiencias-sinimg\">\n <div class=\"titulo\">\n <h2>Experiencias \u00danicas<\/h2>\n <p>Vive el lujo caribe\u00f1o m\u00e1s all\u00e1 del alojamiento<\/p>\n <\/div>\n <div class=\"experiencias-sinimg-grid\">\n \n <div class=\"experiencia-card-sinimg\">\n <div class=\"experiencia-icono\">\u26f5<\/div>\n <div class=\"contenido\">\n <h3>Atardecer en Velero<\/h3>\n <p>Navega por el Caribe al atardecer con champ\u00e1n y m\u00fasica en vivo. Cupos limitados.<\/p>\n <a href=\"#\" class=\"btn-exp-sinimg\">Agendar \u2192<\/a>\n <\/div>\n <\/div>\n \n <div class=\"experiencia-card-sinimg\">\n <div class=\"experiencia-icono\">\ud83e\uddd8<\/div>\n <div class=\"contenido\">\n <h3>Yoga al Amanecer<\/h3>\n <p>Sesi\u00f3n de yoga en plataforma flotante con vista al mar. Instructores certificados.<\/p>\n <a href=\"#\" class=\"btn-exp-sinimg\">Agendar \u2192<\/a>\n <\/div>\n <\/div>\n \n <div class=\"experiencia-card-sinimg\">\n <div class=\"experiencia-icono\">\ud83e\udd43<\/div>\n <div class=\"contenido\">\n <h3>Cata de Ron Premium<\/h3>\n <p>Degusta los mejores rones del Caribe, maridados con chocolate local.<\/p>\n <a href=\"#\" class=\"btn-exp-sinimg\">Agendar \u2192<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2358fd0 e-con-full e-flex e-con e-parent\" data-id=\"2358fd0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc79ff8 elementor-widget elementor-widget-html\" data-id=\"fc79ff8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Gastronom\u00eda<\/title>\n <style>\n \/* Bloque independiente .orizon-gastronomia-sinimg *\/\n .orizon-gastronomia-sinimg {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-gastronomia-sinimg .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-gastronomia-sinimg .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-gastronomia-sinimg .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n .gastronomia-grid-sinimg {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n }\n .gastro-card-sinimg {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n border: 1px solid rgba(255,255,255,0.3);\n transition: all 0.3s ease;\n box-shadow: 0 8px 20px rgba(0,0,0,0.1);\n text-align: center;\n padding: 2rem 1.5rem;\n }\n .gastro-card-sinimg:hover {\n border-color: #2ECFA0;\n transform: translateY(-5px);\n box-shadow: 0 15px 35px rgba(46,207,160,0.2);\n }\n .gastro-icono {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n }\n .gastro-card-sinimg .contenido h3 {\n font-size: 1.4rem;\n color: #0F2028;\n margin-bottom: 0.5rem;\n }\n .gastro-card-sinimg .contenido p {\n color: #0F2028;\n font-size: 0.9rem;\n line-height: 1.4;\n margin-bottom: 1rem;\n }\n .btn-gastro-sinimg {\n display: inline-block;\n background: rgba(46,207,160,0.2);\n border: 1px solid #2ECFA0;\n padding: 0.5rem 1.2rem;\n border-radius: 40px;\n color: #0F2028;\n text-decoration: none;\n font-weight: 600;\n transition: 0.3s;\n }\n .btn-gastro-sinimg:hover {\n background: #2ECFA0;\n color: white;\n }\n @media (max-width: 768px) {\n .orizon-gastronomia-sinimg {\n padding: 1rem;\n margin: 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-gastronomia-sinimg\">\n <div class=\"titulo\">\n <h2>Gastronom\u00eda de Altura<\/h2>\n <p>Sabores del Caribe con fusi\u00f3n internacional<\/p>\n <\/div>\n <div class=\"gastronomia-grid-sinimg\">\n \n <div class=\"gastro-card-sinimg\">\n <div class=\"gastro-icono\">\ud83c\udf7d\ufe0f<\/div>\n <div class=\"contenido\">\n <h3>Restaurante Mare<\/h3>\n <p>Mariscos frescos y especialidades caribe\u00f1as en un ambiente frente al mar. Chef ejecutivo galardonado.<\/p>\n <a href=\"#\" class=\"btn-gastro-sinimg\">Ver men\u00fa \u2192<\/a>\n <\/div>\n <\/div>\n \n <div class=\"gastro-card-sinimg\">\n <div class=\"gastro-icono\">\ud83c\udf78<\/div>\n <div class=\"contenido\">\n <h3>SkyBar Glass<\/h3>\n <p>C\u00f3cteles de autor con vista panor\u00e1mica. Mixolog\u00eda molecular y atardeceres inolvidables.<\/p>\n <a href=\"#\" class=\"btn-gastro-sinimg\">Ver carta \u2192<\/a>\n <\/div>\n <\/div>\n \n <div class=\"gastro-card-sinimg\">\n <div class=\"gastro-icono\">\ud83c\udf34<\/div>\n <div class=\"contenido\">\n <h3>Terraza Caribe<\/h3>\n <p>Comida t\u00edpica coste\u00f1a, arepas de huevo, patacones y pescado frito. Ambiente relajado.<\/p>\n <a href=\"#\" class=\"btn-gastro-sinimg\">Explorar \u2192<\/a>\n <\/div>\n <\/div>\n \n <div class=\"gastro-card-sinimg\">\n <div class=\"gastro-icono\">\ud83d\udc1f<\/div>\n <div class=\"contenido\">\n <h3>Ostra Negra<\/h3>\n <p>Raw bar, ostiones, langosta y ceviches. Producto del d\u00eda directamente de la pesca local.<\/p>\n <a href=\"#\" class=\"btn-gastro-sinimg\">Reservar \u2192<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-74f79ba e-con-full e-flex e-con e-parent\" data-id=\"74f79ba\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-918e2a4 elementor-widget elementor-widget-html\" data-id=\"918e2a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Ubicaci\u00f3n y Mapa<\/title>\n <style>\n \/* Bloque independiente .orizon-ubicacion *\/\n .orizon-ubicacion {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-ubicacion .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-ubicacion .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-ubicacion .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n .ubicacion-contenedor {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n align-items: center;\n }\n \/* Informaci\u00f3n de direcci\u00f3n (glass card) *\/\n .ubicacion-info {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n padding: 1.8rem;\n border: 1px solid rgba(255,255,255,0.3);\n transition: 0.3s;\n }\n .ubicacion-info:hover {\n border-color: #2ECFA0;\n transform: translateY(-4px);\n }\n .ubicacion-info h3 {\n font-size: 1.6rem;\n color: #0F2028;\n margin-bottom: 1rem;\n }\n .ubicacion-info .direccion {\n font-size: 1.1rem;\n color: #0F2028;\n margin: 1.2rem 0;\n display: flex;\n align-items: center;\n gap: 0.8rem;\n }\n .ubicacion-info .detalle {\n margin: 1rem 0;\n color: #0F2028;\n line-height: 1.5;\n }\n .btn-mapa {\n display: inline-block;\n background: rgba(46,207,160,0.2);\n border: 1px solid #2ECFA0;\n padding: 0.7rem 1.5rem;\n border-radius: 40px;\n color: #0F2028;\n text-decoration: none;\n font-weight: 600;\n transition: 0.3s;\n margin-top: 1rem;\n }\n .btn-mapa:hover {\n background: #2ECFA0;\n color: white;\n }\n \/* Mapa (iframe responsivo) *\/\n .mapa-container {\n border-radius: 28px;\n overflow: hidden;\n box-shadow: 0 8px 20px rgba(0,0,0,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n height: 300px;\n }\n .mapa-container iframe {\n width: 100%;\n height: 100%;\n border: 0;\n display: block;\n }\n \/* Responsive *\/\n @media (max-width: 768px) {\n .orizon-ubicacion {\n padding: 1rem;\n margin: 1rem;\n }\n .ubicacion-contenedor {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n .mapa-container {\n height: 250px;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-ubicacion\">\n <div class=\"titulo\">\n <h2>Ubicaci\u00f3n Privilegiada<\/h2>\n <p>En el coraz\u00f3n del Caribe colombiano<\/p>\n <\/div>\n <div class=\"ubicacion-contenedor\">\n <div class=\"ubicacion-info\">\n <h3>\ud83d\udccd ORIZON Santa Marta<\/h3>\n <div class=\"direccion\">\n <span>\ud83c\udfe8<\/span>\n <strong>Carrera 1 # 11-23, El Rodadero<\/strong>\n <\/div>\n <div class=\"detalle\">\n Frente a la playa, a 5 minutos del centro hist\u00f3rico y rodeado de naturaleza exuberante.<br>\n Cerca al Aeropuerto Sim\u00f3n Bol\u00edvar (15 min en auto).\n <\/div>\n <a href=\"#\" class=\"btn-mapa\" id=\"btnComoLlegar\">C\u00f3mo llegar \u2192<\/a>\n <\/div>\n <div class=\"mapa-container\">\n \n <iframe \n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3917.34496062585!2d-74.212514!3d11.240221!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8ef4f5d2b8b0b8b1%3A0x8b8b8b8b8b8b8b8b!2zRWwgUm9kYWRlcm8sIFNhbnRhIE1hcnRh!5e0!3m2!1ses!2sco!4v1746890000000!5m2!1ses!2sco\" \n allowfullscreen=\"\" \n loading=\"lazy\" \n referrerpolicy=\"no-referrer-when-downgrade\">\n <\/iframe>\n <\/div>\n <\/div>\n<\/div>\n<script>\n \/\/ Simulaci\u00f3n de alerta para el bot\u00f3n \"C\u00f3mo llegar\" (no afecta otros bloques)\n const btn = document.getElementById('btnComoLlegar');\n if (btn) {\n btn.addEventListener('click', function(e) {\n e.preventDefault();\n alert('\ud83d\udccd ORIZON Santa Marta\\nCarrera 1 # 11-23, El Rodadero\\n\u00a1Te esperamos frente al mar Caribe!');\n });\n }\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ca77c4b e-con-full e-flex e-con e-parent\" data-id=\"ca77c4b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b4bfe0 elementor-widget elementor-widget-html\" data-id=\"0b4bfe0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Testimonios<\/title>\n <style>\n \/* Bloque independiente .orizon-testimonios *\/\n .orizon-testimonios {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-testimonios .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-testimonios .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-testimonios .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n \/* Carrusel *\/\n .testimonios-carrusel {\n position: relative;\n overflow: hidden;\n border-radius: 32px;\n }\n .testimonios-slides {\n display: flex;\n transition: transform 0.5s ease-in-out;\n }\n .testimonio-slide {\n flex: 0 0 100%;\n box-sizing: border-box;\n padding: 1rem;\n }\n .testimonio-card {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n padding: 2rem;\n text-align: center;\n border: 1px solid rgba(255,255,255,0.3);\n transition: 0.3s;\n box-shadow: 0 8px 20px rgba(0,0,0,0.1);\n }\n .testimonio-card:hover {\n border-color: #2ECFA0;\n transform: translateY(-5px);\n }\n .testimonio-avatar {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n object-fit: cover;\n margin-bottom: 1rem;\n border: 2px solid #2ECFA0;\n }\n .testimonio-card .nombre {\n font-size: 1.2rem;\n font-weight: 700;\n color: #0F2028;\n margin: 0.5rem 0 0.2rem;\n }\n .testimonio-card .ubicacion {\n font-size: 0.8rem;\n color: #0F2028;\n opacity: 0.8;\n margin-bottom: 1rem;\n }\n .testimonio-card .estrellas {\n color: #2ECFA0;\n font-size: 1.2rem;\n letter-spacing: 3px;\n margin: 0.5rem 0;\n }\n .testimonio-card .comentario {\n font-style: italic;\n color: #0F2028;\n font-size: 0.95rem;\n line-height: 1.5;\n }\n \/* Botones nav *\/\n .testi-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255,255,255,0.6);\n backdrop-filter: blur(4px);\n border: none;\n font-size: 2rem;\n cursor: pointer;\n padding: 0.4rem 1rem;\n border-radius: 50px;\n color: #0F2028;\n transition: 0.2s;\n z-index: 10;\n }\n .testi-btn:hover {\n background: #2ECFA0;\n color: white;\n }\n .testi-prev {\n left: 10px;\n }\n .testi-next {\n right: 10px;\n }\n \/* Dots *\/\n .testi-dots {\n text-align: center;\n margin-top: 1.5rem;\n }\n .testi-dot {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin: 0 5px;\n background-color: rgba(15,32,40,0.4);\n border-radius: 50%;\n cursor: pointer;\n transition: 0.2s;\n }\n .testi-dot.active {\n background-color: #2ECFA0;\n width: 24px;\n border-radius: 10px;\n }\n @media (max-width: 768px) {\n .orizon-testimonios {\n padding: 1rem;\n margin: 1rem;\n }\n .testimonio-card {\n padding: 1.5rem;\n }\n .testi-btn {\n font-size: 1.5rem;\n padding: 0.2rem 0.8rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-testimonios\">\n <div class=\"titulo\">\n <h2>Lo que dicen nuestros hu\u00e9spedes<\/h2>\n <p>Experiencias reales en ORIZON Santa Marta<\/p>\n <\/div>\n <div class=\"testimonios-carrusel\">\n <button class=\"testi-btn testi-prev\" id=\"testiPrev\">\u276e<\/button>\n <div class=\"testimonios-slides\" id=\"testiSlides\">\n \n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/68.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"Incre\u00edble experiencia, el servicio es de otro nivel. La piscina infinity y el atardecer son inolvidables. Volver\u00e9 sin duda.\"<\/div>\n <div class=\"nombre\">Mar\u00eda Gonz\u00e1lez<\/div>\n <div class=\"ubicacion\">Bogot\u00e1, Colombia<\/div>\n <\/div>\n <\/div>\n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/32.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"El mejor hotel frente al mar en Santa Marta. La suite ejecutiva es perfecta para trabajar y relajarse. Atenci\u00f3n 10\/10.\"<\/div>\n <div class=\"nombre\">Carlos M\u00e9ndez<\/div>\n <div class=\"ubicacion\">Medell\u00edn, Colombia<\/div>\n <\/div>\n <\/div>\n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/45.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"El rooftop lounge es espectacular. La cata de ron y la atenci\u00f3n del personal hicieron nuestra luna de miel perfecta.\"<\/div>\n <div class=\"nombre\">Laura Fern\u00e1ndez<\/div>\n <div class=\"ubicacion\">CDMX, M\u00e9xico<\/div>\n <\/div>\n <\/div>\n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/75.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"Desde el check-in hasta el check-out todo fue impecable. El desayuno en la Terraza Caribe es delicioso. Muy recomendado.\"<\/div>\n <div class=\"nombre\">Andr\u00e9s Rivas<\/div>\n <div class=\"ubicacion\">Panam\u00e1, Panam\u00e1<\/div>\n <\/div>\n <\/div>\n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/22.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"Vistas incre\u00edbles, habitaciones c\u00f3modas y el personal muy atento. El SkyBar es el mejor lugar para ver el atardecer.\"<\/div>\n <div class=\"nombre\">Sof\u00eda Ram\u00edrez<\/div>\n <div class=\"ubicacion\">Lima, Per\u00fa<\/div>\n <\/div>\n <\/div>\n <div class=\"testimonio-slide\">\n <div class=\"testimonio-card\">\n <img decoding=\"async\" class=\"testimonio-avatar\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/91.jpg\" alt=\"Avatar\">\n <div class=\"estrellas\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <div class=\"comentario\">\"Un para\u00edso escondido. La playa privada, la comida y las experiencias de velero son \u00fanicas. Volver\u00e9 cada a\u00f1o.\"<\/div>\n <div class=\"nombre\">Juan Pablo Torres<\/div>\n <div class=\"ubicacion\">Santiago, Chile<\/div>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"testi-btn testi-next\" id=\"testiNext\">\u276f<\/button>\n <\/div>\n <div class=\"testi-dots\" id=\"testiDots\"><\/div>\n<\/div>\n\n<script>\n (function() {\n const slidesContainer = document.getElementById('testiSlides');\n const slides = Array.from(document.querySelectorAll('.testimonio-slide'));\n const prevBtn = document.getElementById('testiPrev');\n const nextBtn = document.getElementById('testiNext');\n const dotsContainer = document.getElementById('testiDots');\n let currentIndex = 0;\n const totalSlides = slides.length;\n let autoInterval;\n\n function createDots() {\n dotsContainer.innerHTML = '';\n for (let i = 0; i < totalSlides; i++) {\n const dot = document.createElement('span');\n dot.classList.add('testi-dot');\n dot.dataset.index = i;\n dot.addEventListener('click', () => goToSlide(i));\n dotsContainer.appendChild(dot);\n }\n updateDots();\n }\n\n function updateDots() {\n const dots = document.querySelectorAll('.testi-dot');\n dots.forEach((dot, idx) => {\n if (idx === currentIndex) dot.classList.add('active');\n else dot.classList.remove('active');\n });\n }\n\n function goToSlide(index) {\n if (index < 0) index = totalSlides - 1;\n if (index >= totalSlides) index = 0;\n currentIndex = index;\n slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;\n updateDots();\n resetAutoPlay();\n }\n\n function nextSlide() {\n goToSlide(currentIndex + 1);\n }\n\n function prevSlide() {\n goToSlide(currentIndex - 1);\n }\n\n function startAutoPlay() {\n autoInterval = setInterval(() => {\n nextSlide();\n }, 5000); \/\/ Cambia cada 5 segundos\n }\n\n function stopAutoPlay() {\n if (autoInterval) clearInterval(autoInterval);\n }\n\n function resetAutoPlay() {\n stopAutoPlay();\n startAutoPlay();\n }\n\n \/\/ Eventos manuales\n nextBtn.addEventListener('click', nextSlide);\n prevBtn.addEventListener('click', prevSlide);\n\n \/\/ Pausar autoplay al hacer hover en el carrusel\n const carousel = document.querySelector('.testimonios-carrusel');\n carousel.addEventListener('mouseenter', stopAutoPlay);\n carousel.addEventListener('mouseleave', startAutoPlay);\n\n \/\/ Inicializar\n createDots();\n goToSlide(0);\n startAutoPlay();\n })();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-68b3650 e-con-full e-flex e-con e-parent\" data-id=\"68b3650\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8158fa elementor-widget elementor-widget-html\" data-id=\"b8158fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Estad\u00edsticas del Hotel<\/title>\n <style>\n \/* Bloque independiente .orizon-estadisticas *\/\n .orizon-estadisticas {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-estadisticas .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-estadisticas .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-estadisticas .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n .estadisticas-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2rem;\n text-align: center;\n }\n .estadistica-item {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n padding: 1.8rem 1rem;\n border: 1px solid rgba(255,255,255,0.3);\n transition: all 0.3s ease;\n }\n .estadistica-item:hover {\n border-color: #2ECFA0;\n transform: translateY(-5px);\n box-shadow: 0 15px 35px rgba(46,207,160,0.2);\n }\n .estadistica-numero {\n font-size: 3rem;\n font-weight: 800;\n color: #2ECFA0;\n line-height: 1.2;\n margin-bottom: 0.5rem;\n }\n .estadistica-label {\n font-size: 1rem;\n font-weight: 600;\n color: #0F2028;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 0.5rem;\n }\n .estadistica-desc {\n font-size: 0.85rem;\n color: #0F2028;\n opacity: 0.8;\n }\n \/* Responsive *\/\n @media (max-width: 768px) {\n .orizon-estadisticas {\n padding: 1rem;\n margin: 1rem;\n }\n .estadisticas-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n .estadistica-numero {\n font-size: 2.2rem;\n }\n }\n @media (max-width: 480px) {\n .estadisticas-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-estadisticas\">\n <div class=\"titulo\">\n <h2>ORIZON en n\u00fameros<\/h2>\n <p>Excelencia respaldada por experiencias reales<\/p>\n <\/div>\n <div class=\"estadisticas-grid\">\n <div class=\"estadistica-item\">\n <div class=\"estadistica-numero\">152<\/div>\n <div class=\"estadistica-label\">Habitaciones<\/div>\n <div class=\"estadistica-desc\">Suite Presidencial, Deluxe y vistas al mar<\/div>\n <\/div>\n <div class=\"estadistica-item\">\n <div class=\"estadistica-numero\">3<\/div>\n <div class=\"estadistica-label\">Restaurantes<\/div>\n <div class=\"estadistica-desc\">Gastronom\u00eda caribe\u00f1a e internacional<\/div>\n <\/div>\n <div class=\"estadistica-item\">\n <div class=\"estadistica-numero\">2.500+<\/div>\n <div class=\"estadistica-label\">Hu\u00e9spedes felices<\/div>\n <div class=\"estadistica-desc\">Calificaci\u00f3n promedio 4.9 \u2605<\/div>\n <\/div>\n <div class=\"estadistica-item\">\n <div class=\"estadistica-numero\">8<\/div>\n <div class=\"estadistica-label\">Piscinas<\/div>\n <div class=\"estadistica-desc\">Infinity, climatizadas y familiar<\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-659a95c e-con-full e-flex e-con e-parent\" data-id=\"659a95c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-abc292d elementor-widget elementor-widget-html\" data-id=\"abc292d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Contacto<\/title>\n <style>\n \/* Bloque independiente .orizon-contacto *\/\n .orizon-contacto {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 1400px;\n margin: 2rem auto;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(10px);\n border-radius: 48px;\n padding: 2rem;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: 0 25px 45px rgba(0,0,0,0.1);\n }\n .orizon-contacto .titulo {\n text-align: center;\n margin-bottom: 2rem;\n }\n .orizon-contacto .titulo h2 {\n font-size: 2.2rem;\n color: #0F2028;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n .orizon-contacto .titulo p {\n color: #0F2028;\n font-size: 1rem;\n opacity: 0.9;\n }\n .contacto-contenedor {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n }\n \/* Informaci\u00f3n de contacto (lado izquierdo) *\/\n .contacto-info {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n padding: 1.8rem;\n border: 1px solid rgba(255,255,255,0.3);\n transition: 0.3s;\n }\n .contacto-info:hover {\n border-color: #2ECFA0;\n transform: translateY(-4px);\n }\n .contacto-info h3 {\n font-size: 1.5rem;\n color: #0F2028;\n margin-bottom: 1rem;\n }\n .info-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n margin: 1.2rem 0;\n color: #0F2028;\n }\n .info-icono {\n font-size: 1.5rem;\n min-width: 40px;\n }\n .info-texto {\n font-size: 1rem;\n line-height: 1.4;\n }\n .redes-sociales {\n display: flex;\n gap: 1rem;\n margin-top: 2rem;\n }\n .red-social {\n background: rgba(46,207,160,0.2);\n border: 1px solid #2ECFA0;\n border-radius: 50px;\n padding: 0.5rem 1rem;\n text-decoration: none;\n color: #0F2028;\n font-weight: 600;\n transition: 0.3s;\n }\n .red-social:hover {\n background: #2ECFA0;\n color: white;\n }\n \/* Formulario (lado derecho) *\/\n .contacto-formulario {\n background: rgba(255,255,255,0.2);\n backdrop-filter: blur(12px);\n border-radius: 28px;\n padding: 1.8rem;\n border: 1px solid rgba(255,255,255,0.3);\n transition: 0.3s;\n }\n .contacto-formulario:hover {\n border-color: #2ECFA0;\n }\n .form-group {\n margin-bottom: 1.2rem;\n }\n .form-group label {\n display: block;\n font-weight: 600;\n color: #0F2028;\n margin-bottom: 0.4rem;\n font-size: 0.9rem;\n }\n .form-group input,\n .form-group textarea {\n width: 100%;\n padding: 0.8rem 1rem;\n border-radius: 40px;\n border: 1px solid rgba(15,32,40,0.3);\n background: rgba(255,255,255,0.5);\n font-family: inherit;\n font-size: 0.9rem;\n transition: 0.2s;\n }\n .form-group input:focus,\n .form-group textarea:focus {\n outline: none;\n border-color: #2ECFA0;\n background: rgba(255,255,255,0.8);\n }\n .form-group textarea {\n border-radius: 24px;\n resize: vertical;\n min-height: 100px;\n }\n .btn-enviar {\n background: rgba(46,207,160,0.25);\n border: 1px solid #2ECFA0;\n padding: 0.8rem 2rem;\n border-radius: 40px;\n font-weight: 700;\n color: #0F2028;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 1rem;\n width: 100%;\n }\n .btn-enviar:hover {\n background: #2ECFA0;\n color: white;\n box-shadow: 0 8px 20px rgba(46,207,160,0.3);\n transform: translateY(-2px);\n }\n \/* Responsive *\/\n @media (max-width: 768px) {\n .orizon-contacto {\n padding: 1rem;\n margin: 1rem;\n }\n .contacto-contenedor {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"orizon-contacto\">\n <div class=\"titulo\">\n <h2>Contacto<\/h2>\n <p>\u00bfListo para vivir la experiencia ORIZON? Escr\u00edbenos<\/p>\n <\/div>\n <div class=\"contacto-contenedor\">\n \n <div class=\"contacto-info\">\n <h3>\ud83d\udcde Hablemos<\/h3>\n <div class=\"info-item\">\n <div class=\"info-icono\">\ud83d\udccd<\/div>\n <div class=\"info-texto\">Carrera 1 # 11-23, El Rodadero<br>Santa Marta, Colombia<\/div>\n <\/div>\n <div class=\"info-item\">\n <div class=\"info-icono\">\ud83d\udce7<\/div>\n <div class=\"info-texto\">reservas@orizonhotel.com<\/div>\n <\/div>\n <div class=\"info-item\">\n <div class=\"info-icono\">\ud83d\udcde<\/div>\n <div class=\"info-texto\">+57 (605) 123 4567<br>WhatsApp: +57 310 123 4567<\/div>\n <\/div>\n <div class=\"info-item\">\n <div class=\"info-icono\">\u23f0<\/div>\n <div class=\"info-texto\">Atenci\u00f3n 24\/7 \u2013 Lobby y recepci\u00f3n<\/div>\n <\/div>\n <div class=\"redes-sociales\">\n <a href=\"#\" class=\"red-social\">Instagram<\/a>\n <a href=\"#\" class=\"red-social\">Facebook<\/a>\n <a href=\"#\" class=\"red-social\">LinkedIn<\/a>\n <\/div>\n <\/div>\n \n <div class=\"contacto-formulario\">\n <form id=\"contactForm\">\n <div class=\"form-group\">\n <label>Nombre completo<\/label>\n <input type=\"text\" id=\"nombreContacto\" placeholder=\"Ej: Mar\u00eda P\u00e9rez\" required>\n <\/div>\n <div class=\"form-group\">\n <label>Correo electr\u00f3nico<\/label>\n <input type=\"email\" id=\"emailContacto\" placeholder=\"maria@ejemplo.com\" required>\n <\/div>\n <div class=\"form-group\">\n <label>Mensaje<\/label>\n <textarea id=\"mensajeContacto\" placeholder=\"Cu\u00e9ntanos tu consulta o solicitud...\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn-enviar\" id=\"btnEnviarContacto\">Enviar consulta<\/button>\n <\/form>\n <\/div>\n <\/div>\n<\/div>\n<script>\n \/\/ Simulaci\u00f3n de env\u00edo (sin backend real)\n const form = document.getElementById('contactForm');\n if (form) {\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n const nombre = document.getElementById('nombreContacto').value.trim();\n const email = document.getElementById('emailContacto').value.trim();\n const mensaje = document.getElementById('mensajeContacto').value.trim();\n if (!nombre || !email) {\n alert('\u274c Por favor completa al menos el nombre y correo.');\n return;\n }\n \/\/ Simular \u00e9xito\n alert(`\u2705 \u00a1Gracias ${nombre}! Tu mensaje ha sido enviado a ORIZON. Te responderemos en menos de 24 horas.`);\n form.reset();\n });\n }\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b667eb1 e-con-full e-flex e-con e-parent\" data-id=\"b667eb1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65aa097 elementor-widget elementor-widget-html\" data-id=\"65aa097\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ORIZON - Footer Premium<\/title>\n <style>\n \/* Bloque independiente .orizon-footer-blanco *\/\n .orizon-footer-blanco {\n font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;\n max-width: 100%;\n margin: 2rem auto 0 auto;\n background: #FFFFFF;\n border-top: 2px solid rgba(46, 207, 160, 0.3);\n border-radius: 32px 32px 0 0;\n padding: 2rem 2rem 1rem 2rem;\n box-shadow: 0 -8px 32px rgba(0,0,0,0.05);\n }\n .footer-contenedor {\n max-width: 1400px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 2rem;\n }\n .footer-col .logo-footer img {\n height: 60px;\n width: auto;\n margin-bottom: 1rem;\n }\n .footer-col .descripcion {\n color: #0F2028;\n font-size: 0.9rem;\n line-height: 1.5;\n margin-top: 0.5rem;\n }\n .footer-col h4 {\n color: #0F2028;\n font-size: 1.2rem;\n font-weight: 700;\n margin-bottom: 1rem;\n border-left: 3px solid #2ECFA0;\n padding-left: 0.8rem;\n }\n .footer-col ul {\n list-style: none;\n padding: 0;\n }\n .footer-col ul li {\n margin-bottom: 0.6rem;\n }\n .footer-col ul li a {\n text-decoration: none;\n color: #0F2028;\n transition: 0.2s;\n font-size: 0.9rem;\n }\n .footer-col ul li a:hover {\n color: #2ECFA0;\n padding-left: 5px;\n }\n .contacto-item {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n margin-bottom: 0.8rem;\n font-size: 0.9rem;\n color: #0F2028;\n }\n .redes-footer {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n }\n .redes-footer a {\n background: rgba(46,207,160,0.1);\n border: 1px solid #2ECFA0;\n border-radius: 40px;\n padding: 0.4rem 1rem;\n text-decoration: none;\n color: #0F2028;\n font-weight: 500;\n font-size: 0.8rem;\n transition: 0.3s;\n }\n .redes-footer a:hover {\n background: #2ECFA0;\n color: white;\n }\n .footer-copyright {\n text-align: center;\n margin-top: 2rem;\n padding-top: 1.5rem;\n border-top: 1px solid rgba(15,32,40,0.1);\n font-size: 0.8rem;\n color: #0F2028;\n line-height: 1.5;\n }\n @media (max-width: 768px) {\n .orizon-footer-blanco {\n padding: 1.5rem;\n }\n .footer-contenedor {\n gap: 1.5rem;\n }\n .footer-col .logo-footer img {\n height: 50px;\n }\n }\n <\/style>\n<\/head>\n<body>\n<footer class=\"orizon-footer-blanco\">\n <div class=\"footer-contenedor\">\n <div class=\"footer-col\">\n <div class=\"logo-footer\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-content\/uploads\/sites\/10\/2026\/05\/Logo-Hotel-scaled.png\" alt=\"ORIZON Santa Marta\">\n <\/div>\n <div class=\"descripcion\">\n Lujo flotante sobre el Caribe. Vidrio, brisa y exclusividad frente al mar. Una experiencia \u00fanica en Santa Marta.\n <\/div>\n <\/div>\n <div class=\"footer-col\">\n <h4>Explora<\/h4>\n <ul>\n <li><a href=\"#\">Inicio<\/a><\/li>\n <li><a href=\"#\">Habitaciones<\/a><\/li>\n <li><a href=\"#\">Reservas<\/a><\/li>\n <li><a href=\"#\">Experiencias<\/a><\/li>\n <li><a href=\"#\">Gastronom\u00eda<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-col\">\n <h4>Legal<\/h4>\n <ul>\n <li><a href=\"#\">T\u00e9rminos y condiciones<\/a><\/li>\n <li><a href=\"#\">Pol\u00edtica de privacidad<\/a><\/li>\n <li><a href=\"#\">Cancelaciones<\/a><\/li>\n <li><a href=\"#\">Trabaja con nosotros<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-col\">\n <h4>Contacto<\/h4>\n <div class=\"contacto-item\">\ud83d\udccd Carrera 1 # 11-23, El Rodadero<\/div>\n <div class=\"contacto-item\">\ud83d\udcde +57 (605) 123 4567<\/div>\n <div class=\"contacto-item\">\u2709\ufe0f reservas@orizonhotel.com<\/div>\n <div class=\"redes-footer\">\n <a href=\"#\">IG<\/a>\n <a href=\"#\">FB<\/a>\n <a href=\"#\">X<\/a>\n <a href=\"#\">LI<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"footer-copyright\">\n \u00a9 2026 ORIZON Santa Marta \u2013 Hotel Premium. Todos los derechos reservados.<br>\n Este sitio fue dise\u00f1ado por dise\u00f1oweb.com y funciona gracias a SNTECHNOLOGY SAS.\n <\/div>\n<\/footer>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-caeae0a e-con-full e-flex e-con e-parent\" data-id=\"caeae0a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-326a651 elementor-widget elementor-widget-html\" data-id=\"326a651\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>WhatsApp Oficial<\/title>\n <style>\n \/* Bloque independiente - solo el \u00edcono oficial *\/\n .whatsapp-float {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 9999;\n }\n .whatsapp-float a {\n display: block;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background-color: #25D366;\n box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n transition: transform 0.2s ease;\n }\n .whatsapp-float a:hover {\n transform: scale(1.05);\n }\n .whatsapp-float svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n @media (max-width: 480px) {\n .whatsapp-float a {\n width: 48px;\n height: 48px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"whatsapp-float\">\n <a href=\"https:\/\/wa.me\/573001234567?text=Hola%2C%20vengo%20del%20sitio%20web%20ORIZON%2C%20me%20gustar%C3%ADa%20hacer%20una%20reserva\" target=\"_blank\" rel=\"noopener noreferrer\">\n \n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path fill=\"#FFFFFF\" d=\"M12 2C6.48 2 2 6.48 2 12c0 1.93.55 3.71 1.5 5.24L2.5 21.5l4.26-1.01C8.29 21.45 10.09 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm3.85 15.15c-1.05.55-2.24.85-3.46.85-3.67 0-6.66-2.99-6.66-6.66 0-1.22.3-2.41.85-3.46.55-1.05 1.34-1.94 2.32-2.58.98-.64 2.07-1.01 3.2-1.08.16-.01.31.02.46.07.15.05.28.13.39.24.11.11.19.24.24.39.05.15.07.3.06.46-.04.35-.15.69-.33 1-.18.31-.41.57-.68.78-.18.15-.32.34-.42.56-.1.22-.15.45-.15.68 0 .23.05.46.15.67.1.21.24.4.42.56.18.15.4.26.63.33.23.07.47.09.7.06.23-.03.45-.11.65-.23.13-.08.25-.19.35-.32.12-.15.26-.28.4-.39.14-.11.3-.19.46-.24.16-.05.33-.07.49-.05.33.03.65.13.94.29.29.16.54.38.74.63.2.25.35.54.44.85.09.31.12.63.09.95-.03.32-.11.63-.24.92-.14.29-.32.54-.55.75-.23.21-.49.37-.77.48z\"\/>\n <\/svg>\n <\/a>\n <\/div>\n<\/body>\n<\/html>\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>ORIZON Navbar – Hamburguesa Lateral + Anclas Inicio Habitaciones Reservas Experiencias Contacto Reservar ahora Inicio Habitaciones Reservas Experiencias Contacto Reservar […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":52,"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/pages\/7\/revisions\/81"}],"wp:attachment":[{"href":"https:\/\/www.sntechnology.com.co\/orizonhotel\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}