/* ============================================================
   UltraLeve Metalúrgica
   Preto + cromado + laranja de forja
   Assinatura visual: o corte de chapa a plasma entre as seções
   ============================================================ */

:root{
  /* superfícies */
  --ink-950:#050607;
  --ink-900:#08090b;
  --ink-850:#0c0e10;
  --ink-800:#131619;
  --ink-750:#191d21;
  --ink-700:#20252a;
  --line:#252b31;
  --line-hi:#39424a;

  /* aço */
  --steel-050:#ffffff;
  --steel-100:#e9eef2;
  --steel-200:#c6ced6;
  --steel-300:#9fa9b3;
  --steel-400:#8b959f;
  --steel-500:#6b747d;

  /* forja */
  --fire-300:#ff9a45;
  --fire-400:#ff8a2b;
  --fire-500:#f26a0a;
  --fire-600:#d14e04;
  --fire-700:#b03c02;

  /* cromado, a rampa que dá o brilho do logo.
     As paradas escuras ficam acima de #7d8791 pra não perder contraste no preto. */
  --chrome: linear-gradient(178deg,
    #ffffff 0%, #dde3e9 16%, #9aa4ae 34%,
    #7d8791 47%, #ffffff 52%, #f2f6f9 58%,
    #b3bcc4 74%, #8b949d 88%, #d8dfe5 100%);

  /* tipografia */
  --disp:"Archivo", "Arial Narrow", sans-serif;
  --body:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  /* ritmo */
  --wrap:1340px;
  --pad:clamp(1.25rem, 4vw, 2.5rem);
  --sec:clamp(3rem, 4.2vw, 4.25rem);
  --r:10px;
  --hdr:104px;

  /* motion */
  --q:cubic-bezier(.23,1,.32,1);
  --io:cubic-bezier(.645,.045,.355,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--steel-100);
  font:400 1rem/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
/* marca do WhatsApp: glifo cheio, o unico do jogo que nao e em traco.
   Desenhar a bolha em traco com o fone chapado dava um borrao no lugar do fone. */
.ico-wa{fill:currentColor;stroke:none;transform:scale(.94)}

/* superfícies do navegador, não deixar no default */
::selection{background:var(--fire-600);color:#fff}
:focus-visible{outline:2px solid var(--fire-400);outline-offset:3px;border-radius:3px}
html{scrollbar-color:var(--line-hi) var(--ink-950);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink-950)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--line-hi),var(--line));
  border:2px solid var(--ink-950);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--fire-700)}

.skip{position:fixed;top:-100px;left:16px;z-index:200;background:var(--fire-500);
  color:#fff;padding:.7rem 1.1rem;border-radius:6px;font:600 .9rem var(--body);
  transition:top .2s var(--q)}
.skip:focus{top:16px}

.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.wrap--nar{max-width:820px}

/* ---------- tipografia ---------- */
.h2{
  font:800 clamp(1.85rem,4.4vw,3.4rem)/1.05 var(--disp);
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-wrap:balance;
}
.lede{color:var(--steel-300);font-size:clamp(.98rem,1.6vw,1.08rem);
  line-height:1.7;max-width:62ch;margin-top:1.1rem}
.eyebrow{font:600 .74rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fire-500);margin-bottom:.85rem}
.spec{font:500 .74rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-500)}
.spec i,.hero__over i,.hero__note i,.final__n i{font-style:normal;color:var(--fire-600);
  padding:0 .35em}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* cromado, o motivo da marca */
.chrome{
  background:var(--chrome);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-stroke:.5px rgba(0,0,0,.35);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 22px rgba(190,205,218,.14));
  display:inline-block;
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font:700 1.1875rem/1 var(--disp);letter-spacing:.005em;
  padding:1rem 1.6rem;border-radius:8px;border:1px solid transparent;
  position:relative;isolation:isolate;
  transition:transform .18s var(--q),box-shadow .25s var(--q),
             background-color .2s var(--q),border-color .2s var(--q),color .2s var(--q);
}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn--lg{padding:1.15rem 2rem;font-size:1.25rem}

.btn--fire{
  background:linear-gradient(180deg,var(--fire-500),var(--fire-700));
  color:#fff;
  box-shadow:0 1px 0 rgba(255,190,140,.4) inset,
             0 10px 26px -12px rgba(242,106,10,.85);
}
.btn--fire:hover{
  background:linear-gradient(180deg,var(--fire-400),var(--fire-600));
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,205,165,.55) inset,
             0 16px 34px -12px rgba(242,106,10,.95);
}
.btn--fire:active{transform:translateY(0) scale(.985)}

.btn--steel,.btn--ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border-color:var(--line-hi);color:var(--steel-100);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset;
}
.btn--steel:hover,.btn--ghost:hover{
  border-color:var(--fire-600);color:#fff;transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 12px 28px -16px rgba(242,106,10,.7);
}
.btn--steel:active,.btn--ghost:active{transform:translateY(0) scale(.985)}
.btn--ghost{font-size:1.0625rem;padding:.72rem 1.15rem}
.btn--ghost svg{color:var(--fire-400)}

.btn--wire{
  background:transparent;border-color:var(--line-hi);color:var(--fire-400);
  font-size:1.0625rem;padding:.85rem 1.4rem;width:100%;
}
.btn--wire:hover{border-color:var(--fire-500);background:rgba(242,106,10,.09);color:var(--fire-300)}

/* ============================================================
   ASSINATURA: corte de chapa a plasma
   ============================================================ */
/* cor neutra semitransparente: a divisória fica entre seções que podem
   ser claras ou escuras, então não pode depender do tema de nenhuma delas */
.cut{position:relative;height:1px;background:rgba(130,142,154,.3);overflow:visible;z-index:2}
.cut i{
  position:absolute;left:0;right:0;top:-1px;height:3px;display:block;
  background:linear-gradient(90deg,
    transparent 0%, rgba(242,106,10,0) 8%,
    var(--fire-500) 30%, var(--fire-300) 50%, var(--fire-500) 70%,
    rgba(242,106,10,0) 92%, transparent 100%);
  filter:blur(.5px) drop-shadow(0 0 8px rgba(242,106,10,.85))
         drop-shadow(0 0 26px rgba(242,106,10,.45));
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform 1.1s var(--q),opacity .6s ease;
  opacity:0;
}
.cut.in i{transform:scaleX(1);opacity:1}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(8,9,11,.55);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--q),border-color .3s var(--q);
}
.hdr.stuck{background:rgba(6,7,9,.92);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:1.5rem;height:var(--hdr)}
/* altura fixa no logo: é ela que define a altura real do header,
   e a faixa correndo depende desse número para não ficar escondida atrás */
.hdr__logo img{height:72px;width:auto;object-fit:contain}
.hdr__logo{transition:opacity .2s var(--q)}
.hdr__logo:hover{opacity:.82}

.hdr__nav{display:flex;gap:1.7rem;margin-left:auto}
.hdr__nav a{
  font:600 .8rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel-300);padding:.5rem 0;position:relative;
  transition:color .2s var(--q);
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--fire-500);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--q);
}
.hdr__nav a:hover{color:#fff}
.hdr__nav a:hover::after{transform:scaleX(1)}

.hdr__end{display:flex;align-items:center;gap:1rem;margin-left:auto}
.hdr__nav+.hdr__end{margin-left:0}
.hdr__ig{display:inline-flex;align-items:center;gap:.5rem;color:var(--steel-400);
  font:500 .8rem var(--mono);transition:color .2s var(--q)}
.hdr__ig svg{width:1.15rem;height:1.15rem}
.hdr__ig:hover{color:var(--fire-400)}

.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;border:1px solid var(--line);border-radius:8px}
.burger span{display:block;width:19px;height:1.5px;background:var(--steel-100);
  transition:transform .3s var(--q),opacity .2s var(--q)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* só para leitor de tela */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ---------- faixa correndo ---------- */
.faixa{
  position:absolute;top:0;left:0;right:0;z-index:3;
  padding:calc(var(--hdr) + .5rem) 0 .5rem;
  background:linear-gradient(180deg,rgba(5,6,7,.82),rgba(5,6,7,.32));
  border-bottom:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.faixa__t{display:flex;width:max-content;animation:corre 34s linear infinite}
.faixa__t span{
  flex:none;padding-right:2.5rem;
  font:600 .74rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel-300);white-space:nowrap;
}
.faixa__t i{font-style:normal;color:var(--fire-500);padding:0 .7em}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;
  min-height:min(83vh,752px);
  display:grid;align-items:center;
  padding:calc(var(--hdr) + clamp(3.5rem,6vw,5.5rem)) 0 clamp(2.75rem,5vw,4.5rem);
  background:var(--ink-950);
  overflow:hidden;
}
/* fundo do hero: só existe no desktop, então o arquivo grande nem é baixado no celular */
.hero__bg{display:none}
@media (min-width:1001px){
  .hero__bg{
    display:block;position:absolute;inset:0;z-index:-2;
    background:url("../img/hero-desktop-sm.jpg") 100% 62%/cover no-repeat;
    animation:heroIn 1.6s var(--q) both;
  }
}
@media (min-width:1301px){
  .hero__bg{background-image:url("../img/hero-desktop.jpg")}
}
@keyframes heroIn{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}

/* véu que abre espaço legível para o texto sem apagar o produto */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(94deg,rgba(5,6,7,.955) 0%,rgba(5,6,7,.94) 26%,rgba(5,6,7,.74) 45%,
                    rgba(5,6,7,.24) 64%,rgba(5,6,7,0) 81%),
    linear-gradient(180deg,rgba(5,6,7,.8) 0%,rgba(5,6,7,0) 30%),
    linear-gradient(0deg,var(--ink-900) 0%,rgba(8,9,11,0) 30%);
}
/* o .wrap já centraliza a coluna de 1240px.
   Limitar a largura AQUI centralizaria o bloco na viewport e jogaria a headline
   pro meio da tela. A trava de medida vai nos filhos, que ficam colados na margem. */
.hero__in{position:relative}
.hero__in > *{max-width:700px}
/* a headline precisa de mais espaço que o resto pra "PINOS E CUNHAS" caber numa linha só */
.hero__h1{max-width:min(940px,64vw)}
/* imagem no fluxo, só no celular */
.hero__ph{display:none}

.hero__over{
  font:600 .78rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel-200);margin-bottom:1.4rem;
}
.hero__h1{margin:0;font-family:var(--disp);text-transform:uppercase}
.hero__h1 .chrome{
  display:block;
  font-size:clamp(2rem,4.9vw,3.75rem);font-weight:900;
  letter-spacing:-.045em;line-height:.95;text-wrap:balance;
}
.hero__h1b{
  display:block;margin-top:.34em;
  font-size:clamp(1.2rem,2.5vw,1.85rem);font-weight:700;line-height:1.15;
  letter-spacing:-.028em;color:var(--steel-100);
  text-shadow:0 2px 20px rgba(0,0,0,.92);
}
.hero__grito{
  display:block;margin-bottom:.6rem;
  font:800 clamp(1rem,1.55vw,1.18rem)/1.3 var(--disp);
  letter-spacing:-.01em;text-transform:uppercase;color:#fff;
}
.hero__sub{
  margin-top:1.35rem;max-width:48ch;color:var(--steel-200);
  font-size:clamp(.97rem,1.55vw,1.06rem);line-height:1.6;
  text-shadow:0 1px 12px rgba(0,0,0,.85);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem}
.hero__note{margin-top:1.35rem;font:500 .76rem/1.5 var(--mono);
  letter-spacing:.11em;text-transform:uppercase;color:var(--steel-400)}

/* entrada escalonada do hero */
.stag{animation:stagIn .8s var(--q) both;animation-delay:var(--d,0ms)}
@keyframes stagIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- seções ---------- */
.sec{padding:var(--sec) 0;position:relative}
/* duas seções coladas sem corte no meio somam padding demais */
.sec + .sec{padding-top:calc(var(--sec) * .5)}
.sec--alt{background:var(--ink-850)}

/* ============================================================
   SEÇÃO CLARA
   O site inteiro usa variáveis, então inverter o tema é redefinir
   as variáveis dentro da seção. Só o que estava com cor fixa
   precisa de remendo, e está listado abaixo.
   ============================================================ */
.sec--claro{
  --ink-950:#e7eaed;
  --ink-900:#f4f6f7;
  --ink-850:#eceff1;
  --ink-800:#ffffff;
  --ink-750:#f7f8f9;
  --ink-700:#e3e7ea;
  --line:#dbe0e5;
  --line-hi:#b9c1c9;

  --steel-100:#12161a;
  --steel-200:#242b31;
  --steel-300:#48525b;
  --steel-400:#5a646e;
  --steel-500:#77828c;

  /* cromado escuro: no claro a rampa clara sumiria no fundo */
  --chrome: linear-gradient(178deg,
    #5a636c 0%, #8b949d 16%, #333b43 34%,
    #1f262c 47%, #6b747d 52%, #98a1aa 58%,
    #3f474f 74%, #262d34 88%, #78818a 100%);

  background:var(--ink-900);
  color:var(--steel-100);
}
.sec--claro .chrome{
  -webkit-text-stroke:0;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
}
/* brilho de topo dos cards: no claro vira sombra de topo */
.sec--claro .fam__c::before,
.sec--claro .pc__c::before,
.sec--claro .rep__c::before{
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent);
}
.sec--claro .fam__c,
.sec--claro .pc__c,
.sec--claro .dif__c,
.sec--claro .steps li,
.sec--claro .dep,
.sec--claro .rep__c{
  background:var(--ink-800);
  box-shadow:0 1px 2px rgba(16,24,32,.05);
}
.sec--claro .fam__c:hover,
.sec--claro .dif__c:hover,
.sec--claro .rep__c:hover,
.sec--claro .steps li:hover{box-shadow:0 18px 34px -22px rgba(16,24,32,.45)}
.sec--claro .btn--steel,
.sec--claro .btn--ghost{
  background:linear-gradient(180deg,rgba(16,24,32,.05),rgba(16,24,32,.015));
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}
.sec--claro .btn--wire{color:var(--fire-600)}
.sec--claro .btn--wire:hover{color:var(--fire-700);background:rgba(242,106,10,.08)}
.sec--claro .steps__ico{
  background:radial-gradient(120% 120% at 50% 0%,rgba(16,24,32,.05),transparent 70%);
}
.sec--claro .stat{background:rgba(255,255,255,.86)}
.sec--claro .marcas li{background:#fff;border-color:var(--line)}
/* logos ficam sem moldura no claro, o fundo já é claro */
.sec--claro .marcas li{border-color:#e2e6ea}
.head{margin-bottom:clamp(1.9rem,2.8vw,2.6rem);max-width:70ch}
.head--wide{max-width:78ch}
.head .lede{margin-top:.9rem}

/* ---------- selos ---------- */
.trust{background:var(--ink-950);border-bottom:1px solid var(--line)}
.trust__grid{
  width:100%;max-width:none;
  display:grid;grid-template-columns:repeat(6,1fr);
  padding-inline:var(--pad);
}
.trust__i{display:flex;align-items:center;gap:.8rem;padding:1.3rem 1rem;
  border-left:1px solid var(--line)}
.trust__i:first-child{border-left:0;padding-left:0}
.trust__i:last-child{padding-right:0}
.trust__i svg{width:1.55rem;height:1.55rem;flex:none;color:var(--steel-300);
  transition:color .25s var(--q)}
.trust__i:hover svg{color:var(--fire-400)}
.trust__i p{margin:0;font-size:.78rem;line-height:1.35;color:var(--steel-400);
  text-wrap:balance}
.trust__i b{display:block;font:700 .8rem/1.22 var(--disp);letter-spacing:.005em;
  text-transform:uppercase;color:var(--steel-100);margin-bottom:.2rem}
.trust__i b.num{color:var(--fire-500);font-size:1.2rem;letter-spacing:-.02em}

/* ---------- famílias de produto ---------- */
.fam{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.fam__c{
  position:relative;border-radius:var(--r);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ink-800),var(--ink-850));
  border:1px solid var(--line);overflow:hidden;
  transition:transform .3s var(--q),border-color .3s var(--q),box-shadow .3s var(--q);
}
.fam__c::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
}
/* placa clara com a foto real da peça. O fundo das 13 fotos foi normalizado
   para o mesmo tom, então a grade lê como um conjunto e não como uma colcha. */
.fam__img{
  display:block;position:relative;overflow:hidden;
  margin:.55rem .55rem 0;border-radius:7px;background:#e9e9e9;
}
.fam__img img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .55s var(--q);
}
.fam__img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 70% at 50% 0%,rgba(0,0,0,.05),transparent 72%);
}

.fam__b{display:block;padding:.85rem .95rem 0}
.ficha{display:grid;gap:.22rem;margin-top:.1rem}
.ficha > span{font:500 .7rem/1.35 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--steel-300);text-wrap:pretty}
.ficha i{font-style:normal;color:var(--steel-500);margin-right:.42em}
.ficha__d{color:var(--steel-400)}
/* liga e tempero na mesma linha, separados como no card da vitrine:
   temperado e caracteristica do aco, nao um rotulo a parte */
.ficha__e i{color:var(--fire-600);margin:0;padding:0 .35em}
.fam__c h3{font:800 1rem/1.1 var(--disp);letter-spacing:-.02em;text-transform:uppercase;
  margin-bottom:.28rem}
.fam__go{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;
  padding:.75rem .95rem .95rem;align-self:flex-start;
  font:600 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel-300);transition:color .25s var(--q)}
.fam__go svg{width:1rem;height:1rem;transition:transform .3s var(--q)}
.fam__c:hover{transform:translateY(-4px);border-color:var(--line-hi);
  box-shadow:0 24px 48px -26px rgba(0,0,0,.95)}
.fam__c:hover .fam__img img{transform:scale(1.05)}
.fam__c:hover .fam__go,.fam__go:hover{color:var(--fire-400)}
.fam__c:hover .fam__go svg{transform:translateX(4px)}

/* célula de ajuda, o recado que o Charles pediu no esboço.
   Ocupa o resto da última linha em vez de deixar buraco na grade. */
.fam__c--ajuda{
  grid-column:span 2;
  flex-direction:column;align-items:flex-start;gap:.85rem;
  padding:1.35rem 1.5rem;justify-content:center;
  background:linear-gradient(100deg,rgba(242,106,10,.12),var(--ink-850) 58%);
  border-color:rgba(242,106,10,.3);
}
.fam__c--ajuda:hover{transform:none;border-color:rgba(242,106,10,.5)}
.fam__c--ajuda svg{width:1.8rem;height:1.8rem;color:var(--fire-500);flex:none;margin:0}
.fam__c--ajuda div{flex:none;min-width:0}
.fam__c--ajuda h3{font-size:1.05rem;margin-bottom:.35rem}
.fam__c--ajuda p{color:var(--steel-300);font-size:.88rem;line-height:1.5;max-width:46ch;
  margin-top:.3rem}
.fam__c--ajuda .btn{font-size:.95rem;padding:.8rem 1.2rem;width:auto;flex:none}

.fam__mais{margin-top:1.35rem;color:var(--steel-400);font-size:.95rem}
.fam__mais b{color:var(--steel-100);font-weight:600}
.fam__mais a{display:inline-flex;align-items:center;gap:.4rem;color:var(--fire-400);
  font-weight:600;transition:gap .25s var(--q)}
.fam__mais a svg{width:1.05rem;height:1.05rem}
.fam__mais a:hover{gap:.7rem}

/* ---------- equipe comercial ---------- */
.rep{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.4rem)}
.rep__c{
  display:flex;flex-direction:column;align-items:stretch;
  padding:0;border-radius:var(--r);
  background:linear-gradient(180deg,var(--ink-800),var(--ink-850));
  border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform .3s var(--q),border-color .3s var(--q),box-shadow .3s var(--q);
}
.rep__c::before{content:"";position:absolute;inset:0 0 auto;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
/* foto real do representante: quadrada e ancorada no rosto, nao no centro do arquivo */
.rep__foto{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
  background:var(--ink-850);border-bottom:1px solid var(--line)}
.rep__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;
  transition:transform .55s var(--q)}
.rep__foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,7,0) 58%,rgba(5,6,7,.42))}
.rep__b{padding:1.25rem 1.35rem 0}
.rep__c h3{font:700 clamp(1.05rem,1.35vw,1.2rem)/1.2 var(--disp);text-transform:uppercase;
  letter-spacing:-.015em;margin-bottom:.3rem}
.rep__go{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:auto 1.35rem 1.35rem;padding:.95rem 1rem;border-radius:8px;
  background:linear-gradient(180deg,var(--fire-500),var(--fire-700));
  color:#fff;font:800 .92rem/1 var(--disp);letter-spacing:.01em;
  text-transform:none;
  box-shadow:0 1px 0 rgba(255,190,140,.4) inset,
             0 10px 24px -14px rgba(242,106,10,.9);
  animation:repPulso 2.4s var(--q) infinite;
  transition:background-color .2s var(--q),box-shadow .25s var(--q),transform .18s var(--q);
}
.rep__go svg{width:1.2rem;height:1.2rem;flex:none}
/* halo que abre e some, sem mexer no tamanho do botao: nada empurra o layout */
@keyframes repPulso{
  0%   {box-shadow:0 1px 0 rgba(255,190,140,.4) inset,
                   0 10px 24px -14px rgba(242,106,10,.9),
                   0 0 0 0 rgba(242,106,10,.55)}
  62%  {box-shadow:0 1px 0 rgba(255,190,140,.4) inset,
                   0 10px 24px -14px rgba(242,106,10,.9),
                   0 0 0 12px rgba(242,106,10,0)}
  100% {box-shadow:0 1px 0 rgba(255,190,140,.4) inset,
                   0 10px 24px -14px rgba(242,106,10,.9),
                   0 0 0 0 rgba(242,106,10,0)}
}
/* os tres em uma so batida viram alarme: escalona o pulso */
.rep__c:nth-child(2) .rep__go{animation-delay:.35s}
.rep__c:nth-child(3) .rep__go{animation-delay:.7s}
.rep__c:hover{transform:translateY(-4px);border-color:var(--fire-600);
  box-shadow:0 24px 46px -26px rgba(0,0,0,.95)}
.rep__c:hover .rep__go{
  background:linear-gradient(180deg,var(--fire-400),var(--fire-600));
  box-shadow:0 1px 0 rgba(255,205,165,.55) inset,
             0 16px 32px -14px rgba(242,106,10,.95);
  animation-play-state:paused;
}
.rep__c:active .rep__go{transform:scale(.985)}
.rep__c:hover .rep__foto img{transform:scale(1.045)}

/* ---------- marcas de clientes ---------- */
.marcas{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem}
.marcas li{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:#fff;
  transition:transform .3s var(--q),border-color .3s var(--q),box-shadow .3s var(--q);
}
.marcas img{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;padding:.7rem}
.marcas li:hover{transform:translateY(-3px);border-color:var(--line-hi);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.9)}

/* ---------- pinos e cunhas ---------- */
.pc{background:var(--ink-900);overflow:hidden}
.pc::before{
  content:"";position:absolute;left:50%;bottom:-140px;width:min(1100px,120%);height:280px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%,rgba(242,106,10,.3),transparent 72%);
}
.pc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pc__c{
  padding:.85rem .85rem 1.15rem;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(165deg,var(--ink-800),var(--ink-850) 60%);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s var(--q),border-color .3s var(--q);
}
.pc__c::before{content:"";position:absolute;inset:0 0 auto;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent)}
/* placa clara com a foto real da peça: a foto veio em fundo branco e o brilho
   do aço tem a mesma luminância do fundo, então recorte por luminância comeria
   a peça. Placa resolve sem artefato e conversa com o chip das marcas. */
.pc__img{
  position:relative;margin:0 0 .85rem;overflow:hidden;
  border-radius:8px;
  background:#edeff1;
}
/* recorta a origem quadrada em 4:3. Preencher a lateral com cor chapada
   deixava emenda visível contra o fundo da própria foto. */
.pc__img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .6s var(--q)}
.pc__c:hover{transform:translateY(-3px);border-color:var(--line-hi)}
.pc__c:hover .pc__img img{transform:scale(1.04)}
.pc__img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 100% at 50% 0%,rgba(0,0,0,.06),transparent 70%);
}
.pc__c h3{font:800 clamp(1.02rem,1.35vw,1.2rem)/1.1 var(--disp);letter-spacing:-.025em;
  text-transform:uppercase;margin-bottom:.3rem;padding:0 .3rem}
.pc__c .spec{display:block;padding:0 .3rem}
.pc__foot{margin-top:1.4rem;color:var(--steel-400);font-size:.95rem;max-width:70ch}
.pc__act{margin-top:1.2rem}

/* ---------- catálogo ---------- */
/* cada grupo é uma sanfona: aberta no desktop, fechada no celular.
   Vinte e dois itens abertos custavam 2.250px de rolagem no mobile. */
/* duas colunas: a lista é curta por item, uma coluna só desperdiçava
   metade da largura e dobrava a rolagem. */


/* ---------- a fábrica ---------- */
.fab{background:var(--ink-850);overflow:hidden}
.fab__bg{
  position:absolute;inset:0;z-index:0;
  background:url("../img/hero-desktop-sm.jpg") center 42%/cover no-repeat;
  filter:grayscale(.35) brightness(.62) contrast(1.1);
  opacity:.85;
}
.fab::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--ink-850) 2%,rgba(12,14,16,.94) 26%,rgba(12,14,16,.7) 55%,rgba(12,14,16,.5) 100%),
    linear-gradient(180deg,var(--ink-850),rgba(12,14,16,0) 22%,rgba(12,14,16,0) 78%,var(--ink-850));
}
.fab__in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr);
  gap:clamp(1.5rem,2.6vw,2.6rem);align-items:stretch}
.fab__txt{align-self:center}
.fab .stats{grid-column:1/-1;grid-template-columns:repeat(4,1fr);margin-top:.4rem}
/* duas fotos: a prensa em pe manda no bloco, o laser e paisagem e fecha embaixo */
.fab__foto{position:relative;display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"solda solda" "prensa laser";
  gap:clamp(.6rem,1vw,.9rem);align-self:center}
.fab__f{position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-hi);min-height:0}
.fab__f img{width:100%;height:100%;object-fit:cover;display:block}
.fab__f--a{grid-area:solda;aspect-ratio:3/2}
.fab__f--a img{object-position:58% 46%}
.fab__f--b{grid-area:prensa;aspect-ratio:1/1}
.fab__f--c{grid-area:laser;aspect-ratio:1/1}
.fab__f::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,7,.28),rgba(5,6,7,0) 42%,rgba(5,6,7,.62));
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset;
}
.fab__f figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.4rem .95rem .8rem;
  font:600 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel-200)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:rgba(8,9,11,.8);padding:1.6rem 1.3rem;text-align:left}
.stat b{display:block;font:900 clamp(2rem,3.6vw,2.85rem)/1 var(--disp);
  color:var(--fire-500);letter-spacing:-.045em;
  text-shadow:0 0 34px rgba(242,106,10,.42)}
/* tarja de frase: o Charles trocou os números por afirmações, e 2,85rem
   de Archivo 900 numa frase de tres palavras estoura a caixa */
.stat b.frase{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.15;
  letter-spacing:-.025em;text-wrap:balance;text-shadow:none;color:var(--steel-100)}
.stat span{display:block;margin-top:.5rem;font:500 .72rem/1.4 var(--mono);
  letter-spacing:.11em;text-transform:uppercase;color:var(--steel-400)}

/* ---------- como funciona ---------- */
/* sem caixa: ícone em círculo, número grande e texto, separados por seta */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,3vw,2.5rem)}
.steps li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:1rem;align-items:start}
.steps li:not(:last-child)::after{
  content:"";position:absolute;right:calc(clamp(1.25rem,3vw,2.5rem) / -2 - 5px);top:19px;
  width:10px;height:10px;border-right:1.5px solid var(--fire-600);
  border-top:1.5px solid var(--fire-600);transform:rotate(45deg);
}
.steps__ico{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-hi);color:var(--steel-200);flex:none;
  background:radial-gradient(120% 120% at 50% 0%,rgba(255,255,255,.07),transparent 70%);
  transition:color .25s var(--q),border-color .25s var(--q);
}
.steps__ico svg{width:1.3rem;height:1.3rem}
.steps li:hover .steps__ico{color:var(--fire-400);border-color:var(--fire-600)}
.steps__n{font:900 1.5rem/1 var(--disp);color:var(--fire-500);letter-spacing:-.04em;
  display:block;margin-bottom:.3rem}
.steps h3{font:700 1.02rem/1.25 var(--disp);text-transform:uppercase;letter-spacing:-.015em;
  margin-bottom:.45rem}
.steps p{color:var(--steel-400);font-size:.9rem;line-height:1.6}

/* ---------- diferenciais ---------- */
.dif{background:var(--ink-900)}
.dif__g{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.dif__c{padding:1.8rem 1.5rem;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink-800),var(--ink-850));
  transition:border-color .3s var(--q),transform .3s var(--q)}
.dif__c:hover{border-color:var(--line-hi);transform:translateY(-3px)}
.dif__c svg{width:1.9rem;height:1.9rem;color:var(--fire-500);margin-bottom:1.1rem}
.dif__c h3{font:700 1.02rem/1.25 var(--disp);text-transform:uppercase;letter-spacing:-.012em;
  margin-bottom:.5rem}
.dif__c p{color:var(--steel-400);font-size:.91rem;line-height:1.6}

/* ---------- depoimentos ---------- */
.dep__g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.dep{padding:1.9rem 1.7rem;border-radius:var(--r);border:1px solid var(--line);
  background:var(--ink-800);display:flex;flex-direction:column;gap:1.1rem}
.dep__s{display:flex;gap:.2rem;color:var(--fire-500)}
.dep__s svg{width:1.05rem;height:1.05rem;fill:currentColor;stroke-width:0}
.dep blockquote p{color:var(--steel-200);font-size:1rem;line-height:1.65}
.dep figcaption{margin-top:auto;padding-top:.3rem}
.dep figcaption b{display:block;font:700 .92rem/1.3 var(--disp);text-transform:uppercase;
  letter-spacing:-.005em}
.dep figcaption span{display:block;margin-top:.15rem;font:500 .72rem/1.3 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel-500)}

/* ---------- faq ---------- */
.faq{background:var(--ink-850)}
.faq__l{border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;column-gap:3.2rem;align-items:start}
.q{border-bottom:1px solid var(--line)}
.q summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.25rem .2rem;cursor:pointer;list-style:none;
  font:600 1.02rem/1.45 var(--body);color:var(--steel-100);
  transition:color .2s var(--q);
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--fire-400)}
.q summary i{
  position:relative;flex:none;width:20px;height:20px;
  transition:transform .32s var(--q);
}
.q summary i::before,.q summary i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--fire-500);
  transform:translate(-50%,-50%);
}
.q summary i::before{width:14px;height:1.6px}
.q summary i::after{width:1.6px;height:14px;transition:opacity .25s var(--q)}
.q[open] summary i{transform:rotate(180deg)}
.q[open] summary i::after{opacity:0}
.q__b{overflow:hidden;animation:qOpen .34s var(--q)}
.q__b p{padding:0 3rem 1.4rem .2rem;color:var(--steel-400);font-size:.97rem;line-height:1.7;
  max-width:70ch}
@keyframes qOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- cta final ---------- */
/* faixa horizontal, texto à esquerda e botões à direita, como no mockup */
.final{
  position:relative;padding:clamp(3.25rem,6vw,5rem) 0;
  background:var(--ink-950);overflow:hidden;
}
.final::before{
  content:"";position:absolute;left:50%;bottom:-210px;width:min(1500px,150%);height:420px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%,rgba(242,106,10,.5),rgba(242,106,10,.1) 55%,transparent 76%);
}
.final__in{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(2rem,4vw,3.5rem);flex-wrap:wrap}
.final__t{flex:1 1 620px}
.final__t .h2{font-size:clamp(1.6rem,3vw,2.35rem)}
.final__t .lede{font-size:1rem;margin-top:.9rem;max-width:52ch}
.final__b{display:grid;grid-template-columns:auto auto;gap:.85rem;flex:0 1 auto;
  align-items:center;justify-items:start}
.final__envio{
  grid-column:1/-1;display:inline-flex;align-items:center;gap:.55rem;
  margin-bottom:.15rem;padding:.55rem .9rem;border-radius:999px;
  border:1px solid rgba(242,106,10,.38);background:rgba(242,106,10,.1);
  font:500 .74rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-200);text-wrap:balance;
}
.final__envio b{color:var(--fire-400);font-weight:700}
.final__envio svg{width:1.05rem;height:1.05rem;flex:none;color:var(--fire-500)}
.final__n{margin-top:1.1rem;font:500 .74rem/1.5 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel-500)}

/* ---------- rodapé ---------- */
.ft{background:var(--ink-950);border-top:1px solid var(--line);padding-top:clamp(3rem,6vw,4.5rem)}
.ft__in{display:grid;grid-template-columns:1.5fr 1fr 1.15fr;gap:2.5rem;
  padding-bottom:3rem}
.ft__brand img{width:150px;margin-bottom:1.2rem}
.ft__brand p{color:var(--steel-400);font-size:.9rem;line-height:1.65;max-width:34ch}
.ft__soc{display:flex;gap:.6rem;margin-top:1.3rem}
.ft__soc a{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;
  border:1px solid var(--line);color:var(--steel-300);
  transition:color .2s var(--q),border-color .2s var(--q),transform .2s var(--q)}
.ft__soc svg{width:1.1rem;height:1.1rem}
.ft__soc a:hover{color:var(--fire-400);border-color:var(--fire-600);transform:translateY(-2px)}
.ft__col h3{font:700 .8rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-100);margin-bottom:1.1rem}
.ft__col li{margin-bottom:.6rem}
.ft__col a{color:var(--steel-400);font-size:.92rem;transition:color .2s var(--q)}
.ft__col a:hover{color:var(--fire-400)}
.ft__cta a{font-weight:500;color:var(--steel-200)}
.ft__where{margin-top:1.2rem;color:var(--steel-400);font-size:.86rem;line-height:1.55}
.ft__where span{display:inline-block;margin-top:.5rem;color:var(--steel-500)}
.ft__base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.4rem 0;border-top:1px solid var(--line)}
.ft__base p{color:var(--steel-500);font-size:.82rem}
.ft__base a{color:var(--steel-300);transition:color .2s var(--q)}
.ft__base a:hover{color:var(--fire-400)}

/* ---------- barra fixa mobile ---------- */
.wsp{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:99;
  align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1rem;padding-bottom:calc(.95rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--fire-500),var(--fire-700));color:#fff;
  font:700 1.0625rem/1 var(--disp);
  box-shadow:0 -12px 30px -14px rgba(0,0,0,.95);
}
.wsp svg{width:1.2rem;height:1.2rem}

/* ============================================================
   REVEAL no scroll
   ============================================================ */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .62s var(--q),transform .62s var(--q);
  transition-delay:var(--rd,0ms)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1180px){
  /* abaixo daqui a quinta coluna deixa a peça pequena demais */
  .fam{grid-template-columns:repeat(4,1fr)}
  .fam__c--ajuda{grid-column:span 3;flex-direction:row;align-items:center;gap:1.25rem}
  .fam__c--ajuda div{flex:1}
  .hdr__nav{gap:.8rem}
  .hdr__nav a{font-size:.71rem;letter-spacing:.075em}
  .hdr__ig span{display:none}
  .trust__grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1000px){
  .hdr__nav{
    position:fixed;inset:var(--hdr) 0 auto;flex-direction:column;gap:0;margin:0;
    background:rgba(6,7,9,.98);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.3rem;
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    transition:clip-path .38s var(--q),opacity .25s ease;
  }
  .hdr__nav.open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .hdr__nav a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:.82rem}
  .hdr__nav a::after{display:none}
  .burger{display:flex}
  .hdr__cta span{display:none}
  .hdr__cta{padding:.72rem .85rem}
  .hdr__cta svg{width:1.3rem;height:1.3rem}

  .rep{grid-template-columns:repeat(3,1fr);gap:.8rem}
  .rep__b{padding:1rem 1rem 0}
  .rep__go{margin:auto 1rem 1rem;padding:.85rem .8rem;font-size:.82rem;gap:.4rem}
  .rep__go svg{width:1.05rem;height:1.05rem}
  .marcas{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:2rem 2.5rem}
  .steps li:nth-child(2)::after{display:none}
  .dif__g{grid-template-columns:repeat(2,1fr)}
  .dep__g{grid-template-columns:1fr}
  .fab__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:2rem}
  .fab::after{background:linear-gradient(180deg,rgba(12,14,16,.86),rgba(12,14,16,.94))}
  .final__in{gap:2rem}
}

@media (max-width:1000px){
  /* ordem do hero no estreito: título, imagem, subtítulo, botões.
     Vem da ordem do DOM, sem order nenhum. */
  .hero{
    min-height:0;padding:calc(var(--hdr) + 3.25rem) 0 3rem;
    background:var(--ink-950);display:block;
  }
  .hero::before{display:none}
  .hero__in{max-width:none}
  .hero__in > *{max-width:none}
  .hero__h1{max-width:none}
  .hero__over{margin-bottom:.85rem;letter-spacing:.12em;font-size:.68rem;line-height:1.5}
  .hero__ph{
    display:block;height:clamp(240px,40vw,430px);
    margin:1.35rem calc(var(--pad)*-1) .2rem;
    background:url("../img/hero-desktop-sm.jpg") 82% 62%/cover no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 84%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 84%,transparent 100%);
  }
  .hero__note{font-size:.68rem;letter-spacing:.08em}
  .hero__sub{max-width:none}
  .hero__cta .btn{width:100%}
}

@media (max-width:860px){
  html{scroll-padding-top:calc(var(--hdr) + 8px)}
  /* o ritmo do desktop não cabe num tablet */
  .sec{padding:3rem 0}
  .sec + .sec{padding-top:1.8rem}
  .head{margin-bottom:1.9rem}
  /* duas colunas só valem enquanto sobra largura */
  .faq__l{grid-template-columns:1fr;column-gap:0}
  :root{--hdr:84px}
  /* só altura, nunca largura: a base já define height e travar as duas distorce */
  .hdr__logo img{height:54px}
  .hdr__in{gap:.65rem}
  .pc__grid{grid-template-columns:repeat(3,1fr)}
  .fam{grid-template-columns:repeat(3,1fr)}
  .fam__img img{aspect-ratio:5/4}
  .fam__b{padding:.75rem .8rem 0}
  .fam__c h3{font-size:.95rem}
  .fam__go{padding:.65rem .8rem .85rem}
  .fam__c--ajuda{grid-column:span 3}
  .marcas{grid-template-columns:repeat(3,1fr)}
  .faixa{padding-top:calc(var(--hdr) + .4rem)}
  .faixa__t span{font-size:.66rem;letter-spacing:.14em;padding-right:1.6rem}
  .fab__in{grid-template-columns:1fr;gap:2rem}
  .fab__foto{max-width:none;align-items:stretch}
  .fab__f--a{aspect-ratio:16/10}
  .fab .stats{grid-template-columns:1fr 1fr}
  .final__b .btn{width:100%}
  .final__b{width:100%;grid-template-columns:1fr;justify-items:stretch}
  .final__envio{justify-content:center;text-align:center}

  /* selos em duas colunas: empilhado em cinco custava meia tela de rolagem */
  .trust__grid{grid-template-columns:1fr 1fr;padding-inline:0}
  .trust__i{border-left:1px solid var(--line);border-top:1px solid var(--line);
    padding:.85rem var(--pad);gap:.7rem}
  .trust__i:nth-child(odd){border-left:0}
  .trust__i:nth-child(-n+2){border-top:0}
  .trust__i svg{width:1.4rem;height:1.4rem}
  .trust__i b{font-size:.78rem}
  .trust__i p{font-size:.72rem}
  /* sanfona do catálogo: fechada por padrão daqui pra baixo */
  .pc__grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .ft__in{grid-template-columns:1fr 1fr;gap:2rem}
  .ft__brand{grid-column:1/-1}
  body{padding-bottom:66px}
  .wsp{display:flex}
}

/* abaixo de 780 nao cabem tres colunas de retrato: o card vira linha */
@media (max-width:780px){
  .rep{grid-template-columns:1fr;gap:.55rem}
  .rep__c{display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"foto dados" "foto botao";align-items:center}
  .rep__foto{grid-area:foto;align-self:stretch;width:128px;aspect-ratio:auto;
    border-bottom:0;border-right:1px solid var(--line)}
  .rep__foto img{object-position:50% 16%}
  .rep__b{grid-area:dados;min-width:0;padding:.85rem 1rem .15rem}
  .rep__c h3{font-size:1rem}
  .rep__go{grid-area:botao;margin:.5rem 1rem .9rem;padding:.72rem .9rem;
    font-size:.86rem;letter-spacing:.01em}
  .rep__go svg{width:1.1rem;height:1.1rem}
}

@media (max-width:600px){
  /* o cliente reclamou de rolagem demais. Aqui o objetivo é caber mais
     conteúdo por tela sem apertar o alvo de toque, que fica em 44px. */
  .sec{padding:2.75rem 0}
  .sec + .sec{padding-top:1.6rem}
  .head{margin-bottom:1.6rem}
  .h2{font-size:1.6rem}
  .lede{font-size:.94rem;line-height:1.6;margin-top:.7rem}
  .eyebrow{margin-bottom:.6rem;font-size:.68rem}

  /* card de produto compacto: imagem mais baixa e texto numa linha só */
  .fam{grid-template-columns:1fr 1fr;gap:.6rem}
  .fam__img{margin:.4rem .4rem 0}
  .fam__img img{aspect-ratio:5/4}
  .fam__b{padding:.7rem .75rem 0}
  .fam__c h3{font-size:.9rem;letter-spacing:-.01em;margin-bottom:.2rem}
  .fam__c .spec{font-size:.62rem;letter-spacing:.06em}
  .ficha{gap:.15rem}
  .ficha > span{font-size:.62rem;letter-spacing:.04em;line-height:1.3}
  .ficha i{margin-right:.35em}
  .fam__go{padding:.6rem .75rem .8rem;font-size:.62rem;letter-spacing:.08em}
  .fam__go svg{width:.85rem;height:.85rem}
  .fam__mais{margin-top:1.1rem;font-size:.88rem}
  /* empilhado: em linha o botão de largura total estourava a viewport */
  .fam__c--ajuda{grid-column:1/-1;flex-direction:column;align-items:stretch;
    gap:.8rem;padding:1.1rem 1rem}
  .fam__c--ajuda svg{width:1.6rem;height:1.6rem}
  .fam__c--ajuda h3{font-size:.95rem}
  .fam__c--ajuda p{font-size:.82rem;line-height:1.45}
  .fam__c--ajuda .btn{width:100%;font-size:.88rem;padding:.75rem .9rem}

  .marcas{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .steps{grid-template-columns:1fr 1fr;gap:1.3rem .9rem}
  .steps li::after{display:none}
  .steps li{grid-template-columns:1fr}
  .steps__ico{width:36px;height:36px}
  .steps h3{font-size:.92rem}
  .steps p{font-size:.84rem}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:1.1rem .9rem}
  .dif__g{grid-template-columns:1fr 1fr;gap:.6rem}
  .dif__c{padding:1.1rem .9rem}
  .dif__c svg{width:1.5rem;height:1.5rem;margin-bottom:.7rem}
  .dif__c h3{font-size:.92rem}
  .dif__c p{font-size:.82rem;line-height:1.5}
  /* depoimentos viram carrossel: três empilhados custavam 1.440px */
  .dep__g{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--pad)*-1);padding:.25rem var(--pad);
    scrollbar-width:none;
  }
  .dep__g::-webkit-scrollbar{display:none}
  .dep{scroll-snap-align:center;padding:1.3rem 1.2rem;gap:.8rem}
  .dep blockquote p{font-size:.92rem}
  /* faixa larga não funciona num celular: aqui entra o corte quadrado */
  .hero__ph{height:min(94vw,46vh);background-image:url("../img/hero-mobile.jpg");
    background-position:center 52%}
  .pc__grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .pc__c{padding:.55rem .55rem .85rem}
  .pc__c h3{font-size:.9rem}
  .pc__c .spec{font-size:.62rem;letter-spacing:.06em}
  .q summary{padding:1rem .2rem;font-size:.94rem}
  .q__b p{padding-right:1.5rem;font-size:.9rem}
  .ft__in{grid-template-columns:1fr 1fr;gap:1.6rem;padding-bottom:1.5rem}
  .btn{width:100%}
  .pc__c{padding:1.1rem 1.1rem 1.4rem}
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (max-width:430px){
  .rep__foto{width:98px}
  .rep__b{padding:.75rem .8rem .1rem}
  .rep__c h3{font-size:.92rem}
  .rep__go{margin:.45rem .8rem .75rem;padding:.7rem .6rem;font-size:.8rem;gap:.35rem}
  .rep__go svg{width:1rem;height:1rem}
}

@media (prefers-reduced-motion:reduce){
  .rep__go{animation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
  .cut i{transform:scaleX(1);opacity:1}
  .hero__bg{animation:none}
  .faixa__t{animation:none;width:100%}
  .faixa__t span:not(:first-child){display:none}
}