:root{
  --terra:#c86e4c;
  --terra-d:#b25d3d;
  --teal:#5b8b8f;
  --teal-d:#3f6a6e;
  --must:#d69c58;
  --ink:#202020;
  --muted:#5f5a55;
  --bg:#faf6f0;
  --sand:#f2eadf;
  --line:#e7dccd;
  --white:#fff;
  --r:22px;
  --font-h:'Outfit',system-ui,sans-serif;
  --font-b:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--font-b);background:var(--bg);color:var(--ink);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
[hidden]{display:none!important}
.container{width:min(1160px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--font-h);line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(28px,4vw,42px);font-weight:600}
h3{font-size:20px;font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:999px;font-weight:700;font-size:16px;border:2px solid transparent;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s;font-family:var(--font-b)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.burger:focus-visible{outline:3px solid var(--must);outline-offset:3px}
.btn--primary{background:var(--terra);color:#fff}
.btn--primary:hover{background:var(--terra-d)}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--sm{padding:10px 20px;font-size:15px}
.btn--block{width:100%}

/* header */
.header{position:sticky;top:0;z-index:50;background:rgba(250,246,240,.9);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.header.scrolled{border-color:var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand img{height:64px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a:not(.btn){font-weight:500;font-size:15.5px;position:relative;padding:4px 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;height:3px;width:0;background:var(--must);border-radius:3px;transition:width .25s}
.nav a:not(.btn):hover::after{width:100%}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:24px;height:3px;background:var(--ink);border-radius:3px;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* hero */
.hero{padding:56px 0 88px;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--sand);border:1px solid var(--line);padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;color:var(--teal-d)}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 4px rgba(200,110,76,.2)}
.hero h1{font-size:clamp(38px,5.6vw,66px);font-weight:700;margin:22px 0 20px}
.hl{position:relative;white-space:nowrap}
.hl--terra{color:var(--terra)}
.hl--teal{color:var(--teal)}
.hero p{font-size:19px;color:var(--muted);max-width:540px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 28px}
.hero__ticks{display:flex;flex-wrap:wrap;gap:10px 24px;font-weight:500;font-size:15px}
.hero__ticks li{display:flex;align-items:center;gap:8px}
.hero__ticks li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.500 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}

/* wall painted by roller */
.wall{--loop:10s;position:relative;aspect-ratio:1/1.05;border-radius:34px;background:var(--sand);border:1px solid var(--line);overflow:hidden;box-shadow:0 30px 60px -30px rgba(32,32,32,.35)}
.wall__stripe{position:absolute;left:0;height:22%;width:0;opacity:1;animation:paint1 var(--loop) cubic-bezier(.5,.1,.3,1) infinite}
.wall__stripe.s1{top:14%;background:var(--terra)}
.wall__stripe.s2{top:39%;background:var(--must);left:auto;right:0;animation-name:paint2}
.wall__stripe.s3{top:64%;background:var(--teal);animation-name:paint3}
@keyframes paint1{0%,4%{width:0;opacity:1}24%,92%{width:100%;opacity:1}98%{width:100%;opacity:0}100%{width:0;opacity:0}}
@keyframes paint2{0%,28%{width:0;opacity:1}48%,92%{width:100%;opacity:1}98%{width:100%;opacity:0}100%{width:0;opacity:0}}
@keyframes paint3{0%,52%{width:0;opacity:1}72%,92%{width:100%;opacity:1}98%{width:100%;opacity:0}100%{width:0;opacity:0}}
.roller{position:absolute;left:0;top:0;width:34%;aspect-ratio:1/.9;opacity:0;animation:roll var(--loop) linear infinite}
.roller__head{position:absolute;left:0;top:0;width:100%;height:46%;background:var(--ink);border-radius:999px 999px 999px 999px / 50%}
.roller__arm{position:absolute;left:84%;top:23%;width:20px;height:60%;border:7px solid var(--ink);border-left:0;border-radius:0 24px 24px 0;display:none}
.roller__grip{position:absolute;left:50%;top:46%;width:12%;height:54%;background:var(--ink);border-radius:8px;transform:translateX(-50%)}
@keyframes roll{
  0%,3%{opacity:0;transform:translate(-30%,20%)}
  5%{opacity:1;transform:translate(-30%,20%)}
  24%{opacity:1;transform:translate(205%,20%)}
  28%{transform:translate(205%,33%)}
  48%{transform:translate(-30%,33%)}
  52%{transform:translate(-30%,52%)}
  72%{opacity:1;transform:translate(205%,52%)}
  76%,100%{opacity:0;transform:translate(260%,52%)}
}
.wall__tag{position:absolute;left:8%;right:8%;bottom:7%;display:flex;align-items:baseline;gap:10px;font-family:var(--font-h);font-weight:700;font-size:clamp(20px,2.6vw,30px);letter-spacing:.25em;text-transform:uppercase;color:var(--ink);opacity:0;animation:fade var(--loop) ease infinite}
.wall__tag span{font-size:.5em;letter-spacing:.04em;text-transform:lowercase;font-weight:500;color:var(--terra)}
@keyframes fade{0%,74%{opacity:0}80%,92%{opacity:1}98%,100%{opacity:0}}

/* sections */
.section{padding:96px 0}
.section--sand{background:var(--sand)}
.section--teal{background:var(--teal-d);color:#fff}
.section__head{max-width:680px;margin-bottom:48px}
.section__head p{margin-top:14px;color:var(--muted);font-size:18px}
.section__head--light p{color:rgba(255,255,255,.8)}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin-bottom:14px}
.section--teal .eyebrow,.eyebrow--light{color:var(--must)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.card::before{content:"";position:absolute;left:0;top:0;right:0;height:6px;background:var(--accent)}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(32,32,32,.35)}
.c-terra{--accent:var(--terra)}
.c-teal{--accent:var(--teal)}
.c-must{--accent:var(--must)}
.card__ico{width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--accent) 16%,white);display:grid;place-items:center;margin-bottom:20px}
.card__ico svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:16px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.steps li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:28px 24px}
.steps b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--must);color:var(--ink);font-family:var(--font-h);font-size:20px;margin-bottom:18px}
.steps h3{margin-bottom:8px}
.steps p{color:rgba(255,255,255,.82);font-size:16px}

/* split */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.split__text p{margin:16px 0 28px;color:var(--muted);font-size:18px}
.perks{display:grid;gap:18px}
.perks li{display:flex;gap:18px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.dot{flex:none;width:16px;height:16px;border-radius:50%;margin-top:7px}
.d1{background:var(--terra)}.d2{background:var(--teal)}.d3{background:var(--must)}
.perks h3{font-size:18px;margin-bottom:4px}
.perks p{color:var(--muted);font-size:15.5px}

/* gallery + reviews */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery figure{border-radius:var(--r);overflow:hidden;background:var(--white);border:1px solid var(--line)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding:14px 18px;font-weight:500;font-size:15px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.review p{color:var(--ink);margin-bottom:16px}
.review b{font-family:var(--font-h);font-size:15px}
.stars{color:var(--must);letter-spacing:3px;margin-bottom:10px}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags li{background:var(--white);border:1px solid var(--line);padding:9px 18px;border-radius:999px;font-size:15px;font-weight:500}
.tags:empty{display:none}

/* faq */
.faq-wrap{max-width:820px}
.faq{display:grid;gap:12px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:0 24px;transition:border-color .2s}
.faq details[open]{border-color:var(--terra)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--font-h);font-weight:600;font-size:18px;padding:20px 28px 20px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:28px;font-weight:500;color:var(--terra);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding-bottom:22px;color:var(--muted)}

/* cta */
.cta{background:var(--ink);color:#fff;background-image:linear-gradient(90deg,var(--terra) 0 33.33%,var(--must) 33.33% 66.66%,var(--teal) 66.66%);background-size:100% 10px;background-repeat:no-repeat;background-position:top}
.cta__in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.cta__text p{margin:16px 0 28px;color:rgba(255,255,255,.78);font-size:18px}
.contact-list{display:grid;gap:12px}
.contact-list li{display:flex;gap:12px;align-items:center;font-weight:500}
.contact-list a{border-bottom:2px solid var(--must)}
.form{background:var(--white);color:var(--ink);border-radius:28px;padding:32px;display:grid;gap:16px}
.form label{display:grid;gap:6px;font-weight:700;font-size:14.5px}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--teal);outline:none}
.form .invalid{border-color:var(--terra)}
.form__err{color:var(--terra-d);font-weight:700;font-size:14.5px}

/* footer */
.footer{background:#161616;color:rgba(255,255,255,.7);padding:44px 0;font-size:15px}
.footer__in{display:grid;gap:14px;justify-items:start}
.footer img{height:60px;width:auto}
.footer__copy{font-size:13.5px;opacity:.7}

/* whatsapp */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:60px;height:60px;border-radius:50%;background:#25a85a;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(0,0,0,.4);transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

@media (max-width:980px){
  .hero__in,.split,.cta__in{grid-template-columns:1fr;gap:40px}
  .cards,.gallery,.reviews{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .wall{max-width:520px}
}
@media (max-width:820px){
  .burger{display:flex}
  .nav{position:fixed;inset:80px 0 auto 0;background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 24px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .3s;max-height:calc(100vh - 80px);overflow:auto}
  .nav.open{transform:none}
  .nav a:not(.btn){padding:15px 0;border-bottom:1px solid var(--line);font-size:17px}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-top:16px}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .section{padding:68px 0}
  .hero{padding:32px 0 60px}
  .cards,.gallery,.reviews,.steps{grid-template-columns:1fr}
  .hl{white-space:normal}
  .form{padding:24px 20px}
  .btn{width:100%}
  .hero__cta{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .roller{display:none}
  .wall__stripe,.wall__stripe.s2,.wall__stripe.s3{animation:none;width:100%;opacity:1}
  .wall__tag{animation:none;opacity:1}
}


/* ===== movimento extra ===== */
.progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:100;background:linear-gradient(90deg,var(--terra),var(--must),var(--teal));transition:width .1s linear}

/* hero: gotas flutuantes */
.hero{position:relative}
.hero__in{position:relative;z-index:1}
.blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden;transform:translateY(calc(var(--py,0) * -.12px))}
.b{position:absolute;border-radius:50%;opacity:.16;animation:float 9s ease-in-out infinite}
.b1{width:260px;height:260px;background:var(--terra);left:-70px;top:60px}
.b2{width:150px;height:150px;background:var(--must);right:38%;top:8%;animation-duration:11s;animation-delay:-3s}
.b3{width:320px;height:320px;background:var(--teal);right:-110px;bottom:-90px;animation-duration:13s;animation-delay:-6s}
.b4{width:70px;height:70px;background:var(--terra);left:46%;bottom:12%;animation-duration:7s;animation-delay:-2s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-26px) scale(1.07)}}

/* sublinhado pincelado nas palavras do título */
.hl::after{content:"";position:absolute;left:0;bottom:-.04em;height:.11em;width:0;border-radius:99px;background:currentColor;opacity:.28;animation:underline .9s cubic-bezier(.5,.1,.3,1) forwards}
.hl--terra::after{animation-delay:.7s}
.hl--teal::after{animation-delay:1.1s}
@keyframes underline{to{width:100%}}
.chip i{animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(200,110,76,.45)}80%,100%{box-shadow:0 0 0 10px rgba(200,110,76,0)}}

/* escorridos na parede (acompanham o ciclo do rolo) */
.drip{position:absolute;width:9px;height:0;border-radius:0 0 9px 9px;opacity:0;animation:drip var(--loop) ease-in infinite}
.dr1{left:22%;top:36%;background:var(--terra);--len:7%}
.dr2{left:63%;top:36%;background:var(--terra);--len:10%;animation-delay:.25s}
.dr3{left:40%;top:61%;background:var(--must);--len:8%;animation-delay:.15s}
.dr1{animation-name:drip1}.dr2{animation-name:drip1}.dr3{animation-name:drip2}
@keyframes drip1{0%,22%{height:0;opacity:0}26%{opacity:1;height:0}46%,92%{opacity:1;height:var(--len)}98%,100%{height:var(--len);opacity:0}}
@keyframes drip2{0%,46%{height:0;opacity:0}50%{opacity:1;height:0}70%,92%{opacity:1;height:var(--len)}98%,100%{height:var(--len);opacity:0}}

/* faixa de serviços rolando */
.marquee{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;padding:16px 0;transform:rotate(-1deg) scale(1.02);margin:-14px 0 14px;position:relative;z-index:2}
.marquee__track{display:inline-flex;gap:0;animation:marq 38s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:14px;padding:0 26px;font-family:var(--font-h);font-weight:600;font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.mdot{width:12px;height:12px;border-radius:50%}
.mdot.t{background:var(--terra)}.mdot.m{background:var(--must)}.mdot.g{background:var(--teal)}
@keyframes marq{to{transform:translateX(-50%)}}

/* títulos de seção: traço de pincel */
.eyebrow{position:relative;padding-bottom:8px}
.eyebrow::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;border-radius:4px;background:var(--must);transition:width .8s .25s cubic-bezier(.5,.1,.3,1)}
.in .eyebrow::after,.in.eyebrow::after{width:44px}

/* botões: brilho que passa */
.btn{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-70%}85%,100%{left:130%}}

/* cartões */
.card{transform-style:preserve-3d;will-change:transform}
.card.tilt{transition:box-shadow .25s}
.card__ico{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.card:hover .card__ico{transform:rotate(-10deg) scale(1.14)}
.card::before{transform-origin:left;transform:scaleX(.25);transition:transform .5s cubic-bezier(.5,.1,.3,1)}
.card:hover::before,.card.in::before{transform:scaleX(1)}

/* passos */
.steps li{transition:transform .3s,background .3s,opacity .7s}
.steps li:hover{transform:translateY(-6px);background:rgba(255,255,255,.14)}
.steps li.in b{animation:pop .7s cubic-bezier(.3,1.6,.5,1) both,ring 2.8s 1s ease-out infinite}
@keyframes pop{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(214,156,88,.5)}70%,100%{box-shadow:0 0 0 14px rgba(214,156,88,0)}}

/* diferenciais */
.perks li{transition:transform .3s,border-color .3s,box-shadow .3s}
.perks li:hover{transform:translateX(8px);border-color:var(--must);box-shadow:0 14px 30px -20px rgba(32,32,32,.4)}
.dot{animation:dotpulse 2.6s ease-in-out infinite}
.d2{animation-delay:-.9s}.d3{animation-delay:-1.8s}
@keyframes dotpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* galeria */
.gallery img{transition:transform .6s cubic-bezier(.3,.1,.2,1)}
.gallery figure{transition:transform .35s,box-shadow .35s}
.gallery figure:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 24px 40px -26px rgba(32,32,32,.45)}
.gallery figure:hover img{transform:scale(1.07)}
.stars{display:inline-block}
.review.in .stars{animation:twinkle 2.8s ease-in-out infinite}
@keyframes twinkle{0%,100%{filter:none}50%{filter:brightness(1.25) drop-shadow(0 0 4px rgba(214,156,88,.7))}}
.review{transition:transform .3s,box-shadow .3s}
.review:hover{transform:translateY(-6px);box-shadow:0 22px 40px -26px rgba(32,32,32,.4)}

/* etiquetas de região */
.tags li{transition:transform .25s,background .25s,color .25s,border-color .25s}
.tags li:hover{transform:translateY(-3px) rotate(-1.5deg);background:var(--teal);color:#fff;border-color:var(--teal)}

/* faixa colorida do contato correndo */
.cta{background-image:linear-gradient(90deg,var(--terra) 0 16.66%,var(--must) 16.66% 33.33%,var(--teal) 33.33% 50%,var(--terra) 50% 66.66%,var(--must) 66.66% 83.33%,var(--teal) 83.33% 100%);background-size:200% 10px;background-position:0 0;animation:flow 7s linear infinite}
@keyframes flow{to{background-position:100% 0}}

/* WhatsApp: anel pulsando */
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25a85a;opacity:.5;animation:waring 2.4s ease-out infinite;z-index:-1}
@keyframes waring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}

/* logo */
.brand img{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.brand:hover img{transform:rotate(-3deg) scale(1.05)}

@media (prefers-reduced-motion:reduce){
  .b,.hl::after,.chip i,.drip,.marquee__track,.btn--primary::after,.steps b,.dot,.review .stars,.cta,.wa-float::before{animation:none!important}
  .hl::after{width:100%}
  .drip{height:var(--len);opacity:1}
  .eyebrow::after{width:44px}
  .card::before{transform:none}
  .blobs{transform:none}
}
@media (max-width:620px){
  .marquee span{font-size:15px;padding:0 18px}
  .b1{width:170px;height:170px}.b3{width:220px;height:220px}
}

.marquee-wrap{overflow:hidden;padding:14px 0;margin:-14px 0 0}
.marquee{margin:0!important}