*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --black:   #282828;
            --white:   #FBF9F8;
            --navy:    #1D2A38;
            --steel:   #8892A4;
            --olive:   #7D8B42;
            --lime:    #C4CF60;
            --cream:   #F7F5F0;
            --mid:     #787068;
            --muted:   #A8A29A;
            --border:  #E2DED8;
            --display: 'Wonderland', serif;
            --serif:   'Cormorant Garamond', Georgia, serif;
            --sans:    'Libre Franklin', system-ui, sans-serif;
            --fz-h1:   clamp(60px, 9vw, 130px);
            --fz-h2:   clamp(38px, 5.2vw, 76px);
            --g:       clamp(20px, 5vw, 72px);
            --line-navy: rgba(255,255,255,.08);
        }

        html { scroll-behavior: smooth; }
        body {
            background: var(--white);
            color: var(--black);
            font-family: var(--sans);
            font-weight: 300;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }


        /* ════════════════════════════════
           NAV
        ════════════════════════════════ */
        #nav {
            position: fixed;
            inset: 0 0 auto;
            z-index: 200;
            padding: 36px var(--g);
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background .45s, padding .3s, border-color .45s;
            border-bottom: 1px solid transparent;
        }
        #nav.on {
            background: rgba(247,245,240,.94);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 18px var(--g);
            border-bottom-color: var(--border);
        }
        /* Scrim para asegurar contraste del logo/menú sobre vídeo, antes de que el nav pase a .on */
        #nav::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
            opacity: 1;
            transition: opacity .45s;
            pointer-events: none;
        }
        #nav.on::before { opacity: 0; }
        .nav-logo {
            display: block;
            color: var(--white);
            transition: color .4s;
            line-height: 0;
        }
        #nav.on .nav-logo { color: var(--black); }
        .nav-logo svg { height: 22px; width: auto; }
        .nav-right {
            display: flex;
            align-items: center;
            gap: 36px;
            list-style: none;
        }
        .nav-right a {
            font-size: 15px;
            font-weight: 400;
            letter-spacing: .18em;
            text-transform: uppercase;
            text-decoration: none;
            color: rgba(255,255,255,.82);
            transition: color .3s;
        }
        #nav.on .nav-right a { color: var(--mid); }
        .nav-right a:hover { color: var(--white); font-weight: 600; }
        #nav.on .nav-right a:hover { color: var(--black); font-weight: 600; }
        .nav-right a.active { color: #fff; font-weight: 500; }
        #nav.on .nav-right a.active { color: var(--black); font-weight: 600; }
        /* Subrayado animado: aparece en hover, permanece fijo en la sección activa */
        .nav-right li a:not(.nav-lang) { position: relative; }
        .nav-right li a:not(.nav-lang)::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 100%;
            height: 1px;
            background: currentColor;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s ease;
        }
        .nav-right li a:not(.nav-lang):hover::after,
        .nav-right li a.active::after { transform: scaleX(1); }        .nav-lang { color: rgba(255,255,255,.42) !important; letter-spacing: .12em; }
        #nav.on .nav-lang { color: var(--muted) !important; }
        .nav-sep { margin: 0 1px; opacity: .5; }
        /* ════ HAMBURGER ════ */
        .nav-burger {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            flex-direction: column;
            gap: 5px;
            z-index: 210;
        }
        .nav-burger span {
            display: block;
            width: 22px;
            height: 1.5px;
            background: var(--white);
            transition: background .3s;
        }
        #nav.on .nav-burger span { background: var(--black); }
        /* ════ MOBILE NAV OVERLAY ════ */
        .mobile-nav {
            position: fixed;
            inset: 0;
            background: var(--black);
            z-index: 300;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 32px;
            transform: translateY(-100%);
            transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
        }
        .mobile-nav.open { transform: none; pointer-events: auto; }
        .mobile-nav ul { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 24px; padding: 0; margin: 0; }
        .mobile-nav li a {
            position: relative;
            font-family: var(--display);
            font-size: 32px;
            font-weight: 500;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--white);
            text-decoration: none;
        }
        .mobile-nav li a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 100%;
            height: 1px;
            background: currentColor;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s ease;
        }
        .mobile-nav li a.active::after { transform: scaleX(1); }
        .mobile-nav-close {
            position: absolute;
            top: 32px; right: 32px;
            background: none; border: none; cursor: pointer;
            font-size: 28px; color: var(--white); line-height: 1;
        }
        .mobile-nav-lang {
            font-size: 13px;
            letter-spacing: .2em;
            color: rgba(255,255,255,.4);
        }
        @media (max-width: 768px) {
            .nav-right { display: none; }
            .nav-burger { display: flex; }
        }


        /* ════════════════════════════════
           ANIMATIONS
        ════════════════════════════════ */
        .reveal {
            opacity: 0;
            transform: translateY(26px);
            transition: opacity .85s ease, transform .85s ease;
        }
        .reveal.in { opacity: 1; transform: none; }
        .d1 { transition-delay: .12s; }
        .d2 { transition-delay: .24s; }
        .d3 { transition-delay: .36s; }
        .d4 { transition-delay: .48s; }
        /* ── Line reveal ── */
        .ln-wrap { display: block; overflow: hidden; }
        .ln-inner {
            display: block;
            transform: translateY(108%);
            transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .ln-inner.in { transform: none; }
        /* soul title: gray→black stagger — all lines in place, no slide/clip */
        .svc-soul-title .ln-wrap { overflow: visible; }
        .svc-soul-title .ln-inner { transform: none; }
        .svc-soul-title .ln-wrap:nth-child(2) > .ln-inner {
            transform: none;
            clip-path: none;
            transition: none;
        }
        .svc-soul-title .ln-wrap:nth-child(2) > .ln-inner.in { clip-path: none; }
        /* FORM underline — organic fill clip reveal */


        /* ════════════════════════════════
           HERO — editorial full-bleed
        ════════════════════════════════ */
        .svc-hero {
            position: relative;
            height: 100svh;
            overflow: hidden;
        }
        .svc-hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
        }
        .svc-hero-bg img {
            width: 100%; height: 100%;
            object-fit: cover;
            object-position: center 25%;
        }
        .svc-hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to bottom,
                rgba(0,0,0,.55) 0%,
                rgba(0,0,0,.15) 35%,
                rgba(0,0,0,.15) 60%,
                rgba(0,0,0,.58) 100%
            );
            z-index: 1;
        }
        .svc-hero-circles {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        @keyframes hw-from-left {
            from { opacity: 0; filter: blur(14px); transform: translateX(-280px) scale(0.88); }
            to   { opacity: 1; filter: blur(0);    transform: translateX(0) scale(1); }
        }
        @keyframes hw-from-right {
            from { opacity: 0; filter: blur(14px); transform: translateY(-50%) translateX(280px) scale(0.88); }
            to   { opacity: 1; filter: blur(0);    transform: translateY(-50%) translateX(0) scale(1); }
        }
        .svc-hw {
            position: absolute;
            font-family: var(--display);
            font-weight: 400;
            font-size: clamp(90px, 18vw, 230px);
            line-height: 1;
            color: #fff;
            letter-spacing: .02em;
            text-transform: uppercase;
            z-index: 3;
            pointer-events: none;
            opacity: 0;
            text-shadow: 0 2px 32px rgba(0,0,0,.35);
        }
        .svc-hw-what {
            top: clamp(80px, 10vh, 110px);
            left: var(--g);
        }
        .svc-hw-what.in { animation: hw-from-left 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
        .svc-hw-we {
            top: 50%;
            right: var(--g);
            transform: translateY(-50%);
        }
        .svc-hw-we.in { animation: hw-from-right 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
        .svc-hw-do {
            bottom: 0;
            left: var(--g);
        }
        .svc-hw-do.in { animation: hw-from-left 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
        @media (max-width: 768px) {
            /* "DO" muy pegado al borde inferior de la imagen — lo subo */
            .svc-hw-do { bottom: clamp(30px, 7vh, 60px); }
        }
        @keyframes copy-up {
            from { opacity: 0; filter: blur(6px); transform: translateY(calc(-50% + 36px)); }
            to   { opacity: 1; filter: blur(0);   transform: translateY(-50%); }
        }
        .svc-hero-copy {
            position: absolute;
            z-index: 3;
            left: var(--g);
            top: 55%;
            transform: translateY(-50%);
            max-width: clamp(240px, 26vw, 390px);
            opacity: 0;
        }
        .svc-hero-copy.in { animation: copy-up 1.1s cubic-bezier(0.22, 1, 0.36, 1) .55s both; }
        .svc-hero-copy p {
            font-family: var(--sans);
            font-size: 24px;
            font-weight: 400;
            line-height: 1.55;
            color: #fff;
            text-shadow: 0 1px 16px rgba(0,0,0,.5);
        }
        .svc-hero-squiggle {
            display: block;
            margin-top: 2px;
            width: clamp(100px, 14vw, 180px);
            height: auto;
        }
        .svc-hero-squiggle path {
            stroke-dasharray: 2000;
            stroke-dashoffset: 2000;
        }


        /* ════════════════════════════════
           EVERY HOTEL HAS A SOUL
        ════════════════════════════════ */
        .svc-soul {
            background: var(--white);
            padding: clamp(100px, 14vh, 160px) var(--g);
            text-align: center;
        }
        .svc-soul-title {
            font-family: var(--display);
            font-size: clamp(56px, 9vw, 128px);
            font-weight: 600;
            line-height: 1.18;
            color: var(--black);
            text-transform: uppercase;
            letter-spacing: .06em;
        }
        .svc-soul-serif {
            font-family: var(--serif);
            font-weight: 300;
            letter-spacing: .06em;
            display: inline-block;
            position: relative;
            z-index: 1;
            vertical-align: middle;
            padding: 0 clamp(12px, 2vw, 28px);
        }
        .svc-soul-wrap {
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }
        .svc-soul-oval {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-44%, -50%);
            width: 138%;
            height: auto;
            pointer-events: none;
            overflow: visible;
        }
        .svc-soul-after {
            position: relative;
            z-index: 2;
        }
        .svc-soul-form {
            position: relative;
            display: inline-block;
        }
        .svc-form-line {
            position: absolute;
            left: -4%;
            bottom: -12px;
            width: 108%;
            height: 12px;
            pointer-events: none;
            overflow: visible;
        }


        /* ════════════════════════════════
           OUR APPROACH
        ════════════════════════════════ */
        .svc-approach {
            background: var(--cream);
            padding: clamp(80px, 12vh, 140px) var(--g);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(40px, 6vw, 100px);
            align-items: end;
        }
        .svc-approach-imgs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(6px, 0.8vw, 10px);
        }
        .svc-apimg {
            overflow: hidden;
            border-radius: 4px;
            aspect-ratio: 2/3;
        }
        .svc-apimg img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .svc-apimg:hover img { transform: scale(1.04); }
        .svc-approach-eyebrow {
            font-family: var(--display);
            font-size: 40px;
            font-weight: 500;
            letter-spacing: 0;
            text-transform: uppercase;
            color: var(--black);
            margin-bottom: 20px;
        }
        .svc-approach-title {
            font-family: var(--display);
            font-size: 40px;
            font-weight: 500;
            line-height: 1.2;
            color: var(--black);
            text-transform: uppercase;
            margin-bottom: 22px;
        }
        .svc-approach-tagline {
            font-family: var(--sans);
            font-size: 24px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--mid);
            margin-bottom: clamp(32px, 5vh, 56px);
        }
        .svc-approach-block {
            padding: clamp(20px, 2.5vh, 28px) 0;
            border-top: 1px solid var(--border);
        }
        .svc-approach-block:last-child { border-bottom: 1px solid var(--border); }
        .svc-approach-btitle {
            font-family: var(--display);
            font-size: 32px;
            font-weight: 500;
            text-transform: uppercase;
            color: var(--black);
            line-height: 1.15;
            letter-spacing: .02em;
            margin-bottom: 10px;
        }
        .svc-approach-bdesc {
            font-family: var(--sans);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.8;
            color: var(--mid);
        }
        @media (max-width: 860px) {
            .svc-approach { grid-template-columns: 1fr; }
        }


        /* ════════════════════════════════
           PRESERVING THE MEANING
        ════════════════════════════════ */
        .svc-meaning {
            background: var(--white);
            padding: clamp(100px, 14vh, 160px) var(--g);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: clamp(40px, 6vh, 72px);
        }
        .svc-meaning-eyebrow {
            font-family: var(--display);
            font-size: 48px;
            font-weight: 600;
            letter-spacing: 0;
            text-transform: uppercase;
            color: var(--black);
            margin-bottom: 20px;
        }
        .svc-meaning-title {
            font-family: var(--display);
            font-size: 24px;
            font-weight: 500;
            line-height: 1.2;
            color: var(--black);
            text-transform: uppercase;
            letter-spacing: .02em;
            margin-bottom: 20px;
        }
        .svc-meaning-sub {
            font-family: var(--sans);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.75;
            color: var(--black);
            max-width: 52ch;
            margin: 0 auto;
        }
        .meaning-phone-row { display: flex; align-items: flex-end; gap: 24px; justify-content: center; }
        .meaning-phone-unit { display: flex; flex-direction: column; align-items: center; margin-left: 0; }
        .meaning-phone { display: block; width: 240px; height: auto; }
        .meaning-counter-unit { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
        .meaning-pct {
            font-family: var(--sans); font-size: 150px; font-weight: 600; line-height: 1;
            letter-spacing: -.02em; color: var(--olive);
            transition: color .5s ease;
            display: inline-block;
            min-width: 4ch;
            text-align: right;
        }
        .phone-outline, .phone-notch { stroke: var(--black); stroke-width: 3; stroke-miterlimit: 10; fill: none; }
        .meaning-labels { display: grid; }
        .meaning-label {
            grid-area: 1 / 1;
            font-family: var(--sans); font-size: 25px; font-weight: 600;
            letter-spacing: .28em; text-transform: uppercase; color: var(--black);
            white-space: nowrap; transition: opacity .5s ease;
            text-align: right;
        }
        .meaning-label-guest { opacity: 0; }
        .ph-bar, .ph-bar-last {
            fill: var(--olive);
            transform-box: fill-box;
            transform-origin: 50% 100%;
            transform: scaleY(0);
            transition: transform .55s cubic-bezier(.34, 1.2, .64, 1);
        }
        .ph-bar.active, .ph-bar-last.active { transform: scaleY(1); }
        .ph-bar-last { transition: transform .55s cubic-bezier(.34, 1.2, .64, 1), fill .5s ease; }
        .ph-bar-last.drained { fill: #C84B3B; }


        /* ════════════════════════════════
           IMAGE STRIP
        ════════════════════════════════ */
        .svc-imgstrip {
            display: flex;
            overflow: hidden;
            height: clamp(520px, 72vh, 900px);
        }
        .svc-imgstrip-item {
            flex: 1;
            overflow: hidden;
            transition: flex 0.65s cubic-bezier(0.22, 1, 0.36, 1);
            cursor: pointer;
            min-width: 0;
        }
        .svc-imgstrip-item:hover { flex: 2.5; }
        .svc-imgstrip-item img {
            width: 100%; height: 100%;
            display: block;
            object-fit: cover;
            transform: scale(1);
            transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
        }
        .svc-imgstrip-item:hover img { transform: scale(1.04); }
        @media (max-width: 768px) {
            .svc-imgstrip { height: 480px; }
        }


        /* ════════════════════════════════
           WHAT WE SHAPE
        ════════════════════════════════ */
        .svc-shape {
            background: var(--white);
            padding: clamp(100px, 14vh, 160px) var(--g);
            overflow: hidden;
        }
        .svc-shape-header {
            text-align: center;
            margin-bottom: clamp(70px, 12vh, 130px);
        }
        .svc-shape-title {
            font-family: var(--display);
            font-size: 56px;
            font-weight: 600;
            line-height: 1.1;
            color: var(--black);
            text-transform: uppercase;
            letter-spacing: .02em;
            margin-bottom: 16px;
        }
        .svc-shape-eyebrow {
            font-family: var(--display);
            font-size: 24px;
            font-weight: 500;
            letter-spacing: .32em;
            text-transform: uppercase;
            color: var(--black);
            margin-bottom: 8px;
        }
        .svc-shape-sub {
            font-family: var(--sans);
            font-size: 16px;
            font-weight: 400;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* Half blocks */
        .svc-shape-half { margin-bottom: clamp(10px, 2vh, 24px); }
        .svc-shape-half--delivery { margin-top: clamp(60px, 8vh, 120px); }
        .svc-shape-half--delivery .svc-shape-half-head { text-align: right; }
        .svc-shape-half--delivery .svc-shape-half-label { letter-spacing: .20em; }
        .svc-shape-half-head { display: block; }
        .svc-shape-half-head--row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: clamp(16px, 2vw, 40px);
        }
        .svc-shape-half-intro {
            display: inline-flex;
            flex-direction: column;
            gap: clamp(6px, 0.8vh, 10px);
        }
        .svc-shape-half-name {
            font-family: var(--display);
            font-size: 80px;
            font-weight: 500;
            text-transform: uppercase;
            color: var(--black);
            letter-spacing: .01em;
            line-height: 1;
            white-space: nowrap;
        }
        .svc-shape-half-label {
            font-family: var(--sans);
            font-size: clamp(17px, 1.0vw, 23px);
            font-weight: 500;
            letter-spacing: .35em;
            text-transform: uppercase;
            color: var(--muted);
            padding-bottom: clamp(8px, 1vh, 14px);
            white-space: nowrap;
        }
        .svc-shape-half-head--row .svc-shape-half-label {
            text-align: right;
            flex-shrink: 0;
            font-size: clamp(14px, 1.3vw, 20px);
            letter-spacing: .12em;
        }
        .svc-shape-rule {
            width: 100%;
            height: 1px;
            background: var(--border);
            margin: clamp(8px, 1.2vh, 16px) 0 0;
        }
        .svc-shape-items { display: flex; flex-direction: column; }
        .svc-shape-items--right { align-items: flex-end; }
        .svc-shape-item {
            position: relative;
            font-family: var(--display);
            font-size: 48px;
            font-weight: 400;
            letter-spacing: .02em;
            text-transform: uppercase;
            color: var(--black);
            padding: clamp(14px, 1.8vh, 22px) 0;
            border-bottom: 1px solid var(--border);
            width: 100%;
            transition: letter-spacing .35s ease, color .3s ease;
            overflow: visible;
        }
        .svc-shape-item:hover { letter-spacing: .06em; color: var(--olive); }
        .svc-shape-items--right .svc-shape-item { text-align: right; }
        .svc-shape-items--right .svc-shape-item-img { right: auto; left: 0; }
        .svc-shape-num {
            font-family: var(--sans);
            font-size: 0.42em;
            font-weight: 500;
            letter-spacing: .08em;
            color: var(--muted);
            vertical-align: middle;
            margin-right: 0.3em;
        }
        .svc-shape-item-img {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%) scale(0.94);
            width: clamp(135px, 14vw, 215px);
            aspect-ratio: 3/2;
            object-fit: cover;
            border-radius: 3px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .35s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 10;
        }
        .svc-shape-item:hover .svc-shape-item-img {
            opacity: 1;
            transform: translateY(-50%) scale(1);
        }
        .svc-shape-360 {
            font-family: var(--sans);
            font-size: 24px;
            font-weight: 500;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--olive);
            text-align: center;
            padding: clamp(28px, 5vh, 56px) 0;
        }

        /* Slide animations */
        .slide-left {
            opacity: 0;
            transform: translateX(-80px);
            transition: opacity .95s cubic-bezier(0.16, 1, 0.3, 1), transform .95s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .slide-right {
            opacity: 0;
            transform: translateX(80px);
            transition: opacity .95s cubic-bezier(0.16, 1, 0.3, 1), transform .95s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .slide-left.in, .slide-right.in { opacity: 1; transform: none; }

        @media (max-width: 768px) {
            .svc-shape-half-label { display: none; }
            .svc-shape-half-name { font-size: clamp(36px, 11vw, 64px); white-space: normal; }
            .svc-shape-item { font-size: clamp(22px, 6vw, 36px); }
            .meaning-pct { font-size: clamp(56px, 14vw, 150px); }
            .meaning-phone-row { flex-wrap: wrap; }
        }


        /* ════════════════════════════════
           WORKING THROUGH ALL THE LAYERS
        ════════════════════════════════ */
        .svc-layers {
            background: var(--white);
            padding: clamp(100px, 14vh, 160px) var(--g);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .svc-layers::before,
        .svc-layers::after {
            content: '';
            position: absolute;
            left: 0; right: 0;
            height: clamp(80px, 14vh, 160px);
            pointer-events: none;
            z-index: 4;
        }
        .svc-layers::before {
            top: 0;
            background: linear-gradient(to bottom, var(--white) 0%, transparent 100%);
        }
        .svc-layers::after {
            bottom: 0;
            background: linear-gradient(to top, var(--white) 0%, transparent 100%);
        }
        .svc-layers-glow {
            position: absolute;
            top: 58%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.82);
            width: clamp(900px, 130vw, 1800px);
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(196,207,96,.44) 0%, rgba(196,207,96,.18) 45%, transparent 70%);
            filter: blur(100px);
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            transition: opacity 2.2s ease, transform 2.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .svc-layers-glow.in {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        .svc-layers-title {
            font-family: var(--display);
            font-size: 48px;
            font-weight: 600;
            line-height: 1.18;
            color: var(--black);
            text-transform: uppercase;
            letter-spacing: .02em;
            margin-bottom: clamp(60px, 8vh, 100px);
            position: relative;
            z-index: 5;
        }
        .svc-layers-title em {
            font-style: normal;
            font-size: 72px;
            color: var(--black);
            display: block;
            line-height: 1.1;
        }
        .sl-title-mobile { display: none; }
        @media (max-width: 768px) {
            .sl-title-desktop { display: none; }
            .sl-title-mobile {
                display: block;
                font-size: clamp(20px, 6.2vw, 48px);
            }
            .sl-title-mobile em { font-size: 1.3em; }
        }

        /* Pyramid */
        .svc-layers-pyramid {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 auto clamp(48px, 7vh, 72px);
            position: relative;
            z-index: 5;
        }
        @keyframes oval-drop {
            0%   { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: none; }
        }
        .svc-layer-oval {
            border: 4px solid rgba(255,255,255,.72);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: clamp(58px, 6.5vh, 82px);
            cursor: default;
            opacity: 0;
            transition: border-color .35s ease,
                        background   .75s ease,
                        box-shadow   .35s ease;
        }
        .svc-layer-oval.in         { animation: oval-drop 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
        .svc-layer-oval.oval-outlined { background: transparent; }
        .svc-layer-oval:hover {
            border-color: rgba(125,139,66,.65);
            background: rgba(196,207,96,.1);
            box-shadow: 0 0 55px rgba(196,207,96,.22);
        }
        /* Todos caen en tamaño Architecture; JS expande a tamaño final al aterrizar */
        .svc-layer-oval--guest    { width: clamp(250px, 37vw, 460px); }
        .svc-layer-oval--ops      { width: clamp(250px, 37vw, 460px); margin-bottom: clamp(28px, 3.5vh, 40px); }
        .svc-layer-oval--strategy { width: clamp(250px, 37vw, 460px); margin-bottom: clamp(24px, 3vh, 34px); }
        .svc-layer-oval--interior { width: clamp(250px, 37vw, 460px); margin-bottom: clamp(20px, 2.5vh, 28px); }
        .svc-layer-oval--arch     { width: clamp(250px, 37vw, 460px); margin-bottom: clamp(16px, 2vh, 22px); }
        @media (max-width: 768px) {
            /* Ovalos un poco más grandes en mobile — !important porque el JS fija el tamaño final inline */
            .svc-layer-oval { height: clamp(66px, 7.4vh, 90px); }
            .svc-layer-oval--guest,
            .svc-layer-oval--ops,
            .svc-layer-oval--strategy,
            .svc-layer-oval--interior,
            .svc-layer-oval--arch { width: clamp(290px, 42vw, 500px); }
            /* Piramide: Strategy & Concept (abajo) = ovalo mas grande, Guest Experience (arriba) = mas pequeño */
            .svc-layer-oval--guest    { width: clamp(315px, 92vw, 640px) !important; }
            .svc-layer-oval--ops      { width: clamp(300px, 84vw, 580px) !important; }
            .svc-layer-oval--strategy { width: clamp(280px, 76vw, 520px) !important; }
            .svc-layer-oval--interior { width: clamp(250px, 68vw, 460px) !important; }
            .svc-layer-oval--arch     { width: clamp(220px, 60vw, 400px) !important; }
        }

        .svc-layer-text {
            font-family: var(--sans);
            font-size: clamp(9px, .9vw, 13px);
            font-weight: 500;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--black);
            white-space: nowrap;
            opacity: 0;
            transition: color .3s ease, opacity .5s ease;
        }
        .svc-layer-oval.in .svc-layer-text {
            opacity: 1;
            transition: color .3s ease, opacity .5s ease .55s;
        }
        .svc-layer-oval:hover .svc-layer-text { color: var(--olive); transition-delay: 0s; }
        @media (max-width: 600px) {
            .svc-layer-text { letter-spacing: .18em; font-size: 9px; }
        }

        /* ════════════════════════════════
           LITTLE BIG
        ════════════════════════════════ */
        .services { background: var(--white); padding: clamp(80px, 10vh, 130px) 0 clamp(60px, 8vh, 100px); }
        @media (max-width: 768px) {
            .services { padding-top: clamp(40px, 5vh, 64px); }
        }
        .svc-header { text-align: center; padding: 0 var(--g) clamp(48px, 8vh, 80px); }
        .littlebig-logo {
            display: inline-block;
            color: var(--black);
            width: clamp(180px, 22vw, 320px);
            height: auto;
        }
        .svc-row {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
            padding: 0 var(--g) clamp(40px, 6vh, 64px);
        }
        .svc-item { display: flex; flex-direction: column; gap: 14px; }
        .svc-label {
            font-family: var(--sans);
            font-size: 13px;
            font-weight: 400;
            letter-spacing: .18em;
            text-transform: uppercase;
            text-align: center;
            color: var(--black);
        }
        .svc-card {
            position: relative;
            width: 100%;
            aspect-ratio: 1396/3171;
            border-radius: 18px;
            overflow: hidden;
            background: #2e2b28;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .svc-card img:first-child {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            filter: grayscale(100%);
            transition: transform .6s cubic-bezier(0.2, 0, 0, 1);
        }
        .svc-card:hover img:first-child { transform: scale(1.08); }
        .svc-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(22,20,16,.05) 0%, rgba(22,20,16,.45) 100%);
            z-index: 1;
        }
        .svc-logo {
            position: relative;
            z-index: 2;
            height: clamp(10px, 1vw, 14px);
            width: auto;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }
        .svc-arrow {
            position: absolute;
            bottom: 14px; right: 16px;
            font-size: 50px;
            font-weight: 100;
            color: #fff;
            z-index: 2;
            line-height: 1;
        }
        .svc-c1 { background: #2c2825; }
        .svc-c2 { background: #282828; }
        .svc-c2 img:first-child { filter: none; }
        .svc-c2 .svc-arrow { display: none; }
        .svc-c3 { background: #2e2c28; }
        .svc-c4 { background: #2a2a2a; }
        .svc-c5 { background: #2c2c2c; }
        .svc-c6 { background: #282828; }
        @media (max-width: 900px) {
            .svc-row { grid-template-columns: repeat(3, 1fr); }
            /* labels de 1 y 2 lineas conviven en la misma fila — reservar alto de 2 lineas para que las tarjetas arranquen a la misma altura, texto pegado abajo (cerca de la imagen) */
            .svc-label { min-height: 2.6em; line-height: 1.3; display: flex; flex-direction: column; justify-content: flex-end; }
        }
        @media (max-width: 560px) { .svc-row { grid-template-columns: repeat(2, 1fr); } }


        /* ════════════════════════════════
           FOOTER
        ════════════════════════════════ */
        .foot {
            background: var(--navy);
            color: #fff;
            padding: clamp(54px,6vw,90px) var(--g) clamp(26px,3vw,40px);
        }
        .foot-grid {
            display: grid;
            grid-template-columns: repeat(3,1fr) auto;
            gap: clamp(28px,3vw,48px);
        }
        .ftitle {
            grid-column: 1 / -1;
            font-size: 11px;
            letter-spacing: .22em;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: clamp(20px,2.4vw,30px);
        }
        .ws { margin-bottom: clamp(26px,3vw,42px); }
        .ws .city {
            font-family: var(--sans);
            font-size: clamp(15px,1.3vw,19px);
            font-weight: 300;
            letter-spacing: .01em;
            text-transform: uppercase;
            margin-bottom: .7em;
        }
        .ws .addr {
            font-family: var(--sans);
            font-weight: 300;
            font-size: 14.5px;
            line-height: 1.5;
            color: #fff;
            max-width: 24ch;
        }
        .foot-talk { justify-self: end; text-align: right; }
        .foot-talk .lt {
            font-size: 11px;
            letter-spacing: .22em;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: clamp(18px,2vw,26px);
        }
        .foot-talk a {
            font-family: var(--sans);
            font-weight: 300;
            display: block;
            font-size: 14.5px;
            color: #fff;
            text-decoration: none;
            margin-bottom: .85em;
            letter-spacing: .04em;
            transition: opacity .3s;
        }
        .foot-talk a:hover { opacity: .7; }
        .foot-rule {
            height: 1px;
            background: var(--line-navy);
            margin: clamp(30px,3.6vw,52px) 0 clamp(18px,2vw,26px);
        }
        .foot-bot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .foot-brand {
            font-family: var(--sans);
            font-weight: 300;
            letter-spacing: .42em;
            font-size: 15px;
            padding-left: .42em;
            text-transform: uppercase;
            color: #fff;
        }
        .foot-brand svg { height: 16px; width: auto; display: block; }
        .foot-legal {
            font-family: var(--sans);
            font-weight: 300;
            display: flex;
            gap: 14px;
            align-items: center;
            font-size: 13.5px;
            color: #fff;
        }
        .foot-legal a { color: inherit; text-decoration: none; transition: opacity .3s; }
        .foot-legal a:hover { opacity: .7; }
        @media (max-width: 768px) {
            .foot-grid { grid-template-columns: 1fr 1fr; }
            .foot-talk { grid-column: 1/-1; justify-self: start; text-align: left; }
        }
        @media (max-width: 560px) {
            .foot-grid { grid-template-columns: 1fr; }
            .ws .addr {
                font-size: 11px;
                max-width: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }


        /* ════════════════════════════════
           CURTAIN INTRO
        ════════════════════════════════ */
        #page-curtain {
            position: fixed;
            inset: 0;
            background: var(--navy);
            z-index: 9000;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 1.6s cubic-bezier(0.76, 0, 0.24, 1);
            will-change: transform;
        }
        #page-curtain.away { transform: translateY(-100%); }
        .curtain-label {
            font-family: var(--display);
            font-size: clamp(36px, 6vw, 80px);
            font-weight: 400;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--white);
            opacity: 0;
            animation: curtainLogo .8s cubic-bezier(0.16, 1, 0.3, 1) .2s forwards;
        }
        @keyframes curtainLogo {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: none; }
        }

        /* ── BACK TO TOP ── */
        .back-top {
            position: fixed;
            bottom: 36px; right: 36px;
            width: 48px; height: 48px;
            border-radius: 50%;
            background: var(--black);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 999;
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .45s cubic-bezier(0.2,0,0,1), transform .45s cubic-bezier(0.2,0,0,1), background .25s ease;
            pointer-events: none;
        }
        .back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .back-top:hover { background: #333; }
        .back-top-arrow { transition: transform .3s cubic-bezier(0.2,0,0,1); display: flex; }
        .back-top:hover .back-top-arrow { transform: translateY(-3px); }

        /* ── BLOCK WIPE (A HOTEL) ── */
        .diff-wipe { position: relative; display: inline-block; }
        .diff-wipe-text { opacity: 0; }
        .diff-wipe-text.show { opacity: 1; }
        .wipe-bar {
            position: absolute; inset: -4px 0;
            background: var(--black);
            transform: scaleX(0); transform-origin: 0% 50%;
            pointer-events: none; z-index: 1;
        }
        .wipe-bar.go {
            animation: block-wipe .85s cubic-bezier(0.77, 0, 0.18, 1) forwards;
        }
        @keyframes block-wipe {
            0%   { transform: scaleX(0); transform-origin: 0% 50%; }
            46%  { transform: scaleX(1); transform-origin: 0% 50%; }
            54%  { transform: scaleX(1); transform-origin: 100% 50%; }
            100% { transform: scaleX(0); transform-origin: 100% 50%; }
        }

        /* ── Custom Cursor ── */
        @media (pointer: fine) { *, a, button, input, textarea, select, label { cursor: none !important; } }
        .crsr {
            position: fixed; width: 30px; height: 30px;
            border: 1.5px solid rgba(40,40,40,.65); border-radius: 50%;
            pointer-events: none; z-index: 99999;
            transform: translate(-50%,-50%);
            transition: width .35s cubic-bezier(0.16,1,0.3,1),
                        height .35s cubic-bezier(0.16,1,0.3,1),
                        border-color .35s, opacity .4s;
            opacity: 0;
        }
        .crsr.active { opacity: 1; }
        .crsr.hovering { width: 56px; height: 56px; border-color: rgba(40,40,40,.3); }
        .crsr.on-dark { border-color: rgba(251,249,248,.75); }
        .crsr.on-dark.hovering { border-color: rgba(251,249,248,.35); }
        .crsr-dot.on-dark { background: #FBF9F8; }
        .crsr-dot {
            position: fixed; width: 5px; height: 5px;
            background: #282828; border-radius: 50%;
            pointer-events: none; z-index: 99999;
            transform: translate(-50%,-50%);
            opacity: 0; transition: opacity .4s;
        }
        .crsr-dot.active { opacity: 1; }