/* =========================================================================
   ARTICULAT CF — a fonte do arquivo
   Quatro arquivos .woff2 em assets/fonts/, com estes nomes exatos. Enquanto
   eles não estiverem lá, o navegador ignora estas regras e cai em Hanken
   Grotesk, igual a hoje. Nada mais precisa mudar.
   ========================================================================= */
@font-face{
  font-family:'Articulat CF';
  src:url('../fonts/ArticulatCF-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Articulat CF';
  src:url('../fonts/ArticulatCF-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Articulat CF';
  src:url('../fonts/ArticulatCF-DemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Articulat CF';
  src:url('../fonts/ArticulatCF-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* =========================================================================
   ES Turbos — sistema visual
   Implementação do Figma "Desktop - 2560px - V1" (node 6055:6763).
   Valores de cor, raio, sombra e tipografia saíram do arquivo da Bruna.
   ========================================================================= */

:root{
  /* ---- cor ---- */
  --bg:            #020C1C;   /* fundo da página            */
  --bg-card:       #060610;   /* fundo dos cards            */
  --linha:         #17182F;   /* borda dos cards escuros    */
  --linha-clara:   rgba(255,255,255,.1);
  --linha-painel:  rgba(255,255,255,.04);

  --texto:         #FFFFFF;
  --texto-2:       #EAEDFF;   /* leads e rótulos            */
  --tinta:         #020C1C;   /* texto sobre a seção branca */

  --azul:          #0082FF;
  --azul-claro:    #D4EAFF;
  --azul-link:     #008CFF;
  --gradiente:     linear-gradient(98.5deg, #0082FF 9.2%, #D4EAFF 106.77%);

  /* ---- sombra ---- */
  /* A ordem importa: no arquivo a azul está na frente da ciano. A luz do
     arquivo está sempre acesa; aqui ela é só do hover, a pedido da Bruna. */
  --luz-botao:   0 4.84px 39.95px rgba(17,112,255,.39), 0 4.84px 85.71px rgba(0,255,251,.19);
  --luz-carta:   0 18px 46px rgba(0,66,150,.38);   /* carta sob o mouse */
  --dentro-card: inset 0 0 19.9px rgba(41,37,49,.59);
  --dentro-azul: inset 0 0 18.1px rgba(91,106,178,.36);
  --dentro-painel: inset 0 0 29px rgba(39,53,104,.74);
  --dentro-icone: inset 0 0 10.55px #292531;

  /* ---- laços ---- */
  --vao-faixa:   clamp(0.875rem, 5.66vw, 9.0625rem);  /* a cópia fecha os 2284 do arquivo */
  --t-faixa:     68s;
  --t-feedbacks: 70s;
  --t-galeria:   78s;

  /* quanto o painel da chamada final sobe sobre a faixa branca (54px) */
  --sobrepoe-cta: clamp(1rem, 2.11vw, 3.375rem);

  /* ---- medida ---- */
  --container: 71.25rem;
  --largo:     88.25rem;
  --extra:     96.375rem;
  --gutter:    1.5rem;

  --r-xs: 0.5rem;
  --r-sm: 0.625rem;
  --r-md: 0.9375rem;
  --r-lg: 1.5625rem;
  --r-xl: 1.875rem;

  /* O arquivo não usa um respiro único entre seções: cada vão tem o seu.
     Os valores abaixo são a distância entre o fim de um bloco de conteúdo e
     o começo do próximo, em 2560. */
  --y-servicos:      clamp(4.5rem,  6.52vw, 10.4375rem);
  --y-diferenciais:  clamp(6rem, 14.57vw, 23.3125rem);
  --y-dif-base:      clamp(2.5rem,  6.56vw, 10.5rem);
  --y-preventiva:    clamp(3rem,  6.09vw, 9.75rem);
  --y-feedbacks:     clamp(5rem, 10.20vw, 16.3125rem);
  --y-sobre:         clamp(5.75rem, 13.52vw, 21.625rem);
  --y-ate-contato:   clamp(5rem,  9.34vw, 14.9375rem);
  --y-divisor:       clamp(3.75rem,  5.47vw, 8.75rem);
  --y-fim-contato:   clamp(4rem,  6.05vw, 9.6875rem);
  --y-ate-rodape:    clamp(3rem,  3.87vw,  6.1875rem);
  --y-rodape:        clamp(2.5rem,  3.13vw,  5rem);
  --y-fim-pagina:    clamp(2.5rem,  3.28vw,  5.25rem);

  /* ---- tipografia ----
     Articulat CF é a fonte do arquivo e vem de assets/fonts/ (ver o
     @font-face no topo). O arquivo usa quatro pesos: 400 nos rótulos e
     leads, 500 nos títulos, 600 no botão e 700 nos destaques e nos h3 das
     cartas. Hanken Grotesk fica como rede de segurança. */
  --fonte: 'Articulat CF', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-aspas: 'Space Grotesk', var(--fonte);

  --t-display: clamp(2rem, 3.9vw, 3.125rem);
  --t-lead:    clamp(1.0625rem, 1.45vw, 1.25rem);
  --t-rotulo:  clamp(0.875rem, 1.2vw, 1rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:100%;        /* 1rem = 16px, respeitando a leitura do usuário */
      -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  background:var(--bg);
  color:var(--texto);
  font-family:var(--fonte);
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{ display:block; max-width:100%; }
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; border-radius:0.25rem; }

/* Sem viúvas: o navegador puxa a última palavra para cima quando ela ficaria
   sozinha. Só em parágrafo — nos h3 das cartas não, porque as fileiras têm
   altura fixa do Figma e uma quebra diferente estouraria a caixa. */
p{ text-wrap:pretty; }

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

/* ---------- estrutura ---------- */
.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--largo{ max-width:calc(var(--largo) + var(--gutter) * 2); }
.container--extra{ max-width:calc(var(--extra) + var(--gutter) * 2); }

/* cada seção carrega o vão que vem antes dela */
.secao{ padding-block:0; position:relative; }
#servicos       { padding-top:var(--y-servicos); }
/* o respiro de baixo é separado porque o arco se apoia no fim da seção:
   168 + 156 é o vão de 324 do arquivo até a preventiva */
.painel-area    { padding-top:var(--y-diferenciais); padding-bottom:var(--y-dif-base); }
.preventiva-area{ padding-top:var(--y-preventiva); }
.feedbacks      { padding-top:var(--y-feedbacks); }
#sobre          { padding-top:var(--y-sobre); padding-bottom:var(--y-ate-contato); }
.chamada        { padding-bottom:var(--y-ate-rodape); }

/* ---------- tipografia ---------- */
.display{
  font-size:var(--t-display);
  font-weight:500;
  /* 43,833px sobre 50px — o valor do Figma. O text-box tira a folga que o
     navegador põe em volta da caixa, que é o que o Figma já faz. */
  line-height:.877;
  letter-spacing:0;              /* o arquivo usa 0 em todos os títulos */
  text-wrap:balance;
  text-box:trim-both cap alphabetic;
}
.display--solto{ line-height:1.1; }   /* 55px — feedbacks, sobre e contato */
/* 50px sobre 50px — o h1 do hero é o único título com entrelinha 1. Eu tinha
   0,84 aqui, e eram 8px a menos por linha: faltava espaço para o acento, e o É
   de "É com a ES Turbos." encostava no "hidráulicos?" de cima. Com o valor do
   arquivo o bloco fecha nos 135px do Figma e o acento folga sozinho. */
.hero .display{ line-height:1; }
/* A segunda frase é linha própria no arquivo (há um \n no texto). O
   fit-content mantém a caixa do degradê colada ao texto — como bloco de
   largura cheia, o degradê esticaria e mudaria de inclinação. */
.hero .display .grad{ display:block; width:fit-content; }
.display strong,.display b{ font-weight:700; }

/* texto com o degradê azul da marca */
.grad{
  background:var(--gradiente);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:700;
}

.lead{
  font-size:var(--t-lead);
  line-height:1.4;
  text-box:trim-both cap alphabetic;
  letter-spacing:.02em;
  color:var(--texto-2);
  text-wrap:pretty;
}
.lead .marca{ color:var(--azul-link); font-weight:600; }

/* "// serviços" — o rótulo que abre cada seção */
.rotulo{
  font-size:var(--t-rotulo);
  text-box:trim-both cap alphabetic;   /* 11px em 16px, como no arquivo */
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--texto-2);
}
.secao-branca .rotulo{ color:var(--tinta); }

.cabeca{ display:flex; flex-direction:column; gap:2rem; }
.cabeca__texto{ display:flex; flex-direction:column; gap:1rem; width:100%; }
.cabeca--centro{ align-items:center; text-align:center; }

/* ---------- botão principal ---------- */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:1rem;
  padding:1.25rem 2.5rem;
  border-radius:var(--r-xs);
  background:var(--gradiente);
  color:#FFFFFF;
  font-size:1.04375rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap;
  transition:translate .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.botao img{
  width:2.0625rem; height:2.0625rem; flex:none;
  transition:translate .3s var(--ease), rotate .3s var(--ease);
}
.botao:hover,.botao:focus-visible{
  translate:0 -3px;
  filter:brightness(1.07);
  box-shadow:var(--luz-botao);
}
.botao:hover img,.botao:focus-visible img{ translate:4px -4px; rotate:45deg; }
.botao:active{ translate:0 0; box-shadow:var(--luz-botao); }

/* ---------- ornamento divisor ---------- */
.divisor{
  display:block; width:17.6875rem; max-width:60%; height:auto;
  margin-inline:auto;
  transform:rotate(180deg);   /* como está no arquivo */
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;
  min-height:clamp(35rem, 37vw, 59.375rem);
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero__fundo{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__fundo > *{ position:absolute; pointer-events:none; max-width:none; }

.hero__foto,.hero__video{
  inset:0; width:100%; height:100%;
  /* o arquivo mostra a faixa de 11,7% a 77,7% da altura do quadro 16:9 */
  object-fit:cover; object-position:50% 34.46%;
}
.hero__video{ opacity:0; transition:opacity .9s var(--ease); }
.hero__video.pronto{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .hero__video{ display:none; } }

/* Camadas de fundo do hero, com a geometria e a opacidade do arquivo.
   As porcentagens são medidas sobre o quadro de 2560x950 do Figma. */

/* Veu */
.hero__veu{
  inset:0;
  background:linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 50%, #000 100%);
}

/* As três camadas de luz são a MESMA imagem com três recortes diferentes —
   no Figma o preenchimento está em CROP, e era isso que faltava. Esticar a
   imagem inteira em cada uma trazia o canto mais claro dela para dentro do
   quadro, o que apagava o azul da esquerda e me obrigava a baixar a
   opacidade do reforço. Com o recorte certo as opacidades são as do arquivo.

   background-size é 100 ÷ largura do recorte; background-position é
   deslocamento ÷ (1 − recorte), que é como o CSS mede porcentagem de fundo
   quando a imagem é maior que a caixa. */
.hero__onda,
.hero__reforco{
  background-image:url('../img/fig/onda-b.webp');
  background-repeat:no-repeat;
  mix-blend-mode:plus-lighter;
}

/* recorte u 9,5→100%, v 7,0→104,1% */
/* Onda A — centro em 19,49% / 23,89%, medido do absoluteTransform porque ela
   está girada 180°. O recorte não mudou; o que mudou foi onde ela fica. */
.hero__onda--a{
  left:-59.30%; top:-103.69%; width:157.58%; height:255.16%;
  rotate:180deg;
  background-size:110.46% 102.96%;
  background-position:100% 243.05%;
  filter:blur(15.75px); opacity:.35;
}
/* recorte u 0→77,8%, v 32,2→104,1% — é o canto mais aceso da imagem */
.hero__onda--b{
  left:-84.6%; top:-32%; width:129.7%; height:180.8%;
  background-size:128.52% 139.16%;
  background-position:.05% 114.54%;
  filter:blur(87.65px); opacity:.4;
}
/* REFORÇO DE LUZ — recorte u 43,5→100%, v 57,1→104,1%, deitado 90°.
   A caixa é 2518x1174 antes de girar; medida pelo centro por causa disso. */
.hero__reforco{
  left:84.41%; top:-36%; width:98.36%; height:123.58%;
  translate:-50% -50%; rotate:-90deg;
  background-size:176.97% 212.59%;
  background-position:100% 107.77%;
  filter:blur(175px); opacity:.6;
}

.hero__conteudo{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:2rem;
  padding-block:clamp(6rem, 12vw, 7.5rem);
}
.hero__bloco{ display:flex; flex-direction:column; gap:2rem; max-width:29.75rem; }
.hero__logo img{ width:5.9375rem; height:auto; }
.hero__titulo{ display:flex; flex-direction:column; gap:1rem; }

/* =========================================================================
   FAIXA DE CREDENCIAIS
   ========================================================================= */
.faixa{
  position:relative; overflow:hidden;
  border-block:3px solid rgba(255,255,255,.2);
  background:rgba(1,8,22,.5);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
}
.faixa::after{            /* o mesmo véu lateral do Figma */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, #010816 0%, rgba(4,7,13,0) 50%, #010816 100%);
}
/* Sem z-index de propósito: o véu lateral do arquivo fica POR CIMA do texto,
   e é ele que faz os itens entrarem e saírem do laço sem estalo. */
.faixa__lista{
  display:flex; align-items:center; flex:none;
  gap:var(--vao-faixa);
  min-height:clamp(6rem, 10vw, 9.5625rem);
  padding:1.25rem var(--vao-faixa) 1.25rem 0;   /* o mesmo vão até a próxima cópia */
  font-size:clamp(0.75rem, 1.15vw, 1.25rem);
  font-weight:500; line-height:1.1;
  text-transform:uppercase;
  color:rgba(247,247,247,.84);
  text-align:center;
}
.faixa__lista li{ display:flex; align-items:center; gap:var(--vao-faixa); }
.faixa__lista li::after{ content:"//"; color:rgba(247,247,247,.45); }

/* =========================================================================
   SERVIÇOS — bento
   ========================================================================= */
.servicos__cabeca{ max-width:37.5rem; }
.servicos__cabeca .lead{ max-width:25rem; }

.bento{
  display:grid;
  grid-template-columns:657fr 463fr;
  gap:1.375rem 1.25rem;
  margin-top:clamp(2.5rem, 3.09vw, 4.9375rem);
}
.bento__coluna{ display:grid; grid-template-rows:auto 1fr; gap:1.375rem; }
.bento__par{ display:grid; grid-template-columns:1fr 1fr; gap:1.3125rem; }
.bento__par .card-servico{ min-height:0; }
.bento__quatro{
  grid-column:1 / -1;
  display:grid; grid-template-columns:1fr 1fr; gap:1.375rem 2.25rem;
}

.card-servico{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:center; gap:0.5rem;
  padding:clamp(1.75rem, 3.2vw, 2.75rem);
  min-height:11.8125rem;
  border:2px solid var(--linha-clara);
  border-radius:var(--r-lg);
  background:var(--bg-card);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--dentro-azul);
}
/* 29,6px no arquivo. A entrelinha muda de coluna: 29,59 na da esquerda e
   33 na da direita — está assim no Figma, não é engano meu. */
.card-servico h3{
  font-size:clamp(1.3125rem, 2.3vw, 1.85rem);
  font-weight:700; line-height:1; letter-spacing:0;
}
.bento__par .card-servico:nth-child(2) h3,
.bento__quatro .card-servico:nth-child(even) h3{ line-height:1.1151; }
.card-servico p{
  font-size:clamp(0.9375rem, 1.35vw, 1.0625rem); line-height:1.29;
  max-width:26ch;
}
.card-servico__texto{ position:relative; z-index:2; display:flex; flex-direction:column; gap:0.5rem; }

/* brilhos decorativos de canto
   Toda carta do bento traz o mesmo par de elipses do arquivo: a azul
   (#0088FF, normal) e a branca em overlay, as duas com 358,58px de desfoque
   e giradas 43,42°. O que muda de carta para carta é só o centro — que no
   Figma cai quase sempre fora da carta, então entra apenas o desfoque. É
   isso que deixa o fundo preto com brilho de canto em vez de lavado.

   O núcleo aceso fica no meio do SVG (358px de elipse mais o desfoque de
   cada lado, 1075,15px no total), então centro o SVG no ponto --gx/--gy e
   deixo o resto sangrar. --gw é 1075,15px em relação à largura da carta. */
.card-servico__brilho{
  position:absolute; z-index:0; pointer-events:none; max-width:none;
  width:var(--gw); height:auto;
  left:var(--gx); top:var(--gy);
  translate:-50% -50%;
}
/* Vector de 394x542, deitado -90° no arquivo e centrado em 65,75% / 109,47%
   da carta de 657x338 — ou seja, quase todo abaixo dela, só o rabo entra. Os
   25% de opacidade já vêm no SVG. */
.card-servico__brilho--azul,
.card-servico__brilho--branco{ rotate:43.42deg; opacity:1; }
.card-servico__brilho--branco{ mix-blend-mode:overlay; }

/* as duas com foto — 657x338 e 463x672 */
.card-servico--larga .card-servico__brilho--azul  { --gw:163.6%; --gx:17%;    --gy:-53.2%; }
.card-servico--larga .card-servico__brilho--branco{ --gw:163.6%; --gx:1.7%;   --gy:-59.1%; }
.card-servico--alta  .card-servico__brilho--azul  { --gw:232.2%; --gx:113.2%; --gy:63.6%;  }
.card-servico--alta  .card-servico__brilho--branco{ --gw:232.2%; --gx:91.4%;  --gy:60.6%;  }

/* o par de 318x312 — acende pela direita, uma por cima e a outra por baixo */
.bento__par .card-servico:nth-child(1) .card-servico__brilho--azul  { --gw:338.1%; --gx:126.1%;  --gy:-40.36%;  }
.bento__par .card-servico:nth-child(1) .card-servico__brilho--branco{ --gw:338.1%; --gx:94.34%;  --gy:-46.72%;  }
.bento__par .card-servico:nth-child(2) .card-servico__brilho--azul  { --gw:338.1%; --gx:138.05%; --gy:129.52%;  }
.bento__par .card-servico:nth-child(2) .card-servico__brilho--branco{ --gw:338.1%; --gx:106.29%; --gy:123.16%;  }

/* as quatro de 552x189 — a coluna da esquerda acende por cima, a da direita
   por baixo, e as duas fileiras repetem a mesma geometria */
.bento__quatro .card-servico:nth-child(odd) .card-servico__brilho--azul   { --gw:194.8%; --gx:93.84%;  --gy:-98.9%;   }
.bento__quatro .card-servico:nth-child(odd) .card-servico__brilho--branco { --gw:194.8%; --gx:75.54%;  --gy:-109.39%; }
.bento__quatro .card-servico:nth-child(even) .card-servico__brilho--azul  { --gw:194.8%; --gx:100.72%; --gy:181.53%;  }
.bento__quatro .card-servico:nth-child(even) .card-servico__brilho--branco{ --gw:194.8%; --gx:82.43%;  --gy:171.03%;  }

/* as duas cartas com foto */
.card-servico--larga{ min-height:21.125rem; }
.card-servico--alta{ min-height:42rem; justify-content:flex-start; padding-top:clamp(2.125rem, 3.6vw, 3.5rem); }
.card-servico--larga h3,.card-servico--alta h3{
  font-size:clamp(1.4375rem, 2.5vw, 2rem);
  line-height:1.8125;            /* caixa de 58px em 32px, como o arquivo mede */
}
.card-servico--larga p,.card-servico--alta p{ font-size:clamp(1rem, 1.5vw, 1.25rem); max-width:30ch; }
.card-servico--larga .card-servico__texto{ max-width:18.375rem; }

.card-servico__foto{
  position:absolute; z-index:1; pointer-events:none; max-width:none;
}
/* Foto 454x370 em x=314, y=-12 no card de 657x338 */
.card-servico--larga .card-servico__foto{ left:47.8%; top:-3.55%; width:69.1%; height:109.5%; object-fit:cover; }
/* Foto 538x661 em x=-42, y=197 no card de 463x672 */
.card-servico--alta .card-servico__foto{ left:-9.07%; top:29.32%; width:116.2%; height:98.4%; object-fit:cover; }

/* =========================================================================
   PAINEL (diferenciais e chamada final)
   ========================================================================= */
/* Sem `isolation` de propósito: o `lighten` do arco precisa compor com o
   fundo da página, como no Figma, senão o preto do JPEG pintaria mais escuro
   que ela. E só o corte lateral: a seção aqui é mais baixa que a do arquivo,
   então o arco sobra em cima — cortar devolveria a linha reta, só que na
   outra ponta. Em z-index -1 o que sobe passa por trás das cartas. */
.painel-area{ position:relative; overflow-x:clip; }

/* O arco não é a imagem inteira: no Figma o preenchimento está em CROP e
   começa em 1,47% da altura dela. O arquivo corta em 67,97%, numa caixa de
   2943x1956 que termina no fim da seção — e ali a imagem ainda tem azul, o
   que deixava uma linha reta na divisão com a preventiva.

   Aqui o recorte vai até o fim da imagem: a caixa cresce para 2943x2900 e
   desce 944px além da seção. A luz morre sozinha por volta de 78% da
   imagem, onde ela já é mais escura que o fundo da página e o `lighten`
   some com ela. O desenho em cima fica igual, e a divisão deixa de existir.

   O -36,875% de margem é esse mesmo 944 em relação à largura: margem em
   porcentagem mede pela largura do bloco, então ela acompanha a escala. */
.painel-area__arco{
  position:absolute; z-index:-1; pointer-events:none;
  left:50%; translate:-50% 0;
  bottom:0; margin-bottom:-36.875%;   /* 944 de 2560 */
  width:114.96%;                      /* 2943 de 2560 */
  aspect-ratio:2943 / 2900; height:auto; max-width:none;
  object-fit:cover; object-position:50% 100%;
  mix-blend-mode:lighten;
}

.painel{
  position:relative; overflow:hidden; isolation:isolate;
  padding:0 clamp(1.5rem, 3.5vw, 3.125rem) clamp(2.75rem, 6.05vw, 9.6875rem);
  border:4px solid var(--linha-painel);
  border-radius:var(--r-xl);
  background:rgba(6,6,16,.89);
  backdrop-filter:blur(12.5px);
  -webkit-backdrop-filter:blur(12.5px);
  box-shadow:var(--dentro-painel);
}
/* O divisor é irmão do conteúdo, como no arquivo: encostado no topo do
   painel, com 138px até o conteúdo nos diferenciais e 171px na chamada. */
/* o -4px tira a borda da conta: no arquivo o traço fica por cima do topo,
   não empurrado por ele. Somado ao respiro de baixo dá os 1167px do painel. */
.painel > .divisor{ margin-top:-0.25rem; margin-bottom:clamp(2.5rem, 5.39vw, 8.625rem); }
.painel .cabeca{ width:100%; max-width:64.375rem; gap:1.5rem; }
.painel__conteudo{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:clamp(2.75rem, 8.5vw, 6.0625rem);
  max-width:71.6875rem; margin-inline:auto;
}

/* ---------- cards com ícone ---------- */
.cards-icone{ display:grid; gap:1.25rem; width:100%; }
.cards-icone__grupo{ display:grid; gap:1.0625rem; width:100%; }
.cards-icone--tres{ grid-template-columns:repeat(3,1fr); }
.cards-icone--dois{ grid-template-columns:repeat(2,1fr); gap:1.3125rem; }

.card-icone{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:center; gap:1.25rem;
  padding:clamp(1.75rem, 3.4vw, 3.125rem);
  color:var(--texto);          /* o card é escuro mesmo dentro da seção branca */
  border:1px solid var(--linha);
  border-radius:var(--r-md);
  background:var(--bg-card);
  box-shadow:var(--dentro-card);
}
.card-icone > *{ position:relative; z-index:2; }
/* Elipse 104 de 358x320, girada 43,415°, centrada embaixo e à direita da
   carta — 1075,15px de SVG em 499 de carta. Os 36% já vêm no arquivo. */
.card-icone__brilho{
  position:absolute; z-index:0; pointer-events:none; max-width:none;
  width:215.46%; height:auto;
  left:80.16%; top:116.89%;
  translate:-50% -50%; rotate:43.415deg;
}
.card-icone__texto{ display:flex; flex-direction:column; gap:0.5rem; }
.card-icone h3{ font-size:clamp(1.1875rem, 1.9vw, 1.5rem); font-weight:700; line-height:1.05; }
.card-icone p{ font-size:clamp(0.9375rem, 1.5vw, 1.125rem); line-height:1.29; max-width:26ch; }
.card-icone a{ transition:color .2s var(--ease); }
.card-icone a:hover{ color:var(--azul-claro); }

/* caixinha de 60px que emoldura o ícone */
.icone-caixa{
  display:grid; place-items:center;
  width:3.75rem; height:3.75rem; flex:none;
  padding:0.71875rem;
  border:1px solid var(--linha-clara);
  border-radius:var(--r-sm);
  background:linear-gradient(to right, rgba(23,17,36,.21), rgba(91,76,103,.16));
  backdrop-filter:blur(59.54px);
  -webkit-backdrop-filter:blur(59.54px);
  box-shadow:var(--dentro-icone);
}
.icone-caixa img{ width:1.875rem; height:1.875rem; }
/* o primeiro ícone veio do Figma com a moldura embutida */
.icone-caixa--inteira{ width:3.75rem; height:3.75rem; padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.icone-caixa--inteira img{ width:3.75rem; height:3.75rem; }

/* lista "// turbocompressores" dentro do último card */
.aplicacoes{
  display:grid; grid-template-columns:1fr 1fr; gap:0.5rem 0.5rem;
  font-size:clamp(0.9375rem, 1.5vw, 1.125rem); line-height:1.29;
}

/* =========================================================================
   PREVENTIVA
   ========================================================================= */
.preventiva{ display:grid; grid-template-columns:minmax(0,960fr) minmax(0,525fr); gap:clamp(2rem, 4vw, 3.5625rem); align-items:center; }
.preventiva__arte{ position:relative; isolation:isolate; }
.preventiva__arte > img:not(.preventiva__brilho){
  width:100%; height:auto;
  transition:scale .7s var(--ease), rotate .7s var(--ease), filter .7s var(--ease);
}
.preventiva__arte:hover > img:not(.preventiva__brilho){ scale:1.045; rotate:-1.2deg; filter:brightness(1.07); }
.preventiva__arte img.preventiva__brilho{
  position:absolute; z-index:2; pointer-events:none;
  width:19.2%; height:auto; mix-blend-mode:plus-lighter;
}
.preventiva__arte img.preventiva__brilho{ transition:scale .7s var(--ease), opacity .7s var(--ease); }
.preventiva__arte:hover img.preventiva__brilho{ scale:1.45; opacity:.85; }
.preventiva__brilho--a{ left:52%; top:13%; }
.preventiva__brilho--b{ left:22%; top:39%; }
.preventiva__texto{ display:flex; flex-direction:column; gap:2rem; align-items:flex-start; }

/* =========================================================================
   FEEDBACKS
   ========================================================================= */
.feedbacks__trilho{
  position:relative;
  margin-top:clamp(3.25rem, 6.4vw, 8rem);
  overflow:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  /* as pontas somem para dizer que a lista continua */
  mask-image:linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.feedbacks__trilho::-webkit-scrollbar{ display:none; }
.feedbacks__lista{
  display:flex; flex:none; gap:1.625rem;
  padding-right:1.625rem;
  padding-block:0.25rem;
}
.card-feedback{
  position:relative; isolation:isolate;
  flex:0 0 clamp(18.75rem, 70vw, 29.75rem);
  display:flex; flex-direction:column; justify-content:center; gap:0.3125rem;
  min-height:clamp(20.625rem, 34vw, 28.6875rem);
  padding:clamp(1.875rem, 3.4vw, 3.125rem);
  border:1px solid var(--linha);
  border-radius:var(--r-lg);
  background:var(--bg-card);
  box-shadow:var(--dentro-card);
}
.card-feedback__aspas{
  display:block; height:2.25rem; overflow:hidden;
  font-family:var(--fonte-aspas);
  font-size:4.125rem; line-height:1; letter-spacing:-.02em;
  background:linear-gradient(91.5deg, #0082FF 9.2%, #D4EAFF 106.77%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.card-feedback__quem{ display:flex; flex-direction:column; gap:0.375rem; margin-block:1.875rem 1.5rem; }
.card-feedback__nome{ font-size:clamp(1.25rem, 2vw, 1.5rem); font-weight:600; line-height:1; }
.estrelas{ display:flex; gap:0.375rem; }
.estrelas img{ width:1rem; height:1rem; }
.card-feedback p{ font-size:clamp(1.0625rem, 1.7vw, 1.25rem); line-height:1.45; }

/* =========================================================================
   SOBRE
   ========================================================================= */
.sobre__cabeca{
  display:grid; grid-template-columns:minmax(0,628fr) minmax(0,466fr);
  gap:clamp(1.75rem, 3.4vw, 3.375rem); align-items:center;
}
.sobre__cabeca .rotulo{ margin-bottom:2rem; }

.galeria{
  margin-top:clamp(3.25rem, 6.6vw, 6.75rem);
  overflow:hidden; overscroll-behavior-x:contain;
  scrollbar-width:none;
  mask-image:linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}
.galeria::-webkit-scrollbar{ display:none; }
.galeria__lista{ display:flex; flex:none; gap:1.71875rem; padding-right:1.71875rem; }
.galeria__lista li{
  flex:0 0 clamp(13.75rem, 28vw, 25.8125rem);
  border:1px solid var(--linha-clara);
  border-radius:1.0625rem;
  overflow:hidden;
  box-shadow:inset 0 0 12.47px rgba(91,106,178,.36);
}
.galeria__lista img{ width:100%; height:clamp(18.125rem, 36vw, 32.3125rem); object-fit:cover; }

/* =========================================================================
   CONTATO (seção clara)
   ========================================================================= */
.secao-branca{ background:#fff; color:var(--tinta); }
/* A faixa branca passa 54px do topo do painel da chamada: o vão de conteúdo
   até o painel continua sendo 155, e o branco segue por baixo dele. */
.secao-branca{ padding-top:0; padding-bottom:calc(var(--y-fim-contato) + var(--sobrepoe-cta)); }
/* O divisor sobe 6px e entra na seção escura de cima, para a aresta larga
   dele cair sobre o escuro em vez de sobre o branco — senão a linha de pixels
   do topo compõe com o branco de trás e vira um fio claro da largura da
   aresta. O trapézio é pintado no mesmo #020C1C do fundo, então a sobra não
   aparece.

   Precisa ser deslocamento VISUAL, não margem. Um margin-top negativo aqui
   colapsa para fora — o divisor é o primeiro filho em fluxo e a seção não tem
   padding nem borda em cima —, então ele sobe a seção inteira junto e o
   divisor continua encostado no topo do branco, sem resolver nada. Era esse o
   bug: medido, brancaTop e divisorTop davam o mesmo 166,422.

   O margin-bottom desconta os 6px para o vão até o conteúdo seguir exato. */
.secao-branca .divisor{
  position:relative; top:-0.375rem;
  margin-bottom:calc(var(--y-divisor) - 0.375rem);
}

.contato{
  display:grid; grid-template-columns:minmax(0,628fr) minmax(0,499fr);
  gap:0.8125rem; align-items:start;
  --pilha-topo:clamp(5rem, 13vh, 10.625rem);
  --pilha-degrau:1.125rem;
}
.contato__texto{ display:flex; flex-direction:column; gap:2rem; }
.contato__texto .lead{ color:var(--tinta); max-width:29.125rem; }
.contato__lista{ display:flex; flex-direction:column; gap:1.5rem; }
.contato__lista .card-icone{ min-height:clamp(10.625rem, 18vw, 16rem); }

/* As cartas grudam em alturas crescentes, então cada uma cobre a anterior e
   deixa só uma faixa dela à mostra. Elas têm fundo opaco, e a ordem do DOM já
   põe a seguinte por cima — não precisa de z-index. Só da coluna para cima:
   no celular a lista é a página inteira e empilhar não diria nada. */
@media (min-width:901px){
  /* o texto trava junto, senão a pilha sobe sozinha e quem lê perde o contexto */
  .contato__texto{ position:sticky; top:var(--pilha-topo); }
  .contato__lista .card-icone{
    position:sticky;
    top:calc(var(--pilha-topo) + var(--i) * var(--pilha-degrau));
  }
  .contato__lista .card-icone:nth-child(1){ --i:0; }
  .contato__lista .card-icone:nth-child(2){ --i:1; }
  .contato__lista .card-icone:nth-child(3){ --i:2; }
  .contato__lista .card-icone:nth-child(4){ --i:3; }
  .contato__lista .card-icone:nth-child(5){ --i:4; }
}

/* =========================================================================
   CHAMADA FINAL
   ========================================================================= */
.chamada{
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:calc(var(--sobrepoe-cta) * -1);
}
/* o fundo escuro começa onde o branco acaba, para o painel sobrepor */
.chamada::before{
  content:""; position:absolute; z-index:-2;
  inset:var(--sobrepoe-cta) 0 0;
  background:var(--bg);
}

/* A luz é irmã do painel e mede contra ele, não contra a página: elipse de
   499,8x607,2 girada 90°, com 395,2px de desfoque já no SVG junto dos 45%
   de opacidade. É ela que aparece por baixo do painel, que deixa passar 11%. */
.chamada__caixa{ position:relative; }
.chamada__luz{
  position:absolute; z-index:-1; pointer-events:none;
  left:49.97%; top:70.59%;
  width:91.37%;                  /* 1290,18 de 1412 */
  height:auto; max-width:none;
  translate:-50% -50%; rotate:-90deg;
  mix-blend-mode:plus-lighter;
}
/* Só este painel: a Bruna subiu o blur de fundo de 25 para 100 no arquivo,
   para ele se misturar mais com o que passa atrás. O de diferenciais segue 25. */
.chamada .painel{
  padding-bottom:clamp(3.25rem, 9.34vw, 14.9375rem);
  backdrop-filter:blur(50px);
  -webkit-backdrop-filter:blur(50px);
}
.chamada .painel > .divisor{ margin-bottom:clamp(2.75rem, 6.68vw, 10.6875rem); }
.chamada .painel__conteudo{ max-width:64.375rem; text-align:center; gap:1.5rem; }
.chamada .lead{ margin-inline:auto; }   /* no arquivo cabe numa linha */

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.rodape{
  padding-block:var(--y-rodape) var(--y-fim-pagina);
  background:rgba(4,17,38,.28);
  backdrop-filter:blur(50px);
  -webkit-backdrop-filter:blur(50px);
}
.rodape__grade{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap;
  font-size:0.9375rem; color:var(--texto-2);
}
.rodape__marca{ display:flex; align-items:center; gap:1.125rem; }
.rodape__marca img{ width:3.8125rem; height:auto; }
.rodape__autor{ position:relative; transition:color .2s var(--ease); }
/* o sublinhado cresce do zero no hover — sem mexer no layout */
.rodape__autor::before{
  content:""; position:absolute; left:0; right:0; bottom:-0.125rem;
  height:1px; background:currentColor;
  scale:0 1; transform-origin:left;
  transition:scale .25s var(--ease);
}
.rodape__autor:hover,.rodape__autor:focus-visible{ color:#fff; }
.rodape__autor:hover::before,.rodape__autor:focus-visible::before{ scale:1 1; }
.rodape__topo{ display:inline-flex; align-items:center; gap:0.5rem; transition:color .2s var(--ease); }
.rodape__topo img{ width:0.75rem; height:auto; }
.rodape__topo:hover{ color:#fff; }

/* =========================================================================
   REVELAÇÃO AO ROLAR
   ========================================================================= */
.revela{ opacity:0; translate:0 38px; transition:opacity .9s var(--ease), translate .9s var(--ease); }
.revela.visivel{ opacity:1; translate:none; }

/* Entrada em escada: o contêiner é observado, os filhos entram em fila. */
.escada > *{ opacity:0; translate:0 30px; transition:opacity .75s var(--ease), translate .75s var(--ease); }
.escada.visivel > *{ opacity:1; translate:none; }
.escada.visivel > :nth-child(1){ transition-delay:0ms;   }
.escada.visivel > :nth-child(2){ transition-delay:80ms;  }
.escada.visivel > :nth-child(3){ transition-delay:160ms; }
.escada.visivel > :nth-child(4){ transition-delay:240ms; }
.escada.visivel > :nth-child(5){ transition-delay:320ms; }
.escada.visivel > :nth-child(6){ transition-delay:400ms; }

/* ---------- cartas que acendem sob o mouse ----------
   Moram aqui, e não junto das cartas, porque precisam vir DEPOIS da escada:
   ela declara transition e transition-delay nos mesmos filhos, e sem isso o
   atraso do staggering escorreria para o hover — a terceira carta levantaria
   160ms atrasada. Os seletores com .escada.visivel existem só para ganhar
   dela na especificidade e zerar o atraso. */
.card-servico,
.painel .card-icone{
  transition:opacity .65s var(--ease), translate .4s var(--ease),
             border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.escada.visivel > .card-servico:hover,
.escada.visivel > .card-icone:hover,
.card-servico:hover,
.painel .card-icone:hover{ transition-delay:0s; }

.card-servico:hover{
  translate:0 -5px;
  border-color:rgba(0,130,255,.42);
  box-shadow:var(--dentro-azul), var(--luz-carta);
}
/* o brilho azul cresce mais que o branco: o canto puxa para o azul */
.card-servico__brilho--azul,
.card-servico__brilho--branco,
.card-servico__foto{ transition:scale .5s var(--ease); }
.card-servico:hover .card-servico__brilho--azul  { scale:1.2;   }
.card-servico:hover .card-servico__brilho--branco{ scale:1.1;   }
.card-servico:hover .card-servico__foto          { scale:1.045; }

/* nas cartas do painel não há brilho para crescer: quem responde é o ícone */
.painel .card-icone:hover{
  translate:0 -5px;
  border-color:rgba(0,130,255,.35);
  box-shadow:var(--dentro-card), var(--luz-carta);
}
.painel .card-icone .icone-caixa{ transition:scale .4s var(--ease), border-color .4s var(--ease); }
.painel .card-icone:hover .icone-caixa{ scale:1.07; border-color:rgba(0,130,255,.45); }

/* ---------- pistas em laço ----------
   Duas cópias idênticas lado a lado; andar 50% da pista devolve a primeira
   exatamente onde a segunda estava, então o laço não tem emenda. */
@keyframes correr{ from{ translate:0 } to{ translate:-50% 0 } }
.faixa__pista,
.pista{ display:flex; width:max-content; }
.faixa__pista{ animation:correr var(--t-faixa) linear infinite; }
.pista--feedbacks{ animation:correr var(--t-feedbacks) linear infinite; }
.pista--galeria{ animation:correr var(--t-galeria) linear infinite; }
.faixa:hover .faixa__pista,
.feedbacks__trilho:hover .pista,  .feedbacks__trilho:focus-within .pista,
.galeria:hover .pista,            .galeria:focus-within .pista{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  .revela,.escada > *{ opacity:1; translate:none; transition:none; }
  .contato__texto,.contato__lista .card-icone{ position:static; }
  .card-servico:hover,.painel .card-icone:hover{ translate:none; }
  .card-servico:hover .card-servico__brilho--azul,
  .card-servico:hover .card-servico__brilho--branco,
  .card-servico:hover .card-servico__foto,
  .painel .card-icone:hover .icone-caixa{ scale:none; }
  .faixa__pista,.pista{ animation:none; width:auto; }
  .faixa__pista > [aria-hidden],.pista > [aria-hidden]{ display:none; }
  .faixa__pista{ justify-content:center; }
  .feedbacks__trilho,.galeria{ overflow-x:auto; }
}

/* Alvo de toque de 44px nos links de texto pequenos. Cresce a área clicável
   por pseudo-elemento, então nada no layout se mexe. */
@media (pointer:coarse), (max-width:48rem){
  .card-icone p a,
  .rodape__autor,
  .rodape__topo{ position:relative; }
  .card-icone p a::after,
  .rodape__autor::after,
  .rodape__topo::after{
    content:""; position:absolute;
    left:-0.5rem; right:-0.5rem;
    top:50%; translate:0 -50%;
    height:2.75rem;              /* 44px cravados, independente do corpo do texto */
  }
}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
/* O arquivo fixa a altura destas duas fileiras: 287 e 347. Em "Equipe com
   vasta experiência" o conteúdo mede mais que o respiro de 50px e transborda
   para dentro dele — é assim no Figma também, centralizado. */
@media (min-width:1101px){
  .cards-icone--tres .card-icone{ height:17.9375rem; }
  .cards-icone--dois .card-icone{ height:21.6875rem; }
}

@media (max-width:1100px){
  .faixa__lista{ --vao-faixa:clamp(1.25rem, 4.2vw, 3.75rem); }
  .bento{ grid-template-columns:1fr 1fr; }
  .bento__coluna{ grid-column:1 / -1; }
  .card-servico--alta{ grid-column:1 / -1; min-height:26.25rem; }
  .card-servico--alta .card-servico__foto{ width:min(33.75rem, 62%); bottom:-10%; left:auto; right:4%; translate:0 0; }
  .cards-icone--tres{ grid-template-columns:repeat(2,1fr); }
  .cards-icone--tres > :last-child{ grid-column:1 / -1; }
}

@media (max-width:900px){
  :root{
    --y-servicos:4.5rem; --y-diferenciais:5rem; --y-preventiva:2.5rem;
    --y-dif-base:2.5rem; --y-feedbacks:4.5rem; --y-sobre:5rem; --y-ate-contato:4.5rem;
    --y-divisor:3.5rem; --y-fim-contato:4rem; --y-ate-rodape:3.5rem;
    --y-rodape:3rem; --y-fim-pagina:3rem;
  }

  .hero{ min-height:0; }
  .hero__conteudo{ padding-block:7rem 4.5rem; }
  .hero__bloco{ max-width:none; }
  /* no celular o véu do arquivo (da direita para a esquerda) não serve:
     a coluna de texto ocupa a tela toda. Escurece de baixo para cima. */
  .hero__veu{
    background:
      linear-gradient(to top, rgba(1,6,15,.97) 14%, rgba(1,6,15,.9) 52%, rgba(1,6,15,.8) 100%),
      rgba(1,6,15,.3);
  }
  .hero__foto,.hero__video{ object-position:60% 50%; }

  /* empilhada, os "//" viram ruído */
  .faixa__lista{ --vao-faixa:1.375rem; }

  .bento,.bento__par,.bento__quatro,.cards-icone--tres,.cards-icone--dois{ grid-template-columns:1fr; }
  .card-servico,.card-servico--larga,.card-servico--alta{ min-height:0; }
  .card-servico--larga .card-servico__texto{ max-width:none; }

  /* As duas cartas com foto têm desenho próprio de celular no arquivo:
     Frame 1321314572 (reforma) e Frame 1321314573 (venda), as duas de
     394x470. O texto sobe para o topo e a foto desce, grande, cortada pela
     borda de baixo da carta. Tudo aqui é proporção dessa carta de 394 —
     % de padding e de `left` caem sobre a largura, e a sangria de baixo usa
     `translate`, que mede a própria foto. Acima de uma carta de ~550 os
     `min()`/`max()` travam tudo em 1,4x o arquivo: dali para cima já é
     tablet, que o Figma não tem, e sem teto a foto viraria um pôster.

     carta       respiro     foto
     reforma     57/50/243   469x383 em x=-38, y=202
     venda       57/31/269   308x378 em x=43,  y=201 (centrada) */
  .card-servico--larga{
    padding:min(14.467%, 5rem) min(12.6904%, 4.375rem) min(61.6751%, 21.25rem);
  }
  .card-servico--alta{
    padding:min(14.467%, 5rem) min(7.868%, 2.6875rem) min(68.2741%, 23.5rem);
  }
  .card-servico--larga .card-servico__foto,
  .card-servico--alta .card-servico__foto{
    inset:auto auto 0 auto; top:auto; height:auto;
  }
  /* sangra 38px pela esquerda e 115px por baixo */
  .card-servico--larga .card-servico__foto{
    left:max(-9.6447%, -3.3125rem);
    width:min(119.0355%, 41rem);
    aspect-ratio:469 / 383;
    translate:0 30.0261%;
  }
  /* centrada, sangrando 109px por baixo */
  .card-servico--alta .card-servico__foto{
    left:50%;
    width:min(78.1726%, 27rem);
    aspect-ratio:308 / 378;
    translate:-50% 28.836%;
  }

  .preventiva{ grid-template-columns:1fr; }
  .sobre__cabeca{ grid-template-columns:1fr; }
  .sobre__cabeca .rotulo{ margin-bottom:1.25rem; }
  .contato{ grid-template-columns:1fr; }
  .aplicacoes{ grid-template-columns:1fr; }

}

@media (max-width:600px){
  :root{ --gutter:1.125rem; }
  .botao{ width:100%; padding-inline:1.5rem; justify-content:space-between; }
  .galeria__lista li{ flex-basis:76vw; }
  .rodape__grade{ flex-direction:column; align-items:flex-start; gap:1rem; }
}