/* ==========================================================================
   JF TURBOS — Landing Page Caminhões Pesados
   Design system: "chassi e painel usinado"
   Fonte única: Archivo variable (wdth 62-125 / wght 400-900 + itálico)
   --------------------------------------------------------------------------
   Sumário
   01. Fontes
   02. Tokens
   03. Reset
   04. Tipografia + utilitários
   05. Botões
   06. Header
   07. Hero + Consulta de Aplicação (elemento-assinatura)
   08. Faixa de marcas (marquee)
   09. Dor
   10. Solução
   11. Marcas de turbina
   12. Marcas de caminhão
   13. Diferenciais
   14. Prova social
   15. Urgência
   16. Formulário
   17. FAQ
   18. CTA final
   19. Rodapé
   20. CTAs fixos (mobile / desktop)
   21. Motion / reveal
   ========================================================================== */

/* 01. Fontes ------------------------------------------------------------- */
/* Archivo variável, com os eixos recortados para o que esta página usa:
   corpo em wdth 80-100 / wght 400-900 e display em itálico wdth 70-76 (wght 900).
   Isso derruba as duas fontes de 186KB para 72KB. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-stretch:80% 100%;
  font-display:swap;
  src:url('../fonts/archivo-var-latin.woff2') format('woff2-variations'),
      url('../fonts/archivo-var-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';
  font-style:italic;
  font-weight:900;
  font-stretch:70% 76%;
  font-display:swap;
  src:url('../fonts/archivo-var-italic-latin.woff2') format('woff2-variations'),
      url('../fonts/archivo-var-italic-latin.woff2') format('woff2');
}

/* 02. Tokens ------------------------------------------------------------- */
:root{
  /* Ground — asfalto / grafite usinado */
  --ink:#0B0C0E;
  --ink-2:#101216;
  --steel-900:#15181D;
  --steel-800:#1B1F26;
  --steel-700:#262B34;
  --steel-600:#343A45;
  --steel-400:#6B7480;
  --steel-300:#98A1AD;
  --steel-200:#C4CBD4;

  /* Superfícies claras */
  --paper:#F4F5F7;
  --paper-2:#E7EAEE;

  /* Marca — amostrado do logotipo JF TURBOS */
  --red:#D2302C;
  --red-600:#B8241F;
  --red-300:#F0605B;

  /* Acentos com função exclusiva */
  --heat:#FF7A18;      /* pressão / urgência */
  --brass:#C9A227;     /* garantia / confiança */
  --wa:#25D366;        /* WhatsApp */
  --star:#FBBC05;

  /* Tipografia */
  --font:'Archivo','Helvetica Neue',Arial,system-ui,sans-serif;
  --d1:clamp(2.3rem,3.75vw,3.4rem);
  --d2:clamp(1.9rem,3.5vw,3rem);
  --d3:clamp(1.4rem,2.4vw,2rem);
  --lead:clamp(1.03rem,1.35vw,1.26rem);

  /* Layout */
  --wrap:1180px;
  --gutter:clamp(20px,5vw,40px);
  --r:4px;
  --r-lg:6px;

  /* Movimento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* 03. Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  background:var(--ink);
  color:var(--steel-200);
  font-family:var(--font);
  font-size:1rem;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}

:focus-visible{outline:2px solid var(--red-300);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--red);color:#fff;padding:12px 18px;font-weight:700;
}
.skip:focus{left:12px;top:12px}

/* 04. Tipografia + utilitários ------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:860px}

.section{padding-block:clamp(66px,8.5vw,124px);position:relative}
.section--tight{padding-block:clamp(44px,5vw,68px)}
.section--light{background:var(--paper);color:var(--steel-900)}

/* Display: itálico condensado pesado — ecoa o logotipo JF TURBOS */
.display{
  font-weight:900;
  font-stretch:70%;
  font-style:italic;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.004em;
  color:#fff;
  text-wrap:balance;
}
.display--d1{font-size:var(--d1)}
.display--d2{font-size:var(--d2)}
.display--d3{font-size:var(--d3);line-height:1.02}
.section--light .display{color:var(--ink)}

.display .hl{color:var(--red)}
.section--light .display .hl{color:var(--red-600)}

/* Plaqueta de dados — estampa de placa de identificação da turbina */
.plate{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.71rem;font-weight:700;font-stretch:88%;
  text-transform:uppercase;letter-spacing:.17em;
  color:var(--steel-400);
}
.plate::before{
  content:'';width:26px;height:2px;background:var(--red);flex:none;
}
.section--light .plate{color:#5D6673}

.lead{font-size:var(--lead);line-height:1.6;color:var(--steel-300);max-width:62ch;text-wrap:pretty}
.section--light .lead{color:#4A5361}

.head{display:grid;gap:18px;max-width:70ch}
.head--center{margin-inline:auto;justify-items:center;text-align:center}

/* 05. Botões ------------------------------------------------------------- */
.btn{
  --btn-bg:var(--red);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 28px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:0;border-radius:var(--r);
  font-size:clamp(.9rem,1.05vw,1rem);font-weight:800;font-stretch:88%;
  text-transform:uppercase;letter-spacing:.055em;line-height:1.15;
  text-align:center;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),background-color .18s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 26px -12px rgba(210,48,44,.75);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 16px 34px -12px rgba(210,48,44,.9)}
.btn:active{transform:translateY(0)}
.btn__ico{flex:none;width:20px;height:20px;fill:currentColor}

.btn--wa{--btn-bg:var(--wa);--btn-fg:#04170C;box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 26px -12px rgba(37,211,102,.7)}
.btn--wa:hover{box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 16px 34px -12px rgba(37,211,102,.85)}

/* Link discreto: alternativa que não disputa atenção com a CTA principal */
.quiet-link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.9rem;font-weight:600;color:var(--steel-300);
  padding-block:4px;border-bottom:1px solid var(--steel-600);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.quiet-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease)}
.quiet-link:hover{color:#fff;border-color:var(--red)}
.quiet-link:hover svg{transform:translateX(3px)}

.btn--lg{padding:20px 34px;font-size:clamp(.95rem,1.2vw,1.1rem)}
.btn--block{width:100%}
.btn--sm{padding:12px 18px;font-size:.8rem;letter-spacing:.06em}

.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--steel-800);color:var(--steel-400);
  box-shadow:none;cursor:not-allowed;transform:none;
}

.btn-note{font-size:.83rem;color:var(--steel-400);line-height:1.5}
.section--light .btn-note{color:#66707E}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.urgent__inner .cta-row,.final__inner .cta-row,.head--center .cta-row{width:100%;justify-content:center}

/* 06. Header ------------------------------------------------------------- */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  padding-block:16px;
  transition:padding .28s var(--ease),background-color .28s var(--ease),border-color .28s var(--ease),backdrop-filter .28s var(--ease);
  border-bottom:1px solid transparent;
}
.header::before{
  content:'';position:absolute;inset:0 0 auto;height:190%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,12,14,.86),rgba(11,12,14,.5) 52%,transparent);
  transition:opacity .28s var(--ease);
}
.header.is-stuck::before{opacity:0}
.header.is-stuck{
  padding-block:9px;
  background:rgba(11,12,14,.86);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--steel-700);
}
.header__inner{position:relative;display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.header__logo{flex:none;display:block}
.header__logo img{width:clamp(132px,15vw,178px);transition:width .28s var(--ease)}
.header.is-stuck .header__logo img{width:clamp(118px,12vw,150px)}

.nav{display:none;margin-left:auto;gap:clamp(18px,2.4vw,32px)}
.nav a{
  font-size:.78rem;font-weight:700;font-stretch:88%;
  text-transform:uppercase;letter-spacing:.13em;color:var(--steel-300);
  padding-block:6px;position:relative;transition:color .18s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .24s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1)}

.header__cta{margin-left:auto;display:none}
.header__phone{
  display:none;margin-left:auto;text-align:right;line-height:1.2;
}
.header__phone .plate{color:var(--steel-400)}
.header__phone strong{display:block;color:#fff;font-weight:800;font-size:1rem;font-stretch:92%}

@media (min-width:900px){
  .nav{display:flex}
  .header__cta{display:inline-flex;margin-left:0}
}
@media (max-width:899px){
  .header__cta{display:inline-flex;margin-left:auto}
}
@media (max-width:560px){
  .header__cta{padding:10px 13px;font-size:.72rem;letter-spacing:.04em;gap:7px}
  .header__cta .btn__ico{width:17px;height:17px}
  .rig__title span{letter-spacing:.1em}
}

/* 07. Hero + Consulta de Aplicação -------------------------------------- */
.hero{
  position:relative;isolation:isolate;
  padding-top:clamp(112px,15vh,168px);
  padding-bottom:clamp(48px,6vw,84px);
  overflow:hidden;
}
.hero__media{position:absolute;z-index:-2;inset:0}
.hero__media picture{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.hero__scrim{position:absolute;z-index:-1;inset:0}

/* Mobile: foto ao fundo, rebaixada — a leitura vem primeiro */
@media (max-width:959px){
  .hero__media img{object-position:50% 40%;filter:brightness(.88)}
  .hero__scrim{
    background:
      radial-gradient(120% 70% at 70% 0%,rgba(210,48,44,.14),transparent 60%),
      linear-gradient(180deg,rgba(11,12,14,.4) 0%,rgba(11,12,14,.5) 15%,rgba(11,12,14,.8) 36%,rgba(11,12,14,.92) 62%,var(--ink) 94%);
  }
}
/* Desktop: a foto atravessa o hero inteiro. O texto fica no lado escuro e a
   cabine aparece no vão entre a coluna de texto e o painel de consulta. */
@media (min-width:960px){
  .hero__media img{object-position:50% 54%;filter:brightness(.86)}
  .hero__scrim{
    background:
      linear-gradient(104deg,var(--ink) 0%,rgba(11,12,14,.93) 27%,rgba(11,12,14,.56) 45%,rgba(11,12,14,.22) 60%,rgba(11,12,14,.4) 100%),
      linear-gradient(180deg,rgba(11,12,14,.64) 0%,rgba(11,12,14,.08) 30%,rgba(11,12,14,.22) 70%,var(--ink) 100%);
  }
}

.hero__grid{
  display:grid;gap:clamp(34px,5vw,60px);
  align-items:center;
}
@media (min-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
}

.hero__copy{display:grid;gap:20px}


.hero__title{font-size:var(--d1);text-shadow:0 2px 26px rgba(11,12,14,.7)}
.hero__title .line{display:block}
.hero__sub{font-size:var(--lead);color:var(--steel-200);line-height:1.55;max-width:47ch;text-shadow:0 1px 18px rgba(11,12,14,.85)}
.hero__sub b{color:#fff;font-weight:700}

/* Selos de confiança do hero */
.hero__seals{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;padding-top:2px}
.seal{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:700;font-stretch:90%;color:var(--steel-200);
  letter-spacing:.02em;
}
.seal svg{flex:none;width:17px;height:17px}
.seal__stars{display:inline-flex;gap:1.5px}
.seal__stars svg{width:13px;height:13px;fill:var(--star)}
.seal--brass{color:var(--brass)}
.seal--brass svg{fill:var(--brass)}

/* --- ELEMENTO-ASSINATURA: painel de consulta que "spoola" --------------- */
.rig{
  position:relative;
  background:linear-gradient(178deg,var(--steel-900) 0%,#0D0F13 100%);
  border:1px solid var(--steel-700);
  border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.02) inset;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.rig::before{
  content:'';position:absolute;inset:-1px -1px auto;height:3px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 34%,var(--steel-700) 34%);
  transition:background .5s var(--ease);
}
.rig.is-ready{border-color:rgba(210,48,44,.55);box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px rgba(210,48,44,.18) inset,0 0 42px -14px rgba(210,48,44,.45)}
.rig[data-filled="1"]::before{background:linear-gradient(90deg,var(--red) 0%,var(--red) 34%,var(--steel-700) 34%)}
.rig[data-filled="2"]::before{background:linear-gradient(90deg,var(--red) 0%,var(--red) 67%,var(--steel-700) 67%)}
.rig[data-filled="3"]::before{background:linear-gradient(90deg,var(--heat),var(--red))}

.rig__top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.rig__title{font-size:.95rem;font-weight:800;font-stretch:86%;text-transform:uppercase;letter-spacing:.1em;color:#fff;line-height:1.2}
.rig__title span{display:block;font-size:.68rem;font-weight:600;letter-spacing:.15em;color:var(--steel-400);margin-top:3px}

/* Rotor: gira devagar em repouso, spoola conforme os campos são preenchidos */
.rotor{flex:none;width:58px;height:58px;position:relative}
.rotor__svg{width:100%;height:100%;overflow:visible}
.rotor__wheel{transform-origin:50% 50%;animation:spin 9s linear infinite}
.rig[data-filled="1"] .rotor__wheel{animation-duration:3.4s}
.rig[data-filled="2"] .rotor__wheel{animation-duration:1.5s}
.rig[data-filled="3"] .rotor__wheel{animation-duration:.5s}
.rotor__arc{
  fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:163;stroke-dashoffset:163;
  transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset .65s var(--ease-out),stroke .4s var(--ease);
}
.rig[data-filled="1"] .rotor__arc{stroke-dashoffset:109}
.rig[data-filled="2"] .rotor__arc{stroke-dashoffset:54}
.rig[data-filled="3"] .rotor__arc{stroke-dashoffset:0;stroke:var(--heat)}
@keyframes spin{to{transform:rotate(360deg)}}

.rig__fields{display:grid;gap:12px}
.field{position:relative}
.field__label{
  display:flex;align-items:center;gap:9px;
  font-size:.68rem;font-weight:700;font-stretch:88%;text-transform:uppercase;
  letter-spacing:.15em;color:var(--steel-400);margin-bottom:6px;
}
.field__step{
  flex:none;display:grid;place-items:center;
  width:19px;height:19px;border-radius:2px;
  background:var(--steel-800);border:1px solid var(--steel-700);
  font-size:.62rem;font-weight:800;letter-spacing:0;color:var(--steel-300);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.field.is-set .field__step{background:var(--red);border-color:var(--red);color:#fff}
.field.is-set .field__label{color:var(--steel-200)}

.field__select{
  position:relative;
}
.field__select select{
  -webkit-appearance:none;appearance:none;
  width:100%;padding:15px 44px 15px 15px;
  background:var(--ink);
  border:1px solid var(--steel-700);border-radius:var(--r);
  color:#fff;font-size:1rem;font-weight:600;font-stretch:96%;
  cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.field__select select:hover{border-color:var(--steel-600)}
.field__select select:focus-visible{border-color:var(--red-300);outline-offset:1px}
.field__select select:disabled{opacity:.45;cursor:not-allowed}
.field__select select option{background:var(--steel-900);color:#fff}
.field__select::after{
  content:'';position:absolute;right:16px;top:50%;
  width:9px;height:9px;margin-top:-6px;pointer-events:none;
  border-right:2px solid var(--steel-400);border-bottom:2px solid var(--steel-400);
  transform:rotate(45deg);
}

.rig__foot{margin-top:18px;display:grid;gap:11px}
.rig__hint{
  display:flex;gap:8px;align-items:flex-start;
  font-size:.8rem;line-height:1.5;color:var(--steel-400);
}
.rig__hint svg{flex:none;width:15px;height:15px;margin-top:3px;fill:var(--steel-400)}

/* --- Foto de fundo com fade --------------------------------------------
   Padrão único da página: a foto fica atrás do conteúdo e some num
   gradiente. No desktop o texto sempre cai no lado escuro e a foto respira
   no vazio; no mobile o topo escurece (título e texto corrido) e abre no
   meio, onde os cards já têm fundo sólido próprio. */
.has-photo{position:relative;isolation:isolate;overflow:hidden}
.photo-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.photo-bg img{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  /* --dim equaliza fotos de brilhos muito diferentes sob o mesmo scrim */
  filter:brightness(var(--dim,1));
}
.photo-bg::after{content:'';position:absolute;inset:0;background:var(--scrim)}

/* Mobile (valor base): o conteúdo ocupa a largura toda, então a foto não
   tem um "vazio" para ocupar. Abre o gradiente para ela aparecer de fato e
   compensa a legibilidade no texto corrido. */
.photo-bg{--scrim:linear-gradient(180deg,rgba(11,12,14,.88) 0%,rgba(11,12,14,.74) 32%,rgba(11,12,14,.52) 62%,rgba(11,12,14,.9) 100%)}

@media (max-width:919px){
  /* Numa seção alta e estreita a foto 16:9 vira uma fatia vertical mínima.
     Limita a altura (o resto vira fundo liso) e aceita um enquadramento
     próprio para o celular via --pos-m. */
  .photo-bg{height:min(100%,720px);bottom:auto}
  .photo-bg img{object-position:var(--pos-m,var(--pos,50% 50%))}
  .has-photo .lead{color:var(--steel-200)}
  .has-photo .head,.has-photo .urgent__inner>p,.has-photo .btn-note{text-shadow:0 1px 16px rgba(11,12,14,.92)}
}

@media (min-width:920px){
  .photo-bg--left{--scrim:linear-gradient(90deg,var(--ink) 0%,rgba(11,12,14,.94) 34%,rgba(11,12,14,.46) 66%,rgba(11,12,14,.6) 100%)}
  /* Conteúdo centralizado: escurece o miolo (onde está o texto) e deixa a
     foto aparecer em volta, emoldurando. */
  .photo-bg--center{
    --scrim:radial-gradient(48% 46% at 50% 28%,rgba(11,12,14,.97) 0%,rgba(11,12,14,.92) 52%,rgba(11,12,14,.35) 100%),
            linear-gradient(180deg,var(--ink) 0%,rgba(11,12,14,.34) 18%,rgba(11,12,14,.3) 78%,var(--ink) 100%);
  }
  .photo-bg--veil{--scrim:linear-gradient(180deg,var(--ink) 0%,rgba(11,12,14,.8) 20%,rgba(11,12,14,.6) 54%,rgba(11,12,14,.93) 100%)}
  /* Seção baixa com conteúdo centralizado: faixa escura no miolo, foto
     aparecendo nas duas laterais. */
  .photo-bg--band{
    --scrim:radial-gradient(44% 140% at 50% 50%,rgba(11,12,14,.97) 0%,rgba(11,12,14,.92) 48%,rgba(11,12,14,.28) 100%),
            linear-gradient(180deg,var(--ink) 0%,rgba(11,12,14,.3) 22%,rgba(11,12,14,.3) 78%,var(--ink) 100%);
  }
  /* Seções com grade de cards: o único vazio é o canto superior direito,
     ao lado do título. É lá que a foto aparece. */
  .photo-bg--corner{
    --scrim:linear-gradient(180deg,rgba(11,12,14,.08) 0%,rgba(11,12,14,.34) 34%,rgba(11,12,14,.92) 62%,var(--ink) 100%),
            linear-gradient(90deg,var(--ink) 0%,rgba(11,12,14,.9) 30%,rgba(11,12,14,.24) 68%,rgba(11,12,14,.12) 100%);
  }
}

/* Citação destacada — substitui os cards de foto que existiam antes */
.pull{border-left:3px solid var(--red);padding:4px 0 4px 20px}
.pull blockquote{margin:0;font-size:clamp(1.08rem,1.6vw,1.4rem);line-height:1.35;color:#fff;font-weight:600}
.pull figcaption{
  margin-top:12px;font-size:.71rem;font-weight:700;font-stretch:88%;
  text-transform:uppercase;letter-spacing:.15em;color:var(--red-300);
}

/* 08. Faixa de marcas de caminhão (marquee) ------------------------------ */
.strip{
  border-block:1px solid var(--steel-700);
  background:var(--ink-2);
  padding-block:20px;
  display:grid;gap:14px;
}
.strip__label{text-align:center;justify-content:center}
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{
  display:flex;width:max-content;align-items:center;
  gap:clamp(14px,2vw,26px);
  animation:slide 42s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
/* Chip de tamanho fixo: normaliza logos de proporções muito diferentes.
   Os limites são em px de propósito — max-height em % não resolve dentro
   de um grid item de altura indefinida. */
.marquee__item{
  flex:none;display:grid;place-items:center;
  width:138px;height:58px;padding:10px 14px;
  background:#EDEFF3;border-radius:3px;
  opacity:.82;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.marquee__item:hover{opacity:1;transform:translateY(-2px)}
.marquee__item img{max-height:38px;max-width:110px;width:auto;height:auto;object-fit:contain}

/* 09. Dor ---------------------------------------------------------------- */
.pain__grid{display:grid;gap:clamp(24px,2.6vw,32px);max-width:min(100%,740px)}

.symptoms{display:grid;gap:1px;margin-top:26px;background:var(--steel-700);border:1px solid var(--steel-700);border-radius:var(--r)}
@media (min-width:600px){
  .symptoms{grid-template-columns:1fr 1fr}
  /* Lista com número ímpar de itens: o último ocupa a linha inteira,
     senão sobra uma célula vazia com o fundo da grade aparecendo. */
  .symptom:last-child:nth-child(odd){grid-column:1/-1}
}
.symptom{
  display:flex;align-items:center;gap:12px;
  background:var(--steel-900);padding:14px 16px;
  font-size:.94rem;font-weight:500;color:var(--steel-200);line-height:1.35;
  transition:background-color .22s var(--ease),color .22s var(--ease);
}
.symptom:hover{background:var(--steel-800);color:#fff}
.symptom__x{
  flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:2px;
  background:rgba(210,48,44,.12);border:1px solid rgba(210,48,44,.34);
}
.symptom__x svg{width:11px;height:11px;stroke:var(--red-300);stroke-width:2.6;fill:none}

.pain__close{
  margin-top:clamp(26px,3vw,34px);padding:2px 0 2px 20px;
  border-left:3px solid var(--heat);
  font-size:1.05rem;line-height:1.6;color:#fff;font-weight:500;
}
.pain__close b{color:var(--heat);font-weight:800}

/* 10. Solução ------------------------------------------------------------ */
.solution__grid{display:grid;gap:clamp(30px,4vw,54px)}
@media (min-width:920px){
  .solution__grid{grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:center}
}
.inputs{
  display:grid;gap:1px;background:var(--steel-700);
  border:1px solid var(--steel-700);border-radius:var(--r);overflow:hidden;
  margin-top:28px;
}
@media (min-width:560px){.inputs{grid-template-columns:1fr 1fr}}
.inputs__item{
  background:var(--steel-900);padding:18px;display:grid;gap:6px;
  transition:background-color .22s var(--ease);
}
.inputs__item:hover{background:var(--steel-800)}
.inputs__k{font-size:.68rem;font-weight:700;font-stretch:88%;text-transform:uppercase;letter-spacing:.15em;color:var(--red-300)}
.inputs__v{font-size:1.06rem;font-weight:700;font-stretch:92%;color:#fff}
.inputs__d{font-size:.85rem;color:var(--steel-400);line-height:1.45}


/* 11. Marcas de turbina -------------------------------------------------- */
.brands__list{
  display:grid;gap:14px;margin-top:38px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:760px){.brands__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.brand-card{
  background:#fff;border-radius:var(--r);
  padding:26px 20px;display:grid;place-items:center;
  min-height:118px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.brand-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(0,0,0,.7)}
.brand-card img{width:100%;max-width:158px;height:auto}

.brands__extra{
  margin-top:clamp(28px,3.4vw,40px);
  display:grid;gap:clamp(18px,2.4vw,32px);
}
@media (min-width:680px){.brands__extra{grid-template-columns:1fr 1fr}}
.brands__extra div{
  display:flex;gap:13px;align-items:flex-start;
  font-size:.96rem;line-height:1.55;color:var(--steel-300);
}
.brands__extra svg{flex:none;width:19px;height:19px;margin-top:3px;fill:var(--red-300)}
.brands__extra b{color:#fff;font-weight:700}

/* 12. Marcas de caminhão (seção cheia) ---------------------------------- */
.fits__inner{position:relative}
.fits__logos{
  display:grid;gap:12px;margin-top:38px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:620px){.fits__logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.fits__logos{grid-template-columns:repeat(6,minmax(0,1fr))}}
.fits__logo{
  background:var(--paper);border-radius:var(--r);
  padding:20px 14px;display:grid;place-items:center;min-height:104px;
  transition:transform .22s var(--ease),background-color .22s var(--ease);
}
.fits__logo:hover{transform:translateY(-3px);background:#fff}
.fits__logo img{max-height:56px;width:auto;max-width:100%}

.fits__ask{
  margin-top:clamp(34px,4vw,50px);
  display:grid;gap:20px;justify-items:center;text-align:center;
}
.fits__ask h3{font-size:clamp(1.12rem,1.7vw,1.42rem);font-weight:800;font-stretch:88%;color:#fff;line-height:1.2}
.fits__ask p{margin-top:8px;font-size:.98rem;color:var(--steel-300);line-height:1.55;max-width:54ch}

/* 13. Diferenciais ------------------------------------------------------- */
.edge__grid{
  display:grid;gap:14px;margin-top:38px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
/* cinco itens: 3 na primeira linha, 2 largos na segunda */
@media (min-width:900px){
  .edge__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .edge-card{grid-column:span 2}
  .edge-card:nth-child(4),.edge-card:nth-child(5){grid-column:span 3}
}
.edge-card{
  position:relative;
  background:linear-gradient(178deg,var(--steel-900),#0E1014);
  border:1px solid var(--steel-700);border-radius:var(--r-lg);
  padding:24px 22px 26px;
  transition:border-color .24s var(--ease),transform .24s var(--ease);
}
.edge-card:hover{border-color:var(--steel-600);transform:translateY(-3px)}
.edge-card::after{
  content:'';position:absolute;inset:auto 0 0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.edge-card:hover::after{transform:scaleX(1)}
.edge-card__ico{
  width:40px;height:40px;margin-bottom:16px;
  display:grid;place-items:center;border-radius:var(--r);
  background:rgba(210,48,44,.11);border:1px solid rgba(210,48,44,.3);
}
.edge-card__ico svg{width:20px;height:20px;stroke:var(--red-300);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.edge-card h3{font-size:1.06rem;font-weight:800;font-stretch:90%;color:#fff;line-height:1.25;margin-bottom:8px}
.edge-card p{font-size:.94rem;color:var(--steel-300);line-height:1.55}

/* Garantia: fora do quadro, direto sobre o fundo da página */
.warranty{
  margin-top:clamp(34px,4vw,52px);
  display:grid;gap:20px;align-items:center;justify-items:center;text-align:center;
}
@media (min-width:700px){
  .warranty{grid-template-columns:auto minmax(0,1fr);gap:26px;justify-items:start;text-align:left}
}
.warranty img{width:clamp(94px,12vw,124px)}
.warranty h3{
  font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:900;font-stretch:74%;font-style:italic;
  text-transform:uppercase;color:var(--brass);line-height:1;
}
.warranty p{margin-top:10px;font-size:.98rem;color:var(--steel-300);line-height:1.55;max-width:52ch}

/* 14. Prova social ------------------------------------------------------- */
.proof__inner{max-width:780px}
.stats{
  display:grid;gap:1px;margin-top:34px;
  background:var(--steel-700);border:1px solid var(--steel-700);border-radius:var(--r);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:680px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:rgba(21,24,29,.92);padding:20px 18px;display:grid;gap:5px;align-content:start}
.stat__n{
  font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:900;font-stretch:72%;font-style:italic;
  color:#fff;line-height:.95;letter-spacing:-.01em;
}
.stat__n .u{color:var(--red);font-style:normal;font-stretch:80%}
.stat__k{font-size:.74rem;font-weight:700;font-stretch:88%;text-transform:uppercase;letter-spacing:.14em;color:var(--steel-400);line-height:1.4}
.stat--google .stat__n{display:flex;align-items:center;gap:9px}
.stat--google .seal__stars svg{width:15px;height:15px}

/* 15. Urgência ----------------------------------------------------------- */
.urgent{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,#1A0F0E 0%,#0B0C0E 62%);
  border-block:1px solid var(--steel-700);
}
.urgent::before{
  content:'';position:absolute;inset:0 0 auto;height:6px;
  background:repeating-linear-gradient(115deg,var(--heat) 0 14px,#0B0C0E 14px 28px);
  opacity:.85;
}
.urgent::after{
  content:'';position:absolute;inset:auto 0 0;height:6px;
  background:repeating-linear-gradient(115deg,var(--heat) 0 14px,#0B0C0E 14px 28px);
  opacity:.85;
}
.urgent__inner{display:grid;gap:26px;justify-items:center;text-align:center;max-width:860px;margin-inline:auto}
.urgent__math{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;align-items:center;
  font-weight:800;font-stretch:88%;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(.88rem,1.6vw,1.1rem);
}
.urgent__math span{color:#fff}
.urgent__math i{font-style:normal;color:var(--heat);font-size:1.35em;line-height:1}
/* Sem as caixas, no celular o "+" ficava órfão no fim da linha: empilha. */
@media (max-width:620px){
  .urgent__math{flex-direction:column;gap:7px}
}
.urgent__warn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:var(--r);
  background:rgba(255,122,24,.12);border:1px solid rgba(255,122,24,.36);
  color:var(--heat);font-weight:800;font-stretch:88%;text-transform:uppercase;
  letter-spacing:.08em;font-size:.84rem;
}
.urgent__warn svg{width:17px;height:17px;fill:var(--heat);flex:none}

/* 16. Formulário --------------------------------------------------------- */
.form-sec__grid{display:grid;gap:clamp(30px,4vw,52px)}
@media (min-width:920px){.form-sec__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:start}}

.form{
  background:#fff;border:1px solid var(--paper-2);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);
  box-shadow:0 24px 50px -30px rgba(11,12,14,.35);
}
.form__grid{display:grid;gap:14px}
@media (min-width:560px){
  .form__grid{grid-template-columns:1fr 1fr}
  .form__grid .f-full{grid-column:1/-1}
}
.f{display:grid;gap:6px}
.f label{
  font-size:.7rem;font-weight:700;font-stretch:88%;text-transform:uppercase;
  letter-spacing:.14em;color:#5D6673;
}
.f label .req{color:var(--red)}
.f input,.f textarea,.f select{
  width:100%;padding:14px 15px;
  background:var(--paper);border:1px solid #D3D9E1;border-radius:var(--r);
  color:var(--ink);font-size:1rem;font-weight:500;
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.f textarea{resize:vertical;min-height:96px;line-height:1.55}
.f input:hover,.f textarea:hover,.f select:hover{border-color:#B4BCC7}
.f input:focus,.f textarea:focus,.f select:focus{background:#fff;border-color:var(--red);outline:none;box-shadow:0 0 0 3px rgba(210,48,44,.13)}
.f input::placeholder,.f textarea::placeholder{color:#98A1AD}
.f.has-error input,.f.has-error textarea{border-color:var(--red-600);background:#FFF6F6}
.f__err{font-size:.8rem;color:var(--red-600);font-weight:600;display:none}
.f.has-error .f__err{display:block}

.form__foot{margin-top:20px;display:grid;gap:13px}
.form__lgpd{font-size:.79rem;color:#66707E;line-height:1.5}
.form__or{
  display:flex;align-items:center;gap:12px;
  font-size:.7rem;font-weight:700;font-stretch:88%;text-transform:uppercase;
  letter-spacing:.15em;color:#98A1AD;
}
.form__or::before,.form__or::after{content:'';height:1px;flex:1;background:var(--paper-2)}

.form__status{
  display:none;padding:14px 16px;border-radius:var(--r);
  font-size:.94rem;font-weight:600;line-height:1.5;
}
.form__status.is-ok{display:block;background:#E9F9EF;border:1px solid #A9E3C0;color:#0E5B31}
.form__status.is-err{display:block;background:#FFF1F1;border:1px solid #F2B9B7;color:#96201C}

.form-sec__aside{display:grid;gap:22px}
.wa-pitch h3{font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:900;font-stretch:76%;font-style:italic;text-transform:uppercase;color:#fff;line-height:1.05}
.wa-pitch p{margin-top:12px;font-size:.98rem;color:var(--steel-300);line-height:1.6}
.wa-pitch .btn{margin-top:22px}


/* 17. FAQ ---------------------------------------------------------------- */
.faq__list{
  margin-top:34px;display:grid;gap:1px;
  background:var(--steel-700);border:1px solid var(--steel-700);border-radius:var(--r);
  overflow:hidden;
}
.qa{background:var(--steel-900)}
.qa__q{
  width:100%;display:flex;align-items:center;gap:16px;
  padding:20px 20px;background:none;border:0;cursor:pointer;
  text-align:left;color:#fff;
  font-size:clamp(.98rem,1.3vw,1.08rem);font-weight:700;font-stretch:92%;line-height:1.35;
  transition:background-color .2s var(--ease);
}
.qa__q:hover{background:var(--steel-800)}
.qa__q span{flex:1}
.qa__sign{
  flex:none;position:relative;width:20px;height:20px;
}
.qa__sign::before,.qa__sign::after{
  content:'';position:absolute;top:50%;left:0;
  width:100%;height:2px;margin-top:-1px;background:var(--red);
  transition:transform .3s var(--ease);
}
.qa__sign::after{transform:rotate(90deg)}
.qa.is-open .qa__sign::after{transform:rotate(0)}
.qa__a{
  overflow:hidden;height:0;
  transition:height .34s var(--ease);
}
.qa__a-in{padding:0 20px 22px;font-size:.98rem;line-height:1.65;color:var(--steel-300);max-width:72ch}
.qa__a-in b{color:#fff;font-weight:700}

/* 18. CTA final ---------------------------------------------------------- */
.final{text-align:center}
.final__inner{display:grid;gap:22px;justify-items:center;max-width:70ch;margin-inline:auto;position:relative}
.final__title{font-size:var(--d2)}
.final__title .hl{color:var(--red-300)}

/* 19. Rodapé ------------------------------------------------------------- */
.footer{background:#08090B;border-top:1px solid var(--steel-700);padding-block:clamp(44px,5vw,64px) 0}
.footer__grid{display:grid;gap:34px}
@media (min-width:760px){.footer__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr)}}
.footer__logo{width:186px;margin-bottom:18px}
.footer__about{font-size:.92rem;color:var(--steel-400);line-height:1.65;max-width:40ch}
.footer h4{
  font-size:.72rem;font-weight:700;font-stretch:88%;text-transform:uppercase;
  letter-spacing:.16em;color:#fff;margin-bottom:14px;
}
.footer__list{display:grid;gap:9px;font-size:.94rem;color:var(--steel-300);line-height:1.55}
.footer__list a{transition:color .18s var(--ease)}
/* Linhas de vendas: só chamada telefônica — o ícone deixa isso explícito */
.footer__list--tel a{display:inline-flex;align-items:center;gap:9px}
.footer__list--tel svg{flex:none;width:14px;height:14px;fill:var(--steel-400);transition:fill .18s var(--ease)}
.footer__list--tel a:hover svg{fill:var(--red-300)}
.footer__note{margin-top:12px;font-size:.78rem;color:var(--steel-400);line-height:1.5}
.footer__list a:hover{color:var(--red-300)}
.footer__list address{font-style:normal}
.footer__social{display:flex;gap:10px;margin-top:18px}
.footer__social a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r);
  border:1px solid var(--steel-700);background:var(--steel-900);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.footer__social a:hover{border-color:var(--red);background:rgba(210,48,44,.12)}
.footer__social svg{width:18px;height:18px;fill:var(--steel-200)}
.footer__social a:hover svg{fill:#fff}
.footer__bar{
  margin-top:38px;padding-block:20px;border-top:1px solid var(--steel-700);
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;
  font-size:.8rem;color:var(--steel-400);
}
.footer__bar a{color:var(--steel-300)}
.footer__bar a:hover{color:var(--red-300)}

/* 20. CTAs fixos --------------------------------------------------------- */
/* Desktop: botão flutuante */
.fab{
  position:fixed;z-index:90;right:22px;bottom:22px;
  display:none;align-items:center;gap:11px;
  padding:14px 20px;border-radius:100px;
  background:var(--wa);color:#04170C;
  font-size:.9rem;font-weight:800;font-stretch:88%;text-transform:uppercase;letter-spacing:.05em;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.72);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),box-shadow .2s var(--ease);
}
.fab.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
.fab:hover{box-shadow:0 20px 42px -12px rgba(37,211,102,.9)}
.fab svg{width:22px;height:22px;fill:currentColor;flex:none}
@media (min-width:860px){.fab{display:inline-flex}}

/* Mobile: barra fixa */
.dock{
  position:fixed;z-index:95;inset:auto 0 0;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(11,12,14,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--steel-700);
  transform:translateY(105%);transition:transform .32s var(--ease);
}
.dock.is-on{transform:translateY(0)}
@media (min-width:860px){.dock{display:none}}
.dock__call{
  display:grid;place-items:center;width:54px;height:54px;border-radius:var(--r);
  background:var(--steel-800);border:1px solid var(--steel-700);
}
.dock__call svg{width:21px;height:21px;fill:#fff}
.dock .btn{height:54px;padding-inline:14px;font-size:.88rem}
@media (max-width:859px){
  body{padding-bottom:0}
  .footer__bar{padding-bottom:86px}
}

/* 21. Motion / reveal ---------------------------------------------------- */
[data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* Sequência de entrada do hero */
.hero__copy>*,.hero .rig{opacity:0}
.is-loaded .hero__copy>*{animation:rise .72s var(--ease-out) forwards}
.is-loaded .hero__copy>*:nth-child(1){animation-delay:.06s}
.is-loaded .hero__copy>*:nth-child(2){animation-delay:.14s}
.is-loaded .hero__copy>*:nth-child(3){animation-delay:.22s}
.is-loaded .hero__copy>*:nth-child(4){animation-delay:.3s}
.is-loaded .hero .rig{animation:rise .8s var(--ease-out) .34s forwards}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .hero__copy>*,.hero .rig{opacity:1}
  .marquee__track{animation:none;transform:none}
  .rotor__wheel{animation:none}
}

/* Impressão simples */
@media print{
  .header,.dock,.fab,.hero__media,.hero__scrim,.photo-bg{display:none !important}
  body{background:#fff;color:#000}
}