/* 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}
}
@keyframes pulso{from{opacity:0;transform:scale(.96)}60%{opacity:.9}to{opacity:0;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;
  transition:background 180ms var(--saida),color 180ms var(--saida),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{background:var(--areia);color:var(--breu);border-color:var(--areia)}
  .botao-cheio:hover{background:var(--areia)}
  .claro .botao:not(.botao-cheio):hover{background:var(--tinta);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
     (WhatsApp e controle de movimento) 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;transition:transform 900ms var(--saida)}
/* 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 img{transform:scale(1.04)}
  .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}

.obras-cliente{
  position:absolute;top:100%;left:0;right:0;
  pointer-events:none;text-align:center;
  background:var(--breu);
  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);
  transition:opacity 560ms var(--saida),transform 560ms var(--saida);
}
.obras-cliente li{font-size:.9375rem;line-height:1.7;color:var(--areia)}
.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. */
.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}
.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}

/* ─── 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}
.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)}}

/* ─── WhatsApp e controle de movimento ─── */
.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)}
/* mobília da página fica toda na mesma coluna: à esquerda ela cobria
   o botão principal do herói, que mora no canto inferior esquerdo */
#movimento{
  position:fixed;right:clamp(16px,2vw,28px);
  bottom:calc(clamp(16px,2vw,28px) + 66px);z-index:90;
  font:inherit;font-size:.6875rem;text-transform:uppercase;letter-spacing:.14em;
  padding:9px 14px 9px 28px;cursor:pointer;
  color:var(--areia-fraca);background:rgba(12,13,15,.82);
  border:1px solid var(--fio-escuro);
  transition:color 200ms var(--saida),border-color 200ms var(--saida);
}
#movimento::before{
  content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;background:var(--bronze);
}
#movimento[aria-pressed=false]::before{background:var(--areia-fraca);opacity:.4}
@media (hover:hover) and (pointer:fine){#movimento:hover{color:var(--areia);border-color:var(--bronze)}}

/* ─── o gesto autoral: a máscara que sobe, raspada pela rolagem ─── */
@keyframes sobe{
  from{clip-path:inset(0 0 32% 0);transform:translateY(16px);filter:blur(4px)}
  to{clip-path:inset(0 0 0 0);transform:none;filter:none}
}
@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,.etapas li,.dados>div{
    animation:sobe 1s var(--saida) both;
    animation-timeline:view();
    animation-range:entry 4% cover 30%;
  }
  .obras figure{
    animation:varre 1s var(--saida) both;
    animation-timeline:view();
    animation-range:entry 6% cover 38%;
  }
  .clientes>li{
    animation:sobe 1s var(--saida) both;
    animation-timeline:view();
  }
  .clientes>li:nth-child(1){animation-range:entry 4% cover 24%}
  .clientes>li:nth-child(2){animation-range:entry 6% cover 27%}
  .clientes>li:nth-child(3){animation-range:entry 8% cover 30%}
  .clientes>li:nth-child(4){animation-range:entry 10% cover 33%}
  .clientes>li:nth-child(5){animation-range:entry 12% cover 36%}
  /* o prédio se constrói de baixo para cima, e só enquanto está na tela:
     a faixa é longa de propósito, para a subida ser lenta e legível */
  .tipo-desenho{
    animation:varre 1s var(--saida) both;
    animation-timeline:view();
    animation-range:entry 12% cover 58%;
  }
  .rodape-logo{
    animation:varre 1s var(--saida) both;
    animation-timeline:view();
    animation-range:entry 10% cover 46%;
  }
}

/* respeita o sistema, mas o controle manual tem a última palavra */
@media (prefers-reduced-motion:reduce){
  html:not([data-movimento=on]) *{animation:none!important;transition-duration:1ms!important}
  html:not([data-movimento=on]) #cortina{display:none}
}
html[data-movimento=off] *{animation:none!important;transition-duration:1ms!important}
html[data-movimento=off] #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}
  .clientes{grid-template-columns:repeat(2,1fr)}
  /* 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}
  /* o controle de movimento fica: celular em obra é o cenário real, e é
     justamente onde o sistema pode estar com movimento reduzido */
  /* no celular o controle vira só o indicador, empilhado sobre o WhatsApp: com
     rótulo ele cobria o botão principal do herói, que atravessa a tela. O texto
     continua no DOM para leitor de tela. */
  #movimento{
    right:clamp(16px,2vw,28px);
    bottom:calc(clamp(16px,2vw,28px) + 64px);
    width:38px;height:38px;padding:0;display:grid;place-items:center;
  }
  #movimento span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #movimento::before{position:static;transform:none;width:8px;height:8px}
}
@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}
}