/* =========================================================
   GALLE ARQUITETURA — style.css
   Direção: prancha técnica em nanquim. Fundo breu, tinta
   clara, filete fino, canto vivo, rótulo em mono como cota
   de desenho. O único elemento ousado é o efeito da capa.
   ========================================================= */

:root{
  --breu:#0B0F0D;                        /* fundo base, preto puxado ao verde */
  --breu-alto:#131916;                   /* blocos elevados */
  --tinta:#EDEDE9;                       /* texto */
  --tinta-media:rgba(237,237,233,.7);    /* texto secundário */
  --tinta-fraca:rgba(237,237,233,.46);   /* nota, apoio */
  --verde:#1F4034;                       /* marca, preenchimento */
  --verde-claro:#6E8C7E;                 /* rótulo, acento, hover */
  --linha:#242B27;                       /* filete de 1px */
  --linha-forte:#3A443E;                 /* filete de contorno */
  --ok:#7FBF9B;                          /* retorno do botão copiar */

  --display:'Archivo', system-ui, sans-serif;
  --corpo:'Instrument Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --nav-h:72px;
  --margem:clamp(20px, 5vw, 72px);
  --max:1440px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--breu);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* a capa é porta, não folha: uma tela, sem rolagem */
body.pagina--capa{ height:100svh; overflow:hidden; }

img{ display:block; max-width:100%; }

a{ color:inherit; }

::selection{ background:var(--verde-claro); color:var(--breu); }

:focus-visible{
  outline:2px solid var(--verde-claro);
  outline-offset:3px;
}

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:var(--breu);
  padding:12px 18px; font-family:var(--mono); font-size:12px;
}
.pular:focus{ left:0; }

/* ---------- tipografia utilitária ---------- */

.rotulo{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--verde-claro);
  margin:0 0 18px;
}
.rotulo--claro{ color:rgba(237,237,233,.66); }

/* ---------- botões ---------- */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .25s, color .25s, border-color .25s;
}
.btn--cheio{ background:var(--tinta); color:var(--breu); }
.btn--cheio:hover{ background:var(--verde-claro); color:var(--breu); }
.btn--claro{ border-color:rgba(237,237,233,.4); color:var(--tinta); }
.btn--claro:hover{ background:var(--tinta); color:var(--breu); }
.btn--linha{ border-color:var(--linha-forte); color:var(--tinta); }
.btn--linha:hover{ background:var(--tinta); color:var(--breu); border-color:var(--tinta); }

/* =========================================================
   NAV — repetida nos quatro arquivos
   ========================================================= */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 var(--margem);
  color:var(--tinta);
  transition:background .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.is-solida,
body.pagina--interna .nav{
  background:var(--breu);
  border-bottom-color:var(--linha);
}

.nav__marca{ text-decoration:none; display:flex; align-items:baseline; gap:10px; }
.nav__nome{
  font-family:var(--display);
  font-weight:700; font-stretch:118%;
  font-size:19px; letter-spacing:.06em;
}
.nav__assinatura{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; color:var(--tinta-fraca);
}

.nav__menu{ display:flex; gap:32px; justify-content:center; }
.nav__menu a{
  font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; text-decoration:none;
  padding:6px 0; border-bottom:1px solid transparent;
}
.nav__menu a:hover,
.nav__menu a[aria-current="page"]{ border-bottom-color:currentColor; }

.nav__cta{ justify-self:end; padding:11px 20px; }

.nav__hamburguer{
  display:none; justify-self:end;
  width:44px; height:44px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; align-items:flex-end;
}
.nav__hamburguer span{
  display:block; width:26px; height:1px; background:currentColor;
  transition:transform .25s, opacity .25s;
}
.nav.is-aberta .nav__hamburguer span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav.is-aberta .nav__hamburguer span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* =========================================================
   CAPA — uma tela, sem rolagem
   ========================================================= */

.capa{
  position:relative;
  height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 40px) var(--margem) 132px;
  background:var(--breu);
  overflow:hidden;
  isolation:isolate;
}

.capa__canvas,
.capa__fallback{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
}
.capa__canvas{ display:none; }
.capa.tem-canvas .capa__canvas{ display:block; }
.capa.tem-canvas .capa__fallback{ visibility:hidden; }
.capa.sem-imagem .capa__fallback{ display:none; }

.capa__veu{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(11,15,13,.9) 0%, rgba(11,15,13,.6) 46%, rgba(11,15,13,.2) 100%);
}
/* granulado leve — segura a leitura quando não há imagem ainda */
.capa.sem-imagem .capa__veu{
  background:
    radial-gradient(120% 90% at 12% 30%, rgba(110,140,126,.22) 0%, transparent 60%),
    linear-gradient(150deg, #0B0F0D 0%, #16211B 55%, #0B0F0D 100%);
}

.capa__conteudo{
  position:relative;
  width:100%; max-width:var(--max); margin-inline:auto;
  text-align:left;
}

.capa__titulo{
  font-family:var(--display);
  font-weight:700;
  font-stretch:118%;
  font-size:clamp(38px,7.2vw,104px);
  line-height:.96;
  letter-spacing:-.035em;
  margin:0 0 24px;
  max-width:15ch;
}

.capa__sub{
  font-size:clamp(15px,1.5vw,20px);
  line-height:1.5;
  max-width:44ch;
  margin:0 0 40px;
  color:var(--tinta-media);
}

.capa__acoes{ display:flex; flex-wrap:wrap; gap:14px; }

.carimbo{
  position:absolute; left:var(--margem); right:var(--margem); bottom:36px;
  max-width:var(--max); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid rgba(237,237,233,.24);
}
.carimbo > div{
  flex:1 1 180px;
  padding:14px 18px 0;
  border-right:1px solid rgba(237,237,233,.14);
}
.carimbo > div:first-child{ padding-left:0; }
.carimbo > div:last-child{ border-right:0; }
.carimbo dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-fraca); margin-bottom:4px;
}
.carimbo dd{
  margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--tinta-media);
}

/* =========================================================
   CABEÇA DE FOLHA — topo das folhas 01, 02 e 03
   ========================================================= */

.folha{
  max-width:var(--max);
  margin-inline:auto;
  padding:calc(var(--nav-h) + clamp(44px,7vw,92px)) var(--margem) clamp(32px,4vw,56px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,5vw,72px);
  align-items:end;
}
.folha .rotulo{ grid-column:1 / -1; margin-bottom:0; }

.folha__titulo{
  font-family:var(--display);
  font-weight:700;
  font-stretch:115%;
  font-size:clamp(32px,5vw,68px);
  line-height:1;
  letter-spacing:-.032em;
  margin:0;
  color:var(--tinta);
}

.folha__intro{
  margin:0 0 6px;
  max-width:46ch;
  font-size:clamp(15px,1.25vw,18px);
  color:var(--tinta-media);
}

/* =========================================================
   SEÇÕES GERAIS
   ========================================================= */

.secao{
  padding:clamp(72px,10vw,140px) var(--margem);
  max-width:var(--max);
  margin-inline:auto;
  scroll-margin-top:var(--nav-h);
}
.secao--apos-folha{ padding-top:clamp(40px,6vw,72px); }

/* ---------- lista de serviços ---------- */

.lista-servicos{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--linha);
}
.servico{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(16px,4vw,56px);
  padding:26px 0;
  border-bottom:1px solid var(--linha);
  transition:background .25s, padding-left .25s;
}
.servico:hover{ background:var(--breu-alto); padding-left:14px; }
.servico h3{
  margin:0;
  font-family:var(--display);
  font-weight:600; font-stretch:108%;
  font-size:clamp(19px,2vw,26px);
  letter-spacing:-.015em;
  color:var(--tinta);
}
.servico p{ margin:0; color:var(--tinta-media); max-width:58ch; }

/* ---------- processo ---------- */

.processo{ margin-top:clamp(56px,8vw,96px); }
.processo__lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linha-forte);
}
.processo__lista li{
  padding:22px 22px 26px;
  border-right:1px solid var(--linha);
}
.processo__lista li:first-child{ padding-left:0; }
.processo__lista li:last-child{ border-right:0; }
.processo__n{
  display:block;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--verde-claro); margin-bottom:12px;
}
.processo__lista h4{
  margin:0 0 6px;
  font-family:var(--display); font-weight:600; font-stretch:106%;
  font-size:16px; letter-spacing:-.01em; color:var(--tinta);
}
.processo__lista p{ margin:0; font-size:14px; color:var(--tinta-media); }

/* =========================================================
   GALERIA — imagens encostadas, sem gap
   Regra: dentro de cada linha só o PRIMEIRO bloco carrega
   aspect-ratio; os demais esticam. Isso é o que impede vão.
   ========================================================= */

.galeria-envelope{ border-top:1px solid var(--linha); }

.galeria{ display:flex; flex-direction:column; }

.linha{ display:flex; width:100%; }

.bloco{
  position:relative;
  overflow:hidden;
  background:var(--verde);
  min-width:0;
  border:0;
  text-align:left;
  /* figure traz margem do navegador: zerar, senão a linha abre vão */
  margin:0;
  padding:0;
  color:inherit;
  font:inherit;
}
.bloco:not(:first-child){ align-self:stretch; }

.bloco__img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.bloco:hover .bloco__img,
.bloco:focus-visible .bloco__img{ transform:scale(1.06); }

.bloco__info{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(16px,2vw,28px);
  color:var(--tinta);
  background:linear-gradient(to top, rgba(11,15,13,.94) 0%, rgba(11,15,13,.66) 55%, transparent 100%);
  transform:translateY(14px);
  opacity:0;
  transition:opacity .4s, transform .4s;
}
.bloco:hover .bloco__info,
.bloco:focus-visible .bloco__info{ opacity:1; transform:none; }

.bloco__local{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--verde-claro); margin:0 0 6px;
}
.bloco__nome{
  font-family:var(--display); font-weight:600; font-stretch:110%;
  font-size:clamp(17px,1.7vw,24px); letter-spacing:-.02em;
  margin:0 0 8px;
}
.bloco__desc{
  margin:0; font-size:14px; line-height:1.45;
  max-width:46ch; color:var(--tinta-media);
}

/* sem hover (toque): informação sempre visível */
@media (hover:none){
  .bloco__info{ opacity:1; transform:none; }
}

/* =========================================================
   CONTATO — só os dados, em duas colunas. Sem caixa.
   ========================================================= */

.contato{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(40px,6vw,96px);
  border-top:1px solid var(--linha);
  padding-top:clamp(36px,5vw,64px);
}

.contato__coluna > .rotulo{ margin-bottom:26px; }
.contato__coluna--dir{ text-align:right; }

.dado{ margin:0 0 30px; }
.dado:last-child{ margin-bottom:0; }
.dado__nome{
  margin:0 0 4px;
  font-family:var(--corpo); font-weight:500;
  font-size:15px; color:var(--tinta);
}
.dado__valor{
  display:inline-block;
  font-family:var(--display); font-weight:600; font-stretch:106%;
  font-size:clamp(18px,1.9vw,26px);
  letter-spacing:-.015em;
  line-height:1.25;
  color:var(--tinta);
  text-decoration:none;
  word-break:break-word;
}
a.dado__valor{ border-bottom:1px solid var(--linha-forte); padding-bottom:2px; }
a.dado__valor:hover{ color:var(--verde-claro); border-bottom-color:var(--verde-claro); }
.dado__nota{
  margin:6px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--tinta-fraca);
}

.escritorio{ margin:0 0 28px; }
.escritorio:last-child{ margin-bottom:0; }
.escritorio__cidade{
  margin:0 0 4px;
  font-family:var(--corpo); font-weight:500; font-size:16px; color:var(--tinta);
}
.escritorio__endereco{
  margin:0;
  font-size:14px; color:var(--tinta-media);
}

.copiar{
  display:inline-block;
  margin:8px 0 0;
  padding:7px 13px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase;
  background:none;
  border:1px solid var(--linha-forte);
  color:var(--verde-claro);
  border-radius:2px;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.copiar:hover{ border-color:var(--verde-claro); color:var(--tinta); }
.copiar.is-ok{ border-color:var(--ok); color:var(--ok); background:rgba(127,191,155,.08); }

/* =========================================================
   PRÓXIMA FOLHA — passagem de uma folha para a seguinte
   ========================================================= */

.proxima{ border-top:1px solid var(--linha); }

.proxima a{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(30px,4.5vw,56px) var(--margem);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:8px 24px;
  text-decoration:none;
  transition:background .25s;
}
.proxima a:hover{ background:var(--breu-alto); }

.proxima__rotulo{
  grid-column:1 / -1;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--verde-claro);
}
.proxima__titulo{
  font-family:var(--display); font-weight:700; font-stretch:115%;
  font-size:clamp(28px,4.6vw,60px); line-height:1;
  letter-spacing:-.03em; color:var(--tinta);
}
.proxima__seta{
  font-family:var(--mono);
  font-size:clamp(20px,2.4vw,30px);
  color:var(--verde-claro);
  transition:transform .25s;
}
.proxima a:hover .proxima__seta{ transform:translateX(8px); }

/* =========================================================
   RODAPÉ
   ========================================================= */

.rodape{
  background:var(--breu-alto);
  color:var(--tinta-media);
  border-top:1px solid var(--linha);
  padding:clamp(36px,4.5vw,56px) var(--margem);
}
.rodape__topo,
.rodape__base{
  max-width:var(--max); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:14px 48px; align-items:baseline;
}
.rodape__topo{ padding-bottom:20px; border-bottom:1px solid var(--linha); }
.rodape__base{ padding-top:20px; }

.rodape__marca{ display:flex; align-items:baseline; gap:10px; margin-right:auto; }
.rodape__nome{
  font-family:var(--display); font-weight:700; font-stretch:118%;
  font-size:16px; letter-spacing:.06em; color:var(--tinta);
}

.rodape__menu{ display:flex; flex-wrap:wrap; gap:6px 26px; }
.rodape__menu a{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.rodape__menu a:hover,
.rodape__menu a[aria-current="page"]{
  border-bottom-color:currentColor; color:var(--tinta);
}

.rodape__assinatura,
.rodape__dado{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; margin:0;
  color:var(--tinta-fraca);
}

/* =========================================================
   EM BREVE — página provisória (index.html)
   Sai do ar quando o site entrar. Um hero só: o G, o recado
   e, ao fundo, projetos passando sob máscara verde.
   ========================================================= */

body.pagina--breve{ height:100svh; overflow:hidden; }

.breve{
  position:relative;
  height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,7vh,88px) var(--margem) clamp(64px,10vh,110px);
  overflow:hidden;
  isolation:isolate;
}

/* ---------- fundo: projetos passando ---------- */

.fundo{
  position:absolute; inset:0; z-index:-3;
  background:var(--breu);
}
/* sem nenhuma imagem na pasta: verde da marca com granulado. Não quebra. */
.fundo.sem-foto{
  background:
    radial-gradient(120% 90% at 18% 25%, rgba(110,140,126,.24) 0%, transparent 62%),
    linear-gradient(150deg, #0B0F0D 0%, #16211B 55%, #0B0F0D 100%);
}

.fundo__foto{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:grayscale(1) contrast(1.04) brightness(.95);
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.6s ease;
}
.fundo__foto.is-visivel{
  opacity:.82;
  animation:respira 15s ease-out forwards;
}
@keyframes respira{
  from{ transform:scale(1.03); }
  to{ transform:scale(1.13); }
}

/* ---------- máscara verde ---------- */

.breve__mascara{
  position:absolute; inset:0; z-index:-2;
  background:
    /* rampa escura da esquerda: é onde mora o texto */
    linear-gradient(100deg, rgba(11,15,13,.92) 0%, rgba(11,15,13,.6) 44%, rgba(11,15,13,.24) 100%),
    /* máscara verde da marca, por cima de tudo */
    linear-gradient(0deg, rgba(31,64,52,.6), rgba(31,64,52,.6));
}

/* ---------- conteúdo ---------- */

.breve__conteudo{
  position:relative;
  width:100%; max-width:var(--max); margin-inline:auto;
  text-align:left;
}

.breve__marca{ margin:0 0 clamp(24px,4vh,44px); line-height:1; }

.breve__g{ display:none; height:clamp(76px,13vw,180px); width:auto; }
.breve__marca.tem-logo .breve__g{ display:block; }
.breve__marca.tem-logo .breve__g-letra{ display:none; }

.breve__g-letra{
  display:block;
  font-family:var(--display);
  font-weight:700; font-stretch:118%;
  font-size:clamp(88px,15vw,210px);
  line-height:.8;
  letter-spacing:-.05em;
  color:var(--tinta);
}

.breve__titulo{
  font-family:var(--display);
  font-weight:700; font-stretch:118%;
  font-size:clamp(36px,6.4vw,88px);
  line-height:.98;
  letter-spacing:-.035em;
  margin:0 0 14px;
  color:var(--tinta);
}

.breve__texto{
  margin:0;
  font-size:clamp(16px,1.6vw,22px);
  color:var(--tinta-media);
  max-width:34ch;
}

.breve__contato{
  margin:clamp(24px,4vh,40px) 0 0;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
}
.breve__contato a{
  text-decoration:none;
  border-bottom:1px solid var(--linha-forte);
  padding-bottom:3px;
}
.breve__contato a:hover{ color:var(--verde-claro); border-bottom-color:var(--verde-claro); }

.breve__carimbo{
  position:absolute; left:var(--margem); right:var(--margem); bottom:clamp(24px,5vh,44px);
  max-width:var(--max); margin:0 auto;
  padding-top:14px;
  border-top:1px solid rgba(237,237,233,.2);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tinta-fraca);
}

/* tela estreita: o carimbo continua, só respira menos */
@media (max-width:560px){
  .breve__carimbo{ font-size:10px; letter-spacing:.08em; line-height:1.7; }
}

/* tela baixa: aí sim o carimbo sai, antes de espremer o recado */
@media (max-height:600px){
  .breve__carimbo{ display:none; }
  .breve{ padding-bottom:clamp(32px,6vh,56px); }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width:1000px){
  .processo__lista{ grid-template-columns:repeat(2,1fr); }
  .processo__lista li:nth-child(2){ border-right:0; }
  .processo__lista li:nth-child(3){ padding-left:0; border-top:1px solid var(--linha); }
  .processo__lista li:nth-child(4){ border-top:1px solid var(--linha); }
  .folha{ grid-template-columns:1fr; align-items:start; }
  .folha__intro{ margin-bottom:0; }
}

@media (max-width:860px){
  .nav{ grid-template-columns:1fr auto; }
  .nav__hamburguer{ display:flex; }
  .nav__cta{ display:none; }
  .nav__menu{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--breu); color:var(--tinta);
    border-bottom:1px solid var(--linha);
    padding:0 var(--margem);
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav.is-aberta .nav__menu{ max-height:60vh; }
  .nav__menu a{ width:100%; padding:18px 0; border-bottom:1px solid var(--linha); }
  .nav__menu a:last-child{ border-bottom:0; }

  .servico{ grid-template-columns:1fr; gap:8px; }
  .servico:hover{ padding-left:0; }

  .contato{ grid-template-columns:1fr; }
  .contato__coluna--dir{ text-align:left; }

  .carimbo > div{ flex:1 1 100%; border-right:0; padding-left:0; border-bottom:1px solid rgba(237,237,233,.14); padding-bottom:10px; }
  .carimbo > div:last-child{ border-bottom:0; }
}

@media (max-width:700px){
  .carimbo{ display:none; }
  .capa{ padding-bottom:72px; }

  /* galeria vira coluna: cada bloco com seu próprio formato */
  .linha{ flex-direction:column; }
  .bloco{ width:100% !important; }
  .bloco:not(:first-child){ aspect-ratio:var(--proporcao, 4/5); }
}

/* tela baixa: a capa não pode cortar o texto, então o carimbo sai */
@media (max-height:640px){
  .carimbo{ display:none; }
  .capa{ padding-bottom:48px; }
  .capa__titulo{ font-size:clamp(32px,5.4vw,56px); }
  .capa__sub{ margin-bottom:26px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}