{"id":491,"date":"2025-10-19T18:41:43","date_gmt":"2025-10-19T18:41:43","guid":{"rendered":"https:\/\/losmuelles.com\/wordpress\/?page_id=491"},"modified":"2025-11-26T10:53:07","modified_gmt":"2025-11-26T10:53:07","slug":"habitaciones","status":"publish","type":"page","link":"https:\/\/losmuelles.com\/pt\/habitaciones\/","title":{"rendered":"Quartos"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Hotel Los Muelles - Detalle de Habitaci\u00f3n<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <!-- Fuentes Poppins (para t\u00edtulos\/negritas) y Lato (para cuerpo de texto) -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&family=Lato:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Configuraci\u00f3n de fuentes y colores personalizados (Naranja Opaco) *\/\r\n :root {\r\n --color-primary: #E67E22; \/* Naranja Opaco (Terracota\/Muted Pumpkin) *\/\r\n --color-accent: #f5b041; \/* Naranja m\u00e1s claro para hover *\/\r\n }\r\n body {\r\n font-family: 'Lato', sans-serif; \/* Fuente principal del cuerpo *\/\r\n background-color: #f7f7f7;\r\n }\r\n h1, h2, h3, button, .header-logo {\r\n font-family: 'Poppins', sans-serif; \/* Fuente para t\u00edtulos y elementos destacados *\/\r\n }\r\n .bg-primary { background-color: var(--color-primary); }\r\n .text-primary { color: var(--color-primary); }\r\n .btn-primary {\r\n background-color: var(--color-primary);\r\n transition: all 0.2s;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n }\r\n .btn-primary:hover {\r\n background-color: var(--color-accent);\r\n box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);\r\n }\r\n .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background-color: rgba(255, 255, 255, 0.5);\r\n transition: background-color 0.3s;\r\n }\r\n .dot.active {\r\n background-color: white;\r\n border: 2px solid var(--color-primary);\r\n }\r\n .room-number-btn {\r\n white-space: nowrap;\r\n transition: all 0.2s;\r\n border: 2px solid transparent;\r\n }\r\n .room-number-btn.active {\r\n background-color: white;\r\n color: var(--color-primary);\r\n border-color: var(--color-primary);\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n }\r\n .shadow-custom {\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n }\r\n \/* Ocultar barra de scroll en el selector de habitaciones *\/\r\n .no-scrollbar::-webkit-scrollbar {\r\n display: none;\r\n }\r\n .no-scrollbar {\r\n -ms-overflow-style: none; \/* IE and Edge *\/\r\n scrollbar-width: none; \/* Firefox *\/\r\n }\r\n \/* Configuraci\u00f3n de Aspect Ratio para el contenedor de im\u00e1genes (4:5) *\/\r\n .aspect-4-5 {\r\n aspect-ratio: 4 \/ 5;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen pb-20\">\r\n\r\n <!-- Header Fijo (Minimalista\/Transparente) -->\r\n <header class=\"sticky top-0 z-50 flex items-center justify-between w-full p-4 text-primary bg-transparent\">\r\n <!-- \u00cdcono de Men\u00fa (Hamburguesa) - Fondo m\u00e1s ancho (p-3) -->\r\n <button class=\"text-2xl hover:text-gray-100 focus:outline-none text-white bg-primary p-3 rounded-full shadow-md\">\r\n ☰\r\n <\/button>\r\n\r\n <!-- Bot\u00f3n de Reservar - Con bordes curvos de 35px (rounded-[35px]) -->\r\n <button onclick=\"showMessage('Redirigiendo a la p\u00e1gina de reservas...')\" class=\"px-5 py-2 text-sm font-bold tracking-wider text-white uppercase border-2 border-primary bg-primary rounded-[35px] hover:bg-white hover:text-primary transition duration-300 shadow-md\">\r\n Reservar\r\n <\/button>\r\n <\/header>\r\n\r\n <main class=\"container p-4 mx-auto sm:max-w-xl\">\r\n \r\n <!-- T\u00edtulo Principal (Muestra el Tipo\/Nombre de la Habitaci\u00f3n) -->\r\n <h1 id=\"room-title-full\" class=\"mt-4 mb-1 text-3xl font-extrabold text-center text-primary sm:text-4xl\">\r\n <!-- Se cargar\u00e1 din\u00e1micamente -->\r\n <\/h1>\r\n <!-- N\u00famero de Habitaci\u00f3n (Como subt\u00edtulo) -->\r\n <p id=\"room-number\" class=\"text-center mb-6 text-gray-500 font-medium text-lg\">Quarto: 101<\/p>\r\n\r\n <!-- Room Selector Slider (N\u00fameros de habitaciones proporcionados) -->\r\n <div class=\"mb-8 overflow-x-scroll no-scrollbar\">\r\n <div id=\"room-selector\" class=\"flex space-x-3 pb-2 px-2\">\r\n <!-- Los botones se generar\u00e1n con JS -->\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Secci\u00f3n de Imagen Slider Principal - CONTENEDOR CON ASPECT RATIO 4:5 -->\r\n <div class=\"overflow-hidden bg-white rounded-2xl shadow-custom\">\r\n <!-- Usamos aspect-[4\/5] para forzar la dimensi\u00f3n 4:5 (W:H) -->\r\n <div id=\"image-carousel\" class=\"relative w-full aspect-[4\/5]\">\r\n <!-- Imagen principal (se ajusta al 100% del contenedor 4:5) -->\r\n <img decoding=\"async\" id=\"room-img\" class=\"object-cover w-full h-full\" src=\"https:\/\/i.imgur.com\/j7jSPzl.jpeg\" alt=\"Imagen de la Habitaci\u00f3n 101\">\r\n\r\n <!-- Botones de Navegaci\u00f3n de Imagen (Slider) -->\r\n <button id=\"prev-btn\" class=\"absolute top-1\/2 left-4 transform -translate-y-1\/2 p-3 bg-black bg-opacity-40 text-white rounded-full hover:bg-opacity-60 transition duration-200\">\r\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"><\/path><\/svg>\r\n <\/button>\r\n <button id=\"next-btn\" class=\"absolute top-1\/2 right-4 transform -translate-y-1\/2 p-3 bg-black bg-opacity-40 text-white rounded-full hover:bg-opacity-60 transition duration-200\">\r\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"><\/path><\/svg>\r\n <\/button>\r\n\r\n <!-- Indicadores de Carrusel (Puntos) -->\r\n <div id=\"carousel-dots\" class=\"absolute inset-x-0 bottom-3 flex justify-center space-x-2\">\r\n <!-- Los puntos se generar\u00e1n con JS -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Bot\u00f3n de Reservar Grande - Superior -->\r\n <button onclick=\"showMessage('Redirigiendo a la p\u00e1gina de reservas...')\" class=\"flex items-center justify-center w-full px-6 py-3 mt-6 space-x-2 text-lg font-bold text-white uppercase rounded-xl btn-primary shadow-custom\">\r\n <span>Reservar Ahora<\/span>\r\n <!-- Icono de flecha -->\r\n <svg class=\"w-5 h-5 ml-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg>\r\n <\/button>\r\n\r\n\r\n <!-- Descripci\u00f3n de la Habitaci\u00f3n -->\r\n <div class=\"p-4 mt-6 bg-white rounded-xl shadow-md\">\r\n <!-- T\u00edtulo del Tipo de Habitaci\u00f3n (ej. Habitaci\u00f3n Superior) -->\r\n <h2 id=\"room-title-short\" class=\"mb-3 text-xl font-bold text-primary\">\r\n <!-- Se cargar\u00e1 din\u00e1micamente -->\r\n <\/h2>\r\n <p id=\"room-description\" class=\"mt-3 text-gray-700 leading-relaxed\">\r\n <!-- La descripci\u00f3n se cargar\u00e1 aqu\u00ed -->\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Listado de Amenidades -->\r\n <div class=\"p-4 mt-6 bg-white rounded-xl shadow-md\">\r\n <h2 class=\"mb-4 text-xl font-bold text-primary\">Comodidades em destaque<\/h2>\r\n <div id=\"amenities-list\" class=\"grid grid-cols-2 gap-4 text-gray-700\">\r\n <!-- Las comodidades se cargar\u00e1n aqu\u00ed -->\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <\/main>\r\n \r\n <!-- Footer Fijo de Reservar -->\r\n <div class=\"fixed inset-x-0 bottom-0 z-40 flex items-center justify-between p-4 bg-white border-t border-gray-200\">\r\n <button onclick=\"showMessage('Redirigiendo a la p\u00e1gina de reservas...')\" class=\"flex items-center justify-center w-full py-3 text-lg font-bold text-white uppercase rounded-xl btn-primary shadow-lg\">\r\n <span>RESERVAR<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Mensaje Modal (Reemplaza a alert()) -->\r\n <div id=\"message-modal\" class=\"fixed inset-0 z-[100] hidden items-center justify-center bg-black bg-opacity-50\">\r\n <div class=\"p-6 bg-white rounded-xl shadow-2xl max-w-sm w-11\/12 text-center\">\r\n <p id=\"modal-text\" class=\"text-lg font-semibold text-gray-800 mb-4\"><\/p>\r\n <button onclick=\"document.getElementById('message-modal').classList.add('hidden');\" class=\"px-4 py-2 text-white rounded-lg btn-primary hover:bg-accent\">\r\n Entendido\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <script>\r\n \/\/ Funci\u00f3n para mostrar el modal de mensaje (en lugar de alert())\r\n function showMessage(text) {\r\n document.getElementById('modal-text').textContent = text;\r\n document.getElementById('message-modal').classList.remove('hidden');\r\n document.getElementById('message-modal').classList.add('flex');\r\n }\r\n\r\n \/\/ --- Definici\u00f3n de Datos de Habitaciones ---\r\n\r\n const roomDetails = {\r\n 101: {\r\n \/\/ T\u00edtulo completo para el H1\r\n fullTitle: \"Habitaci\u00f3n Superior con balc\u00f3n y vista al r\u00edo\",\r\n \/\/ T\u00edtulo conciso para el H2\r\n shortTitle: \"Habitaci\u00f3n Superior\", \r\n description: \"Un ambiente luminoso y confortable, pensado para quienes buscan despertar con una de las mejores postales de Carmelo. Equipada con cama King Size, combina calidez y dise\u00f1o. Sus pisos originales de mosaicos de \u00e9poca le dan un car\u00e1cter \u00fanico, mientras que el balc\u00f3n privado con vista al r\u00edo invita a disfrutar de un momento de calma al aire libre, ya sea al comenzar el d\u00eda o contemplando el atardecer.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Cama King Size\", \"Balc\u00f3n privado con vista al r\u00edo\"],\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/j7jSPzl.jpeg\",\r\n \"https:\/\/i.imgur.com\/zmgv0IA.jpeg\",\r\n \"https:\/\/i.imgur.com\/BBqarOV.jpeg\",\r\n \"https:\/\/i.imgur.com\/tui4Kcm.jpeg\"\r\n ]\r\n },\r\n 102: {\r\n fullTitle: \"Habitaci\u00f3n Superior con vista al r\u00edo\",\r\n shortTitle: \"Habitaci\u00f3n Superior\",\r\n description: \"Cl\u00e1sica y acogedora, equipada con cama King Size. Los pisos de \u00e9poca y el balc\u00f3n franc\u00e9s aportan car\u00e1cter. Al pie de la cama, un div\u00e1n invita a contemplar la calma del r\u00edo.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Escritorio\", \"Div\u00e1n\", \"Cama King Size\"],\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/AggKyLD.jpeg\",\r\n \"https:\/\/i.imgur.com\/Wg7k8tD.jpeg\",\r\n \"https:\/\/i.imgur.com\/7BtpG3s.jpeg\",\r\n \"https:\/\/i.imgur.com\/FobVoc5.jpeg\"\r\n ]\r\n },\r\n 103: {\r\n fullTitle: \"Habitaci\u00f3n Est\u00e1ndar\",\r\n shortTitle: \"Habitaci\u00f3n Est\u00e1ndar\",\r\n description: \"Amplia y confortable. Cama King Size y cama individual, m\u00e1s escritorio para quienes necesitan trabajar. Toques de color y detalles \u00fanicos crean un ambiente ideal para descansar despu\u00e9s de recorrer Carmelo.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Escritorio\", \"Cama King Size + Cama Individual\"],\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/G6aXXy0.jpeg\",\r\n \"https:\/\/i.imgur.com\/OuNkUJD.jpeg\",\r\n \"https:\/\/i.imgur.com\/KIAqK7J.jpeg\",\r\n \"https:\/\/i.imgur.com\/BTgC8w9.jpeg\"\r\n ]\r\n },\r\n 104: {\r\n fullTitle: \"Habitaci\u00f3n Est\u00e1ndar con hidromasaje y vista al patio\",\r\n shortTitle: \"Habitaci\u00f3n Est\u00e1ndar\",\r\n description: \"Un espacio \u00edntimo y acogedor, ideal para quienes buscan relajarse en un entorno tranquilo. Equipada con cama King Size, combina dise\u00f1o y detalles que invitan al descanso. Sus pisos originales de mosaicos de \u00e9poca y el escritorio suman car\u00e1cter y funcionalidad al ambiente. Desde su vista al patio se puede disfrutar de la calma del hotel, mientras que el ba\u00f1o con hidromasaje brinda un plus de confort para completar la experiencia.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Hidromasaje\", \"Escritorio\", \"Cama King Size + Cama Individual\", \"Vista al patio\"],\r\n \/\/ NUEVAS IM\u00c1GENES A\u00d1ADIDAS\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/UDjRGQQ.jpeg\",\r\n \"https:\/\/i.imgur.com\/7oiBrTS.jpeg\",\r\n \"https:\/\/i.imgur.com\/7aYVcji.jpeg\",\r\n \"https:\/\/i.imgur.com\/RjT9EW9.jpeg\"\r\n ]\r\n },\r\n 105: {\r\n fullTitle: \"Habitaci\u00f3n Est\u00e1ndar con hidromasaje\",\r\n shortTitle: \"Habitaci\u00f3n Est\u00e1ndar\",\r\n description: \"Pensada para combinar comodidad y relax. Cama King Size + cama individual y ba\u00f1o con hidromasaje para cerrar el d\u00eda con bienestar. Balc\u00f3n franc\u00e9s hacia el patio con esculturas y Santa Rita en flor.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Hidromasaje\", \"Balc\u00f3n franc\u00e9s con vista al patio\", \"Escritorio\", \"Cama King Size + Cama Individual\"],\r\n \/\/ NUEVAS IM\u00c1GENES A\u00d1ADIDAS\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/DIVW5HR.jpeg\",\r\n \"https:\/\/i.imgur.com\/Up2Yn0u.jpeg\",\r\n \"https:\/\/i.imgur.com\/xRBAWy4.jpeg\"\r\n ]\r\n },\r\n 201: {\r\n fullTitle: \"Habitaci\u00f3n Superior con balc\u00f3n y vista al r\u00edo\",\r\n shortTitle: \"Habitaci\u00f3n Superior\",\r\n description: \"Un espacio acogedor y pr\u00e1ctico, pensado para quienes buscan comodidad en su estad\u00eda en Carmelo. Equipada con una cama King Size, combina calidez y funcionalidad en cada detalle. El gran atractivo es su balc\u00f3n privado con vista al r\u00edo y a la calle adoquinada, un rinc\u00f3n perfecto para disfrutar de la tranquilidad del entorno desde un lugar \u00fanico.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Cama King Size\", \"Balc\u00f3n privado con vista al r\u00edo\"],\r\n \/\/ NUEVAS IM\u00c1GENES A\u00d1ADIDAS\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/EClMNqV.jpeg\",\r\n \"https:\/\/i.imgur.com\/xXdgeoD.jpeg\"\r\n ]\r\n },\r\n 202: {\r\n fullTitle: \"Habitaci\u00f3n Superior con balc\u00f3n y vista al r\u00edo\",\r\n shortTitle: \"Habitaci\u00f3n Superior\",\r\n description: \"Una habitaci\u00f3n llena de estilo, con una decoraci\u00f3n inspirada en detalles \u00e9tnicos y colores vibrantes que la hacen \u00fanica. Equipada con cama King Size. Su balc\u00f3n privado con vista al r\u00edo invita a disfrutar del paisaje y la serenidad, convirtiendo la estad\u00eda en un momento inolvidable.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Cama King Size\", \"Balc\u00f3n privado con vista al r\u00edo\"],\r\n \/\/ NUEVAS IM\u00c1GENES A\u00d1ADIDAS\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/7HvDC9B.jpeg\",\r\n \"https:\/\/i.imgur.com\/QLusvVx.jpeg\",\r\n \"https:\/\/i.imgur.com\/pQglY65.jpeg\",\r\n \"https:\/\/i.imgur.com\/7PL9wSW.jpeg\"\r\n ]\r\n },\r\n 203: {\r\n fullTitle: \"Habitaci\u00f3n Est\u00e1ndar con dise\u00f1o exclusivo\",\r\n shortTitle: \"Habitaci\u00f3n Est\u00e1ndar\",\r\n description: \"Una habitaci\u00f3n donde el arte y el color crean un ambiente lleno de car\u00e1cter. Equipada con una cama King Size con baldaquino, es un espacio \u00edntimo y acogedor, para quienes buscan una experiencia distinta en Carmelo. Cuenta con un balc\u00f3n, que aporta luminosidad y amplitud, adem\u00e1s de un escritorio que suma practicidad durante la estad\u00eda. Su dise\u00f1o \u00fanico invita a disfrutar de un entorno original y acogedor.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Cama King Size con baldaquino\", \"Escritorio\", \"Balc\u00f3n\"],\r\n \/\/ NUEVAS IM\u00c1GENES A\u00d1ADIDAS\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/V39F37a.jpeg\",\r\n \"https:\/\/i.imgur.com\/sJstUgJ.jpeg\",\r\n \"https:\/\/i.imgur.com\/gHFatAP.jpeg\"\r\n ]\r\n },\r\n 204: {\r\n fullTitle: \"Habitaci\u00f3n Est\u00e1ndar tipo apartamento con dos dormitorios\",\r\n shortTitle: \"Habitaci\u00f3n Est\u00e1ndar\",\r\n description: \"Esta habitaci\u00f3n ofrece el equilibrio perfecto entre comodidad y privacidad. Cuenta con dos dormitorios: Uno con cama King Size, Otro con dos camas individuales. Su estilo moderno y colorido lo convierte en un espacio acogedor, dise\u00f1ado para sentirse como en casa durante la estad\u00eda en Carmelo.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Cama King Size\", \"Dos camas individuales\", \"Balc\u00f3n\"],\r\n \/\/ NUEVAS IM\u00c1GENES A\u00d1ADIDAS\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/vBE8B6T.jpeg\",\r\n \"https:\/\/i.imgur.com\/0gTLksW.jpeg\",\r\n \"https:\/\/i.imgur.com\/mll0aAE.jpeg\",\r\n \"https:\/\/i.imgur.com\/XvH5gEE.jpeg\"\r\n ]\r\n },\r\n 206: {\r\n fullTitle: \"Habitaci\u00f3n Est\u00e1ndar con vista al patio\",\r\n shortTitle: \"Habitaci\u00f3n Est\u00e1ndar\",\r\n description: \"Un espacio acogedor y lleno de arte, ideal para quienes disfrutan de los detalles. Equipada con una cama King Size, combina dise\u00f1o contempor\u00e1neo y calidez en cada rinc\u00f3n. Cuenta con un balc\u00f3n franc\u00e9s con vista al patio, donde destacan la Santa Rita en flor y las esculturas, creando un entorno lleno de belleza y tranquilidad. En su interior, los cuadros apoyados en estantes de atelier refuerzan la impronta art\u00edstica del hotel, mientras que el escritorio aporta practicidad a la estad\u00eda.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Cama King Size\", \"Escritorio\", \"Balc\u00f3n franc\u00e9s con vista al patio\"],\r\n \/\/ NUEVAS IM\u00c1GENES A\u00d1ADIDAS\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/dNEITid.jpeg\",\r\n \"https:\/\/i.imgur.com\/Sm60tgp.jpeg\",\r\n \"https:\/\/i.imgur.com\/CbGaf02.jpeg\"\r\n ]\r\n },\r\n 301: {\r\n fullTitle: \"Habitaci\u00f3n Superior Suite con vista panor\u00e1mica al r\u00edo\",\r\n shortTitle: \"Habitaci\u00f3n Superior Suite\",\r\n description: \"Nuestra suite es el espacio m\u00e1s exclusivo del hotel, dise\u00f1ada para quienes buscan una experiencia \u00fanica en Carmelo. Con Cama King Size con baldaquino y un ambiente luminoso de estilo elegante, combina amplitud, confort y detalles que invitan al descanso. El gran atractivo de esta suite es su vista panor\u00e1mica al r\u00edo, que se aprecia desde los amplios ventanales, creando un escenario perfecto tanto de d\u00eda como al atardecer. Un lugar ideal para vivir momentos inolvidables.\",\r\n amenities: [\"Frigobar\", \"Aire acondicionado\", \"Secador de cabello\", \"Tel\u00e9fono\", \"TV\", \"WiFi gratuito\", \"Ba\u00f1o privado\", \"Desayuno buffet\", \"Caja fuerte\", \"Toallas\", \"Cama King Size con baldaquino\", \"Escritorio\", \"Vista panor\u00e1mica al r\u00edo\"],\r\n \/\/ NUEVAS IM\u00c1GENES A\u00d1ADIDAS\r\n imagePaths: [\r\n \"https:\/\/i.imgur.com\/BJOvkJq.jpeg\",\r\n \"https:\/\/i.imgur.com\/shz2hVk.jpeg\"\r\n ]\r\n }\r\n };\r\n\r\n const roomNumbers = Object.keys(roomDetails).map(Number).sort((a, b) => a - b);\r\n let currentRoom = roomNumbers[0]; \/\/ Inicia en 101\r\n \r\n \/\/ --- L\u00f3gica del Selector de Habitaciones ---\r\n\r\n const roomSelector = document.getElementById('room-selector');\r\n \r\n \/\/ Genera los botones de las habitaciones\r\n roomNumbers.forEach(number => {\r\n const button = document.createElement('button');\r\n button.textContent = number;\r\n button.className = `room-number-btn px-4 py-2 rounded-full text-sm font-semibold text-white bg-primary hover:bg-accent focus:outline-none`;\r\n button.setAttribute('data-room', number);\r\n button.addEventListener('click', () => switchRoom(number));\r\n roomSelector.appendChild(button);\r\n });\r\n\r\n \/\/ Funci\u00f3n para cambiar de habitaci\u00f3n (actualiza T\u00edtulo, Descripci\u00f3n y Amenidades)\r\n function switchRoom(number) {\r\n currentRoom = number;\r\n const data = roomDetails[number];\r\n \r\n if (!data) {\r\n console.error(`Datos no encontrados para la Habitaci\u00f3n ${number}`);\r\n return;\r\n }\r\n\r\n \/\/ 1. Actualiza T\u00edtulo principal (H1) y el N\u00famero de Habitaci\u00f3n\r\n document.getElementById('room-title-full').textContent = data.fullTitle;\r\n document.getElementById('room-number').textContent = `Habitaci\u00f3n: ${number}`;\r\n\r\n \/\/ 2. Actualiza T\u00edtulo secundario (H2) y Descripci\u00f3n\r\n document.getElementById('room-title-short').textContent = data.shortTitle;\r\n document.getElementById('room-description').innerHTML = data.description;\r\n \r\n \/\/ 3. Actualiza Amenidades\r\n const amenitiesListContainer = document.getElementById('amenities-list');\r\n amenitiesListContainer.innerHTML = ''; \/\/ Limpia las comodidades anteriores\r\n\r\n \/\/ Aseguramos que las comodidades se muestren en dos columnas\r\n data.amenities.forEach(amenity => {\r\n const div = document.createElement('div');\r\n div.className = \"flex items-center space-x-2\";\r\n \/\/ Usamos el separador estilizado '>'\r\n div.innerHTML = `<span class=\"text-primary font-extrabold\">><\/span><span>${amenity}<\/span>`;\r\n amenitiesListContainer.appendChild(div);\r\n });\r\n \r\n \/\/ 4. Actualiza la clase activa en los botones (UI)\r\n document.querySelectorAll('.room-number-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n btn.classList.add('bg-primary', 'text-white');\r\n if (parseInt(btn.getAttribute('data-room')) === number) {\r\n btn.classList.add('active');\r\n btn.classList.remove('bg-primary', 'text-white');\r\n }\r\n });\r\n\r\n \/\/ 5. Reinicia\/Actualiza Carrusel de Im\u00e1genes\r\n setupCarousel(data.imagePaths);\r\n \r\n \/\/ 6. Ajusta el scroll para centrar el bot\u00f3n activo\r\n const activeBtn = document.querySelector(`.room-number-btn[data-room='${number}']`);\r\n if (activeBtn) {\r\n const selectorWidth = roomSelector.offsetWidth;\r\n const scrollLeft = activeBtn.offsetLeft - (selectorWidth \/ 2) + (activeBtn.offsetWidth \/ 2);\r\n roomSelector.scrollTo({ left: scrollLeft, behavior: 'smooth' });\r\n }\r\n }\r\n\r\n \/\/ --- L\u00f3gica del Carrusel de Im\u00e1genes (Image Slider) ---\r\n let currentImageIndex = 0;\r\n let imagePaths = [];\r\n const roomImg = document.getElementById('room-img');\r\n const carouselDotsContainer = document.getElementById('carousel-dots');\r\n const prevBtn = document.getElementById('prev-btn');\r\n const nextBtn = document.getElementById('next-btn');\r\n let startX = 0;\r\n let isDragging = false;\r\n\r\n function setupCarousel(paths) {\r\n imagePaths = paths;\r\n currentImageIndex = 0;\r\n updateImage(0); \/\/ Muestra la primera imagen de la nueva habitaci\u00f3n\r\n renderDots();\r\n }\r\n \r\n function renderDots() {\r\n carouselDotsContainer.innerHTML = '';\r\n imagePaths.forEach((_, i) => {\r\n const dot = document.createElement('div');\r\n dot.className = `dot ${i === currentImageIndex ? 'active' : ''}`;\r\n dot.setAttribute('data-index', i);\r\n dot.addEventListener('click', () => updateImage(i));\r\n carouselDotsContainer.appendChild(dot);\r\n });\r\n }\r\n \r\n \/\/ Funci\u00f3n para actualizar la imagen y los puntos\r\n function updateImage(index) {\r\n if (imagePaths.length === 0) {\r\n roomImg.src = `https:\/\/placehold.co\/600x750\/808080\/ffffff?text=Sin+Im\u00e1genes`;\r\n carouselDotsContainer.innerHTML = '';\r\n return;\r\n }\r\n\r\n \/\/ Asegura que el \u00edndice est\u00e9 dentro del rango (ciclo infinito)\r\n currentImageIndex = (index + imagePaths.length) % imagePaths.length;\r\n \r\n \/\/ Actualiza la URL de la imagen\r\n roomImg.src = imagePaths[currentImageIndex];\r\n roomImg.alt = `Imagen de la Habitaci\u00f3n ${currentRoom} - Foto ${currentImageIndex + 1}`;\r\n\r\n \/\/ Actualiza los puntos indicadores\r\n document.querySelectorAll('#carousel-dots .dot').forEach((dot, i) => {\r\n dot.classList.remove('active');\r\n if (i === currentImageIndex) {\r\n dot.classList.add('active');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Event Listeners para botones de carrusel (Solo se a\u00f1ade una vez)\r\n prevBtn.addEventListener('click', () => updateImage(currentImageIndex - 1));\r\n nextBtn.addEventListener('click', () => updateImage(currentImageIndex + 1));\r\n \r\n \/\/ L\u00f3gica para arrastrar (Swipe) en m\u00f3viles y escritorio\r\n const carousel = document.getElementById('image-carousel');\r\n \r\n carousel.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; });\r\n carousel.addEventListener('touchstart', (e) => { isDragging = true; startX = e.touches[0].clientX; });\r\n \r\n carousel.addEventListener('mouseup', handleDragEnd);\r\n carousel.addEventListener('touchend', handleDragEnd);\r\n carousel.addEventListener('mouseleave', () => { isDragging = false; }); \/\/ Detiene el arrastre al salir del \u00e1rea\r\n \r\n carousel.addEventListener('mousemove', (e) => { if (isDragging) e.preventDefault(); }); \/\/ Previene el arrastre\r\n\r\n \/\/ Funci\u00f3n de manejo del final del arrastre\r\n function handleDragEnd(e) {\r\n if (!isDragging) return;\r\n isDragging = false;\r\n\r\n let endX;\r\n if (e.changedTouches) {\r\n endX = e.changedTouches[0].clientX;\r\n } else {\r\n endX = e.clientX;\r\n }\r\n \r\n const diffX = endX - startX;\r\n \r\n \/\/ Umbral de swipe (50px)\r\n if (diffX > 50) {\r\n \/\/ Swipe a la derecha (imagen anterior)\r\n updateImage(currentImageIndex - 1);\r\n } else if (diffX < -50) {\r\n \/\/ Swipe a la izquierda (imagen siguiente)\r\n updateImage(currentImageIndex + 1);\r\n }\r\n }\r\n\r\n \/\/ Inicializa la primera habitaci\u00f3n (101) y su carrusel\r\n switchRoom(roomNumbers[0]); \r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Hotel Los Muelles – Detalle de Habitaci\u00f3n ☰ Reservar Habitaci\u00f3n: 101 Reservar Ahora Comodidades Destacadas RESERVAR Entendido<\/p>","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":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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-491","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/losmuelles.com\/pt\/wp-json\/wp\/v2\/pages\/491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/losmuelles.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/losmuelles.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/losmuelles.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/losmuelles.com\/pt\/wp-json\/wp\/v2\/comments?post=491"}],"version-history":[{"count":2,"href":"https:\/\/losmuelles.com\/pt\/wp-json\/wp\/v2\/pages\/491\/revisions"}],"predecessor-version":[{"id":605,"href":"https:\/\/losmuelles.com\/pt\/wp-json\/wp\/v2\/pages\/491\/revisions\/605"}],"wp:attachment":[{"href":"https:\/\/losmuelles.com\/pt\/wp-json\/wp\/v2\/media?parent=491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}