/* ==========================================================================
   ELETRONLINE TRUCK PARTS — STYLES
   ========================================================================== */

/* ---------- Reset base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Escondido visualmente, mas presente pra leitor de tela e crawler — nunca
   display:none/visibility:hidden (aí some pros dois). Padrão de acessibilidade
   consagrado, reaproveitado aqui pro resumo indexável de cada foto da galeria. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body {
  margin: 0;
  background: linear-gradient(180deg, var(--canvas-top) 0%, var(--canvas-bottom) 100%);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--paper);
}

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: 3px;
}

/* ---------- Layout utilities ---------- */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.section { padding-block: var(--section-pad); position: relative; scroll-margin-top: 96px; }
/* Foto de fundo sutil por seção — mesma técnica do hero (mix-blend-mode:
   multiply + baixa opacidade + véu de leitura), só que estática (1 foto, sem
   slideshow) e ainda mais discreta, porque aqui a seção já tem outro
   conteúdo em primeiro plano (não é uma faixa de abertura). Nunca usada em
   seção que já é uma parede de fotos (categorias/marcas/galeria) — lá
   empilhar outra imagem por trás só atrapalharia a leitura. */
.section-bg-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.section-bg-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.14; mix-blend-mode: multiply; }
.section-bg-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--canvas-top) 0%, transparent 28%, transparent 72%, var(--canvas-top) 100%);
}
@media (max-width: 640px) {
  .section-bg-photo img { opacity: 0.08; }
}
#como-funciona .wrap, #contato .wrap { position: relative; z-index: 1; }
#top, #contato { scroll-margin-top: 96px; }
.section--alt { background: var(--graphite); }
.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-7);
}
.section-head--center { margin-inline: auto; text-align: center; }

/* Rótulo de seção — colchetes técnicos + nó da marca, sem pílula genérica.
   Assinatura recorrente (MESTRE2X0 XIX.6): reaparece em toda seção do site,
   sempre com o mesmo dispositivo, para criar reconhecimento. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: var(--space-4);
}
.eyebrow-bracket {
  color: var(--accent-dim);
  font-weight: 700;
  display: inline-block;
  transition: transform 480ms var(--ease-out), opacity 480ms var(--ease-out);
}
.eyebrow-bracket--l { transform-origin: right center; }
.eyebrow-bracket--r { transform-origin: left center; }
.eyebrow-mark {
  width: 13px; height: 13px;
  color: var(--accent-dim);
  flex-shrink: 0;
  transition: opacity 380ms var(--ease-out) 80ms, transform 380ms var(--ease-out) 80ms;
}
.eyebrow-mark svg { width: 100%; height: 100%; display: block; }
.eyebrow-text { transition: opacity 380ms var(--ease-out) 80ms; }

/* Entrada: os colchetes fecham sobre o rótulo — sobrepõe o fade genérico de [data-reveal]. */
.eyebrow[data-reveal] { opacity: 1; transform: none; }
.eyebrow[data-reveal] .eyebrow-bracket--l { opacity: 0; transform: translateX(-8px); }
.eyebrow[data-reveal] .eyebrow-bracket--r { opacity: 0; transform: translateX(8px); }
.eyebrow[data-reveal] .eyebrow-mark,
.eyebrow[data-reveal] .eyebrow-text { opacity: 0; }
.eyebrow[data-reveal].is-visible { transition: none; }
.eyebrow[data-reveal].is-visible .eyebrow-bracket--l,
.eyebrow[data-reveal].is-visible .eyebrow-bracket--r { opacity: 1; transform: translateX(0); }
.eyebrow[data-reveal].is-visible .eyebrow-mark,
.eyebrow[data-reveal].is-visible .eyebrow-text { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .eyebrow-bracket, .eyebrow-mark, .eyebrow-text { transition: none; opacity: 1; transform: none; }
}

.section-head h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--tr-h2);
  line-height: 1.1;
  font-weight: 400;
}
/* Título com reveal palavra por palavra: sobrepõe o fade genérico do
   [data-reveal] (igual ao eyebrow) — a máscara + deslocamento de cada
   palavra já cuidam de opacidade e movimento. */
.section-head h2[data-reveal] { opacity: 1; transform: none; }
.section-head h2 .th-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.section-head h2 .th-word-in {
  display: inline-block;
  opacity: 0;
  transform: translateY(115%);
  transition: transform 640ms var(--ease-out), opacity 480ms var(--ease-out);
}
.section-head h2[data-reveal].is-visible .th-word-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .section-head h2 .th-word-in { transition: none; opacity: 1; transform: none; }
}
.section-head p {
  margin-top: var(--space-3);
  color: var(--fog);
  font-size: var(--fs-body-lg);
  max-width: 40ch;
}
.section-head--center p { margin-inline: auto; }

.accent-word { color: var(--accent-dim); }

.mono-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--ash);
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-border: var(--hairline-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.9em 1.6em;
  border-radius: var(--radius-action);
  border: var(--border-w) solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-std),
              border-color var(--dur-base) var(--ease-std);
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-border: var(--accent);
}
.btn-primary:hover { --btn-bg: var(--accent-strong); --btn-border: var(--accent-strong); }
.btn-ghost:hover { border-color: var(--fog); }
.btn-icon {
  width: 1.9em; height: 1.9em;
  border-radius: 50%;
  background: var(--steel-strong);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.1em;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-primary .btn-icon { background: var(--accent-ink); color: var(--accent); }
.btn:hover .btn-icon { transform: translate(2px, -2px) scale(1.06); }
.btn-icon svg { width: 0.85em; height: 0.85em; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  padding: var(--space-4) 0 0;
  pointer-events: none;
}
/* Pílula flutuante exclusivamente escura — único lugar do site com essa
   inversão de superfície, para dar ao logótipo branco com tagline
   (assets/logo/eletronline-nav.webp, de WEBSITE/LOGO/LOGOMENUFLUTUANTE.png)
   um fundo de verdade e destacar a navegação como um elemento "elevado". */
.nav-inner {
  pointer-events: auto;
  max-width: var(--content-max);
  margin-inline: auto;
  margin-inline: clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: var(--border-w) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-action);
  background: rgba(14, 26, 23, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std);
}
.nav-inner.is-scrolled { border-color: rgba(255, 255, 255, 0.16); background: rgba(10, 20, 18, 0.94); }
@media (prefers-reduced-transparency: reduce) {
  .nav-inner { background: rgb(14, 26, 23); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-inner.is-scrolled { background: rgb(10, 20, 18); }
}
.nav-brand { display: flex; align-items: center; gap: var(--space-2); }
.nav-brand img { height: 32px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--fs-caption);
  color: rgba(238, 246, 244, 0.7);
}
.nav-links a { position: relative; padding-block: 0.3em; transition: color var(--dur-base) var(--ease-std); }
.nav-links a:hover { color: var(--on-dark); }
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--accent);
  transition: right var(--dur-base) var(--ease-out);
}
.nav-links a:hover::after { right: 0; }
.nav-cta { display: flex; align-items: center; gap: var(--space-2); }
/* .btn-ghost por padrão assume fundo claro (--btn-fg: var(--paper), borda
   --hairline-strong) — invisível na pílula escura do nav (única superfície
   invertida do site, ver comentário acima). Mesmo tratamento do
   .nav-menu-btn ao lado: texto --on-dark, borda translúcida branca. */
.nav-cta a.btn-ghost { --btn-fg: var(--on-dark); --btn-border: rgba(255, 255, 255, 0.3); }
.nav-cta a.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.55); }
/* .cart-trigger é <button>, não <a> — mesmo problema de fundo claro
   presumido, mesmo tratamento, seletor próprio pra não vazar pro
   .cart-trigger igual (texto escuro correto lá) que vive dentro do
   #mobile-nav claro. */
.nav-cta .cart-trigger { --btn-fg: var(--on-dark); --btn-border: rgba(255, 255, 255, 0.3); }
.nav-cta .cart-trigger:hover { border-color: rgba(255, 255, 255, 0.55); }
.nav-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--on-dark);
  border-radius: var(--radius-action);
  border: var(--border-w) solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 860px) {
  .nav-links { display: none; }
}
@media (max-width: 640px) {
  .nav-cta a.btn-ghost { display: none; }
  .nav-menu-btn { display: inline-flex; }
}

/* ---------- Mobile nav: painel "escorrega" pra baixo, ancorado sob a pílula
   do nav — não é mais um overlay em tela cheia centralizado (a lista curta
   de links flutuando no meio de uma tela alta ficava com vazio enorme em
   cima/embaixo — lido como "desproporcional"). Mesmo padrão estrutural do
   .contact-picker/.cart-drawer já usados no site: backdrop (fecha ao clicar
   fora) + painel próprio, só que ancorado no topo em vez de centralizado. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 85;
  pointer-events: none;
}
.mobile-nav.is-open { pointer-events: auto; }
.mobile-nav-backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 16, 14, 0.45);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-std);
}
.mobile-nav.is-open .mobile-nav-backdrop { opacity: 1; }
.mobile-nav-panel {
  position: absolute;
  top: 88px;
  left: clamp(1.25rem, 4vw, 2.5rem);
  right: clamp(1.25rem, 4vw, 2.5rem);
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--steel);
  border: var(--border-w) solid var(--hairline-strong);
  /* Exceção deliberada às duas filosofias de raio do site (V.4:
     --radius-structural:0 em painéis, --radius-action:999px em pílulas) —
     esse painel é a ÚNICA peça de UI que fica pendurada direto embaixo da
     pílula do nav (mesma altura ~68px → curva de canto ~34px), então
     precisa continuar visualmente a curva dela em vez de brigar com um
     canto reto. 24px não é a pílula inteira (ficaria pesado num painel
     alto e largo assim de repetição de itens), mas lê como a mesma família
     redonda em vez de "outro componente colado ali por acaso". */
  border-radius: 24px;
  box-shadow: 0 16px 32px rgba(9, 16, 14, 0.16);
  transition: max-height var(--dur-slow) var(--ease-in-out);
}
.mobile-nav.is-open .mobile-nav-panel { max-height: min(78vh, 620px); overflow-y: auto; }
/* Barra de rolagem fina, discreta — a padrão do navegador (cinza, grossa)
   destoava do painel arredondado desenhado à mão. */
.mobile-nav-panel { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
.mobile-nav-panel::-webkit-scrollbar { width: 6px; }
.mobile-nav-panel::-webkit-scrollbar-track { background: transparent; }
.mobile-nav-panel::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: var(--radius-action); }
/* Combinador direto (>) — sem isso, "a" também pegava o link do WhatsApp
   dentro de .mobile-nav-actions (mais abaixo na árvore), brigando com o
   padding/font-size do próprio .btn-primary dele e deixando o botão maior
   e desproporcional em relação ao "Minha lista" ao lado. */
.mobile-nav-panel > a {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--paper);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-w) solid var(--hairline);
  transition: color var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std);
}
.mobile-nav-panel > a:hover { color: var(--accent-dim); background: var(--steel-strong); }
.mobile-nav-actions {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
}
.mobile-nav-actions .btn { height: 48px; }
.mobile-nav-actions .btn { justify-content: center; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--carbon);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 600ms var(--ease-std), visibility 600ms;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark { width: 56px; height: 56px; position: relative; }
.preloader-mark svg { width: 100%; height: 100%; }
.preloader-mark .core { transform-origin: center; animation: pulse-core 1.1s var(--ease-in-out) infinite; }
.preloader-mark .arm { transform-origin: center; animation: pulse-arm 1.1s var(--ease-in-out) infinite; }
@keyframes pulse-core { 0%, 100% { transform: scale(0.85); opacity: 0.6; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes pulse-arm { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .preloader-mark .core, .preloader-mark .arm { animation: none; opacity: 1; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: clamp(6rem, 4rem + 6vw, 9rem);
  padding-bottom: var(--space-8);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 82% 12%, var(--accent-soft), transparent 60%),
    var(--carbon);
}
/* Slideshow de fundo do hero: fica ENTRE o gradiente/carbon do .hero (que
   continua intocado, pintado por baixo de tudo) e o .hero-grid (que continua
   por cima, na frente das fotos) — a textura de grade técnica do hero não
   muda em nada, só ganha companhia atrás dela. --carbon hoje é o mesmo
   offwhite do canvas claro do site (não é mais escuro) — opacity sozinho
   contra um fundo claro deixava as fotos (todas de anoitecer, céu escuro)
   quase invisíveis, um borrão cinza em vez de fotografia. mix-blend-mode:
   multiply faz o conteúdo escuro da foto realmente aparecer sobre o canvas
   claro (as áreas escuras escurecem o canvas, as áreas claras quase não
   alteram nada) — o "efeito de transparência" pedido, só que funcionando
   de verdade contra um fundo claro em vez de contra um escuro. */
.hero-bg-slides { position: absolute; inset: 0; overflow: hidden; }
/* Véu de legibilidade: opaco na faixa onde o texto do hero vive (esquerda),
   esmaecendo pra deixar a foto aparecer livre à direita. Sem isso, o texto
   secundário (--fog, mais claro) ficava ilegível quando a foto do momento
   tinha uma região clara passando por trás dele. */
.hero-bg-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--canvas-top) 0%, var(--canvas-top) 32%, rgba(248,247,243,0.75) 48%, rgba(248,247,243,0.2) 66%, transparent 80%);
}
.hero-bg-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: multiply;
  animation: hero-bg-cycle 42s var(--ease-std) infinite;
}
.hero-bg-slide:nth-child(1) { animation-delay: 0s; }
.hero-bg-slide:nth-child(2) { animation-delay: -6s; }
.hero-bg-slide:nth-child(3) { animation-delay: -12s; }
.hero-bg-slide:nth-child(4) { animation-delay: -18s; }
.hero-bg-slide:nth-child(5) { animation-delay: -24s; }
.hero-bg-slide:nth-child(6) { animation-delay: -30s; }
.hero-bg-slide:nth-child(7) { animation-delay: -36s; }
/* Cada imagem some em opacity:0 assim que a % de fade-out bate exatamente
   na % em que a PRÓXIMA imagem (defasada 1 slot = 14.28% = 6s) começa do
   zero também — ou seja, as duas ficam em 0 ao mesmo tempo por um instante,
   a cada 6s. Num monitor claro com mix-blend-mode:multiply em opacidade
   baixa, esse instante lia como "a foto sumiu"/"tá travada numa imagem só".
   Fix: o fade-out (18%) termina DEPOIS do ponto em que a próxima já começou
   a subir (14.28%) — as duas se sobrepõem por ~1.5s, nunca as duas em 0 ao
   mesmo tempo. */
@keyframes hero-bg-cycle {
  0%, 100% { opacity: 0; }
  3% { opacity: 0.62; }
  12% { opacity: 0.62; }
  18% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide { animation: none; opacity: 0; }
  .hero-bg-slide:first-child { opacity: 0.62; }
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hairline-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-strong) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
  pointer-events: none;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-copy h1 {
  font-size: var(--fs-display);
  letter-spacing: var(--tr-display);
  font-weight: 400;
  line-height: 0.98;
}
.hero-copy p {
  margin-top: var(--space-5);
  color: var(--fog);
  font-size: var(--fs-body-lg);
  max-width: 38ch;
}
.hero-actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.hero-specialists {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--ash);
}
.hero-specialists strong { color: var(--fog); font-weight: 600; }

.hero-brands {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--hairline);
}
.hero-brands span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: var(--space-3);
}
.hero-brands ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--fog);
}

/* ---------- Typewriter do hero (H1 + subtítulo) ----------
   Caracteres já existem no DOM na posição final (zero layout shift) —
   a "digitação" é só a revelação de opacidade, um a um. */
.tw-char { opacity: 0; }
.tw-char.is-in { opacity: 1; transition: opacity 90ms linear; }
.typewriter.is-typing::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 3px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: cursor-blink 900ms step-end infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* Restante do hero: entra depois que os textos terminam de digitar. */
.hero-stagger {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.hero-stagger.hero-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .tw-char { opacity: 1; }
  .typewriter.is-typing::after { display: none; }
  .hero-stagger { opacity: 1; transform: none; transition: none; }
}

/* Hero reel — phone-framed vertical video, duplo bisel */
.hero-reel {
  position: relative;
  justify-self: center;
  width: min(280px, 78vw);
}
.reel-shell {
  padding: 10px;
  border: var(--border-w) solid var(--hairline-strong);
  background: linear-gradient(160deg, var(--graphite), var(--carbon));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.reel-core {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--steel);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.5);
}
.reel-core video, .reel-core img {
  width: 100%; height: 100%; object-fit: cover;
}
.reel-badge {
  position: absolute; left: 10px; top: 10px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(16,28,25,0.6);
  backdrop-filter: blur(6px);
  padding: 0.35em 0.7em;
  border: var(--border-w) solid rgba(255,255,255,0.12);
}
@media (prefers-reduced-transparency: reduce) {
  .reel-badge { background: rgb(16,28,25); backdrop-filter: none; }
}
.reel-badge::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff4d4d;
  animation: rec-blink 1.4s ease-in-out infinite;
}
@keyframes rec-blink { 50% { opacity: 0.25; } }
.reel-float {
  position: absolute;
  bottom: -18px; right: -18px;
  background: var(--steel-strong);
  border: var(--border-w) solid var(--hairline-strong);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 132px;
}
.reel-float .val { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent-dim); }
.reel-float .lbl { font-size: var(--fs-micro); color: var(--ash); text-transform: uppercase; letter-spacing: 0.08em; }

@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: left; }
  .hero-reel { justify-self: start; margin-top: var(--space-6); }
}

/* ---------- Hero da loja por marca (marca.html) ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.breadcrumb a { color: var(--ash); transition: color var(--dur-base) var(--ease-std); }
.breadcrumb a:hover { color: var(--accent-dim); }
.breadcrumb-sep { color: var(--ash-dim); }
.breadcrumb-current { color: var(--paper); font-weight: 600; }
.brand-hero-truck {
  aspect-ratio: 1 / 0.85;
  background: var(--steel);
}
.brand-hero-truck img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--space-4);
}

/* ---------- Marquee divider (elemento de assinatura recorrente) ---------- */
.marquee-band {
  position: relative;
  padding-block: var(--space-4);
  background: var(--accent);
  transform: rotate(-1.6deg);
  margin-block: calc(var(--space-7) * -1) var(--space-8);
  z-index: 5;
  overflow: hidden;
}
.marquee-band::before, .marquee-band::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(6,36,32,0.2);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  padding-inline: var(--space-4);
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-track span::after { content: '◆'; margin-left: var(--space-4); font-size: 0.6em; opacity: 0.5; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation-play-state: paused; } }

/* ---------- Trust bar ---------- */
.trust-bar { border-top: var(--border-w) solid var(--hairline); border-bottom: var(--border-w) solid var(--hairline); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border-left: var(--border-w) solid var(--hairline);
}
.trust-item:first-child { border-left: 0; }
.trust-item svg { width: 22px; height: 22px; color: var(--accent-dim); flex-shrink: 0; margin-top: 2px; }
.trust-item h2 { font-size: var(--fs-h4); font-weight: 600; margin-bottom: 4px; }
.trust-item p { color: var(--ash); font-size: var(--fs-caption); }
@media (max-width: 700px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { border-left: 0; border-top: var(--border-w) solid var(--hairline); }
  .trust-item:first-child { border-top: 0; }
}

/* ---------- Loading skeletons (some assim que o JS injeta o conteúdo real) ---------- */
.skeleton-cat, .skeleton-photo {
  position: relative;
  overflow: hidden;
  background: var(--steel);
  border: var(--border-w) solid var(--hairline);
}
.skeleton-cat { aspect-ratio: 4 / 3.6; }
.skeleton-photo { aspect-ratio: 3 / 4; break-inside: avoid; margin-bottom: var(--space-3); }
.skeleton-cat::after, .skeleton-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: skeleton-sweep 1.6s ease-in-out infinite;
}
@keyframes skeleton-sweep { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-cat::after, .skeleton-photo::after { display: none; }
}

/* ---------- Categorias — duplo bisel ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-card {
  --mx: 50%; --my: 50%;
  position: relative;
  padding: 10px;
  border: var(--border-w) solid var(--hairline);
  background: var(--graphite);
  transition: border-color var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-out);
}
.cat-card:hover { border-color: var(--hairline-strong); }
.cat-core {
  position: relative;
  background: var(--steel);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
/* Exposição padronizada: as fotos reais do estoque misturam retrato e
   paisagem (celular, sem padronização de enquadramento na origem). Uma caixa
   quadrada + contain evitava o corte ruim, mas deixava sobra de --steel
   (branco puro) visível nas laterais — bonito não, "harmônico" muito menos.
   A maioria esmagadora das fotos reais é retrato (960×1280 ≈ 3:4) — a caixa
   agora usa essa proporção como padrão, então a maior parte preenche a
   moldura de ponta a ponta sem cortar nada; só a minoria paisagem perde uma
   fatia das bordas, nunca o produto. Full-bleed, sem letterbox (MESTRE2X0 V.6:
   "produto/imagem em full-bleed com UI mínima ao redor"). */
/* display:block é essencial aqui: .cat-media é um <a>, que por padrão é
   inline — e aspect-ratio simplesmente não tem efeito em elementos inline.
   Sem isso, a caixa "esquecia" a proporção 3:4 e caía de volta na proporção
   natural de cada foto, deixando as 2 categorias com capa paisagem com
   quase metade da altura das outras 6 — a real causa da desarmonia. */
.cat-media { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.cat-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: grayscale(0.4) contrast(1.03);
  transition: transform 600ms var(--ease-out), filter var(--dur-slow) var(--ease-std);
}
.cat-card:hover .cat-media img { transform: scale(1.06); filter: grayscale(0) contrast(1.03); }
.cat-media::after { content: ''; position: absolute; inset: 10px; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease-std), inset var(--dur-base) var(--ease-out); }
.cat-card:hover .cat-media::after { opacity: 1; inset: 8px; }

/* Marcas de canto estilo desenho técnico ("mira de precisão") — assinatura
   visual reaproveitada em foto de categoria, item de galeria e ícone de marca.
   Um único pseudo-elemento com 8 camadas de gradiente desenha os 4 "L". */
.cat-media::after,
.gallery-item::after,
.brand-icon-btn::after {
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position:
    top left, top left,
    top right, top right,
    bottom right, bottom right,
    bottom left, bottom left;
}
.cat-spot {
  position: absolute; inset: 0;
  background: radial-gradient(circle 220px at var(--mx) var(--my), var(--accent-glow), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-std);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cat-card:hover .cat-spot { opacity: 1; }
.cat-count {
  position: absolute; top: var(--space-3); right: var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--on-dark); background: rgba(16,28,25,0.65);
  border: var(--border-w) solid rgba(255,255,255,0.12);
  padding: 0.3em 0.6em; letter-spacing: 0.06em;
}
/* Card retrátil: fechado mostra só a foto + o título do toggle; o clique
   revela .cat-collapse (mesma técnica de max-height do acordeão do FAQ). */
.cat-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  background: transparent; border: 0; cursor: pointer; text-align: left;
}
/* min-height reserva sempre 2 linhas, mesmo pros títulos curtos que cabem
   numa só — sem isso, os 2 cards com nome mais longo ("Placas, Reservatórios
   & Chicotes ECA", "Reparo Cummins & Motor Denox") esticavam a linha inteira
   do grid (o CSS Grid iguala a altura da fileira), sobrando espaço vazio nos
   vizinhos da mesma fileira que tinham título de 1 linha só. */
.cat-toggle h3 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; }
.cat-toggle .plus {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: var(--border-w) solid var(--hairline-strong);
  border-radius: 50%;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.cat-toggle .plus::before, .cat-toggle .plus::after {
  content: ''; position: absolute; background: var(--fog);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.cat-toggle .plus::before { width: 9px; height: 1px; }
.cat-toggle .plus::after { width: 1px; height: 9px; transition: opacity var(--dur-base); }
.cat-card.is-open .cat-toggle .plus { border-color: var(--accent-dim); transform: rotate(135deg); }
.cat-card.is-open .cat-toggle .plus::before, .cat-card.is-open .cat-toggle .plus::after { background: var(--accent-dim); }

.cat-collapse { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-in-out); }
.cat-body { padding: 0 var(--space-4) var(--space-5); }
.cat-body p { color: var(--ash); font-size: var(--fs-caption); margin-bottom: var(--space-4); }
.cat-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption); font-weight: 600; color: var(--fog);
  transition: color var(--dur-base) var(--ease-std), gap var(--dur-base) var(--ease-out);
}
.cat-link svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.cat-card:hover .cat-link { color: var(--accent-dim); }
.cat-card:hover .cat-link svg { transform: translate(3px, -3px); }

/* ---------- Carrossel de marcas ---------- */
.brand-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
}
.brand-nav {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: var(--border-w) solid var(--hairline-strong);
  background: var(--steel);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), transform var(--dur-fast) var(--ease-out);
}
.brand-nav svg { width: 18px; height: 18px; }
.brand-nav:hover { border-color: var(--accent-dim); color: var(--accent-dim); }
.brand-nav:active { transform: scale(0.92); }
.brand-nav:disabled { opacity: 0.35; pointer-events: none; }

/* Carrossel reconstruído do zero: nada de scrollLeft/scrollTo/scroll-snap.
   O rolamento nativo (mandatory ou proximity) só corrige a posição quando
   ela já cai perto de um ponto de encaixe — combinado com uma faixa mais
   larga que o conteúdo (onde centralizar os itens das pontas exige posição
   negativa, sempre limitada de volta a 0 pelo navegador), isso gerava uma
   cadeia de bugs sutis e recorrentes: clique preso sem mexer nada, destaque
   fora de sincronia com a posição real, offsetLeft relativo ao ancestral
   errado. Agora é 100% controlado por JS: um único transform: translateX()
   na faixa, com a matemática de posição toda em cima de offsetWidth (nunca
   afetado pelo scale() do item em foco, nem depende de position/offsetParent
   de ancestral nenhum). Ver initBrandTrack.
   Dois elementos, dois papéis: .brand-track-viewport é a "janela" fixa que
   recorta (overflow:hidden) e ocupa a coluna do grid; .brand-track (o <ul>)
   é a faixa que desliza via transform. Colocar overflow:hidden E o
   translateX() no MESMO elemento quebra o clique nas setas: transformar um
   elemento move a caixa inteira dele — incluindo a própria área de recorte
   —, então a cada passo a faixa passava a sobrepor visualmente o botão
   "anterior" e roubava o clique (bug real, pego em teste automatizado). */
.brand-track-viewport { overflow: hidden; }
.brand-track {
  display: flex;
  width: max-content;
  gap: var(--space-4);
  padding-block: var(--space-2) var(--space-3);
  cursor: grab;
  touch-action: pan-y; /* arrasto horizontal fica pro JS; scroll vertical da página passa direto */
  transition: transform 550ms var(--ease-out);
}
.brand-track.is-dragging { cursor: grabbing; transition: none; }
.brand-track.is-dragging .brand-item { pointer-events: none; }

/* Os caminhões são recortes com fundo transparente (confirmado por alpha) —
   o quadrado branco que aparecia aqui vinha só do preenchimento --steel do
   botão, sem nenhum motivo de marca por trás. Removido: o caminhão flutua
   direto sobre o degradê da página, sem "cartão". O item central (is-current,
   atualizado por initBrandTrack a cada scroll/autoplay) ganha escala, cor
   plena e sombra; os demais ficam menores, acinzentados e apagados — o
   contraste entre os dois estados é o que dá a sensação de slide "puxando"
   o foco, em vez de só uma lista rolando. */
.brand-item {
  flex: 0 0 auto;
  width: 168px;
  opacity: 0.45;
  transform: scale(0.9);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.brand-item.is-current { opacity: 1; transform: scale(1.08); }
.brand-icon-btn {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-3) var(--space-3);
  border: var(--border-w) solid transparent;
  border-radius: 0;
  background: transparent;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-out);
}
.brand-icon-btn img {
  width: 100%;
  aspect-ratio: 1 / 0.9;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  filter: grayscale(0.85) contrast(0.92) opacity(0.85);
  transition: filter var(--dur-slow) var(--ease-std);
}
.brand-item.is-current .brand-icon-btn img {
  filter: grayscale(0) contrast(1) opacity(1) drop-shadow(0 16px 20px rgba(20, 35, 32, 0.18));
}
.brand-name {
  display: block;
  margin-top: var(--space-2);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fog);
  transition: color var(--dur-base) var(--ease-std);
}
.brand-item:hover { opacity: 1; }
.brand-item:hover .brand-icon-btn { border-color: var(--accent-dim); transform: translateY(-3px); }
.brand-item:hover .brand-icon-btn img { filter: grayscale(0) contrast(1) opacity(1); }
/* Item mais próximo do centro da faixa — dá noção de "onde estou" mesmo
   sem hover, reforçado pelo autoplay/arrasto (ver initBrandTrack). */
.brand-item.is-current .brand-icon-btn { border-color: var(--accent-dim); }
.brand-item.is-current .brand-name { color: var(--accent-dim); }
.brand-icon-btn::after { content: ''; position: absolute; inset: 8px; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease-std), inset var(--dur-base) var(--ease-out); }
.brand-item.is-current .brand-icon-btn::after { opacity: 1; inset: 6px; }
.brand-item:hover .brand-icon-btn::after { opacity: 1; inset: 6px; }
.brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-micro);
  color: var(--ash);
  transition: color var(--dur-base) var(--ease-std), gap var(--dur-base) var(--ease-out);
}
.brand-link svg { width: 11px; height: 11px; transition: transform var(--dur-base) var(--ease-out); }
.brand-item:hover .brand-link { color: var(--accent-dim); gap: 7px; }
.brand-item:hover .brand-link svg { transform: translate(2px, -2px); }

@media (max-width: 640px) {
  .brand-item { width: 132px; }
  .brand-nav { width: 38px; height: 38px; }
  .brand-nav svg { width: 15px; height: 15px; }
}

/* Barra de progresso do carrossel — injetada via JS (initBrandTrack).
   Ocupa as 3 colunas do grid, numa linha nova abaixo da faixa. */
.brand-progress {
  grid-column: 1 / -1;
  height: 2px;
  margin-top: var(--space-2);
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.brand-progress-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: var(--accent);
  transition: width 300ms var(--ease-out);
}


/* ---------- Processo (com linha de progresso ligada ao scroll) ---------- */
.process-list { counter-reset: step; border-top: var(--border-w) solid var(--hairline); position: relative; }
.process-track {
  position: absolute;
  left: 1.65rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--hairline);
  pointer-events: none;
}
.process-track-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 120ms linear;
}
.process-list { perspective: 1200px; }
.process-item {
  --p: 0; /* 0 = ainda "entrando" pela base da viewport · 1 = assentado na linha de leitura */
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: var(--border-w) solid var(--hairline);
  position: relative;
  transform-origin: 50% 100%;
  transform: perspective(1000px)
             rotateX(calc((1 - var(--p)) * 16deg))
             translateY(calc((1 - var(--p)) * 26px))
             translateZ(calc((var(--p) - 1) * 60px));
  opacity: calc(0.4 + var(--p) * 0.6);
  will-change: transform, opacity;
}
.process-item .num {
  counter-increment: step;
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  color: var(--ash-dim);
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: color 320ms var(--ease-std), transform 320ms var(--ease-out);
}
.process-item .num::before { content: counter(step, decimal-leading-zero); }
.process-item.is-active .num { color: var(--accent-dim); transform: scale(1.1); }
.process-item h3 { font-size: var(--fs-h4); font-weight: 600; margin-bottom: 6px; }
.process-item p { color: var(--ash); max-width: 52ch; }
@media (max-width: 620px) {
  .process-item { grid-template-columns: 1fr; gap: var(--space-2); }
  .process-track { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .process-track-fill { transition: none; }
  .process-item { transform: none; opacity: 1; }
  .process-item .num { transition: color 1ms; }
  .process-item.is-active .num { transform: none; }
}

/* ---------- Video reel rail ---------- */
.reel-rail-outer { position: relative; }
.reel-rail {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.reel-rail::-webkit-scrollbar { height: 6px; }
.reel-rail::-webkit-scrollbar-thumb { background: var(--hairline-strong); }
.reel-rail-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 200px;
}
.reel-rail-item.is-landscape { width: 300px; }
.reel-frame {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  position: relative;
  aspect-ratio: 9 / 16;
  border: var(--border-w) solid var(--hairline);
  background: var(--steel);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-std);
}
.reel-rail-item.is-landscape .reel-frame { aspect-ratio: 16 / 9; }
.reel-frame:hover { border-color: var(--accent-dim); }
.reel-frame img, .reel-frame video { width: 100%; height: 100%; object-fit: cover; }
.reel-frame video { position: absolute; inset: 0; }
.reel-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, transparent 50%, rgba(10,20,19,0.9));
}
.reel-play .play-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(248,250,249,0.92);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-std);
}
.reel-frame:hover .play-btn { transform: scale(1.1); background: var(--accent); }
.reel-play svg { width: 16px; height: 16px; margin-left: 2px; }
.reel-rail-item figcaption {
  padding-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--fog);
}
.reel-rail-item figcaption .mono-tag { display: block; margin-top: 2px; }

/* ---------- Galeria masonry ---------- */
.gallery-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.gallery-filters button {
  padding: 0.55em 1.1em;
  border: var(--border-w) solid var(--hairline-strong);
  border-radius: var(--radius-action);
  font-size: var(--fs-caption);
  color: var(--fog);
  transition: all var(--dur-base) var(--ease-std);
}
.gallery-filters button:hover { color: var(--paper); border-color: var(--fog); }
.gallery-filters button.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Fundo de onda da galeria — camada decorativa fixa atrás da grade de fotos,
   nunca competindo com elas (por isso z-index abaixo + opacidade baixa; é
   a mesma cautela do .section-bg-photo: essa seção já é parede de fotos,
   então o efeito fica discreto, só um traço de cor). O padrão "onda" é um
   SVG tileável na cor de acento (--accent, o "verde-apatita" da marca); o
   deslocamento vertical (--wave-shift, atualizado via JS em main.js) segue
   a posição de scroll da página — sobe/desce junto com o visitante.
   #galeria já é position:relative via .section (base). */
.gallery-wave-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.gallery-wave-bg::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -20%; height: 140%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240' viewBox='0 0 480 240'%3E%3Cpath d='M0,120 C60,80 120,160 240,120 C360,80 420,160 480,120' stroke='%231fd6c9' stroke-width='3' fill='none'/%3E%3Cpath d='M0,170 C60,130 120,210 240,170 C360,130 420,210 480,170' stroke='%231fd6c9' stroke-width='2' fill='none' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 480px 240px;
  opacity: 0.12;
  transform: translateY(var(--wave-shift, 0px));
}
#galeria .wrap { position: relative; z-index: 1; }

.gallery-grid {
  columns: 4 240px;
  column-gap: var(--space-3);
}
@media (max-width: 700px) { .gallery-grid { columns: 2 160px; } }
.gallery-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  break-inside: avoid;
  margin-bottom: var(--space-3);
  border: var(--border-w) solid var(--hairline);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.gallery-item img {
  width: 100%; height: auto; display: block;
  transition: transform 500ms var(--ease-out), filter var(--dur-base) var(--ease-std);
  filter: grayscale(0.3) contrast(1.02);
}
.gallery-item:hover img { transform: scale(1.045); filter: grayscale(0) contrast(1.02); }
.gallery-item::after { content: ''; position: absolute; inset: 10px; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease-std), inset var(--dur-base) var(--ease-out); }
.gallery-item:hover::after { opacity: 1; inset: 8px; }
.gallery-item .tag {
  position: absolute; left: 8px; bottom: 8px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--on-dark); background: rgba(16,28,25,0.7);
  padding: 0.3em 0.6em; opacity: 0;
  transition: opacity var(--dur-base) var(--ease-std);
  letter-spacing: 0.04em;
}
.gallery-item:hover .tag { opacity: 1; }
.gallery-loadmore { display: flex; justify-content: center; margin-top: var(--space-6); }

/* ---------- Vitrine por marca — estilo marketplace: filtro lateral + grade única ---------- */
.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 860px) { .shop-layout { grid-template-columns: 1fr; gap: var(--space-4); } }

.shop-sidebar { position: sticky; top: 96px; }
@media (max-width: 860px) { .shop-sidebar { position: static; } }
.shop-sidebar-title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: var(--space-3);
}

.shop-filter-list { display: flex; flex-direction: column; border-top: var(--border-w) solid var(--hairline); }
@media (max-width: 860px) {
  .shop-filter-list { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); border-top: 0; }
}
.shop-filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.7em 0.9em 0.7em var(--space-3);
  border: 0;
  border-bottom: var(--border-w) solid var(--hairline);
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--fog);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std);
}
.shop-filter-btn:hover { color: var(--paper); background: var(--graphite); }
.shop-filter-btn.is-active { border-left-color: var(--accent-dim); color: var(--paper); background: var(--graphite); font-weight: 600; }
.shop-filter-count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ash);
  background: var(--steel-strong);
  border-radius: var(--radius-action);
  padding: 0.15em 0.6em;
  min-width: 1.8em;
  text-align: center;
}
.shop-filter-btn.is-active .shop-filter-count { color: var(--accent-dim); }
@media (max-width: 860px) {
  .shop-filter-btn { width: auto; border: var(--border-w) solid var(--hairline); border-left: var(--border-w) solid var(--hairline); border-radius: var(--radius-action); padding: 0.5em 0.5em 0.5em 0.9em; }
  .shop-filter-btn.is-active { border-color: var(--accent-dim); }
}

.shop-toolbar { margin-bottom: var(--space-4); }
.shop-result-count {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ash);
}

/* Cartão de produto: rótulo de categoria sempre visível (marketplace, não
   "photo wall") + botão de WhatsApp direto por peça, sobreposto ao card. */
.shop-grid .gallery-item .tag { opacity: 1; }
.gallery-item-wrap { position: relative; }
.gallery-item-wa {
  position: absolute;
  right: 8px; bottom: 8px;
  z-index: 1;
  width: 34px; height: 34px;
  border-radius: var(--radius-action);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--canvas-top);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-std);
}
.gallery-item-wa svg { width: 16px; height: 16px; }
.gallery-item-wa:hover { transform: scale(1.1); background: var(--accent-strong); }

/* Botão "adicionar à lista" — par ghost/outline do botão de WhatsApp
   preenchido acima (mesma lógica de par preenchido+ghost da V.6, só que na
   escala de um ícone por card em vez de um CTA de seção inteira). */
.gallery-item-cart {
  position: absolute;
  right: 8px; bottom: 48px;
  z-index: 1;
  width: 34px; height: 34px;
  border-radius: var(--radius-action);
  display: flex; align-items: center; justify-content: center;
  background: var(--steel);
  color: var(--accent-dim);
  border: 2px solid var(--accent-dim);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std);
}
.gallery-item-cart svg { width: 15px; height: 15px; }
.gallery-item-cart:hover { transform: scale(1.1); }
.gallery-item-cart.is-added { background: var(--accent-dim); color: var(--steel); }

/* ---------- Ações do cat-card: WhatsApp direto + adicionar à lista ---------- */
.cat-actions { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; display: flex; gap: var(--space-2); }
.cat-action-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-action);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--canvas-top);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std);
}
.cat-action-btn svg { width: 15px; height: 15px; }
.cat-action-btn:hover { transform: scale(1.1); }
.cat-action-wa { background: var(--accent); color: var(--accent-ink); }
.cat-action-wa:hover { background: var(--accent-strong); }
.cat-action-cart { background: var(--steel); color: var(--accent-dim); border-color: var(--accent-dim); }
.cat-action-cart.is-added { background: var(--accent-dim); color: var(--steel); }

/* ---------- Gatilho do carrinho no nav ---------- */
/* Botão só-ícone: sem isso ele herda o padding de botão-com-texto do .btn
   (0.9em 1.6em), ficando bem maior que o .nav-menu-btn ao lado (mesma
   função, mesmo formato) e inflando a altura inteira da pílula do nav —
   especialmente visível no mobile, onde a pílula toda ficava desproporcional. */
.cart-trigger {
  position: relative;
  width: 42px; height: 42px;
  padding: 0;
  flex-shrink: 0;
  justify-content: center;
}
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-dim); color: var(--on-dark);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.cart-badge[hidden] { display: none; }

/* ---------- Painel da lista de peças ---------- */
.cart-drawer {
  position: fixed; inset: 0; z-index: 330;
  display: flex; justify-content: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-std), visibility var(--dur-base);
}
.cart-drawer.is-open { opacity: 1; visibility: visible; }
.cart-drawer-backdrop { position: absolute; inset: 0; background: rgba(9,16,14,0.55); backdrop-filter: blur(3px); }
.cart-drawer-panel {
  position: relative; width: min(380px, 100%); height: 100%;
  background: var(--steel); border-left: var(--border-w) solid var(--hairline-strong);
  display: flex; flex-direction: column;
  transform: translateX(24px);
  transition: transform var(--dur-base) var(--ease-out);
}
.cart-drawer.is-open .cart-drawer-panel { transform: translateX(0); }
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: var(--border-w) solid var(--hairline); }
.cart-drawer-head h3 { font-size: var(--fs-h4); }
.cart-drawer-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-action); color: var(--fog); }
.cart-drawer-close:hover { color: var(--paper); }
.cart-drawer-close svg { width: 18px; height: 18px; }
.cart-drawer-list { flex: 1; overflow-y: auto; padding: 0 var(--space-4); }
.cart-drawer-empty { color: var(--ash); font-size: var(--fs-caption); padding: var(--space-5) 0; text-align: center; }
.cart-drawer-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--hairline);
}
.cart-drawer-row-label { font-size: var(--fs-caption); color: var(--paper); }
.cart-drawer-row-remove { flex-shrink: 0; color: var(--ash); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-action); }
.cart-drawer-row-remove:hover { color: var(--fog); background: var(--steel-strong); }
.cart-drawer-row-remove svg { width: 14px; height: 14px; }
.cart-drawer-footer { padding: var(--space-4); border-top: var(--border-w) solid var(--hairline); display: flex; flex-direction: column; gap: var(--space-2); }
.cart-drawer-footer .btn { width: 100%; justify-content: center; }
.cart-drawer-clear { background: none; color: var(--ash); font-size: var(--fs-micro); text-align: center; padding: var(--space-1); }
.cart-drawer-clear:hover { color: var(--fog); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9, 16, 14, 0.94);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-std), visibility var(--dur-base);
  padding: var(--space-5);
}
@media (prefers-reduced-transparency: reduce) {
  .lightbox { background: rgb(9, 16, 14); backdrop-filter: none; }
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-inner { position: relative; max-width: min(90vw, 900px); max-height: 88vh; }
.lightbox-inner img, .lightbox-inner video { max-width: 100%; max-height: 88vh; width: auto; border: var(--border-w) solid rgba(255,255,255,0.14); background: var(--scrim); }
.lightbox-close {
  position: absolute; top: -46px; right: 0;
  width: 36px; height: 36px;
  border: var(--border-w) solid rgba(255,255,255,0.24);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-dark);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-base);
}
.lightbox-close:hover { border-color: var(--accent); transform: rotate(90deg); }
.lightbox-caption { margin-top: var(--space-3); color: var(--on-dark); opacity: 0.75; font-size: var(--fs-caption); text-align: center; }

/* ---------- Popup de mega oferta (promos/promos.js) ----------
   Mesmo padrão de overlay do lightbox: fixo, opacity+visibility, backdrop
   escuro fixo (--scrim). z-index acima do lightbox — os dois nunca deveriam
   coexistir na prática, mas se coexistissem, a oferta é a intenção mais
   recente do usuário (fechou uma foto, ainda está vendo a oferta). */
.mega-offer {
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-std), visibility var(--dur-base);
}
.mega-offer.is-open { opacity: 1; visibility: visible; }
.mega-offer-backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 16, 14, 0.82);
  backdrop-filter: blur(6px);
}
@media (prefers-reduced-transparency: reduce) {
  .mega-offer-backdrop { background: rgb(9, 16, 14); backdrop-filter: none; }
}
.mega-offer-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  width: min(880px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--canvas-top);
  border: var(--border-w) solid var(--hairline-strong);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-out);
}
.mega-offer.is-open .mega-offer-card { transform: translateY(0) scale(1); }
@media (max-width: 700px) { .mega-offer-card { grid-template-columns: 1fr; } }
.mega-offer-close {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1;
  width: 36px; height: 36px;
  border: var(--border-w) solid rgba(255,255,255,0.5);
  background: rgba(9, 16, 14, 0.55);
  color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-base);
}
.mega-offer-close svg { width: 16px; height: 16px; }
.mega-offer-close:hover { border-color: var(--accent); transform: rotate(90deg); }
.mega-offer-media { position: relative; min-height: 200px; background: var(--steel); }
.mega-offer-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mega-offer-body { padding: var(--space-7) var(--space-6); display: flex; flex-direction: column; }
.mega-offer-body h3 { font-size: var(--fs-h3); font-weight: 500; margin-top: var(--space-2); }
.mega-offer-body .desc { color: var(--fog); margin-top: var(--space-3); max-width: 42ch; }
.mega-offer-price {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  color: var(--accent-dim);
  line-height: 1;
  margin-top: var(--space-3);
}
.mega-offer-price small { font-family: var(--font-mono); font-size: 0.35em; color: var(--ash); display: block; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4em; }
.mega-offer-timer { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.mega-offer-timer-box {
  flex: 1;
  border: var(--border-w) solid var(--hairline-strong);
  background: var(--graphite);
  padding: var(--space-2) var(--space-1);
  text-align: center;
}
.mega-offer-timer-box .val { display: block; font-family: var(--font-mono); font-size: var(--fs-h4); font-weight: 700; color: var(--accent-dim); font-variant-numeric: tabular-nums; }
.mega-offer-timer-box .lbl { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ash); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.mega-offer-body .btn { margin-top: var(--space-6); width: fit-content; }

/* Chip flutuante: fica visível depois que o popup é fechado, pra o timer
   continuar comunicando urgência sem interromper a navegação de novo — do
   lado oposto ao botão de WhatsApp (bottom-right) pra não competir com ele
   nem virar dois blocos sólidos da cor de ação (V.1, um único trabalho). */
.mega-offer-chip {
  position: fixed; left: var(--space-5); bottom: var(--space-5); z-index: 80;
  display: none;
  align-items: center; gap: var(--space-2);
  padding: 0.75em 1.2em 0.75em 0.85em;
  background: var(--steel); color: var(--paper);
  border: var(--border-w) solid var(--hairline-strong);
  border-radius: var(--radius-action);
  font-size: var(--fs-caption);
  transition: transform var(--dur-base) var(--ease-out);
}
.mega-offer-chip.is-visible { display: flex; }
.mega-offer-chip:hover { transform: translateY(-3px); }
.mega-offer-chip svg { width: 18px; height: 18px; color: var(--accent-dim); flex-shrink: 0; }
.mega-offer-chip strong { color: var(--accent-dim); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .mega-offer-chip-label { display: none; }
  .mega-offer-chip { left: var(--space-4); bottom: var(--space-4); padding: 0.75em; }
}

/* ---------- Seletor de contato do WhatsApp (chrome.js) ----------
   Pequeno, retangular, vertical — só uma lista de nomes, sem imagem nem
   descrição. z-index acima do mega-offer: pode ser aberto A PARTIR do botão
   "Consultar oferta" dentro do popup de oferta, então precisa desenhar por
   cima dele. */
.contact-picker {
  position: fixed; inset: 0; z-index: 340;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-std), visibility var(--dur-base);
}
.contact-picker.is-open { opacity: 1; visibility: visible; }
.contact-picker-backdrop { position: absolute; inset: 0; background: rgba(9, 16, 14, 0.82); backdrop-filter: blur(6px); }
@media (prefers-reduced-transparency: reduce) {
  .contact-picker-backdrop { background: rgb(9, 16, 14); backdrop-filter: none; }
}
.contact-picker-card {
  position: relative;
  width: min(340px, 100%);
  background: var(--canvas-top);
  border: var(--border-w) solid var(--hairline-strong);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-out);
}
.contact-picker.is-open .contact-picker-card { transform: translateY(0) scale(1); }
.contact-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: var(--border-w) solid var(--hairline);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash);
}
.contact-picker-close {
  width: 28px; height: 28px;
  border: var(--border-w) solid var(--hairline-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--fog);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-base);
}
.contact-picker-close svg { width: 13px; height: 13px; }
.contact-picker-close:hover { border-color: var(--accent-dim); color: var(--accent-dim); transform: rotate(90deg); }
.contact-picker-list { display: flex; flex-direction: column; }
.contact-picker-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-w) solid var(--hairline);
  transition: background var(--dur-base) var(--ease-std), padding-left var(--dur-base) var(--ease-out);
}
.contact-picker-row:last-child { border-bottom: 0; }
.contact-picker-row:hover { background: var(--graphite); padding-left: calc(var(--space-4) + 4px); }
.contact-picker-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dim);
  display: flex; align-items: center; justify-content: center;
}
.contact-picker-icon svg { width: 16px; height: 16px; }
.contact-picker-info { display: flex; flex-direction: column; gap: 2px; }
.contact-picker-name { font-weight: 600; color: var(--paper); }
.contact-picker-phone { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ash); }

/* ---------- FAQ ---------- */
.faq-list { border-top: var(--border-w) solid var(--hairline); }
.faq-item { border-bottom: var(--border-w) solid var(--hairline); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-5);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
}
.faq-q .plus {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: var(--border-w) solid var(--hairline-strong);
  border-radius: 50%;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.faq-q .plus::before, .faq-q .plus::after {
  content: ''; position: absolute; background: var(--fog);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-q .plus::before { width: 10px; height: 1px; }
.faq-q .plus::after { width: 1px; height: 10px; transition: opacity var(--dur-base); }
.faq-item.is-open .plus { border-color: var(--accent-dim); transform: rotate(135deg); }
.faq-item.is-open .plus::before, .faq-item.is-open .plus::after { background: var(--accent-dim); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-in-out);
}
.faq-a p { color: var(--ash); padding-bottom: var(--space-5); max-width: 60ch; }

/* ---------- CTA final ---------- */
/* Superfície escura deliberada — mesma exceção do nav (ver comentário em
   .nav-inner): é o ÚLTIMO gesto antes do rodapé, o momento de maior intenção
   de conversão da página, então ganha o mesmo contraste forte que separa o
   nav do resto do site em vez de se misturar com o canvas claro ao redor
   (antes disso, o card ficava quase invisível: fundo claro sobre página
   clara, só a borda fina denunciando onde ele começava). */
.cta-final {
  position: relative;
  /* Foto do estoque como textura de fundo de verdade (não só um véu
     escuro): o degradê fica por CIMA da foto (não substitui ela), opaco o
     bastante pra manter o texto legível, translúcido o bastante pra a
     foto real aparecer — é o "use essa foto no background da seção"
     original, só que dentro do card escuro em vez de vazar só pelas
     bordas dele (onde ficava discreto demais pra se notar). */
  background-image: linear-gradient(160deg, rgba(20, 35, 32, 0.9), rgba(16, 28, 25, 0.95)), url('../assets/img/estoque.webp');
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
  padding: var(--space-9) var(--space-6);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(9, 16, 14, 0.22);
}
.cta-final::before {
  content: '';
  position: absolute; inset: -40%;
  background: radial-gradient(circle at 50% 12%, var(--accent-glow), transparent 62%);
  pointer-events: none;
}
.cta-final .eyebrow { position: relative; color: var(--on-dark); margin-bottom: var(--space-3); }
.cta-final .eyebrow-bracket, .cta-final .eyebrow-mark { color: var(--accent); }
.cta-final h2 { font-size: var(--fs-h1); font-weight: 400; letter-spacing: var(--tr-h1); max-width: 22ch; margin-inline: auto; position: relative; color: var(--on-dark); }
.cta-final p { margin-top: var(--space-4); color: rgba(243, 246, 244, 0.72); font-size: var(--fs-body-lg); position: relative; max-width: 46ch; margin-inline: auto; }
.cta-final .hero-actions { justify-content: center; position: relative; margin-top: var(--space-6); }
.cta-final .btn-ghost { --btn-fg: var(--on-dark); --btn-border: rgba(255, 255, 255, 0.3); }
.cta-final .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.55); }

/* ---------- Footer ---------- */
.footer { border-top: var(--border-w) solid var(--hairline); padding-block: var(--space-8) var(--space-6); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
.footer-brand img { height: 30px; margin-bottom: var(--space-3); }
.footer-brand p { color: var(--ash); max-width: 32ch; font-size: var(--fs-caption); }
.footer-col h5 {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash);
  margin-bottom: var(--space-3);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { color: var(--fog); font-size: var(--fs-caption); transition: color var(--dur-base); }
.footer-col a:hover { color: var(--accent-dim); }
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.footer-social a {
  width: 36px; height: 36px;
  border: var(--border-w) solid var(--hairline-strong);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-base), color var(--dur-base), transform var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { border-color: var(--accent-dim); color: var(--accent-dim); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--ash);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 80;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.85em 1.3em 0.85em 0.85em;
  background: var(--steel); color: var(--accent-dim);
  border: var(--border-w) solid var(--accent-dim);
  border-radius: var(--radius-action);
  font-weight: 700; font-size: var(--fs-caption);
  transition: transform var(--dur-base) var(--ease-out);
}
.wa-float:hover { transform: translateY(-3px); }
.wa-float svg { width: 22px; height: 22px; }

/* ---------- Reveal utility (JS-driven) ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hover-only interactions gate ---------- */
@media not all and (hover: hover) and (pointer: fine) {
  .cat-spot { display: none; }
}

/* ---------- Blog: listagem ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.blog-card {
  display: flex; flex-direction: column;
  background: var(--steel); border: var(--border-w) solid var(--hairline);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out);
}
.blog-card:hover { transform: translateY(-4px); }
.blog-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.blog-card:hover .blog-card-media img { transform: scale(1.05); }
.blog-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.blog-card-meta {
  display: flex; gap: var(--space-3); align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ash);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.blog-card-meta .blog-tag { color: var(--accent-dim); }
.blog-card-body h3 { font-size: var(--fs-h4); line-height: 1.25; }
.blog-card-body p { color: var(--fog); font-size: var(--fs-caption); flex: 1; }
.blog-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent-dim); font-weight: 600; font-size: var(--fs-caption); }
.blog-card-link svg { width: 16px; height: 16px; }

/* ---------- Blog: artigo ---------- */
.article { max-width: 42rem; margin-inline: auto; }
.article-meta {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ash);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3);
}
.article-meta .blog-tag { color: var(--accent-dim); }
.article h1 { font-size: var(--fs-h1); margin-bottom: var(--space-4); }
.article-excerpt { color: var(--fog); font-size: var(--fs-body-lg); margin-bottom: var(--space-5); }
.article-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: var(--space-6); border: var(--border-w) solid var(--hairline); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-body { color: var(--fog); font-size: var(--fs-body-lg); line-height: 1.7; }
.article-body p { margin-bottom: var(--space-4); }
.article-body ul { margin: 0 0 var(--space-4) var(--space-5); }
.article-body li { margin-bottom: var(--space-2); }
.article-body strong { color: var(--paper); }

/* Seções retráteis do artigo — mesmo padrão visual/interativo do card de
   categoria (.cat-toggle) e do FAQ (.faq-item): "+" que vira "×" ao abrir,
   altura animada via max-height. Diferença de propósito: aqui cada seção
   abre JÁ ABERTA (o artigo é o conteúdo principal da página, não uma lista
   pra escanear) — o botão serve pra RECOLHER o que já foi lido num artigo
   longo, não pra esconder conteúdo de quem acabou de chegar (isso também
   mantém o texto inteiro no DOM/visível pra SEO on-load). Cada seção abre/
   fecha de forma independente — não é acordeão de exclusividade mútua como
   o FAQ, porque faz sentido ler vários blocos abertos ao mesmo tempo. */
.article-section { border-bottom: var(--border-w) solid var(--hairline); }
.article-section:last-of-type { border-bottom: none; }
.article-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-5) var(--space-4);
  text-align: left;
}
.article-toggle h2 { font-size: var(--fs-h3); color: var(--paper); margin: 0; }
.article-toggle .plus {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: var(--border-w) solid var(--hairline-strong);
  border-radius: 50%;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.article-toggle .plus::before, .article-toggle .plus::after {
  content: ''; position: absolute; background: var(--fog);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.article-toggle .plus::before { width: 10px; height: 1px; }
.article-toggle .plus::after { width: 1px; height: 10px; transition: opacity var(--dur-base); }
.article-section.is-open .article-toggle .plus { border-color: var(--accent-dim); transform: rotate(135deg); }
.article-section.is-open .article-toggle .plus::before, .article-section.is-open .article-toggle .plus::after { background: var(--accent-dim); }
/* max-height:none por padrão (sem JS, o texto continua 100% visível e
   indexável — diferente do .faq-a/.cat-collapse, aqui esconder por padrão
   seria esconder o conteúdo principal da própria página). O JS troca isso
   por um valor em px explícito (scrollHeight) assim que roda, aí sim
   animável até 0 quando o leitor recolhe a seção. */
.article-collapse { max-height: none; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-in-out); }
.article-collapse-body { padding-bottom: var(--space-5); }
.article-collapse-body > *:last-child { margin-bottom: 0; }
.article-cta { margin-top: var(--space-7); padding: var(--space-5); background: var(--graphite); border: var(--border-w) solid var(--hairline); text-align: center; }
.article-cta p { color: var(--paper); margin-bottom: var(--space-3); font-size: var(--fs-body); }
.article-cta .hero-actions { justify-content: center; }
.article-back { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fog); font-size: var(--fs-caption); margin-top: var(--space-6); }
.article-back:hover { color: var(--accent-dim); }
.article-back svg { width: 16px; height: 16px; }