/* =========================================================
   Alemonstrinho Reparações Automotivas
   Sistema: superfícies alternadas, cantos retos, zero sombra,
   um único acento por tela. Verde no lugar do amarelo.
   ========================================================= */

:root{
  /* superfícies */
  --branco:   #FFFFFF;
  --marmore:  #F5F5F5;
  --carbono:  #202020;
  --carbono-2:#181818;
  --preto:    #000000;

  /* linhas */
  --borda:      #D6D6D6;
  --borda-forte:#969696;
  --aco:        #7D7D7D;

  /* acento (verde da oficina) */
  --verde:      #0E7A38;
  --verde-forte:#0B6630;

  --wa: #25D366;

  /* tokens que cada superfície redefine */
  --bg:      var(--branco);
  --sup:     var(--branco);
  --tx:      #202020;
  --tx-2:    #313131;
  --tx-3:    #7D7D7D;
  --linha:   var(--borda);
  --acento:  var(--verde);

  /* espaçamento base 8 */
  --e8:8px; --e16:16px; --e24:24px; --e32:32px; --e40:40px;
  --e48:48px; --e56:56px; --e64:64px; --e80:80px;

  --pad: clamp(16px, 5vw, 48px);
  --sec: clamp(56px, 9vw, 112px);
  --hdr-h: 54px;
  --track: .004em;

  --fd: 'Archivo', 'Archivo Narrow', system-ui, sans-serif;
  --ff: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, Menlo, monospace;

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

/* ---------- superfícies ---------- */
.section--escura, .hero, .banda, .cta, .ftr, .mobmenu{
  --bg:      var(--carbono);
  --sup:     var(--carbono);
  --tx:      #FFFFFF;
  --tx-2:    #D2D2D2;
  --tx-3:    #969696;
  --linha:   #494949;
  --acento:  #3FCB6B;
}
.section--escura{ background:var(--carbono); color:#fff }
.section--marmore{ background:var(--marmore) }
.section--clara{ background:var(--branco) }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:66px; overflow-x:clip }
body{
  margin:0; background:var(--branco); color:#202020;
  font-family:var(--ff); font-size:16px; line-height:1.5;
  letter-spacing:var(--track);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit }
h1,h2,h3,h4{
  margin:0; font-family:var(--fd); font-weight:400;
  text-transform:uppercase; letter-spacing:var(--track); line-height:1.05;
}
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
sup{ font-size:.6em; vertical-align:super; line-height:0 }

::selection{ background:var(--verde); color:#fff }
:focus-visible{ outline:2px solid var(--acento); outline-offset:2px }

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

/* ---------- estrutura ---------- */
.container{ width:min(1440px, 100% - (var(--pad) * 2)); margin-inline:auto }
.container--narrow{ width:min(880px, 100% - (var(--pad) * 2)) }
.section{ padding-block:var(--sec); position:relative; color:var(--tx) }

.eyebrow{
  font-family:var(--fd); font-size:12px; font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--acento); margin-bottom:var(--e16);
}
.hero .eyebrow{ font-size:clamp(11px,.85vw,13px); color:#fff; letter-spacing:.16em; margin-bottom:12px }

.ico{ width:1.1em; height:1.1em; flex:none }

/* cabeçalho de seção: nome à esquerda, texto à direita */
.shead{ margin-bottom:var(--e64); display:grid; gap:var(--e24) }
.shead .eyebrow{ margin-bottom:0 }
.shead h2{ font-size:clamp(34px, 4.4vw, 54px); line-height:1.13; font-weight:400 }
.shead__lead{ color:var(--tx-2); font-size:16px; max-width:44ch; line-height:1.5; letter-spacing:.37px }
@media (min-width:900px){
  .shead{ grid-template-columns:1.35fr 1fr; align-items:start; gap:var(--e64); row-gap:var(--e16) }
  .shead .eyebrow{ grid-column:1; grid-row:1 }
  .shead h2{ grid-column:1; grid-row:2 }
  .shead__lead{ grid-column:2; grid-row:2; margin-top:8px }
}

/* ---------- botões: retangulares, sem sombra ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 24px; border-radius:0; border:1px solid transparent;
  font-family:var(--fd); font-size:15px; font-weight:400;
  text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary{ background:var(--verde); color:#fff }
.btn--primary:hover{ background:var(--verde-forte) }
.section--escura .btn--primary, .hero .btn--primary, .cta .btn--primary, .banda .btn--primary{ background:#17A34B }
.section--escura .btn--primary:hover, .hero .btn--primary:hover, .cta .btn--primary:hover, .banda .btn--primary:hover{ background:#0E7A38 }
.btn--branco{ background:#fff; color:#202020 }
.btn--branco:hover{ background:var(--acento); color:#fff }
.btn--ghost{ background:transparent; border-color:var(--aco); color:var(--tx) }
.btn--ghost:hover{ border-color:var(--tx); background:transparent }
.btn--lg{ padding:18px 32px; font-size:16px }
.btn--sm{ padding:10px 16px; font-size:13px }
.btn--block{ display:flex; width:100% }
.btn--mt{ margin-top:var(--e32) }
.btn svg{ transition:transform .2s var(--ease) }
.btn:hover svg{ transform:translateX(4px) }

/* link com seta */
.card__link{
  display:inline-flex; align-items:center; gap:10px; margin-top:auto;
  font-family:var(--fd); font-size:14px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--tx); padding-top:var(--e16); border-top:1px solid var(--linha); width:100%;
}
.card__link svg{ transition:transform .2s var(--ease); color:var(--acento) }
.card__link:hover svg{ transform:translateX(4px) }

/* =========================================================
   CABEÇALHO
   ========================================================= */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:100; background:var(--carbono); color:#fff }
.topbar{ background:var(--carbono-2); border-bottom:1px solid #2C2C2C }
.topbar__in{ display:flex; align-items:center; gap:var(--e32); height:34px; overflow:hidden }
.topbar__item{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-size:12px; letter-spacing:.06em; color:#969696; white-space:nowrap;
  transition:color .2s var(--ease);
}
.topbar__item svg{ width:12px; height:12px; color:var(--acento) }
a.topbar__item:hover{ color:#fff }
.topbar__item--end{ margin-left:auto }
.topbar__item--hide{ display:none }
.hdr.is-stuck .topbar{ display:none }

.hdr__in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--e16); height:var(--hdr-h) }
.menubt{
  justify-self:start; display:inline-flex; align-items:center; gap:12px;
  background:none; border:0; padding:0; cursor:pointer; color:#fff;
  font-family:var(--fd); font-size:14px; font-weight:400; text-transform:uppercase; letter-spacing:.12em;
}
.menubt__ico{ display:grid; gap:5px; width:22px }
.menubt__ico i{ display:block; height:1.5px; background:#fff; transition:transform .25s var(--ease), opacity .2s }
.menubt[aria-expanded="true"] .menubt__ico i:nth-child(1){ transform:translateY(3.25px) rotate(45deg) }
.menubt[aria-expanded="true"] .menubt__ico i:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg) }
.hdr__in .brand{ justify-self:center }
.hdr__cta{ justify-self:end; display:flex; align-items:center; gap:var(--e24); margin:0 }
.hdr__ico{ color:#fff; opacity:.85; transition:opacity .2s var(--ease), color .2s var(--ease) }
.hdr__ico svg{ width:20px; height:20px }
.hdr__ico:hover{ opacity:1; color:var(--acento) }
.brand{ display:flex; align-items:center; gap:10px; flex:none }
.brand__mark{ width:auto; height:40px; flex:none }
/* rodapé: a logo já traz o nome, então dispensa o texto ao lado */
.brand--full{ display:block }
.brand__logo{ width:240px; max-width:70vw; height:auto }
.brand__txt{ display:flex; flex-direction:column; line-height:1 }
.brand__txt strong{ font-family:var(--fd); font-size:18px; font-weight:400; text-transform:uppercase; letter-spacing:.05em }
.brand__txt small{ font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:#969696; margin-top:4px }

.nav{ display:none; margin-left:auto; gap:var(--e32) }
.nav a{
  font-family:var(--fd); font-size:15px; text-transform:uppercase; letter-spacing:.1em;
  color:#C9C9C9; position:relative; padding-block:6px; transition:color .2s var(--ease);
}
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--acento); transition:width .25s var(--ease) }
.nav a:hover{ color:#fff }
.nav a:hover::after, .nav a.is-active::after{ width:100% }
.nav a.is-active{ color:#fff }

.hdr__cta{ display:flex; align-items:center; gap:16px; margin-left:auto }
.hdr__cta .btn{ display:none }

.burger{
  width:40px; height:40px; flex:none; display:grid; place-content:center; gap:5px;
  background:transparent; border:1px solid #494949; border-radius:0; cursor:pointer;
  transition:border-color .2s var(--ease);
}
.burger:hover{ border-color:var(--acento) }
.burger span{ display:block; width:16px; height:1.5px; background:#fff; transition:transform .25s var(--ease), opacity .2s }
.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) }

.mobmenu{
  position:fixed; inset:0; z-index:99; background:var(--carbono); color:#fff;
  padding:calc(var(--hdr-h) + 32px) var(--pad) var(--e40);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--e40);
  overflow-y:auto; animation:aparece .25s var(--ease);
}
.mobmenu[hidden]{ display:none }
@keyframes aparece{ from{ opacity:0 } to{ opacity:1 } }
.mobmenu nav{ display:flex; flex-direction:column }
.mobmenu nav a{
  display:flex; align-items:baseline; gap:20px; padding:14px 0;
  font-family:var(--fd); font-size:clamp(26px,6vw,44px); font-weight:400;
  text-transform:uppercase; letter-spacing:.03em;
  border-bottom:1px solid #333; transition:color .2s var(--ease), padding-left .25s var(--ease);
}
.mobmenu nav a:hover{ color:var(--acento); padding-left:10px }
.mobmenu nav a span{ font-family:var(--fm); font-size:11px; color:var(--acento) }
.mobmenu__pe{ display:flex; flex-wrap:wrap; gap:var(--e24); align-items:center; justify-content:space-between; padding-top:var(--e24); border-top:1px solid #333 }
.mobmenu__pe p{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#969696 }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; isolation:isolate; background:var(--carbono); color:#fff;
  min-height:min(72svh, 640px);
  /* o bloco de texto fica no meio da altura: colado embaixo ele afundava na foto.
     O padding-top desconta o header fixo, então "center" cai equilibrado. */
  display:flex; align-items:center;
  padding-top:calc(var(--hdr-h) + 40px); padding-bottom:var(--e40);
  overflow:hidden;
}
.hero__video{
  position:absolute; inset:0; z-index:-3;
  width:100%; height:100%; object-fit:cover; object-position:center 45%;
  filter:brightness(.82) contrast(1.06) saturate(.86);
}
/* foto do topo. Dois recortes da mesma foto (ver scripts/otimiza-fotos.js):
   deitado no desktop, em pé no celular — cada um pede uma ancoragem. */
.hero__foto{
  position:absolute; inset:0; z-index:-3;
  /* o carro esta a direita do recorte: ancora a direita para ele nao sair da tela
     quando o topo fica mais estreito que a foto */
  width:100%; height:100%; object-fit:cover; object-position:85% 50%;
  filter:brightness(1) contrast(1.03) saturate(1);
}
@media (max-width:700px){
  .hero__foto{ object-position:center top }
}
.hero picture{ display:contents }
/* a foto ja traz o escuro a esquerda, onde fica o texto: o scrim so reforca ali
   e deixa o carro, a direita, quase sem sombra */
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.45) 100%),
    linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 32%, rgba(0,0,0,0) 48%);
}
.hero__dots{
  position:absolute; z-index:-1; pointer-events:none;
  left:calc(var(--pad) - 14px); top:28%; width:140px; height:120px; opacity:.5;
  background-image:radial-gradient(var(--acento) 1.6px, transparent 1.7px);
  background-size:15px 15px;
  mask-image:linear-gradient(140deg,#000 10%, transparent 78%);
  -webkit-mask-image:linear-gradient(140deg,#000 10%, transparent 78%);
}
.hero__in{
  position:relative; z-index:1; width:min(1440px, 100% - (var(--pad) * 2));
  display:grid; gap:var(--e32); align-items:end;
}
.hero__pe{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e24); width:100% }
.btn--acao{ background:var(--verde); color:#fff; border:0 }
.btn--acao:hover{ background:#17A34B }
.pips{ display:flex; align-items:center; gap:var(--e24) }
.pip{
  width:40px; height:2px; padding:0; border:0; border-radius:0; cursor:pointer;
  background:rgba(255,255,255,.35); transition:background .25s var(--ease);
  position:relative;
}
.pip::before{ content:""; position:absolute; inset:-12px 0 }
.pip.is-on{ background:#fff }
.pausa{
  width:34px; height:36px; padding:0; margin-left:var(--e8);
  background:none; border:0; color:#fff; cursor:pointer; opacity:.85;
  transition:opacity .2s var(--ease);
}
.pausa:hover{ opacity:1 }
.pausa svg{ width:100%; height:100% }
@media (min-width:1000px){ .hero__in{ gap:var(--e40) } }
.hero__texts{ display:grid }
/* os servicos ficam todos visiveis de cara, sem texto trocando sozinho */
.hero__servs{ margin-top:var(--e24); display:grid; gap:10px }
.hero__servs li{
  position:relative; padding-left:22px; color:#E6E6E6;
  font-size:clamp(15px,1.15vw,17px); line-height:1.35; letter-spacing:.02em;
}
.hero__servs li::before{ content:""; position:absolute; left:0; top:.62em; width:12px; height:2px; background:var(--acento) }
.hero h1, .slidetxt__t{
  font-family:var(--fd); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px, 3.1vw, 42px); line-height:1.06; letter-spacing:var(--track);
  max-width:21ch; margin:0; color:#fff;
}
.hero h1 em, .slidetxt__t em{ font-style:normal }
.lead{ margin-top:var(--e24); color:#DADADA; font-size:clamp(16px,1.6vw,18px); line-height:1.5; max-width:52ch }
.hero__btns{ margin-top:var(--e32); display:flex; flex-wrap:wrap; gap:var(--e16) }
.trust{ margin-top:var(--e40); padding-top:var(--e24); border-top:1px solid #4A4A4A; display:grid; gap:12px }
.trust li{ display:flex; align-items:center; gap:10px; font-size:14px; color:#D2D2D2 }
.trust svg{ color:var(--acento) }

.hero__seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; display:grid; place-content:center;
  border:1px solid rgba(255,255,255,.35); border-radius:0;
  background:transparent; color:#fff; cursor:pointer; opacity:.6;
  transition:opacity .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.hero__seta svg{ width:20px; height:20px }
.hero__seta:hover{ opacity:1; border-color:#fff; background:rgba(255,255,255,.1) }
.hero__seta--ant{ left:8px }
.hero__seta--prox{ right:8px }
@media (min-width:900px){ .hero__seta--ant{ left:24px } .hero__seta--prox{ right:24px } }

/* ---------- FAIXA DE GARANTIAS ---------- */

/* =========================================================
   MARCAS
   ========================================================= */

/* =========================================================
   SOBRE
   ========================================================= */
.sobre{ display:grid; gap:var(--e40); align-items:center }
.sobre__txt h2{ font-size:clamp(36px,5vw,64px); margin-bottom:var(--e24) }
.sobre__txt p{ color:var(--tx-2); font-size:17px; line-height:1.6; margin-bottom:var(--e16); max-width:54ch }
.sobre__txt strong{ color:var(--tx); font-weight:600 }
.sobre__foto{ aspect-ratio:4/3; min-height:280px; overflow:hidden }

/* =========================================================
   CARDS DE SERVIÇO (sem moldura, imagem cheia)
   ========================================================= */
.cards{ display:grid; gap:var(--e32) }
.card{ display:flex; flex-direction:column; background:transparent; border:0; border-radius:0 }
.card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#E4E4E4 }
.card__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.09); transition:transform .7s var(--ease) }
.card:hover .card__media img{ transform:scale(1.14) }
.card__body{ padding:var(--e24) 0 0; display:flex; flex-direction:column; flex:1 }
.card__num{ font-family:var(--fm); font-size:11px; letter-spacing:.16em; color:var(--tx-3); margin-bottom:10px }
.card h3{ font-size:26px; margin-bottom:12px }
.card__body > p{ color:var(--tx-2); font-size:16px; line-height:1.55 }
.ticks{ margin:var(--e24) 0; display:grid; gap:10px }
.ticks li{ position:relative; padding-left:20px; font-size:15px; color:var(--tx-2) }
.ticks li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--acento) }

/* =========================================================
   BANDA COM FOTO
   ========================================================= */
.banda{ position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(64px,10vw,140px); color:#fff }
/* =========================================================
   ANTES E DEPOIS — comparador de arrastar
   ========================================================= */
.antdep__in{ display:grid; gap:var(--e48); align-items:center }
.antdep h2{ font-size:clamp(34px,4.6vw,60px); line-height:1 }
.antdep .shead__lead{ margin-top:var(--e24); max-width:46ch }
@media (min-width:900px){
  .antdep__in{ grid-template-columns:1fr minmax(0, 520px); gap:var(--e64) }
}

.cmp{
  position:relative; margin:0; overflow:hidden; aspect-ratio:4/5; max-width:100%;
  background:#111; border:1px solid var(--linha); user-select:none; touch-action:pan-y;
}
.cmp__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.cmp__img--antes{ clip-path:inset(0 calc(100% - var(--pos)) 0 0) }
.cmp__tag{
  position:absolute; top:16px; z-index:2; padding:6px 12px;
  font-family:var(--fd); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(20,20,20,.78); color:#fff; pointer-events:none;
}
.cmp__tag--antes{ left:16px }
.cmp__tag--depois{ right:16px; background:#17A34B }
.cmp__linha{
  position:absolute; top:0; bottom:0; left:var(--pos); z-index:2; width:2px; margin-left:-1px;
  background:#fff; pointer-events:none; box-shadow:0 0 12px rgba(0,0,0,.5);
}
.cmp__linha i{
  position:absolute; top:50%; left:50%; width:48px; height:48px; transform:translate(-50%,-50%);
  display:grid; place-content:center; background:#17A34B; color:#fff; border:2px solid #fff;
  border-radius:50%; box-shadow:0 4px 18px rgba(0,0,0,.45);
}
.cmp__linha svg{ width:22px; height:22px }
/* o range cobre a foto inteira e e quem recebe o arraste e o teclado */
.cmp__range{
  position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; appearance:none; -webkit-appearance:none; background:transparent;
}
.cmp__range::-webkit-slider-thumb{ -webkit-appearance:none; width:48px; height:100vh }
.cmp__range::-moz-range-thumb{ width:48px; height:100vh; border:0 }
.cmp:has(.cmp__range:focus-visible) .cmp__linha i{ outline:2px solid #fff; outline-offset:3px }

/* a fila de carros esta a direita do recorte (escuro acrescentado a esquerda) */
.banda__img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:85% 60% }
.banda__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(32,32,32,.95) 0%, rgba(32,32,32,.6) 55%, rgba(32,32,32,.45) 100%) }
.banda__in{ display:grid; gap:var(--e32); justify-items:start }
.banda h2{ font-size:clamp(34px,5vw,72px); max-width:20ch; line-height:.98 }

/* =========================================================
   PROJETOS
   ========================================================= */
.perf{ display:grid; gap:var(--e40) }
.dyno{ margin:0; background:var(--branco); border:1px solid var(--linha); padding:var(--e24) }
.section--escura .dyno{ background:#262626 }
.dyno__head{ display:flex; flex-wrap:wrap; gap:var(--e16); align-items:center; justify-content:space-between; margin-bottom:var(--e24) }
.dyno__head .eyebrow{ margin:0 }
.dyno__legend{ display:flex; gap:var(--e24) }
.lg{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--tx-2); font-family:var(--fm) }
.lg::before{ content:""; width:16px; height:2px }
.lg--stock::before{ background:#969696 }
.lg--tuned::before{ background:var(--acento) }
.dyno__svg{ width:100%; height:auto; overflow:visible }
.dyno__note{ margin-top:var(--e16); font-size:12px; color:var(--tx-3); line-height:1.5 }

.js .dyno__line{ stroke-dasharray:1400; stroke-dashoffset:1400 }
.js .dyno__area, .js .dyno__peak{ opacity:0 }
.dyno.is-in .dyno__line{ animation:tracar 1.6s var(--ease) forwards }
.dyno.is-in .dyno__line--tuned{ animation-delay:.25s }
.dyno.is-in .dyno__area{ animation:surge .9s var(--ease) 1.1s forwards }
.dyno.is-in .dyno__peak{ animation:surge .6s var(--ease) 1.5s forwards }
@keyframes tracar{ to{ stroke-dashoffset:0 } }
@keyframes surge{ to{ opacity:1 } }

.perf__list{ display:grid; gap:0 }
.acc{ padding:var(--e24) 0; border-top:1px solid var(--linha) }
.acc:last-of-type{ border-bottom:1px solid var(--linha) }
.acc h3{ font-size:22px; margin-bottom:10px }
.acc p{ color:var(--tx-2); font-size:16px; line-height:1.55 }
.stages{ display:grid; gap:var(--e16); margin-top:var(--e32) }
.stage{ padding:var(--e24); border:1px solid var(--linha) }
.stage__tag{
  display:inline-block; margin-bottom:12px; font-family:var(--fd); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--verde); padding:6px 12px;
}
.section--escura .stage__tag, .section--marmore .stage__tag{ background:var(--verde) }
.stage p{ color:var(--tx-2); font-size:15px }

/* =========================================================
   ETAPAS
   ========================================================= */
.timeline{ display:grid; gap:0; border-top:1px solid var(--linha) }
.tl{ position:relative; padding:var(--e24) 0 var(--e24) 64px; border-bottom:1px solid var(--linha) }
.tl__n{
  position:absolute; left:0; top:var(--e24);
  width:40px; height:40px; display:grid; place-content:center;
  font-family:var(--fd); font-size:16px; color:var(--acento); border:1px solid var(--linha);
}
.tl h3{ font-size:21px; margin-bottom:8px }
.tl p{ color:var(--tx-2); font-size:16px; line-height:1.55 }

/* =========================================================
   GRADE DE SERVIÇOS
   ========================================================= */
.grid-svc{ display:grid; gap:0; border-top:1px solid var(--linha); border-left:1px solid var(--linha) }
.svc{ padding:var(--e24); border-right:1px solid var(--linha); border-bottom:1px solid var(--linha); transition:background .2s var(--ease) }
.svc:hover{ background:var(--marmore) }
.section--escura .svc:hover{ background:#262626 }
.svc h3{ font-size:19px; margin-bottom:8px }
.svc p{ color:var(--tx-3); font-size:15px; line-height:1.5 }

/* =========================================================
   SPLIT
   ========================================================= */
.split{ display:grid; gap:var(--e48) }
.split__l h2{ font-size:clamp(36px,5vw,64px) }
.split__l .shead__lead{ margin-top:var(--e24); max-width:48ch }
.why{ margin-top:var(--e32); display:grid; gap:var(--e16) }
.why li{ position:relative; padding-left:24px; font-size:16px; color:var(--tx-2); line-height:1.55 }
.why li::before{ content:""; position:absolute; left:0; top:.6em; width:10px; height:2px; background:var(--acento) }
.why strong{ color:var(--tx); font-weight:600 }

.steps{ display:grid; gap:0; border-top:1px solid var(--linha) }
.step{ display:flex; gap:var(--e24); padding:var(--e24) 0; border-bottom:1px solid var(--linha) }
.step > span{ font-family:var(--fd); font-size:24px; color:var(--acento); line-height:1; flex:none; width:34px }
.step h3{ font-size:19px; margin-bottom:6px }
.step p{ color:var(--tx-2); font-size:16px; line-height:1.55 }

/* =========================================================
   FOTOS
   ========================================================= */
.shot{ position:relative; margin:0; overflow:hidden; border-radius:0; border:0; background:#1A1A1A }
.shot img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform .7s var(--ease) }
.shot:hover img{ transform:scale(1.11) }
.shot figcaption{
  position:absolute; inset:auto 0 0 0; padding:var(--e48) var(--e16) var(--e16);
  font-family:var(--fd); font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
}
.galeria{ display:grid; gap:var(--e24) }
.galeria .shot{ aspect-ratio:4/3 }
.galeria__nota{ margin-top:var(--e24); font-size:12px; color:var(--tx-3); letter-spacing:.06em }

/* =========================================================
   CTA
   ========================================================= */
.cta{ padding-block:clamp(56px,8vw,104px); background:var(--carbono); color:#fff }
.cta__in{ display:grid; gap:var(--e32); align-items:center }
.cta h2{ font-size:clamp(34px,5vw,72px); line-height:.98 }
.cta p{ margin-top:var(--e16); color:#D2D2D2; max-width:50ch; font-size:17px }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ display:grid; gap:0; border-top:1px solid var(--linha) }
.faq details{ border-bottom:1px solid var(--linha); background:transparent }
.faq summary{
  list-style:none; cursor:pointer; padding:var(--e24) 48px var(--e24) 0; position:relative;
  font-family:var(--fd); font-size:20px; text-transform:uppercase; letter-spacing:var(--track);
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:10px; height:10px;
  border-right:1.5px solid var(--acento); border-bottom:1.5px solid var(--acento);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-25%) rotate(-135deg) }
.faq summary:hover{ color:var(--acento) }
.faq details > div{ padding:0 48px var(--e24) 0; color:var(--tx-2); font-size:16px; line-height:1.6 }

/* =========================================================
   CONTATO
   ========================================================= */
.contact{ display:grid; gap:var(--e40) }
.contact__info{ display:grid; gap:0; align-content:start; border-top:1px solid var(--linha) }
.info{ display:flex; align-items:center; gap:var(--e16); padding:var(--e24) 0; border-bottom:1px solid var(--linha); transition:padding-left .2s var(--ease) }
a.info:hover{ padding-left:8px }
.info__ico{ width:40px; height:40px; flex:none; display:grid; place-content:center; border:1px solid var(--linha); color:var(--acento) }
.info__ico svg{ width:18px; height:18px }
.info__txt{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.info__txt small{ font-family:var(--fd); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-3) }
.info__txt strong{ font-size:17px; font-weight:600; line-height:1.35 }
.info__txt strong.pendente{ color:var(--tx-3); font-weight:400; font-style:italic }

.social{ display:flex; gap:var(--e16); flex-wrap:wrap; margin-top:var(--e24) }
.social a{
  display:inline-flex; align-items:center; gap:10px; padding:12px 20px;
  border:1px solid var(--aco); font-family:var(--fd); font-size:13px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--tx);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.social a svg{ width:15px; height:15px }
.social a:hover{ border-color:var(--acento); color:var(--acento) }

.form{ padding:var(--e32); background:var(--marmore); border:1px solid var(--linha); display:grid; gap:var(--e24); align-content:start }
.section--escura .form{ background:#262626 }
.form__title{ font-family:var(--fd); font-size:26px; text-transform:uppercase; letter-spacing:var(--track) }
.field{ display:grid; gap:8px }
.field-row{ display:grid; gap:var(--e24) }
.field label{ font-family:var(--fd); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-3) }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; background:var(--branco); border:1px solid var(--borda-forte); border-radius:0;
  font-size:16px; resize:vertical; transition:border-color .2s var(--ease);
}
.section--escura .field input, .section--escura .field select, .section--escura .field textarea{ background:#1C1C1C; border-color:#494949 }
.field textarea{ min-height:120px }
.field input::placeholder, .field textarea::placeholder{ color:#969696 }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--acento) }
.field input.is-err, .field textarea.is-err{ border-color:#C62828 }
.field select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--acento) 50%),linear-gradient(135deg,var(--acento) 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:44px;
}
.form__note{ font-size:12px; color:var(--tx-3); line-height:1.5 }

/* =========================================================
   RODAPÉ
   ========================================================= */
.ftr{ background:var(--carbono-2); color:#fff; padding-top:var(--e64) }
.ftr__in{ display:grid; gap:var(--e40); padding-bottom:var(--e40) }
.ftr__brand p{ margin-top:var(--e16); color:#969696; font-size:15px; max-width:36ch; line-height:1.55 }
.ftr__selo{ margin-top:var(--e24) !important; font-family:var(--fd); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--acento) !important }
.ftr__nav{ display:grid; gap:var(--e32) }
.ftr__nav h4{ font-family:var(--fd); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#7D7D7D; margin-bottom:var(--e16); font-weight:400 }
.ftr__nav a{ display:block; font-size:15px; color:#C9C9C9; padding-block:6px; transition:color .2s var(--ease) }
.ftr__nav a:hover{ color:var(--acento) }
.ftr__bot{ border-top:1px solid #333; padding-block:var(--e24); display:grid; gap:8px; font-size:12px; color:#7D7D7D; letter-spacing:.06em }

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.wafloat{
  position:fixed; right:0; bottom:0; z-index:90;
  display:flex; align-items:center; gap:10px; padding:16px;
  background:var(--wa); color:#08130C; border-radius:0;
  font-family:var(--fd); font-size:14px; text-transform:uppercase; letter-spacing:.1em;
  transform:translateY(120%); transition:transform .3s var(--ease);
}
.wafloat.is-on{ transform:none }
.wafloat svg{ width:24px; height:24px }
.wafloat span{ display:none }

/* =========================================================
   REVEAL
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.js .reveal.is-in{ opacity:1; transform:none }

/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (max-width:430px){
  .menubt{ font-size:0; gap:0 }
  .brand{ gap:8px }
  .brand__mark{ height:34px }
  .brand__txt strong{ font-size:16px }
  .brand__txt small{ font-size:7.5px; letter-spacing:.16em }
  .hdr__cta{ gap:var(--e16) }
}

@media (min-width:600px){
  .trust{ grid-template-columns:repeat(2,1fr) }
  .field-row{ grid-template-columns:1fr 1fr }
  .grid-svc{ grid-template-columns:repeat(2,1fr) }
  .stages{ grid-template-columns:repeat(3,1fr) }
  .galeria{ grid-template-columns:1fr 1fr; grid-auto-rows:230px }
  .galeria .shot{ aspect-ratio:auto }
  .galeria .shot--tall{ grid-row:span 2 }
  .wafloat span{ display:block; padding-right:8px }
  .ftr__nav{ grid-template-columns:repeat(3,1fr) }
  .ftr__bot{ grid-template-columns:1fr auto; align-items:center }
}

@media (min-width:900px){
  .topbar__item--hide{ display:inline-flex }
  .hdr__cta .btn{ display:inline-flex }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .timeline{ grid-template-columns:repeat(2,1fr); column-gap:var(--e48) }
  .contact{ grid-template-columns:1fr 1fr; gap:var(--e48) }
  .cta__in{ grid-template-columns:1.2fr auto; align-items:center }
  .split{ grid-template-columns:1fr 1fr; gap:var(--e64); align-items:start }
  .sobre{ grid-template-columns:1fr 1fr; gap:var(--e64) }
  .ftr__in{ grid-template-columns:1fr 1.6fr }
  .trust{ grid-template-columns:repeat(3,1fr) }
  .grid-svc{ grid-template-columns:repeat(3,1fr) }
}

@media (min-width:1000px){
  .galeria{ grid-template-columns:repeat(3,1fr); grid-auto-rows:300px }
  .galeria .shot--tall{ grid-row:span 1 }
}

@media (min-width:1200px){
  .nav{ display:flex }
  .burger{ display:none }
  .hdr__cta{ margin-left:0 }
  .cards{ grid-template-columns:repeat(3,1fr) }
  .card--wide{ grid-column:span 2 }
  .card--wide .card__media{ aspect-ratio:21/9 }
  .perf{ grid-template-columns:1.1fr 1fr; gap:var(--e48); align-items:start }
  .dyno{ position:sticky; top:88px }
  .galeria{ grid-template-columns:repeat(3,1fr); grid-auto-rows:330px }
  .galeria .shot--tall{ grid-row:span 1 }
  .grid-svc{ grid-template-columns:repeat(4,1fr) }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
/* =========================================================
   CELULAR (ate 700px)
   Aqui e uma coluna so. O que o desktop resolve com espaco
   horizontal (titulo de 36px ocupando meia linha, foto ao
   lado do texto) em 390px vira titulo de tres linhas e
   blocos soltos. Este bloco e escala e respiro, nao layout.
   ========================================================= */
@media (max-width:700px){

  /* ---------- topo ---------- */
  /* Uma tela cheia e so: quem abre o site ve o topo inteiro e mais nada.
     svh e a altura da janela COM a barra do navegador na tela, que e o
     estado em que a pagina carrega; com vh o topo passava do fim da tela.
     O texto fica no pe da foto, onde o degrade escuro segura o titulo e a
     placa e os carros ficam livres na metade de cima. */
  /* A foto (hero-alto) mostra o carro inteiro na largura da tela e ocupa ~90vw
     de altura a partir do topo. O texto comeca logo abaixo dela, sem forcar
     tela cheia: em celular alto sobrava um vao preto entre carro e titulo. */
  .hero{
    min-height:0;
    align-items:start;
    padding-top:calc(88vw + 8px);
    padding-bottom:var(--e40);
  }
  /* hero-alto: carro inteiro no alto, escuro embaixo. Ancora no topo para o
     carro ficar logo abaixo do header em qualquer altura de celular. */
  .hero__foto{ object-position:center top }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.9) 100%);
  }
  .hero__dots{ display:none }              /* caiam por cima do titulo */
  .hero__in{ gap:var(--e24) }
  .hero .eyebrow{ font-size:11px; margin-bottom:10px }
  .hero__servs{ margin-top:var(--e16); grid-template-columns:1fr 1fr; gap:8px 14px }
  .hero__servs li{ font-size:13px; padding-left:16px }
  .hero__servs li::before{ width:9px }
  .hero h1, .slidetxt__t{ font-size:clamp(23px, 6.4vw, 29px); line-height:1.06; max-width:16ch }
  .hero__pe .btn{ width:100%; justify-content:space-between }

  /* ---------- respiro geral ---------- */
  .section{ padding-block:48px }
  .shead{ margin-bottom:var(--e32); gap:12px }
  .eyebrow{ font-size:11px; margin-bottom:12px }

  /* ---------- titulos ---------- */
  .shead h2{ font-size:clamp(25px, 6.8vw, 31px); line-height:1.1 }
  .shead__lead{ font-size:15px; line-height:1.55 }
  .split__l h2{ font-size:clamp(26px, 7.2vw, 33px); line-height:1.1 }
  .banda h2, .cta h2{ font-size:clamp(28px, 8vw, 38px); line-height:1.02 }
  .card h3{ font-size:22px }
  .acc h3{ font-size:19px }
  .tl h3{ font-size:18px }
  .step h3, .svc h3{ font-size:17px }
  .faq summary{ font-size:16px }

  /* ---------- galeria ---------- */
  /* mosaico de duas colunas: seis fotos de 4/3 empilhadas davam
     quase dois mil pixels de rolagem e ninguem chegava no fim. */
  .galeria{ grid-template-columns:1fr 1fr; grid-auto-rows:132px; gap:8px }
  .galeria .shot{ aspect-ratio:auto }
  .galeria .shot--tall{ grid-row:span 2 }
  .shot figcaption{ font-size:10px; letter-spacing:.1em }

  /* ---------- listas numeradas ---------- */
  /* a calha do numero comia 64px de uma coluna de 350px e o texto
     ficava espremido em cinco linhas. */
  .tl{ padding-left:52px; padding-block:var(--e16) }
  .tl__n{ width:34px; height:34px; font-size:14px; top:var(--e16) }
  .tl p, .step p{ font-size:15px }
  .step{ gap:var(--e16); padding-block:var(--e16) }
  .step > span{ width:26px; font-size:20px }
  .svc{ padding:var(--e16) }
  .svc p{ font-size:15px }

  /* ---------- rodape ---------- */
  .brand__logo{ width:190px }
  .ftr__nav{ grid-template-columns:1fr 1fr; gap:var(--e24) var(--e16) }
  .ftr__nav a{ font-size:14px }

  /* ---------- whatsapp flutuante ---------- */
  /* menor e com sombra: sem ela o quadrado verde parecia recortar
     o texto em vez de flutuar por cima. */
  .wafloat{ padding:14px; box-shadow:0 6px 24px rgba(0,0,0,.38) }
  .wafloat svg{ width:22px; height:22px }
}

/* Em tela de toque nao existe hover, entao o zoom permanente das fotos
   so servia para cortar e amolecer a imagem. */
@media (hover:none){
  .card__media img, .shot img{ transform:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none }
  .js .dyno__line{ stroke-dashoffset:0 }
  .js .dyno__area, .js .dyno__peak{ opacity:1 }
  .hero__bg.is-on img{ animation:none; transform:scale(1.03) }
  .hero__bg{ transition-duration:.2s !important }
  .wafloat{ transform:none }
  .shot:hover img{ transform:scale(1.06) }
  .card:hover .card__media img{ transform:scale(1.09) }
}

@media print{
  .hdr,.mobmenu,.wafloat,.cta,.banda{ display:none !important }
  body{ background:#fff; color:#000 }
  .section{ padding-block:24px }
}

/* =========================================================
   ARCHIVO — larguras e pesos por papel
   A Archivo é variável (largura 62.5–125%, peso 400–800):
   texto corrido em largura normal, títulos condensados e
   pesados, rótulos pequenos meio-condensados.
   ========================================================= */
body{ font-stretch:100%; letter-spacing:.004em }

h1, h2, h3, h4,
.hero h1, .slidetxt__t,
.form__title, .faq summary, .acc h3, .step h3{
  font-stretch:72%;
  font-weight:700;
  letter-spacing:.006em;
}

.eyebrow, .btn, .menubt, .nav a, .card__link, .brand__txt strong,
.mobmenu nav a, .step > span,
.shot figcaption, .info__txt small, .field label, .ftr__selo,
.ftr__nav h4, .stage__tag, .tl__n, .social a, .wafloat{
  font-stretch:84%;
  font-weight:600;
}

/* o título do topo pede um pouco mais de aperto e presença */
.hero h1, .slidetxt__t{
  font-stretch:68%;
  font-weight:800;
  letter-spacing:.012em;
  line-height:1.04;
}
.hero .eyebrow{ font-stretch:88%; font-weight:600 }