@font-face{font-family:Inter;src:url('../assets/inter-variable.woff') format('woff');font-weight:100 900;font-display:swap}
@font-face{font-family:'General Sans';src:url('../assets/general-sans-extralight.woff2') format('woff2');font-weight:200;font-display:swap}
:root{--preto:#080808;--verde:#223231;--marmore:#EDEAE2;--dim:#9aa5a8;--linha:#ffffff22;--pad:20px;--ease:cubic-bezier(.16,1,.3,1);font-family:Inter,Arial,sans-serif;font-synthesis:none;color:var(--marmore);background:var(--preto);color-scheme:dark;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body,figure,p,h1,h2,h3,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--marmore);outline-offset:4px}
::selection{background:var(--marmore);color:var(--preto)}
.skip-link{position:absolute;left:24px;top:-80px;padding:12px;background:#fff;color:#000;z-index:30}.skip-link:focus{top:12px}
main{padding:0 var(--pad)}
.titulo-gs{font-family:'General Sans',Inter,sans-serif;font-weight:200;text-transform:uppercase;letter-spacing:-.02em}
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:99px;background:var(--marmore);color:var(--preto);font-size:15px;font-weight:500;transition:transform .25s}
.botao:hover{transform:translateY(-2px)}

/* Índice: o título e os cases como obras de portfólio. */
.indice-topo{padding:132px 0 48px;display:grid;gap:20px}
.indice-topo h1{font-size:clamp(64px,16vw,220px);line-height:.85}
.indice-topo p{max-width:34ch;font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:var(--dim)}
.obras{display:grid;gap:56px;padding-bottom:96px}
.obra{display:grid;gap:18px}
.obra-foto{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:4/5;background:#151a19}
.obra-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .8s ease;filter:saturate(.92)}
.obra:hover .obra-foto img,.obra:focus-visible .obra-foto img{transform:scale(1.04);filter:none}
.obra-info{display:grid;gap:8px}
.obra-info h2{font-size:clamp(22px,2vw,30px);font-weight:400;letter-spacing:-.02em}
.obra-info .resultado{font-size:clamp(17px,1.4vw,20px);line-height:1.4;color:var(--marmore)}
.obra-info .escopo{font-size:14px;color:var(--dim)}
.obra.proxima .obra-foto{display:grid;place-items:center;background:var(--verde)}
.obra.proxima .moeda{width:34%;aspect-ratio:1;background:var(--marmore);-webkit-mask:url('../assets/grone-moeda.svg') center/contain no-repeat;mask:url('../assets/grone-moeda.svg') center/contain no-repeat;transition:transform 1.2s var(--ease)}
.obra.proxima:hover .moeda{transform:rotate(-8deg) scale(1.05)}

/* Mira de rastreamento que trava na foto ao passar o mouse (e aparece sozinha no celular). */
.mira{position:absolute;inset:16% 18% 22% 18%;opacity:0;scale:1.12;transition:opacity .5s ease,scale .9s var(--ease);pointer-events:none}
.mira::before{content:'';position:absolute;inset:0;border:1.5px solid var(--marmore);clip-path:polygon(0 0,16% 0,16% 1.5%,1.5% 1.5%,1.5% 16%,0 16%,0 0,100% 0,100% 16%,98.5% 16%,98.5% 1.5%,84% 1.5%,84% 0,100% 0,100% 100%,84% 100%,84% 98.5%,98.5% 98.5%,98.5% 84%,100% 84%,100% 100%,0 100%,0 84%,1.5% 84%,1.5% 98.5%,16% 98.5%,16% 100%,0 100%)}
.mira span{position:absolute;left:0;bottom:calc(100% + 8px);padding:3px 7px;border:1px solid #edeae280;border-radius:3px;background:#080808a0;font:10px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;white-space:nowrap}
.obra:hover .mira,.obra:focus-visible .mira,.mira.fixa{opacity:1;scale:1}
.marcas{padding:72px 0;border-top:1px solid var(--linha)}
.marcas h2{font-size:15px;font-weight:400;color:var(--dim)}
.marcas ul{margin-top:20px}
.marcas li{padding:14px 0;border-bottom:1px solid var(--linha);font-family:'General Sans',Inter,sans-serif;font-weight:200;text-transform:uppercase;font-size:clamp(32px,6vw,84px);line-height:1;letter-spacing:-.02em}

/* Página do case. */
.caso-capa{padding-top:76px}
.caso-foto{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:4/5;background:#151a19}
.caso-foto>img{width:100%;height:100%;object-fit:cover;animation:assenta 1.8s var(--ease) both}
@keyframes assenta{from{transform:scale(1.08);opacity:.4}}
.rotulo{position:absolute;z-index:2;top:12px;right:12px}
.rotulo summary{list-style:none;display:inline-flex;align-items:center;gap:12px;height:36px;padding:0 6px 0 14px;border-radius:8px;cursor:pointer;background:#edeae2c8;color:var(--preto);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:14px}
.rotulo summary::-webkit-details-marker{display:none}
.mais{position:relative;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#22323118}
.mais::before,.mais::after{content:'';position:absolute;width:10px;height:1.5px;background:currentColor;transition:rotate .35s var(--ease)}
.mais::after{rotate:90deg}
details[open]>summary .mais::after{rotate:0deg}
.rotulo p{position:absolute;right:0;top:44px;width:min(320px,calc(100vw - 56px));padding:16px 18px;border-radius:10px;background:#edeae2eb;color:var(--preto);font-size:15px;line-height:1.45}
.caso-intro{display:grid;gap:22px;padding:64px 0}
.caso-intro h1{font-size:clamp(52px,10vw,150px);line-height:.88}
.caso-intro .lead{max-width:22ch;font-size:clamp(26px,3vw,44px);line-height:1.12;font-weight:300;letter-spacing:-.02em}
.caso-intro .contexto{max-width:52ch;font-size:clamp(16px,1.25vw,19px);line-height:1.65;color:var(--dim)}

/* O preto toma conta: a foto fica presa, o escuro sobe e o número aparece. */
.preto{position:relative;height:260vh;margin:0 calc(var(--pad)*-1)}
.preto .palco{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.preto .palco>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.preto .tinta{position:absolute;inset:0;background:var(--preto);transform-origin:bottom;transform:scaleY(var(--p,0))}
.preto .numero{position:relative;z-index:1;display:grid;justify-items:center;gap:14px;text-align:center;opacity:var(--n,0);translate:0 calc((1 - var(--n,0))*30px)}
.preto .numero b{font-family:'General Sans',Inter,sans-serif;font-weight:200;font-size:clamp(96px,22vw,320px);line-height:.85;letter-spacing:-.04em}
.preto .numero span{font-size:clamp(16px,1.5vw,22px);color:var(--dim)}
.numeros{display:grid;gap:1px;margin:0 0 88px;background:var(--linha);border-block:1px solid var(--linha)}
.numeros div{display:grid;gap:8px;padding:28px 0;background:var(--preto)}
.numeros b{font-family:'General Sans',Inter,sans-serif;font-weight:200;font-size:clamp(48px,6vw,88px);line-height:.9;letter-spacing:-.03em}
.numeros span{font-size:14px;color:var(--dim)}
.historia{display:grid;gap:40px;padding:0 0 96px}
.historia div{display:grid;gap:12px}
.historia h3{font-size:15px;font-weight:400;color:var(--dim)}
.historia p{font-size:clamp(20px,1.9vw,28px);line-height:1.3;font-weight:300;letter-spacing:-.015em}
.detalhe{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:16/9;margin-bottom:24px;background:#151a19}
.detalhe>img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 40%);transform:scale(1.6);transform-origin:var(--foco,50% 40%)}
.detalhe .caixa{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h)}
.detalhe .caixa::before{content:'';position:absolute;inset:0;border:1.5px solid var(--marmore);clip-path:polygon(0 0,18% 0,18% 3%,3% 3%,3% 18%,0 18%,0 0,100% 0,100% 18%,97% 18%,97% 3%,82% 3%,82% 0,100% 0,100% 100%,82% 100%,82% 97%,97% 97%,97% 82%,100% 82%,100% 100%,0 100%,0 82%,3% 82%,3% 97%,18% 97%,18% 100%,0 100%)}
.detalhe .caixa span{position:absolute;left:0;bottom:calc(100% + 6px);padding:3px 7px;border:1px solid #edeae280;border-radius:3px;background:#080808a0;font:10px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;white-space:nowrap}
.escopo-caso{padding:56px 0 88px;border-top:1px solid var(--linha);display:grid;gap:18px}
.escopo-caso h2{font-size:15px;font-weight:400;color:var(--dim)}
.escopo-caso ul{display:flex;flex-wrap:wrap;gap:10px 28px}
.escopo-caso li{font-size:clamp(18px,1.6vw,24px);font-weight:300;letter-spacing:-.01em}
.proximo{padding:72px 0 120px;border-top:1px solid var(--linha);display:grid;gap:32px}
.proximo h2{font-size:15px;font-weight:400;color:var(--dim)}
.proximo .obra{max-width:520px}

/* Contato no fim. */
.fale{padding:96px 0 120px;border-top:1px solid var(--linha);display:grid;gap:28px;justify-items:start}
.fale h2{font-size:clamp(40px,8vw,112px);line-height:.92}
.rodape{padding:28px var(--pad);font-size:12px;color:var(--dim)}

/* Entrada. */
.motion [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1.2s var(--ease)}
.motion [data-reveal].in-view{opacity:1;transform:none}

@media(min-width:900px){
  :root{--pad:clamp(32px,4vw,64px)}
  .indice-topo{grid-template-columns:1fr auto;align-items:end;padding:150px 0 72px}
  .obras{grid-template-columns:repeat(2,1fr);gap:72px 32px}
  .obras .obra:nth-child(even){margin-top:120px}
  .caso-capa .caso-foto{aspect-ratio:16/9}
  .caso-intro{grid-template-columns:1.2fr 1fr;column-gap:64px;align-items:end}
  .caso-intro h1{grid-column:1/-1}
  .numeros{grid-template-columns:repeat(3,1fr)}
  .numeros div{padding:32px 28px 32px 0}
  .historia{grid-template-columns:repeat(3,1fr);gap:48px}
}
@media(hover:none){.obra .mira{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){.caso-foto>img{animation:none}.preto{height:auto}.preto .palco{position:relative}.preto .tinta{transform:scaleY(1)}.preto .numero{opacity:1;translate:none}}
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Menu igual ao da home: botões claros à esquerda, logo no centro, contato à direita. */
.topo{position:fixed;z-index:20;top:0;left:0;right:0;height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
.topo .itens{display:contents}
.topo nav{display:flex;gap:10px}
.topo .itens a,.topo .menu{display:inline-flex;align-items:center;justify-content:center;width:112px;height:28px;padding:0;border:0;border-radius:8px;background:#f2f2ef;color:#808080;font:inherit;font-size:13px;letter-spacing:-.01em;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.topo .itens a:hover,.topo .itens a:focus-visible{color:#111;background:#e8e8e3;outline:none}
.topo .itens a[aria-current=page]{color:#111;background:#fff}
.topo .itens a.contato,.topo .menu{background:#223231;color:#f2f2ef}
.topo .itens a.contato:hover,.topo .itens a.contato:focus-visible{background:#111;color:#fff}
.topo .marca{position:absolute;left:50%;translate:-50% 0;width:34px}
.topo .marca img{width:100%;height:auto}
.assinatura{display:none}
.topo .menu{display:none}
.veu{display:none}
@media(max-width:760px){
  .topo{height:64px;padding:0 10px}
  .topo .marca{position:static;translate:none;width:auto;display:flex;align-items:center;gap:10px}.topo .marca img{width:38px}.topo .assinatura{display:block;color:#EDEAE2;text-transform:uppercase;font-weight:200;font-size:9.5px;line-height:1.3;letter-spacing:.14em;white-space:nowrap}
  .topo .menu{display:inline-flex;height:34px;font-size:14px;background:#f2f2ef;color:#111} /* claro: a página é escura */
  body.menu-aberto .topo .menu{background:#fff;color:#111}
  .topo .itens{display:flex;flex-direction:row-reverse;flex-wrap:wrap;align-content:flex-start;gap:10px;position:absolute;top:63px;left:10px;right:10px;visibility:hidden;pointer-events:none}
  .topo nav{display:contents}
  .topo .itens a{height:34px;font-size:14px;opacity:0;translate:0 -8px;transition:opacity .3s ease,translate .4s var(--ease),background-color .25s ease,color .25s ease}
  .topo .itens a.contato{background:#f2f2ef;color:#808080}
  body.menu-aberto .topo .itens{visibility:visible;pointer-events:auto}
  body.menu-aberto .topo .itens a{opacity:1;translate:0 0}
  body.menu-aberto .topo .itens a:nth-child(2){transition-delay:.04s}
  body.menu-aberto .topo .itens a:nth-child(3){transition-delay:.08s}
  body.menu-aberto .topo .itens a.contato{transition-delay:.12s}
  .veu{display:block;position:fixed;inset:0;z-index:19;background:rgba(17,17,17,.55);opacity:0;pointer-events:none;transition:opacity .3s ease}
  body.menu-aberto .veu{opacity:1;pointer-events:auto}
}
@media (max-width: 360px) { .topo .assinatura { font-size: 8.5px; letter-spacing: .07em; } .topo .menu { width: 88px; } } /* telas estreitas: a assinatura cabe ao lado do Menu */
.topo{transition:background-color .3s ease}
.topo.vidro{background:rgba(12,14,14,.45);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);} /* vidro quando algo passa por baixo */

/* ===== Índice de cases: um case de cada vez, marca, número e uma frase. ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.topo.claro{background:#fff}
.topo.claro .marca img{filter:brightness(0)}
@media(max-width:760px){.topo.claro .assinatura{color:#111}.topo.claro .menu{background:#223231;color:#f2f2ef}}
.cs-titulo{padding:112px 0 24px;font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-.02em}
.cs-bento{display:grid;gap:12px;padding-bottom:96px}
.cs-card{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:14px;background:#141716;border:1px solid #ffffff14;transition:border-color .3s ease}
.cs-card:hover{border-color:#ffffff33}
.cs-foto{overflow:hidden;aspect-ratio:4/3;background:#151a19}
.cs-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cs-card:hover .cs-foto img{transform:scale(1.03)}
.cs-texto{display:grid;gap:6px;align-content:start;padding:20px 22px 24px}
.cs-marca{font-size:14px;font-weight:400;color:var(--dim)}
.cs-numero{font-family:'General Sans',Inter,sans-serif;font-weight:200;font-size:44px;line-height:1;letter-spacing:-.02em}
.cs-dizer{font-size:16px;line-height:1.4}
.cs-card.fale-card{background:var(--verde);border-color:transparent;grid-template-rows:1fr;align-content:end}
.fale-card .cs-texto{padding:28px 22px;align-self:end}
.fale-card .botao{justify-self:start;margin-top:14px}
.cs-sem-foto{grid-template-rows:1fr}
.cs-sem-foto .cs-texto{align-self:end}
.cs-cliente{grid-template-rows:1fr;min-height:150px}
.cs-cliente .cs-texto{align-self:end;gap:4px}
.cs-nome{font-family:'General Sans',Inter,sans-serif;font-weight:200;font-size:30px;line-height:1;letter-spacing:-.01em;text-transform:uppercase}
@media(max-width:899px){
  .cs-bento{grid-template-columns:1fr 1fr}
  .cs-card:not(.cs-cliente),.cs-cliente+.cs-cliente+.cs-cliente{grid-column:1/-1}
  .cs-cliente{min-height:110px}
  .cs-nome{font-size:24px}
}
@media(min-width:900px){
  .cs-bento{grid-template-columns:1fr 1fr 1fr;gap:16px}
  .fale-card{grid-column:1/-1}
}

/* ===== Página do case: simples, sobre fundo branco. ===== */
.caso-branco{background:#fff;color:#111;color-scheme:light}
.caso-branco main{padding:0 var(--pad);max-width:1200px;margin:0 auto}
.caso-branco ::selection{background:#111;color:#fff}
.caso-branco :focus-visible{outline-color:#111}
.cb-topo{padding:128px 0 40px;display:grid;gap:16px}
.cb-topo h1{font-size:clamp(44px,7vw,104px);line-height:.9;color:#111}
.cb-titulo{max-width:24ch;font-size:clamp(20px,2vw,28px);line-height:1.25;font-weight:300;color:#3a3a3a}
.cb-foto{overflow:hidden;border-radius:10px;background:#f2f2ef;aspect-ratio:4/3}
.cb-foto img{width:100%;height:100%;object-fit:cover}
.cb-sobre{display:grid;gap:32px;padding:48px 0 64px}
.cb-ficha{display:grid;gap:14px;margin:0}
.cb-ficha div{display:grid;gap:2px}
.cb-ficha dt{font-size:12px;color:#8a8a8a}
.cb-ficha dd{margin:0;font-size:15px}
.cb-contexto{max-width:44ch;font-size:clamp(18px,1.6vw,22px);line-height:1.5;font-weight:300}
.cb-numeros{display:grid;border-top:1px solid #e6e6e2}
.cb-numeros div{display:grid;gap:6px;padding:28px 0;border-bottom:1px solid #e6e6e2}
.cb-numeros b{font-family:'General Sans',Inter,sans-serif;font-weight:200;font-size:clamp(44px,5vw,72px);line-height:.9;letter-spacing:-.03em}
.cb-numeros span{font-size:14px;color:#6b6b6b}
.cb-historia{display:grid;gap:32px;padding:64px 0}
.cb-historia div{display:grid;gap:8px}
.cb-historia h2{font-size:13px;font-weight:400;color:#8a8a8a}
.cb-historia p{font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.cb-proximo{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;padding:28px 0;border-top:1px solid #e6e6e2;border-bottom:1px solid #e6e6e2}
.cb-proximo img{width:96px;height:96px;object-fit:cover;border-radius:8px;transition:transform .6s var(--ease)}
.cb-proximo:hover img{transform:scale(1.05)}
.cb-proximo span{display:grid;gap:4px}
.cb-proximo em{font-style:normal;font-size:12px;color:#8a8a8a}
.cb-proximo strong{font-size:clamp(20px,2vw,26px);font-weight:400;letter-spacing:-.01em}
.cb-proximo small{font-size:14px;color:#6b6b6b}
.cb-fale{display:grid;gap:20px;justify-items:start;padding:80px 0 96px}
.cb-fale p{font-size:clamp(24px,2.6vw,36px);font-weight:300;letter-spacing:-.01em}
.cb-botao{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:8px;background:var(--verde);color:#f2f2ef;font-size:15px;transition:background-color .25s}
.cb-botao:hover{background:#111}
.caso-branco .rodape{max-width:1200px;margin:0 auto;color:#8a8a8a}
.topo.fixo-claro.vidro{background:rgba(255,255,255,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
@media(min-width:900px){
  .cb-sobre{grid-template-columns:1fr 1.4fr;column-gap:64px}
  .cb-numeros{grid-template-columns:repeat(3,1fr)}
  .cb-numeros div{padding:32px 24px 32px 0}
  .cb-historia{grid-template-columns:repeat(3,1fr);gap:48px}
  .cb-foto{aspect-ratio:16/9}
}

/* Autoridade GRONE nos cartões: verde do dinheiro, moeda como selo, mira de rastreamento nas fotos. */
.cs-card{position:relative;background:linear-gradient(180deg,#1b2625 0%,#0e1312 100%);border-color:#edeae21f;box-shadow:inset 0 1px 0 #edeae214}
.cs-card:hover{border-color:#edeae259}
.cs-marca{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#edeae299}
.cs-numero{font-size:52px;color:var(--marmore)}
.cs-dizer{color:#edeae2d0}
.cs-foto{position:relative;filter:saturate(.9)}
.cs-mira{position:absolute;inset:18% 16% 20%;pointer-events:none;opacity:.9}
.cs-mira::before{content:'';position:absolute;inset:0;border:1.5px solid #fff;clip-path:polygon(0 0,14% 0,14% 2%,2% 2%,2% 14%,0 14%,0 0,100% 0,100% 14%,98% 14%,98% 2%,86% 2%,86% 0,100% 0,100% 100%,86% 100%,86% 98%,98% 98%,98% 86%,100% 86%,100% 100%,0 100%,0 86%,2% 86%,2% 98%,14% 98%,14% 100%,0 100%)}
.cs-mira b{position:absolute;left:0;bottom:calc(100% + 6px);padding:3px 7px;border:1px solid #ffffff80;border-radius:3px;background:#080808b0;font:400 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#fff;white-space:nowrap}
.cs-mira{transition:inset .8s var(--ease)}
.cs-card:hover .cs-mira{inset:14% 12% 16%}
.cs-sem-foto::after,.cs-cliente::after{content:'';position:absolute;top:18px;right:18px;width:64px;aspect-ratio:1;background:var(--marmore);opacity:.08;-webkit-mask:url('../assets/grone-moeda.svg') center/contain no-repeat;mask:url('../assets/grone-moeda.svg') center/contain no-repeat}
.cs-cliente::after{width:44px}
.cs-nome{color:var(--marmore)}
.cs-card.fale-card{background:var(--verde);box-shadow:none}
.fale-card .cs-dizer{font-family:'General Sans',Inter,sans-serif;font-weight:200;font-size:30px;line-height:1.05;text-transform:uppercase;color:var(--marmore)}
.cs-selo{display:block;width:40px;aspect-ratio:1;margin-bottom:10px;background:var(--marmore);-webkit-mask:url('../assets/grone-moeda.svg') center/contain no-repeat;mask:url('../assets/grone-moeda.svg') center/contain no-repeat}