/* =====================================================================
   TFORCE × GIRAFA BRASIL — PROTÓTIPO D5 "ATELIÊ-LOJA"
   Híbrido: identidade visual do D2 (Ateliê Premium) sobre a estrutura
   e a máquina de conversão do D4 (Marketplace). Vanilla, sem build.
   ---------------------------------------------------------------------
   - Pele D2: marrom-carvão quente + latão/cobre/oxblood, Fraunces serif,
     cantos quase retos (editorial), CTA dourado.
   - Esqueleto D4: campanha+countdown, tiles de categoria (aqui no HERO),
     cards de produto enxutos com add-to-cart, kits, carrinho lateral,
     barra de frete grátis, filtros facetados.
   ---------------------------------------------------------------------
   Sumário:
     0.  Tokens (paleta D2, tipografia, espaço, forma)
     1.  Reset & base
     2.  Tipografia & utilitários
     3.  Marca: girafa + wordmark angular
     4.  Botões & badges
     5.  Faixa de campanha (countdown) — oxblood
     6.  Header / mega-menu (com foto destaque) / busca / carrinho
     7.  Drawer mobile
     8.  Mini-carrinho lateral
     9.  HERO "Compre por categoria" (tiles)
     10. Faixa de confiança
     11. Bento de capacidades (contadores)
     12. Equipamentos em destaque (cards enxutos)
     13. Girafa Brasil (bloco sensorial)
     14. Para Começar (kits)
     15. A dupla por trás da máquina
     16. Depoimentos
     17. Galeria UGC
     18. Conteúdo / autoridade + CTA final
     19. Rodapé
     20. Páginas interiores — loja facetada + sub-nav + PDP
     21. Reveal / toast / animações
     22. Responsivo
   ===================================================================== */

/* =====================================================================
   0. TOKENS — paleta D2 mapeada nos nomes de variável do esqueleto D4
   ===================================================================== */
:root {
  /* Fundo e superfícies (D2) */
  --bg:        #14110E;   /* marrom-carvão quente */
  --surface:   #1E1A15;
  --card:      #2A241D;
  --card-2:    #231E18;
  --card-hi:   #322B22;

  /* Texto (D2) */
  --text:      #F2EDE4;   /* marfim */
  --muted:     #B8AC99;
  --faint:     #8A7F6E;

  /* Acentos (D2) — primária = dourado/latão; sem vermelho-forja */
  --forge:     #C8A24A;   /* PRIMÁRIA: CTA/preço (latão fosco) — herda o nome do D4 */
  --forge-700: #9A7B2E;   /* hover da primária */
  --gold:      #C8A24A;   /* dourado-assinatura (girafa) */
  --gold-soft: #D8B968;   /* realce de texto / preços */
  --amber:     #D8B968;   /* etiquetas (mapeado p/ dourado claro) */
  --copper:    #B06A3C;   /* secundária: cobre/bronze (eyebrows, rules) */
  --steel:     #5A7184;   /* aço azulado: "novo"/specs/Damasco */
  --steel-soft:#8298A9;
  --oxblood:   #6E2A24;   /* edição limitada / urgência / promo */
  --oxblood-soft:#9A3A31;
  --teal:      #5A7184;   /* compat. D4 ("novo") → aço azulado */
  --promo:     #9A3A31;   /* compat. D4 (promo) → oxblood */
  --stock:     #9CA86B;   /* sucesso/em estoque — sálvia discreta (harmoniza no quente) */
  --line:      #3A332A;
  --line-soft: #2C271F;

  /* Girafa recolorida p/ a pele D2 */
  --gm-1:   var(--gold);    /* cabeça */
  --gm-2:   var(--copper);  /* chifres/orelhas */
  --gm-3:   var(--oxblood); /* manchas */
  --gm-ink: var(--bg);      /* olhos/narinas */

  /* Tipografia (D2) */
  --display: "Fraunces", "Georgia", serif;
  --sans:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "Space Mono", "Courier New", monospace;

  /* Forma — cantos quase retos (editorial D2) */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 8px;
  --r-xl: 10px;

  /* Sombra quente (D2) */
  --shadow:    0 2px 12px rgba(0,0,0,.35);
  --shadow-lg: 0 22px 60px -22px rgba(0,0,0,.7);
  --glow-gold: 0 0 0 1px rgba(200,162,74,.4), 0 14px 40px -18px rgba(200,162,74,.5);

  /* Layout */
  --maxw: 1280px;
  --gap:  clamp(16px, 2vw, 28px);
  --pad:  clamp(18px, 5vw, 64px);

  /* Transições */
  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* =====================================================================
   1. RESET & BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--copper) var(--surface);
  /* contém o drawer off-canvas (position:fixed) sem estourar a rolagem */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* brilhos quentes de ateliê por trás da página (cobre/latão/oxblood) */
  background-image:
    radial-gradient(1100px 640px at 88% -8%, rgba(176,106,60,.13), transparent 60%),
    radial-gradient(820px 520px at 6% 6%, rgba(200,162,74,.09), transparent 60%),
    radial-gradient(760px 620px at 50% 120%, rgba(110,42,36,.11), transparent 60%);
  background-attachment: fixed;
}

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

:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 12px; top: -100px;
  background: var(--gold); color: #20180A; padding: 12px 18px;
  border-radius: var(--r-sm); font-weight: 700; z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

.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;
}

/* =====================================================================
   2. TIPOGRAFIA & UTILITÁRIOS
   ===================================================================== */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(56px, 8vw, 116px); position: relative; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--text);
  font-optical-sizing: auto;
}
em { font-style: italic; color: var(--gold-soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--copper);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--copper), transparent);
}

.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head h2 { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.3rem); margin-top: 16px; }
.section-head p { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.16rem); margin-top: 16px; max-width: 60ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p { margin-inline: auto; }

section[id] { scroll-margin-top: 96px; }

/* preço: valor em serif dourado (vibe D2); rótulos/qty/tabelas em mono */
.price { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; color: var(--gold-soft); }
.text-forge, .text-amber, .text-gold { color: var(--gold-soft); }
.text-teal, .text-steel { color: var(--steel-soft); }
.text-stock { color: var(--stock); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* ênfase de texto comercial — gradiente quente sutil (latão→cobre) */
.grad-text {
  background: linear-gradient(96deg, var(--gold-soft) 0%, var(--copper) 70%, var(--oxblood-soft) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =====================================================================
   3. MARCA: girafa + wordmark angular
   ===================================================================== */
.girafa-mark { width: 34px; height: auto; flex: none; }
img.girafa-mark { width: 34px; height: 35px; object-fit: contain; display: block; }
.girafa-brand img.girafa-mark { width: 56px; height: 57px; }
.cart-empty img.girafa-mark { width: 66px; height: 67px; opacity: .55; }

.logo {
  display: inline-flex; align-items: center; gap: 11px;
  --gm-1: var(--gold); --gm-2: var(--copper); --gm-3: var(--oxblood); --gm-ink: var(--bg);
}
.logo .wordmark {
  font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  letter-spacing: .01em; line-height: 1; color: var(--text);
  position: relative; padding-right: 3px;
  display: inline-flex; align-items: baseline;
}
/* chanfro de lâmina no "T" */
.logo .wordmark .t-blade {
  color: var(--gold);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 0 100%);
  display: inline-block; position: relative;
}
.logo .wordmark .t-blade::after {
  content: ""; position: absolute; right: -1px; top: 8%; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--copper)); transform: skewX(-18deg);
}
.logo .sub, .logo .wordmark .sub {
  display: block; font-family: var(--mono); font-size: .5rem; letter-spacing: .3em;
  color: var(--copper); text-transform: uppercase; margin-top: 3px;
}
/* Logo OFICIAL cromado "T FORCE" (logo-tforce-wix.png) — marca real da TFORCE.
   A girafa dourada é a marca da Girafa Brasil (sub-marca), não da TFORCE. */
.logo .brand-logo, img.brand-logo {
  height: clamp(27px, 2.4vw, 33px); width: auto; display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
  transition: transform .4s var(--ease-out);
}
.logo:hover .brand-logo { transform: translateY(-1px); }
.site-footer .logo .brand-logo { height: 30px; }
.drawer-head .logo .brand-logo { height: 28px; }

/* porta-imagem: moldura clara p/ foto de produto (fundo branco) no tema escuro */
.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-fig.has-photo, .gm-tile.has-photo, .ugc-item.has-photo,
.auth-fig.has-photo, .hero-fig.has-photo, .pdp-main.has-photo, .pdp-thumb.has-photo {
  background: radial-gradient(120% 90% at 50% 18%, #f4f1ec, #d9d2c6 78%);
}
.mega-feature .mega-fig.has-photo { background: radial-gradient(120% 90% at 50% 18%, #f1ece4, #d3ccbe); }
/* arte transparente (PNG) sobre fundo escuro intencional — sem moldura branca */
.pc-fig.is-art, .hero-fig.is-art, .mega-feature .mega-fig.is-art, .pdp-main.is-art {
  background: radial-gradient(120% 90% at 70% 20%, rgba(200,162,74,.2), transparent 60%),
              linear-gradient(150deg, #241f18, #16120d 72%);
}
.pc-fig.is-art .photo, .hero-fig.is-art .photo, .mega-feature .mega-fig.is-art .photo,
.pdp-main.is-art .photo { object-fit: contain; }

/* =====================================================================
   4. BOTÕES & BADGES
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 24px; border-radius: var(--r-sm);
  font-family: var(--sans); font-weight: 600; font-size: .96rem; letter-spacing: .01em;
  border: 1px solid transparent; position: relative; overflow: hidden;
  white-space: nowrap; text-align: center;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), background .3s var(--ease), color .25s, border-color .3s;
}
.btn svg { width: 18px; height: 18px; }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #20180A; box-shadow: 0 8px 24px -10px rgba(200,162,74,.55);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--gold), var(--forge-700)); transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(200,162,74,.6); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }

/* "amber" (D4) → CTA dourado claro alternativo */
.btn-amber { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #20180A; box-shadow: 0 8px 24px -10px rgba(200,162,74,.5); }
.btn-amber:hover { transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(176,106,60,.08); border-color: var(--copper); color: var(--gold-soft); transform: translateY(-2px); }

.btn-wa { background: #1faf54; color: #fff; }
.btn-wa:hover { background: #25c462; transform: translateY(-2px); }

.btn-sm { min-height: 42px; padding: 9px 18px; font-size: .9rem; }
.btn-block { width: 100%; }

/* link editorial com underline animado */
.link-u { position: relative; color: var(--gold-soft); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.link-u::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }
.link-u .arr { transition: transform .35s var(--ease); }
.link-u:hover .arr { transform: translateX(4px); }

/* Badges de produto/categoria — paleta quente */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; line-height: 1;
}
.badge.hot   { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #20180A; }           /* carro-chefe */
.badge.free  { background: rgba(90,113,132,.16);  color: var(--steel-soft); border: 1px solid rgba(90,113,132,.42); } /* frete grátis */
.badge.new   { background: rgba(176,106,60,.16);  color: #E0A877;          border: 1px solid rgba(176,106,60,.45); } /* novidade */
.badge.last  { background: linear-gradient(180deg, var(--oxblood-soft), var(--oxblood)); color: #F3D9D5; }    /* últimas */
.badge.amber { background: rgba(200,162,74,.16);  color: var(--gold-soft);  border: 1px solid rgba(200,162,74,.42); }
.badge.dot   { width: 7px; height: 7px; border-radius: 50%; padding: 0; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .72rem; font-weight: 400;
  letter-spacing: .04em; color: var(--muted);
  padding: 8px 13px; border-radius: 999px;
  background: rgba(42,36,29,.5); border: 1px solid var(--line);
}
.pill svg { width: 16px; height: 16px; color: var(--copper); }

/* selo com ponto (vibe D2) */
.seal { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); background: rgba(42,36,29,.5); padding: 7px 13px; border-radius: 999px; white-space: nowrap; }
.seal .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(200,162,74,.18); }
.seal.steel .dot { background: var(--steel); box-shadow: 0 0 0 3px rgba(90,113,132,.25); }
.seal.ox .dot { background: var(--oxblood-soft); box-shadow: 0 0 0 3px rgba(110,42,36,.3); }

/* =====================================================================
   5. FAIXA DE CAMPANHA (countdown) — oxblood (substitui o arco-íris do D4)
   ===================================================================== */
.campaign {
  background: linear-gradient(90deg, var(--oxblood), #4f1d18 55%, var(--oxblood));
  color: #F3D9D5; font-family: var(--mono); font-size: .78rem; text-align: center;
  position: relative; overflow: hidden;
}
.campaign .wrap { display: flex; align-items: center; justify-content: center; gap: 14px; padding-block: 8px; flex-wrap: wrap; }
.campaign strong { font-weight: 700; letter-spacing: .06em; }
.campaign .countdown {
  font-weight: 700; background: rgba(20,17,14,.7); color: var(--gold-soft);
  padding: 3px 10px; border-radius: 6px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.campaign a { text-decoration: underline; text-underline-offset: 3px; }
.campaign a:hover { color: #fff; }

/* =====================================================================
   6. HEADER / MEGA-MENU (com foto destaque) / BUSCA / CARRINHO
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(20,17,14,.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.scrolled { background: rgba(20,17,14,.93); border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); min-height: 72px; padding-block: 10px; }

.main-nav { display: none; }
@media (min-width: 1024px) { .main-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; } }

.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 14px; border-radius: var(--r-sm); font-weight: 500; font-size: .93rem;
  color: var(--text); transition: color .2s, background .2s;
}
.nav-link:hover, .nav-item.open .nav-link, .nav-item[aria-expanded="true"] .nav-link {
  color: var(--gold-soft); background: rgba(176,106,60,.08);
}
.nav-link .chev { width: 13px; height: 13px; transition: transform .25s var(--ease); opacity: .6; }
.nav-item.open .nav-link .chev { transform: rotate(180deg); }

/* Mega-menu com coluna(s) de links + cartão de foto destaque */
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(760px, 88vw); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease-out), visibility .24s; z-index: 95;
}
.mega::before { content: ""; position: absolute; top: -7px; left: 50%; width: 13px; height: 13px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.nav-item.open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* teclado / sem-JS: revela o mega ao focar qualquer item do nav (espelha .open) */
.nav-item:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 24px; }
.mega-grid.two { grid-template-columns: 1.2fr 1.05fr; }
.mega-col .mega-h { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); margin-bottom: 12px; font-weight: 400; }
.mega-links { display: grid; gap: 2px; }
.mega-links a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-inline: -10px; border-radius: var(--r-sm); color: var(--muted); font-size: .92rem; transition: background .18s, color .18s, padding .18s; }
.mega-links a:hover { background: var(--card); color: var(--gold-soft); padding-left: 16px; }
.mega-links a .tag { margin-left: auto; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; color: var(--gold); }

/* Cartão de foto destaque dentro do mega-menu (pedido: dropdown com foto de produto) */
.mega-feature {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line); min-height: 188px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; color: var(--text); text-decoration: none;
  background: linear-gradient(150deg, #241f18, #16120d);
  transition: border-color .25s var(--ease), transform .25s var(--ease-out);
}
.mega-feature:hover { border-color: var(--copper); transform: translateY(-2px); }
.mega-feature .mega-fig { position: absolute; inset: 0; }
.mega-feature .mega-fig .photo { transition: transform 1s var(--ease-out); }
.mega-feature:hover .mega-fig .photo:not(.contain) { transform: scale(1.06); }
.mega-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(20,17,14,.88)); }
.mega-feature .mega-tagline { position: relative; z-index: 2; font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 6px; }
.mega-feature .mega-ft { position: relative; z-index: 2; display: block; font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.mega-feature p { position: relative; z-index: 2; font-size: .82rem; color: var(--muted); margin-top: 4px; }

.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
@media (min-width: 1024px) { .header-actions { margin-left: 0; } }

.search-box { display: none; }
@media (min-width: 1180px) {
  .search-box { display: flex; align-items: center; gap: 8px; min-width: 220px; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; transition: border-color .2s, box-shadow .2s; }
  .search-box:focus-within { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(200,162,74,.16); }
  .search-box input { background: none; border: none; outline: none; width: 100%; font-size: .9rem; }
  .search-box svg { width: 18px; height: 18px; color: var(--copper); flex: none; }
}

.icon-btn {
  position: relative; width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center;
  color: var(--text); background: rgba(255,255,255,.02); border: 1px solid var(--line);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.icon-btn:hover { background: rgba(176,106,60,.1); border-color: var(--copper); color: var(--gold-soft); transform: translateY(-1px); }
.icon-btn svg { width: 21px; height: 21px; }

.cart-btn { gap: 8px; width: auto; padding-inline: 14px; }
.cart-btn .cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--gold); color: var(--bg); border-radius: 999px;
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg);
  transition: transform .25s var(--ease);
}
.cart-btn.bump .cart-count { animation: bump .4s var(--ease); }
@keyframes bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.45); } }

.burger { display: grid; }
@media (min-width: 1024px) { .burger { display: none; } }

/* =====================================================================
   7. DRAWER MOBILE
   ===================================================================== */
.scrim { position: fixed; inset: 0; background: rgba(8,6,4,.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; z-index: 100; }
.scrim.open, .scrim.show { opacity: 1; visibility: visible; }

.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(400px, 90vw); background: var(--surface); border-left: 1px solid var(--line); z-index: 110; transform: translateX(100%); transition: transform .36s var(--ease-out); display: flex; flex-direction: column; overflow-y: auto; box-shadow: var(--shadow-lg); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.drawer-nav { padding: 14px 16px 22px; display: grid; gap: 4px; }
.drawer-nav > a, .drawer-acc > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px; border-radius: var(--r); font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--text); text-align: left; }
.drawer-nav > a:hover, .drawer-acc > button:hover { background: rgba(176,106,60,.08); }
.drawer-acc > button .chev { width: 16px; height: 16px; color: var(--copper); transition: transform .25s var(--ease); }
.drawer-acc.open > button .chev { transform: rotate(180deg); }
.drawer-acc-body { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.drawer-acc.open .drawer-acc-body { max-height: 520px; }
.drawer-acc-body a { display: block; padding: 11px 14px 11px 28px; color: var(--muted); font-size: .95rem; border-left: 1px solid var(--line); margin-left: 14px; }
.drawer-acc-body a:hover { color: var(--gold-soft); border-color: var(--copper); }
.drawer-foot { margin-top: auto; padding: 18px 22px 26px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer-seals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* =====================================================================
   8. MINI-CARRINHO LATERAL
   ===================================================================== */
.cart-drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(420px, 94vw); background: var(--surface); border-left: 1px solid var(--line); z-index: 130; transform: translateX(100%); transition: transform .36s var(--ease-out); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.cart-head h3 { font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
.cart-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.cart-empty { text-align: center; color: var(--muted); padding: 48px 18px; display: grid; gap: 14px; justify-items: center; }

.cart-item { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
.cart-thumb { width: 62px; height: 62px; border-radius: var(--r-sm); overflow: hidden; }
.cart-item .ci-name { font-weight: 700; font-size: .92rem; line-height: 1.2; }
.cart-item .ci-meta { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.cart-item .ci-price { font-family: var(--mono); font-weight: 700; color: var(--gold-soft); font-size: .88rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; }
.qty button { width: 26px; height: 26px; border-radius: var(--r-sm); background: rgba(255,255,255,.04); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; line-height: 1; }
.qty button:hover { background: rgba(176,106,60,.12); border-color: var(--copper); }
.qty span { font-family: var(--mono); min-width: 22px; text-align: center; font-weight: 700; }
.ci-remove { color: var(--faint); align-self: start; padding: 4px; border-radius: var(--r-sm); }
.ci-remove:hover { color: var(--oxblood-soft); }
.ci-remove svg { width: 16px; height: 16px; }

.cart-foot { border-top: 1px solid var(--line); padding: 18px 20px 22px; display: grid; gap: 12px; }
.cart-line { display: flex; justify-content: space-between; align-items: baseline; }
.cart-line .price { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--gold-soft); }
.cart-line.total { font-size: 1.12rem; font-weight: 700; font-family: var(--display); }
.cart-line.total .price { color: var(--gold-soft); font-size: 1.2rem; }
.cart-trust { display: flex; align-items: center; gap: 8px; color: var(--stock); font-size: .8rem; font-weight: 600; }
.cart-trust svg { width: 16px; height: 16px; }
.free-ship-bar { height: 8px; border-radius: 999px; background: var(--card); overflow: hidden; }
.free-ship-bar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--copper), var(--gold)); transition: width .5s var(--ease); }

/* =====================================================================
   9. HERO "COMPRE POR CATEGORIA"  (tiles como CTA principal)
   ===================================================================== */
.hero-cat { padding-block: clamp(32px, 5vw, 60px) clamp(36px, 5vw, 64px); position: relative; }
.hero-cat-head { display: grid; gap: 22px; align-items: end; margin-bottom: clamp(26px, 3.5vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero-cat-head { grid-template-columns: 1.5fr 1fr; } }
.hero-cat-head .eyebrow { margin-bottom: 18px; }
.hero-cat h1 { font-size: clamp(2.3rem, 1.3rem + 5vw, 4.6rem); line-height: .98; letter-spacing: -.02em; }
.hero-cat h1 em { display: inline; }
.hero-cat .hero-sub { color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.24rem); margin-top: 18px; max-width: 52ch; }
.hero-cat-aside { display: grid; gap: 14px; align-content: end; }
.hero-cat-aside .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px; }
.proof-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--muted); background: rgba(42,36,29,.5); border: 1px solid var(--line); padding: 8px 13px; border-radius: 999px; }
.proof-chip svg { width: 16px; height: 16px; color: var(--gold); }

/* tiles de categoria */
/* 4 tiles (Equipment largo + 3): 2×2 no mobile/tablet; 1 linha de 5 colunas no
   desktop, onde o Equipment ocupa 2 (span 2) — total 5 unidades = grade cheia */
.tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(5, 1fr); } }

.tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 172px;
  padding: 18px; display: flex; flex-direction: column; justify-content: space-between;
  color: #20180A; isolation: isolate; border: 1px solid rgba(0,0,0,.18);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tile .tile-bg { position: absolute; inset: 0; z-index: -1; }
/* o SVG do fundo precisa preencher 100% do tile (com slice) — senão, em telas
   estreitas o tile fica "metade pintado, metade preto" (viewBox mais baixo que o card) */
.tile .tile-bg svg { width: 100%; height: 100%; display: block; }
.tile .tile-icon { width: 40px; height: 40px; }
.tile h3 { font-size: 1.14rem; color: inherit; font-weight: 600; }
.tile .tile-meta { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .04em; opacity: .82; }
.tile .tile-arrow { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: rgba(20,17,14,.16); display: grid; place-items: center; transition: transform .3s var(--ease), background .3s; }
.tile:hover .tile-arrow { transform: rotate(-45deg); background: rgba(20,17,14,.3); }
@media (min-width: 1024px) { .tile.wide { grid-column: span 2; } }
/* tiles escuros (variação para "ver tudo") */
.tile.dark { color: var(--text); border-color: var(--line); background: linear-gradient(150deg, var(--card), var(--surface)); }
.tile.dark .tile-arrow { background: rgba(255,255,255,.06); }

/* =====================================================================
   10. FAIXA DE CONFIANÇA
   ===================================================================== */
.trustbar { border-block: 1px solid var(--line); background: var(--surface); }
.trustbar .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: center; padding-block: 16px; }
.trust-item { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; color: var(--muted); }
.trust-item svg { width: 19px; height: 19px; color: var(--gold); flex: none; }
.trust-item strong { color: var(--text); font-weight: 700; }

/* =====================================================================
   11. BENTO DE CAPACIDADES (contadores)
   ===================================================================== */
.bento { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(4, 1fr); } }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px; position: relative; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.stat-card:hover { transform: translateY(-4px); border-color: var(--copper); }
.stat-card .stat-ico { width: 36px; height: 36px; margin-bottom: 16px; color: var(--gold); }
.stat-num { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; letter-spacing: -.02em; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.stat-num .suffix { color: var(--copper); }
.stat-label { color: var(--muted); font-size: .92rem; margin-top: 8px; }
.stat-card.accent { background: radial-gradient(120% 120% at 100% 0%, rgba(176,106,60,.18), transparent 55%), var(--card); border-color: rgba(176,106,60,.32); }

/* =====================================================================
   12. EQUIPAMENTOS EM DESTAQUE — cards ENXUTOS (pedido do cliente)
   ===================================================================== */
.products { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.product-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .35s var(--ease-out), border-color .3s, box-shadow .3s; }
.product-card:hover { transform: translateY(-6px); border-color: var(--copper); box-shadow: var(--shadow-lg); }
.pc-fig { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.pc-fig .photo { transition: transform .9s var(--ease-out); }
.product-card:hover .pc-fig .photo:not(.contain) { transform: scale(1.04); }
.pc-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pc-fav { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(20,17,14,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; color: var(--text); transition: color .2s, transform .2s, background .2s; }
.pc-fav:hover { color: var(--oxblood-soft); transform: scale(1.1); }
.pc-fav svg { width: 19px; height: 19px; }
.pc-fav.active { color: var(--oxblood-soft); }
/* corpo enxuto: categoria, nome, estoque, preço+ação — specs ficam discretas/ocultáveis */
.pc-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pc-cat { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-soft); }
.pc-name { font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.12; }
.pc-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-specs .spec { font-family: var(--mono); font-size: .64rem; color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; }
/* card enxuto: mostra no máx. 2 specs (oculta o excedente para reduzir poluição) */
.pc-specs.lean .spec:nth-child(n+3) { display: none; }
.pc-stock { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; }
.pc-stock.in { color: var(--stock); }
.pc-stock.low { color: var(--gold-soft); }
.pc-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pc-price .price { font-size: 1.32rem; display: block; }
.pc-price .old { font-family: var(--mono); font-size: .8rem; color: var(--faint); text-decoration: line-through; }
.pc-price .from { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); display: block; }
.pc-price .price.consult { font-size: 1.05rem; color: var(--steel-soft); }
.pc-add { width: 46px; height: 46px; border-radius: var(--r); flex: none; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #20180A; display: grid; place-items: center; box-shadow: 0 8px 20px -10px rgba(200,162,74,.6); transition: transform .2s var(--ease), box-shadow .2s; }
.pc-add:hover { transform: translateY(-2px) scale(1.04); }
.pc-add svg { width: 22px; height: 22px; }
.pc-add.added { background: var(--stock); color: #15170d; }

/* =====================================================================
   13. GIRAFA BRASIL (bloco sensorial — modelo D4)
   ===================================================================== */
.girafa-block { border-radius: var(--r-xl); overflow: hidden; position: relative; background: linear-gradient(150deg, #1f180f, #271c10 55%, #16120b); border: 1px solid rgba(200,162,74,.26); }
.girafa-inner { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 920px) { .girafa-inner { grid-template-columns: 1.05fr 1fr; } }
.girafa-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.girafa-brand .gb-word { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: .02em; }
.girafa-brand .gb-by { font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; color: var(--gold); text-transform: uppercase; }
.girafa-block h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.girafa-block h2 em, .girafa-block .text-gold { color: var(--gold-soft); }
.girafa-block > .girafa-inner > div > p { color: #d7ccb6; margin-top: 14px; max-width: 48ch; }
.girafa-materials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gm-tile { border-radius: var(--r); overflow: hidden; aspect-ratio: 1 / 1; position: relative; border: 1px solid rgba(200,162,74,.2); }
.gm-tile .photo, .gm-tile svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.1s var(--ease-out); }
.gm-tile:hover .photo:not(.contain) { transform: scale(1.06); }
.gm-tile .gm-label { position: absolute; left: 12px; bottom: 10px; right: 12px; font-family: var(--display); font-weight: 600; font-size: .98rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7); z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.gm-tile .gm-label small { font-family: var(--mono); font-size: .62rem; color: var(--gold-soft); font-weight: 700; }
.gm-unique { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--mono); font-size: .76rem; color: var(--gold-soft); letter-spacing: .06em; }
.gm-unique svg { width: 16px; height: 16px; }

/* =====================================================================
   14. PARA COMEÇAR (kits)
   ===================================================================== */
.kits { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 760px) { .kits { grid-template-columns: repeat(3, 1fr); } }
.kit-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.kit-card:hover { transform: translateY(-5px); border-color: var(--copper); }
.kit-card.featured { border-color: var(--gold); background: radial-gradient(120% 130% at 100% 0%, rgba(200,162,74,.16), transparent 55%), var(--card); }
.kit-card .kit-tag { align-self: flex-start; }
.kit-card h3 { font-size: 1.35rem; }
.kit-card .kit-for { font-family: var(--mono); font-size: .76rem; color: var(--steel-soft); font-weight: 400; letter-spacing: .04em; }
.kit-list { display: grid; gap: 9px; margin: 4px 0; }
.kit-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); }
.kit-list li svg { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: 2px; }
.kit-price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.kit-price .price { font-size: 1.7rem; }
.kit-price .from { font-family: var(--mono); font-size: .68rem; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }

/* =====================================================================
   15. A DUPLA POR TRÁS DA MÁQUINA (trunfo nº 1)
   ===================================================================== */
.duo { position: relative; }
.duo-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 940px) { .duo-grid { grid-template-columns: .95fr 1.05fr; } }
.duo-portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; }
.portrait { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 4; position: relative; border: 1px solid var(--line); background: var(--card); }
.portrait svg, .portrait .photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait .p-tag { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; background: rgba(20,17,14,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.portrait .p-tag strong { font-family: var(--display); font-weight: 600; font-size: .98rem; display: block; }
.portrait .p-tag span { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.portrait.eng { margin-top: 34px; }
.duo-plus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, var(--gold-soft), var(--copper)); color: #20180A; font-family: var(--display); font-weight: 600; font-size: 1.5rem; box-shadow: var(--shadow); }
.duo h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
.duo h2 em { color: var(--gold-soft); }
.duo .duo-lead { font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 1.6vw, 1.6rem); color: var(--text); margin-top: 16px; line-height: 1.3; padding-left: 18px; border-left: 3px solid var(--gold); }
.duo .duo-body { color: var(--muted); margin-top: 18px; max-width: 56ch; }
.duo .duo-proof { margin-top: 22px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.duo .duo-proof h3 { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-soft); margin-bottom: 12px; font-weight: 400; }
.duo-specs { display: grid; gap: 10px; }
.duo-specs li { display: flex; gap: 10px; align-items: center; font-size: .9rem; }
.duo-specs li .price { font-family: var(--mono); color: var(--gold-soft); font-size: .95rem; }
.duo-specs li svg { width: 16px; height: 16px; color: var(--gold); flex: none; }

/* =====================================================================
   16. DEPOIMENTOS
   ===================================================================== */
.reviews { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 820px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease), border-color .3s; }
.review:hover { transform: translateY(-4px); border-color: var(--copper); }
.stars { display: flex; gap: 3px; color: var(--gold); }
.stars svg { width: 18px; height: 18px; }
.review blockquote { font-family: var(--display); font-style: italic; font-size: 1.08rem; line-height: 1.5; color: var(--text); }
.review .reviewer { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review .reviewer .av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 600; color: var(--bg); background: linear-gradient(135deg, var(--gold-soft), var(--copper)); }
.review .reviewer strong { display: block; font-weight: 700; font-size: .92rem; }
.review .reviewer span { color: var(--faint); font-size: .8rem; }
.review .verified { margin-left: auto; color: var(--stock); display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; }
.review .verified svg { width: 15px; height: 15px; }

/* =====================================================================
   17. GALERIA UGC "Feito com TFORCE"
   ===================================================================== */
.ugc { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px) { .ugc { grid-template-columns: repeat(4, 1fr); } }
.ugc-item { border-radius: var(--r); overflow: hidden; aspect-ratio: 1 / 1; position: relative; border: 1px solid var(--line); transition: transform .3s var(--ease); }
.ugc-item:hover { transform: scale(1.03); z-index: 2; }
.ugc-item .photo, .ugc-item svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ugc-item .ugc-user { position: absolute; left: 10px; bottom: 8px; z-index: 2; font-family: var(--mono); font-size: .72rem; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.8); display: flex; align-items: center; gap: 6px; }
.ugc-item .ugc-user svg { position: static; width: 15px; height: 15px; inset: auto; }

/* =====================================================================
   18. CONTEÚDO / AUTORIDADE + CTA FINAL
   ===================================================================== */
.authority { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 820px) { .authority { grid-template-columns: repeat(3, 1fr); } }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), border-color .3s; }
.auth-card:hover { transform: translateY(-5px); border-color: var(--copper); }
.auth-fig { aspect-ratio: 16 / 9; position: relative; }
.auth-fig svg, .auth-fig .photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-fig .auth-kind { position: absolute; top: 12px; left: 12px; }
.auth-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.auth-body h3 { font-size: 1.18rem; line-height: 1.16; }
.auth-body p { color: var(--muted); font-size: .9rem; }
.auth-body .auth-link { margin-top: auto; color: var(--gold-soft); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }
.auth-body .auth-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.auth-card:hover .auth-link svg { transform: translateX(4px); }

.final-cta { border-radius: var(--r-xl); padding: clamp(32px, 5vw, 64px); text-align: center; position: relative; overflow: hidden; background: radial-gradient(120% 160% at 0% 0%, rgba(200,162,74,.16), transparent 55%), radial-gradient(120% 160% at 100% 100%, rgba(110,42,36,.2), transparent 55%), var(--surface); border: 1px solid var(--line); }
.final-cta h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.final-cta p { color: var(--muted); max-width: 56ch; margin: 16px auto 0; }
.final-cta .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }

/* =====================================================================
   19. RODAPÉ
   ===================================================================== */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 88px); }
.footer-top { display: grid; gap: clamp(28px, 4vw, 48px); padding-block: clamp(48px, 6vw, 80px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand p { color: var(--muted); font-size: .92rem; max-width: 40ch; }
.footer-seals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer-col h3 { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); margin-bottom: 14px; font-weight: 400; }
.footer-col a { display: block; color: var(--muted); font-size: .92rem; padding: 6px 0; transition: color .18s, transform .18s; }
.footer-col a:hover { color: var(--gold-soft); transform: translateX(3px); }
.footer-contact { display: grid; gap: 10px; }
.footer-contact a, .footer-contact span { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: .9rem; }
.footer-contact svg { width: 17px; height: 17px; color: var(--copper); flex: none; margin-top: 2px; }
.footer-contact a:hover { color: var(--gold-soft); }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.footer-bottom p { color: var(--faint); font-size: .82rem; }
.footer-socials { display: flex; gap: 8px; }

/* =====================================================================
   20. PÁGINAS INTERIORES — loja facetada + sub-nav + PDP
   ===================================================================== */
/* Breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--mono); font-size: .76rem; color: var(--faint); padding-block: 20px 6px; }
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb svg { width: 14px; height: 14px; color: var(--copper); opacity: .8; }
.breadcrumb [aria-current] { color: var(--text); font-weight: 600; }

/* Cabeçalho de categoria */
.shop-hero { padding-block: 8px clamp(24px, 4vw, 40px); }
.shop-hero .eyebrow { margin-bottom: 16px; }
.shop-hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
.shop-hero h1 em { color: var(--gold-soft); }
.shop-hero p { color: var(--muted); margin-top: 12px; max-width: 62ch; }
.shop-hero .shop-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* sub-nav de subcategorias (chips) — navegação do menu Equipamentos */
.subcat-nav { display: flex; flex-wrap: wrap; gap: 10px; padding-block: 18px; border-block: 1px solid var(--line); margin-bottom: clamp(24px, 4vw, 40px); }
.subcat-nav .count-lbl { font-family: var(--mono); font-size: .74rem; color: var(--faint); margin-right: auto; align-self: center; }
.chip { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); transition: all .25s var(--ease); display: inline-flex; align-items: center; gap: 7px; }
.chip:hover { border-color: var(--copper); color: var(--gold-soft); }
.chip.active { background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: 700; }

.shop-layout { display: grid; gap: var(--gap); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .shop-layout { grid-template-columns: 264px 1fr; } }

/* Filtros facetados */
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px; position: sticky; top: 88px; }
@media (max-width: 999px) { .filters { position: static; } .filters[hidden] { display: none; } }
.filter-group { border-bottom: 1px solid var(--line); padding: 14px 12px; }
.filter-group:last-child { border-bottom: none; }
.filter-group > h3 { font-family: var(--display); font-size: 1rem; font-weight: 600; }
.filter-group > h3 button { display: flex; align-items: center; justify-content: space-between; width: 100%; font: inherit; color: inherit; }
.filter-group > h3 .chev { width: 16px; height: 16px; color: var(--copper); transition: transform .25s var(--ease); }
.filter-group.collapsed .chev { transform: rotate(-90deg); }
.filter-body { display: grid; gap: 9px; margin-top: 14px; }
.filter-group.collapsed .filter-body { display: none; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; color: var(--muted); padding: 6px 4px; border-radius: var(--r-sm); min-height: 38px; }
.check:hover { color: var(--text); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { width: 20px; height: 20px; border-radius: var(--r-sm); border: 2px solid var(--line); flex: none; display: grid; place-items: center; transition: background .18s, border-color .18s; }
.check .box svg { width: 13px; height: 13px; color: var(--bg); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.check input:checked + .box { background: var(--gold); border-color: var(--gold); }
.check input:checked + .box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .box { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
.check .count { margin-left: auto; font-family: var(--mono); font-size: .74rem; color: var(--faint); }

.price-range { padding: 4px 4px 0; }
.price-range .pr-vals { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .82rem; color: var(--gold-soft); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.price-range input[type=range] { width: 100%; accent-color: var(--gold); }
.filter-actions { padding: 14px 12px; display: grid; gap: 8px; }

.filters-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.filters-toggle { display: inline-flex; }
@media (min-width: 1000px) { .filters-toggle { display: none; } }
.result-count { font-size: .9rem; color: var(--muted); }
.result-count strong { color: var(--text); font-family: var(--mono); }
.sort-select { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sort-select select { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; font-weight: 600; font-size: .88rem; cursor: pointer; }

.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-chips:empty { display: none; }
.chip-remove { display: inline-flex; align-items: center; gap: 7px; background: rgba(200,162,74,.14); border: 1px solid rgba(200,162,74,.4); color: var(--gold-soft); padding: 6px 10px; border-radius: 999px; font-family: var(--mono); font-size: .76rem; font-weight: 600; }
.chip-remove svg { width: 13px; height: 13px; }
.chip-remove:hover { background: rgba(200,162,74,.24); }

.shop-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.no-results { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--muted); display: none; }
.no-results img { width: 56px; height: 57px; opacity: .5; margin: 0 auto 16px; object-fit: contain; display: block; }

/* --- PDP (página de produto) — modelo D2 (galeria + specs sticky) --- */
.pdp { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; padding-bottom: clamp(40px, 6vw, 80px); }
@media (min-width: 900px) { .pdp { grid-template-columns: 1.1fr .9fr; } .pdp-info.sticky { position: sticky; top: 96px; } }
.pdp-gallery { display: grid; gap: 14px; }
.pdp-main { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.pdp-main svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdp-main .badge, .pdp-main .badge-ox { position: absolute; top: 14px; left: 14px; z-index: 2; }
.pdp-main .zoom-hint { position: absolute; bottom: 14px; right: 14px; z-index: 2; font-family: var(--mono); font-size: .64rem; color: var(--text); background: rgba(20,17,14,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line); padding: 6px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pdp-thumb { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.pdp-thumb .photo, .pdp-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdp-thumb:hover { transform: translateY(-2px); border-color: var(--copper); }
.pdp-thumb.active { border-color: var(--gold); box-shadow: var(--glow-gold); }
.pdp-info .line { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); margin-bottom: 12px; }
.pdp-info h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); margin-bottom: 8px; }
.pdp-info h1 em { color: var(--gold-soft); }
.pdp-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-block: 18px; border-block: 1px solid var(--line); margin-bottom: 22px; }
.pdp-price .v { font-family: var(--display); font-weight: 600; font-size: 2.4rem; color: var(--gold-soft); }
.pdp-price .opt-lbl { font-family: var(--mono); font-size: .7rem; color: var(--steel-soft); letter-spacing: .08em; text-transform: uppercase; }
.pdp-price .ship { font-family: var(--mono); font-size: .7rem; color: var(--stock); letter-spacing: .06em; text-transform: uppercase; }
.pdp-desc { color: var(--muted); margin-bottom: 22px; }
/* seletor de opção (3 cv × inversor) */
.pdp-options { display: grid; gap: 10px; margin-bottom: 22px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; transition: border-color .2s, background .2s; }
.opt:hover { border-color: var(--copper); }
.opt input { position: absolute; opacity: 0; }
.opt .opt-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.opt .opt-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .2s var(--ease); }
.opt input:checked ~ .opt-radio { border-color: var(--gold); }
.opt input:checked ~ .opt-radio::after { transform: scale(1); }
.opt:has(input:checked) { border-color: var(--gold); background: rgba(200,162,74,.06); }
.opt input:focus-visible ~ .opt-radio { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
.opt .opt-name { font-weight: 600; }
.opt .opt-price { margin-left: auto; font-family: var(--mono); font-weight: 700; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
/* tabela de specs */
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.spec-table th, .spec-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.spec-table th { font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); width: 44%; vertical-align: top; }
.spec-table td { color: var(--text); font-weight: 500; }
.pdp-actions { display: grid; gap: 12px; margin-bottom: 22px; }
.pdp-trust { display: flex; flex-wrap: wrap; gap: 8px; }
.related-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); }

/* =====================================================================
   21. REVEAL / TOAST / ANIMAÇÕES
   ===================================================================== */
/* G1 — reveal só esconde quando o JS está ativo (classe .js no <html>, setada
   no <head> antes do paint). Sem JS / se o JS falhar, o default é VISÍVEL —
   evita esconder permanentemente preço/botões de compra na PDP. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; }
.js [data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"], [data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"], [data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"], [data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"], [data-reveal-delay="4"] { transition-delay: .32s; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(120%); background: var(--card); border: 1px solid var(--gold); color: var(--text); padding: 13px 20px; border-radius: var(--r-lg); font-weight: 600; font-size: .92rem; z-index: 150; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); transition: transform .42s var(--ease-out); max-width: calc(100vw - 40px); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast svg { width: 19px; height: 19px; color: var(--gold-soft); flex: none; }
.toast strong { color: var(--gold-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* =====================================================================
   22. RESPONSIVO — ajustes finos
   ===================================================================== */
@media (max-width: 560px) {
  .hero-cat-aside .hero-ctas .btn { flex: 1 1 auto; }
  .section-head h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .campaign .wrap { font-size: .72rem; gap: 8px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .logo .wordmark { font-size: 1.28rem; }
  .girafa-materials { grid-template-columns: 1fr; }
}
/* anti-zoom iOS + alvos de toque ≥44px */
@media (max-width: 768px) {
  .search-box input, .sort-select select,
  input[type="search"], input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  select, textarea { font-size: 16px; }
  .check { min-height: 44px; }
  .sort-select select { min-height: 44px; }
  .chip { min-height: 44px; }
}

@media print {
  .site-header, .campaign, .scrim, .drawer, .cart-drawer, .toast, .trustbar { display: none; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   AJUSTES DO REVIEW FINAL (a11y/contraste/toque/mobile)
   ===================================================================== */
/* B2 — contraste de texto ≥4,5:1 */
:root { --faint: #A0937F; }                 /* era #8A7F6E (≈limite) */
.eyebrow { color: #D08A52; }                /* copper de texto mais claro (era ~3,4:1) */
/* mesmo copper claro nos demais rótulos mono sobre fundo escuro (eram 3,6–4,4:1) */
.mega-col .mega-h, .footer-col h3, .pdp-info .line, .stat-num .suffix { color: #D08A52; }

/* B3 — alvos de toque */
.qty button { width: 30px; height: 30px; }
.ci-remove { padding: 8px; }
.check, .opt { min-height: 44px; }          /* também no desktop (antes só ≤768px) */
.footer-col a { padding: 8px 0; }
.breadcrumb a { display: inline-block; padding: 3px 2px; }
@media (max-width: 768px) {
  .qty button { width: 38px; height: 38px; }
  .pc-fav { width: 44px; height: 44px; }
  .tile-arrow { width: 36px; height: 36px; }
}

/* C2 — hero h1 não encavala acentos em telas estreitas */
@media (max-width: 560px) {
  .hero-cat h1 { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.04; }
}

/* =====================================================================
   MOBILE DECLUTTER (<900px) — esconde "chrome" que só funciona no desktop.
   Abaixo de 900px o layout empilha (hero-head vira 1 coluna, bento vira 2):
   nessas larguras esses elementos viram blocos altos e poluídos.
   ===================================================================== */
@media (max-width: 899.98px) {
  .hero-proof { display: none; }              /* 3 badges que quebravam mal abaixo do título */
  .trustbar   { display: none; }              /* faixa de confiança vira bloco alto no mobile */
  .hide-mobile { display: none !important; }  /* cards 3 e 4 do bento (mantidos só no desktop) */
}

/* C1/C3 — busca no drawer mobile (font-size 16px = anti-zoom iOS) */
.drawer-search {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 16px 0; padding: 11px 14px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 999px;
}
.drawer-search:focus-within { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(200,162,74,.16); }
.drawer-search svg { width: 18px; height: 18px; color: var(--copper); flex: none; }
.drawer-search input { background: none; border: none; outline: none; width: 100%; font-size: 16px; color: var(--text); }

/* =====================================================================
   I18N — EN (default) / PT toggle
   Dual-language content: each translatable string ships as two sibling
   elements, [data-l="en"] and [data-l="pt"]; CSS shows one per <html data-lang>.
   ===================================================================== */
html[data-lang="en"] [data-l="pt"],
html[data-lang="pt"] [data-l="en"] { display: none !important; }

/* Language switch (segmented EN/PT) */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; flex: none;
}
.lang-opt {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  color: var(--muted); font: 700 .8rem/1 var(--sans); letter-spacing: .04em;
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  transition: background .18s var(--ease, ease), color .18s var(--ease, ease);
}
.lang-opt:hover { color: var(--text); }
.lang-opt.active { background: linear-gradient(180deg, var(--gold-soft), var(--forge)); color: #20180A; }
.lang-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Drawer variant — full-width, bigger tap targets */
.drawer-lang { margin: 16px 16px 0; }
.drawer-lang .lang-switch { display: flex; width: 100%; }
.drawer-lang .lang-opt { flex: 1; min-height: 44px; }

/* Catalog CTA replacing the removed price/add-to-cart foot on product cards */
.pc-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
  font-weight: 600; font-size: .92rem; color: var(--gold-soft);
  min-height: 44px;
}
.pc-cta svg { width: 18px; height: 18px; transition: transform .2s var(--ease, ease); }
.pc-cta:hover { color: var(--gold); }
.pc-cta:hover svg { transform: translateX(3px); }

/* Mobile touch-comfort polish — larger tap targets, no desktop/layout change */
@media (max-width: 768px) {
  .lang-opt { min-height: 38px; }
  .auth-body .auth-link { min-height: 40px; }
}

/* =====================================================================
   AUDITORIA MOBILE — 24 páginas (correções globais G2–G12 + específicas).
   Ver AUDIT-MOBILE-TODAS-PAGINAS.md. Regras tardias: vencem por ordem de
   cascata as definições anteriores de mesma especificidade.
   ===================================================================== */

/* G2/G3 — subcat-nav vira faixa de 1 linha rolável no mobile (em vez de bloco
   alto de 4–6 linhas); esconde o rótulo "Browse by:" (redundante) */
@media (max-width: 768px) {
  .subcat-nav {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    padding-block: 10px;   /* faixa mais enxuta (~64px) — chips seguem 44px */
  }
  .subcat-nav::-webkit-scrollbar { display: none; }
  .subcat-nav > * { flex: 0 0 auto; }
  .subcat-nav .count-lbl { display: none; }
}

/* Alvos de toque ≥44px no mobile — G4 breadcrumb, G5 título de card,
   G6 idioma EN/PT, G8 rodapé, G12 links inline */
@media (max-width: 768px) {
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; }
  .pc-name a { display: inline-block; padding-block: 11px; }   /* ~44px de alvo de toque (G5) */
  .lang-opt { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .footer-col a { padding-block: 11px; }
  .link-u { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; }
  .auth-body .auth-link { min-height: 44px; align-items: center; }
}

/* G7 — faixa de pills de prova do shop-hero compactada no celular */
@media (max-width: 560px) {
  .shop-hero .shop-meta { gap: 8px; }
  .shop-hero .shop-meta .pill { font-size: .68rem; padding: 6px 11px; }
}

/* G9 — micro-textos dos cards mais legíveis no mobile (~11,5px) */
@media (max-width: 768px) {
  .pc-cat, .pc-specs .spec, .badge { font-size: .72rem; }
}

/* G10 — rede de segurança p/ endereço/CNPJ longos no rodapé */
.footer-contact a, .footer-contact span { overflow-wrap: anywhere; min-width: 0; }

/* G11 — rodapé não espreme a coluna CONTACT na banda tablet (760–899px) */
@media (min-width: 760px) and (max-width: 899.98px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* ESPECÍFICO (quem-somos + home) — retratos da "dupla" empilham < 560px,
   senão a legenda overlay cobre a arte do retrato */
@media (max-width: 560px) {
  .duo-portraits { grid-template-columns: 1fr; }
  .portrait.eng { margin-top: 0; }
  .duo-plus { display: none; }
}

/* ESPECÍFICO (retificas, prensas) — listagem de 1 único produto não fica
   órfã/esticada numa grade de 2+ colunas. NÃO usar data-count aqui: o main.js
   trata [data-count] como contador e sobrescreve o conteúdo do elemento. */
.products.is-single { grid-template-columns: minmax(240px, 360px); justify-content: start; }

/* ESPECÍFICO — fotos fora do aspecto 5:4 mostram a peça inteira (contain)
   em vez de cortar (roda de contato 10", amortecedor) */
.pc-fig .photo[src*="roda-contato-10"],
.pc-fig .photo[src*="amortecedor-lixadeira"],
.pc-fig .photo[src*="/acessorios/"],
.pc-fig .photo[src*="fosseis.webp"] { object-fit: contain; }

/* ESPECÍFICO — cartões sem foto não leem como caixa vazia (fundo on-theme) */
.pc-fig:not(.has-photo) { background: linear-gradient(150deg, #241f18, #16120d 72%); }

/* =====================================================================
   PÁGINAS DE PRODUTO (mobile ≤768px) — a FOTO precisa aparecer ao abrir;
   menos coisa no topo. Desktop fica intacto (tudo dentro do @media).
   ===================================================================== */
@media (max-width: 768px) {
  /* (3) A foto TEM que aparecer na carga: desliga o reveal no mobile — o
     conteúdo (inclusive as fotos) fica sempre visível, sem depender do
     scroll / IntersectionObserver. No desktop o reveal continua. */
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }

  /* (1) Remove as badges no mobile (ocupam espaço / poluem a foto) */
  .shop-hero .shop-meta { display: none; }   /* pills de prova sob o título */
  .pc-badges { display: none; }              /* etiquetas sobre a foto do card */
  .pdp-main .badge { display: none; }        /* etiqueta (Flagship) sobre a foto da PDP */

  /* (2) Menu de seleção de equipamentos (subcat-nav) vai para o FIM da
     página, logo acima do rodapé — só no mobile. :has() garante que só as
     páginas que têm esse menu viram flex (PDP/home/conteúdo não mudam). */
  main > .wrap:has(> .subcat-nav) { display: flex; flex-direction: column; }
  main > .wrap > .subcat-nav { order: 99; margin-top: clamp(16px, 5vw, 32px); margin-bottom: 0; }
}