*{box-sizing:border-box;margin:0;padding:0}
:root{--paper:#F6F3EC;--white:#fff;--cream:#FBF9F3;--ink:#181510;--ink2:#4A453C;--stone:#6E6659;
--line:#E6DECE;--gold:#7A5E1C;--gold2:#B8923A;--gold-brand:#BF9B30;--champ:#D9BE73;--champ-lt:#E7D19A;
--serif:'Cormorant Garamond',Georgia,serif;--disp:'Fraunces',Georgia,serif;--sans:'Jost',system-ui,sans-serif;
--ease-silk:cubic-bezier(.19,1,.22,1);--ease-glide:cubic-bezier(.33,1,.68,1);--shadow-lift:0 40px 80px -50px rgba(122,94,28,.5)}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink2);font-family:var(--sans);font-weight:300;line-height:1.78;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.narrow{max-width:840px;margin:0 auto;padding:0 28px}
h1,h2,h3{color:var(--ink);font-weight:500}
.kicker{font-family:var(--sans);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-weight:500}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--champ),var(--gold));z-index:90;transition:width .1s}
.brand-fixed{position:fixed;top:18px;left:26px;z-index:80;display:flex;flex-direction:column;line-height:1;padding-bottom:8px;transition:color .4s}
.brand-fixed .he{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.28em;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.55);transition:color .4s}
.brand-fixed .pv{font-family:var(--sans);font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--champ-lt);margin-top:5px;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.brand-fixed::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:1px;background:var(--champ)}
body.scrolled .brand-fixed .he{color:var(--ink);text-shadow:none}
body.scrolled .brand-fixed .pv{color:var(--gold);text-shadow:none}
/* menu */
.menu-btn{position:fixed;top:22px;right:22px;z-index:97;width:46px;height:46px;border:0;border-radius:50%;background:rgba(24,21,16,.55);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:.3s}
.menu-btn:hover{background:rgba(24,21,16,.85)}
.menu-btn span{width:20px;height:1.5px;background:#fff;transition:.3s}
.menu-ov{position:fixed;inset:0;z-index:99;background:rgba(20,17,12,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;opacity:0;visibility:hidden;transition:.5s}
body.menu-open .menu-ov{opacity:1;visibility:visible}
.menu-close{position:absolute;top:24px;right:30px;background:none;border:0;color:#fff;font-size:40px;line-height:1;cursor:pointer;font-weight:300}
.menu-cols{display:flex;gap:80px;flex-wrap:wrap;justify-content:center}
.menu-k{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--champ);margin-bottom:18px}
.menu-cols a{display:block;font-family:var(--serif);font-size:26px;color:#F2ECDD;padding:7px 0;transition:.3s}
.menu-cols a:hover{color:var(--champ);padding-left:8px}
/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.05s cubic-bezier(.19,1,.22,1),transform 1.05s cubic-bezier(.19,1,.22,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.rv:not(.in) .m-img,.rv:not(.in) .r-img{clip-path:none}html{scroll-behavior:auto}.hero-img{animation:none!important}}
/* WA */
.wa{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
color:#fff;background:linear-gradient(135deg,#2BEE6E,#12C24E 60%,#0BAE45);padding:17px 34px;border-radius:50px;
box-shadow:0 10px 30px -8px rgba(20,200,80,.7);animation:glow 2.4s ease-in-out infinite;transition:transform .3s}
.wa:hover{transform:translateY(-3px) scale(1.03)}
.wa-big{font-size:14px;padding:21px 46px}
@keyframes glow{0%,100%{box-shadow:0 10px 28px -8px rgba(20,200,80,.65),0 0 0 0 rgba(43,238,110,.6)}50%{box-shadow:0 14px 46px -4px rgba(20,220,90,1),0 0 48px 8px rgba(43,238,110,.6)}}
/* hero */
.hero{position:relative;height:100vh;min-height:660px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center;animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.14)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,8,.5),rgba(15,12,8,.15) 42%,rgba(15,12,8,.72))}
.hero::before{content:"";position:absolute;inset:16px;border:1px solid rgba(212,180,120,.30);z-index:2;pointer-events:none}
.hero-in{position:relative;z-index:2;padding:0 26px;max-width:960px}
.hero .kicker{color:var(--champ-lt)}
.hero h1{font-family:var(--disp);font-weight:400;color:#fff;font-size:clamp(52px,9.4vw,134px);line-height:.96;letter-spacing:-.015em;margin:24px 0 22px}
.hero h1 em{font-style:italic;color:var(--champ-lt)}
.hero .h-sub{font-size:clamp(16px,2.1vw,21px);color:rgba(255,255,255,.93);max-width:620px;margin:0 auto 36px;font-weight:300}
.hero-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.75);font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-cue::after{content:"";width:1px;height:44px;background:linear-gradient(var(--champ-lt),transparent);animation:cuemove 2s ease-in-out infinite}
@keyframes cuemove{0%,100%{opacity:.4;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}
/* trustbar */
.trustbar{background:var(--ink);color:#EbE4D5}
.tb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:26px 28px}
.tb-item{text-align:center}
.tb-item b{display:block;font-family:var(--serif);font-size:19px;color:var(--champ)}
.tb-item span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9C947F}
/* sections */
.section{padding:clamp(84px,13vw,168px) 0}
.section.cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:800px;margin:0 auto 60px;text-align:center}
.sec-head .hair{width:52px;height:1px;background:var(--gold);margin:18px auto 0}
.sec-head h2{font-family:var(--disp);font-weight:400;color:#6B551A;font-size:clamp(34px,5.6vw,60px);line-height:1.06;letter-spacing:-.01em;margin:18px 0 0}
.sec-head h2 em{font-style:italic;color:#B08D3A}
.sec-head .lead{margin-top:22px;font-size:18px;color:var(--ink2)}
/* film */
.film{position:relative;width:100%;max-width:1200px;margin:0 auto;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:6px}
.film video{width:100%;height:100%;object-fit:cover;display:block}
/* promesa */
.promesa{text-align:center}
.promesa .big{font-family:var(--serif);font-size:clamp(30px,4.8vw,58px);line-height:1.22;color:var(--ink);font-weight:500}
.promesa .big em{font-style:italic;color:var(--gold)}
.promesa p{font-size:18px;color:var(--ink2);max-width:700px;margin:26px auto 0}
.promesa .sep{width:1px;height:60px;background:linear-gradient(var(--gold),transparent);margin:40px auto}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{text-align:center;padding:12px}.step .s-n{font-family:var(--disp);font-style:italic;font-size:52px;color:var(--gold);line-height:1}
.step h3{font-family:var(--serif);font-size:26px;margin:6px 0 10px}.step p{font-size:15px;color:var(--ink2)}
.step .s-ic{width:42px;height:42px;color:var(--gold);margin:0 auto 12px;display:block}
.step .s-e{font-family:var(--sans);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--champ)}
.ico{display:inline-block;vertical-align:middle}
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 30px 70px -55px rgba(0,0,0,.5)}
.incl .it{background:var(--white);padding:40px 22px;text-align:center;transition:background .45s}
.incl .it:hover{background:var(--cream)}
.incl .ico{width:34px;height:34px;color:var(--gold);margin:0 auto 15px}
.incl .it h4{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.01em;margin:0 0 3px}
.incl .it p{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.film-band{width:100%;padding:0 clamp(16px,5vw,80px)}
.film.cine{position:relative;max-width:1360px;margin:0 auto;aspect-ratio:16/9;border-radius:8px;overflow:hidden;box-shadow:0 55px 130px -55px rgba(0,0,0,.72);outline:1px solid rgba(212,180,120,.28);outline-offset:-1px;background:#000}
.film.cine iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-sound{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.32);border-radius:40px;padding:9px 16px;cursor:pointer;transition:.3s}
.film-sound:hover{background:rgba(0,0,0,.7);border-color:var(--champ)}
.film-sound.on{border-color:var(--champ);color:var(--champ-lt)}
.moment .m-img,.res .r-img{transition:transform 1.4s cubic-bezier(.19,1,.22,1),clip-path 1.25s cubic-bezier(.19,1,.22,1)}
.rv:not(.in) .m-img,.rv:not(.in) .r-img{clip-path:inset(12% 9% 12% 9%)}
.keys-stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:460px;background:radial-gradient(120% 100% at 50% 38%, #241c11 0%, #17120b 55%, #100c07 100%)}
.keys-wm{position:absolute;width:120%;height:120%;color:var(--champ);opacity:.13}
.keys-frame{position:relative;z-index:2;width:min(58%,276px);aspect-ratio:1;padding:9px;border:1px solid rgba(212,180,120,.55);background:rgba(0,0,0,.22);box-shadow:0 34px 80px -44px #000, inset 0 0 0 1px rgba(212,180,120,.12)}
.keys-frame img{width:100%;height:100%;object-fit:cover;display:block}
.keys-cap{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--sans);font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--champ-lt)}
.film.cine.facade{cursor:pointer}
.film-poster{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 6s ease}
.film-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,8,5,.12),rgba(10,8,5,.42))}
.film.cine.facade:hover .film-poster{transform:scale(1.05)}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:86px;height:86px;border-radius:50%;background:rgba(0,0,0,.32);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.65);color:#fff;display:flex;align-items:center;justify-content:center;transition:.4s cubic-bezier(.19,1,.22,1)}
.film-play svg{margin-left:4px}
.film.cine.facade:hover .film-play{background:linear-gradient(135deg,var(--champ),var(--gold));border-color:var(--champ-lt);transform:translate(-50%,-50%) scale(1.08)}
.film-tag{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;font-family:var(--sans);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.film.cine.facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.vfilm{max-width:336px;margin:0 auto 26px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;box-shadow:0 45px 100px -50px rgba(0,0,0,.66);outline:1px solid rgba(212,180,120,.3);outline-offset:-1px;background:#000}
.vfilm video{width:100%;height:100%;object-fit:cover;display:block}
/* moment */
.moment{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:76vh}
.moment .m-img{background-size:cover;background-position:center;min-height:440px;transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
.moment:hover .m-img{transform:scale(1.04)}
.moment .m-txt{padding:clamp(40px,6vw,100px);display:flex;flex-direction:column;justify-content:center;background:var(--cream)}
.moment:nth-child(even) .m-img{order:2}.moment:nth-child(even) .m-txt{background:var(--white)}
.moment .time{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.moment h3{font-family:var(--serif);font-size:clamp(28px,3.7vw,44px);line-height:1.1;margin:12px 0 16px}
.moment h3 em{font-style:italic;color:var(--gold)}.moment p{font-size:16px;color:var(--ink2)}
/* residences */
.res{display:grid;grid-template-columns:1.06fr .94fr;align-items:stretch}
.res .r-img{min-height:600px;background-size:cover;background-position:center;position:relative;overflow:hidden;transition:transform 1.5s cubic-bezier(.19,1,.22,1)}
.res:hover .r-img{transform:scale(1.03)}
.res .r-img .r-index{position:absolute;top:26px;left:28px;font-family:var(--disp);font-size:76px;color:rgba(255,255,255,.92);line-height:1;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.res .r-body{padding:clamp(40px,6vw,96px);display:flex;flex-direction:column;justify-content:center;background:var(--white)}
.res:nth-child(even) .r-img{order:2}.res:nth-child(even) .r-body{background:var(--cream)}
.res .r-torre{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.res .r-name{font-family:var(--disp);font-size:clamp(40px,4.8vw,60px);line-height:1;margin:8px 0 6px;color:var(--ink)}
.res .r-tag{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,27px);color:var(--gold);margin-bottom:18px}
.res .r-desc{font-size:16px;color:var(--ink2);margin-bottom:22px}
.res .r-specs{display:flex;gap:26px;margin-bottom:24px;flex-wrap:wrap}
.res .r-specs .s b{font-family:var(--serif);font-size:30px;color:var(--ink);font-weight:500;line-height:1}
.res .r-specs .s span{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-top:4px}
.r-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.r-link{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:5px;transition:.3s}
.r-link:hover{letter-spacing:.3em}
/* price bar (unit) */
.pricebar{background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 50px -40px rgba(0,0,0,.4);
display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:900px;margin:-70px auto 0;position:relative;z-index:5;overflow:hidden}
.pricebar .pb{padding:24px 16px;text-align:center;border-right:1px solid var(--line)}
.pricebar .pb:last-child{border-right:0}
.pricebar .pb b{display:block;font-family:var(--serif);font-size:30px;color:var(--ink);line-height:1}
.pricebar .pb .lab{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-top:6px}
.pricebar .pb.tc b{font-size:18px;color:var(--gold)}
/* tour */
.chapter{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:70vh}
.chapter .c-media{position:relative;overflow:hidden;min-height:420px;height:100%}
.chapter .c-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.chapter:hover .c-media img{transform:scale(1.05)}
.chapter .c-txt{padding:clamp(44px,6.5vw,108px);background:var(--cream)}
.chapter:nth-child(even) .c-media{order:2}.chapter:nth-child(even) .c-txt{background:var(--white)}
.chapter .c-n{font-family:var(--disp);font-size:64px;color:var(--champ);line-height:1}
.chapter .c-k{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);display:block;margin-top:8px}
.chapter h3{font-family:var(--serif);font-size:clamp(30px,4vw,48px);line-height:1.06;margin:14px 0 18px}
.chapter h3 em{font-style:italic;color:var(--gold)}.chapter p{font-size:16.5px;color:var(--ink2)}
/* torres */
.torres{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.torre{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:5px;padding:34px 28px;transition:.4s}
.torre:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(122,94,28,.35)}
.torre .t-n{font-family:var(--serif);font-style:italic;font-size:46px;color:var(--gold);line-height:1}
.torre h3{font-family:var(--serif);font-size:26px;margin:8px 0 8px}
.torre .t-ic{width:38px;height:38px;color:var(--gold);margin-bottom:12px}.torre .t-ic .ico{width:100%;height:100%}
.torre:hover{transform:translateY(-4px);box-shadow:0 34px 66px -48px rgba(0,0,0,.45);border-top-color:var(--champ)}
.keys-hero{background:radial-gradient(130% 100% at 50% 32%, #241c11 0%, #14100a 58%, #0c0906 100%)}
.hero-keys{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:min(74vh,720px);height:auto;color:var(--champ);opacity:.12;z-index:1}
.torre .t-lead{font-size:14px;color:var(--stone);margin-bottom:16px;font-style:italic;font-family:var(--serif)}
.torre ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.torre li{font-size:14.5px;color:var(--ink2);padding-left:18px;position:relative}
.torre li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.torre .hrs{color:var(--stone);font-size:12px}
/* location */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.loc .loc-txt{padding:clamp(40px,6vw,90px);background:var(--cream);display:flex;flex-direction:column;justify-content:center}
.loc .loc-txt h3{font-family:var(--serif);font-size:clamp(28px,3.6vw,42px);margin:12px 0 18px}
.loc .loc-txt h3 em{font-style:italic;color:var(--gold)}
.loc ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:10px}
.loc li{font-size:15px;color:var(--ink2);padding-left:20px;position:relative}
.loc li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.loc iframe{width:100%;height:100%;min-height:420px;border:0;display:block}
/* others */
.others{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.oth{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;background:#000;display:block}
.oth img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:.7s}
.oth:hover img{opacity:1;transform:scale(1.07)}
.oth span{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px;color:#fff;font-family:var(--serif);font-size:21px;background:linear-gradient(transparent,rgba(0,0,0,.72))}
/* gallery cinematic (button = keyboard accesible) */
.gcap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gcap .g-item{position:relative;overflow:hidden;border-radius:4px;cursor:zoom-in;aspect-ratio:4/3;padding:0;border:0;background:#000;display:block;width:100%}
.gcap .g-item.tall{aspect-ratio:4/3}
.gcap .g-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.19,1,.22,1)}
.gcap .g-item:hover img{transform:scale(1.09)}
.gcap figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 18px 16px;color:#fff;font-family:var(--serif);font-style:italic;font-size:19px;text-align:left;
background:linear-gradient(transparent,rgba(0,0,0,.62));opacity:0;transform:translateY(10px);transition:.5s}
.gcap .g-item:hover figcaption,.gcap .g-item:focus-visible figcaption{opacity:1;transform:none}
/* packages */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pkg{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:40px 30px;text-align:center;transition:.4s}
.pkg:hover{transform:translateY(-8px);box-shadow:0 30px 60px -40px rgba(122,94,28,.4)}
.pkg.feat{border-color:var(--gold);box-shadow:0 24px 56px -34px rgba(122,94,28,.5)}
.pkg .p-d{font-family:var(--disp);font-size:70px;color:var(--gold);line-height:1}
.pkg .p-u{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--stone)}
.pkg h3{font-family:var(--serif);font-size:26px;margin:16px 0 12px}
.pkg ul{list-style:none;text-align:left;display:flex;flex-direction:column;gap:11px;margin:16px 0 24px}
.pkg li{font-size:14.5px;color:var(--ink2);padding-left:20px;position:relative}.pkg li::before{content:"\2726";position:absolute;left:0;color:var(--gold);font-size:11px;top:3px}
.pkg .price{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
/* reviews */
.rating{text-align:center;margin-bottom:44px}
.rating .num{font-family:var(--disp);font-size:64px;color:var(--gold);line-height:1}
.rating .st{color:var(--gold2);letter-spacing:5px;font-size:20px;margin:8px 0}
.rating .src{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:32px 28px}
.review .st{color:var(--gold2);letter-spacing:4px;font-size:15px}
.review p{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);margin:16px 0 20px;line-height:1.42}
.review .who{font-size:13px;letter-spacing:.05em;color:var(--ink2)}
.review .srcline{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.gbtn{display:inline-flex;align-items:center;gap:10px;margin-top:40px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border:1px solid var(--gold);border-radius:50px;padding:14px 30px;transition:.3s}
.gbtn:hover{background:var(--gold);color:#fff}
/* faq */
.faq{max-width:840px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:24px 0}
.faq summary{font-family:var(--serif);font-size:23px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:28px;line-height:1}
.faq details[open] summary::after{content:"\2013"}.faq p{margin-top:16px;font-size:16px;color:var(--ink2)}
.cue{display:flex;align-items:center;justify-content:center;gap:18px;padding:64px 0 0}
.cue-line{width:60px;height:1px;background:var(--line)}.cue-txt{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold)}
/* cta */
.cta{position:relative;text-align:center;padding:clamp(90px,13vw,158px) 0;color:#fff;overflow:hidden}
.cta .cta-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 8s ease}
.cta:hover .cta-img{transform:scale(1.06)}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(15,12,8,.62),rgba(15,12,8,.74))}
.cta .container{position:relative;z-index:2}.cta .kicker{color:var(--champ-lt)}
.cta h2{font-family:var(--disp);font-weight:400;color:#fff;font-size:clamp(36px,6vw,72px);line-height:1.02;margin:16px 0 0}
.cta h2 em{font-style:italic;color:var(--champ-lt)}
.cta p{max-width:580px;margin:22px auto 32px;font-size:17px;color:rgba(255,255,255,.9)}
.cta-alt{margin-top:26px;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.72)}
.cta-alt a{color:var(--champ-lt);border-bottom:1px solid rgba(223,201,143,.4)}
.cta-light{color:var(--ink2);background:var(--cream);border-top:1px solid var(--line)}.cta-light::after{display:none}
.cta-light h2{color:var(--ink)}.cta-light h2 em{color:var(--gold)}.cta-light .kicker{color:var(--gold)}.cta-light p{color:var(--ink2)}
.cta-light .cta-alt{color:var(--stone)}.cta-light .cta-alt a{color:var(--gold);border-color:rgba(122,94,28,.4)}
/* footer */
.foot{background:var(--ink);color:#C9C2B4;text-align:center;padding:70px 0 44px}
.foot-brand .he{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:.26em;color:#fff}
.foot-brand .pv{font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:var(--champ);display:block;margin-top:5px}
.foot-tag{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--champ);margin:16px 0 22px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-bottom:18px}
.foot-links a{font-size:12.5px;letter-spacing:.05em;color:#C9C2B4;transition:.3s}.foot-links a:hover{color:var(--champ)}
.foot-contact{font-size:13px;margin-bottom:20px}.foot-contact a{color:var(--champ)}
.foot-fine{font-size:11.5px;color:#8B8477;margin-top:16px;line-height:1.7}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:95;display:flex;align-items:center;
background:linear-gradient(135deg,#2BEE6E,#12C24E 60%,#0BAE45);color:#fff;border-radius:50px;padding:15px;
box-shadow:0 12px 34px -6px rgba(20,200,80,.85);animation:glow 2.4s ease-in-out infinite;overflow:hidden}
.wa-float-txt{max-width:0;opacity:0;white-space:nowrap;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;transition:.45s}
.wa-float:hover .wa-float-txt{max-width:230px;opacity:1;margin-left:10px;margin-right:6px}
.lb{position:fixed;inset:0;z-index:100;background:rgba(15,12,8,.95);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lb.on{display:flex}.lb img{max-width:94vw;max-height:92vh;border-radius:4px}
.keys-emblem{width:92px;height:auto;margin:0 auto 6px;filter:drop-shadow(0 6px 16px rgba(122,94,28,.4))}
.signature{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--gold);margin-top:30px;letter-spacing:.02em}
.torre .t-p{font-size:14.5px;color:var(--ink2);margin-top:2px}
.back-home{position:absolute;top:86px;left:26px;z-index:4;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:40px;padding:9px 18px;transition:.3s;backdrop-filter:blur(4px)}
.back-home:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateX(-2px)}
/* .m-img/.r-img/.cta-img: sin will-change permanente (background-position no se compone en GPU) */
.sec-head{text-align:center}
.hair{position:relative;width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--champ) 28%,var(--champ) 72%,transparent);margin:18px auto 2px}
.hair::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;background:var(--champ);transform:translate(-50%,-50%) rotate(45deg)}
.film iframe{width:100%;height:100%;border:0;display:block}
.moment .m-img.keys-panel{background-size:contain;background-repeat:no-repeat;background-origin:content-box;padding:9%;background-color:#141009;border-right:1px solid rgba(176,141,87,.28);box-shadow:inset 0 0 160px rgba(176,141,87,.16)}
.cta.warm::after{background:linear-gradient(rgba(30,19,9,.28),rgba(18,11,6,.66))}
.cta-quote{max-width:660px;margin:24px auto 0;font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.4vw,23px);line-height:1.55;color:rgba(255,255,255,.94)}
.review{position:relative}
.review::before{content:"\201C";position:absolute;top:6px;right:20px;font-family:var(--serif);font-size:62px;line-height:1;color:rgba(176,141,87,.20)}
@media(max-width:900px){.tb-grid{grid-template-columns:1fr 1fr;gap:18px}.torres,.pkgs,.reviews,.steps{grid-template-columns:1fr}.incl{grid-template-columns:repeat(2,1fr)}
.gcap{grid-template-columns:1fr 1fr}.others{grid-template-columns:repeat(2,1fr)}.pricebar{grid-template-columns:repeat(2,1fr);margin-top:-40px}.pricebar .pb:nth-child(2n){border-right:0}
.moment,.res,.chapter,.loc{grid-template-columns:1fr}.moment:nth-child(even) .m-img,.res:nth-child(even) .r-img,.chapter:nth-child(even) .c-media{order:0}
.moment .m-img,.res .r-img,.chapter .c-media{min-height:320px}.menu-cols{gap:40px}}
@media(max-width:560px){.gcap{grid-template-columns:1fr}.others{grid-template-columns:1fr 1fr}.pricebar{grid-template-columns:1fr}.pricebar .pb{border-right:0;border-bottom:1px solid var(--line)}}

/* ============ v12 · Capa cinematográfica ============ */
/* Hero: entrada palabra por palabra (solo h1.h-cine) */
.hero h1 .hl{display:block}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em) scale(.985);filter:blur(12px);animation:wIn 1.35s cubic-bezier(.19,1,.22,1) forwards;animation-delay:var(--d,0s)}
@keyframes wIn{60%{filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
.hero h1.h-cine{font-size:clamp(42px,7.8vw,106px);line-height:1.02;letter-spacing:-.012em;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero h1:not(.h-cine){opacity:0;transform:translateY(26px);animation:fUp 1.35s .3s cubic-bezier(.19,1,.22,1) forwards}
@keyframes fUp{to{opacity:1;transform:none}}
/* Dorado vivo: brillo que respira sobre las cursivas del hero */
.hero h1 em{font-style:italic;background:linear-gradient(105deg,#DFC98F 0%,#F6E7B8 22%,#B89B5E 50%,#EFDCA6 76%,#DFC98F 100%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:sheen 7.5s linear infinite}
@keyframes sheen{to{background-position:-230% 0}}
/* Entrada del kicker, subtítulo y CTA en cascada */
.hero .kicker{opacity:0;letter-spacing:.72em;animation:kIn 1.7s .1s cubic-bezier(.19,1,.22,1) forwards}
@keyframes kIn{to{opacity:1;letter-spacing:.4em}}
.hero .h-sub{opacity:0;transform:translateY(20px);animation:fUp 1.25s 1.5s cubic-bezier(.19,1,.22,1) forwards}
.hero .wa-big{opacity:0;transform:translateY(20px);animation:fUp 1.25s 1.8s cubic-bezier(.19,1,.22,1) forwards}
.hero-cue{opacity:0;animation:fUp 1.4s 2.3s ease forwards}
/* Dirección de foto: grano fílmico + viñeta cálida sobre el hero */
.hero-img::after{content:"";position:absolute;inset:0;background:radial-gradient(125% 92% at 50% 40%,transparent 52%,rgba(12,9,5,.42) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");background-size:cover,160px;pointer-events:none}
/* Tipografía más grande y cuidada */
body{font-size:16.5px}
h1,h2,h3{text-wrap:balance;font-feature-settings:"liga" 1}
.hero .h-sub{font-size:clamp(17.5px,2.25vw,23px);line-height:1.72;text-shadow:0 1px 22px rgba(0,0,0,.35)}
.sec-head .lead{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,23px);line-height:1.6}
.moment h3{font-size:clamp(30px,4vw,50px)}
.moment p,.res .r-desc,.chapter p{font-size:17.5px;line-height:1.86;max-width:56ch}
.promesa p{font-size:19px;max-width:680px}
.res .r-tag{font-size:clamp(21px,2.6vw,29px)}
.faq p,.loc li{font-size:16.5px}
.cta p{font-size:18px}
/* Hover: la luz recorre las imágenes (destello dorado) */
.gcap .g-item::after,.oth::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,243,210,.24) 50%,transparent 60%);transform:translateX(-140%) skewX(-6deg);transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.gcap .g-item:hover::after,.oth:hover::after{transform:translateX(140%) skewX(-6deg)}
/* Hover: las fotos ganan calidez y vida */
.moment .m-img,.res .r-img,.chapter .c-media img{filter:saturate(.99)}
.moment:hover .m-img{transform:scale(1.05);filter:saturate(1.07) brightness(1.03)}
.res:hover .r-img{transform:scale(1.045);filter:saturate(1.07) brightness(1.03)}
.chapter:hover .c-media img{filter:saturate(1.07) brightness(1.03)}
/* Menú overlay: subrayado dorado que crece */
.menu-cols a{position:relative;width:fit-content}
.menu-cols a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:linear-gradient(90deg,var(--champ),transparent);transition:width .5s cubic-bezier(.19,1,.22,1)}
.menu-cols a:hover::after{width:100%}
/* Accesibilidad: sin movimiento si el usuario lo pide */
@media(prefers-reduced-motion:reduce){
.hero h1 .w,.hero h1:not(.h-cine),.hero .kicker,.hero .h-sub,.hero .wa-big,.hero-cue{opacity:1;transform:none;filter:none;animation:none}
.hero h1 em{animation:none;background:none;color:var(--champ-lt);-webkit-text-fill-color:currentColor}
.gcap .g-item::after,.oth::after{display:none}}
@media(max-width:560px){.hero h1.h-cine{font-size:clamp(38px,11vw,52px)}}

/* ============ v12.1 · Oro lujoso + fotos de servicio + N.º + llaves ============ */
/* -- Dorado metálico para titulares (más lujoso, con brillo) -- */
/* Degradado dorado para titulares sobre fondo CLARO: rango legible (>=3:1 en todos los stops) */
:root{--gold-grad:linear-gradient(94deg,#6B551A 0%,#8A6D16 24%,#B8923A 50%,#8A6D16 76%,#6B551A 100%)}
.sec-head h2,.sec-head h2 em,
.promesa .big em,
.res .r-name,.res .r-tag,
.moment h3 em,.chapter h3 em,
.rating .num,.pkg .p-d,
.step .s-n,.chapter .c-n,.torre .t-n{
  background:var(--gold-grad);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  background-position:80% 0}
/* brillo que recorre los grandes titulares al entrar en vista */
.sec-head h2,.res .r-name{animation:goldSheen 9s ease-in-out infinite alternate}
@keyframes goldSheen{from{background-position:88% 0}to{background-position:12% 0}}
/* el kicker dorado, un punto más cálido y vivo */
.kicker,.moment .time,.res .r-torre,.chapter .c-k{color:#9A742C}
/* fallback si el navegador no soporta background-clip */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
 .sec-head h2,.sec-head h2 em,.promesa .big em,.res .r-name,.res .r-tag,.moment h3 em,.chapter h3 em,
 .rating .num,.pkg .p-d,.step .s-n,.chapter .c-n,.torre .t-n,.cta-light h2 em,.sm-title em{color:#8A6A24;-webkit-text-fill-color:#8A6A24}
 .hero h1 em,.cta h2 em,.cta-gold-line{color:var(--champ-lt);-webkit-text-fill-color:var(--champ-lt)}
 .review::before{color:rgba(176,138,60,.28)}}

/* -- Símbolo N.º del número de residencia -- */
.r-hash{font-family:var(--sans);font-weight:500;font-size:.34em;letter-spacing:.12em;
 vertical-align:.9em;margin-right:.14em;-webkit-text-fill-color:#B08A3C;color:#B08A3C;background:none;text-transform:uppercase}
.h1-hash{font-family:var(--sans);font-weight:400;font-size:.26em;letter-spacing:.16em;
 vertical-align:1.1em;margin-right:.16em;color:var(--champ-lt);text-transform:uppercase;opacity:.92}

/* -- Sección de llaves: full-bleed, sin fondo negro vacío -- */
.keys-photo{position:relative;min-height:520px;background-color:#141009}
.keys-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(12,9,5,.5) 100%)}
.keys-photo .keys-cap{position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;
 font-family:var(--sans);font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--champ-lt)}

/* -- Grid de servicios con FOTO (index) -- */
.incl.inclph{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:none;border:0;box-shadow:none;border-radius:0}
.inclph .it{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;
 display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s;box-shadow:0 24px 50px -44px rgba(0,0,0,.45)}
.inclph .it:hover{transform:translateY(-7px);box-shadow:0 40px 74px -46px rgba(122,94,28,.5)}
.inclph .it-ph{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;overflow:hidden}
.inclph .it-ph::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,8,.05),rgba(20,15,8,.42));z-index:1}
.inclph .it-ph::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(115deg,transparent 40%,rgba(255,243,210,.28) 50%,transparent 60%);transform:translateX(-140%) skewX(-6deg);transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.inclph .it:hover .it-ph::after{transform:translateX(140%) skewX(-6deg)}
.inclph .it-ph .ico{position:absolute;left:16px;bottom:14px;z-index:3;width:30px;height:30px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.inclph .it-ph{transition:transform 1.3s cubic-bezier(.19,1,.22,1)}
.inclph .it:hover .it-ph{transform:scale(1.05)}
.inclph .it-cap{padding:22px 22px 26px;text-align:center}
.inclph .it-cap h4{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);margin:0 0 4px}
.inclph .it-cap p{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
@media(max-width:900px){.incl.inclph{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.incl.inclph{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sec-head h2,.res .r-name{animation:none}.inclph .it-ph::after{display:none}}

/* v13 · Foto en tarjetas de servicio (concierge) */
.torre.has-ph{overflow:hidden;padding-top:0}
.torre.has-ph .t-ph{margin:-1px calc(-1 * clamp(28px,4vw,28px)) 20px;height:180px;background-size:cover;background-position:center;position:relative;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.torre.has-ph{padding-left:28px;padding-right:28px}
.torre.has-ph .t-ph{margin-left:-28px;margin-right:-28px}
.torre.has-ph .t-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,8,.03),rgba(20,15,8,.32))}
.torre.has-ph:hover .t-ph{transform:scale(1.05)}
.torre.has-ph .t-ic{margin-top:4px}

/* ============ v14 · Puerta, specs visuales, llaves nítidas ============ */
/* -- Icono de puerta en el número de residencia (reemplaza N.º) -- */
.r-hash,.h1-hash{background:none!important;-webkit-text-fill-color:initial!important;display:inline-flex;vertical-align:middle}
.r-hash svg{width:.42em;height:.42em;color:#B08A3C;margin-right:.16em;vertical-align:.06em;transform:translateY(-.04em)}
.h1-hash svg{width:.4em;height:.4em;color:var(--champ-lt);margin-right:.18em;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));vertical-align:.02em}
/* (sin flex en r-name/h1 para preservar degradado y layout del hero) */

/* -- Specs como chips visuales con icono (index) -- */
.res .r-specs{gap:14px}
.res .r-specs .s{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:96px;
 background:linear-gradient(180deg,var(--cream),var(--white));border:1px solid var(--line);border-radius:12px;
 padding:16px 12px 14px;transition:.4s cubic-bezier(.19,1,.22,1);position:relative;overflow:hidden}
.res .r-specs .s:hover{transform:translateY(-4px);border-color:var(--champ);box-shadow:0 22px 44px -34px rgba(122,94,28,.5)}
.res .r-specs .spec-ic{width:26px;height:26px;color:var(--gold);margin-bottom:6px}
.res .r-specs .s b{-webkit-text-fill-color:initial;background:none;font-family:var(--disp);font-size:26px;color:var(--ink);line-height:1}
.res:nth-child(even) .r-specs .s{background:linear-gradient(180deg,var(--white),var(--cream))}

/* -- Pricebar (unidad) con icono line-art -- */
.pricebar .pb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:22px 12px}
.pricebar .pb-ic{width:24px;height:24px;color:var(--gold);margin-bottom:4px}
.pricebar .pb{transition:background .4s}
.pricebar .pb:hover{background:var(--cream)}

/* -- Llaves: pequeña, contenida y NÍTIDA (sin sobre-escalar) sobre fondo cálido -- */
.keys-photo{position:relative;display:flex;align-items:center;justify-content:center;min-height:520px;
 background:radial-gradient(120% 100% at 50% 42%,#2a2113 0%,#1a140c 55%,#100b06 100%)}
.keys-plate{width:min(74%,340px);aspect-ratio:1;background-size:cover;background-position:center;border-radius:4px;
 box-shadow:0 40px 90px -40px #000, 0 0 0 1px rgba(212,180,120,.35), 0 0 0 10px rgba(212,180,120,.06);
 outline:1px solid rgba(212,180,120,.5);outline-offset:8px}
.keys-photo .keys-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;
 font-family:var(--sans);font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--champ-lt)}
@media(max-width:900px){.keys-photo{min-height:400px}.keys-plate{width:min(62%,300px)}}
@media(prefers-reduced-motion:reduce){.res .r-specs .s{transition:none}}

/* ============ v15 · Inmersión, noche estrellada, magia de lujo ============ */
/* -- Icono de puerta más grande y legible -- */
.r-hash svg{width:.52em;height:.52em}
.h1-hash svg{width:.46em;height:.46em}

/* -- Concierge: grid de 5 tarjetas, centrado -- */
.torres.torres-5{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.torres.torres-5 .torre{grid-column:span 2}
.torres.torres-5 .torre:nth-child(4){grid-column:2/4}
.torres.torres-5 .torre:nth-child(5){grid-column:4/6}
@media(max-width:900px){.torres.torres-5{grid-template-columns:1fr}.torres.torres-5 .torre,.torres.torres-5 .torre:nth-child(n){grid-column:auto}}

/* -- Reveal INMERSIVO: la imagen se abre de afuera hacia adentro -- */
.rv .m-img,.rv .r-img,.rv .it-ph,.rv .c-media img{
 transition:clip-path 1.3s cubic-bezier(.19,1,.22,1),transform 1.4s cubic-bezier(.19,1,.22,1),filter 1.3s ease}
.rv:not(.in) .m-img,.rv:not(.in) .r-img,.rv:not(.in) .it-ph,.rv:not(.in) .c-media img{
 clip-path:inset(16% 14% 16% 14% round 6px);transform:scale(1.12);filter:saturate(.85) brightness(.94)}
.rv.in .m-img,.rv.in .r-img,.rv.in .it-ph,.rv.in .c-media img{clip-path:inset(0 0 0 0 round 0)}

/* -- Toque de magia: destello dorado que cruza los hairlines al revelarse -- */
.hair{position:relative;overflow:hidden}
.hair::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(228,200,119,.9),transparent);transform:translateX(-120%)}
.rv.in .hair::after{animation:hairSweep 1.6s .3s ease forwards}
@keyframes hairSweep{to{transform:translateX(120%)}}

/* -- NOCHE · bóveda de estrellas (CSS puro) -- */
.night-sky{position:relative;overflow:hidden;
 background:radial-gradient(120% 90% at 78% 12%,#243247 0%,#131c2b 38%,#0a0f18 72%,#060910 100%)}
.night-sky::before{content:"";position:absolute;inset:-10%;
 background-image:
  radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 28% 55%,#eaf2ff,transparent),
  radial-gradient(1px 1px at 44% 18%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 62% 40%,#fff,transparent),
  radial-gradient(1px 1px at 74% 68%,#dfeaff,transparent),
  radial-gradient(1.3px 1.3px at 85% 30%,#fff,transparent),
  radial-gradient(1px 1px at 18% 78%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 52% 82%,#fff,transparent),
  radial-gradient(1px 1px at 34% 34%,#cfe0ff,transparent),
  radial-gradient(1.2px 1.2px at 68% 14%,#fff,transparent),
  radial-gradient(1px 1px at 92% 58%,#fff,transparent),
  radial-gradient(1.3px 1.3px at 8% 48%,#fff,transparent);
 animation:twinkle 5.5s ease-in-out infinite alternate}
.night-sky::after{content:"";position:absolute;inset:0;
 background:radial-gradient(closest-side at 80% 14%,rgba(244,231,178,.55),rgba(244,231,178,.08) 45%,transparent 70%)}
@keyframes twinkle{0%{opacity:.55}50%{opacity:1}100%{opacity:.7}}
/* estrellas fugaces */
.night-sky .shoot{position:absolute;top:22%;left:60%;width:120px;height:1px;
 background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));transform:rotate(18deg);opacity:0;
 box-shadow:0 0 6px rgba(255,255,255,.6);animation:shoot 7s ease-in 2s infinite}
.night-sky .shoot.s2{top:52%;left:30%;width:90px;animation-delay:5s;animation-duration:9s}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(18deg)}6%{opacity:1}14%{opacity:0;transform:translate(-160px,52px) rotate(18deg)}100%{opacity:0}}
.night-moment .time{color:#cbb26a}
/* motas doradas flotando (magia) sobre secciones cálidas del hero-cue */
.hero-cue,.cue{position:relative}

@media(prefers-reduced-motion:reduce){
 .rv .m-img,.rv .r-img,.rv .it-ph,.rv .c-media img{transition:none}
 .rv:not(.in) .m-img,.rv:not(.in) .r-img,.rv:not(.in) .it-ph,.rv:not(.in) .c-media img{clip-path:none;transform:none;filter:none}
 .night-sky::before,.night-sky .shoot,.hair::after{animation:none}
 .hair::after{display:none}}

/* ============ v16 · Botones, hero legible, grid 3col, amenidades ============ */
/* -- Barra superior: Inicio + Menú (sin las 3 rayas) -- */
.top-actions{position:fixed;top:20px;right:22px;z-index:98;display:flex;gap:10px;align-items:center}
.menu-btn{position:static;width:auto;height:auto;top:auto;right:auto;padding:11px 20px;border-radius:100px;
 background:rgba(24,21,16,.55);backdrop-filter:blur(6px);gap:0;flex-direction:row}
.menu-btn span{width:auto;height:auto;background:none;color:#fff;font-family:var(--sans);
 font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.menu-btn:hover{background:rgba(24,21,16,.85)}
.home-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:100px;
 background:rgba(24,21,16,.55);backdrop-filter:blur(6px);color:#fff;text-decoration:none;transition:.3s;border:1px solid rgba(212,180,120,.28)}
.home-btn:hover{background:rgba(122,94,28,.85);border-color:rgba(212,180,120,.6)}
.home-btn svg{width:16px;height:16px;color:var(--champ-lt)}
.home-btn span{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
@media(max-width:560px){.home-btn span{display:none}.home-btn{padding:11px}}

/* -- Hero MÁS LEGIBLE: scrim reforzado + resplandor tras el texto + tipografía marcada -- */
.hero::after{background:linear-gradient(180deg,rgba(13,10,6,.58),rgba(13,10,6,.34) 40%,rgba(13,10,6,.78)),
 radial-gradient(70% 55% at 50% 46%,rgba(10,7,4,.55),transparent 72%)}
.hero-in{max-width:1020px}
.hero h1.h-cine{font-weight:500;letter-spacing:-.018em;
 text-shadow:0 2px 4px rgba(0,0,0,.55),0 8px 44px rgba(0,0,0,.6)}
.hero .h-sub{font-weight:400;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 26px rgba(0,0,0,.5)}
.hero .kicker{text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* -- Grid "lo abarca todo": 3 columnas (9 tiles = 3x3) -- */
.incl.inclph{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.incl.inclph{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.incl.inclph{grid-template-columns:1fr}}

/* descripciones de propiedad: centradas y organizadas (refuerzo) */
.promesa{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.promesa .sep{margin-left:auto;margin-right:auto}

/* ============ v17 · Logo, dorado hero, llaves claras, simetría ============ */
/* -- Logo en cabecera -- */
.brand-fixed{display:flex;align-items:center;gap:12px}
.brand-logo{height:26px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
@media(max-width:560px){.brand-logo{height:22px}}

/* -- Footer: logo dorado + Hecho con el Corazón -- */
.foot-brand{display:flex;flex-direction:column;align-items:center;gap:10px}
.foot-logo{height:40px;width:auto;opacity:.92;margin-bottom:2px}
.foot-heart{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--champ);margin:18px 0 6px;letter-spacing:.02em}
.foot-heart .gold-heart{filter:sepia(1) saturate(3) hue-rotate(5deg) brightness(1.05);font-style:normal}

/* -- HERO: casa y sueños en dorado precioso y luminoso -- */
.hero h1 em{font-style:italic;
 background:linear-gradient(100deg,#C79A3E 0%,#F7E7A8 24%,#EBCF7C 46%,#F9EFC0 62%,#D8B45A 82%,#C79A3E 100%);
 background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 text-shadow:none;filter:drop-shadow(0 2px 16px rgba(226,190,110,.45));animation:heroGold 6s ease-in-out infinite alternate}
@keyframes heroGold{0%{background-position:12% 0}100%{background-position:88% 0}}

/* -- LLAVES: fondo con el color de la página (crema), sin oscuros -- */
.keys-photo{background:var(--cream,#F6F3EC)}
.keys-photo::after{display:none}
.keys-plate{box-shadow:0 30px 70px -40px rgba(122,94,28,.5),0 0 0 1px rgba(176,138,60,.25);
 outline:1px solid rgba(176,138,60,.45);outline-offset:8px}
.keys-photo .keys-cap{color:var(--champ,#9A742C)}

/* -- PRICEBAR simétrico: todos los ítems centrados, ícono arriba -- */
.pricebar{display:grid;grid-template-columns:repeat(4,1fr)}
.pricebar .pb,.pricebar .pb.tc{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:4px;padding:24px 12px}
.pricebar .pb-ic{width:26px;height:26px;margin:0 0 4px}
.pricebar .pb b{display:block;font-family:var(--disp);font-size:26px;line-height:1}
.pricebar .pb .lab{text-align:center}
@media(max-width:560px){.pricebar{grid-template-columns:repeat(2,1fr)}}

/* index r-specs: reforzar simetría (misma altura) */
.res .r-specs{align-items:stretch}
.res .r-specs .s{justify-content:center}

/* -- Concierge grid 2x2 (4 tarjetas con foto) -- */
.torres.torres-4{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:960px;margin-left:auto;margin-right:auto}
@media(max-width:700px){.torres.torres-4{grid-template-columns:1fr}}

/* v17.1 · ajuste: texto de "Vista" en pricebar no gigante */
.pricebar .pb.tc b{font-size:17px;line-height:1.2;font-family:var(--serif);font-style:italic}
.pricebar .pb b{color:var(--ink)}
.pricebar .pb.tc b{color:var(--champ)}

/* v17.2 · corazón SVG dorado alineado */
.foot-heart .gold-heart{display:inline-block;vertical-align:-2px;margin-left:4px;filter:drop-shadow(0 1px 4px rgba(122,94,28,.4))}

/* ============ v18 · Pulido: animaciones en espacios en blanco ============ */
/* -- Resplandor dorado que respira, muy sutil, en secciones crema (llena el vacío) -- */
.section.cream{position:relative;overflow:hidden}
.section.cream::before{content:"";position:absolute;width:56vw;height:56vw;max-width:760px;max-height:760px;
 top:-18%;right:-14%;border-radius:50%;pointer-events:none;z-index:0;
 background:radial-gradient(circle,rgba(196,164,100,.10),rgba(196,164,100,.04) 42%,transparent 68%);
 animation:floatGlow 18s ease-in-out infinite alternate}
.section.cream:nth-of-type(even)::before{top:auto;bottom:-20%;right:auto;left:-16%;animation-duration:22s}
.section.cream>.container{position:relative;z-index:1}
@keyframes floatGlow{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-4%,6%) scale(1.12)}}

/* -- Ornamento dorado que titila sobre los separadores (sec-head) -- */
.sec-head .hair{position:relative}
.sec-head .hair::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
 transform:rotate(45deg);background:linear-gradient(135deg,#F4E4B2,#C4A464);box-shadow:0 0 10px rgba(212,180,120,.7);
 animation:gemPulse 3.4s ease-in-out infinite;z-index:2}
@keyframes gemPulse{0%,100%{opacity:.5;box-shadow:0 0 6px rgba(212,180,120,.4)}50%{opacity:1;box-shadow:0 0 16px rgba(212,180,120,.85)}}

/* (motas retiradas: rompían el velo oscuro del CTA y la legibilidad) */

/* -- RESEÑAS: comilla dorada + tarjeta que se eleva -- */
.review{position:relative;transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s;overflow:hidden}
.review::before{content:"\201C";position:absolute;top:-8px;left:16px;font-family:var(--disp);font-size:88px;line-height:1;
 color:transparent;background:linear-gradient(135deg,#DFC98F,#B08A3C);-webkit-background-clip:text;background-clip:text;opacity:.28}
.review:hover{transform:translateY(-6px);box-shadow:0 34px 60px -44px rgba(122,94,28,.55)}
.review .st{position:relative;z-index:1;letter-spacing:2px}
.review p{position:relative;z-index:1}
/* cita destacada emotiva */
.pull-quote{text-align:center;max-width:900px;margin:0 auto clamp(50px,7vw,90px);position:relative}
.pull-quote q{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.6vw,42px);line-height:1.3;color:var(--ink);quotes:none}
.pull-quote q::before,.pull-quote q::after{content:""}
.pull-quote .pq-mark{font-family:var(--disp);font-size:64px;line-height:0;color:var(--champ);display:block;margin-bottom:10px;opacity:.5}
.pull-quote .pq-who{margin-top:20px;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}

@media(prefers-reduced-motion:reduce){
 .section.cream::before,.sec-head .hair::before,.cta::before,.cta::after{animation:none}
 .review{transition:none}}

/* ============ v19 · Legibilidad de las secciones finales (CTA) ============ */
.cta::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:
 linear-gradient(rgba(12,9,5,.74),rgba(12,9,5,.84)),
 radial-gradient(75% 62% at 50% 48%,rgba(8,6,3,.62),transparent 74%)}
.cta h2{font-weight:500;text-shadow:0 2px 6px rgba(0,0,0,.6),0 10px 40px rgba(0,0,0,.7)}
.cta h2 em{color:#F2DC9E}
.cta .kicker{color:#EBD9A4;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.cta p,.cta .cta-quote{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7),0 2px 22px rgba(0,0,0,.6)}
.cta .cta-quote{font-size:clamp(19px,2.5vw,25px)}
/* CTA sobre fondo claro (cta-light) mantiene tinta oscura, no aplica el refuerzo blanco */
.cta.cta-light h2,.cta.cta-light .cta-quote,.cta.cta-light p{text-shadow:none}

/* v19.1 · cta-light conserva dorado oscuro (contraste sobre crema) */
.cta.cta-light h2 em{color:var(--gold)}
.cta.cta-light .kicker{color:var(--gold)}
.cta.cta-light h2{color:var(--ink)}

/* ============ v20 · Intención, concierge 7 tarjetas, puerta ============ */
/* -- Paso 01: intenciones (pills a WhatsApp) -- */
.step-intent{align-self:stretch}
.intentions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px}
.intent-pill{display:inline-block;padding:9px 15px;border-radius:100px;border:1px solid var(--line);
 background:var(--white);color:var(--ink);text-decoration:none;font-family:var(--sans);font-size:11.5px;
 letter-spacing:.06em;transition:.35s cubic-bezier(.19,1,.22,1);white-space:nowrap}
.intent-pill:hover{border-color:var(--champ);background:var(--cream);color:var(--gold);transform:translateY(-2px);
 box-shadow:0 16px 30px -22px rgba(122,94,28,.6)}
.steps{align-items:start}

/* -- Concierge: 7 tarjetas centradas (3 por fila, última fila centrada) -- */
.torres.torres-svc{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.torres.torres-svc .torre{flex:0 1 calc(33.333% - 22px);min-width:260px;margin:0}
@media(max-width:900px){.torres.torres-svc .torre{flex:0 1 calc(50% - 22px)}}
@media(max-width:640px){.torres.torres-svc .torre{flex:0 1 100%}}

/* la última fila (Reservas·Despensa·Limpieza·Fotografía) mantiene equilibrio; el subtítulo largo del chef no rompe */
.torres-svc .t-lead{min-height:0}

/* ============================================================
   v21 · PULIDO DE LUJO — "las maravillas"
   ============================================================ */

/* --- Selección de texto en dorado tenue --- */
::selection{background:rgba(196,164,100,.28);color:var(--ink)}

/* --- Barra de progreso de scroll: hilo de oro con brillo --- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
 background:linear-gradient(90deg,#B08A3C,#F4E4B2 55%,#C4A464);
 box-shadow:0 0 10px rgba(212,180,120,.7);transition:width .12s ease-out}

/* --- Entrada "wow": velo de crema que se levanta con un destello dorado --- */
.enter-veil{position:fixed;inset:0;z-index:9999;background:var(--bone,#F6F1E8);pointer-events:none;
 display:flex;align-items:center;justify-content:center;overflow:hidden;
 animation:veilLift 2s cubic-bezier(.7,0,.2,1) forwards}
.enter-veil::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;
 background:linear-gradient(105deg,transparent,rgba(233,205,140,.55),transparent);
 transform:skewX(-12deg);animation:veilSheen 1.05s ease-in forwards}
.enter-veil .ev-mark{font-family:var(--disp);font-size:clamp(30px,5vw,54px);letter-spacing:.02em;color:var(--ink);
 opacity:0;animation:evMark 1.4s ease forwards}
.enter-veil .ev-mark em{font-style:italic;
 background:linear-gradient(100deg,#C79A3E,#F7E7A8,#C79A3E);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes veilLift{0%,58%{transform:translateY(0)}100%{transform:translateY(-102%);visibility:hidden}}
@keyframes veilSheen{from{left:-40%}to{left:120%}}
@keyframes evMark{0%{opacity:0;transform:translateY(10px)}40%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0}}

/* --- Línea dorada de cierre en el CTA --- */
.cta-gold-line{margin:30px auto 0;max-width:760px;position:relative;
 font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(21px,2.9vw,32px);line-height:1.35;letter-spacing:.005em;
 background:linear-gradient(100deg,#C79A3E 0%,#F4E4B2 26%,#F9EFC0 50%,#E7CB86 74%,#C79A3E 100%);
 background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 2px 20px rgba(226,190,110,.35));animation:goldFlow 7s ease-in-out infinite alternate}
.cta-gold-line::before{content:"";display:block;width:54px;height:1px;margin:0 auto 22px;
 background:linear-gradient(90deg,transparent,var(--champ-lt),transparent)}
@keyframes goldFlow{0%{background-position:8% 0}100%{background-position:92% 0}}

/* --- Enlaces con subrayado dorado que crece --- */
.foot-nav a,.r-link,.crumb a{position:relative}
.foot-nav a::after,.r-link::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;
 background:linear-gradient(90deg,var(--champ),var(--champ-lt));transition:width .45s cubic-bezier(.19,1,.22,1)}
.foot-nav a:hover::after,.r-link:hover::after{width:100%}

/* --- Reveal de imágenes: de desenfoque a nitidez (más onírico) --- */
.rv:not(.in) .m-img,.rv:not(.in) .r-img,.rv:not(.in) .it-ph,.rv:not(.in) .c-media img,.rv:not(.in) .t-ph{filter:blur(7px) saturate(.9) brightness(.96)}
.rv.in .m-img,.rv.in .r-img,.rv.in .it-ph,.rv.in .c-media img,.rv.in .t-ph{filter:blur(0) saturate(1) brightness(1);transition:filter 1.3s ease,clip-path 1.3s cubic-bezier(.19,1,.22,1),transform 1.4s cubic-bezier(.19,1,.22,1)}

/* --- Tarjetas: brillo dorado interior y zoom al pasar el cursor --- */
.it,.torre,.res .r-body{position:relative}
.incl .it .it-ph{transition:transform 1.1s cubic-bezier(.19,1,.22,1),filter 1.1s}
.incl .it:hover .it-ph{transform:scale(1.06)}
.incl .it{transition:box-shadow .5s,transform .5s cubic-bezier(.19,1,.22,1)}
.incl .it:hover{transform:translateY(-6px);box-shadow:0 40px 70px -50px rgba(122,94,28,.55)}
.torre.has-ph .t-ph{transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.torre.has-ph:hover .t-ph{transform:scale(1.05)}
.torre{transition:box-shadow .5s,transform .5s cubic-bezier(.19,1,.22,1)}
.torre:hover{transform:translateY(-5px);box-shadow:0 40px 70px -52px rgba(122,94,28,.5)}

/* --- Botón WhatsApp flotante: aro dorado que respira --- */
.wa-float{position:fixed}
.wa-float::before{content:"";position:absolute;inset:-6px;border-radius:inherit;border:1px solid rgba(212,180,120,.55);
 opacity:0;animation:waBreath 3.6s ease-in-out infinite;pointer-events:none}
@keyframes waBreath{0%{transform:scale(.9);opacity:0}40%{opacity:.8}100%{transform:scale(1.35);opacity:0}}

/* --- Kickers: las letras se asientan al revelarse --- */
.rv .kicker{transition:letter-spacing 1.1s cubic-bezier(.19,1,.22,1),opacity 1s}
.rv:not(.in) .kicker{letter-spacing:.55em;opacity:0}
.rv.in .kicker{opacity:1}

/* --- Luz ambiental dorada que deriva en el hero (muy sutil) --- */
.hero-in{position:relative}
/* .hero::after: sin will-change permanente */

/* --- Cue del hero: punto dorado que desciende --- */
.hero-cue::before{content:"";position:absolute;bottom:2px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
 background:var(--champ-lt);box-shadow:0 0 10px rgba(233,205,140,.9);animation:cueDot 2s ease-in-out infinite}
@keyframes cueDot{0%{transform:translateY(-40px);opacity:0}30%{opacity:1}100%{transform:translateY(0);opacity:0}}

/* --- Títulos de sección: brillo dorado más lujoso al revelarse --- */
.sec-head.rv.in h2 em{animation:goldFlow 6s ease-in-out infinite alternate}

@media(prefers-reduced-motion:reduce){
 .enter-veil{display:none!important}
 .cta-gold-line,.sec-head h2 em,.wa-float::before,.hero-cue::before{animation:none}
 .rv:not(.in) .m-img,.rv:not(.in) .r-img,.rv:not(.in) .it-ph,.rv:not(.in) .c-media img,.rv:not(.in) .t-ph{filter:none}
 .rv:not(.in) .kicker{letter-spacing:normal;opacity:1}
}

/* ============ v22 · Banner del muelle en "La bahía lo recibe" ============ */
.bay-hero{margin:8px 0 clamp(48px,7vw,84px);position:relative;overflow:hidden}
.bay-hero-img{height:clamp(320px,46vw,560px);background-size:cover;background-position:center;
 transition:transform 1.5s cubic-bezier(.19,1,.22,1)}
.bay-hero:hover .bay-hero-img{transform:scale(1.04)}
.bay-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(rgba(10,8,4,0) 40%,rgba(10,8,4,.66))}
.bay-hero figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
 padding:0 8vw clamp(28px,4vw,46px);text-align:center;
 font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.4vw,27px);line-height:1.4;
 color:#fff;max-width:1000px;margin:0 auto;text-shadow:0 2px 18px rgba(0,0,0,.6)}
/* reveal más suave del banner */
.bay-hero.rv:not(.in) .bay-hero-img{clip-path:inset(10% 8% 10% 8%);filter:blur(6px)}
.bay-hero.rv.in .bay-hero-img{clip-path:inset(0);filter:none;transition:clip-path 1.3s cubic-bezier(.19,1,.22,1),filter 1.2s ease,transform 1.5s cubic-bezier(.19,1,.22,1)}
@media(prefers-reduced-motion:reduce){.bay-hero.rv:not(.in) .bay-hero-img{clip-path:none;filter:none}}

/* v23 · FIX: subtítulo de cta-light visible (mi CSS previo lo puso blanco sobre crema) */
.cta.cta-light p,.cta.cta-light .cta-quote{color:var(--ink2)!important;text-shadow:none}
.cta.cta-light .kicker{text-shadow:none}

/* ============ v23 · Botón de pasos, modal, intenciones, elegancia ============ */
/* -- Botón secundario del hero -- */
.hero-steps-btn{margin-top:18px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
 background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:100px;
 padding:13px 26px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
 backdrop-filter:blur(3px);transition:.4s cubic-bezier(.19,1,.22,1);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero-steps-btn:hover{background:rgba(255,255,255,.12);border-color:var(--champ-lt);transform:translateY(-2px)}
.hero-steps-btn .hsb-ar{transition:transform .4s}
.hero-steps-btn:hover .hsb-ar{transform:translateX(4px)}

/* -- Modal de pasos -- */
.steps-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.steps-modal[hidden]{display:none}
.sm-backdrop{position:absolute;inset:0;background:rgba(14,11,7,.62);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s}
.steps-modal.on .sm-backdrop{opacity:1}
.sm-card{position:relative;z-index:1;background:var(--bone,#F6F1E8);border-radius:14px;max-width:600px;width:100%;
 padding:clamp(34px,5vw,54px);box-shadow:0 60px 120px -50px rgba(0,0,0,.6),0 0 0 1px rgba(176,138,60,.25);
 text-align:center;transform:translateY(26px) scale(.98);opacity:0;transition:.5s cubic-bezier(.19,1,.22,1);
 max-height:90vh;overflow:auto}
.steps-modal.on .sm-card{transform:none;opacity:1}
.sm-close{position:absolute;top:14px;right:16px;width:38px;height:38px;border:0;background:transparent;cursor:pointer;
 font-size:26px;line-height:1;color:var(--stone);border-radius:50%;transition:.3s}
.sm-close:hover{background:rgba(122,94,28,.1);color:var(--gold)}
.sm-card .kicker{color:var(--gold)}
.sm-title{font-family:var(--disp);font-weight:400;font-size:clamp(26px,4vw,36px);margin:10px 0 26px;color:var(--ink)}
.sm-title em{font-style:italic;
 background:linear-gradient(100deg,#C79A3E,#F4E4B2,#C79A3E);-webkit-background-clip:text;background-clip:text;color:transparent;
 background-size:200% 100%;animation:goldFlow 6s ease-in-out infinite alternate}
.sm-steps{list-style:none;margin:0 0 30px;padding:0;text-align:left;display:flex;flex-direction:column;gap:20px}
.sm-steps li{display:flex;gap:18px;align-items:flex-start}
.sm-n{flex:none;font-family:var(--disp);font-size:22px;color:var(--champ);width:44px;height:44px;border-radius:50%;
 border:1px solid rgba(176,138,60,.4);display:flex;align-items:center;justify-content:center;background:var(--white)}
.sm-steps h4{font-family:var(--disp);font-weight:400;font-size:19px;margin:0 0 4px;color:var(--ink)}
.sm-steps p{font-size:14.5px;line-height:1.55;color:var(--ink2);margin:0}
@media(prefers-reduced-motion:reduce){.sm-card,.sm-backdrop{transition:none}.sm-title em{animation:none}}

/* -- Intenciones más elegantes -- */
.intentions{gap:11px;margin-top:20px}
.intent-pill{padding:11px 20px;border-radius:100px;border:1px solid rgba(176,138,60,.35);
 background:linear-gradient(180deg,var(--white),var(--cream));color:var(--ink);
 font-family:var(--sans);font-size:12px;letter-spacing:.08em;position:relative;overflow:hidden;
 box-shadow:0 10px 24px -20px rgba(122,94,28,.5)}
.intent-pill::before{content:"";position:absolute;left:-40%;top:0;width:40%;height:100%;
 background:linear-gradient(105deg,transparent,rgba(233,205,140,.5),transparent);transform:skewX(-14deg);transition:left .6s}
.intent-pill:hover{border-color:var(--champ);color:var(--gold);transform:translateY(-2px);
 box-shadow:0 20px 34px -20px rgba(122,94,28,.6)}
.intent-pill:hover::before{left:130%}

/* -- "Permítanos diseñar sus vacaciones soñadas": em con brillo de lujo -- */
.cta-light h2 em{font-style:italic;letter-spacing:.005em;
 background:linear-gradient(100deg,#6B551A 0%,#8A6D16 26%,#B8923A 50%,#8A6D16 74%,#6B551A 100%);
 background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 1px 10px rgba(138,109,22,.22))}
.cta-light h2{letter-spacing:-.01em}

/* v24 · corazón rojo + botón-enlace de pasos */
.foot-heart .gold-heart{filter:drop-shadow(0 1px 5px rgba(200,40,32,.4))}
.hero-steps-btn{text-decoration:none}
a.hero-steps-btn:hover{color:#fff}

/* ============ v25 · Logo en marca, favicon, redes sociales ============ */
/* -- Logo en cabecera (claro arriba, oscuro al hacer scroll) -- */
.brand-fixed::after{display:none}
.brand-fixed .brand-logo-light,.brand-fixed .brand-logo-dark{height:38px;width:auto;display:block;
 filter:drop-shadow(0 2px 12px rgba(0,0,0,.45));transition:opacity .4s}
.brand-fixed .brand-logo-dark{position:absolute;top:0;left:0;opacity:0;filter:none}
body.scrolled .brand-fixed .brand-logo-light{opacity:0}
body.scrolled .brand-fixed .brand-logo-dark{opacity:1}
.brand-fixed{padding-bottom:0}
@media(max-width:560px){.brand-fixed .brand-logo-light,.brand-fixed .brand-logo-dark{height:32px}}

/* -- Logo en el pie -- */
.foot-logo{height:52px;width:auto;opacity:.95}

/* -- Redes sociales -- */
.foot-social{display:flex;justify-content:center;gap:14px;margin:22px 0 4px}
.foot-social a{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
 color:var(--champ-lt);border:1px solid rgba(212,180,120,.28);transition:.4s cubic-bezier(.19,1,.22,1)}
.foot-social a:hover{color:#0E0E0E;background:linear-gradient(135deg,#E7CB86,#C4A464);
 border-color:transparent;transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(212,180,120,.7)}

/* ============================================================
   v26 · INMERSIÓN — "Un día en ICON"
   La luz sigue al sol · el oro atrapa la luz una sola vez ·
   la noche entra de verdad en la página.
   Todo lo demás se queda quieto: la audacia se gasta aquí.
   ============================================================ */

/* -- El salto instantáneo a #pasos/#residencias no queda pegado al borde -- */
#residencias,#ubicacion,#pasos{scroll-margin-top:96px}

/* -- 1 · EL ORO ATRAPA LA LUZ una sola vez, al entrar en cuadro.
      (Antes: brillo en bucle que repintaba el texto continuamente —
       peor rendimiento y menos intencional.) -- */
.sec-head h2,.res .r-name{animation:none}
.sec-head.rv.in h2,.sec-head.rv.in h2 em,.res.rv.in .r-name{
 animation:goldCatch 1.9s var(--ease-silk) .15s both}
@keyframes goldCatch{0%{background-position:120% 0}100%{background-position:34% 0}}
/* titulares donde el brillo perpetuo solo sumaba repintado: ahora estáticos */
.sm-title em,.cta.cta-light h2 em{animation:none}

/* -- 2 · FOCUS-PULL FÍLMICO: la toma entra fría y desenfocada y, al
      resolverse, gana nitidez y calidez — una cámara que halla su luz -- */
.rv:not(.in) .m-img,.rv:not(.in) .r-img,.rv:not(.in) .c-media img,
.rv:not(.in) .it-ph,.rv:not(.in) .bay-hero-img{filter:blur(8px) saturate(.82) brightness(.93)}
.rv.in .m-img,.rv.in .r-img,.rv.in .c-media img,.rv.in .it-ph,.rv.in .bay-hero-img{
 filter:blur(0) saturate(1.05) brightness(1.01);
 transition:filter 1.5s var(--ease-glide),clip-path 1.4s var(--ease-silk),transform 1.5s var(--ease-silk)}

/* -- 3 · LA LUZ SIGUE AL SOL — el relato "un día en ICON" cambia de
      temperatura al descender: amanece, se dora, y al final anochece -- */
.day .moment .m-img{position:relative;overflow:hidden}
.day .moment .m-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 opacity:0;transition:opacity 1.8s var(--ease-glide);mix-blend-mode:soft-light}
.day .moment.rv.in .m-img::before{opacity:1}
.day .moment:nth-child(1) .m-img::before{background:linear-gradient(205deg,rgba(255,242,214,.55),transparent 58%)} /* 07:00 la mañana */
.day .moment:nth-child(2) .m-img::before{background:linear-gradient(0deg,rgba(255,231,182,.4),transparent 52%)}   /* 14:00 la tarde */
.day .moment:nth-child(3) .m-img::before{background:linear-gradient(18deg,rgba(232,150,58,.5),rgba(188,86,38,.22) 55%,transparent)} /* 19:30 el atardecer */
.day .moment:nth-child(3) .time{color:#B5762A}

/* -- LA NOCHE entra en la página: el panel de "bóveda de estrellas" se
      vuelve cielo nocturno y el lector cruza al anochecer -- */
.day .night-moment .m-txt{position:relative;overflow:hidden;
 background:radial-gradient(120% 100% at 20% 0,#16213a 0%,#0c1220 55%,#080d18 100%)}
.day .night-moment .m-txt .time{color:#9db4e0}
.day .night-moment h3{color:#f3f6fc}
.day .night-moment h3 em{background:none;color:#d8c07e;-webkit-text-fill-color:#d8c07e}
.day .night-moment p{color:#c4ccdb}
.day .night-moment .m-img::before{background:linear-gradient(200deg,rgba(28,44,78,.32),rgba(8,12,24,.5));mix-blend-mode:normal}
/* estrellas tenues sobre el panel de noche (una sola capa, CSS puro) */
.day .night-moment .m-txt::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
 background-image:
  radial-gradient(1.4px 1.4px at 18% 22%,#fff,transparent),radial-gradient(1px 1px at 68% 34%,#dfeaff,transparent),
  radial-gradient(1.2px 1.2px at 42% 68%,#fff,transparent),radial-gradient(1px 1px at 82% 74%,#cfe0ff,transparent),
  radial-gradient(1.3px 1.3px at 30% 88%,#fff,transparent),radial-gradient(1px 1px at 90% 18%,#fff,transparent);
 animation:nightTwinkle 6s ease-in-out infinite alternate}
.day .night-moment .m-txt>*{position:relative;z-index:1}
@keyframes nightTwinkle{0%{opacity:.35}100%{opacity:.7}}

/* -- 4 · TACTO DE LUJO: el oro se "posa" — el rótulo de hora abre su
      interletra cuando la escena recibe atención -- */
.moment .time,.chapter .c-k{transition:letter-spacing .5s var(--ease-silk)}
.moment:hover .time,.chapter:hover .c-k{letter-spacing:.42em}

/* -- Accesibilidad: sin movimiento la historia se cuenta igual (luz fija) -- */
@media(prefers-reduced-motion:reduce){
 .sec-head.rv.in h2,.sec-head.rv.in h2 em,.res.rv.in .r-name,
 .day .night-moment .m-txt::after{animation:none}
 .rv.in .m-img,.rv.in .r-img,.rv.in .c-media img,.rv.in .it-ph,.rv.in .bay-hero-img{transition:none}
 .day .moment .m-img::before{transition:none;opacity:1}
 .moment:hover .time,.chapter:hover .c-k{letter-spacing:inherit}}

/* ============ v26 (sobre tu v25) · olas azul marino, firma dorada, servicios ============ */
/* -- Icono de olas en AZUL MARINO -- */
.wave-nv{color:#1C2E4A!important}

/* -- Línea de cierre del CTA: firma dorada grande e intensa -- */
.cta-gold-line{font-family:var(--serif);font-style:normal;font-weight:500;
 font-size:clamp(34px,6.2vw,66px);line-height:1.15;margin-top:38px;letter-spacing:.01em;
 background:linear-gradient(96deg,#B8860B 0%,#E7C766 22%,#FFF1C0 44%,#E7C766 62%,#C9962E 82%,#B8860B 100%);
 background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 3px 22px rgba(226,190,110,.55)) drop-shadow(0 1px 2px rgba(120,80,10,.5));
 animation:goldFlow 7s ease-in-out infinite alternate}
.cta-gold-line::before{width:70px;margin-bottom:26px;background:linear-gradient(90deg,transparent,#E7C766,transparent)}

/* -- Enlace breve a Les Clefs d'Or bajo el teaser de concierge -- */
.lcd-ref{margin-top:14px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.lcd-ref a{color:var(--stone);text-decoration:none;border-bottom:1px solid rgba(122,94,28,.3);padding-bottom:2px;transition:.3s}
.lcd-ref a:hover{color:var(--gold);border-color:var(--gold)}

/* -- keys.webp ahora es el emblema Les Clefs d'Or: encajar bien en el plate -- */
.keys-plate{background-size:cover;background-position:center}

/* v26.1 · FIX especificidad: la firma dorada debe ganar a .cta p */
.cta p.cta-gold-line{font-size:clamp(34px,6vw,64px);max-width:none;line-height:1.15;margin:34px auto 0;
 color:transparent;-webkit-text-fill-color:transparent}
@media(max-width:560px){.cta p.cta-gold-line{font-size:34px}}

/* v26.2 · el filter rompía el background-clip:text; lo quito y uso realce por sombra de texto vía capa */
.cta p.cta-gold-line{filter:none}

/* v26.3 · firma dorada SÓLIDA e intensa (fiable), con brillo cálido */
.cta p.cta-gold-line{
 background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
 color:#EBCB72!important;-webkit-text-fill-color:#EBCB72!important;
 text-shadow:0 1px 2px rgba(90,60,10,.6),0 2px 20px rgba(226,190,110,.45);
 animation:none}

/* ============================================================
   v27 · Ajustes de esta iteración
   ============================================================ */

/* Banner real (foto Les Clefs d'Or) en el hero del Concierge.
   Oscurecemos la imagen para que el texto blanco/dorado tenga contraste. */
.keys-hero .hero-img{filter:brightness(.5) saturate(1.04) contrast(1.02)}
.keys-hero .hero-img::after{background:
  radial-gradient(120% 100% at 50% 40%,rgba(8,6,4,.28) 0%,rgba(8,6,4,.72) 100%),
  linear-gradient(180deg,rgba(8,6,4,.45) 0%,rgba(8,6,4,.12) 42%,rgba(8,6,4,.6) 100%)}

/* Enlace "Volver al viaje" en variante clara (páginas internas con fondo crema) */
.back-home--light{color:var(--ink);border-color:rgba(122,94,28,.45);backdrop-filter:none;
  background:rgba(255,255,255,.55)}
.back-home--light:hover{background:rgba(122,94,28,.1);border-color:var(--gold);color:var(--gold)}

/* En pantallas chicas el pill de regreso baja un poco para no rozar el logo */
@media(max-width:560px){.back-home{top:70px;left:16px;font-size:10px;padding:8px 14px}}

/* El zoom de revelado (scale 1.12) de las imágenes a sangre no debe
   desbordar la fila: se recorta a su celda (sin scroll horizontal). */
.moment,.res,.chapter{overflow:hidden}

/* ============================================================
   v28 · Banner concierge a recuadro completo + contraste + regreso exacto
   ============================================================ */

/* La tarjeta del concierge (portada, index) llena TODO el recuadro dorado */
.keys-photo{min-height:clamp(380px,44vw,560px)}
.keys-photo .keys-plate-full{position:absolute;inset:20px;width:auto;height:auto;aspect-ratio:auto;
  border-radius:6px;box-shadow:0 40px 90px -40px #000}
.keys-photo .keys-plate-full::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,4,.10) 0%,transparent 42%,rgba(8,6,4,.62) 100%)}
.keys-photo .keys-cap{color:#E7D19A;text-shadow:0 1px 10px rgba(0,0,0,.6);z-index:3}
@media(max-width:560px){.keys-photo .keys-plate-full{inset:14px}}

/* Contraste entre secciones — REVERTIDO a la paleta anterior (a petición):
   se mantienen los valores originales del :root (--paper #F6F3EC / --cream #FBF9F3). */

/* ============================================================
   v29 · Regreso instantáneo con "Volver al viaje" (sin scroll ni animación)
   Cuando se llega por history.back(), no se anima nada: todo aparece ya puesto.
   ============================================================ */
html.nav-back .rv,
html.nav-back .rv.in{opacity:1!important;transform:none!important;filter:none!important;
  clip-path:none!important;transition:none!important;animation:none!important}
html.nav-back .m-img,html.nav-back .r-img,html.nav-back .it-ph,
html.nav-back .c-media img,html.nav-back .bay-hero-img,html.nav-back .t-ph{
  transition:none!important;transform:none!important;filter:none!important;clip-path:none!important}