/* ==========================================================================
   IC Para Raios — LP Cabine primária e secundária
   Tokens do Manual da Marca IC v1.0. Zero dependência além das fontes.
   Seções numeradas na mesma ordem do app.js.
   ========================================================================== */

: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,.70);
  --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);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
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{font:inherit;color:inherit;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}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
h2.titulo{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(30px,5vw,68px);
  line-height:1.0;
  letter-spacing:-.032em;
  text-transform:uppercase;
}
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.55vw,20px);color:var(--texto-inv);max-width:62ch}
.claro .lead{color:#4A5162}

/* ---------- seções ---------- */
.sec{position:relative;padding:clamp(72px,10vw,150px) 0}
.sec.claro{background:var(--papel);color:var(--texto)}
.sec.claro .rotulo{color:var(--cobre)}
.sec.claro .rotulo::before{background:var(--cobre)}
.cabecalho-sec{max-width:74ch;margin-bottom:clamp(34px,5vw,64px)}
.cabecalho-sec .titulo{margin:18px 0 20px}

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

/* ==========================================================================
   1. Boot
   O preloader saiu em 06/09/2026 (ver módulo 1 do app.js). Quem revelava o
   hero era ele, então o fallback abaixo cobre o caso de o JS não rodar: sem
   ele, `#hero .wrap` ficaria em opacity 0 e a página abriria vazia.
   ========================================================================== */
html:not(.js) #hero .wrap{opacity:1;transform:none}

/* ==========================================================================
   2. Grão de filme
   ========================================================================== */
#grao{
  position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grao 8s steps(6) infinite;
}
@keyframes grao{
  0%{transform:translate(0,0)}     16%{transform:translate(-3%,-2%)}
  33%{transform:translate(2%,-4%)} 50%{transform:translate(-2%,3%)}
  66%{transform:translate(3%,2%)}  83%{transform:translate(-4%,-1%)}
}

/* ==========================================================================
   3. Header
   ========================================================================== */
#topo{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px var(--gut);
  border-bottom:1px solid transparent;
  transition:transform .5s var(--ease),background .4s var(--ease),padding .4s var(--ease),border-color .4s;
}
#topo.preso{background:rgba(10,22,40,.92);backdrop-filter:blur(12px);border-bottom-color:var(--filete-inv);padding-top:11px;padding-bottom:11px}
#topo.escondido{transform:translateY(-102%)}
.marca{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;text-transform:uppercase;display:flex;align-items:center;gap:9px}
.marca .raio{width:15px;height:19px;fill:var(--amarelo);flex:none}
.marca em{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
#nav{display:flex;gap:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}
#nav a{color:var(--texto-inv);transition:color .25s}
#nav a:hover{color:var(--amarelo)}
#topo .acoes{display:flex;align-items:center;gap:14px}
#topo .tel{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;white-space:nowrap}
#topo .btn{padding:11px 20px}
#hamb{display:none;width:40px;height:34px;position:relative;z-index:130}
#hamb i{position:absolute;left:8px;right:8px;height:1.5px;background:var(--papel);transition:transform .4s var(--ease),opacity .3s}
#hamb i:nth-child(1){top:12px}
#hamb i:nth-child(2){bottom:12px}
body.menu-on #hamb i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-on #hamb i:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

/* ==========================================================================
   4. Menu fullscreen
   ========================================================================== */
#menu{
  position:fixed;inset:0;z-index:119;background:var(--azul-2);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--gut);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  pointer-events:none;
}
body.menu-on #menu{clip-path:inset(0 0 0 0);pointer-events:auto}
#menu a{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,7vw,74px);line-height:1.06;letter-spacing:-.035em;
  color:var(--papel);opacity:0;transform:translateY(28px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
}
body.menu-on #menu a{opacity:1;transform:none}
#menu a:nth-child(1){transition-delay:.16s} #menu a:nth-child(2){transition-delay:.22s}
#menu a:nth-child(3){transition-delay:.28s} #menu a:nth-child(4){transition-delay:.34s}
#menu a:nth-child(5){transition-delay:.40s} #menu a:nth-child(6){transition-delay:.46s}
#menu a:hover{color:var(--amarelo)}
#menu .rodape-menu{margin-top:38px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);opacity:0;transition:opacity .6s .52s}
body.menu-on #menu .rodape-menu{opacity:1}

/* ==========================================================================
   5. FORMA — a imagem se monta em colunas conforme o scroll avança

   O JS escreve UMA propriedade por figura por quadro: --p (progresso na tela).
   Cada coluna calcula sozinha, aqui em CSS, quanto de si já apareceu.
   initial-value 1 garante que, se o JS morrer, a figura aparece inteira.
   ========================================================================== */
@property --p{syntax:"<number>";inherits:true;initial-value:1}

/* fundo transparente de propósito: com um cinza aqui, a parte ainda não
   formada vira um bloco serrilhado, gritante nas seções de fundo claro */
.forma{position:relative;overflow:hidden;background:transparent}
.forma>img{width:100%;height:100%;object-fit:cover;display:block}
.forma.pronto>img{visibility:hidden}
.forma .col{
  position:absolute;top:0;height:100%;
  background-image:var(--src);           /* --src é escrito uma vez na figura */
  background-repeat:no-repeat;
  backface-visibility:hidden;
  /* --r = quanto desta coluna já se formou, de 0 a 1 */
  --r:clamp(0, (var(--p) - var(--o)) / var(--sp), 1);
  clip-path:inset(calc((1 - var(--r)) * 100%) 0 0 0);
  opacity:clamp(.2, calc(var(--r) * 5), 1);
}
.forma.completo .col{clip-path:none;opacity:1}
/* o hero já nasce na tela: forma uma vez no tempo, quando o preloader sai.
   100% CSS, sem depender do rAF (que não roda em aba de fundo). */
.forma[data-modo="entrada"]{--p:0;transition:--p 1.9s var(--ease) .15s}
.carregado .forma[data-modo="entrada"]{--p:1}
.forma::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,22,40,.16) 0%,transparent 34%,transparent 58%,rgba(10,22,40,.55) 100%);
}
.forma.limpo::after{display:none}

/* ==========================================================================
   6. Reveal / split de palavras
   ========================================================================== */
.linha-mask{display:block;overflow:hidden}
.linha-mask>span{display:block;transform:translateY(102%);transition:transform .95s var(--ease)}
.vis .linha-mask>span{transform:none}
.vis .linha-mask:nth-child(2)>span{transition-delay:.09s}
.vis .linha-mask:nth-child(3)>span{transition-delay:.18s}
.vis .linha-mask:nth-child(4)>span{transition-delay:.27s}

[data-split] .p{display:inline-block;overflow:hidden;vertical-align:bottom}
[data-split] .p>span{display:inline-block;transform:translateY(104%);transition:transform .85s var(--ease)}
.vis [data-split] .p>span,[data-split].vis .p>span{transform:none}

.sobe{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.vis .sobe,.sobe.vis{opacity:1;transform:none}
.vis .sobe:nth-child(2){transition-delay:.07s}
.vis .sobe:nth-child(3){transition-delay:.14s}
.vis .sobe:nth-child(4){transition-delay:.21s}
.vis .sobe:nth-child(5){transition-delay:.28s}

/* ==========================================================================
   7. Hero
   ========================================================================== */
#hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:clamp(28px,5vw,64px)}
#hero .fundo{position:absolute;inset:-6% 0 -6% 0;z-index:0}
#hero .fundo .forma{width:100%;height:100%}
/* o véu precisa segurar o contraste do H1 sem apagar o equipamento da foto:
   escuro no topo (atrás do header), aberto no meio, fechando de novo no rodapé */
#hero .veu{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(10,22,40,.78) 0%,rgba(10,22,40,.30) 30%,rgba(10,22,40,.58) 64%,rgba(10,22,40,.94) 100%);}
#hero .wrap{position:relative;z-index:2;width:100%;opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease) .2s,transform 1s var(--ease) .2s}
#hero .wrap.vis,.carregado #hero .wrap{opacity:1;transform:none}
/* -.035em fechava demais em caixa alta ("DAENTRADAEM"); .012em de word-spacing
   devolve o respiro entre palavras sem soltar as letras */
#hero h1{font-size:clamp(38px,7.4vw,104px);margin:20px 0 26px;max-width:16em;letter-spacing:-.028em;word-spacing:.02em;text-shadow:0 2px 30px rgba(10,22,40,.5)}
#hero h1 b{color:var(--amarelo);font-weight:800}
#hero .sub{max-width:60ch;font-size:clamp(15px,1.5vw,19px);color:rgba(246,244,238,.82)}
#hero .botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
#hero .rodape-hero{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3.4vw,54px);
  margin-top:clamp(34px,5vw,64px);padding-top:22px;border-top:1px solid var(--filete-inv);
}
#hero .rodape-hero .item{min-width:0}
#hero .rodape-hero .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
#hero .rodape-hero .v{font-size:13.5px;color:var(--papel);line-height:1.4}

/* ==========================================================================
   8. Marquee
   ========================================================================== */
.marquee{
  display:flex;overflow:hidden;user-select:none;
  border-top:1px solid var(--filete-inv);border-bottom:1px solid var(--filete-inv);
  padding:16px 0;background:var(--azul-2);
}
.marquee .faixa{display:flex;flex:none;align-items:center;will-change:transform}
.marquee span{
  font-family:var(--display);font-weight:800;font-size:clamp(18px,2.7vw,38px);
  text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;padding:0 .4em;line-height:1.3;
}
.marquee span.vazado{-webkit-text-stroke:1px var(--amarelo);color:transparent}
.marquee .ponto{color:var(--amarelo);font-size:.5em;vertical-align:middle}

/* ==========================================================================
   9. Risco — o que está em jogo
   ========================================================================== */
.riscos{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--filete-inv)}
.risco{padding:clamp(24px,3.4vw,38px) 0;border-bottom:1px solid var(--filete-inv);display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:820px){.risco{grid-template-columns:56px minmax(0,300px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}}
.risco .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amarelo);padding-top:5px}
.risco h3{font-size:clamp(18px,2vw,25px)}
.risco p{color:var(--texto-inv);font-size:15px;max-width:64ch}

/* ==========================================================================
   9b. Três frentes: montagem, preventiva, corretiva
   ========================================================================== */
.frentes{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,32px);margin-top:clamp(30px,4vw,52px)}
@media(min-width:760px){.frentes{grid-template-columns:1fr 1fr}}
@media(min-width:1120px){.frentes{grid-template-columns:repeat(3,1fr)}}
.frente{
  border:1px solid var(--filete-inv);background:var(--azul-2);
  display:flex;flex-direction:column;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.frente:hover{border-color:var(--amarelo);transform:translateY(-3px)}
.frente .foto{position:relative;overflow:hidden;background:var(--azul-3);aspect-ratio:4/3}
.frente .foto>img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.frente:hover .foto>img{transform:scale(1.04)}
.frente .foto .selo{
  position:absolute;left:0;top:0;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  background:var(--amarelo);color:var(--azul);padding:6px 11px;font-weight:500;
}
.frente>.tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amarelo);padding:20px clamp(18px,2vw,26px) 0;
}
.frente h3{font-size:clamp(21px,2.2vw,27px);padding:10px clamp(18px,2vw,26px) 0}
.frente>p{font-size:14.5px;color:var(--texto-inv);padding:12px clamp(18px,2vw,26px) 0}
.frente ul{list-style:none;padding:18px clamp(18px,2vw,26px) 0;margin-top:16px;border-top:1px solid var(--filete-inv)}
.frente li{
  font-size:13.5px;color:var(--texto-inv);padding:7px 0 7px 20px;position:relative;
  border-bottom:1px solid rgba(246,244,238,.07);
}
.frente li:last-child{border-bottom:0}
.frente li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:1px;background:var(--amarelo)}
.frente .quando{
  margin-top:auto;padding:16px clamp(18px,2vw,26px) clamp(20px,2.2vw,26px);
  font-size:13px;color:var(--texto-inv);
}
.frente .quando .k{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cobre);margin-bottom:5px;
}

/* ==========================================================================
   12b. Prova de ensaio: par de fotos abaixo do escopo
   ========================================================================== */
.provas{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,28px);margin-top:clamp(26px,3.4vw,44px)}
@media(min-width:820px){.provas{grid-template-columns:1fr 1fr}}
.prova{border:1px solid var(--filete);background:#fff}
/* height:auto é obrigatório: o atributo height="900" do HTML fixa a altura e o
   aspect-ratio passa a ser ignorado, o que estica a figura para 900 px */
.prova>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.prova figcaption{padding:clamp(16px,1.8vw,22px)}
.prova .tag{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cobre);margin-bottom:8px;
}
.prova p{font-size:14px;color:#4A5162}
/* variante para seção escura */
.prova-fp{margin-top:clamp(16px,2vw,22px);background:var(--azul-2);border-color:var(--filete-inv)}
.prova-fp>img{aspect-ratio:16/10}
.prova-fp .tag{color:var(--amarelo)}
.prova-fp p{color:var(--texto-inv)}

/* ==========================================================================
   10. A cadeia: cabine primária -> transformador -> cabine secundária
   ========================================================================== */
.cadeia{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,26px);margin-top:clamp(28px,4vw,48px)}
@media(min-width:900px){.cadeia{grid-template-columns:1fr 1fr}}
.elo{
  border:1px solid var(--filete);padding:clamp(24px,3vw,38px);
  background:#fff;position:relative;overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.elo:hover{border-color:var(--cobre);transform:translateY(-3px)}
.elo .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cobre)}
.elo h3{font-size:clamp(21px,2.4vw,30px);margin:12px 0 8px}
.elo .tensao{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.06em;margin-bottom:16px}
.elo p{color:#4A5162;font-size:15px}
.elo ul{list-style:none;margin-top:18px;border-top:1px solid var(--filete);padding-top:16px}
.elo li{font-size:14px;color:#4A5162;padding:8px 0 8px 20px;position:relative;border-bottom:1px solid rgba(26,31,46,.07)}
.elo li:last-child{border-bottom:0}
.elo li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:1px;background:var(--cobre)}

/* diagrama de linha única */
.diagrama{margin-top:clamp(34px,5vw,60px);border:1px solid var(--filete);background:#fff;padding:clamp(20px,3vw,34px);overflow-x:auto}
.diagrama svg{display:block;width:100%;min-width:660px;height:auto}
.diagrama .legenda{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px}

/* ==========================================================================
   11. Galeria horizontal presa na tela
   ========================================================================== */
.pista{position:relative;background:var(--azul)}
.cola{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
/* faixas laterais: os cards entram e saem por fade em vez de serem cortados */
.cola::before,.cola::after{content:"";position:absolute;top:0;bottom:0;width:clamp(34px,6vw,110px);z-index:3;pointer-events:none}
.cola::before{left:0;background:linear-gradient(90deg,var(--azul) 14%,transparent)}
.cola::after{right:0;background:linear-gradient(270deg,var(--azul) 14%,transparent)}
/* z-index acima das faixas de fade laterais (que são z-index 3): sem isso o
   gradiente da esquerda passa por cima da primeira letra do título */
.cola .cabeca{padding:0 var(--gut);flex:none;margin-bottom:clamp(18px,2.6vw,34px);position:relative;z-index:4}
.cola .cabeca .titulo{margin-top:14px;font-size:clamp(26px,3.6vw,48px)}
.trilho{display:flex;gap:clamp(12px,1.8vw,24px);padding:0 var(--gut);align-items:flex-start;will-change:transform}

/* --k = quanto o card está perto do centro (0 na borda, 1 no meio).
   O JS escreve só esse número; escala, brilho e sombra saem daqui.
   Começa em 1 para que, sem JS, os cards apareçam normais. */
/* Três cards, não cinco: as oito fotos da vistoria mostram quatro equipamentos,
   e cada um aparece uma vez só na página. Com menos cards eles ficam maiores,
   senão o trilho não estoura a tela e o pino fica sem curso. */
.ponto-insp{
  flex:none;width:min(82vw,620px);--k:1;
  transform:scale(calc(.80 + var(--k) * .22)) translateY(calc((1 - var(--k)) * 26px));
  transform-origin:center 42%;
  opacity:calc(.38 + var(--k) * .62);
}
.ponto-insp .foto{
  position:relative;overflow:hidden;background:var(--azul-3);
  height:min(56svh,470px);
  filter:saturate(calc(.42 + var(--k) * .58)) brightness(calc(.58 + var(--k) * .42));
  box-shadow:0 calc(var(--k) * 30px) calc(var(--k) * 64px) rgba(0,0,0,calc(var(--k) * .6));
}
.ponto-insp .foto>img{width:100%;height:100%;object-fit:cover;display:block}
.ponto-insp .foto .selo{
  position:absolute;left:0;top:0;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--amarelo);color:var(--azul);padding:6px 11px;font-weight:500;
}
.ponto-insp .cap{padding-top:15px}
.ponto-insp .cap .tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--amarelo)}
.ponto-insp .cap h3{font-size:18px;margin:8px 0 7px}
.ponto-insp .cap p{font-size:13.5px;color:var(--texto-inv);line-height:1.6}
.barra-trilho{height:1px;background:var(--filete-inv);margin:clamp(16px,2.4vw,30px) var(--gut) 0;position:relative;flex:none}
.barra-trilho i{position:absolute;left:0;top:-1px;height:3px;background:var(--amarelo);width:22%;transform-origin:left}
.dica-arrasta{margin:14px var(--gut) 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:none}
.dica-swipe{display:none}

/* Sem pino no celular: prender o scroll vertical em tela pequena irrita mais
   do que impressiona. Vira arraste horizontal nativo, com snap. */
@media(max-width:860px),(prefers-reduced-motion:reduce){
  .pista{height:auto !important}
  .cola{position:static;height:auto;display:block;padding:clamp(28px,6vw,48px) 0}
  .cola .cabeca{margin-bottom:24px}
  .trilho{
    overflow-x:auto;scroll-snap-type:x mandatory;transform:none !important;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:6px;
  }
  .trilho::-webkit-scrollbar{display:none}
  .ponto-insp{scroll-snap-align:center}
  .ponto-insp .foto{height:min(74vw,420px)}
  .dica-pino{display:none}
  .dica-swipe{display:inline}
}

/* ==========================================================================
   12. Escopo dos ensaios
   ========================================================================== */
.ensaios{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--filete)}
.ensaio{
  padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--filete);
  display:grid;grid-template-columns:1fr;gap:8px;
}
@media(min-width:860px){.ensaio{grid-template-columns:46px minmax(0,270px) minmax(0,1fr) 150px;gap:clamp(16px,2.6vw,40px);align-items:baseline}}
.ensaio .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--cobre)}
.ensaio h3{font-size:clamp(17px,1.8vw,21px)}
.ensaio p{font-size:14.5px;color:#4A5162;max-width:62ch}
.ensaio .instr{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.6}

/* ==========================================================================
   13. Fator de potência
   ========================================================================== */
.fp{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:960px){.fp{grid-template-columns:minmax(0,1fr) minmax(0,440px)}}
.fp .medidor{border:1px solid var(--filete-inv);padding:clamp(22px,3vw,34px);background:var(--azul-2)}
.fp .medidor .escala{position:relative;height:8px;background:rgba(246,244,238,.1);margin:26px 0 12px;border-radius:1px}
.fp .medidor .escala i{position:absolute;top:0;bottom:0;left:0;width:92%;background:linear-gradient(90deg,#B4402F 0%,#C9922B 58%,#3E8F5C 78%,#3E8F5C 100%)}
.fp .medidor .marca-92{position:absolute;left:92%;top:-9px;bottom:-9px;width:2px;background:var(--amarelo)}
.fp .medidor .rot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.fp .medidor .aviso{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amarelo);margin-top:20px;padding-top:16px;border-top:1px solid var(--filete-inv)}
.fp .medidor h3{font-size:clamp(19px,2.2vw,25px);margin-bottom:8px}
.fp .medidor .num{font-family:var(--mono);font-size:clamp(38px,6vw,64px);line-height:1;color:var(--amarelo);letter-spacing:-.03em}

/* ==========================================================================
   14. Números
   ========================================================================== */
.numeros{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filete-inv);border:1px solid var(--filete-inv)}
@media(min-width:820px){.numeros{grid-template-columns:repeat(4,1fr)}}
.numeros .cel{background:var(--azul);padding:clamp(22px,3vw,36px)}
.numeros .n{font-family:var(--display);font-weight:800;font-size:clamp(36px,5.4vw,68px);line-height:1;letter-spacing:-.045em;color:var(--amarelo);font-variant-numeric:tabular-nums}
.numeros .n small{font-size:.42em;letter-spacing:0;margin-left:3px}
.numeros .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px;line-height:1.6}

/* ==========================================================================
   15. Clientes
   ========================================================================== */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filete-inv);border:1px solid var(--filete-inv);margin-top:clamp(26px,4vw,44px)}
@media(min-width:600px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.logos{grid-template-columns:repeat(7,1fr)}}
.logos .cel{background:var(--azul);display:flex;align-items:center;justify-content:center;padding:22px 16px;min-height:96px}
.logos img{max-height:40px;width:auto;opacity:.62;filter:grayscale(1) brightness(1.7);transition:opacity .35s,filter .35s}
.logos .cel:hover img{opacity:1;filter:grayscale(0) brightness(1)}

/* ==========================================================================
   16. Processo
   ========================================================================== */
.passos{border-top:1px solid var(--filete)}
.passo{padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--filete);display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:900px){.passo{grid-template-columns:90px minmax(0,300px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}}
.passo .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--cobre);padding-top:4px}
.passo h3{font-size:clamp(18px,2vw,24px)}
.passo p{font-size:15px;color:#4A5162;max-width:64ch}

/* ==========================================================================
   17. FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--filete);margin-top:clamp(24px,3vw,40px)}
.faq details{border-bottom:1px solid var(--filete)}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(20px,2.6vw,26px) 44px clamp(20px,2.6vw,26px) 0;
  position:relative;font-family:var(--display);font-weight:700;
  font-size:clamp(16px,1.8vw,21px);line-height:1.35;letter-spacing:-.012em;
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cobre)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:1.5px solid var(--cobre);border-bottom:1.5px solid var(--cobre);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .resp{padding:0 clamp(30px,6vw,90px) clamp(22px,2.8vw,30px) 0;font-size:15px;color:#4A5162;max-width:76ch}
.faq .resp p+p{margin-top:12px}

/* ==========================================================================
   18. CTA + formulário
   ========================================================================== */
#orcamento{position:relative;overflow:hidden;background:var(--azul-2)}
#orcamento .fundo{position:absolute;inset:0;z-index:0;opacity:.13}
#orcamento .fundo .forma{width:100%;height:100%}
#orcamento .wrap{position:relative;z-index:2}
.cta-grade{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,72px)}
@media(min-width:980px){.cta-grade{grid-template-columns:minmax(0,1fr) minmax(0,520px)}}
.form{border:1px solid var(--filete-inv);background:rgba(10,22,40,.72);backdrop-filter:blur(6px);padding:clamp(24px,3.4vw,40px);position:relative}
.campo{margin-bottom:16px}
.campo label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.campo input,.campo select,.campo textarea{
  width:100%;background:rgba(246,244,238,.05);border:1px solid var(--filete-inv);
  color:var(--papel);font-family:var(--sans);font-size:15px;padding:13px 14px;border-radius:2px;
  transition:border-color .25s,background .25s;
}
.campo textarea{min-height:96px;resize:vertical}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8494' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.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(246,244,238,.08)}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(122,132,148,.75)}
.dupla{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:520px){.dupla{grid-template-columns:1fr 1fr}}
.form .btn{width:100%;padding:17px 24px;margin-top:6px}
.form .nota{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin-top:14px;line-height:1.7}
/* honeypot e mensagem de estado servem aos DOIS formulários (rodapé e popup),
   então não podem ficar presos a .form — no popup o campo-isca apareceria */
.mel{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.estado{margin-top:14px;font-size:14px;display:none}
.estado.on{display:block}
.estado.ok{color:#6FCF97}
.estado.erro{color:#E88B7D}
.contato-lista{list-style:none;margin-top:clamp(26px,3.4vw,40px);border-top:1px solid var(--filete-inv)}
.contato-lista li{padding:16px 0;border-bottom:1px solid var(--filete-inv);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.contato-lista .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contato-lista .v{font-size:15px;text-align:right}
.contato-lista a:hover{color:var(--amarelo)}

/* ==========================================================================
   19. Rodapé
   ========================================================================== */
#rodape{background:var(--azul);padding:clamp(48px,6vw,80px) 0 30px;border-top:1px solid var(--filete-inv)}
.rodape-grade{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
@media(min-width:800px){.rodape-grade{grid-template-columns:1.5fr 1fr 1fr}}
#rodape h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:500}
#rodape ul{list-style:none}
#rodape li{padding:5px 0;font-size:14.5px;color:var(--texto-inv)}
#rodape a:hover{color:var(--amarelo)}
#rodape .sobre p{font-size:14.5px;color:var(--texto-inv);max-width:44ch;margin-top:14px}
.rodape-fim{margin-top:clamp(34px,4vw,54px);padding-top:22px;border-top:1px solid var(--filete-inv);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}

/* ==========================================================================
   20. Badge de WhatsApp
   ========================================================================== */
#badge{
  position:fixed;right:20px;bottom:20px;z-index:140;width:88px;height:88px;
  border-radius:50%;background:var(--amarelo);color:var(--azul);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.7);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .3s;
  box-shadow:0 10px 30px rgba(0,0,0,.34);
}
#badge.on{opacity:1;transform:none;pointer-events:auto}
#badge:hover{box-shadow:0 14px 40px rgba(245,183,0,.42)}
#badge svg.anel{position:absolute;inset:0;width:100%;height:100%;animation:gira 14s linear infinite}
#badge svg text{font-family:var(--mono);font-size:7.4px;letter-spacing:.22em;fill:var(--azul);text-transform:uppercase}
#badge .zap{width:32%;height:32%;fill:currentColor;position:relative}
@keyframes gira{to{transform:rotate(360deg)}}

/* ==========================================================================
   21. Convite — popup por tempo em tela

   z-index 170: acima do grão (150) e do badge (140)
   customizado (180), senão o ponteiro some por cima do próprio modal.
   ========================================================================== */
/* sem JS o popup nunca aparece: [hidden] tem de vencer o display:flex do #id,
   e a UA sozinha não vence, porque #convite tem especificidade maior */
#convite[hidden]{display:none}
#convite{
  position:fixed;inset:0;z-index:170;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,32px);
  background:rgba(6,14,26,.72);backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
}
#convite.on{opacity:1;visibility:visible}
#convite .caixa{
  position:relative;width:100%;max-width:492px;
  max-height:calc(100svh - 28px);overflow-y:auto;
  background:var(--azul-2);border:1px solid var(--filete-inv);
  padding:clamp(24px,3.4vw,38px);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  transform:translateY(20px) scale(.985);
  transition:transform .45s var(--ease);
}
#convite.on .caixa{transform:none}
#convite h2{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,2.6vw,29px);line-height:1.06;letter-spacing:-.03em;
  margin:14px 0 12px;max-width:15em;
}
#convite .lead{font-size:14.5px;margin-bottom:22px;max-width:none}
#convite .fechar{
  position:absolute;top:10px;right:10px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);border:1px solid transparent;border-radius:2px;
  transition:color .25s,border-color .25s;
}
#convite .fechar:hover{color:var(--amarelo);border-color:var(--filete-inv)}
#convite .fechar svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
#convite .campo{margin-bottom:13px}
#convite .btn{width:100%;padding:16px 22px;margin-top:4px}
#convite .rodape-convite{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--filete-inv);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
#convite .rodape-convite a{color:var(--amarelo)}
#convite .rodape-convite a:hover{text-decoration:underline}
#convite .rodape-convite button{color:var(--muted);letter-spacing:.1em}
#convite .rodape-convite button:hover{color:var(--papel)}
body.convite-on{overflow:hidden}

@media(max-width:520px){
  /* no celular vira folha de baixo: alcance do polegar e menos cara de anúncio */
  #convite{align-items:flex-end;padding:0}
  #convite .caixa{max-width:none;border-left:0;border-right:0;border-bottom:0;max-height:92svh}
  #convite.on .caixa{transform:none}
  #convite .caixa{transform:translateY(28px)}
}

/* ==========================================================================
   22. Acessibilidade / motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .linha-mask>span,.sobe,[data-split] .p>span{transform:none !important;opacity:1 !important}
  #grao{display:none}
  #hero .wrap{opacity:1;transform:none}
  .forma.pronto>img{visibility:visible}
  .forma .col{display:none}
}

/* ==========================================================================
   23. Responsivo
   ========================================================================== */
@media(max-width:900px){
  #nav{display:none}
  #hamb{display:block}
  #topo .tel,#topo .btn{display:none}
}
@media(max-width:520px){
  #hero .rodape-hero{gap:16px}
  #hero .rodape-hero .item{flex:1 1 42%}
  /* menor no celular: em 88px o badge cobria texto de verdade */
  #badge{width:68px;height:68px;right:13px;bottom:13px}
  #badge svg text{font-size:6.2px;letter-spacing:.19em}
  .contato-lista li{flex-direction:column;gap:5px}
  .contato-lista .v{text-align:left}
}