/* ==========================================================================
   IC Para Raios — home institucional (www.icpararaios.com)
   Tokens do Manual da Marca IC v1.0, mesma família visual das LPs de
   SPDA e de cabine primária. CSS puro, sem build e sem dependência
   além das fontes do Google.

   A home é um roteador: leva o lead para a landing da especialidade dele.
   Por isso ela é curta e cada bloco tem um destino.
   ========================================================================== */

:root{
  /* marca */
  --azul:#0A1628;
  --azul-2:#0F1E33;
  --azul-3:#16283F;
  --papel:#F6F4EE;
  --papel-2:#EAE7DD;
  --amarelo:#F5B700;
  --amarelo-2:#FFCE3A;
  --aco:#2A3D5C;
  --cobre:#B87333;
  --muted:#7A8494;
  --texto:#1A1F2E;
  --texto-inv:rgba(246,244,238,.72);
  --filete:rgba(26,31,46,.16);
  --filete-inv:rgba(246,244,238,.15);

  --display:"Inter Tight",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --gut:clamp(18px,4vw,64px);
  --max:1400px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:72px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
/* Âncora não pode parar debaixo do header fixo. */
[id]{scroll-margin-top:calc(var(--header-h) + 18px)}

body{
  font-family:var(--sans);
  background:var(--azul);
  color:var(--papel);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--amarelo);color:var(--azul)}
:focus-visible{outline:2px solid var(--amarelo);outline-offset:3px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* O "pular para o conteúdo" é o primeiro foco de quem navega por teclado.
   Sem esta regra ele continuava de 1×1px no foco: existia para o leitor de
   tela e não existia para quem enxerga e não usa mouse. */
.sr-only:focus{
  width:auto;height:auto;overflow:visible;clip:auto;
  top:10px;left:10px;z-index:60;
  background:var(--amarelo);color:var(--azul);
  padding:12px 20px;border-radius:2px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}

/* ==========================================================================
   Tipografia
   ========================================================================== */
h2.titulo{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(29px,4.6vw,60px);
  line-height:1.02;
  letter-spacing:-.032em;
  text-transform:uppercase;
  text-wrap:balance;
}
h3{font-family:var(--display);font-weight:700;line-height:1.16;letter-spacing:-.015em}

/* Eyebrow em mono: o detalhe que dá o ar de instrumento de medição. */
.rotulo{
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--amarelo);
  display:inline-flex;align-items:center;gap:10px;
}
.rotulo::before{content:"";width:22px;height:1px;background:var(--amarelo);flex:none}

.lead{font-size:clamp(16px,1.5vw,19.5px);color:var(--texto-inv);max-width:62ch}
.claro .lead{color:#4A5162}

.sec{position:relative;padding:clamp(66px,8.5vw,128px) 0}
.sec.claro{background:var(--papel);color:var(--texto)}
/* O cobre da marca em 11px sobre o papel dá 3,45:1, abaixo do 4,5:1 que a
   WCAG pede para texto de corpo. Este tom é o mesmo cobre puxado para baixo
   até 4,76:1; no fundo escuro o amarelo continua valendo. */
.sec.claro .rotulo{color:#9C5D26}
.sec.claro .rotulo::before{background:#9C5D26}
.cabecalho-sec{max-width:74ch;margin-bottom:clamp(32px,4.6vw,58px)}
.cabecalho-sec .titulo{margin:18px 0 18px}
/* Enumeração longa (cinco tipos de edificação) no corpo de um título de
   frase vira quatro linhas de caixa alta. Como lista, pede corpo menor. */
.titulo--lista{
  font-size:clamp(25px,3.1vw,41px);line-height:1.08;text-wrap:pretty;
  /* O .cabecalho-sec limita em 74ch medidos na fonte do corpo, ~710px, e a
     enumeração cai em quatro linhas com "condomínio," sozinha. */
  max-width:min(96vw,1120px);
}
.cabecalho-sec:has(.titulo--lista){max-width:none}
.cabecalho-sec:has(.titulo--lista) .lead{max-width:74ch}

/* ==========================================================================
   Botões
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:2px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn svg{width:16px;height:16px;flex:none}
.btn-amarelo{background:var(--amarelo);color:var(--azul);font-weight:600}
.btn-amarelo:hover{background:var(--amarelo-2);transform:translateY(-2px)}
.btn-linha{border:1px solid var(--filete-inv);color:var(--papel)}
.btn-linha:hover{border-color:var(--amarelo);color:var(--amarelo);transform:translateY(-2px)}
.claro .btn-linha{border-color:var(--filete);color:var(--texto)}
.claro .btn-linha:hover{border-color:var(--cobre);color:var(--cobre)}

/* ==========================================================================
   Revelação no scroll — desligada em prefers-reduced-motion (ver no fim)
   ========================================================================== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.vis{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}

/* ==========================================================================
   Header
   ========================================================================== */
header{
  position:fixed;inset:0 0 auto 0;z-index:80;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(10,22,40,0);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
header.solido{
  background:rgba(10,22,40,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--filete-inv);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}

.logo{display:inline-flex;align-items:center;gap:11px;flex:none}
.logo-bolt{
  width:34px;height:34px;border-radius:8px;background:var(--amarelo);
  display:grid;place-items:center;flex:none;
}
.logo-bolt svg{width:20px;height:20px}
.logo-name{font-family:var(--display);font-weight:800;font-size:16.5px;letter-spacing:-.02em;line-height:1.05;text-transform:uppercase}
.logo-name small{
  display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;
  letter-spacing:.16em;color:var(--amarelo);text-transform:uppercase;margin-top:2px;
}

.nav-links{display:flex;align-items:center;gap:clamp(16px,2vw,30px);list-style:none}
.nav-links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-inv);transition:color .2s;
}
.nav-links a:hover{color:var(--amarelo)}
.nav-acao{display:flex;align-items:center;gap:12px;flex:none}
.nav-acao .btn{padding:12px 20px}

/* place-CONTENT, não place-items: com as linhas em stretch elas ocupam os
   40px de altura, os centros das barras ficam a ~13px e o translateY de 6.5
   junta as pontas num ">" em vez de cruzar num "X". */
.burger{display:none;width:40px;height:40px;place-content:center;justify-items:center}
.burger span,.burger::before,.burger::after{
  content:"";display:block;width:20px;height:1.5px;background:var(--papel);
  transition:transform .3s var(--ease),opacity .2s;
}
.burger span{margin:5px 0}
.burger[aria-expanded="true"]::before{transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::after{transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:1000px){
  .nav-links{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(10,22,40,.98);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--filete-inv);
    padding:8px var(--gut) 22px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .25s,transform .25s var(--ease);
  }
  .nav-links.aberto{opacity:1;transform:none;pointer-events:auto}
  .nav-links li{width:100%;border-bottom:1px solid var(--filete-inv)}
  .nav-links li:last-child{border-bottom:0}
  .nav-links a{display:block;padding:15px 0;font-size:12.5px}
  .burger{display:grid}
  /* "Pedir orçamento" não cabe ao lado do logo e do burger em 390px:
     no mobile o botão fica só "orçamento". */
  .nav-acao .btn .txt{display:none}
  .nav-acao .btn{padding:12px 15px;font-size:11px;letter-spacing:.1em}
}
@media (max-width:400px){
  .logo-name{font-size:14.5px}
  /* O small é mais largo que o nome: "Engenharia desde 1994" com tracking
     alto manda na largura do logo inteiro. */
  .logo-name small{font-size:8.5px;letter-spacing:.09em}
  .nav-acao{gap:6px}
  .nav-acao .btn{padding:11px 12px;font-size:10.5px}
}
@media (max-width:359px){
  /* Em 320px o par botão + burger não cabe ao lado do logo e empurra o
     header para fora da tela. O FAB do WhatsApp mantém a ação persistente. */
  .nav-acao .btn{display:none}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;min-height:min(92vh,860px);
  display:flex;align-items:flex-end;
  padding:calc(var(--header-h) + 70px) 0 clamp(44px,6vw,84px);
  overflow:hidden;
}
/* Em tela de celular o hero não precisa reservar a altura de um desktop:
   o que importa é o h1 e o botão aparecerem sem rolar. */
@media (max-width:700px){
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 34px)}
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,22,40,.86) 0%,rgba(10,22,40,.62) 38%,rgba(10,22,40,.93) 88%),
    linear-gradient(90deg,rgba(10,22,40,.92) 0%,rgba(10,22,40,.38) 62%,rgba(10,22,40,.55) 100%);
}
/* Malha técnica: a mesma assinatura das landings. */
.hero-malha{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(var(--filete-inv) 1px,transparent 1px),
                   linear-gradient(90deg,var(--filete-inv) 1px,transparent 1px);
  background-size:clamp(60px,7vw,104px) clamp(60px,7vw,104px);
  mask-image:radial-gradient(120% 80% at 78% 30%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 80% at 78% 30%,#000 0%,transparent 72%);
  opacity:.55;
}
.hero .wrap{position:relative;z-index:2;width:100%}
/* Em ch, esta caixa herdaria a métrica do corpo (16px) e espremeria o h1
   de 84px em ~576px — cinco linhas. A medida aqui é do título, não do texto;
   quem se limita por ch é o .lead logo abaixo. */
.hero-inner{max-width:min(92vw,900px)}
.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(37px,6.4vw,84px);
  line-height:.97;letter-spacing:-.036em;text-transform:uppercase;
  margin:20px 0 22px;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--amarelo)}
.hero .lead{max-width:56ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}

/* Régua de credenciais colada no pé do hero. */
.credenciais{
  border-top:1px solid var(--filete-inv);
  background:rgba(10,22,40,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.credenciais .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
}
.cred{
  padding:22px clamp(14px,2vw,30px);
  border-right:1px solid var(--filete-inv);
  display:flex;flex-direction:column;gap:3px;
}
.cred:last-child{border-right:0}
.cred b{
  font-family:var(--display);font-weight:800;font-size:clamp(17px,1.9vw,25px);
  letter-spacing:-.02em;line-height:1.1;
}
.cred span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);line-height:1.5;
}
@media (max-width:820px){
  .credenciais .wrap{grid-template-columns:repeat(2,1fr)}
  .cred{border-bottom:1px solid var(--filete-inv);padding:17px clamp(12px,3vw,22px)}
  .cred:nth-child(2n){border-right:0}
  .cred:nth-child(n+3){border-bottom:0}
}

/* ==========================================================================
   Cards grandes de especialidade — os dois que já têm landing própria
   ========================================================================== */
.destaques{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,26px)}
@media (max-width:900px){.destaques{grid-template-columns:1fr}}

/* O escopo de cada serviço passou a ser descrito com norma e ensaio nomeados,
   e nove linhas de texto técnico sobre fotografia não se lê. A foto virou
   faixa no topo e o texto ganhou fundo sólido. */
.card-esp{
  display:flex;flex-direction:column;
  border:1px solid var(--filete-inv);border-radius:3px;
  background:var(--azul-2);overflow:hidden;
  transition:border-color .35s,transform .35s var(--ease);
}
.card-foto{position:relative;aspect-ratio:16/9;overflow:hidden;flex:none;background:var(--azul-3)}
.card-foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.card-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,22,40,.12) 0%,rgba(10,22,40,.55) 100%);
}
.card-corpo{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(22px,2.5vw,34px);
}
.card-esp:hover{border-color:rgba(245,183,0,.5);transform:translateY(-3px)}
.card-esp:hover .card-foto img{transform:scale(1.04)}

.card-esp h3{font-size:clamp(22px,2.4vw,31px);text-transform:uppercase;letter-spacing:-.026em;margin:13px 0 12px}
.card-esp p{color:var(--texto-inv);font-size:clamp(14.4px,1.05vw,15.6px);line-height:1.62}
.card-esp .itens{
  list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:auto 0 22px;padding-top:18px;
}
.card-esp .itens li{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--papel);
  border:1px solid var(--filete-inv);border-radius:2px;padding:5px 10px;
  background:rgba(10,22,40,.4);
}
.ir{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo);
}
.ir svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.card-esp:hover .ir svg{transform:translateX(5px)}
/* Selo de página própria: diz ao lead que ali existe profundidade. */
.selo-lp{
  position:absolute;top:clamp(18px,2.4vw,28px);left:clamp(24px,3vw,40px);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--azul);background:var(--amarelo);padding:5px 11px;border-radius:2px;font-weight:600;
}

/* ==========================================================================
   Faixa das demais frentes
   ========================================================================== */
/* São seis frentes: três colunas fecham as duas linhas sem sobra. */
.frentes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--filete-inv);
  border:1px solid var(--filete-inv);border-radius:3px;overflow:hidden;
}
@media (max-width:1000px){.frentes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.frentes{grid-template-columns:1fr}}
.frente{
  background:var(--azul);
  padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;gap:9px;
  transition:background .3s,transform .3s var(--ease);
}
.frente:hover{background:var(--azul-3)}
.frente-topo{display:flex;align-items:center;gap:12px}
.frente svg.ico{width:22px;height:22px;flex:none;stroke:var(--amarelo)}
.frente h3{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.012em;line-height:1.2}
.frente p{font-size:14.2px;color:var(--texto-inv);line-height:1.55}
.frente .mini{
  margin-top:auto;padding-top:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:color .3s;
}
.frente:hover .mini{color:var(--amarelo)}
.frente .mini svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.frente:hover .mini svg{transform:translateX(4px)}

/* ==========================================================================
   Pilares (por que a IC)
   ========================================================================== */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)}
@media (max-width:880px){.pilares{grid-template-columns:1fr}}
.pilar{border-top:2px solid var(--cobre);padding-top:20px}
.pilar b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(18px,1.7vw,22px);letter-spacing:-.02em;text-transform:uppercase;margin-bottom:10px;
  /* "Responsabilidade técnica com ART" quebrava deixando ART sozinha na
     segunda linha. */
  text-wrap:balance;
}
.pilar p{font-size:15.4px;color:#4A5162;line-height:1.62}

/* Bloco do responsável técnico */
.rt{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);align-items:center;
  margin-top:clamp(40px,5vw,70px);
  border-top:1px solid var(--filete);padding-top:clamp(32px,4vw,56px);
}
@media (max-width:880px){.rt{grid-template-columns:1fr}}
.rt figure{position:relative;border-radius:3px;overflow:hidden}
/* `height:auto` não é enfeite: o atributo height="600" do <img> entra como
   altura declarada e o `aspect-ratio` só preenche dimensão automática. Sem
   isto a foto saía com 600px de altura em 517 de largura — retrato, não 4/3. */
.rt figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* Era uma citação em display 31px, que lia como frase de efeito. Virou
   parágrafo institucional: corpo de leitura, um grau acima do texto normal. */
.rt-texto{
  font-size:clamp(15.6px,1.32vw,17.4px);
  line-height:1.7;color:#3B4353;max-width:64ch;
}
.rt-texto + .rt-texto{margin-top:14px}
.rt .assina{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--filete);
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#5A6272;line-height:1.8;
}
.rt .assina b{color:var(--texto);display:block;font-size:12px}

/* ==========================================================================
   Setores atendidos — responde ao "vocês atendem alguém como eu?"
   ========================================================================== */
.setores{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--filete-inv);border:1px solid var(--filete-inv);border-radius:3px;
  overflow:hidden;margin-top:clamp(14px,1.8vw,22px);
}
@media (max-width:880px){.setores{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.setores{grid-template-columns:1fr}}
.setor{background:var(--azul-2);padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,26px)}
.setor b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2vw,25px);line-height:1.05;letter-spacing:-.028em;
  text-transform:uppercase;color:var(--amarelo);
}
.setor span{
  display:block;margin-top:9px;font-size:14px;color:var(--texto-inv);line-height:1.55;
}

/* ==========================================================================
   Obras — galeria
   ========================================================================== */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
@media (max-width:1000px){.galeria{grid-template-columns:repeat(2,1fr)}}
.gfoto{position:relative;border-radius:3px;overflow:hidden;background:var(--azul-3)}
/* Mesmo caso do .rt: o height="750" do atributo vencia o aspect-ratio e as
   quatro fotos saíam com 309×750 — tiras estreitas, no lugar do 4/5. */
.gfoto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .7s var(--ease)}
.gfoto:hover img{transform:scale(1.05)}
.gfoto figcaption{
  position:absolute;inset:auto 0 0 0;padding:16px;
  background:linear-gradient(180deg,transparent,rgba(10,22,40,.94));
}
.gfoto figcaption b{display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em}
.gfoto figcaption span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amarelo)}

/* ==========================================================================
   Clientes — marquee
   ========================================================================== */
/* O recuo entre um logo e o outro é margem do próprio chip, não `gap` da
   faixa. Com `gap`, a faixa duplicada pelo JS mede 2×conteúdo + 27 vãos, e
   metade disso cai meio vão antes do começo da cópia: a cada volta a faixa
   dava um salto para trás de meio recuo (31px em 1440px de tela). Como
   margem, cada item mede chip+recuo, a duplicata é exatamente o dobro e o
   -50% cai em cima do primeiro item da cópia. */
.marquee{overflow:hidden;position:relative;padding:8px 0;
  /* A borda esfumada era 9% da largura — quase um chip inteiro em desktop e
     mais de um em celular. Como o chip é claro e opaco, esfumar não some com
     ele: transforma num retângulo cinza sem logo, com cara de imagem que não
     carregou. Em pixel fixo o esfumado corta só o canto do chip. */
  mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
}
.track{display:flex;width:max-content;animation:desliza 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(-50%)}}
/* Duas correções aqui, das duas vezes em que a faixa quebrou.
   1. Caixa de tamanho fixo com object-fit, em vez de `place-items:center` com
      `max-height:100%` na imagem: o percentual não resolvia contra a área de
      grid, doze dos catorze logos renderizavam na altura natural (96px numa
      faixa de 43px) e o overflow do .marquee cortava o miolo deles. O
      woodbridge.svg, que só tem viewBox e não tem width/height, colapsava em
      0x0 e sumia da página.
   2. Chip claro no lugar do `brightness(0) invert(1)`. A silhueta só funciona
      em logo monocromático: o brasão da AFPESP virava um blob branco maciço e
      o quadrado do "by URGO" da Curatec apagava o texto vazado dentro dele.
      Logo de cliente não se distorce, então a faixa passa a dar fundo a eles. */
.cliente{
  flex:none;
  width:clamp(122px,13vw,166px);
  height:clamp(50px,5.2vw,66px);
  margin-right:clamp(34px,4.4vw,72px);
  background:var(--papel);
  border-radius:3px;
  padding:clamp(9px,1.1vw,15px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease);
}
.cliente img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  /* .72 sobre chip creme apagava o logo de traço claro — Prefeitura, Livraria
     Satélite, byofórmula e Simples ficavam quase invisíveis. O cinza é o que
     tira o logo da disputa com a página; a transparência forte só apagava. */
  filter:grayscale(1);opacity:.9;
  transition:filter .3s,opacity .3s;
}
.cliente:hover{transform:translateY(-2px)}
.cliente:hover img{filter:none;opacity:1}
/* prefeitura-sjc.png e simples-condominios.png vieram do fornecedor como
   marca vazada: todo pixel opaco do arquivo é branco puro, feito para fundo
   escuro. Sobre o chip creme não aparecia nada — dois clientes viravam chip
   vazio. Invertido, o mesmo desenho vira marca escura, sem deformar traço. */
.cliente img.vazado,
.cliente:hover img.vazado{filter:invert(1)}

/* ==========================================================================
   Processo
   ========================================================================== */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
@media (max-width:920px){.passos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.passos{grid-template-columns:1fr}}
.passo{border-top:1px solid var(--filete);padding-top:18px}
.passo .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--cobre);display:block;margin-bottom:10px}
.passo b{display:block;font-family:var(--display);font-weight:700;font-size:17.5px;letter-spacing:-.015em;margin-bottom:8px}
.passo p{font-size:14.6px;color:#4A5162;line-height:1.6}

/* ==========================================================================
   Orçamento — formulário
   ========================================================================== */
.orc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,4.5vw,74px);align-items:start}
@media (max-width:940px){.orc{grid-template-columns:1fr}}

.canais{display:flex;flex-direction:column;gap:11px;margin:26px 0 0}
.canal{
  display:flex;align-items:center;gap:15px;
  border:1px solid var(--filete-inv);border-radius:3px;padding:15px 18px;
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.canal:hover{border-color:rgba(245,183,0,.5);background:var(--azul-2);transform:translateX(3px)}
.canal-ico{width:38px;height:38px;border-radius:3px;display:grid;place-items:center;flex:none}
.canal-ico svg{width:19px;height:19px}
.canal-ico.zap{background:#25D366}
.canal-ico.mail{background:var(--azul-3);border:1px solid var(--filete-inv)}
.canal b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.canal small{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

.form{
  background:var(--azul-2);border:1px solid var(--filete-inv);border-radius:3px;
  padding:clamp(24px,3vw,40px);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:7px}
.campo.full{grid-column:1/-1}
.campo label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.campo input,.campo select,.campo textarea{
  background:rgba(10,22,40,.65);
  border:1px solid var(--filete-inv);border-radius:2px;
  padding:13px 14px;font-size:15px;color:var(--papel);
  transition:border-color .25s,background .25s;
  width:100%;
}
.campo textarea{resize:vertical;min-height:104px;line-height:1.55}
.campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8494' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:38px;
}
.campo select option{background:var(--azul-2);color:var(--papel)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--amarelo);background:rgba(10,22,40,.85);
}
.campo input::placeholder,.campo textarea::placeholder{color:#5B6577}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .btn{width:100%;margin-top:18px;padding:17px 28px}
.form .btn[disabled]{opacity:.6;cursor:wait}
.form-nota{
  margin-top:14px;font-size:12.4px;color:var(--muted);line-height:1.55;text-align:center;
}
.form-aviso{
  margin-top:14px;padding:13px 15px;border-radius:2px;font-size:14px;line-height:1.55;display:none;
}
.form-aviso.ok{display:block;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4)}
.form-aviso.erro{display:block;background:rgba(245,183,0,.1);border:1px solid rgba(245,183,0,.42)}
.form-aviso a{color:var(--amarelo);text-decoration:underline}

/* ==========================================================================
   Rodapé
   ========================================================================== */
footer{background:var(--azul-2);border-top:1px solid var(--filete-inv);padding:clamp(44px,5vw,72px) 0 30px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(26px,3.4vw,54px)}
@media (max-width:880px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}
.foot h2{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--amarelo);margin-bottom:15px;
}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot a{font-size:14.4px;color:var(--texto-inv);transition:color .2s}
.foot a:hover{color:var(--amarelo)}
.foot p{font-size:14.4px;color:var(--texto-inv);line-height:1.7}
.foot-sobre{max-width:44ch;margin-top:15px;font-size:14.4px}
.foot-dados{margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:2}
.copy{
  margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--filete-inv);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* Botão flutuante do WhatsApp */
.fab{
  position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:70;
  width:54px;height:54px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.4);
  transition:transform .3s var(--ease);
}
.fab:hover{transform:scale(1.07)}
.fab svg{width:28px;height:28px}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  /* Sem animação a faixa não anda, e o JS também não duplica os logos. Só
     que a faixa continua medindo 3.180px numa janela de 1.425px: sete dos
     catorze clientes ficavam cortados fora da tela, sem jeito de chegar
     neles. Parada, ela vira grade centrada, com todos à vista. */
  .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;
    gap:clamp(16px,2vw,28px);padding:0 var(--gut)}
  .cliente{margin-right:0}
  .marquee{mask-image:none;-webkit-mask-image:none}
}

/* Foto em retrato dentro de recorte largo fica só com o céu quando centrada.
   Nestas o assunto está na metade de baixo: o captor na cumeeira do prédio e
   o mastro na cobertura. */
img.foco-baixo{object-position:center 66%}