:root{
  --g:#2e8b3a; --g2:#3fa546; --lime:#8fd16a; --forest:#0f2e1a; --forest2:#163d24;
  --cream:#f6f8f2; --ink:#1d2a20; --mut:#5f6b62; --line:#e2e8dd;
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Jost,system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-weight:300;letter-spacing:.01em;line-height:1.1}
h2{font-size:clamp(2.1rem,5vw,3.6rem)}
em{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:600;color:var(--g)}
.eyebrow{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--g);font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.eyebrow.light{color:var(--lime)}
.muted{color:var(--mut);margin-top:16px}
.muted-l{color:#bcd0c0;margin-top:16px}

.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--g),var(--lime));transform-origin:0 50%;transform:scaleX(0);z-index:200}

/* loader */
.loader{position:fixed;inset:0;z-index:300;background:var(--cream);display:grid;place-items:center;transition:opacity .7s .2s,visibility 0s 1s}
.loaded .loader{opacity:0;visibility:hidden}
.sprout{position:relative;width:120px;height:120px}
.sprout img{position:absolute;inset:12px;width:96px;animation:grow 1.1s var(--ease) both}
.sprout svg{position:absolute;inset:0}
.sprout circle{fill:none;stroke:var(--g);stroke-width:2;stroke-dasharray:352;stroke-dashoffset:352;animation:ring 1.2s var(--ease) .2s forwards;transform-origin:center;transform:rotate(-90deg)}
@keyframes grow{from{transform:scale(.2) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
@keyframes ring{to{stroke-dashoffset:0}}

.ribbon{background:var(--forest);color:#a9c2ae;text-align:center;font-size:.75rem;padding:7px 12px;letter-spacing:.05em}

/* nav */
nav{position:sticky;top:0;z-index:100;background:rgba(246,248,242,.9);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
nav.scrolled{border-color:var(--line);box-shadow:0 8px 30px rgba(15,46,26,.08)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;transition:height .3s}
nav.scrolled .wrap{height:64px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;transition:transform .8s var(--ease)}
.brand:hover img{transform:rotate(360deg)}
.wm{display:flex;flex-direction:column;align-items:center;line-height:1}
.wm b{font-weight:300;letter-spacing:.18em;font-size:1.15rem;padding:5px 0;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.wm small{font-family:"Cormorant Garamond",serif;font-size:.78rem;letter-spacing:.14em;margin-top:5px;color:var(--mut)}
.links{display:flex;gap:30px;font-size:.95rem}
.links a{position:relative;color:#33443a}
.links a::after{content:"";position:absolute;left:50%;bottom:-6px;width:6px;height:6px;border-radius:50% 0;background:var(--g);transform:translateX(-50%) scale(0) rotate(45deg);transition:transform .35s var(--ease)}
.links a:hover::after{transform:translateX(-50%) scale(1) rotate(45deg)}
@media(max-width:900px){.links{display:none}}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:500;font-size:.98rem;letter-spacing:.02em;border:0;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn-g{background:var(--g);color:#fff;box-shadow:0 10px 24px rgba(46,139,58,.25)}
.btn-g:hover{background:var(--forest2)}
.btn-l{background:var(--lime);color:var(--forest)}
.btn-l:hover{background:#fff}
.btn-o{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.btn-o:hover{background:rgba(255,255,255,.1)}
.arr{transition:transform .3s}
.btn:hover .arr{transform:translateX(5px)}
.nav-cta{padding:11px 20px;font-size:.88rem}
@media(max-width:480px){.wm small{display:none}.wm b{font-size:.95rem;letter-spacing:.12em}.nav-cta{padding:9px 14px;font-size:.8rem}}
.full{width:100%;justify-content:center}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .6s ease-out;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}

/* hero */
.hero{position:relative;min-height:calc(100svh - 110px);background:linear-gradient(180deg,#0f2e1a 0%,#1d5530 70%,#2c7a3a 100%);color:#fff;overflow:hidden;display:flex;align-items:center}
.sky{position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 10%,rgba(143,209,106,.28),transparent 70%),radial-gradient(40% 40% at 10% 30%,rgba(255,255,255,.06),transparent)}
.hero-in{position:relative;z-index:3;padding-top:70px;padding-bottom:200px;width:100%}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.9rem;letter-spacing:.06em;color:#d7ead8;margin-bottom:24px}
.pin{width:9px;height:9px;border-radius:50% 0;background:var(--lime);transform:rotate(45deg);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(143,209,106,0)}0%{box-shadow:0 0 0 0 rgba(143,209,106,.6)}}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.4rem);font-weight:300;max-width:900px}
.hero h1 em{color:var(--lime);font-size:1.08em}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line>span{display:inline-block;transform:translateY(110%);transition:transform 1.2s var(--ease)}
.loaded .line>span{transform:none}
.loaded .line:nth-child(1)>span{transition-delay:.9s}
.loaded .line:nth-child(2)>span{transition-delay:1.05s}
.lead{max-width:520px;color:#cfe0d1;font-size:1.12rem;margin:26px 0 34px;font-weight:300}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.reveal-h{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.loaded .reveal-h{opacity:1;transform:none}
.loaded .kicker{transition-delay:.7s}.loaded .lead{transition-delay:1.3s}.loaded .ctas{transition-delay:1.45s}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:42%;z-index:2}
.hills .h1{fill:#3f8f3d;transform:translateY(var(--p1,0))}
.hills .h2{fill:#4fa645;transform:translateY(var(--p2,0))}
.hills .h3{fill:var(--cream);transform:translateY(var(--p3,0))}
.grass{position:absolute;left:0;right:0;bottom:22px;height:40px;z-index:2;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(63,143,61,.0) 6px 7px);pointer-events:none}
.leaves{position:absolute;inset:0;z-index:1;pointer-events:none}
.leaf{position:absolute;top:-40px;width:var(--s);height:var(--s);opacity:.75;animation:fall var(--d) linear var(--dl) infinite}
.leaf svg{width:100%;height:100%;fill:var(--c);animation:spin calc(var(--d)/3) ease-in-out infinite alternate}
@keyframes fall{to{transform:translate(var(--x),110vh)}}
@keyframes spin{from{transform:rotate(-40deg)}to{transform:rotate(60deg)}}

/* marquee */
.marquee{overflow:hidden;background:var(--cream);border-bottom:1px solid var(--line)}
.track{display:flex;gap:30px;align-items:center;width:max-content;padding:16px 0 26px;animation:mq 34s linear infinite;font-size:clamp(1.3rem,2.6vw,2rem);font-weight:300;color:#3a4b3f;letter-spacing:.04em}
.track i{font-style:normal;color:var(--g)}
@keyframes mq{to{transform:translateX(-50%)}}

.sec{padding:110px 0;position:relative}
.head{margin-bottom:52px;max-width:760px}
.head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;max-width:none}

/* servicios */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.card::before{content:"";position:absolute;right:-60px;top:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(143,209,106,.35),transparent 70%);transform:scale(0);transition:transform .7s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(15,46,26,.12);border-color:transparent}
.card:hover::before{transform:scale(1.4)}
.card svg{width:52px;height:52px;fill:none;stroke:var(--g);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px;stroke-dasharray:200;stroke-dashoffset:0}
.card.in svg{animation:draw 1.6s var(--ease) calc(var(--i,0) * 120ms) both}
.card:hover svg{animation:draw 1.2s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
.card h3{font-size:1.45rem;font-weight:400;margin-bottom:8px}
.card p{color:var(--mut);font-size:.98rem}
@media(max-width:900px){.svc{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc{grid-template-columns:1fr}}

/* antes/después */
.ba-sec{background:var(--forest);color:#fff;overflow:hidden}
.ba-sec h2 em{color:var(--lime)}
.ba-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.stat{margin-top:34px;padding:22px 24px;border:1px solid rgba(255,255,255,.14);border-radius:18px;display:flex;gap:18px;align-items:center}
.stat b{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:2.8rem;color:var(--lime);line-height:1;font-weight:600;white-space:nowrap}
.stat span{color:#c4d6c7;font-size:.95rem}
.ba{position:relative;aspect-ratio:10/7;border-radius:24px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.35);user-select:none}
.ba-after,.ba-before{position:absolute;inset:0}
.ba svg{width:100%;height:100%;display:block}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;z-index:4;pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;color:var(--forest);display:grid;place-items:center;font-size:1.2rem;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.ba-tag{position:absolute;top:16px;background:rgba(15,46,26,.75);color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px;backdrop-filter:blur(4px)}
.ba-tag.l{left:16px}.ba-tag.r{right:16px}
.spray path{stroke-dasharray:4 6;animation:spray 1s linear infinite}
@keyframes spray{to{stroke-dashoffset:-20}}
.note-ph{margin-top:28px;font-size:.8rem;color:#86a08b}
.note-ph.dark{color:var(--mut)}
@media(max-width:900px){.ba-grid{grid-template-columns:1fr;gap:40px}}

/* proyectos */
.proj{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:250px;gap:16px}
.p{position:relative;border-radius:22px;overflow:hidden;color:#fff;display:flex;align-items:flex-end;isolation:isolate}
.p.big{grid-column:span 2;grid-row:span 2}
.p-bg{position:absolute;inset:0;z-index:-1;transition:transform 1s var(--ease)}
.p[style*="--g:1"] .p-bg{background:radial-gradient(circle at 30% 20%,#8fd16a,transparent 50%),linear-gradient(160deg,#3fa546,#14532d)}
.p[style*="--g:2"] .p-bg{background:radial-gradient(circle at 70% 30%,#a8d8ea,transparent 45%),linear-gradient(160deg,#4f9a6a,#173f2a)}
.p[style*="--g:3"] .p-bg{background:radial-gradient(circle at 20% 70%,#c6e3a0,transparent 45%),linear-gradient(160deg,#5c8f3a,#1d3b1f)}
.p[style*="--g:4"] .p-bg{background:radial-gradient(circle at 80% 80%,#e6d2a2,transparent 45%),linear-gradient(160deg,#6aa553,#244a2b)}
.p[style*="--g:5"] .p-bg{background:radial-gradient(circle at 50% 10%,#9fe0b8,transparent 45%),linear-gradient(160deg,#2e8b3a,#0f2e1a)}
.p::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,30,16,.7),transparent 60%);z-index:-1}
.p:hover .p-bg{transform:scale(1.08)}
.p-in{padding:24px;width:100%}
.p-in small{letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;color:#d7ead8}
.p-in h3{font-size:1.6rem;font-weight:400;margin:4px 0 8px}
.p.big .p-in h3{font-size:2.4rem}
.p-in span{font-size:.88rem;opacity:0;transform:translateY(8px);display:inline-block;transition:.4s var(--ease)}
.p:hover .p-in span{opacity:1;transform:none}
@media(max-width:900px){.proj{grid-template-columns:1fr 1fr;grid-auto-rows:200px}}
@media(max-width:560px){.proj{grid-template-columns:1fr}.p.big{grid-column:auto;grid-row:span 1}.p-in span{opacity:1;transform:none}}

/* proceso */
.proc{background:linear-gradient(180deg,var(--forest2),var(--forest));color:#fff;overflow:hidden}
.proc h2 em{color:var(--lime)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:1}
.step{padding:28px 24px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:background .4s,transform .4s var(--ease)}
.step:hover{background:rgba(143,209,106,.1);transform:translateY(-6px)}
.step span{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:2.4rem;color:var(--lime);line-height:1}
.step h3{font-size:1.35rem;font-weight:400;margin:14px 0 8px}
.step p{color:#bcd0c0;font-size:.95rem}
.vine{display:block;width:100%;height:60px;margin-top:30px}
.vine path{fill:none;stroke:var(--lime);stroke-width:2;stroke-dasharray:1400;stroke-dashoffset:calc(1400 - 1400 * var(--v,0));opacity:.6}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* presupuesto */
.quote{background:var(--cream)}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.contact{display:grid;gap:12px;margin-top:30px}
.ci{display:flex;gap:14px;align-items:center;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;transition:transform .35s var(--ease),border-color .3s}
.ci:hover{transform:translateX(6px);border-color:var(--g)}
.ci i{font-style:normal;width:42px;height:42px;border-radius:12px;background:#eaf4e4;display:grid;place-items:center;flex:none}
.ci small{display:block;color:var(--mut);font-size:.76rem}
.form{background:#fff;border-radius:26px;padding:34px;box-shadow:0 30px 70px rgba(15,46,26,.12);border:1px solid var(--line)}
label{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:20px 0 9px;font-weight:500}
label small{text-transform:none;letter-spacing:0}
.form label:first-child{margin-top:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:.92rem;transition:.25s}
.opt:hover{border-color:var(--g)}
.opt.on{background:var(--g);border-color:var(--g);color:#fff}
input[type=text],input:not([type]),textarea{width:100%;background:var(--cream);border:1px solid transparent;border-radius:14px;padding:13px 15px;font-family:inherit;font-size:.98rem;transition:.2s}
input:not([type]):focus{outline:none;border-color:var(--g);background:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.range{display:flex;align-items:center;gap:14px}
.range input{flex:1;accent-color:var(--g)}
.range output{min-width:84px;text-align:right;font-weight:500;color:var(--g)}
.form .btn{margin-top:26px}
.note{text-align:center;font-size:.8rem;color:var(--mut);margin-top:12px}
@media(max-width:900px){.q-grid{grid-template-columns:1fr;gap:40px}}

footer{background:var(--forest);color:#bcd0c0;padding:56px 0 28px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand{color:#fff}
.foot-brand .wm small{color:#a9c2ae}
.fcol{display:flex;gap:24px;flex-wrap:wrap}
.fcol a:hover{color:var(--lime)}
.fine{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem;padding-top:22px}
.fine b{color:#fff;font-weight:500}

.wa{position:fixed;right:18px;bottom:18px;z-index:90;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);transform:scale(0);transition:transform .5s var(--ease)}
.wa.show{transform:scale(1)}
.wa svg{width:30px;height:30px;fill:#fff}

.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 100ms)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal-h,.line>span{opacity:1!important;transform:none!important}
  .loader{display:none}
}