/* GBM Tecnologia · gbmtec.com.br
   Mundo: showroom de grade quadrada. Fundo de galeria, preto laqueado, prata nos filetes.
   A única cor da sala vem dos produtos. */

:root{
  --fundo:#f5f5f2;
  --papel:#ffffff;
  --tinta:#111214;
  --suave:#545a62;
  --prata:#a4a9b0;
  --filete:#d3d5d8;
  --ease:cubic-bezier(.16,1,.3,1);
  --f-titulo:"Josefin Sans","Century Gothic","Avenir Next",system-ui,sans-serif;
  --f-texto:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(16px,4vw,48px);
  --max:1320px;
  --topo:64px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --fundo:#0e0f11;
    --papel:#17181b;
    --tinta:#f2f2ee;
    --suave:#a8adb5;
    --prata:#5e636b;
    --filete:#2a2c30;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topo) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--fundo);color:var(--tinta);
  font:400 clamp(1rem,.96rem + .2vw,1.125rem)/1.62 var(--f-texto);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  accent-color:var(--tinta);caret-color:var(--tinta);
  scrollbar-color:var(--prata) var(--fundo);
}
::selection{background:var(--tinta);color:var(--fundo)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.pular{position:absolute;left:var(--gut);top:-80px;z-index:50;padding:14px 18px;background:var(--tinta);color:var(--fundo);font:500 .85rem/1 var(--f-titulo);letter-spacing:.14em;text-transform:uppercase}
.pular:focus{top:12px}

/* Células: todo controle é uma célula quadrada que enche de preto ao ativar */
.cel{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border:1px solid var(--tinta);border-radius:0;
  background:transparent;color:var(--tinta);
  font:500 .8rem/1 var(--f-titulo);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.cel:hover{background:var(--tinta);color:var(--fundo);text-decoration:none}
.cel--cheia{background:var(--tinta);color:var(--fundo)}
.cel--cheia:hover{background:var(--fundo);color:var(--tinta)}
.ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;flex:none}
.marca{width:40px;height:40px;fill:currentColor}

/* Topo */
.topo{position:sticky;top:0;z-index:20;background:var(--fundo);border-bottom:1px solid var(--tinta)}
.topo__grade{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut);display:flex;align-items:stretch;height:var(--topo)}
.topo .cel{min-height:0;height:100%}
.cel--marca{width:96px;padding:0;border-width:0 1px;border-style:solid}
.topo__nav{display:flex;flex:1;align-items:stretch}
.topo__nav a{display:flex;align-items:center;padding:0 24px;font:500 .8rem/1 var(--f-titulo);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-right:1px solid var(--tinta);transition:background-color .25s var(--ease),color .25s var(--ease)}
.topo__nav a:hover{background:var(--tinta);color:var(--fundo)}
.topo__cta{border-width:0 1px;margin-left:auto}
.topo__menu{display:none;margin-left:auto;border-width:0 0 0 1px}

/* Hero: o monograma é desenhado uma vez ao lado do título */
.hero{position:relative;overflow:hidden;padding:clamp(28px,4.5vh,56px) 0 clamp(28px,4vh,48px)}
.hero__grade{position:relative;max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.hero__texto{position:relative;z-index:1}
.hero__marca{display:block;width:min(34vw,200px);height:auto;margin-top:clamp(28px,5vw,40px);fill:var(--tinta)}
.hero__traco{display:none;fill:none;stroke:var(--tinta);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
h1{
  max-width:11em;font:300 clamp(2.5rem,8.6vw,6rem)/1.03 var(--f-titulo);
  letter-spacing:.03em;text-transform:uppercase;text-wrap:balance;
}
.hero__lead{max-width:60ch;margin-top:clamp(16px,2vw,24px);font-size:clamp(1.05rem,1rem + .25vw,1.2rem);line-height:1.55}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.6vw,28px)}
@media (min-width:1100px){
  .hero__grade{display:grid;grid-template-columns:minmax(0,1fr) min(32vw,440px);gap:56px;align-items:center}
  h1{font-size:clamp(3rem,4.8vw,4.5rem)}
  .hero__marca{width:min(100%,360px);margin:0 auto}
}

/* Janelas: furos na parede, cada um dá para um projeto no ar, com passe-partout */
.janelas{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta);background:var(--tinta)}
@media (min-width:1000px){.janelas{grid-template-columns:repeat(3,1fr)}.janela__vidro{aspect-ratio:3/2}}
.janelas li{min-width:0;background:var(--fundo)}
.janela{display:block;color:inherit;text-decoration:none}
.janela__vidro{display:block;aspect-ratio:4/3;padding:14px;background:var(--fundo)}
.janela__quadro{display:block;height:100%;overflow:hidden;border:1px solid var(--tinta);background:var(--papel)}
.janela__quadro img{width:100%;height:100%;object-fit:cover;object-position:left center;transition:transform 1.1s var(--ease)}
.janela:hover img{transform:scale(1.05)}
.janela__legenda{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:16px 18px;border-top:1px solid var(--tinta);transition:background-color .25s var(--ease),color .25s var(--ease)}
.janela__legenda b{font:600 .82rem/1.2 var(--f-titulo);letter-spacing:.18em;text-transform:uppercase}
.janela__legenda span{grid-column:1;font-size:.9rem;color:var(--suave);transition:color .25s var(--ease)}
.janela__legenda .ico{grid-column:2;grid-row:1 / span 2}
.janela:hover .janela__legenda{background:var(--tinta);color:var(--fundo)}
.janela:hover .janela__legenda span{color:var(--fundo)}
.janela:focus-visible{outline-offset:-6px}

/* Blocos */
.bloco{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:clamp(60px,9vw,120px) var(--gut)}
.bloco__cabeca{position:relative;display:grid;gap:18px 48px;padding-bottom:clamp(28px,4vw,44px)}
.bloco__cabeca::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--tinta);transform-origin:left}
.js .bloco__cabeca::after{transform:scaleX(0)}
.js .bloco__cabeca.visivel::after{transform:none;transition:transform 1.3s var(--ease)}
h2{font:300 clamp(1.8rem,3.6vw,2.9rem)/1.08 var(--f-titulo);letter-spacing:.06em;text-transform:uppercase;text-wrap:balance}
.bloco__lead{max-width:62ch;font-size:clamp(1.02rem,1rem + .25vw,1.2rem)}
@media (min-width:900px){
  .bloco__cabeca{grid-template-columns:5fr 7fr;align-items:end}
  .bloco__cabeca--pilha{grid-template-columns:1fr}
}
.pequeno{font:600 .78rem/1.2 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--suave)}

/* Cabeça lateral (trajetória e contato): título à esquerda, corpo à direita */
.bloco--lateral{display:grid;gap:40px 64px}
.lateral__cabeca{position:relative;display:grid;gap:20px;align-content:start;padding-top:24px}
.lateral__cabeca::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--tinta);transform-origin:left}
.js .lateral__cabeca::before{transform:scaleX(0)}
.js .lateral__cabeca.visivel::before{transform:none;transition:transform 1.3s var(--ease)}
.lateral__corpo{min-width:0}
@media (min-width:960px){
  .bloco--lateral{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}
  .lateral__cabeca{position:sticky;top:calc(var(--topo) + 32px)}
}

/* Furos: fileira de quadrados vazados, usada só nas duas viradas da página */
.furos{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut);height:22px}
.furos::before{
  content:"";display:block;height:100%;background:var(--prata);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='22' viewBox='0 0 24 22'%3E%3Crect x='6.5' y='5.5' width='11' height='11' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") 0 0/24px 22px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='22' viewBox='0 0 24 22'%3E%3Crect x='6.5' y='5.5' width='11' height='11' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") 0 0/24px 22px repeat-x;
}

/* Quadro de produtos */
.linha{display:grid;gap:10px 32px;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--filete)}
.linha__nome{font:400 clamp(1.25rem,2vw,1.6rem)/1.15 var(--f-titulo);letter-spacing:.1em;text-transform:uppercase}
.linha__texto{max-width:60ch}
.linha__pecas{color:var(--suave);font-size:.95rem}
.linha__estado{display:inline-flex;align-items:center;gap:10px;font:600 .78rem/1 var(--f-titulo);letter-spacing:.18em;text-transform:uppercase}
.linha__estado::before{content:"";width:9px;height:9px;background:var(--tinta);flex:none}
.linha__estado--pre::before{background:transparent;border:1.5px solid var(--tinta)}
@media (min-width:960px){
  .linha{grid-template-columns:2.2fr 5fr 3fr 1.3fr;align-items:start}
  .linha__estado{justify-self:end}
}
.bloco__rodape{margin-top:clamp(32px,4vw,52px);display:grid;gap:16px}
.lista-fina{display:grid;gap:12px;max-width:80ch}
.lista-fina li{display:grid;gap:2px 24px;color:var(--suave);font-size:.98rem}
.lista-fina b{color:var(--tinta);font:600 .8rem/1.5 var(--f-titulo);letter-spacing:.16em;text-transform:uppercase}
@media (min-width:640px){.lista-fina li{grid-template-columns:170px 1fr}}

/* Serviços: três células lado a lado, todas à vista */
.servicos{display:grid;gap:1px;margin:clamp(32px,4vw,52px) 6px 6px;border:1px solid var(--tinta);outline:1px solid var(--prata);outline-offset:6px;background:var(--tinta)}
@media (min-width:1000px){.servicos{grid-template-columns:repeat(3,1fr)}}
.servico{display:flex;flex-direction:column;gap:20px;padding:clamp(24px,3vw,40px);background:var(--papel)}
.servico h3{font:300 clamp(1.5rem,2.2vw,1.95rem)/1.12 var(--f-titulo);letter-spacing:.05em;text-transform:uppercase;text-wrap:balance}
.servico__tese{margin-top:-10px;font:600 .8rem/1.3 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--suave)}
.servico__lead{max-width:48ch}
.servico__lista h4{margin-bottom:12px;font:600 .78rem/1.2 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--suave)}
.servico__lista ul{display:grid;gap:10px}
.servico__lista li{position:relative;padding-left:22px}
.servico__lista li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border:1.3px solid var(--tinta)}
.servico .cel{margin-top:auto;align-self:flex-start}

/* Método: passos e ferramentas como células de uma grade */
.passos{display:grid;gap:1px;margin-top:clamp(28px,4vw,48px);border:1px solid var(--tinta);background:var(--tinta)}
@media (min-width:900px){.passos{grid-template-columns:repeat(4,1fr)}}
.passos li{display:grid;gap:14px;align-content:start;padding:clamp(22px,2.6vw,34px);background:var(--fundo)}
.passo__n{font:200 clamp(3.2rem,6vw,4.8rem)/.9 var(--f-titulo);font-variant-numeric:lining-nums}
.passos h3{font:500 1rem/1.3 var(--f-titulo);letter-spacing:.1em;text-transform:uppercase}
.passos p{color:var(--suave);max-width:46ch}
.pecas{margin-top:clamp(40px,5vw,72px)}
.pecas__titulo{margin-bottom:16px;font:600 .8rem/1.2 var(--f-titulo);letter-spacing:.22em;text-transform:uppercase}
.pecas__lista{display:grid;gap:1px;border:1px solid var(--tinta);background:var(--tinta)}
@media (min-width:560px){.pecas__lista{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.pecas__lista{grid-template-columns:repeat(3,1fr)}}
.pecas__lista > div{display:grid;gap:8px;align-content:start;padding:20px 22px;background:var(--fundo)}
.pecas__lista dt{font:600 .78rem/1.4 var(--f-titulo);letter-spacing:.18em;text-transform:uppercase;color:var(--suave)}

/* Trajetória */
.linha-tempo li{display:grid;gap:8px 32px;padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--filete)}
.linha-tempo li:first-child{padding-top:0}
.lt__quando{font:500 .85rem/1.4 var(--f-titulo);letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:lining-nums tabular-nums;color:var(--suave)}
.linha-tempo h3{font:400 1.2rem/1.2 var(--f-titulo);letter-spacing:.1em;text-transform:uppercase}
.lt__cargo{margin:2px 0 8px;color:var(--suave);font-size:.95rem}
.linha-tempo p:last-child{max-width:68ch}
@media (min-width:760px){.linha-tempo li{grid-template-columns:150px 1fr}}
.destaque{margin:clamp(36px,5vw,64px) 6px 0;padding:clamp(26px,4vw,52px);border:1px solid var(--tinta);outline:1px solid var(--prata);outline-offset:6px;background:var(--papel)}
.destaque__valor{font:200 clamp(2.2rem,5.4vw,4.4rem)/1 var(--f-titulo);letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:lining-nums}
.destaque figcaption{max-width:56ch;margin-top:18px;color:var(--suave)}
.formacao b{display:block;margin-bottom:4px;font:600 .78rem/1.2 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--suave)}
.acoes-cv{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.so-impressao{display:none}

/* Contato: canais diretos, cada um uma célula inteira clicável */
.canais{display:grid;gap:1px;margin:6px;border:1px solid var(--tinta);outline:1px solid var(--prata);outline-offset:6px;background:var(--tinta)}
.canal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 20px;padding:clamp(20px,2.6vw,32px);background:var(--papel);color:inherit;text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease)}
.canal__rotulo{font:600 .78rem/1.3 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--suave);transition:color .25s var(--ease)}
.canal__valor{grid-column:1;font:300 clamp(1.3rem,2.8vw,2.1rem)/1.15 var(--f-titulo);letter-spacing:.04em;overflow-wrap:anywhere}
.canal__nota{grid-column:1;font-size:.95rem;color:var(--suave);transition:color .25s var(--ease)}
.canal .ico{grid-column:2;grid-row:1 / span 3;width:22px;height:22px}
.canal:hover{background:var(--tinta);color:var(--fundo);text-decoration:none}
.canal:hover .canal__rotulo,.canal:hover .canal__nota{color:var(--fundo)}
.canal--principal{background:var(--tinta);color:var(--fundo)}
.canal--principal .canal__rotulo,.canal--principal .canal__nota{color:var(--fundo)}
.canal--principal:hover{background:var(--papel);color:var(--tinta)}
.canal--principal:hover .canal__rotulo,.canal--principal:hover .canal__nota{color:var(--suave)}
.canal:focus-visible{outline:2px solid var(--tinta);outline-offset:-8px}
.canal--principal:focus-visible{outline-color:var(--fundo)}
.canal--principal:hover:focus-visible{outline-color:var(--tinta)}

/* Rodapé como carimbo de prancha */
.rodape{border-top:1px solid var(--tinta)}
.rodape__grade{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:clamp(40px,6vw,72px) var(--gut);display:grid;gap:36px;align-items:end}
.rodape__marca{width:min(180px,50%);height:auto;aspect-ratio:1}
@media (min-width:900px){.rodape__grade{grid-template-columns:1fr 1.5fr}}
.carimbo{border:1px solid var(--tinta);background:var(--papel)}
.carimbo h2{padding:14px 18px;border-bottom:1px solid var(--tinta);font:600 .78rem/1.2 var(--f-titulo);letter-spacing:.22em}
.carimbo dl > div{display:grid;gap:2px 16px;padding:12px 18px;border-bottom:1px solid var(--filete)}
.carimbo dl > div:last-child{border-bottom:0}
.carimbo dt{font:600 .74rem/1.4 var(--f-titulo);letter-spacing:.18em;text-transform:uppercase;color:var(--suave)}
@media (min-width:640px){.carimbo dl > div{grid-template-columns:150px 1fr;align-items:baseline}}
.rodape__fim{max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut) 32px;font-size:.9rem;color:var(--suave)}

/* Animação, uma vez: a pena traça o esqueleto (G, M, B) e a tinta da marca cobre o traço */
@keyframes tracar{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
@keyframes tinta{from{opacity:0}to{opacity:1}}
@keyframes sumir{to{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .hero__traco{display:inline;animation:sumir .4s 3.2s both}
  .hero__traco path{stroke-dasharray:1 1.1;animation:tracar 2.4s var(--ease) both}
  .hero__traco path:nth-child(2){animation-delay:.4s}
  .hero__traco path:nth-child(3){animation-delay:.8s}
  .hero__tinta{animation:tinta 1.2s 1.8s var(--ease) both}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}

/* Telas estreitas */
@media (max-width:860px){
  .topo__nav{position:absolute;left:0;right:0;top:var(--topo);flex-direction:column;background:var(--fundo);border-bottom:1px solid var(--tinta);display:none}
  .topo__nav.aberto{display:flex}
  .topo__nav a{padding:20px var(--gut);border-right:0;border-top:1px solid var(--filete);min-height:56px}
  .topo__menu{display:inline-flex}
  .topo__cta{margin-left:0}
  .cel--marca{width:72px}
}
@media (max-width:420px){
  .topo__cta{padding:0 14px}
  .topo__menu{padding:0 14px}
}

/* Currículo em PDF: só a trajetória */
@media print{
  :root{--fundo:#fff;--papel:#fff;--tinta:#000;--suave:#333;--prata:#999;--filete:#ccc}
  body{font-size:11pt}
  .topo,.hero,.janelas,.furos,.pular,.acoes-cv,.destaque,
  #no-ar,#servicos,#metodo,#contato,.rodape__grade,.rodape__marca{display:none!important}
  .bloco{padding:0}
  .bloco--lateral{display:block}
  .lateral__cabeca{position:static;padding-top:0}
  .lateral__cabeca::before{display:none}
  .so-impressao{display:block;margin-bottom:18pt}
  .so-impressao__nome{font:300 28pt/1.1 var(--f-titulo);letter-spacing:.06em;text-transform:uppercase}
  .linha-tempo li{break-inside:avoid;padding:10pt 0}
  .rodape{border:0}
}