@font-face{font-family:Sora;font-style:normal;font-weight:300;font-display:swap;src:url('assets/sora-300.ttf') format('truetype')}
@font-face{font-family:Sora;font-style:normal;font-weight:400;font-display:swap;src:url('assets/sora-400.ttf') format('truetype')}
@font-face{font-family:Sora;font-style:normal;font-weight:600;font-display:swap;src:url('assets/sora-600.ttf') format('truetype')}

:root{--bg:#020b16;--sf:#071a2d;--sf2:#0b2540;--gold:#d8ba6f;--sand:#cabdad;--light:#fff7fa;--ink:#020b16;--line:rgba(202,189,173,.16);--r:14px;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--light);font:300 16px/1.6 'Sora',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:400;letter-spacing:-.045em;line-height:1;margin:0}
a{color:inherit}
section{padding:clamp(64px,9vw,128px) clamp(16px,4vw,56px)}
.in{max-width:1320px;margin:auto}
.mut{color:var(--sand)}
h2{font-size:clamp(36px,5.6vw,80px);margin:0 0 16px;max-width:15ch}
.lead{max-width:44ch;margin:0 0 40px}
.btn{display:inline-flex;align-items:center;padding:13px 24px;border-radius:99px;background:var(--light);color:var(--ink);font:600 14px 'Sora',sans-serif;text-decoration:none;border:1px solid var(--light);transition:background .25s,color .25s,border-color .25s}
.btn.o{background:transparent;color:var(--light);border-color:rgba(202,189,173,.5)}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--gold);border-color:var(--gold);outline:none}
.link{font-size:14px;color:var(--sand);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.link:hover{color:var(--gold);border-color:var(--gold)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.chip{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border:1px solid var(--line);border-radius:99px;font-size:13px;background:rgba(7,26,45,.6);backdrop-filter:blur(8px)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:p 2s infinite}
@keyframes p{50%{opacity:.3}}
/* nav */
header{position:fixed;z-index:9;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 22px;border:1px solid var(--line);border-radius:99px;background:rgba(2,11,22,.7);backdrop-filter:blur(14px)}
header b{font-weight:600;letter-spacing:.2em;font-size:15px}
nav{display:flex;gap:24px;font-size:13px}nav a{text-decoration:none;color:var(--sand)}nav a:hover{color:var(--light)}
@media(max-width:700px){nav{display:none}}
.wa{font-size:13px;font-weight:600;text-decoration:none;background:var(--gold);color:var(--ink);padding:10px 18px;border-radius:99px}
/* hero */
.hero{position:relative;padding-top:130px;min-height:100svh;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 45% at 85% 15%,rgba(216,186,111,.09),transparent 70%);pointer-events:none}
.hg{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,72px);align-items:end;position:relative}
@media(max-width:900px){.hg{grid-template-columns:1fr}}
.hero h1{font-size:clamp(46px,8.4vw,132px);font-weight:300}
.hero h1 span{display:block;overflow:hidden}
.hero h1 span i{display:block;font-style:normal;animation:up 1s cubic-bezier(.2,.8,.2,1) both}
.hero h1 span:nth-child(2) i{animation-delay:.12s}.hero h1 span:nth-child(3) i{animation-delay:.24s}
@keyframes up{from{transform:translateY(105%)}}
.hero p.s{margin:28px 0 28px;max-width:34ch;font-size:clamp(16px,1.6vw,20px)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.rnd{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:linear-gradient(170deg,#16385a,#06182a)}
.rnd i{position:absolute;bottom:0;display:block}
.rnd .v1{left:10%;width:48%;height:58%;background:linear-gradient(180deg,#244c73,#0c2540)}
.rnd .v2{left:54%;width:36%;height:38%;background:linear-gradient(180deg,#2f5f8a,#10304f)}
.rnd .w{left:20%;bottom:30%;width:14%;height:12%;background:linear-gradient(180deg,rgba(216,186,111,.9),rgba(216,186,111,.25))}
.rnd .w2{left:62%;bottom:14%;width:12%;height:10%;background:rgba(216,186,111,.6)}
.rnd .c1{position:absolute;left:14px;top:14px}.rnd .c2{position:absolute;left:14px;bottom:14px}
.ph{position:absolute;right:14px;top:14px;font-size:11px;color:var(--sand);opacity:.7}
.facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
/* models */
.bento{display:grid;gap:14px}
.two{grid-template-columns:1fr 1fr}
@media(max-width:800px){.two{grid-template-columns:1fr}}
.mc{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);padding:10px;transition:border-color .3s}
.mc:hover{border-color:rgba(216,186,111,.5)}
.mc .rnd{aspect-ratio:5/4}.mc.b .v1{left:6%;width:38%;height:64%}.mc.b .v2{left:40%;width:50%;height:34%}
.mb{padding:22px 14px 14px}
.mb h3{font-size:clamp(34px,4vw,54px)}
.pr{color:var(--gold);margin:6px 0 16px}
.sp{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.sp span{font-size:13px;padding:6px 12px;border-radius:99px;background:var(--sf2)}
.row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
/* compare */
.cmp{margin-top:14px;background:var(--light);color:var(--ink);border-radius:var(--r);padding:clamp(20px,3vw,40px)}
.cmp h3{font-size:clamp(26px,3vw,40px);margin-bottom:20px}
.cr{display:grid;grid-template-columns:1.1fr 1fr 1fr;padding:12px 0;border-top:1px solid rgba(2,11,22,.12);font-size:14px}
.cr.h{border:0;font-weight:600}.cr.same{opacity:.4}.cr span:first-child{color:#6b6153}
.cmp .btn{background:var(--ink);color:var(--light);border-color:var(--ink);margin-top:18px}
.cmp .btn:hover{background:transparent;color:#7a5f14;border-color:#7a5f14}
/* smart */
.sg{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:14px}
@media(max-width:900px){.sg{grid-template-columns:1fr 1fr}}
.cd{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.ph1{grid-column:span 2;grid-row:span 3;display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 60% at 50% 40%,var(--sf2),var(--sf))}
.phone{width:min(250px,100%);aspect-ratio:9/18;border:1px solid var(--sand);border-radius:34px;padding:10px;background:#000}
.scr{height:100%;border-radius:25px;background:linear-gradient(180deg,#0d2d4d,#061525);padding:24px 16px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.scr h4{font:400 22px 'Sora',sans-serif;letter-spacing:-.04em;margin:0 0 6px}
.t{display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px}
.t.on{border-color:var(--gold)}.t em{font-style:normal;color:var(--gold);font-size:12px}
button.cd{all:unset;box-sizing:border-box;cursor:pointer;background:var(--sf);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .3s;grid-column:span 1}
button.cd[aria-pressed=true]{border-color:var(--gold)}
button.cd:focus-visible{outline:2px solid var(--gold)}
button.cd b{font-weight:400;font-size:20px;letter-spacing:-.04em}
button.cd small{color:var(--sand);font-size:13px;line-height:1.5}
.sw{width:38px;height:22px;border-radius:99px;background:var(--sf2);position:relative;margin-bottom:28px}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--sand);transition:.3s}
[aria-pressed=true] .sw{background:rgba(216,186,111,.35)}[aria-pressed=true] .sw::after{left:19px;background:var(--gold)}
.wide{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wide h3{font-size:clamp(22px,2.4vw,32px)}
@media(max-width:900px){.ph1{grid-column:span 2;grid-row:auto;padding:30px}}
/* location */
.lg{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
@media(max-width:860px){.lg{grid-template-columns:1fr}}
.map{position:relative;min-height:340px;background:var(--sf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px}
.map i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--sand)}
.map .me{width:16px;height:16px;background:var(--gold);left:48%;top:46%;box-shadow:0 0 0 10px rgba(216,186,111,.18)}
.pl{list-style:none;margin:0 0 22px;padding:0}
.pl li{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
/* amenities */
.sn{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.am{flex:0 0 min(300px,78vw);aspect-ratio:3/4;scroll-snap-align:start;border-radius:var(--r);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(190deg,var(--sf2),var(--bg))}
.am:nth-child(even){background:linear-gradient(190deg,#123a5e,var(--bg))}
.am h3{font-size:26px}.am p{margin:8px 0 0;font-size:14px;color:var(--sand)}
/* cta */
.cta{background:var(--light);color:var(--ink);border-radius:var(--r);padding:clamp(32px,6vw,80px)}
.cta h2{max-width:12ch}.cta .btn{background:var(--ink);color:var(--light);border-color:var(--ink)}
.cta .btn.o{background:transparent;color:var(--ink)}
.cta .btn:hover{color:#7a5f14;border-color:#7a5f14;background:transparent}
footer{padding:36px clamp(16px,4vw,56px);color:var(--sand);font-size:13px;border-top:1px solid var(--line)}
.mbar{display:none}
@media(max-width:700px){.mbar{display:flex;position:fixed;z-index:9;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:8px;padding:8px;border:1px solid var(--line);border-radius:99px;background:rgba(2,11,22,.85);backdrop-filter:blur(14px)}.mbar a{flex:1;text-align:center;padding:12px;border-radius:99px;font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--line)}.mbar a:first-child{background:var(--gold);color:var(--ink);border:0}footer{padding-bottom:96px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Functional additions; original v2 layout, tokens and breakpoints above. */
.rnd img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.rnd .chip{z-index:1;background:rgba(2,11,22,.83);color:var(--light)}
.hg>*{min-width:0}.hero .in{width:100%}
.note{color:var(--sand);font-size:12px;max-width:65ch;margin-top:18px}
.cmp .note{color:#6b6153}.cmp .cr{gap:10px}.cmp .cr span{overflow-wrap:anywhere}
.pl li{gap:14px;align-items:center}.pl .link{white-space:nowrap}
.map{background-image:linear-gradient(0deg,rgba(2,11,22,.95),rgba(2,11,22,.1)),url('assets/ubicacion.jpg');background-size:cover;background-position:center;display:flex;align-items:end}
.map-address{padding:26px;position:relative}.map-address p{max-width:36ch;font-size:18px}
.map-address .chip{background:var(--bg)}
.brand{text-decoration:none}.detail{padding:145px clamp(16px,4vw,56px) 80px}.detail h1{font-size:clamp(54px,8vw,110px);margin:25px 0}.detail-grid{margin-top:30px;align-items:center}.detail .lead{margin-bottom:24px}
.gallery-title{margin-top:90px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-item{padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--sf);cursor:zoom-in;aspect-ratio:4/3}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.gallery-item:hover img{transform:scale(1.03)}
dialog{padding:50px 12px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--light);max-width:95vw;max-height:94vh}dialog::backdrop{background:#000c}dialog img{display:block;max-width:88vw;max-height:78vh;object-fit:contain}dialog button{position:absolute;right:12px;top:8px;padding:8px 16px;cursor:pointer}
.skip-link{position:fixed;top:-80px;left:20px;z-index:20}.skip-link:focus{top:15px}.standalone-smart{padding-top:145px}
@media(max-width:600px){.gallery{grid-template-columns:1fr}.cmp .cr{font-size:12px}.cd{padding:18px}button.cd{padding:16px}button.cd b{font-size:18px}.scr{padding:20px 12px}.t{gap:6px;padding:10px}.map-address{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
