.exterior{background-image:url('assets/fachada-frontal-dia.png');background-position:center;opacity:1}
.exterior-night{background-image:url('assets/fachada-frontal-noche.png');background-position:center;opacity:0;transform:scale(1.02)}
.hero.night .exterior{opacity:0}
.hero.night .exterior-night{opacity:1}
.hero.entered .exterior,.hero.entered .exterior-night{opacity:0;transform:scale(2.3);transform-origin:56% 50%}
.time-toggle{position:absolute;z-index:11;top:110px;left:5vw;display:flex;align-items:center;padding:5px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(10,17,14,.22);backdrop-filter:blur(14px);overflow:hidden;transition:opacity .4s}
.time-toggle button{position:relative;z-index:2;border:0;background:transparent;color:#fff;padding:10px 17px;font-size:8px;letter-spacing:.18em;cursor:pointer;transition:color .45s}
.time-toggle button i{font-style:normal;font-size:11px;margin-right:7px}
.time-toggle>span{position:absolute;z-index:1;left:5px;top:5px;width:72px;height:30px;border-radius:999px;background:#f1eadf;transition:transform .55s cubic-bezier(.65,0,.2,1)}
.time-toggle button.active{color:#17211c;background:#f1eadf}
.time-toggle button{min-width:92px;border-radius:999px;white-space:nowrap;text-align:center}
.time-toggle>span{display:none}
.brand .brand-monogram{display:block;width:61px;height:48px;padding-right:14px;line-height:0}
.brand-monogram svg{display:block;width:45px;height:48px;overflow:visible}
.hero.night .time-toggle>span{transform:translateX(78px)}
.hero.entered .time-toggle{opacity:0;pointer-events:none}
@media(max-width:800px){.time-toggle{top:92px}.intro{top:21%}}

/* A shared vertical center keeps the controls between the header rules. */
header{height:108px;padding-top:20px;padding-bottom:20px}
.menu{min-height:40px;cursor:pointer}
.time-toggle{top:120px;height:42px}
.hero .tour-topbar{top:120px;height:42px}
.hero .tour-topbar>span{top:141px;transform:translate(-50%,-50%);font:500 10px Manrope,sans-serif;letter-spacing:.24em;white-space:nowrap}
.hero .tour-topbar:after{top:174px;pointer-events:none}
.plan-trigger{position:absolute;z-index:13;right:4vw;bottom:104px;color:#fff;background:rgba(13,21,18,.5);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:13px 18px;font:500 9px Manrope,sans-serif;letter-spacing:.15em;backdrop-filter:blur(14px);cursor:pointer}
.plan-trigger[hidden]{display:none}
.project-map-trigger[hidden]{display:none}
.hero:not(.entered) .project-map-trigger{bottom:180px}
#project-map{border:1px solid #c9bdab;border-radius:12px;padding:25px;width:min(850px,94vw);max-height:92svh;overflow:auto;background:#f5f2ec;color:#24362f}
#project-map::backdrop{background:rgba(6,14,10,.7);backdrop-filter:blur(10px)}
.project-map-heading{padding:0 35px 12px 5px}.project-map-heading h2{font:400 32px Newsreader,serif;margin:10px 0}.project-map-heading p{font-size:12px}.project-map-heading small{font-size:10px;opacity:.65}
.project-map-visual{position:relative;width:min(100%,620px);margin:auto}.project-map-visual img{width:100%;display:block}.project-map-visual #project-map-marker{position:absolute;width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:#987443;box-shadow:0 0 0 8px #98744355;transform:translate(-50%,-50%)}
.map-end{position:absolute;font:500 8px Manrope,sans-serif;letter-spacing:.12em;background:#24362fe6;color:#fff;padding:7px 10px;border-radius:20px}.map-street{right:3%;top:5%}.map-sea{left:2%;bottom:4%}
.points-toggle{display:none;position:absolute;z-index:13;right:4vw;bottom:154px;color:#fff;background:rgba(13,21,18,.5);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:13px 18px;font:500 9px Manrope,sans-serif;letter-spacing:.15em;backdrop-filter:blur(14px);cursor:pointer}
.hero .points-toggle{display:block}
.hero:not(.entered) .points-toggle{bottom:235px}
.tour-minimap{position:absolute;z-index:13;right:4vw;bottom:105px;width:225px;border:0;padding:5px;background:none;color:white;box-shadow:none;cursor:zoom-in;text-align:center;perspective:650px;filter:drop-shadow(0 2px 5px #0006)}
.tour-minimap[hidden]{display:none}
.minimap-heading{display:flex;justify-content:center;gap:12px;font:500 7px Manrope,sans-serif;letter-spacing:.16em;opacity:.45;transition:opacity .3s}.minimap-heading small{font-size:7px;opacity:0;transition:opacity .3s}
.minimap-image{position:relative;display:block;margin:48px 0;opacity:.65;transform:rotateX(var(--map-tilt,18deg)) rotateY(var(--map-skew,0deg)) rotateZ(var(--map-angle,90deg));transition:transform 1.2s cubic-bezier(.22,.61,.36,1),opacity .4s}.minimap-image img{display:block;width:100%}
#minimap-marker{position:absolute;transform:translate(-50%,-50%);width:7px;height:7px;border:1px solid #fff;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #ffffff20,0 0 14px #fff8;transition:left .8s,top .8s}
#minimap-marker:before{content:'';position:absolute;left:50%;bottom:3px;width:24px;height:28px;transform:translateX(-50%);background:linear-gradient(0deg,#ffffff40,transparent);clip-path:polygon(50% 100%,0 0,100% 0)}
#minimap-current{display:block;font-size:7px;line-height:1.5;opacity:0;transition:opacity .3s}
.tour-minimap:hover .minimap-image,.tour-minimap:focus-visible .minimap-image{opacity:.95;transform:rotateX(var(--map-tilt,18deg)) rotateY(var(--map-skew,0deg)) rotateZ(var(--map-angle,90deg)) scale(1.04)}
.tour-minimap:hover .minimap-heading,.tour-minimap:focus-visible .minimap-heading,.tour-minimap:hover .minimap-heading small,.tour-minimap:focus-visible .minimap-heading small,.tour-minimap:hover #minimap-current,.tour-minimap:focus-visible #minimap-current{opacity:.8}
.tour-minimap:focus-visible{outline:1px solid #ffffff80;outline-offset:8px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.minimap-image,#minimap-marker{transition:none}}
.hero.clean-view> :not(header):not(.hero-bg):not(.facade-lighting):not(.restore-tour){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.hero.clean-view header{border-color:transparent;background:none;pointer-events:none}
.hero.clean-view header .menu{visibility:hidden;pointer-events:none}
.hero.clean-view .brand{pointer-events:auto}
.restore-tour{display:none;position:absolute;z-index:30;right:4vw;bottom:32px;min-height:44px;padding:13px 20px;border:1px solid #ffffff70;border-radius:999px;background:#17211c99;backdrop-filter:blur(14px);color:#fff;font:500 10px Manrope,sans-serif;letter-spacing:.1em;cursor:pointer}
.hero.clean-view>.restore-tour{display:block;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.restore-tour:hover,.restore-tour:focus-visible{background:#f1eadf;color:#17211c;outline:2px solid #fff;outline-offset:3px}
.hero.clean-view .facade-lighting{pointer-events:none!important}
.hero.clean-view .facade-zone{pointer-events:none!important}
@media(max-width:800px){.tour-minimap{width:145px;bottom:85px;padding:8px}.minimap-heading{font-size:7px}.minimap-heading small{font-size:6px}#minimap-current{font-size:7px}}
.hero.entered.points-hidden .tour-points{opacity:0;visibility:hidden;pointer-events:none}
.hero.points-hidden .tour-point{pointer-events:none}
@media(max-width:800px){.points-toggle{bottom:116px;font-size:8px;padding:10px 12px}}
#villa-plan{border:1px solid #c9bdab;border-radius:12px;padding:0;width:min(1100px,94vw);max-height:90svh;color:#24362f;background:#f5f2ec;overflow:auto}
#villa-plan[open]{display:grid;grid-template-columns:34% 66%}
#villa-plan::backdrop{background:rgba(6,14,10,.7);backdrop-filter:blur(10px)}
.plan-close{position:absolute;z-index:2;right:15px;top:15px;width:38px;height:38px;border:1px solid #ccc2b3;border-radius:50%;background:#f5f2ec;color:#24362f;font-size:25px;cursor:pointer}
.plan-details{padding:55px 28px 30px}.plan-details h2{font:400 44px Newsreader,serif;margin:15px 0 25px}.plan-details p{font-size:12px;line-height:1.8}.plan-details small{font-size:10px;line-height:1.6;opacity:.65;display:block}
.plan-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 10px;border-top:1px solid #c9bdab;border-bottom:1px solid #c9bdab;padding:20px 0}.plan-stats span{font-size:9px}.plan-stats b{display:block;font:400 22px Newsreader,serif;margin-bottom:5px}.plan-location{margin-top:25px;font-size:9px!important;letter-spacing:.1em}.plan-location strong{display:block;font-size:13px;letter-spacing:0}
.plan-visual{position:relative;align-self:center}.plan-visual img{display:block;width:100%}.plan-visual #plan-marker{position:absolute;width:17px;height:17px;border:3px solid #fff;border-radius:50%;background:#987443;box-shadow:0 0 0 7px #98744355;transform:translate(-50%,-50%);pointer-events:none}
/* Villa Marina: aligned day/night living room destination */
.interior{background-image:url('assets/villa-marina-sala-dia.png');background-position:center}
.interior-night{background-image:url('assets/villa-marina-sala-noche.png');background-position:center;opacity:0;transform:scale(1.12)}
.hero.entered .interior-night{transform:scale(1)}
.hero.entered.night .interior{opacity:0}
.hero.entered.night .interior-night{opacity:1}
.hero.entered .time-toggle{opacity:1;pointer-events:auto}
.hotspot{left:45%;right:auto;top:67%}
.hotspot b{white-space:nowrap}
.hotspot[hidden],#panel-facts[hidden]{display:none}.unit-panel button{cursor:pointer}.unit-panel button.disabled{opacity:.48;cursor:default}
.residences-overview .hotspot{left:35%;top:70%;padding:10px 14px;border-radius:4px;background:rgba(13,21,18,.55);backdrop-filter:blur(8px)}
.residences-overview .hotspot>b{font-size:19px}
.residences-overview .hotspot.residence-highlight,.residences-overview .hotspot:focus-visible{outline:2px solid #e0c18b;outline-offset:8px}
.residence-preview{display:none}
.facade-toggle{display:none;position:absolute;z-index:14;right:4vw;bottom:235px;border:1px solid #ffffff60;border-radius:999px;padding:13px 18px;background:#17211c99;backdrop-filter:blur(14px);color:white;font:500 9px Manrope,sans-serif;letter-spacing:.14em;cursor:pointer}
.hero.residences-overview:not(.entered) .facade-toggle{display:block}
.facade-toggle[aria-pressed="true"]{background:#f1eadf;color:#17211c}
.facade-lighting{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:none;pointer-events:none}
.hero.facade-mode.residences-overview:not(.entered) .facade-lighting{display:block}
.hero.facade-mode.residences-overview:not(.entered) .exterior,.hero.facade-mode.residences-overview:not(.entered) .exterior-night{transform:none}
.facade-zone{fill:transparent;stroke:transparent;stroke-width:1.5;pointer-events:all;cursor:crosshair;outline:none;transition:fill .25s,stroke .25s}
.facade-zone.active{fill:#ffd99118;stroke:#f0ce8caa;filter:drop-shadow(0 0 9px #ffd99188)}
.facade-zone[data-unit="marina"]{cursor:pointer}
.facade-night-off,.facade-marina-on{opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero.night .facade-night-off{opacity:1}
.hero.night.marina-lit .facade-marina-on{opacity:1}
.facade-unit-on{opacity:0;pointer-events:none;transition:opacity .8s ease}
.hero.night .facade-unit-on.lit{opacity:1}
.far-left-light{opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity .8s ease}
.hero.night .far-left-light.lit{opacity:1}
/* Let the render receive hover through decorative copy, including the whole ground floor. */
.hero.facade-mode.residences-overview:not(.entered) .intro,
.hero.facade-mode.residences-overview:not(.entered) .unit-panel{pointer-events:none}
.hero.facade-mode.residences-overview:not(.entered) .unit-panel button{pointer-events:auto}
.hero.night .facade-lighting>rect{opacity:0}
.hero.night .facade-zone.active{fill:transparent;stroke:transparent;filter:none}
.facade-hint{display:none;position:absolute;right:4vw;bottom:285px;z-index:14;font:400 10px Manrope,sans-serif;color:#f1eadf;max-width:250px;text-align:right}
.hero.facade-mode.residences-overview:not(.entered) .facade-hint{display:block}
@media(max-width:800px){.facade-toggle{bottom:250px}.facade-hint{bottom:300px;font-size:9px}}
.residences-overview .hotspot{transition:background .35s,box-shadow .35s;transform-origin:center}
.residences-overview .residence-preview{display:block;position:absolute;left:0;bottom:100%;width:250px;padding:16px 18px;background:rgba(13,21,18,.94);border:1px solid #ffffff25;border-radius:5px 5px 5px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease,visibility .3s;pointer-events:none;text-align:left}
.residences-overview .hotspot:hover,.residences-overview .hotspot:focus{background:rgba(13,21,18,.88);box-shadow:0 12px 35px #0003}
.residences-overview .hotspot:hover .residence-preview,.residences-overview .hotspot:focus .residence-preview{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.residence-preview strong{font:400 24px Newsreader,serif;color:#f1eadf}.hotspot .residence-preview small{display:block;font:500 7px Manrope,sans-serif;letter-spacing:.1em;margin-top:4px}.residence-preview p{font:400 10px/1.6 Manrope,sans-serif;margin:7px 0 0;color:#eee6d8;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.residences-overview .residence-preview{transition:none}}
@media(max-width:800px){.hotspot{left:57%;right:auto;top:43%}.residences-overview .hotspot{left:35%;top:65%}.residences-overview .residence-preview{width:225px;left:-35px}}

/* Villa Marina interactive apartment tour */
.tour-topbar,.tour-points,.scene-nav,.cinematic-wipe{position:absolute;z-index:12;opacity:0;pointer-events:none;transition:opacity .55s ease}
.hero.entered .tour-topbar,.hero.entered .scene-nav{opacity:1;pointer-events:auto}
.hero.entered .tour-points{opacity:1}
.tour-topbar{left:auto;right:4vw;top:104px;display:flex;align-items:center;justify-content:flex-end;gap:10px;color:#fff}
.tour-topbar:after{content:"";position:fixed;left:4vw;right:4vw;top:146px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.42),rgba(255,255,255,.06));opacity:var(--tour-rule-opacity,1)}
.closing{position:relative;overflow:hidden}
.closing:before{content:"";position:absolute;left:4vw;right:4vw;top:var(--closing-rule-y,40px);opacity:var(--closing-rule-opacity,0);height:1px;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.42),rgba(255,255,255,.06));pointer-events:none;will-change:top}
.tour-topbar button{border:0;background:rgba(10,17,14,.24);backdrop-filter:blur(16px);color:#fff;border-radius:999px;padding:11px 15px;font:500 8px Manrope;letter-spacing:.17em;cursor:pointer;transition:background .3s,transform .3s}
.tour-topbar button:hover{background:rgba(201,166,106,.62);transform:translateY(-2px)}
.tour-topbar>span{position:fixed;left:50%;top:117px;transform:translateX(-50%);font:400 10px Manrope;letter-spacing:.28em}
.hero .tour-topbar .points-toggle{position:static;display:block;min-height:38px;padding:11px 15px;border:0;font-size:8px;white-space:nowrap}
.hero:not(.entered) .tour-topbar{opacity:1;pointer-events:none}
.hero:not(.entered) .tour-topbar> :not(.points-toggle){display:none}
.hero:not(.entered) .tour-topbar .points-toggle{pointer-events:auto}
#back-to-sala{display:none}
.hero.entered.tour-detail #back-to-sala{display:block}
.hero.entered[data-tour="arrival"] #back{display:none}
.hero.entered[data-tour="arrival"] #back-to-sala{display:block;opacity:1;pointer-events:auto}
#back-to-sala{opacity:0;pointer-events:none}
.hero.tour-detail #back-to-sala{opacity:1;pointer-events:auto}
.hero.entered .interior-copy{top:auto;left:5vw;bottom:66px;width:min(510px,42vw);padding:20px 24px;border-left:1px solid rgba(224,193,139,.72);background:linear-gradient(90deg,rgba(8,14,11,.42),transparent);backdrop-filter:blur(3px);transform:translateY(18px)}
.hero.entered .interior-copy h2{font:300 clamp(34px,4.1vw,66px)/.92 Newsreader;margin:11px 0 8px;text-wrap:balance}
.hero.entered .interior-copy>p:last-child{margin:0;max-width:450px;font-size:11px;line-height:1.6;color:rgba(255,255,255,.78)}
.tour-kicker{margin:0;font-size:8px!important;letter-spacing:.22em!important;color:#e0c18b!important}
.tour-points{inset:0}
.tour-point{position:absolute;border:0;background:transparent;color:#fff;padding:0;cursor:pointer;pointer-events:auto;text-align:left;display:flex;align-items:center;gap:13px;filter:drop-shadow(0 5px 15px rgba(0,0,0,.38));transform:translate(-14px,-14px)}
.tour-point.reverse{flex-direction:row-reverse;text-align:right;transform:translate(calc(-100% + 14px),-14px)}
.tour-point i{display:block;width:22px;height:22px;border:1px solid rgba(255,255,255,.86);border-radius:50%;background:rgba(13,21,18,.22);backdrop-filter:blur(8px);position:relative;transition:transform .35s,border-color .35s}
.tour-point i:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#e0c18b;box-shadow:0 0 0 5px rgba(224,193,139,.14),0 0 24px rgba(224,193,139,.72)}
.tour-point i:after{content:"";position:absolute;inset:-10px;border:1px solid rgba(224,193,139,.35);border-radius:50%;animation:tourPulse 2.4s ease-out infinite}
@keyframes tourPulse{0%{transform:scale(.45);opacity:0}35%{opacity:1}100%{transform:scale(1.5);opacity:0}}
.tour-point span{min-width:max-content;padding:9px 13px;border:1px solid rgba(255,255,255,.2);border-radius:3px;background:rgba(13,21,18,.42);backdrop-filter:blur(14px);transform:translateX(-8px);opacity:.74;transition:opacity .35s,transform .35s,background .35s}
.tour-point b{display:block;font:400 17px Newsreader}
.tour-point small{display:block;margin-top:2px;font:500 6px Manrope;letter-spacing:.2em;color:#e0c18b}
.tour-point:hover i{transform:scale(1.14);border-color:#e0c18b}.tour-point:hover span{opacity:1;transform:none;background:rgba(13,21,18,.7)}
.scene-nav{right:4vw;bottom:50px;display:flex;align-items:center;gap:12px;padding:5px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(10,17,14,.32);backdrop-filter:blur(14px)}
.scene-nav button{width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .3s}.scene-nav button:hover{background:#c9a66a}
.scene-nav span{font-size:8px;letter-spacing:.12em}.scene-nav b{font:400 14px Newsreader;color:#e0c18b}
.cinematic-wipe{inset:0;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(201,166,106,.18),rgba(7,12,10,.96) 62%);z-index:18;transform:scale(1.08);backdrop-filter:blur(18px)}
.cinematic-wipe span{font:300 12px Newsreader;letter-spacing:.5em;color:#e0c18b;transform:translateY(12px);transition:transform .8s}
.hero.scene-changing .cinematic-wipe{opacity:1;pointer-events:auto;animation:wipeScene 1.25s cubic-bezier(.65,0,.2,1)}
.hero.scene-changing .cinematic-wipe span{transform:none}
@keyframes wipeScene{0%{clip-path:circle(0 at 50% 50%);opacity:0}34%{clip-path:circle(75% at 50% 50%);opacity:1}67%{clip-path:circle(75% at 50% 50%);opacity:1}100%{clip-path:circle(0 at 50% 50%);opacity:0}}
.hero.scene-changing .interior,.hero.scene-changing .interior-night{transform:scale(1.07);filter:blur(4px)}
.interior,.interior-night{transition:opacity 1.1s cubic-bezier(.65,0,.2,1),transform 1.4s cubic-bezier(.65,0,.2,1),filter .8s ease}
.hero.tour-detail .shade{background:linear-gradient(90deg,rgba(8,14,11,.25),transparent 50%),linear-gradient(0deg,rgba(8,14,11,.66),transparent 42%)}

@media(max-width:800px){
  header{height:88px}.tour-topbar{top:99px;height:38px}.tour-topbar:after{top:195px}.time-toggle{top:145px;height:40px}.plan-trigger{bottom:72px;font-size:8px;padding:10px 12px}#villa-plan[open]{grid-template-columns:1fr}.plan-details{padding:35px 25px 15px}.plan-details h2{font-size:34px;margin:12px 0}.plan-stats{gap:10px}.plan-visual{width:100%}
  .tour-topbar{top:88px;left:auto;right:4vw}.tour-topbar>span{display:none}.tour-topbar:after{top:130px}
  .hero.entered .interior-copy{left:4vw;bottom:82px;width:78vw;padding:14px 16px}.hero.entered .interior-copy h2{font-size:35px}
  .hero.entered .interior-copy>p:last-child{font-size:9px}.scene-nav{right:4vw;bottom:24px}
  .tour-point{max-width:150px}.tour-point span{padding:7px 9px}.tour-point b{font-size:14px}
  .time-toggle{left:50%;transform:translateX(-50%);top:141px}
}

/* Full-bleed facade: photography and interactive masks share the same frame. */
.hero.residences-overview:not(.entered) .exterior,
.hero.residences-overview:not(.entered) .exterior-night,
.hero.facade-mode.residences-overview:not(.entered) .exterior,
.hero.facade-mode.residences-overview:not(.entered) .exterior-night,
.hero.residences-overview:not(.entered) .facade-lighting{transform:none;transform-origin:center}
.hero.residences-overview:not(.entered) .hotspot{left:35%;top:70%}