/* =====================================================================
   ACCENDER — Site institucional · Folha de estilo principal
   ---------------------------------------------------------------------
   Direção: alto contraste preto/branco/vermelho, geometria diagonal
   ascendente, elegância automotiva de alta tecnologia. Regra 60/30/10.
   Refino UI/UX: sistema de tokens (cor, tipo, espaço, motion, sombra,
   z-index), microinterações, acessibilidade e performance.
   O CSS crítico do header/hero está inline no <head> para o LCP.
   =====================================================================

   SUMÁRIO
   00. Tokens (design system)
   01. Reset & base
   02. Tipografia utilitária
   03. Layout / container
   04. Sistema de frames (cortes diagonais)
   05. Elementos de marca (faixas, ///, seta)
   06. Botões
   07. Badges
   08. Frame: Hero
   09. Frame: Sobre
   10. Frame: Pilares
   11. Frame: Produtos
   12. Frame: Clientes
   13. Frame: CTA final
   14. Footer
   15. WhatsApp flutuante
   16. Scroll reveal & utilitários de motion
   17. Acessibilidade / reduced-motion
   18. Responsivo
   ===================================================================== */

/* ===================== 00a. TIPOGRAFIA DA MARCA =====================
   Brand book (p.19): a página inteira usa GOTHAM — cortes Light, Book,
   Medium, Bold e BLACK (títulos pesados). Pilha em 3 camadas:
   1) Gotham real — local() de quem tem instalada + .woff2 licenciados
      em assets/fonts/gotham/ (entram quando o cliente enviar);
   2) Metropolis — open source visualmente gêmea da Gotham, hospedada
      no site (assets/fonts/metropolis/) — o que os visitantes veem hoje;
   3) Montserrat (Google) — último recurso.
   Pesos do site → cortes: 300 Light · 400 Book · 500 Medium ·
   600-700 Bold · 800-900 Black. */
@font-face { font-family: "Gotham";
  src: local("Gotham Light"), local("Gotham-Light"),
       url("../assets/fonts/gotham/gotham-light.woff2") format("woff2");
  font-weight: 100 349; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham";
  src: local("Gotham Book"), local("Gotham-Book"), local("Gotham"),
       url("../assets/fonts/gotham/gotham-book.woff2") format("woff2");
  font-weight: 350 449; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham";
  src: local("Gotham Medium"), local("Gotham-Medium"),
       url("../assets/fonts/gotham/gotham-medium.woff2") format("woff2");
  font-weight: 450 599; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham";
  src: local("Gotham Bold"), local("Gotham-Bold"),
       url("../assets/fonts/gotham/gotham-bold.woff2") format("woff2");
  font-weight: 600 799; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham";
  src: local("Gotham Black"), local("Gotham-Black"),
       url("../assets/fonts/gotham/gotham-black.woff2") format("woff2");
  font-weight: 800 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Metropolis";
  src: url("../assets/fonts/metropolis/metropolis-300.woff2") format("woff2");
  font-weight: 100 349; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis";
  src: url("../assets/fonts/metropolis/metropolis-400.woff2") format("woff2");
  font-weight: 350 449; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis";
  src: url("../assets/fonts/metropolis/metropolis-500.woff2") format("woff2");
  font-weight: 450 599; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis";
  src: url("../assets/fonts/metropolis/metropolis-700.woff2") format("woff2");
  font-weight: 600 799; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis";
  src: url("../assets/fonts/metropolis/metropolis-900.woff2") format("woff2");
  font-weight: 800 900; font-style: normal; font-display: swap; }

/* ============================ 00. TOKENS ============================ */
:root {
  /* --- Cores de marca --- */
  --red:        #FF0000;
  --red-strong: #E00000;
  --red-hover:  #C20000;
  --red-soft:   #7A0010;
  --black:      #000000;
  --ink:        #0E0E10;
  --graphite:   #1A1A1D;
  --white:      #FFFFFF;
  --off-white:  #F5F5F3;

  /* --- Neutros de apoio --- */
  --gray-700: #3A3A3D;
  --gray-500: #6E6E73;
  --gray-400: #9A9A9E;
  --gray-200: #E6E6E8;

  /* --- Tokens semânticos (claro/escuro por contexto de frame) --- */
  --surface-elevated: #202024;   /* cartões em hover no escuro */
  --hairline-dark:    rgba(255,255,255,.08);
  --hairline-light:   rgba(0,0,0,.08);

  /* --- Tipografia --- */
  /* Uma família só em todo o site (revisão 1.4). A Montserrat saiu da pilha:
     era ela que aparecia em alguns blocos e dava a impressão de fontes
     diferentes ao rolar a página. */
  --font-base: "Gotham", "Metropolis", "Helvetica Neue", Arial, sans-serif;
  --mono:       var(--font-base);
  /* Escala fechada: --fs-display só no H1 do início, --fs-h2 em TODO título de
     seção, --fs-h3 em destaques, --fs-h4 em título de card, --fs-body no texto
     corrido e --fs-body-sm no texto de apoio dentro de cards. */
  --fs-display: clamp(2.5rem, 7vw, 5rem);
  --fs-h1:      clamp(2rem, 4.5vw, 3rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.125rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4:      1.05rem;
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body:    1rem;
  --fs-body-sm: .95rem;
  --fs-small:   .8125rem;

  /* --- Espaçamento (base 8) --- */
  --space-section: 120px;
  --container: 1320px;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  /* --- Geometria de marca --- */
  --diagonal: 8deg;
  --cut: 0px; /* frames retos (revisão): sem cortes diagonais */

  /* --- Sombras (escala consistente) --- */
  --shadow-1: 0 2px 8px rgba(0,0,0,.20);
  --shadow-2: 0 8px 24px rgba(0,0,0,.28);
  --shadow-3: 0 18px 48px rgba(0,0,0,.45);
  --glow-red: 0 10px 40px -8px rgba(224,0,0,.45);

  /* --- Motion (durações + easing unificados) --- */
  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 420ms;
  --ease-out:    cubic-bezier(.22,.61,.36,1);     /* entrada */
  --ease-in:     cubic-bezier(.55,.06,.68,.19);    /* saída */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);     /* feedback físico */

  /* --- Camadas (z-index) --- */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 80;
  --z-menu: 79;
  --z-float: 90;
  --z-progress: 100;
}

/* ========================= 01. RESET & BASE ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--white);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--red); color: var(--white); }

/* Skip link (acessibilidade de teclado) */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: var(--z-progress);
  background: var(--red-strong); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* Barra de progresso de rolagem (acento de marca) */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: var(--z-progress);
  background: var(--red);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* ===================== 02. TIPOGRAFIA UTILITÁRIA ==================== */
.display {
  font-weight: 900; font-size: var(--fs-display);
  line-height: 1.03; letter-spacing: .005em; text-transform: uppercase;
}
.h1 { font-weight: 700; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: .005em; }
.h2 { font-weight: 700; font-size: var(--fs-h2); line-height: 1.15; }
.h3 { font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; }
.lead { font-size: var(--fs-lead); font-weight: 400; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gray-400);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--red);
}
.eyebrow--center { justify-content: center; }
.text-red { color: var(--red); }
.tnum { font-variant-numeric: tabular-nums; }

/* ===================== 03. LAYOUT / CONTAINER ====================== */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: 24px;
}
@media (min-width: 640px)  { .container { padding-inline: 48px; } }
@media (min-width: 1024px) { .container { padding-inline: 80px; } }

/* ===================== 04. SISTEMA DE FRAMES ======================= */
.frame { position: relative; isolation: isolate; padding-block: var(--space-section); }
.frame > .container { position: relative; z-index: var(--z-base); }

.frame--cut {
  margin-top: calc(var(--cut) * -1);
  padding-top: calc(var(--space-section) + var(--cut));
}
.frame--cut::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.frame--dark  { color: var(--white); }
.frame--dark::before  { background: var(--ink); }
.frame--black::before { background: var(--black); }
.frame--light { color: var(--ink); }
.frame--light::before { background: var(--off-white); }
.frame--light .eyebrow { color: var(--red-strong); }

/* ===================== 05. ELEMENTOS DE MARCA ====================== */
.redline { height: 3px; background: var(--red); border: 0; margin: 0; }
.redline--thin { height: 2px; }

/* Revisão: "///" não faz parte da identidade — removido (o símbolo real da
   marca, .hero__arrow/.about__arrow, é mantido conforme sugestão 1.5) */
.slashes, .corner-slashes, .arrow-bg { display: none !important; }

/* Silhueta do símbolo Accender (substitui as antigas decorações "///") */
.sym { position: absolute; pointer-events: none; opacity: .10; z-index: 0; }
.sym--hero { top: 100px; right: 24px; width: 76px; opacity: .5; }
.frame--light .sym { opacity: .07; }

/* ============================ 06. BOTÕES =========================== */
.btn {
  --btn-bg: var(--red-strong);
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  background: var(--btn-bg); color: var(--white); overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
  will-change: transform;
}
/* brilho diagonal que cruza no hover */
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left var(--dur-slow) var(--ease-out);
}
.btn:hover { background: var(--red-hover); transform: translateY(-2px); box-shadow: var(--glow-red); }
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(0) scale(.97); }

.btn--ghost { background: transparent; border: 1.5px solid var(--white); color: var(--white); }
.btn--ghost::after { display: none; }
.btn--ghost:hover { background: var(--white); color: var(--ink); box-shadow: var(--shadow-2); }
.frame--light .btn--ghost { border-color: var(--ink); color: var(--ink); }
.frame--light .btn--ghost:hover { background: var(--ink); color: var(--white); }

.btn--wa { background: var(--red-strong); }
.btn .wa-ico { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* =========================== 07. BADGES =========================== */
.badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--red-strong); color: var(--white);
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

/* ========================== 08. HERO ============================== */
/* Pinada: .hero-stage (no CSS crítico) dá a distância de scroll; a .hero
   fica sticky em 100svh enquanto a narrativa entra em sequência */
.hero {
  position: sticky; top: 0; height: 100svh; display: flex; align-items: center;
  padding-top: 96px; padding-bottom: 72px; background: var(--black); overflow: hidden;
}
.hero__media {
  position: absolute; inset: -10%; z-index: 0;
  background:
    radial-gradient(120% 90% at 75% 18%, rgba(255,0,0,.18), transparent 55%),
    radial-gradient(90% 120% at 12% 100%, rgba(122,0,16,.32), transparent 60%),
    linear-gradient(180deg, #050506 0%, #0b0b0d 55%, #050506 100%);
}
/* duas camadas de "fumaça" que derivam lentamente */
.hero__smoke {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(40% 35% at 30% 40%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(45% 40% at 70% 65%, rgba(224,0,0,.10), transparent 70%);
  filter: blur(8px);
  animation: smokeDrift 26s var(--ease-out) infinite alternate;
}
.hero__smoke.is-2 {
  opacity: .4;
  background:
    radial-gradient(50% 45% at 60% 30%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(40% 38% at 25% 75%, rgba(224,0,0,.08), transparent 70%);
  animation-duration: 34s; animation-direction: alternate-reverse;
}
@keyframes smokeDrift {
  0%   { transform: translate3d(-2%, 2%, 0) scale(1); }
  100% { transform: translate3d(3%, -3%, 0) scale(1.08); }
}
/* grão sutil */
.hero__media::after {
  content: ""; position: absolute; inset: 0; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* símbolo da marca que se desenha com o scroll (GSAP define o dasharray) */
/* símbolo oficial inteiro dentro da tela, sem rotação (revisão 2.0) */
.hero__arrow { position: absolute; z-index: 0; right: 2%; top: 50%;
  transform: translateY(-50%); width: min(52vw, 660px); opacity: .9; pointer-events: none; }
.hero__arrow path { stroke: var(--red); stroke-width: .6; fill: #FF0000; fill-opacity: 0; }

/* Telas baixas (notebook com escala 125%): compacta o hero p/ caber em 100svh.
   Duplicado do CSS crítico inline — manter os dois em sincronia. */
@media (max-height: 820px) and (min-width: 641px) {
  :root { --fs-display: clamp(2.3rem, 5.6vw, 3.9rem); }
  .hero { padding-top: 84px; padding-bottom: 48px; }
  .hero__title { margin-top: 14px; }
  .hero__lead { margin-top: 16px; font-size: 1.02rem; }
  .hero__cta { margin-top: 26px; }
  .hero__cta .btn { padding: 12px 22px; font-size: .9rem; }
  .hero__telemetry { margin-top: 28px; padding-top: 18px; }
  .hero__scroll { bottom: 14px; }
}

.hero__inner { position: relative; z-index: 2; max-width: 900px; }
.hero .eyebrow { color: var(--white); }
.hero .eyebrow::before { background: var(--red); }
.hero__title { margin-top: 20px; }
.hero__title .text-red { color: var(--red); }
.hero__lead { margin-top: 26px; max-width: 580px; color: var(--gray-400); }
.hero__cta { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gray-400);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero__scroll i { width: 1px; height: 38px; background: linear-gradient(var(--gray-400), transparent);
  animation: scrollpulse 1.8s var(--ease-out) infinite; }
@keyframes scrollpulse { 0%,100%{transform:scaleY(.4);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

.corner-slashes { position: absolute; top: 108px; right: 24px; z-index: 2; }
@media (min-width:1024px){ .corner-slashes { right: 80px; } }

/* ========================== 09. SOBRE ============================= */
.about__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .about__grid { grid-template-columns: 1.05fr .95fr; gap: 80px; } }
.about__media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(100% 100% at 70% 20%, rgba(255,0,0,.12), transparent 60%),
              linear-gradient(160deg, #16161a, #050506);
  border: 1px solid var(--gray-200); box-shadow: var(--shadow-2);
}
.about__media .slashes { position: absolute; top: 18px; right: 18px; }
.about__media::after { content: none; }
/* símbolo da marca esmaecido ao fundo do painel — inteiro, sem cortes (revisão) */
.about__arrow { position: absolute; z-index: 0; right: 6%; top: 22%;
  width: 66%; height: auto; pointer-events: none; }
.about__arrow path { fill: var(--red); opacity: .14; }
.about__title { margin-top: 18px; }
.about__text { margin-top: 22px; color: #4a4a4e; max-width: 52ch; }
.about__cta { margin-top: 34px; }

/* ========================== 10. PILARES =========================== */
.pillars__head { max-width: 640px; margin-bottom: 56px; }
.pillars__head .h2 { margin-top: 16px; }
.pillars__grid {
  display: grid; gap: 1px; background: var(--hairline-dark);
  border: 1px solid var(--hairline-dark); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 640px)  { .pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars__grid { grid-template-columns: repeat(3, 1fr); } }
.pillar { position: relative; background: var(--graphite); padding: 34px 32px;
  transition: background var(--dur) var(--ease-out); overflow: hidden; }
.pillar::before { /* faixa vermelha que sobe no hover */
  content: ""; position: absolute; left: 0; bottom: 0; width: 3px; height: 0;
  background: var(--red); transition: height var(--dur) var(--ease-out);
}
.pillar:hover { background: var(--surface-elevated); }
.pillar:hover::before { height: 100%; }
.pillar__num { position: absolute; top: 26px; right: 30px; font-size: .8rem; font-weight: 700;
  color: var(--gray-700); letter-spacing: .1em; transition: color var(--dur) var(--ease-out); }
.pillar:hover .pillar__num { color: var(--red); }
.pillar__ico {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius);
  background: rgba(255,0,0,.10); color: var(--red); margin-bottom: 22px;
  transition: transform var(--dur) var(--ease-spring);
}
.pillar:hover .pillar__ico { transform: translateY(-4px) scale(1.06); }
.pillar__ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Revisão 2.0: equaliza o tamanho percebido dos ícones (1º coração menor no viewBox; último escudo maior) */
.pillars__grid .pillar:first-child .pillar__ico svg { transform: scale(1.12); }
.pillars__grid .pillar:last-child .pillar__ico svg { transform: scale(.9); }
.pillar h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; margin-bottom: 10px; }
.pillar p { color: var(--gray-400); font-size: var(--fs-body-sm); }

/* ========================= 11. PRODUTOS =========================== */
.products__head { display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: flex-end; margin-bottom: 52px; }
.products__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .products__grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  will-change: transform;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); border-color: rgba(224,0,0,.35); }
.card:active { transform: translateY(-2px) scale(.995); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background:
    radial-gradient(120% 95% at 72% 12%, rgba(224,0,0,.22), transparent 55%),
    linear-gradient(158deg, #232327 0%, #0b0b0d 100%); }
.card__media::before { /* geometria diagonal sutil da marca (não é placeholder) */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(var(--diagonal),
    transparent 0 24px, rgba(255,255,255,.022) 24px 25px); }
.card__media .ph-img { position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; z-index: 1; transition: transform var(--dur-slow) var(--ease-out); }
.card__media .ph-img::before { /* chip com brilho vermelho atrás do ícone */
  content: ""; grid-area: 1 / 1; width: 94px; height: 94px; border-radius: 22px;
  background: rgba(224,0,0,.12); border: 1px solid rgba(224,0,0,.30);
  box-shadow: 0 12px 40px -10px rgba(224,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transition: box-shadow var(--dur) var(--ease-out); }
.card__media .ph-img svg { grid-area: 1 / 1; place-self: center; width: 44px; height: 44px;
  opacity: 1; stroke-width: 1.4; filter: drop-shadow(0 3px 8px rgba(0,0,0,.45)); }
.card:hover .card__media .ph-img { transform: scale(1.06); }
.card:hover .card__media .ph-img::before { box-shadow: 0 16px 52px -8px rgba(224,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06); }
.card__tag { position: absolute; top: 14px; left: 14px; z-index: 2; }
.card__media::after { content: ""; position: absolute; right: 0; bottom: 0;
  border-style: solid; border-width: 0 0 28px 28px;
  border-color: transparent transparent var(--red-strong) transparent; }
.card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__name { font-weight: 700; font-size: var(--fs-h4); line-height: 1.25; color: var(--ink); }
.card__desc { color: #5a5a5e; font-size: var(--fs-body-sm); min-height: 2.6em; }
.card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center;
  justify-content: space-between; border-top: 1px solid var(--gray-200); }
.card__price { font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.card__price small { font-weight: 500; font-size: .7rem; color: var(--gray-500); display: block; }
/* "Tenho interesse" sempre visível em todos os cards (revisão 2.0) */
.card__interest { font-size: .82rem; font-weight: 600; color: var(--red-strong);
  transition: transform var(--dur) var(--ease-out); }
.card:hover .card__interest, .card:focus-within .card__interest { transform: translateX(3px); }
.card__link { position: absolute; inset: 0; z-index: 3; border-radius: var(--radius); }

/* ========================= 12. CLIENTES =========================== */
.clients__head { text-align: center; max-width: 620px; margin: 0 auto 52px; }
.clients__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--hairline-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px)  { .clients__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .clients__grid { grid-template-columns: repeat(6, 1fr); } }
.client { background: var(--graphite); aspect-ratio: 3 / 2; display: grid; place-items: center;
  padding: 18px; transition: background var(--dur) var(--ease-out); }
.client:hover { background: var(--surface-elevated); }
.client span { opacity: .5; transition: opacity var(--dur) var(--ease-out),
  transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  font-weight: 800; letter-spacing: .04em; color: var(--white);
  font-size: clamp(.85rem, 1.4vw, 1.05rem); text-align: center; }
.client:hover span { opacity: 1; transform: scale(1.05); color: var(--red); }

/* ========================= 13. CTA FINAL ========================== */
.cta-final { position: relative; text-align: center; background: var(--black); overflow: hidden;
  padding-bottom: calc(var(--space-section) * .6); }   /* 72px no desktop, ~41px no celular */
.cta-final .arrow-bg { opacity: .8; }
.cta-final__inner { position: relative; z-index: 2; max-width: 780px; margin-inline: auto; }
.cta-final .slashes { justify-content: center; display: flex; }
.cta-final .h1 { margin: 20px 0 28px; }
.cta-final .lead { color: var(--gray-400); margin-bottom: 38px; }
.cta-final__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* =========================== 14. FOOTER =========================== */
/* Revisão 11/09: a linha vermelha cola no topo do rodapé; o único respiro entre
   o formulário e ela é o do fim da seção Contato, encurtado logo abaixo. */
.footer { background: var(--black); color: var(--white); padding-block: 0 32px; }
.footer__grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 18px; }
.footer__nav li { margin-bottom: 10px; }
.footer__nav a { color: var(--white); opacity: .8; transition: opacity var(--dur-fast), color var(--dur-fast); }
.footer__nav a:hover { opacity: 1; color: var(--red); }
.footer__social { display: flex; gap: 14px; margin-top: 6px; }
.footer__social a { width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center;
  border: 1px solid var(--hairline-dark); color: var(--white);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring); }
.footer__social a:hover { background: var(--red-strong); border-color: var(--red-strong); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; fill: currentColor; }
.footer__copy { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline-dark);
  color: var(--gray-400); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between; align-items: baseline; }
.footer__copy span:first-child { max-width: 62ch; }

/* ===================== 15. WHATSAPP FLUTUANTE ===================== */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: var(--z-float);
  width: 60px; height: 60px; border-radius: 50%; background: var(--red-strong);
  display: grid; place-items: center; box-shadow: var(--shadow-3);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.wa-float:hover { background: var(--red-hover); transform: scale(1.08); }
.wa-float:active { transform: scale(.95); }
.wa-float svg { width: 30px; height: 30px; fill: var(--white); }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--red-strong); animation: wapulse 2.4s var(--ease-out) infinite; }
@keyframes wapulse {
  0% { transform: scale(1); opacity: .7; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ================= 15b. BOTÃO DE TRADUÇÃO ======================== */
/* Espelha o flutuante do WhatsApp no canto oposto (revisão final). */
.lang { position: fixed; left: 22px; bottom: 22px; z-index: var(--z-float);
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
.lang__btn {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  background: var(--red-strong); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-3); border: 0; padding: 0;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.lang__btn:hover { background: var(--red-hover); transform: scale(1.08); }
.lang__btn:active { transform: scale(.95); }
.lang__btn svg { width: 30px; height: 30px; fill: var(--white); }
.lang.is-open .lang__btn { background: var(--red-hover); }

/* [hidden] sozinho não segura: o display abaixo tem a mesma especificidade */
.lang__menu[hidden] { display: none; }
.lang__menu { display: flex; flex-direction: column; min-width: 168px; overflow: hidden;
  background: var(--graphite); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
  transform-origin: 0 100%; }
.lang__opt { display: block; width: 100%; text-align: left; padding: 12px 16px;
  font-family: inherit; font-size: var(--fs-body-sm); font-weight: 500; color: var(--white);
  background: none; border: 0; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast); }
.lang__opt + .lang__opt { border-top: 1px solid var(--hairline-dark); }
.lang__opt:hover, .lang__opt:focus-visible { background: var(--surface-elevated); color: var(--red); }
.lang__opt.is-active { color: var(--red); }
.lang__opt.is-active::after { content: " ✓"; }

@media (max-width: 640px) {
  .lang { left: 16px; bottom: 16px; }
  .lang__btn { width: 52px; height: 52px; }
  .lang__btn svg { width: 26px; height: 26px; }
}

/* =================== 16. SCROLL REVEAL & MOTION =================== */
/* Estado oculto só quando há JS (.js em <html>): sem JS, tudo aparece
   normalmente — protege o LCP e o conteúdo em navegação sem scripts. */
.js .reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal[data-delay="1"].is-visible { transition-delay: .07s; }
.reveal[data-delay="2"].is-visible { transition-delay: .14s; }
.reveal[data-delay="3"].is-visible { transition-delay: .21s; }
.reveal[data-delay="4"].is-visible { transition-delay: .28s; }
/* itens em grade que aparecem em sequência (stagger automático) */
.js .stagger > * { opacity: 0; transform: translateY(24px); }
.stagger.is-visible > * { opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.stagger.is-visible > *:nth-child(1){transition-delay:.04s}
.stagger.is-visible > *:nth-child(2){transition-delay:.10s}
.stagger.is-visible > *:nth-child(3){transition-delay:.16s}
.stagger.is-visible > *:nth-child(4){transition-delay:.22s}
.stagger.is-visible > *:nth-child(5){transition-delay:.28s}
.stagger.is-visible > *:nth-child(6){transition-delay:.34s}
.stagger.is-visible > *:nth-child(7){transition-delay:.40s}
.stagger.is-visible > *:nth-child(8){transition-delay:.46s}
.stagger.is-visible > *:nth-child(9){transition-delay:.52s}
.stagger.is-visible > *:nth-child(10){transition-delay:.58s}
.stagger.is-visible > *:nth-child(11){transition-delay:.64s}
.stagger.is-visible > *:nth-child(12){transition-delay:.70s}

/* ================ 17. ACESSIBILIDADE / REDUCED-MOTION ============= */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.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; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .hero__arrow path { stroke-dashoffset: 0 !important; }
  [data-parallax] { transform: none !important; }
}

/* =====================================================================
   19. NOVAS SEÇÕES — direção "telemetria / instrumento"
   Inspiração de layout: showcase de produto (GAC) + estrutura editorial
   em colunas e leituras técnicas (Cervieri Monsuárez). Cores da marca.
   ===================================================================== */

/* --- Utilitário mono / leitura técnica --- */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* --- Sobre: ficha na mídia + pontos --- */
.about__media { margin: 0; }
.about__spec {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 18px; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72);
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  border-top: 1px solid var(--hairline-dark);
}
.about__spec .tnum { color: var(--red); }
.about__points { margin: 26px 0 0; display: grid; gap: 13px; }
.about__points li { position: relative; padding-left: 26px; color: #4a4a4e; font-size: var(--fs-body); }
.about__points li::before {
  content: ""; position: absolute; left: 0; top: .58em; width: 15px; height: 2px;
  background: var(--red); transform: skewX(-18deg);
}

/* --- Faixa de números (count-up) --- */
/* Revisão 2: Pilares e Em Números são o mesmo tom de fundo — somados, os dois
   respiros de seção abriam um vão grande demais entre os tópicos. */
#pilares { padding-bottom: calc(var(--space-section) * .5); }
#numeros { padding-top:    calc(var(--space-section) * .5); }
.stats__head { max-width: 640px; margin-bottom: 46px; }
.stats__head .h2 { margin-top: 16px; }
.stats__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0;
  background: var(--hairline-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { position: relative; background: var(--graphite); padding: 34px 30px; margin: 0;
  transition: background var(--dur) var(--ease-out); }
.stat:hover { background: var(--surface-elevated); }
.stat dt, .stat dd { margin: 0; }
.stat__k {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 16px;
}
.stat__v { margin: 0; }
.stat__num {
  display: inline-block; font-family: var(--mono); font-weight: 700; line-height: 1;
  font-size: clamp(2.1rem, 4.4vw, 3rem); color: #fff; letter-spacing: -.01em;
}
.stat__num::after {
  content: ""; display: block; width: 30px; height: 3px; margin-top: 16px;
  background: var(--red); transform: skewX(-18deg);
}

/* --- "O que fazemos" — colunas categóricas (editorial) --- */
.do__head { display: grid; gap: 18px 60px; margin-bottom: 54px; }
@media (min-width: 900px) { .do__head { grid-template-columns: 1.1fr .9fr; align-items: end; } }
.do__title { margin-top: 16px; }
.do__intro { color: #4a4a4e; max-width: 46ch; }
/* Categorias movidas para dentro de Produtos (3.2) */
.do--inprod { margin-bottom: 60px; }
.products__head--sep { margin-top: 4px; padding-top: 52px; border-top: 1px solid var(--hairline-light); }
.do__grid {
  display: grid; gap: 1px; background: var(--hairline-light);
  border: 1px solid var(--hairline-light); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 560px)  { .do__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .do__grid { grid-template-columns: repeat(4, 1fr); } }
.docol { position: relative; background: var(--white); padding: 30px 26px 34px;
  transition: background var(--dur) var(--ease-out); }
.docol::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--red); transition: width var(--dur) var(--ease-out); }
.docol:hover { background: #fbfbfa; }
.docol:hover::before { width: 100%; }
.docol__ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius);
  background: rgba(224,0,0,.08); color: var(--red-strong); margin-bottom: 20px; }
.docol__ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.docol__title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; color: var(--ink);
  margin-bottom: 16px; letter-spacing: .01em; }
.docol__list { display: grid; gap: 11px; }
.docol__list li { position: relative; padding-left: 17px; font-size: var(--fs-body-sm); color: #5a5a5e; }
.docol__list li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 2px;
  background: var(--red); transform: skewX(-18deg); }

/* --- Produtos: showcase de destaque (split) --- */
.showcase {
  display: grid; margin-bottom: 30px; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-2);
}
@media (min-width: 900px) { .showcase { grid-template-columns: 1.02fr .98fr; } }
.showcase__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden;
  background: radial-gradient(90% 90% at 60% 30%, #2a2a2e, #0c0c0e); }
.showcase__media .ph-img { position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--gray-500); transition: transform var(--dur-slow) var(--ease-out); }
.showcase__media .ph-img svg { width: 32%; height: 32%; opacity: .6; }
.showcase:hover .showcase__media .ph-img { transform: scale(1.05); }
.showcase__tag { position: absolute; top: 18px; left: 18px; z-index: 2; }
.showcase__slashes { position: absolute; top: 20px; right: 20px; z-index: 2; }
.showcase__code { position: absolute; left: 18px; bottom: 15px; z-index: 2;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: rgba(255,255,255,.55); }
.showcase__media::after { content: ""; position: absolute; right: 0; bottom: 0;
  border-style: solid; border-width: 0 0 40px 40px;
  border-color: transparent transparent var(--red-strong) transparent; }
.showcase__body { padding: 40px; display: flex; flex-direction: column; }
.showcase__name { margin: 14px 0 0; font-weight: 800; line-height: 1.08;
  font-size: var(--fs-h3); color: var(--ink);
  text-transform: uppercase; letter-spacing: .01em; }
.showcase__desc { margin-top: 18px; color: #4a4a4e; max-width: 48ch; }
.showcase__specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 30px 0 0;
  background: var(--hairline-light); border: 1px solid var(--hairline-light);
  border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 520px) { .showcase__specs { grid-template-columns: repeat(4, 1fr); } }
.spec { background: var(--off-white); padding: 16px 18px; margin: 0; }
.spec dt, .spec dd { margin: 0; }
.spec__k { font-family: var(--mono); font-size: .61rem; letter-spacing: .14em;
  text-transform: uppercase; color: #5a5a5e; margin-bottom: 9px; }
.spec__v { font-family: var(--mono); font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0; }
.showcase__cta { margin-top: auto; padding-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
/* Imagem real preenchendo a mídia do showcase */
.showcase__media img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.showcase:hover .showcase__media img { transform: scale(1.04); }

/* Faixa de compatibilidade (fotos reais das montadoras) */
/* fica entre "O que fazemos" e o catálogo (10/09) */
.compat { margin: 0 0 12px; }
.compat__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: #5a5a5e; margin: 0 0 16px; max-width: 64ch; }
.compat__label::before { content: ""; display: inline-block; width: 22px; height: 2px;
  margin-right: 10px; vertical-align: middle; background: var(--red); }
/* Revisão 3.3: os carros passam para o lado, igual à faixa de logos. Herda a
   mecânica de .marquee (dois conjuntos + translateX(-50%) + pausa no hover). */
.marquee--cars { gap: 0; }
.marquee--cars .marquee__set { gap: 16px; padding-left: 16px; }
.marquee--cars .marquee__track { animation-duration: 80s; }
.marquee--cars .compat__item { flex: 0 0 auto; width: clamp(260px, 30vw, 380px); }
.compat__item { position: relative; margin: 0; aspect-ratio: 800 / 309; overflow: hidden;
  border: 1px solid var(--gray-200); border-radius: var(--radius); background: #0c0c0e; }
.compat__item img, .compat__video { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out); }
.compat__item:hover img, .compat__item:hover .compat__video { transform: scale(1.05); }
/* O card do Jeep é um loop de vídeo: roda sozinho, mudo e sem controles.
   Com "menos movimento" o JS não dá play e fica só o poster. */
.compat__video::-webkit-media-controls { display: none !important; }
.compat__video::-webkit-media-controls-enclosure { display: none !important; }
.compat__item figcaption { position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; padding: 3px 10px; background: var(--red-strong); border-radius: 3px; }

/* Cards com foto real de produto (materiais do cliente) — fundo preto p/ fundir com as fotos */
.card__media--photo { background: #060607; }
/* Revisão final: as imagens dos cards passaram a ser fotos reais dos produtos
   instalados, então preenchem o quadro em vez de flutuar recortadas nele. */
.card__media--photo img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.card:hover .card__media--photo img { transform: scale(1.05); }

/* Card: categoria no lugar do preço */
.card__cat { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-500); }

/* Revisão 3.1: o "Solicitar catálogo" saiu do topo da seção (onde ficava
   desconexo do título) e virou o próximo passo, depois de ver os produtos. */
.products__foot { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--hairline-light);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.products__foot-text { color: #4a4a4e; max-width: 46ch; }
@media (max-width: 640px) { .products__foot .btn { width: 100%; justify-content: center; } }

/* --- Clientes: marquee (faixa rolante) --- */
.clients__head { margin-bottom: 44px; }
.marquee {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__row { overflow: hidden; }
.marquee__track { display: flex; width: max-content; will-change: transform;
  animation: marquee 42s linear infinite; }
.marquee__row--rev .marquee__track { animation-direction: reverse; }
.marquee__set { display: flex; gap: 16px; padding-left: 16px; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee .client { flex: 0 0 auto; width: 172px; height: 88px; display: flex;
  align-items: center; justify-content: center; padding: 0 16px;
  background: var(--graphite); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius); transition: background var(--dur) var(--ease-out); }
/* Marquee dentro do container (revisão 6.6): reto e centralizado com o resto */
.marquee--boxed { margin-top: 8px; }
.marquee .client:hover { background: var(--surface-elevated); }
.marquee .client span { opacity: .55; font-weight: 800; letter-spacing: .03em; color: #fff;
  font-size: .95rem; text-align: center; white-space: nowrap;
  transition: opacity var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.marquee .client:hover span { opacity: 1; color: var(--red); transform: scale(1.05); }
/* Logos das marcas (PNG branco) */
/* logos pré-equalizados em canvas uniforme 320x130 (revisão 6.5) */
.marquee .client img { height: 56px; width: auto; max-width: 100%; aspect-ratio: 320 / 130;
  object-fit: contain; opacity: .8; margin: 0 auto;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.marquee .client:hover img { opacity: 1; transform: scale(1.06); }
@media (max-width: 640px) {
  .marquee .client { width: 150px; }
  .marquee .client { width: 146px; }
  .marquee .client img { height: 46px; }
}

/* --- Depoimentos (prova social real) --- */
.depo__head { max-width: 640px; margin-bottom: 46px; }
.depo__head .h2 { margin-top: 16px; }
.depo__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .depo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.depo__card { position: relative; margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 28px 28px 24px; box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.depo__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
.depo__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.depo__mark { font-family: var(--font-base); font-weight: 700; font-size: 2.8rem; line-height: .8;
  color: var(--red); height: 24px; }
.depo__card blockquote { margin: 12px 0 20px; color: #3a3a3e; font-size: var(--fs-body-sm); line-height: 1.62; flex: 1; }
.depo__card figcaption { display: flex; flex-direction: column; gap: 3px; padding-top: 16px;
  border-top: 1px solid var(--gray-200); }
.depo__card figcaption b { color: var(--ink); font-size: .92rem; font-weight: 700; }
.depo__card figcaption span { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red-strong); }
/* Revisão 6.7: depoimentos com fundo preto (continuidade com Clientes) */
.depo.frame--black .depo__head .eyebrow { color: var(--red-strong); }
.depo.frame--black .depo__card { background: var(--graphite); border-color: var(--hairline-dark); box-shadow: none; }
.depo.frame--black .depo__card blockquote { color: #cfced2; }
.depo.frame--black .depo__card figcaption { border-top-color: var(--hairline-dark); }
.depo.frame--black .depo__card figcaption b { color: #fff; }

/* =====================================================================
   20. REVISÃO — símbolo no contato, formulário, Loja, footer assinatura
   ===================================================================== */
/* Símbolo Accender no lugar do "///" (8.3) */
.cta-sym { display: block; width: 46px; height: auto; margin: 0 auto 8px; }
.cta-final .eyebrow { color: var(--red-strong); }

/* Formulário de contato (8.1) */
.cform { max-width: 640px; margin: 36px auto 0; text-align: left; }
.cform__row { display: grid; gap: 16px; }
@media (min-width: 620px) { .cform__row { grid-template-columns: 1fr 1fr; } }
.cform__field { display: block; margin-bottom: 16px; }
.cform__field > span { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 8px; }
.cform input, .cform textarea { width: 100%; font: inherit; color: #fff; background: rgba(255,255,255,.05);
  border: 1px solid var(--hairline-dark); border-radius: var(--radius); padding: 13px 14px;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--red); background: rgba(255,255,255,.08); }
.cform input::placeholder, .cform textarea::placeholder { color: var(--gray-500); }
.cform textarea { resize: vertical; min-height: 112px; }
.cform__foot { display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; margin-top: 4px; text-align: center; }
.cform__note { margin: 0; font-size: .85rem; color: var(--gray-400); }
.cform__note:empty { display: none; } /* não desloca o botão centralizado */
.cform__note.is-err { color: #ff6b6b; }
.cta-final .cta-final__actions { margin-top: 28px; }

/* Loja (7) */
.loja__head { max-width: 640px; margin-bottom: 44px; }
.loja__head .h2 { margin-top: 12px; }
.loja__intro { margin-top: 16px; color: #4a4a4e; max-width: 52ch; }
.loja__grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 760px) { .loja__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.shopcard { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.shopcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.shopcard__media { position: relative; aspect-ratio: 4/3; display: grid; place-items: center;
  background: var(--off-white); color: var(--gray-500); }
.shopcard__media svg { width: 34%; height: 34%; }
.shopcard__media .badge { position: absolute; top: 12px; left: 12px; }
.shopcard__name { font-weight: 700; font-size: var(--fs-h4); line-height: 1.25; color: var(--ink); padding: 16px 18px; text-align: center; }
.loja__cta { margin-top: 36px; text-align: center; }

/* Footer no desenho da assinatura de e-mail (revisão 8): marca | barra
   inclinada 15° | dados — o grupo inteiro fica junto, como na assinatura,
   em vez de logo e contato jogados nas duas pontas da largura. */
.footer__sign { display: grid; justify-items: center; justify-content: center;
  gap: 28px; text-align: center; }
.footer__logo img { display: block; height: 92px; width: auto; }
.footer__rule { display: none; }
.footer__contact { display: flex; flex-direction: column; align-items: center; gap: 16px; }
@media (min-width: 820px) {
  .footer__sign { grid-template-columns: auto auto auto; align-items: center; gap: 0; text-align: left; }
  .footer__logo img { height: 116px; }
  /* barra com a espessura e a altura do bloco de texto, como no lockup da
     assinatura; a margem lateral abre espaço para a inclinação */
  .footer__rule { display: block; align-self: stretch; width: 8px; margin: 2px 0 2px 42px;
    background: #ED1B24; transform: skewX(-15deg); }
  .footer__contact { align-items: flex-start; }
  /* Revisão final: a margem esquerda do texto acompanha os 15° da barra, como
     na assinatura de e-mail — cada linha recua Δy·tan(15°) em relação à de
     baixo (~9px por linha, pitch de 33,5px; ~12px até a fila de ícones).
     Sem isso a folga crescia de 23px no topo para 62px embaixo. */
  .footer__lines li:nth-child(1) { padding-left: 42px; }
  .footer__lines li:nth-child(2) { padding-left: 33px; }
  .footer__lines li:nth-child(3) { padding-left: 24px; }
  .footer__lines li:nth-child(4) { padding-left: 15px; }
  .footer__social--sign          { padding-left: 3px; }
}
.footer__lines { display: grid; gap: 8px; }
/* site em vermelho e WhatsApp como etiqueta — o telefone aparece uma vez só */
.footer__lines a.footer__site { color: var(--red); }
.footer__lines a.footer__wa { margin-left: 10px; font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.footer__lines a.footer__site:hover, .footer__lines a.footer__wa:hover { color: var(--white); }
.footer__lines a { color: var(--gray-200); font-size: var(--fs-body-sm); transition: color var(--dur-fast); }
.footer__lines a:hover { color: var(--red); }
/* Redes sociais com os ícones oficiais da assinatura (paralelogramo 15°) — revisão 9.4 */
.footer__social--sign { margin-top: 4px; }
.footer__social--sign a { width: auto; height: auto; border: 0; background: none; border-radius: 0;
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast); }
.footer__social--sign a:hover { background: none; transform: translateY(-2px); opacity: .85; }
.footer__social--sign img { display: block; height: 26px; width: auto; }
/* Mapa no rodapé */
.footer__map { margin-top: 40px; border: 1px solid var(--hairline-dark); border-radius: var(--radius); overflow: hidden; }
.footer__map iframe { display: block; width: 100%; height: 240px; border: 0; filter: grayscale(.2); }

/* ========================= 18. RESPONSIVO ========================= */
@media (max-width: 640px) {
  :root { --space-section: 68px; --cut: 0px; }
  html { scroll-padding-top: 72px; }
  .hero { padding-top: 108px; }
  .hero__cta { gap: 12px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .corner-slashes { display: none; }
  .showcase__body { padding: 30px 24px 34px; }
  .showcase__cta .btn { width: 100%; justify-content: center; }
  .marquee .client { width: 150px; height: 80px; }
  .marquee .client span { font-size: .9rem; }
}

/* Marquee estático quando o usuário prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__row { overflow: visible; }
  .marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__set { flex-wrap: wrap; justify-content: center; }
  .marquee__set[aria-hidden="true"] { display: none; }
}