/* ============================================================================
   SISTEMA DE DESIGN — SITE WHITE LABEL PARA OFICINAS MECÂNICAS
   Base escura premium (referência: Porsche / BMW / Polestar) + seções claras
   editoriais. Acento quente único, tipografia com contraste de peso e largura.
   Nenhuma dependência externa além das fontes.
============================================================================ */

/* ---------------------------------------------------------------- 0. FONTES */
/* Hospedadas em assets/fontes/, subconjunto latino (cobre todo o português).
   Nenhuma requisição a terceiro: o site funciona offline e não manda o IP do
   visitante para o Google. A Archivo é a variável completa — é o que faz o
   font-variation-settings: "wdth" deste arquivo realmente funcionar. */
@font-face {
  font-family: "Archivo";
  src: url("fontes/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fontes/plexmono-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fontes/plexmono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Presets de acento — trocados por JS a partir do config.js */
  --acento:        #FF6B00;
  --acento-2:      #FFA24D;
  --acento-fraco:  rgba(255,107,0,.12);
  --acento-linha:  rgba(255,107,0,.32);
  --sobre-acento:  #140A02;

  /* Escuro */
  --tinta:      #0B0C0E;
  --tinta-2:    #101317;
  --tinta-3:    #161A1F;
  --tinta-4:    #1E242B;
  --texto:      #E9E7E3;
  --texto-2:    #A2A8AF;
  --texto-3:    #6E757D;
  --linha:      rgba(255,255,255,.085);
  --linha-2:    rgba(255,255,255,.16);

  /* Claro (seções invertidas) */
  --creme:      #F2EFE9;
  --grafite:    #14161A;
  --grafite-2:  #4A5058;
  --linha-c:    rgba(20,22,26,.13);

  --ok:         #3FB950;
  --estrela:    #FFB400;

  --fonte:  "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --env:    1240px;
  --gut:    clamp(20px, 5vw, 48px);
  --r:      3px;              /* raio: quase reto = industrial, não "card de IA" */
  --r-g:    6px;

  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-2: cubic-bezier(.65,0,.35,1);
}

/* --------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* O cabeçalho é grudado no topo, então link de âncora que para em y=0 entrega
   a seção POR BAIXO dele: sumia o "01 / SERVIÇOS" e o título, e quem clicou no
   menu caía numa faixa sem nada. Isto reserva a altura do cabeçalho rolado
   (64 px) mais uma folga, e vale para todo link de âncora do site. */
html { scroll-padding-top: 88px; }
/* Menu do celular aberto: a página não pode rolar por baixo dele. */
html.menu-travado { overflow: hidden; }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--texto);
  font-family: var(--fonte);
  font-variation-settings: "wdth" 100;
  font-size: clamp(15.5px, .45vw + 14.2px, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grão sutil: tira o aspecto "renderizado por computador" das áreas chapadas */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* `hidden` tem que vencer o display de qualquer classe. Sem isto, um elemento
   com .algo{display:grid} continua na tela mesmo com o atributo hidden, e o
   erro é silencioso: o JS "esconde" e nada acontece. */
[hidden] { display: none !important; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

::selection { background: var(--acento); color: var(--sobre-acento); }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--acento); color: var(--sobre-acento);
  padding: 10px 18px; font-weight: 600; border-radius: var(--r);
  transition: top .2s var(--ease);
}
.pular:focus { top: 12px; }

/* --------------------------------------------------- 3. TIPOGRAFIA / BASE */
.env {
  width: 100%; max-width: var(--env);
  margin-inline: auto; padding-inline: var(--gut);
}

.display {
  font-weight: 800;
  font-variation-settings: "wdth" 94;
  line-height: .98;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.hero__frase { font-size: clamp(2.5rem, 6.4vw, 5.1rem); }
h2.display { font-size: clamp(2rem, 4.3vw, 3.4rem); }
h3.display { font-size: clamp(1.25rem, 1.7vw, 1.55rem); letter-spacing: -.018em; line-height: 1.12; }

.kicker {
  font-family: var(--mono);
  font-size: .715rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--acento);
  display: flex; align-items: center; gap: 12px;
  font-weight: 500;
}
.kicker::before {
  content: ""; width: 26px; height: 1px;
  background: var(--acento); flex: none;
}
.kicker--num::before { content: none; }
.kicker b { color: var(--texto-3); font-weight: 500; margin-right: 2px; }

.lead { font-size: clamp(1.02rem, .5vw + .9rem, 1.19rem); color: var(--texto-2); max-width: 62ch; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Seções */
.secao { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.secao--creme {
  background: var(--creme); color: var(--grafite);
  --texto: var(--grafite); --texto-2: var(--grafite-2); --linha: var(--linha-c);
  --linha-2: rgba(20,22,26,.22); --texto-3: #7C838C;
}
.secao--creme .kicker b { color: #8A9099; }
.secao__cabeca { display: grid; gap: 20px; margin-bottom: clamp(38px, 5vw, 64px); }
@media (min-width: 900px) {
  .secao__cabeca--2col {
    grid-template-columns: minmax(0,1.05fr) minmax(0,.85fr);
    align-items: end; gap: 20px 56px;
  }
}
.secao__cabeca .lead { margin-top: 4px; }

/* ------------------------------------------------------------- 4. BOTÕES */
.btn {
  --bg: var(--acento); --fg: var(--sobre-acento); --bd: var(--acento);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bd); border-radius: var(--r);
  font-weight: 600; font-size: .95rem; letter-spacing: -.005em;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px var(--acento-linha); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --bg: transparent; --fg: var(--texto); --bd: var(--linha-2);
}
.btn--ghost:hover { --bd: var(--texto-2); box-shadow: none; background: rgba(255,255,255,.04); }
.secao--creme .btn--ghost:hover { background: rgba(20,22,26,.05); }

.btn--zap { --bg: #1FA855; --bd: #1FA855; --fg: #fff; }
.btn--zap:hover { box-shadow: 0 10px 26px -10px rgba(31,168,85,.7); }

.btn--bloco { width: 100%; }
.btn--g { padding: 18px 32px; font-size: 1rem; }

.link-seta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .93rem; color: var(--acento);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--acento), var(--acento));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s var(--ease);
}
.link-seta:hover { background-size: 100% 1px; }
.link-seta svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.link-seta:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------- 5. BARRA TOPO */
.topo {
  background: var(--tinta-2);
  border-bottom: 1px solid var(--linha);
  font-size: .78rem; color: var(--texto-2);
}
.topo__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 16px; min-height: 40px; padding-block: 8px; flex-wrap: wrap;
}
.topo__esq { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topo a:hover { color: var(--texto); }
.topo__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topo__item svg { width: 14px; height: 14px; opacity: .65; flex: none; }
@media (max-width: 720px) { .topo__esconde { display: none; } }

.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase;
}
.status__pt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); flex: none;
}
.status--aberto { color: #7BD98C; }
.status--aberto .status__pt { background: var(--ok); box-shadow: 0 0 0 0 rgba(63,185,80,.6); animation: pulso 2.4s infinite; }
@keyframes pulso {
  70%  { box-shadow: 0 0 0 7px rgba(63,185,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); }
}

/* ------------------------------------------------------------ 6. CABEÇALHO */
.cab {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
/* O fundo e o desfoque moram no pseudo-elemento, e não no .cab, de propósito.
   `backdrop-filter` num elemento faz dele o BLOCO DE CONTENÇÃO de todo
   `position: fixed` que estiver dentro — e o menu do celular é um painel fixo
   que mora dentro do cabeçalho. Com o filtro no .cab, o `inset: 0` do painel
   passava a valer em relação ao cabeçalho (75 px de altura) em vez da tela:
   o painel abria como uma tira de 120 px, com 92 px de recuo dentro dela, o
   que dava a faixa vazia com os links espremidos e rolando por fora. Aqui o
   filtro está num filho, então o .cab volta a ser um elemento comum e o painel
   volta a se medir pela tela. Mexer nisto exige testar o menu no celular. */
.cab::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--tinta) 82%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  transition: background .3s;
}
.cab.rolou { border-bottom-color: var(--linha); }
.cab.rolou::before { background: color-mix(in srgb, var(--tinta) 94%, transparent); }
.cab__in {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  min-height: 74px; transition: min-height .3s var(--ease);
}
.cab.rolou .cab__in { min-height: 64px; }

/* Logo — tipográfico automático OU imagem do cliente */
.logo { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; }
.logo__img { display: none; width: auto; }
.logo.tem-img .logo__img { display: block; }
.logo.tem-img .logo__marca { display: none; }
.logo__marca { display: flex; align-items: center; gap: 10px; }
.logo__sinal { width: 30px; height: 30px; flex: none; color: var(--acento); }
.logo__txt { display: grid; line-height: 1; }
.logo__nome {
  font-weight: 800; font-variation-settings: "wdth" 88;
  font-size: 1.17rem; letter-spacing: -.02em; text-transform: uppercase;
}
.logo__sub {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--texto-3); margin-top: 4px;
}

/* Modo "só o nome": sem símbolo, some a única pista de identidade colorida do
   cabeçalho. O sufixo recebe o acento e, quando nem sufixo existe, o nome
   ganha um pouco mais de peso para não ficar solto. Nada de moldura. */
.logo--nome .logo__sinal { display: none; }
.logo--nome .logo__sub { color: var(--acento); }
.logo--nome .logo__txt--so-nome .logo__nome {
  font-weight: 900; font-variation-settings: "wdth" 92; letter-spacing: -.024em;
}

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a {
  font-size: .89rem; font-weight: 500; color: var(--texto-2);
  padding: 6px 0; position: relative; transition: color .2s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--acento); transition: width .28s var(--ease);
}
.nav a:hover { color: var(--texto); }
.nav a:hover::after { width: 100%; }
.cab__cta { display: flex; align-items: center; gap: 10px; }
.cab__cta .btn { padding: 11px 20px; font-size: .875rem; }

.hamb {
  display: none; width: 44px; height: 44px; background: none;
  border: 1px solid var(--linha-2); border-radius: var(--r); cursor: pointer;
  align-items: center; justify-content: center;
}
.hamb span { display: block; width: 18px; height: 1.5px; background: var(--texto); position: relative; transition: .25s var(--ease); }
.hamb span::before, .hamb span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: var(--texto); transition: .25s var(--ease);
}
.hamb span::before { top: -6px; }
.hamb span::after  { top:  6px; }
.hamb[aria-expanded="true"] span { background: transparent; }
.hamb[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamb[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 980px) {
  .hamb { display: inline-flex; }
  .cab__cta .btn--ghost { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
    background: var(--tinta-2); border-left: 1px solid var(--linha);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    /* O recuo do topo tem que passar da BORDA DE BAIXO do cabeçalho, senão o
       primeiro link nasce atrás dele. E essa borda muda: no alto da página o
       cabeçalho vem depois da barra de horário, rolando ele encolhe e sobe.
       Por isso a medida vem do app.js na hora de abrir, e o valor aqui é só a
       rede de segurança de quem abrir o menu com o JS fora do ar. */
    padding: calc(var(--menu-topo, 92px) + 16px) 28px 28px; gap: 0;
    transform: translateX(100%); transition: transform .38s var(--ease-2);
    z-index: 99; overflow-y: auto;
    /* Sem isto, chegar ao fim da lista continua rolando a PÁGINA por baixo. */
    overscroll-behavior: contain;
  }
  .nav.aberto { transform: none; }
  /* Véu atrás do painel. Serve para duas coisas: escurecer a página para o
     painel ganhar destaque, e dar onde tocar para sair sem escolher nada do
     menu. Fica em 98, abaixo do painel (99) e do cabeçalho (100), então o X
     continua por cima e continua fechando. É criado pelo app.js e vive preso
     ao <body>: dentro do cabeçalho ele herdaria o mesmo problema de
     posicionamento do painel, por causa do backdrop-filter. */
  .nav-veu {
    position: fixed; inset: 0; z-index: 98;
    background: rgba(3, 4, 6, .62);
    opacity: 0; pointer-events: none;
    transition: opacity .34s var(--ease-2);
  }
  html.menu-travado .nav-veu { opacity: 1; pointer-events: auto; }

  /* O X de fechar, criado pelo app.js. `fixed` e não `absolute` porque o painel
     rola por dentro: como `absolute` ele subiria junto com a lista e sumiria
     justamente em quem tem a tela mais curta. As duas medidas vêm do app.js e
     o põem em cima do botão do cabeçalho, que fica escondido atrás do painel. */
  .nav__fechar {
    position: fixed; top: var(--menu-x-topo, 24px); right: var(--menu-x-dir, 20px);
    width: 44px; height: 44px; flex: none; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--linha-2); border-radius: var(--r);
    color: var(--texto); cursor: pointer;
  }
  .nav__fechar::before, .nav__fechar::after {
    content: ""; position: absolute; width: 18px; height: 1.5px;
    background: currentColor;
  }
  .nav__fechar::before { transform: rotate(45deg); }
  .nav__fechar::after  { transform: rotate(-45deg); }
  .nav a { font-size: 1.15rem; font-weight: 600; padding: 17px 0; border-bottom: 1px solid var(--linha); color: var(--texto); }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 22px; }
}
/* No computador a barra é horizontal e não há painel para fechar: o botão do
   WhatsApp de dentro do menu e o X saem de cena. */
@media (min-width: 981px) { .nav .btn, .nav__fechar { display: none; } }

/* ------------------------------------------------------------------ 7. HERO */
.hero {
  position: relative; overflow: hidden; background: var(--tinta);
  padding-block: clamp(56px, 7vw, 108px) clamp(48px, 6vw, 88px);
}

/* Fundo: as três fotos empilhadas no mesmo lugar, só a de cima visível.
   O zoom sai devagar (16s) porque movimento que se percebe começando é
   movimento que incomoda — este a pessoa só nota se olhar de propósito. */
.hero__fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; transform: scale(1.13);
  transition: opacity 1.5s linear;
}
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
}
.hero__slide.is-on { opacity: 1; animation: hero-zoom 16s linear forwards; }
@keyframes hero-zoom { from { transform: scale(1.13); } to { transform: scale(1); } }

/* Véu — é ele que faz o texto continuar legível em qualquer foto que entre,
   inclusive numa foto clara que o revendedor troque depois. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(11,12,14,.97) 0%,  rgba(11,12,14,.92) 30%,
                           rgba(11,12,14,.72) 58%, rgba(11,12,14,.4) 100%),
    linear-gradient(to top, var(--tinta) 0%, rgba(11,12,14,0) 26%);
}
@media (max-width: 860px) {
  /* No celular o topo fica quase o dobro mais alto que largo, e a foto larga
     entrava cortada a 30% da largura — sobrava uma tira sem assunto. O corte
     em pé (<source media>) resolve o enquadramento; aqui só muda o véu.
     Ele vem de cima para baixo e quase parelho, porque em tela estreita o
     texto ocupa o topo inteiro: véu só embaixo deixaria o título na parte
     clara da foto, e véu só em cima apagaria metade dela. */
  .hero__slide img { object-position: 50% 38%; }
  .hero::after {
    background: linear-gradient(to bottom,
      rgba(11,12,14,.78) 0%, rgba(11,12,14,.7) 40%,
      rgba(11,12,14,.9) 84%, var(--tinta) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__slide.is-on { animation: none; transform: none; }
}

.hero__in { position: relative; z-index: 2; }
.hero__in > div { max-width: 740px; }
/* O H1 leva a linha de cima e a frase: o espaço entre as duas, que antes era a
   margem do H1, agora é a margem da frase. O desenho é o mesmo. */
.hero h1 { margin: 0 0 24px; font-size: inherit; font-weight: inherit; }
.hero__frase { display: block; margin-top: 22px; }
.hero h1 em {
  font-style: normal; color: var(--acento);
  /* sublinhado desenhado: detalhe de mão, não efeito de template */
  background: linear-gradient(var(--acento-linha), var(--acento-linha)) 0 88% / 100% 5px no-repeat;
}
.hero .lead { margin-bottom: 30px; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Aviso de fora do horário: informação de serviço, não alarme. Discreto de
   propósito — se competir com o botão verde, atrapalha em vez de ajudar. */
.hero__fora {
  margin-top: 14px; font-size: .85rem; color: var(--texto-2);
  display: flex; align-items: center; gap: 8px; max-width: 46ch;
}
.hero__fora::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--texto-3); flex: none;
}

.selo-google {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 11px 17px 11px 13px; margin-bottom: 30px;
  border: 1px solid var(--linha); border-radius: 100px;
  background: rgba(255,255,255,.028);
}
.selo-google__nota { font-family: var(--mono); font-weight: 500; font-size: 1.06rem; letter-spacing: -.02em; }
.estrelas { display: inline-flex; gap: 2px; color: var(--estrela); }
.estrelas svg { width: 14px; height: 14px; }
.selo-google__txt { font-size: .8rem; color: var(--texto-2); line-height: 1.3; }
.selo-google__txt b { color: var(--texto); font-weight: 600; }
.selo-google__g { width: 17px; height: 17px; flex: none; }


.selo-google {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 11px 17px 11px 13px; margin-bottom: 30px;
  border: 1px solid var(--linha); border-radius: 100px;
  background: rgba(255,255,255,.028);
}
.selo-google__nota { font-family: var(--mono); font-weight: 500; font-size: 1.06rem; letter-spacing: -.02em; }
.estrelas { display: inline-flex; gap: 2px; color: var(--estrela); }
.estrelas svg { width: 14px; height: 14px; }
.selo-google__txt { font-size: .8rem; color: var(--texto-2); line-height: 1.3; }
.selo-google__txt b { color: var(--texto); font-weight: 600; }
.selo-google__g { width: 17px; height: 17px; flex: none; }

.hero__stats {
  /* Colunas criadas pelo número de quadros que sobraram, não fixas em 3:
     oficina que só informa o tempo de casa não fica com dois vãos vazios. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 1px; margin-top: 44px;
  background: var(--linha); border-block: 1px solid var(--linha);
}
.hero__stats > div { background: var(--tinta); padding: 20px 4px 20px 0; }
@media (max-width: 520px) { .hero__stats > div { padding-right: 10px; } }
.stat__n {
  font-family: var(--mono); font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 500; letter-spacing: -.04em; line-height: 1;
  display: flex; align-items: baseline; gap: 1px;
}
.stat__n small { font-size: .55em; color: var(--acento); font-weight: 500; }
.stat__r { font-size: .74rem; color: var(--texto-3); margin-top: 8px; line-height: 1.35; letter-spacing: .01em; }

/* Chapa: moldura de imagem. Troque o <svg> por <img> quando tiver a foto real */
.chapa {
  position: relative; overflow: hidden; border-radius: var(--r-g);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(255,255,255,.07), transparent 55%),
    linear-gradient(158deg, var(--tinta-4) 0%, var(--tinta-2) 58%, var(--tinta) 100%);
  border: 1px solid var(--linha);
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  isolation: isolate;
}
.chapa img { width: 100%; height: 100%; object-fit: cover; }
.chapa figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 15px 18px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texto-2);
  background: linear-gradient(transparent, rgba(11,12,14,.9) 62%);
  display: flex; justify-content: space-between; gap: 12px;
}
.chapa figcaption b { color: var(--acento); font-weight: 500; }

/* -------------------------------------------------------- 8. FAIXA CONFIANÇA */
.faixa { border-block: 1px solid var(--linha); background: var(--tinta-2); }
.faixa__in {
  display: flex; align-items: center; gap: clamp(22px, 4vw, 54px);
  padding-block: 22px; flex-wrap: wrap; justify-content: space-between;
}
.faixa__item { display: flex; align-items: center; gap: 12px; }
.faixa__item svg { width: 21px; height: 21px; color: var(--acento); flex: none; }
.faixa__item span { font-size: .855rem; color: var(--texto-2); line-height: 1.3; }
.faixa__item b { display: block; color: var(--texto); font-weight: 600; font-size: .9rem; }

/* ------------------------------------------------------------- 9. SERVIÇOS */
/* Grid assimétrico (bento) — evita a fileira de 3 cards idênticos */
.servicos {
  display: grid; gap: 1px; background: var(--linha);
  border: 1px solid var(--linha); border-radius: var(--r-g); overflow: hidden;
}
@media (min-width: 700px)  { .servicos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  /* 6 colunas: destaque = 3, normal = 2. Com os 2 destaques no topo, fecha
     em linhas exatas (3+3, depois 2+2+2). 'dense' evita buracos se o número
     de serviços mudar. */
  .servicos { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; }
}

.serv {
  background: var(--tinta); padding: clamp(26px, 2.6vw, 38px);
  display: flex; flex-direction: column; gap: 14px;
  position: relative; transition: background .3s var(--ease);
}
.serv::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--acento); transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease);
}
.serv:hover { background: var(--tinta-3); }
.serv:hover::after { transform: scaleX(1); }
@media (min-width: 1040px) {
  .serv { grid-column: span 2; }
  .serv--destaque { grid-column: span 3; }
}
.serv__ico { width: 30px; height: 30px; color: var(--acento); }
.serv h3 { margin-top: 2px; }
.serv__resumo { color: var(--texto-2); font-size: .94rem; }
.serv__itens { display: grid; gap: 7px; margin-top: 2px; }
.serv__itens li {
  font-size: .855rem; color: var(--texto-2);
  display: flex; gap: 9px; align-items: flex-start; line-height: 1.45;
}
.serv__itens li::before {
  content: ""; width: 4px; height: 4px; margin-top: 8px; flex: none;
  background: var(--acento); border-radius: 50%;
}
.serv__pe {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linha);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.serv__preco { font-family: var(--mono); font-size: .82rem; color: var(--texto-3); letter-spacing: -.01em; }
.serv__preco b { color: var(--texto); font-weight: 500; font-size: 1rem; }

/* Celular: o cartão vira linha de lista. Com os subitens abertos, os oito
   serviços ocupavam um quinto da página, e quem abre pelo WhatsApp rola
   isso com o polegar. Fica o que decide: ícone, nome, uma frase e o botão.
   Os subitens continuam no HTML (o Google lê), só não ocupam a tela. */
@media (max-width: 699px) {
  .serv {
    display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; row-gap: 6px;
    padding: 20px 18px 18px;
  }
  .serv > * { grid-column: 2; }
  .serv__ico { grid-column: 1; grid-row: 1; width: 26px; height: 26px; align-self: center; }
  .serv h3 { margin-top: 0; }
  .serv__itens { display: none; }
  .serv__pe { margin-top: 4px; padding-top: 0; border-top: 0; }
  /* "Orçamento sob consulta" repetido oito vezes soa como quem esconde preço.
     Sem preço, fica só o botão. Com preço, ele continua aparecendo. */
  .serv__preco--consulta { display: none; }
}

.aviso-preco {
  margin-top: 20px; font-size: .8rem; color: var(--texto-3);
  display: flex; gap: 9px; align-items: flex-start; max-width: 70ch;
}
.aviso-preco svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }

/* ------------------------------------------------------------- 10. PASSOS */
.passos { display: grid; gap: 1px; background: var(--linha); }
@media (min-width: 640px)  { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .passos { grid-template-columns: repeat(4, 1fr); } }
.passo {
  background: var(--creme); padding: clamp(26px, 2.4vw, 36px) clamp(22px, 2vw, 30px);
  display: grid; gap: 13px; align-content: start; position: relative;
}
.passo__n {
  font-family: var(--mono); font-size: 2.4rem; font-weight: 400;
  line-height: 1; letter-spacing: -.05em; color: var(--acento);
}
.passo h3 { font-size: 1.13rem; }
.passo p { font-size: .92rem; color: var(--grafite-2); }

/* ------------------------------------------------------ 11. DIFERENCIAIS */
.difs { display: grid; gap: clamp(28px, 3vw, 44px); }
@media (min-width: 760px) { .difs { grid-template-columns: repeat(2, 1fr); } }
.dif { display: grid; gap: 9px; padding-left: 22px; border-left: 2px solid var(--acento); }
.dif h3 { font-size: 1.1rem; }
.dif p { color: var(--texto-2); font-size: .93rem; }

/* ------------------------------------------------------------ 12. ORÇAMENTO */
.orc { display: grid; gap: clamp(36px, 4vw, 64px); align-items: start; }
@media (min-width: 940px) { .orc { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); } }

.form {
  background: var(--tinta-2); border: 1px solid var(--linha);
  border-radius: var(--r-g); padding: clamp(24px, 3vw, 38px);
  display: grid; gap: 16px;
}
.campo { display: grid; gap: 7px; }
.campo label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--texto-3);
}
.campo label span { color: var(--acento); }
.campo input, .campo select, .campo textarea {
  background: var(--tinta); border: 1px solid var(--linha-2);
  border-radius: var(--r); padding: 14px 15px; width: 100%;
  font-size: .95rem; transition: border-color .2s, background .2s;
  appearance: none;
}
.campo textarea { resize: vertical; min-height: 92px; font-family: inherit; }
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2A8AF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
  padding-right: 42px; cursor: pointer;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--acento); outline: none; background: var(--tinta-3);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); }
.campo--2 { display: grid; gap: 16px; }
@media (min-width: 520px) { .campo--2 { grid-template-columns: 1fr 1fr; } }
.form__nota { font-size: .78rem; color: var(--texto-3); text-align: center; line-height: 1.45; }
.form__nota svg { width: 12px; height: 12px; display: inline; vertical-align: -2px; margin-right: 3px; }

.orc__lista { display: grid; gap: 18px; margin: 26px 0 30px; }
.orc__lista li { display: flex; gap: 14px; align-items: flex-start; }
.orc__lista svg { width: 20px; height: 20px; color: var(--acento); flex: none; margin-top: 2px; }
.orc__lista b { display: block; font-weight: 600; margin-bottom: 3px; }
.orc__lista span { color: var(--texto-2); font-size: .9rem; }

.contato-rapido {
  display: grid; gap: 12px; padding-top: 26px; border-top: 1px solid var(--linha);
}
@media (min-width: 520px) { .contato-rapido { grid-template-columns: 1fr 1fr; } }
.cr {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px; border: 1px solid var(--linha); border-radius: var(--r);
  transition: border-color .2s, transform .2s var(--ease);
}
.cr:hover { border-color: var(--acento); transform: translateY(-2px); }
.cr svg { width: 21px; height: 21px; color: var(--acento); flex: none; }
.cr__t { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.cr__v { font-weight: 600; font-size: .96rem; margin-top: 2px; }

/* --------------------------------------------------------- 13. DEPOIMENTOS */
.dep-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }
.dep-nota {
  font-family: var(--mono); font-size: 3rem; font-weight: 500;
  line-height: 1; letter-spacing: -.05em;
}
.dep-topo__txt { font-size: .88rem; color: var(--grafite-2); }

.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(390px, 82vw);
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 18px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  scrollbar-width: thin; scrollbar-color: var(--linha-2) transparent;
}
.trilho::-webkit-scrollbar { height: 4px; }
.trilho::-webkit-scrollbar-thumb { background: var(--linha-2); border-radius: 4px; }
.trilho > * { scroll-snap-align: start; }

.dep {
  background: #fff; border: 1px solid var(--linha-c); border-radius: var(--r-g);
  padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px;
}
.secao--creme .dep { background: #fff; }
.dep__cab { display: flex; align-items: center; gap: 12px; }
.dep__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: .92rem;
  background: var(--acento); color: var(--sobre-acento);
}
.dep__nome { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.dep__meta { font-size: .76rem; color: #8A9099; margin-top: 2px; }
/* O G fica no alto à direita, colado no topo do cartão: é a assinatura de
   onde a avaliação veio, não um item da linha do nome. */
.dep__g { width: 20px; height: 20px; flex: none; margin-left: auto; align-self: flex-start; }
/* Estrelas logo abaixo do nome, com o selo de verificado ao lado — é assim que
   a pessoa já leu esse cartão mil vezes no próprio Google. */
.dep__notas { display: flex; align-items: center; gap: 7px; }
.dep__notas .estrelas svg { width: 15px; height: 15px; }
.dep__ok { width: 14px; height: 14px; flex: none; }
.dep p { font-size: .93rem; color: var(--grafite-2); flex: 1; }

/* ------------------------------------------------------------- 14. GALERIA */
.galeria { display: grid; gap: 14px; }
.galeria .chapa { aspect-ratio: 4 / 3; }
@media (min-width: 700px) {
  .galeria { grid-template-columns: repeat(4, 1fr); }

  /* 4 fotos — o arranjo editorial. A 1ª estica sozinha nas duas linhas e a 4ª
     vira faixa larga, então as duas linhas fecham na mesma altura. */
  .galeria--4 > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .galeria--4 > :nth-child(4) { grid-column: span 2; }
  .galeria--4 > :nth-child(1).chapa { aspect-ratio: auto; }
  .galeria--4 > :nth-child(4).chapa { aspect-ratio: 8 / 3; }

  /* Menos de 4 fotos: reorganiza para não sobrar buraco no grid. */
  .galeria--1 { grid-template-columns: 1fr; }
  .galeria--1 .chapa { aspect-ratio: 16 / 7; }
  .galeria--2 { grid-template-columns: repeat(2, 1fr); }
  .galeria--3 { grid-template-columns: repeat(3, 1fr); }
  .galeria--3 > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .galeria--3 > :nth-child(1).chapa { aspect-ratio: auto; }

  /* 5 ou mais: quatro colunas iguais, sem destaque — nunca quebra. */
}

/* ------------------------------------------------ 14b. O QUE A GENTE NÃO FAZ */
/* Lista discreta de propósito: o efeito vem de ela existir, não de gritar. */
.nao-faz {
  margin-top: clamp(38px, 4.5vw, 60px); padding-top: 26px;
  border-top: 1px solid var(--linha);
  display: grid; gap: 14px; max-width: 76ch;
}
.nao-faz h3 {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--texto-3); font-weight: 500;
}
.nao-faz ul { display: flex; flex-wrap: wrap; gap: 8px 9px; }
.nao-faz li {
  font-size: .86rem; color: var(--texto-2);
  padding: 6px 13px; border: 1px solid var(--linha); border-radius: 100px;
}
.nao-faz > p { font-size: .83rem; color: var(--texto-3); }

/* -------------------------------------------------------------- 15. MARCAS */
.marcas-faixa { border-block: 1px solid var(--linha); padding-block: 26px; overflow: hidden; }
.marcas-titulo {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--texto-3);
  text-align: center; margin-bottom: 20px;
}
.esteira { position: relative; display: flex; overflow: hidden; }
/* As pontas somem por baixo de um degradê da cor da tarja, e não com
   mask-image. Máscara sobre uma faixa que anda obriga o navegador a guardar a
   esteira inteira como uma textura só; com muitas marcas, e ainda multiplicada
   pela densidade de tela do celular, essa textura passa do tamanho que o
   aparelho aguenta e ele simplesmente não desenha nada — era a tarja preta
   sem logo nenhum depois de um tempo. Degradê pintado por cima custa zero. */
.esteira::before, .esteira::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 8%;
  z-index: 2; pointer-events: none;
}
.esteira::before { left: 0;  background: linear-gradient(to right, var(--tinta), transparent); }
.esteira::after  { right: 0; background: linear-gradient(to left,  var(--tinta), transparent); }
.esteira__fita {
  display: flex; gap: clamp(30px, 4vw, 62px); padding-right: clamp(30px, 4vw, 62px);
  /* O tempo vem do app.js: a esteira anda a uma velocidade fixa em pixels por
     segundo, não num tempo fixo. Tempo fixo faz a mesma animação arrastar com
     poucas marcas e disparar com muitas. */
  animation: correr var(--marcas-dur, 42s) linear infinite; flex: none;
}
/* Pausar no hover só onde existe ponteiro de verdade. No celular o :hover
   gruda depois do toque, e a esteira ficava parada achando que o dedo ainda
   estava em cima — era o "quase parando". */
@media (hover: hover) {
  .esteira:hover .esteira__fita { animation-play-state: paused; }
}
@keyframes correr { to { transform: translateX(-100%); } }
.marca { display: inline-flex; align-items: center; flex: none; }
/* O logo é o padrão; o nome escrito é a reserva de quem ainda não tem arquivo.
   Um dos dois aparece, nunca os dois — quem troca é o .marca--texto que o
   app.js põe quando a imagem não carrega. */
.marca__nome { display: none; }
.marca--texto .marca__logo { display: none; }
.marca--texto .marca__nome { display: inline; }

.marca__logo {
  height: 40px; width: auto; max-width: 150px; object-fit: contain;
  /* Logo colorido sobre a tarja escura, como na referência: nada de filtro
     nem de máscara branca — a Ferrari é amarela e a BMW é azul. Só o mesmo
     recuo de presença que o nome escrito já tinha. */
  opacity: .72; transition: opacity .25s;
}
.marca:hover .marca__logo { opacity: 1; }

.esteira .marca__nome {
  font-weight: 700; font-variation-settings: "wdth" 86;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem); letter-spacing: -.015em;
  color: var(--texto-3); white-space: nowrap; transition: color .25s;
}
.esteira .marca:hover .marca__nome { color: var(--texto); }
@media (prefers-reduced-motion: reduce) {
  .esteira__fita { animation: none; }
  .esteira { overflow-x: auto; }
}

/* Formato conforme a quantidade — a classe vem do renderMarcas().
   Faixa que cabe inteira na tela não tem por que rolar, e esteira rolante com
   uma marca só é a palavra atravessando uma tarja vazia em looping. */
.marcas--uma .esteira,
.marcas--poucas .esteira {
  overflow: visible; overflow-x: visible; justify-content: center;
}
.marcas--uma .esteira::before,   .marcas--uma .esteira::after,
.marcas--poucas .esteira::before, .marcas--poucas .esteira::after { display: none; }
.marcas--uma .esteira__fita,
.marcas--poucas .esteira__fita {
  animation: none; flex: 1; flex-wrap: wrap; justify-content: center;
  padding-right: 0; row-gap: 10px;
}
/* Uma marca só é declaração de posicionamento, não item de lista. */
.marcas--uma .esteira .marca__nome {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: var(--texto);
  letter-spacing: -.02em;
}
/* O logo acompanha o formato: discreto na esteira de muitas, grande quando a
   oficina é especializada numa marca só. */
.marcas--poucas .marca__logo { height: 52px; max-width: 180px; }
.marcas--uma   .marca__logo { height: 84px; max-width: 280px; opacity: 1; }

/* --------------------------------------------------- 15b. SINAIS DE ALERTA */
/* Duas colunas no computador, uma no celular. Cartão não: são frases curtas
   para varrer com o olho, e caixa em volta de cada uma vira ruído. */
.sinais { display: grid; gap: 2px; grid-template-columns: repeat(2, 1fr); list-style: none; }
@media (max-width: 780px) { .sinais { grid-template-columns: 1fr; } }
.sinal {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px 20px 0; border-top: 1px solid var(--linha);
}
.sinal__i { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--acento); }
.sinal b { display: block; font-size: 1rem; letter-spacing: -.01em; }
.sinal p { font-size: .88rem; color: var(--texto-2); margin-top: 5px; }

/* Convite de avaliação, no fim do trilho de depoimentos. Fica na seção creme,
   então as cores vêm dos tokens claros e não dos escuros. */
.pede-nota {
  margin-top: 34px; padding: 22px 24px;
  border: 1px dashed var(--linha-c); border-radius: var(--r-g);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px 24px;
}
.pede-nota b { display: block; font-size: 1.02rem; letter-spacing: -.01em; }
.pede-nota p { font-size: .88rem; color: var(--texto-2); margin-top: 4px; max-width: 44ch; }
.pede-nota .btn svg { width: 17px; height: 17px; }

/* ----------------------------------------------------------------- 16. FAQ */
.faq { display: grid; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq details:first-child { border-top: 1px solid var(--linha); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 46px 24px 0;
  font-weight: 600; font-size: clamp(1rem, 1.2vw, 1.1rem);
  position: relative; display: block; transition: color .2s;
  letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--acento); }
.faq summary::after, .faq summary::before {
  content: ""; position: absolute; right: 6px; top: 50%;
  background: var(--acento); transition: transform .3s var(--ease);
}
.faq summary::after  { width: 15px; height: 1.5px; transform: translateY(-50%); }
.faq summary::before { width: 1.5px; height: 15px; right: 12.75px; transform: translateY(-50%); }
.faq details[open] summary::before { transform: translateY(-50%) rotate(90deg); }
.faq__c { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.faq details[open] .faq__c { grid-template-rows: 1fr; }
.faq__c > div { overflow: hidden; }
.faq__c p { padding-bottom: 26px; max-width: 74ch; color: var(--texto-2); font-size: .95rem; }

/* ------------------------------------------------------------- 17. LOCAL */
.local { display: grid; gap: clamp(30px, 3.4vw, 52px); align-items: start; }
@media (min-width: 940px) { .local { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); } }
.mapa {
  border: 1px solid var(--linha); border-radius: var(--r-g);
  overflow: hidden; aspect-ratio: 16 / 11; background: var(--tinta-2);
}
.mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.06); }
.info-bloco { display: grid; gap: 8px; padding-block: 20px; border-bottom: 1px solid var(--linha); }
.info-bloco:first-of-type { border-top: 1px solid var(--linha); }
.info-bloco dt {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-3);
}
.info-bloco dd { margin: 0; font-size: .97rem; }
.info-bloco dd + dd { color: var(--texto-2); font-size: .88rem; }
.tabela-h { display: grid; gap: 7px; }
.tabela-h div { display: flex; justify-content: space-between; gap: 16px; font-size: .92rem; }
.tabela-h span:last-child { font-family: var(--mono); font-size: .86rem; color: var(--texto-2); }
.tabela-h .hoje span:last-child { color: var(--acento); }
.tabela-h .hoje span:first-child::after {
  content: "hoje"; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acento); margin-left: 9px;
  border: 1px solid var(--acento-linha); padding: 2px 6px; border-radius: 2px;
}

.pgto { display: flex; flex-wrap: wrap; gap: 8px; }
.pgto li {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  padding: 7px 12px; border: 1px solid var(--linha); border-radius: 100px;
  color: var(--texto-2);
}

/* ---------------------------------------------------------- 18. CTA FINAL */
.cta-final { position: relative; overflow: hidden; background: var(--tinta-2); }
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 130% at 50% 108%, var(--acento-fraco), transparent 62%);
}
.cta-final__in { position: relative; text-align: center; display: grid; gap: 24px; justify-items: center; }
.cta-final .lead { margin-inline: auto; }
.cta-final__acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* -------------------------------------------------------------- 19. RODAPÉ */
.rodape { background: var(--tinta); border-top: 1px solid var(--linha); padding-block: clamp(48px, 5vw, 76px) 0; }
.rodape__grid { display: grid; gap: 40px; }
@media (min-width: 800px) { .rodape__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.rodape h4 {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--texto-3); margin-bottom: 16px; font-weight: 500;
}
.rodape ul { display: grid; gap: 10px; }
.rodape li a, .rodape address { font-size: .89rem; color: var(--texto-2); font-style: normal; line-height: 1.65; }
.rodape li a:hover { color: var(--acento); }
.rodape__sobre p { font-size: .89rem; color: var(--texto-2); margin-top: 16px; max-width: 34ch; }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
  width: 38px; height: 38px; border: 1px solid var(--linha); border-radius: var(--r);
  display: grid; place-items: center; color: var(--texto-2);
  transition: border-color .2s, color .2s, transform .2s var(--ease);
}
.social a:hover { color: var(--acento); border-color: var(--acento); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }
.rodape__base {
  margin-top: clamp(36px, 4vw, 56px); padding-block: 24px; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .78rem; color: var(--texto-3);
}
.rodape__base a:hover { color: var(--texto-2); }

/* ---------------------------------------------------------- 20. FLUTUANTES */
.zap-flut {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #1FA855; color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px -8px rgba(31,168,85,.6);
  transition: transform .25s var(--ease);
}
.zap-flut:hover { transform: scale(1.07); }
.zap-flut svg { width: 27px; height: 27px; }
.zap-flut::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #1FA855; animation: anel 2.6s ease-out infinite;
}
@keyframes anel {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .zap-flut::after { animation: none; } }

/* Barra fixa no rodapé do celular — padrão de maior conversão em mobile */
.barra-mob {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--linha); border-top: 1px solid var(--linha);
  transform: translateY(110%); transition: transform .35s var(--ease-2);
}
.barra-mob.vis { transform: none; }
.barra-mob a {
  background: var(--tinta-2); padding: 15px 8px; text-align: center;
  font-weight: 600; font-size: .89rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.barra-mob a svg { width: 17px; height: 17px; }
.barra-mob .zap { background: #1FA855; color: #fff; }
@media (max-width: 720px) {
  .barra-mob { display: grid; }
  .zap-flut { display: none; }
  body { padding-bottom: 54px; }
}

/* --------------------------------------------- 21. PAINEL DE DEMONSTRAÇÃO */
/* Só aparece com ?demo=1 na URL. Serve para trocar logo e cor na frente do
   cliente durante a reunião de venda. Nunca aparece no site publicado.      */
.demo-abre {
  position: fixed; right: 20px; bottom: 88px; z-index: 96;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: var(--tinta-4); border: 1px solid var(--linha-2); color: var(--texto);
  display: none; place-items: center;
}
.demo-abre svg { width: 20px; height: 20px; }
body.modo-demo .demo-abre { display: grid; }

.demo {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 130;
  width: min(340px, 90vw); background: var(--tinta-2);
  border-left: 1px solid var(--linha-2); padding: 24px;
  overflow-y: auto; transform: translateX(101%);
  transition: transform .38s var(--ease-2);
  display: grid; gap: 20px; align-content: start;
}
.demo.aberto { transform: none; }
.demo__x { position: absolute; top: 16px; right: 16px; background: none; border: 0; cursor: pointer; color: var(--texto-2); font-size: 1.4rem; line-height: 1; }

/* De quem são os valores do painel. Grudada no topo: o painel ficou comprido, e
   a informação tem que continuar à vista quando você rola até os botões. */
.demo__quem {
  position: sticky; top: -24px; z-index: 2;
  margin: -24px -24px 0; padding: 16px 46px 14px 24px;
  background: var(--tinta-3); border-bottom: 1px solid var(--acento-linha);
  font-weight: 700; font-size: .98rem; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
/* Aviso de que sobrou dado de outra oficina. Antes era uma linha cinza fácil de
   rolar para longe; agora é bloco, com as duas ações dentro dele — a escolha
   acontece aqui, não depois. */
.demo__antes {
  display: grid; gap: 10px; margin-top: -6px;
  padding: 11px 12px; border-radius: var(--r);
  border: 1px solid var(--estrela); border-left-width: 3px;
  background: rgba(255, 180, 0, .07);
  font-size: .78rem; line-height: 1.45; color: var(--texto-2);
}
.demo__antes-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.demo__antes button {
  cursor: pointer; font: inherit; font-size: .76rem;
  background: none; border: 1px solid var(--linha-2); border-radius: var(--r);
  padding: 7px 11px; color: var(--texto-2);
}
/* O caminho seguro é o que se enxerga primeiro. Seletor com o `button` junto
   de propósito: `.demo__antes button` acima é mais específico e comeria o
   fundo do acento. */
.demo__antes button.demo__antes-ok {
  background: var(--acento); border-color: var(--acento);
  color: var(--sobre-acento); font-weight: 600;
}

.demo h3 { font-size: 1.05rem; }
.demo__d { font-size: .8rem; color: var(--texto-3); margin-top: -12px; }
.demo__campo { display: grid; gap: 8px; }
.demo__campo > label {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--texto-3);
}
.demo input[type=text] {
  background: var(--tinta); border: 1px solid var(--linha-2);
  border-radius: var(--r); padding: 11px 13px; font-size: .9rem; width: 100%;
}
.demo__cores { display: flex; gap: 9px; flex-wrap: wrap; }
.demo__cor {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.demo__cor[aria-pressed="true"] { border-color: var(--texto); }
.demo__arquivo {
  border: 1px dashed var(--linha-2); border-radius: var(--r);
  padding: 16px; text-align: center; cursor: pointer; font-size: .82rem; color: var(--texto-2);
  transition: border-color .2s, color .2s;
}
.demo__arquivo:hover { border-color: var(--acento); color: var(--texto); }
.demo input[type=file] { display: none; }

/* Campo cujo valor veio da demonstração anterior e ainda NÃO foi digitado
   nesta sessão. Não é erro — é "isto ainda não é seu". Some no primeiro toque.
   Cor de atenção, nunca o vermelho de campo inválido.
   Mora DEPOIS das regras de input de propósito: `.demo input[type=text]` tem a
   mesma especificidade, e quem vem por último ganha. */
.demo__campo.campo-restaurado > input,
.demo__campo.campo-restaurado > textarea,
.demo__campo.campo-restaurado > .demo__ops,
.demo__campo.campo-restaurado > .demo__lista {
  border-left: 3px solid var(--estrela);
}
.demo__campo.campo-restaurado > label:first-of-type::after {
  content: " · da oficina anterior";
  color: var(--estrela); letter-spacing: .06em;
}
.demo__reset { font-size: .8rem; color: var(--texto-3); text-decoration: underline; cursor: pointer; background: none; border: 0; justify-self: start; padding: 0; }

/* Bloco de campos montado pelo app.js */
#demo-campos, #demo-campos-fino { display: grid; gap: 14px; }
.demo__grupo {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acento);
  margin: 10px 0 -4px; padding-top: 14px; border-top: 1px solid var(--linha);
}
#demo-campos .demo__campo:first-of-type + .demo__grupo { margin-top: 0; }

/* Seletor de cor exata da marca do cliente */
.demo__livre {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: .8rem; color: var(--texto-2); margin-top: 4px;
}
.demo__livre input[type=color] {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--linha-2); border-radius: 50%;
}
.demo__livre input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.demo__livre input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }

.demo__chave {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: .85rem; color: var(--texto-2);
  padding-top: 16px; border-top: 1px solid var(--linha);
}
.demo__chave input { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }

.demo__copiar {
  background: var(--acento); color: var(--sobre-acento);
  border: 0; border-radius: var(--r); padding: 13px 16px;
  font-weight: 600; font-size: .88rem; cursor: pointer;
  transition: filter .2s;
}
.demo__copiar:hover { filter: brightness(1.08); }
/* O segundo botão é o caminho da entrega, não o da reunião: fica secundário */
.demo__copiar--2 {
  background: transparent; color: var(--texto-2);
  border: 1px solid var(--linha-2);
}
.demo__copiar--2:hover { color: var(--texto); border-color: var(--texto-3); }
.demo__aviso {
  font-size: .75rem; line-height: 1.45; color: var(--texto-3);
  margin: -8px 0 2px;
}
.demo__aviso:empty { display: none; }

/* Frases longas (título do topo, avaliação do Google) pedem caixa alta, não
   campo de uma linha em que o texto rola para o lado. */
.demo textarea {
  background: var(--tinta); border: 1px solid var(--linha-2);
  border-radius: var(--r); padding: 11px 13px; font-size: .9rem;
  width: 100%; font: inherit; line-height: 1.5; resize: vertical;
}
.demo textarea:focus-visible,
.demo input[type=text]:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Campos de escolha (`op` na lista CAMPOS) */
.demo__ops { display: flex; flex-wrap: wrap; gap: 6px; }
.demo__op {
  flex: 1 1 auto; background: var(--tinta); color: var(--texto-2);
  border: 1px solid var(--linha-2); border-radius: var(--r);
  padding: 9px 10px; font-size: .78rem; cursor: pointer; line-height: 1.2;
  transition: border-color .18s, color .18s, background .18s;
}
.demo__op:hover { color: var(--texto); border-color: var(--texto-3); }
.demo__op[aria-pressed="true"] {
  border-color: var(--acento); color: var(--acento); background: var(--acento-fraco);
}

/* Atalhos ao lado do rótulo de um grupo ("todas as populares", "limpar") */
.demo__atalhos { float: right; display: flex; gap: 10px; }
.demo__atalhos button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .68rem; color: var(--acento);
  text-decoration: underline; text-underline-offset: 2px;
}
/* Rótulo de um segundo campo dentro do mesmo bloco */
.demo__sub { margin-top: 4px; }

/* Fileira de símbolos: quadrados iguais com o desenho, não o nome escrito */
.demo__ops--ico { display: grid; grid-template-columns: repeat(4, 1fr); }
.demo__ops--ico .demo__op { padding: 8px; display: grid; place-items: center; }
.demo__ops--ico svg { width: 22px; height: 22px; }

/* Dobra dentro de um grupo de campos (`dobra` na lista CAMPOS) */
.demo__dobra > summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--texto-3);
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.demo__dobra > summary::-webkit-details-marker { display: none; }
.demo__dobra > summary::before {
  content: "+"; font-family: var(--mono); color: var(--acento);
  width: 12px; text-align: center;
}
.demo__dobra[open] > summary::before { content: "–"; }
.demo__dobra > div { display: grid; gap: 14px; padding-top: 12px; }

/* Envio do logo, dentro do campo "Logotipo" */
.demo__logo-arq { display: grid; gap: 10px; margin-top: 10px; }
.demo__logo-arq .demo__aviso { margin: 0; }

/* Horário: rótulo do dia + abre + fecha na mesma linha */
.demo__hora { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.demo__hora > span { font-size: .82rem; color: var(--texto-2); }
.demo input[type=time] {
  background: var(--tinta); border: 1px solid var(--linha-2); color: var(--texto);
  border-radius: var(--r); padding: 7px 9px; font: inherit; font-size: .82rem;
}
.demo input[type=time]:disabled { opacity: .35; }
.demo input[type=time]::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }

/* Caixinha secundária: sem a linha de cima do .demo__chave principal */
.demo__chave--fina {
  font-size: .82rem; padding-top: 0; border-top: 0; gap: 8px;
}
.demo__lista { display: grid; gap: 7px; }

/* Ajuste fino e ordem das colunas: <details> nativo, sem acordeão em JS */
.demo__fino, .demo__ordem { border-top: 1px solid var(--linha); padding-top: 16px; }
.demo__fino > summary, .demo__ordem > summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: .88rem;
  display: flex; align-items: center; gap: 8px;
}
.demo__fino > summary::-webkit-details-marker,
.demo__ordem > summary::-webkit-details-marker { display: none; }
.demo__fino > summary::before, .demo__ordem > summary::before {
  content: "+"; font-family: var(--mono); color: var(--acento);
  width: 14px; text-align: center;
}
.demo__fino[open] > summary::before, .demo__ordem[open] > summary::before { content: "–"; }
.demo__fino[open] > summary { margin-bottom: 18px; }
.demo__fino > summary ~ * { margin-top: 20px; }

.demo__ordem { border-top: 0; padding-top: 4px; font-size: .75rem; color: var(--texto-3); }
.demo__ordem > summary { font-weight: 400; font-size: .75rem; color: var(--texto-3); }
.demo__ordem ol { margin: 10px 0 8px 18px; display: grid; gap: 2px; }
.demo__ordem p { line-height: 1.5; }

/* Bloco sem valor (número de `prova`, ponto de referência, estacionamento,
   e-mail): some da tela sem sair do DOM, para o painel conseguir trazer de
   volta assim que o campo for digitado. No site publicado o bloco é removido
   de verdade — esta classe é só a versão do painel. */
.bloco-vazio { display: none !important; }

/* --------------------------------------------------------- 22. REVELAÇÃO */
/* Só esconde para animar quando o JavaScript existe (a classe "js" vem do
   <head>). Sem ele, robô e celular com script travado leem a página inteira,
   em vez de uma página em branco. O topo nem entra aqui: nasce na tela, que é
   o que o Google mede como carregamento. */
.js .rev { opacity: 0; transform: translateY(16px); }
.js .rev.vis {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .rev, .js .rev.vis { opacity: 1; transform: none; transition: none; }
}

/* Impressão — o cliente costuma imprimir a proposta */
@media print {
  .cab, .topo, .zap-flut, .barra-mob, .demo, .demo-abre, .mapa { display: none !important; }
  body { background: #fff; color: #000; }
  .secao { padding-block: 24px; }
}

/* --- Promoção sazonal (PMAXXI): sai junto com a seção #promocao ------------------- */
.promo { background: var(--tinta-2); border-block: 1px solid var(--linha); }
.promo__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px; margin-top: clamp(24px, 4vw, 40px); }
.promo__card { display: flex; flex-direction: column; background: var(--tinta-3);
  border: 1px solid var(--acento-linha); border-radius: var(--r-g); overflow: hidden; }
.promo__card img { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.promo__corpo { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: clamp(20px, 3vw, 28px); }
.promo__corpo h3 { font-size: 1.35rem; line-height: 1.2; text-wrap: balance; }
.promo__corpo p { color: var(--texto-2); }
.promo__preco { font-variant-numeric: tabular-nums; }
.promo__preco b { color: var(--acento); font-size: 2rem; font-weight: 800; margin-inline: 4px; }
.promo__preco span { color: var(--texto); font-weight: 600; }
.promo__corpo .btn { margin-top: auto; align-self: flex-start; }
.promo__nota { margin-top: 20px; color: var(--texto-3); font-size: .9rem; max-width: 72ch; }

/* --- Instagram no topo e no herói (PMAXXI) -------------------------------------- */
.topo__dir { display: flex; align-items: center; gap: 18px; }
.hero__provas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.selo-ig:hover .selo-google__txt b { color: var(--acento); }
.nav__ig { display: none; }
@media (max-width: 980px) { .nav__ig { display: block; } }