/* =========================================================
   Markx Motors: folha de estilo principal
   Paleta preto / cinza. Traço brutalista: sem cantos arredondados,
   sombra dura e borda grossa.
   ========================================================= */

:root{
  /* O vermelho da marca ficou só no logo (que é imagem). Na interface, o
     destaque é preto sobre fundo claro e branco sobre fundo escuro. */
  --destaque:#0d0d0d;
  --destaque-inv:#ffffff;
  --preto:#0d0d0d;
  --grafite:#161719;
  --grafite-2:#1f2124;
  --cinza:#6b7076;
  --chumbo:#33383d;
  --cinza-claro:#eef0f2;
  --branco:#fff;
  --wa:#25d366;

  --fonte-titulo:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --fonte-texto:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --foco:#0d0d0d;
  --raio:0;                       /* brutalista: nada arredondado */
  --sombra:6px 6px 0 var(--preto); /* sombra dura, sem desfoque */
  --transicao:.28s cubic-bezier(.4,0,.2,1);
  --topo:96px; /* altura do header fixo */
}

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

html{scroll-behavior:smooth;scroll-padding-top:var(--topo)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  font-family:var(--fonte-texto);
  font-size:16px;
  line-height:1.65;
  color:#2b2f33;
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
iframe{border:0}

h1,h2,h3,h4{
  font-family:var(--fonte-titulo);
  font-weight:700;
  line-height:1.05;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin:0 0 .4em;
}

/* o anel de foco herda a cor do container: preto no claro, branco no escuro */
:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.topbar,.header,.hero,.sec--escuro,.footer{--foco:var(--destaque-inv)}

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

.wrap{width:min(1280px,92vw);margin-inline:auto}
.wrap--estreito{width:min(880px,92vw)}
.center{text-align:center;margin-top:36px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* a classe é dobrada porque a especificidade precisa vencer `.topbar__contatos a` */
.hide-sm.hide-sm{display:none}
@media (min-width:900px){.hide-sm.hide-sm{display:inline-flex}}

.ic{width:18px;height:18px;flex:0 0 auto;fill:currentColor}
.ic--lg{width:34px;height:34px}

/* ---------------- BOTÕES ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:0;
  font-weight:700;font-size:14px;letter-spacing:.6px;text-transform:uppercase;
  transition:var(--transicao);white-space:nowrap;
}
.btn--primary{background:var(--destaque);color:#fff}
.btn--primary:hover{background:var(--chumbo);transform:translateY(-2px)}
/* preto sobre preto não aparece: na seção escura o botão inverte */
.sec--escuro .btn--primary{background:#fff;color:var(--preto)}
.sec--escuro .btn--primary:hover{background:var(--cinza-claro)}
.btn--ghost{border:2px solid currentColor;color:inherit}
.btn--ghost:hover{background:var(--preto);border-color:var(--preto);color:#fff}
.btn--wa{background:var(--wa);color:#08351a}
.btn--wa:hover{background:#1fb857;color:#fff;transform:translateY(-2px)}
.btn--block{width:100%}

/* ---------------- TOPBAR ---------------- */
.topbar{background:#000;color:#b9bec4;font-size:13.5px}
.topbar__in{display:flex;align-items:center;justify-content:space-between;height:40px;gap:16px}
.topbar__contatos{display:flex;gap:22px;min-width:0}
.topbar__contatos a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:var(--transicao)}
.topbar__contatos a:hover{color:#fff}
.topbar__social{display:flex;gap:6px}
.topbar__social a{
  width:30px;height:30px;display:grid;place-items:center;border-radius:0;
  background:rgba(255,255,255,.09);transition:var(--transicao);
}
.topbar__social a:hover{background:rgba(255,255,255,.22);color:#fff}

/* ---------------- HEADER ---------------- */
.header{
  position:sticky;top:0;z-index:80;
  background:rgba(13,13,13,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:var(--transicao);
}
.header.is-compact{box-shadow:0 3px 0 rgba(0,0,0,.55)}
.header__in{display:flex;align-items:center;gap:20px;min-height:76px}
.header.is-compact .header__in{min-height:64px}

.logo img{width:170px;height:auto;transition:var(--transicao)}
.header.is-compact .logo img{width:140px}

.nav{margin-left:auto}
.nav ul{display:flex;gap:4px}
.nav a{
  display:block;padding:10px 13px;
  font-family:var(--fonte-titulo);
  color:#dfe3e7;font-size:16px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;
  transition:var(--transicao);position:relative;
}
.nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  background:var(--destaque-inv);transform:scaleX(0);transform-origin:left;transition:var(--transicao);
}
.nav a:hover,.nav a.is-active{color:#fff}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}

.header__cta{padding:11px 20px;font-size:13px}

.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
.burger span{display:block;height:2px;background:#fff;border-radius:0;transition:var(--transicao)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1100px){
  .header__cta{display:none}
}
@media (max-width:980px){
  .burger{display:flex;margin-left:auto}
  /* o menu flui como terceira linha do cabeçalho sticky: sem position:fixed e
     sem altura mágica, ele fica sempre colado na base real do cabeçalho */
  .header__in{flex-wrap:wrap}
  .nav{
    order:3;flex:0 0 100%;margin:0;
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  /* a borda só existe com o menu aberto; fechada, ela virava um risco de 1px */
  .nav.is-open{max-height:70vh;overflow-y:auto;border-top:1px solid rgba(255,255,255,.08)}
  .nav ul{flex-direction:column;gap:0;padding:8px 0 20px}
  .nav a{padding:15px 8px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav a::after{display:none}
}

/* ---------------- HERO ---------------- */
/* As artes dos banners já trazem a copy embutida, então o slider mostra a
   imagem inteira (aspect-ratio igual ao do arquivo) e a chamada vai na barra
   logo abaixo, sem texto sobreposto duplicando o que está na arte. */
.hero{position:relative;background:#000;overflow:hidden}
.hero__track{position:relative;aspect-ratio:1920/640}
@media (max-width:760px){.hero__track{aspect-ratio:800/533}}

/* nada de `visibility` aqui: ela não é interpolável, então o slide que sai
   sumia de uma vez em vez de desaparecer junto com a opacidade e o crossfade
   virava um corte seco. Quem esconde do leitor de tela é o aria-hidden (app.js) */
.slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s ease}
.slide.is-active{opacity:1;pointer-events:auto}
.slide picture{display:contents} /* o <picture> não pode virar item de layout */
/* sem zoom: as artes têm texto embutido e qualquer escala deixa a tipografia
   borrada. A transição é só o crossfade de opacidade em .slide */
.slide__bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}

.hero__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:70px;display:grid;place-items:center;
  background:rgba(0,0,0,.35);color:#fff;font-size:30px;line-height:1;
  transition:var(--transicao);
}
.hero__nav:hover{background:rgba(0,0,0,.7)}
.hero__nav--prev{left:0;border-radius:0}
.hero__nav--next{right:0;border-radius:0}
@media (max-width:760px){.hero__nav{display:none}}

.hero__dots{position:absolute;left:0;right:0;bottom:16px;z-index:5;display:flex;justify-content:center;gap:10px}
.hero__dots button{width:34px;height:4px;border-radius:0;background:rgba(255,255,255,.45);transition:var(--transicao)}
.hero__dots button.is-active{background:var(--destaque-inv);width:52px}

/* ---------------- CHAMADA SOB O BANNER ---------------- */
.cta-bar{background:var(--cinza-claro);color:var(--preto);border-bottom:1px solid #dfe3e8}
.cta-bar__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;padding:22px 0;
}
.cta-bar__texto{
  margin:0;flex:1 1 380px;max-width:62ch;
  font-size:clamp(1rem,1.6vw,1.2rem);font-weight:500;
}
.cta-bar__acoes{display:flex;flex-wrap:wrap;gap:12px}
.cta-bar__texto{color:#4a5057}

/* ---------------- DIFERENCIAIS ---------------- */
.usp{background:var(--grafite);color:#fff;padding:52px 0}
.usp__grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.usp__item{text-align:center;padding:0 8px}
.usp__item .ic--lg{margin:0 auto 12px;color:#8b9299}
.usp__item h3{font-size:1.35rem;margin-bottom:6px}
.usp__item p{margin:0;color:#a9afb5;font-size:14.5px}

/* ---------------- SEÇÕES ---------------- */
.sec{padding:clamp(56px,8vw,96px) 0}
.sec--claro{background:var(--cinza-claro)}
.sec--escuro{background:var(--preto);color:#dfe3e7}
.sec--escuro .sec__title{color:#fff}

.sec__head{max-width:720px;margin:0 auto 44px;text-align:center}
.sec__kicker{
  margin:0 0 8px;color:var(--chumbo);
  font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
}
.sec__title{font-size:clamp(2rem,4.4vw,3rem);color:var(--preto)}
.sec__sub{margin:0;color:var(--cinza);font-size:17px}
.sec--escuro .sec__sub{color:#9aa1a8}
.sec--escuro .sec__kicker{color:#9aa1a8}

/* ---------------- PRODUTOS ---------------- */
/* dois modelos apenas: duas colunas, com a grade limitada para o card não virar
   um painel gigante numa tela larga */
.produtos{display:grid;gap:28px;grid-template-columns:1fr;max-width:880px;margin-inline:auto}
@media (min-width:720px){.produtos{grid-template-columns:repeat(2,1fr)}}
/* com seis modelos, duas colunas deixam a seção longa demais no desktop */
@media (min-width:1120px){.produtos{grid-template-columns:repeat(3,1fr);max-width:1240px}}

.card{
  background:#fff;border:2px solid var(--preto);overflow:hidden;
  display:flex;flex-direction:column;transition:var(--transicao);
}
.card:hover{transform:translate(-3px,-3px);box-shadow:var(--sombra)}

/* as fotos do produto são verticais; 4/5 mostra o quadriciclo inteiro sem cortar */
.card__img{position:relative;aspect-ratio:4/5;background:#15171a;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card__img img{transform:scale(1.06)}

/* Fotos de estúdio: recortadas em fundo branco e no sentido horizontal. Com
   `cover` o 4/5 do card cortaria as rodas, então estas aparecem inteiras. */
.card__img--estudio{background:#fff}
.card__img--estudio img{object-fit:contain;padding:2% 4%}
.card:hover .card__img--estudio img{transform:scale(1.03)}

.tag{
  position:absolute;top:12px;left:12px;
  padding:5px 13px;border-radius:0;
  font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#fff;
}
.tag--cor{background:rgba(13,13,13,.82);backdrop-filter:blur(4px)}

.card__body{padding:22px;display:flex;flex-direction:column;flex:1}
.card__title{font-size:1.7rem;margin-bottom:8px;color:var(--preto)}
.card__title a{color:inherit}
.card__title a:hover{color:var(--cinza)}
.card__desc{margin:0 0 16px;color:var(--cinza);font-size:15px}

.specs{margin:0 0 20px;border-top:1px solid #eceff2}
.specs li{
  display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid #eceff2;font-size:14px;
}
.specs span{color:var(--cinza)}
.specs strong{color:#2b2f33}

.card__acoes{margin-top:auto;display:grid;gap:9px}
.btn--linha{border:2px solid #d6dae0;color:var(--cinza);padding:11px 20px;font-size:13px}
.btn--linha:hover{border-color:var(--preto);color:var(--preto)}
/* no fundo escuro a borda e o texto cinza somem: inverte */
.sec--escuro .btn--linha{border-color:rgba(255,255,255,.45);color:#dfe3e7}
.sec--escuro .btn--linha:hover{border-color:#fff;color:#fff}

.produtos__nota{margin:34px 0 0;text-align:center;color:var(--cinza);font-size:15px}
.produtos__nota a{color:var(--preto);font-weight:600;text-decoration:underline}
.sec--escuro .produtos__nota,.sec--claro .produtos__nota{color:var(--cinza)}

/* ---------------- GALERIA ---------------- */
/* 4 colunas: a foto grande ocupa 2x2 e sobram exatamente 4 vagas pequenas,
   fechando o bloco sem sobra */
.galeria{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.galeria{grid-template-columns:repeat(4,1fr)}}
.galeria__item{margin:0;border-radius:0;overflow:hidden;background:#15171a;position:relative}
.galeria__item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.galeria__item:hover img{transform:scale(1.05)}
.galeria__item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  color:#e8ebee;font-size:12.5px;font-weight:500;
}
@media (min-width:900px){.galeria__item--grande{grid-column:span 2;grid-row:span 2}}

/* Fotos de estúdio (fundo branco) dentro da seção escura. O degradê da legenda
   foi feito para foto escura e some sobre o branco, então aqui a legenda ganha
   barra sólida e a foto aparece inteira em vez de recortada. */
.galeria__item--estudio{background:#fff}
.galeria__item--estudio img{object-fit:contain;padding:10px 10px 40px}
.galeria__item--estudio figcaption{
  background:rgba(13,13,13,.9);
  padding:9px 12px;
}
.galeria__item--estudio:hover img{transform:scale(1.03)}
.galeria__item--grande img{aspect-ratio:auto;height:100%}

/* ---------------- FICHA TÉCNICA ---------------- */
.tabela-rolagem{
  overflow-x:auto;border:2px solid var(--preto);background:#fff;
  -webkit-overflow-scrolling:touch;
}
.tabela-rolagem:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

.ficha{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.ficha tbody th{
  text-align:left;font-weight:600;color:var(--preto);
  padding:13px 18px;width:32%;background:#f6f7f9;
}
.ficha td{padding:13px 18px;color:#4a5057;vertical-align:top}
.ficha tbody tr{border-top:1px solid #e6e9ec}
.ficha tbody tr:hover th{background:#eef0f2}
.ficha tbody tr:hover td{background:#fafbfc}
.ficha .na{color:#98a0a8;font-style:italic}

/* ---------------- FAIXA ---------------- */
.faixa{
  position:relative;padding:clamp(70px,10vw,120px) 0;color:#fff;text-align:center;
  background:#1a1d20 url('../img/banner-parallax.webp') center/cover fixed;
}
.faixa::before{content:"";position:absolute;inset:0;background:rgba(10,11,12,.72)}
.faixa__in{position:relative;z-index:2;max-width:800px;margin-inline:auto}
.faixa__title{font-size:clamp(1.9rem,4.4vw,3rem);color:#fff}
.faixa__text{margin:0 0 28px;color:#c8cdd2;font-size:17px}
@media (max-width:900px){.faixa{background-attachment:scroll}}

/* ---------------- SOBRE ---------------- */
.sobre{display:grid;gap:46px;grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.sobre{grid-template-columns:1.15fr .85fr}}
.sobre__texto p{color:#4a5057}
.sobre__slogan{
  margin:22px 0 0;padding-left:18px;border-left:4px solid var(--chumbo);
  font-style:italic;font-size:17px;color:var(--preto);
}
.numeros{display:flex;flex-wrap:wrap;gap:34px;margin-top:32px}
.numeros strong{
  display:block;font-family:var(--fonte-titulo);font-size:2.6rem;line-height:1;color:var(--preto);
}
.numeros span{font-size:13.5px;color:var(--cinza)}
/* o nome da cidade é texto, não número: no corpo do bloco ele não cabe no
   mesmo tamanho dos outros dois */
.numeros__local{max-width:16ch}
.numeros__local strong{font-size:1.7rem;line-height:1.05}

.sobre__cards{display:grid;gap:20px}
.minicard{
  display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:center;
  background:#fff;border:2px solid var(--preto);
  padding:14px;transition:var(--transicao);
}
.minicard:hover{box-shadow:var(--sombra);transform:translate(-3px,-3px)}
.minicard img{border-radius:0;aspect-ratio:16/10;object-fit:cover;width:100%}
.minicard h3{font-size:1.25rem;margin-bottom:4px;color:var(--preto)}
.minicard p{margin:0 0 6px;font-size:14px;color:var(--cinza)}
.minicard .link{color:var(--preto);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
@media (max-width:520px){.minicard{grid-template-columns:1fr}}

/* ---------------- SERVIÇOS ---------------- */
.servicos{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.serv{
  padding:34px 28px;border:2px solid var(--preto);
  background:#fff;transition:var(--transicao);
}
.serv:hover{transform:translate(-3px,-3px);box-shadow:var(--sombra)}
.serv .ic--lg{color:var(--chumbo);margin-bottom:14px}
.serv h3{font-size:1.4rem;color:var(--preto)}
.serv p{margin:0;color:var(--cinza);font-size:15px}

/* ---------------- INSTAGRAM ---------------- */
/* 5 colunas no desktop. Com auto-fit cabiam 7 e sobrava um post órfão
   na segunda linha, além de deixar cada foto pequena demais. */
.ig-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.ig-grid{grid-template-columns:repeat(5,1fr)}}
.ig{position:relative;display:block;border-radius:0;overflow:hidden;aspect-ratio:1}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ig:hover img{transform:scale(1.08)}
.ig__ov{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  background:rgba(13,13,13,.78);opacity:0;transition:var(--transicao);
}
.ig__ov .ic{width:30px;height:30px}
.ig:hover .ig__ov,.ig:focus-visible .ig__ov{opacity:1}

/* ---------------- FAQ ---------------- */
.faq{display:grid;gap:12px}
.faq__item{background:#fff;border:2px solid var(--preto);overflow:hidden}
.faq__item.is-open{border-color:var(--destaque)}
.faq__q{
  width:100%;text-align:left;padding:18px 52px 18px 20px;position:relative;
  font-weight:600;font-size:16px;color:var(--preto);
}
.faq__q::after{
  content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:24px;line-height:1;color:var(--destaque);transition:var(--transicao);
}
.faq__item.is-open .faq__q::after{content:"–"}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__a p{margin:0;padding:0 20px 20px;color:var(--cinza);font-size:15px}

/* ---------------- CONTATO ---------------- */
.contato{display:grid;gap:44px;grid-template-columns:1fr}
@media (min-width:980px){.contato{grid-template-columns:1.1fr .9fr}}
.contato .sec__title{color:#fff}
.contato__form form{margin-top:26px;display:grid;gap:16px}

/* align-content:start impede que as linhas do campo estiquem: sem isso, um
   campo sem <small class="erro"> divide a altura da linha em 2 partes em vez
   de 3 e o input sai mais alto que o do lado */
.campo{display:grid;gap:6px;align-content:start}
.campo-linha{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){.campo-linha{grid-template-columns:1fr 1fr}}
.campo label{font-size:13px;font-weight:600;letter-spacing:.4px;color:#b7bdc3}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;border-radius:0;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  color:#fff;font-family:inherit;font-size:15px;transition:var(--transicao);
}
.campo textarea{resize:vertical;min-height:110px}
.campo select option{background:#161719;color:#fff}
.campo input::placeholder,.campo textarea::placeholder{color:#727a81}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--destaque-inv);background:rgba(255,255,255,.08);outline:none;
}
.campo.tem-erro input{border-color:#ff5a5f}
.erro{color:#ff7a7f;font-size:12.5px;min-height:1em}
.form__nota{margin:10px 0 0;font-size:14px;color:#9aa1a8;min-height:1.2em}
.form__nota.ok{color:var(--wa)}

.contato__info h3{font-size:1.6rem;color:#fff}
.dados{display:grid;gap:14px;margin-bottom:22px}
.dados li{display:flex;gap:12px;align-items:flex-start;color:#c3c9cf;font-size:15px}
.dados .ic{color:#8b9299;margin-top:4px}
.dados a:hover{color:#fff}
.mapa{border-radius:0;overflow:hidden;margin-bottom:16px;border:1px solid rgba(255,255,255,.12)}
.mapa iframe{width:100%;height:280px;display:block;filter:grayscale(.35) contrast(1.05)}

/* ---------------- FOOTER ---------------- */
.footer{background:var(--grafite-2);color:#a7adb4;padding-top:56px;font-size:14.5px}
.footer__grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));padding-bottom:44px}
.footer__logo{width:165px;margin-bottom:14px}
.footer__slogan{margin:0 0 16px;font-style:italic}
.footer__social{display:flex;gap:8px}
.footer__social a{
  width:36px;height:36px;display:grid;place-items:center;border-radius:0;
  background:rgba(255,255,255,.08);transition:var(--transicao);
}
.footer__social a:hover{background:rgba(255,255,255,.2);color:#fff}
.footer__col h4{color:#fff;font-size:1.15rem;margin-bottom:14px}
.footer__col li{margin-bottom:9px}
.footer__col a:hover{color:#fff}
.footer__col p{margin:0 0 12px}

.news{display:flex;gap:8px;flex-wrap:wrap}
.news input{
  flex:1 1 130px;min-width:0;padding:12px 14px;border-radius:0;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font-family:inherit;
}
.news input:focus{border-color:var(--destaque-inv);outline:none}
.news .btn{padding:12px 18px;font-size:12.5px}

.footer__bar{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;font-size:13px}
.footer__bar-in{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* ---------------- FLUTUANTES ---------------- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:90;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 18px;border-radius:0;
  background:var(--wa);color:#08351a;font-weight:700;font-size:14px;
  box-shadow:4px 4px 0 rgba(13,13,13,.45);transition:var(--transicao);
}
.wa-float:hover{transform:translateY(-3px);background:#1fb857;color:#fff}
.wa-float .ic{width:22px;height:22px}
@media (max-width:520px){.wa-float span{display:none}.wa-float{padding:15px;border-radius:0}}

.totop{
  position:fixed;right:18px;bottom:84px;z-index:89;
  width:44px;height:44px;border-radius:0;
  background:var(--preto);color:#fff;font-size:18px;
  opacity:0;pointer-events:none;transition:var(--transicao);
}
.totop.is-visible{opacity:1;pointer-events:auto}
.totop:hover{background:var(--chumbo)}

/* ---------------- REVEAL ---------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* =========================================================
   PÁGINA DE PRODUTO
   ========================================================= */

/* ---------------- caminho ---------------- */
.breadcrumb{background:var(--cinza-claro);border-bottom:1px solid #e2e6ea;font-size:13.5px}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0;color:var(--cinza)}
.breadcrumb li+li::before{content:"›";margin-right:8px;color:#b3bac1}
.breadcrumb a{color:var(--cinza)}
.breadcrumb a:hover{color:var(--preto)}
.breadcrumb [aria-current]{color:var(--preto);font-weight:600}

/* ---------------- bloco principal ---------------- */
.produto{padding:clamp(28px,5vw,56px) 0}
.produto__grid{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.produto__grid{grid-template-columns:1.05fr .95fr}}

/* ---------------- galeria ---------------- */
.galeria-produto__principal{
  margin:0;border:2px solid var(--preto);overflow:hidden;
  background:#15171a;aspect-ratio:4/3;
}
.galeria-produto__principal img{width:100%;height:100%;object-fit:cover}

.galeria-produto__miniaturas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
@media (min-width:520px){.galeria-produto__miniaturas{grid-template-columns:repeat(8,1fr)}}
.mini{
  padding:0;border:2px solid transparent;border-radius:0;overflow:hidden;
  aspect-ratio:4/3;background:#15171a;transition:var(--transicao);
}
.mini img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:var(--transicao)}
.mini:hover img{opacity:1}
.mini.is-active{border-color:var(--destaque)}
.mini.is-active img{opacity:1}

/* ---------------- coluna de informações ---------------- */
.produto__linha{
  margin:0 0 6px;color:var(--chumbo);
  font-size:12.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
}
.produto__nome{font-size:clamp(2rem,4.6vw,3rem);color:var(--preto);margin-bottom:14px}
.produto__resumo{margin:0 0 8px;color:#4a5057;font-size:16.5px}
.produto__verdesc{
  display:inline-block;margin-bottom:22px;
  color:var(--preto);font-weight:600;font-size:14px;text-decoration:underline;
}

.produto__preco{
  border:1px solid #e2e6ea;border-left:4px solid var(--preto);
  border-radius:0;padding:18px 20px;margin-bottom:18px;background:#fafbfc;
}
.produto__preco-rotulo{
  display:block;color:var(--cinza);
  font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
}
.produto__preco-valor{
  display:block;font-family:var(--fonte-titulo);font-size:2.4rem;
  line-height:1.1;color:var(--preto);text-transform:uppercase;
}
.produto__preco p{margin:6px 0 0;color:var(--cinza);font-size:14px}

.produto__acoes{display:grid;gap:10px;margin-bottom:24px}
.btn--grande{padding:17px 26px;font-size:15px}

.produto__destaques{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:#e6e9ec;border:1px solid #e6e9ec;border-radius:0;overflow:hidden;margin-bottom:20px;
}
@media (min-width:560px){.produto__destaques{grid-template-columns:repeat(4,1fr)}}
.produto__destaques li{background:#fff;padding:16px 12px;text-align:center}
.produto__destaques strong{
  display:block;font-family:var(--fonte-titulo);font-size:1.6rem;color:var(--preto);line-height:1.1;
}
.produto__destaques span{font-size:12.5px;color:var(--cinza)}

.produto__selos{display:grid;gap:10px}
.produto__selos li{display:flex;align-items:center;gap:10px;color:#4a5057;font-size:14.5px}
.produto__selos .ic{color:var(--chumbo)}

/* ---------------- abas ---------------- */
.abas{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid #dfe3e8;margin-bottom:26px}
.aba{
  padding:13px 24px;margin-bottom:-2px;border-bottom:3px solid transparent;
  font-weight:700;font-size:13.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--cinza);transition:var(--transicao);
}
.aba:hover{color:var(--preto)}
.aba.is-active{color:var(--destaque);border-bottom-color:var(--destaque)}

.aba__painel p{color:#4a5057}
.aba__painel h3{font-size:1.4rem;color:var(--preto);margin-top:28px}

.lista-check{display:grid;gap:9px;grid-template-columns:1fr}
@media (min-width:600px){.lista-check{grid-template-columns:repeat(2,1fr)}}
.lista-check li{position:relative;padding-left:26px;color:#4a5057;font-size:15px}
.lista-check li::before{
  content:"";position:absolute;left:4px;top:8px;
  width:9px;height:5px;border-left:2px solid var(--chumbo);border-bottom:2px solid var(--chumbo);
  transform:rotate(-45deg);
}

/* na página de produto a ficha tem uma coluna só de valores */
.ficha--produto{min-width:0}
.ficha--produto tbody th{width:42%}

.produto__fonte{margin:16px 0 0;color:var(--cinza);font-size:13px}

/* ---------------- outro modelo ---------------- */
.outro-modelo{
  border:2px solid var(--preto);padding:clamp(22px,4vw,34px);
  background:#fff;max-width:760px;margin-inline:auto;
}
.outro-modelo h3{font-size:1.8rem;color:var(--preto)}
.outro-modelo p{margin:0 0 20px;color:var(--cinza);font-size:15.5px}
.outro-modelo__acoes{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------- formulário: armadilha e botões ---------------- */
/* fora da tela em vez de display:none, porque robô de spam costuma ignorar campo
   escondido com display:none, mas preenche este, que se entrega */
.ratoeira{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__acoes{display:grid;gap:10px}
@media (min-width:520px){.form__acoes{grid-template-columns:1fr 1fr}}
.form__acoes .btn[disabled]{opacity:.6;cursor:progress}

/* ---------------- carrossel de modelos na galeria ---------------- */
.galeria-barra{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:22px;
}
/* com seis modelos a régua de abas não cabe mais na tela estreita:
   rola na horizontal em vez de quebrar linha */
.galeria-troca{
  display:flex;gap:4px;border-bottom:2px solid rgba(255,255,255,.14);
  overflow-x:auto;scrollbar-width:none;max-width:100%;
}
.galeria-troca::-webkit-scrollbar{display:none}
.troca{flex:0 0 auto;white-space:nowrap}
.troca{
  padding:11px 20px;margin-bottom:-2px;border-bottom:3px solid transparent;
  font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;
  color:#8b9299;transition:var(--transicao);
}
.troca:hover{color:#fff}
.troca.is-active{color:#fff;border-bottom-color:var(--destaque-inv)}

.galeria-setas{display:flex;gap:8px}
.galeria-seta{
  width:40px;height:40px;border-radius:0;
  background:rgba(255,255,255,.09);color:#fff;font-size:22px;line-height:1;
  display:grid;place-items:center;transition:var(--transicao);
}
.galeria-seta:hover{background:rgba(255,255,255,.22)}

.galeria-painel{display:none}
.galeria-painel.is-active{display:block;animation:galeriaEntra .35s ease}
@keyframes galeriaEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.galeria-painel.is-active{animation:none}}

/* =========================================================
   404: página não encontrada
   ========================================================= */
.nf{
  min-height:calc(100vh - var(--topo) - 260px);
  display:grid;
  place-items:center;
}
.nf .center{margin-top:0}

/* o número é decoração: fica atrás do título, sem competir com ele */
.nf__codigo{
  margin:0 0 -.42em;
  font-family:var(--fonte-titulo);
  font-size:clamp(7rem,22vw,15rem);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.02em;
  color:var(--cinza-claro);
  user-select:none;
}
.nf__texto{
  margin:18px auto 0;
  max-width:46ch;
  color:var(--cinza);
}
.nf__acoes{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.nf__atalhos{
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid #e4e7ea;
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  justify-content:center;
}
.nf__atalhos a{
  color:var(--chumbo);
  font-size:.94rem;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--transicao),border-color var(--transicao);
}
.nf__atalhos a:hover,
.nf__atalhos a:focus-visible{
  color:var(--destaque);
  border-bottom-color:currentColor;
}


/* =========================================================
   Páginas de conteúdo (Sobre, Assistência técnica)
   ========================================================= */
.lead{font-size:1.06rem;line-height:1.75;color:#3a4046;margin:0 0 18px}
.lead a{color:var(--preto);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sec--escuro .lead{color:#c3c9cf}

/* os botões dentro do produto ficam empilhados; aqui eles ficam lado a lado */
.produto__acoes--solto{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.produto__acoes--solto .btn{width:auto}

/* passo a passo numerado do agendamento */
.passos{list-style:none;counter-reset:passo;margin:0;padding:0;display:grid;gap:2px}
.passos li{
  counter-increment:passo;
  display:grid;grid-template-columns:auto 1fr;gap:4px 18px;
  padding:20px 22px;background:#fff;border:2px solid var(--preto);
}
.passos li + li{margin-top:-2px}     /* bordas se encostam, sem dobrar a espessura */
.passos li::before{
  content:counter(passo);
  grid-row:span 2;align-self:start;
  font-family:var(--fonte-titulo);font-size:2.2rem;line-height:.9;color:var(--preto);
}
.passos strong{font-size:1.05rem;color:var(--preto)}
.passos span{color:var(--cinza);font-size:15px}