/* =========================================================
   MEC — sistema de design
   Preto + laranja da logomarca, motivo de bandeira quadriculada.
   Sem framework, sem build: um arquivo, mobile-first.
   ========================================================= */

/* ---------- fontes locais ----------
   Korataki (Typodermic) — licenciada pelo Grupo MEC.
   Só existe o peso Regular, então a face é declarada cobrindo 100–900:
   assim os títulos em `font-weight: 800` usam o desenho real da fonte
   em vez de um negrito sintético e borrado.

   Onde ela entra: H1, H2, `.display`, a etiqueta de seção, o lockup da
   marca e os números de painel. Só isso. Ela é 2,2x mais larga que a
   Arial Narrow e tem desenho quadrado: em rótulo, badge, aba, label e
   link de 11–14px em caixa alta o texto estourava a caixa e quebrava em
   duas linhas. Esses elementos usam `var(--texto)`, que é onde fonte de
   interface deve estar mesmo.                                          */
@font-face {
  font-family: "Korataki";
  src: url("../fonts/korataki-regular.woff2") format("woff2"),
       url("../fonts/korataki-regular.woff")  format("woff");
  font-weight: 100 900;
  font-style: normal;
  /* Evita o salto visual da fonte provisoria para a Korataki durante a carga. */
  font-display: block;
}

:root {
  /* Marca */
  --laranja:       #F26522;
  --laranja-claro: #FF8244;
  --laranja-escuro:#C74B12;

  /* Laranja de texto pequeno. O #F26522 sobre branco dá 3,15:1 e sobre a
     areia 2,89:1 — abaixo dos 4,5:1 que a WCAG pede para corpo miúdo, e
     no celular ao sol isso se sente. Este token guarda o tom legível de
     cada fundo: #B04210 sobre claro (5,8:1 no branco, 5,3:1 na areia — a
     etiqueta ainda põe um véu de laranja por cima) e
     o --laranja-claro sobre escuro (7,2:1). O --laranja da marca segue
     intacto em título grande, borda, ícone e fundo. */
  --laranja-legivel: #B04210;

  /* Neutros — o preto do manual de marca, nunca #000 puro */
  --preto:   #0E0F12;
  --escuro:  #16181D;
  --grafite: #24272E;
  --borda-escura: #2E323A;

  --cinza:       #6B7079;
  --cinza-claro: #9AA0A6;
  --linha:       #E3E5E8;
  --areia:       #F4F5F7;
  --branco:      #FFFFFF;

  /* Tipografia */
  --display: "Korataki", "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  --texto:   Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Ritmo */
  --raio:    14px;
  --raio-sm: 8px;
  --container: 1180px;
  --header-h: 72px;

  --sombra:    0 1px 2px rgba(14, 15, 18, .05), 0 10px 28px rgba(14, 15, 18, .08);
  --sombra-lg: 0 4px 12px rgba(14, 15, 18, .10), 0 24px 48px rgba(14, 15, 18, .14);

  --trans: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--escuro);
  background: var(--branco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- refinamento visual 2026 ---------- */
::selection { background: var(--laranja); color: var(--branco); }

.topo { box-shadow: 0 1px 0 rgba(14, 15, 18, .09), 0 8px 24px rgba(14, 15, 18, .06); }
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px;
  background: var(--laranja);
  transform: scaleX(0);
  transition: transform var(--trans);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.hero--loja {
  min-height: min(720px, calc(100svh - var(--header-h)));
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at 82% 25%, rgba(242,101,34,.28), transparent 26%),
    linear-gradient(118deg, #0e0f12 0%, #17191e 58%, #24272e 100%);
  position: relative;
  overflow: hidden;
}
.hero--loja::after {
  content: "MEC";
  position: absolute;
  right: -2vw; bottom: -9vw;
  font: 900 clamp(15rem, 35vw, 34rem)/.8 var(--display);
  letter-spacing: -.08em;
  color: rgba(255,255,255,.025);
  pointer-events: none;
}
.hero--loja .container { position: relative; z-index: 1; }
.hero--loja .hero__conteudo { padding-block: clamp(72px, 10vw, 120px); }
.hero--loja h1 { max-width: 820px; font-size: clamp(1.55rem, 3.6vw, 2.6rem); }
.hero--loja h1 em { color: var(--laranja); }
.microcopy { margin-top: 18px; color: var(--cinza); font-size: 0.9rem; }
.hero .microcopy,
.secao--preta .microcopy,
.pagina-performance .microcopy { color: var(--cinza-claro); }

.servicos--icones .servico { padding-top: 28px; }
.servico__icone {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 22px;
  color: var(--laranja);
  background: rgba(242,101,34,.09);
  border: 1px solid rgba(242,101,34,.18);
  border-radius: 14px;
}
.servico__icone svg { width: 27px; height: 27px; }

.lojas-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lojas-grade--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.loja-card {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 20px;
  box-shadow: var(--sombra);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  overflow: hidden;
}
.loja-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--laranja); }
.loja-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); border-color: rgba(242,101,34,.35); }
.loja-card__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; color: var(--laranja-legivel); font: 800 .9rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; }
.loja-card__topo svg { width: 25px; height: 25px; }
.loja-card h3 { font-size: clamp(1.1rem, 2vw, 1.45rem); margin-bottom: 18px; }
.loja-card address { color: var(--cinza); font-style: normal; line-height: 1.6; }
.loja-card__fone { margin-top: 13px; font-weight: 700; }
.loja-card__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.link-texto { color: var(--laranja-escuro); font-weight: 700; font-size: 0.92rem; }
.link-texto:hover { color: var(--laranja); }

.passos { counter-reset: etapa; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.passos li { padding: 30px; border-top: 1px solid var(--borda-escura); }
.passos li > span { display: block; margin-bottom: 42px; color: var(--laranja); font: 800 1rem/1 var(--texto); letter-spacing: .12em; }
.passos h3 { margin-bottom: 10px; color: var(--branco); }
.passos p { font-size: 0.96rem; }

.rodape--compacto { padding-block: 42px; }
.rodape--compacto .container { display: grid; grid-template-columns: 1.4fr 2fr auto; align-items: center; gap: 32px; }
.rodape--compacto .rodape__marca p { margin-top: 10px; color: var(--cinza-claro); font-size: 0.88rem; }
.rodape--compacto nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; color: var(--cinza-claro); font-size: 0.9rem; }
.rodape--compacto nav a:hover { color: var(--laranja); }
.rodape__legal { color: var(--cinza-claro); font-size: 0.82rem; white-space: nowrap; }

@media (max-width: 760px) {
  .lojas-grade, .lojas-grade--tres, .passos { grid-template-columns: 1fr; }
  .hero--loja { min-height: auto; }
  .passos li > span { margin-bottom: 20px; }
  .rodape--compacto .container { grid-template-columns: 1fr; text-align: center; }
  .rodape--compacto .rodape__marca img { margin-inline: auto; }
  .loja-card__acoes .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- tipografia ---------- */
h1, h2, .display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
}

h3, h4 {
  font-family: var(--texto);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(1.4rem, 3.2vw, 2.35rem); }
h2 { font-size: clamp(1.15rem, 2.4vw, 1.7rem); }
h3 { font-size: clamp(0.95rem, 1.6vw, 1.18rem); }
h4 { font-size: clamp(0.82rem, 1.2vw, 0.98rem); }

p  { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* No celular o título cai no piso do clamp e as frases longas ocupam de
   quatro a sete linhas de caixa alta. Reduzir o corpo não tira linha
   nenhuma — a Korataki continua larga, "Precisa de componentes Brembo
   instalados no seu carro?" fica em cinco linhas de 18px ou de 16px —,
   então o que desfaz o paredão é dar respiro entre elas. */
@media (max-width: 760px) {
  h1, h2 { line-height: 1.22; }
}

strong { font-weight: 700; }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.secao       { padding-block: clamp(56px, 9vw, 104px); }
.secao--areia{ background: var(--areia); }
.secao--preta{ background: var(--preto); color: var(--branco); --laranja-legivel: var(--laranja-claro); }

/* =============================================================
   TEMA ESCURO/LARANJA — página MEC Performance
   Sobrescreve o esquema claro das seções abaixo do hero
   ============================================================= */
.pagina-performance .secao {
  --laranja-legivel: var(--laranja-claro);
  position: relative;
  background: var(--preto);
  color: var(--branco);
  overflow: hidden;
  isolation: isolate;
}
.pagina-performance .secao--areia,
.pagina-performance .secao--preta { background: var(--preto); }

/* brilhos laranja alternados pra dar profundidade sem repetir */
.pagina-performance .secao::before {
  content: "";
  position: absolute;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(242, 101, 34, .22) 0%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}
.pagina-performance .secao:nth-of-type(odd)::before {
  top: -180px; right: -140px;
}
.pagina-performance .secao:nth-of-type(even)::before {
  bottom: -180px; left: -140px;
}

/* textos: cabeça de seção */
.pagina-performance .secao h2 { color: var(--branco); }
.pagina-performance .secao .secao-cabeca p,
.pagina-performance .secao > .container > p { color: var(--cinza-claro); }

/* Cards de serviço, parceiro e produto — todos ganham skin escura premium */
.pagina-performance .servico,
.pagina-performance .parceiro,
.pagina-performance .produto {
  background: var(--grafite);
  border: 1px solid var(--borda-escura);
  color: var(--branco);
}
.pagina-performance .servico:hover,
.pagina-performance .parceiro:hover,
.pagina-performance .produto:hover {
  border-color: var(--laranja);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.pagina-performance .servico p,
.pagina-performance .parceiro p,
.pagina-performance .produto p { color: var(--cinza-claro); }
.pagina-performance .servico h3,
.pagina-performance .parceiro h3,
.pagina-performance .produto h3 { color: var(--branco); }

/* imagem do produto (carrossel) — fundo escuro atrás do PNG do produto */
.pagina-performance .produto__img { background: rgba(255, 255, 255, .04); }

/* Detalhe: barrinha laranja lateral do card servico */
.pagina-performance .servico__marca { background: var(--laranja); }

/* Grade de contato: cores dos textos */
.pagina-performance .contato-grade h2 { color: var(--branco); }
.pagina-performance .contato-grade p { color: var(--cinza-claro); }
.pagina-performance .contato-grade address,
.pagina-performance .contato-grade address a { color: var(--branco); }
.pagina-performance .contato-grade address a:hover { color: var(--laranja); }

/* Lista de checks */
.pagina-performance .checks li { color: var(--branco); }

/* Botão de navegação do carrossel — inverter cor pra vazado no escuro */
.pagina-performance .carrossel__nav {
  background: var(--grafite);
  color: var(--branco);
  border-color: var(--borda-escura);
}
.pagina-performance .carrossel__nav:hover {
  background: var(--laranja);
  border-color: var(--laranja);
  color: var(--branco);
}
.pagina-performance .carrossel__nav[disabled]:hover {
  background: var(--grafite);
  color: var(--branco);
  border-color: var(--borda-escura);
}

/* CTA final também no tema — mantém o gradient escuro */
.pagina-performance .cta-final {
  --tinta-cta: var(--branco);
  --laranja-legivel: var(--laranja-claro);
  background: var(--preto);
  border-top: 1px solid var(--borda-escura);
}
.pagina-performance .cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(242,101,34,.22), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(242,101,34,.14), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.pagina-performance .cta-final > * { position: relative; z-index: 1; }

/* FAQ — accordions escuros */
.pagina-performance .faq details {
  background: var(--grafite);
  border-color: var(--borda-escura);
  color: var(--branco);
}
.pagina-performance .faq details[open] { border-color: var(--laranja); }
.pagina-performance .faq summary { color: var(--branco); }
.pagina-performance .faq details p { color: var(--cinza-claro); }

/* Cartão de contato (endereço, whatsapp, instagram, horário) */
.pagina-performance .cartao-nap {
  background: var(--grafite);
  border-color: var(--borda-escura);
  color: var(--branco);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.pagina-performance .cartao-nap h3 { color: var(--branco); }
.pagina-performance .nap-item { border-bottom-color: var(--borda-escura); }
.pagina-performance .nap-item dt { color: var(--cinza-claro); }
.pagina-performance .nap-item dd { color: var(--branco); }
.pagina-performance .nap-item dd a { color: var(--branco); }
.pagina-performance .nap-item dd a:hover { color: var(--laranja); }

/* Tabela de horários */
.pagina-performance .horarios th,
.pagina-performance .horarios td { border-bottom-color: var(--borda-escura); }
.pagina-performance .horarios th { color: var(--cinza-claro); }
.pagina-performance .horarios td { color: var(--branco); }
.pagina-performance .horarios .fechado { color: var(--cinza-claro); }

/* Mapa placeholder */
.pagina-performance .mapa {
  background: var(--grafite);
  border-color: var(--borda-escura);
}
.pagina-performance .mapa__vazio { color: var(--cinza-claro); }
.pagina-performance .mapa__vazio strong { color: var(--branco); }

.pagina-performance .contato-performance { gap: 18px; }
.pagina-performance .contato-performance .cartao-nap,
.pagina-performance .mapa--performance {
  border-color: rgba(255,255,255,.1);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.pagina-performance .contato-performance .cartao-nap { padding: 30px; }
.contato-performance__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  color: var(--cinza-claro);
  font: 700 .7rem/1 var(--texto);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.contato-performance__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 0 5px rgba(53,208,127,.1);
}
.pagina-performance .contato-performance .nap-item { padding-block: 13px; }
.pagina-performance .contato-performance .nap-item dd span {
  color: var(--cinza-claro);
  font-size: 0.9rem;
  font-weight: 500;
}
.contato-performance__acoes {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.contato-performance__acoes .btn { width: 100%; }
.pagina-performance .mapa--performance { min-height: 100%; background: #111; }
.pagina-performance .mapa--performance iframe { min-height: 510px; filter: grayscale(.7) contrast(1.08); }
@media (max-width: 619px) {
  .pagina-performance .contato-performance .cartao-nap { padding: 24px 20px; }
  .contato-performance__acoes { grid-template-columns: 1fr; }
  .pagina-performance .mapa--performance,
  .pagina-performance .mapa--performance iframe { min-height: 330px; }
}
.secao--preta p { color: var(--cinza-claro); }

.secao-cabeca { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.secao-cabeca.centro { margin-inline: auto; text-align: center; }
.secao-cabeca p { margin-top: 16px; color: var(--cinza); font-size: 1.06rem; }
.secao--preta .secao-cabeca p { color: var(--cinza-claro); }

/* Etiqueta inclinada — ecoa o itálico de velocidade da logomarca */
.etiqueta {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laranja-legivel);
  padding: 5px 14px;
  margin-bottom: 18px;
  background: rgba(242, 101, 34, .1);
  border-left: 3px solid var(--laranja);
  transform: skewX(-10deg);
}
.etiqueta > span { display: block; transform: skewX(10deg); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--texto);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: var(--raio-sm);
  transition: transform var(--trans), background var(--trans), color var(--trans), box-shadow var(--trans);
  /* Korataki é ~2,2x mais larga que a Arial Narrow: rótulo longo precisa
     poder quebrar em duas linhas em vez de estourar a caixa. */
  text-align: center;
  text-wrap: balance;
  max-width: 100%;
  /* Sem variante (--zap, --escuro, --vazado), o botão herdava a cor do
     pai e podia sair em laranja vivo sobre branco, 3,15:1. */
  color: var(--laranja-legivel);
}

/* no celular o rótulo longo ainda cabia em uma linha só com um passo a menos */
@media (max-width: 560px) {
  .btn { font-size: 0.86rem; padding: 13px 18px; }
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn--primario {
  background: var(--laranja);
  color: var(--preto);
  box-shadow: 0 4px 16px rgba(242, 101, 34, .34);
}
.btn--primario:hover { background: var(--laranja-claro); transform: translateY(-2px); }

.btn--zap { background: #25D366; color: #082313; box-shadow: 0 4px 16px rgba(37, 211, 102, .24); }
.btn--zap:hover { background: #36E276; transform: translateY(-2px); }

.btn--vazado {
  border: 2px solid rgba(255, 255, 255, .32);
  color: var(--branco);
}
.btn--vazado:hover { border-color: var(--branco); background: rgba(255, 255, 255, .08); }

.btn--escuro { background: var(--preto); color: var(--branco); }
.btn--escuro:hover { background: var(--grafite); transform: translateY(-2px); }

.btn--pequeno { font-size: 0.98rem; padding: 11px 20px; }

/* ---------- header ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(14, 15, 18, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda-escura);
}
.topo .container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.marca { display: flex; align-items: center; flex-shrink: 0; }
/* a logomarca oficial é PNG preto: invertida vira branca sem perder o alpha */
.marca img { width: 132px; filter: invert(1); }
.marca--grupo,
.marca--performance { gap: 10px; }
.marca--grupo img,
.marca--performance img { width: 92px; }
.marca--grupo::after,
.marca--performance span {
  padding-left: 10px;
  border-left: 1px solid var(--borda-escura);
  color: var(--branco);
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.marca--grupo { gap: 12px; }
.marca--grupo::after {
  content: "Grupo";
  padding-left: 12px;
  font-size: 0.403rem;
  letter-spacing: 0.18em;
}
.marca--grupo,
.marca--performance { gap: 0; }
.marca--grupo::after { content: none; }
.marca--grupo img,
.marca--performance img { width: 156px; }

.nav { margin-left: auto; display: none; }
.nav ul { display: flex; align-items: center; gap: clamp(8px, 1.3vw, 20px); }
.nav a {
  /* Menu fica na fonte de texto: a Korataki é ~2,2x mais larga que a
     Arial Narrow e sozinha ocupava 735px dos 1180px do cabeçalho. */
  font-family: var(--texto);
  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cinza-claro);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--trans), border-color var(--trans);
}
.nav a:hover           { color: var(--branco); }
.nav a[aria-current]   { color: var(--branco); border-bottom-color: var(--laranja); }

.topo-cta { display: none; flex-shrink: 0; }
/* botão do topo com escala própria — precisa caber ao lado do menu */
.topo-cta .btn { font-size: 0.82rem; padding: 12px 18px; white-space: nowrap; }

/* menu mobile */
.hamburguer {
  margin-left: auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--branco);
  border: 1px solid var(--borda-escura);
  border-radius: var(--raio-sm);
}
.hamburguer svg { width: 22px; height: 22px; }
.hamburguer .icone-fechar { display: none; }
.hamburguer[aria-expanded="true"] .icone-abrir  { display: none; }
.hamburguer[aria-expanded="true"] .icone-fechar { display: block; }

.menu-mobile {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  background: var(--preto);
  border-bottom: 1px solid var(--borda-escura);
  padding: 12px 20px 28px;
  z-index: 99;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.menu-mobile[data-aberto="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.menu-mobile a {
  display: block;
  font-family: var(--texto);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--branco);
  padding: 11px 0;
  border-bottom: 1px solid var(--borda-escura);
}
.menu-mobile .btn { width: 100%; margin-top: 16px; }
/* O `.menu-mobile a` pinta tudo de branco, inclusive o botão verde, onde
   o branco cai para 1,98:1. O verde do WhatsApp pede tinta escura. */
.menu-mobile .btn--zap { color: #082313; border-bottom: none; }

@media (min-width: 1140px) {
  .nav, .topo-cta { display: block; }
  .hamburguer, .menu-mobile { display: none !important; }
  .marca img { width: 145px; }
  .marca--grupo img,
  .marca--performance img { width: 172px; }
}

/* ---------- hero ---------- */
.hero {
  --laranja-legivel: var(--laranja-claro);
  position: relative;
  background: var(--preto);
  color: var(--branco);
  padding-block: clamp(64px, 11vw, 128px);
  overflow: hidden;
  isolation: isolate;
}

/* Bandeira MEC: assinatura comum a todos os banners, sem depender do HTML. */
.hero::before {
  content: "";
  position: absolute;
  top: 2%;
  right: -18%;
  width: min(1180px, 92vw);
  aspect-ratio: 1718 / 350;
  background: url("../img/bandeira-mec-preto.png") center / contain no-repeat;
  opacity: 0.095;
  filter: invert(1);
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: -1;
}
.hero__bandeira { display: none; }

@media (max-width: 680px) {
  .hero::before {
    top: 12%;
    right: -42%;
    width: 150vw;
    opacity: 0.07;
  }
}
/* brilho laranja no canto — dá profundidade sem pesar */
.hero::after {
  content: "";
  position: absolute;
  top: -180px; right: -140px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(242, 101, 34, .3) 0%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.hero__conteudo { max-width: 760px; }
.hero h1 { color: var(--branco); }
.hero h1 em {
  font-style: normal;
  color: var(--laranja);
  display: block;
}
.hero__texto {
  margin-top: 22px;
  font-size: clamp(1.05rem, 2.4vw, 1.24rem);
  color: var(--cinza-claro);
  max-width: 58ch;
}
.hero__acoes {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* chip de serviços logo abaixo do H1 — passa escopo em uma linha */
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--texto);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza-claro);
}
.hero__chips li { position: relative; }
.hero__chips li + li::before {
  content: "·";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--laranja);
  font-size: 1.3rem;
}

/* hero reduzido das páginas internas */
.hero--interna { padding-block: clamp(48px, 8vw, 84px); }
.hero--interna h1 { font-size: clamp(1.65rem, 3.8vw, 2.5rem); }

/* ---------- hero da Performance: fundo com foto opcional + gradiente ---------- */
.hero--performance {
  background:
    radial-gradient(circle at 80% 20%, rgba(242,101,34,.26), transparent 30%),
    linear-gradient(120deg, #090a0c 0%, #17191e 68%, #24272e 100%);
}
.hero--performance .hero__conteudo { max-width: 100%; }
.hero--performance .hero__texto { max-width: 62ch; }
.hero--performance .hero__acoes { max-width: 720px; }

/* linha de especialidades logo abaixo do H1 — cada item: arte (hexágono) + rótulo */
.hero-servicos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px 12px;
  margin-top: 34px;
  padding-block: 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.hero-servicos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
}
.hero-servicos img {
  width: 100%;
  max-width: 140px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}
.hero-servicos__rot {
  font-family: var(--texto);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--branco);
  line-height: 1.2;
}
@media (max-width: 1100px) {
  .hero-servicos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .hero-servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .hero-servicos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
  }
  .hero-servicos img { max-width: 110px; }
  .hero-servicos__rot { font-size: 0.74rem; letter-spacing: 0.04em; }
}

/* CTAs grandes com título + subtítulo empilhados */
.hero__acoes--duplo {
  margin-top: 30px;
  gap: 16px;
}
.btn--cta {
  padding: 16px 26px;
  border-radius: 12px;
  text-align: left;
  min-height: 68px;
}
.btn--cta svg { width: 26px; height: 26px; }
.btn__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.btn__stack strong {
  font-family: var(--texto);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.btn__stack em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.85;
  margin-top: 2px;
}
.btn--vazado.btn--cta { color: var(--branco); }
.btn--vazado.btn--cta:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 520px) {
  .btn--cta { width: 100%; }
}

/* selos de confiança abaixo dos CTAs */
.hero-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero-selos li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.hero-selos__icone {
  flex-shrink: 0;
  color: var(--laranja);
  display: grid;
  place-items: center;
}
.hero-selos__icone svg { width: 28px; height: 28px; }
.hero-selos__rot {
  font-family: var(--texto);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--branco);
  line-height: 1.25;
}
@media (max-width: 620px) {
  .hero-selos { gap: 14px 22px; }
  .hero-selos__icone svg { width: 24px; height: 24px; }
  .hero-selos__rot { font-size: 0.74rem; letter-spacing: 0.04em; }
}

.migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--cinza-claro);
  margin-bottom: 20px;
}
.migalhas a:hover { color: var(--laranja); }
.migalhas span[aria-hidden] { color: var(--cinza); }

/* ---------- faixa de números ---------- */
.faixa {
  background: var(--grafite);
  border-block: 1px solid var(--borda-escura);
  color: var(--branco);
}
.faixa__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--borda-escura);
}
.faixa__item {
  background: var(--grafite);
  padding: 26px 20px;
  text-align: center;
}
.faixa__num {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.5vw, 1.95rem);
  font-weight: 800;
  color: var(--laranja);
  line-height: 1;
}
.faixa__rot {
  margin-top: 8px;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza-claro);
}
@media (min-width: 760px) {
  .faixa__grade { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- cards das unidades ---------- */
.unidades {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .unidades { grid-template-columns: repeat(3, 1fr); } }

.unidade {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 30px 26px 26px;
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.unidade::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--laranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
}
.unidade:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-lg);
  border-color: transparent;
}
.unidade:hover::before { transform: scaleX(1); }

.unidade__icone {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--raio-sm);
  background: rgba(242, 101, 34, .1);
  color: var(--laranja);
  margin-bottom: 20px;
}
.unidade__icone svg { width: 28px; height: 28px; }
.unidade__icone--marca {
  width: min(190px, 100%);
  height: 58px;
  padding: 10px 12px;
  background: #f3f4f6;
}
.unidade__icone--marca img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.unidade__icone--performance {
  background: var(--preto);
}
.unidade__icone--performance img {
  filter: brightness(0) invert(1);
}

.unidade h3 { margin-bottom: 12px; }
.unidade p  { color: var(--cinza); font-size: 1rem; }

.unidade__lista {
  margin-top: 18px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.unidade__lista li {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--escuro);
  background: var(--areia);
  border-radius: 99px;
  padding: 5px 13px;
}

.unidade__link {
  margin-top: auto;   /* prende o link no rodapé do card, alinhando os três */
  padding-top: 20px;
  border-top: 1px solid var(--linha);
  font-family: var(--texto);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--laranja-legivel);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.unidade__link svg { width: 17px; height: 17px; transition: transform var(--trans); }
.unidade:hover .unidade__link svg { transform: translateX(5px); }
/* o card inteiro é clicável, mas o link continua sendo o alvo semântico */
.unidade__link::after { content: ""; position: absolute; inset: 0; }

/* ---------- marcas parceiras / linhas próprias ---------- */
.parceiros {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .parceiros { grid-template-columns: 1fr 1fr; } }

.parceiro {
  position: relative;
  background: var(--preto);
  color: var(--branco);
  padding: 40px 32px;
  border-radius: var(--raio);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.parceiro::before {
  content: "";
  position: absolute;
  inset: auto -12% -35% auto;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(242, 101, 34, .28) 0%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}
.parceiro__marca {
  font-family: var(--texto);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--laranja);
  margin-bottom: 20px;
}
.parceiro h3 {
  color: var(--branco);
  margin-bottom: 14px;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}
.parceiro p {
  color: var(--cinza-claro);
  font-size: 1rem;
  flex: 1;
}
.parceiro__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-family: var(--texto);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--laranja);
}
.parceiro__link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  transition: transform var(--trans);
}
.parceiro__link:hover svg { transform: translateX(4px); }
.parceiro__link:hover { text-decoration: underline; }

/* ---------- diferenciais ---------- */
.vantagens {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .vantagens { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .vantagens { grid-template-columns: repeat(4, 1fr); } }

.vantagem {
  padding: 26px 22px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--borda-escura);
  border-radius: var(--raio);
}
.vantagem__icone { color: var(--laranja); margin-bottom: 16px; }
.vantagem__icone svg { width: 30px; height: 30px; }
.vantagem h3 { font-size: 1.05rem; color: var(--branco); margin-bottom: 10px; }
.vantagem p  { font-size: 0.97rem; }

/* ---------- serviços (páginas internas) ---------- */
.servicos {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  min-width: 0;
}
@media (min-width: 680px)  { .servicos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .servicos { grid-template-columns: repeat(3, 1fr); } }

.servico {
  min-width: 0;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px 24px;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.servico:hover { border-color: var(--laranja); box-shadow: var(--sombra); }
.servico h3 { font-size: 1.04rem; margin-bottom: 10px; }
.servico p  { font-size: 0.98rem; color: var(--cinza); }
.servico__marca {
  display: inline-block;
  width: 34px; height: 4px;
  background: var(--laranja);
  border-radius: 99px;
  margin-bottom: 18px;
  transform: skewX(-20deg);
}

/* lista com check */
.checks { display: grid; gap: 13px; }
.checks li {
  position: relative;
  padding-left: 34px;
  font-size: 1.02rem;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------- vitrine de produtos (linha parceira) ---------- */
.produtos {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .produtos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .produtos { grid-template-columns: repeat(3, 1fr); } }

.produto {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.produto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: transparent;
}
.produto__img {
  aspect-ratio: 4 / 3;
  background: var(--areia);
  overflow: hidden;
}
.produto__img img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px;
}
.produto__corpo {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.produto__marca {
  font-family: var(--texto);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laranja-legivel);
  margin-bottom: 8px;
}
.produto h3 { font-size: 1.04rem; margin-bottom: 10px; }
.produto p  { font-size: 0.96rem; color: var(--cinza); flex: 1; }
.produto__link {
  /* Bloco de largura justa: cada link fica na sua linha mesmo quando
     dois deles caberiam lado a lado, sem alargar a área clicável. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--texto);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--laranja-legivel);
}
.produto__link:hover { text-decoration: underline; }

.produtos-cta {
  margin-top: 36px;
  text-align: center;
}
.produtos-cta .btn { border: 2px solid var(--laranja); color: var(--laranja-legivel); }
/* No hover o fundo vira laranja: aí a tinta escura é que dá contraste. */
.produtos-cta .btn:hover { background: var(--laranja); color: var(--preto); }

/* ---------- carrossel de produtos ---------- */
.carrossel {
  position: relative;
}
.carrossel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrossel__viewport::-webkit-scrollbar { display: none; }
.carrossel__trilha {
  display: flex;
  gap: 22px;
  padding: 4px 2px 8px;
}
.carrossel__trilha .produto {
  flex: 0 0 calc((100% - 44px) / 3);
  scroll-snap-align: start;
}
@media (max-width: 979px) {
  .carrossel__trilha .produto { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 619px) {
  .carrossel__trilha .produto { flex-basis: 85%; }
}

.carrossel__nav {
  position: absolute;
  top: 32%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: var(--branco);
  color: var(--preto);
  display: grid;
  place-items: center;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: background var(--trans), color var(--trans), border-color var(--trans), opacity var(--trans);
}
.carrossel__nav svg { width: 22px; height: 22px; }
.carrossel__nav--prev { left: -12px; }
.carrossel__nav--next { right: -12px; }
.carrossel__nav:hover {
  background: var(--laranja);
  color: var(--branco);
  border-color: var(--laranja);
}
.carrossel__nav[disabled] {
  opacity: .35;
  cursor: default;
}
.carrossel__nav[disabled]:hover {
  background: var(--branco);
  color: var(--preto);
  border-color: var(--linha);
}
@media (max-width: 619px) {
  .carrossel__nav { display: none; }
}

/* ---------- bloco de contato / NAP ---------- */
.contato-grade {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contato-grade { grid-template-columns: 1fr 1fr; align-items: start; } }

.cartao-nap {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 30px 26px;
  box-shadow: var(--sombra);
}
.cartao-nap h3 { margin-bottom: 22px; }

.nap-item {
  /* Dentro de um <dl>, o grupo só pode conter dt e dd — o ícone foi para
     dentro do próprio rótulo, que é o que ele ilustra. */
  padding-block: 15px;
  border-bottom: 1px solid var(--linha);
}
.nap-item dt {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nap-item dd { padding-left: 30px; }
.nap-item:last-of-type { border-bottom: none; }
.nap-item__icone { display: inline-flex; color: var(--laranja); flex-shrink: 0; }
.nap-item__icone svg { width: 20px; height: 20px; }
.nap-item dt {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza);
  margin-bottom: 3px;
}
.nap-item dd { font-size: 1.03rem; font-weight: 500; }
.nap-item dd a:hover { color: var(--laranja); }

.horarios { width: 100%; border-collapse: collapse; font-size: 1rem; }
.horarios th, .horarios td { padding: 9px 0; text-align: left; border-bottom: 1px solid var(--linha); }
.horarios th { font-weight: 500; color: var(--cinza); }
.horarios td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.horarios tr:last-child th, .horarios tr:last-child td { border-bottom: none; }
.horarios .fechado { color: var(--cinza); font-weight: 500; }

.mapa {
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--areia);
  min-height: 340px;
  height: 100%;
}
.mapa iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
/* placeholder enquanto o embed real do Google Maps não entra */
.mapa__vazio {
  height: 100%;
  min-height: 340px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 30px;
  color: var(--cinza);
}
.mapa__vazio svg { width: 40px; height: 40px; color: var(--laranja); }

/* ---------- avaliações ---------- */
.avaliacoes {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .avaliacoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .avaliacoes { grid-template-columns: repeat(3, 1fr); } }

.avaliacao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.estrelas { color: #F5A623; letter-spacing: 2px; font-size: 1.05rem; margin-bottom: 14px; }
.avaliacao p { font-size: 1.02rem; flex: 1; }
.avaliacao footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  font-size: 0.9rem;
  color: var(--cinza);
}
.avaliacao footer strong { display: block; color: var(--escuro); font-size: 0.98rem; }

/* barra colorida do Google, igual à dos adesivos */
.barra-google { display: flex; height: 4px; border-radius: 99px; overflow: hidden; width: 62px; margin-top: 16px; }
.barra-google span { flex: 1; }
.g-azul { background: #4285F4; } .g-vermelho { background: #EA4335; }
.g-amarelo { background: #FBBC05; } .g-verde { background: #34A853; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  margin-bottom: 12px;
  background: var(--branco);
  overflow: hidden;
  transition: border-color var(--trans);
}
.faq details[open] { border-color: var(--laranja); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 54px 19px 22px;
  font-weight: 600;
  font-size: 1.06rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--laranja);
  border-bottom: 2.5px solid var(--laranja);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--trans);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 22px 22px; color: var(--cinza); }

/* ---------- CTA final ---------- */
.cta-final {
  /* O bloco é laranja aqui e preto na página Performance: a tinta segue o
     fundo, senão o texto some. Preto sobre o laranja dá 6,1:1 (o branco
     que estava aqui dava 3,15:1). */
  --tinta-cta: var(--preto);
  /* A etiqueta também vive aqui dentro: sobre o laranja ela vira preta. */
  --laranja-legivel: var(--preto);
  position: relative;
  background: var(--laranja);
  color: var(--tinta-cta);
  padding-block: clamp(52px, 8vw, 84px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-final__bandeira {
  position: absolute;
  inset: -20% -10% auto auto;
  width: min(760px, 110%);
  opacity: 0.1;
  filter: invert(1);
  transform: rotate(-7deg);
  z-index: -1;
  pointer-events: none;
}
.cta-final h2 { color: var(--tinta-cta); }
/* Preto sobre o laranja da marca dá 6,1:1; o branco que estava aqui dava
   3,15:1 e sumia no sol. O bloco continua laranja, que é o que se vê de
   longe — muda só a tinta do texto. */
.cta-final p { margin: 16px auto 0; max-width: 56ch; color: var(--tinta-cta); opacity: .88; }
.cta-final .hero__acoes { justify-content: center; }
.cta-final .btn--escuro { box-shadow: 0 4px 16px rgba(14, 15, 18, .28); }
/* Sobre o laranja, o vazado branco também ficava em 3,15:1. */
.cta-final .btn--vazado { color: var(--tinta-cta); border-color: color-mix(in srgb, var(--tinta-cta) 38%, transparent); }
.cta-final .btn--vazado:hover { border-color: var(--tinta-cta); background: color-mix(in srgb, var(--tinta-cta) 8%, transparent); }

/* ---------- rodapé ---------- */
.rodape { background: var(--preto); color: var(--cinza-claro); padding-block: 56px 28px; font-size: 0.96rem; --laranja-legivel: var(--laranja-claro); }
.rodape__grade {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .rodape__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rodape__grade { grid-template-columns: 1.4fr repeat(4, 1fr); } }

.rodape img.logo-rodape { width: 150px; filter: invert(1); margin-bottom: 18px; }
.rodape h3,
.rodape h4 {
  font-size: 0.94rem;
  color: var(--branco);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.rodape li { margin-bottom: 10px; line-height: 1.5; }
.rodape a:hover { color: var(--laranja); }
.rodape address { font-style: normal; }

.sociais { display: flex; gap: 10px; margin-top: 20px; }
.sociais a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--borda-escura);
  border-radius: var(--raio-sm);
  color: var(--cinza-claro);
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.sociais a:hover { background: var(--laranja); border-color: var(--laranja); color: var(--branco); }
.sociais svg { width: 19px; height: 19px; }

.rodape__base {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--borda-escura);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--cinza-claro);
}

/* ---------- botão flutuante de WhatsApp ---------- */
.zap-flutuante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42);
  transition: transform var(--trans);
}
.zap-flutuante:hover { transform: scale(1.08); }
.zap-flutuante svg { width: 30px; height: 30px; }

/* ---------- acessibilidade ---------- */
.pular-para {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--laranja-escuro);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--raio-sm);
  z-index: 200;
}
.pular-para:focus { left: 20px; }

.sr-apenas {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   >>> REMOVER ESTE BLOCO ANTES DE PUBLICAR <<<
   Marca em amarelo todo dado ainda não confirmado (endereços,
   telefones, horários). Ver DADOS-PENDENTES.md.
   ========================================================= */
.dado-pendente {
  background: #FFF3BF;
  color: #6B4E00;
  box-shadow: 0 0 0 1px #E6C200 inset;
  border-radius: 3px;
  padding: 0 3px;
}

/* Overrides finais da experiência unificada de Autopartes. */
.hero.hero--loja {
  min-height: min(720px, calc(100svh - var(--header-h)));
  padding-block: 0;
  background:
    radial-gradient(circle at 82% 25%, rgba(242,101,34,.28), transparent 26%),
    linear-gradient(118deg, #0e0f12 0%, #17191e 58%, #24272e 100%);
}
.hero.hero--loja::after {
  content: "MEC";
  top: auto; right: -2vw; bottom: -9vw;
  width: auto; height: auto;
  background: none;
  font: 900 clamp(15rem, 35vw, 34rem)/.8 var(--display);
  letter-spacing: -.08em;
  color: rgba(255,255,255,.025);
}
.rodape.rodape--compacto { padding-block: 42px; }

/* Assinatura visual da MEC Performance: engenharia exposta, sem ícones genéricos. */
.performance-visual {
  position: relative;
  margin-top: 36px;
  max-width: 1120px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  overflow: hidden;
  background: #08090b;
  box-shadow: 0 30px 90px rgba(0,0,0,.48), 0 0 0 1px rgba(242,101,34,.08) inset;
}
.performance-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5,6,8,.34), transparent 38%), linear-gradient(0deg, rgba(5,6,8,.82), transparent 34%);
}
.performance-visual img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.performance-engine { aspect-ratio: 16 / 9; }
.performance-engine--modern .engine-svg,
.performance-engine--modern figcaption { display: none; }
.performance-engine--modern::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3,4,6,.42), transparent 32%),
    linear-gradient(0deg, rgba(3,4,6,.46), transparent 32%);
}
.performance-engine__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 53%;
  transform: scale(1.025);
  animation: engine-breathe 9s ease-in-out infinite alternate;
}
.performance-engine__scan {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background: linear-gradient(105deg, transparent 35%, rgba(255,126,48,.16) 49%, transparent 61%);
  transform: translateX(-75%);
  animation: engine-scan 7s ease-in-out infinite;
}
@keyframes engine-breathe { to { transform: scale(1.065) translateY(-.7%); } }
@keyframes engine-scan { 0%, 18% { transform: translateX(-75%); } 70%, 100% { transform: translateX(75%); } }
.engine-svg { width: 100%; height: 100%; }
.engine-svg .rod {
  fill: none;
  stroke: #b8bdc5;
  stroke-width: 14;
  stroke-linecap: round;
}
.engine-svg .piston { transform-box: fill-box; transform-origin: center; animation: piston-cycle .8s cubic-bezier(.45,0,.55,1) infinite alternate; }
.engine-svg .piston--2,
.engine-svg .piston--3 { animation-direction: alternate-reverse; }
.engine-svg .combustion { opacity: 0; filter: url(#glow); transform-box: fill-box; transform-origin: center; animation: ignition 1.6s ease-out infinite; }
.engine-svg .combustion--2 { animation-delay: .4s; }
.engine-svg .combustion--4 { animation-delay: .8s; }
.engine-svg .combustion--3 { animation-delay: 1.2s; }
.engine-svg .crank-spin { transform-box: fill-box; transform-origin: center; animation: crank-cycle 1.6s linear infinite; }
.engine-svg .turbo-rotor { animation: turbo-cycle .55s linear infinite; }
.engine-svg .airflow { animation: airflow-cycle 1s linear infinite; }
@keyframes piston-cycle { to { transform: translateY(105px); } }
@keyframes ignition { 0%, 68%, 100% { opacity: 0; transform: scale(.3); } 74% { opacity: 1; transform: scale(1.15); } 86% { opacity: .2; transform: scale(.75); } }
@keyframes crank-cycle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}
@keyframes turbo-cycle { to { transform: rotate(360deg); } }
@keyframes airflow-cycle { to { stroke-dashoffset: -72; } }
.performance-visual figcaption {
  position: absolute;
  z-index: 1;
  left: 24px; right: 24px; bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.performance-visual figcaption span {
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(12,13,16,.76);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 700 .72rem/1 var(--texto);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.performance-visual figcaption span:first-child { border-color: var(--laranja); color: var(--laranja-claro); }
@media (max-width: 620px) {
  .performance-visual { margin-top: 26px; border-radius: 14px; }
  .performance-engine { aspect-ratio: 16 / 10; }
  .performance-visual figcaption { left: 12px; right: 12px; bottom: 12px; gap: 5px; }
  .performance-visual figcaption span { padding: 6px 8px; font-size: 0.62rem; }
  .engine-labels { display: none; }
  .performance-engine__photo { object-position: center; }
}

@media (prefers-reduced-motion: reduce) {
  .performance-engine__photo,
  .performance-engine__scan { animation: none; }
  .engine-svg .piston,
  .engine-svg .combustion,
  .engine-svg .crank-spin,
  .engine-svg .turbo-rotor,
  .engine-svg .airflow { animation: none; }
  .engine-svg .combustion--1 { opacity: .55; }
}

/* =========================================================
   MEC HIGH-PERFORMANCE INTERACTIVE COMPONENTS (2026)
   ========================================================= */

/* --- 1. SIMULADOR DE POTÊNCIA / REMAP PERFORTECH --- */
.simulador-container {
  background: radial-gradient(circle at 50% 0%, rgba(242, 101, 34, .16), transparent 70%),
              linear-gradient(180deg, #121419 0%, #0a0b0d 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(242, 101, 34, .2) inset;
  position: relative;
  overflow: hidden;
}
.simulador-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--laranja), transparent);
}
.simulador-cabeca {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 36px;
}
.simulador-cabeca h3 {
  font-size: clamp(1.35rem, 2.62vw, 1.88rem);
  color: #fff;
  margin-bottom: 10px;
}
.simulador-cabeca p {
  color: var(--cinza-claro);
  font-size: 1rem;
}
.simulador-grade {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.simulador-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(255, 255, 255, .03);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .06);
}
.sim-campo label {
  display: block;
  font-family: var(--texto);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--laranja-legivel);
  margin-bottom: 8px;
}
.sim-select-wrap {
  position: relative;
}
.sim-select-wrap select {
  width: 100%;
  padding: 14px 18px;
  padding-right: 42px;
  background: #16181e;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  color: #fff;
  font-family: var(--texto);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.sim-select-wrap select:focus {
  outline: none;
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(242, 101, 34, .25);
}
.sim-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--laranja);
  font-size: 1.2rem;
  pointer-events: none;
}
.sim-badge-stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(242, 101, 34, .12);
  border: 1px solid rgba(242, 101, 34, .3);
  border-radius: 8px;
  color: var(--laranja-claro);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sim-badge-stage::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 8px #25D366;
}

/* Painel de Telemetria / Resultados */
.simulador-telemetria {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.telemetria-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.telemetria-card {
  background: #15181f;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform var(--trans), border-color var(--trans);
}
.telemetria-card:hover {
  border-color: rgba(242, 101, 34, .4);
}
.telemetria-card__rotulo {
  font-family: var(--texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cinza-claro);
  margin-bottom: 12px;
}
.telemetria-card__valores {
  /* Empilhado: o valor original riscado em cima, o estimado embaixo.
     Lado a lado, "600 Nm" na Korataki não cabia ao lado do original —
     quebrava em duas linhas e o card do torque destoava do de potência. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 10px;
}
.tel-val--orig {
  font-size: 1.1rem;
  color: var(--cinza-claro);
  text-decoration: line-through;
  font-weight: 600;
}
.tel-val--remap {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}

/* Nem no card estreito o valor pode partir no espaço entre número e unidade. */
.tel-val--orig,
.tel-val--remap { white-space: nowrap; }
.tel-ganho {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  color: #25D366;
  background: rgba(37, 211, 102, .12);
  border: 1px solid rgba(37, 211, 102, .25);
  padding: 3px 8px;
  border-radius: 6px;
}
.tel-barra-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  margin-top: 14px;
  overflow: hidden;
}
.tel-barra-fill {
  height: 100%;
  background: linear-gradient(90deg, #F26522, #FF8244);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.telemetria-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 14px 18px;
}
.extra-item span {
  display: block;
  font-size: 0.78rem;
  color: var(--cinza-claro);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.extra-item strong {
  font-size: 0.89rem;
  color: var(--laranja-claro);
  font-family: var(--texto);
}

.simulador-cta {
  margin-top: 10px;
}
.sim-nota {
  color: var(--cinza-claro);
  font-size: 0.78rem;
  line-height: 1.5;
}
.sim-nota a { color: var(--laranja-claro); text-decoration: underline; }
.simulador-cta .btn {
  width: 100%;
  padding-block: 16px;
  font-size: 1.15rem;
  box-shadow: 0 8px 28px rgba(37, 211, 102, .35);
}

@media (max-width: 860px) {
  .simulador-grade { grid-template-columns: 1fr; }
  .telemetria-cards { grid-template-columns: 1fr; }
}

/* --- 2. COMPARADOR INTERATIVO ANTES VS DEPOIS --- */
.comparador-wrapper {
  background: #0f1116;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  padding: clamp(20px, 3.5vw, 36px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
}
.comparador-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  justify-content: center;
}
.comp-aba-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .04);
  color: var(--cinza-claro);
  font-family: var(--texto);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: all var(--trans);
}
.comp-aba-btn:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.comp-aba-btn.ativo {
  /* Laranja escuro no fundo: com o #F26522 o branco ficava em 3,15:1. */
  background: var(--laranja-escuro);
  border-color: var(--laranja-escuro);
  color: #fff;
  box-shadow: 0 4px 14px rgba(242, 101, 34, .4);
}

.comparador-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  user-select: none;
  touch-action: none;
  background: #090a0d;
}
.comp-cenario {
  display: none;
  position: absolute;
  inset: 0;
}
.comp-cenario.ativa {
  display: block;
}
.comparador__antes,
.comparador__depois {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
}
.comparador__antes {
  background: radial-gradient(circle at center, #1b1e26 0%, #0b0c0f 100%);
  color: #a0a6b0;
}
.comparador__depois {
  background: radial-gradient(circle at center, #1a2736 0%, #070e17 100%);
  color: #fff;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.comparador-stage-iluminacao .comparador__depois {
  background: radial-gradient(circle at 50% 60%, rgba(100, 180, 255, .25) 0%, rgba(242, 101, 34, .15) 35%, #080a0f 75%);
}
.comparador-stage-multimidia .comparador__depois {
  background: radial-gradient(circle at center, #111a26 0%, #06090e 100%);
}
.comparador-stage-performance .comparador__depois {
  background: radial-gradient(circle at center, rgba(242, 101, 34, .25) 0%, #0a0b0e 100%);
}

.comp-badge {
  position: absolute;
  top: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--texto);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.comparador__antes .comp-badge {
  left: 18px;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #cbd2dc;
}
.comparador__depois .comp-badge {
  right: 18px;
  background: var(--laranja-escuro);
  color: #fff;
  box-shadow: 0 0 16px rgba(242, 101, 34, .6);
}

.comp-conteudo-visual {
  width: min(42%, 480px);
  z-index: 1;
}
.comparador__antes .comp-conteudo-visual {
  margin-right: auto;
}
.comparador__depois .comp-conteudo-visual {
  margin-left: auto;
}
.comp-conteudo-visual svg {
  margin-inline: auto;
  margin-bottom: 16px;
  width: 58px; height: 58px;
}
.comp-conteudo-visual h3,
.comp-conteudo-visual h4 {
  font-size: clamp(0.98rem, 2.1vw, 1.35rem);
  margin-bottom: 8px;
  color: inherit;
}
.comp-conteudo-visual p {
  font-size: 0.95rem;
  opacity: .85;
}

.comparador__divisor {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--laranja);
  box-shadow: 0 0 12px var(--laranja);
  pointer-events: none;
  z-index: 10;
}
.comparador__divisor-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: #fff;
  border: 3px solid var(--laranja);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--preto);
  font-weight: 900;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .6);
}
.comparador__range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 20;
  touch-action: none;
}
.comparador-stage:has(.comparador__range:focus-visible) .comparador__divisor-handle {
  outline: 3px solid var(--branco);
  outline-offset: 4px;
}

/* --- 3. GUIA INTERATIVO DE UNIDADES --- */
.guia-box {
  background: #121419;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  padding: clamp(24px, 4vw, 42px);
}
.guia-opcoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.guia-card-opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  height: 100%;
  background: #171a22;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  padding: 24px 22px;
  cursor: pointer;
  text-align: left;
  font-family: var(--texto);
  transition: border-color var(--trans), background var(--trans), transform var(--trans), box-shadow var(--trans);
}
.guia-card-opcao:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 4px;
  border-color: var(--laranja);
}
.guia-card-opcao:hover {
  border-color: rgba(242, 101, 34, .4);
  background: #1b1f28;
  transform: translateY(-3px);
}
.guia-card-opcao.selecionado {
  background: rgba(242, 101, 34, .1);
  border-color: var(--laranja);
  box-shadow: 0 0 0 1px rgba(242, 101, 34, .35), 0 14px 30px rgba(0, 0, 0, .35);
}
.guia-card-opcao__icone {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 4px;
  color: var(--laranja);
  background: rgba(242, 101, 34, .09);
  border: 1px solid rgba(242, 101, 34, .18);
  border-radius: 12px;
  transition: background var(--trans), border-color var(--trans);
}
.guia-card-opcao__icone svg { width: 24px; height: 24px; }
.guia-card-opcao.selecionado .guia-card-opcao__icone {
  background: rgba(242, 101, 34, .18);
  border-color: rgba(242, 101, 34, .45);
}
.guia-card-opcao__rotulo {
  font: 800 .68rem/1 var(--texto);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--laranja);
}
.guia-card-opcao h3,
.guia-card-opcao h4 {
  font-size: 0.92rem;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}
.guia-card-opcao p {
  font-size: .875rem;
  color: var(--cinza-claro);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}
.guia-card-opcao__marca {
  position: absolute;
  top: 20px; right: 20px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  color: var(--preto);
  background: var(--laranja);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--trans), transform var(--trans);
}
.guia-card-opcao__marca svg { width: 13px; height: 13px; }
.guia-card-opcao.selecionado .guia-card-opcao__marca {
  opacity: 1;
  transform: scale(1);
}

.guia-resultado-area {
  min-height: 160px;
}
.guia-resultado-card {
  display: none;
  background: #1a1d26;
  border: 1px solid var(--laranja);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
  animation: fadeIn .3s ease-out;
}
.guia-resultado-card.visivel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: center;
}
.guia-resultado-info h3 {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 8px;
}
.guia-resultado-info p {
  color: var(--cinza-claro);
  margin-bottom: 14px;
}
.guia-resultado-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .guia-opcoes { grid-template-columns: 1fr; }
  .guia-card-opcao { padding: 20px; }
  .guia-resultado-card.visivel { grid-template-columns: 1fr; }
}

/* --- 4. BARRA DE AÇÃO RÁPIDA MOBILE (BOTTOM BAR) --- */
.mobile-bottom-bar {
  display: none;
}
@media (max-width: 768px) {
  .mobile-bottom-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: rgba(14, 15, 18, .96);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .12);
    z-index: 999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .5);
  }
  .mobile-bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--cinza-claro);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--texto);
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, .06);
    transition: color var(--trans);
  }
  .mobile-bar-btn:last-child { border-right: none; }
  .mobile-bar-btn svg { width: 20px; height: 20px; }
  .mobile-bar-btn--zap {
    color: #25D366;
    background: rgba(37, 211, 102, .08);
  }
  .mobile-bar-btn--destaque {
    color: var(--laranja-claro);
  }
  body {
    padding-bottom: 64px; /* Evita que o footer fique coberto */
  }
  .zap-flutuante {
    bottom: 76px; /* Sobe o botão flutuante para não cobrir a barra */
  }
}

/* --- 5. SCROLL REVEAL SUAVE & MICRO-INTERAÇÕES --- */
.reveal-ativo [data-reveal] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ativo [data-reveal] { opacity: 1; transform: none; }
  .guia-resultado-card { animation: none; }
}

/* --- 6. GRID DE MARCAS PREMIUM & SUPERESPORTIVOS --- */
.marcas-premium-secao {
  --laranja-legivel: var(--laranja-claro);
  position: relative;
  background: radial-gradient(circle at 50% 30%, rgba(242, 101, 34, .08), transparent 70%), #0c0d11;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding-block: clamp(48px, 8vw, 84px);
  color: var(--branco);
}
.marcas-premium-secao .secao-cabeca h2 { color: var(--branco); }
.marcas-premium-secao .secao-cabeca p { color: #B8BEC8; }
.marcas-supercars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.marca-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 154px;
  padding: 26px 16px 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  text-align: center;
  transition: transform var(--trans), border-color var(--trans), background var(--trans), box-shadow var(--trans);
  color: #c5cad4;
}
.marca-card:hover {
  transform: translateY(-4px);
  background: rgba(242, 101, 34, .08);
  border-color: rgba(242, 101, 34, .5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 20px rgba(242, 101, 34, .25);
  color: #fff;
}
.marca-card__logo {
  height: 62px;
  width: auto;
  max-width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  filter: brightness(0) invert(1) opacity(.88);
  transition: transform var(--trans), filter var(--trans);
}
.marca-card:hover .marca-card__logo {
  transform: scale(1.08);
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 9px rgba(242, 101, 34, .5));
}
.marca-card__logo img,
.marca-card__logo svg {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.marca-icone-generico {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}
.marca-icone-generico text {
  fill: currentColor;
  stroke: none;
  font: 800 16px/1 var(--display);
  letter-spacing: -.04em;
}
.marca-icone-generico--largo { width: 100px; height: 52px; }
.marca-icone-generico--largo text { font-size: 14px; letter-spacing: .02em; }
/* Equalização óptica: símbolos, escudos e assinaturas horizontais têm proporções distintas. */
.marca-card__logo img[src$="/mercedes.svg"] { width: 54px; height: 54px; }
.marca-card__logo img[src$="/bmw.svg"] { width: 52px; height: 52px; }
.marca-card__logo img[src$="/ferrari.svg"],
.marca-card__logo img[src$="/lamborghini.svg"] { width: 46px; height: 54px; }
.marca-card__logo img[src$="/porsche.svg"] { width: 48px; height: 56px; }
.marca-card__logo img[src$="/audi.svg"] { width: 108px; min-width: 108px; height: auto; }
.marca-card__logo img[src$="/land-rover.svg"] { width: 94px; height: 48px; }
.marca-card__logo img[src$="/chrysler.svg"] { width: 108px; height: auto; }
.marca-card__logo img[src$="/ram.svg"] { width: 54px; height: 54px; }
.marca-card__logo img[src$="/volvo.svg"] { width: 54px; height: 54px; }
/* Logos recortados na caixa real do desenho (viewBox apertado), entao aqui a
   medida e a do proprio logo, nao a de um quadrado de 24 com sobra em volta. */
.marca-card__logo img[src$="/chevrolet.svg"] { width: 100px; height: 33px; }
.marca-card__logo img[src$="/jeep.svg"] { width: 96px; height: 39px; }
.marca-card__logo img[src$="/toyota.svg"] { width: 70px; height: 48px; }
.marca-card__logo img[src$="/honda.svg"] { width: 62px; height: 50px; }
.marca-card__logo img[src$="/mitsubishi.svg"] { width: 60px; height: 52px; }
.marca-card__logo img[src$="/volkswagen.svg"] { width: 52px; height: 52px; }
.marca-card__logo img[src$="/fiat.svg"] { width: 68px; height: 42px; }
.marca-card__logo img[src$="/hyundai.svg"] { width: 78px; height: 40px; }
.marca-card__logo img[src$="/ford.svg"] { width: 92px; height: 35px; }
.marca-card__logo img[src$="/renault.svg"] { width: 44px; height: 54px; }
.marca-card h3,
.marca-card h4 {
  /* nome de montadora é palavra longa em caixa alta: na Korataki
     precisa de um passo a menos para caber no card estreito do celular */
  font-size: 0.76rem;
  letter-spacing: .02em;
  margin-bottom: 4px;
  color: inherit;
}
.marca-card span {
  font-size: 0.74rem;
  color: var(--cinza-claro);
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 980px) {
  .marcas-supercars-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .comparador-stage { min-height: 390px; }
  .comparador__antes,
  .comparador__depois { padding: 18px 14px; }
  .comp-conteudo-visual { width: 44%; }
  .comp-conteudo-visual svg { width: 38px; height: 38px; margin-bottom: 10px; }
  .comp-conteudo-visual h4 { font-size: 0.85rem; }
  .comp-conteudo-visual p { font-size: .76rem; line-height: 1.4; }
  .comp-badge { top: 12px; max-width: 44%; font-size: .62rem; line-height: 1.25; }
  .comparador__antes .comp-badge { left: 12px; }
  .comparador__depois .comp-badge { right: 12px; }
  .marcas-supercars-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .marca-card { min-height: 130px; padding: 18px 12px; }
  .marca-card__logo { height: 52px; }
}

/* Refinamento da página Performance: leitura mais curta e mobile sem cortes. */
.pagina-performance .simulador-grade,
.pagina-performance .simulador-form,
.pagina-performance .simulador-telemetria,
.pagina-performance .telemetria-cards,
.pagina-performance .telemetria-card,
.pagina-performance .sim-campo,
.pagina-performance .sim-select-wrap {
  min-width: 0;
}

@media (max-width: 620px) {
  .pagina-performance .hero--performance {
    padding-block: 34px 48px;
  }
  .pagina-performance .hero--performance h1 {
    font-size: clamp(1.4rem, 4vw, 2.35rem);
    line-height: 1.05;
  }
  .pagina-performance .hero--performance .etiqueta {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
  .pagina-performance .performance-visual {
    margin-top: 24px;
  }
  .pagina-performance .performance-visual img {
    aspect-ratio: 16 / 10;
    object-position: 58% center;
  }
  .pagina-performance .performance-visual figcaption { display: none; }
  .pagina-performance .hero__texto {
    margin-top: 22px;
    font-size: 1rem;
    line-height: 1.65;
  }
  .pagina-performance .hero-selos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
  }
  .pagina-performance .hero-selos li { min-width: 0; }

  .pagina-performance .secao { padding-block: 48px; }
  .pagina-performance .marcas-premium-secao { padding-block: 48px; }
  .pagina-performance .marcas-premium-secao .secao-cabeca { margin-bottom: 26px; }
  .pagina-performance .marcas-supercars-grid {
    display: flex;
    gap: 12px;
    margin: 0 -20px;
    padding: 0 20px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .pagina-performance .marca-card {
    flex: 0 0 158px;
    min-height: 142px;
    scroll-snap-align: start;
  }

  .pagina-performance .simulador-container {
    padding: 24px;
    border-radius: 18px;
  }
  .pagina-performance .simulador-cabeca {
    margin-bottom: 24px;
  }
  .pagina-performance .simulador-cabeca h3 {
    font-size: 1.31rem;
  }
  .pagina-performance .simulador-form { padding: 18px; }
  .pagina-performance .sim-select-wrap select {
    min-width: 0;
    font-size: 0.94rem;
    text-overflow: ellipsis;
  }
  .pagina-performance .sim-badge-stage {
    width: 100%;
    font-size: 0.74rem;
    line-height: 1.35;
  }
  .pagina-performance .telemetria-card { padding: 18px; }
  .pagina-performance .telemetria-card__valores { gap: 4px; }
  .pagina-performance .tel-val--remap { font-size: 1.85rem; }
  .pagina-performance .telemetria-extras {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pagina-performance .simulador-cta .btn {
    white-space: normal;
    font-size: 0.95rem;
    line-height: 1.25;
    padding-inline: 16px;
  }

  .pagina-performance .servicos {
    display: flex;
    margin-inline: -20px;
    padding: 0 20px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .pagina-performance .servico {
    flex: 0 0 min(82vw, 320px);
    scroll-snap-align: start;
  }
}

/* Comparação da Performance: painéis estáveis, sem recortar os textos. */
.pagina-performance #comparador .comparador-stage {
  aspect-ratio: auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}
.pagina-performance #comparador .comp-cenario.ativa {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
}
.pagina-performance #comparador .comparador__antes,
.pagina-performance #comparador .comparador__depois {
  position: relative;
  inset: auto;
  min-width: 0;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
.pagina-performance #comparador .comparador__antes {
  border-right: 1px solid var(--laranja);
}
.pagina-performance #comparador .comp-conteudo-visual {
  width: min(100%, 440px);
  margin-inline: auto;
}
.pagina-performance #comparador .comparador__divisor,
.pagina-performance #comparador .comparador__range {
  display: none;
}

@media (max-width: 620px) {
  .pagina-performance #comparador .comp-cenario.ativa {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .pagina-performance #comparador .comparador__antes,
  .pagina-performance #comparador .comparador__depois {
    min-height: 300px;
    padding: 68px 22px 28px;
  }
  .pagina-performance #comparador .comparador__antes {
    border-right: 0;
    border-bottom: 1px solid var(--laranja);
  }
  .pagina-performance #comparador .comp-conteudo-visual {
    width: 100%;
  }
  .pagina-performance #comparador .comp-conteudo-visual h3, .pagina-performance #comparador .comp-conteudo-visual h4 { font-size: 1.06rem; }
  .pagina-performance #comparador .comp-conteudo-visual p { font-size: .9rem; }
  .pagina-performance #comparador .comp-badge { max-width: calc(100% - 24px); }
}

/* Comparadores de acessórios: conteúdo estável em vez de texto recortado. */
.comparador--estatico .comparador-stage {
  aspect-ratio: auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}
.comparador--estatico .comp-cenario.ativa {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
}
.comparador--estatico .comparador__antes,
.comparador--estatico .comparador__depois {
  position: relative;
  inset: auto;
  min-width: 0;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
.comparador--estatico .comparador__antes { border-right: 1px solid var(--laranja); }
.comparador--estatico .comp-conteudo-visual {
  width: min(100%, 440px);
  margin-inline: auto;
}
.comparador--estatico .comparador__divisor,
.comparador--estatico .comparador__range { display: none; }

@media (max-width: 620px) {
  .comparador--estatico .comp-cenario.ativa {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .comparador--estatico .comparador__antes,
  .comparador--estatico .comparador__depois {
    min-height: 280px;
    padding: 68px 22px 28px;
  }
  .comparador--estatico .comparador__antes {
    border-right: 0;
    border-bottom: 1px solid var(--laranja);
  }
  .comparador--estatico .comp-conteudo-visual { width: 100%; }
  .comparador--estatico .comp-conteudo-visual h3, .comparador--estatico .comp-conteudo-visual h4 { font-size: 1.02rem; }
  .comparador--estatico .comp-conteudo-visual p { font-size: .9rem; }
  .comparador--estatico .comp-badge { max-width: calc(100% - 24px); }
}

/* =========================================================
   PÁGINA DEDICADA — NOBRECAR (MEC AUTOPARTES)
   Estética automotiva de alta performance, produtos e acabamento
   ========================================================= */

:root {
  --nobrecar-verde: #63B32F;
  --nobrecar-verde-escuro: #4D9122;
  --nobrecar-verde-claro: #78CC3B;
  --nobrecar-verde-bg: rgba(99, 179, 47, 0.08);
  --nobrecar-verde-borda: rgba(99, 179, 47, 0.28);
}

.hero--nobrecar {
  background:
    radial-gradient(circle at 85% 20%, rgba(99, 179, 47, .24), transparent 42%),
    radial-gradient(circle at 15% 85%, rgba(242, 101, 34, .14), transparent 45%),
    linear-gradient(135deg, #0c0e11 0%, #15181e 60%, #1d222b 100%);
  color: var(--branco);
  padding: 48px 0 64px;
  position: relative;
  overflow: hidden;
}

.hero--nobrecar .migalhas a { color: var(--cinza-claro); }
.hero--nobrecar .migalhas a:hover { color: var(--branco); }
.hero--nobrecar .migalhas span { color: var(--cinza); }

.nobre-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  margin-top: 20px;
}
@media (min-width: 960px) {
  .nobre-hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.nobre-hero__badge-rep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(99, 179, 47, 0.15);
  border: 1px solid var(--nobrecar-verde-borda);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7ee044;
  margin-bottom: 14px;
}
.nobre-hero__badge-rep svg {
  width: 16px;
  height: 16px;
}

.nobre-hero__logo-wrap {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  padding: 10px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.nobre-hero__logo-wrap img {
  height: 32px;
  width: auto;
}

.nobre-hero__card-visual {
  background: linear-gradient(145deg, rgba(36, 39, 46, 0.95), rgba(22, 24, 29, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--raio);
  padding: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}
.nobre-hero__card-visual::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nobrecar-verde), var(--laranja));
}
.nobre-hero__banner-img {
  width: 100%;
  border-radius: 8px;
  object-fit: contain;
  aspect-ratio: 16 / 9;
  background: #fff;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.nobre-hero__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: var(--cinza-claro);
}

.nobre-destaques-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.nobre-destaque-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--raio-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.nobre-destaque-item img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.nobre-destaque-item h2,
.nobre-destaque-item h3,
.nobre-destaque-item h4 {
  /* Selo do hero: virou h2 para não pular nível depois do h1, mas continua
     sendo rótulo — nada da caixa alta em Korataki que o h2 traz. */
  font-family: var(--texto);
  font-size: 0.79rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em !important;
  color: var(--branco);
  margin-bottom: 2px;
}
.nobre-destaque-item p {
  font-size: 0.78rem;
  color: var(--cinza-claro);
  margin: 0;
  line-height: 1.3;
}

/* Barra de Filtros e Busca */
.nobre-catalogo-toolbar {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 28px;
  box-shadow: var(--sombra);
}
.nobre-busca-box {
  position: relative;
  margin-bottom: 16px;
}
.nobre-busca-box input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-family: var(--texto);
  font-size: 0.96rem;
  background: var(--areia);
  transition: border-color var(--trans), background var(--trans);
}
.nobre-busca-box input:focus {
  outline: none;
  border-color: var(--nobrecar-verde);
  background: var(--branco);
}
.nobre-busca-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--cinza);
}
.nobre-filtro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nobre-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--areia);
  color: var(--escuro);
  border: 1px solid var(--linha);
  cursor: pointer;
  transition: all var(--trans);
  user-select: none;
}
.nobre-chip:hover {
  border-color: var(--nobrecar-verde);
  color: var(--nobrecar-verde-escuro);
  background: var(--nobrecar-verde-bg);
}
.nobre-chip.ativo {
  background: var(--nobrecar-verde);
  color: var(--branco);
  border-color: var(--nobrecar-verde);
  box-shadow: 0 2px 8px rgba(99, 179, 47, 0.35);
}
.nobre-chip .chip-count {
  font-size: 0.74rem;
  background: rgba(0,0,0,0.08);
  padding: 1px 6px;
  border-radius: 999px;
}
.nobre-chip.ativo .chip-count {
  background: rgba(255,255,255,0.28);
}

/* Grid de Produtos */
.nobre-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 580px) {
  .nobre-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 920px) {
  .nobre-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .nobre-grid { grid-template-columns: repeat(4, 1fr); }
}

.nobre-card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  position: relative;
}
.nobre-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: var(--nobrecar-verde-borda);
}
.nobre-card__img-wrap {
  aspect-ratio: 1 / 1;
  background: #fdfdfd;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.nobre-card__img-wrap img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.nobre-card:hover .nobre-card__img-wrap img {
  transform: scale(1.06);
}
.nobre-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(14, 15, 18, 0.88);
  backdrop-filter: blur(4px);
  color: #8be84e;
  font-family: var(--texto);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}
.nobre-card__corpo {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nobre-card__cat {
  font-family: var(--texto);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nobrecar-verde-escuro);
  margin-bottom: 6px;
}
.nobre-card h3 {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--escuro);
  margin-bottom: 8px;
}
.nobre-card p {
  font-size: 0.88rem;
  color: var(--cinza);
  line-height: 1.45;
  flex: 1;
  margin-bottom: 14px;
}
.nobre-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  background: #25D366;
  color: var(--branco);
  transition: background var(--trans), transform var(--trans);
}
.nobre-card__cta:hover {
  background: #1eb857;
  color: var(--branco);
  transform: translateY(-1px);
}
.nobre-card__cta svg {
  width: 16px;
  height: 16px;
}

/* Seção de Destaques / Vitrines Especiais */
.nobre-destaques-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 28px;
}
@media (min-width: 840px) {
  .nobre-destaques-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.nobre-destaque-card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}
.nobre-destaque-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #fff;
  padding: 18px;
}
.nobre-destaque-card__content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nobre-destaque-card__content h3 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}
.nobre-destaque-card__content p {
  font-size: 0.92rem;
  color: var(--cinza);
  margin-bottom: 16px;
  flex: 1;
}

/* FAQ Nobrecar */
.nobre-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .nobre-faq-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.nobre-faq-item {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  padding: 18px 20px;
}
.nobre-faq-item h3,
.nobre-faq-item h4 {
  font-size: 0.87rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--escuro);
}
.nobre-faq-item p {
  font-size: 0.9rem;
  color: var(--cinza);
  line-height: 1.55;
}

/* ---------- seletor de WhatsApp por unidade ---------- */
.zap-seletor {
  width: min(92vw, 620px); max-height: 90vh; margin: auto; padding: 28px;
  border: 0; border-radius: var(--raio); background: var(--branco); color: var(--escuro);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}
.zap-seletor::backdrop { background: rgba(8, 9, 11, .72); backdrop-filter: blur(4px); }
.zap-seletor__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.zap-seletor__cabeca h2 { margin-top: 12px; font-size: clamp(1.24rem, 3vw, 1.61rem); }
.zap-seletor__fechar {
  width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center;
  border: 1px solid var(--linha); border-radius: 50%; background: var(--areia); color: var(--escuro);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.zap-seletor__fechar:hover { border-color: var(--laranja); color: var(--laranja); }
.zap-seletor__intro { margin: 8px 0 20px; color: var(--cinza); }
.zap-seletor__opcoes { display: grid; gap: 12px; }
.zap-seletor__opcoes a {
  display: grid; gap: 4px; padding: 18px 20px;
  border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--branco);
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.zap-seletor__opcoes a:hover { border-color: #25D366; transform: translateY(-2px); box-shadow: var(--sombra); }
.zap-seletor__opcoes strong { font-family: var(--texto); font-size: 0.92rem; }
.zap-seletor__opcoes span { color: var(--cinza); }
.zap-seletor__opcoes small { color: #0F7A3D; font-weight: 700; }
@media (max-width: 520px) {
  .zap-seletor { padding: 22px 18px; }
  .zap-seletor__opcoes a { padding: 15px 16px; }
}

/* =========================================================
   PÁGINA DEDICADA — FAAFTECH (MEC AUTOPARTES)
   Soluções Automotivas Inteligentes & Performance
   ========================================================= */

:root {
  --faaftech-azul: #0077F4;
  --faaftech-azul-escuro: #0056B3;
  --faaftech-azul-claro: #38BDF8;
  --faaftech-azul-bg: rgba(0, 119, 244, 0.08);
  --faaftech-azul-borda: rgba(0, 119, 244, 0.28);
}

.hero--faaftech {
  background:
    radial-gradient(circle at 85% 20%, rgba(0, 119, 244, .28), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(242, 101, 34, .16), transparent 45%),
    linear-gradient(135deg, #070a10 0%, #0f1624 55%, #182338 100%);
  color: var(--branco);
  padding: 48px 0 64px;
  position: relative;
  overflow: hidden;
}

.hero--faaftech .migalhas a { color: var(--cinza-claro); }
.hero--faaftech .migalhas a:hover { color: var(--branco); }
.hero--faaftech .migalhas span { color: var(--cinza); }

.faaftech-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  margin-top: 20px;
}
@media (min-width: 960px) {
  .faaftech-hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.faaftech-hero__badge-rep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 119, 244, 0.15);
  border: 1px solid var(--faaftech-azul-borda);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 14px;
}
.faaftech-hero__badge-rep svg {
  width: 16px;
  height: 16px;
}

.faaftech-hero__logo-wrap {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  padding: 10px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.faaftech-hero__logo-wrap img {
  height: 34px;
  width: auto;
}

.faaftech-hero__card-visual {
  background: linear-gradient(145deg, rgba(21, 30, 48, 0.95), rgba(11, 17, 28, 0.95));
  border: 1px solid rgba(0, 119, 244, 0.3);
  border-radius: var(--raio);
  padding: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.faaftech-hero__card-visual::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--faaftech-azul), var(--laranja));
}
.faaftech-hero__banner-img {
  width: 100%;
  border-radius: 8px;
  object-fit: contain;
  aspect-ratio: 16 / 9;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.3) 100%), #0c121e;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.faaftech-hero__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: var(--cinza-claro);
}

.faaftech-destaques-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.faaftech-destaque-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--raio-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.faaftech-destaque-item .icone-box {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0, 119, 244, 0.15);
  border: 1px solid rgba(0, 119, 244, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  flex-shrink: 0;
}
.faaftech-destaque-item .icone-box svg {
  width: 22px;
  height: 22px;
}
.faaftech-destaque-item h2,
.faaftech-destaque-item h3,
.faaftech-destaque-item h4 {
  /* Selo do hero: virou h2 para não pular nível depois do h1, mas continua
     sendo rótulo — nada da caixa alta em Korataki que o h2 traz. */
  font-family: var(--texto);
  font-size: 0.79rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em !important;
  color: var(--branco);
  margin-bottom: 2px;
}
.faaftech-destaque-item p {
  font-size: 0.78rem;
  color: var(--cinza-claro);
  margin: 0;
  line-height: 1.3;
}

/* Barra de Filtros e Busca Faaftech */
.faaftech-catalogo-toolbar {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 28px;
  box-shadow: var(--sombra);
}
.faaftech-busca-box {
  position: relative;
  margin-bottom: 16px;
}
.faaftech-busca-box input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-family: var(--texto);
  font-size: 0.96rem;
  background: var(--areia);
  transition: border-color var(--trans), background var(--trans);
}
.faaftech-busca-box input:focus {
  outline: none;
  border-color: var(--faaftech-azul);
  background: var(--branco);
}
.faaftech-busca-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--cinza);
}
.faaftech-filtro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.faaftech-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--areia);
  color: var(--escuro);
  border: 1px solid var(--linha);
  cursor: pointer;
  transition: all var(--trans);
  user-select: none;
}
.faaftech-chip:hover {
  border-color: var(--faaftech-azul);
  color: var(--faaftech-azul-escuro);
  background: var(--faaftech-azul-bg);
}
.faaftech-chip:focus-visible,
.faaftech-busca-box input:focus-visible {
  outline: 3px solid rgba(0, 119, 244, 0.3);
  outline-offset: 2px;
}
.faaftech-chip.ativo {
  background: var(--faaftech-azul);
  color: var(--branco);
  border-color: var(--faaftech-azul);
  box-shadow: 0 2px 8px rgba(0, 119, 244, 0.35);
}
.faaftech-chip .chip-count {
  font-size: 0.74rem;
  background: rgba(0,0,0,0.08);
  padding: 1px 6px;
  border-radius: 999px;
}
.faaftech-chip.ativo .chip-count {
  background: rgba(255,255,255,0.28);
}

/* Grid de Produtos Faaftech */
.faaftech-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 580px) {
  .faaftech-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 920px) {
  .faaftech-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .faaftech-grid { grid-template-columns: repeat(4, 1fr); }
}

.faaftech-card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  position: relative;
}
.faaftech-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: var(--faaftech-azul-borda);
}
.faaftech-card__img-wrap {
  aspect-ratio: 1 / 1;
  background: #fdfdfd;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.faaftech-card__img-wrap img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.faaftech-card:hover .faaftech-card__img-wrap img {
  transform: scale(1.06);
}
.faaftech-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(14, 20, 32, 0.90);
  backdrop-filter: blur(4px);
  color: #38bdf8;
  font-family: var(--texto);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}
.faaftech-card__corpo {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.faaftech-card__cat {
  font-family: var(--texto);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faaftech-azul-escuro);
  margin-bottom: 6px;
}
.faaftech-card h3 {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--escuro);
  margin-bottom: 8px;
}
.faaftech-card p {
  font-size: 0.88rem;
  color: var(--cinza);
  line-height: 1.45;
  flex: 1;
  margin-bottom: 14px;
}
.faaftech-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  background: #25D366;
  /* Tinta escura no verde do WhatsApp: o branco dava 1,98:1. */
  color: #082313;
  transition: background var(--trans), transform var(--trans);
  cursor: pointer;
}
.faaftech-card__cta:hover {
  background: #1eb857;
  color: var(--branco);
  transform: translateY(-1px);
}
.faaftech-card__cta svg {
  width: 16px;
  height: 16px;
}

/* Seção de Destaques Faaftech */
.faaftech-destaques-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 28px;
}
@media (min-width: 840px) {
  .faaftech-destaques-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.faaftech-destaque-card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}
.faaftech-destaque-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #0f1624;
  padding: 18px;
}
.faaftech-destaque-card__content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.faaftech-destaque-card__content h3 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}
.faaftech-destaque-card__content p {
  font-size: 0.92rem;
  color: var(--cinza);
  margin-bottom: 16px;
  flex: 1;
}

/* Montadoras compatíveis pills */
.faaftech-montadoras-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.faaftech-montadora-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--escuro);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* =========================================================
   ESTILOS GERAIS DE CATÁLOGOS & MARCAS AUTORIZADAS (2026)
   Engates Brucke, Fiamon, Motobul, Projecar, Personal Estribos
   ========================================================= */

:root {
  --brucke-vermelho: #e53e3e;
  --fiamon-azul: #004b93;
  --motobul-vermelho: #e50914;
  --projecar-azul: #0284c7;
  --personal-verde: #16a34a;
}

/* Heros das Marcas */
.hero--brucke {
  background:
    radial-gradient(circle at 85% 20%, rgba(229, 62, 62, .24), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(242, 101, 34, .14), transparent 45%),
    linear-gradient(135deg, #0a0808 0%, #171113 55%, #241416 100%);
  color: var(--branco);
  padding: 48px 0 64px;
  position: relative;
  overflow: hidden;
}

.hero--fiamon {
  background:
    radial-gradient(circle at 85% 20%, rgba(0, 75, 147, .32), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(2, 132, 199, .18), transparent 45%),
    linear-gradient(135deg, #050b14 0%, #0d1a2d 55%, #13243d 100%);
  color: var(--branco);
  padding: 48px 0 64px;
  position: relative;
  overflow: hidden;
}

.hero--motobul {
  background:
    radial-gradient(circle at 85% 20%, rgba(229, 9, 20, .26), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(242, 101, 34, .14), transparent 45%),
    linear-gradient(135deg, #09090b 0%, #151012 55%, #201315 100%);
  color: var(--branco);
  padding: 48px 0 64px;
  position: relative;
  overflow: hidden;
}

.hero--projecar {
  background:
    radial-gradient(circle at 85% 20%, rgba(2, 132, 199, .28), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(14, 116, 144, .18), transparent 45%),
    linear-gradient(135deg, #060d16 0%, #0e1d2e 55%, #18283b 100%);
  color: var(--branco);
  padding: 48px 0 64px;
  position: relative;
  overflow: hidden;
}

.hero--personal {
  background:
    radial-gradient(circle at 85% 20%, rgba(22, 163, 74, .25), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(13, 148, 136, .16), transparent 45%),
    linear-gradient(135deg, #060e0a 0%, #0e1f16 55%, #162c20 100%);
  color: var(--branco);
  padding: 48px 0 64px;
  position: relative;
  overflow: hidden;
}

.brand-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  margin-top: 20px;
}
@media (min-width: 960px) {
  .brand-hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.brand-hero__badge-rep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  border: 1px solid;
}
.brand-hero__badge-rep svg {
  width: 16px;
  height: 16px;
}

.brand-hero__logo-wrap {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  padding: 10px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.brand-hero__logo-wrap img {
  max-height: 45px;
  width: auto;
  object-fit: contain;
}

.brand-hero h1,
.brand-hero__titulo {
  /* Teto e piso menores que os dos outros H1: aqui o título divide o hero
     com o card da marca, e na Korataki as frases longas viravam um
     paredão — cinco linhas no desktop, seis ou sete no celular. O piso
     de 1,2rem tira uma linha inteira em fiamon, projecar, faaftech,
     motobul e perfect. */
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.1;
  margin-bottom: 16px;
}

/* O respiro do celular precisa vir depois da regra acima: media query não
   soma especificidade, e as duas casam com a mesma força. */
@media (max-width: 760px) {
  .brand-hero h1,
  .brand-hero__titulo { line-height: 1.22; }
}

.brand-hero__card-visual {
  background: linear-gradient(145deg, rgba(20, 24, 33, 0.95), rgba(11, 14, 20, 0.95));
  border: 1px solid;
  border-radius: var(--raio);
  padding: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.brand-hero__banner-img {
  width: 100%;
  border-radius: 8px;
  object-fit: contain;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.3) 100%), #0c121e;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* Marca sem arquivo de logo: no lugar da imagem quebrada, a assinatura
   tipográfica. Mesma caixa, mesma proporção. */
.brand-hero__logo-wrap--texto { background: rgba(255, 255, 255, 0.95); }
.brand-hero__logo-texto {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--preto);
  line-height: 1;
}
.brand-hero__banner-texto {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.3) 100%), #0c121e;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.brand-hero__banner-texto span {
  font-family: var(--display);
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.brand-hero__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: var(--cinza-claro);
}

.brand-destaques-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.brand-destaque-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--raio-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-destaque-item .icone-box {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid;
}
.brand-destaque-item .icone-box svg {
  width: 22px;
  height: 22px;
}
.brand-destaque-item h2,
.brand-destaque-item h3,
.brand-destaque-item h4 {
  /* Selo do hero: virou h2 para não pular nível depois do h1, mas continua
     sendo rótulo — nada da caixa alta em Korataki que o h2 traz. */
  font-family: var(--texto);
  font-size: 0.79rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em !important;
  color: var(--branco);
  margin-bottom: 2px;
}
.brand-destaque-item p {
  font-size: 0.78rem;
  color: var(--cinza-claro);
  margin: 0;
  line-height: 1.3;
}

.brand-destaques-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 28px;
}
@media (min-width: 840px) {
  .brand-destaques-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.brand-destaque-card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.brand-destaque-card h3 {
  font-size: 1.06rem;
  margin: 6px 0 10px;
}
.brand-destaque-card p {
  font-size: 0.94rem;
  color: var(--cinza);
  margin-bottom: 18px;
  flex: 1;
  line-height: 1.55;
}

/* Toolbar de Catálogo Universal */
.catalogo-toolbar {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 28px;
  box-shadow: var(--sombra);
}
.catalogo-busca-box {
  position: relative;
  margin-bottom: 16px;
}
.catalogo-busca-box input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-family: var(--texto);
  font-size: 0.96rem;
  background: var(--areia);
  transition: border-color var(--trans), background var(--trans);
}
.catalogo-busca-box input:focus {
  outline: none;
  border-color: var(--laranja);
  background: var(--branco);
}
.catalogo-busca-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--cinza);
}
.catalogo-filtro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.catalogo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--areia);
  color: var(--escuro);
  border: 1px solid var(--linha);
  cursor: pointer;
  transition: all var(--trans);
  user-select: none;
}
.catalogo-chip:hover {
  border-color: var(--laranja);
  color: var(--laranja-escuro);
  background: rgba(242, 101, 34, 0.08);
}
.catalogo-chip.ativo {
  background: var(--escuro);
  color: var(--branco);
  border-color: var(--escuro);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.catalogo-chip .chip-count {
  font-size: 0.74rem;
  background: rgba(0,0,0,0.08);
  padding: 1px 6px;
  border-radius: 999px;
}
.catalogo-chip.ativo .chip-count {
  background: rgba(255,255,255,0.25);
}

/* Grid Universal de Cards de Produtos */
.catalogo-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 580px) {
  .catalogo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 920px) {
  .catalogo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .catalogo-grid { grid-template-columns: repeat(4, 1fr); }
}

.catalogo-card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  position: relative;
}
.catalogo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: rgba(242, 101, 34, 0.35);
}
.catalogo-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(242, 101, 34, 0.12);
  color: var(--laranja-legivel);
  border: 1px solid rgba(242, 101, 34, 0.25);
  backdrop-filter: blur(4px);
}
.catalogo-card__img-wrap {
  aspect-ratio: 4 / 3;
  background: #fbfbfb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.catalogo-card__img-wrap img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.catalogo-card:hover .catalogo-card__img-wrap img {
  transform: scale(1.06);
}
.catalogo-card__corpo {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.catalogo-card__marca {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.catalogo-card h3 {
  font-size: 0.89rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--escuro);
  margin-bottom: 6px;
}
.catalogo-card__veiculo {
  font-size: 0.84rem;
  color: var(--cinza);
  margin-bottom: 10px;
  line-height: 1.45;
}
.catalogo-card__specs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78rem;
  color: var(--cinza);
  margin-bottom: 14px;
  margin-top: auto;
}
.catalogo-card__specs span {
  display: inline-flex;
  align-items: center;
}
.catalogo-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  background: #25D366;
  /* Tinta escura no verde do WhatsApp: o branco dava 1,98:1. */
  color: #082313;
  transition: background var(--trans), transform var(--trans);
  cursor: pointer;
}
.catalogo-card__cta:hover {
  background: #1eb857;
  color: #082313;
  transform: translateY(-1px);
}
.catalogo-card__cta svg {
  width: 16px;
  height: 16px;
}

/* Catálogo central — busca unificada de todas as marcas */
.catalogo-geral-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--branco);
  padding: 42px 0 68px;
  background:
    radial-gradient(circle at 85% 20%, rgba(242, 101, 34, .28), transparent 42%),
    radial-gradient(circle at 10% 100%, rgba(0, 119, 244, .18), transparent 38%),
    linear-gradient(135deg, #07090d, #111827 58%, #1f2937);
}
.catalogo-geral-hero::before {
  content: "";
  position: absolute;
  top: 8%;
  right: -18%;
  width: min(1180px, 92vw);
  aspect-ratio: 1718 / 350;
  background: url("../img/bandeira-mec-preto.png") center / contain no-repeat;
  opacity: 0.085;
  filter: invert(1);
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 680px) {
  .catalogo-geral-hero::before {
    top: 18%;
    right: -42%;
    width: 150vw;
    opacity: 0.065;
  }
}
.catalogo-geral-hero .migalhas a { color: #cbd5e1; }
.catalogo-geral-hero .migalhas span { color: #94a3b8; }
.catalogo-geral-hero__conteudo { max-width: 780px; margin-top: 36px; }
.catalogo-geral-hero__conteudo h1 {
  max-width: 720px;
  margin: 12px 0 18px;
  font-size: clamp(1.4rem, 3.2vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.catalogo-geral-hero__conteudo p {
  max-width: 680px;
  margin-bottom: 28px;
  color: #dbe4ef;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
}
.catalogo-marcas-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.catalogo-marca-resumo {
  display: flex;
  min-height: 92px;
  padding: 18px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--escuro);
  text-align: left;
  cursor: pointer;
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.catalogo-marca-resumo:hover,
.catalogo-marca-resumo:focus-visible {
  transform: translateY(-3px);
  border-color: var(--laranja);
  box-shadow: var(--sombra);
  outline: none;
}
.catalogo-marca-resumo strong { font-family: var(--texto); font-size: 0.85rem; }
.catalogo-marca-resumo span { color: var(--cinza); font-size: .82rem; }
/* --- MEU CARRO: o visitante diz o carro e o catalogo se ajusta --- */
.meu-carro {
  margin-bottom: 16px;
  padding: 16px 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: linear-gradient(180deg, #fff, var(--areia));
  box-shadow: var(--sombra);
}
.meu-carro__convite,
.meu-carro__ativo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* display na classe vence o atributo hidden: sem isto os tres estados
   aparecem juntos. */
.meu-carro__convite[hidden],
.meu-carro__form[hidden],
.meu-carro__ativo[hidden] { display: none; }
.meu-carro__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  color: var(--laranja);
  background: rgba(242, 101, 34, .09);
  border: 1px solid rgba(242, 101, 34, .18);
  border-radius: 12px;
}
.meu-carro__icone svg { width: 24px; height: 24px; }
.meu-carro__texto { display: flex; flex-direction: column; flex: 1; min-width: 210px; gap: 2px; }
.meu-carro__texto strong { color: var(--escuro); font-size: 1rem; }
.meu-carro__texto span { color: var(--cinza); font-size: .86rem; }
.meu-carro__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
}
.meu-carro__campo { display: flex; flex-direction: column; gap: 7px; }
.meu-carro__campo label {
  color: var(--escuro);
  font-family: var(--texto);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.meu-carro__campo select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--branco);
  color: var(--escuro);
  font: inherit;
}
.meu-carro__campo select:disabled { color: var(--cinza); background: var(--areia); cursor: not-allowed; }
.meu-carro__campo select:focus {
  border-color: var(--laranja);
  outline: 3px solid rgba(242, 101, 34, .16);
}
.meu-carro__acoes { display: flex; align-items: center; gap: 12px; }
.meu-carro__link {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--cinza);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.meu-carro__link:hover { color: var(--laranja-escuro); }
.meu-carro__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--laranja);
  border-radius: 999px;
  background: rgba(242, 101, 34, .08);
  color: var(--laranja-escuro);
}
.meu-carro__chip svg { width: 18px; height: 18px; }
.meu-carro__chip strong { font-size: .95rem; }
.meu-carro__opcao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--escuro);
  font-size: .9rem;
  cursor: pointer;
}
.meu-carro__opcao input { width: 17px; height: 17px; accent-color: var(--laranja); cursor: pointer; }
.meu-carro__resumo { flex: 1; min-width: 180px; color: var(--cinza); font-size: .84rem; }

.catalogo-geral-card { position: relative; }
.catalogo-geral-card__selo {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  max-width: calc(100% - 24px);
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--texto);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.catalogo-geral-card__selo--serve { background: #0f7a3d; color: #fff; }
.catalogo-geral-card__selo--talvez { background: #8a5a00; color: #fff; }
.catalogo-geral-card__selo--nao { background: var(--grafite); color: #fff; }
.catalogo-geral-card[data-compatibilidade="nao"] { opacity: .55; }
.catalogo-geral-card[data-compatibilidade="serve"] { border-color: rgba(15, 122, 61, .45); }

@media (min-width: 720px) {
  .meu-carro__form { grid-template-columns: 1.1fr 1.4fr .7fr auto; }
}

.catalogo-geral-filtros {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra);
}
.catalogo-geral-campo { display: flex; flex-direction: column; gap: 7px; }
.catalogo-geral-campo label {
  color: var(--escuro);
  font-family: var(--texto);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.catalogo-geral-campo input,
.catalogo-geral-campo select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--areia);
  color: var(--escuro);
  font: inherit;
}
.catalogo-geral-campo input:focus,
.catalogo-geral-campo select:focus {
  border-color: var(--laranja);
  outline: 3px solid rgba(242, 101, 34, .16);
  background: var(--branco);
}
.catalogo-geral-limpar {
  align-self: end;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: transparent;
  color: var(--escuro);
  font-weight: 700;
  cursor: pointer;
}
.catalogo-geral-limpar:hover { border-color: var(--laranja); color: var(--laranja-escuro); }
.catalogo-geral-resultado {
  display: flex;
  margin: 20px 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--cinza);
  font-size: 0.86rem;
}
.catalogo-geral-resultado p { color: var(--escuro); font-weight: 700; }
.catalogo-geral-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.catalogo-geral-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.catalogo-geral-card:hover { transform: translateY(-3px); border-color: rgba(242,101,34,.4); box-shadow: var(--sombra); }
.catalogo-geral-card__imagem {
  display: grid;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  padding: 16px;
  border-bottom: 1px solid var(--linha);
  background: #fafafa;
}
.catalogo-geral-card__imagem img { width: 100%; height: 100%; object-fit: contain; }
.catalogo-geral-card__corpo { display: flex; flex: 1; padding: 17px; flex-direction: column; }
.catalogo-geral-card__marca {
  color: var(--laranja-escuro);
  font-family: var(--texto);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.catalogo-geral-card__categoria { margin: 3px 0 9px; color: var(--cinza); font-size: .76rem; }
/* Nome do produto: é um h2 por semântica, mas com 14px de corpo — tamanho
   de interface, não de título. Na Korataki quebrava em duas linhas. */
.catalogo-geral-card h2 {
  margin-bottom: 9px;
  font-family: var(--texto);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}
.catalogo-geral-card__descricao {
  overflow: hidden;
  display: -webkit-box;
  margin-bottom: 14px;
  color: var(--cinza);
  font-size: 0.86rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.catalogo-geral-card__unidades { margin-top: auto; color: var(--cinza); font-size: 0.76rem; }
.catalogo-geral-card__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.catalogo-geral-card__detalhes,
.catalogo-geral-card__whatsapp {
  display: inline-flex;
  min-height: 40px;
  padding: 8px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 0.77rem;
  font-weight: 700;
  text-align: center;
}
.catalogo-geral-card__detalhes { border: 1px solid var(--linha); color: var(--escuro); }
.catalogo-geral-card__whatsapp { background: #25d366; color: #082313; }
.catalogo-geral-card__detalhes:hover { border-color: var(--laranja); color: var(--laranja-escuro); }
.catalogo-geral-card__whatsapp:hover { background: #1eb857; color: #082313; }
.catalogo-geral-vazio { padding: 48px 20px; border-radius: var(--raio); background: var(--areia); text-align: center; }
.catalogo-geral-vazio p { margin: 8px 0 20px; color: var(--cinza); }
.catalogo-geral-mais { padding-top: 28px; text-align: center; }
@media (min-width: 700px) {
  .catalogo-geral-filtros { grid-template-columns: minmax(240px, 2fr) 1fr 1fr auto; }
  .catalogo-geral-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1020px) {
  .catalogo-geral-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .catalogo-geral-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================
   Seção de Vídeos & Reels do Instagram (@mecautopartes)
   ========================================================= */
.secao--videos {
  --laranja-legivel: var(--laranja-claro);
  background: #0b0d11;
  color: var(--branco);
  padding-block: clamp(56px, 8vw, 90px);
  position: relative;
  overflow: hidden;
}
.secao--videos .secao-cabeca h2 {
  color: #ffffff;
}
.secao--videos .secao-cabeca p {
  color: #9ba1aa;
}
.carrossel--videos {
  position: relative;
  margin-top: 32px;
}
.carrossel__trilha--videos {
  display: flex;
  gap: 22px;
  scroll-snap-type: x mandatory;
  padding-block: 8px 16px;
}
.carrossel__trilha--videos .video-card {
  flex: 0 0 320px;
  max-width: 320px;
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 600px) {
  .carrossel__trilha--videos .video-card {
    flex: 0 0 85%;
    max-width: 85%;
  }
}
.video-card:hover {
  transform: translateY(-5px);
  border-color: rgba(242, 101, 34, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}
.video-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  overflow: hidden;
}
.video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.video-card:hover .video-card__media img {
  transform: scale(1.06);
}
.video-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--trans);
}
.video-card:hover .video-card__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%);
}
.video-card__play {
  width: 52px;
  height: 52px;
  background: rgba(242, 101, 34, 0.92);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 24px rgba(242, 101, 34, 0.6);
  transition: transform var(--trans), background var(--trans);
}
.video-card:hover .video-card__play {
  transform: scale(1.15);
  background: #ff7836;
}
.video-card__play svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}
.video-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(10, 12, 16, 0.85);
  backdrop-filter: blur(4px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
}
.video-card__badge--laranja { border-color: rgba(242, 101, 34, 0.6); color: #ff9b50; }
.video-card__badge--azul { border-color: rgba(56, 189, 248, 0.6); color: #38bdf8; }
.video-card__badge--verde { border-color: rgba(34, 197, 94, 0.6); color: #4ade80; }

.video-card__corpo {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.video-card__unidade {
  font-size: 0.76rem;
  /* Card escuro: o --cinza dava 3,6:1 contra o fundo. */
  color: var(--cinza-claro);
  margin-bottom: 6px;
  display: block;
}
.video-card h3 {
  font-size: 0.88rem;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 8px;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card p {
  font-size: 0.84rem;
  color: var(--cinza-claro);
  line-height: 1.45;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--laranja);
  transition: color var(--trans), gap var(--trans);
}
.video-card__link:hover {
  color: #ff8c42;
  gap: 12px;
}
.video-card__link svg {
  width: 16px;
  height: 16px;
}
.videos-rodape-acoes {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.videos-rodape-acoes .btn {
  gap: 10px;
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.videos-rodape-acoes .btn:hover {
  border-color: var(--laranja);
  color: var(--laranja);
}

.video-modal {
  width: min(94vw, 540px);
  max-width: none;
  height: min(92dvh, 820px);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #0b0d11;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
}
.video-modal::backdrop {
  background: rgba(2, 4, 8, 0.88);
  backdrop-filter: blur(5px);
}
.video-modal__corpo { position: relative; width: 100%; height: 100%; }
.video-modal__frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.video-modal__fechar {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(8, 10, 14, 0.88);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.video-modal__fechar:hover,
.video-modal__fechar:focus-visible { background: var(--laranja); outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) {
  .video-modal { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* =============================================================
   LINHAS ATENDIDAS — página MEC Performance
   Três painéis + nota editorial. Sem caixa pesada: o desenho é
   feito de filete, numeral e espaço, que é o que dá requinte num
   fundo escuro. Caixa cheia aqui competiria com os cards de marca
   logo acima.
   ============================================================= */
.linhas-atendidas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 46px;
}
.linha-atendida {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 34px 38px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  transition: background var(--trans);
}
/* Filete vertical só entre os painéis, nunca na borda externa. */
.linha-atendida + .linha-atendida { border-left: 1px solid rgba(255, 255, 255, .09); }
/* O traço laranja cresce da esquerda: some no repouso, assume no hover. */
.linha-atendida::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--laranja);
  transition: width 420ms cubic-bezier(.4, 0, .2, 1);
}
.linha-atendida:hover { background: rgba(255, 255, 255, .022); }
.linha-atendida:hover::after { width: 100%; }

.linha-atendida__num {
  display: block;
  font-family: var(--texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--laranja-legivel);
  margin-bottom: 16px;
}
.linha-atendida h3 {
  font-size: 0.99rem;
  letter-spacing: .01em;
  line-height: 1.18;
  /* Duas linhas reservadas: com um titulo curto e outro longo lado a lado,
     sem isto os chips de cada painel comecam em alturas diferentes. */
  min-height: calc(1.16rem * 1.18 * 2);
  margin-bottom: 20px;
  color: var(--branco);
}
.linha-atendida__modelos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-content: flex-start;
  /* Cresce para ocupar a sobra, de modo que as tres prosas fiquem ancoradas
     na mesma linha de base mesmo com quantidades diferentes de chip. */
  flex: 1 0 auto;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.linha-atendida__modelos li {
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #c5cad4;
  white-space: nowrap;
  transition: border-color var(--trans), color var(--trans);
}
.linha-atendida:hover .linha-atendida__modelos li {
  border-color: rgba(242, 101, 34, .42);
  color: #fff;
}
.linha-atendida p {
  font-size: .93rem;
  line-height: 1.68;
  color: var(--cinza-claro);
  margin: 0;
}

/* ---- nota editorial ---- */
.linhas-nota {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 48px;
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.linhas-nota__selo {
  display: inline-block;
  font-family: var(--texto);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--laranja-legivel);
  margin-bottom: 14px;
}
.linhas-nota__titulo h3 {
  font-size: clamp(1.01rem, 1.8vw, 1.39rem);
  line-height: 1.1;
  color: var(--branco);
}
.linhas-nota__texto p {
  font-size: 1rem;
  line-height: 1.76;
  color: var(--cinza-claro);
  margin: 0 0 16px;
}
.linhas-nota__texto p:last-child { margin-bottom: 0; }

/* ---- assinatura de endereço ---- */
.linhas-endereco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cinza);
}
.linhas-endereco a {
  color: var(--laranja);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 101, 34, .35);
  padding-bottom: 2px;
  transition: border-color var(--trans);
}
.linhas-endereco a:hover { border-color: var(--laranja); }

@media (max-width: 980px) {
  .linhas-atendidas { grid-template-columns: 1fr; }
  .linha-atendida + .linha-atendida { border-left: 0; }
  .linha-atendida { padding: 30px 0 34px; }
  .linhas-nota { grid-template-columns: 1fr; gap: 24px; }
}

/* Títulos principais: escala mais contida e maior respiro tipográfico. */
.hero h1.hero-titulo-ajustado,
.catalogo-geral-hero__conteudo h1.hero-titulo-ajustado {
  font-size: clamp(0.91rem, 2.08vw, 1.5275rem);
  line-height: 1.28;
  letter-spacing: 0.10em;
  font-style: italic;
}
.hero h1.hero-titulo-ajustado em { font-style: italic; }
.hero--loja h1.hero-titulo-ajustado {
  font-size: clamp(1.0075rem, 2.34vw, 1.69rem);
}
.hero--interna h1.hero-titulo-ajustado {
  font-size: clamp(1.0725rem, 2.47vw, 1.625rem);
}

/* Botão "ver mais" do catálogo de marca: criado pelo JS depois da grade. */
.catalogo-ver-mais {
  display: flex;
  margin: 26px auto 0;
  border: 2px solid var(--laranja);
  color: var(--laranja-legivel);
  background: none;
}
.catalogo-ver-mais:hover { background: var(--laranja); color: var(--preto); }
/* `display` de autor vence o `[hidden]` do navegador: sem isto o botão
   continuava na tela depois do último "ver mais". */
.catalogo-ver-mais[hidden] { display: none; }
@media (max-width: 620px) {
  .catalogo-ver-mais { width: 100%; }
}

/* Link dentro de texto corrido precisa de mais que a cor para se
   distinguir: quem não separa laranja de cinza não vê que é link. */
p a:not(.btn):not([class*="__link"]):not([class*="link-texto"]) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* Ritmo tipográfico comum para títulos e etiquetas de seção. */
h1, h2, h3, h4, .display, .etiqueta {
  letter-spacing: 0.10em !important;
}

/* =============================================================
   CELULAR — densidade, alvo de toque e legibilidade
   Medido em 390x844 antes de escrever este bloco: a home pedia
   18,5 telas de rolagem, os links de telefone e de rodapé tinham
   18px de altura tocável e havia rótulo de 9,9px. Velocidade não
   é o problema (LCP 375-443ms em Slow 4G com CPU 4x, CLS zero);
   o que pesa é a densidade e o dedo.
   ============================================================= */
@media (max-width: 620px) {
  /* Corpo um pouco menor e mais junto: no celular a linha é curta,
     17px/1.65 espalhava o texto por telas inteiras. */
  body { font-size: 16px; line-height: 1.55; }

  .secao { padding-block: 40px; }
  .cta-final { padding-block: 40px; }

  /* Cartões: a moldura não precisa da mesma folga do desktop. */
  .parceiro { padding: 28px 22px; }
  .unidade,
  .servico,
  .produto,
  .vantagem { padding: 22px 20px; }
  .loja-card { padding: 24px 20px; }

  /* Alvo de toque: 44px é o mínimo confortável. Estes eram os que
     ficavam entre 18 e 24px de altura. */
  a[href^="tel:"],
  .produto__link,
  .parceiro__link,
  .link-texto,
  .breadcrumb a,
  .rodape__grade a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* O link do rodapé é item de lista: ocupa a linha inteira, e o
     espaçamento da lista sai porque a área tocável já o substitui. */
  .rodape__grade li { margin: 0; }
  .rodape__grade a { width: 100%; }

  /* Nada de rótulo abaixo de 11,5px em tela de celular. */
  .comp-badge { font-size: .72rem; }
  .guia-card-opcao__rotulo { font-size: .72rem; }
  .mobile-bar-btn { font-size: .68rem; }

  /* O rodapé em coluna única virava uma tela e meia de rolagem. Os
     rótulos são curtos (23 caracteres no maior), então cabem em duas
     colunas; só o bloco da marca continua ocupando a linha inteira. */
  .rodape { font-size: 0.88rem; }
  .rodape__grade { grid-template-columns: 1fr 1fr; gap: 26px 18px; align-items: start; }
  .rodape__grade > :first-child { grid-column: 1 / -1; }

  /* Um corpo menor põe "Ver catálogo <marca> oficial" em uma linha só,
     com a seta encostada no texto em vez de solta na outra ponta. */
  .parceiro__link { font-size: 0.8rem; margin-top: 18px; }

  /* O resumo de cada marca fica em três linhas: quem quiser o texto
     inteiro abre a página da marca, que é para onde o card leva. */
  .parceiro p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}