/* Empreiteira Santa Fé — mundo visual: canon do segmento, executado a sério.
   Uma família (Archivo, eixo de largura), campo escuro + areia, um filete bronze.
   Sem gradiente, sem vidro, sem sombra dura: 1px e aresta fazem a separação. */

:root{
  --breu:#0C0D0F;
  --breu-2:#14161A;        /* superfície escura levemente elevada: hover dos logos */
  --areia:#EDE9E2;
  --areia-2:#DFDAD1;
  --bronze:#A8895C;          /* sobre escuro */
  /* os dois tokens de areia levam em conta o grão: medido em canvas com o mesmo
     SVG em multiply, o pior pixel do campo composto é rgb(233,229,223), e é
     contra ele que estas razões valem — não contra a areia limpa */
  --bronze-fundo:#6E5530;    /* sobre areia com grão: 5.6:1 */
  --tinta:#17181B;
  --tinta-2:#625B4F;         /* sobre areia com grão: 5.4:1 */
  --areia-fraca:#A7A29A;     /* secundário sobre escuro: 7.7:1 */
  --erro:#9B3A2A;            /* sobre areia com grão: 5.6:1 */
  /* verde do próprio WhatsApp: cor de marca de terceiro, usada num lugar só,
     o botão flutuante, porque é a única que contrasta no escuro e na areia */
  --zap:#25D366;
  --fio-claro:rgba(23,24,27,.16);
  --fio-escuro:rgba(237,233,226,.16);

  --saida:cubic-bezier(.23,1,.32,1);

  --margem:clamp(20px,5vw,72px);
  --respiro:clamp(76px,9vw,150px);

  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

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

html{
  /* sem scroll-behavior: a rolagem suave é da Lenis, e as duas brigam */
  scroll-padding-top:104px;   /* âncora não pode parar embaixo do cabeçalho fixo */
  scrollbar-color:var(--bronze) var(--breu);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--breu);
  color:var(--areia);
  font-family:Archivo,system-ui,sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--bronze);color:var(--breu)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ─── tipografia ─── */
h1,h2,h3{
  margin:0;
  font-weight:600;
  text-transform:uppercase;
  font-variation-settings:'wdth' 112;
  letter-spacing:-.012em;
  line-height:1.02;
  text-wrap:balance;
}
/* 7.4vw: a palavra mais longa em caps ("ACABAMENTO") precisa caber em 390px.
   Acima de 860px o limite passa a ser a linha inteira (22 caracteres) no container. */
h1{font-size:clamp(1.6rem,7.4vw,4.5rem)}
/* 5.25rem é o teto medido: a linha mais longa tem 18 caracteres e a caps
   expandida mede 0.79em por caractere, ou seja 14.2em contra 1256px de caixa */
@media (min-width:861px){h1{font-size:clamp(3rem,6vw,5.25rem)}}
h2{font-size:clamp(1.5rem,3.7vw,2.9rem);line-height:1.05}
h3{font-size:1.25rem;letter-spacing:.01em;font-variation-settings:'wdth' 104;line-height:1.15}
p{margin:0;max-width:68ch}

/* ─── seções ─── */
section{padding:var(--respiro) var(--margem)}
.escuro{background:var(--breu);color:var(--areia);position:relative}
.escuro::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grao);background-size:180px;opacity:.09;
}
.claro{background:var(--areia);color:var(--tinta);position:relative}
.claro::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grao);background-size:180px;opacity:.14;
  mix-blend-mode:multiply;
}
.claro>*{position:relative;z-index:1}
/* duas seções escuras em sequência precisam do fio, senão leem como uma só */
.escuro + .escuro{border-top:1px solid var(--fio-escuro)}
.claro p{color:var(--tinta-2)}
.escuro p{color:var(--areia-fraca)}

/* ─── cortina de carregamento (CSS puro: se o JS falhar, ela sobe de todo jeito) ─── */
#cortina{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--breu);
  animation:cortina .85s var(--saida) .3s both;
}
#cortina img{width:72px;opacity:.9;animation:pulso 1.1s var(--saida) both}
@keyframes cortina{
  from{clip-path:inset(0 0 0 0)}
  to{clip-path:inset(0 0 100% 0);visibility:hidden}
}
/* O logo entra visível de propósito: a espera pausa as animações no quadro
   zero, e um quadro zero transparente deixaria a tela preta e vazia
   justamente enquanto o site carrega. Ele sobe junto com a cortina. */
@keyframes pulso{from{opacity:.9;transform:scale(.96)}to{opacity:.9;transform:scale(1)}}

/* ─── cabeçalho ─── */
#cabecalho{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:clamp(18px,3vw,44px);
  padding:18px var(--margem);
  transition:background 240ms var(--saida),border-color 240ms var(--saida);
  border-bottom:1px solid transparent;
}
#cabecalho.fixo{background:rgba(12,13,15,.92);border-bottom-color:var(--fio-escuro)}
.marca{display:flex;align-items:center;gap:11px;margin-right:auto}
.marca img{width:38px}
.marca span{
  font-size:.9375rem;font-weight:600;text-transform:uppercase;white-space:nowrap;
  letter-spacing:.14em;font-variation-settings:'wdth' 108;line-height:1.1;
}
.marca small{
  display:block;font-size:.6875rem;letter-spacing:.18em;
  color:var(--bronze);font-weight:400;margin-top:2px;
}
#cabecalho nav{display:flex;gap:clamp(14px,2.2vw,30px);font-size:.8125rem}
#cabecalho nav a{
  text-transform:uppercase;letter-spacing:.13em;color:var(--areia-fraca);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color 200ms var(--saida),border-color 200ms var(--saida);
}

/* ─── botões ─── */
.botao{
  display:inline-block;
  font-size:.8125rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  padding:14px 26px;
  border:1px solid var(--bronze);color:var(--bronze);
  background:none;font-family:inherit;cursor:pointer;white-space:nowrap;
  /* a cor do rótulo não cruza com o preenchimento: ela troca de uma vez no
     instante em que a varredura passa por baixo dele (metade de 240ms).
     Com transição longa, rótulo e fundo ficam da mesma cor no meio. */
  transition:background 180ms var(--saida),color 1ms linear 120ms,transform 160ms var(--saida);
}
.botao-cheio{background:var(--bronze);color:var(--breu);border-color:var(--bronze)}
.botao:active{transform:scale(.97)}
.claro .botao:not(.botao-cheio){border-color:var(--bronze-fundo);color:var(--bronze-fundo)}

@media (hover:hover) and (pointer:fine){
  #cabecalho nav a:hover{color:var(--areia);border-bottom-color:var(--bronze)}
  .botao:hover{color:var(--breu);border-color:var(--areia)}
  .claro .botao:not(.botao-cheio):hover{color:var(--areia);border-color:var(--tinta)}
  .linha-contato:hover{border-bottom-color:var(--bronze-fundo)}
  .servicos li:hover{background:var(--areia-2)}
  .servicos li:hover h3{color:var(--bronze-fundo)}
  .apoio li:hover{color:var(--tinta)}
  .etapas li:hover b{color:var(--bronze)}
  .redes a:hover svg{transform:scale(1.08)}
  .zap:hover{transform:translateY(-2px) scale(1.06)}
}

/* ─── herói: campo escuro em tela cheia, marca d'água ao fundo ───
   Foto aqui não entra: medido, o pior pixel da região de texto numa foto de
   obra dá L=0,95 (laje ao sol), e nem 65% de preto levaria a areia a 4,5:1.
   O lugar do vídeo, quando chegar, é esta mesma camada de fundo. */
.heroi{
  position:relative;overflow:hidden;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--breu);
}
.heroi::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:var(--grao);background-size:180px;opacity:.1;
}
/* marca d'água: o símbolo da própria empresa, gigante e rebaixado, dando corpo
   ao campo escuro sem competir com o texto */
.heroi-marca{
  position:absolute;right:-8%;bottom:-14%;height:132%;width:auto;max-width:none;
  opacity:.16;z-index:0;
  animation:varre 1.8s var(--saida) .35s both;
}
.heroi-texto{
  position:relative;z-index:3;
  padding:0 var(--margem) clamp(34px,4.4vw,58px);
  max-width:1400px;
}
/* as linhas do título assentam em stagger de 60ms, uma depois da outra */
.heroi h1 span{display:block;animation:entra .95s var(--saida) both}
.heroi h1 span:nth-child(1){animation-delay:.42s}
.heroi h1 span:nth-child(2){animation-delay:.48s}
.heroi h1 span:nth-child(3){animation-delay:.54s}
.heroi-texto p{
  margin-top:clamp(18px,2vw,28px);
  max-width:46ch;font-size:clamp(1.0625rem,1.25vw,1.25rem);
  color:var(--areia-fraca);
  animation:entra .95s var(--saida) .6s both;
}
@keyframes entra{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

/* a linha de nível: atravessa a tela inteira, a ação primária se apoia nela */
.nivel{
  position:relative;z-index:3;
  /* tudo alinhado à esquerda: a quina inferior direita é da mobília fixa
     (o WhatsApp flutuante) e não recebe texto em nenhuma largura */
  display:flex;align-items:center;gap:clamp(20px,4vw,64px);
  border-top:1px solid var(--bronze);
  padding:clamp(18px,2vw,26px) var(--margem);
  animation:entra .95s var(--saida) .66s both;
}
/* atividade e praça, na mesma linha de nível. Caixa-alta aqui atrapalharia a leitura. */
.nivel p{
  font-size:.8125rem;letter-spacing:.02em;line-height:1.5;
  color:var(--areia);
}
.nivel p span{color:var(--areia-fraca)}

/* ─── serviços ─── */
#servicos h2{margin-bottom:clamp(34px,4vw,60px)}
.servicos{list-style:none;margin:0;padding:0;border-top:1px solid var(--fio-claro)}
.servicos li{
  display:grid;grid-template-columns:minmax(200px,22%) 1fr;
  gap:clamp(16px,3vw,54px);align-items:baseline;
  padding:clamp(24px,2.6vw,34px) clamp(14px,1.6vw,22px);
  border-bottom:1px solid var(--fio-claro);
  transition:background 240ms var(--saida);
}
.servicos h3,.servicos p{transition:color 240ms var(--saida)}
.servicos p{max-width:56ch}

/* ─── cabeçalho de seção ─── */
.cab-secao{margin-bottom:clamp(38px,4.4vw,66px)}
.cab-secao p{margin-top:16px;max-width:58ch}

/* ─── serviços complementares ─── */
.apoio{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--fio-claro);
}
.apoio li{
  padding:clamp(20px,2vw,28px) clamp(18px,1.8vw,26px) clamp(24px,2.4vw,32px) 0;
  border-bottom:1px solid var(--fio-claro);
  font-size:.9375rem;line-height:1.45;
}

/* ─── segurança: três listas de documentos ─── */
.docs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,54px);
  border-top:1px solid var(--fio-escuro);padding-top:clamp(28px,3vw,44px);
}
.docs h3,.clientes h3{
  font-size:.8125rem;letter-spacing:.14em;color:var(--bronze);
  font-variation-settings:'wdth' 100;margin-bottom:18px;
}
.docs ul{list-style:none;margin:0;padding:0}
.docs li{
  padding:11px 0;border-bottom:1px solid var(--fio-escuro);
  font-size:.9375rem;color:var(--areia);
}

/* ─── tipo de obra: texto e o desenho isométrico ─── */
.tipo-grade{
  display:grid;grid-template-columns:1fr clamp(240px,32%,420px);
  gap:clamp(34px,6vw,90px);align-items:center;
}
.tipo-texto p{margin-top:18px;max-width:46ch}
.etapas{
  list-style:none;margin:clamp(30px,3.4vw,46px) 0 0;padding:0;
  border-top:1px solid var(--fio-escuro);
}
.etapas li{
  padding:16px 0;border-bottom:1px solid var(--fio-escuro);
  font-size:.9375rem;color:var(--areia-fraca);
}
.etapas b{
  display:inline-block;min-width:11.5em;
  color:var(--areia);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.8125rem;
}
.tipo-desenho{margin:0}
.tipo-desenho img{width:100%;height:auto}

/* ─── obras ─── */
#obras h2{margin-bottom:clamp(30px,3.4vw,50px)}
.obras{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.obras figure{margin:0;position:relative;overflow:hidden;background:var(--breu-2)}
.claro .obras figure{background:var(--areia-2)}
.obras img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* a legenda entra por cima da foto: ninguém empurra ninguém */
.obras figcaption{
  position:absolute;left:0;right:0;bottom:0;
  margin:0;padding:clamp(14px,1.8vw,20px);
  background:rgba(12,13,15,.82);color:var(--areia);
  font-size:.9375rem;line-height:1.4;letter-spacing:.02em;
  opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--saida),transform 420ms var(--saida);
}
@media (hover:hover) and (pointer:fine){
  .obras figure:hover figcaption{opacity:1;transform:none}
}
/* sem mouse não há hover: no toque a legenda fica visível */
@media (hover:none){.obras figcaption{opacity:1;transform:none}}

/* ─── dados da empresa ─── */
.dados{
  margin:0;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--fio-escuro);
}
.dados>div{
  padding:clamp(22px,2.2vw,30px) clamp(20px,2vw,30px) clamp(24px,2.6vw,34px) 0;
  border-bottom:1px solid var(--fio-escuro);
}
.dados dt{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.17em;
  color:var(--bronze);margin-bottom:12px;
}
.dados dd{margin:0;font-size:1.0625rem;line-height:1.45}

/* ─── empresas parceiras: logos soltos no escuro, obras em sobreposição ───
   O painel é absoluto: abrir não empurra nada, a página fica parada. */
#clientes h2{margin-bottom:clamp(52px,6.5vw,96px)}
.clientes{
  list-style:none;margin:0;padding:0 0 clamp(80px,9vw,120px);
  display:grid;grid-template-columns:repeat(5,1fr);
  /* a folga entre linhas é grande de propósito: o painel que abre embaixo de um
     logo não pode encostar no logo da linha seguinte */
  gap:clamp(96px,12vw,150px) clamp(28px,4vw,64px);
}
.clientes>li{position:relative;z-index:0}
/* o item aberto sobe no empilhamento: o painel de cinco obras é mais alto
   que a folga entre linhas e precisa pintar por cima, não colidir */
.clientes>li:hover,.clientes>li:focus-within,.clientes>li.aberto{z-index:3}
.marca-cliente{
  appearance:none;border:0;background:none;cursor:pointer;font:inherit;
  display:grid;place-items:center;width:100%;
  padding:clamp(16px,1.8vw,24px) clamp(6px,1vw,14px);
}
/* brightness(0)+invert(1) achata qualquer logo numa silhueta branca: é assim
   que cinco identidades diferentes convivem sem brigar com a nossa. O realce é
   só do logo, nunca da célula. */
.marca-cliente img{
  width:100%;max-width:clamp(132px,15vw,215px);height:auto;
  filter:brightness(0) invert(1);opacity:.38;
  transition:opacity 420ms var(--saida),transform 420ms var(--saida);
}
.marca-texto{
  font-size:1.25rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-variation-settings:'wdth' 112;
  color:var(--areia);opacity:.38;transition:opacity 420ms var(--saida);
}
.clientes>li:hover .marca-cliente img,
.clientes>li:focus-within .marca-cliente img,
.clientes>li.aberto .marca-cliente img{opacity:1;transform:scale(1.07)}
.clientes>li:hover .marca-texto,
.clientes>li:focus-within .marca-texto,
.clientes>li.aberto .marca-texto{opacity:1}

/* NUNCA dê máscara (clip-path) nem overflow a um ancestral deste painel: ele
   é absoluto e vive fora da caixa da célula e da lista. A <ul> já carregou
   .revela uma vez e cortava a última linha da lista no meio da palavra. */
.obras-cliente{
  position:absolute;top:100%;left:0;right:0;
  pointer-events:none;text-align:center;
  padding:clamp(12px,1.4vw,18px) 4px clamp(14px,1.6vw,20px);
}
.obras-cliente ul{list-style:none;margin:0;padding:0}
.obras-cliente li,.obras-cliente .nota{
  opacity:0;transform:translateY(-12px);filter:blur(6px);
  transition:opacity 560ms var(--saida),transform 560ms var(--saida),filter 460ms var(--saida);
}
/* As obras correm em linha, separadas pelo mesmo ponto médio do herói. Em
   pilha, as cinco obras da FG davam 180px de painel dentro de uma folga de
   96px e cobriam o logo de baixo; em linha, o painel mais alto cabe na folga.
   inline-block, não inline: transform não se aplica a caixa inline. */
.obras-cliente li{
  display:inline-block;font-size:.9375rem;line-height:1.7;color:var(--areia);
}
.obras-cliente li:not(:last-child)::after{
  content:"·";margin:0 .45em;color:var(--areia-fraca);
}
.obras-cliente .nota{margin:6px 0 0;font-size:.8125rem;color:var(--bronze)}

/* uma depois da outra, de cima para baixo. O atraso mora na regra de hover,
   então a saída é simultânea e rápida, como convém a quem tirou o mouse. */
/* o fundo só existe quando o painel abre: em repouso, a caixa opaca tapava o
   grão da seção e o retângulo vazio aparecia embaixo de cada logo */
.clientes>li:hover .obras-cliente,
.clientes>li:focus-within .obras-cliente,
.clientes>li.aberto .obras-cliente{background:var(--breu)}
.clientes>li:hover .obras-cliente li,
.clientes>li:focus-within .obras-cliente li,
.clientes>li.aberto .obras-cliente li,
.clientes>li:hover .obras-cliente .nota,
.clientes>li:focus-within .obras-cliente .nota,
.clientes>li.aberto .obras-cliente .nota{opacity:1;transform:none;filter:none}
.clientes>li:hover .obras-cliente li:nth-child(1){transition-delay:80ms}
.clientes>li:hover .obras-cliente li:nth-child(2){transition-delay:220ms}
.clientes>li:hover .obras-cliente li:nth-child(3){transition-delay:360ms}
.clientes>li:hover .obras-cliente li:nth-child(4){transition-delay:500ms}
.clientes>li:hover .obras-cliente li:nth-child(5){transition-delay:640ms}
.clientes>li:hover .obras-cliente .nota{transition-delay:780ms}
.clientes>li:focus-within .obras-cliente li:nth-child(1),
.clientes>li.aberto .obras-cliente li:nth-child(1){transition-delay:80ms}
.clientes>li:focus-within .obras-cliente li:nth-child(2),
.clientes>li.aberto .obras-cliente li:nth-child(2){transition-delay:220ms}
.clientes>li:focus-within .obras-cliente li:nth-child(3),
.clientes>li.aberto .obras-cliente li:nth-child(3){transition-delay:360ms}
.clientes>li:focus-within .obras-cliente li:nth-child(4),
.clientes>li.aberto .obras-cliente li:nth-child(4){transition-delay:500ms}
.clientes>li:focus-within .obras-cliente li:nth-child(5),
.clientes>li.aberto .obras-cliente li:nth-child(5){transition-delay:640ms}

/* ─── ver mais obras ─── */
/* As oito extras nascem com o atributo hidden: sem JavaScript a grade fica
   com as oito primeiras e o botão some, em vez de mostrar um botão morto.
   Quando abrem, entram escalonadas no tempo — não na rolagem, porque elas
   aparecem onde o usuário já está olhando. */
.obras-mais{display:flex;justify-content:center;margin-top:clamp(30px,4vw,52px)}
html:not(.com-js) .obras-mais{display:none}
.obras figure.extra{animation:assoma 520ms var(--saida) both;animation-timeline:auto}
.obras figure.extra{animation-delay:calc(var(--i,0)*45ms)}

/* ─── página de documento (privacidade) ─── */
/* Uma coluna de leitura, na mesma tipografia do site. Medida em ch para o
   texto corrido parar onde o olho aguenta, não onde a tela acaba. */
.documento{padding-top:calc(var(--respiro) + 40px);max-width:none}
.documento>*{max-width:68ch}
.documento h1{
  font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.05;margin:0 0 18px;
  font-weight:600;text-transform:uppercase;letter-spacing:.01em;
  font-variation-settings:'wdth' 108;text-wrap:balance;
}
.documento h2{
  font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--bronze-fundo);margin:clamp(34px,4.5vw,52px) 0 10px;
}
.documento h2::after{content:none}
.documento p{margin:0 0 14px;max-width:68ch}
.documento ul{margin:0 0 16px;padding-left:20px;color:var(--tinta-2)}
.documento li{margin-bottom:7px;max-width:64ch}
.documento .lede{font-size:1.0625rem;color:var(--tinta);margin-bottom:8px;max-width:58ch}
.documento .volta{margin-bottom:26px}
.documento .volta a,.documento a{color:var(--bronze-fundo)}
.documento .carimbo{
  margin-top:clamp(40px,5vw,64px);padding-top:18px;border-top:1px solid var(--fio-claro);
  /* sem caixa alta: é frase, não rótulo, e 42 caracteres em caps cansam */
  font-size:.8125rem;letter-spacing:.02em;color:var(--tinta-2);
}

/* ─── mapa da sede ─── */
/* Largura toda do container e altura fixa: no celular um mapa alto vira uma
   parede de rolagem. O filete é o mesmo das outras divisões da página. */
.mapa{
  margin-top:clamp(38px,5vw,70px);
  border:1px solid var(--fio-escuro);
}
.mapa iframe{display:block;width:100%;height:400px;border:0}
@media (max-width:640px){.mapa iframe{height:340px}}

/* ─── proposta ─── */
.proposta-grade{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,86px);align-items:start;
}
.proposta-texto h2{margin-bottom:20px}
.proposta-texto p{margin-bottom:34px;max-width:40ch}
.linha-contato{
  display:block;width:fit-content;margin-bottom:14px;
  border-bottom:1px solid var(--fio-claro);padding-bottom:5px;
  text-underline-offset:4px;
  transition:border-color 200ms var(--saida);
}
.formulario{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.campo{display:flex;flex-direction:column;gap:8px;min-width:0}
.campo-largo{grid-column:1/-1}
/* fora do <label> de propósito: link dentro de rótulo faz um clique só
   marcar a caixa e seguir o link ao mesmo tempo */
.nota-consentimento{
  grid-column:1/-1;margin:-8px 0 0;font-size:.8125rem;color:var(--tinta-2);
}
.nota-consentimento a{color:var(--bronze-fundo)}
.campo label,.campo legend,.consentimento{
  font-size:.8125rem;text-transform:uppercase;letter-spacing:.13em;color:var(--tinta-2);
}
.campo legend{padding:0;margin-bottom:12px}
fieldset.campo{border:0;padding:0;margin:0}
input[type=text],input[type=email],input[type=tel],input[type=month],textarea{
  font:inherit;font-size:1.0625rem;color:var(--tinta);
  background:transparent;border:1px solid var(--fio-claro);
  border-radius:0;padding:13px 14px;width:100%;
  caret-color:var(--bronze-fundo);
  transition:border-color 180ms var(--saida),background 180ms var(--saida);
}
/* o foco já se anuncia pela borda bronze e pelo contorno; a lavagem branca
   era uma cor fora da paleta fazendo trabalho que duas declarações já fazem */
input:focus,textarea:focus{border-color:var(--bronze-fundo);outline:none}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--bronze-fundo);outline-offset:2px}
textarea{resize:vertical}
::placeholder{color:var(--tinta-2);opacity:1}
input:user-invalid{border-color:var(--erro)}
.marcas{display:flex;flex-wrap:wrap;gap:12px 22px}
.marcas label{
  display:flex;align-items:center;gap:9px;
  font-size:.9375rem;text-transform:none;letter-spacing:0;color:var(--tinta);
}
input[type=checkbox]{accent-color:var(--bronze-fundo);width:17px;height:17px;margin:0}
.consentimento{
  grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;
  text-transform:none;letter-spacing:0;font-size:.9375rem;line-height:1.5;
}
.formulario .botao{grid-column:1/-1;justify-self:start;margin-top:6px}
/* armadilha de robô: fora da tela, sem display:none, que muito robô ignora */
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.estado{grid-column:1/-1;font-size:.9375rem;line-height:1.5;max-width:46ch}
.estado:empty{display:none}
.estado[data-tipo=ok]{color:var(--bronze-fundo)}
.estado[data-tipo=erro]{color:var(--erro)}
.estado[data-tipo=enviando]{color:var(--tinta-2)}

/* ─── rodapé ─── */
/* mesma marca d'água do herói, fechando a página com o símbolo rebaixado */
.rodape-marca{
  position:absolute;right:-6%;bottom:-70%;height:260%;width:auto;max-width:none;
  opacity:.16;z-index:0;pointer-events:none;
}
footer>*:not(.rodape-marca){position:relative;z-index:1}
.rodape-logo{width:200px}
.redes{display:flex;gap:16px;margin-top:20px}
.redes a{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--fio-escuro);color:var(--areia);
  transition:background 220ms var(--saida),color 220ms var(--saida),border-color 220ms var(--saida);
}
.redes a:active{transform:scale(.96)}
.redes svg{transition:transform 260ms var(--saida)}
@media (hover:hover) and (pointer:fine){
  .redes a:hover{background:var(--areia);color:var(--breu);border-color:var(--areia)}
}
footer{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(24px,4vw,64px);align-items:start;
  padding:clamp(52px,6vw,90px) var(--margem);
  border-top:1px solid var(--fio-escuro);
  font-size:.9375rem;
}
footer p{color:var(--areia-fraca)}
footer p a{border-bottom:1px solid var(--fio-escuro);transition:border-color 200ms var(--saida)}
footer .registro{
  grid-column:1/-1;font-size:.8125rem;letter-spacing:.04em;
  padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--fio-escuro);
}
@media (hover:hover) and (pointer:fine){footer p a:hover{border-bottom-color:var(--bronze)}}

/* ─── seletor de mês ─────────────────────────────────────────────────────────
   O menu do <input type="month"> é desenhado pelo navegador e não aceita tema
   nenhum: nem cor, nem tipografia, nem curva. Por isso existe este, que é do
   site. O menu tem a largura do gatilho de propósito — assim ele nunca vaza
   para fora da coluna nem cria rolagem horizontal, e os meses cabem em três
   colunas. A faixa de anos rola com encaixe. */
.seletor{position:relative}
.seletor-gatilho{
  font:inherit;font-size:1.0625rem;color:var(--tinta);text-align:left;
  background:transparent;border:1px solid var(--fio-claro);border-radius:0;
  padding:13px 14px;width:100%;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:border-color 180ms var(--saida);
}
.seletor-gatilho[data-vazio]{color:var(--tinta-2)}
.seletor-gatilho::after{
  content:"";width:7px;height:7px;flex:none;
  border-right:1px solid var(--bronze-fundo);border-bottom:1px solid var(--bronze-fundo);
  transform:rotate(45deg) translateY(-2px);
  transition:transform 280ms var(--saida);
}
.seletor-gatilho[aria-expanded=true]{border-color:var(--bronze-fundo)}
.seletor-gatilho[aria-expanded=true]::after{transform:rotate(-135deg) translateY(2px)}
@media (hover:hover) and (pointer:fine){
  .seletor-gatilho:hover{border-color:var(--bronze-fundo)}
}

.seletor-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:95;
  background:var(--breu);border:1px solid var(--fio-escuro);
  padding:14px;
  animation:menu-abre 280ms var(--saida) both;
}
@keyframes menu-abre{from{opacity:0;transform:translateY(-10px) scale(.985)}}

.seletor-anos{
  display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--fio-escuro);
}
.seletor-anos::-webkit-scrollbar{display:none}
.seletor-anos button{
  font:inherit;font-size:.8125rem;letter-spacing:.1em;font-variation-settings:'wdth' 106;
  background:none;border:0;color:var(--areia-fraca);cursor:pointer;
  padding:6px 11px;flex:none;scroll-snap-align:center;
  transition:color 220ms var(--saida);
}
.seletor-anos button[aria-pressed=true]{color:var(--areia)}
@media (hover:hover) and (pointer:fine){
  .seletor-anos button:hover,.seletor-pe button:hover{color:var(--areia)}
}

.seletor-meses{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
/* o estado de repouso mora no quadro inicial, não na regra: assim trocar de
   animação (a mordida da escolha) não devolve o botão para opacidade zero */
.seletor-meses button{
  font:inherit;font-size:.8125rem;text-transform:uppercase;letter-spacing:.1em;
  background:none;border:1px solid transparent;color:var(--areia-fraca);
  padding:11px 4px;cursor:pointer;
  animation:assoma-mes 340ms var(--saida) both;
  animation-delay:calc(var(--i,0)*22ms);
  transition:color 200ms var(--saida),background 200ms var(--saida),border-color 200ms var(--saida);
}
@keyframes assoma-mes{from{opacity:0;transform:translateY(-6px);filter:blur(4px)}}
/* scale é propriedade própria, fora do transform que a animação governa */
.seletor-meses button:active{scale:.94}
.seletor-meses button[aria-selected=true]{
  background:var(--bronze);border-color:var(--bronze);color:var(--breu);
  animation:morde 260ms var(--saida);
}
@keyframes morde{from{scale:.88}to{scale:1}}
@media (hover:hover) and (pointer:fine){
  .seletor-meses button:hover{color:var(--areia);border-color:var(--fio-escuro)}
  .seletor-meses button[aria-selected=true]:hover{color:var(--breu);border-color:var(--bronze)}
}

.seletor-pe{
  display:flex;justify-content:space-between;gap:8px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--fio-escuro);
}
.seletor-pe button{
  /* micro da rampa: ação secundária não compete com os meses */
  font:inherit;font-size:.6875rem;text-transform:uppercase;letter-spacing:.17em;
  background:none;border:0;color:var(--bronze);cursor:pointer;padding:6px 2px;
  transition:color 200ms var(--saida);
}

/* ─── WhatsApp flutuante ─── */
.zap{
  position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:90;
  width:54px;height:54px;display:grid;place-items:center;
  color:var(--zap);
  transition:transform 200ms var(--saida),color 200ms var(--saida);
}
.zap svg{width:40px;height:40px}
.zap:active{transform:scale(.96)}


/* ═══════════════ movimento de interface ═══════════════
   As ideias vêm do catálogo do kokonutui — spotlight-cards, scroll-text,
   sliced-text, slide-text-button, command-button e morphic-navbar — reescritas
   em CSS nosso. Nenhuma cor, fonte ou palavra da identidade muda aqui: tudo
   usa os tokens que já existiam, e todo hover está atrás de ponteiro fino. */

/* 1. uma face acesa por vez: o irmão recua quando um é escolhido */
@media (hover:hover) and (pointer:fine){
  .obras figure{transition:opacity 420ms var(--saida),transform 320ms var(--saida)}
  /* O recuo é condicionado a :has(), não ao hover do container: com
     `.obras:hover` bastava o mouse cair no vão entre as fotos para tudo
     recuar sem nada aceso. Agora só recua quando existe de fato uma foto
     sob o mouse — e onde :has() não existe, nada recua, que é o repouso.
     A regra que acende repete o :has() de propósito: sem isso ela empata em
     especificidade com a que recua e a foto sob o mouse recuaria junto. */
  .obras:has(figure:hover) figure{opacity:.34}
  .obras:has(figure:hover) figure:hover{opacity:1}
  .clientes:has(>li:hover) .marca-cliente img,
  .clientes:has(>li:hover) .marca-texto{opacity:.16}
  .clientes:has(>li:hover)>li:hover .marca-cliente img,
  .clientes:has(>li:hover)>li:hover .marca-texto{opacity:1}
}

/* 2. cada etapa acende conforme a rolagem, sem uma linha de JS */
@keyframes acende{from{opacity:.34}to{opacity:1}}
@supports (animation-timeline:view()){
  .etapas li{
    animation:acende 1s linear both;
    animation-timeline:view();
    animation-range:cover 18% cover 52%;
  }
}

/* 3. a régua bronze: o filete que já assina a página desenha-se sob o título
      quando ele entra. scaleX é transform, então nada reflui; e o repouso é
      visível (scaleX(1)), para que sem JavaScript a régua simplesmente esteja
      lá em vez de sumir. */
section h2{position:relative}
section h2::after{
  content:"";position:absolute;left:0;bottom:-.3em;
  width:2.4em;height:1px;background:var(--bronze);
  transform:scaleX(1);transform-origin:left center;
}
.claro h2::after{background:var(--bronze-fundo)}
section h2.entrou::after{animation:regua 640ms var(--saida) 160ms both}
@keyframes regua{from{transform:scaleX(0)}}

/* 4. o rótulo desliza para cima e a cópia entra por baixo */
.desliza{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.desliza>span{display:block;transition:transform 440ms var(--saida)}
.desliza>span:last-child{position:absolute;inset:0;transform:translateY(100%)}
@media (hover:hover) and (pointer:fine){
  .desliza:hover>span:first-child{transform:translateY(-100%)}
  .desliza:hover>span:last-child{transform:translateY(0)}
}

/* 5. varredura de tinta no botão: o preenchimento entra pela esquerda em vez
      de trocar de cor de uma vez.

      O detector acusa "bronze sobre bronze" aqui e é falso positivo: ele lê a
      cor do rótulo junto com o fundo do ::before, que em repouso está recortado
      a zero. Os quatro estados reais foram medidos no navegador — contornado no
      escuro 5,87:1 em repouso e 5,87:1 cheio (breu sobre bronze); contornado no
      claro 5,57:1 nos dois; cheio 5,87:1 e 15,3:1. Todos passam AA.
      O detector acusa a mesma coisa duas vezes, agora como bronze-fundo
      sobre bronze, no botão "Ver mais obras": ele lê o ::before genérico
      e ignora que `.claro` o sobrescreve. Medido no navegador, ali o
      preenchimento é rgb(110,85,48), não bronze. */
.botao{position:relative;z-index:0;overflow:hidden}
.botao::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--bronze);
  clip-path:inset(0 100% 0 0);
  transition:clip-path 240ms var(--saida);
}
/* o contornado se enche de bronze e fica igual ao botão cheio; o cheio inverte
   para areia. Cada par é o mesmo do sistema, só trocado de lado. */
.botao-cheio::before{background:var(--areia)}
.claro .botao:not(.botao-cheio)::before{background:var(--bronze-fundo)}
@media (hover:hover) and (pointer:fine){
  .botao:hover::before{clip-path:inset(0 0 0 0)}
}

/* 6. inclinação magnética: o repouso é aqui, os ângulos o JS escreve inline
      (escrever transform direto é mais barato que trocar variável no pai) */
.obras figure{transform:perspective(1000px)}

/* 7. o filete do menu desliza até a seção em que você está */
#cabecalho nav{position:relative}
#cabecalho nav::after{
  content:"";position:absolute;bottom:-2px;left:0;height:1px;width:1px;
  /* scaleX em vez de width: largura é layout, transform é GPU */
  transform:translateX(var(--ind-x,0)) scaleX(var(--ind-l,0));
  transform-origin:left center;
  background:var(--bronze);opacity:var(--ind-o,0);
  transition:transform 520ms var(--saida),opacity 320ms var(--saida);
}

/* o prédio sobe: mesma família de máscara, direção invertida porque prédio se
   constrói do chão para cima */

/* ─── o gesto autoral: a máscara, raspada pela rolagem ─── */
/* `sobe` foi aposentada. Ela recortava 32% da base do elemento no primeiro
   quadro, e como a animação agora só começa com o elemento bem dentro da tela,
   ele passava um bom tempo parado nesse quadro — justamente na borda de baixo,
   que é onde o olho está ao rolar. Numa foto um recorte lê como revelação; num
   título lê como texto cortado, que foi o que o cliente viu. Texto passa a
   chegar por opacidade e deslocamento (`assoma`); máscara fica só onde ela lê
   bem, que é foto (`varre`). */
/* a variante de celular da família: mesma chegada, sem recorte nem desfoque */
/* sem bloco `to` de propósito: o quadro final é o estilo do próprio
   elemento. Com `to{opacity:1}`, a marca d'água do herói (que repousa
   em .16) terminava opaca e tornava o título ilegível no celular. */
@keyframes assoma{from{opacity:0;transform:translateY(14px)}}
@keyframes varre{
  from{clip-path:inset(0 0 100% 0);filter:blur(8px)}
  to{clip-path:inset(0 0 0 0);filter:none}
}
@supports (animation-timeline:view()){
  .revela,.servicos li,.apoio li,.docs li,.dados>div{
    animation:assoma 1s var(--saida) both;
    animation-timeline:view();
    animation-range:cover 12% cover 46%;
  }
  .obras figure{
    animation:varre 1s var(--saida) both;
    animation-timeline:view();
    animation-range:cover 14% cover 50%;
  }
  /* A máscara vive no botão, não na célula: clip-path recorta pela caixa do
     elemento, e o painel de obras é absoluto fora dela. Na célula, ele era
     recortado para sempre — as obras simplesmente não existiam na tela. */
  .clientes>li .marca-cliente{
    animation:assoma 1s var(--saida) both;
    animation-timeline:view();
  }
  .clientes>li:nth-child(1) .marca-cliente{animation-range:cover 10% cover 44%}
  .clientes>li:nth-child(2) .marca-cliente{animation-range:cover 13% cover 47%}
  .clientes>li:nth-child(3) .marca-cliente{animation-range:cover 16% cover 50%}
  .clientes>li:nth-child(4) .marca-cliente{animation-range:cover 19% cover 53%}
  .clientes>li:nth-child(5) .marca-cliente{animation-range:cover 22% cover 56%}
  .rodape-logo{
    animation:varre 1s var(--saida) both;
    animation-timeline:view();
    animation-range:cover 16% cover 52%;
  }
}

/* Sem controle manual: a inércia fica sempre ligada, a pedido do cliente.
   O que continua valendo é a preferência do sistema — quem pediu movimento
   reduzido tem motivo de saúde para isso, e ignorar essa configuração não é
   uma decisão de estilo. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:1ms!important}
  #cortina{display:none}
}

/* ─── adaptação ─── */
@media (max-width:1100px){
  .dados,.apoio{grid-template-columns:repeat(2,1fr)}
  .obras{grid-template-columns:repeat(3,1fr)}
  .docs{grid-template-columns:1fr;gap:clamp(20px,3vw,32px)}
  .proposta-grade{grid-template-columns:1fr;gap:clamp(30px,5vw,50px)}
}
@media (max-width:860px){
  #cabecalho nav{display:none}
  /* o rótulo inteiro tem que caber numa linha ao lado da marca */
  #cabecalho .botao{padding:12px 14px;letter-spacing:.09em}
  .heroi{min-height:92svh}
  .nivel{flex-direction:column;align-items:flex-start;gap:16px}
  .servicos li{grid-template-columns:1fr;gap:10px}
  .tipo-grade{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
  .tipo-desenho{max-width:300px;margin:0 auto}
  .etapas b{display:block;min-width:0;margin-bottom:4px}
  .obras{grid-template-columns:1fr 1fr}
  /* Em duas colunas existe linha de baixo, e aí a folga tem de caber o maior
     painel: medido a 375px, as cinco obras da FG dão 137px. 160px deixa 23px
     de sobra. Acima de 860px são cinco colunas numa linha só — nada embaixo. */
  .clientes{grid-template-columns:repeat(2,1fr);gap:160px clamp(28px,4vw,64px)}
  /* No celular a família de máscaras sai das revelações escovadas: clip-path e
     blur por elemento são a pintura mais cara que existe num telefone, e é
     dessa promoção de camada que vem o defeito da seção reaparecer desenhada
     na posição errada. A chegada continua, só com opacidade e deslocamento —
     que o compositor resolve sem repintar nada. */
  .obras figure,.heroi-marca{animation-name:assoma}
  /* o desfoque das obras existe para o hover, e no celular não há hover: em
     repouso ele mantinha meia dúzia de camadas de filtro vivas de graça */
  .obras-cliente li,.obras-cliente .nota{filter:none}
  /* cinco logos em duas colunas deixam um buraco: o último ocupa a linha */
  .clientes>li:last-child{grid-column:1/-1}
  .formulario{grid-template-columns:1fr}
  footer{grid-template-columns:1fr}}
@media (max-width:560px){
  /* "SANTA FÉ" não cabia ao lado do botão: 145px de texto em 139px de caixa */
  .marca span{font-size:.8125rem;letter-spacing:.1em}
  .marca img{width:32px}
  .dados,.apoio{grid-template-columns:1fr}
  .marca small{display:none}
}

/* Abaixo de 340px, duas colunas espremem as cinco obras da FG em 192px de
   painel, mais do que a folga de 160px aguenta. Uma coluna só dá largura ao
   texto, o painel cai para ~100px, e a folga pode até diminuir. Medido, não
   estimado: a 320px o painel passava 32px da linha de baixo. */
@media (max-width:339px){
  .clientes{grid-template-columns:1fr;gap:130px clamp(28px,4vw,64px)}
}