/* Perfect Paper Decoração */
:root{
  --canvas:#232824;--panel:#2D332E;--accent:#B08D57;--accent-hover:#C4A26C;--accent-muted:#6E5F45;
  --text-secondary:#B8B1A5;--text-primary:#EEE7DB;--paper:#ECE5D8;--ink:#252926;--accent-ink:#7A5E32;
  --display:'Marcellus',Georgia,serif;--sans:'Jost',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace;
  --gutter:clamp(56px,7vw,120px);--ease:cubic-bezier(.2,.7,.2,1);--pad:clamp(96px,14vh,180px);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --rule:rgba(176,141,87,.22);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--canvas);-webkit-text-size-adjust:100%;scroll-padding-top:80px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{margin:0;color:var(--text-secondary);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
main:focus{outline:none}
.skip{position:fixed;left:16px;top:12px;z-index:100;padding:12px 18px;background:var(--accent);color:var(--ink);font-weight:500;text-decoration:none;transform:translateY(-220%);transition:transform .25s var(--ease)}
.skip:focus{transform:none}
.wrap{width:min(1180px,100% - 2*var(--gutter));margin-inline:auto}

/* brilho ambiente */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38% 34% at 30% 40%,rgba(196,150,86,.10),transparent 72%);animation:amb 75s var(--ease) -20s infinite alternate}
@keyframes amb{from{transform:translate3d(-14%,-8%,0)}to{transform:translate3d(22%,12%,0)}}

/* botões */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border:0;border-radius:2px;background:var(--accent);color:var(--ink);font:500 1rem/1.2 var(--sans);letter-spacing:.02em;text-decoration:none;text-shadow:none;cursor:pointer;isolation:isolate;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-hover);opacity:0;transition:opacity .3s var(--ease)}
.btn:hover::before{opacity:1}
.btn-sm{min-height:40px;padding:0 18px;font-size:.9375rem}

/* rótulos e títulos */
.label{position:relative;font:400 .8125rem/1.4 var(--mono);letter-spacing:.16em;color:var(--accent)}
.h2{margin-top:18px;max-width:20ch;font:400 clamp(2.1rem,4.2vw,3.6rem)/1.1 var(--display);color:var(--text-primary);text-wrap:balance}
.lead{margin-top:22px;max-width:52ch;font-weight:300;font-size:1.125rem;line-height:1.65}
.lead a{color:var(--accent-hover);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.sec{position:relative;padding:var(--pad) 0}

/* revelação */
.js .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
.js .rv.done{transition-delay:0s}

/* NAV */
.top{position:fixed;inset:0 0 auto 0;z-index:50}
.nav{position:relative;isolation:isolate;display:flex;align-items:center;gap:36px;height:72px;padding-inline:max(var(--gutter),(100% - 1180px)/2)}
.nav::before{content:"";position:absolute;inset:0 0 -48px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(16,19,17,.62),rgba(16,19,17,0));transition:opacity .4s var(--ease)}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--canvas);box-shadow:0 1px 0 rgba(176,141,87,.14);opacity:0;transition:opacity .4s var(--ease)}
.top.solid .nav::after{opacity:1}
.top.solid .nav::before{opacity:0}
.brand{margin-right:auto;font:400 1rem/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--text-primary);text-decoration:none;white-space:nowrap}
.nav-links{display:flex;gap:30px}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:40px;font-size:.9375rem;color:var(--text-secondary);text-decoration:none}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}

/* HERO */
.hero{position:relative;height:450vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;container-type:size;background:#1d221e}
.hero-media,.hero-media>*{position:absolute;inset:0;pointer-events:none}
.hero-still,.hero-poster{background:#1d221e 50% 50%/cover no-repeat}
.hero-still{display:none}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .9s var(--ease);will-change:transform}
.video-ready .hero-video{opacity:1}
.video-failed .hero-video{display:none}
.scene{--cl:0;--cr:0;--warm:0;--harsh:1;--mica:0;--dim:0;--push:1;--sheen:0;position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(var(--ox,-50%),-50%) scale(var(--push));transform-origin:58% 52%;pointer-events:none}
.scene>*{position:absolute;display:block}
.scene i{display:block}

.wall{inset:0 0 16% 0;overflow:hidden;background:linear-gradient(180deg,#2b332c,#222823)}
.wall>i{position:absolute;inset:0}
.w-cloth{background:url(../img/grasscloth.svg) 0 0/600px 600px}
.w-hi{opacity:.55;background:url(../img/grasscloth-hi.svg) 137px 61px/600px 600px}
.w-warp{background:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px 4px)}
.w-shade{background:radial-gradient(75% 65% at 8% 0,rgba(8,10,9,.6),transparent 72%),linear-gradient(0deg,rgba(8,10,9,.5),transparent 38%)}
.w-sun{opacity:var(--harsh);background:radial-gradient(12% 52% at 56.6% 48%,rgba(255,214,150,.22),transparent 72%)}
.w-bounce{opacity:var(--warm);background:radial-gradient(44% 78% at 62% 46%,rgba(214,158,88,.32),rgba(214,158,88,.1) 55%,transparent 76%)}
.w-mica{opacity:calc(var(--mica)*.8);background:url(../img/mica.svg) 0 0/300px 300px;-webkit-mask:radial-gradient(58% 78% at 44% 46%,#000 25%,transparent 78%);mask:radial-gradient(58% 78% at 44% 46%,#000 25%,transparent 78%)}

.floor{inset:84% 0 0 0;background:
  linear-gradient(180deg,#141715 0 5px,rgba(12,11,9,.5) 5px,rgba(12,11,9,0) 42%),
  radial-gradient(60% 120% at 70% 0,rgba(255,236,206,.08),transparent 70%),
  repeating-linear-gradient(177deg,transparent 0 23px,rgba(255,246,228,.045) 23px 24px,transparent 24px 63px),
  repeating-linear-gradient(184deg,transparent 0 41px,rgba(58,48,36,.09) 41px 43px,transparent 43px 97px),
  linear-gradient(90deg,rgba(12,11,9,.45),transparent 30%,transparent 82%,rgba(12,11,9,.3)),
  linear-gradient(180deg,#5c5447,#8a7e69)}
.patch{inset:84% 0 0 0;transform-origin:0 0;mix-blend-mode:screen;opacity:calc(.5 + .5*var(--harsh));background:linear-gradient(180deg,rgba(255,206,140,.55),rgba(250,184,112,.4))}
.patch-l{clip-path:polygon(58% 0,74.3% 0,52.3% 100%,36% 100%)}
.patch-r{clip-path:polygon(74.7% 0,91% 0,69% 100%,52.7% 100%)}
.floor-glow{left:28%;right:-4%;top:82%;bottom:-6%;mix-blend-mode:screen;opacity:var(--warm);background:radial-gradient(48% 70% at 64% 6%,rgba(236,172,96,.34),rgba(236,172,96,.1) 55%,transparent 78%)}

.win{left:58%;top:8%;width:33%;height:76%}
.glass{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#e9e4da 0%,#f3e3c2 35%,#f0cf98 62%,#dcae72 82%,#c49465 100%)}
.city{position:absolute;inset:0;width:100%;height:100%}
.glass>i{position:absolute;inset:0}
.haze{background:linear-gradient(180deg,transparent 35%,rgba(242,210,158,.38) 72%,rgba(220,170,110,.25))}
.glare{opacity:var(--harsh);background:radial-gradient(45% 32% at 80% 20%,rgba(255,251,240,.95),rgba(255,240,210,.4) 45%,transparent 75%)}
.pane{position:absolute;top:3%;bottom:0;width:50%;overflow:hidden}
.pane-l{left:0}
.pane-r{right:0}
.fab{position:absolute;left:0;right:0;top:0;height:calc(100% - 7px);transform:translate3d(0,calc((var(--cl) - 1)*100%),0);
  background:repeating-linear-gradient(90deg,rgba(255,252,244,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(86,68,44,.07) 0 1px,transparent 1px 3px),linear-gradient(180deg,rgba(238,228,208,.8),rgba(228,214,188,.76));
  box-shadow:inset 1px 0 0 rgba(255,250,240,.3),inset -1px 0 0 rgba(255,250,240,.3)}
.pane-r .fab{transform:translate3d(0,calc((var(--cr) - 1)*100%),0)}
.fab>i{position:absolute;inset:0}
.fab-warm{opacity:var(--warm);background:linear-gradient(180deg,rgba(246,198,128,.5),rgba(236,170,94,.58))}
.fab>.bar{inset:auto 0 -7px 0;height:7px;background:linear-gradient(180deg,#e0c287,#a58049 55%,#6e5530);box-shadow:0 2px 4px rgba(0,0,0,.35)}
.frame{position:absolute;inset:-6px;border:6px solid #3b3128;box-shadow:0 0 0 1px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,226,180,.1),0 0 40px rgba(0,0,0,.25)}
.mull{position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:linear-gradient(90deg,#2c241d,#4b3e31 50%,#2c241d)}
.cas{position:absolute;left:0;right:0;top:0;height:3%;background:linear-gradient(180deg,#e6cb95,#b8955c 45%,#866a3f);box-shadow:0 2px 6px rgba(0,0,0,.35)}

.sh-chair{left:40%;top:89.6%;width:16.5%;height:4.2%;background:radial-gradient(closest-side,rgba(8,7,6,.62),rgba(8,7,6,.3) 60%,transparent)}
.sh-cast{left:33%;top:91%;width:16%;height:9%;opacity:calc(var(--harsh)*.8);clip-path:polygon(52% 0,98% 0,62% 100%,8% 100%);background:linear-gradient(180deg,rgba(10,9,7,.5),rgba(10,9,7,.12))}
.sh-table{left:54.6%;top:91%;width:6.4%;height:2.4%;background:radial-gradient(closest-side,rgba(8,7,6,.6),transparent)}
.chair{left:41.5%;top:65%;width:13%;height:27%}
.chair i,.table i{position:absolute}
.c-back{left:9%;right:9%;top:0;height:60%;border-radius:48% 48% 14% 14%/40% 40% 12% 12%;background:url(../img/grain.svg) 0 0/80px 80px,radial-gradient(120% 90% at 78% 22%,#d2c8b6,#a29682 48%,#665d50 100%)}
.c-arms{left:0;right:0;top:27%;height:52%;border-radius:30% 30% 20% 20%/42% 42% 18% 18%;background:url(../img/grain.svg) 30px 10px/80px 80px,radial-gradient(110% 100% at 82% 18%,#ddd3c1,#ab9f8a 42%,#696052 90%)}
.c-seat{left:17%;right:17%;top:42%;height:18%;border-radius:45%/50%;background:url(../img/grain.svg) 10px 40px/80px 80px,radial-gradient(100% 120% at 70% 20%,#e6ddcc,#bcb09b 55%,#8b806a)}
.c-base{left:16%;right:16%;top:79%;height:9%;border-radius:2px;background:linear-gradient(90deg,#1e1915,#3a3027 70%,#4f4134)}
.c-rim{left:62%;right:0;top:27%;height:52%;border-radius:0 30% 20% 0/0 42% 18% 0;opacity:var(--harsh);background:linear-gradient(90deg,transparent,rgba(255,220,160,.32))}
.table{left:55.3%;top:79%;width:4.6%;height:13%}
.t-body{left:6%;right:6%;top:10%;bottom:0;border-radius:0 0 8% 8%/0 0 6% 6%;background:linear-gradient(90deg,#5d5446,#8f846f 45%,#b7ab93 70%,#7d7262)}
.t-top{left:0;right:0;top:0;height:22%;border-radius:50%;background:radial-gradient(100% 100% at 70% 30%,#d8ccb4,#b3a68d 60%,#8d826d)}

.dim{inset:0;background:#0b0a08;opacity:var(--dim);clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,57.6% 7.3%,91.4% 7.3%,91.4% 84%,60% 84%,60% 78.8%,57.6% 78.8%,57.6% 7.3%)}
.lantern{left:44%;width:62%;top:-6%;height:100%;mix-blend-mode:screen;opacity:var(--warm);background:radial-gradient(closest-side,rgba(240,182,104,.3),rgba(232,160,84,.12) 55%,transparent)}
.beams{inset:0;mix-blend-mode:screen;opacity:calc(var(--harsh)*.9);clip-path:polygon(58% 8%,91% 8%,91% 84%,69% 100%,36% 100%);
  background:repeating-linear-gradient(113deg,rgba(255,226,170,0) 0,rgba(255,226,170,.08) 1.2%,rgba(255,226,170,0) 2.6%,rgba(255,226,170,.04) 3.4%,rgba(255,226,170,0) 5.8%,rgba(255,226,170,.1) 7%,rgba(255,226,170,0) 9.5%);
  -webkit-mask:linear-gradient(205deg,#000 10%,rgba(0,0,0,.5) 50%,transparent 85%);mask:linear-gradient(205deg,#000 10%,rgba(0,0,0,.5) 50%,transparent 85%)}
.bloom{left:66%;top:-14%;width:40%;height:62%;mix-blend-mode:screen;opacity:var(--harsh);background:radial-gradient(closest-side,rgba(255,238,206,.42),rgba(255,226,180,.12) 50%,transparent)}
.dust{left:34%;width:60%;top:8%;height:90%;opacity:calc(.45 + .55*var(--harsh))}
.mote{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#ffe9c4;box-shadow:0 0 5px 1px rgba(255,216,150,.55);opacity:0;animation:mote var(--d) linear var(--dl) infinite;will-change:transform,opacity}
@keyframes mote{0%{opacity:0;transform:translate3d(0,0,0)}18%,82%{opacity:var(--o)}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0)}}
.off .mote{animation-play-state:paused}

.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(14,17,15,.55),transparent 18%),
  linear-gradient(90deg,rgba(14,17,15,.62),rgba(14,17,15,.38) 30%,transparent 52%),
  linear-gradient(0deg,rgba(14,17,15,.5),transparent 22%)}

/* faixas */
.bands{position:absolute;inset:0;pointer-events:none}
.band{--k:0;position:absolute;left:clamp(24px,6.5vw,112px);top:50%;width:min(34rem,38vw);transform:translateY(-50%);isolation:isolate;opacity:0;visibility:hidden}
.b1{opacity:1;visibility:visible}
.band::before{content:"";position:absolute;inset:-30% -38% -30% -40%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(12,15,13,.68),rgba(12,15,13,.4) 55%,transparent);opacity:calc(.25 + .75*var(--k,1))}
.band .sr{visibility:visible}
.label-chip{display:inline-block;padding:7px 12px;border:1px solid rgba(176,141,87,.32);border-radius:2px;background:rgba(16,19,17,.62);font:400 .75rem/1.3 var(--mono);letter-spacing:.18em;color:var(--accent-hover)}
.b1 .label-chip{margin-bottom:26px;opacity:clamp(0,calc(var(--k)*3),1)}
.band .title{position:relative;max-width:16ch;font:400 clamp(2.4rem,4.6vw,4.6rem)/1.08 var(--display);color:var(--text-primary);text-shadow:var(--tshadow);text-wrap:balance}
.b3 .title{max-width:17ch;font-size:clamp(2.2rem,4vw,4.1rem)}
.band .line{margin-top:22px;max-width:34ch;font:300 clamp(1.05rem,1.25vw,1.25rem)/1.55 var(--sans);color:var(--text-primary);text-shadow:var(--tshadow);opacity:clamp(0,calc((var(--k) - .35)*2.4),1)}
.band .btn{margin-top:30px;pointer-events:auto;opacity:clamp(0,calc((var(--k) - .5)*2.4),1)}
.title .w{--kc:clamp(0,calc((var(--k) - var(--th))*2.8),1);display:inline-block}
.b1 .vis .w{opacity:var(--kc)}
.b1 .blurc{position:absolute;inset:0;text-shadow:none}
.b1 .blurc .w{color:transparent;text-shadow:0 0 14px rgba(238,231,219,.9);opacity:calc(clamp(0,calc(var(--kc)*2.5),1)*(1 - var(--kc)))}
.b2 .vis .w{opacity:var(--kc);transform:translate3d(0,calc((1 - var(--kc))*-24px),0)}
.b3{--ke:calc(var(--k)*var(--k)*(3 - 2*var(--k)))}
.b3 .half-a{display:block;clip-path:inset(-20% 50% -20% -10%);opacity:var(--ke);transform:translate3d(calc((1 - var(--ke))*-14px),calc((1 - var(--ke))*-28px),0)}
.b3 .half-b{position:absolute;inset:0;clip-path:inset(-20% -10% -20% 50%);opacity:var(--ke);transform:translate3d(calc((1 - var(--ke))*14px),calc((1 - var(--ke))*28px),0)}
.b3 .half-seam{position:absolute;left:50%;top:-6%;bottom:-6%;width:1px;background:var(--accent);opacity:calc(var(--ke)*(1 - var(--ke))*2.4);transform:scaleY(var(--ke))}
.cue{position:absolute;left:clamp(24px,6.5vw,112px);bottom:36px;width:1px;height:64px;overflow:hidden;background:rgba(176,141,87,.25);opacity:0}
.cue::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:var(--accent);animation:cue 2.4s var(--ease) -1s infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
.scrub .band{will-change:opacity}

/* texto do hero estático */
.static-copy{display:none;position:absolute;z-index:2;left:var(--gutter);top:50%;width:min(36rem,46vw);transform:translateY(-50%);isolation:isolate}
.static-copy::before{content:"";position:absolute;inset:-30% -38% -30% -40%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(12,15,13,.62),rgba(12,15,13,.36) 55%,transparent)}
.static-copy .label-chip{margin-bottom:24px}
.static-copy .title{max-width:17ch;font:400 clamp(2.2rem,4.4vw,4rem)/1.08 var(--display);color:var(--text-primary);text-shadow:var(--tshadow);text-wrap:balance}
.static-copy .line{margin-top:20px;max-width:36ch;font:300 clamp(1.05rem,1.3vw,1.25rem)/1.55 var(--sans);color:var(--text-primary);text-shadow:var(--tshadow)}
.static-copy .btn{margin-top:28px}

/* os cinco portões do hero estático (iguais aos do JS) */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:100vh;height:100svh;min-height:560px}
  .bands,.cue{display:none}
  .static-copy{display:block}
  .hero-poster,.hero-video{display:none}
  .hero-still{display:block;background-image:url(../img/hero-final.webp)}
  @media (orientation:portrait){
    .hero-still{background-position:60% 50%}
    .static-copy{left:var(--gutter);right:var(--gutter);top:auto;bottom:calc(92px + env(safe-area-inset-bottom));width:auto;transform:none}
    .hero .scrim{background:linear-gradient(180deg,rgba(14,17,15,.6),transparent 16%),linear-gradient(0deg,rgba(14,17,15,.94) 0,rgba(14,17,15,.82) 44%,rgba(14,17,15,.4) 68%,transparent 86%)}
  }
}
.no-js .hero{height:auto}
.no-js .stage{position:relative;height:100vh;height:100svh;min-height:560px}
.no-js .bands,.no-js .cue{display:none}
.no-js .static-copy{display:block}
.no-js .hero-poster,.no-js .hero-video{display:none}
.no-js .hero-still{display:block;background-image:url(../img/hero-final.webp)}
@media (orientation:portrait){
  .no-js .hero-still{background-position:60% 50%}
  .no-js .static-copy{left:var(--gutter);right:var(--gutter);top:auto;bottom:calc(92px + env(safe-area-inset-bottom));width:auto;transform:none}
  .no-js .hero .scrim{background:linear-gradient(180deg,rgba(14,17,15,.6),transparent 16%),linear-gradient(0deg,rgba(14,17,15,.94) 0,rgba(14,17,15,.82) 44%,rgba(14,17,15,.4) 68%,transparent 86%)}
}
@media (max-height:560px){.cue{display:none}}

/* o fio da emenda */
.after{position:relative}
.seam{position:absolute;top:0;bottom:0;left:calc((100% - min(1180px,100% - 2*var(--gutter)))/2 - 40px);width:12px;z-index:3;overflow:hidden;pointer-events:none}
.seam-fill{position:absolute;inset:0;overflow:hidden;transform:translate3d(0,calc((var(--q,0) - 1)*100%),0)}
.seam-fill::after{content:"";position:absolute;right:0;bottom:0;width:1px;height:56px;background:linear-gradient(180deg,rgba(176,141,87,0),var(--accent))}
.seam-in{position:absolute;inset:0;transform:translate3d(0,calc((1 - var(--q,0))*100%),0);background:
  linear-gradient(var(--accent-muted),var(--accent-muted)) 100% 0/1px 100% no-repeat,
  repeating-linear-gradient(180deg,var(--accent-muted) 0 1px,transparent 1px 8px) 100% 0/5px 100% no-repeat,
  repeating-linear-gradient(180deg,var(--accent) 0 1px,transparent 1px 80px) 100% 0/12px 100% no-repeat}
.after .label::before{content:"";position:absolute;left:-29px;top:50%;width:19px;height:1px;background:var(--accent-muted);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .15s}
.after .label.in::before{transform:scaleX(1)}
.no-js .after .label::before{transform:none}

/* 01 acabamento */
.acab .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,7vw,120px);align-items:center}
.sd{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#232824;box-shadow:0 40px 90px -40px rgba(0,0,0,.7),0 0 0 1px rgba(176,141,87,.12)}
.sd>i{position:absolute;inset:0}
.sd-strip{background:url(../img/hex.svg) 0 0/78px 135px,url(../img/grasscloth-hi.svg) 40px 0/600px 600px,url(../img/grasscloth.svg) 0 0/600px 600px,linear-gradient(160deg,#36403a,#2a312c 60%,#232824)}
.sd-a{clip-path:inset(0 50% 0 0)}
.sd-b{clip-path:inset(0 0 0 50%);transform:translate3d(calc((1 - var(--e,1))*10px),calc((1 - var(--e,1))*26px),0)}
.sd>.sd-line{left:50%;right:auto;width:1px;background:var(--accent);opacity:calc((1 - var(--e,1))*.9)}
.sd-shade{pointer-events:none;background:radial-gradient(90% 70% at 85% 8%,rgba(255,226,180,.16),transparent 62%),linear-gradient(180deg,transparent 55%,rgba(8,10,9,.42))}

/* 02 papel de parede */
.papel{overflow:hidden}
.papel .wrap{position:relative;z-index:1}
.leaves{position:absolute;right:-90px;top:-30px;width:min(62vw,780px);height:auto;pointer-events:none;opacity:.38}
.leaves path{fill:none;stroke:var(--accent-muted);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease) calc(var(--ld,0s) + var(--pd,0s))}
.leaves .m{--pd:.4s}
.leaves .v{--pd:.9s;transition-duration:3.4s}
.leaves.in path{stroke-dashoffset:0}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(48px,7vh,80px)}
.card-media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--panel)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media (hover:hover){.card:hover .card-media img{transform:scale(1.04)}}
.card h3{margin-top:20px;font:400 1.5rem/1.2 var(--display);color:var(--text-primary)}
.card p{margin-top:8px;max-width:30ch;font-size:1rem;line-height:1.55}

/* 03 persianas */
.pers{background:var(--panel)}
.pers .label,.dep .label{color:var(--accent-hover)}
.demo{margin-top:clamp(40px,6vh,64px)}
.demo-frame{position:relative;aspect-ratio:16/8;overflow:hidden;container-type:size;border-radius:2px;background:#1d221e;box-shadow:0 40px 90px -40px rgba(0,0,0,.7),0 0 0 1px rgba(176,141,87,.12)}
.demo-frame .scene{--mica:.55;--ox:-52%;width:max(110cqw,177.78cqh);height:max(100cqh,61.875cqw)}
.demo-frame .fab{background:none}
.look{opacity:0;transition:opacity .5s var(--ease)}
.look-3{background:repeating-linear-gradient(90deg,rgba(255,252,244,.08) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(86,68,44,.07) 0 1px,transparent 1px 3px),linear-gradient(180deg,rgba(238,228,208,.55),rgba(228,214,188,.52))}
.look-1{background:repeating-linear-gradient(90deg,rgba(255,252,244,.06) 0 1px,transparent 1px 2px),repeating-linear-gradient(0deg,rgba(86,68,44,.08) 0 1px,transparent 1px 2px),linear-gradient(180deg,rgba(236,226,206,.8),rgba(226,212,186,.78))}
.look-bo{background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(180deg,#3a3631,#33302b)}
.demo-frame[data-fab="3"] .look-3,.demo-frame[data-fab="1"] .look-1,.demo-frame[data-fab="bo"] .look-bo{opacity:1}
.demo-ui{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:24px}
.fabrics{display:flex;flex-wrap:wrap;gap:10px}
.fab-desc{flex:1 1 220px;min-height:1.6em;font-weight:300;color:var(--text-primary)}
.hold{flex:none;min-width:236px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.hold-t{position:relative}
.hold-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ink);opacity:.4;transform:scaleX(var(--h,0));transform-origin:left}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid rgba(176,141,87,.38);border-radius:2px;font:400 .8125rem/1 var(--mono);letter-spacing:.12em;color:var(--text-secondary);pointer-events:none}
.chip span::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .25s var(--ease)}
.chip input:checked+span{color:var(--ink)}
.chip input:checked+span::before{opacity:1}
.chip:hover span{color:var(--text-primary)}
.chip:hover input:checked+span{color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}

/* 04 como funciona */
.como{background:var(--paper);color:#45473f;isolation:isolate}
.como::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background:url(../img/grain.svg) 0 0/240px 240px}
.como .label{color:var(--accent-ink)}
.como .h2{color:var(--ink)}
.como :focus-visible{outline-color:var(--accent-ink)}
.como-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.counter{flex:none;font:400 clamp(3rem,7vw,6rem)/1 var(--display);color:var(--ink);white-space:nowrap}
.counter small{margin-left:10px;font:400 .875rem/1 var(--mono);letter-spacing:.12em;color:var(--accent-ink)}
.como-ruler{position:relative;height:30px;margin-top:clamp(36px,5vh,56px);overflow:hidden;background:
  linear-gradient(var(--ink),var(--ink)) 0 0/100% 1px no-repeat,
  repeating-linear-gradient(90deg,rgba(37,41,38,.45) 0 1px,transparent 1px 8px) 0 0/100% 7px no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 80px) 0 0/100% 15px no-repeat}
.como-ruler::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--accent-ink);transform:scaleX(var(--r,1));transform-origin:left}
.cr-mark{position:absolute;top:0;bottom:0;left:0;right:1px;transform:translate3d(calc(var(--r,1)*100%),0,0)}
.cr-mark::before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--accent-ink)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(40px,6vh,64px)}
.step-n{display:block;font:400 .8125rem/1 var(--mono);letter-spacing:.14em;color:var(--accent-ink)}
.ico{width:52px;height:52px;margin-top:22px;fill:none;stroke:var(--ink);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.step h3{margin-top:22px;font:400 1.6rem/1.2 var(--display);color:var(--ink)}
.step p{margin-top:10px;max-width:34ch}
.js .draw *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) calc(var(--d,0)*90ms + .3s)}
.js .in .draw *{stroke-dashoffset:0}

/* 05 trabalhos */
.gal{columns:3;column-gap:clamp(16px,2vw,28px);margin-top:clamp(40px,6vh,64px)}
.shot{break-inside:avoid;margin-bottom:clamp(20px,2.4vw,32px)}
.shot-img{position:relative;overflow:hidden;border-radius:2px;background:var(--panel)}
.shot-img img{width:100%}
.shot-img .h2i{position:absolute;inset:0;height:100%;object-fit:cover}
.js .shot .h1i{clip-path:inset(0 calc(50% - 1px) 0 0);opacity:0;transform:translate3d(0,-40px,0);transition:transform 1.3s var(--ease),opacity 1s var(--ease)}
.js .shot .h2i{clip-path:inset(0 0 0 50%);opacity:0;transform:translate3d(0,40px,0);transition:transform 1.3s var(--ease),opacity 1s var(--ease)}
.js .shot.in .h1i,.js .shot.in .h2i{opacity:1;transform:none}
.no-js .shot .h2i{display:none}
.shot figcaption{margin-top:12px;font:400 .75rem/1.4 var(--mono);letter-spacing:.16em}

/* depoimentos */
.dep{background:var(--panel)}
.badge{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;font:400 .8125rem/1 var(--mono);letter-spacing:.12em;color:var(--accent-hover)}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(40px,6vh,64px)}
.q{position:relative;padding:4px 0 0 28px}
.q::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease) calc(var(--d,0)*120ms + .1s)}
.q.in::before,.no-js .q::before{transform:none}
.js .q{opacity:0;transform:translate3d(0,12px,0);transition:opacity .9s var(--ease) calc(var(--d,0)*120ms),transform .9s var(--ease) calc(var(--d,0)*120ms)}
.js .q.in{opacity:1;transform:none}
.q blockquote{position:relative}
.qt{font:400 clamp(1.2rem,1.6vw,1.45rem)/1.5 var(--display);color:var(--text-primary)}
.qt-blur{display:none}
.js .qt-blur{display:block;position:absolute;inset:0;filter:blur(6px);transition:opacity 1.2s var(--ease) calc(var(--d,0)*120ms + .2s)}
.js .qt-sharp{opacity:0;transition:opacity 1.2s var(--ease) calc(var(--d,0)*120ms + .2s)}
.js .q.in .qt-blur{opacity:0}
.js .q.in .qt-sharp{opacity:1}
.who{display:block;margin-top:24px;font:500 1rem/1.3 var(--sans);color:var(--text-primary)}
.src{display:block;margin-top:6px;font:400 .6875rem/1.4 var(--mono);letter-spacing:.14em}

/* 06 dúvidas */
.duv .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.duv-head{position:sticky;top:120px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px;padding:18px 0;cursor:pointer;list-style:none;font:400 clamp(1.15rem,1.5vw,1.35rem)/1.3 var(--display);color:var(--text-primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .plus::before,.faq summary:hover .plus::after{background:var(--accent-hover)}
.plus{position:relative;flex:none;width:14px;height:14px}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;margin-top:-.5px;background:var(--accent)}
.plus::after{transform:rotate(90deg);transition:transform .35s var(--ease)}
details[open] .plus::after{transform:rotate(180deg)}
.ans{max-width:58ch;padding:0 0 26px}
details[open] .ans{animation:fadeIn .45s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}

/* 07 contato */
.contato .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.hours{margin-top:32px;font:400 .8125rem/1.4 var(--mono);letter-spacing:.08em}
.hours li+li{margin-top:8px}
.form{padding:clamp(24px,3.5vw,48px);border:1px solid rgba(176,141,87,.14);border-radius:2px;background:var(--panel)}
.field+.field,.fs{margin-top:24px}
.fs{min-width:0;margin-inline:0;padding:0;border:0}
.field label,.fs legend{display:block;margin-bottom:10px;padding:0;font:400 .75rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.inp{display:block;width:100%;min-height:52px;padding:0 16px;border:1px solid rgba(184,177,165,.24);border-radius:2px;background:rgba(20,24,21,.55);color:var(--text-primary);font:400 1rem/1.4 var(--sans)}
.inp::placeholder{color:#948f84;opacity:1}
.inp:hover{border-color:rgba(184,177,165,.4)}
.inp:focus{outline:none;border-color:var(--accent)}
.inp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.form .chip span{font:400 .9375rem/1 var(--sans);letter-spacing:0}
.btn-wide{width:100%;min-height:56px;margin-top:32px}
.note{margin-top:14px;font-size:.875rem}
.ok{margin-top:14px;color:var(--text-primary)}
.ok:empty{display:none}
.alt{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;color:var(--accent-hover);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* rodapé */
.foot{padding:clamp(56px,9vh,96px) 0 clamp(32px,5vh,48px);border-top:1px solid rgba(176,141,87,.14);background:#1e2320}
.foot .wrap{display:grid;grid-template-columns:1fr auto;gap:32px 48px;align-items:start}
.foot-brand{font:400 1.25rem/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-primary)}
.foot-line{margin-top:10px;max-width:40ch}
.foot-links a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none}
.foot-links a:hover{color:var(--text-primary)}
.copy{grid-column:1/-1;padding-top:24px;border-top:1px solid rgba(176,141,87,.1);font:400 .75rem/1.4 var(--mono);letter-spacing:.1em}

/* botão fixo do celular */
.mcta{display:none}

/* botão flutuante do WhatsApp */
.wa-float{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:45;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#1DA851;color:#fff;text-decoration:none;box-shadow:0 14px 32px -12px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .3s var(--ease),filter .3s var(--ease)}
.wa-float:hover{transform:translateY(-2px);filter:brightness(1.08)}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (pointer:coarse){
  .btn-sm,.chip span,.nav-links a,.foot-links a{min-height:44px}
}
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-frame{aspect-ratio:16/10}
}
@media (max-width:860px){
  .nav-links{display:none}
  .quotes{grid-template-columns:1fr;max-width:40rem}
  .steps{grid-template-columns:1fr;max-width:36rem}
  .duv .wrap,.contato .wrap,.acab .wrap{grid-template-columns:1fr}
  .duv-head{position:static}
  .sd{max-width:26rem}
}
@media (max-width:720px){
  :root{--gutter:22px}
  .nav .btn{display:none}
  .seam{display:none}
  .after .label{padding-top:18px}
  .after .label::before{left:0;top:0;width:32px}
  .static-copy .title{font-size:clamp(2rem,9vw,2.6rem)}
  .static-copy .line{font-size:1rem}
  .h2{font-size:clamp(2rem,9vw,2.6rem)}
  .cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:start}
  .demo-frame{aspect-ratio:4/5}
  .demo-frame .scene{--ox:-72%}
  .demo-ui{gap:16px}
  .hold{width:100%}
  .counter{font-size:clamp(2.4rem,12vw,3.4rem)}
  .gal{columns:2}
  .foot{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .foot .wrap{grid-template-columns:1fr}
  .wa-float{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:56px;height:56px}
  .mcta{display:inline-flex;position:fixed;right:84px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:40;min-height:48px;padding:0 22px;box-shadow:0 12px 30px -10px rgba(0,0,0,.65);transform:translate3d(0,calc(100% + 40px),0);visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s}
  .mcta.show{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
}

@media (prefers-reduced-motion:reduce){
  .ambient,.cue::after{animation:none}
  .mote{animation:none;opacity:var(--o)}
  .js .rv,.js .q{opacity:1;transform:none;transition:none}
  .js .draw *,.leaves path{stroke-dashoffset:0;transition:none}
  .js .shot .h1i,.js .shot .h2i{opacity:1;transform:none;transition:none}
  .js .qt-blur{display:none}
  .js .qt-sharp{opacity:1;transition:none}
  .q::before,.after .label::before{transform:none;transition:none}
  details[open] .ans{animation:none}
  .look,.btn::before,.chip span::before,.nav::before,.nav::after,.mcta,.wa-float,.card-media img{transition:none}
}