/* fx.css — camada de efeitos temáticos por setor (scroll-driven via JS). Anti-colisão: só adiciona. */
.fx-sparks{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero .h-in{position:relative;z-index:3}
[data-effect="ember"] .hero .hero-img,[data-effect="ember"] .hero .glow{will-change:transform}
/* fold */
.foldstage{overflow:hidden;perspective:1000px}
.foldsheet{transform-style:preserve-3d;will-change:transform}
.foldsheet span{will-change:transform;backface-visibility:hidden}
/* beam */
.beamwrap{position:relative}
.beamwrap .beamline{will-change:top,transform}
.fx-beamdot{position:absolute;left:0;right:0;height:0;pointer-events:none;z-index:4}
.fx-beamdot::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 22px 6px var(--accent),0 0 40px 10px var(--accent2);transform:translateX(-50%)}
/* sheen */
.sheenstage{overflow:hidden}
.sheenstage img{will-change:transform}
.sheen{will-change:transform}
/* spectrum — camada de "tinta" que muda de cor conforme rola */
.fx-paint{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(50% 60% at 20% 15%,rgba(255,77,157,.25),transparent 60%),radial-gradient(55% 65% at 85% 85%,rgba(124,92,255,.25),transparent 60%),radial-gradient(50% 60% at 60% 50%,rgba(34,211,238,.16),transparent 60%);
  will-change:filter}
[data-effect="spectrum"] .hero,[data-effect="spectrum"] section{position:relative;z-index:1}
.swatches .sw{transition:transform .3s ease}
/* rail scrub cue */
[data-effect="rail"] .rail{scroll-behavior:auto}
/* locação scrollytelling overlay */
.fx-lc{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none;padding:18px min(6vw,44px)}
.fx-lc-bar{height:8px;border-radius:100px;background:rgba(255,255,255,.16);overflow:hidden;max-width:520px}
.fx-lc-bar>i{display:block;height:100%;width:6%;border-radius:100px;background:linear-gradient(90deg,var(--accent,#a3e635),#d9f99d)}
.fx-lc-ph{margin-top:10px;font:700 13px/1.2 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
@media(prefers-reduced-motion:reduce){.fx-sparks,.fx-paint,.fx-beamdot{display:none!important}
  .foldsheet span,.sheenstage img,.sheen{transform:none!important}}

/* ===== título interativo (martelo / laser / pistola / dobra nas letras) ===== */
.fx-w,.hfx-w{white-space:nowrap;display:inline-block}
.hero h1 .fx-word,.hero h1 .fx-ch{display:inline-block;position:relative;transition:color .2s,-webkit-text-fill-color .2s,transform .5s cubic-bezier(.2,.8,.2,1),text-shadow .3s}
.fx-hammer,.fx-gun{position:absolute;left:0;top:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .18s;will-change:transform}
.fx-hammer.on,.fx-gun.on{opacity:1}
.fx-hammer-i{display:block;font-size:42px;line-height:1;transform-origin:62% 82%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.fx-hammer-i.swing{animation:fxSwing .26s ease}
@keyframes fxSwing{0%{transform:rotate(-14deg)}45%{transform:rotate(42deg)}100%{transform:rotate(-14deg)}}
.fx-word.hit{animation:fxHit .3s ease}
@keyframes fxHit{0%{transform:translateY(0)}22%{transform:translateY(5px) scaleY(.9)}55%{transform:translateY(-2px)}100%{transform:none}}
.fx-impact{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;pointer-events:none;z-index:8;background:radial-gradient(circle,rgba(255,240,200,.95),rgba(255,180,40,.5) 40%,transparent 70%);border-radius:50%;animation:fxImpact .45s ease-out forwards}
@keyframes fxImpact{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.4);opacity:0}}
.fx-ch.fx-cut{color:#fff !important;-webkit-text-fill-color:#fff !important;text-shadow:0 0 6px var(--accent,#8b5cf6),0 0 15px var(--accent,#8b5cf6),0 0 2px #fff}
.fx-gun svg{display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.fx-fork{position:absolute;left:0;top:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .18s;will-change:transform;color:var(--accent,#a3e635)}
.fx-fork.on{opacity:1}
.fx-fork svg{display:block;filter:drop-shadow(0 0 5px rgba(163,230,53,.9)) drop-shadow(0 0 12px rgba(163,230,53,.5)) drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.fx-scorch{position:absolute;inset:0;z-index:5;pointer-events:none}
/* SERRALHERIA soldador */
.fx-welder{position:absolute;left:0;top:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .18s;will-change:transform}
.fx-welder.on{opacity:1}
.fx-welder svg{display:block;filter:drop-shadow(0 3px 7px rgba(0,0,0,.55))}
.fx-ch.welded{text-shadow:0 0 8px rgba(255,150,60,.55),0 0 2px rgba(255,235,190,.7)}
.fx-weldflash{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;pointer-events:none;z-index:8;background:radial-gradient(circle,rgba(230,245,255,.98),rgba(150,200,255,.6) 35%,rgba(255,170,60,.4) 60%,transparent 72%);border-radius:50%;animation:fxImpact .42s ease-out forwards}
.fx-welder .fx-legs rect{transform-origin:center top;animation:fxStep .32s linear infinite alternate}
.fx-welder .fx-legs rect:nth-child(2){animation-delay:.16s}
@keyframes fxStep{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-2px) scaleY(.82)}}
.fx-glintcur{position:absolute;left:0;top:0;z-index:9;pointer-events:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,rgba(255,240,200,.9),rgba(255,150,60,.4) 45%,transparent 72%);opacity:0;transition:opacity .15s}
.fx-glintcur.on{opacity:1}
.fx-ch.glint{animation:fxGlint .35s ease}
@keyframes fxGlint{0%{text-shadow:0 0 12px rgba(255,225,160,.95)}100%{text-shadow:none}}
@media(prefers-reduced-motion:reduce){.fx-welder .fx-legs rect{animation:none}}
/* cursor nativo some na área do efeito (só ponteiro fino; toque não tem cursor) — a "ferramenta" vira o cursor */
@media (hover:hover) and (pointer:fine){ body[data-effect] .hero, body[data-effect] .hero *, .beamwrap, .beamwrap *{cursor:none} }
/* INOX polimento espelhado */
.fx-disc{position:absolute;left:0;top:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .18s;will-change:transform;color:#cfd6dd}
.fx-disc.on{opacity:1}
.fx-disc svg{display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
.fx-disc-g{transform-origin:30px 30px;animation:fxspin .45s linear infinite}
@keyframes fxspin{to{transform:rotate(360deg)}}
.fx-ch.polished{-webkit-text-fill-color:transparent!important;color:transparent!important;background-image:linear-gradient(100deg,#cfe0ee 0%,#ffffff 42%,#8fa6b6 52%,#ffffff 66%,#d7e4ee 100%);-webkit-background-clip:text;background-clip:text;background-size:220% 100%;text-shadow:0 0 12px rgba(180,225,255,.45);animation:fxshine 2s linear infinite}
@keyframes fxshine{to{background-position:220% 0}}
.fx-shine{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;z-index:8;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(185,228,255,.5) 40%,transparent 70%);border-radius:50%;animation:fxImpact .42s ease-out forwards}
@media(prefers-reduced-motion:reduce){.fx-disc-g{animation:none}.fx-ch.polished{animation:none}}
/* FIX colisão: meu card "Mega Obras" usa .mega, mas o Catálogos do header é details.mega — reseta só o do header p/ ficar igual ao index */
header details.mega,.hdr details.mega{border:0!important;background:transparent!important;border-radius:0!important;padding:0!important;overflow:visible!important;box-shadow:none!important;min-height:0!important;display:inline-block}
header details.mega h2,header details.mega p,.hdr details.mega h2,.hdr details.mega p{all:revert}
.hero h1 .fx-ch{will-change:transform}
.fx-ch.folded{transform:perspective(320px) rotateX(55deg);text-shadow:0 1px 0 rgba(255,255,255,.4),0 2px 4px rgba(0,0,0,.4)}

/* ===== faixa de logos de clientes/marcas (marcas que confiam) ===== */
.fxlogos{display:flex;flex-wrap:wrap;gap:18px 22px;justify-content:center;align-items:center;margin-top:42px}
.fxlogos img{height:64px;width:auto;border-radius:10px;opacity:.92;transition:.25s;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.fxlogos img:hover{opacity:1;transform:translateY(-4px)}
@media(max-width:560px){.fxlogos img{height:52px}}

/* ===== o JS (fx.js) é o ÚNICO motor dos efeitos: desliga as animações CSS antigas (animation-timeline) que conflitavam ===== */
.foldsheet,.foldsheet span,.beamline,.beamtitle,.spectrum-bg,.sheenstage img,.sheen{animation:none !important}
[data-effect="rail"] .rail{scroll-snap-type:none !important;scroll-behavior:auto !important;justify-content:safe center}

/* ===== dropdown "Setores" do header (idêntico ao index/setores-menu.css) ===== */
.setores-dd{position:relative;display:inline-block}
.setores-dd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--fhead,inherit);letter-spacing:.02em;color:var(--muted,#9a9ea6);transition:.2s}
.setores-dd>summary:hover,.setores-dd[open]>summary{color:var(--ink,#f4f5f7)}
.setores-dd>summary::-webkit-details-marker{display:none}
.setores-dd>summary::after{content:"";width:6px;height:6px;margin-left:1px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.75;transition:transform .15s}
.setores-dd[open]>summary::after{transform:rotate(225deg) translateY(1px)}
.setores-panel{position:absolute;top:calc(100% + 10px);left:0;z-index:1200;min-width:230px;background:var(--card,#141417);border:1px solid #26262b;border-radius:12px;padding:8px;box-shadow:0 14px 40px rgba(0,0,0,.4);display:grid;gap:2px}
.setores-panel a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink,#f4f5f7);font-size:14.5px;line-height:1.2;white-space:nowrap}
.setores-panel a:hover,.setores-panel a:focus{background:rgba(255,255,255,.06);color:#fff}
@media (hover:hover) and (pointer:fine){.setores-dd:hover>.setores-panel{display:grid}}
@media (max-width:900px){.setores-dd{display:block;width:100%}.setores-panel{position:static;box-shadow:none;border:0;background:transparent;padding:2px 0 2px 12px;min-width:0}.setores-panel a{padding:9px 8px}}
/* failsafe extra anti-branco: se por algum motivo o JS não marcar .in em 3s, mostra */
@keyframes fxSafeShow{to{opacity:1;transform:none}}
html.js .reveal{animation:fxSafeShow 0s linear 3s forwards}

/* ===== rodapé padronizado (visual do index, self-contained, sem colisão) ===== */
.fxfoot{border-top:1px solid rgba(255,255,255,.14);padding:70px 0 40px;color:#f4f5f7;background:transparent;font-family:'Inter',system-ui,sans-serif}
.fxfoot-in{width:min(1180px,92vw);margin:0 auto}
.fxfoot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr;gap:34px}
.fxfoot-logo{font:800 22px/1 'Space Grotesk',sans-serif;letter-spacing:-.01em;margin-bottom:14px;color:#f4f5f7}
.fxfoot-logo b{color:#e2231a;font-weight:800}
.fxfoot-desc{color:#9a9ea6;font-size:14px;line-height:1.6;max-width:42ch}
.fxfoot-wa{display:inline-flex;align-items:center;justify-content:center;gap:.5em;margin-top:16px;background:#e2231a;color:#fff;font:700 15px/1 'Space Grotesk',sans-serif;padding:14px 22px;border-radius:12px;transition:.2s;width:100%;max-width:360px}
.fxfoot-wa:hover{filter:brightness(1.08);transform:translateY(-2px)}
.fxfoot h4{font:800 16px/1 'Space Grotesk',sans-serif;margin-bottom:14px;color:#f4f5f7}
.fxfoot a,.fxfoot p{display:block;color:#9a9ea6;font-size:14px;margin-bottom:9px;text-decoration:none}
.fxfoot-grid a:hover{color:#f4f5f7}
.fxfoot-cr{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:#9a9ea6;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:820px){.fxfoot-grid{grid-template-columns:1fr;gap:26px}.fxfoot-wa{max-width:none}}