/* =====================================================================
   Auto Peças Santa Felicidade — CSS do site institucional
   Direção escolhida: v2 "claro / confiança" — branco e cinza-claro,
   azul-escuro institucional, vermelho discreto. Sans sólida em todos
   os papéis. Linguagem de catálogo técnico de fabricante: retícula
   fina, fios de 1px, rótulos em versalete.

   Mobile-first. Breakpoints reais: 480/700/720/760/920/1000px, herdados
   da variação v2 escolhida (grade de marcas fecha fileira cheia em 2/3/4/6
   colunas). Alguns componentes de grade (marcas, "por que a Santa", lojas)
   usam pontos de corte adicionais porque o número de colunas precisa
   fechar bloco cheio — preservado da variação original em vez de forçar
   só dois breakpoints e deixar fileira pela metade.
   ===================================================================== */
:root{
  --whats:#0F7B3E;--whats-escuro:#0C6332;--whats-claro:#E7F5EC;
  --azul-900:#0C1B30;
  --azul-800:#12233F;
  --azul-700:#1B3A6B;
  --azul-500:#2E5FA3;
  --azul-100:#E6EDF7;
  --vermelho:#C0362C;
  --vermelho-escuro:#96271F;
  --tinta:#0E1A2B;
  --grafite:#55637A;
  --cinza-300:#D8DEE7;
  --cinza-200:#E8ECF2;
  --cinza-100:#F3F5F9;
  --branco:#FFFFFF;

  --sans:"Helvetica Neue",Helvetica,"Segoe UI",system-ui,-apple-system,Arial,"Liberation Sans",sans-serif;

  --pad:clamp(20px,5vw,60px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
h1,h2,h3,p,ul,figure,blockquote{margin:0;}
ul{padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--azul-500);outline-offset:3px;}

.wrap{max-width:1160px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* rótulo: tique vermelho + versalete azul. Aparece em toda seção. */
.tag{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--azul-700);
}
.tag::before{content:"";width:14px;height:3px;background:var(--vermelho);flex:none;}
.tag--claro{color:var(--azul-100);}

.pular{position:absolute;left:-9999px;background:var(--azul-800);color:#fff;padding:10px 16px;font-size:13px;}
.pular:focus{left:12px;top:12px;z-index:99;}

/* ============================== CABEÇALHO ========================== */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--cinza-300);
  backdrop-filter:saturate(140%) blur(8px);
}
.site-header__linha{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:13px;padding-bottom:13px;
}
.marca{display:flex;align-items:center;text-decoration:none;}
.marca img{height:40px;width:auto;max-width:52vw;display:block;}
@media(max-width:400px){.marca img{height:32px;}}
.site-nav{display:flex;gap:clamp(14px,3.2vw,28px);flex-wrap:wrap;}
.site-nav a{
  font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--grafite);
  text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--azul-800);border-color:var(--vermelho);}
.site-nav a[aria-current="page"]{color:var(--azul-800);border-color:var(--vermelho);}

/* ============================== HERO ============================== */
.hero{
  background:var(--cinza-100);
  border-bottom:1px solid var(--cinza-300);
  background-image:
    linear-gradient(var(--cinza-200) 1px,transparent 1px),
    linear-gradient(90deg,var(--cinza-200) 1px,transparent 1px);
  background-size:56px 56px,56px 56px;
}
.hero__grade{
  display:grid;gap:clamp(30px,4.6vw,52px);grid-template-columns:1fr;
  padding-top:clamp(46px,8vw,88px);padding-bottom:clamp(46px,8vw,88px);
}
@media(min-width:920px){
  .hero__grade{grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);align-items:start;}
}
h1{
  margin-top:22px;
  font-size:clamp(32px,6.6vw,56px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.028em;
  color:var(--azul-900);
  overflow-wrap:break-word;
}
h1 .destaque{
  position:relative;white-space:nowrap;
}
h1 .destaque::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:4px;background:var(--vermelho);
}
.hero__sub{
  margin-top:22px;font-size:clamp(16px,2.1vw,19px);color:var(--grafite);
  max-width:44ch;line-height:1.62;
}
.hero__acoes{display:flex;gap:10px;margin-top:30px;}
/* os dois botões dividem a linha em qualquer largura (feedback do Marcos):
   em tela estreita cada um ocupa metade e o texto pode quebrar em 2 linhas */
.hero__acoes .btn,.catalogo-hero__acoes .btn{
  flex:1 1 0;min-width:0;padding-left:12px;padding-right:12px;text-align:center;line-height:1.25;
}
@media(min-width:640px){
  .hero__acoes,.catalogo-hero__acoes{gap:12px;}
  .hero__acoes .btn,.catalogo-hero__acoes .btn{flex:0 1 auto;padding-left:26px;padding-right:26px;}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 26px;font-size:14px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;border:1.5px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-whats{background:var(--whats);color:#fff;gap:9px;}
.btn-whats:hover{background:var(--whats-escuro);color:#fff;}
.btn-whats svg{width:18px;height:18px;flex:none;fill:currentColor;}
.btn-outline{border-color:var(--cinza-300);background:var(--branco);color:var(--azul-800);}
.btn-outline:hover{border-color:var(--azul-800);}

/* painel de contato: o telefone das duas lojas visível de cara */
.contato{
  background:var(--branco);
  border:1px solid var(--cinza-300);
  box-shadow:0 1px 0 rgba(14,26,43,.04),0 14px 34px -22px rgba(14,26,43,.4);
}
.contato__topo{
  padding:20px clamp(18px,3vw,26px) 16px;
  border-bottom:1px solid var(--cinza-300);
}
.contato__topo p{margin-top:8px;font-size:14px;color:var(--grafite);}
.contato__loja{
  display:block;text-decoration:none;
  padding:18px clamp(18px,3vw,26px);
  border-bottom:1px solid var(--cinza-200);
  transition:background .18s ease;
}
.contato__loja:hover{background:var(--azul-100);}
.contato__linha{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.contato__nome{font-size:15px;font-weight:700;color:var(--azul-800);}
.contato__bairro{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grafite);}
.contato__tele,.loja__tele{
  display:block;margin-top:12px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grafite);
}
.contato__tele{margin-top:10px;}
.contato__fone{
  display:block;margin-top:2px;
  font-size:clamp(20px,4.2vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--azul-900);
}
.contato__end{display:block;margin-top:4px;font-size:14px;color:var(--grafite);}
.contato__whats{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  padding:16px clamp(18px,3vw,26px);background:var(--whats-claro);color:var(--whats-escuro);
  transition:background .18s ease;
}
.contato__whats:hover{background:#D9EEDF;}
.contato__whats svg{width:30px;height:30px;flex:none;fill:currentColor;}
.contato__whats-num{display:block;font-size:clamp(18px,3.6vw,22px);font-weight:700;letter-spacing:-.02em;line-height:1.1;}
.contato__whats-txt{display:block;margin-top:3px;font-size:13px;color:var(--grafite);}
.contato__whats-tag{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}

/* ============================= FACHADA ============================= */
.fachada{
  padding-top:clamp(36px,5.2vw,56px);padding-bottom:clamp(36px,5.2vw,56px);
  background:var(--branco);border-bottom:1px solid var(--cinza-300);
}
.fachada figure{margin:0;}
.fachada__grade{display:grid;gap:clamp(20px,3vw,32px);}
@media(min-width:760px){.fachada__grade{grid-template-columns:1fr 1fr;}}

/* slider das duas fachadas (home): foto grande, abas pra alternar */
.fachada-slider__quadro{display:grid;}
.fachada-slide{grid-area:1/1;margin:0;opacity:0;transition:opacity .5s ease;pointer-events:none;}
.fachada-slide--ativo{opacity:1;pointer-events:auto;}
.fachada-slider__abas{display:flex;gap:10px;margin-top:16px;}
.fachada-slider__aba{
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:9px 16px;cursor:pointer;
  background:var(--branco);color:var(--grafite);border:1.5px solid var(--cinza-300);
  transition:color .18s ease,border-color .18s ease;
}
.fachada-slider__aba:hover{color:var(--azul-800);border-color:var(--azul-800);}
.fachada-slider__aba--ativa{color:var(--azul-800);border-color:var(--azul-800);box-shadow:inset 0 -3px 0 var(--vermelho);}
.fachada img{width:100%;height:auto;display:block;border:1px solid var(--cinza-300);}
.fachada figcaption{margin-top:14px;font-size:13.5px;color:var(--grafite);}
/* foto + mapa da mesma loja, lado a lado (feedback do Marcos, 02/09):
   a localização vive junto da fachada, não no cartão de telefone */
.fachada-slide__midia{display:grid;gap:12px;}
@media(min-width:760px){.fachada-slide__midia{grid-template-columns:1.6fr 1fr;align-items:stretch;}}
/* O seletor precisa dos DOIS nomes de classe. O mapa também é .mapa-embed, que
   traz margin-top:16px e mora mais abaixo neste arquivo (§ mapa-embed): com a
   mesma especificidade, quem vem depois ganha, e o mapa descia 16px em relação
   à foto ao lado. Foi assim que nasceu o desalinhamento relatado em 15/09. */
.fachada-slide__midia .fachada-slide__mapa{margin-top:0;aspect-ratio:16/10;}
@media(min-width:760px){.fachada-slide__midia .fachada-slide__mapa{aspect-ratio:auto;height:100%;min-height:0;}}
.fachada-slide__rota{
  margin-left:6px;font-weight:700;color:var(--azul-800);
  text-decoration:none;border-bottom:2px solid var(--vermelho);white-space:nowrap;
}
.fachada-slide__rota:hover{color:var(--vermelho-escuro);}

/* trilho de garantias */
.trilho{border-bottom:1px solid var(--cinza-300);background:var(--branco);}
.trilho ul{
  display:grid;grid-template-columns:1fr;
}
@media(min-width:700px){.trilho ul{grid-template-columns:repeat(3,1fr);}}
.trilho li{
  padding:18px 0;font-size:14px;font-weight:600;color:var(--azul-800);
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--cinza-200);
}
@media(min-width:700px){
  .trilho li{border-bottom:0;border-left:1px solid var(--cinza-200);padding-left:20px;}
  .trilho li:first-child{border-left:0;padding-left:0;}
}
.trilho li::before{content:"";width:7px;height:7px;background:var(--vermelho);flex:none;}

/* ============================= MARCAS ============================= */
.marcas{padding-top:clamp(44px,6.6vw,72px);padding-bottom:clamp(44px,6.6vw,72px);}
.marcas__cabeca{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.marcas__cabeca p{font-size:14.5px;color:var(--grafite);max-width:42ch;}
/* 12 marcas: colunas explícitas para fechar bloco cheio (6x2, 4x3, 3x4, 2x6).
   auto-fill deixava a última fileira pela metade. */
.marcas-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--cinza-300);border-left:1px solid var(--cinza-300);
}
@media(min-width:480px){.marcas-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:720px){.marcas-grid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1000px){.marcas-grid{grid-template-columns:repeat(6,1fr);}}
.marcas-grid li{
  border-right:1px solid var(--cinza-300);border-bottom:1px solid var(--cinza-300);
  padding:22px 12px;text-align:center;
  font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--grafite);
  overflow-wrap:break-word;
  transition:color .18s ease,background .18s ease;
}
.marcas-grid li:hover{color:var(--azul-800);background:var(--cinza-100);}

/* Marcas (página dedicada): mesma grade, variante com categoria abaixo do
   nome. Nome herda cor/peso do <li> (inclusive no hover); só a categoria
   precisa de estilo próprio, mais leve e numa cor diferente. */
.marcas-grid--pagina li{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.marca-card__categoria{
  display:block;font-size:11.5px;font-weight:500;letter-spacing:.01em;color:var(--azul-500);
}
.marcas-grid--pagina li:hover .marca-card__categoria{color:var(--azul-700);}
.marca-card__categoria--whats{color:var(--whats);}
.marcas-grid--pagina li:hover .marca-card__categoria--whats{color:var(--whats-escuro);}
.marcas-indice{margin-top:22px;}
.marcas-indice ul{display:flex;flex-wrap:wrap;gap:6px;}
.marcas-indice a{
  display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;
  border:1px solid var(--cinza-300);background:var(--branco);
  font-size:13px;font-weight:700;color:var(--azul-800);text-decoration:none;
  transition:background .18s ease,border-color .18s ease;
}
.marcas-indice a:hover{background:var(--azul-100);border-color:var(--azul-800);}
.marcas-letra{margin-top:clamp(28px,4vw,40px);scroll-margin-top:90px;}
.marcas-letra__titulo{
  display:flex;align-items:center;gap:14px;margin-bottom:12px;
  font-size:clamp(22px,3.4vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--azul-900);
}
.marcas-letra__titulo::after{content:"";flex:1;height:1px;background:var(--cinza-300);}
.marcas-pagina__rodape{margin-top:24px;font-size:14.5px;color:var(--grafite);}
.marcas-pagina__rodape a{color:var(--azul-800);text-decoration:none;border-bottom:2px solid var(--vermelho);}
.marcas-pagina__rodape a:hover{color:var(--vermelho-escuro);}

/* ============================== LOJAS ============================= */
.lojas{background:var(--cinza-100);border-top:1px solid var(--cinza-300);border-bottom:1px solid var(--cinza-300);
  padding-top:clamp(48px,7.4vw,84px);padding-bottom:clamp(48px,7.4vw,84px);}
h2{
  margin-top:16px;font-size:clamp(26px,4.6vw,38px);font-weight:700;
  line-height:1.14;letter-spacing:-.024em;color:var(--azul-900);
}
.cabeca{max-width:52ch;margin-bottom:clamp(28px,4.4vw,44px);}
.cabeca p{margin-top:14px;color:var(--grafite);}
.lojas__grade{display:grid;gap:clamp(20px,3vw,28px);grid-template-columns:1fr;}
@media(min-width:760px){.lojas__grade{grid-template-columns:1fr 1fr;}}
.loja{background:var(--branco);border:1px solid var(--cinza-300);display:flex;flex-direction:column;}
.loja__foto{width:100%;height:auto;display:block;border-bottom:1px solid var(--cinza-300);}
.loja__faixa{
  background:var(--azul-800);color:#fff;
  padding:14px clamp(18px,3vw,26px);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:3px solid var(--vermelho);
}
.loja__faixa strong{font-size:15px;font-weight:700;letter-spacing:.01em;}
.loja__faixa span{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--azul-100);}
.loja__corpo{padding:clamp(20px,3.2vw,28px);flex:1;}
.loja h3{font-size:clamp(20px,3.2vw,25px);font-weight:700;letter-spacing:-.02em;color:var(--azul-900);}
.loja__end{margin-top:12px;color:var(--grafite);line-height:1.6;}
.loja__fone{
  display:inline-block;margin-top:2px;
  font-size:clamp(21px,4vw,27px);font-weight:700;letter-spacing:-.02em;
  color:var(--azul-800);text-decoration:none;border-bottom:3px solid var(--vermelho);padding-bottom:2px;
}
.loja__fone:hover{color:var(--vermelho-escuro);}
.loja__obs{margin-top:16px;font-size:14px;color:var(--grafite);}

/* ============================== PORQUE ============================ */
.porque{padding-top:clamp(48px,7.4vw,84px);padding-bottom:clamp(48px,7.4vw,84px);}
/* Seção que contém só o .cabeca (Sobre): zera o respiro inferior para a
   foto da fachada logo abaixo não abrir um vão duplo. */
.porque--intro{padding-bottom:0;}
.porque--intro .cabeca{margin-bottom:0;}
.cards{display:grid;gap:clamp(20px,3vw,26px);grid-template-columns:1fr;}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr);}}
.card{border:1px solid var(--cinza-300);border-top:4px solid var(--azul-800);padding:clamp(22px,3.2vw,30px);background:var(--branco);}
.card h3{margin-top:14px;font-size:20px;font-weight:700;letter-spacing:-.018em;color:var(--azul-900);line-height:1.25;}
.card p{margin-top:10px;color:var(--grafite);font-size:15.5px;}

/* ============================ DEPOIMENTO ========================== */
.depoimento{
  background:var(--azul-800);color:#fff;
  padding-top:clamp(46px,7vw,78px);padding-bottom:clamp(46px,7vw,78px);
}
.depoimento blockquote{
  margin-top:18px;font-size:clamp(20px,3.4vw,29px);font-weight:700;
  line-height:1.34;letter-spacing:-.016em;
  /* em resolve sobre a fonte da própria citação; ch/max-width no <figure>
     resolveria sobre 16px e quebraria a palavra no meio. */
  max-width:min(100%,30em);
}
.depoimento figcaption{margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--azul-100);}

/* ============================== RODAPÉ ============================ */
.site-footer{background:var(--azul-900);color:#C9D4E4;padding-top:clamp(42px,6.4vw,68px);padding-bottom:34px;font-size:15px;}
.site-footer__grade{display:grid;gap:clamp(26px,4vw,42px);grid-template-columns:1fr;}
@media(min-width:760px){.site-footer__grade{grid-template-columns:1.2fr 1fr 1fr;}}
.site-footer h2{font-size:17px;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:-.01em;}
.site-footer p{line-height:1.65;}
.site-footer a{color:#fff;text-decoration:none;border-bottom:2px solid var(--vermelho);}
.site-footer a:hover{color:var(--azul-100);}
.site-footer .btn-whats{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:14px 24px;background:var(--whats);color:#fff;
  border-bottom:0;font-size:14px;font-weight:700;
}
.site-footer .btn-whats:hover{background:var(--whats-escuro);color:#fff;}
.site-footer__tele{
  display:block;margin:6px 0 2px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8FA2BC;
}
.site-footer__social{display:flex;gap:20px;margin-top:16px;}
.site-footer__base{
  margin-top:clamp(30px,4.6vw,48px);padding-top:20px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8FA2BC;
}
.site-footer__legal{margin-top:14px;font-size:12px;color:#8FA2BC;}
.site-footer__legal a{color:#8FA2BC;text-decoration:none;border-bottom:1px solid transparent;}
.site-footer__legal a:hover{color:#C9D4E4;border-color:#8FA2BC;}

/* ============================== SOBRE (página) ===================== */
.sobre-cta{
  margin-top:clamp(28px,4.4vw,44px);
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
}
.sobre-cta p{color:var(--grafite);font-size:15.5px;}

/* ============================ LOJAS (página) ======================= */
/* Cartão de loja na página dedicada: mesmo .loja do index, título vira
   h2 (hierarquia correta com um único h1 na página) reaproveitando o
   visual do h3 original sem tocar na regra .loja h3. */
.loja--pagina h2{
  font-size:clamp(20px,3.2vw,25px);font-weight:700;letter-spacing:-.02em;color:var(--azul-900);
}
.loja__horario{margin-top:14px;font-size:14px;color:var(--grafite);}
.loja__mapa-link{
  display:inline-block;margin-top:12px;
  font-size:13.5px;font-weight:700;color:var(--azul-800);
  text-decoration:none;border-bottom:2px solid var(--vermelho);
}
.loja__mapa-link:hover{color:var(--vermelho-escuro);}
.mapa-embed{
  margin-top:16px;border:1px solid var(--cinza-300);background:var(--cinza-100);
  aspect-ratio:16/9;overflow:hidden;
}
.mapa-embed iframe{width:100%;height:100%;border:0;display:block;}

/* bloco de WhatsApp em destaque, abaixo dos cartões de loja */
.whats-destaque{
  margin-top:clamp(36px,5.4vw,56px);
  background:var(--azul-800);color:#fff;
  padding:clamp(28px,4.4vw,40px) clamp(24px,4vw,40px);
  display:flex;flex-direction:column;gap:20px;align-items:flex-start;
}
@media(min-width:760px){
  .whats-destaque{flex-direction:row;justify-content:space-between;align-items:center;gap:24px;}
}
/* nas páginas geradas o conteúdo fica dentro de .wrap: o flex é da linha */
.whats-destaque__linha{display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
@media(min-width:760px){
  .whats-destaque__linha{flex-direction:row;justify-content:space-between;align-items:center;gap:24px;}
}
.whats-destaque h2{color:#fff;margin-top:10px;}
.whats-destaque p{margin-top:10px;color:var(--azul-100);max-width:52ch;}
.whats-destaque .btn-whats{
  background:var(--whats);flex:none;
  padding:19px 34px;font-size:16.5px;letter-spacing:.01em;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.55);
}
.whats-destaque .btn-whats:hover{background:var(--whats-escuro);}
.whats-destaque .btn-whats svg{width:22px;height:22px;}

/* =========================== LEGAL (política/termos) ================ */
.legal{padding-top:clamp(48px,7.4vw,84px);padding-bottom:clamp(48px,7.4vw,84px);}
.legal__atualizado{margin-top:14px;font-size:14px;color:var(--grafite);}
.legal__secoes{display:flex;flex-direction:column;gap:clamp(28px,4vw,40px);max-width:72ch;}
.legal__secoes h2{margin-top:0;font-size:clamp(20px,3vw,25px);}
.legal__secoes h3{margin-top:22px;font-size:16px;font-weight:700;color:var(--azul-800);}
.legal__secoes p{margin-top:12px;color:var(--grafite);line-height:1.7;}
.legal__secoes p strong,.legal__secoes li strong{color:var(--azul-800);}
.legal__secoes ul{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.legal__secoes li{position:relative;padding-left:18px;color:var(--grafite);line-height:1.7;}
.legal__secoes li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--vermelho);}

/* ============================== ERRO 404 ============================ */
.erro404{
  padding-top:clamp(64px,10vw,120px);padding-bottom:clamp(64px,10vw,120px);
  background:var(--cinza-100);border-bottom:1px solid var(--cinza-300);
}
.erro404__conteudo{max-width:56ch;}
.erro404__conteudo p{margin-top:18px;font-size:clamp(16px,2.1vw,18px);color:var(--grafite);max-width:48ch;}
.erro404__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}

/* ========================= WHATSAPP FLUTUANTE ====================== */
.whats-float{
  position:fixed;right:clamp(16px,4vw,28px);bottom:clamp(16px,4vw,28px);z-index:30;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 10px 24px -8px rgba(12,27,48,.55);
  transition:transform .18s ease,box-shadow .18s ease;
}
.whats-float:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(12,27,48,.6);}
.whats-float svg{width:28px;height:28px;fill:#fff;}

/* ========================= CATÁLOGO DE PEÇAS ======================= */
/* Páginas geradas por scripts/gerar_site_catalogo.py (catalogo.html e
   pecas-*.html). Mesma linguagem de catálogo técnico: fios de 1px,
   rótulos em versalete, zero JS. */

/* Card de marca clicável: o <a> ocupa o card inteiro (área de toque cheia);
   o <li> zera o padding e o link assume o mesmo layout interno. */
.marcas-grid--pagina li.marca-card--link{padding:0;}
.marca-card__link{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:100%;height:100%;padding:22px 12px;
  color:inherit;text-decoration:none;
}

/* montadora sem item no catálogo: no lugar das tabelas, o convite */
.catalogo-vazio{
  margin-top:clamp(28px,4vw,40px);padding:clamp(24px,4vw,40px);
  background:var(--branco);border:1px solid var(--cinza-300);border-top:4px solid var(--vermelho);
}
.catalogo-vazio h2{margin-top:10px;font-size:clamp(22px,3.4vw,30px);letter-spacing:-.02em;color:var(--azul-900);}
.catalogo-vazio p{margin-top:12px;color:var(--grafite);max-width:60ch;line-height:1.65;}
.catalogo-vazio__acoes{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;}
.catalogo-vazio__tele{margin-top:24px;display:grid;gap:14px;}
@media(min-width:640px){.catalogo-vazio__tele{grid-template-columns:1fr 1fr;}}
.catalogo-vazio__tele li{padding:14px 18px;border:1px solid var(--cinza-300);background:var(--cinza-100);}
.catalogo-vazio__loja{display:block;font-size:13px;font-weight:700;color:var(--azul-800);}
.catalogo-vazio__tele .site-footer__tele{color:var(--grafite);}
.catalogo-vazio__tele a{
  font-size:clamp(19px,3.4vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--azul-900);text-decoration:none;
}
.catalogo-vazio__tele a:hover{color:var(--vermelho-escuro);}

.migalha{font-size:12.5px;color:var(--grafite);letter-spacing:.02em;margin-bottom:16px;}
.migalha a{color:var(--grafite);text-decoration:none;}
.migalha a:hover{color:var(--azul-700);text-decoration:underline;}
.migalha span{color:var(--azul-800);font-weight:600;}

/* hero comercial das páginas do catálogo: texto + ações à esquerda,
   ilustração técnica à direita (ocupa o vazio em telas largas) */
.catalogo-hero{display:grid;gap:clamp(24px,4vw,48px);align-items:center;}
@media(min-width:720px){.catalogo-hero{grid-template-columns:minmax(0,1fr) minmax(200px,300px);}}
.catalogo-hero .cabeca{margin-bottom:0;}
.catalogo-hero__acoes{display:flex;gap:10px;margin-top:22px;}
.catalogo-hero__ilustracao{display:none;color:var(--azul-700);justify-self:center;}
@media(min-width:720px){.catalogo-hero__ilustracao{display:block;}}
.catalogo-hero__ilustracao svg{width:clamp(200px,24vw,300px);height:auto;display:block;}
.ilu-acento{stroke:var(--vermelho);}

/* botão do WhatsApp (verde) — o clique que vale dinheiro */
.btn-zap{background:#0F7B3E;color:#fff;gap:9px;}
.btn-zap:hover{background:#0C6332;color:#fff;}
.btn-zap svg{width:18px;height:18px;flex:none;}

/* trilho de confiança abaixo do hero */
.catalogo-confianca{
  list-style:none;margin:clamp(24px,3.6vw,36px) 0;padding:14px 0;
  display:flex;flex-wrap:wrap;gap:10px 28px;
  border-top:1px solid var(--cinza-300);border-bottom:1px solid var(--cinza-300);
}
.catalogo-confianca li{
  display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--grafite);
}
.catalogo-confianca li::before{content:"";width:7px;height:7px;background:var(--vermelho);flex:none;}

.tabela-catalogo-wrap{overflow-x:auto;border:1px solid var(--cinza-300);background:var(--branco);margin-bottom:clamp(24px,3.6vw,36px);}
.tabela-catalogo{width:100%;border-collapse:collapse;font-size:13.5px;min-width:680px;}
.tabela-catalogo th{
  text-align:left;padding:10px 12px;background:var(--cinza-100);
  border-bottom:1px solid var(--cinza-300);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grafite);
}
.tabela-catalogo td{padding:9px 12px;border-bottom:1px solid var(--cinza-200);vertical-align:top;color:var(--tinta);}
.tabela-catalogo tbody tr:last-child td{border-bottom:0;}
.tabela-catalogo tbody tr:hover td{background:var(--cinza-100);}
.tabela-catalogo .cod{font-weight:600;color:var(--azul-700);white-space:nowrap;}
.tabela-catalogo .consultar{white-space:nowrap;text-align:right;}
.btn-pedir{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;
  background:#0F7B3E;color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;text-decoration:none;
  transition:background .18s ease;
}
.btn-pedir:hover{background:#0C6332;}
.btn-pedir svg{width:14px;height:14px;flex:none;}

/* mobile: cada linha vira um mini-card empilhado — o botão do WhatsApp
   fica visível sem rolagem horizontal (é o clique que converte) */
@media(max-width:719px){
  .tabela-catalogo{min-width:0;}
  .tabela-catalogo thead{display:none;}
  .tabela-catalogo tbody tr{display:block;padding:14px;border-bottom:1px solid var(--cinza-200);}
  .tabela-catalogo tbody tr:last-child{border-bottom:0;}
  .tabela-catalogo td{display:inline;padding:0;border:0;}
  .tabela-catalogo .prod{display:block;font-weight:700;color:var(--azul-900);margin-bottom:4px;}
  .tabela-catalogo .col-marca,.tabela-catalogo .aplic{font-size:12.5px;color:var(--grafite);}
  .tabela-catalogo .cod{font-size:12.5px;}
  .tabela-catalogo .col-marca::after,.tabela-catalogo .cod::after{content:" · ";color:var(--cinza-300);}
  .tabela-catalogo .consultar{display:block;margin-top:10px;text-align:left;}
}

/* página de produto (produto/*.html) */
.produto-grade{display:grid;gap:clamp(24px,4vw,48px);align-items:start;}
@media(min-width:720px){.produto-grade{grid-template-columns:minmax(240px,420px) minmax(0,1fr);}}
.produto-midia{
  border:1px solid var(--cinza-300);background:var(--branco);
  aspect-ratio:1/1;display:grid;place-items:center;padding:clamp(16px,3vw,32px);
}
.produto-midia img{width:100%;height:100%;object-fit:contain;display:block;}
.produto-ilustracao{color:var(--azul-700);}
.produto-ilustracao svg{width:clamp(160px,22vw,240px);height:auto;display:block;}
.produto-info h1{margin-top:16px;font-size:clamp(26px,4vw,38px);}
.produto-ficha{margin:20px 0 0;border-top:1px solid var(--cinza-300);}
.produto-ficha__linha{
  display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--cinza-200);
}
.produto-ficha dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grafite);}
.produto-ficha dd{margin:0;font-size:14.5px;font-weight:600;color:var(--azul-900);text-align:right;}
.produto-ficha dd a{color:var(--azul-700);}
.produto-nota{margin-top:16px;font-size:13.5px;color:var(--grafite);max-width:52ch;}
.produto-equiv__nota{font-size:14px;color:var(--grafite);margin-bottom:12px;max-width:60ch;}
.produto-equiv{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,3vw,28px);}
.produto-equiv li{
  border:1px solid var(--cinza-300);background:var(--cinza-100);
  padding:7px 12px;font-size:13px;font-weight:600;color:var(--azul-800);
}
.produto-equiv li a{color:var(--azul-700);text-decoration:none;}
.produto-equiv li a:hover{text-decoration:underline;}
.link-produto{color:inherit;text-decoration:none;}
.link-produto:hover{color:var(--azul-700);text-decoration:underline;}
.tabela-catalogo .cod a{color:inherit;text-decoration:none;}
.tabela-catalogo .cod a:hover{text-decoration:underline;}

.catalogo-secao__titulo{
  margin:clamp(28px,4.4vw,44px) 0 14px;
  font-size:clamp(19px,2.4vw,24px);font-weight:700;letter-spacing:-.018em;color:var(--azul-900);
}

.catalogo-chips__titulo{
  margin:clamp(28px,4.4vw,44px) 0 14px;
  font-size:clamp(17px,2.1vw,20px);font-weight:700;letter-spacing:-.014em;color:var(--azul-900);
}
.catalogo-chips li{padding:0;}
.catalogo-chips a{
  display:flex;align-items:center;justify-content:center;height:100%;
  padding:14px 16px;color:inherit;text-decoration:none;
}
.catalogo-chips a:hover{color:var(--azul-800);background:var(--cinza-100);}

.catalogo-cards{margin-bottom:clamp(8px,1.6vw,16px);}
.catalogo-card h2{margin-top:14px;font-size:20px;font-weight:700;letter-spacing:-.018em;color:var(--azul-900);line-height:1.25;}
.catalogo-card{display:block;color:inherit;text-decoration:none;transition:border-color .15s ease;}
.catalogo-card:hover{border-color:var(--azul-500);}
.catalogo-card p{margin-top:10px;font-size:14px;color:var(--grafite);}
.catalogo-card__ilu{display:block;color:var(--azul-700);}
.catalogo-card__ilu svg{width:64px;height:64px;display:block;}
.catalogo-card__ver{
  display:inline-block;margin-top:14px;
  font-size:13px;font-weight:700;color:var(--vermelho);letter-spacing:.01em;
}
.catalogo-card:hover .catalogo-card__ver{color:var(--vermelho-escuro);}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}