{"id":7601,"date":"2026-05-18T13:31:38","date_gmt":"2026-05-18T13:31:38","guid":{"rendered":"https:\/\/etchenet.com\/?page_id=7601"},"modified":"2026-05-27T20:29:13","modified_gmt":"2026-05-27T20:29:13","slug":"auralis-spa-experience","status":"publish","type":"page","link":"https:\/\/etchenet.com\/es\/auralis-spa-experience\/","title":{"rendered":"Experiencia en el spa Auralis"},"content":{"rendered":"\n\n <style>\n :root {\n --sage: #9eb7a4;\n --sage-deep: #587463;\n --sage-light: #d8eadc;\n --ivory: #fffaf1;\n --mist: #eef6ef;\n --white: rgba(255, 255, 255, 0.94);\n --muted: rgba(255, 255, 255, 0.76);\n --soft: rgba(255, 255, 255, 0.16);\n --border: rgba(255, 255, 255, 0.34);\n --shadow: rgba(21, 34, 28, 0.28);\n --page-x: min(1120px, calc(100vw - 40px));\n --header-h: 72px;\n }\n\n html {\n scroll-behavior: auto;\n background: transparent;\n }\n\n body {\n margin: 0;\n min-height: 100vh;\n overflow-x: hidden;\n color: var(--white);\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n background: transparent;\n }\n\n * {\n box-sizing: border-box;\n }\n\n a {\n text-decoration: none;\n }\n\n .etch-spa-page {\n position: relative;\n width: 100%;\n min-height: 100vh;\n overflow: clip;\n }\n\n .etch-spa-bg-video {\n position: fixed;\n inset: 0;\n z-index: -3;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0;\n filter: saturate(1.04) contrast(1.02) brightness(1.02);\n transition: opacity 900ms ease;\n }\n\n .etch-spa-page.etch-video-ready .etch-spa-bg-video {\n opacity: 1;\n }\n\n .etch-spa-fallback {\n display: none;\n }\n\n .etch-spa-vignette {\n position: fixed;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n background: transparent;\n mix-blend-mode: normal;\n }\n\n .etch-spa-grain {\n display: none;\n }\n\n .etch-spa-header-wrap {\n position: fixed;\n top: clamp(26px, 4.8vh, 58px);\n left: 50%;\n transform: translateX(-50%);\n z-index: 50;\n width: min(920px, calc(100% - 48px));\n }\n\n .etch-spa-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 22px;\n padding: 12px 16px;\n border: 1px solid var(--border);\n border-radius: 999px;\n background:\n linear-gradient(145deg, rgba(255,255,255,0.26), rgba(255,255,255,0.075)),\n rgba(255,255,255,0.13);\n backdrop-filter: blur(28px) saturate(155%);\n -webkit-backdrop-filter: blur(28px) saturate(155%);\n box-shadow: 0 18px 70px rgba(33, 46, 38, 0.24);\n }\n\n .etch-spa-brand {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n color: var(--ivory);\n text-transform: uppercase;\n letter-spacing: 0.13em;\n font-weight: 780;\n }\n\n .etch-spa-logo {\n width: 39px;\n height: 39px;\n flex: 0 0 39px;\n filter: drop-shadow(0 0 16px rgba(216, 234, 220, 0.55));\n }\n\n .etch-spa-brand-text {\n display: flex;\n flex-direction: column;\n line-height: 1;\n }\n\n .etch-spa-brand-main {\n font-size: 0.88rem;\n }\n\n .etch-spa-brand-sub {\n margin-top: 5px;\n color: var(--sage-light);\n font-size: 0.56rem;\n letter-spacing: 0.24em;\n font-weight: 560;\n }\n\n .etch-spa-menu {\n display: flex;\n align-items: center;\n gap: 22px;\n font-size: 0.72rem;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n\n .etch-spa-menu a {\n color: rgba(255,255,255,0.76);\n transition: color 260ms ease;\n }\n\n .etch-spa-menu a:hover {\n color: var(--ivory);\n }\n\n .etch-spa-pill {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 36px;\n padding: 0 17px;\n border-radius: 999px;\n border: 1px solid rgba(216, 234, 220, 0.62);\n color: var(--ivory);\n background: rgba(216, 234, 220, 0.14);\n font-size: 0.76rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n .etch-spa-progress {\n position: fixed;\n left: 50%;\n bottom: clamp(22px, 4vh, 42px);\n transform: translateX(-50%);\n z-index: 40;\n display: flex;\n gap: 9px;\n padding: 10px 12px;\n border: 1px solid rgba(255,255,255,0.22);\n border-radius: 999px;\n background: rgba(255,255,255,0.10);\n backdrop-filter: blur(18px) saturate(150%);\n -webkit-backdrop-filter: blur(18px) saturate(150%);\n box-shadow: 0 16px 48px rgba(21, 34, 28, 0.24);\n }\n\n .etch-spa-dot {\n width: 7px;\n height: 7px;\n border: 0;\n padding: 0;\n border-radius: 999px;\n background: rgba(255,255,255,0.44);\n cursor: pointer;\n transition: width 320ms ease, background 320ms ease;\n }\n\n .etch-spa-dot.is-active {\n width: 30px;\n background: var(--ivory);\n }\n\n .etch-spa-section {\n position: relative;\n z-index: 2;\n min-height: 100vh;\n min-height: 100svh;\n width: var(--page-x);\n margin: 0 auto;\n display: grid;\n align-items: center;\n padding: clamp(104px, 14vh, 150px) 0 clamp(70px, 10vh, 110px);\n scroll-margin-top: 0;\n }\n\n .etch-spa-section > * {\n position: relative;\n z-index: 2;\n }\n\n .etch-spa-content {\n opacity: 1;\n transform: translateY(0);\n }\n\n .etch-spa-page.etch-snap-ready .etch-spa-content {\n opacity: 0.32;\n transform: translateY(16px) scale(0.985);\n filter: blur(0.4px);\n transition:\n opacity 820ms ease,\n transform 820ms ease,\n filter 820ms ease;\n }\n\n .etch-spa-page.etch-snap-ready .etch-spa-section.etch-spa-active .etch-spa-content {\n opacity: 1;\n transform: translateY(0) scale(1);\n filter: blur(0);\n }\n\n .etch-spa-content {\n width: min(780px, 100%);\n }\n\n .etch-spa-kicker {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n margin-bottom: 16px;\n color: var(--sage-light);\n font-size: 0.72rem;\n font-weight: 780;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n text-shadow: 0 8px 28px rgba(18, 28, 23, 0.36);\n }\n\n .etch-spa-kicker::before,\n .etch-spa-kicker::after {\n content: \"\";\n width: 34px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--sage-light), transparent);\n }\n\n .etch-spa-title {\n margin: 0;\n max-width: 880px;\n color: var(--ivory);\n font-size: clamp(3.25rem, 6.6vw, 7.2rem);\n line-height: 0.89;\n letter-spacing: -0.075em;\n font-weight: 810;\n text-wrap: balance;\n text-shadow: 0 24px 80px rgba(18, 28, 23, 0.48);\n }\n\n .etch-spa-title span,\n .etch-spa-heading span {\n color: transparent;\n background: linear-gradient(125deg, #fffaf1, #d8eadc 46%, #8fae97);\n -webkit-background-clip: text;\n background-clip: text;\n }\n\n .etch-spa-heading {\n margin: 0;\n max-width: 780px;\n color: var(--ivory);\n font-size: clamp(2.35rem, 4.35vw, 4.9rem);\n line-height: 0.96;\n letter-spacing: -0.057em;\n font-weight: 790;\n text-wrap: balance;\n text-shadow: 0 22px 70px rgba(18, 28, 23, 0.40);\n }\n\n .etch-spa-text {\n max-width: 640px;\n margin: 22px 0 0;\n color: var(--muted);\n font-size: clamp(1rem, 1.15vw, 1.16rem);\n line-height: 1.72;\n text-shadow: 0 8px 28px rgba(18, 28, 23, 0.34);\n }\n\n .etch-spa-card {\n width: min(680px, 100%);\n margin: 34px 0 0;\n padding: clamp(24px, 3vw, 36px);\n border: 1px solid var(--border);\n border-radius: 34px;\n background:\n linear-gradient(145deg, rgba(255,255,255,0.25), rgba(255,255,255,0.075)),\n rgba(255,255,255,0.135);\n backdrop-filter: blur(28px) saturate(150%);\n -webkit-backdrop-filter: blur(28px) saturate(150%);\n box-shadow:\n 0 28px 90px rgba(21, 34, 28, 0.25),\n inset 0 1px 0 rgba(255,255,255,0.24);\n }\n\n .etch-spa-card-title {\n margin: 0 0 12px;\n color: var(--ivory);\n font-size: 0.9rem;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n }\n\n .etch-spa-card p {\n max-width: 560px;\n margin: 0;\n color: rgba(255,255,255,0.76);\n line-height: 1.68;\n font-size: 0.98rem;\n }\n\n .etch-spa-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 13px;\n margin-top: 28px;\n }\n\n .etch-spa-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 46px;\n padding: 0 22px;\n border-radius: 999px;\n border: 1px solid rgba(255,255,255,0.72);\n color: #243129;\n background: linear-gradient(135deg, #fffaf1, #d8eadc 58%, #9eb7a4);\n font-weight: 780;\n letter-spacing: 0.045em;\n box-shadow: 0 18px 46px rgba(216, 234, 220, 0.22);\n transition: transform 260ms ease, box-shadow 260ms ease;\n }\n\n .etch-spa-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 24px 58px rgba(216, 234, 220, 0.28);\n }\n\n .etch-spa-btn-soft {\n color: var(--ivory);\n background: rgba(255,255,255,0.13);\n border-color: rgba(255,255,255,0.30);\n }\n\n .etch-spa-mini-specs {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin: 28px 0 0;\n }\n\n .etch-spa-mini-spec {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border: 1px solid rgba(255,255,255,0.26);\n border-radius: 999px;\n color: rgba(255,255,255,0.80);\n background: rgba(255,255,255,0.11);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n font-size: 0.78rem;\n letter-spacing: 0.07em;\n text-transform: uppercase;\n }\n\n .etch-spa-mini-spec strong {\n color: var(--ivory);\n font-weight: 780;\n }\n\n .etch-spa-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 14px;\n margin: 34px 0 0;\n width: min(860px, 100%);\n }\n\n .etch-spa-small-card {\n min-height: 150px;\n padding: 22px 20px;\n border: 1px solid rgba(255,255,255,0.26);\n border-radius: 28px;\n background:\n linear-gradient(145deg, rgba(255,255,255,0.23), rgba(255,255,255,0.07)),\n rgba(255,255,255,0.13);\n backdrop-filter: blur(24px) saturate(150%);\n -webkit-backdrop-filter: blur(24px) saturate(150%);\n box-shadow: 0 22px 70px rgba(21, 34, 28, 0.22);\n }\n\n .etch-spa-small-card strong {\n display: block;\n margin-bottom: 10px;\n color: var(--ivory);\n font-size: 0.8rem;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n }\n\n .etch-spa-small-card span {\n display: block;\n color: rgba(255,255,255,0.74);\n line-height: 1.58;\n font-size: 0.93rem;\n }\n\n .etch-spa-orb {\n position: absolute;\n z-index: 1;\n border: 1px solid rgba(255,255,255,0.24);\n border-radius: 999px;\n background:\n radial-gradient(circle at 34% 28%, rgba(255,255,255,0.38), transparent 28%),\n linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n box-shadow: 0 24px 80px rgba(21,34,28,0.16);\n pointer-events: none;\n }\n\n .etch-spa-orb-a {\n width: clamp(130px, 16vw, 230px);\n height: clamp(130px, 16vw, 230px);\n right: 7%;\n top: 24%;\n }\n\n .etch-spa-orb-b {\n width: clamp(70px, 9vw, 140px);\n height: clamp(70px, 9vw, 140px);\n right: 25%;\n bottom: 17%;\n opacity: 0.72;\n }\n\n .etch-spa-orb-c {\n width: clamp(90px, 12vw, 170px);\n height: clamp(90px, 12vw, 170px);\n left: 7%;\n bottom: 18%;\n opacity: 0.66;\n }\n\n .etch-spa-ripple {\n position: absolute;\n z-index: 1;\n width: min(46vw, 530px);\n aspect-ratio: 1;\n border-radius: 50%;\n border: 1px solid rgba(255,255,255,0.18);\n pointer-events: none;\n opacity: 0.8;\n }\n\n .etch-spa-ripple::before,\n .etch-spa-ripple::after {\n content: \"\";\n position: absolute;\n inset: 12%;\n border-radius: 50%;\n border: 1px solid rgba(255,255,255,0.14);\n }\n\n .etch-spa-ripple::after {\n inset: 26%;\n border-color: rgba(255,255,255,0.10);\n }\n\n .etch-spa-layout-hero {\n place-items: center;\n text-align: center;\n }\n\n .etch-spa-layout-hero .etch-spa-content,\n .etch-spa-layout-hero .etch-spa-text,\n .etch-spa-layout-hero .etch-spa-actions {\n margin-left: auto;\n margin-right: auto;\n justify-content: center;\n }\n\n .etch-spa-layout-hero .etch-spa-title {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-spa-layout-soft-left {\n grid-template-columns: minmax(0, 0.58fr) minmax(260px, 0.42fr);\n column-gap: clamp(30px, 7vw, 96px);\n text-align: left;\n }\n\n .etch-spa-layout-soft-left .etch-spa-content {\n grid-column: 1;\n justify-self: start;\n }\n\n .etch-spa-layout-soft-left .etch-spa-kicker {\n justify-content: flex-start;\n }\n\n .etch-spa-layout-soft-left .etch-spa-kicker::after {\n display: none;\n }\n\n .etch-spa-side-note {\n grid-column: 2;\n width: min(360px, 100%);\n justify-self: end;\n align-self: center;\n padding: 24px;\n border: 1px solid rgba(255,255,255,0.22);\n border-radius: 28px;\n background: rgba(255,255,255,0.11);\n backdrop-filter: blur(22px) saturate(145%);\n -webkit-backdrop-filter: blur(22px) saturate(145%);\n box-shadow: 0 26px 80px rgba(21,34,28,0.20);\n }\n\n .etch-spa-side-note strong {\n display: block;\n margin-bottom: 10px;\n color: var(--ivory);\n font-size: 0.78rem;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n }\n\n .etch-spa-side-note span {\n color: rgba(255,255,255,0.72);\n line-height: 1.64;\n font-size: 0.96rem;\n }\n\n .etch-spa-layout-split {\n grid-template-columns: minmax(260px, 0.43fr) minmax(0, 0.57fr);\n column-gap: clamp(30px, 7vw, 96px);\n text-align: right;\n }\n\n .etch-spa-layout-split .etch-spa-content {\n grid-column: 2;\n justify-self: end;\n }\n\n .etch-spa-layout-split .etch-spa-text,\n .etch-spa-layout-split .etch-spa-card p {\n margin-left: auto;\n }\n\n .etch-spa-layout-split .etch-spa-actions,\n .etch-spa-layout-split .etch-spa-mini-specs {\n justify-content: flex-end;\n }\n\n .etch-spa-layout-split .etch-spa-kicker {\n justify-content: flex-end;\n }\n\n .etch-spa-layout-split .etch-spa-kicker::before {\n display: none;\n }\n\n .etch-spa-layout-split .etch-spa-ripple {\n left: 4%;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .etch-spa-layout-gallery {\n place-items: center;\n text-align: center;\n }\n\n .etch-spa-layout-gallery .etch-spa-content,\n .etch-spa-layout-gallery .etch-spa-text,\n .etch-spa-layout-gallery .etch-spa-grid {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-spa-layout-calm {\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n column-gap: clamp(26px, 5vw, 70px);\n text-align: left;\n }\n\n .etch-spa-layout-calm .etch-spa-content {\n grid-column: 1 \/ -1;\n width: min(820px, 100%);\n justify-self: center;\n text-align: center;\n }\n\n .etch-spa-layout-calm .etch-spa-text,\n .etch-spa-layout-calm .etch-spa-card {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-spa-layout-calm .etch-spa-card p {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-spa-layout-final {\n place-items: center;\n text-align: center;\n padding-bottom: clamp(44px, 6vh, 70px);\n }\n\n .etch-spa-layout-final .etch-spa-content,\n .etch-spa-layout-final .etch-spa-text,\n .etch-spa-layout-final .etch-spa-card,\n .etch-spa-layout-final .etch-spa-actions {\n margin-left: auto;\n margin-right: auto;\n justify-content: center;\n }\n\n .etch-spa-layout-final .etch-spa-card p {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-spa-footer {\n width: min(960px, 100%);\n margin: 34px auto 0;\n padding: 28px;\n border: 1px solid var(--border);\n border-radius: 34px;\n background:\n linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.075)),\n rgba(255,255,255,0.14);\n backdrop-filter: blur(28px) saturate(145%);\n -webkit-backdrop-filter: blur(28px) saturate(145%);\n box-shadow: 0 24px 80px rgba(21, 34, 28, 0.24);\n text-align: left;\n }\n\n .etch-spa-footer-grid {\n display: grid;\n grid-template-columns: 1.35fr 1fr 1fr;\n gap: 28px;\n }\n\n .etch-spa-footer-title {\n margin: 0 0 11px;\n color: var(--ivory);\n font-size: 0.88rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n }\n\n .etch-spa-footer-text,\n .etch-spa-footer-links a {\n color: rgba(255,255,255,0.70);\n font-size: 0.92rem;\n line-height: 1.66;\n }\n\n .etch-spa-footer-links {\n display: grid;\n gap: 7px;\n }\n\n .etch-spa-footer-bottom {\n display: flex;\n justify-content: space-between;\n gap: 18px;\n margin-top: 28px;\n padding-top: 19px;\n border-top: 1px solid rgba(255,255,255,0.20);\n color: rgba(255,255,255,0.58);\n font-size: 0.8rem;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .etch-spa-page.etch-snap-ready .etch-spa-content {\n transition: none;\n }\n }\n\n @media (max-width: 980px) {\n :root {\n --page-x: min(760px, calc(100vw - 28px));\n }\n\n .etch-spa-header-wrap {\n width: min(760px, calc(100% - 36px));\n }\n\n .etch-spa-menu {\n display: none;\n }\n\n .etch-spa-section,\n .etch-spa-layout-soft-left,\n .etch-spa-layout-split,\n .etch-spa-layout-calm {\n grid-template-columns: 1fr;\n text-align: center;\n padding: 110px 0 72px;\n }\n\n .etch-spa-content,\n .etch-spa-layout-soft-left .etch-spa-content,\n .etch-spa-layout-split .etch-spa-content,\n .etch-spa-layout-calm .etch-spa-content {\n grid-column: 1;\n justify-self: center;\n width: min(720px, 100%);\n }\n\n .etch-spa-heading,\n .etch-spa-title,\n .etch-spa-text,\n .etch-spa-card,\n .etch-spa-card p {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-spa-kicker,\n .etch-spa-layout-soft-left .etch-spa-kicker,\n .etch-spa-layout-split .etch-spa-kicker {\n justify-content: center;\n }\n\n .etch-spa-layout-soft-left .etch-spa-kicker::after,\n .etch-spa-layout-split .etch-spa-kicker::before {\n display: block;\n }\n\n .etch-spa-actions,\n .etch-spa-layout-split .etch-spa-actions,\n .etch-spa-mini-specs,\n .etch-spa-layout-split .etch-spa-mini-specs {\n justify-content: center;\n }\n\n .etch-spa-side-note {\n grid-column: 1;\n justify-self: center;\n margin-top: 26px;\n }\n\n .etch-spa-orb,\n .etch-spa-ripple {\n display: none;\n }\n\n .etch-spa-grid {\n grid-template-columns: 1fr;\n }\n\n .etch-spa-footer-grid {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .etch-spa-footer-bottom {\n flex-direction: column;\n text-align: center;\n }\n\n .etch-spa-progress {\n display: none;\n }\n }\n\n @media (max-width: 560px) {\n :root {\n --page-x: min(100vw - 24px, 1120px);\n }\n\n .etch-spa-header-wrap {\n top: 18px;\n width: min(100% - 24px, 760px);\n }\n\n .etch-spa-header {\n padding: 11px 13px;\n }\n\n .etch-spa-brand-main {\n font-size: 0.78rem;\n }\n\n .etch-spa-brand-sub {\n font-size: 0.5rem;\n }\n\n .etch-spa-pill {\n display: none;\n }\n\n .etch-spa-section {\n padding: 100px 0 62px;\n }\n\n .etch-spa-title {\n font-size: clamp(2.8rem, 15vw, 5rem);\n }\n\n .etch-spa-heading {\n font-size: clamp(2.1rem, 11vw, 4rem);\n }\n\n .etch-spa-footer {\n padding: 24px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <main class=\"etch-spa-page\" id=\"spa-page\">\n <video class=\"etch-spa-bg-video\" id=\"spa-bg-video\" muted playsinline preload=\"metadata\">\n <source src=\"spa-background.mp4\" type=\"video\/mp4\">\n <\/video>\n\n <div class=\"etch-spa-fallback\" aria-hidden=\"true\"><\/div>\n <div class=\"etch-spa-vignette\" aria-hidden=\"true\"><\/div>\n <div class=\"etch-spa-grain\" aria-hidden=\"true\"><\/div>\n\n <div class=\"etch-spa-header-wrap\">\n <div class=\"etch-spa-header\">\n <a class=\"etch-spa-brand\" href=\"#spa-top\" aria-label=\"Auralis Spa\">\n <svg class=\"etch-spa-logo\" viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"etchSpaCenteredGradient\" x1=\"10\" y1=\"6\" x2=\"54\" y2=\"58\" gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#fffaf1\"><\/stop>\n <stop offset=\"0.46\" stop-color=\"#d8eadc\"><\/stop>\n <stop offset=\"1\" stop-color=\"#8fae97\"><\/stop>\n <\/linearGradient>\n <\/defs>\n <path d=\"M32 10c6 8 8 15 6 21-1.3 4.3-3.7 7.3-6 9-2.3-1.7-4.7-4.7-6-9-2-6 .2-13 6-21Z\" fill=\"url(#etchSpaCenteredGradient)\" opacity=\".96\"><\/path>\n <path d=\"M17 24c8 1 14 6 15 16-8 1-16-2-20-8-2-3-2-6-1-9 2-.2 4.1.1 6 1Z\" fill=\"url(#etchSpaCenteredGradient)\" opacity=\".78\"><\/path>\n <path d=\"M47 24c-8 1-14 6-15 16 8 1 16-2 20-8 2-3 2-6 1-9-2-.2-4.1.1-6 1Z\" fill=\"url(#etchSpaCenteredGradient)\" opacity=\".78\"><\/path>\n <path d=\"M15 47c10 5 24 5 34 0\" fill=\"none\" stroke=\"#fffaf1\" stroke-width=\"3\" stroke-linecap=\"round\" opacity=\".86\"><\/path>\n <path d=\"M22 53c6 2 14 2 20 0\" fill=\"none\" stroke=\"#d8eadc\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\".9\"><\/path>\n <\/svg>\n\n <span class=\"etch-spa-brand-text\">\n <span class=\"etch-spa-brand-main\">Auralis<\/span>\n <span class=\"etch-spa-brand-sub\">Spa<\/span>\n <\/span>\n <\/a>\n\n <nav class=\"etch-spa-menu\" aria-label=\"Demo navigation\">\n <a href=\"#spa-light\">Light<\/a>\n <a href=\"#spa-water\">Water<\/a>\n <a href=\"#spa-ritual\">Ritual<\/a>\n <a href=\"#spa-calm\">Calm<\/a>\n <\/nav>\n\n <a class=\"etch-spa-pill\" href=\"#spa-experience\">Experience<\/a>\n <\/div>\n <\/div>\n\n <div class=\"etch-spa-progress\" aria-label=\"Scroll progress\">\n <button class=\"etch-spa-dot is-active\" type=\"button\" data-target=\"#spa-top\" aria-label=\"Go to top\"><\/button>\n <button class=\"etch-spa-dot\" type=\"button\" data-target=\"#spa-light\" aria-label=\"Go to light\"><\/button>\n <button class=\"etch-spa-dot\" type=\"button\" data-target=\"#spa-water\" aria-label=\"Go to water\"><\/button>\n <button class=\"etch-spa-dot\" type=\"button\" data-target=\"#spa-ritual\" aria-label=\"Go to ritual\"><\/button>\n <button class=\"etch-spa-dot\" type=\"button\" data-target=\"#spa-calm\" aria-label=\"Go to calm\"><\/button>\n <button class=\"etch-spa-dot\" type=\"button\" data-target=\"#spa-experience\" aria-label=\"Go to experience\"><\/button>\n <\/div>\n\n <section id=\"spa-top\" class=\"etch-spa-section etch-spa-layout-hero\">\n <div class=\"etch-spa-content\">\n <div class=\"etch-spa-kicker\">Serenity Scroll Demo<\/div>\n <h1 class=\"etch-spa-title\">Auralis Spa <span>Experience<\/span><\/h1>\n <p class=\"etch-spa-text\">\n A calm cinematic landing page where light, water and silence unfold through scroll.\n <\/p>\n\n <div class=\"etch-spa-actions\">\n <a class=\"etch-spa-btn\" href=\"#spa-light\">Begin the retreat<\/a>\n <a class=\"etch-spa-btn etch-spa-btn-soft\" href=\"#spa-experience\">Plugin demo<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"spa-light\" class=\"etch-spa-section etch-spa-layout-soft-left\">\n <div class=\"etch-spa-content\">\n <div class=\"etch-spa-kicker\">01 \/ Light<\/div>\n <h2 class=\"etch-spa-heading\">Morning Light <span>Breathes<\/span><\/h2>\n <p class=\"etch-spa-text\">\n Soft natural light moves through the space while the page controls the rhythm of the visual journey.\n <\/p>\n\n <div class=\"etch-spa-card\">\n <h3 class=\"etch-spa-card-title\">Soft Arrival<\/h3>\n <p>\n The scroll opens the atmosphere slowly, like entering a quiet wellness retreat.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"etch-spa-side-note\">\n <strong>Light Layer<\/strong>\n <span>A soft, calm composition with the main text anchored left and a secondary glass element floating to the right.<\/span>\n <\/div>\n\n <div class=\"etch-spa-orb etch-spa-orb-a\" aria-hidden=\"true\"><\/div>\n <div class=\"etch-spa-orb etch-spa-orb-b\" aria-hidden=\"true\"><\/div>\n <\/section>\n\n <section id=\"spa-water\" class=\"etch-spa-section etch-spa-layout-split\">\n <div class=\"etch-spa-ripple\" aria-hidden=\"true\"><\/div>\n\n <div class=\"etch-spa-content\">\n <div class=\"etch-spa-kicker\">02 \/ Water<\/div>\n <h2 class=\"etch-spa-heading\">Still Water and Gentle Reflections<\/h2>\n <p class=\"etch-spa-text\">\n Ripples, pale stone and soft mist create a clean sensory environment.\n <\/p>\n\n <div class=\"etch-spa-mini-specs\">\n <span class=\"etch-spa-mini-spec\"><strong>Calm<\/strong> Water<\/span>\n <span class=\"etch-spa-mini-spec\"><strong>Soft<\/strong> Mist<\/span>\n <span class=\"etch-spa-mini-spec\"><strong>Sage<\/strong> Light<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"spa-ritual\" class=\"etch-spa-section etch-spa-layout-gallery\">\n <div class=\"etch-spa-content\">\n <div class=\"etch-spa-kicker\">03 \/ Ritual<\/div>\n <h2 class=\"etch-spa-heading\">A Ritual of Silence<\/h2>\n <p class=\"etch-spa-text\">\n The video becomes the structure of the page, revealing textures, vapor and natural materials.\n <\/p>\n\n <div class=\"etch-spa-grid\">\n <div class=\"etch-spa-small-card\">\n <strong>Scroll Video<\/strong>\n <span>The timeline follows the visitor\u2019s movement through the page.<\/span>\n <\/div>\n\n <div class=\"etch-spa-small-card\">\n <strong>Glass Interface<\/strong>\n <span>Cards stay readable while preserving the soft wellness atmosphere.<\/span>\n <\/div>\n\n <div class=\"etch-spa-small-card\">\n <strong>Calm Story<\/strong>\n <span>The page feels like a premium spa experience, not a standard layout.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"spa-calm\" class=\"etch-spa-section etch-spa-layout-calm\">\n <div class=\"etch-spa-content\">\n <div class=\"etch-spa-kicker\">04 \/ Calm<\/div>\n <h2 class=\"etch-spa-heading\">The Space Opens Into Stillness<\/h2>\n <p class=\"etch-spa-text\">\n The final frames bring the retreat into focus while the interface remains transparent and quiet.\n <\/p>\n\n <div class=\"etch-spa-card\">\n <h3 class=\"etch-spa-card-title\">Scroll Frame Control<\/h3>\n <p>\n Each section becomes a clean reading point while the video continues its peaceful progression in the background.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"etch-spa-orb etch-spa-orb-c\" aria-hidden=\"true\"><\/div>\n <\/section>\n\n <section id=\"spa-experience\" class=\"etch-spa-section etch-spa-layout-final\">\n <div class=\"etch-spa-content\">\n <div class=\"etch-spa-kicker\">WordPress Plugin Demo<\/div>\n <h2 class=\"etch-spa-heading\">Scroll-Controlled Wellness Storytelling<\/h2>\n <p class=\"etch-spa-text\">\n A fictional premium spa landing page designed to demonstrate a cinematic video background controlled by scroll.\n <\/p>\n\n <div class=\"etch-spa-card\">\n <h3 class=\"etch-spa-card-title\">Serenity Spa Scroll Experience<\/h3>\n <p>\n Transparent centered content above an immersive wellness video timeline.\n <\/p>\n\n <div class=\"etch-spa-actions\">\n <a class=\"etch-spa-btn\" href=\"#spa-top\">Replay experience<\/a>\n <\/div>\n <\/div>\n\n <footer class=\"etch-spa-footer\">\n <div class=\"etch-spa-footer-grid\">\n <div>\n <h3 class=\"etch-spa-footer-title\">Auralis Spa<\/h3>\n <p class=\"etch-spa-footer-text\">\n Fictional wellness brand created for a scroll-controlled video background demonstration.\n <\/p>\n <\/div>\n\n <div>\n <h3 class=\"etch-spa-footer-title\">Retreat<\/h3>\n <div class=\"etch-spa-footer-links\">\n <a href=\"#spa-light\">Morning Light<\/a>\n <a href=\"#spa-water\">Still Water<\/a>\n <a href=\"#spa-calm\">Final Calm<\/a>\n <\/div>\n <\/div>\n\n <div>\n <h3 class=\"etch-spa-footer-title\">Experience<\/h3>\n <div class=\"etch-spa-footer-links\">\n <a href=\"#spa-experience\">Scroll Video Demo<\/a>\n <a href=\"#spa-top\">Back to top<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"etch-spa-footer-bottom\">\n <span>\u00a9 2026 Auralis Spa \u2014 Fictional demo brand<\/span>\n <span>Powered by scroll-controlled cinematic storytelling<\/span>\n <\/div>\n <\/footer>\n <\/div>\n <\/section>\n <\/main>\n\n <script>\n (function () {\n function startSpaPage() {\n var root = document.querySelector('.etch-spa-page');\n\n if (!root) {\n window.setTimeout(startSpaPage, 300);\n return;\n }\n\n if (root.dataset.etchSnapReady === '1') return;\n\n root.dataset.etchSnapReady = '1';\n root.classList.add('etch-snap-ready');\n\n var sections = Array.prototype.slice.call(root.querySelectorAll('.etch-spa-section'));\n var dots = Array.prototype.slice.call(root.querySelectorAll('.etch-spa-dot'));\n var video = document.getElementById('spa-bg-video');\n\n if (!sections.length) return;\n\n var snapDuration = 1850;\n var wheelThreshold = 8;\n var touchThreshold = 44;\n\n var activeIndex = 0;\n var isAnimating = false;\n var touchStartY = 0;\n var touchStartX = 0;\n var resizeTimer = null;\n var wheelLockTimer = null;\n var videoReady = false;\n\n function clamp(value, min, max) {\n return Math.max(min, Math.min(max, value));\n }\n\n function easeInOutCubic(t) {\n if (t < 0.5) {\n return 4 * t * t * t;\n }\n\n return 1 - Math.pow(-2 * t + 2, 3) \/ 2;\n }\n\n function getScrollY() {\n return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;\n }\n\n function getElementTop(element) {\n return getScrollY() + element.getBoundingClientRect().top;\n }\n\n function getNearestSectionIndex() {\n var nearest = 0;\n var nearestDistance = Infinity;\n\n sections.forEach(function (section, index) {\n var rect = section.getBoundingClientRect();\n var distance = Math.abs(rect.top);\n\n if (distance < nearestDistance) {\n nearestDistance = distance;\n nearest = index;\n }\n });\n\n return nearest;\n }\n\n function setActiveSection(index) {\n activeIndex = clamp(index, 0, sections.length - 1);\n\n sections.forEach(function (section, sectionIndex) {\n if (sectionIndex === activeIndex) {\n section.classList.add('etch-spa-active');\n } else {\n section.classList.remove('etch-spa-active');\n }\n });\n\n dots.forEach(function (dot, dotIndex) {\n if (dotIndex === activeIndex) {\n dot.classList.add('is-active');\n } else {\n dot.classList.remove('is-active');\n }\n });\n }\n\n function refreshActiveSection() {\n setActiveSection(getNearestSectionIndex());\n }\n\n function updateVideoScrub() {\n if (!video) return;\n if (!videoReady) return;\n if (!video.duration) return;\n if (!isFinite(video.duration)) return;\n\n var first = sections[0];\n var last = sections[sections.length - 1];\n var start = getElementTop(first);\n var end = getElementTop(last);\n var y = getScrollY();\n var range = Math.max(1, end - start);\n var progress = clamp((y - start) \/ range, 0, 1);\n var targetTime = progress * Math.max(0.01, video.duration - 0.06);\n\n try {\n video.currentTime = targetTime;\n } catch (error) {}\n }\n\n function scrollToSection(index) {\n var targetIndex = clamp(index, 0, sections.length - 1);\n var targetSection = sections[targetIndex];\n\n if (!targetSection) return;\n\n var startY = getScrollY();\n var targetY = getElementTop(targetSection);\n var distance = targetY - startY;\n\n if (Math.abs(distance) < 2) {\n setActiveSection(targetIndex);\n updateVideoScrub();\n return;\n }\n\n isAnimating = true;\n setActiveSection(targetIndex);\n\n var startTime = performance.now();\n\n function animate(now) {\n var elapsed = now - startTime;\n var progress = Math.min(elapsed \/ snapDuration, 1);\n var easedProgress = easeInOutCubic(progress);\n var nextY = startY + distance * easedProgress;\n\n window.scrollTo(0, nextY);\n updateVideoScrub();\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n window.scrollTo(0, targetY);\n updateVideoScrub();\n\n window.setTimeout(function () {\n isAnimating = false;\n refreshActiveSection();\n }, 160);\n }\n }\n\n requestAnimationFrame(animate);\n }\n\n function requestSectionMove(direction) {\n refreshActiveSection();\n\n var targetIndex = activeIndex + direction;\n\n if (targetIndex < 0) return false;\n if (targetIndex >= sections.length) return false;\n\n scrollToSection(targetIndex);\n return true;\n }\n\n function isPageZoneActive() {\n var rect = root.getBoundingClientRect();\n var topLimit = window.innerHeight * 0.86;\n var bottomLimit = window.innerHeight * 0.14;\n\n if (rect.top >= topLimit) return false;\n if (rect.bottom <= bottomLimit) return false;\n\n return true;\n }\n\n function handleWheel(event) {\n if (!isPageZoneActive()) return;\n if (Math.abs(event.deltaY) < wheelThreshold) return;\n\n if (isAnimating) {\n event.preventDefault();\n return;\n }\n\n window.clearTimeout(wheelLockTimer);\n\n var direction = event.deltaY > 0 ? 1 : -1;\n var moved = requestSectionMove(direction);\n\n if (moved) {\n event.preventDefault();\n\n wheelLockTimer = window.setTimeout(function () {\n refreshActiveSection();\n }, snapDuration + 220);\n }\n }\n\n function handleKeydown(event) {\n var tagName = document.activeElement ? document.activeElement.tagName : '';\n\n if (tagName === 'INPUT') return;\n if (tagName === 'TEXTAREA') return;\n if (tagName === 'SELECT') return;\n\n var isNext = false;\n var isPrevious = false;\n var isHome = false;\n var isEnd = false;\n\n if (event.code === 'ArrowDown') isNext = true;\n if (event.code === 'PageDown') isNext = true;\n if (event.code === 'Space') isNext = true;\n\n if (event.code === 'ArrowUp') isPrevious = true;\n if (event.code === 'PageUp') isPrevious = true;\n\n if (event.code === 'Home') isHome = true;\n if (event.code === 'End') isEnd = true;\n\n if (!isNext) {\n if (!isPrevious) {\n if (!isHome) {\n if (!isEnd) {\n return;\n }\n }\n }\n }\n\n if (isAnimating) {\n event.preventDefault();\n return;\n }\n\n if (isNext) {\n if (requestSectionMove(1)) {\n event.preventDefault();\n }\n return;\n }\n\n if (isPrevious) {\n if (requestSectionMove(-1)) {\n event.preventDefault();\n }\n return;\n }\n\n if (isHome) {\n scrollToSection(0);\n event.preventDefault();\n return;\n }\n\n if (isEnd) {\n scrollToSection(sections.length - 1);\n event.preventDefault();\n }\n }\n\n function handleTouchStart(event) {\n if (!event.touches) return;\n if (event.touches.length !== 1) return;\n\n touchStartY = event.touches[0].clientY;\n touchStartX = event.touches[0].clientX;\n }\n\n function handleTouchEnd(event) {\n if (!touchStartY) return;\n\n var touch = null;\n\n if (event.changedTouches) {\n touch = event.changedTouches[0];\n }\n\n if (!touch) return;\n\n var deltaY = touch.clientY - touchStartY;\n var deltaX = touch.clientX - touchStartX;\n\n touchStartY = 0;\n touchStartX = 0;\n\n if (Math.abs(deltaY) < touchThreshold) return;\n if (Math.abs(deltaY) < Math.abs(deltaX)) return;\n\n if (isAnimating) {\n event.preventDefault();\n return;\n }\n\n var direction = deltaY < 0 ? 1 : -1;\n var moved = requestSectionMove(direction);\n\n if (moved) {\n event.preventDefault();\n }\n }\n\n function bindLinks() {\n var links = root.querySelectorAll('a[href^=\"#\"]');\n\n Array.prototype.forEach.call(links, function (link) {\n link.addEventListener('click', function (event) {\n var targetId = link.getAttribute('href');\n\n if (!targetId) return;\n if (targetId === '#') return;\n\n var targetSection = root.querySelector(targetId);\n var targetIndex = sections.indexOf(targetSection);\n\n if (targetIndex === -1) return;\n\n event.preventDefault();\n scrollToSection(targetIndex);\n });\n });\n\n dots.forEach(function (dot) {\n dot.addEventListener('click', function () {\n var targetId = dot.getAttribute('data-target');\n var targetSection = root.querySelector(targetId);\n var targetIndex = sections.indexOf(targetSection);\n\n if (targetIndex === -1) return;\n\n scrollToSection(targetIndex);\n });\n });\n }\n\n if (video) {\n video.addEventListener('loadedmetadata', function () {\n videoReady = true;\n root.classList.add('etch-video-ready');\n try {\n video.pause();\n video.currentTime = 0.01;\n } catch (error) {}\n updateVideoScrub();\n });\n\n video.addEventListener('error', function () {\n videoReady = false;\n root.classList.remove('etch-video-ready');\n });\n }\n\n bindLinks();\n\n window.addEventListener('wheel', handleWheel, { passive: false });\n window.addEventListener('keydown', handleKeydown);\n window.addEventListener('touchstart', handleTouchStart, { passive: true });\n window.addEventListener('touchend', handleTouchEnd, { passive: false });\n\n window.addEventListener('scroll', function () {\n updateVideoScrub();\n\n if (!isAnimating) {\n refreshActiveSection();\n }\n }, { passive: true });\n\n window.addEventListener('resize', function () {\n window.clearTimeout(resizeTimer);\n\n resizeTimer = window.setTimeout(function () {\n refreshActiveSection();\n updateVideoScrub();\n }, 180);\n });\n\n refreshActiveSection();\n updateVideoScrub();\n }\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', startSpaPage);\n } else {\n startSpaPage();\n }\n\n window.addEventListener('load', startSpaPage);\n })();\n <\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Auralis Spa Light Water Ritual Calm Experience Serenity Scroll Demo Auralis Spa Experience A calm cinematic landing page where light, water and silence unfold through scroll. Begin the retreat Plugin demo 01 \/ Light Morning Light Breathes Soft natural light moves through the space while the page controls the rhythm of the visual journey. Soft [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"sin-header-footer","meta":{"_svbs_page_enabled":true,"_svbs_page_video_id":7602,"_svbs_page_video_url":"https:\/\/etchenet.com\/wp-content\/uploads\/2026\/05\/Auralis_Spa-scrub.mp4","_svbs_page_overlay_color":"#020617","_svbs_page_overlay_opacity":0,"_svbs_page_scroll_range":5000,"_svbs_page_scroll_range_desktop":0,"_svbs_page_scroll_range_tablet":0,"_svbs_page_scroll_range_mobile":0,"_svbs_page_start_time":0,"_svbs_page_end_time":0,"_svbs_page_mobile_behavior":"enabled","_svbs_page_z_index":0,"footnotes":""},"class_list":["post-7601","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/comments?post=7601"}],"version-history":[{"count":8,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7601\/revisions"}],"predecessor-version":[{"id":7651,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7601\/revisions\/7651"}],"wp:attachment":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/media?parent=7601"}],"curies":[{"name":"gracias","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}