/* ==========================================================================
   BREDA Transformadores — cinematic
   Preto industrial + um único acento amarelo (#FFD400, cor real do badge).
   Display condensado industrial / corpo em serifa editorial.
   ========================================================================== */

:root{
  --ink:      #050505;
  --ink-2:    #0b0b0d;
  --ink-3:    #131316;
  --steel:    #24262a;
  --steel-2:  #34373d;
  --smoke:    #8c9197;
  --smoke-2:  #b6babe;
  --chalk:    #f4f4f2;
  --volt:     #ffd400;

  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --serif:   "Newsreader", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --gut: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1560px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.62,.05,.16,1);
}

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

html{
  background:var(--ink);
  -webkit-text-size-adjust:100%;
}
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--serif);
  font-weight:200;
  font-size:clamp(1rem,.92rem + .38vw,1.19rem);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--volt); color:#000; }

:focus-visible{
  outline:2px solid var(--volt);
  outline-offset:3px;
}

.skip{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  background:var(--volt); color:#000; padding:.7rem 1.1rem;
  font-family:var(--mono); font-size:.8rem; text-transform:uppercase;
  transition:top .2s;
}
.skip:focus{ top:1rem; }
.sr{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* --------------------------------------------------------------- tipografia */
.h2{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2.6rem,1.4rem + 6vw,7.5rem);
  line-height:.88;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0;
}
.h2 em{ font-style:normal; color:var(--volt); }

.lede{
  max-width:46ch;
  color:var(--smoke-2);
  font-size:clamp(1.05rem,.98rem + .4vw,1.3rem);
  margin:1.6rem 0 0;
}

.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-weight:500;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--smoke);
  margin:0 0 1.7rem;
}
.eyebrow__tick{
  width:26px; height:1px; background:var(--volt); flex:none;
}

/* linhas com máscara cinematográfica */
.line{ display:block; overflow:hidden; }
.line__in{ display:block; will-change:transform; }

/* --------------------------------------------------------------- botões */
.btn{
  --glow:0 0 0 rgba(255,212,0,0);
  position:relative;
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--display); font-weight:700;
  font-size:clamp(.95rem,.9rem + .2vw,1.08rem);
  letter-spacing:.06em; text-transform:uppercase;
  padding:1.05rem 1.9rem;
  border:1px solid var(--steel-2);
  color:var(--chalk);
  background:transparent;
  overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
  box-shadow:var(--glow);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--volt);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover{ color:#000; border-color:var(--volt); --glow:0 0 34px rgba(255,212,0,.22); }
.btn:hover::before{ transform:translateY(0); }
.btn__arrow{ transition:transform .45s var(--ease); }
.btn:hover .btn__arrow{ transform:translate(3px,0); }

.btn--solid{ background:var(--volt); color:#000; border-color:var(--volt); }
.btn--solid::before{ background:var(--chalk); }
.btn--solid:hover{ color:#000; }

.btn--big{
  font-size:clamp(1.05rem,.9rem + .7vw,1.6rem);
  padding:1.4rem 2.6rem;
  background:var(--volt); color:#000; border-color:var(--volt);
}
.btn--big::before{ background:var(--chalk); }

/* --------------------------------------------------------------- preloader */
.preloader{
  position:fixed; inset:0; z-index:9000;
  background:var(--ink);
  display:grid; place-items:center;
}
.preloader__stage{ width:min(340px,70vw); text-align:center; }
.coil{ width:100%; height:auto; overflow:visible; }
.coil__core rect{ fill:#1a1c20; stroke:#2e3136; stroke-width:1; }
.coil__turns path{
  stroke:#b5702f;
  stroke-width:3.2;
}
.preloader__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:1.8rem;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--smoke);
}
.preloader__pct{ color:var(--volt); font-variant-numeric:tabular-nums; }
.preloader.is-done{ pointer-events:none; }

/* --------------------------------------------------------------- cursor */
.cursor{ position:fixed; top:0; left:0; z-index:8000; pointer-events:none; mix-blend-mode:difference; }
.cursor__dot,.cursor__ring{
  position:absolute; top:0; left:0;
  transform:translate(-50%,-50%);
}
/* O raio fica DENTRO de um span: o GSAP preserva a centralização em % de
   elementos HTML, mas não de SVG (o raio descia 10px). O max-width:none é
   porque a regra geral de svg limita à largura do pai, que aqui é zero.
   O crescimento no hover vai por tamanho: um scale em CSS seria sobrescrito
   pelo transform inline do GSAP. */
.cursor__dot{
  width:7px; height:19px;
  transition:width .3s var(--ease), height .3s var(--ease);
}
.cursor__dot svg{ width:100%; height:100%; max-width:none; fill:var(--volt); }
.cursor.is-hot .cursor__dot{ width:9px; height:24px; }
.cursor__ring{ border-radius:50%; }
.cursor__ring{
  width:34px; height:34px; border:1px solid rgba(255,212,0,.55);
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease);
}
.cursor.is-hot .cursor__ring{ width:56px; height:56px; border-color:var(--volt); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* --------------------------------------------------------------- header */
.head{
  position:fixed; top:0; left:0; right:0; z-index:700;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.15rem var(--gut);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), transform .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.head.is-stuck{
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(255,255,255,.07);
}
.head.is-hidden{ transform:translateY(-102%); }
.head__brand{ display:flex; align-items:center; gap:.6rem; }
/* a marca do cabeçalho é a logo oficial em PNG (antes era SVG desenhado à
   mão). Altura automática: o badge não é quadrado. */
.head__mark{ width:32px; height:auto; flex:none; }
/* a palavra também vem do logo oficial (em negativo, que o cabeçalho é
   preto). Antes era "BREDA" escrito em Saira Condensed — parecido, mas não
   é a letra da marca. */
.head__word{ height:19px; width:auto; flex:none; }
.head__nav{ display:flex; gap:2rem; }
.head__nav a,
.head__nav button{
  /* sem quebra: "Análise laboratorial" partia em duas linhas e esticava a
     altura de todos os itens. Se não couber, quem resolve é o burger. */
  white-space:nowrap;
  appearance:none; background:none; border:0; padding-inline:0; cursor:pointer;
  font-family:var(--mono); font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--smoke);
  position:relative; padding-block:.3rem;
  transition:color .35s var(--ease);
}
.head__nav a::after,
.head__nav button::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--volt); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.head__nav a:hover,
.head__nav button:hover{ color:var(--chalk); }
.head__nav a:hover::after,
.head__nav button:hover::after{ transform:scaleX(1); transform-origin:left; }
/* página aberta (hoje só os Serviços, que saíram do overlay) */
.head__nav a[aria-current="page"]{ color:var(--chalk); }
.head__nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.menu a[aria-current="page"]{ color:var(--volt); }
.head__end{ display:flex; align-items:center; gap:.7rem; }
.head__cta{
  font-family:var(--display); font-weight:700; font-size:.9rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.6rem 1.2rem; border:1px solid var(--steel-2);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.head__cta:hover{ background:var(--volt); color:#000; border-color:var(--volt); }
.head__cta-curto{ display:none; }

/* Consulta de equipamento — leva para o portal do cliente, em outra aba.
   Fica mais quieto que o CTA de orçamento: é serviço para quem já comprou,
   não a ação principal da página. */
.head__consulta{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--smoke);
  padding:.6rem .2rem; margin-right:.8rem; white-space:nowrap;
  transition:color .35s var(--ease);
}
.head__seta{ color:var(--volt); transition:transform .45s var(--ease); }
.head__consulta:hover{ color:var(--chalk); }
.head__consulta:hover .head__seta{ transform:translate(2px,-2px); }
.head__consulta-curto{ display:none; }

/* --------------------------------------------------------------- burger */
.burger{
  display:none;
  width:44px; height:44px; flex:none;
  background:transparent; border:1px solid var(--steel-2);
  padding:0; cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute; left:12px; width:20px; height:1.5px;
  background:var(--chalk);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:25px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* --------------------------------------------------------------- menu */
.menu{
  position:fixed; inset:0; z-index:690;
  background:var(--ink);
  /* `safe center`: centralizado enquanto cabe; quando não cabe (celular
     deitado), vira topo em vez de estourar para fora da tela por cima.
     A rolagem própria + data-lenis-prevent no HTML é o que deixa a roda do
     mouse chegar aqui — o Lenis fica parado com o menu aberto e, parado,
     ele engole o wheel. */
  display:flex; flex-direction:column; justify-content:safe center;
  overflow-y:auto; overscroll-behavior:contain;
  gap:.4rem;
  padding:6rem var(--gut) 3rem;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.menu[hidden]{ display:none; }
.menu.is-open{ opacity:1; visibility:visible; }
.menu a,
.menu button{
  appearance:none; background:none; border:0; color:inherit; cursor:pointer;
  width:100%; text-align:left; padding-inline:0;
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.1rem,11vw,3.4rem);
  line-height:1.05; letter-spacing:-.01em; text-transform:uppercase;
  padding-block:.45rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.menu__n{
  font-family:var(--mono); font-weight:400; font-size:.7rem;
  letter-spacing:.2em; color:var(--volt);
}
.menu__cta{
  margin-top:1.6rem;
  color:var(--volt); border-bottom-color:transparent !important;
  font-size:clamp(1.3rem,6vw,1.9rem) !important;
}
.menu__consulta{
  margin-top:1.6rem;
  color:var(--chalk); border-bottom-color:transparent !important;
  font-size:clamp(1.3rem,6vw,1.9rem) !important;
}
.menu__consulta span[aria-hidden]{ color:var(--volt); }
.menu__consulta + .menu__cta{ margin-top:.2rem; }

/* --------------------------------------------------------------- hero */
.hero__track{ height:360svh; position:relative; }
.hero__sticky{
  position:sticky; top:0;
  height:100svh; overflow:hidden;
  display:grid; grid-template-areas:"stack"; place-items:end start;
}
.hero__media{ grid-area:stack; position:relative; width:100%; height:100svh; }
.hero__still,
.hero__frames{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.06);
  will-change:transform;
}
/* o canvas só aparece quando a sequência está pronta */
.hero__frames{ opacity:0; transition:opacity .5s var(--ease); }
.hero__frames.is-ready{ opacity:1; }
.hero__grade{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(5,5,5,.96) 4%, rgba(5,5,5,.35) 42%, rgba(5,5,5,.55) 100%),
    linear-gradient(to right, rgba(5,5,5,.82), rgba(5,5,5,.05) 60%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__content{
  grid-area:stack; position:relative; z-index:2;
  padding:clamp(5rem,11vh,8rem) var(--gut) clamp(3rem,8vh,7rem);
  width:100%; max-width:var(--maxw); margin-inline:auto;
}
.hero__eyebrow{ margin-bottom:1.2rem; }
.hero__title{
  font-family:var(--display); font-weight:900;
  /* a altura da viewport também limita: em telas baixas o bloco
     inteiro precisa caber sem passar por baixo do header.
     14/set/2026: reduzido ~20% a pedido do Pedro (era 11,4vw / 17,5vh /
     15rem). Medido: "Engenharia", a linha mais larga, tem 4,49em — com
     9,1vw ela ocupa ~41% da largura útil a 1440px, antes eram 50%. */
  font-size:clamp(2.6rem, min(9.1vw, 14vh), 12rem);
  line-height:.84;
  letter-spacing:-.022em;
  text-transform:uppercase;
  margin:0 0 clamp(1rem,2.4vh,1.7rem);
}
.hero__title em{ font-style:normal; color:var(--volt); }
.hero__sub{
  font-size:clamp(1.02rem,.95rem + .42vw,1.42rem);
  color:var(--smoke-2);
  max-width:44ch; margin:0 0 clamp(1.4rem,3.2vh,2.4rem);
  min-height:2.9em;
}
.caret{
  display:inline-block; width:.6ch; height:1em; margin-left:.15em;
  background:var(--volt); vertical-align:-.13em;
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero__scroll{
  grid-area:stack; z-index:2;
  place-self:end end;
  display:flex; align-items:center; gap:.9rem;
  padding:0 var(--gut) clamp(3rem,8vh,7rem);
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--smoke);
}
.hero__scroll-rail{ width:72px; height:1px; background:var(--steel-2); position:relative; overflow:hidden; }
.hero__scroll-bar{ position:absolute; inset:0; background:var(--volt); transform-origin:left; transform:scaleX(0); }
@media (max-width:760px){ .hero__scroll{ display:none; } }


/* --------------------------------------------------------------- números */
.nums{
  border-block:1px solid rgba(255,255,255,.07);
  padding:clamp(3.5rem,9vh,7rem) var(--gut);
}
.nums__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem);
}
.num{ display:flex; flex-direction:column; gap:.5rem; }
.num__val{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.8rem,1.2rem + 5.6vw,7rem);
  line-height:.85; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.num__cap{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--smoke);
}
/* três números: até 900px ficam dois em cima e o terceiro na linha de baixo —
   em três colunas estreitas o "30.000+" estoura no celular */
@media (max-width:900px){
  .nums__grid{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; }
  .num:nth-child(3){ grid-column:1 / -1; }
}

/* ------------------------------------------------- processo / timeline
   Painel de mídia fixo à esquerda, etapas rolando à direita sobre um
   trilho amarelo que cresce com o scroll. Só transform/opacity animam. */
.proc{
  position:relative;
  padding:clamp(6rem,14vh,12rem) var(--gut);
}
.proc__intro{
  max-width:var(--maxw); margin:0 auto clamp(3rem,7vh,6rem);
}
.proc__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,6rem);
  align-items:start;
}

/* ---- painel de mídia */
.proc__palco{
  position:sticky; top:calc(50svh - 30svh);
  height:60svh;
}
.proc__quadro{
  position:relative; width:100%; height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(120% 90% at 50% 10%, #17181c 0%, #0a0a0c 55%, var(--ink) 100%);
  will-change:transform;
}
.pm{
  position:absolute; inset:0; margin:0;
  opacity:0;
  transition:opacity .7s var(--ease);
  will-change:opacity;
}
.pm.is-on{ opacity:1; }
.pm img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.2s var(--ease);
  will-change:transform;
}
.pm.is-on img{ transform:scale(1); }
/* os renders 3D têm fundo transparente: cabem inteiros, não cortados */
/* só a etapa 01 (wireframe CAD) é render com fundo transparente e cabe
   inteira; as demais são fotos e preenchem o painel */
.pm:nth-child(1) img{ object-fit:contain; padding:6%; }
/* foto real do laboratório: o painel é mais estreito que a foto; o foco
   segura instrumentos e console dentro do quadro */
.pm img[src$="ensaios-laboratorio.jpg"], .etapa__mob[src$="ensaios-laboratorio.jpg"]{ object-position:75% 50%; }

.proc__quadro::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(5,5,5,.55), transparent 45%);
}
.proc__contador{
  margin-top:1rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--smoke);
}
.proc__contador span{ color:var(--volt); }
.proc__contador i{ font-style:normal; margin:0 .4rem; }

/* ---- lista de etapas */
.proc__lista{
  list-style:none; margin:0; padding:0;
  position:relative;
}
.proc__trilho{
  position:absolute; left:5px; top:.6rem; bottom:.6rem;
  width:1px; background:rgba(255,255,255,.12);
}
.proc__preenche{
  position:absolute; inset:0;
  background:var(--volt);
  transform:scaleY(0); transform-origin:top;
  will-change:transform;
}

.etapa{
  position:relative;
  padding:0 0 clamp(3.5rem,9vh,7rem) clamp(2rem,3vw,3rem);
}
.etapa:last-child{ padding-bottom:0; }
.etapa__ponto{
  position:absolute; left:0; top:.5rem;
  width:11px; height:11px; border-radius:50%;
  background:var(--ink);
  border:1px solid var(--steel-2);
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.etapa.is-passou .etapa__ponto{ border-color:var(--volt); background:var(--volt); }
.etapa.is-on .etapa__ponto{
  border-color:var(--volt); background:var(--volt);
  transform:scale(1.45);
  box-shadow:0 0 0 5px rgba(255,212,0,.14);
}
.etapa__n{
  display:block;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--smoke); margin-bottom:.8rem;
  transition:color .5s var(--ease);
}
.etapa.is-on .etapa__n, .etapa.is-passou .etapa__n{ color:var(--volt); }
.etapa__t{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.9rem,1.2rem + 2.2vw,3.4rem);
  line-height:.95; letter-spacing:-.012em; text-transform:uppercase;
  margin:0 0 .8rem;
  color:var(--smoke);
  transition:color .5s var(--ease), transform .6s var(--ease);
}
.etapa.is-passou .etapa__t{ color:var(--smoke-2); }
.etapa.is-on .etapa__t{ color:var(--chalk); transform:translateX(6px); }
.etapa__d{
  margin:0; max-width:46ch;
  color:var(--smoke); font-size:1rem; line-height:1.6;
  opacity:.5;
  transition:opacity .6s var(--ease), color .6s var(--ease);
}
.etapa.is-on .etapa__d{ opacity:1; color:var(--smoke-2); }

/* mídia inline: só no mobile, onde o painel fixo sai de cena */
.etapa__mob{ display:none; }

@media (max-width:900px){
  .proc__grid{ grid-template-columns:1fr; gap:0; }
  .proc__palco{ display:none; }
  .etapa__mob{
    display:block; width:100%; margin-top:1.6rem;
    aspect-ratio:16/10; object-fit:cover;
    border:1px solid rgba(255,255,255,.08);
    background:#0a0a0c;
  }
  .etapa__mob[src$=".png"]{ object-fit:contain; padding:4%; }
}

/* --------------------------------------------------------------- linha */
.range{ padding:clamp(6rem,14vh,12rem) var(--gut); }
.range__head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,6vh,5rem); }
.range__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,1.8vw,1.8rem);
}
/* número ímpar de cards: o último fecha a grade sozinho */
.card--largo{ grid-column:1 / -1; }
.card{
  position:relative; overflow:hidden;
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,.07);
  min-height:clamp(320px,42svh,460px);
  display:flex; flex-direction:column; justify-content:flex-end;
  transform-style:preserve-3d;
  transition:border-color .5s var(--ease), box-shadow .6s var(--ease);
  will-change:transform;
}
.card:hover{
  border-color:rgba(255,212,0,.4);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 0 40px -18px rgba(255,212,0,.22);
}
.card__media{ position:absolute; inset:0; }
.card__media video,
.card__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.12);
  transition:opacity .7s var(--ease), transform 1.1s var(--ease);
  filter:grayscale(.35) contrast(1.08);
}
.card:hover .card__media video,
.card:hover .card__media img{ opacity:.5; transform:scale(1); }
.card:hover .card__media video.is-fim{ opacity:0; transition-duration:.4s; }
/* o mesmo no toque, onde não há hover — ver `is-tocando` no main.js */
.card.is-tocando .card__media video,
.card.is-tocando .card__media img{ opacity:.5; transform:scale(1); }
.card.is-tocando .card__media video.is-fim{ opacity:0; transition-duration:.4s; }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,5,5,.96) 12%, rgba(5,5,5,.4) 70%, rgba(5,5,5,.6));
}
.card__body{ position:relative; z-index:2; padding:clamp(1.6rem,2.4vw,2.6rem); transform:translateZ(40px); }
.card__idx{
  display:block; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.2em; color:var(--volt); margin-bottom:1rem;
}
.card__t{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.6rem,1.1rem + 1.7vw,2.9rem);
  line-height:.95; text-transform:uppercase; letter-spacing:-.01em;
  margin:0 0 .8rem;
}
.card__d{ margin:0; color:var(--smoke-2); font-size:.98rem; max-width:44ch; }
@media (max-width:820px){ .range__grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- fábrica */
.fab{ position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; }
.fab__media{ position:absolute; inset:0;
  background:url("../images/fabrica-poster.jpg") center/cover no-repeat; }
.fab__video{ width:100%; height:100%; object-fit:cover; will-change:transform; filter:grayscale(.2) contrast(1.05); }
.fab__grade{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(5,5,5,.9), rgba(5,5,5,.55) 45%, rgba(5,5,5,.94));
}
.fab__inner{
  position:relative; z-index:2;
  max-width:var(--maxw); width:100%; margin-inline:auto;
  padding:clamp(5rem,12vh,9rem) var(--gut);
}
.fab__quote{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.3rem,.9rem + 6.4vw,8rem);
  line-height:.9; letter-spacing:-.02em; text-transform:uppercase;
  margin:0 0 clamp(2.5rem,6vh,5rem);
}
.fab__quote em{ font-style:normal; color:var(--volt); }
.fab__stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  margin:0; padding-top:2.2rem;
  border-top:1px solid rgba(255,255,255,.12);
}
/* "Controles de qualidade executados" quebra em duas linhas: alinhar cada
   célula por baixo mantém os números na mesma linha em qualquer largura */
.fab__stats div{ display:flex; flex-direction:column; justify-content:flex-end; }
.fab__stats dt{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--smoke); margin-bottom:.6rem;
}
.fab__stats dd{
  margin:0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem,1rem + 2vw,3rem);
  line-height:1; font-variant-numeric:tabular-nums;
}
@media (max-width:860px){ .fab__stats{ grid-template-columns:repeat(2,1fr); row-gap:2rem; } }

/* --------------------------------------------------------- clientes */
.cli{ padding:clamp(6rem,14vh,12rem) var(--gut); }
.cli__head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,6vh,5rem); }
.cli__head .lede{ margin-top:1.4rem; }
.cli__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.08);
  border-left:1px solid rgba(255,255,255,.08);
}
.cli__grupo{
  padding:clamp(1.6rem,2.4vw,2.6rem);
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cli__setor{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--volt);
  margin:0 0 2rem; font-weight:500;
}
.cli__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2.2rem; }
.cli__item{ display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; }
/* os PNG são silhuetas brancas em 2× — limitar pelos DOIS lados mantém
   monograma alto e assinatura larga com o mesmo peso óptico */
.cli__logo{
  width:auto; height:auto; max-width:132px; max-height:38px;
  opacity:.72; transition:opacity .45s var(--ease);
}
.cli__item:hover .cli__logo{ opacity:1; }
.cli__nome{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--smoke);
}

@media (max-width:1080px){ .cli__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .cli__grid{ grid-template-columns:1fr; }
  .cli__lista{ flex-direction:row; flex-wrap:wrap; gap:1.8rem 2.4rem; }
}

/* --------------------------------------------------------------- time */
.team{ position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; }
.team__media{ position:absolute; inset:0;
  background:url("../images/time-poster.jpg") center/cover no-repeat; }
.team__video{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.team__grade{
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(5,5,5,.94) 16%, rgba(5,5,5,.46) 56%, rgba(5,5,5,.16));
}
.team__inner{
  position:relative; z-index:2;
  max-width:var(--maxw); width:100%; margin-inline:auto;
  padding:clamp(5rem,12vh,9rem) var(--gut);
}
.team__quote{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2rem,.9rem + 5.2vw,6.5rem);
  line-height:.92; letter-spacing:-.018em; text-transform:uppercase;
  margin:0 0 2rem; max-width:18ch;
}
.team__quote em{ font-style:normal; color:var(--volt); }
.team__note{ max-width:44ch; color:var(--smoke-2); margin:0; }

/* --------------------------------------------------------------- qualidade */
.qual{
  position:relative;
  padding:clamp(6rem,14vh,12rem) var(--gut);
  border-top:1px solid rgba(255,255,255,.07);
}
.qual__head{ max-width:var(--maxw); margin:0 auto clamp(3rem,7vh,6rem); }
/* o til de NÃO passa da altura da linha; a máscara do .line precisa de folga */
.qual__titulo .line{ padding-top:.14em; margin-top:-.14em; }
.qual__titulo em{ font-style:normal; color:var(--volt); }
.qual__lede{ max-width:52ch; }

/* três credenciais — mesma grade de filetes da seção Setores */
.qual__selos{
  list-style:none; margin:0 auto; padding:0;
  max-width:var(--maxw);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.08);
  border-left:1px solid rgba(255,255,255,.08);
}
.selo{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(1.8rem,3vw,3rem);
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .55s var(--ease);
  container-type:inline-size;
}
.selo::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--volt); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.selo:hover{ background:#0e0e11; }
.selo:hover::before{ transform:scaleX(1); }
.selo__n{
  display:block;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--volt);
  margin-bottom:clamp(2rem,5vh,3.4rem);
}
.selo__kicker{
  margin:0 0 .6rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; line-height:1.5;
  text-transform:uppercase; color:var(--smoke);
}
.selo__marca{
  margin:0 0 1.6rem; padding:.08em 0 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.6rem,1.6rem + 2.6vw,4.8rem);
  line-height:.86; letter-spacing:-.01em; text-transform:uppercase;
}
/* Nome + logo lado a lado. O filete de baixo passa do nome para a linha
   inteira, e o logo vai numa plaquinha clara: as cores oficiais somem no preto
   (o azul do Inmetro some de vez). Se faltar largura, o logo desce em vez de
   estourar a coluna. */
.selo__nome{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.8rem 1rem;
  margin:0 0 1.6rem; padding-bottom:1.4rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.selo__nome .selo__marca{
  margin:0; padding:.08em 0 0; border-bottom:0; white-space:nowrap;
  /* Medido: o pior caso é ENERGISA (3,52em) + gap de 1rem + plaquinha da
     Energisa (2,45× a altura). O nome encolhe pela largura da COLUNA
     (container query), não da tela; as três colunas têm a mesma largura,
     então os três nomes continuam do mesmo tamanho e alinhados. */
  font-size:clamp(1.6rem, calc((100cqi - 1rem - 2.5 * clamp(42px,3.6vw,58px)) / 3.6), 4.8rem);
}
.selo__logo{
  flex:none; display:flex; align-items:center; gap:.55rem;
  height:clamp(42px,3.6vw,58px);
  padding:.4rem .55rem;
  background:#f4f4f2; border-radius:4px;
}
.selo__logo img{ display:block; height:100%; width:auto; }
.selo__txt{ margin:0; color:var(--smoke-2); font-size:.98rem; }
.selo__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.selo__lista li{
  position:relative; padding-left:1.4rem;
  color:var(--smoke-2); font-size:.98rem; line-height:1.4;
}
.selo__lista li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:.7rem; height:1px; background:var(--volt);
}
.selo__niveis{
  list-style:none; margin:1.4rem 0 0; padding:0;
  counter-reset:nivel; display:grid; gap:1rem;
}
.selo__niveis li{
  counter-increment:nivel;
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.9rem;
  padding-top:1rem; border-top:1px solid rgba(255,255,255,.07);
}
.selo__niveis li::before{
  content:counter(nivel, decimal-leading-zero);
  grid-row:span 2; padding-top:.3rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--volt);
}
.selo__niveis b{ font-weight:400; color:var(--chalk); font-size:1rem; line-height:1.35; }
.selo__niveis span{ color:var(--smoke); font-size:.92rem; line-height:1.45; }

/* ensaios e rastreabilidade — dois blocos espelhados */
.qual__ensaios,
.qual__rastro{
  max-width:var(--maxw); margin:clamp(5rem,12vh,9rem) auto 0;
  display:grid; align-items:center;
  gap:clamp(2.5rem,6vw,7rem);
}
.qual__ensaios{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:start; }
.qual__rastro{ grid-template-columns:minmax(0,1fr); align-items:stretch; row-gap:clamp(2.8rem,7vh,5rem); }

.qual__corpo .selo__n{ margin-bottom:1.4rem; }
.qual__t{
  margin:0 0 1.1rem;
  font-family:var(--display); font-weight:900;
  font-size:clamp(2rem,1.2rem + 2.6vw,4rem);
  line-height:.9; letter-spacing:-.012em; text-transform:uppercase;
  max-width:18ch;
}
.qual__txt{ margin:0 0 2.2rem; max-width:48ch; color:var(--smoke-2); }

.ensaios{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.1); }
.ensaio{
  display:grid; grid-template-columns:3rem minmax(0,1fr); align-items:baseline;
  padding:1.15rem 0; border-bottom:1px solid rgba(255,255,255,.1);
}
.ensaio__i{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--volt); }
.ensaio__t{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem,1rem + .6vw,1.55rem);
  line-height:1.12; letter-spacing:.01em; text-transform:uppercase;
}
.ensaio__tipos{
  list-style:none; margin:.85rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.ensaio__tipos li{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; line-height:1.4;
  text-transform:uppercase; color:var(--smoke-2);
  border:1px solid var(--steel-2); padding:.4rem .6rem .35rem;
}

/* --- rastreabilidade: fluxo de acesso pelo QR Code da placa ---
   Refeito a partir do infográfico da BREDA (fluxo de acesso, máquinas
   aplicáveis, placa de alumínio). O palco é um container: placa e celular se
   posicionam em cqi do palco, e o miolo de cada um se mede em cqi dele mesmo —
   a placa escala inteira, do desktop ao celular, sem refazer tipografia. */
.rastro__topo{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(1.5rem,5vw,6rem); align-items:end;
}
.rastro__topo .qual__t{ margin-bottom:0; }
.rastro__intro .qual__txt{ margin-bottom:1.8rem; }

/* Aviso de patente do sistema de QR Code. É PEDIDO de patente (depósito
   BR 10 2025 021441 5, publicado na RPI 2858), não patente concedida — o
   texto tem que dizer isso enquanto a carta-patente não sai. */
.rastro__patente{
  margin:1.6rem 0 0; max-width:58ch;
  padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--mono); font-size:.74rem; line-height:1.75;
  letter-spacing:.03em; color:var(--smoke-2);
}
.rastro__patente-r{
  display:block; margin-bottom:.4rem;
  color:var(--volt); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
}

.rastro__fluxo{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,4.5vw,5.5rem); align-items:center;
}
.rastro__rotulo{
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.2rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; line-height:1.4;
  text-transform:uppercase; color:var(--smoke);
}
.rastro__rotulo::before{ content:""; flex:none; width:1.4rem; height:1px; background:var(--volt); }

/* cantoneiras de mira (placa no passo 1, visor da câmera no passo 2) */
.mira{
  --c:var(--volt);
  background:
    linear-gradient(var(--c),var(--c)) left top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) left top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) right top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom / var(--w) var(--l) no-repeat;
}

/* palco */
.rastro__palco{
  position:relative; overflow:hidden;
  container:palco / inline-size;
  border:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(50% 60% at 36% 48%, rgba(255,212,0,.07), transparent 72%),
    radial-gradient(80% 60% at 50% 115%, #16161a, transparent 70%),
    var(--ink-2);
}
.palco__altura{ display:block; padding-top:62.5%; }
.palco__passo{
  position:absolute; left:4cqi; bottom:3.6cqi;
  font-family:var(--mono); font-size:max(.62rem,1.25cqi); letter-spacing:.2em;
  text-transform:uppercase; color:var(--smoke);
}
.palco__passo b{ font-weight:400; color:var(--volt); }

/* placa de alumínio */
.placa{
  position:absolute; left:4.5cqi; top:50%; width:61cqi;
  translate:0 -50%;
  container-type:inline-size;
  transition:filter .8s var(--ease);
}
.placa__in{
  position:relative;
  padding:5.4cqi 5.8cqi 4.4cqi;
  border-radius:1.4cqi;
  color:#1b1d21; text-shadow:0 1px 0 rgba(255,255,255,.45);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, rgba(0,0,0,.035) 1px 3px),
    linear-gradient(128deg, #e0e3e6 0%, #b0b5ba 32%, #e7e9eb 50%, #a0a6ac 76%, #cdd1d4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 0 0 1px rgba(0,0,0,.5),
    0 5cqi 12cqi -4cqi rgba(0,0,0,.95);
}
.placa__rebite{
  position:absolute; width:2.1cqi; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #f3f4f5, #8b9197 60%, #5c6167);
  box-shadow:0 1px 1px rgba(0,0,0,.45);
}
.placa__rebite--a{ top:2cqi; left:2cqi; }
.placa__rebite--b{ top:2cqi; right:2cqi; }
.placa__rebite--c{ bottom:2cqi; left:2cqi; }
.placa__rebite--d{ bottom:2cqi; right:2cqi; }
.placa__topo{
  display:flex; align-items:center; gap:1.8cqi;
  padding-bottom:2.6cqi; border-bottom:.3cqi solid rgba(27,29,33,.55);
}
.placa__mark{ width:7.2cqi; height:auto; flex:none; }
.placa__mark .mark__plate{ fill:var(--volt); stroke:#050505; stroke-width:4.8; stroke-linejoin:round; }
.placa__mark .mark__ink{ fill:#050505; }
.placa__mark .mark__bolt{ fill:#fff; }
.placa__marca{ font-family:var(--display); font-weight:900; font-size:5.8cqi; letter-spacing:.14em; line-height:1; }
.placa__sub{
  margin-left:auto;
  font-family:var(--mono); font-size:1.75cqi; letter-spacing:.16em; text-transform:uppercase;
}
.placa__tipo{
  margin:2.6cqi 0 3cqi;
  font-family:var(--mono); font-weight:500; font-size:2.05cqi; letter-spacing:.28em; text-transform:uppercase;
}
.placa__meio{ display:grid; grid-template-columns:minmax(0,1fr) 32cqi; gap:4.5cqi; align-items:center; }
.placa__dados{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:2.8cqi 3cqi; }
.placa__dado{
  margin:-1cqi -1.3cqi; padding:1cqi 1.3cqi; border-radius:.7cqi;
  transition:box-shadow .6s var(--ease), background-color .6s var(--ease);
}
.placa__dados dt{
  margin-bottom:.5cqi;
  font-family:var(--mono); font-size:1.8cqi; letter-spacing:.14em; text-transform:uppercase; opacity:.72;
}
.placa__dados dd{
  margin:0;
  font-family:var(--display); font-weight:700; font-size:3.5cqi; line-height:1.05; letter-spacing:.02em;
  white-space:nowrap;
}
.placa__qr{
  position:relative; overflow:hidden;
  background:#f2f2ef; border-radius:.8cqi;
  box-shadow:0 0 0 1px rgba(0,0,0,.3), inset 0 1px 2px rgba(0,0,0,.12);
  transition:box-shadow .6s var(--ease);
}
.placa__qr svg{ display:block; width:100%; height:auto; }
.placa__scan{
  position:absolute; left:0; right:0; top:6%; height:2px; opacity:0;
  background:var(--volt); box-shadow:0 0 16px 3px rgba(255,212,0,.55);
}
@keyframes varre{
  0%      { top:6%;  opacity:0; }
  12%     { opacity:1; }
  80%     { opacity:1; }
  92%,100%{ top:94%; opacity:0; }
}
.placa__rodape{
  display:flex; justify-content:space-between; gap:2cqi;
  margin:3.2cqi 0 0; padding-top:2.4cqi;
  border-top:.2cqi solid rgba(27,29,33,.4);
  font-family:var(--mono); font-size:1.65cqi; letter-spacing:.2em; text-transform:uppercase;
}
.placa__mira{
  --l:5cqi; --w:.4cqi;
  position:absolute; inset:-2cqi; pointer-events:none; opacity:0;
  transition:opacity .6s var(--ease), inset .9s var(--ease);
}
.placa__etiqueta{
  position:absolute; left:0; bottom:calc(100% + 4.6cqi);
  font-family:var(--mono); font-size:max(.6rem,2.1cqi); letter-spacing:.2em; text-transform:uppercase;
  color:var(--volt); white-space:nowrap;
  opacity:0; translate:0 1.5cqi;
  transition:opacity .6s var(--ease), translate .8s var(--ease);
}

/* celular */
.celular{
  position:absolute; right:6.5cqi; top:50%; width:24.5cqi;
  translate:0 -50%;
  container-type:inline-size;
  transition:filter .8s var(--ease), translate .9s var(--ease);
}
.celular__corpo{
  position:relative; aspect-ratio:9 / 19.2;
  border-radius:15cqi;
  background:linear-gradient(150deg, #33363b, #0d0e10 40%, #1c1e22);
  box-shadow:
    inset 0 0 0 .8cqi #474b51,
    inset 0 0 0 1.6cqi #0a0a0b,
    0 0 0 1px rgba(255,255,255,.05),
    0 10cqi 24cqi -8cqi rgba(0,0,0,.95);
}
.celular__tela{
  position:absolute; inset:3.4cqi; overflow:hidden;
  border-radius:11.8cqi; background:#040405;
}
.celular__tela::after{
  content:""; position:absolute; inset:0; z-index:9; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.08), transparent 34%);
}
.celular__ilha{
  position:absolute; z-index:8; top:3.6cqi; left:50%; translate:-50% 0;
  width:27cqi; height:7.6cqi; border-radius:8cqi; background:#000;
}
.tela{ position:absolute; inset:0; opacity:0; transition:opacity .55s var(--ease), filter .6s var(--ease); }

/* tela 1: câmera enquadrando o QR */
.tela--camera{
  background:
    radial-gradient(70% 55% at 50% 46%, transparent 40%, rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.04) 1px 4px),
    linear-gradient(128deg, #7f858b 0%, #b9bdc1 36%, #8e949a 60%, #5f656b 100%);
}
.camera__alvo{
  position:absolute; left:50%; top:47%; width:58cqi; aspect-ratio:1;
  translate:-50% -50%; rotate:-4deg;
  background:#f2f2ef; border-radius:1.6cqi;
  box-shadow:0 2cqi 6cqi rgba(0,0,0,.35);
}
.camera__alvo svg{ display:block; width:100%; height:100%; }
.camera__mira{
  --l:12cqi; --w:1.4cqi;
  position:absolute; left:50%; top:47%; width:78cqi; aspect-ratio:1; translate:-50% -50%;
}
.camera__linha{
  position:absolute; left:8%; right:8%; top:6%; height:.9cqi; opacity:0;
  background:var(--volt); box-shadow:0 0 5cqi 1cqi rgba(255,212,0,.55);
}
.camera__dica{
  position:absolute; left:0; right:0; bottom:22cqi; text-align:center;
  font-family:var(--mono); font-size:4.4cqi; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7);
}

/* tela 2: aviso do link depois da leitura */
.tela--aviso{ z-index:2; }
.aviso{
  position:absolute; left:5cqi; right:5cqi; top:15cqi;
  display:grid; grid-template-columns:11cqi minmax(0,1fr); gap:3.4cqi; align-items:center;
  padding:4.2cqi 4.4cqi; border-radius:7cqi;
  background:rgba(30,31,35,.94);
  box-shadow:0 3cqi 10cqi rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
  translate:0 -10cqi;
  transition:translate .8s var(--ease);
}
.aviso svg{ width:11cqi; height:auto; }
.aviso__txt{ min-width:0; }
.aviso__txt b{
  display:block; margin-bottom:.8cqi;
  font-family:var(--display); font-weight:700; font-size:5.6cqi; line-height:1.05;
  letter-spacing:.03em; text-transform:uppercase; color:#fff;
}
.aviso__txt i{
  display:block; font-style:normal;
  font-family:var(--mono); font-size:3.3cqi; line-height:1.35; color:var(--volt);
  overflow-wrap:anywhere;
}
.aviso__toque{
  position:absolute; right:9cqi; top:50%; width:12cqi; aspect-ratio:1; margin-top:-6cqi;
  border-radius:50%; background:rgba(255,255,255,.55); opacity:0;
}
@keyframes toque{
  0%      { opacity:.75; scale:.3; }
  70%,100%{ opacity:0; scale:1.7; }
}

/* telas 3 a 5: portal de consulta */
.tela--portal{ z-index:3; background:#f3f3f0; color:#141518; }
.portal__topo{
  display:flex; align-items:center; gap:2.6cqi;
  padding:15cqi 6cqi 4.5cqi;
  background:#0a0a0b; color:#fff;
}
.portal__topo svg{ width:8.5cqi; height:auto; flex:none; }
.portal__topo b{ font-family:var(--display); font-weight:900; font-size:6cqi; letter-spacing:.16em; line-height:1; }
.portal__topo span{
  margin-left:auto;
  font-family:var(--mono); font-size:3.2cqi; letter-spacing:.16em; text-transform:uppercase; color:var(--volt);
}
.portal__etapa{
  position:absolute; left:0; right:0; top:31cqi; bottom:0;
  padding:10cqi 7cqi;
  opacity:0; translate:0 4cqi;
  transition:opacity .5s var(--ease), translate .6s var(--ease);
}
.portal__t{
  margin:0 0 7cqi;
  font-family:var(--display); font-weight:800; font-size:8.4cqi; line-height:1; text-transform:uppercase;
}
.portal__rot{
  display:block; margin-bottom:2.4cqi;
  font-family:var(--mono); font-size:3.6cqi; letter-spacing:.14em; text-transform:uppercase; color:#5d6166;
}
.portal__campo{
  display:flex; align-items:center; height:14cqi; padding:0 4cqi;
  border:.6cqi solid #141518; border-radius:2.5cqi; background:#fff;
  font-family:var(--mono); font-size:6.4cqi;
}
.portal__digitado{ display:inline-block; width:0; overflow:hidden; white-space:nowrap; }
.portal__cursor{ width:.5cqi; height:7.5cqi; margin-left:.6cqi; background:#141518; animation:pisca 1s steps(1) infinite; }
@keyframes pisca{ 50%{ opacity:0; } }
@keyframes digita{ from{ width:0; } to{ width:6ch; } }
.portal__bt{
  display:block; margin-top:5cqi; padding:3.6cqi 0;
  border-radius:2.5cqi; background:var(--volt); text-align:center;
  font-family:var(--display); font-weight:800; font-size:5.4cqi; letter-spacing:.06em; text-transform:uppercase;
}
.portal__ajuda{
  display:block; margin-top:7cqi; padding-top:5cqi;
  border-top:1px solid rgba(20,21,24,.12);
  font-family:var(--serif); font-size:4.6cqi; line-height:1.4; color:#5d6166;
}
@keyframes aperta{ 50%{ scale:.94; filter:brightness(.88); } }
.portal__etapa--busca{ padding-top:24cqi; text-align:center; }
.portal__giro{
  display:block; width:20cqi; aspect-ratio:1; margin:0 auto 9cqi;
  border-radius:50%; border:1.6cqi solid rgba(20,21,24,.12); border-top-color:var(--volt);
}
@keyframes gira{ to{ rotate:1turn; } }
.portal__barra{
  position:relative; display:block; height:1.4cqi; margin-top:9cqi;
  border-radius:2cqi; background:rgba(20,21,24,.1); overflow:hidden;
}
.portal__barra::after{
  content:""; position:absolute; inset:0;
  background:var(--volt); transform-origin:left; scale:0 1;
}
@keyframes busca{ to{ scale:1 1; } }
.portal__etapa--docs{ padding-top:7cqi; }
.portal__equip{ margin-bottom:1.5cqi; padding-bottom:4.5cqi; border-bottom:.5cqi solid #141518; }
.portal__equip b{
  display:block; margin-bottom:1cqi;
  font-family:var(--display); font-weight:800; font-size:6.4cqi; line-height:1.02; text-transform:uppercase;
}
.portal__equip span{ font-family:var(--mono); font-size:3.4cqi; letter-spacing:.1em; color:#5d6166; }
.portal__docs{ list-style:none; margin:0; padding:0; }
.portal__docs li{
  display:flex; align-items:center; justify-content:space-between; gap:2cqi;
  padding:4cqi 0; border-bottom:1px solid rgba(20,21,24,.12);
  font-family:var(--display); font-weight:600; font-size:4.9cqi; line-height:1.1;
  letter-spacing:.02em; text-transform:uppercase;
}
.portal__baixar{
  flex:none; width:8cqi; height:8cqi; padding:1.6cqi; border-radius:50%;
  background:var(--volt);
  fill:none; stroke:#141518; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
@keyframes entra{ from{ opacity:0; translate:0 3cqi; } }

/* estados do palco — um por passo */
.rastro__palco[data-passo="1"] .placa__mira{ opacity:1; inset:-3.2cqi; }
.rastro__palco[data-passo="1"] .placa__etiqueta{ opacity:1; translate:0 0; }
.rastro__palco[data-passo="1"] .celular{ filter:brightness(.5); }

.rastro__palco[data-passo="2"] .placa__qr,
.rastro__palco[data-passo="3"] .placa__qr{ box-shadow:0 0 0 .5cqi var(--volt), 0 0 5cqi rgba(255,212,0,.35); }
.rastro__palco[data-passo="2"] .placa__scan{ animation:varre 2.2s var(--ease-io) infinite; }
.rastro__palco[data-passo="2"] .tela--camera,
.rastro__palco[data-passo="3"] .tela--camera{ opacity:1; }
.rastro__palco[data-passo="2"] .camera__linha{ animation:varre 2.2s var(--ease-io) infinite; }
.rastro__palco[data-passo="3"] .tela--camera{ filter:brightness(.5) blur(1px); }
.rastro__palco[data-passo="3"] .tela--aviso{ opacity:1; }
.rastro__palco[data-passo="3"] .aviso{ translate:0 0; }
.rastro__palco[data-passo="3"] .aviso__toque{ animation:toque 1.5s var(--ease) 1.1s infinite; }

.rastro__palco[data-passo="4"] .placa__dado--serie{ background-color:rgba(255,255,255,.4); box-shadow:0 0 0 .45cqi var(--volt); }
.rastro__palco[data-passo="4"] .tela--portal,
.rastro__palco[data-passo="5"] .tela--portal,
.rastro__palco[data-passo="6"] .tela--portal{ opacity:1; }
.rastro__palco[data-passo="4"] .portal__etapa--serie,
.rastro__palco[data-passo="5"] .portal__etapa--busca,
.rastro__palco[data-passo="6"] .portal__etapa--docs{ opacity:1; translate:0 0; }
.rastro__palco[data-passo="4"] .portal__digitado{ animation:digita 1.2s steps(6) .5s both; }
.rastro__palco[data-passo="4"] .portal__bt{ animation:aperta .5s var(--ease) 2.3s both; }
.rastro__palco[data-passo="5"] .portal__giro{ animation:gira .9s linear infinite; }
.rastro__palco[data-passo="5"] .portal__barra::after{ animation:busca 2.8s var(--ease-io) .2s both; }
.rastro__palco[data-passo="5"] .placa,
.rastro__palco[data-passo="6"] .placa{ filter:brightness(.62); }
.rastro__palco[data-passo="6"] .portal__docs li{ animation:entra .55s var(--ease) calc(var(--i) * 90ms + 150ms) both; }
.rastro__palco[data-passo="6"] .portal__docs li:first-child .portal__baixar{ animation:aperta .5s var(--ease) 1.6s both; }

/* palco estreito (celular): placa em cima, aparelho embaixo à esquerda */
@container palco (max-width:560px){
  /* o celular fica abaixo das duas primeiras linhas da placa: o nº de série,
     destacado no passo 4, não pode ficar coberto */
  .palco__altura{ padding-top:132%; }
  .placa{ left:5cqi; top:9cqi; width:90cqi; translate:none; }
  .celular{ left:7cqi; right:auto; top:auto; bottom:4cqi; width:37cqi; translate:none; }
  .rastro__palco[data-passo="1"] .celular{ translate:0 30cqi; }
  .palco__passo{ left:auto; right:6cqi; bottom:6cqi; font-size:max(.62rem,2.6cqi); }
}

/* passos */
.passos{ list-style:none; margin:0; padding:0; border-bottom:1px solid rgba(255,255,255,.1); }
.passo{ position:relative; border-top:1px solid rgba(255,255,255,.1); }
/* a barra do passo ativo é o relógio do fluxo: quando enche, o JS avança */
.passo::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:var(--volt); transform:scaleX(0); transform-origin:left;
}
.passo.is-ativo::before{ animation:enche var(--dur,4.2s) linear forwards; animation-play-state:paused; }
.rastro__fluxo.is-viva:not(:hover):not(:focus-within) .passo.is-ativo::before{ animation-play-state:running; }
@keyframes enche{ to{ transform:scaleX(1); } }
.passo__bt{
  display:grid; grid-template-columns:3rem minmax(0,1fr); align-items:baseline;
  width:100%; margin:0; padding:1.05rem 0;
  border:0; background:none; color:var(--smoke);
  font:inherit; text-align:left; cursor:pointer;
  transition:color .4s var(--ease);
}
.passo__bt:hover,
.passo.is-ativo .passo__bt{ color:var(--chalk); }
.passo__n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; transition:color .4s var(--ease); }
.passo.is-ativo .passo__n{ color:var(--volt); }
.passo__t{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem,1rem + .6vw,1.55rem);
  line-height:1.12; letter-spacing:.01em; text-transform:uppercase;
}
.passo__dobra{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); }
.passo.is-ativo .passo__dobra{ grid-template-rows:1fr; }
.passo__d{
  min-height:0; overflow:hidden; margin:0; padding-left:3rem;
  max-width:46ch; color:var(--smoke-2); font-size:.98rem; line-height:1.5;
}
.passo__d::after{ content:""; display:block; height:1.15rem; }

/* máquinas aplicáveis */
.rastro__maquinas{
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:1.2rem clamp(1.5rem,3vw,3rem); align-items:start;
  padding-top:clamp(1.6rem,3.5vh,2.6rem);
  border-top:1px solid rgba(255,255,255,.08);
}
.rastro__maquinas .rastro__rotulo{ margin:0; padding-top:.35rem; }
.maquinas{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.6rem clamp(1rem,2vw,2rem);
}
.maquina{ display:flex; flex-direction:column; gap:.9rem; }
.maquina svg{
  width:46px; height:46px;
  fill:none; stroke:var(--volt); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.maquina span{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1rem,.94rem + .3vw,1.2rem);
  line-height:1.12; letter-spacing:.01em; text-transform:uppercase;
}

@media (max-width:900px){
  .rastro__topo, .rastro__fluxo, .rastro__maquinas{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px){
  .maquinas{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:1.8rem; }
}
@media (prefers-reduced-motion:reduce){
  .passo.is-ativo::before{ animation:none; transform:scaleX(1); }
  .rastro__palco *, .rastro__palco *::before, .rastro__palco *::after{ animation:none !important; transition:none !important; }
  .portal__digitado{ width:6ch; }
  .portal__barra::after{ scale:1 1; }
}

/* Selos empilham junto com o burger. Medido: em três colunas estreitas
   (901–1080px) o subtítulo "Homologado pela concessionária" quebrava em duas
   linhas e desalinhava os nomes, e o nome caía para 26–30px. Empilhados, o
   logo encosta no nome em vez de ir para a outra ponta da linha. */
@media (max-width:1080px){
  .qual__selos{ grid-template-columns:1fr; }
  .selo__nome{ justify-content:flex-start; column-gap:1.2rem; }
}
@media (max-width:900px){
  .qual__ensaios, .qual__rastro{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------- contato */
.cta{
  position:relative;
  padding:clamp(7rem,18vh,14rem) var(--gut);
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(255,212,0,.07), transparent 60%),
    linear-gradient(to bottom, var(--ink), #08080a);
  border-top:1px solid rgba(255,255,255,.07);
  overflow:hidden;
}
.cta__inner{ max-width:var(--maxw); margin-inline:auto; }
.cta__title{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.6rem,.7rem + 8.4vw,11rem);
  line-height:.86; letter-spacing:-.025em; text-transform:uppercase;
  margin:0 0 1.8rem;
}
.cta__lede{ max-width:46ch; color:var(--smoke-2); margin:0 0 2.8rem; }
.cta__ways{
  list-style:none; margin:clamp(4rem,9vh,7rem) 0 0; padding:2.4rem 0 0;
  border-top:1px solid rgba(255,255,255,.1);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem);
}
.cta__ways li{ display:flex; flex-direction:column; gap:.6rem; }
.cta__k{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--smoke);
}
.cta__v{
  font-size:1.02rem; color:var(--chalk); word-break:break-word;
  transition:color .35s var(--ease);
}
a.cta__v:hover{ color:var(--volt); }
@media (max-width:860px){ .cta__ways{ grid-template-columns:repeat(2,1fr); row-gap:2rem; } }

/* mapa: placa discreta até alguém pedir; depois vira o embed */
.mapa{
  margin-top:clamp(2.5rem,6vh,4rem);
  max-width:var(--maxw);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(140deg, rgba(255,212,0,.05), transparent 60%), var(--ink-2);
  padding:clamp(1.6rem,3vw,2.4rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
}
.mapa__abrir{
  appearance:none; border:1px solid var(--volt); background:none; color:var(--volt);
  font-family:var(--display); font-weight:700; font-size:.9rem;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  padding:.7rem 1.3rem; display:inline-flex; align-items:center; gap:.6rem;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.mapa__abrir:hover{ background:var(--volt); color:#000; }
.mapa__nota{
  margin:0; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--smoke);
}
.mapa.is-aberto{ padding:0; display:block; }
.mapa__quadro{
  display:block; width:100%; height:clamp(260px,38vh,420px); border:0;
  /* o embed é claro; um pouco menos de brilho encaixa melhor no preto */
  filter:grayscale(.25) contrast(1.05) brightness(.92);
}

/* --------------------------------------------------------------- footer */
.foot{
  padding:clamp(3rem,7vh,5rem) var(--gut) 2.5rem;
  border-top:1px solid rgba(255,255,255,.07);
}
.foot__row{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem;
}
.foot__brand{
  font-family:var(--display); font-weight:900; font-size:1.3rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.foot__note{ color:var(--smoke); font-size:.95rem; }
/* ==========================================================================
   QUEM SOMOS (quem-somos.html)
   ========================================================================== */
.quem{
  max-width:calc(var(--maxw) + var(--gut) * 2); margin-inline:auto;
  padding:clamp(8.5rem,19vh,13rem) var(--gut) clamp(3rem,6vh,5rem);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
}
.quem__t{ margin:1.4rem 0 0; font-size:clamp(2.2rem,5.4vw,5.6rem); }
.quem__lede{ max-width:54ch; }
.quem__fabrica{
  margin:1.6rem 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:.55rem;
}
.quem__fabrica li{
  color:var(--smoke-2); font-size:1rem; padding-left:1.3rem; position:relative;
}
.quem__fabrica li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.6rem; height:1px; background:var(--volt);
}
.quem__depois{ margin:1.8rem 0 0; max-width:54ch; color:var(--smoke-2); }
.quem__foto{ margin:0; overflow:hidden; background:var(--ink-2); }
.quem__foto img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }

.quem__faixa{
  max-width:calc(var(--maxw) + var(--gut) * 2); margin-inline:auto;
  padding:clamp(2rem,5vh,4rem) var(--gut);
}
.quem__pilares{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.1);
  border-left:1px solid rgba(255,255,255,.1);
}
.quem__pilar{
  padding:clamp(1.5rem,2.6vw,2.4rem);
  border-right:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.quem__pt{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.3rem,1.1rem + .9vw,2rem);
  text-transform:uppercase; margin:0 0 1rem; color:var(--chalk);
}
.quem__pd{ margin:0; color:var(--smoke-2); line-height:1.7; }

.quem__textos{
  max-width:calc(var(--maxw) + var(--gut) * 2); margin-inline:auto;
  padding:clamp(2rem,5vh,4rem) var(--gut);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem) clamp(2rem,5vw,5rem);
}
.quem__bloco p{ margin:0 0 1.2rem; color:var(--smoke-2); line-height:1.75; max-width:56ch; }
.quem__h2{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.4rem);
  text-transform:uppercase; letter-spacing:-.01em; margin:0 0 1.2rem;
}
.quem__lista{ margin:0; padding-left:1.1rem; color:var(--smoke-2); line-height:1.7; }
.quem__lista li{ margin-bottom:.45rem; }
.baixar--solto{ margin-top:.6rem; border-bottom:1px solid rgba(255,255,255,.12); }

.quem__cert{
  max-width:calc(var(--maxw) + var(--gut) * 2); margin-inline:auto;
  padding:clamp(2rem,5vh,4rem) var(--gut);
}
.quem__cert p{ margin:0 0 1.4rem; color:var(--smoke-2); max-width:62ch; line-height:1.75; }
.quem__cert b{ color:var(--chalk); font-weight:400; }
.quem__certfoto{ margin:0; background:var(--ink-2); border:1px solid rgba(255,255,255,.1); }
.quem__certfoto img{ display:block; width:100%; height:auto; }
.quem__nota{
  margin-top:1.2rem !important;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--smoke);
}
.quem__nota a{ color:var(--volt); }

@media (max-width:900px){
  .quem{ grid-template-columns:1fr; }
  .quem__foto{ order:-1; }
  .quem__pilares{ grid-template-columns:1fr; }
  .quem__textos{ grid-template-columns:1fr; }
}

/* ==========================================================================
   ANÁLISE DE ÓLEO (analise-de-oleo.html)
   Página de laboratório: abertura, os ensaios em grade e os passos com foto.
   ========================================================================== */
.lab{
  max-width:calc(var(--maxw) + var(--gut) * 2); margin-inline:auto;
  padding:clamp(8.5rem,19vh,13rem) var(--gut) clamp(3rem,6vh,5rem);
}
.lab__t{ margin:1.4rem 0 0; font-size:clamp(2.2rem,5.4vw,5.6rem); }
.lab__lede{ max-width:62ch; }
.lab__acoes{ margin-top:clamp(2rem,4vh,3rem); display:flex; flex-wrap:wrap; gap:1rem; }

.lab__bloco{
  max-width:calc(var(--maxw) + var(--gut) * 2); margin-inline:auto;
  padding:clamp(3rem,7vh,5rem) var(--gut);
}
.lab__cabeca{ margin-bottom:clamp(2rem,5vh,3.5rem); }
.lab__h2{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.8rem,1.3rem + 2.2vw,3.4rem);
  line-height:.98; letter-spacing:-.015em; text-transform:uppercase;
  margin:1.2rem 0 0;
}
.lab__intro{ margin:1.4rem 0 0; max-width:60ch; color:var(--smoke-2); }

.lab__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.08);
  border-left:1px solid rgba(255,255,255,.08);
}
.lab__ensaio{
  padding:clamp(1.4rem,2.2vw,2.2rem);
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .5s var(--ease);
}
.lab__ensaio:hover{ background:#0e0e11; }
.lab__n{
  display:block; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.2em; color:var(--volt); margin-bottom:1rem;
}
.lab__et{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  text-transform:uppercase; letter-spacing:.005em; margin:0 0 .8rem;
}
.lab__ed{ margin:0; color:var(--smoke-2); font-size:.92rem; line-height:1.55; }

/* passos da análise de óleo: foto e texto lado a lado, alternando o lado
/* ⚠️ prefixo `lab__` de propósito: a home já usa `.passo` no fluxo do QR
   Code, e nomes iguais quebravam aquela seção.
, alternando o lado a cada passo */
.lab__passo{
  /* colunas iguais: com 0.9fr/1.1fr a foto mudava de tamanho a cada passo,
     porque ela troca de lado (order) e caía ora na coluna larga, ora na estreita */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem); align-items:center;
  padding:clamp(2rem,4vh,3.2rem) 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.lab__passo:nth-child(even) .lab__foto{ order:2; }
.lab__foto{ margin:0; overflow:hidden; background:var(--ink-2); }
/* as fotos vieram em retrato (3:4); o corte 5:4 perde menos, e cada uma
   traz seu ponto de interesse no `style` (o gerador põe) */
.lab__foto img{
  display:block; width:100%; height:auto; aspect-ratio:5/4; object-fit:cover;
}
/* passo com mais de uma foto: a principal em cima, as outras duas embaixo */
.lab__foto--mosaico{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(.5rem,1vw,.9rem);
  background:none; overflow:visible;
}
.lab__foto--mosaico img{ aspect-ratio:1/1; background:var(--ink-2); }
.lab__foto--mosaico img:first-child{ grid-column:1 / -1; aspect-ratio:5/4; }

.lab__passo-t{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.4rem,1.1rem + 1.2vw,2.3rem);
  text-transform:uppercase; letter-spacing:-.005em; margin:0 0 1rem;
}
.lab__passo-d{ margin:0; color:var(--smoke-2); max-width:52ch; line-height:1.7; }

/* normas: ensaio de um lado, as normas do outro */
.lab__normas{
  margin:0; border-top:1px solid rgba(255,255,255,.1);
}
.lab__norma{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:1rem clamp(1.5rem,4vw,4rem);
  padding:clamp(1.2rem,2.4vh,1.8rem) 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.lab__norma dt{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1rem,.95rem + .35vw,1.25rem);
  text-transform:uppercase; letter-spacing:.01em; color:var(--chalk);
}
.lab__norma dd{ margin:0; }
.lab__norma ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.lab__norma b{
  font-family:var(--mono); font-weight:500; font-size:.82rem;
  letter-spacing:.08em; color:var(--volt);
}
.lab__norma span{ color:var(--smoke-2); font-size:.92rem; }
.lab__norma span::before{ content:"— "; color:var(--smoke); }

@media (max-width:640px){
  .lab__norma{ grid-template-columns:1fr; gap:.7rem; }
}

.lab__volta{
  margin:clamp(1.6rem,3vh,2.4rem) 0 0; color:var(--smoke);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
}
.lab__volta a{ color:var(--volt); }
.lab__fim{
  max-width:calc(var(--maxw) + var(--gut) * 2); margin-inline:auto;
  padding:clamp(2rem,5vh,4rem) var(--gut) clamp(5rem,10vh,8rem);
}

@media (max-width:1080px){ .lab__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .lab__passo{ grid-template-columns:1fr; }
  .lab__passo:nth-child(even) .lab__foto{ order:0; }
}
@media (max-width:520px){ .lab__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PÁGINAS INSTITUCIONAIS (ouvidoria, compliance, termos, privacidade)
   Texto longo: coluna estreita, serifa do corpo e números em amarelo.
   ========================================================================== */
.doc{
  max-width:calc(var(--maxw) + var(--gut) * 2);
  margin-inline:auto;
  padding:clamp(8.5rem,19vh,13rem) var(--gut) clamp(5rem,10vh,8rem);
}
.doc__topo{ border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:clamp(2rem,4vh,3rem); }
.doc__t{ margin:1.4rem 0 0; font-size:clamp(2.2rem,5.4vw,5.6rem); }
.doc__meta{
  margin:1.6rem 0 0;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--smoke);
}
.doc__corpo{
  margin-top:clamp(2.5rem,6vh,4rem);
  max-width:70ch;
  font-size:1.02rem; line-height:1.75; color:var(--smoke-2);
}
.doc__corpo p{ margin:0 0 1.5rem; }
.doc__lede{
  font-size:clamp(1.1rem,1rem + .4vw,1.35rem); line-height:1.6;
  color:var(--chalk); margin-bottom:2.4rem !important;
}
.doc__corpo a{ color:var(--volt); text-decoration:underline; text-underline-offset:.2em; }
.doc__h{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.2rem,1rem + .8vw,1.7rem);
  text-transform:uppercase; letter-spacing:.01em; color:var(--chalk);
  margin:2.8rem 0 1rem; display:flex; gap:.9rem; align-items:baseline;
}
.doc__n{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--volt); flex:0 0 auto;
}
.doc__corpo ul{ margin:0 0 1.5rem; padding-left:1.1rem; }
.doc__corpo li{ margin-bottom:.5rem; }

/* formulário do canal de denúncias */
.form{
  margin-top:clamp(2.5rem,6vh,4rem);
  display:flex; flex-direction:column; gap:1.6rem;
}
.form__campo{ display:flex; flex-direction:column; gap:.6rem; }
.form__campo[hidden]{ display:none; }
.form label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--smoke);
}
.form__req{ color:var(--volt); font-weight:400; }
.form input,
.form select,
.form textarea{
  width:100%; appearance:none;
  background:var(--ink-2); color:var(--chalk);
  border:1px solid rgba(255,255,255,.14); border-radius:0;
  padding:.85rem 1rem;
  font-family:var(--serif); font-size:1rem; line-height:1.5;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.form textarea{ resize:vertical; min-height:9rem; }
.form select{
  /* seta própria: a nativa não acompanha a paleta */
  background-image:linear-gradient(45deg,transparent 50%,var(--volt) 50%),
                   linear-gradient(135deg,var(--volt) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:2.6rem; cursor:pointer;
}
.form option{ background:var(--ink-2); color:var(--chalk); }
.form input::placeholder,
.form textarea::placeholder{ color:var(--smoke); opacity:.75; }
.form input:focus,
.form select:focus,
.form textarea:focus{ outline:none; border-color:var(--volt); background:var(--ink-3); }
.form .btn{ align-self:flex-start; }
.form__estado{
  margin:0 !important;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--volt);
}
.form__estado.is-erro{ color:#ff6b6b; }
/* o `display` do autor vence o `hidden` do navegador: sem esta linha o painel
   fica como uma caixa vazia embaixo do botão */
.form__saida[hidden]{ display:none; }
.form__saida{
  display:flex; flex-direction:column; gap:1rem;
  padding:clamp(1.2rem,2.4vw,1.8rem);
  border:1px solid rgba(255,255,255,.12); background:var(--ink-2);
}
.form__nota{ margin:0 !important; font-size:.95rem; color:var(--smoke-2); }
.form__previa{ font-family:var(--mono); font-size:.86rem; }
.form__acoes{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* bloco de ação no fim da página (canal da ouvidoria, PDF do compliance) */
.doc__canal{
  margin-top:clamp(2.5rem,6vh,4rem);
  padding:clamp(1.8rem,3vw,2.6rem);
  border:1px solid rgba(255,212,0,.24);
  background:linear-gradient(140deg, rgba(255,212,0,.06), transparent 60%);
}
.doc__canal-t{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.3rem,1.1rem + .9vw,2rem);
  text-transform:uppercase; margin:0 0 1.4rem; color:var(--chalk);
}
.doc__canal-d{ margin:0 0 1.6rem; }
.doc__canal-vias{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.6rem;
}
.doc__canal-vias li{ display:flex; flex-direction:column; gap:.5rem; margin:0; }
/* lista de documentos para baixar (compliance) */
.doc__baixas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.doc__baixas li{ margin:0; }
.baixar{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:.2rem 1.2rem; padding:1.1rem 0;
  border-top:1px solid rgba(255,255,255,.12);
  transition:padding-left .4s var(--ease);
}
.doc__baixas li:last-child .baixar{ border-bottom:1px solid rgba(255,255,255,.12); }
.baixar:hover{ padding-left:.6rem; }
.baixar__t{
  font-family:var(--display); font-weight:700; font-size:1.1rem;
  text-transform:uppercase; letter-spacing:.01em; color:var(--chalk);
  transition:color .35s var(--ease);
}
.baixar:hover .baixar__t{ color:var(--volt); }
.baixar__m{
  grid-column:1; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--smoke);
}
.baixar__i{
  grid-column:2; grid-row:1 / span 2;
  font-size:1.2rem; color:var(--volt);
  transition:transform .4s var(--ease);
}
.baixar:hover .baixar__i{ transform:translateY(3px); }

.doc__nota{
  margin:1rem 0 0 !important;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--smoke);
}

.doc__outras{
  max-width:70ch; margin-top:clamp(3rem,7vh,5rem);
  padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.1);
}
.doc__outras-t{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--volt); margin:0 0 1.1rem;
}
.doc__outras ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.doc__outras a{ color:var(--smoke-2); transition:color .35s var(--ease); }
.doc__outras a:hover{ color:var(--volt); }

.foot__legais{
  max-width:var(--maxw); margin:2.5rem auto 0; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.8rem clamp(1.4rem,3vw,2.8rem);
}
.foot__legais-t{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--volt);
  margin:0; flex:0 0 100%;
}
.foot__legais ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.7rem clamp(1.4rem,3vw,2.8rem);
}
.foot__legais a{
  color:var(--smoke-2); font-size:.92rem;
  transition:color .35s var(--ease);
}
.foot__legais a:hover{ color:var(--volt); }

.foot__row--fine{
  margin-top:2.5rem; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.06);
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--smoke);
}
.foot__row--fine a{ transition:color .35s var(--ease); }
.foot__row--fine a:hover{ color:var(--volt); }

/* --------------------------------------------------------------- estados iniciais (JS liga) */
.js .line__in{ transform:translateY(105%); }
.js .fade{ opacity:0; }

/* ==========================================================================
   MOBILE / TABLET
   Os tamanhos de display abaixo vêm de medir a largura real do texto em
   canvas (em "em" por linha) e dividir pela largura útil, em vez de chutar:
   "Engenharia" = 4.13em · "Confiabilidade." = 5.53em ·
   "Pronto para energizar" = 8.01em · "Nossa fábrica é onde" = 7.5em.
   ========================================================================== */
/* Header: SEIS itens na nav + consulta + orçamento (o "Quem somos" entrou em
   25/set/2026). Medido de novo: os itens somam 487px e, com gap de 2rem, a nav
   pede 647px; somando marca (103), ações (343) e as calhas, o cabeçalho só
   cabe inteiro a partir de ~1244px. Por isso o gap fecha para 1,4rem antes
   disso e, abaixo de 1240px, a nav inteira vai para o menu (burger), que já
   leva a consulta. A consulta encurta em 1299px e o "Solicitar orçamento" vira
   "Orçamento" em 1279px — os dois só aparecem na faixa larga. */
@media (max-width:1460px){
  .head__nav{ gap:1.4rem; }
}
@media (max-width:1299px){
  .head__consulta-longo{ display:none; }
  .head__consulta-curto{ display:inline; }
}
@media (max-width:1279px){
  .head__cta-longo{ display:none; }
  .head__cta-curto{ display:inline; }
}

@media (max-width:1240px){
  .head__nav{ display:none; }
  .burger{ display:block; }
  .head__consulta{ display:none; }
}

@media (max-width:600px){
  :root{
    --gut:max(1.25rem, env(safe-area-inset-left));
  }

  .head{ padding-block:.8rem; }
  .head__word{ height:16px; }
  .head__cta{ font-size:.8rem; padding:.55rem .85rem; }
  .head__cta-longo{ display:none; }
  .head__cta-curto{ display:inline; }

  /* HERO — o título cabia até ~81px e estava em 49,6px; daí o vazio.
     190svh em vez de 360svh: no celular 3,6 telas só de hero é demais. */
  .hero__track{ height:190svh; }
  .hero__title{ font-size:16vw; }   /* era 19,5vw — reduzido junto com o desktop */
  .hero__content{ padding-top:clamp(4.5rem,13vh,7rem); }
  .hero__sub{ font-size:1rem; min-height:0; max-width:32ch; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }

  /* medido com a fonte real: "TRANSFORMADORES" (o título da Linha) só cabe na
     largura útil até 46,3px em 375px de tela; 12,5vw dava 46,9px e estourava */
  .h2{ font-size:11.8vw; }
  /* sem a quebra manual o título da Linha cai em três linhas certinhas:
     "CONHEÇA NOSSO / CATÁLOGO DE / TRANSFORMADORES" */
  #linha .h2 br{ display:none; }
  .cta__title{ font-size:10.6vw; }
  .fab__quote{ font-size:11.5vw; }
  .team__quote{ font-size:8.5vw; }     /* linhas longas: quebram, e isso é ok */

  /* PROCESSO — no celular o painel fixo sai e cada etapa mostra a
     própria mídia inline (regra em .etapa__mob, na seção do processo). */
  .etapa{ padding-left:1.6rem; padding-bottom:clamp(2.8rem,7vh,4rem); }
  .etapa__t{ font-size:9vw; }

  .num__val{ font-size:13vw; }
  .cta__ways{ grid-template-columns:1fr; }
  .foot__row{ flex-direction:column; align-items:flex-start; gap:.5rem; }
}

/* --------------------------------------------------------------- reduced 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;
  }
  .hero__track{ height:auto; }
  .hero__sticky{ position:relative; height:auto; min-height:100svh; }
  .proc__palco{ position:static; height:auto; }
  .etapa__d{ opacity:1; color:var(--smoke-2); }
  .etapa__t{ color:var(--chalk); }
  .etapa__ponto{ border-color:var(--volt); background:var(--volt); }
  .proc__preenche{ transform:scaleY(1); }
  .js .line__in{ transform:none; }
  .js .fade{ opacity:1; }
  .caret{ display:none; }
  .cursor{ display:none; }
}

/* ==========================================================================
   CATÁLOGO — overlay aberto pelos cards da seção Linha
   ========================================================================== */
.cat{
  position:fixed; inset:0; z-index:800;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.cat[hidden]{ display:none; }
.cat.is-open{ opacity:1; visibility:visible; }

.cat__fundo{
  position:absolute; inset:0;
  background:rgba(3,3,4,.82);
  backdrop-filter:blur(10px);
}

.cat__painel{
  position:absolute; inset:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(1.5rem,4vh,3rem) var(--gut) clamp(3rem,8vh,6rem);
  background:linear-gradient(to bottom, #0a0a0c 0%, var(--ink) 40%);
  transform:translateY(24px);
  transition:transform .55s var(--ease);
}
.cat.is-open .cat__painel{ transform:translateY(0); }

.cat__topo{
  position:relative;
  max-width:var(--maxw); margin:0 auto clamp(1.2rem,3vh,2rem);
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
}
.cat__titulo{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2rem,1.1rem + 3.4vw,4.4rem);
  line-height:.92; letter-spacing:-.018em; text-transform:uppercase;
  margin:0;
}
.cat__fechar{
  position:relative; flex:none;
  width:48px; height:48px;
  background:transparent; border:1px solid var(--steel-2);
  cursor:pointer;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.cat__fechar:hover{ border-color:var(--volt); background:rgba(255,212,0,.08); }
.cat__fechar span{
  position:absolute; left:13px; top:23px; width:22px; height:1.5px;
  background:var(--chalk);
}
.cat__fechar span:nth-child(1){ transform:rotate(45deg); }
.cat__fechar span:nth-child(2){ transform:rotate(-45deg); }

.cat__lede{
  max-width:56ch; margin:0 auto clamp(2rem,5vh,3.5rem);
  color:var(--smoke-2);
  font-size:clamp(1rem,.95rem + .3vw,1.2rem);
}
.cat__lede, .cat__topo, .cat__grid, .cat__medida{ max-width:var(--maxw); margin-inline:auto; }

/* volta do catálogo recortado (aberto por um card) para as nove linhas */
.cat__tudo{
  display:inline-flex; align-items:center; gap:.6rem;
  max-width:var(--maxw); margin:1.4rem auto 0; padding:0;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:.88rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--volt);
  transition:gap .4s var(--ease);
}
.cat__tudo:hover{ gap:1rem; }
.cat__tudo[hidden]{ display:none; }

.cat__grid{
  list-style:none; padding:0; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.08);
  border-left:1px solid rgba(255,255,255,.08);
}
.item{
  display:flex; flex-direction:column;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .5s var(--ease);
}
/* o display acima vence o [hidden] do HTML: sem esta regra, o item some da
   contagem mas continua ocupando a grade quando o catálogo é recortado */
.item[hidden]{ display:none; }
/* foto de cena (aluguel): preenche o quadro, sem o respiro dos renders */
/* modelo ainda sem foto: a marca segura o lugar, discreta, no mesmo quadro
   14:10 dos outros — trocar por foto quando o cliente mandar */
.item__vis--marca{ display:grid; place-items:center; }
.item__vis--marca svg{ width:22%; height:auto; opacity:.16; padding:0; }
.item:hover .item__vis--marca svg{ transform:none; }

/* foto real preenche o quadro. Precisa das duas classes: `.item__vis img`
   (contain + margem de 6%, para os renders) vem depois e anulava esta regra. */
.item__vis.item__vis--foto img{ object-fit:cover; padding:0; }
.item:hover{ background:#0e0e11; }

.item__vis{
  position:relative; margin:0;
  aspect-ratio:14/10;
  background:radial-gradient(120% 90% at 50% 15%, #16171b 0%, #0b0b0d 60%, var(--ink) 100%);
  overflow:hidden;
}
.item__vis img{
  width:100%; height:100%; object-fit:contain;
  padding:6%;
  transform:scale(1);
  transition:transform .7s var(--ease);
  will-change:transform;
}
.item:hover .item__vis img{ transform:scale(1.05); }

/* Cartões com filme.
   A imagem parada é o quadro zero do próprio clipe, recortada em 14:10 — o
   mesmo recorte que o `cover` faz no vídeo. Então as duas camadas coincidem
   pixel a pixel e a troca no hover não tem emenda: nada salta de escala,
   só o clipe começa a andar. Por isso aqui o `img` não ganha o zoom de
   hover dos outros cartões e o vídeo entra sem transform. */
.item__vis--filme img{
  object-fit:cover; padding:0;
  transition:opacity .4s var(--ease);
}
.item:hover .item__vis--filme img{ transform:none; }
.item:hover .item__vis--filme img,
.item:focus-within .item__vis--filme img{ opacity:0; }
.item__filme{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
.item:hover .item__filme,
.item:focus-within .item__filme{ opacity:1; }
/* últimos instantes antes do loop voltar — ver `data-dissolve` no main.js */
.item:hover .item__filme.is-fim,
.item:focus-within .item__filme.is-fim{ opacity:0; }

/* No toque não existe hover: o main.js põe `is-tocando` no item que está na
   tela e o clipe aparece do mesmo jeito. As regras são iguais às do :hover —
   só muda o gatilho. */
.item.is-tocando .item__vis--filme img{ opacity:0; transform:none; }
.item.is-tocando .item__filme{ opacity:1; }
.item.is-tocando .item__filme.is-fim{ opacity:0; }

.item__corpo{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(1.3rem,2vw,2rem);
}
.item__n{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  color:var(--volt); margin-bottom:.9rem;
}
.item__t{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.15rem,1rem + .6vw,1.6rem);
  line-height:1.02; letter-spacing:-.005em; text-transform:uppercase;
  margin:0 0 1.1rem; text-wrap:balance;
}
.item__specs{
  margin:0 0 1rem; padding-top:1rem;
  display:flex; flex-direction:column; gap:.6rem;
  border-top:1px solid rgba(255,255,255,.09);
}
.item__specs div{ display:flex; flex-direction:column; gap:.2rem; }
.item__specs dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--smoke);
}
.item__specs dd{
  margin:0; font-family:var(--display); font-weight:700; font-size:1rem;
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.item__app{
  margin:0; flex:1;
  color:var(--smoke-2); font-size:.9rem; line-height:1.5;
}
.item__norma{
  margin:1rem 0 0; padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.07);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--smoke);
}
.item__cta{
  margin-top:1.2rem;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:700; font-size:.86rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--volt);
  transition:gap .4s var(--ease);
}
.item__cta:hover{ gap:.9rem; }

.cat__medida{
  margin-top:clamp(2.5rem,6vh,4.5rem);
  padding:clamp(1.8rem,3vw,3rem);
  border:1px solid rgba(255,212,0,.24);
  background:linear-gradient(140deg, rgba(255,212,0,.06), transparent 60%);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.8rem;
}
.cat__medida-t{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.4rem,1.1rem + 1.2vw,2.4rem);
  text-transform:uppercase; letter-spacing:-.008em;
  margin:0 0 .7rem;
}
.cat__medida-d{ margin:0; max-width:52ch; color:var(--smoke-2); }

/* botão que abre o catálogo, dentro dos cards da Linha */
.card__abrir{
  margin-top:1.4rem;
  display:inline-flex; align-items:center; gap:.6rem;
  background:transparent; border:0; padding:0; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:.88rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--volt);
  transition:gap .4s var(--ease);
}
.card__abrir:hover{ gap:1rem; }
.card__seta{ transition:transform .4s var(--ease); }
.card:hover .card__seta{ transform:translateX(3px); }

/* ---------------------------------------------------------------------------
   Recorte com poucos modelos (o `data-qtd` vem do filtrar(), em main.js).

   Com um modelo só, a grade de três colunas deixava a ficha espremida num
   canto e dois terços de tela preta ao lado. Aqui ela vira ficha larga: foto
   grande à esquerda, texto maior à direita.
   --------------------------------------------------------------------------- */
.cat__grid[data-qtd="1"]{ grid-template-columns:minmax(0,1fr); }
.cat__grid[data-qtd="1"] .item{ flex-direction:row; align-items:stretch; }
.cat__grid[data-qtd="1"] .item__vis{
  flex:0 0 56%; aspect-ratio:auto; min-height:clamp(340px,52vh,560px);
}
.cat__grid[data-qtd="1"] .item__corpo{
  justify-content:center; padding:clamp(1.8rem,3.4vw,3.4rem);
}
.cat__grid[data-qtd="1"] .item__t{
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.6rem); margin-bottom:1.6rem;
}
.cat__grid[data-qtd="1"] .item__specs{ gap:1rem; padding-top:1.4rem; margin-bottom:1.4rem; }
.cat__grid[data-qtd="1"] .item__specs dd{ font-size:1.25rem; }
.cat__grid[data-qtd="1"] .item__app{ font-size:1.02rem; flex:0 1 auto; margin-bottom:1.6rem; }
.cat__grid[data-qtd="1"] .item__cta{ font-size:1rem; }

/* dois modelos: metade da largura cada um, em vez de um terço */
.cat__grid[data-qtd="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }

@media (max-width:860px){
  /* no celular a ficha volta a ser empilhada: lado a lado não cabe */
  .cat__grid[data-qtd="1"] .item{ flex-direction:column; }
  .cat__grid[data-qtd="1"] .item__vis{ flex:none; aspect-ratio:14/10; min-height:0; }
}

@media (max-width:1080px){ .cat__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .cat__grid{ grid-template-columns:1fr; }
  .cat__medida{ flex-direction:column; align-items:stretch; }
  .cat__medida .btn{ justify-content:center; }
  .cat__painel{ padding-top:1.2rem; }
}

@media (prefers-reduced-motion:reduce){
  .cat__painel{ transform:none; }
  .item__vis img{ transform:none !important; }
  /* sem movimento: o clipe do cartão não entra e o render fica de pé */
  .item__filme{ display:none; }
  .item:hover .item__vis--filme img,
  .item:focus-within .item__vis--filme img{ opacity:1; }
}

/* ==========================================================================
   PÁGINA DE SERVIÇOS (servicos.html)
   Reaproveita a grade do catálogo (.cat__grid/.item); aqui ficam só a
   abertura, a faixa de contato e o respiro sob o header fixo.
   ========================================================================== */
.svc{
  max-width:calc(var(--maxw) + var(--gut) * 2);
  margin-inline:auto;
  padding:clamp(8.5rem,19vh,13rem) var(--gut) clamp(3rem,7vh,5rem);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,5rem); align-items:center;
}
/* a coluna é mais estreita que a da home: 'TRANSFORMADORES' precisa caber nela */
.svc__t{ margin:1.4rem 0 0; font-size:clamp(2.2rem,5.4vw,5.6rem); }
.svc__lede{ max-width:54ch; }
.svc__acoes{
  margin-top:clamp(2rem,4vh,3rem);
  display:flex; flex-wrap:wrap; gap:1rem;
}
.svc__foto{
  margin:0; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.08); background:var(--ink-2);
}
.svc__foto::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:var(--volt); transform:scaleX(.18); transform-origin:left;
}
/* height="860" no HTML vira altura de apresentação e mata o aspect-ratio */
.svc__foto img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

.svc__lista{ padding:0 var(--gut) clamp(5rem,10vh,8rem); }

.svc__contato{
  padding:clamp(4rem,9vh,7rem) var(--gut) clamp(6rem,12vh,9rem);
  border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(to bottom, var(--ink), #08080a);
}
.svc__contato .cta__ways{
  max-width:var(--maxw); margin:0 auto; padding-top:0; border-top:0;
}

@media (max-width:900px){
  .svc{ grid-template-columns:1fr; gap:2.5rem; padding-top:clamp(7rem,16vh,10rem); }
  .svc__foto{ order:-1; }
}