/* ============================================================
   CASA DO ARTESÃO — v2 premium rebuild
   Paleta MANUAL: carvão #0A0500 + areia #F2DDCC (sem acento inventado).
   Motion: Lenis + GSAP/ScrollTrigger/SplitText/DrawSVG (vendorados).
   Régua de craft: fit-fight-fabi (cursor temático, grão, char-slam).
   ============================================================ */

/* ---------- fontes self-host ---------- */
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --carvao:#0A0500; --areia:#F2DDCC; --branco:#F2F2F2;
  --paper:#F7EFE6;            /* off-white quente (superfície, mesma família) */
  --areia-soft:#EAD9C6;
  --carvao-2:#160C03;         /* carvão levemente quente p/ seções escuras */
  --carvao-3:#1F140A;
  /* MADEIRA como ILUMINACAO/material (NAO acento de marca) — so em luz/grao/borda */
  --mel:#C8945A; --ambar:#E2B785; --caramelo:#E3B97F; --nogueira:#2A1B10;
  --areia-mute:#C9B5A2;       /* areia a ~70% p/ apoio/legendas */
  --tinta-86:rgba(10,5,0,.86); --tinta-70:rgba(10,5,0,.7); --tinta-50:rgba(10,5,0,.5);
  --linha:rgba(10,5,0,.12); --linha-areia:rgba(242,221,204,.16);
  --zap:#0E7A3C; --zap-d:#0A5E2F;     /* verde funcional WhatsApp (escurecido p/ contraste AA) */
  --sombra-cat:0 30px 70px -28px rgba(10,5,0,.55);   /* sombra de catálogo */
  --sombra-sm:0 12px 34px -18px rgba(10,5,0,.45);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-fast:.22s; --dur-mid:.45s; --dur-slow:.8s;
  --maxw:1240px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;color:var(--carvao);background:var(--paper);
  line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.05;letter-spacing:-.018em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--carvao);color:var(--areia)}
:focus-visible{outline:2.5px solid var(--carvao);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--areia)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.narrow{max-width:760px;margin:0 auto;padding:0 28px}
.eyebrow{font-weight:600;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-70)}
.dark .eyebrow,.wood-tex .eyebrow,.proc .eyebrow{color:var(--ambar)}
.carousel__head p,.proc__head p{color:rgba(242,221,204,.78)}

/* ============================================================
   GRÃO DE MADEIRA (atmosfera global) — régua fit-fight, tema quente
   ============================================================ */
body::after{content:'';position:fixed;inset:-50%;width:200%;height:200%;opacity:.16;pointer-events:none;z-index:9990;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  /* grao filmico VIVO na tela inteira (regua Fit Fight) */
  animation:grain .5s steps(2) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,3%)}50%{transform:translate(3%,-3%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(3%,3%)}}

/* ============================================================
   CURSOR — GOIVA / FORMÃO (régua fit-fight, tema entalhe)
   ============================================================ */
@media(pointer:fine){
  html.cursor-on,html.cursor-on a,html.cursor-on button,html.cursor-on input,
  html.cursor-on textarea,html.cursor-on select,html.cursor-on .card,html.cursor-on .gal figure,
  html.cursor-on .proc-panel,html.cursor-on summary{cursor:none !important}
}
#cur-dot{position:fixed;width:46px;height:46px;left:-90px;top:-90px;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%) rotate(-32deg);transition:transform .2s var(--ease-out),opacity .25s;will-change:transform}
#cur-dot svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
#cur-ring{position:fixed;width:40px;height:40px;left:-90px;top:-90px;border:1.5px solid rgba(242,221,204,.5);
  border-radius:50%;pointer-events:none;z-index:9997;transform:translate(-50%,-50%);opacity:.5;
  transition:width .3s var(--ease-out),height .3s var(--ease-out),border-color .3s,opacity .3s;mix-blend-mode:difference}
html.ch #cur-ring{width:70px;height:70px;border-color:rgba(242,221,204,.9);opacity:.85}
html.ch #cur-dot{transform:translate(-50%,-50%) rotate(-40deg) scale(1.16)}
html.carve #cur-dot{animation:carveHit .4s cubic-bezier(.2,.9,.2,1.1)}
html.carve #cur-ring{animation:carveRing .55s cubic-bezier(.2,.9,.2,1.1)}
@keyframes carveHit{0%{transform:translate(-50%,-50%) rotate(-32deg) scale(1)}
  40%{transform:translate(-54%,-46%) rotate(-20deg) scale(1.3)}
  100%{transform:translate(-50%,-50%) rotate(-32deg) scale(1)}}
@keyframes carveRing{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}
  50%{transform:translate(-50%,-50%) scale(2);opacity:.12;border-width:2px}
  100%{transform:translate(-50%,-50%) scale(1);opacity:.5;border-width:1.5px}}
/* lasca de madeira que salta no clique */
.chip{position:fixed;width:7px;height:5px;background:var(--ambar);border-radius:1px;pointer-events:none;z-index:9996;
  opacity:.9;box-shadow:0 1px 2px rgba(0,0,0,.4);will-change:transform,opacity}
@media(max-width:900px),(pointer:coarse){#cur-dot,#cur-ring{display:none}}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:1rem;padding:16px 28px;border-radius:999px;
  cursor:pointer;border:none;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .2s;white-space:nowrap}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none}
.btn-zap{background:var(--zap);color:#fff}
.btn-zap:hover{transform:translateY(-2px);background:var(--zap-d);box-shadow:0 16px 36px -14px rgba(31,168,85,.7)}
.btn-dark{background:var(--carvao);color:var(--areia)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--sombra-sm)}
.btn-ghost{background:transparent;border:1.5px solid var(--linha);color:var(--carvao)}
.btn-ghost:hover{border-color:var(--carvao)}
.dark .btn-ghost{border-color:var(--linha-areia);color:var(--areia)}
.dark .btn-ghost:hover{border-color:var(--areia)}

/* ============================================================
   NAV (liquid glass)
   ============================================================ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:100;transition:background .4s,padding .3s,box-shadow .3s;
  background:linear-gradient(180deg,rgba(10,5,0,.5) 0%,rgba(10,5,0,.16) 60%,rgba(10,5,0,0) 100%)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:78px;gap:18px}
.nav.sc{background:rgba(247,239,230,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px -22px rgba(10,5,0,.5)}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--carvao);overflow:hidden}
.brand .mark svg,.brand .mark canvas,.brand .mark img{width:100%;height:100%;display:block}
.brand .name{display:block;font-family:'Fraunces';font-weight:600;font-size:1.08rem;line-height:1;color:var(--areia);transition:color .4s}
.brand .tag{display:block;font-size:.57rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(242,221,204,.66);margin-top:4px;white-space:nowrap;transition:color .4s}
.nav.sc .brand .name{color:var(--carvao)}
.nav.sc .brand .tag{color:var(--tinta-50)}
.nav ul{display:flex;gap:30px;list-style:none;font-weight:500;font-size:.93rem;color:var(--areia);transition:color .4s}
.nav.sc ul{color:var(--carvao)}
.nav ul a{opacity:.82;transition:opacity .2s}.nav ul a:hover{opacity:1}
.nav .btn{padding:11px 20px;font-size:.92rem}
.nav .nav-cta{background:var(--areia);color:var(--carvao)}
.nav.sc .nav-cta{background:var(--carvao);color:var(--areia)}

/* ============================================================
   KINETIC TYPE (char-slam) — régua fit-fight
   ============================================================ */
.kin .char{display:inline-block;will-change:transform,opacity}
html.js .reveal{opacity:0;transform:translateY(28px);will-change:opacity,transform}
html.js .reveal.is-in{opacity:1;transform:none;transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
html.js .reveal-stagger>*{opacity:0;transform:translateY(24px)}
html.js .reveal-stagger.is-in>*{opacity:1;transform:none}

/* ============================================================
   HERO — A Marcenaria à Meia-Luz (madeira real + luz quente + placa flutuante)
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:128px 0 76px;color:var(--areia);overflow:hidden;background:#0A0500}
.hero__atmos{position:absolute;inset:-4% 0;z-index:0;background:url('../img/wood-atmos-2200.webp') center/cover no-repeat;
  filter:brightness(.74) saturate(1.08);will-change:transform}
.hero__atmos::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,5,0,.92),rgba(10,5,0,.38) 46%,rgba(10,5,0,.64))}
.hero__light{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(120% 95% at var(--lx,24%) var(--ly,16%),rgba(226,183,133,.24),rgba(140,92,48,.08) 36%,transparent 66%)}
.hero__vignette{position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 280px 80px rgba(7,3,0,.82)}
.hero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(440px circle at var(--cx,70%) var(--cy,40%),rgba(226,183,133,.12),transparent 62%);opacity:0;transition:opacity .4s}
.hero__lines{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.8}
.hero__lines path{fill:none;stroke:rgba(232,196,150,.55);stroke-width:1.3}
.hero__grid{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,66px);align-items:center;width:100%}
/* tipografia com hierarquia feroz */
.hero__kicker{display:inline-flex;align-items:center;gap:14px;font-family:'Inter';font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--areia-mute)}
.hero__kicker .hair{width:34px;height:1px;background:linear-gradient(90deg,var(--mel),transparent);transform-origin:left;display:inline-block}
.hero h1{margin:26px 0 0;line-height:1.0;letter-spacing:-.02em}
.hero h1 .l{display:block}
.hero h1 .h1-top{font-family:'Fraunces';font-weight:400;font-variation-settings:'opsz' 50;font-size:clamp(1.5rem,3.2vw,2.5rem);color:var(--areia-mute)}
.hero h1 .word{font-family:'Fraunces';font-style:italic;font-weight:400;font-variation-settings:'opsz' 144;font-size:clamp(3.2rem,8.4vw,6.6rem);color:var(--areia);letter-spacing:-.025em;line-height:.94;margin:.04em 0;position:relative}
.hero h1 .h1-sub{font-family:'Fraunces';font-weight:380;font-variation-settings:'opsz' 40;font-size:clamp(1.4rem,2.8vw,2.2rem);color:var(--areia);line-height:1.06;margin-top:.14em}
.hero__lead{font-size:clamp(1.04rem,1.4vw,1.18rem);margin:28px 0 34px;max-width:44ch;color:var(--areia-mute);line-height:1.62;text-wrap:pretty}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero__seals{display:flex;gap:26px;margin-top:32px;flex-wrap:wrap;font-size:.86rem;color:var(--areia-mute)}
.hero__seals span{padding-left:13px;border-left:2px solid;border-image:linear-gradient(var(--mel),transparent) 1}
.hero__seals b{font-family:'Fraunces';color:var(--areia);font-variation-settings:'opsz' 40;font-weight:560}
/* placa cutout flutuante (a luz recorta, nao a borda) */
.hero__stage{position:relative;justify-self:center;width:100%;max-width:540px;perspective:1500px}
.hero__plaque{position:relative;width:100%;transform:rotateZ(-2deg);transform-style:preserve-3d;will-change:transform}
.hero__plaque img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 26px rgba(226,183,133,.22)) drop-shadow(0 8px 14px rgba(0,0,0,.62)) drop-shadow(0 46px 64px rgba(7,3,0,.72));will-change:transform,filter}
.hero__plaque::before{content:'';position:absolute;inset:-16% -10%;z-index:-1;
  background:radial-gradient(56% 52% at 50% 46%,rgba(232,196,150,.44),rgba(176,124,72,.16) 54%,transparent 74%);filter:blur(42px)}
.hero__sweep{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;border-radius:inherit;
  background:linear-gradient(100deg,transparent 38%,rgba(232,196,150,.6) 50%,transparent 62%);transform:translateX(-65%);opacity:0;will-change:transform,opacity}
.hero__dust{position:absolute;inset:-6%;z-index:2;pointer-events:none;overflow:visible}
.hero__dust i{position:absolute;width:4px;height:4px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(245,224,192,.95),rgba(226,183,133,.42) 48%,transparent 72%);box-shadow:0 0 6px rgba(232,196,150,.5)}
.hero__scroll{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:8px;color:var(--areia-mute);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.hero__scroll svg{width:22px;height:34px}
.hero__scroll line{stroke:var(--mel);stroke-width:2;stroke-linecap:round;animation:scrollLine 1.8s ease-in-out infinite}
@keyframes scrollLine{0%{stroke-dashoffset:18}50%{stroke-dashoffset:0}100%{stroke-dashoffset:18}}

/* ============================================================
   HERO minimalista — logo do cliente ENTALHADA (baixo relevo) + slogan + CTA
   ============================================================ */
.hero--mark{min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#231507}
/* superfície de madeira (uma só) + vinheta — foco minimalista, sem poluir */
.hero__surface{position:absolute;inset:0;z-index:0;background:url('../img/wood-grain-1800.webp') center/cover}
.hero__surface::after{content:'';position:absolute;inset:0;background:radial-gradient(125% 105% at 50% 34%,rgba(10,5,0,.12),rgba(10,5,0,.62) 70%,rgba(10,5,0,.82) 100%)}
/* foto do artesão ao fundo — bem fraca, "tipo lembrança" */
.hero__photo{position:absolute;inset:0;z-index:0;pointer-events:none;background:url('../img/artisan-hero.webp') center/cover;opacity:.22;mix-blend-mode:soft-light;
  -webkit-mask:radial-gradient(125% 105% at 50% 42%,#000 38%,transparent 80%);mask:radial-gradient(125% 105% at 50% 42%,#000 38%,transparent 80%)}
.hero__halo{position:absolute;left:50%;top:36%;width:80%;height:64%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,224,192,.16),transparent 72%)}
.hero--mark .hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(28px,4.4vh,52px);padding:clamp(96px,12vh,132px) 24px clamp(70px,9vh,104px);max-width:980px}
/* a LOGO entalhada: máscara da silhueta real + madeira escura no sulco + bisel (luz embaixo, sombra em cima = baixo relevo) */
.hero__mark{display:block;width:min(640px,87vw);height:auto;color:#dcc09a;
  filter:drop-shadow(0 -1px 0.5px rgba(7,3,0,.55)) drop-shadow(0 1.6px 0.6px rgba(245,224,192,.42)) drop-shadow(0 7px 16px rgba(7,3,0,.45))}
.hero--mark .hero__slogan{margin:0;font-family:'Fraunces';font-weight:400;font-size:clamp(1.14rem,2vw,1.55rem);line-height:1.45;color:var(--areia-mute);max-width:34ch;text-wrap:balance;text-shadow:0 2px 16px rgba(7,3,0,.6)}
.hero--mark .hero__slogan em{font-style:italic;color:var(--areia)}
.hero--mark .hero__ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:4px}
/* botão secundário legível no marrom (era carvão = sumia) */
.hero--mark .btn-ghost{border-color:rgba(242,221,204,.45);color:var(--areia)}
.hero--mark .btn-ghost:hover{border-color:var(--areia);background:rgba(242,221,204,.08)}
@media(max-width:600px){.hero__mark{width:min(440px,90vw)}}
/* CTA WhatsApp dominante — descanso calmo (a entrada dá UMA respirada via GSAP, sem loop) */
.btn-zap--xl{font-size:1.06rem;padding:18px 32px;border-radius:16px;font-weight:700;box-shadow:0 14px 34px -16px rgba(31,168,85,.45)}
.btn-zap--xl svg{width:22px;height:22px}

/* ---- MOTION do hero (entrada que entalha + brilho + sulco) ---- */
.hero__word{will-change:clip-path,transform}
.hero__sheen{position:absolute;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:soft-light;will-change:background-position,opacity;
  background:linear-gradient(105deg,transparent 43%,rgba(245,224,192,.85) 50%,transparent 57%);background-size:280% 100%;background-position:160% 0;
  -webkit-mask:linear-gradient(105deg,transparent 41%,#000 50%,transparent 59%);mask:linear-gradient(105deg,transparent 41%,#000 50%,transparent 59%)}
.hero__slogan .sln-mask{overflow:hidden}
.hero__slogan .sln{will-change:transform}
.hero--mark .hero__slogan em{position:relative}
.hero__groove{position:absolute;left:0;bottom:-0.2em;width:100%;height:12px;overflow:visible;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hero__sheen,.hero__groove{display:none}}

/* ============================================================
   MARQUEE de nomes entalhados (autoridade)
   ============================================================ */
.marquee{background:var(--carvao-2);border-top:1px solid var(--linha-areia);border-bottom:1px solid var(--linha-areia);overflow:hidden;padding:18px 0}
.marquee__track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:'Fraunces';font-style:italic;font-variation-settings:'opsz' 40;font-size:1.15rem;color:var(--areia-mute);padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.marquee__track span::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--mel);opacity:.7}
@keyframes marquee{to{transform:translateX(-50%)}}

/* GRAO DE MADEIRA — secoes ESCURAS ganham fibra viva (Raphael aprovou); CLARAS voltam ao creme limpo */
@keyframes texdrift{0%,100%{transform:translate3d(-7%,-5%,0) scale(1.18)}50%{transform:translate3d(9%,6%,0) scale(1.32)}}
/* secoes escuras (bancada): fibra creme em screen sobre o carvao — MANTIDO */
.wood-tex{position:relative;isolation:isolate;background-color:var(--carvao)}
.wood-tex::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('../img/wood-fiber-light.svg') 0 0/440px 440px repeat,
            url('../img/wood-grain-1800.webp') center/cover;
  background-blend-mode:soft-light,normal;opacity:.5;mix-blend-mode:screen}
.wood-tex::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(54% 46% at 28% 18%,rgba(226,183,133,.22),transparent 66%);
  mix-blend-mode:screen;animation:texdrift 23s ease-in-out infinite;will-change:transform}
/* secoes claras: creme limpo + grao MUITO sutil (revertido — sem papel-de-parede falso) */
.light-tex{position:relative;isolation:isolate;background-color:var(--paper)}
.light-tex::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('../img/wood-grain-1800.webp') center/cover;opacity:.12;mix-blend-mode:multiply}
/* underline que se entalha nos links de nav */
.nav ul a{position:relative}
.nav ul a::after{content:'';position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;
  background:linear-gradient(90deg,var(--mel),var(--ambar));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav ul a:hover::after{transform:scaleX(1)}

/* ============================================================
   TRUST strip (count-up)
   ============================================================ */
.trust{background:var(--carvao-2);color:var(--areia);border-top:1px solid var(--linha-areia)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:30px 28px}
.trust .item b{font-family:'Fraunces';font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1;display:block}
.trust .item span{font-size:.82rem;color:rgba(242,221,204,.62);margin-top:4px;display:block}

/* ============================================================
   SECTIONS base
   ============================================================ */
section{padding:clamp(66px,9vw,120px) 0;position:relative}
.dark{background:var(--carvao);color:var(--areia)}
.sec-head{max-width:680px;margin:0 auto 54px;text-align:center}
.sec-head h2{font-size:clamp(2rem,4vw,3.1rem);margin:12px 0 0}
.sec-head p{font-size:1.08rem;color:var(--tinta-70);margin-top:15px}
/* linha gráfica que se desenha sob o título ao rolar + brilho que corre (motion graphic vivo) */
@keyframes lineglint{to{background-position:-220% 0}}
.sec-head::after{content:'';display:block;width:88px;height:2px;margin:22px auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--mel),var(--ambar),var(--mel),transparent);
  background-size:220% 100%;animation:lineglint 3.2s linear infinite;
  transform:scaleX(0);transform-origin:center;transition:transform .9s var(--ease-out)}
.sec-head.head-in::after{transform:scaleX(1)}
html:not(.js) .sec-head::after{transform:scaleX(1)}
.dark .sec-head::after,.proc .sec-head::after{background:linear-gradient(90deg,transparent,var(--ambar),var(--areia),var(--ambar),transparent);background-size:220% 100%}
.dark .sec-head p{color:rgba(242,221,204,.66)}

/* premium frame util (sombra de catálogo + mat) */
.framed{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--sombra-cat)}
.framed::after{content:'';position:absolute;inset:0;border:1px solid rgba(242,221,204,.1);border-radius:16px;
  box-shadow:inset 0 0 60px -20px rgba(10,5,0,.6);pointer-events:none}

/* aplicações */
/* linha de luz girando 360 graus (borda viva das molduras) */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes borderspin{to{--a:360deg}}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--linha);border-radius:16px;overflow:visible;transform-style:preserve-3d;
  box-shadow:0 14px 34px -12px rgba(10,5,0,.5),0 3px 8px rgba(10,5,0,.18);
  transition:transform .4s var(--ease-out),box-shadow .4s}
.card:hover{box-shadow:0 26px 56px -16px rgba(10,5,0,.6),0 4px 10px rgba(10,5,0,.22)}
/* linha de luz girando 360 graus em volta da moldura */
.card::before{content:'';position:absolute;inset:-2px;border-radius:18px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),transparent 0deg,var(--mel) 34deg,var(--ambar) 70deg,transparent 120deg,transparent 360deg);
  animation:borderspin 5s linear infinite}
.card .body{border-radius:0 0 16px 16px}
.card .ph{aspect-ratio:4/3;overflow:hidden;position:relative;cursor:zoom-in}
.card .ph::after{content:"";position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:50%;background:rgba(7,3,0,.45) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>') center/14px no-repeat;backdrop-filter:blur(4px);pointer-events:none}
.carousel__item figure,.gal figure,.proc-panel img,.split-media img,figure.body-fig img{cursor:zoom-in}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.card:hover .ph img{transform:scale(1.06)}
.card .body{padding:22px 22px 26px}
.card h3{font-size:1.2rem}
.card p{margin-top:9px;color:var(--tinta-50);font-size:.94rem}

/* à mão × máquina + before/after */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,62px);align-items:center}
.split h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:14px 0 18px}
.split p{font-size:1.06rem;color:var(--tinta-86);margin-bottom:16px}
.minifeats{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.minifeat{display:flex;gap:14px;align-items:flex-start}
.minifeat .ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(145deg,#F7EFE6,#E4CBA9);display:grid;place-items:center;flex:none;
  box-shadow:0 7px 16px -5px rgba(10,5,0,.4),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 5px rgba(10,5,0,.12);
  animation:icobob 5s ease-in-out infinite;transition:transform .4s var(--ease-out)}
.minifeat:nth-child(2) .ic{animation-delay:.7s}.minifeat:nth-child(3) .ic{animation-delay:1.4s}
.minifeat:hover .ic{transform:translateY(-3px) rotate(-5deg) scale(1.06)}
@keyframes icobob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.minifeat .ic svg{width:22px;height:22px;stroke:var(--carvao);fill:none;stroke-width:1.8}
.minifeat b{font-family:'Fraunces';font-size:1.05rem}
.minifeat span{font-size:.92rem;color:var(--tinta-50);display:block}
.ba{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--sombra-cat);user-select:none;touch-action:none;aspect-ratio:4/5}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 calc(100% - var(--reveal,50%)) 0 0)}
.ba__after.is-raw{filter:saturate(.25) brightness(.82) contrast(1.05)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--reveal,50%);width:2px;background:var(--areia);transform:translateX(-1px);z-index:3;box-shadow:0 0 0 1px rgba(10,5,0,.3)}
.ba__handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;
  background:var(--areia);box-shadow:var(--sombra-sm);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%230A0500' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4}
.ba__tag{position:absolute;bottom:14px;z-index:3;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  background:rgba(10,5,0,.6);color:var(--areia);padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.ba__tag.l{left:14px}.ba__tag.r{right:14px}

/* ============================================================
   PROCESSO — scroll horizontal pinado "Da árvore ao portão"
   ============================================================ */
.proc{background:var(--carvao);color:var(--areia);padding:0;overflow:hidden}
.proc__wrap{height:100vh;display:flex;flex-direction:column;justify-content:center}
.proc__head{padding:38px 28px 10px;max-width:var(--maxw);margin:0 auto;width:100%}
.proc__head h2{font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--areia)}
.proc__head p{color:rgba(242,221,204,.6);margin-top:8px}
.proc__track{display:flex;gap:30px;padding:30px 28px;will-change:transform}
.proc-panel{position:relative;flex:none;width:min(70vw,560px);border-radius:18px;overflow:hidden;box-shadow:var(--sombra-cat);
  border:1px solid var(--linha-areia)}
.proc-panel img{width:100%;height:62vh;max-height:560px;object-fit:cover}
.proc-panel__n{position:absolute;top:18px;left:20px;font-family:'Fraunces';font-size:1.1rem;color:var(--areia);
  background:rgba(10,5,0,.55);padding:4px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.proc-panel__c{position:absolute;left:0;right:0;bottom:0;padding:50px 24px 24px;
  background:linear-gradient(to top,rgba(10,5,0,.92),rgba(10,5,0,.5) 55%,transparent)}
.proc-panel__c h3{font-size:1.4rem;color:var(--areia)}
.proc-panel__c p{font-size:.96rem;color:rgba(242,221,204,.8);margin-top:7px;max-width:42ch}
.proc-cursor{position:fixed;z-index:9995;pointer-events:none;transform:translate(-50%,-50%) scale(0);
  background:var(--areia);color:var(--carvao);font-size:.7rem;font-weight:700;letter-spacing:.12em;padding:13px 16px;border-radius:999px;
  transition:transform .3s var(--ease-out)}
.proc-cursor.on{transform:translate(-50%,-50%) scale(1)}

/* ============================================================
   GALERIA — carrossel 3D (roda em pé) das placas INSTALADAS (prova social)
   ============================================================ */
.carousel{background:radial-gradient(125% 100% at 50% -12%,#2A1B10,#170D04 55%,#0E0703);overflow:hidden}
.carousel__head{text-align:center;margin-bottom:40px}
.carousel__head h2{font-size:clamp(2rem,4vw,3rem);color:var(--areia)}
.carousel__head p{color:rgba(242,221,204,.62);margin-top:12px}
.carousel__viewport{position:relative}
.carousel__wheel{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}      /* fallback flat (sem JS/mobile) */
.carousel__item{width:clamp(260px,30vw,420px);flex:none}
.carousel__item figure{position:relative;margin:0;border-radius:14px;background:#1A0F06;
  box-shadow:0 4px 8px rgba(7,3,0,.55),0 30px 54px -18px rgba(7,3,0,.88)}
.carousel__item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:14px 14px 0 0}
/* borda de luz girando 360 graus em volta da placa */
.carousel__item figure::before{content:'';position:absolute;inset:-2px;border-radius:16px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),transparent 0deg,var(--mel) 38deg,var(--ambar) 84deg,transparent 140deg,transparent 360deg);
  animation:borderspin 6.5s linear infinite}
.carousel__item figcaption{padding:12px 14px 14px;text-align:center;font-family:'Fraunces';font-style:italic;font-variation-settings:'opsz' 30;
  font-size:1rem;color:var(--areia);border-radius:0 0 14px 14px;background:linear-gradient(rgba(20,12,5,0),rgba(10,5,0,.4))}
/* modo 3D (roda por arrasto — mouse + toque) */
.carousel__viewport.is-3d{height:64vh;perspective:1250px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.carousel__viewport.is-3d.grabbing{cursor:grabbing}
.carousel__wheel.is-3d{display:block;position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.carousel__wheel.is-3d .carousel__item{position:absolute;top:50%;left:50%;margin:0;backface-visibility:hidden;will-change:transform,opacity}
.carousel__wheel.is-3d .carousel__item img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.carousel__wheel.is-3d .carousel__item figure{cursor:pointer}
.carousel__hint{text-align:center;margin-top:26px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--areia-mute)}
.carousel__hint span{color:var(--mel)}
@media (max-width:600px){ .carousel__viewport.is-3d{height:52vh;perspective:900px} }

/* história resumida */
.story .split-media img{width:100%;border-radius:16px;box-shadow:var(--sombra-cat);aspect-ratio:5/4;object-fit:cover;will-change:transform}
.story .sign{font-family:'Fraunces';font-style:italic;font-size:1.05rem;color:var(--tinta-50);margin-top:8px}

/* prova social */
.prova-rating{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--linha);border-radius:999px;padding:9px 19px;font-weight:600}
.prova-rating .n{font-family:'Fraunces';font-size:1.25rem}.prova-rating .st{letter-spacing:2px}
.prova-top{text-align:center;margin-bottom:14px}
.deps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.dep{position:relative;overflow:hidden;background:#fff;border:1px solid var(--linha);border-radius:15px;padding:27px 23px 25px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 16px 40px -16px rgba(10,5,0,.42),0 4px 11px rgba(10,5,0,.14);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.dep:hover{transform:translateY(-5px);box-shadow:0 30px 64px -18px rgba(10,5,0,.5),0 7px 16px rgba(10,5,0,.2)}
.dep::before{content:'';position:absolute;top:0;left:0;height:3px;width:100%;
  background:linear-gradient(90deg,transparent,var(--mel),var(--ambar),var(--mel),transparent);
  background-size:220% 100%;animation:lineglint 3.6s linear infinite}
.dep .st{letter-spacing:1px;font-size:.95rem}.dep p{font-size:1rem;line-height:1.56}
.dep .who{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:.9rem}
.dep .av{width:36px;height:36px;border-radius:50%;background:var(--carvao);color:var(--areia);display:grid;place-items:center;font-family:'Fraunces';font-weight:600;flex:none}
.dep .who b{font-weight:600}.dep .who span{color:var(--tinta-50);font-size:.8rem}

/* faq */
.faq{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--linha);transition:border-color .35s}
.qa[open]{border-bottom-color:rgba(200,148,90,.55)}
.qa summary{list-style:none;cursor:pointer;padding:23px 2px;font-family:'Montserrat',system-ui,sans-serif;font-size:1.06rem;font-weight:700;
  letter-spacing:-.01em;color:var(--carvao);display:flex;justify-content:space-between;gap:18px;align-items:center;transition:color .25s}
.qa summary:hover{color:var(--nogueira)}
.qa summary::-webkit-details-marker{display:none}
/* marcador "+" em medalhão de madeira (cor no destaque) que gira pra x e preenche ao abrir */
.qa summary::after{content:"+";font-family:'Montserrat',sans-serif;font-weight:600;font-size:1.18rem;line-height:1;color:var(--mel);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(200,148,90,.5);background:rgba(200,148,90,.06);
  transition:transform .4s var(--ease-out),background .3s,color .3s,border-color .3s;flex:none}
.qa summary:hover::after{border-color:var(--mel);background:rgba(200,148,90,.14)}
.qa[open] summary::after{transform:rotate(45deg);background:var(--mel);color:var(--carvao);border-color:var(--mel)}
.qa p{padding:2px 0 26px;font-family:'Montserrat',system-ui,sans-serif;font-weight:400;font-size:.97rem;line-height:1.66;color:var(--tinta-86);max-width:70ch}
.qa p strong{font-weight:600;color:var(--carvao)}

/* CTA final aurora */
.final{position:relative;color:var(--areia);text-align:center;border-radius:28px;margin-top:8px;
  background:radial-gradient(120% 140% at 30% 0%,#2C1C10,#170D04 52%,#0E0703);
  box-shadow:0 34px 80px -30px rgba(7,3,0,.9),0 6px 16px rgba(7,3,0,.45)}
/* borda de luz girando 360 graus */
.final::before{content:'';position:absolute;inset:-2px;border-radius:30px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),transparent 0deg,var(--mel) 40deg,var(--ambar) 90deg,transparent 150deg,transparent 360deg);
  animation:borderspin 6s linear infinite}
.final-in{position:relative;z-index:1;padding:clamp(56px,8vw,86px) 24px}
.final h2{font-size:clamp(2.1rem,4.4vw,3.3rem);color:var(--areia)}
.final p{font-size:1.12rem;color:rgba(242,221,204,.74);margin:16px auto 30px;max-width:50ch}

/* footer */
footer{background:#070300;color:rgba(242,221,204,.7);padding:60px 0 30px}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:34px}
.foot-grid .brand .name{color:var(--areia)}.foot-grid .brand .tag{color:rgba(242,221,204,.6)}
footer a{transition:color .2s}footer a:hover{color:var(--areia)}
.foot-links{display:flex;gap:50px;font-size:.93rem}
.foot-links h3{color:var(--areia);font-family:'Fraunces';font-weight:600;margin-bottom:13px;font-size:.98rem}
.foot-links ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-bot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(242,221,204,.12);font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* float whatsapp */
.zap-float{position:fixed;right:20px;bottom:20px;z-index:80;width:60px;height:60px;border-radius:50%;background:var(--zap);
  display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(31,168,85,.7);transition:transform .25s var(--ease-out)}
.zap-float:hover{transform:scale(1.08)}.zap-float svg{width:32px;height:32px;fill:#fff}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(7,3,0,.93);z-index:9100;display:none;place-items:center;padding:28px}
.lb.on{display:grid}.lb img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:var(--sombra-cat)}
.lb .x{position:absolute;top:20px;right:26px;color:#fff;font-size:2.3rem;cursor:pointer;width:46px;height:46px;display:grid;place-items:center}

/* ============================================================
   /historia
   ============================================================ */
.back{font-weight:500;font-size:.92rem;color:rgba(242,221,204,.82)}.nav.sc .back{color:var(--tinta-70)}.back:hover{opacity:1}
.hist-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;color:var(--areia);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#241608,#0A0500 70%)}
.hist-hero__media{position:absolute;inset:0;z-index:0}
.hist-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.42;will-change:transform}
.hist-hero__media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,5,0,.95),rgba(10,5,0,.35) 60%,rgba(10,5,0,.6))}
.hist-hero__in{position:relative;z-index:2;padding-bottom:64px}
.hist-hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);color:var(--areia);max-width:18ch;margin-top:14px}
.hist-hero .sub{font-size:clamp(1.08rem,1.5vw,1.2rem);color:rgba(242,221,204,.82);margin-top:18px;max-width:56ch}
.body-sec{padding:clamp(56px,8vw,88px) 0}
.body-sec h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 18px}
.body-sec p{font-size:1.1rem;color:var(--tinta-86);margin-bottom:18px}
.body-fig{margin:32px 0 4px}
.body-fig img{width:100%;border-radius:16px;box-shadow:var(--sombra-sm);aspect-ratio:16/9;object-fit:cover}
.body-fig .cap{font-size:.82rem;color:var(--tinta-50);margin-top:10px;font-style:italic}
.pull{font-family:'Fraunces';font-style:italic;font-size:clamp(1.35rem,2.5vw,1.7rem);line-height:1.34;border-left:3px solid var(--carvao);padding:8px 0 8px 26px;margin:38px 0}
/* timeline com linha desenhando ao rolar (DrawSVG) */
.timeline{background:var(--carvao);color:var(--areia);padding:clamp(60px,9vw,96px) 0;position:relative}
.timeline h2{color:var(--areia);font-size:clamp(1.8rem,3vw,2.5rem);margin:12px 0 46px}
.tl{position:relative;display:grid;gap:0;padding-left:42px}
.tl__line{position:absolute;left:10px;top:6px;bottom:6px;width:2px;overflow:visible}
.tl__line path{stroke:var(--areia);stroke-width:2;fill:none;opacity:.85}
.tl-item{position:relative;padding:22px 0 22px 0;border-top:1px solid var(--linha-areia)}
.tl-item:first-child{border-top:none}
.tl-item::before{content:'';position:absolute;left:-37px;top:28px;width:11px;height:11px;border-radius:50%;background:var(--areia)}
.tl-item .yr{font-family:'Fraunces';font-size:1.4rem;color:var(--areia);opacity:.85}
.tl-item h3{color:var(--areia);font-size:1.2rem;margin:4px 0 6px}
.tl-item p{color:rgba(242,221,204,.74);font-size:.98rem}
.values{padding:clamp(56px,8vw,88px) 0;background:var(--areia)}
.values .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.val{background:var(--paper);border:1px solid var(--linha);border-radius:16px;padding:28px 24px}
.val .ic{width:50px;height:50px;border-radius:13px;background:linear-gradient(145deg,#FFFFFF,#EAD9C6);display:grid;place-items:center;margin-bottom:15px;
  box-shadow:0 7px 16px -5px rgba(10,5,0,.35),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 5px rgba(10,5,0,.1);
  animation:icobob 5s ease-in-out infinite;transition:transform .4s var(--ease-out)}
.val:nth-child(2) .ic{animation-delay:.7s}.val:nth-child(3) .ic{animation-delay:1.4s}
.val:hover .ic{transform:translateY(-3px) rotate(-5deg) scale(1.06)}
.val .ic svg{width:24px;height:24px;stroke:var(--carvao);fill:none;stroke-width:1.8}
.val h3{font-size:1.14rem;margin-bottom:7px}.val p{color:var(--tinta-50);font-size:.95rem}
.foot-simple{background:#070300;color:rgba(242,221,204,.7);padding:42px 0;text-align:center;font-size:.85rem}
.foot-simple a:hover{color:var(--areia)}

/* ============================================================
   MOTION GRAPHICS — sistema vivo (linhas/luz que enchem os olhos)
   Paleta travada: luz de madeira (mel/ambar/areia) como brilho. ZERO laranja.
   ============================================================ */
/* DEVICE 1 — badge AO VIVO NA OFICINA */
.live{position:fixed;left:18px;bottom:20px;z-index:79;display:inline-flex;align-items:center;gap:10px;padding:9px 15px 9px 13px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.08em;color:var(--areia);background:rgba(10,5,0,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(226,183,133,.28);box-shadow:0 10px 30px -12px rgba(7,3,0,.7);transform:translateY(14px);opacity:0;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.live.in{opacity:1;transform:none}
.live__dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--ambar);flex:none;box-shadow:0 0 8px rgba(226,183,133,.9);animation:liveCore 1.8s ease-in-out infinite}
.live__dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--mel);animation:liveRing 1.8s ease-out infinite}
@keyframes liveCore{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.65}}
@keyframes liveRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.live__txt{white-space:nowrap;text-transform:uppercase}
@media(max-width:600px){.live__txt{display:none}.live{padding:9px;left:14px;bottom:84px}}

/* DEVICE 2 — carved-groove divider */
.groove{position:relative;height:26px;width:100%;overflow:hidden;pointer-events:none;background:var(--paper)}
.groove::before{content:'';position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);background:linear-gradient(180deg,rgba(10,5,0,.04),rgba(10,5,0,.34) 45%,rgba(255,255,255,.5) 56%,rgba(10,5,0,.06));box-shadow:0 1px 0 rgba(255,255,255,.4)}
.groove::after{content:'';position:absolute;top:0;bottom:0;left:0;width:240px;background:linear-gradient(90deg,transparent,rgba(226,183,133,0) 20%,rgba(232,196,150,.85) 50%,rgba(226,183,133,0) 80%,transparent);mix-blend-mode:screen;transform:translateX(-260px);animation:grooveGlint 6.5s var(--ease-io) infinite;will-change:transform}
@keyframes grooveGlint{0%{transform:translateX(-260px)}100%{transform:translateX(calc(100vw + 260px))}}

/* DEVICE 3 — scanline da placa (hero) */
.hero__scan{position:absolute;left:-4%;right:-4%;top:0;height:3px;pointer-events:none;mix-blend-mode:screen;border-radius:2px;opacity:0;background:linear-gradient(90deg,transparent,rgba(226,183,133,.85) 30%,var(--areia) 50%,rgba(226,183,133,.85) 70%,transparent);box-shadow:0 0 14px 2px rgba(226,183,133,.5);animation:plaqueScan 5.5s var(--ease-io) infinite;animation-delay:3s;will-change:transform,opacity}
@keyframes plaqueScan{0%{transform:translateY(0);opacity:0}12%{opacity:.55}50%{opacity:.55}88%{opacity:.55}100%{transform:translateY(var(--scanH,360px));opacity:0}}

/* DEVICE 4 — volumetric workshop beam (processo) */
.cda-beam{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.cda-beam::before{content:'';position:absolute;top:-30%;left:8%;width:52%;height:160%;transform-origin:top center;transform:rotate(14deg);background:linear-gradient(180deg,rgba(232,196,150,.5),rgba(226,183,133,.12) 55%,transparent 85%);filter:blur(34px);will-change:opacity,transform;animation:cdaBeamPulse 11s ease-in-out infinite,cdaBeamSway 17s ease-in-out infinite}
@keyframes cdaBeamPulse{0%,100%{opacity:.06}50%{opacity:.20}}
@keyframes cdaBeamSway{0%,100%{transform:rotate(11deg)}50%{transform:rotate(17deg)}}
@media(max-width:600px){.cda-beam::before{filter:blur(22px)}}

/* DEVICE 5 — ambient light motes (serragem na luz) */
.cda-motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cda-mote{position:absolute;border-radius:50%;opacity:0;will-change:transform,opacity;background:radial-gradient(circle,rgba(245,224,192,.95),rgba(226,183,133,.4) 45%,transparent 72%)}
.cda-mote.s{width:3px;height:3px}
.cda-mote.m{width:5px;height:5px;box-shadow:0 0 7px rgba(232,196,150,.45)}
.cda-mote.l{width:8px;height:8px;box-shadow:0 0 12px rgba(232,196,150,.55)}
@keyframes cdaDriftA{0%{transform:translate(0,0);opacity:0}12%{opacity:.32}50%{transform:translate(34px,-60px)}88%{opacity:.32}100%{transform:translate(70px,-128px);opacity:0}}
@keyframes cdaDriftB{0%{transform:translate(0,0);opacity:0}15%{opacity:.28}50%{transform:translate(-46px,-44px)}85%{opacity:.28}100%{transform:translate(-90px,-96px);opacity:0}}
@keyframes cdaDriftC{0%{transform:translate(0,0);opacity:0}18%{opacity:.35}50%{transform:translate(22px,-72px)}82%{opacity:.35}100%{transform:translate(40px,-150px);opacity:0}}

/* DEVICE 6 — corner brackets que desenham e respiram */
.frames{position:absolute;inset:-18px;pointer-events:none;z-index:0}
.frames .br{position:absolute;width:30px;height:30px;overflow:visible}
.frames .bri{display:block;width:100%;height:100%}
.frames .br path{fill:none;stroke:var(--mel);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(226,183,133,.35))}
.dark .frames .br path,.proc .frames .br path,.final .frames .br path{stroke:var(--ambar)}
.frames .tl{top:0;left:0}
.frames .tr{top:0;right:0;transform:scaleX(-1)}
.frames .bl{bottom:0;left:0;transform:scaleY(-1)}
.frames .br2{bottom:0;right:0;transform:scale(-1)}
@keyframes brBreath{0%,100%{transform:translate(0,0);opacity:.7}50%{transform:translate(-3px,-3px);opacity:1}}
.frames.lit .bri{animation:brBreath 3.4s var(--ease-io) infinite}
.frames .tr .bri,.frames .bl .bri{animation-delay:.5s}
.frames .br2 .bri{animation-delay:.9s}

/* DEVICE 7 — linha de grão que se desenha + glint correndo */
.cda-grain-div{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:40px;position:relative}
.cda-grain-div svg{width:100%;height:40px;display:block;overflow:visible}
.cda-grain-base{fill:none;stroke:var(--mel);stroke-width:1.4;stroke-linecap:round;opacity:.42}
.cda-grain-glint{fill:none;stroke:var(--ambar);stroke-width:1.9;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(226,183,133,.65))}

/* DEVICE 8 — luz de lâmpada passando no marquee */
.marquee{position:relative;isolation:isolate}
.marquee::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(105deg,transparent 35%,rgba(232,196,150,.22) 50%,transparent 65%);background-size:240% 100%;animation:cdaMarqLight 5s linear infinite}
@keyframes cdaMarqLight{to{background-position:-240% 0}}

/* ============================================================
   REDUCED MOTION — desliga tudo, conteúdo visível
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  body::after{animation:none}
  .final::before,.hero__scroll line,.marquee__track,.card::before,.carousel__item figure::before,.minifeat .ic,.val .ic,
  .light-tex::after,.wood-tex::after,.sec-head::after,.dep::before,
  .live__dot,.live__dot::after,.groove::after,.hero__scan,.cda-beam::before,.frames.lit .bri,.marquee::after,.btn-zap--xl{animation:none!important}
  .hero__dust,.cda-motes{display:none}
  .live{opacity:1;transform:none}
  .hero__scan{opacity:0!important}
  .cda-beam::before{opacity:.10!important}
  .frames .br path,.cda-grain-base,.cda-grain-glint{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .marquee::after{opacity:0!important}
  html.js .reveal,html.js .reveal.is-in,html.js .reveal-stagger>*,html.js .reveal-stagger.is-in>*{opacity:1!important;transform:none!important;transition:none!important}
  #cur-dot,#cur-ring{display:none!important}
  *{scroll-behavior:auto!important}
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1000px){
  .hero__grid,.split{grid-template-columns:1fr;gap:38px}
  .hero__stage{order:-1;max-width:440px;margin-top:8px}
  .hero h1 .word{font-size:clamp(3rem,13vw,4.6rem)}
  .trust .wrap{grid-template-columns:repeat(2,1fr);gap:24px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .carousel__item{width:clamp(280px,44vw,420px)}
  .deps{grid-template-columns:1fr}
  .values .grid{grid-template-columns:1fr}
  .nav ul{display:none}
}
@media (max-width:600px){
  .wrap,.narrow{padding:0 20px}
  .cards{grid-template-columns:1fr}
  /* carrossel: scroll horizontal com snap (swipe pros dois lados), sem coverflow 3D apertado */
  .carousel__viewport{height:auto}
  .carousel__wheel{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;justify-content:flex-start;padding:4px 2px 16px;scrollbar-width:none}
  .carousel__wheel::-webkit-scrollbar{display:none}
  .carousel__item{width:84vw;flex:none;scroll-snap-align:center}
  .frames{display:none}   /* cantoneiras vazavam a borda no mobile */
  .hero{min-height:auto;padding:108px 0 60px}
  /* processo: horizontal vira vertical no mobile (JS desabilita o pin) */
  .proc__wrap{height:auto}
  .proc__track{flex-direction:column;transform:none!important;padding:24px 18px}
  .proc-panel{width:100%}
  .proc-panel img{height:54vh}
  .foot-links{gap:30px}
  .hero__ctas .btn{flex:1;justify-content:center}
}