@font-face{font-family:Nippo;src:url(/fonts/nippo-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Nippo;src:url(/fonts/nippo-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* marca: verde do logo (oklch 42% .074 169) e o amarelo das colunas como sinal */
  --verde:#195b47; --verde-claro:oklch(62% .09 169); --sinal:#f2c318; --sinal-escuro:oklch(70% .15 90);
  --grafite:oklch(20% .014 168); --grafite-2:oklch(25% .016 168); --linha:oklch(100% 0 0 / .12);
  --concreto:oklch(94% .007 95); --concreto-2:oklch(89% .008 95); --tinta:oklch(22% .016 168); --tinta-2:oklch(42% .014 168);
  --creme:#f4f1e8;
  --display:Nippo,"Satoshi",system-ui,sans-serif; --corpo:Satoshi,system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-hero:clamp(2.5rem,1.3rem + 4.2vw,4.6rem); --t-2:clamp(2rem,1.3rem + 3vw,3.6rem); --t-3:clamp(1.25rem,1.1rem + .6vw,1.6rem);
  --ease:cubic-bezier(.2,.8,.2,1); --curto:280ms; --longo:900ms;
  --topo:76px; --lado:clamp(1.1rem,4vw,3.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 12px)}
body{margin:0;background:var(--grafite);color:var(--creme);font:400 1.0625rem/1.6 var(--corpo);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--sinal);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.01em;margin:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:1rem;top:-4rem;z-index:50;background:var(--sinal);color:var(--tinta);padding:.6rem 1rem;font-weight:700}
.pular:focus{top:1rem}
.rotulo{font:500 .95rem/1.3 var(--display);letter-spacing:.02em;color:var(--sinal);margin:0 0 1rem}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:.8rem 1.4rem;font:700 1rem/1 var(--corpo);text-decoration:none;border-radius:3px;transition:transform var(--curto) var(--ease),background var(--curto)}
.btn:hover{transform:translateY(-2px)}
.btn-sinal{background:var(--sinal);color:var(--tinta)}
.btn-sinal:hover{background:#ffd43a}
.btn-linha{border:2px solid oklch(100% 0 0 / .5);color:var(--creme)}
.btn-linha:hover{border-color:var(--sinal)}

/* topo: a placa da obra (logo numa chapa branca parafusada) e uma régua que mede a rolagem */
.topo{position:fixed;inset:0 0 auto;z-index:20;height:var(--topo);display:flex;align-items:center;gap:1.5rem;padding:0 var(--lado);background-color:var(--grafite);border-bottom:1px solid var(--linha)}
.topo-placa{position:relative;background:#fff;padding:.45rem .9rem;border-radius:2px;box-shadow:0 0 0 1px var(--verde) inset}
.topo-placa::before,.topo-placa::after{content:"";position:absolute;top:5px;width:5px;height:5px;border-radius:50%;background:oklch(70% .01 168);box-shadow:0 calc(100% + 34px) 0 oklch(70% .01 168)}
.topo-placa::before{left:5px}.topo-placa::after{right:5px}
.topo-placa img{width:118px;height:auto}
.topo-nav{display:flex;gap:1.6rem;margin-left:auto}
.topo-nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:oklch(100% 0 0 / .78);padding:.6rem 0;transition:color var(--curto)}
.topo-nav a:hover{color:var(--sinal)}
.topo-fone{display:flex;flex-direction:column;text-decoration:none;font:700 1rem/1.15 var(--display);border-left:1px solid var(--linha);padding-left:1.4rem}
.topo-fone small{font:500 .78rem/1 var(--corpo);color:oklch(100% 0 0 / .55);margin-bottom:.25rem}
.regua{position:absolute;left:0;right:0;bottom:-1px;height:7px;background:repeating-linear-gradient(90deg,oklch(100% 0 0 / .28) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,oklch(100% 0 0 / .45) 0 1px,transparent 1px 50px);background-size:auto 4px,auto 7px;background-repeat:repeat-x;background-position:0 0}
.regua i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--sinal);transform-origin:0 50%;transform:scaleX(var(--p,0));mix-blend-mode:normal;height:2px;top:auto;bottom:0}

/* palco: hero + obra dividem a mesma cena presa na tela */
.palco{position:relative;background:var(--grafite);overflow:clip}
.palco-cena{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;
  background:linear-gradient(oklch(100% 0 0 / .05) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,oklch(100% 0 0 / .05) 1px,transparent 1px) 0 0/48px 48px}
.palco-cena canvas{position:absolute;top:0;right:0;width:62%;height:100%;opacity:0;transition:opacity 1.2s var(--ease)}
.palco.com-3d .palco-cena canvas{opacity:1}
.palco.com-3d .planta{opacity:0}
.planta{position:absolute;right:6%;top:calc(var(--topo) + 6vh);width:min(44vw,560px);height:calc(100% - var(--topo) - 12vh);transition:opacity 1s var(--ease)}
.planta .col path{fill:transparent;stroke:oklch(100% 0 0 / .55);stroke-width:2;vector-effect:non-scaling-stroke;transition:fill .8s var(--ease) calc(var(--i) * 90ms)}
.planta .col{transform-box:fill-box;transform-origin:50% 100%;transition:transform .9s var(--ease) calc(var(--i) * 90ms)}
.planta .cortes path{fill:none;stroke:var(--grafite);stroke-width:14;opacity:0;transition:opacity .6s}
.planta .cortes path:last-child{stroke-width:27}
.planta[data-fase="1"] .col{transform:scaleY(.12)}
.planta[data-fase="2"] .col path{fill:oklch(100% 0 0 / .14)}
.planta[data-fase="3"] .col.v path,.planta[data-fase="4"] .col.v path{fill:var(--verde-claro);stroke:transparent}
.planta[data-fase="3"] .col.a path,.planta[data-fase="4"] .col.a path{fill:var(--sinal);stroke:transparent}
.planta[data-fase="3"] .cortes path,.planta[data-fase="4"] .cortes path{opacity:1}
.palco-veu{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--grafite) 0%,oklch(20% .014 168 / .85) 32%,transparent 58%)}

.hero,.obra{position:relative;z-index:1;padding-inline:var(--lado)}
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--topo) + 2rem);padding-bottom:3rem;max-width:44rem}
.hero h1{font-size:var(--t-hero);margin-bottom:1.4rem}
.hero-texto{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);max-width:30rem;color:oklch(100% 0 0 / .82);margin:0 0 2rem}
.acoes{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-dica{margin-top:3.5rem;font-size:.92rem;color:oklch(100% 0 0 / .5);display:flex;align-items:center;gap:.7rem}
.hero-dica::before{content:"";width:1px;height:42px;background:linear-gradient(var(--sinal),transparent);animation:desce 2.2s var(--ease) infinite}
@keyframes desce{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.obra{padding-bottom:20vh}
.etapa{min-height:88vh;display:flex;flex-direction:column;justify-content:center;max-width:27rem;opacity:.68;transition:opacity .6s var(--ease)}
.etapa.ativa{opacity:1}
.etapa-n{font:700 1rem/1 var(--display);color:var(--sinal);display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.etapa-n::before{content:"";width:2.4rem;height:2px;background:currentColor}
.etapa h3{font-size:var(--t-2);margin-bottom:1rem}
.etapa p{margin:0;color:oklch(100% 0 0 / .8);font-size:1.12rem}

/* faixa amarela corrida */
.faixa{background:var(--sinal);color:var(--tinta);overflow:hidden;position:relative;z-index:2}
.faixa-trilho{display:flex;width:max-content;animation:corre 38s linear infinite}
.faixa span{font:700 clamp(1.2rem,1rem + 1vw,1.9rem)/1 var(--display);padding:1.1rem 1.4rem;display:flex;align-items:center;gap:2.8rem;white-space:nowrap}
.faixa span::after{content:"";width:.7em;height:.7em;background:var(--verde);clip-path:polygon(0 100%,0 18%,100% 0,100% 100%)}
@keyframes corre{to{transform:translateX(-50%)}}

/* o que fazemos: claro, concreto */
.negocio,.setores{background:var(--concreto);color:var(--tinta);padding:clamp(4rem,10vw,8rem) var(--lado)}
.negocio .rotulo,.setores .rotulo{color:var(--verde)}
.negocio-intro{max-width:44rem;margin-bottom:3.5rem}
.negocio-intro h2,.setores-intro h2{font-size:var(--t-2);margin-bottom:1.2rem}
.negocio-intro p{font-size:1.15rem;color:var(--tinta-2);max-width:36rem}
.frentes{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:1.2rem}
.frente{background:#fff;border:1px solid var(--concreto-2);padding:1.8rem;display:flex;flex-direction:column;transition:transform var(--curto) var(--ease),border-color var(--curto)}
.frente:hover{transform:translateY(-3px);border-color:var(--verde)}
.frente-grande{background:var(--verde);color:var(--creme);border-color:var(--verde)}
.frente.frente-grande p{color:oklch(100% 0 0 / .82)}
.frente h3{font-size:var(--t-3);margin:1.4rem 0 .7rem}
.frente p{margin:0;color:var(--tinta-2)}
.frente-desenho{width:100%;max-width:240px;height:auto;fill:none;stroke:currentColor;stroke-width:1.6;opacity:.75}
.frente-desenho path{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s var(--ease) .2s}
.frente.in .frente-desenho path{stroke-dashoffset:0}

/* marco: o ano em que a empresa abriu, em volume, por trás */
.marco{position:relative;overflow:hidden;background:var(--verde);padding:clamp(5rem,12vw,9rem) var(--lado)}
.marco-fundo{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;pointer-events:none}
.marco-fundo span{font:700 clamp(14rem,40vw,36rem)/.8 var(--display);color:transparent;-webkit-text-stroke:2px oklch(100% 0 0 / .16);margin-right:-.04em}
.marco-texto{position:relative;max-width:40rem}
.marco h2{font-size:var(--t-2);margin-bottom:2.2rem}
.ficha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2rem;margin:0}
.ficha div{border-top:1px solid oklch(100% 0 0 / .3);padding-top:.8rem}
.ficha dt{font-size:.9rem;color:oklch(100% 0 0 / .65)}
.ficha dd{margin:.3rem 0 0;font:500 1.15rem/1.3 var(--display)}
@supports (animation-timeline:view()){
  .marco-fundo span{animation:sobe linear both;animation-timeline:view()}
  @keyframes sobe{from{transform:translateY(18%)}to{transform:translateY(-18%)}}
  .palco-cena{background-position:0 0}
}

/* setores: diretório de e-mails reais da empresa */
.setores-intro{margin-bottom:2.5rem}
.setores-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--tinta)}
.setores-lista li{border-bottom:1px solid var(--concreto-2)}
.setores-lista li:nth-child(3n+2),.setores-lista li:nth-child(3n+3){border-left:1px solid var(--concreto-2)}
.setores-lista a{display:flex;flex-direction:column;gap:.35rem;padding:1.5rem 1.4rem;text-decoration:none;min-height:44px;transition:background var(--curto)}
.setores-lista a:hover{background:#fff}
.setores-lista b{font:700 1.15rem/1.2 var(--display)}
.setores-lista span{color:var(--verde);font-weight:500;overflow-wrap:anywhere}

/* onde: a rodovia */
.onde{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;padding:clamp(4rem,10vw,8rem) var(--lado);background:var(--grafite-2)}
.onde-mapa svg{width:100%;height:auto}
.estrada{fill:none;stroke:oklch(32% .012 168);stroke-width:46;stroke-linecap:round}
.faixa-c{fill:none;stroke:var(--sinal);stroke-width:3;stroke-dasharray:18 16;animation:faixa 1.4s linear infinite}
@keyframes faixa{to{stroke-dashoffset:-34}}
.km circle:first-child{fill:var(--sinal);opacity:.25;transform-box:fill-box;transform-origin:center;animation:pulso 2.4s var(--ease) infinite}
.km circle:last-child{fill:var(--sinal)}
@keyframes pulso{0%{transform:scale(.6);opacity:.5}100%{transform:scale(2.4);opacity:0}}
.onde-mapa text{fill:var(--creme);font:700 22px var(--display)}
.onde-mapa text.sutil{font:500 15px var(--corpo);fill:oklch(100% 0 0 / .55)}
.onde h2{font-size:var(--t-2);margin-bottom:1.4rem}
.onde address{font-style:normal;font-size:1.15rem;line-height:1.55;margin-bottom:1.6rem;color:oklch(100% 0 0 / .85)}
.fones{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.4rem}
.fones a{display:inline-flex;align-items:baseline;gap:.4rem;min-height:44px;align-items:center;font:500 1.1rem/1.2 var(--display);text-decoration:none}
.fones a:hover{color:var(--sinal)}
.fones small{font:500 .8rem/1 var(--corpo);color:var(--sinal)}

.rodape{padding:3rem var(--lado) calc(2.4rem + env(safe-area-inset-bottom));background:var(--grafite);border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;gap:1.6rem 3rem;align-items:center;font-size:.92rem;color:oklch(100% 0 0 / .7)}
.rodape img{width:150px;height:auto}
.rodape p{margin:0}
.assinatura{margin-left:auto!important}
.assinatura a{color:var(--creme)}

.revela{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.revela.in{opacity:1;transform:none}
.sem-js .revela{opacity:1;transform:none}

@media (max-width:960px){
  :root{--topo:64px}
  .topo-nav{display:none}
  .topo-fone{margin-left:auto}
  .topo-placa img{width:100px}
  .palco-cena canvas{width:100%}
  .planta{right:50%;transform:translateX(50%);width:min(78vw,420px);top:calc(var(--topo) + 2vh);height:62%;opacity:.55}
  .palco-veu{background:linear-gradient(0deg,var(--grafite) 4%,oklch(20% .014 168 / .5) 40%,transparent 80%)}
  .hero{justify-content:flex-end;padding-bottom:4rem}
  .etapa{min-height:0;margin:0 0 62vh;opacity:1;padding:1.4rem;background:oklch(20% .014 168 / .84);backdrop-filter:blur(6px);border-left:3px solid var(--sinal)}
  .obra{padding-top:30vh}
  .frentes{grid-template-columns:1fr}
  .setores-lista{grid-template-columns:1fr}
  .setores-lista li:nth-child(n){border-left:0}
  .onde{grid-template-columns:1fr}
  .ficha{grid-template-columns:1fr 1fr}
  .assinatura{margin-left:0!important}
}
@media (max-width:420px){.topo-fone small{display:none}.ficha{grid-template-columns:1fr}.fones{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .faixa-trilho{animation:none}
  .revela{opacity:1;transform:none}
}