/* M Autopeças — vermelho do "M" nos botões, azul-marinho da fachada nas áreas escuras */
:root {
  --primary: #c8231f;        /* vermelho do logo, escurecido para texto branco legível */
  --primary-dark: #a51b18;
  --brand-blue: #2346a8;     /* azul da faixa da fachada */
  --dark: #13245c;           /* marinho da fachada */
  --dark-2: #1b3275;
  --bg-alt: #f3f5f9;
  --line: #dfe3ec;
  --on-dark-muted: #b3bdd6;
  --font-head: "Bahnschrift", "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --hero-overlay: linear-gradient(100deg, rgba(12,22,58,.95) 0%, rgba(19,36,92,.82) 50%, rgba(35,70,168,.25) 100%);
  --hero-accent: #ff6b66;
}
h1, h2 { font-weight: 700; letter-spacing: -.01em; }
.eyebrow { color: var(--primary); }
.section-dark .eyebrow, .hero .eyebrow { color: #ff8a86; }

.logo-img { height: 66px; width: auto; }
@media (max-width: 420px) { .logo-img { height: 54px; } }
.nav a.btn-primary { color: #fff; }
.footer-brand .logo-img { height: 64px; }

.hero-tag { display: inline-flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .45rem 1rem; font-size: .9rem; font-weight: 600; margin-bottom: 1.4rem; color: #fff; }
.hero-tag .icon { color: #ff8a86; }

.hero-strip { position: relative; margin-top: -3.2rem; z-index: 2; }
.hero-strip .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.6rem; gap: 1.2rem; }
.hero-strip .item { display: flex; gap: .9rem; align-items: center; }
.hero-strip .item .card-icon { margin: 0; width: 48px; height: 48px; flex: none; }
.hero-strip strong { display: block; line-height: 1.2; }
.hero-strip span { font-size: .9rem; color: var(--muted); }

.svc-icon { width: 28px; height: 28px; }
.card-icon { background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary); }

/* Grade de categorias de produtos */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .8rem; }
.cat { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; font-weight: 600; }
.cat .card-icon { margin: 0; width: 42px; height: 42px; flex: none; }
.cat .svc-icon, .cat .icon { width: 24px; height: 24px; }

/* Bloco de público: oficinas e clientes */
.audience .card h3 { margin-top: .2rem; }

.cta-band { background: linear-gradient(120deg, var(--dark), var(--dark-2) 55%, var(--brand-blue)); }

.split.top { align-items: start; }
.split.top aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 860px) { .split.top aside { position: static; } }

.avatar { background: var(--primary); }
.footer-contact .icon { color: #ff8a86; }
.socials a:hover { background: var(--primary); }
.timeline { display: grid; gap: 1rem; }
.timeline .stat strong { color: var(--primary); }
.section-dark .stat strong { color: #fff; }
.section-dark .stat span { color: var(--on-dark-muted); }

/* Marcas: logos em cartões brancos do mesmo tamanho */
.brand-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .8rem; }
.brand-grid li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); height: 90px; display: grid; place-items: center; padding: .9rem 1.1rem; }
.brand-grid img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.ancora-logo { width: 200px; height: auto; margin-bottom: .5rem; }
.footnote { font-size: .8rem; color: var(--on-dark-muted); margin-top: .8rem; }