Navbar SERENZA - Men\u00fa lateral derecho<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-shadow: 0 10px 30px rgba(0,0,0,0.05);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: var(--spa-bg);\n font-family: var(--spa-font-body);\n min-height: 100vh;\n }\n\n \/* Navbar principal *\/\n .spa-navbar {\n width: 100%;\n background: var(--spa-white);\n box-shadow: var(--spa-shadow);\n position: relative;\n z-index: 1000;\n }\n\n .spa-container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 1rem 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .navbar-left { flex: 1; display: flex; justify-content: flex-start; }\n .navbar-center { flex: 1; display: flex; justify-content: center; }\n .navbar-right { flex: 1; display: flex; justify-content: flex-end; }\n\n \/* Bot\u00f3n CTA *\/\n .spa-btn {\n display: inline-block;\n font-family: var(--spa-font-body);\n font-weight: 500;\n font-size: 0.9rem;\n padding: 0.7rem 1.5rem;\n border-radius: 40px;\n text-decoration: none;\n transition: all 0.3s ease;\n cursor: pointer;\n background: var(--spa-primary);\n color: white;\n border: none;\n }\n\n .calendar-icon {\n display: none;\n background: var(--spa-primary);\n padding: 0.7rem;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n\n .calendar-icon svg { width: 20px; height: 20px; fill: white; }\n\n .spa-btn:hover, .calendar-icon:hover {\n background: var(--spa-primary-dark);\n transform: translateY(-2px);\n }\n\n @media (max-width: 1023px) {\n .spa-btn-text { display: none; }\n .calendar-icon { display: flex; }\n }\n\n \/* Logo *\/\n .logo img {\n max-width: 220px;\n max-height: 80px;\n object-fit: contain;\n }\n @media (max-width: 1023px) { .logo img { max-width: 180px; max-height: 70px; } }\n @media (max-width: 767px) { .logo img { max-width: 150px; max-height: 60px; } }\n\n \/* Bot\u00f3n hamburguesa *\/\n .hamburger {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n width: 30px;\n height: 24px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n z-index: 1001;\n position: relative;\n }\n .hamburger span {\n width: 100%;\n height: 2px;\n background: var(--spa-primary);\n border-radius: 2px;\n transition: 0.2s;\n }\n\n \/* Overlay del men\u00fa lateral (fondo oscuro) *\/\n .menu-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0,0,0,0.5);\n z-index: 2000;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0.3s, opacity 0.3s;\n }\n .menu-overlay.open {\n visibility: visible;\n opacity: 1;\n }\n\n \/* Panel lateral derecho *\/\n .side-menu {\n position: fixed;\n top: 0;\n right: -100%;\n width: 300px;\n height: 100%;\n background: var(--spa-white);\n box-shadow: -5px 0 30px rgba(0,0,0,0.1);\n transition: right 0.4s ease;\n z-index: 2001;\n display: flex;\n flex-direction: column;\n padding: 2rem 1.5rem;\n }\n .menu-overlay.open .side-menu {\n right: 0;\n }\n\n \/* Bot\u00f3n cerrar (X) *\/\n .close-menu {\n align-self: flex-end;\n font-size: 2rem;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--spa-primary);\n margin-bottom: 2rem;\n line-height: 1;\n }\n\n \/* Lista de enlaces *\/\n .menu-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n }\n .menu-list li a {\n text-decoration: none;\n font-family: var(--spa-font-body);\n font-weight: 500;\n font-size: 1.2rem;\n color: var(--spa-text);\n transition: color 0.2s;\n display: block;\n padding: 0.5rem 0;\n border-bottom: 1px solid rgba(0,0,0,0.05);\n }\n .menu-list li a:hover {\n color: var(--spa-primary);\n padding-left: 0.5rem;\n }\n\n \/* Modal de reserva (mismo que ya existe) *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0,0,0,0.4);\n z-index: 3000;\n justify-content: center;\n align-items: center;\n }\n .modal-content {\n background: var(--spa-white);\n max-width: 450px;\n width: 90%;\n padding: 2rem;\n border-radius: 12px;\n text-align: center;\n border-top: 3px solid var(--spa-gold);\n }\n .modal-content h3 {\n font-family: var(--spa-font-title);\n color: var(--spa-primary);\n margin-bottom: 0.5rem;\n }\n .modal-content input {\n width: 100%;\n padding: 0.8rem;\n margin: 1rem 0;\n border-radius: 30px;\n border: 1px solid var(--spa-nude-dark);\n }\n .modal-buttons { display: flex; gap: 1rem; justify-content: center; }\n .modal-btn { padding: 0.6rem 1.2rem; border-radius: 40px; border: none; cursor: pointer; }\n .modal-btn.confirm { background: var(--spa-primary); color: white; }\n .modal-btn.cancel { background: transparent; border: 1px solid var(--spa-gold); }\n .close-modal { float: right; font-size: 1.5rem; cursor: pointer; color: var(--spa-gold); }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"spa-navbar\">\n <div class=\"spa-container\">\n <div class=\"navbar-left\">\n <a href=\"#\" class=\"spa-btn spa-btn-text\" id=\"openModalBtn\">Reservar cita<\/a>\n <div class=\"calendar-icon\" id=\"openModalIcon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"navbar-center\">\n <div class=\"logo\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Serenza.png\" alt=\"Serenza Spa\">\n <\/div>\n <\/div>\n <div class=\"navbar-right\">\n <button class=\"hamburger\" id=\"menuToggle\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"menuOverlay\" class=\"menu-overlay\">\n <div class=\"side-menu\">\n <button class=\"close-menu\" id=\"closeMenuBtn\">×<\/button>\n <ul class=\"menu-list\">\n <li><a href=\"#\">Inicio<\/a><\/li>\n <li><a href=\"#servicios\">Servicios<\/a><\/li>\n <li><a href=\"#\">Experiencias<\/a><\/li>\n <li><a href=\"#\">Galer\u00eda<\/a><\/li>\n <li><a href=\"#\">Testimonios<\/a><\/li>\n <li><a href=\"#\">Contacto<\/a><\/li>\n <\/ul>\n <\/div>\n<\/div>\n\n\n<div id=\"bookingModal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"close-modal\">×<\/span>\n <h3>Reserva tu momento<\/h3>\n <p>Elige fecha y hora<\/p>\n <input type=\"datetime-local\" id=\"appointmentDateTime\" min=\"\" step=\"1800\">\n <div class=\"modal-buttons\">\n <button class=\"modal-btn confirm\" id=\"confirmBooking\">Confirmar<\/button>\n <button class=\"modal-btn cancel\" id=\"cancelModal\">Cancelar<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Elementos del men\u00fa lateral\n const menuOverlay = document.getElementById('menuOverlay');\n const menuToggle = document.getElementById('menuToggle');\n const closeMenuBtn = document.getElementById('closeMenuBtn');\n const menuLinks = document.querySelectorAll('.menu-list a');\n\n function openMenu() {\n menuOverlay.classList.add('open');\n }\n function closeMenu() {\n menuOverlay.classList.remove('open');\n }\n\n menuToggle.addEventListener('click', openMenu);\n closeMenuBtn.addEventListener('click', closeMenu);\n menuLinks.forEach(link => link.addEventListener('click', closeMenu));\n menuOverlay.addEventListener('click', (e) => {\n if (e.target === menuOverlay) closeMenu();\n });\n\n \/\/ Modal reserva\n const modal = document.getElementById('bookingModal');\n const openModalBtns = [document.getElementById('openModalBtn'), document.getElementById('openModalIcon')];\n const closeModalSpan = document.querySelector('.close-modal');\n const cancelModal = document.getElementById('cancelModal');\n const confirmBtn = document.getElementById('confirmBooking');\n const dateInput = document.getElementById('appointmentDateTime');\n\n const hoy = new Date();\n const a\u00f1o = hoy.getFullYear();\n const mes = String(hoy.getMonth()+1).padStart(2,'0');\n const dia = String(hoy.getDate()).padStart(2,'0');\n dateInput.min = `${a\u00f1o}-${mes}-${dia}T00:00`;\n\n function abrirModal() { modal.style.display = 'flex'; }\n function cerrarModal() { modal.style.display = 'none'; }\n openModalBtns.forEach(btn => btn.addEventListener('click', abrirModal));\n closeModalSpan.addEventListener('click', cerrarModal);\n cancelModal.addEventListener('click', cerrarModal);\n window.addEventListener('click', (e) => { if(e.target === modal) cerrarModal(); });\n\n confirmBtn.addEventListener('click', () => {\n if(!dateInput.value) { alert('Selecciona fecha y hora'); return; }\n const fecha = new Date(dateInput.value).toLocaleString('es-ES');\n alert(`Reserva solicitada para: ${fecha}\\nTe contactaremos pronto.`);\n cerrarModal();\n dateInput.value = '';\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-ef5dc34 e-con-full e-flex e-con e-parent\" data-id=\"ef5dc34\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9814eb elementor-widget elementor-widget-html\" data-id=\"a9814eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Hero SERENZA<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-accent: #E88C8C;\n --spa-gold: #C9A46B;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 12px;\n --spa-shadow: 0 10px 30px rgba(0,0,0,0.05);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .spa-hero {\n width: 100%;\n min-height: 90vh;\n background-image: url('https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Hero-Serenza.png');\n background-size: cover;\n background-position: center 30%;\n background-repeat: no-repeat;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 4rem 2rem;\n }\n\n .spa-hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(248, 245, 240, 0.35);\n z-index: 1;\n }\n\n .spa-hero-content {\n max-width: 650px;\n position: relative;\n z-index: 2;\n background: rgba(255, 255, 255, 0.88);\n padding: 2.5rem 2rem;\n border-radius: var(--spa-radius);\n box-shadow: var(--spa-shadow);\n border-left: 3px solid var(--spa-gold);\n }\n\n .spa-hero-title {\n font-family: var(--spa-font-title);\n font-size: 3.2rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n line-height: 1.2;\n margin-bottom: 0.75rem;\n }\n\n .spa-hero-subtitle {\n font-family: var(--spa-font-body);\n font-size: 1.1rem;\n color: var(--spa-text);\n margin-bottom: 2rem;\n line-height: 1.5;\n }\n\n .spa-hero-buttons {\n display: flex;\n gap: 1.2rem;\n flex-wrap: wrap;\n }\n\n .spa-btn-primary, .spa-btn-secondary {\n display: inline-block;\n font-family: var(--spa-font-body);\n font-weight: 500;\n font-size: 0.95rem;\n padding: 0.8rem 1.8rem;\n border-radius: 40px;\n text-decoration: none;\n transition: all 0.3s ease;\n cursor: pointer;\n text-align: center;\n border: none;\n }\n\n .spa-btn-primary {\n background: var(--spa-primary);\n color: white;\n }\n .spa-btn-primary:hover {\n background: var(--spa-primary-dark);\n transform: translateY(-2px);\n }\n\n .spa-btn-secondary {\n background: transparent;\n color: var(--spa-primary);\n border: 1px solid var(--spa-primary);\n }\n .spa-btn-secondary:hover {\n background: var(--spa-primary-light);\n color: white;\n border-color: var(--spa-primary-light);\n transform: translateY(-2px);\n }\n\n \/* Modal (mismo estilo que navbar) *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0,0,0,0.4);\n z-index: 2000;\n justify-content: center;\n align-items: center;\n }\n\n .modal-content {\n background: var(--spa-white);\n max-width: 450px;\n width: 90%;\n padding: 2rem;\n border-radius: var(--spa-radius);\n text-align: center;\n border-top: 3px solid var(--spa-gold);\n }\n\n .modal-content h3 {\n font-family: var(--spa-font-title);\n color: var(--spa-primary);\n margin-bottom: 0.5rem;\n }\n\n .modal-content input {\n width: 100%;\n padding: 0.8rem;\n margin: 1rem 0;\n border-radius: 30px;\n border: 1px solid var(--spa-nude-dark);\n }\n\n .modal-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n }\n\n .modal-btn {\n padding: 0.6rem 1.2rem;\n border-radius: 40px;\n border: none;\n cursor: pointer;\n }\n\n .modal-btn.confirm {\n background: var(--spa-primary);\n color: white;\n }\n .modal-btn.cancel {\n background: transparent;\n border: 1px solid var(--spa-gold);\n }\n\n .close-modal {\n float: right;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--spa-gold);\n }\n\n @media (max-width: 1023px) {\n .spa-hero { min-height: 80vh; padding: 3rem 1.5rem; }\n .spa-hero-title { font-size: 2.5rem; }\n }\n @media (max-width: 767px) {\n .spa-hero { min-height: 70vh; align-items: center; }\n .spa-hero-content { padding: 1.8rem; }\n .spa-hero-title { font-size: 2rem; }\n .spa-btn-primary, .spa-btn-secondary { padding: 0.6rem 1.2rem; font-size: 0.85rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<section class=\"spa-hero\">\n <div class=\"spa-hero-content\">\n <h1 class=\"spa-hero-title\">Bienestar que transforma<\/h1>\n <p class=\"spa-hero-subtitle\">Relajaci\u00f3n profunda, est\u00e9tica consciente y terapias revitalizantes. Descubre un espacio donde tu bienestar es la prioridad.<\/p>\n <div class=\"spa-hero-buttons\">\n <a href=\"#servicios\" class=\"spa-btn-secondary\">Descubrir servicios<\/a>\n <button id=\"heroReservarBtn\" class=\"spa-btn-primary\">Reservar ahora<\/button>\n <\/div>\n <\/div>\n<\/section>\n\n<div id=\"heroBookingModal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"close-modal\">×<\/span>\n <h3>Reserva tu momento<\/h3>\n <p>Elige fecha y hora<\/p>\n <input type=\"datetime-local\" id=\"heroDateTime\" min=\"\" step=\"1800\">\n <div class=\"modal-buttons\">\n <button class=\"modal-btn confirm\" id=\"heroConfirmBooking\">Confirmar<\/button>\n <button class=\"modal-btn cancel\" id=\"heroCancelModal\">Cancelar<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n const heroModal = document.getElementById('heroBookingModal');\n const heroOpenBtn = document.getElementById('heroReservarBtn');\n const heroCloseSpan = heroModal.querySelector('.close-modal');\n const heroCancelBtn = document.getElementById('heroCancelModal');\n const heroConfirmBtn = document.getElementById('heroConfirmBooking');\n const heroDateTimeInput = document.getElementById('heroDateTime');\n\n const hoy = new Date();\n const a\u00f1o = hoy.getFullYear();\n const mes = String(hoy.getMonth() + 1).padStart(2,'0');\n const dia = String(hoy.getDate()).padStart(2,'0');\n heroDateTimeInput.min = `${a\u00f1o}-${mes}-${dia}T00:00`;\n\n function abrirHeroModal() { heroModal.style.display = 'flex'; }\n function cerrarHeroModal() { heroModal.style.display = 'none'; }\n\n heroOpenBtn.addEventListener('click', abrirHeroModal);\n heroCloseSpan.addEventListener('click', cerrarHeroModal);\n heroCancelBtn.addEventListener('click', cerrarHeroModal);\n window.addEventListener('click', (e) => { if(e.target === heroModal) cerrarHeroModal(); });\n\n heroConfirmBtn.addEventListener('click', () => {\n const valor = heroDateTimeInput.value;\n if (!valor) { alert('Selecciona fecha y hora'); return; }\n const fechaFormateada = new Date(valor).toLocaleString('es-ES');\n alert(`Reserva solicitada para: ${fechaFormateada}\\nTe contactaremos pronto.`);\n cerrarHeroModal();\n heroDateTimeInput.value = '';\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-7d7ed3d e-con-full e-flex e-con e-parent\" data-id=\"7d7ed3d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16d5f84 elementor-widget elementor-widget-html\" data-id=\"16d5f84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Servicios SERENZA<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-bg-soft: #EFEAE4;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 20px;\n --spa-shadow: 0 15px 35px rgba(0,0,0,0.05);\n --spa-shadow-hover: 0 25px 40px rgba(0,0,0,0.08);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .spa-services {\n background: var(--spa-bg);\n padding: 6rem 2rem;\n text-align: center;\n }\n\n .spa-container {\n max-width: 1280px;\n margin: 0 auto;\n }\n\n .spa-section-title {\n font-family: var(--spa-font-title);\n font-size: 2.8rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n margin-bottom: 1rem;\n letter-spacing: -0.02em;\n }\n\n .spa-section-subtitle {\n font-family: var(--spa-font-body);\n font-size: 1.1rem;\n color: var(--spa-text);\n max-width: 600px;\n margin: 0 auto 3.5rem auto;\n opacity: 0.75;\n }\n\n .services-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n }\n\n .service-card {\n background: var(--spa-white);\n border-radius: var(--spa-radius);\n overflow: hidden;\n transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);\n box-shadow: var(--spa-shadow);\n text-align: left;\n cursor: pointer;\n }\n\n .service-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--spa-shadow-hover);\n }\n\n .service-image {\n width: 100%;\n height: 260px;\n background-size: cover;\n background-position: center;\n transition: transform 0.5s ease;\n position: relative;\n }\n\n .service-card:hover .service-image {\n transform: scale(1.02);\n }\n\n .service-image::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(0deg, rgba(46,139,126,0.1) 0%, rgba(0,0,0,0.05) 100%);\n opacity: 0;\n transition: opacity 0.3s;\n }\n\n .service-card:hover .service-image::after {\n opacity: 1;\n }\n\n \/* Im\u00e1genes actualizadas *\/\n .img-masajes { background-image: url('https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Masajes000.png'); }\n .img-faciales { background-image: url('https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Faciales-.png'); }\n .img-terapias { background-image: url('https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Terapias.png'); }\n\n .service-content {\n padding: 1.8rem 1.8rem 2rem;\n }\n\n .service-title {\n font-family: var(--spa-font-title);\n font-size: 1.6rem;\n font-weight: 600;\n color: var(--spa-primary);\n margin-bottom: 0.75rem;\n }\n\n .service-description {\n font-family: var(--spa-font-body);\n font-size: 0.95rem;\n color: var(--spa-text);\n line-height: 1.5;\n margin-bottom: 1.5rem;\n opacity: 0.8;\n }\n\n .service-link {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-family: var(--spa-font-body);\n font-weight: 500;\n font-size: 0.9rem;\n color: var(--spa-primary);\n text-decoration: none;\n border-bottom: 1px solid var(--spa-gold-light);\n padding-bottom: 4px;\n transition: all 0.2s;\n }\n\n .service-link:hover {\n color: var(--spa-primary-dark);\n border-bottom-color: var(--spa-primary);\n gap: 0.75rem;\n }\n\n .service-link::after {\n content: '\u2192';\n transition: transform 0.2s;\n }\n\n .service-link:hover::after {\n transform: translateX(3px);\n }\n\n @media (max-width: 1023px) {\n .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }\n .spa-services { padding: 4rem 1.5rem; }\n .spa-section-title { font-size: 2.3rem; }\n .service-image { height: 220px; }\n }\n\n @media (max-width: 767px) {\n .services-grid { grid-template-columns: 1fr; gap: 1.8rem; }\n .spa-services { padding: 3rem 1rem; }\n .spa-section-title { font-size: 2rem; }\n .service-image { height: 200px; }\n .service-content { padding: 1.3rem; }\n .service-title { font-size: 1.4rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<section class=\"spa-services\" id=\"servicios\">\n <div class=\"spa-container\">\n <h2 class=\"spa-section-title\">Tratamientos para tu bienestar<\/h2>\n <p class=\"spa-section-subtitle\">Cada experiencia est\u00e1 dise\u00f1ada para restaurar el equilibrio natural de tu cuerpo y mente<\/p>\n <div class=\"services-grid\">\n <div class=\"service-card\">\n <div class=\"service-image img-masajes\"><\/div>\n <div class=\"service-content\">\n <h3 class=\"service-title\">Masajes<\/h3>\n <p class=\"service-description\">Desde el suave masaje relajante hasta el descontracturante profundo, aliviamos tensiones y reactivamos tu energ\u00eda vital.<\/p>\n <a href=\"#\" class=\"service-link\">Descubrir experiencia<\/a>\n <\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-image img-faciales\"><\/div>\n <div class=\"service-content\">\n <h3 class=\"service-title\">Faciales<\/h3>\n <p class=\"service-description\">Tratamientos personalizados con activos naturales y tecnolog\u00eda suave para una piel luminosa, hidratada y rejuvenecida.<\/p>\n <a href=\"#\" class=\"service-link\">Descubrir experiencia<\/a>\n <\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-image img-terapias\"><\/div>\n <div class=\"service-content\">\n <h3 class=\"service-title\">Terapias<\/h3>\n <p class=\"service-description\">Aromaterapia, reflexolog\u00eda y sonoterapia para equilibrar cuerpo, mente y esp\u00edritu en un entorno de calma absoluta.<\/p>\n <a href=\"#\" class=\"service-link\">Descubrir experiencia<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\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-bb45803 e-con-full e-flex e-con e-parent\" data-id=\"bb45803\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6cab229 elementor-widget elementor-widget-html\" data-id=\"6cab229\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Beneficios SERENZA<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-bg-soft: #EFEAE4;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 20px;\n --spa-shadow: 0 15px 35px rgba(0,0,0,0.05);\n --spa-shadow-hover: 0 25px 40px rgba(0,0,0,0.08);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .spa-benefits {\n background: var(--spa-white);\n padding: 6rem 2rem;\n }\n\n .spa-container {\n max-width: 1280px;\n margin: 0 auto;\n }\n\n .spa-section-header {\n text-align: center;\n margin-bottom: 3.5rem;\n }\n\n .spa-section-title {\n font-family: var(--spa-font-title);\n font-size: 2.6rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n letter-spacing: -0.02em;\n margin-bottom: 1rem;\n }\n\n .spa-section-subtitle {\n font-family: var(--spa-font-body);\n font-size: 1.1rem;\n color: var(--spa-text);\n max-width: 650px;\n margin: 0 auto;\n opacity: 0.75;\n }\n\n .benefits-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n }\n\n .benefit-card {\n background: var(--spa-bg-soft);\n border-radius: var(--spa-radius);\n padding: 2rem 1.8rem;\n text-align: center;\n transition: all 0.35s ease;\n border: 1px solid transparent;\n }\n\n .benefit-card:hover {\n transform: translateY(-5px);\n background: var(--spa-white);\n border-color: var(--spa-gold-light);\n box-shadow: var(--spa-shadow-hover);\n }\n\n .benefit-icon {\n width: 80px;\n height: 80px;\n margin: 0 auto 1.5rem auto;\n background: var(--spa-white);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s;\n box-shadow: var(--spa-shadow);\n }\n\n .benefit-card:hover .benefit-icon {\n background: var(--spa-primary-light);\n transform: scale(1.02);\n }\n\n .benefit-icon svg {\n width: 40px;\n height: 40px;\n stroke: var(--spa-primary);\n stroke-width: 1.5;\n fill: none;\n transition: stroke 0.3s;\n }\n\n .benefit-card:hover .benefit-icon svg {\n stroke: var(--spa-white);\n }\n\n .benefit-title {\n font-family: var(--spa-font-title);\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--spa-primary);\n margin-bottom: 1rem;\n }\n\n .benefit-description {\n font-family: var(--spa-font-body);\n font-size: 0.95rem;\n line-height: 1.5;\n color: var(--spa-text);\n opacity: 0.8;\n }\n\n .benefit-card::after {\n content: '';\n display: block;\n width: 40px;\n height: 2px;\n background: var(--spa-gold-light);\n margin: 1.5rem auto 0 auto;\n transition: width 0.3s, background 0.3s;\n }\n\n .benefit-card:hover::after {\n width: 60px;\n background: var(--spa-gold);\n }\n\n @media (max-width: 1023px) {\n .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }\n .spa-benefits { padding: 4rem 1.5rem; }\n .spa-section-title { font-size: 2.2rem; }\n }\n\n @media (max-width: 767px) {\n .benefits-grid { grid-template-columns: 1fr; gap: 1.5rem; }\n .spa-benefits { padding: 3rem 1rem; }\n .spa-section-title { font-size: 1.9rem; }\n .benefit-card { padding: 1.5rem; }\n .benefit-title { font-size: 1.3rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<section class=\"spa-benefits\">\n <div class=\"spa-container\">\n <div class=\"spa-section-header\">\n <h2 class=\"spa-section-title\">\u00bfPor qu\u00e9 SERENZA?<\/h2>\n <p class=\"spa-section-subtitle\">Un espacio donde el lujo silencioso y el cuidado humano se encuentran<\/p>\n <\/div>\n <div class=\"benefits-grid\">\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"benefit-title\">Ambiente de calma<\/h3>\n <p class=\"benefit-description\">Espacios dise\u00f1ados con luz natural, aromas suaves y sonidos que inducen a la relajaci\u00f3n profunda.<\/p>\n <\/div>\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"8\" r=\"4\"\/>\n <path d=\"M5 20v-2a7 7 0 0 1 14 0v2\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"benefit-title\">Expertos en bienestar<\/h3>\n <p class=\"benefit-description\">Terapeutas certificados con formaci\u00f3n continua en t\u00e9cnicas ancestrales y vanguardia.<\/p>\n <\/div>\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2v4M12 22v-4M4 12H2M22 12h-2M19.07 4.93l-2.83 2.83M7.76 16.24l-2.83 2.83M16.24 7.76l2.83-2.83M4.93 19.07l2.83-2.83\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"benefit-title\">Productos org\u00e1nicos<\/h3>\n <p class=\"benefit-description\">Selecci\u00f3n de aceites esenciales, cremas y exfoliantes 100% naturales y libres de crueldad.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\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-ecc1d82 e-con-full e-flex e-con e-parent\" data-id=\"ecc1d82\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a685c2 elementor-widget elementor-widget-html\" data-id=\"3a685c2\" 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>Calculadora de Paquetes - SERENZA Spa<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n \/* \u2500\u2500 Variables (misma paleta que navbar) \u2500\u2500 *\/\n :root {\n --spa-bg: #F8F5F0;\n --spa-bg-soft: #EFEAE4;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light:#6FB3A7;\n --spa-accent: #E88C8C;\n --spa-accent-soft: #F3B6B6;\n --spa-nude: #F2D6B3;\n --spa-nude-dark: #D9B38C;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 12px;\n --spa-shadow: 0 10px 30px rgba(0,0,0,0.06);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n background: var(--spa-bg);\n font-family: var(--spa-font-body);\n color: var(--spa-text);\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\u2550\u2550\u2550\n SECCI\u00d3N PRINCIPAL\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\u2550\u2550\u2550 *\/\n .sc-section {\n width: 100%;\n padding: 5rem 2rem;\n background: var(--spa-bg);\n position: relative;\n overflow: hidden;\n }\n\n \/* Decoraci\u00f3n fondo *\/\n .sc-section::before {\n content: '';\n position: absolute;\n top: -120px; right: -120px;\n width: 400px; height: 400px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(46,139,126,0.07) 0%, transparent 70%);\n pointer-events: none;\n }\n .sc-section::after {\n content: '';\n position: absolute;\n bottom: -80px; left: -80px;\n width: 300px; height: 300px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(201,164,107,0.1) 0%, transparent 70%);\n pointer-events: none;\n }\n\n .sc-inner {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n }\n\n \/* \u2500\u2500 Cabecera \u2500\u2500 *\/\n .sc-header {\n text-align: center;\n margin-bottom: 3.5rem;\n }\n .sc-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--spa-gold);\n margin-bottom: 1rem;\n }\n .sc-eyebrow::before,\n .sc-eyebrow::after {\n content: '';\n width: 28px; height: 1px;\n background: var(--spa-gold-light);\n }\n .sc-title {\n font-family: var(--spa-font-title);\n font-size: 2.6rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n line-height: 1.15;\n margin-bottom: 0.8rem;\n }\n .sc-title em {\n font-style: italic;\n color: var(--spa-gold);\n }\n .sc-subtitle {\n font-size: 0.95rem;\n color: rgba(58,58,58,0.65);\n max-width: 520px;\n margin: 0 auto;\n line-height: 1.6;\n }\n\n \/* \u2500\u2500 Layout dos columnas \u2500\u2500 *\/\n .sc-grid {\n display: grid;\n grid-template-columns: 1fr 340px;\n gap: 2rem;\n align-items: start;\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\u2550\u2550\u2550\n COLUMNA IZQUIERDA\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\u2550\u2550\u2550 *\/\n .sc-left { display: flex; flex-direction: column; gap: 2rem; }\n\n \/* \u2500\u2500 Card contenedora \u2500\u2500 *\/\n .sc-card {\n background: var(--spa-white);\n border-radius: 20px;\n box-shadow: var(--spa-shadow);\n overflow: hidden;\n }\n .sc-card-header {\n padding: 1.4rem 1.8rem 1rem;\n border-bottom: 1px solid var(--spa-bg-soft);\n display: flex;\n align-items: center;\n gap: 0.8rem;\n }\n .sc-card-icon {\n width: 38px; height: 38px;\n background: rgba(46,139,126,0.1);\n border-radius: 10px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .sc-card-icon svg { width: 20px; height: 20px; }\n .sc-card-title {\n font-family: var(--spa-font-title);\n font-size: 1.2rem;\n color: var(--spa-primary-dark);\n font-weight: 600;\n }\n .sc-card-body { padding: 1.4rem 1.8rem 1.8rem; }\n\n \/* \u2500\u2500 Servicios \/ Checkboxes \u2500\u2500 *\/\n .sc-service-list {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n .sc-service-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 0.85rem 1rem;\n border-radius: var(--spa-radius);\n border: 1.5px solid transparent;\n background: var(--spa-bg);\n cursor: pointer;\n transition: all 0.25s ease;\n user-select: none;\n }\n .sc-service-item:hover {\n background: rgba(46,139,126,0.06);\n border-color: rgba(46,139,126,0.2);\n }\n .sc-service-item.checked {\n background: rgba(46,139,126,0.08);\n border-color: var(--spa-primary-light);\n }\n\n \/* Checkbox personalizado *\/\n .sc-check {\n width: 22px; height: 22px;\n border-radius: 6px;\n border: 2px solid #D0CCC8;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n transition: all 0.25s ease;\n background: var(--spa-white);\n }\n .sc-service-item.checked .sc-check {\n background: var(--spa-primary);\n border-color: var(--spa-primary);\n }\n .sc-check svg { width: 12px; height: 12px; fill: white; opacity: 0; transform: scale(0.5); transition: all 0.2s ease; }\n .sc-service-item.checked .sc-check svg { opacity: 1; transform: scale(1); }\n\n \/* \u00cdcono de categor\u00eda *\/\n .sc-svc-icon {\n width: 34px; height: 34px;\n border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n font-size: 1.1rem;\n background: var(--spa-bg-soft);\n transition: background 0.25s;\n }\n .sc-service-item.checked .sc-svc-icon { background: rgba(46,139,126,0.12); }\n\n .sc-svc-info { flex: 1; }\n .sc-svc-name {\n font-size: 0.9rem;\n font-weight: 500;\n color: var(--spa-text);\n line-height: 1.3;\n }\n .sc-svc-desc {\n font-size: 0.75rem;\n color: rgba(58,58,58,0.55);\n margin-top: 0.1rem;\n }\n .sc-svc-price {\n font-size: 0.92rem;\n font-weight: 600;\n color: var(--spa-primary);\n white-space: nowrap;\n }\n\n \/* \u2500\u2500 Divisor de categor\u00eda \u2500\u2500 *\/\n .sc-cat-label {\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: rgba(58,58,58,0.4);\n padding: 0.8rem 0 0.3rem;\n }\n\n \/* \u2500\u2500 Paquetes \u2500\u2500 *\/\n .sc-packages {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n .sc-pkg {\n border: 1.5px solid var(--spa-nude);\n border-radius: 16px;\n padding: 1.2rem 1.4rem;\n cursor: pointer;\n transition: all 0.3s ease;\n background: var(--spa-white);\n display: flex;\n align-items: center;\n gap: 1.1rem;\n position: relative;\n overflow: hidden;\n }\n .sc-pkg::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(46,139,126,0.04) 0%, transparent 60%);\n opacity: 0;\n transition: opacity 0.3s;\n }\n .sc-pkg:hover {\n border-color: var(--spa-primary-light);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(46,139,126,0.1);\n }\n .sc-pkg:hover::before { opacity: 1; }\n .sc-pkg.active {\n border-color: var(--spa-gold);\n box-shadow: 0 6px 24px rgba(201,164,107,0.2);\n }\n .sc-pkg.active::before { opacity: 1; }\n\n .sc-pkg-emoji {\n font-size: 1.8rem;\n line-height: 1;\n flex-shrink: 0;\n }\n .sc-pkg-info { flex: 1; }\n .sc-pkg-name {\n font-family: var(--spa-font-title);\n font-size: 1rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n margin-bottom: 0.2rem;\n }\n .sc-pkg-services {\n font-size: 0.75rem;\n color: rgba(58,58,58,0.55);\n line-height: 1.4;\n }\n .sc-pkg-right {\n text-align: right;\n flex-shrink: 0;\n }\n .sc-pkg-badge {\n display: inline-block;\n background: var(--spa-accent-soft);\n color: #B85C5C;\n font-size: 0.7rem;\n font-weight: 700;\n padding: 0.2rem 0.55rem;\n border-radius: 50px;\n margin-bottom: 0.3rem;\n }\n .sc-pkg.active .sc-pkg-badge {\n background: var(--spa-gold-light);\n color: #7A5A1E;\n }\n .sc-pkg-price {\n font-size: 1rem;\n font-weight: 700;\n color: var(--spa-primary);\n display: block;\n }\n .sc-pkg-original {\n font-size: 0.75rem;\n color: rgba(58,58,58,0.4);\n text-decoration: line-through;\n display: block;\n }\n\n \/* Chip activo *\/\n .sc-pkg-active-chip {\n position: absolute;\n top: 0.7rem; right: 0.7rem;\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--spa-gold);\n display: flex; align-items: center; justify-content: center;\n opacity: 0;\n transform: scale(0);\n transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n }\n .sc-pkg.active .sc-pkg-active-chip { opacity: 1; transform: scale(1); }\n .sc-pkg-active-chip svg { width: 10px; height: 10px; fill: white; }\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\u2550\u2550\u2550\n COLUMNA DERECHA \u2014 PANEL 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\u2550\u2550\u2550 *\/\n .sc-right {\n position: sticky;\n top: 2rem;\n }\n .sc-summary-card {\n background: var(--spa-white);\n border-radius: 20px;\n box-shadow: var(--spa-shadow);\n overflow: hidden;\n }\n .sc-summary-header {\n background: linear-gradient(135deg, var(--spa-primary-dark) 0%, var(--spa-primary) 100%);\n padding: 1.5rem 1.8rem;\n color: white;\n }\n .sc-summary-eyebrow {\n font-size: 0.68rem;\n font-weight: 600;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n opacity: 0.75;\n margin-bottom: 0.3rem;\n }\n .sc-summary-title {\n font-family: var(--spa-font-title);\n font-size: 1.3rem;\n font-weight: 600;\n }\n\n .sc-summary-body { padding: 1.5rem 1.8rem; }\n\n \/* Lista de seleccionados *\/\n .sc-selected-list {\n min-height: 80px;\n margin-bottom: 1.2rem;\n }\n .sc-selected-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 80px;\n gap: 0.5rem;\n color: rgba(58,58,58,0.35);\n font-size: 0.82rem;\n text-align: center;\n }\n .sc-selected-empty svg { width: 32px; height: 32px; opacity: 0.3; }\n .sc-selected-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.5rem 0;\n border-bottom: 1px solid var(--spa-bg-soft);\n font-size: 0.82rem;\n gap: 0.5rem;\n }\n .sc-selected-row:last-child { border-bottom: none; }\n .sc-selected-name { color: var(--spa-text); line-height: 1.3; }\n .sc-selected-val { font-weight: 600; color: var(--spa-primary); white-space: nowrap; }\n\n \/* Totales *\/\n .sc-divider { height: 1px; background: var(--spa-bg-soft); margin: 1rem 0; }\n\n .sc-total-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.85rem;\n margin-bottom: 0.4rem;\n }\n .sc-total-label { color: rgba(58,58,58,0.6); }\n .sc-total-val { font-weight: 600; color: var(--spa-text); }\n .sc-total-val.strike {\n text-decoration: line-through;\n color: rgba(58,58,58,0.4);\n }\n .sc-discount-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.82rem;\n margin-bottom: 0.4rem;\n display: none;\n }\n .sc-discount-label { color: var(--spa-accent); font-weight: 500; }\n .sc-discount-val { color: var(--spa-accent); font-weight: 600; }\n\n .sc-grand-total {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n margin-top: 0.8rem;\n }\n .sc-grand-label {\n font-family: var(--spa-font-title);\n font-size: 1rem;\n color: var(--spa-primary-dark);\n font-weight: 600;\n }\n .sc-grand-price {\n font-family: var(--spa-font-title);\n font-size: 2rem;\n font-weight: 700;\n color: var(--spa-primary-dark);\n line-height: 1;\n transition: transform 0.25s ease, opacity 0.25s ease;\n }\n .sc-grand-price.animating { transform: scale(0.92); opacity: 0.4; }\n\n .sc-savings-badge {\n display: none;\n align-items: center;\n gap: 0.4rem;\n background: rgba(46,139,126,0.08);\n border: 1px solid rgba(46,139,126,0.2);\n border-radius: 8px;\n padding: 0.5rem 0.8rem;\n font-size: 0.78rem;\n color: var(--spa-primary-dark);\n font-weight: 600;\n margin-top: 0.8rem;\n }\n .sc-savings-badge svg { width: 14px; height: 14px; fill: var(--spa-primary); flex-shrink: 0; }\n .sc-savings-badge.visible { display: flex; }\n\n .sc-microcopy {\n font-size: 0.72rem;\n color: rgba(58,58,58,0.45);\n text-align: center;\n margin: 0.8rem 0 1.2rem;\n line-height: 1.5;\n }\n\n \/* CTA *\/\n .sc-cta {\n width: 100%;\n background: var(--spa-primary);\n color: white;\n border: none;\n border-radius: 40px;\n padding: 1rem 1.5rem;\n font-family: var(--spa-font-body);\n font-size: 0.95rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.6rem;\n letter-spacing: 0.02em;\n }\n .sc-cta svg { width: 18px; height: 18px; fill: white; }\n .sc-cta:hover:not(:disabled) {\n background: var(--spa-primary-dark);\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(46,139,126,0.3);\n }\n .sc-cta:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n }\n\n .sc-trust {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.4rem;\n font-size: 0.72rem;\n color: rgba(58,58,58,0.45);\n margin-top: 0.8rem;\n line-height: 1.4;\n text-align: center;\n }\n .sc-trust svg { width: 12px; height: 12px; fill: var(--spa-primary-light); 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\u2550\u2550\u2550\n MODAL\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\u2550\u2550\u2550 *\/\n .sc-modal-overlay {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(46,46,46,0.45);\n backdrop-filter: blur(4px);\n z-index: 9999;\n align-items: center;\n justify-content: center;\n padding: 1.5rem;\n }\n .sc-modal-overlay.open { display: flex; }\n\n .sc-modal {\n background: var(--spa-white);\n border-radius: 24px;\n max-width: 480px;\n width: 100%;\n box-shadow: 0 24px 60px rgba(0,0,0,0.15);\n overflow: hidden;\n animation: sc-modal-in 0.35s cubic-bezier(0.2,0.9,0.4,1) forwards;\n }\n @keyframes sc-modal-in {\n from { opacity: 0; transform: translateY(30px) scale(0.97); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n .sc-modal-header {\n background: linear-gradient(135deg, var(--spa-primary-dark) 0%, var(--spa-primary) 100%);\n padding: 1.8rem 2rem 1.4rem;\n position: relative;\n }\n .sc-modal-header-eye {\n font-size: 0.68rem;\n font-weight: 600;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.65);\n margin-bottom: 0.3rem;\n }\n .sc-modal-header h3 {\n font-family: var(--spa-font-title);\n font-size: 1.5rem;\n color: white;\n font-weight: 600;\n }\n .sc-modal-close {\n position: absolute;\n top: 1.2rem; right: 1.4rem;\n width: 32px; height: 32px;\n border-radius: 50%;\n background: rgba(255,255,255,0.15);\n border: none;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: background 0.2s;\n }\n .sc-modal-close:hover { background: rgba(255,255,255,0.25); }\n .sc-modal-close svg { width: 14px; height: 14px; fill: white; }\n\n .sc-modal-body { padding: 1.8rem 2rem; }\n\n \/* Resumen en modal *\/\n .sc-modal-summary {\n background: var(--spa-bg);\n border-radius: var(--spa-radius);\n padding: 1rem 1.2rem;\n margin-bottom: 1.4rem;\n }\n .sc-modal-summary-label {\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--spa-primary);\n margin-bottom: 0.7rem;\n }\n .sc-modal-items {\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n margin-bottom: 0.8rem;\n }\n .sc-modal-item {\n display: flex;\n justify-content: space-between;\n font-size: 0.82rem;\n color: var(--spa-text);\n }\n .sc-modal-item-price { font-weight: 600; color: var(--spa-primary); }\n .sc-modal-total-row {\n border-top: 1px solid var(--spa-nude);\n padding-top: 0.7rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .sc-modal-total-label {\n font-family: var(--spa-font-title);\n font-size: 0.95rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n }\n .sc-modal-total-price {\n font-family: var(--spa-font-title);\n font-size: 1.4rem;\n font-weight: 700;\n color: var(--spa-primary-dark);\n }\n\n \/* Campo fecha *\/\n .sc-modal-field-label {\n font-size: 0.8rem;\n font-weight: 600;\n color: rgba(58,58,58,0.7);\n margin-bottom: 0.5rem;\n display: block;\n letter-spacing: 0.03em;\n }\n .sc-modal-input {\n width: 100%;\n padding: 0.85rem 1.1rem;\n border-radius: 40px;\n border: 1.5px solid var(--spa-nude-dark);\n font-family: var(--spa-font-body);\n font-size: 0.88rem;\n color: var(--spa-text);\n background: var(--spa-bg);\n transition: border-color 0.25s;\n outline: none;\n margin-bottom: 1.4rem;\n }\n .sc-modal-input:focus { border-color: var(--spa-primary); background: var(--spa-white); }\n\n .sc-modal-actions { display: flex; gap: 0.8rem; }\n .sc-modal-confirm {\n flex: 1;\n background: var(--spa-primary);\n color: white;\n border: none;\n border-radius: 40px;\n padding: 0.85rem 1.5rem;\n font-family: var(--spa-font-body);\n font-size: 0.9rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s;\n display: flex; align-items: center; justify-content: center; gap: 0.5rem;\n }\n .sc-modal-confirm svg { width: 16px; height: 16px; fill: white; }\n .sc-modal-confirm:hover { background: var(--spa-primary-dark); box-shadow: 0 6px 18px rgba(46,139,126,0.3); transform: translateY(-1px); }\n .sc-modal-cancel {\n background: transparent;\n border: 1.5px solid var(--spa-nude-dark);\n border-radius: 40px;\n padding: 0.85rem 1.3rem;\n font-family: var(--spa-font-body);\n font-size: 0.88rem;\n color: rgba(58,58,58,0.65);\n cursor: pointer;\n transition: all 0.25s;\n }\n .sc-modal-cancel:hover { border-color: var(--spa-gold); color: var(--spa-text); }\n\n \/* Modal \u00e9xito *\/\n .sc-modal-success {\n display: none;\n text-align: center;\n padding: 1rem 0;\n }\n .sc-modal-success-icon {\n font-size: 3.5rem;\n margin-bottom: 0.8rem;\n animation: sc-bounce 0.6s cubic-bezier(0.2,0.9,0.4,1.2) forwards;\n }\n @keyframes sc-bounce { from { transform: scale(0); } to { transform: scale(1); } }\n .sc-modal-success h4 { font-family: var(--spa-font-title); font-size: 1.3rem; color: var(--spa-primary-dark); margin-bottom: 0.5rem; }\n .sc-modal-success p { font-size: 0.85rem; color: rgba(58,58,58,0.6); line-height: 1.6; }\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\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\u2550\u2550\u2550 *\/\n @media (max-width: 900px) {\n .sc-grid { grid-template-columns: 1fr; }\n .sc-right { position: static; }\n .sc-title { font-size: 2rem; }\n }\n @media (max-width: 600px) {\n .sc-section { padding: 3.5rem 1.2rem; }\n .sc-card-header, .sc-card-body { padding-left: 1.3rem; padding-right: 1.3rem; }\n .sc-modal-body { padding: 1.4rem 1.3rem; }\n .sc-modal-header { padding: 1.4rem 1.3rem 1rem; }\n .sc-grand-price { font-size: 1.6rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n\n<section class=\"sc-section\" id=\"sc-calculadora\">\n <div class=\"sc-inner\">\n\n \n <div class=\"sc-header\">\n <div class=\"sc-eyebrow\">Experiencia personalizada<\/div>\n <h2 class=\"sc-title\">Dise\u00f1a tu <em>ritual<\/em> ideal<\/h2>\n <p class=\"sc-subtitle\">Elige los servicios que deseas disfrutar o selecciona uno de nuestros paquetes con descuento exclusivo<\/p>\n <\/div>\n\n \n <div class=\"sc-grid\">\n\n \n <div class=\"sc-left\">\n\n \n <div class=\"sc-card\">\n <div class=\"sc-card-header\">\n <div class=\"sc-card-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2E8B7E\" stroke-width=\"2\" stroke-linecap=\"round\">\n <path d=\"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2\"\/>\n <rect x=\"9\" y=\"3\" width=\"6\" height=\"4\" rx=\"2\"\/>\n <path d=\"m9 12 2 2 4-4\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"sc-card-title\">Servicios disponibles<\/div>\n <\/div>\n <\/div>\n <div class=\"sc-card-body\">\n <div class=\"sc-service-list\" id=\"scServiceList\">\n\n <div class=\"sc-cat-label\">Masajes<\/div>\n\n <div class=\"sc-service-item\" data-id=\"masaje-relajante\" data-price=\"120000\" data-name=\"Masaje relajante\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83d\udc86<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Masaje relajante<\/div>\n <div class=\"sc-svc-desc\">60 min \u00b7 Aceites esenciales \u00b7 Tensi\u00f3n muscular<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$120.000<\/div>\n <\/div>\n\n <div class=\"sc-service-item\" data-id=\"masaje-piedras\" data-price=\"145000\" data-name=\"Masaje con piedras calientes\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83e\udea8<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Masaje con piedras calientes<\/div>\n <div class=\"sc-svc-desc\">75 min \u00b7 Basalto volc\u00e1nico \u00b7 Circulaci\u00f3n profunda<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$145.000<\/div>\n <\/div>\n\n <div class=\"sc-service-item\" data-id=\"reflexologia\" data-price=\"95000\" data-name=\"Reflexolog\u00eda podal\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83e\uddb6<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Reflexolog\u00eda podal<\/div>\n <div class=\"sc-svc-desc\">45 min \u00b7 Puntos de presi\u00f3n \u00b7 Equilibrio energ\u00e9tico<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$95.000<\/div>\n <\/div>\n\n <div class=\"sc-cat-label\">Faciales<\/div>\n\n <div class=\"sc-service-item\" data-id=\"facial-revitalizante\" data-price=\"110000\" data-name=\"Facial revitalizante\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\u2728<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Facial revitalizante<\/div>\n <div class=\"sc-svc-desc\">50 min \u00b7 Limpieza profunda \u00b7 Vitamina C<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$110.000<\/div>\n <\/div>\n\n <div class=\"sc-service-item\" data-id=\"facial-hidratante\" data-price=\"98000\" data-name=\"Facial hidratante\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83d\udca7<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Facial hidratante<\/div>\n <div class=\"sc-svc-desc\">45 min \u00b7 \u00c1cido hialur\u00f3nico \u00b7 Piel radiante<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$98.000<\/div>\n <\/div>\n\n <div class=\"sc-cat-label\">Terapias<\/div>\n\n <div class=\"sc-service-item\" data-id=\"aromaterapia\" data-price=\"80000\" data-name=\"Aromaterapia\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83c\udf38<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Aromaterapia<\/div>\n <div class=\"sc-svc-desc\">40 min \u00b7 Aceites bot\u00e1nicos \u00b7 Equilibrio emocional<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$80.000<\/div>\n <\/div>\n\n <div class=\"sc-service-item\" data-id=\"meditacion\" data-price=\"65000\" data-name=\"Meditaci\u00f3n guiada\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83e\uddd8<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Meditaci\u00f3n guiada<\/div>\n <div class=\"sc-svc-desc\">30 min \u00b7 Mindfulness \u00b7 Reducci\u00f3n del estr\u00e9s<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$65.000<\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"sc-card\">\n <div class=\"sc-card-header\">\n <div class=\"sc-card-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2E8B7E\" stroke-width=\"2\" stroke-linecap=\"round\">\n <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"sc-card-title\">Paquetes con descuento<\/div>\n <\/div>\n <\/div>\n <div class=\"sc-card-body\">\n <div class=\"sc-packages\">\n\n \n <div class=\"sc-pkg\"\n data-pkg=\"relajacion\"\n data-services=\"masaje-relajante,aromaterapia\"\n data-discount=\"10\"\n data-original=\"200000\"\n data-final=\"180000\">\n <div class=\"sc-pkg-active-chip\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-pkg-emoji\">\ud83c\udf3f<\/div>\n <div class=\"sc-pkg-info\">\n <div class=\"sc-pkg-name\">Relajaci\u00f3n total<\/div>\n <div class=\"sc-pkg-services\">Masaje relajante + Aromaterapia<\/div>\n <\/div>\n <div class=\"sc-pkg-right\">\n <span class=\"sc-pkg-badge\">-10%<\/span>\n <span class=\"sc-pkg-price\">$180.000<\/span>\n <span class=\"sc-pkg-original\">$200.000<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"sc-pkg\"\n data-pkg=\"estetica\"\n data-services=\"facial-revitalizante,facial-hidratante\"\n data-discount=\"15\"\n data-original=\"208000\"\n data-final=\"176800\">\n <div class=\"sc-pkg-active-chip\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-pkg-emoji\">\u2728<\/div>\n <div class=\"sc-pkg-info\">\n <div class=\"sc-pkg-name\">Est\u00e9tica completa<\/div>\n <div class=\"sc-pkg-services\">Facial revitalizante + Facial hidratante<\/div>\n <\/div>\n <div class=\"sc-pkg-right\">\n <span class=\"sc-pkg-badge\">-15%<\/span>\n <span class=\"sc-pkg-price\">$176.800<\/span>\n <span class=\"sc-pkg-original\">$208.000<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"sc-pkg\"\n data-pkg=\"bienestar\"\n data-services=\"masaje-relajante,reflexologia,aromaterapia\"\n data-discount=\"20\"\n data-original=\"295000\"\n data-final=\"236000\">\n <div class=\"sc-pkg-active-chip\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-pkg-emoji\">\ud83d\udc86<\/div>\n <div class=\"sc-pkg-info\">\n <div class=\"sc-pkg-name\">Bienestar hol\u00edstico<\/div>\n <div class=\"sc-pkg-services\">Masaje relajante + Reflexolog\u00eda + Aromaterapia<\/div>\n <\/div>\n <div class=\"sc-pkg-right\">\n <span class=\"sc-pkg-badge\">-20%<\/span>\n <span class=\"sc-pkg-price\">$236.000<\/span>\n <span class=\"sc-pkg-original\">$295.000<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"sc-right\">\n <div class=\"sc-summary-card\">\n\n <div class=\"sc-summary-header\">\n <div class=\"sc-summary-eyebrow\">Tu selecci\u00f3n<\/div>\n <div class=\"sc-summary-title\">Resumen de experiencia<\/div>\n <\/div>\n\n <div class=\"sc-summary-body\">\n\n \n <div class=\"sc-selected-list\" id=\"scSelectedList\">\n <div class=\"sc-selected-empty\" id=\"scEmptyState\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/>\n <path d=\"M12 8v4M12 16h.01\"\/>\n <\/svg>\n Selecciona servicios o elige un paquete para comenzar\n <\/div>\n <\/div>\n\n <div class=\"sc-divider\"><\/div>\n\n \n <div class=\"sc-total-row\">\n <span class=\"sc-total-label\">Subtotal<\/span>\n <span class=\"sc-total-val\" id=\"scSubtotal\">$0<\/span>\n <\/div>\n\n \n <div class=\"sc-discount-row\" id=\"scDiscountRow\">\n <span class=\"sc-discount-label\" id=\"scDiscountLabel\">Descuento paquete<\/span>\n <span class=\"sc-discount-val\" id=\"scDiscountVal\">\u2014<\/span>\n <\/div>\n\n \n <div class=\"sc-grand-total\">\n <span class=\"sc-grand-label\">Total<\/span>\n <span class=\"sc-grand-price\" id=\"scGrandTotal\">$0<\/span>\n <\/div>\n\n \n <div class=\"sc-savings-badge\" id=\"scSavingsBadge\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z\"\/><\/svg>\n <span id=\"scSavingsText\">Est\u00e1s ahorrando $0<\/span>\n <\/div>\n\n <div class=\"sc-microcopy\">\n Precios en pesos colombianos (COP)<br>\n Incluye IVA \u00b7 Sujeto a disponibilidad\n <\/div>\n\n \n <button class=\"sc-cta\" id=\"scReservarBtn\" disabled onclick=\"scOpenModal()\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\/><\/svg>\n Reservar ahora\n <\/button>\n\n <div class=\"sc-trust\">\n <svg viewBox=\"0 0 24 24\"><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 Sin pago anticipado \u00b7 Confirmamos en menos de 2 horas\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n\n<div class=\"sc-modal-overlay\" id=\"scModalOverlay\">\n <div class=\"sc-modal\" id=\"scModal\">\n\n <div class=\"sc-modal-header\">\n <div class=\"sc-modal-header-eye\">Confirma tu reserva<\/div>\n <h3>Reserva tu momento<\/h3>\n <button class=\"sc-modal-close\" onclick=\"scCloseModal()\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <\/div>\n\n <div class=\"sc-modal-body\">\n\n \n <div id=\"scModalForm\">\n \n <div class=\"sc-modal-summary\">\n <div class=\"sc-modal-summary-label\">Servicios seleccionados<\/div>\n <div class=\"sc-modal-items\" id=\"scModalItems\"><\/div>\n <div class=\"sc-modal-total-row\">\n <span class=\"sc-modal-total-label\">Total a pagar<\/span>\n <span class=\"sc-modal-total-price\" id=\"scModalTotal\"><\/span>\n <\/div>\n <\/div>\n\n \n <label class=\"sc-modal-field-label\">Elige fecha y hora de tu cita<\/label>\n <input type=\"datetime-local\" class=\"sc-modal-input\" id=\"scDateTime\" step=\"1800\">\n\n \n <label class=\"sc-modal-field-label\">Tu nombre<\/label>\n <input type=\"text\" class=\"sc-modal-input\" id=\"scNombre\" placeholder=\"\u00bfC\u00f3mo te llamamos?\">\n\n <div class=\"sc-modal-actions\">\n <button class=\"sc-modal-confirm\" onclick=\"scConfirmarReserva()\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 6L9 17l-5-5\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" fill=\"none\"\/><\/svg>\n Confirmar reserva\n <\/button>\n <button class=\"sc-modal-cancel\" onclick=\"scCloseModal()\">Cancelar<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"sc-modal-success\" id=\"scModalSuccess\">\n <div class=\"sc-modal-success-icon\">\ud83c\udf3f<\/div>\n <h4>\u00a1Reserva confirmada!<\/h4>\n <p>Te contactaremos en menos de <strong>2 horas<\/strong> para confirmar tu cita.<br>\u00a1Prep\u00e1rate para una experiencia \u00fanica!<\/p>\n <\/div>\n\n <\/div>\n <\/div>\n<\/div>\n\n\n\n<script>\n(function(){\n\n \/\/ \u2500\u2500\u2500 CONFIGURACI\u00d3N \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 BOOKING_URL = ''; \/\/ Pega aqu\u00ed tu URL de pasarela\/sistema de reservas\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n const state = {\n checked: new Set(), \/\/ IDs de servicios marcados\n activePkg: null, \/\/ paquete activo\n discount: 0, \/\/ porcentaje de descuento\n pkgModified: false, \/\/ usuario modific\u00f3 checks tras elegir paquete\n };\n\n \/\/ Mapa de servicios { id: { name, price } }\n const SERVICES = {};\n document.querySelectorAll('.sc-service-item').forEach(el => {\n SERVICES[el.dataset.id] = {\n name: el.dataset.name,\n price: parseInt(el.dataset.price),\n };\n });\n\n \/\/ \u2500\u2500\u2500 TOGGLE DE SERVICIO \u2500\u2500\u2500\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('.sc-service-item').forEach(el => {\n el.addEventListener('click', () => {\n const id = el.dataset.id;\n if (state.checked.has(id)) {\n state.checked.delete(id);\n el.classList.remove('checked');\n } else {\n state.checked.add(id);\n el.classList.add('checked');\n }\n \/\/ Si hay paquete activo y el usuario lo modifica, anular descuento\n if (state.activePkg !== null) {\n state.pkgModified = true;\n state.activePkg = null;\n state.discount = 0;\n document.querySelectorAll('.sc-pkg').forEach(p => p.classList.remove('active'));\n }\n render();\n });\n });\n\n \/\/ \u2500\u2500\u2500 SELECCI\u00d3N DE PAQUETE \u2500\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('.sc-pkg').forEach(pkg => {\n pkg.addEventListener('click', () => {\n const services = pkg.dataset.services.split(',');\n const discount = parseInt(pkg.dataset.discount);\n const pkgId = pkg.dataset.pkg;\n\n \/\/ Si ya est\u00e1 activo, desactivar\n if (state.activePkg === pkgId) {\n state.activePkg = null;\n state.discount = 0;\n state.checked.clear();\n document.querySelectorAll('.sc-service-item').forEach(el => el.classList.remove('checked'));\n document.querySelectorAll('.sc-pkg').forEach(p => p.classList.remove('active'));\n render();\n return;\n }\n\n \/\/ Activar paquete\n state.activePkg = pkgId;\n state.discount = discount;\n state.pkgModified = false;\n\n \/\/ Marcar solo los servicios del paquete\n state.checked.clear();\n document.querySelectorAll('.sc-service-item').forEach(el => el.classList.remove('checked'));\n services.forEach(sId => {\n state.checked.add(sId);\n const el = document.querySelector(`.sc-service-item[data-id=\"${sId}\"]`);\n if (el) el.classList.add('checked');\n });\n\n \/\/ Activar card visual\n document.querySelectorAll('.sc-pkg').forEach(p => p.classList.remove('active'));\n pkg.classList.add('active');\n\n render();\n });\n });\n\n \/\/ \u2500\u2500\u2500 RENDER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 fmt(n) {\n return '$' + n.toLocaleString('es-CO');\n }\n\n function render() {\n const ids = [...state.checked];\n\n \/\/ Subtotal\n const subtotal = ids.reduce((acc, id) => acc + (SERVICES[id]?.price || 0), 0);\n\n \/\/ Descuento\n const discountAmt = state.discount > 0 ? Math.round(subtotal * state.discount \/ 100) : 0;\n const total = subtotal - discountAmt;\n\n \/\/ \u2500\u2500 Panel lateral \u2500\u2500\n const listEl = document.getElementById('scSelectedList');\n const emptyEl = document.getElementById('scEmptyState');\n\n listEl.innerHTML = '';\n\n if (ids.length === 0) {\n listEl.appendChild(createEmptyState());\n } else {\n ids.forEach(id => {\n const svc = SERVICES[id];\n if (!svc) return;\n const row = document.createElement('div');\n row.className = 'sc-selected-row';\n row.innerHTML = `<span class=\"sc-selected-name\">${svc.name}<\/span><span class=\"sc-selected-val\">${fmt(svc.price)}<\/span>`;\n listEl.appendChild(row);\n });\n }\n\n \/\/ Subtotal\n document.getElementById('scSubtotal').textContent = fmt(subtotal);\n\n \/\/ Descuento\n const discRow = document.getElementById('scDiscountRow');\n if (discountAmt > 0) {\n discRow.style.display = 'flex';\n document.getElementById('scDiscountLabel').textContent = `Descuento paquete (${state.discount}%)`;\n document.getElementById('scDiscountVal').textContent = `- ${fmt(discountAmt)}`;\n } else {\n discRow.style.display = 'none';\n }\n\n \/\/ Total animado\n animateTotal(fmt(total));\n\n \/\/ Badge ahorro\n const savingsBadge = document.getElementById('scSavingsBadge');\n if (discountAmt > 0) {\n savingsBadge.classList.add('visible');\n document.getElementById('scSavingsText').textContent = `Est\u00e1s ahorrando ${fmt(discountAmt)}`;\n } else {\n savingsBadge.classList.remove('visible');\n }\n\n \/\/ Habilitar CTA\n document.getElementById('scReservarBtn').disabled = ids.length === 0;\n\n \/\/ Guardar para modal\n window._scTotal = total;\n window._scSubtotal = subtotal;\n window._scDiscount = discountAmt;\n }\n\n function createEmptyState() {\n const div = document.createElement('div');\n div.className = 'sc-selected-empty';\n div.innerHTML = `\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/>\n <path d=\"M12 8v4M12 16h.01\"\/>\n <\/svg>\n Selecciona servicios o elige un paquete para comenzar`;\n return div;\n }\n\n \/\/ Animaci\u00f3n del n\u00famero total\n let animTimeout;\n function animateTotal(newText) {\n const el = document.getElementById('scGrandTotal');\n clearTimeout(animTimeout);\n el.classList.add('animating');\n animTimeout = setTimeout(() => {\n el.textContent = newText;\n el.classList.remove('animating');\n }, 150);\n }\n\n \/\/ \u2500\u2500\u2500 MODAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.scOpenModal = function() {\n const ids = [...state.checked];\n if (ids.length === 0) return;\n\n \/\/ Poblar \u00edtems del modal\n const itemsEl = document.getElementById('scModalItems');\n itemsEl.innerHTML = '';\n ids.forEach(id => {\n const svc = SERVICES[id];\n if (!svc) return;\n const row = document.createElement('div');\n row.className = 'sc-modal-item';\n row.innerHTML = `<span>${svc.name}<\/span><span class=\"sc-modal-item-price\">${fmt(svc.price)}<\/span>`;\n itemsEl.appendChild(row);\n });\n\n \/\/ Si hay descuento, agregar fila\n if (window._scDiscount > 0) {\n const discRow = document.createElement('div');\n discRow.className = 'sc-modal-item';\n discRow.innerHTML = `<span style=\"color:var(--spa-accent)\">Descuento (${state.discount}%)<\/span><span class=\"sc-modal-item-price\" style=\"color:var(--spa-accent)\">- ${fmt(window._scDiscount)}<\/span>`;\n itemsEl.appendChild(discRow);\n }\n\n document.getElementById('scModalTotal').textContent = fmt(window._scTotal);\n\n \/\/ Fecha m\u00ednima = hoy\n const now = new Date();\n const pad = n => String(n).padStart(2, '0');\n document.getElementById('scDateTime').min = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}T00:00`;\n\n \/\/ Mostrar formulario (ocultar \u00e9xito si ven\u00eda de antes)\n document.getElementById('scModalForm').style.display = 'block';\n document.getElementById('scModalSuccess').style.display = 'none';\n\n document.getElementById('scModalOverlay').classList.add('open');\n document.body.style.overflow = 'hidden';\n };\n\n window.scCloseModal = function() {\n document.getElementById('scModalOverlay').classList.remove('open');\n document.body.style.overflow = '';\n };\n\n \/\/ Cerrar al click fuera del modal\n document.getElementById('scModalOverlay').addEventListener('click', function(e) {\n if (e.target === this) scCloseModal();\n });\n\n window.scConfirmarReserva = function() {\n const fecha = document.getElementById('scDateTime').value;\n const nombre = document.getElementById('scNombre').value.trim();\n\n if (!fecha) { alert('Por favor selecciona una fecha y hora para tu cita.'); return; }\n if (!nombre) { alert('Por favor ingresa tu nombre.'); return; }\n\n const fechaFormateada = new Date(fecha).toLocaleString('es-CO', {\n weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',\n hour: '2-digit', minute: '2-digit'\n });\n\n \/\/ \u2500\u2500 Preparar payload para BOOKING_URL \u2500\u2500\n const payload = {\n nombre,\n fecha: fechaFormateada,\n servicios: [...state.checked].map(id => SERVICES[id]?.name).join(', '),\n total: window._scTotal,\n };\n\n if (BOOKING_URL) {\n \/\/ Env\u00edo real a pasarela \/ sistema de reservas\n fetch(BOOKING_URL, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload),\n }).catch(err => console.warn('Booking error:', err));\n }\n\n \/\/ Mostrar pantalla de \u00e9xito\n document.getElementById('scModalForm').style.display = 'none';\n document.getElementById('scModalSuccess').style.display = 'block';\n\n \/\/ Limpiar estado despu\u00e9s de 4 s y cerrar modal\n setTimeout(() => {\n scCloseModal();\n \/\/ Reset\n state.checked.clear();\n state.activePkg = null;\n state.discount = 0;\n document.querySelectorAll('.sc-service-item').forEach(el => el.classList.remove('checked'));\n document.querySelectorAll('.sc-pkg').forEach(p => p.classList.remove('active'));\n render();\n }, 4000);\n };\n\n \/\/ \u2500\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\n render();\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-2d5a8df e-con-full e-flex e-con e-parent\" data-id=\"2d5a8df\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-86b9f65 elementor-widget elementor-widget-html\" data-id=\"86b9f65\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Testimonios SERENZA - Carrusel Autom\u00e1tico<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-bg-soft: #EFEAE4;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 24px;\n --spa-shadow: 0 15px 35px rgba(0,0,0,0.05);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .spa-testimonials {\n background: var(--spa-bg);\n padding: 5rem 2rem;\n font-family: var(--spa-font-body);\n }\n\n .spa-container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .spa-section-header {\n text-align: center;\n margin-bottom: 3rem;\n }\n\n .spa-section-title {\n font-family: var(--spa-font-title);\n font-size: 2.6rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n margin-bottom: 0.5rem;\n }\n\n .spa-section-subtitle {\n font-size: 1rem;\n color: var(--spa-text);\n opacity: 0.7;\n }\n\n \/* Carrusel sin controles *\/\n .carousel-container {\n position: relative;\n max-width: 900px;\n margin: 0 auto;\n overflow: hidden;\n border-radius: var(--spa-radius);\n box-shadow: var(--spa-shadow);\n background: var(--spa-white);\n }\n\n .carousel-slides {\n display: flex;\n transition: transform 0.5s ease-in-out;\n }\n\n .testimonial-card {\n flex: 0 0 100%;\n padding: 2.5rem;\n text-align: center;\n background: var(--spa-white);\n }\n\n .testimonial-avatar {\n width: 80px;\n height: 80px;\n margin: 0 auto 1.5rem;\n background: var(--spa-bg-soft);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--spa-gold-light);\n }\n\n .testimonial-avatar svg {\n width: 45px;\n height: 45px;\n fill: var(--spa-primary);\n }\n\n .testimonial-text {\n font-size: 1.1rem;\n line-height: 1.6;\n color: var(--spa-text);\n max-width: 600px;\n margin: 0 auto 1.5rem;\n font-style: italic;\n }\n\n .testimonial-name {\n font-family: var(--spa-font-title);\n font-size: 1.2rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n margin-bottom: 0.25rem;\n }\n\n .testimonial-role {\n font-size: 0.85rem;\n color: var(--spa-gold);\n letter-spacing: 0.5px;\n }\n\n @media (max-width: 768px) {\n .testimonial-card { padding: 1.8rem; }\n .testimonial-text { font-size: 1rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<section class=\"spa-testimonials\">\n <div class=\"spa-container\">\n <div class=\"spa-section-header\">\n <h2 class=\"spa-section-title\">Lo que dicen de nosotras<\/h2>\n <p class=\"spa-section-subtitle\">Experiencias reales de bienestar y transformaci\u00f3n<\/p>\n <\/div>\n\n <div class=\"carousel-container\">\n <div class=\"carousel-slides\" id=\"slidesContainer\">\n \n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El masaje relajante fue una experiencia sublime. Sal\u00ed renovada, sin estr\u00e9s. Definitivamente volver\u00e9 cada mes.\"<\/p>\n <h4 class=\"testimonial-name\">Mar\u00eda Fernanda G.<\/h4>\n <p class=\"testimonial-role\">Cliente frecuente<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El facial revitalizante dej\u00f3 mi piel radiante. Los productos org\u00e1nicos y la atenci\u00f3n personalizada marcan la diferencia.\"<\/p>\n <h4 class=\"testimonial-name\">Laura Jim\u00e9nez<\/h4>\n <p class=\"testimonial-role\">Primera vez<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El ambiente es pura calma. La reflexolog\u00eda podal me ayud\u00f3 con la fatiga. Un oasis en la ciudad.\"<\/p>\n <h4 class=\"testimonial-name\">Andrea R\u00edos<\/h4>\n <p class=\"testimonial-role\">Recomendado por amiga<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El paquete de bienestar integral me cambi\u00f3 la semana. Terapias completas en un solo lugar. Excelentes terapeutas.\"<\/p>\n <h4 class=\"testimonial-name\">Carolina M\u00e9ndez<\/h4>\n <p class=\"testimonial-role\">Socia Serenza<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"Atenci\u00f3n impecable, instalaciones hermosas. La aromaterapia me ayud\u00f3 a dormir mejor. 100% recomendado.\"<\/p>\n <h4 class=\"testimonial-name\">Daniela Castro<\/h4>\n <p class=\"testimonial-role\">Cliente frecuente<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El tratamiento facial con productos org\u00e1nicos dej\u00f3 mi rostro luminoso. El espacio es muy relajante, volver\u00e9.\"<\/p>\n <h4 class=\"testimonial-name\">Valentina Su\u00e1rez<\/h4>\n <p class=\"testimonial-role\">Recomendado<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El masaje descontracturante fue justo lo que necesitaba. Profesionales muy atentos y respetuosos.\"<\/p>\n <h4 class=\"testimonial-name\">Isabel Cristina L.<\/h4>\n <p class=\"testimonial-role\">Atleta<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"La experiencia completa de spa me hizo sentir renovada. Definitivamente el mejor lugar de bienestar en Bogot\u00e1.\"<\/p>\n <h4 class=\"testimonial-name\">Paula Andrea G.<\/h4>\n <p class=\"testimonial-role\">Embajadora de marca<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n const slides = document.querySelectorAll('.testimonial-card');\n const slidesContainer = document.getElementById('slidesContainer');\n let currentIndex = 0;\n let intervalId = null;\n const totalSlides = slides.length;\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 }\n\n function nextSlide() {\n goToSlide(currentIndex + 1);\n }\n\n function startAutoSlide() {\n if (intervalId) clearInterval(intervalId);\n intervalId = setInterval(nextSlide, 5000);\n }\n\n function stopAutoSlide() {\n if (intervalId) {\n clearInterval(intervalId);\n intervalId = null;\n }\n }\n\n const carouselContainer = document.querySelector('.carousel-container');\n carouselContainer.addEventListener('mouseenter', stopAutoSlide);\n carouselContainer.addEventListener('mouseleave', startAutoSlide);\n\n startAutoSlide();\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-75102d2 e-con-full e-flex e-con e-parent\" data-id=\"75102d2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d7b078 elementor-widget elementor-widget-html\" data-id=\"7d7b078\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Footer SERENZA<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-bg-soft: #EFEAE4;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 16px;\n --spa-shadow: 0 -10px 30px rgba(0,0,0,0.03);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .spa-footer {\n background: var(--spa-white);\n border-top: 1px solid rgba(0,0,0,0.05);\n padding: 4rem 2rem 2rem;\n font-family: var(--spa-font-body);\n color: var(--spa-text);\n }\n\n .spa-container {\n max-width: 1280px;\n margin: 0 auto;\n }\n\n .footer-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2rem;\n margin-bottom: 3rem;\n }\n\n \/* Logo y marca *\/\n .footer-brand .footer-logo {\n max-width: 160px;\n height: auto;\n margin-bottom: 1rem;\n }\n\n .footer-brand .brand-name {\n font-family: var(--spa-font-title);\n font-size: 1.6rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n margin-bottom: 0.5rem;\n }\n\n .footer-brand .brand-desc {\n font-size: 0.9rem;\n line-height: 1.5;\n opacity: 0.75;\n }\n\n .footer-col h4 {\n font-family: var(--spa-font-title);\n font-size: 1.2rem;\n font-weight: 600;\n color: var(--spa-primary);\n margin-bottom: 1.2rem;\n position: relative;\n display: inline-block;\n }\n\n .footer-col h4::after {\n content: '';\n position: absolute;\n bottom: -6px;\n left: 0;\n width: 30px;\n height: 2px;\n background: var(--spa-gold);\n }\n\n .footer-links {\n list-style: none;\n }\n\n .footer-links li {\n margin-bottom: 0.7rem;\n }\n\n .footer-links a {\n text-decoration: none;\n color: var(--spa-text);\n font-size: 0.9rem;\n transition: color 0.2s, padding-left 0.2s;\n display: inline-block;\n opacity: 0.8;\n }\n\n .footer-links a:hover {\n color: var(--spa-primary);\n padding-left: 5px;\n opacity: 1;\n }\n\n .contact-info p {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9rem;\n margin-bottom: 0.8rem;\n opacity: 0.8;\n }\n\n .contact-info svg {\n width: 18px;\n height: 18px;\n stroke: var(--spa-primary);\n stroke-width: 1.5;\n fill: none;\n flex-shrink: 0;\n }\n\n .social-links {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .social-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 38px;\n height: 38px;\n background: var(--spa-bg-soft);\n border-radius: 50%;\n transition: all 0.3s;\n }\n\n .social-icon svg {\n width: 20px;\n height: 20px;\n stroke: var(--spa-primary);\n stroke-width: 1.5;\n fill: none;\n }\n\n .social-icon:hover {\n background: var(--spa-primary);\n transform: translateY(-3px);\n }\n\n .social-icon:hover svg {\n stroke: white;\n }\n\n .hours p {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.8;\n display: flex;\n justify-content: space-between;\n }\n\n .hours strong {\n color: var(--spa-primary-dark);\n font-weight: 500;\n }\n\n .footer-bottom {\n text-align: center;\n padding-top: 2rem;\n border-top: 1px solid rgba(0,0,0,0.05);\n font-size: 0.8rem;\n opacity: 0.7;\n letter-spacing: 0.3px;\n }\n\n @media (max-width: 1023px) {\n .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }\n .spa-footer { padding: 3rem 1.5rem 1.5rem; }\n }\n\n @media (max-width: 767px) {\n .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }\n .footer-bottom { font-size: 0.7rem; }\n .hours p { justify-content: flex-start; gap: 1rem; }\n .footer-brand .footer-logo { max-width: 130px; }\n }\n<\/style>\n<\/head>\n<body>\n\n<footer class=\"spa-footer\">\n <div class=\"spa-container\">\n <div class=\"footer-grid\">\n \n <div class=\"footer-brand\">\n <img decoding=\"async\" class=\"footer-logo\" src=\"https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Serenza.png\" alt=\"Serenza Spa & Bienestar\">\n <div class=\"brand-name\">SERENZA<\/div>\n <div class=\"brand-desc\">Spa & Bienestar \u00b7 Un espacio donde la calma y la sofisticaci\u00f3n se encuentran para restaurar tu equilibrio interior.<\/div>\n <\/div>\n\n \n <div class=\"footer-col\">\n <h4>Explora<\/h4>\n <ul class=\"footer-links\">\n <li><a href=\"#\">Inicio<\/a><\/li>\n <li><a href=\"#servicios\">Servicios<\/a><\/li>\n <li><a href=\"#\">Experiencias<\/a><\/li>\n <li><a href=\"#\">Testimonios<\/a><\/li>\n <li><a href=\"#\">Contacto<\/a><\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"footer-col\">\n <h4>Contacto<\/h4>\n <div class=\"contact-info\">\n <p>\n <svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n Calle de la Serenidad #123, Bogot\u00e1\n <\/p>\n <p>\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n +57 (601) 123 4567\n <\/p>\n <p>\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n hola@serenzaspa.com\n <\/p>\n <\/div>\n <div class=\"hours\">\n <h4 style=\"margin-top: 1rem;\">Horario<\/h4>\n <p><strong>Lun - Vie:<\/strong> 9:00 am \u2013 8:00 pm<\/p>\n <p><strong>S\u00e1bado:<\/strong> 10:00 am \u2013 6:00 pm<\/p>\n <p><strong>Domingo:<\/strong> Cerrado<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"footer-col\">\n <h4>S\u00edguenos<\/h4>\n <div class=\"social-links\">\n <a href=\"#\" class=\"social-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"4\" ry=\"4\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/><\/svg><\/a>\n <a href=\"#\" class=\"social-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"social-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"social-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5\"\/><\/svg><\/a>\n <\/div>\n <p style=\"margin-top: 1.5rem; font-size: 0.8rem; opacity:0.7;\">#SerenzaBienestar<\/p>\n <\/div>\n <\/div>\n\n <div class=\"footer-bottom\">\n \u00a9 2026 SERENZA Spa & Bienestar. Todos los derechos reservados. | Dise\u00f1o con \u2661 para el bienestar integral. by dise\u00f1oweb.com - SNTECHNOLOGY SAS\n <\/div>\n <\/div>\n<\/footer>\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-e663b3d e-con-full e-flex e-con e-parent\" data-id=\"e663b3d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9035a61 elementor-widget elementor-widget-html\" data-id=\"9035a61\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Bot\u00f3n WhatsApp SERENZA - Icono oficial<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\n\n :root {\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-white: #FFFFFF;\n --spa-shadow: 0 10px 25px rgba(0,0,0,0.1);\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n .spa-whatsapp {\n position: fixed;\n bottom: 25px;\n right: 25px;\n z-index: 9999;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--spa-primary);\n border-radius: 50%;\n width: 60px;\n height: 60px;\n box-shadow: var(--spa-shadow);\n transition: all 0.3s ease;\n cursor: pointer;\n text-decoration: none;\n }\n\n .spa-whatsapp:hover {\n background-color: var(--spa-primary-dark);\n transform: scale(1.08);\n box-shadow: 0 15px 30px rgba(0,0,0,0.15);\n }\n\n \/* Icono oficial de WhatsApp (SVG est\u00e1ndar) *\/\n .spa-whatsapp svg {\n width: 34px;\n height: 34px;\n fill: white;\n }\n\n .spa-tooltip {\n position: absolute;\n right: 70px;\n background: var(--spa-white);\n color: var(--spa-primary-dark);\n font-family: var(--spa-font-body);\n font-size: 0.85rem;\n font-weight: 500;\n padding: 0.5rem 1rem;\n border-radius: 40px;\n white-space: nowrap;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s, visibility 0.2s;\n pointer-events: none;\n }\n\n .spa-whatsapp:hover .spa-tooltip {\n opacity: 1;\n visibility: visible;\n }\n\n @media (max-width: 767px) {\n .spa-whatsapp { width: 50px; height: 50px; bottom: 20px; right: 20px; }\n .spa-whatsapp svg { width: 28px; height: 28px; }\n .spa-tooltip { font-size: 0.75rem; right: 60px; padding: 0.4rem 0.8rem; }\n }\n<\/style>\n<\/head>\n<body>\n <a href=\"https:\/\/wa.me\/573001234567?text=Hola%20SERENZA%2C%20quiero%20reservar%20una%20cita%20y%20recibir%20m\u00e1s%20informaci\u00f3n.\" class=\"spa-whatsapp\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"WhatsApp\">\n \n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.84 3.1 1.29 4.81 1.29 5.46 0 9.91-4.45 9.91-9.91 0-5.46-4.45-9.91-9.91-9.91zm0 18.23c-1.5 0-2.96-.4-4.23-1.16l-.3-.18-3.12.82.84-3.05-.2-.32c-.82-1.33-1.26-2.87-1.26-4.44 0-4.62 3.76-8.38 8.38-8.38s8.38 3.76 8.38 8.38-3.76 8.38-8.38 8.38zm4.59-6.28c-.25-.12-1.47-.72-1.7-.8-.23-.09-.4-.12-.56.12-.16.24-.63.8-.77.96-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.92-1.18-.71-.63-1.19-1.41-1.33-1.65-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.16 1.69 2.58 4.09 3.62.57.25 1.02.4 1.37.51.57.18 1.09.15 1.5.09.46-.06 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.47-.28z\"\/>\n <\/svg>\n <span class=\"spa-tooltip\">\u00bfHablamos por WhatsApp?<\/span>\n <\/a>\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>Navbar SERENZA – Men\u00fa lateral derecho Reservar cita × Inicio Servicios Experiencias Galer\u00eda Testimonios Contacto × Reserva tu momento Elige […]<\/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-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":46,"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/pages\/10\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/media?parent=10"}],"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\nNavbar SERENZA - Men\u00fa lateral derecho<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-shadow: 0 10px 30px rgba(0,0,0,0.05);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: var(--spa-bg);\n font-family: var(--spa-font-body);\n min-height: 100vh;\n }\n\n \/* Navbar principal *\/\n .spa-navbar {\n width: 100%;\n background: var(--spa-white);\n box-shadow: var(--spa-shadow);\n position: relative;\n z-index: 1000;\n }\n\n .spa-container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 1rem 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .navbar-left { flex: 1; display: flex; justify-content: flex-start; }\n .navbar-center { flex: 1; display: flex; justify-content: center; }\n .navbar-right { flex: 1; display: flex; justify-content: flex-end; }\n\n \/* Bot\u00f3n CTA *\/\n .spa-btn {\n display: inline-block;\n font-family: var(--spa-font-body);\n font-weight: 500;\n font-size: 0.9rem;\n padding: 0.7rem 1.5rem;\n border-radius: 40px;\n text-decoration: none;\n transition: all 0.3s ease;\n cursor: pointer;\n background: var(--spa-primary);\n color: white;\n border: none;\n }\n\n .calendar-icon {\n display: none;\n background: var(--spa-primary);\n padding: 0.7rem;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n\n .calendar-icon svg { width: 20px; height: 20px; fill: white; }\n\n .spa-btn:hover, .calendar-icon:hover {\n background: var(--spa-primary-dark);\n transform: translateY(-2px);\n }\n\n @media (max-width: 1023px) {\n .spa-btn-text { display: none; }\n .calendar-icon { display: flex; }\n }\n\n \/* Logo *\/\n .logo img {\n max-width: 220px;\n max-height: 80px;\n object-fit: contain;\n }\n @media (max-width: 1023px) { .logo img { max-width: 180px; max-height: 70px; } }\n @media (max-width: 767px) { .logo img { max-width: 150px; max-height: 60px; } }\n\n \/* Bot\u00f3n hamburguesa *\/\n .hamburger {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n width: 30px;\n height: 24px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n z-index: 1001;\n position: relative;\n }\n .hamburger span {\n width: 100%;\n height: 2px;\n background: var(--spa-primary);\n border-radius: 2px;\n transition: 0.2s;\n }\n\n \/* Overlay del men\u00fa lateral (fondo oscuro) *\/\n .menu-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0,0,0,0.5);\n z-index: 2000;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0.3s, opacity 0.3s;\n }\n .menu-overlay.open {\n visibility: visible;\n opacity: 1;\n }\n\n \/* Panel lateral derecho *\/\n .side-menu {\n position: fixed;\n top: 0;\n right: -100%;\n width: 300px;\n height: 100%;\n background: var(--spa-white);\n box-shadow: -5px 0 30px rgba(0,0,0,0.1);\n transition: right 0.4s ease;\n z-index: 2001;\n display: flex;\n flex-direction: column;\n padding: 2rem 1.5rem;\n }\n .menu-overlay.open .side-menu {\n right: 0;\n }\n\n \/* Bot\u00f3n cerrar (X) *\/\n .close-menu {\n align-self: flex-end;\n font-size: 2rem;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--spa-primary);\n margin-bottom: 2rem;\n line-height: 1;\n }\n\n \/* Lista de enlaces *\/\n .menu-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n }\n .menu-list li a {\n text-decoration: none;\n font-family: var(--spa-font-body);\n font-weight: 500;\n font-size: 1.2rem;\n color: var(--spa-text);\n transition: color 0.2s;\n display: block;\n padding: 0.5rem 0;\n border-bottom: 1px solid rgba(0,0,0,0.05);\n }\n .menu-list li a:hover {\n color: var(--spa-primary);\n padding-left: 0.5rem;\n }\n\n \/* Modal de reserva (mismo que ya existe) *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0,0,0,0.4);\n z-index: 3000;\n justify-content: center;\n align-items: center;\n }\n .modal-content {\n background: var(--spa-white);\n max-width: 450px;\n width: 90%;\n padding: 2rem;\n border-radius: 12px;\n text-align: center;\n border-top: 3px solid var(--spa-gold);\n }\n .modal-content h3 {\n font-family: var(--spa-font-title);\n color: var(--spa-primary);\n margin-bottom: 0.5rem;\n }\n .modal-content input {\n width: 100%;\n padding: 0.8rem;\n margin: 1rem 0;\n border-radius: 30px;\n border: 1px solid var(--spa-nude-dark);\n }\n .modal-buttons { display: flex; gap: 1rem; justify-content: center; }\n .modal-btn { padding: 0.6rem 1.2rem; border-radius: 40px; border: none; cursor: pointer; }\n .modal-btn.confirm { background: var(--spa-primary); color: white; }\n .modal-btn.cancel { background: transparent; border: 1px solid var(--spa-gold); }\n .close-modal { float: right; font-size: 1.5rem; cursor: pointer; color: var(--spa-gold); }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"spa-navbar\">\n <div class=\"spa-container\">\n <div class=\"navbar-left\">\n <a href=\"#\" class=\"spa-btn spa-btn-text\" id=\"openModalBtn\">Reservar cita<\/a>\n <div class=\"calendar-icon\" id=\"openModalIcon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"navbar-center\">\n <div class=\"logo\">\n <img decoding=\"async\" src=\"https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Serenza.png\" alt=\"Serenza Spa\">\n <\/div>\n <\/div>\n <div class=\"navbar-right\">\n <button class=\"hamburger\" id=\"menuToggle\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"menuOverlay\" class=\"menu-overlay\">\n <div class=\"side-menu\">\n <button class=\"close-menu\" id=\"closeMenuBtn\">×<\/button>\n <ul class=\"menu-list\">\n <li><a href=\"#\">Inicio<\/a><\/li>\n <li><a href=\"#servicios\">Servicios<\/a><\/li>\n <li><a href=\"#\">Experiencias<\/a><\/li>\n <li><a href=\"#\">Galer\u00eda<\/a><\/li>\n <li><a href=\"#\">Testimonios<\/a><\/li>\n <li><a href=\"#\">Contacto<\/a><\/li>\n <\/ul>\n <\/div>\n<\/div>\n\n\n<div id=\"bookingModal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"close-modal\">×<\/span>\n <h3>Reserva tu momento<\/h3>\n <p>Elige fecha y hora<\/p>\n <input type=\"datetime-local\" id=\"appointmentDateTime\" min=\"\" step=\"1800\">\n <div class=\"modal-buttons\">\n <button class=\"modal-btn confirm\" id=\"confirmBooking\">Confirmar<\/button>\n <button class=\"modal-btn cancel\" id=\"cancelModal\">Cancelar<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Elementos del men\u00fa lateral\n const menuOverlay = document.getElementById('menuOverlay');\n const menuToggle = document.getElementById('menuToggle');\n const closeMenuBtn = document.getElementById('closeMenuBtn');\n const menuLinks = document.querySelectorAll('.menu-list a');\n\n function openMenu() {\n menuOverlay.classList.add('open');\n }\n function closeMenu() {\n menuOverlay.classList.remove('open');\n }\n\n menuToggle.addEventListener('click', openMenu);\n closeMenuBtn.addEventListener('click', closeMenu);\n menuLinks.forEach(link => link.addEventListener('click', closeMenu));\n menuOverlay.addEventListener('click', (e) => {\n if (e.target === menuOverlay) closeMenu();\n });\n\n \/\/ Modal reserva\n const modal = document.getElementById('bookingModal');\n const openModalBtns = [document.getElementById('openModalBtn'), document.getElementById('openModalIcon')];\n const closeModalSpan = document.querySelector('.close-modal');\n const cancelModal = document.getElementById('cancelModal');\n const confirmBtn = document.getElementById('confirmBooking');\n const dateInput = document.getElementById('appointmentDateTime');\n\n const hoy = new Date();\n const a\u00f1o = hoy.getFullYear();\n const mes = String(hoy.getMonth()+1).padStart(2,'0');\n const dia = String(hoy.getDate()).padStart(2,'0');\n dateInput.min = `${a\u00f1o}-${mes}-${dia}T00:00`;\n\n function abrirModal() { modal.style.display = 'flex'; }\n function cerrarModal() { modal.style.display = 'none'; }\n openModalBtns.forEach(btn => btn.addEventListener('click', abrirModal));\n closeModalSpan.addEventListener('click', cerrarModal);\n cancelModal.addEventListener('click', cerrarModal);\n window.addEventListener('click', (e) => { if(e.target === modal) cerrarModal(); });\n\n confirmBtn.addEventListener('click', () => {\n if(!dateInput.value) { alert('Selecciona fecha y hora'); return; }\n const fecha = new Date(dateInput.value).toLocaleString('es-ES');\n alert(`Reserva solicitada para: ${fecha}\\nTe contactaremos pronto.`);\n cerrarModal();\n dateInput.value = '';\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-ef5dc34 e-con-full e-flex e-con e-parent\" data-id=\"ef5dc34\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9814eb elementor-widget elementor-widget-html\" data-id=\"a9814eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Hero SERENZA<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-accent: #E88C8C;\n --spa-gold: #C9A46B;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 12px;\n --spa-shadow: 0 10px 30px rgba(0,0,0,0.05);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .spa-hero {\n width: 100%;\n min-height: 90vh;\n background-image: url('https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Hero-Serenza.png');\n background-size: cover;\n background-position: center 30%;\n background-repeat: no-repeat;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 4rem 2rem;\n }\n\n .spa-hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(248, 245, 240, 0.35);\n z-index: 1;\n }\n\n .spa-hero-content {\n max-width: 650px;\n position: relative;\n z-index: 2;\n background: rgba(255, 255, 255, 0.88);\n padding: 2.5rem 2rem;\n border-radius: var(--spa-radius);\n box-shadow: var(--spa-shadow);\n border-left: 3px solid var(--spa-gold);\n }\n\n .spa-hero-title {\n font-family: var(--spa-font-title);\n font-size: 3.2rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n line-height: 1.2;\n margin-bottom: 0.75rem;\n }\n\n .spa-hero-subtitle {\n font-family: var(--spa-font-body);\n font-size: 1.1rem;\n color: var(--spa-text);\n margin-bottom: 2rem;\n line-height: 1.5;\n }\n\n .spa-hero-buttons {\n display: flex;\n gap: 1.2rem;\n flex-wrap: wrap;\n }\n\n .spa-btn-primary, .spa-btn-secondary {\n display: inline-block;\n font-family: var(--spa-font-body);\n font-weight: 500;\n font-size: 0.95rem;\n padding: 0.8rem 1.8rem;\n border-radius: 40px;\n text-decoration: none;\n transition: all 0.3s ease;\n cursor: pointer;\n text-align: center;\n border: none;\n }\n\n .spa-btn-primary {\n background: var(--spa-primary);\n color: white;\n }\n .spa-btn-primary:hover {\n background: var(--spa-primary-dark);\n transform: translateY(-2px);\n }\n\n .spa-btn-secondary {\n background: transparent;\n color: var(--spa-primary);\n border: 1px solid var(--spa-primary);\n }\n .spa-btn-secondary:hover {\n background: var(--spa-primary-light);\n color: white;\n border-color: var(--spa-primary-light);\n transform: translateY(-2px);\n }\n\n \/* Modal (mismo estilo que navbar) *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0,0,0,0.4);\n z-index: 2000;\n justify-content: center;\n align-items: center;\n }\n\n .modal-content {\n background: var(--spa-white);\n max-width: 450px;\n width: 90%;\n padding: 2rem;\n border-radius: var(--spa-radius);\n text-align: center;\n border-top: 3px solid var(--spa-gold);\n }\n\n .modal-content h3 {\n font-family: var(--spa-font-title);\n color: var(--spa-primary);\n margin-bottom: 0.5rem;\n }\n\n .modal-content input {\n width: 100%;\n padding: 0.8rem;\n margin: 1rem 0;\n border-radius: 30px;\n border: 1px solid var(--spa-nude-dark);\n }\n\n .modal-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n }\n\n .modal-btn {\n padding: 0.6rem 1.2rem;\n border-radius: 40px;\n border: none;\n cursor: pointer;\n }\n\n .modal-btn.confirm {\n background: var(--spa-primary);\n color: white;\n }\n .modal-btn.cancel {\n background: transparent;\n border: 1px solid var(--spa-gold);\n }\n\n .close-modal {\n float: right;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--spa-gold);\n }\n\n @media (max-width: 1023px) {\n .spa-hero { min-height: 80vh; padding: 3rem 1.5rem; }\n .spa-hero-title { font-size: 2.5rem; }\n }\n @media (max-width: 767px) {\n .spa-hero { min-height: 70vh; align-items: center; }\n .spa-hero-content { padding: 1.8rem; }\n .spa-hero-title { font-size: 2rem; }\n .spa-btn-primary, .spa-btn-secondary { padding: 0.6rem 1.2rem; font-size: 0.85rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<section class=\"spa-hero\">\n <div class=\"spa-hero-content\">\n <h1 class=\"spa-hero-title\">Bienestar que transforma<\/h1>\n <p class=\"spa-hero-subtitle\">Relajaci\u00f3n profunda, est\u00e9tica consciente y terapias revitalizantes. Descubre un espacio donde tu bienestar es la prioridad.<\/p>\n <div class=\"spa-hero-buttons\">\n <a href=\"#servicios\" class=\"spa-btn-secondary\">Descubrir servicios<\/a>\n <button id=\"heroReservarBtn\" class=\"spa-btn-primary\">Reservar ahora<\/button>\n <\/div>\n <\/div>\n<\/section>\n\n<div id=\"heroBookingModal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"close-modal\">×<\/span>\n <h3>Reserva tu momento<\/h3>\n <p>Elige fecha y hora<\/p>\n <input type=\"datetime-local\" id=\"heroDateTime\" min=\"\" step=\"1800\">\n <div class=\"modal-buttons\">\n <button class=\"modal-btn confirm\" id=\"heroConfirmBooking\">Confirmar<\/button>\n <button class=\"modal-btn cancel\" id=\"heroCancelModal\">Cancelar<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n const heroModal = document.getElementById('heroBookingModal');\n const heroOpenBtn = document.getElementById('heroReservarBtn');\n const heroCloseSpan = heroModal.querySelector('.close-modal');\n const heroCancelBtn = document.getElementById('heroCancelModal');\n const heroConfirmBtn = document.getElementById('heroConfirmBooking');\n const heroDateTimeInput = document.getElementById('heroDateTime');\n\n const hoy = new Date();\n const a\u00f1o = hoy.getFullYear();\n const mes = String(hoy.getMonth() + 1).padStart(2,'0');\n const dia = String(hoy.getDate()).padStart(2,'0');\n heroDateTimeInput.min = `${a\u00f1o}-${mes}-${dia}T00:00`;\n\n function abrirHeroModal() { heroModal.style.display = 'flex'; }\n function cerrarHeroModal() { heroModal.style.display = 'none'; }\n\n heroOpenBtn.addEventListener('click', abrirHeroModal);\n heroCloseSpan.addEventListener('click', cerrarHeroModal);\n heroCancelBtn.addEventListener('click', cerrarHeroModal);\n window.addEventListener('click', (e) => { if(e.target === heroModal) cerrarHeroModal(); });\n\n heroConfirmBtn.addEventListener('click', () => {\n const valor = heroDateTimeInput.value;\n if (!valor) { alert('Selecciona fecha y hora'); return; }\n const fechaFormateada = new Date(valor).toLocaleString('es-ES');\n alert(`Reserva solicitada para: ${fechaFormateada}\\nTe contactaremos pronto.`);\n cerrarHeroModal();\n heroDateTimeInput.value = '';\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-7d7ed3d e-con-full e-flex e-con e-parent\" data-id=\"7d7ed3d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16d5f84 elementor-widget elementor-widget-html\" data-id=\"16d5f84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Servicios SERENZA<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-bg-soft: #EFEAE4;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 20px;\n --spa-shadow: 0 15px 35px rgba(0,0,0,0.05);\n --spa-shadow-hover: 0 25px 40px rgba(0,0,0,0.08);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .spa-services {\n background: var(--spa-bg);\n padding: 6rem 2rem;\n text-align: center;\n }\n\n .spa-container {\n max-width: 1280px;\n margin: 0 auto;\n }\n\n .spa-section-title {\n font-family: var(--spa-font-title);\n font-size: 2.8rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n margin-bottom: 1rem;\n letter-spacing: -0.02em;\n }\n\n .spa-section-subtitle {\n font-family: var(--spa-font-body);\n font-size: 1.1rem;\n color: var(--spa-text);\n max-width: 600px;\n margin: 0 auto 3.5rem auto;\n opacity: 0.75;\n }\n\n .services-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n }\n\n .service-card {\n background: var(--spa-white);\n border-radius: var(--spa-radius);\n overflow: hidden;\n transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);\n box-shadow: var(--spa-shadow);\n text-align: left;\n cursor: pointer;\n }\n\n .service-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--spa-shadow-hover);\n }\n\n .service-image {\n width: 100%;\n height: 260px;\n background-size: cover;\n background-position: center;\n transition: transform 0.5s ease;\n position: relative;\n }\n\n .service-card:hover .service-image {\n transform: scale(1.02);\n }\n\n .service-image::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(0deg, rgba(46,139,126,0.1) 0%, rgba(0,0,0,0.05) 100%);\n opacity: 0;\n transition: opacity 0.3s;\n }\n\n .service-card:hover .service-image::after {\n opacity: 1;\n }\n\n \/* Im\u00e1genes actualizadas *\/\n .img-masajes { background-image: url('https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Masajes000.png'); }\n .img-faciales { background-image: url('https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Faciales-.png'); }\n .img-terapias { background-image: url('https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Terapias.png'); }\n\n .service-content {\n padding: 1.8rem 1.8rem 2rem;\n }\n\n .service-title {\n font-family: var(--spa-font-title);\n font-size: 1.6rem;\n font-weight: 600;\n color: var(--spa-primary);\n margin-bottom: 0.75rem;\n }\n\n .service-description {\n font-family: var(--spa-font-body);\n font-size: 0.95rem;\n color: var(--spa-text);\n line-height: 1.5;\n margin-bottom: 1.5rem;\n opacity: 0.8;\n }\n\n .service-link {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-family: var(--spa-font-body);\n font-weight: 500;\n font-size: 0.9rem;\n color: var(--spa-primary);\n text-decoration: none;\n border-bottom: 1px solid var(--spa-gold-light);\n padding-bottom: 4px;\n transition: all 0.2s;\n }\n\n .service-link:hover {\n color: var(--spa-primary-dark);\n border-bottom-color: var(--spa-primary);\n gap: 0.75rem;\n }\n\n .service-link::after {\n content: '\u2192';\n transition: transform 0.2s;\n }\n\n .service-link:hover::after {\n transform: translateX(3px);\n }\n\n @media (max-width: 1023px) {\n .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }\n .spa-services { padding: 4rem 1.5rem; }\n .spa-section-title { font-size: 2.3rem; }\n .service-image { height: 220px; }\n }\n\n @media (max-width: 767px) {\n .services-grid { grid-template-columns: 1fr; gap: 1.8rem; }\n .spa-services { padding: 3rem 1rem; }\n .spa-section-title { font-size: 2rem; }\n .service-image { height: 200px; }\n .service-content { padding: 1.3rem; }\n .service-title { font-size: 1.4rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<section class=\"spa-services\" id=\"servicios\">\n <div class=\"spa-container\">\n <h2 class=\"spa-section-title\">Tratamientos para tu bienestar<\/h2>\n <p class=\"spa-section-subtitle\">Cada experiencia est\u00e1 dise\u00f1ada para restaurar el equilibrio natural de tu cuerpo y mente<\/p>\n <div class=\"services-grid\">\n <div class=\"service-card\">\n <div class=\"service-image img-masajes\"><\/div>\n <div class=\"service-content\">\n <h3 class=\"service-title\">Masajes<\/h3>\n <p class=\"service-description\">Desde el suave masaje relajante hasta el descontracturante profundo, aliviamos tensiones y reactivamos tu energ\u00eda vital.<\/p>\n <a href=\"#\" class=\"service-link\">Descubrir experiencia<\/a>\n <\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-image img-faciales\"><\/div>\n <div class=\"service-content\">\n <h3 class=\"service-title\">Faciales<\/h3>\n <p class=\"service-description\">Tratamientos personalizados con activos naturales y tecnolog\u00eda suave para una piel luminosa, hidratada y rejuvenecida.<\/p>\n <a href=\"#\" class=\"service-link\">Descubrir experiencia<\/a>\n <\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-image img-terapias\"><\/div>\n <div class=\"service-content\">\n <h3 class=\"service-title\">Terapias<\/h3>\n <p class=\"service-description\">Aromaterapia, reflexolog\u00eda y sonoterapia para equilibrar cuerpo, mente y esp\u00edritu en un entorno de calma absoluta.<\/p>\n <a href=\"#\" class=\"service-link\">Descubrir experiencia<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\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-bb45803 e-con-full e-flex e-con e-parent\" data-id=\"bb45803\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6cab229 elementor-widget elementor-widget-html\" data-id=\"6cab229\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Beneficios SERENZA<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-bg-soft: #EFEAE4;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 20px;\n --spa-shadow: 0 15px 35px rgba(0,0,0,0.05);\n --spa-shadow-hover: 0 25px 40px rgba(0,0,0,0.08);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .spa-benefits {\n background: var(--spa-white);\n padding: 6rem 2rem;\n }\n\n .spa-container {\n max-width: 1280px;\n margin: 0 auto;\n }\n\n .spa-section-header {\n text-align: center;\n margin-bottom: 3.5rem;\n }\n\n .spa-section-title {\n font-family: var(--spa-font-title);\n font-size: 2.6rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n letter-spacing: -0.02em;\n margin-bottom: 1rem;\n }\n\n .spa-section-subtitle {\n font-family: var(--spa-font-body);\n font-size: 1.1rem;\n color: var(--spa-text);\n max-width: 650px;\n margin: 0 auto;\n opacity: 0.75;\n }\n\n .benefits-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n }\n\n .benefit-card {\n background: var(--spa-bg-soft);\n border-radius: var(--spa-radius);\n padding: 2rem 1.8rem;\n text-align: center;\n transition: all 0.35s ease;\n border: 1px solid transparent;\n }\n\n .benefit-card:hover {\n transform: translateY(-5px);\n background: var(--spa-white);\n border-color: var(--spa-gold-light);\n box-shadow: var(--spa-shadow-hover);\n }\n\n .benefit-icon {\n width: 80px;\n height: 80px;\n margin: 0 auto 1.5rem auto;\n background: var(--spa-white);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s;\n box-shadow: var(--spa-shadow);\n }\n\n .benefit-card:hover .benefit-icon {\n background: var(--spa-primary-light);\n transform: scale(1.02);\n }\n\n .benefit-icon svg {\n width: 40px;\n height: 40px;\n stroke: var(--spa-primary);\n stroke-width: 1.5;\n fill: none;\n transition: stroke 0.3s;\n }\n\n .benefit-card:hover .benefit-icon svg {\n stroke: var(--spa-white);\n }\n\n .benefit-title {\n font-family: var(--spa-font-title);\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--spa-primary);\n margin-bottom: 1rem;\n }\n\n .benefit-description {\n font-family: var(--spa-font-body);\n font-size: 0.95rem;\n line-height: 1.5;\n color: var(--spa-text);\n opacity: 0.8;\n }\n\n .benefit-card::after {\n content: '';\n display: block;\n width: 40px;\n height: 2px;\n background: var(--spa-gold-light);\n margin: 1.5rem auto 0 auto;\n transition: width 0.3s, background 0.3s;\n }\n\n .benefit-card:hover::after {\n width: 60px;\n background: var(--spa-gold);\n }\n\n @media (max-width: 1023px) {\n .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }\n .spa-benefits { padding: 4rem 1.5rem; }\n .spa-section-title { font-size: 2.2rem; }\n }\n\n @media (max-width: 767px) {\n .benefits-grid { grid-template-columns: 1fr; gap: 1.5rem; }\n .spa-benefits { padding: 3rem 1rem; }\n .spa-section-title { font-size: 1.9rem; }\n .benefit-card { padding: 1.5rem; }\n .benefit-title { font-size: 1.3rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<section class=\"spa-benefits\">\n <div class=\"spa-container\">\n <div class=\"spa-section-header\">\n <h2 class=\"spa-section-title\">\u00bfPor qu\u00e9 SERENZA?<\/h2>\n <p class=\"spa-section-subtitle\">Un espacio donde el lujo silencioso y el cuidado humano se encuentran<\/p>\n <\/div>\n <div class=\"benefits-grid\">\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"benefit-title\">Ambiente de calma<\/h3>\n <p class=\"benefit-description\">Espacios dise\u00f1ados con luz natural, aromas suaves y sonidos que inducen a la relajaci\u00f3n profunda.<\/p>\n <\/div>\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"8\" r=\"4\"\/>\n <path d=\"M5 20v-2a7 7 0 0 1 14 0v2\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"benefit-title\">Expertos en bienestar<\/h3>\n <p class=\"benefit-description\">Terapeutas certificados con formaci\u00f3n continua en t\u00e9cnicas ancestrales y vanguardia.<\/p>\n <\/div>\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2v4M12 22v-4M4 12H2M22 12h-2M19.07 4.93l-2.83 2.83M7.76 16.24l-2.83 2.83M16.24 7.76l2.83-2.83M4.93 19.07l2.83-2.83\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"benefit-title\">Productos org\u00e1nicos<\/h3>\n <p class=\"benefit-description\">Selecci\u00f3n de aceites esenciales, cremas y exfoliantes 100% naturales y libres de crueldad.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\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-ecc1d82 e-con-full e-flex e-con e-parent\" data-id=\"ecc1d82\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a685c2 elementor-widget elementor-widget-html\" data-id=\"3a685c2\" 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>Calculadora de Paquetes - SERENZA Spa<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n \/* \u2500\u2500 Variables (misma paleta que navbar) \u2500\u2500 *\/\n :root {\n --spa-bg: #F8F5F0;\n --spa-bg-soft: #EFEAE4;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light:#6FB3A7;\n --spa-accent: #E88C8C;\n --spa-accent-soft: #F3B6B6;\n --spa-nude: #F2D6B3;\n --spa-nude-dark: #D9B38C;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 12px;\n --spa-shadow: 0 10px 30px rgba(0,0,0,0.06);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n background: var(--spa-bg);\n font-family: var(--spa-font-body);\n color: var(--spa-text);\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\u2550\u2550\u2550\n SECCI\u00d3N PRINCIPAL\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\u2550\u2550\u2550 *\/\n .sc-section {\n width: 100%;\n padding: 5rem 2rem;\n background: var(--spa-bg);\n position: relative;\n overflow: hidden;\n }\n\n \/* Decoraci\u00f3n fondo *\/\n .sc-section::before {\n content: '';\n position: absolute;\n top: -120px; right: -120px;\n width: 400px; height: 400px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(46,139,126,0.07) 0%, transparent 70%);\n pointer-events: none;\n }\n .sc-section::after {\n content: '';\n position: absolute;\n bottom: -80px; left: -80px;\n width: 300px; height: 300px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(201,164,107,0.1) 0%, transparent 70%);\n pointer-events: none;\n }\n\n .sc-inner {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n }\n\n \/* \u2500\u2500 Cabecera \u2500\u2500 *\/\n .sc-header {\n text-align: center;\n margin-bottom: 3.5rem;\n }\n .sc-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--spa-gold);\n margin-bottom: 1rem;\n }\n .sc-eyebrow::before,\n .sc-eyebrow::after {\n content: '';\n width: 28px; height: 1px;\n background: var(--spa-gold-light);\n }\n .sc-title {\n font-family: var(--spa-font-title);\n font-size: 2.6rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n line-height: 1.15;\n margin-bottom: 0.8rem;\n }\n .sc-title em {\n font-style: italic;\n color: var(--spa-gold);\n }\n .sc-subtitle {\n font-size: 0.95rem;\n color: rgba(58,58,58,0.65);\n max-width: 520px;\n margin: 0 auto;\n line-height: 1.6;\n }\n\n \/* \u2500\u2500 Layout dos columnas \u2500\u2500 *\/\n .sc-grid {\n display: grid;\n grid-template-columns: 1fr 340px;\n gap: 2rem;\n align-items: start;\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\u2550\u2550\u2550\n COLUMNA IZQUIERDA\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\u2550\u2550\u2550 *\/\n .sc-left { display: flex; flex-direction: column; gap: 2rem; }\n\n \/* \u2500\u2500 Card contenedora \u2500\u2500 *\/\n .sc-card {\n background: var(--spa-white);\n border-radius: 20px;\n box-shadow: var(--spa-shadow);\n overflow: hidden;\n }\n .sc-card-header {\n padding: 1.4rem 1.8rem 1rem;\n border-bottom: 1px solid var(--spa-bg-soft);\n display: flex;\n align-items: center;\n gap: 0.8rem;\n }\n .sc-card-icon {\n width: 38px; height: 38px;\n background: rgba(46,139,126,0.1);\n border-radius: 10px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .sc-card-icon svg { width: 20px; height: 20px; }\n .sc-card-title {\n font-family: var(--spa-font-title);\n font-size: 1.2rem;\n color: var(--spa-primary-dark);\n font-weight: 600;\n }\n .sc-card-body { padding: 1.4rem 1.8rem 1.8rem; }\n\n \/* \u2500\u2500 Servicios \/ Checkboxes \u2500\u2500 *\/\n .sc-service-list {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n .sc-service-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 0.85rem 1rem;\n border-radius: var(--spa-radius);\n border: 1.5px solid transparent;\n background: var(--spa-bg);\n cursor: pointer;\n transition: all 0.25s ease;\n user-select: none;\n }\n .sc-service-item:hover {\n background: rgba(46,139,126,0.06);\n border-color: rgba(46,139,126,0.2);\n }\n .sc-service-item.checked {\n background: rgba(46,139,126,0.08);\n border-color: var(--spa-primary-light);\n }\n\n \/* Checkbox personalizado *\/\n .sc-check {\n width: 22px; height: 22px;\n border-radius: 6px;\n border: 2px solid #D0CCC8;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n transition: all 0.25s ease;\n background: var(--spa-white);\n }\n .sc-service-item.checked .sc-check {\n background: var(--spa-primary);\n border-color: var(--spa-primary);\n }\n .sc-check svg { width: 12px; height: 12px; fill: white; opacity: 0; transform: scale(0.5); transition: all 0.2s ease; }\n .sc-service-item.checked .sc-check svg { opacity: 1; transform: scale(1); }\n\n \/* \u00cdcono de categor\u00eda *\/\n .sc-svc-icon {\n width: 34px; height: 34px;\n border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n font-size: 1.1rem;\n background: var(--spa-bg-soft);\n transition: background 0.25s;\n }\n .sc-service-item.checked .sc-svc-icon { background: rgba(46,139,126,0.12); }\n\n .sc-svc-info { flex: 1; }\n .sc-svc-name {\n font-size: 0.9rem;\n font-weight: 500;\n color: var(--spa-text);\n line-height: 1.3;\n }\n .sc-svc-desc {\n font-size: 0.75rem;\n color: rgba(58,58,58,0.55);\n margin-top: 0.1rem;\n }\n .sc-svc-price {\n font-size: 0.92rem;\n font-weight: 600;\n color: var(--spa-primary);\n white-space: nowrap;\n }\n\n \/* \u2500\u2500 Divisor de categor\u00eda \u2500\u2500 *\/\n .sc-cat-label {\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: rgba(58,58,58,0.4);\n padding: 0.8rem 0 0.3rem;\n }\n\n \/* \u2500\u2500 Paquetes \u2500\u2500 *\/\n .sc-packages {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n .sc-pkg {\n border: 1.5px solid var(--spa-nude);\n border-radius: 16px;\n padding: 1.2rem 1.4rem;\n cursor: pointer;\n transition: all 0.3s ease;\n background: var(--spa-white);\n display: flex;\n align-items: center;\n gap: 1.1rem;\n position: relative;\n overflow: hidden;\n }\n .sc-pkg::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(46,139,126,0.04) 0%, transparent 60%);\n opacity: 0;\n transition: opacity 0.3s;\n }\n .sc-pkg:hover {\n border-color: var(--spa-primary-light);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(46,139,126,0.1);\n }\n .sc-pkg:hover::before { opacity: 1; }\n .sc-pkg.active {\n border-color: var(--spa-gold);\n box-shadow: 0 6px 24px rgba(201,164,107,0.2);\n }\n .sc-pkg.active::before { opacity: 1; }\n\n .sc-pkg-emoji {\n font-size: 1.8rem;\n line-height: 1;\n flex-shrink: 0;\n }\n .sc-pkg-info { flex: 1; }\n .sc-pkg-name {\n font-family: var(--spa-font-title);\n font-size: 1rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n margin-bottom: 0.2rem;\n }\n .sc-pkg-services {\n font-size: 0.75rem;\n color: rgba(58,58,58,0.55);\n line-height: 1.4;\n }\n .sc-pkg-right {\n text-align: right;\n flex-shrink: 0;\n }\n .sc-pkg-badge {\n display: inline-block;\n background: var(--spa-accent-soft);\n color: #B85C5C;\n font-size: 0.7rem;\n font-weight: 700;\n padding: 0.2rem 0.55rem;\n border-radius: 50px;\n margin-bottom: 0.3rem;\n }\n .sc-pkg.active .sc-pkg-badge {\n background: var(--spa-gold-light);\n color: #7A5A1E;\n }\n .sc-pkg-price {\n font-size: 1rem;\n font-weight: 700;\n color: var(--spa-primary);\n display: block;\n }\n .sc-pkg-original {\n font-size: 0.75rem;\n color: rgba(58,58,58,0.4);\n text-decoration: line-through;\n display: block;\n }\n\n \/* Chip activo *\/\n .sc-pkg-active-chip {\n position: absolute;\n top: 0.7rem; right: 0.7rem;\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--spa-gold);\n display: flex; align-items: center; justify-content: center;\n opacity: 0;\n transform: scale(0);\n transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n }\n .sc-pkg.active .sc-pkg-active-chip { opacity: 1; transform: scale(1); }\n .sc-pkg-active-chip svg { width: 10px; height: 10px; fill: white; }\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\u2550\u2550\u2550\n COLUMNA DERECHA \u2014 PANEL 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\u2550\u2550\u2550 *\/\n .sc-right {\n position: sticky;\n top: 2rem;\n }\n .sc-summary-card {\n background: var(--spa-white);\n border-radius: 20px;\n box-shadow: var(--spa-shadow);\n overflow: hidden;\n }\n .sc-summary-header {\n background: linear-gradient(135deg, var(--spa-primary-dark) 0%, var(--spa-primary) 100%);\n padding: 1.5rem 1.8rem;\n color: white;\n }\n .sc-summary-eyebrow {\n font-size: 0.68rem;\n font-weight: 600;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n opacity: 0.75;\n margin-bottom: 0.3rem;\n }\n .sc-summary-title {\n font-family: var(--spa-font-title);\n font-size: 1.3rem;\n font-weight: 600;\n }\n\n .sc-summary-body { padding: 1.5rem 1.8rem; }\n\n \/* Lista de seleccionados *\/\n .sc-selected-list {\n min-height: 80px;\n margin-bottom: 1.2rem;\n }\n .sc-selected-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 80px;\n gap: 0.5rem;\n color: rgba(58,58,58,0.35);\n font-size: 0.82rem;\n text-align: center;\n }\n .sc-selected-empty svg { width: 32px; height: 32px; opacity: 0.3; }\n .sc-selected-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.5rem 0;\n border-bottom: 1px solid var(--spa-bg-soft);\n font-size: 0.82rem;\n gap: 0.5rem;\n }\n .sc-selected-row:last-child { border-bottom: none; }\n .sc-selected-name { color: var(--spa-text); line-height: 1.3; }\n .sc-selected-val { font-weight: 600; color: var(--spa-primary); white-space: nowrap; }\n\n \/* Totales *\/\n .sc-divider { height: 1px; background: var(--spa-bg-soft); margin: 1rem 0; }\n\n .sc-total-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.85rem;\n margin-bottom: 0.4rem;\n }\n .sc-total-label { color: rgba(58,58,58,0.6); }\n .sc-total-val { font-weight: 600; color: var(--spa-text); }\n .sc-total-val.strike {\n text-decoration: line-through;\n color: rgba(58,58,58,0.4);\n }\n .sc-discount-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.82rem;\n margin-bottom: 0.4rem;\n display: none;\n }\n .sc-discount-label { color: var(--spa-accent); font-weight: 500; }\n .sc-discount-val { color: var(--spa-accent); font-weight: 600; }\n\n .sc-grand-total {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n margin-top: 0.8rem;\n }\n .sc-grand-label {\n font-family: var(--spa-font-title);\n font-size: 1rem;\n color: var(--spa-primary-dark);\n font-weight: 600;\n }\n .sc-grand-price {\n font-family: var(--spa-font-title);\n font-size: 2rem;\n font-weight: 700;\n color: var(--spa-primary-dark);\n line-height: 1;\n transition: transform 0.25s ease, opacity 0.25s ease;\n }\n .sc-grand-price.animating { transform: scale(0.92); opacity: 0.4; }\n\n .sc-savings-badge {\n display: none;\n align-items: center;\n gap: 0.4rem;\n background: rgba(46,139,126,0.08);\n border: 1px solid rgba(46,139,126,0.2);\n border-radius: 8px;\n padding: 0.5rem 0.8rem;\n font-size: 0.78rem;\n color: var(--spa-primary-dark);\n font-weight: 600;\n margin-top: 0.8rem;\n }\n .sc-savings-badge svg { width: 14px; height: 14px; fill: var(--spa-primary); flex-shrink: 0; }\n .sc-savings-badge.visible { display: flex; }\n\n .sc-microcopy {\n font-size: 0.72rem;\n color: rgba(58,58,58,0.45);\n text-align: center;\n margin: 0.8rem 0 1.2rem;\n line-height: 1.5;\n }\n\n \/* CTA *\/\n .sc-cta {\n width: 100%;\n background: var(--spa-primary);\n color: white;\n border: none;\n border-radius: 40px;\n padding: 1rem 1.5rem;\n font-family: var(--spa-font-body);\n font-size: 0.95rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.6rem;\n letter-spacing: 0.02em;\n }\n .sc-cta svg { width: 18px; height: 18px; fill: white; }\n .sc-cta:hover:not(:disabled) {\n background: var(--spa-primary-dark);\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(46,139,126,0.3);\n }\n .sc-cta:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n }\n\n .sc-trust {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.4rem;\n font-size: 0.72rem;\n color: rgba(58,58,58,0.45);\n margin-top: 0.8rem;\n line-height: 1.4;\n text-align: center;\n }\n .sc-trust svg { width: 12px; height: 12px; fill: var(--spa-primary-light); 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\u2550\u2550\u2550\n MODAL\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\u2550\u2550\u2550 *\/\n .sc-modal-overlay {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(46,46,46,0.45);\n backdrop-filter: blur(4px);\n z-index: 9999;\n align-items: center;\n justify-content: center;\n padding: 1.5rem;\n }\n .sc-modal-overlay.open { display: flex; }\n\n .sc-modal {\n background: var(--spa-white);\n border-radius: 24px;\n max-width: 480px;\n width: 100%;\n box-shadow: 0 24px 60px rgba(0,0,0,0.15);\n overflow: hidden;\n animation: sc-modal-in 0.35s cubic-bezier(0.2,0.9,0.4,1) forwards;\n }\n @keyframes sc-modal-in {\n from { opacity: 0; transform: translateY(30px) scale(0.97); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n .sc-modal-header {\n background: linear-gradient(135deg, var(--spa-primary-dark) 0%, var(--spa-primary) 100%);\n padding: 1.8rem 2rem 1.4rem;\n position: relative;\n }\n .sc-modal-header-eye {\n font-size: 0.68rem;\n font-weight: 600;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.65);\n margin-bottom: 0.3rem;\n }\n .sc-modal-header h3 {\n font-family: var(--spa-font-title);\n font-size: 1.5rem;\n color: white;\n font-weight: 600;\n }\n .sc-modal-close {\n position: absolute;\n top: 1.2rem; right: 1.4rem;\n width: 32px; height: 32px;\n border-radius: 50%;\n background: rgba(255,255,255,0.15);\n border: none;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: background 0.2s;\n }\n .sc-modal-close:hover { background: rgba(255,255,255,0.25); }\n .sc-modal-close svg { width: 14px; height: 14px; fill: white; }\n\n .sc-modal-body { padding: 1.8rem 2rem; }\n\n \/* Resumen en modal *\/\n .sc-modal-summary {\n background: var(--spa-bg);\n border-radius: var(--spa-radius);\n padding: 1rem 1.2rem;\n margin-bottom: 1.4rem;\n }\n .sc-modal-summary-label {\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--spa-primary);\n margin-bottom: 0.7rem;\n }\n .sc-modal-items {\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n margin-bottom: 0.8rem;\n }\n .sc-modal-item {\n display: flex;\n justify-content: space-between;\n font-size: 0.82rem;\n color: var(--spa-text);\n }\n .sc-modal-item-price { font-weight: 600; color: var(--spa-primary); }\n .sc-modal-total-row {\n border-top: 1px solid var(--spa-nude);\n padding-top: 0.7rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .sc-modal-total-label {\n font-family: var(--spa-font-title);\n font-size: 0.95rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n }\n .sc-modal-total-price {\n font-family: var(--spa-font-title);\n font-size: 1.4rem;\n font-weight: 700;\n color: var(--spa-primary-dark);\n }\n\n \/* Campo fecha *\/\n .sc-modal-field-label {\n font-size: 0.8rem;\n font-weight: 600;\n color: rgba(58,58,58,0.7);\n margin-bottom: 0.5rem;\n display: block;\n letter-spacing: 0.03em;\n }\n .sc-modal-input {\n width: 100%;\n padding: 0.85rem 1.1rem;\n border-radius: 40px;\n border: 1.5px solid var(--spa-nude-dark);\n font-family: var(--spa-font-body);\n font-size: 0.88rem;\n color: var(--spa-text);\n background: var(--spa-bg);\n transition: border-color 0.25s;\n outline: none;\n margin-bottom: 1.4rem;\n }\n .sc-modal-input:focus { border-color: var(--spa-primary); background: var(--spa-white); }\n\n .sc-modal-actions { display: flex; gap: 0.8rem; }\n .sc-modal-confirm {\n flex: 1;\n background: var(--spa-primary);\n color: white;\n border: none;\n border-radius: 40px;\n padding: 0.85rem 1.5rem;\n font-family: var(--spa-font-body);\n font-size: 0.9rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s;\n display: flex; align-items: center; justify-content: center; gap: 0.5rem;\n }\n .sc-modal-confirm svg { width: 16px; height: 16px; fill: white; }\n .sc-modal-confirm:hover { background: var(--spa-primary-dark); box-shadow: 0 6px 18px rgba(46,139,126,0.3); transform: translateY(-1px); }\n .sc-modal-cancel {\n background: transparent;\n border: 1.5px solid var(--spa-nude-dark);\n border-radius: 40px;\n padding: 0.85rem 1.3rem;\n font-family: var(--spa-font-body);\n font-size: 0.88rem;\n color: rgba(58,58,58,0.65);\n cursor: pointer;\n transition: all 0.25s;\n }\n .sc-modal-cancel:hover { border-color: var(--spa-gold); color: var(--spa-text); }\n\n \/* Modal \u00e9xito *\/\n .sc-modal-success {\n display: none;\n text-align: center;\n padding: 1rem 0;\n }\n .sc-modal-success-icon {\n font-size: 3.5rem;\n margin-bottom: 0.8rem;\n animation: sc-bounce 0.6s cubic-bezier(0.2,0.9,0.4,1.2) forwards;\n }\n @keyframes sc-bounce { from { transform: scale(0); } to { transform: scale(1); } }\n .sc-modal-success h4 { font-family: var(--spa-font-title); font-size: 1.3rem; color: var(--spa-primary-dark); margin-bottom: 0.5rem; }\n .sc-modal-success p { font-size: 0.85rem; color: rgba(58,58,58,0.6); line-height: 1.6; }\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\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\u2550\u2550\u2550 *\/\n @media (max-width: 900px) {\n .sc-grid { grid-template-columns: 1fr; }\n .sc-right { position: static; }\n .sc-title { font-size: 2rem; }\n }\n @media (max-width: 600px) {\n .sc-section { padding: 3.5rem 1.2rem; }\n .sc-card-header, .sc-card-body { padding-left: 1.3rem; padding-right: 1.3rem; }\n .sc-modal-body { padding: 1.4rem 1.3rem; }\n .sc-modal-header { padding: 1.4rem 1.3rem 1rem; }\n .sc-grand-price { font-size: 1.6rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n\n<section class=\"sc-section\" id=\"sc-calculadora\">\n <div class=\"sc-inner\">\n\n \n <div class=\"sc-header\">\n <div class=\"sc-eyebrow\">Experiencia personalizada<\/div>\n <h2 class=\"sc-title\">Dise\u00f1a tu <em>ritual<\/em> ideal<\/h2>\n <p class=\"sc-subtitle\">Elige los servicios que deseas disfrutar o selecciona uno de nuestros paquetes con descuento exclusivo<\/p>\n <\/div>\n\n \n <div class=\"sc-grid\">\n\n \n <div class=\"sc-left\">\n\n \n <div class=\"sc-card\">\n <div class=\"sc-card-header\">\n <div class=\"sc-card-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2E8B7E\" stroke-width=\"2\" stroke-linecap=\"round\">\n <path d=\"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2\"\/>\n <rect x=\"9\" y=\"3\" width=\"6\" height=\"4\" rx=\"2\"\/>\n <path d=\"m9 12 2 2 4-4\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"sc-card-title\">Servicios disponibles<\/div>\n <\/div>\n <\/div>\n <div class=\"sc-card-body\">\n <div class=\"sc-service-list\" id=\"scServiceList\">\n\n <div class=\"sc-cat-label\">Masajes<\/div>\n\n <div class=\"sc-service-item\" data-id=\"masaje-relajante\" data-price=\"120000\" data-name=\"Masaje relajante\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83d\udc86<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Masaje relajante<\/div>\n <div class=\"sc-svc-desc\">60 min \u00b7 Aceites esenciales \u00b7 Tensi\u00f3n muscular<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$120.000<\/div>\n <\/div>\n\n <div class=\"sc-service-item\" data-id=\"masaje-piedras\" data-price=\"145000\" data-name=\"Masaje con piedras calientes\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83e\udea8<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Masaje con piedras calientes<\/div>\n <div class=\"sc-svc-desc\">75 min \u00b7 Basalto volc\u00e1nico \u00b7 Circulaci\u00f3n profunda<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$145.000<\/div>\n <\/div>\n\n <div class=\"sc-service-item\" data-id=\"reflexologia\" data-price=\"95000\" data-name=\"Reflexolog\u00eda podal\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83e\uddb6<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Reflexolog\u00eda podal<\/div>\n <div class=\"sc-svc-desc\">45 min \u00b7 Puntos de presi\u00f3n \u00b7 Equilibrio energ\u00e9tico<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$95.000<\/div>\n <\/div>\n\n <div class=\"sc-cat-label\">Faciales<\/div>\n\n <div class=\"sc-service-item\" data-id=\"facial-revitalizante\" data-price=\"110000\" data-name=\"Facial revitalizante\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\u2728<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Facial revitalizante<\/div>\n <div class=\"sc-svc-desc\">50 min \u00b7 Limpieza profunda \u00b7 Vitamina C<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$110.000<\/div>\n <\/div>\n\n <div class=\"sc-service-item\" data-id=\"facial-hidratante\" data-price=\"98000\" data-name=\"Facial hidratante\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83d\udca7<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Facial hidratante<\/div>\n <div class=\"sc-svc-desc\">45 min \u00b7 \u00c1cido hialur\u00f3nico \u00b7 Piel radiante<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$98.000<\/div>\n <\/div>\n\n <div class=\"sc-cat-label\">Terapias<\/div>\n\n <div class=\"sc-service-item\" data-id=\"aromaterapia\" data-price=\"80000\" data-name=\"Aromaterapia\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83c\udf38<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Aromaterapia<\/div>\n <div class=\"sc-svc-desc\">40 min \u00b7 Aceites bot\u00e1nicos \u00b7 Equilibrio emocional<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$80.000<\/div>\n <\/div>\n\n <div class=\"sc-service-item\" data-id=\"meditacion\" data-price=\"65000\" data-name=\"Meditaci\u00f3n guiada\">\n <div class=\"sc-check\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-svc-icon\">\ud83e\uddd8<\/div>\n <div class=\"sc-svc-info\">\n <div class=\"sc-svc-name\">Meditaci\u00f3n guiada<\/div>\n <div class=\"sc-svc-desc\">30 min \u00b7 Mindfulness \u00b7 Reducci\u00f3n del estr\u00e9s<\/div>\n <\/div>\n <div class=\"sc-svc-price\">$65.000<\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"sc-card\">\n <div class=\"sc-card-header\">\n <div class=\"sc-card-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2E8B7E\" stroke-width=\"2\" stroke-linecap=\"round\">\n <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"sc-card-title\">Paquetes con descuento<\/div>\n <\/div>\n <\/div>\n <div class=\"sc-card-body\">\n <div class=\"sc-packages\">\n\n \n <div class=\"sc-pkg\"\n data-pkg=\"relajacion\"\n data-services=\"masaje-relajante,aromaterapia\"\n data-discount=\"10\"\n data-original=\"200000\"\n data-final=\"180000\">\n <div class=\"sc-pkg-active-chip\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-pkg-emoji\">\ud83c\udf3f<\/div>\n <div class=\"sc-pkg-info\">\n <div class=\"sc-pkg-name\">Relajaci\u00f3n total<\/div>\n <div class=\"sc-pkg-services\">Masaje relajante + Aromaterapia<\/div>\n <\/div>\n <div class=\"sc-pkg-right\">\n <span class=\"sc-pkg-badge\">-10%<\/span>\n <span class=\"sc-pkg-price\">$180.000<\/span>\n <span class=\"sc-pkg-original\">$200.000<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"sc-pkg\"\n data-pkg=\"estetica\"\n data-services=\"facial-revitalizante,facial-hidratante\"\n data-discount=\"15\"\n data-original=\"208000\"\n data-final=\"176800\">\n <div class=\"sc-pkg-active-chip\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-pkg-emoji\">\u2728<\/div>\n <div class=\"sc-pkg-info\">\n <div class=\"sc-pkg-name\">Est\u00e9tica completa<\/div>\n <div class=\"sc-pkg-services\">Facial revitalizante + Facial hidratante<\/div>\n <\/div>\n <div class=\"sc-pkg-right\">\n <span class=\"sc-pkg-badge\">-15%<\/span>\n <span class=\"sc-pkg-price\">$176.800<\/span>\n <span class=\"sc-pkg-original\">$208.000<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"sc-pkg\"\n data-pkg=\"bienestar\"\n data-services=\"masaje-relajante,reflexologia,aromaterapia\"\n data-discount=\"20\"\n data-original=\"295000\"\n data-final=\"236000\">\n <div class=\"sc-pkg-active-chip\">\n <svg viewBox=\"0 0 12 12\"><polyline points=\"1,6 4.5,9.5 11,2.5\"\/><\/svg>\n <\/div>\n <div class=\"sc-pkg-emoji\">\ud83d\udc86<\/div>\n <div class=\"sc-pkg-info\">\n <div class=\"sc-pkg-name\">Bienestar hol\u00edstico<\/div>\n <div class=\"sc-pkg-services\">Masaje relajante + Reflexolog\u00eda + Aromaterapia<\/div>\n <\/div>\n <div class=\"sc-pkg-right\">\n <span class=\"sc-pkg-badge\">-20%<\/span>\n <span class=\"sc-pkg-price\">$236.000<\/span>\n <span class=\"sc-pkg-original\">$295.000<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"sc-right\">\n <div class=\"sc-summary-card\">\n\n <div class=\"sc-summary-header\">\n <div class=\"sc-summary-eyebrow\">Tu selecci\u00f3n<\/div>\n <div class=\"sc-summary-title\">Resumen de experiencia<\/div>\n <\/div>\n\n <div class=\"sc-summary-body\">\n\n \n <div class=\"sc-selected-list\" id=\"scSelectedList\">\n <div class=\"sc-selected-empty\" id=\"scEmptyState\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/>\n <path d=\"M12 8v4M12 16h.01\"\/>\n <\/svg>\n Selecciona servicios o elige un paquete para comenzar\n <\/div>\n <\/div>\n\n <div class=\"sc-divider\"><\/div>\n\n \n <div class=\"sc-total-row\">\n <span class=\"sc-total-label\">Subtotal<\/span>\n <span class=\"sc-total-val\" id=\"scSubtotal\">$0<\/span>\n <\/div>\n\n \n <div class=\"sc-discount-row\" id=\"scDiscountRow\">\n <span class=\"sc-discount-label\" id=\"scDiscountLabel\">Descuento paquete<\/span>\n <span class=\"sc-discount-val\" id=\"scDiscountVal\">\u2014<\/span>\n <\/div>\n\n \n <div class=\"sc-grand-total\">\n <span class=\"sc-grand-label\">Total<\/span>\n <span class=\"sc-grand-price\" id=\"scGrandTotal\">$0<\/span>\n <\/div>\n\n \n <div class=\"sc-savings-badge\" id=\"scSavingsBadge\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z\"\/><\/svg>\n <span id=\"scSavingsText\">Est\u00e1s ahorrando $0<\/span>\n <\/div>\n\n <div class=\"sc-microcopy\">\n Precios en pesos colombianos (COP)<br>\n Incluye IVA \u00b7 Sujeto a disponibilidad\n <\/div>\n\n \n <button class=\"sc-cta\" id=\"scReservarBtn\" disabled onclick=\"scOpenModal()\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\/><\/svg>\n Reservar ahora\n <\/button>\n\n <div class=\"sc-trust\">\n <svg viewBox=\"0 0 24 24\"><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 Sin pago anticipado \u00b7 Confirmamos en menos de 2 horas\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n\n<div class=\"sc-modal-overlay\" id=\"scModalOverlay\">\n <div class=\"sc-modal\" id=\"scModal\">\n\n <div class=\"sc-modal-header\">\n <div class=\"sc-modal-header-eye\">Confirma tu reserva<\/div>\n <h3>Reserva tu momento<\/h3>\n <button class=\"sc-modal-close\" onclick=\"scCloseModal()\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <\/div>\n\n <div class=\"sc-modal-body\">\n\n \n <div id=\"scModalForm\">\n \n <div class=\"sc-modal-summary\">\n <div class=\"sc-modal-summary-label\">Servicios seleccionados<\/div>\n <div class=\"sc-modal-items\" id=\"scModalItems\"><\/div>\n <div class=\"sc-modal-total-row\">\n <span class=\"sc-modal-total-label\">Total a pagar<\/span>\n <span class=\"sc-modal-total-price\" id=\"scModalTotal\"><\/span>\n <\/div>\n <\/div>\n\n \n <label class=\"sc-modal-field-label\">Elige fecha y hora de tu cita<\/label>\n <input type=\"datetime-local\" class=\"sc-modal-input\" id=\"scDateTime\" step=\"1800\">\n\n \n <label class=\"sc-modal-field-label\">Tu nombre<\/label>\n <input type=\"text\" class=\"sc-modal-input\" id=\"scNombre\" placeholder=\"\u00bfC\u00f3mo te llamamos?\">\n\n <div class=\"sc-modal-actions\">\n <button class=\"sc-modal-confirm\" onclick=\"scConfirmarReserva()\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 6L9 17l-5-5\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" fill=\"none\"\/><\/svg>\n Confirmar reserva\n <\/button>\n <button class=\"sc-modal-cancel\" onclick=\"scCloseModal()\">Cancelar<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"sc-modal-success\" id=\"scModalSuccess\">\n <div class=\"sc-modal-success-icon\">\ud83c\udf3f<\/div>\n <h4>\u00a1Reserva confirmada!<\/h4>\n <p>Te contactaremos en menos de <strong>2 horas<\/strong> para confirmar tu cita.<br>\u00a1Prep\u00e1rate para una experiencia \u00fanica!<\/p>\n <\/div>\n\n <\/div>\n <\/div>\n<\/div>\n\n\n\n<script>\n(function(){\n\n \/\/ \u2500\u2500\u2500 CONFIGURACI\u00d3N \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 BOOKING_URL = ''; \/\/ Pega aqu\u00ed tu URL de pasarela\/sistema de reservas\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n const state = {\n checked: new Set(), \/\/ IDs de servicios marcados\n activePkg: null, \/\/ paquete activo\n discount: 0, \/\/ porcentaje de descuento\n pkgModified: false, \/\/ usuario modific\u00f3 checks tras elegir paquete\n };\n\n \/\/ Mapa de servicios { id: { name, price } }\n const SERVICES = {};\n document.querySelectorAll('.sc-service-item').forEach(el => {\n SERVICES[el.dataset.id] = {\n name: el.dataset.name,\n price: parseInt(el.dataset.price),\n };\n });\n\n \/\/ \u2500\u2500\u2500 TOGGLE DE SERVICIO \u2500\u2500\u2500\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('.sc-service-item').forEach(el => {\n el.addEventListener('click', () => {\n const id = el.dataset.id;\n if (state.checked.has(id)) {\n state.checked.delete(id);\n el.classList.remove('checked');\n } else {\n state.checked.add(id);\n el.classList.add('checked');\n }\n \/\/ Si hay paquete activo y el usuario lo modifica, anular descuento\n if (state.activePkg !== null) {\n state.pkgModified = true;\n state.activePkg = null;\n state.discount = 0;\n document.querySelectorAll('.sc-pkg').forEach(p => p.classList.remove('active'));\n }\n render();\n });\n });\n\n \/\/ \u2500\u2500\u2500 SELECCI\u00d3N DE PAQUETE \u2500\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('.sc-pkg').forEach(pkg => {\n pkg.addEventListener('click', () => {\n const services = pkg.dataset.services.split(',');\n const discount = parseInt(pkg.dataset.discount);\n const pkgId = pkg.dataset.pkg;\n\n \/\/ Si ya est\u00e1 activo, desactivar\n if (state.activePkg === pkgId) {\n state.activePkg = null;\n state.discount = 0;\n state.checked.clear();\n document.querySelectorAll('.sc-service-item').forEach(el => el.classList.remove('checked'));\n document.querySelectorAll('.sc-pkg').forEach(p => p.classList.remove('active'));\n render();\n return;\n }\n\n \/\/ Activar paquete\n state.activePkg = pkgId;\n state.discount = discount;\n state.pkgModified = false;\n\n \/\/ Marcar solo los servicios del paquete\n state.checked.clear();\n document.querySelectorAll('.sc-service-item').forEach(el => el.classList.remove('checked'));\n services.forEach(sId => {\n state.checked.add(sId);\n const el = document.querySelector(`.sc-service-item[data-id=\"${sId}\"]`);\n if (el) el.classList.add('checked');\n });\n\n \/\/ Activar card visual\n document.querySelectorAll('.sc-pkg').forEach(p => p.classList.remove('active'));\n pkg.classList.add('active');\n\n render();\n });\n });\n\n \/\/ \u2500\u2500\u2500 RENDER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 fmt(n) {\n return '$' + n.toLocaleString('es-CO');\n }\n\n function render() {\n const ids = [...state.checked];\n\n \/\/ Subtotal\n const subtotal = ids.reduce((acc, id) => acc + (SERVICES[id]?.price || 0), 0);\n\n \/\/ Descuento\n const discountAmt = state.discount > 0 ? Math.round(subtotal * state.discount \/ 100) : 0;\n const total = subtotal - discountAmt;\n\n \/\/ \u2500\u2500 Panel lateral \u2500\u2500\n const listEl = document.getElementById('scSelectedList');\n const emptyEl = document.getElementById('scEmptyState');\n\n listEl.innerHTML = '';\n\n if (ids.length === 0) {\n listEl.appendChild(createEmptyState());\n } else {\n ids.forEach(id => {\n const svc = SERVICES[id];\n if (!svc) return;\n const row = document.createElement('div');\n row.className = 'sc-selected-row';\n row.innerHTML = `<span class=\"sc-selected-name\">${svc.name}<\/span><span class=\"sc-selected-val\">${fmt(svc.price)}<\/span>`;\n listEl.appendChild(row);\n });\n }\n\n \/\/ Subtotal\n document.getElementById('scSubtotal').textContent = fmt(subtotal);\n\n \/\/ Descuento\n const discRow = document.getElementById('scDiscountRow');\n if (discountAmt > 0) {\n discRow.style.display = 'flex';\n document.getElementById('scDiscountLabel').textContent = `Descuento paquete (${state.discount}%)`;\n document.getElementById('scDiscountVal').textContent = `- ${fmt(discountAmt)}`;\n } else {\n discRow.style.display = 'none';\n }\n\n \/\/ Total animado\n animateTotal(fmt(total));\n\n \/\/ Badge ahorro\n const savingsBadge = document.getElementById('scSavingsBadge');\n if (discountAmt > 0) {\n savingsBadge.classList.add('visible');\n document.getElementById('scSavingsText').textContent = `Est\u00e1s ahorrando ${fmt(discountAmt)}`;\n } else {\n savingsBadge.classList.remove('visible');\n }\n\n \/\/ Habilitar CTA\n document.getElementById('scReservarBtn').disabled = ids.length === 0;\n\n \/\/ Guardar para modal\n window._scTotal = total;\n window._scSubtotal = subtotal;\n window._scDiscount = discountAmt;\n }\n\n function createEmptyState() {\n const div = document.createElement('div');\n div.className = 'sc-selected-empty';\n div.innerHTML = `\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/>\n <path d=\"M12 8v4M12 16h.01\"\/>\n <\/svg>\n Selecciona servicios o elige un paquete para comenzar`;\n return div;\n }\n\n \/\/ Animaci\u00f3n del n\u00famero total\n let animTimeout;\n function animateTotal(newText) {\n const el = document.getElementById('scGrandTotal');\n clearTimeout(animTimeout);\n el.classList.add('animating');\n animTimeout = setTimeout(() => {\n el.textContent = newText;\n el.classList.remove('animating');\n }, 150);\n }\n\n \/\/ \u2500\u2500\u2500 MODAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.scOpenModal = function() {\n const ids = [...state.checked];\n if (ids.length === 0) return;\n\n \/\/ Poblar \u00edtems del modal\n const itemsEl = document.getElementById('scModalItems');\n itemsEl.innerHTML = '';\n ids.forEach(id => {\n const svc = SERVICES[id];\n if (!svc) return;\n const row = document.createElement('div');\n row.className = 'sc-modal-item';\n row.innerHTML = `<span>${svc.name}<\/span><span class=\"sc-modal-item-price\">${fmt(svc.price)}<\/span>`;\n itemsEl.appendChild(row);\n });\n\n \/\/ Si hay descuento, agregar fila\n if (window._scDiscount > 0) {\n const discRow = document.createElement('div');\n discRow.className = 'sc-modal-item';\n discRow.innerHTML = `<span style=\"color:var(--spa-accent)\">Descuento (${state.discount}%)<\/span><span class=\"sc-modal-item-price\" style=\"color:var(--spa-accent)\">- ${fmt(window._scDiscount)}<\/span>`;\n itemsEl.appendChild(discRow);\n }\n\n document.getElementById('scModalTotal').textContent = fmt(window._scTotal);\n\n \/\/ Fecha m\u00ednima = hoy\n const now = new Date();\n const pad = n => String(n).padStart(2, '0');\n document.getElementById('scDateTime').min = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}T00:00`;\n\n \/\/ Mostrar formulario (ocultar \u00e9xito si ven\u00eda de antes)\n document.getElementById('scModalForm').style.display = 'block';\n document.getElementById('scModalSuccess').style.display = 'none';\n\n document.getElementById('scModalOverlay').classList.add('open');\n document.body.style.overflow = 'hidden';\n };\n\n window.scCloseModal = function() {\n document.getElementById('scModalOverlay').classList.remove('open');\n document.body.style.overflow = '';\n };\n\n \/\/ Cerrar al click fuera del modal\n document.getElementById('scModalOverlay').addEventListener('click', function(e) {\n if (e.target === this) scCloseModal();\n });\n\n window.scConfirmarReserva = function() {\n const fecha = document.getElementById('scDateTime').value;\n const nombre = document.getElementById('scNombre').value.trim();\n\n if (!fecha) { alert('Por favor selecciona una fecha y hora para tu cita.'); return; }\n if (!nombre) { alert('Por favor ingresa tu nombre.'); return; }\n\n const fechaFormateada = new Date(fecha).toLocaleString('es-CO', {\n weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',\n hour: '2-digit', minute: '2-digit'\n });\n\n \/\/ \u2500\u2500 Preparar payload para BOOKING_URL \u2500\u2500\n const payload = {\n nombre,\n fecha: fechaFormateada,\n servicios: [...state.checked].map(id => SERVICES[id]?.name).join(', '),\n total: window._scTotal,\n };\n\n if (BOOKING_URL) {\n \/\/ Env\u00edo real a pasarela \/ sistema de reservas\n fetch(BOOKING_URL, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload),\n }).catch(err => console.warn('Booking error:', err));\n }\n\n \/\/ Mostrar pantalla de \u00e9xito\n document.getElementById('scModalForm').style.display = 'none';\n document.getElementById('scModalSuccess').style.display = 'block';\n\n \/\/ Limpiar estado despu\u00e9s de 4 s y cerrar modal\n setTimeout(() => {\n scCloseModal();\n \/\/ Reset\n state.checked.clear();\n state.activePkg = null;\n state.discount = 0;\n document.querySelectorAll('.sc-service-item').forEach(el => el.classList.remove('checked'));\n document.querySelectorAll('.sc-pkg').forEach(p => p.classList.remove('active'));\n render();\n }, 4000);\n };\n\n \/\/ \u2500\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\n render();\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-2d5a8df e-con-full e-flex e-con e-parent\" data-id=\"2d5a8df\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-86b9f65 elementor-widget elementor-widget-html\" data-id=\"86b9f65\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Testimonios SERENZA - Carrusel Autom\u00e1tico<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-bg-soft: #EFEAE4;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 24px;\n --spa-shadow: 0 15px 35px rgba(0,0,0,0.05);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .spa-testimonials {\n background: var(--spa-bg);\n padding: 5rem 2rem;\n font-family: var(--spa-font-body);\n }\n\n .spa-container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .spa-section-header {\n text-align: center;\n margin-bottom: 3rem;\n }\n\n .spa-section-title {\n font-family: var(--spa-font-title);\n font-size: 2.6rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n margin-bottom: 0.5rem;\n }\n\n .spa-section-subtitle {\n font-size: 1rem;\n color: var(--spa-text);\n opacity: 0.7;\n }\n\n \/* Carrusel sin controles *\/\n .carousel-container {\n position: relative;\n max-width: 900px;\n margin: 0 auto;\n overflow: hidden;\n border-radius: var(--spa-radius);\n box-shadow: var(--spa-shadow);\n background: var(--spa-white);\n }\n\n .carousel-slides {\n display: flex;\n transition: transform 0.5s ease-in-out;\n }\n\n .testimonial-card {\n flex: 0 0 100%;\n padding: 2.5rem;\n text-align: center;\n background: var(--spa-white);\n }\n\n .testimonial-avatar {\n width: 80px;\n height: 80px;\n margin: 0 auto 1.5rem;\n background: var(--spa-bg-soft);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--spa-gold-light);\n }\n\n .testimonial-avatar svg {\n width: 45px;\n height: 45px;\n fill: var(--spa-primary);\n }\n\n .testimonial-text {\n font-size: 1.1rem;\n line-height: 1.6;\n color: var(--spa-text);\n max-width: 600px;\n margin: 0 auto 1.5rem;\n font-style: italic;\n }\n\n .testimonial-name {\n font-family: var(--spa-font-title);\n font-size: 1.2rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n margin-bottom: 0.25rem;\n }\n\n .testimonial-role {\n font-size: 0.85rem;\n color: var(--spa-gold);\n letter-spacing: 0.5px;\n }\n\n @media (max-width: 768px) {\n .testimonial-card { padding: 1.8rem; }\n .testimonial-text { font-size: 1rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<section class=\"spa-testimonials\">\n <div class=\"spa-container\">\n <div class=\"spa-section-header\">\n <h2 class=\"spa-section-title\">Lo que dicen de nosotras<\/h2>\n <p class=\"spa-section-subtitle\">Experiencias reales de bienestar y transformaci\u00f3n<\/p>\n <\/div>\n\n <div class=\"carousel-container\">\n <div class=\"carousel-slides\" id=\"slidesContainer\">\n \n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El masaje relajante fue una experiencia sublime. Sal\u00ed renovada, sin estr\u00e9s. Definitivamente volver\u00e9 cada mes.\"<\/p>\n <h4 class=\"testimonial-name\">Mar\u00eda Fernanda G.<\/h4>\n <p class=\"testimonial-role\">Cliente frecuente<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El facial revitalizante dej\u00f3 mi piel radiante. Los productos org\u00e1nicos y la atenci\u00f3n personalizada marcan la diferencia.\"<\/p>\n <h4 class=\"testimonial-name\">Laura Jim\u00e9nez<\/h4>\n <p class=\"testimonial-role\">Primera vez<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El ambiente es pura calma. La reflexolog\u00eda podal me ayud\u00f3 con la fatiga. Un oasis en la ciudad.\"<\/p>\n <h4 class=\"testimonial-name\">Andrea R\u00edos<\/h4>\n <p class=\"testimonial-role\">Recomendado por amiga<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El paquete de bienestar integral me cambi\u00f3 la semana. Terapias completas en un solo lugar. Excelentes terapeutas.\"<\/p>\n <h4 class=\"testimonial-name\">Carolina M\u00e9ndez<\/h4>\n <p class=\"testimonial-role\">Socia Serenza<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"Atenci\u00f3n impecable, instalaciones hermosas. La aromaterapia me ayud\u00f3 a dormir mejor. 100% recomendado.\"<\/p>\n <h4 class=\"testimonial-name\">Daniela Castro<\/h4>\n <p class=\"testimonial-role\">Cliente frecuente<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El tratamiento facial con productos org\u00e1nicos dej\u00f3 mi rostro luminoso. El espacio es muy relajante, volver\u00e9.\"<\/p>\n <h4 class=\"testimonial-name\">Valentina Su\u00e1rez<\/h4>\n <p class=\"testimonial-role\">Recomendado<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"El masaje descontracturante fue justo lo que necesitaba. Profesionales muy atentos y respetuosos.\"<\/p>\n <h4 class=\"testimonial-name\">Isabel Cristina L.<\/h4>\n <p class=\"testimonial-role\">Atleta<\/p>\n <\/div>\n <div class=\"testimonial-card\">\n <div class=\"testimonial-avatar\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\"La experiencia completa de spa me hizo sentir renovada. Definitivamente el mejor lugar de bienestar en Bogot\u00e1.\"<\/p>\n <h4 class=\"testimonial-name\">Paula Andrea G.<\/h4>\n <p class=\"testimonial-role\">Embajadora de marca<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n const slides = document.querySelectorAll('.testimonial-card');\n const slidesContainer = document.getElementById('slidesContainer');\n let currentIndex = 0;\n let intervalId = null;\n const totalSlides = slides.length;\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 }\n\n function nextSlide() {\n goToSlide(currentIndex + 1);\n }\n\n function startAutoSlide() {\n if (intervalId) clearInterval(intervalId);\n intervalId = setInterval(nextSlide, 5000);\n }\n\n function stopAutoSlide() {\n if (intervalId) {\n clearInterval(intervalId);\n intervalId = null;\n }\n }\n\n const carouselContainer = document.querySelector('.carousel-container');\n carouselContainer.addEventListener('mouseenter', stopAutoSlide);\n carouselContainer.addEventListener('mouseleave', startAutoSlide);\n\n startAutoSlide();\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-75102d2 e-con-full e-flex e-con e-parent\" data-id=\"75102d2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d7b078 elementor-widget elementor-widget-html\" data-id=\"7d7b078\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Footer SERENZA<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');\n\n :root {\n --spa-bg: #F8F5F0;\n --spa-bg-soft: #EFEAE4;\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-primary-light: #6FB3A7;\n --spa-gold: #C9A46B;\n --spa-gold-light: #E5C79A;\n --spa-text: #3A3A3A;\n --spa-white: #FFFFFF;\n --spa-radius: 16px;\n --spa-shadow: 0 -10px 30px rgba(0,0,0,0.03);\n --spa-font-title: 'Playfair Display', serif;\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .spa-footer {\n background: var(--spa-white);\n border-top: 1px solid rgba(0,0,0,0.05);\n padding: 4rem 2rem 2rem;\n font-family: var(--spa-font-body);\n color: var(--spa-text);\n }\n\n .spa-container {\n max-width: 1280px;\n margin: 0 auto;\n }\n\n .footer-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2rem;\n margin-bottom: 3rem;\n }\n\n \/* Logo y marca *\/\n .footer-brand .footer-logo {\n max-width: 160px;\n height: auto;\n margin-bottom: 1rem;\n }\n\n .footer-brand .brand-name {\n font-family: var(--spa-font-title);\n font-size: 1.6rem;\n font-weight: 600;\n color: var(--spa-primary-dark);\n margin-bottom: 0.5rem;\n }\n\n .footer-brand .brand-desc {\n font-size: 0.9rem;\n line-height: 1.5;\n opacity: 0.75;\n }\n\n .footer-col h4 {\n font-family: var(--spa-font-title);\n font-size: 1.2rem;\n font-weight: 600;\n color: var(--spa-primary);\n margin-bottom: 1.2rem;\n position: relative;\n display: inline-block;\n }\n\n .footer-col h4::after {\n content: '';\n position: absolute;\n bottom: -6px;\n left: 0;\n width: 30px;\n height: 2px;\n background: var(--spa-gold);\n }\n\n .footer-links {\n list-style: none;\n }\n\n .footer-links li {\n margin-bottom: 0.7rem;\n }\n\n .footer-links a {\n text-decoration: none;\n color: var(--spa-text);\n font-size: 0.9rem;\n transition: color 0.2s, padding-left 0.2s;\n display: inline-block;\n opacity: 0.8;\n }\n\n .footer-links a:hover {\n color: var(--spa-primary);\n padding-left: 5px;\n opacity: 1;\n }\n\n .contact-info p {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9rem;\n margin-bottom: 0.8rem;\n opacity: 0.8;\n }\n\n .contact-info svg {\n width: 18px;\n height: 18px;\n stroke: var(--spa-primary);\n stroke-width: 1.5;\n fill: none;\n flex-shrink: 0;\n }\n\n .social-links {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .social-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 38px;\n height: 38px;\n background: var(--spa-bg-soft);\n border-radius: 50%;\n transition: all 0.3s;\n }\n\n .social-icon svg {\n width: 20px;\n height: 20px;\n stroke: var(--spa-primary);\n stroke-width: 1.5;\n fill: none;\n }\n\n .social-icon:hover {\n background: var(--spa-primary);\n transform: translateY(-3px);\n }\n\n .social-icon:hover svg {\n stroke: white;\n }\n\n .hours p {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.8;\n display: flex;\n justify-content: space-between;\n }\n\n .hours strong {\n color: var(--spa-primary-dark);\n font-weight: 500;\n }\n\n .footer-bottom {\n text-align: center;\n padding-top: 2rem;\n border-top: 1px solid rgba(0,0,0,0.05);\n font-size: 0.8rem;\n opacity: 0.7;\n letter-spacing: 0.3px;\n }\n\n @media (max-width: 1023px) {\n .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }\n .spa-footer { padding: 3rem 1.5rem 1.5rem; }\n }\n\n @media (max-width: 767px) {\n .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }\n .footer-bottom { font-size: 0.7rem; }\n .hours p { justify-content: flex-start; gap: 1rem; }\n .footer-brand .footer-logo { max-width: 130px; }\n }\n<\/style>\n<\/head>\n<body>\n\n<footer class=\"spa-footer\">\n <div class=\"spa-container\">\n <div class=\"footer-grid\">\n \n <div class=\"footer-brand\">\n <img decoding=\"async\" class=\"footer-logo\" src=\"https:\/\/www.sntechnology.com.co\/serenza\/wp-content\/uploads\/sites\/6\/2026\/05\/Serenza.png\" alt=\"Serenza Spa & Bienestar\">\n <div class=\"brand-name\">SERENZA<\/div>\n <div class=\"brand-desc\">Spa & Bienestar \u00b7 Un espacio donde la calma y la sofisticaci\u00f3n se encuentran para restaurar tu equilibrio interior.<\/div>\n <\/div>\n\n \n <div class=\"footer-col\">\n <h4>Explora<\/h4>\n <ul class=\"footer-links\">\n <li><a href=\"#\">Inicio<\/a><\/li>\n <li><a href=\"#servicios\">Servicios<\/a><\/li>\n <li><a href=\"#\">Experiencias<\/a><\/li>\n <li><a href=\"#\">Testimonios<\/a><\/li>\n <li><a href=\"#\">Contacto<\/a><\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"footer-col\">\n <h4>Contacto<\/h4>\n <div class=\"contact-info\">\n <p>\n <svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n Calle de la Serenidad #123, Bogot\u00e1\n <\/p>\n <p>\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n +57 (601) 123 4567\n <\/p>\n <p>\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n hola@serenzaspa.com\n <\/p>\n <\/div>\n <div class=\"hours\">\n <h4 style=\"margin-top: 1rem;\">Horario<\/h4>\n <p><strong>Lun - Vie:<\/strong> 9:00 am \u2013 8:00 pm<\/p>\n <p><strong>S\u00e1bado:<\/strong> 10:00 am \u2013 6:00 pm<\/p>\n <p><strong>Domingo:<\/strong> Cerrado<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"footer-col\">\n <h4>S\u00edguenos<\/h4>\n <div class=\"social-links\">\n <a href=\"#\" class=\"social-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"4\" ry=\"4\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/><\/svg><\/a>\n <a href=\"#\" class=\"social-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"social-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"social-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5\"\/><\/svg><\/a>\n <\/div>\n <p style=\"margin-top: 1.5rem; font-size: 0.8rem; opacity:0.7;\">#SerenzaBienestar<\/p>\n <\/div>\n <\/div>\n\n <div class=\"footer-bottom\">\n \u00a9 2026 SERENZA Spa & Bienestar. Todos los derechos reservados. | Dise\u00f1o con \u2661 para el bienestar integral. by dise\u00f1oweb.com - SNTECHNOLOGY SAS\n <\/div>\n <\/div>\n<\/footer>\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-e663b3d e-con-full e-flex e-con e-parent\" data-id=\"e663b3d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9035a61 elementor-widget elementor-widget-html\" data-id=\"9035a61\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Bot\u00f3n WhatsApp SERENZA - Icono oficial<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\n\n :root {\n --spa-primary: #2E8B7E;\n --spa-primary-dark: #1F5F56;\n --spa-white: #FFFFFF;\n --spa-shadow: 0 10px 25px rgba(0,0,0,0.1);\n --spa-font-body: 'Poppins', sans-serif;\n }\n\n .spa-whatsapp {\n position: fixed;\n bottom: 25px;\n right: 25px;\n z-index: 9999;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--spa-primary);\n border-radius: 50%;\n width: 60px;\n height: 60px;\n box-shadow: var(--spa-shadow);\n transition: all 0.3s ease;\n cursor: pointer;\n text-decoration: none;\n }\n\n .spa-whatsapp:hover {\n background-color: var(--spa-primary-dark);\n transform: scale(1.08);\n box-shadow: 0 15px 30px rgba(0,0,0,0.15);\n }\n\n \/* Icono oficial de WhatsApp (SVG est\u00e1ndar) *\/\n .spa-whatsapp svg {\n width: 34px;\n height: 34px;\n fill: white;\n }\n\n .spa-tooltip {\n position: absolute;\n right: 70px;\n background: var(--spa-white);\n color: var(--spa-primary-dark);\n font-family: var(--spa-font-body);\n font-size: 0.85rem;\n font-weight: 500;\n padding: 0.5rem 1rem;\n border-radius: 40px;\n white-space: nowrap;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s, visibility 0.2s;\n pointer-events: none;\n }\n\n .spa-whatsapp:hover .spa-tooltip {\n opacity: 1;\n visibility: visible;\n }\n\n @media (max-width: 767px) {\n .spa-whatsapp { width: 50px; height: 50px; bottom: 20px; right: 20px; }\n .spa-whatsapp svg { width: 28px; height: 28px; }\n .spa-tooltip { font-size: 0.75rem; right: 60px; padding: 0.4rem 0.8rem; }\n }\n<\/style>\n<\/head>\n<body>\n <a href=\"https:\/\/wa.me\/573001234567?text=Hola%20SERENZA%2C%20quiero%20reservar%20una%20cita%20y%20recibir%20m\u00e1s%20informaci\u00f3n.\" class=\"spa-whatsapp\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"WhatsApp\">\n \n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.84 3.1 1.29 4.81 1.29 5.46 0 9.91-4.45 9.91-9.91 0-5.46-4.45-9.91-9.91-9.91zm0 18.23c-1.5 0-2.96-.4-4.23-1.16l-.3-.18-3.12.82.84-3.05-.2-.32c-.82-1.33-1.26-2.87-1.26-4.44 0-4.62 3.76-8.38 8.38-8.38s8.38 3.76 8.38 8.38-3.76 8.38-8.38 8.38zm4.59-6.28c-.25-.12-1.47-.72-1.7-.8-.23-.09-.4-.12-.56.12-.16.24-.63.8-.77.96-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.92-1.18-.71-.63-1.19-1.41-1.33-1.65-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.16 1.69 2.58 4.09 3.62.57.25 1.02.4 1.37.51.57.18 1.09.15 1.5.09.46-.06 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.47-.28z\"\/>\n <\/svg>\n <span class=\"spa-tooltip\">\u00bfHablamos por WhatsApp?<\/span>\n <\/a>\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>Navbar SERENZA – Men\u00fa lateral derecho Reservar cita × Inicio Servicios Experiencias Galer\u00eda Testimonios Contacto × Reserva tu momento Elige […]<\/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-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":46,"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/pages\/10\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/www.sntechnology.com.co\/serenza\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}