/* ===== Master Tec — sistema visual "oficina diesel / plaqueta de aço" ===== */
:root{
  /* Marca (nomes mantidos p/ o admin.css) — paleta quente de oficina */
  --bg:#17140F;        /* graphite: preto quente de óleo diesel */
  --bg-2:#211C15;      /* painel */
  --laranja:#F26A1B;   --laranja-2:#FF8636;
  --aco:#C9CDD2;       --aco-2:#8A8F94;
  --texto:#ECE6DA;     /* bone: cor de manual de serviço */
  --linha:#34302A;     /* linha de aço quente */
  /* Novos tokens */
  --steel:#3A3A3E;     --steel-hi:#5A5F64;
  --plate:#201C16;     --plate-2:#2A251E;
  --amber:#F5A623;
  --disp:'Anton',"Arial Narrow",system-ui,sans-serif;
  --body:'Barlow',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:'Barlow Condensed','Barlow',system-ui,sans-serif;  /* rótulos/tags (era Space Mono) */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--texto);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;
  line-height:.92;letter-spacing:.5px;margin:0 0 .5rem}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}

/* Etiqueta carimbada (mono) — device estrutural que rotula, não numera */
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--aco-2);margin:0 0 .7rem;display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--laranja);display:inline-block}

/* Texturas: chapa xadrez (tread) e faixa de perigo (hazard) */
.tread{background-color:var(--bg);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 11px)}
.hazard{height:14px;
  background:repeating-linear-gradient(-45deg,var(--laranja) 0 17px,#161009 17px 34px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.5)}
.hazard.amber{background:repeating-linear-gradient(-45deg,var(--amber) 0 17px,#161009 17px 34px)}

/* Cabeçalho */
.topo{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.6rem 1.25rem;background:rgba(19,16,12,.94);
  border-bottom:1px solid var(--linha);backdrop-filter:blur(8px)}
.marca{text-decoration:none;display:inline-flex;align-items:center}
.marca-logo{height:34px;width:auto;display:block}
.wordmark{font-family:var(--disp);font-size:1.7rem;line-height:1;letter-spacing:1px;
  display:inline-flex;gap:.28rem;align-items:baseline}
.wordmark b{color:var(--laranja);font-weight:400}
.wordmark i{font-style:normal;color:var(--texto);-webkit-text-stroke:1px var(--steel-hi);
  color:transparent}
.wordmark.sm{font-size:1.3rem}
.nav{display:flex;gap:1.4rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase}
.nav a{text-decoration:none;color:var(--aco);font-weight:700;padding:.2rem 0;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--laranja);border-bottom-color:var(--laranja)}
.nav a:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}

/* Botão sanfona — só aparece no celular */
.menu-botao{display:none;align-items:center;gap:.5rem;background:transparent;cursor:pointer;
  border:1px solid var(--steel);border-radius:3px;padding:.42rem .6rem;color:var(--aco);
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.menu-botao:hover{border-color:var(--laranja);color:var(--texto)}
/* Três barras feitas com border+::before/::after, sem imagem */
.menu-barras{position:relative;width:16px;height:2px;background:currentColor;display:block}
.menu-barras::before,.menu-barras::after{content:"";position:absolute;left:0;width:16px;height:2px;
  background:currentColor;transition:transform .18s,top .18s}
.menu-barras::before{top:-5px}
.menu-barras::after{top:5px}
.menu-botao[aria-expanded="true"] .menu-barras{background:transparent}
.menu-botao[aria-expanded="true"] .menu-barras::before{top:0;transform:rotate(45deg)}
.menu-botao[aria-expanded="true"] .menu-barras::after{top:0;transform:rotate(-45deg)}

@media (max-width:820px){
  .menu-botao{display:inline-flex}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(19,16,12,.98);border-bottom:1px solid var(--linha);
    padding:.4rem 1.25rem .9rem;display:none}
  .nav.aberto{display:flex}
  .nav a{padding:.75rem 0;border-bottom:1px solid var(--linha)}
  .nav a:last-child{border-bottom:0}
  .nav a:hover{border-bottom-color:var(--linha)}
}

/* O topo é fixo: sem isso o título da seção fica escondido atrás dele ao usar o menu */
.secao,.secao-cats,.ponte,.hero,.carrossel{scroll-margin-top:72px}

/* ===== Carrossel de banners (topo da home) ===== */
.carrossel{position:relative;background:var(--bg-2);border-bottom:1px solid var(--linha)}
/* Proporção 16:5 (≈3,2:1) — banner largo no estilo das concessionárias/oficinas
   de referência. Imagem recomendada 1600×500: encaixa exata no desktop, sem corte. */
.carrossel-palco{position:relative;max-width:1600px;margin:0 auto;
  aspect-ratio:16/5;overflow:hidden}
.carrossel .slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.carrossel .slide.ativo{opacity:1;pointer-events:auto}
.carrossel .slide img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){ .carrossel .slide{transition:none} }
/* Setas */
.carrossel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:64px;border:0;background:rgba(15,12,9,.55);color:var(--texto);
  font-size:1.8rem;line-height:1;cursor:pointer;padding:0;transition:background .15s;
  display:flex;align-items:center;justify-content:center}
.carrossel-nav:hover{background:var(--laranja);color:#17140F}
.carrossel-nav:focus-visible{outline:2px solid var(--laranja);outline-offset:-2px}
.car-ant{left:0;border-radius:0 4px 4px 0}
.car-prox{right:0;border-radius:4px 0 0 4px}
/* Bolinhas */
.carrossel-dots{position:absolute;left:0;right:0;bottom:.8rem;z-index:2;
  display:flex;gap:.5rem;justify-content:center}
.carrossel-dots .dot{width:10px;height:10px;padding:0;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.7);background:transparent;transition:background .15s,transform .15s}
.carrossel-dots .dot.ativo{background:var(--laranja);border-color:var(--laranja);transform:scale(1.15)}
.carrossel-dots .dot:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
/* Botão "Consultar estoque" sobreposto ao banner, canto inferior esquerdo */
.carrossel-cta{position:absolute;z-index:3;left:clamp(1.25rem,6vw,5rem);bottom:14%;
  padding:1rem 2.1rem;font-size:1.05rem;border-radius:5px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.65)}
@media (max-width:640px){ .carrossel-cta{bottom:10%;left:1.1rem;padding:.78rem 1.4rem;font-size:.92rem} }

/* Botão flutuante do WhatsApp (canto inferior direito → rola até os contatos) */
.zap-flutua{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 10px 26px -6px rgba(0,0,0,.5);transition:transform .15s;animation:zap-pulse 2.8s infinite}
.zap-flutua:hover{transform:scale(1.08)}
.zap-flutua:active{transform:scale(.96)}
.zap-flutua:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes zap-pulse{
  0%{box-shadow:0 10px 26px -6px rgba(0,0,0,.5),0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 10px 26px -6px rgba(0,0,0,.5),0 0 0 15px rgba(37,211,102,0)}
  100%{box-shadow:0 10px 26px -6px rgba(0,0,0,.5),0 0 0 0 rgba(37,211,102,0)}
}
@media (prefers-reduced-motion:reduce){ .zap-flutua{animation:none} }
@media (max-width:640px){ .zap-flutua{width:54px;height:54px;right:16px;bottom:16px} }
/* Menu de categorias como bloco próprio (abaixo dos botões) */
.secao-cats{padding:1.4rem 0 .6rem}
@media (max-width:640px){
  /* No celular a faixa 16:5 ficaria muito baixa; 16:7 dá altura sem cortar tanto
     as laterais (~14% de cada lado) — por isso o conteúdo do banner deve ser central. */
  .carrossel-palco{aspect-ratio:16/7}
  .carrossel-nav{width:36px;height:52px;font-size:1.4rem}
}

/* Botões — "machined": cantos retos, carimbo */
.btn-laranja{background:var(--laranja);color:#140d06;font-family:var(--body);font-weight:700;
  border:1px solid transparent;cursor:pointer;padding:.8rem 1.3rem;border-radius:3px;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-transform:uppercase;letter-spacing:.06em;line-height:1.1;
  font-size:.9rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:background .15s}
.btn-laranja:hover{background:var(--laranja-2)}
.btn-laranja:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.btn-laranja::before{content:"▸";font-size:.8em}
.btn-ghost{border:1px solid var(--steel);color:var(--aco);background:transparent;cursor:pointer;
  padding:.8rem 1.3rem;border-radius:3px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.1;font-size:.9rem;font-weight:600}
.btn-ghost:hover{border-color:var(--laranja);color:var(--texto)}

/* HERO — tese da página */
.hero{position:relative;overflow:hidden;padding:4.4rem 0 3rem;
  background:
    radial-gradient(1000px 460px at 50% -10%, rgba(242,106,27,.20), transparent 60%),
    linear-gradient(180deg,#1c1811,#141009)}
.hero.tread{background:
  radial-gradient(1000px 460px at 50% -10%, rgba(242,106,27,.20), transparent 60%),
  repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 11px),
  repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 11px),
  linear-gradient(180deg,#1c1811,#141009)}
.hero-title{font-size:clamp(2.7rem,8vw,5.4rem);margin:.2rem 0 .9rem;letter-spacing:.5px;line-height:1.0}
.hero-title .hl{color:var(--laranja);
  text-shadow:0 0 1px rgba(0,0,0,.4)}
.hero .sub{color:var(--aco);max-width:48ch;font-size:1.08rem;margin:0 0 1.6rem}
.hero .acoes{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:2.2rem}
/* CTAs do hero maiores (mesma caixa nos dois = continuam alinhados) */
.hero .acoes .btn-laranja,
.hero .acoes .btn-ghost{padding:1.1rem 2rem;font-size:1.05rem;border-radius:5px}
/* Faixa de especialidades estampada */
.spec-strip{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.spec-strip li{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--aco);border:1px solid var(--linha);
  background:rgba(255,255,255,.02);padding:.4rem .7rem;border-radius:3px}
.spec-strip li::before{content:"⬢";color:var(--laranja);margin-right:.45rem;font-size:.7em}
/* Hero em duas colunas + emblema montado em plaqueta */
.hero-inner{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center}
.hero-copy{min-width:0}
.hero-badge{position:relative;width:100%;max-width:330px;margin:.2rem auto 0;padding:12px;
  border:1px solid var(--steel);border-radius:12px;
  background:
    radial-gradient(circle at 13px 13px, var(--steel-hi) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 13px) 13px, var(--steel-hi) 0 2px, transparent 2.5px),
    radial-gradient(circle at 13px calc(100% - 13px), var(--steel-hi) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), var(--steel-hi) 0 2px, transparent 2.5px),
    linear-gradient(180deg,#0f0c08,#0a0806);
  box-shadow:0 26px 50px -28px #000, inset 0 1px 0 rgba(255,255,255,.06)}
.hero-badge img{width:100%;display:block;border-radius:6px}

/* Hero de entrada — emblema como protagonista (holofote de oficina) */
.hero.hero-entrada{padding:3.2rem 0 2.6rem}
.hero-entrada .wrap{max-width:900px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-entrada .eyebrow{justify-content:center}
.hero-entrada .hero-title{font-size:clamp(2.1rem,5.2vw,3.5rem);margin-top:.1rem}
.hero-entrada .sub{margin-left:auto;margin-right:auto}
.hero-entrada .acoes{justify-content:center}
.hero-entrada .spec-strip{justify-content:center}
.hero-emblema{position:relative;margin:0 auto 1.8rem;display:flex;justify-content:center;width:100%}
.hero-emblema::before{content:"";position:absolute;z-index:0;top:-18%;left:50%;transform:translateX(-50%);
  width:118%;max-width:560px;height:140%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(242,106,27,.32), rgba(242,106,27,.06) 55%, transparent 74%)}
.hero-badge--xl{max-width:min(420px,86vw);position:relative;z-index:1}

/* Hero em duas colunas — fundo preto, logo ao lado (sem placa) */
.hero.hero-lado{background:#000;padding:3.4rem 0 2.8rem}
.hero-logo{display:flex;justify-content:center;align-items:center}
.hero-logo img{width:100%;max-width:430px;height:auto;display:block}

/* Seções */
.secao{padding:3.2rem 0;border-top:1px solid var(--linha)}
.secao h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.secao .intro{color:var(--aco);max-width:62ch;font-size:1.05rem;margin-bottom:1.8rem}

/* "Quem é a Master Tec" — texto à esquerda, prova em números à direita */
.sobre-grid{display:grid;grid-template-columns:1fr;gap:2.2rem}
.sobre-texto .intro{margin-bottom:0}
/* Placa de números: gap de 1px sobre o fundo cria os fios de aço entre as células */
.provas{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--linha);border:1px solid var(--linha);border-radius:8px;overflow:hidden}
.prova{background:var(--plate);padding:1.35rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.prova-num{font-family:var(--disp);font-weight:400;font-size:clamp(2.1rem,5.2vw,3rem);
  line-height:1;color:var(--laranja);font-variant-numeric:tabular-nums}
.prova-rot{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--aco-2);line-height:1.4}
@media (min-width:900px){
  .sobre-grid{grid-template-columns:1.05fr .95fr;gap:3.4rem;align-items:center}
}

/* Missão, visão e valores — preto e branco, cards uniformes e mais altos */
.mvv{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:.4rem;align-items:stretch}
/* Quadros monocromáticos: aspa grande em cima do título, aspa de fecho no canto inferior direito */
.mvv-card{position:relative;background:#fff;border:1px solid #dcdcdc;border-top:3px solid #111;
  border-radius:10px;padding:1.3rem 1.7rem 2.7rem;overflow:hidden;display:flex;flex-direction:column;
  min-height:250px}
.mvv-card::before{content:"\201C";font-family:Georgia,'Times New Roman',serif;font-weight:700;
  font-size:3.4rem;line-height:.9;color:#111;display:block;margin:0 0 .05rem}
.mvv-card::after{content:"\201D";font-family:Georgia,'Times New Roman',serif;font-weight:700;
  font-size:3.4rem;line-height:1;color:#111;position:absolute;right:1.25rem;bottom:.3rem}
.mvv-card h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.5px;
  font-size:1.55rem;color:#111;margin:0 0 .7rem}
.mvv-quote{margin:0;color:#1a1a1a;font-size:1.03rem;line-height:1.62;font-style:italic}
@media (min-width:820px){ .mvv{grid-template-columns:repeat(3,1fr)} }

/* Selo de credencial — homologação Driventic (retarder / freio-motor) */
/* Selo de credencial — homologação Driventic, com destaque de "certificação" */
.selo-cred{display:flex;align-items:center;gap:1.15rem;margin:0 0 1.5rem;padding:1.15rem 1.35rem;
  border-radius:12px;border:1px solid rgba(245,166,35,.38);border-left:4px solid var(--amber);
  background:linear-gradient(100deg, rgba(245,166,35,.12), rgba(245,166,35,.02) 60%), var(--bg-2);
  box-shadow:0 20px 46px -30px rgba(245,166,35,.55)}
.selo-cred-icone{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(245,166,35,.16);border:1px solid rgba(245,166,35,.4);color:var(--amber)}
.selo-cred-icone svg{width:27px;height:27px}
.selo-cred-texto{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.selo-cred-tag{align-self:flex-start;font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bg);background:var(--amber);padding:.3rem .62rem;border-radius:4px;white-space:nowrap}
.selo-cred-texto p{margin:0;color:var(--aco);font-size:1.02rem;line-height:1.5}
.selo-cred strong{color:var(--texto)}

/* Especialidades — carrossel contínuo (GSAP) com o card do centro em destaque.
   Sem JS / movimento reduzido: a faixa vira um scroll arrastável, sem dim. */
.esp-carrossel{position:relative;overflow:hidden;padding:16px 0}
.esp-carrossel::before,.esp-carrossel::after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none}
.esp-carrossel::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.esp-carrossel::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.esp-track{display:flex;gap:1rem;width:max-content}
.esp-carrossel:not(.ativo){overflow-x:auto;-webkit-overflow-scrolling:touch}
.esp{flex:0 0 clamp(240px,26vw,300px);background:var(--bg-2);border:1px solid var(--linha);border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .35s,transform .35s,opacity .35s}
.esp-carrossel.ativo .esp{opacity:.5;transform:scale(.96)}
.esp-carrossel.ativo .esp.destaque{opacity:1;transform:scale(1.03);border-color:var(--laranja);box-shadow:0 16px 36px -22px #000}
.esp-foto{position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  color:var(--aco-2);border-bottom:1px solid var(--linha);
  background:
    repeating-linear-gradient(-45deg, rgba(242,106,27,.045) 0 14px, transparent 14px 28px),
    linear-gradient(160deg,#241f18,#17130e)}
.esp-foto-ico{width:36px;height:36px;opacity:.55}
.esp-foto-tag{position:absolute;top:.6rem;left:.6rem;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--aco-2);
  background:rgba(0,0,0,.45);border:1px solid var(--linha);padding:.24rem .5rem;border-radius:4px}
/* Card com foto real: imagem preenche o quadro (as fotos têm fundo preto e casam com o card) */
.esp-foto.tem-foto{background:#0a0a0a}
.esp-foto img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.esp-corpo{padding:1.05rem 1.35rem 1.35rem;display:flex;flex-direction:column;gap:.45rem}
.esp-corpo b{display:block;font-family:var(--disp);font-weight:400;font-size:1.5rem;text-transform:uppercase;
  letter-spacing:.5px;color:var(--texto)}
.esp-corpo b::before{content:"";display:inline-block;width:9px;height:9px;background:var(--laranja);
  margin-right:.6rem;transform:rotate(45deg);vertical-align:middle}
.esp-corpo span{font-family:var(--body);color:var(--aco-2);font-size:.95rem;line-height:1.5}

/* Filtros */
.filtros{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem;
  background:var(--bg-2);border:1px solid var(--linha);border-radius:5px;padding:.7rem}
.filtros select,.filtros input{background:var(--bg);color:var(--texto);border:1px solid var(--linha);
  border-radius:3px;padding:.6rem .7rem;font-size:.95rem;font-family:var(--body)}
.filtros input[type=search]{flex:1;min-width:180px}
.filtros select:focus,.filtros input:focus{outline:2px solid var(--laranja);outline-offset:1px}

/* CATÁLOGO — plaqueta de aço rebitada (assinatura) */
.grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
.plate{position:relative;border:1px solid var(--steel);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;
  background:
    radial-gradient(circle at 11px 11px, var(--steel-hi) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 11px) 11px, var(--steel-hi) 0 2px, transparent 2.5px),
    radial-gradient(circle at 11px calc(100% - 11px), var(--steel-hi) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), var(--steel-hi) 0 2px, transparent 2.5px),
    linear-gradient(180deg,#262119,#1b1712);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 24px -18px #000;
  transition:transform .14s ease,border-color .14s ease}
.plate:hover{transform:translateY(-3px);border-color:var(--steel-hi)}
.plate-top{display:flex;align-items:center;justify-content:space-between;padding:.55rem .9rem;
  border-bottom:1px solid var(--steel);
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#332d24,#282219)}
.plate-unidade{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--laranja);border:1px solid #4a3722;background:#241a12;
  padding:.16rem .5rem;border-radius:2px}
.plate-serial{font-family:var(--mono);font-size:.72rem;color:var(--aco-2);letter-spacing:.06em}
.plate-foto{position:relative;aspect-ratio:5/4;background:
  repeating-linear-gradient(45deg,#191510,#191510 9px,#161209 9px 18px);
  display:flex;align-items:center;justify-content:center}
.plate-foto span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#4b4741}
/* Só a foto ativa aparece. Sem JS, fica a capa — que já vem com .ativa do servidor. */
.plate-foto img{width:100%;height:100%;object-fit:contain;display:none}
.plate-foto img.ativa{display:block}

/* Paginação da vitrine — mesma linguagem de plaqueta: caixa reta, filete laranja
   na página aberta. Rola sozinha no celular quando o catálogo tem muitas páginas. */
.paginacao{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;
  margin:1.8rem 0 .6rem}
.pag-item{min-width:42px;height:42px;padding:0 .7rem;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--steel);border-radius:3px;background:var(--plate);
  color:var(--aco);text-decoration:none;font-family:var(--mono);font-weight:700;font-size:.95rem;
  letter-spacing:.06em;transition:border-color .14s ease,color .14s ease}
a.pag-item:hover{border-color:var(--laranja);color:var(--texto)}
.pag-item.atual{background:var(--laranja);border-color:var(--laranja);color:#140d06}
.pag-item.desativado{opacity:.35}
.pag-seta{font-size:1.3rem;line-height:1}
.pag-gap{color:var(--aco-2);padding:0 .2rem;font-family:var(--mono)}
.pag-conta{text-align:center;margin:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--aco-2)}

/* ===== Botões quadrados de categoria, acima da vitrine ===== */
/* Flex em vez de grid: com auto-fill sobrava um vão grande à direita no desktop.
   Base de 96px cabe 3 por linha num celular de 375px (com 112 caíam para 2, e
   os botões empurravam a vitrine pra longe da dobra); o teto de 150px evita
   botão gigante quando o cliente tiver poucas categorias. */
.cat-tiras{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.4rem}
.cat-tira{flex:1 1 96px;max-width:150px;
  display:flex;flex-direction:column;align-items:center;gap:.45rem;text-decoration:none;
  background:var(--plate);border:1px solid var(--linha);border-radius:6px;padding:.75rem .5rem .65rem;
  transition:border-color .15s,background .15s;position:relative}
.cat-tira:hover{border-color:var(--laranja);background:var(--plate-2)}
.cat-tira:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.cat-tira.ativa{border-color:var(--laranja);background:var(--plate-2)}
/* Filete laranja marcando a categoria aberta */
.cat-tira.ativa::before{content:"";position:absolute;left:.6rem;right:.6rem;top:-1px;height:2px;background:var(--laranja)}
.cat-tira-arte{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#191510,#191510 7px,#161209 7px 14px);
  border-radius:4px;overflow:hidden}
.cat-tira-arte img{width:100%;height:100%;object-fit:contain;padding:.3rem}
/* Filtro com a imagem da especialidade (fundo preto casa com a foto) */
.cat-tira-arte.tem-esp{background:#0a0a0a}
.cat-tira-arte.tem-esp img{object-fit:cover;padding:0}
.cat-tira-nome{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--aco);text-align:center;line-height:1.25}
.cat-tira.ativa .cat-tira-nome{color:var(--texto)}
.cat-tira-qtd{font-family:var(--mono);font-size:.6rem;font-weight:700;color:var(--aco-2);
  border:1px solid var(--linha);border-radius:999px;padding:.04rem .38rem;line-height:1.5}
.cat-tira.ativa .cat-tira-qtd{color:var(--laranja);border-color:var(--laranja)}
/* Marca do "Todas": quatro quadradinhos, sem depender de imagem.
   align-items/justify-items precisam voltar a stretch: .cat-tira-arte centraliza
   (regra do flex) e, no grid, centralizar deixa os quadrados com altura zero. */
.cat-tira-todas{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  align-items:stretch;justify-items:stretch;gap:3px;padding:24%}
.cat-tira-todas span{background:var(--steel);border-radius:1px}
.cat-tira.ativa .cat-tira-todas span,.cat-tira:hover .cat-tira-todas span{background:var(--laranja)}

/* Área clicável que abre a foto inteira (fica sob as setas da galeria) */
.plate-zoom{position:absolute;inset:0;z-index:1;border:0;background:transparent;
  cursor:zoom-in;padding:0;display:flex;align-items:flex-end;justify-content:center}
.plate-zoom-selo{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto);background:rgba(15,12,9,.78);
  padding:.28rem .6rem;border-radius:3px;margin-bottom:.55rem;
  opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.plate-foto:hover .plate-zoom-selo,.plate-zoom:focus-visible .plate-zoom-selo{opacity:1;transform:none}
.plate-zoom:focus-visible{outline:2px solid var(--laranja);outline-offset:-3px}
@media (hover:none){ .plate-zoom-selo{opacity:.85;transform:none} }

/* Navegação da galeria no card */
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:44px;z-index:2;
  border:0;background:rgba(15,12,9,.62);color:var(--texto);font-size:1.5rem;line-height:1;
  cursor:pointer;opacity:0;transition:opacity .15s,background .15s;padding:0}
.gal-ant{left:0;border-radius:0 3px 3px 0}
.gal-prox{right:0;border-radius:3px 0 0 3px}
.gal-nav:hover{background:var(--laranja);color:#17140F}
.gal-nav:focus-visible{opacity:1;outline:2px solid var(--laranja);outline-offset:-2px}
.com-galeria:hover .gal-nav,.plate:focus-within .gal-nav{opacity:1}
.plate-foto .gal-conta{position:absolute;right:.5rem;bottom:.5rem;z-index:2;font-family:var(--mono);
  font-size:.64rem;font-weight:700;letter-spacing:.1em;color:var(--texto);
  background:rgba(15,12,9,.72);padding:.16rem .42rem;border-radius:3px;text-transform:none}
/* Em telas de toque não há hover: as setas ficam sempre visíveis */
@media (hover:none){ .com-galeria .gal-nav{opacity:.85} }

/* ===== Modal da foto em tamanho real ===== */
.lightbox{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  background:rgba(10,8,6,.94);padding:1rem;animation:lb-entra .18s ease-out}
.lightbox[hidden]{display:none}
@keyframes lb-entra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .lightbox{animation:none} }

.lb-topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:1100px;width:100%;margin:0 auto .7rem;flex:none}
.lb-titulo{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.5px;
  font-size:1.15rem;color:var(--texto);margin:0;line-height:1.1}
.lb-conta{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--aco-2)}
.lb-fechar{border:1px solid var(--steel);background:transparent;color:var(--aco);cursor:pointer;
  width:38px;height:38px;border-radius:3px;font-size:1.2rem;line-height:1;flex:none;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.lb-fechar:hover{border-color:var(--laranja);color:var(--texto)}

/* O palco tem altura fixa para a imagem não empurrar o layout ao trocar de foto.
   As setas são absolutas (não itens do flex): como .lb-img usa max-width:100%,
   se elas participassem do fluxo a imagem as empurraria para fora da tela. */
.lb-palco{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  max-width:1100px;width:100%;margin:0 auto;position:relative;padding:0 54px}
.lb-palco.sem-nav{padding:0}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  background:var(--plate);border:1px solid var(--linha);border-radius:6px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);
  border:1px solid var(--steel);background:rgba(20,16,12,.9);color:var(--texto);cursor:pointer;
  width:44px;height:64px;border-radius:3px;font-size:1.7rem;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.lb-nav.lb-ant{left:0}
.lb-nav.lb-prox{right:0}
.lb-nav:hover{background:var(--laranja);color:#17140F;border-color:var(--laranja)}
.lb-rodape{flex:none;text-align:center;padding-top:.7rem}
.lb-dica{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#6b6660}

@media (max-width:640px){
  .lb-palco{padding:0 42px}
  .lb-nav{width:34px;height:50px;font-size:1.4rem}
  .lb-titulo{font-size:1rem}
}
body.lb-aberto{overflow:hidden}
.plate-body{padding:1rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
/* Título da peça: nome longo quebra em 2/3 linhas, e o line-height .92 dos
   títulos globais deixava as linhas se encostando. Aqui abre um pouco, e a
   margem afasta do código acima e da categoria abaixo (soma com o gap do body). */
.plate-body h3{font-size:1.35rem;letter-spacing:.3px;line-height:1.14;margin:.2rem 0 .3rem}
.plate-cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--aco-2);text-transform:uppercase}
.plate-preco{font-family:var(--disp);font-size:1.7rem;color:var(--texto);letter-spacing:.5px;margin:.35rem 0 .1rem}
.plate-preco.consultar{font-size:1.05rem;color:var(--aco);font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em}
.plate .btn-laranja{margin-top:.7rem;justify-content:center}
/* Cartão que leva ao detalhe: título vira link + linha de ações */
.plate-body h3 a{color:inherit;text-decoration:none}
.plate-body h3 a:hover{color:var(--laranja)}
.plate-acoes{display:flex;flex-direction:column;gap:.45rem;margin-top:auto}
.plate-acoes .btn-laranja{margin-top:.5rem}
.plate-detalhe{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--aco-2);text-decoration:none;text-align:center}
.plate-detalhe:hover{color:var(--laranja)}

/* ===== Página do produto (detalhe + peças relacionadas) ===== */
.voltar-vitrine{color:var(--aco-2);text-decoration:none}
.voltar-vitrine:hover{color:var(--laranja)}
.peca-detalhe .eyebrow::before{display:none}
.peca-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:.4rem}
.peca-fotos{border:1px solid var(--steel);border-radius:8px;overflow:hidden}
.peca-info{display:flex;flex-direction:column;gap:.35rem}
.peca-info .peca-unidade{align-self:flex-start;font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--laranja);border:1px solid #4a3722;
  background:#241a12;padding:.2rem .55rem;border-radius:2px}
.peca-info h1{font-size:clamp(1.7rem,4vw,2.5rem);margin:.6rem 0 .1rem;line-height:1}
.peca-cat{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;color:var(--aco-2);text-transform:uppercase}
.peca-preco{font-family:var(--disp);font-size:2.2rem;color:var(--texto);letter-spacing:.5px;margin:.5rem 0}
.peca-preco.consultar{font-size:1.1rem;color:var(--aco);font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em}
.peca-desc{color:var(--aco);font-size:1.02rem;line-height:1.6;margin:.2rem 0 .6rem}
.peca-specs{margin:.4rem 0 1.1rem;border-top:1px solid var(--linha)}
.peca-specs div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--linha)}
.peca-specs dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--aco-2)}
.peca-specs dd{margin:0;color:var(--texto);text-align:right}
.peca-cta{align-self:flex-start;font-size:1.05rem}
.peca-nota{font-size:.85rem;color:var(--aco-2);margin:.55rem 0 0}
.peca-detalhe .relacionadas{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--linha)}
.peca-detalhe .relacionadas h2{font-size:clamp(1.5rem,3vw,2rem)}
.rel-foto{display:flex;align-items:center;justify-content:center;aspect-ratio:5/4;text-decoration:none;
  background:repeating-linear-gradient(45deg,#191510,#191510 9px,#161209 9px 18px);color:var(--aco-2);
  font-family:var(--mono);font-size:.8rem}
.rel-foto img{width:100%;height:100%;object-fit:contain;padding:.6rem}
@media (min-width:820px){
  .peca-grid{grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start}
}

/* Unidades — plaquetas de atendimento */
.unidades{display:grid;grid-template-columns:1fr;gap:1.2rem}
.unidade{background:var(--bg-2);border:1px solid var(--linha);border-radius:6px;padding:0;overflow:hidden}
.unidade-top{border-top:3px solid var(--laranja);padding:1.2rem 1.3rem .2rem}
.unidade h3{font-size:1.7rem;color:var(--texto)}
.unidade-corpo{padding:.2rem 1.3rem 1.3rem}
.unidade p{margin:.25rem 0;color:var(--aco);font-size:.98rem}
.unidade .zap{margin-top:.9rem}
.unidade-mapa{margin:1.1rem 1.3rem 1.3rem;border:1px solid var(--linha);border-radius:8px;overflow:hidden;line-height:0}
.unidade-mapa iframe{width:100%;height:200px;border:0;display:block}

/* Ponte → proposta (pitch da SPA, última seção) */
.ponte{padding:4.2rem 0;text-align:center;border-top:1px solid var(--linha);
  background:radial-gradient(760px 320px at 50% 118%, rgba(242,106,27,.16), transparent 62%), var(--bg-2)}
.ponte .eyebrow{justify-content:center}
.ponte h2{font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;margin:.3rem 0 .9rem}
.ponte h2 em{color:var(--laranja);font-style:normal}
.ponte p{color:var(--aco);max-width:58ch;margin:0 auto 1.7rem;font-size:1.05rem}
.ponte .btn-laranja{font-size:1rem}
.ponte .nota{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--aco-2);margin:1.6rem 0 0}

/* Rodapé */
.rodape{border-top:1px solid var(--linha);padding:2.2rem 0;color:var(--aco-2);text-align:center}
.rodape .wordmark{margin-bottom:.5rem}
.rodape p{margin:.2rem 0;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em}
.rodape .aviso-previa{opacity:.6;font-size:.72rem}

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

/* Movimento — entrada orquestrada via GSAP (hero.js). Esconde o hero até o JS assumir;
   se o JS estiver desligado, a classe .js nunca é adicionada e o hero aparece normal. */
.js .hero .wrap{opacity:0}

@media (min-width:720px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .unidades{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  /* Desktop: texto à esquerda, logo à direita (mobile mantém a logo antes via ordem do HTML) */
  .hero-inner{grid-template-columns:1.25fr .85fr;gap:3rem}
  .hero-copy{order:1}
  .hero-logo{order:2}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---- FAQ (dúvidas frequentes) ---- */
.faq{display:grid;gap:.7rem;max-width:80ch}
.faq-item{background:var(--plate);border:1px solid var(--steel);border-radius:8px;overflow:hidden}
.faq-item[open]{border-color:var(--laranja)}
.faq-item summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-family:var(--mono);
  font-weight:600;font-size:1.02rem;color:var(--texto);display:flex;justify-content:space-between;
  align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--laranja);font-size:1.4rem;line-height:1;flex:none}
.faq-item[open] summary::after{content:"\2013"}
.faq-resp{padding:0 1.2rem 1.1rem}
.faq-resp p{color:var(--aco);font-size:1rem;line-height:1.6;margin:0}