/* =========================================================
   GUAYACÁN INMOBILIARIA HD — estilos
   Todas las medidas de escritorio están en unidades del boceto
   (--u = 1px del boceto de 1024px de ancho) para que la
   composición sea idéntica a cualquier tamaño de pantalla.
   ========================================================= */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --r   { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root{
  --bg:#0f1013;
  --bg2:#14151a;
  --ink:#f3efe7;
  --ink-2:#cfc9bf;
  --gold:#e7bd6a;
  --gold-2:#f6d896;
  --gold-3:#b8863a;
  --gold-grad:linear-gradient(180deg,#f7dc9c 0%,#e3b663 45%,#c48f3f 100%);
  --line:rgba(255,255,255,.12);
  --aw:min(100vw,1680px);
  --u:calc(var(--aw) / 1024);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-silk:cubic-bezier(.65,.05,.17,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= NAV ================= */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:transform .7s var(--ease-out),background .5s,backdrop-filter .5s}
.nav-in{position:relative;width:var(--aw);margin:0 auto;height:calc(var(--u)*80);display:flex;align-items:center;padding:0 calc(var(--u)*48) 0 calc(var(--u)*52);transition:height .5s var(--ease-out)}
.nav.is-solid{background:rgba(12,12,15,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 rgba(231,189,106,.12)}
.nav.is-solid .nav-in{height:calc(var(--u)*64)}
.nav.is-hidden{transform:translateY(-110%)}
.brand img{width:calc(var(--u)*218);height:auto;transition:width .5s var(--ease-out)}
.nav.is-solid .brand img{width:calc(var(--u)*180)}

.menu{position:relative;display:flex;align-items:center;gap:calc(var(--u)*29);margin-left:calc(var(--u)*69)}
.menu-link{position:relative;display:flex;align-items:center;gap:calc(var(--u)*5);font-size:max(12px,calc(var(--u)*13));color:var(--ink);letter-spacing:.005em;padding:calc(var(--u)*8) 0;transition:color .35s}
.menu-link:hover,.menu-link.is-active,.drop:hover>.menu-link{color:var(--gold)}
.chev{width:calc(var(--u)*8);height:calc(var(--u)*5);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform .5s var(--ease-out)}
.drop:hover .chev,.drop.open .chev{transform:rotate(180deg)}
.menu-ink{position:absolute;left:0;bottom:calc(var(--u)*-2);height:2px;width:30px;border-radius:2px;background:var(--gold);box-shadow:0 0 10px rgba(231,189,106,.8);transform-origin:left;pointer-events:none;transition:transform .55s var(--ease-out),width .55s var(--ease-out),opacity .3s}

.drop{position:relative}
.drop-panel{position:absolute;top:calc(100% + 14px);left:-18px;min-width:220px;padding:10px;border-radius:14px;background:rgba(18,18,22,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(231,189,106,.22);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  clip-path:inset(0 0 100% 0 round 14px);opacity:0;pointer-events:none;transition:clip-path .6s var(--ease-out),opacity .3s}
.drop::after{content:'';position:absolute;left:0;right:0;top:100%;height:16px}
.drop:hover .drop-panel,.drop.open .drop-panel{clip-path:inset(0 0 0 0 round 14px);opacity:1;pointer-events:auto}
.drop-panel a{display:block;padding:11px 14px;border-radius:9px;font-size:13.5px;color:var(--ink-2);transform:translateX(-8px);opacity:0;transition:transform .5s var(--ease-out),opacity .5s,background .3s,color .3s}
.drop:hover .drop-panel a,.drop.open .drop-panel a{transform:none;opacity:1}
.drop-panel a:nth-child(2){transition-delay:.05s}.drop-panel a:nth-child(3){transition-delay:.1s}
.drop-panel a:hover{background:rgba(231,189,106,.1);color:var(--gold-2)}

.wa-btn{margin-left:auto;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*7);height:calc(var(--u)*35);padding:0 calc(var(--u)*16);border:1px solid var(--gold);border-radius:calc(var(--u)*8);color:var(--gold);font-weight:600;font-size:max(12.5px,calc(var(--u)*14.2));letter-spacing:.01em;position:relative;overflow:hidden;isolation:isolate;transition:color .45s,box-shadow .45s}
.wa-btn svg{width:calc(var(--u)*18);height:calc(var(--u)*18);fill:currentColor}
.wa-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--gold-grad);clip-path:circle(0% at var(--mx,50%) var(--my,50%));transition:clip-path .7s var(--ease-out)}
.wa-btn:hover{color:#1a1206;box-shadow:0 0 28px rgba(231,189,106,.35)}
.wa-btn:hover::before{clip-path:circle(150% at var(--mx,50%) var(--my,50%))}
.burger{display:none}

/* ================= HERO ================= */
.hero{position:relative;height:calc(var(--u)*700);overflow:hidden;contain:paint}
.hero-stage{position:absolute;inset:0;will-change:transform}
.hero-art{position:absolute;top:0;left:50%;width:var(--aw);aspect-ratio:2048/1400;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 86%,transparent 100%)}
.art-img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.leaves{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
/* revelado "amanecer" desde la luz del tronco */
.hero-art .art-img{-webkit-mask-image:radial-gradient(circle at 51.07% 47.4%,#000 var(--r),transparent calc(var(--r) + 18%));mask-image:radial-gradient(circle at 51.07% 47.4%,#000 var(--r),transparent calc(var(--r) + 18%));--r:140%}
body.is-loading .hero-art .art-img{--r:0%}
body.intro-run .hero-art .art-img{animation:dawn 2.6s var(--ease-silk) both}
@keyframes dawn{0%{--r:0%}100%{--r:140%}}

.trunk-light{position:absolute;left:51.07%;top:47.4%;width:16%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,244,214,.9) 0%,rgba(255,206,120,.35) 18%,rgba(231,170,80,.08) 45%,transparent 70%);animation:breathe 5.5s ease-in-out infinite}
body.is-loading .trunk-light{opacity:0;transform:translate(-50%,-50%) scale(.2)}
body.intro-run .trunk-light{animation:ignite 1.6s var(--ease-out) both,breathe 5.5s 1.6s ease-in-out infinite}
@keyframes ignite{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes breathe{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}

.arc-gleam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;overflow:visible}
.arc-gleam circle{fill:none;stroke:#ffd9a0;stroke-width:5;stroke-linecap:round;stroke-dasharray:80 920;stroke-dashoffset:-700;filter:url(#glow);opacity:0}
.arc-gleam circle.g2{stroke:#fff6e6;stroke-width:1.6;filter:none;stroke-dasharray:40 960}
body.intro-done .arc-gleam circle{animation:arc-run 9s 1s var(--ease-silk) infinite}
body.intro-done .arc-gleam circle.g2{animation-name:arc-run2}
@keyframes arc-run{0%{stroke-dashoffset:-690;opacity:0}6%{opacity:.95}34%{opacity:.95}42%,100%{stroke-dashoffset:-1290;opacity:0}}
@keyframes arc-run2{0%{stroke-dashoffset:-710;opacity:0}6%{opacity:1}34%{opacity:1}42%,100%{stroke-dashoffset:-1310;opacity:0}}

.brand-shine{position:absolute;left:27.34%;top:59.29%;width:45.9%;height:14.29%;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:url(images/marca-brillo.png) center/100% 100% no-repeat;mask:url(images/marca-brillo.png) center/100% 100% no-repeat;
  background:linear-gradient(100deg,transparent 0 42%,rgba(255,236,190,.0) 44%,rgba(255,244,214,.95) 50%,rgba(255,236,190,0) 56%,transparent 58% 100%);background-size:260% 100%;background-position:120% 0;opacity:.9}
body.intro-done .brand-shine{animation:shine 7s 1.8s var(--ease-silk) infinite}
@keyframes shine{0%{background-position:125% 0}30%,100%{background-position:-25% 0}}

.hero-cursor{position:absolute;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle,rgba(255,214,150,.16) 0%,rgba(255,190,110,.06) 35%,transparent 70%);transition:opacity .6s}
.hero:hover .hero-cursor{opacity:1}

.tagline{position:absolute;left:50%;top:calc(var(--u)*594);transform:translate(-50%,-50%);width:var(--aw);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*30);pointer-events:none}
.tl-line{width:calc(var(--u)*72);height:1px;background:linear-gradient(90deg,transparent,var(--gold) 40%,var(--gold));transform-origin:right;transition:transform 1.4s var(--ease-silk)}
.tl-line:last-child{background:linear-gradient(90deg,var(--gold),var(--gold) 60%,transparent);transform-origin:left}
body.is-loading .tl-line{transform:scaleX(0)}
.tl-words{margin:0;display:flex;align-items:center;gap:calc(var(--u)*31);font-size:max(10px,calc(var(--u)*12.6));letter-spacing:.52em;color:#e9d6ae;font-weight:500;white-space:nowrap}
.tl-words b{font-weight:400;color:#e9d6ae;letter-spacing:0;font-size:.8em;margin-right:-.1em}
.tl-words .ch{display:inline-block;transition:transform 1.6s var(--ease-out),opacity 1.6s var(--ease-out),filter 1.6s var(--ease-out)}
body.is-loading .tl-words .ch{opacity:0;filter:blur(6px);transform:translate(var(--sx),var(--sy)) scale(.4)}
body.is-loading .tl-words b{opacity:0}
.tl-words b{transition:opacity 1s 1s}

.scroll-cue{position:absolute;left:50%;top:calc(var(--u)*655);width:calc(var(--u)*32);height:calc(var(--u)*32);min-width:28px;min-height:28px;transform:translate(-50%,-50%);border:1px solid rgba(231,189,106,.75);border-radius:50%;display:grid;place-items:center;transition:opacity 1s 1.4s,box-shadow .4s}
.scroll-cue svg{width:55%;height:55%;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;animation:bob 2.4s var(--ease-silk) infinite}
.scroll-cue::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--gold);animation:ripple 2.4s var(--ease-out) infinite}
.scroll-cue:hover{box-shadow:0 0 22px rgba(231,189,106,.4)}
body.is-loading .scroll-cue{opacity:0}
@keyframes bob{0%,100%{transform:translateY(-12%)}50%{transform:translateY(14%)}}
@keyframes ripple{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}

/* ================= SHOWCASE ================= */
.showcase{position:relative;width:var(--aw);margin:0 auto;overflow-x:clip;padding-top:calc(var(--u)*22);padding-bottom:calc(var(--u)*60)}
.house{position:absolute;left:calc(var(--u)*426);top:calc(var(--u)*28);width:calc(var(--u)*598);aspect-ratio:1196/1248;perspective:1400px;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 16%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 16%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.house-tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;transition:transform 1.2s var(--ease-out)}
.house img{width:100%;height:100%;object-fit:cover;filter:brightness(.18) saturate(.4) contrast(1.15);transform:scale(1.08);transition:filter 2.8s var(--ease-silk),transform 3.4s var(--ease-out)}
.house.lit img{filter:none;transform:scale(1)}
.led{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:0;transition:opacity 1.5s 1.6s}
.house.lit .led{opacity:1}
.led path{fill:none;stroke:#fff3d6;stroke-width:5;stroke-linecap:round;stroke-dasharray:110 890;filter:drop-shadow(0 0 6px #ffc46b) drop-shadow(0 0 14px #ff9d2f);animation:led-run 6.5s linear infinite}
@keyframes led-run{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
.pool-shimmer{position:absolute;left:0;right:0;bottom:0;height:23%;mix-blend-mode:soft-light;opacity:.55;
  background:repeating-linear-gradient(176deg,transparent 0 9px,rgba(255,220,160,.55) 10px,transparent 12px 21px);background-size:100% 240%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%);animation:ripples 7s linear infinite}
@keyframes ripples{from{background-position:0 0}to{background-position:0 100%}}

/* servicios */
.services{position:relative;z-index:2;display:grid;grid-template-columns:188fr 166fr 165fr 199fr 177fr;width:calc(var(--u)*895);margin-left:calc(var(--u)*75)}
.svc{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*11);padding:calc(var(--u)*2) 0 calc(var(--u)*14)}
.svc+.svc::before{content:'';position:absolute;left:0;top:calc(var(--u)*3);height:calc(var(--u)*65);width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.2) 20%,rgba(255,255,255,.2) 80%,transparent);transform-origin:top;transition:transform 1.2s var(--ease-silk)}
.svc svg{width:calc(var(--u)*38);height:calc(var(--u)*38);min-width:30px;min-height:30px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease-out),filter .6s}
.svc span{font-size:max(12.5px,calc(var(--u)*14.4));font-weight:500;color:var(--ink);letter-spacing:.005em;transition:color .4s}
.svc:hover svg{transform:translateY(-4px) scale(1.06);filter:drop-shadow(0 0 8px rgba(231,189,106,.6))}
.svc:hover span{color:var(--gold-2)}
.svc-glow{position:absolute;left:0;top:calc(var(--u)*80);height:2px;width:100px;pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-2) 40%,var(--gold-2) 60%,transparent);box-shadow:0 0 12px 1px rgba(231,189,106,.55);transition:transform .7s var(--ease-out),width .7s var(--ease-out)}
.svc-glow::after{content:'';position:absolute;left:10%;right:10%;top:-26px;height:28px;background:radial-gradient(ellipse at 50% 100%,rgba(231,189,106,.22),transparent 70%)}
/* dibujo de íconos */
.draw path,.draw circle{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);transition:stroke-dashoffset 1.8s var(--ease-silk)}
.drawn path,.drawn circle{stroke-dashoffset:0}
.services:not(.in) .svc+.svc::before{transform:scaleY(0)}
.services .svc span{transition:opacity 1s var(--ease-out),letter-spacing 1.2s var(--ease-out),color .4s}
.services:not(.in) .svc span{opacity:0;letter-spacing:.3em}

/* intro de propiedades */
.intro{position:relative;z-index:2;margin-left:calc(var(--u)*63);margin-top:calc(var(--u)*89);width:calc(var(--u)*380)}
.eyebrow{display:flex;align-items:center;gap:calc(var(--u)*14);margin:0;font-size:max(10.5px,calc(var(--u)*11.8));letter-spacing:.42em;color:var(--gold);font-weight:500}
.eyebrow i{display:block;width:calc(var(--u)*74);height:1px;background:linear-gradient(90deg,var(--gold),rgba(231,189,106,.2));transform-origin:left;transition:transform 1.4s .5s var(--ease-silk)}
.intro:not(.in) .eyebrow i{transform:scaleX(0)}
.headline{margin:calc(var(--u)*16) 0 0;font-family:var(--serif);font-weight:500;font-size:calc(var(--u)*49.5);line-height:1.01;letter-spacing:-.012em;color:var(--ink);font-variation-settings:'opsz' 72}
.headline em{font-style:italic;font-weight:500;background:linear-gradient(100deg,#c9923f 0%,#f2cf87 30%,#fff1cc 45%,#e9bb68 60%,#c48f3f 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gold-flow 6s ease-in-out infinite alternate}
@keyframes gold-flow{from{background-position:0 0}to{background-position:100% 0}}
.ln{position:relative;display:table;padding-right:.06em}
.ln>span{display:inline-block;clip-path:inset(-20% 100% -25% 0);filter:blur(5px);transition:clip-path 1.25s var(--ease-silk),filter 1.25s var(--ease-silk)}
.ln::after{content:'';position:absolute;top:8%;bottom:4%;left:0;width:2px;background:linear-gradient(180deg,transparent,#ffe7b3,transparent);box-shadow:0 0 14px 3px rgba(240,190,100,.7);opacity:0;transition:left 1.25s var(--ease-silk),opacity .3s}
.intro.in .ln>span{clip-path:inset(-20% -2% -25% 0);filter:blur(0)}
.intro.in .ln::after{left:100%;animation:pen 1.25s var(--ease-silk) both}
@keyframes pen{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
.ln:nth-child(2)>span,.ln:nth-child(2)::after{transition-delay:.18s;animation-delay:.18s}
.ln:nth-child(3)>span,.ln:nth-child(3)::after{transition-delay:.36s;animation-delay:.36s}
.ln:nth-child(4)>span,.ln:nth-child(4)::after{transition-delay:.54s;animation-delay:.54s}
.lead{margin:calc(var(--u)*20) 0 0;font-size:max(14px,calc(var(--u)*15));line-height:1.43;color:#e8e4dc;max-width:calc(var(--u)*370)}
.lead .w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(4px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);transition-delay:calc(.7s + var(--i) * 28ms)}
.intro.in .lead .w{opacity:1;transform:none;filter:none}

.gold-btn{position:relative;display:inline-flex;align-items:center;gap:calc(var(--u)*14);margin-top:calc(var(--u)*30);height:calc(var(--u)*42);min-height:44px;padding:0 calc(var(--u)*27);border-radius:calc(var(--u)*15);color:#1d1408;font-weight:600;font-size:max(14px,calc(var(--u)*15));
  background:linear-gradient(115deg,#c99a4c 0%,#efce88 35%,#f8e2ae 50%,#e5bb6c 65%,#bf8b3e 100%);background-size:220% 100%;background-position:30% 0;box-shadow:0 10px 30px -12px rgba(231,189,106,.55),inset 0 1px 0 rgba(255,255,255,.45);transition:background-position 1s var(--ease-out),box-shadow .5s,opacity 1s 1.2s,transform 1s 1.2s var(--ease-out);will-change:transform}
.intro:not(.in) .gold-btn{opacity:0;transform:translateY(14px)}
.gold-btn:hover{background-position:100% 0;box-shadow:0 18px 40px -14px rgba(231,189,106,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.gb-arrow{position:relative;width:calc(var(--u)*20);height:calc(var(--u)*20);min-width:18px;min-height:18px;overflow:hidden}
.gb-arrow svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease-out)}
.gb-arrow svg+svg{transform:translateX(-120%)}
.gold-btn:hover .gb-arrow svg:first-child{transform:translateX(120%)}
.gold-btn:hover .gb-arrow svg+svg{transform:none}

/* estadísticas */
.stats{position:relative;z-index:2;display:grid;grid-template-columns:303fr 309fr 299fr;align-items:center;margin:calc(var(--u)*87) 0 0 calc(var(--u)*62);width:calc(var(--u)*911);height:calc(var(--u)*123);border-radius:calc(var(--u)*18);
  background:linear-gradient(180deg,rgba(24,25,30,.86),rgba(14,15,18,.92));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.stats::before,.stats::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.stats::before{background:linear-gradient(20deg,rgba(231,189,106,.75) 0%,rgba(231,189,106,.15) 22%,rgba(255,255,255,.12) 40%,rgba(255,255,255,.1) 100%)}
.stats::after{padding:1.2px;background:conic-gradient(from var(--ang),transparent 0 72%,rgba(255,226,160,.0) 76%,rgba(255,230,170,.95) 82%,transparent 88% 100%);animation:orbit 10s linear infinite;filter:drop-shadow(0 0 4px rgba(231,189,106,.8))}
@keyframes orbit{to{--ang:360deg}}
.stat{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*24);height:100%}
.stat+.stat::before{content:'';position:absolute;left:0;top:26%;bottom:26%;width:1px;background:rgba(255,255,255,.13)}
.stat svg{width:calc(var(--u)*46);height:calc(var(--u)*40);min-width:34px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.stat strong{display:flex;align-items:baseline;gap:.22em;font-family:var(--serif);font-weight:500;font-size:max(20px,calc(var(--u)*25));line-height:1.1;letter-spacing:-.01em;color:#f5f1ea;font-variation-settings:'opsz' 48}
.stat strong.serif-sm{font-size:max(17px,calc(var(--u)*20));letter-spacing:-.02em}
.stat small{display:block;margin-top:calc(var(--u)*4);font-size:max(12px,calc(var(--u)*13.4));color:#dcd6cc;letter-spacing:.01em}
.odo{display:inline-flex;overflow:hidden;height:1.12em;line-height:1.12}
.odo .d{display:flex;flex-direction:column;transition:transform 2.2s var(--ease-silk)}
.odo .d span{height:1.12em}
.stats:not(.in) .stat{opacity:0;transform:translateY(16px)}
.stat{transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.stat:nth-child(2){transition-delay:.12s}.stat:nth-child(3){transition-delay:.24s}

.foot{padding:26px 16px 34px;text-align:center;font-size:12px;color:rgba(255,255,255,.35);letter-spacing:.04em}
.foot p{margin:0}

/* ================= MÓVIL ================= */
@media (max-width:820px){
  :root{--u:1px}
  .nav-in{width:100%;height:64px;padding:0 16px}
  .nav.is-solid .nav-in{height:58px}
  .brand img,.nav.is-solid .brand img{width:150px}
  .wa-btn{height:38px;width:38px;padding:0;border-radius:10px;margin-left:auto}
  .wa-btn svg{width:19px;height:19px}
  .wa-btn span{display:none}
  .burger{display:grid;place-content:center;gap:7px;width:42px;height:42px;margin-left:8px;position:relative;z-index:3}
  .burger i{display:block;width:22px;height:1.5px;background:var(--gold);border-radius:2px;transition:transform .55s var(--ease-out)}
  .burger[aria-expanded="true"] i:first-child{transform:translateY(4.25px) rotate(45deg)}
  .burger[aria-expanded="true"] i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
  .menu{position:fixed;inset:0;margin:0;z-index:2;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:90px 30px 40px;background:radial-gradient(circle at 50% 35%,rgba(70,48,18,.55),transparent 60%),#0b0b0e;
    clip-path:circle(0% at calc(100% - 37px) 32px);transition:clip-path .9s var(--ease-silk);overflow-y:auto}
  .menu.open{clip-path:circle(150% at calc(100% - 37px) 32px)}
  .menu-ink{display:none}
  .menu>a,.menu>.drop{width:100%;opacity:0;transform:translateY(18px);transition:opacity .6s,transform .8s var(--ease-out)}
  .menu.open>a,.menu.open>.drop{opacity:1;transform:none}
  .menu.open>*:nth-child(2){transition-delay:.06s}.menu.open>*:nth-child(3){transition-delay:.12s}.menu.open>*:nth-child(4){transition-delay:.18s}.menu.open>*:nth-child(5){transition-delay:.24s}
  .menu-link{font-family:var(--serif);font-size:30px;padding:8px 0;gap:10px}
  .chev{width:14px;height:9px}
  .drop:hover .drop-panel{clip-path:inset(0 0 100% 0);opacity:0}
  .drop-panel{position:static;min-width:0;max-height:0;padding:0 0 0 4px;background:none;border:0;box-shadow:none;backdrop-filter:none;clip-path:none!important;opacity:1!important;overflow:hidden;transition:max-height .6s var(--ease-out)}
  .drop.open .drop-panel{max-height:200px;pointer-events:auto}
  .drop-panel a{font-size:15.5px;padding:9px 0}
  .drop::after{display:none}

  .hero{height:146vw;max-height:none}
  .hero-art{width:205vw;left:calc(50vw - 205vw * .5023);transform:none}
  .tagline{top:121vw;width:100%;gap:10px}
  .tl-line{width:24px}
  .tl-words{font-size:9.6px;letter-spacing:.38em;gap:10px}
  .scroll-cue{top:133vw;width:32px;height:32px}
  .hero-cursor{display:none}

  .showcase{width:100%;padding:10px 0 50px}
  .services{width:auto;margin:0 12px;grid-template-columns:repeat(5,1fr)}
  .svc{gap:9px;padding:4px 2px 18px}
  .svc+.svc::before{height:52px}
  .svc svg{width:30px;height:30px}
  .svc span{font-size:11.4px;text-align:center;line-height:1.25}
  .svc-glow{top:auto;bottom:0}
  .intro{margin:44px 22px 0;width:auto}
  .eyebrow{font-size:11px}
  .eyebrow i{width:60px}
  .headline{margin-top:14px;font-size:clamp(38px,11.4vw,52px)}
  .lead{font-size:15px;max-width:none}
  .gold-btn{height:48px;padding:0 26px;border-radius:15px;font-size:15px}
  .house{position:relative;left:auto;top:auto;width:118%;margin:-30px 0 0 -12%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 82%,transparent 100%)}
  .showcase{display:flex;flex-direction:column}
  .services{order:1}.intro{order:2}.house{order:3}.stats{order:4}
  .stats{grid-template-columns:1fr;height:auto;width:auto;margin:-70px 16px 0;padding:6px 0;border-radius:18px}
  .stat{justify-content:flex-start;gap:20px;padding:20px 24px}
  .stat+.stat::before{left:24px;right:24px;top:0;bottom:auto;width:auto;height:1px}
  .stat svg{width:42px;height:36px}
}
@media (max-width:380px){
  .svc span{font-size:10.4px}
  .tl-words{letter-spacing:.3em;font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .arc-gleam,.brand-shine{display:none}
}