/* Forja · Aço e luz
   O mundo da obra à noite: o preto do palco, o giz do aço cortado e um único acento, a brasa laranja da logo.
   Elemento assinatura: a linha de cota (a medida do desenho técnico), com a ponta laranja, e a faísca da solda.
   Saira nos títulos (as formas quadradas e redondas do "Forja"), Barlow no texto (a letra das placas),
   Michroma nos rótulos (a mesma letra larga do "COMUNICAÇÃO VISUAL E SERRALHERIA" da logo). */

@font-face{font-family:"Saira";font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap;src:url("../assets/fonts/saira.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/barlow-400.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/barlow-500.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/barlow-600.woff2") format("woff2")}
@font-face{font-family:"Michroma";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/michroma.woff2") format("woff2")}

:root{
  --noite:#0A0A0B;
  --noite-2:#111113;
  --noite-3:#19191C;
  --giz:#F2F0EB;
  --cinza:#A6A49F;
  --cinza-2:#7C7A76;
  --laranja:#EE9446;
  --brasa:#FF7A1A;
  --faisca:#FFE2C4;
  --concreto:#E8E6E1;
  --concreto-2:#DDDAD4;
  --tinta:#121214;
  --tinta-2:#55534E;
  --linha-e:rgba(242,240,235,.12);
  --linha-c:rgba(18,18,20,.14);
  --btn-brasa:linear-gradient(180deg,#F8AB69 0%,#EE9446 52%,#E2822F 100%);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --display:"Saira",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --text:"Barlow",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --label:"Michroma","Saira",ui-sans-serif,system-ui,sans-serif;
  --gutter:max(20px,5vw);
  --maxw:1240px;
  --col-x:max(var(--gutter),calc((100vw - 1320px) / 2 + 24px));
  --sec-y:clamp(104px,12vw,176px);
  /* O respiro da barra no topo (ela fica solta das bordas) e a altura dela */
  --sh-i:30px;
  --nav-h:66px;
}
@media (max-width:1100px){:root{--sh-i:22px}}
@media (max-width:1000px){:root{--nav-h:60px}}
@media (max-width:720px){:root{--sh-i:10px;--nav-h:56px}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px;background:var(--noite);-webkit-tap-highlight-color:rgba(238,148,70,.14)}
body{margin:0;overflow-x:hidden;overflow-x:clip;color:var(--giz);font-family:var(--text);font-size:17.5px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,fieldset{margin:0}
fieldset{padding:0;border:0;min-width:0}
legend{padding:0}
ul,ol{padding:0;list-style:none}
svg{overflow:visible}
em{font-style:normal}
.sr{position:absolute!important;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}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--giz);color:var(--tinta);padding:10px 18px;border-radius:12px;font-weight:600;text-decoration:none;transition:top .25s var(--ease-out)}
.skip:focus{top:12px}
main:focus{outline:none}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px;border-radius:6px}
.light :focus-visible{outline-color:var(--tinta)}
.wrap{width:min(var(--maxw),100% - 2 * var(--gutter));margin-inline:auto;position:relative}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--laranja);color:var(--noite)}
.light ::selection{background:var(--tinta);color:var(--concreto)}
.btn,.nav,.pill,.faq-list summary,.cta-bar,.cue,.link-wa,.chip,.ad-tab,.seg,.cmp{-webkit-user-select:none;user-select:none}
html:has(body.menu-open){overflow:hidden}
.lg-o{fill:var(--laranja)}

/* Barra de rolagem. Sem JavaScript: a nativa, em giz */
@media (hover:hover) and (pointer:fine){
  html::-webkit-scrollbar{width:10px}
  html::-webkit-scrollbar-track{background:var(--noite)}
  html::-webkit-scrollbar-thumb{background:rgba(166,164,159,.42);border:3px solid var(--noite);border-radius:99px}
  html::-webkit-scrollbar-thumb:hover{background:var(--laranja)}
  @supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:rgba(166,164,159,.5) var(--noite)}}
}
/* Com JavaScript no desktop: a nativa sai e entra uma pílula fina que flutua sobre a página e esquenta ao toque do mouse */
html.cs{scrollbar-width:none}
html.cs::-webkit-scrollbar{display:none;width:0;height:0}
.sbar{--sb:rgba(166,164,159,.55);--sb-on:var(--laranja);position:fixed;top:0;right:0;bottom:0;z-index:60;width:18px}
.sbar.on-light{--sb:rgba(18,18,20,.34);--sb-on:var(--tinta)}
.sbar::before{content:"";position:absolute;top:6px;bottom:6px;right:7px;width:1px;background:var(--sb);opacity:0;transition:opacity .4s var(--ease-out)}
.sbar:hover::before,.sbar.drag::before{opacity:.35}
.sbar-thumb{position:absolute;top:6px;right:5px;display:block;width:5px;border-radius:99px;background:var(--sb);opacity:.55;cursor:grab;transition:width .3s var(--ease-out),right .3s var(--ease-out),background-color .5s var(--ease-out),opacity .4s var(--ease-out),box-shadow .5s var(--ease-out);will-change:transform}
.sbar.active .sbar-thumb{opacity:1}
.sbar:hover .sbar-thumb,.sbar.drag .sbar-thumb{right:4px;width:7px;opacity:1;background:var(--sb-on);box-shadow:0 0 12px rgba(255,122,26,.45)}
.sbar.on-light:hover .sbar-thumb,.sbar.on-light.drag .sbar-thumb{box-shadow:none}
.sbar.drag .sbar-thumb{cursor:grabbing}
html.sbar-drag,html.sbar-drag *{-webkit-user-select:none!important;user-select:none!important}
html.sbar-drag *{cursor:grabbing!important}

/* Tipografia */
.h-hero{font-family:var(--display);font-weight:640;font-stretch:112%;font-size:clamp(40px,4.4vw,70px);line-height:1;letter-spacing:-.028em}
.h-statement{font-family:var(--display);font-weight:600;font-stretch:112%;font-size:clamp(36px,4.8vw,78px);line-height:1.03;letter-spacing:-.03em;text-wrap:balance;max-width:17ch}
.h-section{font-family:var(--display);font-weight:600;font-stretch:112%;font-size:clamp(34px,3.8vw,60px);line-height:1.04;letter-spacing:-.028em;text-wrap:balance;max-width:17ch}
.h-sub{font-family:var(--display);font-weight:600;font-stretch:110%;font-size:clamp(27px,2.5vw,40px);line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
.h-item{font-family:var(--display);font-weight:600;font-stretch:108%;font-size:clamp(20px,1.55vw,24px);line-height:1.2;letter-spacing:-.012em}
.h-hero .ln,.h-statement .ln,.h-section .ln{display:block;text-wrap:balance}
.lede{font-size:clamp(17.5px,1.28vw,19.5px);line-height:1.6;color:var(--cinza);max-width:48ch;text-wrap:pretty}
.light .lede{color:var(--tinta-2)}

/* O rótulo é uma linha de cota: caixa alta larga entre dois fios, com a ponta de cada fio em laranja */
.kicker{display:inline-flex;align-items:center;gap:14px;margin-bottom:26px;font-family:var(--label);font-size:10.5px;line-height:1.4;letter-spacing:.28em;text-transform:uppercase;color:var(--cinza)}
.kicker span{margin-right:-.28em}
.kicker::before,.kicker::after{content:"";flex:none;display:block;width:24px;height:9px}
.kicker::before{background:linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat,linear-gradient(var(--laranja),var(--laranja)) 0 0/1.5px 100% no-repeat}
.kicker::after{background:linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat,linear-gradient(var(--laranja),var(--laranja)) 100% 0/1.5px 100% no-repeat}
.light .kicker{color:var(--tinta-2)}
.js :is(.rv .kicker,.kicker.rv)::before{transform:scaleX(0);transform-origin:100% 50%;transition:transform 1s var(--ease-io) .25s}
.js :is(.rv .kicker,.kicker.rv)::after{transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease-io) .25s}
.js :is(.rv.in .kicker,.kicker.rv.in)::before,.js :is(.rv.in .kicker,.kicker.rv.in)::after{transform:none}

/* Botões e links */
.btn{--h:52px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 28px;border:0;border-radius:999px;font-family:var(--text);font-weight:600;font-size:16.5px;line-height:1.2;letter-spacing:.005em;text-decoration:none;text-align:center;cursor:pointer;transition:transform .35s var(--ease-out),box-shadow .45s var(--ease-out),background-color .35s var(--ease-out),color .35s var(--ease-out)}
.btn .ic{width:19px;height:19px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-brasa{color:#1B1007;background:var(--btn-brasa);box-shadow:inset 0 1px 0 rgba(255,238,220,.75),inset 0 -1px 0 rgba(90,36,0,.28),0 1px 0 rgba(0,0,0,.5),0 14px 34px -18px rgba(255,122,26,.55)}
.btn-brasa:hover{box-shadow:inset 0 1px 0 rgba(255,238,220,.85),inset 0 -1px 0 rgba(90,36,0,.28),0 1px 0 rgba(0,0,0,.5),0 20px 46px -16px rgba(255,122,26,.72)}
/* O brilho corre no metal quente */
.btn-brasa::after{content:"";position:absolute;top:0;bottom:0;left:-45%;z-index:-1;width:36%;background:linear-gradient(100deg,rgba(255,250,240,0),rgba(255,250,240,.8) 50%,rgba(255,250,240,0));transform:skewX(-18deg);opacity:0}
.btn-brasa:hover::after,.btn-brasa:focus-visible::after{animation:btn-sheen .95s var(--ease-io)}
@keyframes btn-sheen{0%{opacity:0;transform:translateX(0) skewX(-18deg)}25%{opacity:1}100%{opacity:0;transform:translateX(430%) skewX(-18deg)}}
.btn-ghost{color:var(--giz);background:rgba(242,240,235,.04);box-shadow:inset 0 0 0 1px rgba(242,240,235,.26)}
.btn-ghost:hover{background:rgba(242,240,235,.08);box-shadow:inset 0 0 0 1px rgba(242,240,235,.55)}
.btn-sm{--h:42px;padding:0 18px;font-size:15px}
.btn-lg{--h:58px;padding:0 32px;font-size:17px}
.btn-full{width:100%}
.link-quiet{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(242,240,235,.4);transition:text-decoration-color .3s var(--ease-out)}
.link-quiet:hover{text-decoration-color:var(--laranja)}
.link-wa{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:16px;color:var(--giz);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(242,240,235,.3);transition:text-decoration-color .3s var(--ease-out)}
.link-wa:hover{text-decoration-color:var(--laranja)}
.link-wa .ic{width:18px;height:18px;color:var(--laranja)}
.light .link-wa{color:var(--tinta);text-decoration-color:rgba(18,18,20,.3)}
.light .link-wa:hover{text-decoration-color:var(--tinta)}
.light .link-wa .ic{color:var(--tinta)}
@media (pointer:coarse){.btn{min-height:max(44px,var(--h))}.link-quiet{padding-block:10px;display:inline-block}}

/* Ambiente: um brilho de brasa e um de giz derivando devagar, e um grão fino por cima de tudo */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.glow{position:absolute;display:block;border-radius:50%;will-change:transform}
.g1{width:80vmax;height:80vmax;left:-36vmax;top:-26vmax;background:radial-gradient(closest-side,rgba(238,148,70,.06),rgba(238,148,70,0));animation:drift1 90s var(--ease-io) -30s infinite alternate}
.g2{width:70vmax;height:70vmax;right:-30vmax;top:38vh;background:radial-gradient(closest-side,rgba(242,240,235,.045),rgba(242,240,235,0));animation:drift2 120s var(--ease-io) -64s infinite alternate}
@keyframes drift1{to{transform:translate3d(22vmax,18vmax,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-18vmax,-14vmax,0) scale(.92)}}
body::after{content:"";position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* =========================================================
   NAVEGAÇÃO · no topo, solta das bordas, com um fio por baixo.
   Rolando, vira uma barra cheia, escura e translúcida, de ponta a ponta
   ========================================================= */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding:var(--sh-i) var(--sh-i) 0;pointer-events:none}
.nav::before{content:"";position:absolute;inset:0 0 auto;height:var(--nav-h);background:rgba(10,10,11,.78);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);box-shadow:inset 0 -1px 0 rgba(242,240,235,.1),0 18px 40px -30px rgba(0,0,0,.9);opacity:0;transition:opacity .5s var(--ease-out)}
.nav.solid::before{opacity:1}
.nav-in{position:relative;display:flex;align-items:center;gap:44px;height:var(--nav-h);padding:0 26px 0 34px}
.nav-in>*{pointer-events:auto}
.nav-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(242,240,235,.16);transform-origin:0 50%;transition:opacity .5s var(--ease-out)}
.nav.solid .nav-in::after{opacity:0}
/* a barra sobe até o topo e o conteúdo acompanha, só com translate (o layout não se mexe) */
.brand,.nav-toggle{transition:translate .5s var(--ease-out)}
.nav.solid :is(.brand,.nav-cta,.nav-toggle){translate:0 calc(var(--sh-i) * -1)}
.brand{display:flex;align-items:center;min-height:44px;text-decoration:none}
.brand-logo{display:block;width:auto;height:24px;aspect-ratio:420 / 104;fill:var(--giz)}
.menu ul{display:flex;gap:30px}
.menu ul a{display:inline-block;padding:8px 0;font-size:14.5px;font-weight:500;color:var(--cinza);text-decoration:none;transition:color .3s var(--ease-out)}
.menu ul a:hover,.menu ul a[aria-current]{color:var(--giz)}
.menu-foot{display:none}
.nav-toggle{display:none}
/* o botão da barra: um retângulo de canto vivo, no mesmo laranja */
.nav-cta{--h:40px;margin-left:auto;gap:9px;padding:0 20px 0 16px;border-radius:3px;font-size:14.5px;box-shadow:inset 0 1px 0 rgba(255,238,220,.7),inset 0 -1px 0 rgba(90,36,0,.28),0 10px 26px -14px rgba(255,122,26,.8);transition:transform .35s var(--ease-out),box-shadow .45s var(--ease-out),translate .5s var(--ease-out)}
.nav-cta .ic{width:17px;height:17px}
@media (min-width:1001px){
  .menu{transition:translate .5s var(--ease-out)}
  .nav.solid .menu{translate:0 calc(var(--sh-i) * -1)}
}
@media (max-width:1000px){
  .nav-in{gap:12px;padding:0 8px 0 22px}
  .nav-toggle{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:46px;height:46px;border:0;border-radius:50%;background:transparent;cursor:pointer}
  .nav-toggle i{display:block;width:20px;height:1.5px;background:var(--giz);border-radius:2px;transition:transform .45s var(--ease-out)}
  .nav.open .nav-toggle i:first-of-type{transform:translateY(3.75px) rotate(45deg)}
  .nav.open .nav-toggle i:last-of-type{transform:translateY(-3.75px) rotate(-45deg)}
  .menu{position:fixed;inset:0;z-index:-2;display:flex;flex-direction:column;justify-content:center;gap:44px;padding:110px var(--gutter) 48px;background:var(--noite);opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s linear .45s}
  .nav.open .menu{opacity:1;visibility:visible;transition:opacity .45s var(--ease-out)}
  .menu ul{flex-direction:column;gap:2px}
  .menu ul a{font-family:var(--display);font-weight:600;font-stretch:112%;font-size:clamp(30px,7.4vw,42px);letter-spacing:-.028em;color:var(--giz);padding:6px 0}
  .menu ul a[aria-current]{color:var(--laranja)}
  .menu-foot{display:grid;justify-items:start;gap:20px}
  .menu-note{color:var(--cinza);max-width:34ch}
  .menu-foot .btn{font-size:17px;padding:0 30px}
  body.menu-open{overflow:hidden}
}
@media (max-width:720px){.nav-in{padding:0 2px 0 14px}}
@media (max-width:560px){.nav-cta{display:none}.nav-toggle{margin-left:auto}.brand-logo{height:22px}}

/* =========================================================
   HERO · padrão: hero estático composto (celular depois da abertura, movimento reduzido, sem JavaScript)
   ========================================================= */
.hero{position:relative}
.stage{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;background:var(--noite);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:0 4vw;padding:112px var(--col-x) 56px}
.stage-light{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 99%);mask-image:linear-gradient(180deg,#000 70%,transparent 99%);background:radial-gradient(30% 36% at 27% 28%,rgba(255,206,160,.11),rgba(255,206,160,0) 70%),radial-gradient(42% 26% at 28% 98%,rgba(238,148,70,.09),rgba(238,148,70,0) 72%),linear-gradient(180deg,#0D0D0F 0%,var(--noite) 58%,#08080A 100%)}
.penumbra,.emblema,.sweep,.cue,.band-b,.ph-line{display:none}
.band-c{position:relative;z-index:4;grid-column:2;grid-row:1;justify-self:end;width:min(100%,640px)}
.hero-kicker{margin-bottom:26px}
.hero-sub{margin-top:26px;font-size:clamp(17.5px,1.3vw,19.5px);line-height:1.6;color:var(--cinza);max-width:46ch;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:34px}
.hero-proof{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:40px;padding-top:22px;border-top:1px solid var(--linha-e)}
.hero-proof li{display:flex;flex-direction:column;gap:2px}
.hero-proof strong{font-family:var(--display);font-weight:600;font-stretch:112%;font-size:21px;line-height:1.15;letter-spacing:-.012em;color:var(--giz)}
.hero-proof span{font-size:14px;line-height:1.4;color:var(--cinza)}

/* Entradas do hero, guiadas por --k (1 no estado estático) */
.band-c .w{display:inline-block;--kc:clamp(0,(var(--k,1) - var(--th,0)) * 3.2,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * .45em))}
.hero-kicker{--kk:clamp(0,var(--k,1) * 6,1);opacity:var(--kk)}
.hero-sub{--ks:clamp(0,(var(--k,1) - .5) * 3.4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 14px))}
.hero-actions{--kb:clamp(0,(var(--k,1) - .64) * 4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 14px))}
.hero-proof{--kp:clamp(0,(var(--k,1) - .78) * 4.5,1);opacity:var(--kp)}

/* A obra: a foto do painel aceso, com o preto dela somando com o palco (lighten: o escuro some, a luz fica) */
.art{position:relative;z-index:1;grid-column:1;grid-row:1;justify-self:start;width:min(100%,560px,calc((100svh - 150px) * .75));mix-blend-mode:lighten}
.ph{position:relative}
.ph-real{position:relative}
.ph-real picture{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,#000 66%,transparent 97%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,#000 66%,transparent 97%);mask-composite:intersect}
.ph-img{width:100%;height:auto;-webkit-user-drag:none}
.ph-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,11,.55),rgba(10,10,11,.92));opacity:0}
.ph-bloom{position:absolute;left:var(--x);top:var(--y);width:calc(var(--s,1) * 24%);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,246,232,.5),rgba(255,214,170,.16) 40%,rgba(255,170,100,0) 72%);mix-blend-mode:screen;pointer-events:none}
.ph-panel-glow{position:absolute;left:12%;top:8%;width:76%;height:53%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,196,.13),rgba(255,226,196,0));mix-blend-mode:screen;pointer-events:none}

/* A mesma estrutura em traço de 1,5px (a pena vem do main.js). A luz que atravessa o palco é a fronteira:
   atrás dela a foto de verdade, na frente o desenho */
.ph-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wd{fill:none;stroke:rgba(242,240,235,.9);stroke-width:var(--lw,2.4);stroke-linecap:round;stroke-linejoin:round}
.wd>*{stroke-dasharray:1 1;stroke-dashoffset:1;visibility:hidden}
.lamps .lg{fill:url(#lamp-g);opacity:0}
.lamps .lp{fill:#FFF6EA;opacity:0}
html:is(.scrub,.cine) .ph-real{-webkit-mask-image:linear-gradient(100deg,#000 calc(var(--we,130%) - 16%),transparent calc(var(--we,130%) + 4%));mask-image:linear-gradient(100deg,#000 calc(var(--we,130%) - 16%),transparent calc(var(--we,130%) + 4%))}
html:is(.scrub,.cine) .ph-line{display:block;-webkit-mask-image:linear-gradient(100deg,transparent calc(var(--we,130%) - 16%),#000 calc(var(--we,130%) + 4%));mask-image:linear-gradient(100deg,transparent calc(var(--we,130%) - 16%),#000 calc(var(--we,130%) + 4%))}

/* A faixa de luz que atravessa o palco e revela a obra */
.sweep{position:absolute;top:-12%;bottom:-12%;left:0;z-index:5;width:30vw;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,236,214,.05) 34%,rgba(255,242,228,.2) 50%,rgba(255,236,214,.05) 66%,rgba(255,255,255,0) 100%);mix-blend-mode:screen;opacity:0;will-change:transform,opacity}

/* A penumbra da abertura: um calor atrás da logo e as bordas no escuro. Ela se abre quando o letreiro acende */
.penumbra{position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;pointer-events:none;background:radial-gradient(34% 40% at var(--px,36%) var(--py,46%),rgba(255,206,160,.07),rgba(255,206,160,0) 70%),radial-gradient(80% 70% at 50% 45%,rgba(0,0,0,0) 60%,rgba(0,0,0,.45))}

/* O letreiro: primeiro a letra-caixa apagada, só o contorno em traço fino, depois o aço, depois a luz.
   O traço é de 1,2px na tela em qualquer tamanho (--esw vem do main.js) */
.emblema{position:absolute;left:50%;top:46%;z-index:3;width:min(820px,60vw);transform:translate(-50%,-50%);pointer-events:none;--spill:0}
.emblema::before{content:"";position:absolute;left:-16%;right:-16%;top:-70%;bottom:-60%;z-index:-1;background:radial-gradient(closest-side,rgba(255,232,208,.1),rgba(255,160,90,.07) 42%,rgba(255,122,26,0) 76%);opacity:var(--spill,0)}
/* o brilho quente do pingo do j, a primeira luz do letreiro */
.emblema::after{content:"";position:absolute;left:69.4%;top:11.7%;z-index:-1;width:max(41.5%,170px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,154,69,.26),rgba(238,148,70,.08) 45%,rgba(238,148,70,0));opacity:var(--pingo,1)}
.em-cam{position:relative}
.em-svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.em-halo{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;fill:#FFF1E2;opacity:0;filter:blur(14px)}
.em-halo-o{fill:#FF9A45}
.em-raw{fill:url(#em-gst);stroke:rgba(242,240,235,.22);stroke-width:calc(var(--esw,.5) * 1)}
.em-l{opacity:0}
.em-p{fill:none;stroke:rgba(242,240,235,.9);stroke-width:calc(var(--esw,.5) * 1.2);stroke-linejoin:round}
.em-p-o{stroke:var(--laranja);stroke-width:calc(var(--esw,.5) * 1.4)}
.em-lit{fill:url(#em-gw);opacity:0}
.em-fio,.em-dot{fill:url(#em-go)}
.em-fio{clip-path:inset(0 100% 0 0)}
.em-dot{opacity:0}
/* o slogan: a letra larga da logo, esticada na largura dela; nunca menor que 9px na tela */
.em-tag{font-family:var(--label);font-size:calc(max(9px,13.4px * var(--ek,1)) * var(--esw,.5));letter-spacing:.02em;fill:rgba(242,240,235,.62)}
@media (max-width:720px){.em-halo{filter:blur(8px)}}

/* HERO · celular e telas em pé: a obra em cima, sangrando, e o título por baixo, centralizado */
@media (max-width:900px),(orientation:portrait) and (max-width:1100px){
  html:not(.scrub) .stage{display:flex;flex-direction:column;align-items:center;min-height:0;padding:68px 0 64px;text-align:center}
  html:not(.scrub) .art{order:0;justify-self:auto;width:min(100%,560px,calc(62svh * .75));margin:0 auto}
  html:not(.scrub) .band-c{order:1;display:flex;flex-direction:column;align-items:center;max-width:640px;margin-top:-5vw;padding:0 var(--gutter)}
  html:not(.scrub) .h-hero{font-size:clamp(36px,9.6vw,60px)}
  html:not(.scrub) .hero-sub{margin-inline:auto}
  html:not(.scrub) .hero-actions{justify-content:center;width:100%}
  html:not(.scrub) .hero-actions .btn{flex:1 1 100%;max-width:420px}
  html:not(.scrub) .hero-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:470px}
  html:not(.scrub) .hero-proof li{align-items:center}
  html:not(.scrub) .hero-proof strong{font-size:17px}
  html:not(.scrub) .hero-proof span{font-size:13px}
  html:not(.scrub) .stage-light{background:radial-gradient(60% 30% at 50% 18%,rgba(255,206,160,.1),rgba(255,206,160,0) 70%),radial-gradient(70% 20% at 50% 52%,rgba(238,148,70,.07),rgba(238,148,70,0) 72%),linear-gradient(180deg,#0D0D0F 0%,var(--noite) 58%,#08080A 100%)}
  /* na abertura, a logo fica fora do centro: embaixo, encostada na margem da esquerda, como um letreiro visto da rua */
  html:not(.scrub) .emblema{--emw:min(72vw,440px);left:calc(var(--gutter) + var(--emw) / 2);top:62vh;top:62svh;width:var(--emw)}
  html:not(.scrub) .penumbra{--px:40%;--py:62%}
  html:not(.scrub) .sweep{width:56vw}
}
/* tablet em pé: a logo é maior, na mesma margem */
@media (min-width:600px) and (max-width:900px),(min-width:600px) and (orientation:portrait) and (max-width:1100px){
  html:not(.scrub) .emblema{--emw:min(68vw,640px)}
}
@media (max-width:520px){
  .kicker{gap:10px;font-size:9.5px;letter-spacing:.24em}
  .kicker span{margin-right:-.24em}
  .kicker::before,.kicker::after{width:16px}
  .hero-kicker{text-align:center}
  .hero-kicker::before,.hero-kicker::after{display:none}
}
@media (max-width:380px){html:not(.scrub) .hero-proof span{font-size:12px}}
/* Fora do modo scrub, depois da abertura: a obra sobe de leve enquanto o hero sai da tela */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.scrub) .art{transform:translate3d(0,calc(var(--hp,0) * -44px),0) scale(calc(1 + var(--hp,0) * .035))}
}

/* =========================================================
   HERO · abertura, ao abrir a página, em qualquer tela: a logo é desenhada em traço fino, uns 2,7 s.
   A pena contorna letra por letra, o pingo do j ganha o brilho quente, o slogan entra e, no computador, o aviso de rolagem.
   Cada animação só tem o quadro de partida: o fim é o valor normal do elemento, o mesmo do quadro parado.
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  html.cine{--tf:1}
  html.cine:not(.scrub){--tf:.76}
  /* a pena: o contorno de cada letra na velocidade de uma mão firme */
  html.cine .em-p{animation:em-plot calc(var(--tf) * var(--d,.6s)) cubic-bezier(.42,.12,.46,1) calc(var(--tf) * var(--t,.4s)) both}
  html.cine .emblema::after{animation:em-fade calc(var(--tf) * 1.2s) var(--ease-out) calc(var(--tf) * 1.3s) both}
  html.cine .em-tag{animation:em-tag calc(var(--tf) * 1s) var(--ease-out) calc(var(--tf) * 1.7s) both}
  /* a barra fica à vista desde o início; só o fio do cabeçalho é desenhado */
  html.cine .nav-in::after{animation:em-traco calc(var(--tf) * .95s) var(--ease-io) calc(var(--tf) * .1s) both}
  html.scrub.cine .cue>*{animation:em-fade 1.2s var(--ease-out) 2.5s both}
  /* celular e telas em pé: o letreiro ocupa a primeira tela e o main.js conduz o resto da história */
  html.cine:not(.scrub) :is(.penumbra,.emblema,.sweep){display:block}
  html.cine:not(.scrub) .penumbra{height:100vh;height:100svh}
  html.cine:not(.scrub) .emblema{will-change:transform,opacity}
  html.cine:not(.scrub) .band-c{--k:0}
  html.cine:not(.scrub) .ph{--we:-40%}
  html.cine:not(.scrub) :is(.ph-bloom,.ph-panel-glow){opacity:0}
  html.cine:not(.scrub) .ph-shade{opacity:.7}
}
/* celular deitado: o letreiro cabe entre a barra e o pé da tela */
@media (prefers-reduced-motion:no-preference) and (max-height:520px){
  html.cine:not(.scrub) .emblema{--emw:min(56vw,420px,110svh);top:56svh}
  html.cine:not(.scrub) .penumbra{--px:32%;--py:56%}
}
@keyframes em-plot{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes em-tag{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes em-fade{from{opacity:0}}
@keyframes em-traco{from{transform:scaleX(0)}}

/* =========================================================
   HERO · modo scrub (desktop): palco fixado por 460vh
   Nos primeiros 40vh o letreiro acende (o aço preenche o traço, as letras acendem, a penumbra se abre)
   A: o letreiro sobe e se apaga · B1: a base, os chumbadores e o poste são desenhados em traço
   B2: o painel e os refletores · C: a luz atravessa o palco, revela a obra de verdade e o título pousa
   ========================================================= */
html.scrub .hero{height:460vh}
html.scrub .stage{display:block;position:sticky;top:0;height:100vh;min-height:0;padding:0;--aw:calc(min(100vh - 96px,62vw) * .75);--bw:min(640px,44vw);--gp:3vw;--al:max(2vw,min(calc(var(--col-x) - 1vw),calc((100% - var(--aw) - var(--gp) - var(--bw)) / 2)))}
/* a obra à esquerda e o título à direita; quando os dois não cabem entre as margens, o par se centraliza */
html.scrub :is(.penumbra,.emblema,.sweep){display:block}
/* a logo: à esquerda do centro, na escala que o main.js calcula (sem ele, a posição da maquete) */
html.scrub .emblema{left:var(--ex,38.85%);top:var(--ey,55.2%);width:var(--ew,56.875vw);will-change:transform,opacity}
html.scrub .stage-light{opacity:.35}
html.scrub .art{position:absolute;left:var(--al);top:84px;height:min(calc(100vh - 96px),62vw);width:auto;aspect-ratio:1086 / 1448}
html.scrub .ph{--we:-40%}
html.scrub :is(.ph-bloom,.ph-panel-glow){opacity:0}
html.scrub .ph-shade{opacity:.7}
html.scrub .band{position:absolute;left:max(calc(100% - var(--col-x) - var(--bw)),calc(var(--al) + var(--aw) + var(--gp)));top:52%;transform:translateY(-50%);opacity:0}
html.scrub .band-b{display:block;z-index:4;width:min(500px,36vw)}
html.scrub .band-c{width:var(--bw);max-width:none}
html.scrub .cue{display:flex}
html.scrub .hero-kicker{white-space:nowrap}
/* Notebook pequeno e tablet deitado: o rótulo e as provas do título cabem numa linha só */
@media (max-width:1200px){
  html.scrub .hero-kicker{letter-spacing:.2em}
  html.scrub .hero-kicker span{margin-right:-.2em}
  html.scrub .hero-proof{gap:12px 26px}
  html.scrub .hero-proof strong{font-size:18px}
  html.scrub .hero-proof span{font-size:13px}
}
@media (max-width:1000px){
  html.scrub .hero-kicker{gap:10px;font-size:9.5px}
  html.scrub .hero-kicker::before,html.scrub .hero-kicker::after{width:16px}
  html.scrub .hero-proof{gap:10px 20px}
  html.scrub .hero-proof strong{font-size:16px}
  html.scrub .hero-proof span{font-size:12px}
}
@media (max-width:860px){html.scrub .hero-kicker::after{display:none}}

.bb-n{display:inline-flex;align-items:center;gap:14px;font-family:var(--label);font-size:10.5px;line-height:1.4;letter-spacing:.28em;text-transform:uppercase;color:var(--laranja)}
.bb-n::before{content:"";flex:none;width:24px;height:9px;background:linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 0 0/1.5px 100% no-repeat}
.bb-t{margin-top:24px;text-wrap:balance;font-family:var(--display);font-weight:620;font-stretch:112%;font-size:clamp(44px,4.6vw,76px);line-height:1;letter-spacing:-.03em;color:var(--giz)}
.bb-d{margin-top:20px;font-size:clamp(17.5px,1.35vw,20px);line-height:1.55;color:var(--cinza);max-width:34ch}
.band-b .bb-n{--kk:clamp(0,var(--k,1) * 6,1);opacity:var(--kk)}
.band-b .bb-t{--kt:clamp(0,(var(--k,1) - .08) * 3.2,1);opacity:var(--kt);transform:translateY(calc((1 - var(--kt)) * 18px))}
.band-b .bb-d{--kd:clamp(0,(var(--k,1) - .3) * 3,1);opacity:var(--kd);transform:translateY(calc((1 - var(--kd)) * 14px))}

/* O aviso de rolagem: uma linha só, no canto de baixo, na mesma margem da marca da barra */
.cue{position:absolute;left:calc(var(--sh-i) + 34px);bottom:calc(var(--sh-i) + 10px);z-index:3;align-items:center;gap:12px;font-family:var(--label);font-size:9px;line-height:1;letter-spacing:.3em;text-transform:uppercase;color:var(--cinza);pointer-events:none}
.cue span{margin-right:-.3em}
.cue-ic{display:block;flex:none;width:10px;height:16px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1000px){.cue{left:calc(var(--sh-i) + 22px)}}

/* =========================================================
   SEÇÕES · as de baixo só são montadas perto da tela: a primeira tela abre mais rápido
   ========================================================= */
.duas,.serv,.ad,.sim,.como,.obras,.faq,.contato,.rodape{content-visibility:auto;contain-intrinsic-size:auto 1100px}
.serv{contain-intrinsic-size:auto 1700px}
.ad{contain-intrinsic-size:auto 1900px}
.rodape{contain-intrinsic-size:auto 700px}
html.cv-off :is(.duas,.serv,.ad,.sim,.como,.obras,.faq,.contato,.rodape){content-visibility:visible}

/* Revelações */
.js .rv .rv-i{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 110ms)}
.js .rv.in .rv-i{opacity:1;transform:none}
.js .rv.settled .rv-i{transition-delay:0s}
.js :is(.sv,.par).rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 110ms)}
.js :is(.sv,.par).rv.in{opacity:1;transform:none}
.js :is(.sv,.par).rv.settled{transition-delay:0s}

/* =========================================================
   POR QUE A FORJA · o problema real, riscado a laser
   ========================================================= */
.duas{position:relative;padding:var(--sec-y) 0 calc(var(--sec-y) * .85)}
/* A saída do hero: o preto do palco se desfaz no ambiente, sem linha de corte */
.duas::before{content:"";position:absolute;left:0;right:0;top:0;z-index:-1;height:min(30vh,260px);background:linear-gradient(180deg,#08080A,rgba(8,8,10,.6) 40%,rgba(8,8,10,0));pointer-events:none}
.duas-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.duas-kicker{grid-column:1 / -1;justify-self:start}
.duas .h-statement{grid-column:1 / span 10}
.duas .h-statement em{color:var(--cinza)}
.duas-body{grid-column:6 / span 7;margin-top:clamp(30px,3.4vw,52px)}
.duas-body p{font-size:clamp(18px,1.4vw,21px);line-height:1.6;color:var(--cinza);max-width:48ch}
.riscos{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(64px,7.5vw,112px)}
.riscos li{position:relative;display:block;padding-top:24px;border-top:1px solid var(--linha-e)}
.risco-n{display:block;margin-bottom:18px;font-family:var(--label);font-size:10px;letter-spacing:.3em;color:var(--cinza-2)}
/* O risco é um corte em brasa passando por cima do problema */
.risco-t{display:inline;font-family:var(--display);font-weight:560;font-stretch:110%;font-size:clamp(21px,1.8vw,28px);line-height:1.24;letter-spacing:-.016em;color:var(--cinza);background:linear-gradient(90deg,var(--laranja),#FFC08A) 0 58%/100% 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .riscos .risco-t{transition:background-size 1.1s var(--ease-io) calc(.6s + var(--i,0) * 260ms),color 1s var(--ease-out) calc(1s + var(--i,0) * 260ms)}
.js .riscos:not(.in) .risco-t{background-size:0% 2px;color:var(--giz)}
.duas-fim{grid-column:1 / -1;margin-top:clamp(60px,7vw,100px);font-family:var(--display);font-weight:560;font-stretch:112%;font-size:clamp(25px,2.5vw,38px);line-height:1.2;letter-spacing:-.022em}
.duas-fim span{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,22px);max-width:34ch}
.duas-fim .ic-ok{width:clamp(28px,2.4vw,38px);height:clamp(28px,2.4vw,38px);margin-top:.06em;stroke:var(--laranja);stroke-width:1.6}

/* =========================================================
   SERVIÇOS · a lista à esquerda e a obra à direita, que troca com a leitura
   ========================================================= */
.serv{position:relative;padding:var(--sec-y) 0;background:linear-gradient(180deg,rgba(17,17,19,0) 0%,var(--noite-2) 12%,var(--noite-2) 88%,rgba(17,17,19,0) 100%)}
.serv-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px 48px;align-items:end;margin-bottom:clamp(48px,5.5vw,84px)}
.serv-head .kicker{grid-column:1 / -1;justify-self:start;margin-bottom:4px}
.serv-head .lede{justify-self:end}
.serv-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,104px);align-items:start}
.sv{position:relative;padding:30px 0 34px;border-top:1px solid var(--linha-e)}
.sv:last-child{border-bottom:1px solid var(--linha-e)}
.sv::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--laranja),rgba(238,148,70,0) 70%);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease-io)}
.sv.is-on::before{transform:none}
.sv-media{display:none}
.sv-t{display:flex;align-items:baseline;font-family:var(--display);font-weight:600;font-stretch:112%;font-size:clamp(26px,2.5vw,38px);line-height:1.08;letter-spacing:-.024em;color:var(--cinza-2);transition:color .5s var(--ease-out)}
.sv-n{flex:none;width:56px;font-family:var(--label);font-size:10.5px;font-stretch:normal;letter-spacing:.2em;color:var(--cinza-2);transform:translateY(-.55em);transition:color .5s var(--ease-out)}
.sv-body{display:grid;justify-items:start;gap:6px;padding:12px 0 0 56px}
.sv-body p{max-width:46ch;font-size:16.5px;line-height:1.6;color:var(--cinza-2);transition:color .5s var(--ease-out)}
.sv-body .link-wa{font-size:15.5px}
.sv.is-on .sv-t{color:var(--giz)}
.sv.is-on .sv-n{color:var(--laranja)}
.sv.is-on .sv-body p{color:var(--cinza)}
@media (hover:hover){.sv:hover .sv-t{color:var(--giz)}}
.serv-view{position:sticky;top:112px}
.sv-frame{position:relative;width:min(100%,calc((100vh - 160px) * .8));aspect-ratio:4 / 5;margin-left:auto;border-radius:26px;overflow:hidden;background:var(--noite-3);box-shadow:0 0 0 1px rgba(242,240,235,.08),0 50px 90px -50px rgba(0,0,0,.9)}
.sv-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease-out),transform 1.4s var(--ease-out)}
.sv-shot.is-on{opacity:1;transform:none}
.sv-count{position:absolute;left:18px;bottom:16px;z-index:2;padding:9px 13px;border-radius:99px;background:rgba(10,10,11,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--label);font-size:9.5px;line-height:1;letter-spacing:.22em;color:var(--giz)}
.sv-count span{color:var(--laranja)}

/* O portão em traço: a folha corre sobre o trilho e some atrás do muro */
.sv-gate,.sv-gate-m{--gate-bg:var(--noite-3);background:radial-gradient(70% 55% at 50% 42%,rgba(238,148,70,.09),rgba(238,148,70,0) 70%),var(--gate-bg)}
.sv-gate{display:grid;place-items:center}
.gate{display:block;width:100%;height:100%;overflow:hidden;fill:none;stroke:rgba(242,240,235,.88);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gt-bar{stroke:rgba(242,240,235,.6)}
.gt-rail,.gt-ground{stroke:rgba(242,240,235,.45)}
.gt-cover{fill:var(--gate-bg);stroke:none}
.gt-wall{stroke:rgba(242,240,235,.7)}
.gt-cota path{stroke:rgba(166,164,159,.8);stroke-width:1.2}
.gt-cota .gt-tick{stroke:var(--laranja);stroke-width:1.6}
.gt-cota text{fill:var(--cinza);stroke:none;font-family:var(--label);font-size:10px;letter-spacing:.24em;text-anchor:middle}
.gt-led{fill:var(--laranja);stroke:none;opacity:.35}
@media (prefers-reduced-motion:no-preference){
  .gt-leaf{animation:gt-slide 10s var(--ease-io) infinite}
  .gt-led{animation:gt-led 10s linear infinite}
}
@keyframes gt-slide{0%,16%{transform:translateX(0)}44%,68%{transform:translateX(262px)}96%,100%{transform:translateX(0)}}
@keyframes gt-led{0%,15%{opacity:.35}17%,43%{opacity:1}45%,67%{opacity:.35}69%,95%{opacity:1}97%,100%{opacity:.35}}

/* =========================================================
   SEÇÕES CLARAS · concreto, nunca branco puro
   ========================================================= */
.light{position:relative;background:var(--concreto);color:var(--tinta)}

/* ANTES E DEPOIS · a mesma foto, na mesma posição, e a linha que a pessoa arrasta */
.ad{padding:var(--sec-y) 0}
.ad-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,6vw,104px);align-items:center}
.ad-copy .lede{margin-top:24px}
.ad-tabs{display:inline-flex;gap:4px;margin-top:34px;padding:5px;border-radius:999px;background:rgba(18,18,20,.05);box-shadow:inset 0 0 0 1px var(--linha-c)}
.ad-tab{min-height:44px;padding:0 24px;border:0;border-radius:999px;background:transparent;font-weight:600;font-size:15.5px;color:var(--tinta-2);cursor:pointer;transition:background-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.ad-tab:hover{color:var(--tinta)}
.ad-tab[aria-selected=true]{background:var(--tinta);color:var(--concreto);box-shadow:0 8px 20px -10px rgba(18,18,20,.55)}
.ad-cap{min-height:3.2em;margin-top:22px;font-size:16.5px;color:var(--tinta-2);max-width:44ch;transition:opacity .35s var(--ease-out)}
.ad-cap.swap{opacity:0}
.ad-cta{margin-top:8px}
.cmp{--x:50%;position:relative;overflow:hidden;aspect-ratio:4 / 5;border-radius:28px;background:#CFCBC4;box-shadow:0 1px 2px rgba(18,18,20,.1),0 50px 90px -50px rgba(18,18,20,.6);touch-action:pan-y}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:opacity .45s var(--ease-out)}
.cmp.swap .cmp-img{opacity:0}
.cmp-antes{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 0 18px rgba(0,0,0,.28);pointer-events:none}
.cmp-knob{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--tinta);box-shadow:0 10px 30px -8px rgba(0,0,0,.5);transition:transform .3s var(--ease-out)}
.cmp.dragging .cmp-knob{transform:scale(1.08)}
.cmp-knob .ic{width:22px;height:22px;stroke-width:1.8}
.cmp-tag{position:absolute;top:16px;z-index:1;padding:8px 12px;border-radius:99px;background:rgba(18,18,20,.64);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-family:var(--label);font-size:9px;line-height:1;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;transition:opacity .3s var(--ease-out)}
.cmp-tag-a{left:16px}
.cmp-tag-d{right:16px}
.cmp.hide-a .cmp-tag-a,.cmp.hide-d .cmp-tag-d{opacity:0}
.cmp-hit{position:absolute;inset:0;z-index:2;cursor:ew-resize;border-radius:inherit}
.cmp-hit:focus-visible{outline:2.5px solid #fff;outline-offset:-10px;box-shadow:inset 0 0 0 12px rgba(18,18,20,.35)}
html:not(.js) .cmp-hit{display:none}
.pares{margin-top:clamp(72px,8vw,120px)}
.pares-t{margin-bottom:26px;font-family:var(--label);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--tinta-2)}
.pares-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.par-imgs{display:grid;grid-template-columns:1fr 1fr;gap:5px;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -44px rgba(18,18,20,.6)}
.par figure{position:relative}
.par img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover}
.par figcaption{position:absolute;left:10px;bottom:10px;padding:6px 9px;border-radius:99px;background:rgba(18,18,20,.62);color:#fff;font-family:var(--label);font-size:8px;line-height:1;letter-spacing:.2em;text-transform:uppercase}
.par p{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--tinta-2)}
.par p b{display:block;margin-bottom:2px;font-family:var(--display);font-weight:600;font-stretch:108%;font-size:19px;color:var(--tinta)}

/* =========================================================
   SIMULADOR · o nome vira letra caixa na fachada
   ========================================================= */
.sim{position:relative;padding:var(--sec-y) 0}
.sim-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);align-items:start}
.sim-copy{position:sticky;top:132px}
.sim-copy .lede{margin-top:24px}
.sim-box{display:grid;gap:20px;min-width:0}
.scene{--acm:#383B41;--acm-2:#26282D;--joint:rgba(0,0,0,.42);--face:#F7F5F0;--dep:#B9B5AD;--glow:255,244,228;--fs:64px;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16 / 10;border-radius:26px;background:#0B0C10;box-shadow:0 0 0 1px rgba(242,240,235,.08),0 50px 90px -50px rgba(0,0,0,.9)}
.scene[data-acm=branco]{--acm:#F0EFEB;--acm-2:#D6D4CF;--joint:rgba(0,0,0,.13)}
.scene[data-acm=madeira]{--acm:#936139;--acm-2:#6F4527;--joint:rgba(0,0,0,.3)}
.scene[data-acm=prata]{--acm:#CDD1D6;--acm-2:#999EA6;--joint:rgba(0,0,0,.18)}
.scene[data-cor=laranja]{--face:#F29A4E;--dep:#B5621F;--glow:255,170,100}
.scene[data-cor=preta]{--face:#1D1D20;--dep:#08080A;--glow:255,244,228}
.sc-sky{position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 110%,rgba(238,148,70,.18),rgba(238,148,70,0) 70%),linear-gradient(180deg,#07080C 0%,#0E1016 58%,#17130F 100%)}
.sc-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#AFC0CF 0%,#D2DAE0 62%,#E4E1DA 100%);opacity:0;transition:opacity .9s var(--ease-out)}
.sc-predio{position:absolute;left:5%;right:5%;top:13%;bottom:13%;display:flex;flex-direction:column;box-shadow:0 30px 50px -30px rgba(0,0,0,.7)}
.sc-predio::before{content:"";position:absolute;left:-1%;right:-1%;top:-3.2%;height:3.2%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#5B5E64,#3A3C41)}
.sc-acm{position:relative;flex:0 0 42%;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--joint) calc(25% - 1px) 25%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%),linear-gradient(180deg,var(--acm) 0%,var(--acm-2) 100%);box-shadow:inset 0 -1px 0 rgba(0,0,0,.35)}
.scene[data-acm=madeira] .sc-acm{background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--joint) calc(25% - 1px) 25%),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px,rgba(0,0,0,.07) 6px 8px,transparent 8px 13px),linear-gradient(180deg,var(--acm) 0%,var(--acm-2) 100%)}
.scene[data-acm=prata] .sc-acm{background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--joint) calc(25% - 1px) 25%),linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.4) 46%,rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--acm) 0%,var(--acm-2) 100%)}
.sc-acm::after{content:"";position:absolute;inset:0;background:rgba(3,4,7,.64);transition:opacity .9s var(--ease-out)}
.sc-front{position:relative;flex:1;display:grid;grid-template-columns:1fr .46fr 1fr;gap:3%;padding:3.5% 4% 0;background:linear-gradient(180deg,#26272B,#1B1C1F)}
.sc-glass,.sc-door{position:relative;display:block;background:linear-gradient(180deg,rgba(255,212,160,.52),rgba(255,176,106,.26));box-shadow:inset 0 0 0 2px rgba(0,0,0,.42)}
.sc-door{background:linear-gradient(180deg,rgba(255,212,160,.42),rgba(255,176,106,.2))}
.sc-glass::after,.sc-door::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,#A9B9C6 0%,#6E8292 55%,#8C9CA9 100%);opacity:0;transition:opacity .9s var(--ease-out)}
.sc-door::before{content:"";position:absolute;right:14%;top:50%;z-index:1;width:6%;height:14%;border-radius:2px;background:rgba(0,0,0,.5)}
.sc-walk{position:absolute;left:0;right:0;bottom:0;height:13%;background:linear-gradient(180deg,#232428,#121316)}
.sc-walk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#A3A09A,#86837D);opacity:0;transition:opacity .9s var(--ease-out)}
.sc-spill{position:absolute;left:0;right:0;top:4%;height:44%;background:radial-gradient(46% 42% at 50% 52%,rgba(var(--glow),.2),rgba(var(--glow),0) 72%);mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity .7s var(--ease-out)}
.sc-name{position:absolute;left:5%;right:5%;top:13%;height:30.7%;display:grid;place-items:center;font-family:var(--display);font-weight:650;font-stretch:108%;font-size:var(--fs);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.sc-name span{grid-area:1 / 1;position:relative;padding:0 .08em}
/* ordem das camadas fixa: o brilho (que ganha transform à noite) nunca passa por cima da face */
.sc-halo{z-index:0}.sc-depth{z-index:1}.sc-face{z-index:2}
.sc-face{color:var(--face);transition:color .5s var(--ease-out),text-shadow .6s var(--ease-out),filter .6s var(--ease-out)}
.sc-depth{color:var(--dep);text-shadow:0 .012em 0 var(--dep),0 .024em 0 var(--dep),0 .036em 0 var(--dep),0 .048em 0 var(--dep),0 .1em .12em rgba(0,0,0,.5);transition:color .5s var(--ease-out),opacity .5s}
.sc-halo{color:transparent;text-shadow:0 0 .1em rgba(var(--glow),.95),0 0 .35em rgba(var(--glow),.6),0 0 .9em rgba(var(--glow),.35);opacity:0;transition:opacity .7s var(--ease-out)}
/* Noite: a fachada escurece, a vitrine acende e a letra faz o que o tipo dela faz */
.scene[data-hora=noite][data-luz=frente] .sc-face{text-shadow:0 0 .05em rgba(var(--glow),.95),0 0 .28em rgba(var(--glow),.42)}
.scene[data-hora=noite][data-luz=frente] .sc-halo{opacity:.5}
.scene[data-hora=noite][data-luz=frente] .sc-spill{opacity:.8}
.scene[data-hora=noite][data-luz=atras] .sc-face{filter:brightness(.62)}
.scene[data-hora=noite][data-luz=atras][data-cor=preta] .sc-face{filter:none}
.scene[data-hora=noite][data-luz=atras] .sc-halo{opacity:1;transform:translateY(.02em) scale(1.02)}
.scene[data-hora=noite][data-luz=atras] .sc-spill{opacity:1}
.scene[data-hora=noite][data-luz=sem] .sc-face{filter:brightness(.5)}
.scene[data-hora=noite][data-luz=sem] .sc-depth{opacity:.6}
/* Dia */
.scene[data-hora=dia] .sc-sky::after,.scene[data-hora=dia] :is(.sc-glass,.sc-door,.sc-walk)::after{opacity:1}
.scene[data-hora=dia] .sc-acm::after{opacity:0}
.scene[data-hora=dia] .sc-front{background:linear-gradient(180deg,#5E6066,#4A4C51)}

.sim-ctl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:0 28px;padding:clamp(22px,2.6vw,32px);border-radius:26px;background:linear-gradient(180deg,rgba(25,25,28,.92),rgba(16,16,18,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(242,240,235,.08),0 40px 80px -44px rgba(0,0,0,.85)}
.sim-ctl>*{grid-column:1 / -1}
.sim-ctl>.sim-acm{grid-column:1}
.sim-ctl>.sim-cor{grid-column:2}
.swatches .chip span{gap:9px;padding-left:12px}
.swatches .chip i{display:block;width:16px;height:16px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 0 1px rgba(0,0,0,.3)}
.chip input:disabled+span{opacity:.35;cursor:not-allowed}
.chip input:disabled{cursor:not-allowed}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(242,240,235,.05);box-shadow:inset 0 0 0 1px rgba(242,240,235,.14)}
.seg label{position:relative;display:inline-flex}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:600;color:var(--cinza);transition:background-color .3s var(--ease-out),color .3s var(--ease-out)}
.seg input:checked+span{background:var(--giz);color:var(--tinta)}
.seg input:focus-visible+span{outline:2px solid var(--laranja);outline-offset:3px}
.sim-resumo{margin:2px 0 18px;padding:14px 18px;border-radius:14px;background:rgba(242,240,235,.05);font-size:15.5px;line-height:1.5;color:var(--giz)}
.sim-nota{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--cinza);text-align:center}

/* =========================================================
   COMO FUNCIONA · a linha de solda acompanha a leitura
   ========================================================= */
.como{padding:var(--sec-y) 0}
.como-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,120px);align-items:start}
.como-side{position:sticky;top:132px}
.como-fim{margin-top:26px;font-size:clamp(17px,1.3vw,19px);color:var(--cinza);max-width:34ch}
.como-side .btn{margin-top:30px}
.trilha{position:relative;padding-left:72px}
.tr-line{position:absolute;left:23px;top:14px;bottom:14px;width:2px;border-radius:2px;background:rgba(242,240,235,.1);overflow:hidden}
.tr-fill{position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,148,70,.3),var(--laranja));transform-origin:50% 0}
.js .tr-fill{transform:scaleY(0)}
.tr-head{position:absolute;left:24px;top:14px;z-index:1;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--faisca);box-shadow:0 0 0 4px rgba(238,148,70,.16),0 0 18px 5px rgba(255,122,26,.5);will-change:transform}
html:not(.js) .tr-head,.rm-pin .tr-head{display:none}
.etapas{display:grid;gap:clamp(44px,5vw,68px)}
.etapa{position:relative}
.et-dot{position:absolute;left:-53px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--noite);box-shadow:inset 0 0 0 1.5px rgba(242,240,235,.4);transition:background-color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.etapa.lit .et-dot,html:not(.js) .et-dot{background:var(--laranja);box-shadow:0 0 0 4px rgba(238,148,70,.12),0 0 16px rgba(255,122,26,.5)}
.et-n{margin-bottom:10px;font-family:var(--label);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--cinza)}
.etapa .h-item+p{margin-top:8px;color:var(--cinza);max-width:44ch}
.js .etapa{opacity:.42;transition:opacity .7s var(--ease-out)}
.js .etapa.lit{opacity:1}

/* =========================================================
   OBRAS · a fita com as fotos do Instagram
   ========================================================= */
.obras{padding:var(--sec-y) 0 calc(var(--sec-y) * .9);overflow:hidden}
.obras-head{display:grid;justify-items:center;gap:14px;text-align:center}
.obras-head p{color:var(--cinza);max-width:44ch}
.obras-head .btn{margin-top:14px}
.reel{position:relative;margin-top:clamp(44px,5vw,68px);overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.reel::-webkit-scrollbar{display:none}
.reel-track{display:flex;gap:16px;width:max-content;padding:0 var(--gutter)}
.reel-track li{flex:none;width:clamp(190px,19vw,270px);border-radius:18px;overflow:hidden;background:var(--noite-3);box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.reel-track img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover}
.js .reel.loop{overflow:hidden}
.reel:not(.loop) .clone{display:none}
.js .reel.loop .reel-track{gap:0;padding-inline:0;will-change:transform}
.js .reel.loop .reel-track li{margin-right:16px}

/* =========================================================
   DÚVIDAS
   ========================================================= */
.faq{padding:var(--sec-y) 0}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:132px}
.faq-side p{margin-top:22px;color:var(--tinta-2);max-width:36ch}
.faq-side a{font-weight:600;color:var(--tinta);text-decoration-thickness:1px;text-underline-offset:4px}
.faq-list details{border-top:1px solid var(--linha-c)}
.faq-list details:last-child{border-bottom:1px solid var(--linha-c)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:24px 0;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(currentColor,currentColor) 50% 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/1.5px 100% no-repeat;transition:transform .5s var(--ease-out)}
.faq-list details.is-open summary::after,html:not(.faq-anim) .faq-list details[open] summary::after{transform:rotate(135deg)}
.q{font-family:var(--display);font-weight:600;font-stretch:108%;font-size:clamp(19px,1.5vw,23px);line-height:1.25;letter-spacing:-.012em}
.ans{padding:0 48px 26px 0;color:var(--tinta-2);max-width:62ch}

/* =========================================================
   CONTATO · o pedido vira mensagem no WhatsApp
   ========================================================= */
.contato{position:relative;overflow:hidden;padding:var(--sec-y) 0}
.contato-mark{position:absolute;right:-10vw;top:50%;width:min(84vw,1180px);transform:translateY(-50%);opacity:.04;pointer-events:none}
.contato-mark svg{display:block;width:100%;height:auto;fill:var(--giz)}
.contato-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,6vw,96px);align-items:center}
.contato-copy .lede{margin-top:26px}
.contatos{display:grid;gap:10px;margin-top:36px}
.contatos li{display:flex;align-items:center;gap:14px;min-height:44px;color:var(--cinza)}
.contatos .ic{color:var(--laranja)}
.contatos a{display:inline-flex;align-items:center;min-height:44px;color:var(--giz);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(242,240,235,.25);transition:border-color .3s}
.contatos a:hover{border-color:var(--laranja)}
.form{position:relative;padding:clamp(24px,3vw,38px);border-radius:28px;background:linear-gradient(180deg,rgba(25,25,28,.94),rgba(15,15,17,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(242,240,235,.09),0 40px 80px -40px rgba(0,0,0,.85)}
.field{display:grid;gap:10px;margin-bottom:22px}
.field label,.field legend{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--giz)}
.field legend{margin-bottom:10px}
.opt{margin-left:4px;font-size:13px;font-weight:400;color:var(--cinza)}
.field input[type=text],.field textarea{width:100%;padding:0 16px;border-radius:14px;border:1px solid rgba(242,240,235,.16);background:rgba(10,10,11,.6);color:var(--giz);font-size:16px;transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.field input[type=text]{height:52px}
.field textarea{min-height:96px;padding-block:13px;line-height:1.5;resize:vertical}
.field :is(input,textarea)::placeholder{color:#8A8883}
.field :is(input,textarea):hover{border-color:rgba(242,240,235,.3)}
.field :is(input,textarea):focus{outline:none;border-color:rgba(238,148,70,.8);box-shadow:0 0 0 4px rgba(238,148,70,.14)}
.field input[aria-invalid=true]{border-color:#FF9C8F}
.chips{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(242,240,235,.18);font-size:14.5px;font-weight:500;color:var(--cinza);transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out)}
.chip:hover span{border-color:rgba(242,240,235,.42);color:var(--giz)}
.chip input:checked+span{background:var(--giz);border-color:transparent;color:var(--tinta)}
.chip input:focus-visible+span{outline:2px solid var(--laranja);outline-offset:3px}
.form-msg{min-height:1.4em;margin-top:12px;font-size:14.5px;font-weight:600;text-align:center}
.form-msg.bad{color:#FFB0A5}
.form-msg.ok{color:var(--laranja)}
.form-nota{margin-top:4px;font-size:13.5px;color:var(--cinza);text-align:center}

/* =========================================================
   RODAPÉ · editorial, com a marca grande descansando no chão
   ========================================================= */
.rodape{position:relative;overflow:hidden;padding:72px 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--linha-e);background:#08080A}
.rodape-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;padding-bottom:44px}
.rodape-lema{font-family:var(--display);font-weight:600;font-stretch:112%;font-size:clamp(24px,2.4vw,36px);line-height:1.16;letter-spacing:-.02em;color:var(--giz)}
.rodape-lema span{color:var(--cinza)}
.rodape-links{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(242,240,235,.22);font-weight:600;font-size:15px;text-decoration:none;transition:box-shadow .3s,background-color .3s}
.pill:hover{box-shadow:inset 0 0 0 1px rgba(242,240,235,.55)}
.pill-main{background:var(--btn-brasa);color:#1B1007;box-shadow:inset 0 1px 0 rgba(255,238,220,.75)}
.pill-main:hover{box-shadow:inset 0 1px 0 rgba(255,238,220,.85),0 12px 30px -14px rgba(255,122,26,.6)}
.rodape-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:36px 0 40px;border-top:1px solid var(--linha-e)}
.rodape-cols .rc-t{margin-bottom:12px;font-family:var(--label);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--cinza-2)}
.rodape-cols p{font-size:15.5px;line-height:1.75;color:var(--cinza)}
.rodape-cols a{color:var(--giz);text-decoration:none;border-bottom:1px solid rgba(242,240,235,.2);transition:border-color .3s}
.rodape-cols a:hover{border-color:var(--laranja)}
.rodape-logo{display:block;width:100%;height:auto;margin-top:clamp(12px,2vw,28px);fill:var(--giz);-webkit-mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.18) 100%);mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.18) 100%)}
.rodape-copy{margin-top:24px;font-size:13px;color:var(--cinza-2)}
.rodape-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;margin-top:24px}
.rodape-base .rodape-copy{margin-top:0}
.glevik{display:inline-flex;align-items:center;padding:10px 0;margin:-10px 0;font-size:12px;line-height:1;color:var(--cinza-2);text-decoration:none;transition:color .3s var(--ease-out)}
.glevik img{display:block;width:auto;height:22px;opacity:.9;transition:opacity .3s var(--ease-out),filter .3s var(--ease-out)}
.glevik:hover img,.glevik:focus-visible img{opacity:1;filter:brightness(1.14)}
.glevik:hover,.glevik:focus-visible{color:var(--giz)}

/* Barra do WhatsApp no celular */
.cta-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:none;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:999px;background:var(--btn-brasa);color:#1B1007;font-weight:600;font-size:16.5px;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,238,220,.75),0 18px 40px -12px rgba(0,0,0,.8);transform:translateY(150%);transition:transform .5s var(--ease-out)}
.cta-bar.show{transform:none}
@media (max-width:720px){.cta-bar{display:flex}}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1100px){
  .sim-grid{grid-template-columns:minmax(0,1fr)}
  .sim-copy{position:static}
  .rodape-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .duas .h-statement,.duas-body{grid-column:1 / -1}
  .riscos{grid-template-columns:1fr;gap:0;margin-top:56px}
  .riscos li{padding:21px 0 23px 48px}
  .risco-n{position:absolute;left:0;top:30px;margin:0}
  .serv-head{grid-template-columns:minmax(0,1fr)}
  .serv-head .lede{justify-self:start}
  .serv-grid{grid-template-columns:minmax(0,1fr)}
  .serv-view{display:none}
  .sv{padding:26px 0 30px}
  .sv::before{display:none}
  .sv-media{display:block;margin-bottom:22px;border-radius:20px;overflow:hidden;aspect-ratio:4 / 3;background:var(--noite-3)}
  .sv-media img{width:100%;height:100%;object-fit:cover}
  .sv-media.sv-gate-m{display:grid;place-items:center}
  .sv-media .gate{width:auto;height:100%;margin:auto}
  .sv-t,.sv.is-on .sv-t{color:var(--giz)}
  .sv-n,.sv.is-on .sv-n{color:var(--laranja)}
  .sv-body p,.sv.is-on .sv-body p{color:var(--cinza)}
  .ad-grid,.como-grid,.faq-grid,.contato-grid{grid-template-columns:minmax(0,1fr)}
  .como-side,.faq-side{position:static}
  .pares-list{grid-template-columns:minmax(0,1fr);gap:34px;max-width:560px}
  .contato-mark{right:-40vw;top:14%;width:130vw}
}
@media (max-width:640px){
  .sim-ctl{grid-template-columns:minmax(0,1fr)}
  .sim-ctl>:is(.sim-acm,.sim-cor){grid-column:1}
  .scene{aspect-ratio:4 / 3.4}
  .sc-predio{top:17%;bottom:12%}
  .sc-name{top:17%;height:29.4%}
  .sv-t{font-size:clamp(25px,7vw,30px)}
  .sv-n{width:44px}
  .sv-body{padding-left:0}
  .trilha{padding-left:60px}
  .tr-line{left:19px}
  .tr-head{left:20px}
  .et-dot{left:-45px}
  .faq-list summary{padding:20px 0}
  .ans{padding-right:0}
  .rodape{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .rodape-top{flex-direction:column;align-items:flex-start}
  .rodape-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 20px}
}
@media (max-width:420px){
  .btn-lg{padding:0 18px;font-size:15.5px}
  .contato .h-statement{font-size:clamp(32px,9vw,40px)}
  .chip span{padding:0 14px;font-size:14px}
  .ad-tab{padding:0 20px}
}

/* =========================================================
   MOVIMENTO REDUZIDO · tudo nos estados finais
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv .rv-i,.js :is(.sv,.par).rv{opacity:1;transform:none;transition:none}
  .js :is(.rv .kicker,.kicker.rv)::before,.js :is(.rv .kicker,.kicker.rv)::after{transform:none;transition:none}
  .js .riscos .risco-t{transition:none}
  .glow{animation:none}
  .btn-brasa:hover::after{animation:none}
  .js .etapa{opacity:1;transition:none}
  .sv-shot{transition:none}
}