@font-face{font-family:Geist;src:url(/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#0E1A12;--ink2:#1D2C22;--forest:#1F7A3A;--lime:#C8F25A;--mint:#DDF3E3;--mist:#EEF1EC;--paper:#F7F9F5;--sage:#9AA89E;--amber:#FFE3A3;--rose:#FFD5CF;--brick:#A5281B;--muted:#4A564E;--ease:cubic-bezier(.2,0,0,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:Geist,Inter,sans-serif;color:var(--ink);background:var(--mist);font-variant-numeric:tabular-nums;font-size:17px;line-height:1.5}
a{color:inherit}
.wrap{max-width:1312px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-999px;top:8px}.skip:focus{left:16px;z-index:50;background:#fff;padding:8px 12px;border-radius:10px}
:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
button{font:inherit;cursor:pointer;border:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 24px;border-radius:20px;font-weight:700;font-size:15px;text-decoration:none;transition:scale .15s ease-out,background-color .15s ease-out}
.btn:not(:disabled):active{scale:.96}
.btn.ink{background:var(--ink);color:var(--lime)}.btn.wa{background:var(--forest);color:#fff}.btn.lime{background:var(--lime);color:var(--ink)}.btn.white{background:#fff;color:var(--ink)}
@media(hover:hover){.btn.ink:hover{background:var(--ink2)}.btn.wa:hover{background:#18672f}.btn.white:hover{background:var(--paper)}}
.btn svg{width:18px;height:18px}
/* nav */
header.nav{position:relative;z-index:5}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.nav img{height:34px;display:block}
.nav ul{display:flex;gap:30px;list-style:none;align-items:center;font-weight:600;font-size:15px}
.nav ul a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .2s var(--ease)}
@media(hover:hover){.nav ul a:hover{background-size:100% 2px}}
/* hero */
.hero{position:relative;overflow:hidden;padding:12px 0 56px}
.bg{position:absolute;inset:0;pointer-events:none}
.bg-dark{background:var(--ink);clip-path:inset(0 0 0 100%)}
.bg-mint{background:var(--mint);clip-path:circle(0% at 30% 60%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center}
.stage{position:relative;height:600px}
.scene{position:absolute;inset:0;visibility:hidden}.scene[data-scene="0"]{visibility:visible}.scene[data-scene="0"] .art{opacity:0}.ready .scene[data-scene="0"] .art{opacity:1}
.scene h1,.scene .h1{font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.035em;font-weight:800;max-width:15ch}
.scene .lede{font-size:19px;max-width:44ch;margin-top:20px;color:var(--muted)}
.scene.dark h1,.scene.dark .h1{color:#fff}.scene.dark .lede{color:#C9D1CB}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}.w>span{display:inline-block}
.art{position:absolute;left:0;right:0;bottom:0;height:330px}
.pc{position:absolute;width:228px;background:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 18px 40px rgba(14,26,18,.18);font-size:13px;color:var(--muted)}
.pc b{display:block;font-size:22px;color:var(--ink);letter-spacing:-.02em;margin:6px 0 2px}
.pc .p{font-weight:800;color:var(--ink);font-size:15px}
.tag{display:inline-block;padding:4px 9px;border-radius:9px;font-size:12px;font-weight:700;background:var(--mint);color:var(--forest)}
.tag.dem{background:var(--amber);color:#6b4a00}.tag.sold{background:var(--rose);color:var(--brick)}.tag.fix{background:var(--lime);color:var(--ink)}
/* A map */
.map{position:absolute;left:0;bottom:6px;width:640px;height:270px;transform:perspective(1100px) rotateX(32deg) rotateZ(-4deg);transform-origin:50% 100%}
.map .road{position:absolute;background:#fff;opacity:.9;border-radius:4px}
.blk{position:absolute;border-radius:7px;background:#fff}
.blk i{position:absolute;inset:0;border-radius:7px;background:var(--lime);opacity:0}
.blk.s{background:var(--rose)}
.blklabel{position:absolute;font-weight:800;font-size:13px;color:var(--forest)}
/* B whatsapp */
.bubble{position:absolute;left:0;top:18px;width:300px;background:var(--mint);color:var(--ink);border-radius:20px 20px 20px 6px;padding:16px 18px;font-family:"Geist Mono",monospace;font-size:13.5px;line-height:1.75}
.bubble .who{font-family:Geist;font-weight:700;color:var(--forest);font-size:13px;margin-bottom:4px}
.bubble .ln{display:block;white-space:nowrap}.bubble .ch{opacity:0}
.bubble .time{font-family:Geist;font-size:11px;color:#5F6B63;text-align:right}
.arrow{position:absolute;left:318px;top:120px;width:70px;height:24px;color:var(--lime)}
/* C */
.panel{position:absolute;left:0;right:0;bottom:0;height:330px;border-radius:28px;background:var(--forest);overflow:hidden}
.panel .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.6px);background-size:28px 28px}
.search{position:absolute;left:24px;bottom:22px;background:var(--ink);color:#fff;border-radius:18px;padding:14px 18px;font-weight:600;display:flex;gap:10px;align-items:center;font-size:15px}
.search .q{color:var(--lime)}.search .caret{display:inline-block;width:2px;height:18px;background:var(--lime)}
.search .res{color:#C9D1CB;font-weight:500}
/* form */
.form{position:relative;z-index:3;background:#fff;border-radius:32px;padding:32px;box-shadow:0 30px 70px rgba(14,26,18,.18)}
.form h2{font-size:26px;letter-spacing:-.02em;font-weight:800}
.form p.sub{color:var(--muted);font-size:15px;margin:6px 0 20px}
.form label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.form input{display:block;width:100%;height:54px;border-radius:16px;border:1.5px solid #D5DBD6;background:var(--paper);padding:0 16px;font:inherit;font-size:16px;margin-bottom:16px;color:var(--ink);transition:border-color .15s ease-out,background-color .15s ease-out}
.form input:focus{outline:none;border-color:var(--forest);background:#fff}
.form .row{display:flex;justify-content:space-between;font-size:14px;margin:-4px 0 18px}.form .row a{color:var(--forest);font-weight:600}
.form .btn{width:100%}
.or{display:flex;align-items:center;gap:12px;color:#5F6B63;font-size:13px;margin:18px 0}.or:before,.or:after{content:"";flex:1;height:1.5px;background:var(--mist)}
.form .note{font-size:13px;color:#5F6B63;margin-top:12px;text-align:center}
/* indicators */
.ind{display:flex;gap:10px;margin-top:22px;position:relative;z-index:3}
.ind button{position:relative;height:36px;width:120px;background:none;text-align:left;font-size:13px;font-weight:700;color:var(--muted);padding-top:12px}
.ind button .bar{position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px;background:rgba(14,26,18,.14);overflow:hidden}
.ind button .bar i{position:absolute;inset:0;background:var(--forest);transform:scaleX(0);transform-origin:0 50%}
.ind button[aria-current=true]{color:var(--ink)}
.hero.on-dark .ind button{color:#9AA89E}.hero.on-dark .ind button[aria-current=true]{color:#fff}.hero.on-dark .ind .bar{background:rgba(255,255,255,.18)}.hero.on-dark .ind .bar i{background:var(--lime)}
.ind button,.hero .lede,.hero h1{transition:color .4s ease-out}
/* sections */
section.s{padding:150px 0}
h2.big{font-size:clamp(36px,4.4vw,60px);line-height:1;letter-spacing:-.035em;font-weight:800;max-width:16ch}
.comfort{background:var(--ink);color:#fff}
.comfort .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:72px}
.comfort .v{padding:0 28px 0 0}
.comfort .v strong{display:block;font-size:44px;letter-spacing:-.03em;color:var(--lime);line-height:1;margin-bottom:16px}
.comfort .v p{color:#C9D1CB;max-width:26ch}
.comfort .intro{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end}
.comfort .intro p{font-size:20px;color:#C9D1CB;max-width:46ch}
.help .head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:64px}
.help .head p{font-size:19px;color:var(--muted);max-width:44ch}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tile{background:#fff;border-radius:28px;padding:30px;position:relative;overflow:hidden;min-height:220px}
.tile h3{font-size:24px;letter-spacing:-.02em;line-height:1.1;margin-bottom:10px}
.tile p{color:var(--muted);max-width:40ch}
.t1{grid-column:span 7;background:var(--lime);min-height:340px}.t1 p{color:var(--ink)}
.t2{grid-column:span 5;background:var(--ink);color:#fff}.t2 p{color:#C9D1CB}
.t3,.t4,.t5{grid-column:span 4}
.t6{grid-column:span 5;background:var(--mint)}.t7{grid-column:span 7;background:var(--paper)}
.t3{background:var(--paper)}.t5{background:var(--amber)}.t5 p{color:#4d3b00}
.t1 .demo{position:absolute;right:28px;bottom:28px;left:28px;display:flex;gap:12px;flex-wrap:wrap}
.t1 .demo .q{background:var(--ink);color:#fff;border-radius:16px;padding:12px 16px;font-weight:600}
.t1 .demo .r{background:#fff;border-radius:16px;padding:12px 16px;font-weight:700}
.t2 pre{margin-top:18px;font-family:"Geist Mono",monospace;font-size:13px;background:var(--ink2);color:var(--mint);padding:14px;border-radius:16px;line-height:1.7;white-space:pre-wrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.chips span{background:#fff;border-radius:12px;padding:8px 12px;font-weight:600;font-size:14px}.t3 .chips span.on{background:var(--ink);color:var(--lime)}
.plans .head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.plans .head p{max-width:40ch;color:var(--muted);font-size:19px}
.pgrid{display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr;gap:16px;align-items:stretch}
.plan{background:#fff;border-radius:28px;padding:30px;display:flex;flex-direction:column}
.plan h3{font-size:20px}.plan .price{font-size:40px;font-weight:800;letter-spacing:-.03em;margin-top:22px;line-height:1}
.plan .ph{font-size:13px;font-weight:700;color:var(--brick);margin-top:8px}
.plan ul{list-style:none;margin:22px 0 28px;color:var(--muted);font-size:15px;display:grid;gap:8px;flex:1}
.plan li:before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--forest);margin-right:10px;vertical-align:middle}
.plan.best{background:var(--ink);color:#fff}.plan.best .price{color:var(--lime);font-size:52px}.plan.best ul{color:#C9D1CB}.plan.best li:before{background:var(--lime)}.plan.best .ph{color:var(--rose)}
.plan .badge{align-self:flex-start;background:var(--lime);color:var(--ink);font-weight:800;font-size:13px;padding:6px 10px;border-radius:10px;margin-bottom:14px}
.contact{margin-top:16px;background:var(--forest);color:#fff;border-radius:28px;padding:36px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.contact h3{font-size:30px;letter-spacing:-.02em}.contact p{color:var(--mint);margin-top:6px}
footer{background:var(--ink);color:#C9D1CB;padding:96px 0 40px;overflow:hidden}
footer .big{width:100%;max-width:1000px;display:block;margin-bottom:56px}
footer .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:15px}
footer a{text-decoration:none}@media(hover:hover){footer a:hover{color:var(--lime)}}
.rv{will-change:auto}
@media(max-width:1000px){
 .hero-grid{grid-template-columns:1fr;gap:28px}.stage{height:620px}
 .form{max-width:520px}
}
@media(max-width:640px){
 .wrap{padding:0 18px}.nav ul li.l{display:none}.nav .wrap{height:68px}.nav img{height:26px}
 .stage{height:470px;overflow:hidden}.scene h1,.scene .h1{font-size:36px}.scene .lede{font-size:16px;margin-top:12px}
 .art{height:290px;transform:scale(.52);transform-origin:0 100%;width:192%}
 
 .ind button{width:auto;flex:1}
 .form{padding:24px;border-radius:28px}
 section.s{padding:96px 0}
 .comfort .grid{grid-template-columns:1fr 1fr;gap:40px 20px;margin-top:48px}.comfort .v strong{font-size:32px}
 .comfort .intro,.help .head{grid-template-columns:1fr;gap:20px}
 .bento{grid-template-columns:1fr}.tile{grid-column:auto!important;min-height:0}.t1{min-height:300px}
 .pgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* production additions */
[hidden]{display:none!important}
.nav .btn.white{height:44px}
.plans{padding-top:0!important}
.plan .price.cfp{font-size:28px;letter-spacing:-.02em}.plan.best .price.cfp{font-size:32px}
.form .forgot{font-size:14px;color:var(--muted);margin:-4px 0 18px}
.form .err{color:var(--brick);font-size:14px;font-weight:600;margin-top:12px;min-height:1px}
.form .err:empty{display:none}
.form .hint{font-size:13px;color:var(--muted);margin:-10px 0 16px}
.form .badge{display:inline-block;margin-bottom:12px;padding:4px 10px;border-radius:999px;background:var(--rose);color:var(--brick);font-size:12px;font-weight:700}
.form .link{background:none;color:var(--forest);font-weight:600;font-size:14px;text-decoration:underline;margin-top:14px;padding:12px 0;min-height:44px}
.form .btn[aria-busy=true]{opacity:.7}
.ind .pause{width:auto;flex:0 0 auto;padding:12px 4px 0;text-decoration:underline;text-underline-offset:3px}
.pc.p1{left:330px;top:-6px}.pc.p2{left:520px;top:120px}.pc.p3{left:60px;top:150px}
.pc.b1{left:410px;top:-10px}.pc.b2{left:450px;top:104px}.pc.b3{left:420px;top:218px}
.pc.c1{left:5%;top:24px}.pc.c2{left:32%;top:60px}.pc.c3{left:60%;top:18px}.pc.c4{left:66%;top:150px}
.map .ground{position:absolute;inset:0;background:#cfe9d6;border-radius:18px}
@media(max-width:640px){.ind .pause{padding-top:12px}}
.nav img{width:auto}footer .big{height:auto}
.bg-dark{visibility:hidden}
.comfort .grid>*,.pgrid>*,.bento>*{min-width:0}
@media(max-width:1000px) and (min-width:641px){
 .comfort .grid{grid-template-columns:1fr 1fr;gap:48px 24px}
 .pgrid{grid-template-columns:1fr 1fr}
 .bento{grid-template-columns:1fr 1fr}.tile{grid-column:auto!important}.t1,.t7{grid-column:1/-1!important}
 .help .head,.comfort .intro{grid-template-columns:1fr;gap:20px}
}
@media(max-width:640px){.comfort .v{padding:0}.comfort .v strong{font-size:clamp(24px,7.4vw,32px)}}
/* fit-to-first-screen (desktop/laptop) */
:root{--navh:84px}
@media(min-width:1001px){
 .nav .wrap{height:var(--navh)}
 .hero{height:calc(100svh - var(--navh));min-height:440px;padding:clamp(4px,1.6svh,14px) 0 clamp(8px,3svh,36px);display:flex}
 .hero-grid{width:100%;min-height:0}
 .hero-grid>div:first-child{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:0}
 .stage{height:auto;flex:1 1 auto;max-height:600px;min-height:0}
 .scene h1,.scene .h1{font-size:clamp(28px,min(4.4vw,7.2svh),64px)}
 .scene .lede{font-size:clamp(14px,2.2svh,19px);margin-top:clamp(6px,2svh,20px)}
 .art{--kh:.88;--kw:1;--k:min(var(--kh),var(--kw));width:calc(100% / var(--k));transform:scale(var(--k));transform-origin:0 100%}
 .ind{margin-top:clamp(6px,1.8svh,22px)}
 .form{max-height:100%}
}
@media(min-width:1001px) and (max-width:1300px){.art{--kw:.8}}
@media(min-width:1001px) and (max-width:1120px){.art{--kw:.68}}
@media(min-width:1001px) and (max-height:1000px){.art{--kh:.9}}
@media(min-width:1001px) and (max-height:800px){
 :root{--navh:72px}.art{--kh:.82}
 .form{padding:24px 28px;border-radius:28px}.form h2{font-size:23px}.form p.sub{margin:4px 0 14px;font-size:14px}
 .form input{height:46px;margin-bottom:12px;border-radius:14px}.form label{margin-bottom:4px}
 .form .forgot{margin:-2px 0 12px;font-size:13px}.or{margin:12px 0}.form .note{margin-top:8px}
 .form .btn{height:48px}
}
@media(min-width:1001px) and (max-height:700px){
 :root{--navh:62px}.nav .btn.white{height:38px}.art{--kh:.68}
 .form{padding:18px 24px}.form h2{font-size:21px}.form p.sub{margin:2px 0 10px;font-size:13px}
 .form label{font-size:13px}.form input{height:40px;margin-bottom:9px;font-size:15px}
 .form .forgot{margin:-1px 0 9px;font-size:12.5px}.form .btn{height:42px}.or{margin:8px 0;font-size:12px}.form .note{font-size:12px;margin-top:6px}
}
@media(min-width:1001px) and (max-height:600px){
 :root{--navh:54px}.nav img{height:28px}.nav .btn.white{height:34px}.art{--kh:.54}
 .form{padding:14px 22px;border-radius:24px}.form h2{font-size:19px}.form p.sub{display:none}.form h2{margin-bottom:8px}
 .form input{height:36px;margin-bottom:7px}.form label{margin-bottom:2px}.form .forgot{margin:0 0 7px}
 .form .btn{height:38px}.or{margin:6px 0}.form .note{margin-top:4px}
 .ind button{height:28px;padding-top:10px}
}
@media(min-width:1001px) and (max-height:520px){.art{--kh:.46}.form .note{display:none}.or{margin:4px 0}}
@media(min-width:1001px) and (max-height:479px){.hero{min-height:0;padding:2px 0 6px}.ind{margin-top:4px}}
@media(min-width:1001px) and (max-height:399px){.hero{height:auto;min-height:0}.stage{flex:none;height:320px}}