/* ============================================================
   Cell Peças — site institucional
   Direção: ESCURO TÉCNICO. A marca continua a mesma (Cell Blue,
   Cell Lime, Archivo/IBM Plex); o que muda é a execução.

   Como funciona: os tokens BRUTOS vêm de tokens.css (cópia do
   Design System). Aqui só os tokens SEMÂNTICOS são remapeados
   para superfície escura — por isso o HTML quase não muda.

   Regras de marca mantidas:
   - lime é acento, nunca corpo de texto;
   - sem gradiente de cor de marca (só véus pretos sobre foto);
   - o logo nunca fica solto em fundo escuro: vai sempre em placa clara.
   ============================================================ */

:root {
  /* ---- superfícies escuras ---- */
  --surface-page:    #08090B;
  --surface-card:    #101216;
  --surface-sunken:  #0C0E11;
  --surface-raised:  #16191E;
  --surface-blue:    #04202F;
  --surface-lime:    var(--lime-400);

  /* ---- texto no escuro ---- */
  --text-strong: #F7F9FA;
  --text-body:   #C3C9CF;
  --text-muted:  #8B939C;
  --text-subtle: #6B737C;
  --text-link:   var(--blue-300);
  --text-link-hover: var(--lime-400);

  /* azul do DS (#006CA8) é escuro demais para texto sobre preto:
     no escuro o papel de "azul" é assumido pelos tons 300/400 */
  --brand-blue-lit: var(--blue-300);

  /* ---- linhas ---- */
  --line:        rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --line-lime:   color-mix(in srgb, var(--lime-400) 42%, transparent);

  --shell: 1240px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4.5rem, 11vw, 9rem);
}

html { scroll-behavior: smooth; background: var(--surface-page); overflow-x: clip; }
body { overflow-x: clip; }
body { background: var(--surface-page); color: var(--text-body); }
:target { scroll-margin-top: 96px; }
::selection { background: var(--lime-400); color: var(--lime-950); }

/* ---------- shell ---------- */
.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap--narrow { max-width: 820px; }
.sec { padding-block: var(--sec-y); position: relative; }
.sec--tight { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* as bandas agora são variações sutis de escuro, não blocos de cor */
.band--card   { background: var(--surface-page); }
.band--sunken { background: var(--surface-sunken); border-block: 1px solid var(--line); }
.band--blue   { background: var(--surface-blue); }
.band--lime   { background: var(--surface-lime); color: var(--lime-950); }
.band--lime h2, .band--lime h3, .band--lime .lede { color: var(--lime-950); }

/* ---------- tipografia ---------- */
h1, .h1 {
  font-family: var(--font-display);
  /* grande, mas a headline é uma frase longa: acima disso vira parede de 5 linhas */
  font-size: clamp(2.375rem, 5.4vw, 4.25rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.032em;
  color: var(--text-strong);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.4vw, 3.125rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--text-strong);
  text-wrap: balance;
}
h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -.015em; color: var(--text-strong); }

em, .lit { font-style: normal; color: var(--lime-400); }

.lede {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 58ch;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--lime-400); flex: 0 0 auto;
}
.eyebrow--chip::before { display: none; }
.eyebrow--chip {
  padding: .45rem .85rem;
  border: 1px solid var(--line-lime);
  border-radius: 999px;
  color: var(--lime-400);
  background: color-mix(in srgb, var(--lime-400) 8%, transparent);
}

.sec__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* o título respira numa medida própria; a lede é que fica estreita */
.sec__head h2 { max-width: 19ch; }
.sec__head .lede { max-width: 54ch; }
.sec__head.center h2 { max-width: 24ch; margin-inline: auto; }
.sec__head .eyebrow { margin-bottom: 1.1rem; }
.sec__head h2 + .lede { margin-top: 1.25rem; }
.sec__head.center { margin-inline: auto; text-align: center; }
.sec__head.center .eyebrow { justify-content: center; }
.sec__head.center .lede { margin-inline: auto; }

.mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- botões ---------- */
.cp-btn {
  --_h: 48px; --_px: 22px; --_fs: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  height: var(--_h); padding: 0 var(--_px);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--_fs); line-height: 1;
  border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; user-select: none; text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--ease-standard), border-color .18s var(--ease-standard),
              color .18s var(--ease-standard), transform .18s var(--ease-standard),
              box-shadow .25s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.cp-btn--lg { --_h: 56px; --_px: 28px; --_fs: 16px; }
.cp-btn--block { display: flex; width: 100%; }

/* primário: lime cheio. É o único elemento com essa saturação — por isso ele domina. */
.cp-btn--primary { background: var(--lime-400); color: var(--lime-950); }
.cp-btn--primary:hover {
  background: var(--lime-300); color: var(--lime-950);
  transform: translateY(-1px);
  box-shadow: 0 10px 34px -12px color-mix(in srgb, var(--lime-400) 75%, transparent);
}
.cp-btn--primary:active { transform: translateY(0); background: var(--lime-500); }

.cp-btn--accent { background: var(--lime-400); color: var(--lime-950); }
.cp-btn--accent:hover { background: var(--lime-300); color: var(--lime-950); transform: translateY(-1px); }

.cp-btn--secondary {
  background: transparent; color: var(--text-strong); border-color: var(--line-strong);
}
.cp-btn--secondary:hover { background: rgba(255,255,255,.05); border-color: var(--text-subtle); color: var(--text-strong); }

/* dentro da faixa lime, o botão inverte para o escuro */
.band--lime .cp-btn--primary, .band--lime .cp-btn--accent { background: var(--ink); color: var(--gray-50); }
.band--lime .cp-btn--primary:hover, .band--lime .cp-btn--accent:hover { background: #000; color: #fff; box-shadow: none; }
.band--lime .cp-btn--secondary { border-color: rgba(0,0,0,.28); color: var(--lime-950); }
.band--lime .cp-btn--secondary:hover { background: rgba(0,0,0,.07); color: var(--lime-950); }

.cp-btn--elevated { /* legado do tema claro: no escuro não há sombra dura */ }
.cp-btn:focus-visible { outline: 2px solid var(--lime-400); outline-offset: 2px; }
.cp-btn__ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* ---------- superfícies de conteúdo ---------- */
.cp-card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text-body);
  transition: border-color .2s var(--ease-standard), transform .2s var(--ease-standard), background-color .2s var(--ease-standard);
}
.cp-card--pad-md { padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.cp-card--pad-lg { padding: clamp(1.5rem, 3vw, 2.25rem); }
.cp-card--pop { border-color: var(--line); }
.cp-card--interactive:hover, .cp-card--pop:hover { border-color: var(--line-strong); }

.cp-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.cp-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.cp-badge--lime { color: var(--lime-400); border-color: var(--line-lime); background: color-mix(in srgb, var(--lime-400) 8%, transparent); }
.cp-badge--neutral { color: var(--text-subtle); }

/* specs do hero: linha técnica, não pastilhas */
.cp-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
@media (min-width: 480px) { .cp-tag { white-space: nowrap; } }
.cp-tag__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime-400); flex: 0 0 auto; }

/* ---------- header ---------- */
.qualify-bar {
  background: var(--surface-page); color: var(--text-subtle);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  text-align: center; padding: .6rem var(--pad-x);
}
.qualify-bar b { color: var(--lime-400); font-weight: 500; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-page) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__in { display: flex; align-items: center; gap: 1rem; min-height: 72px; }

/* o logo é preto sobre transparente: sempre em placa clara */
.brand { display: flex; align-items: center; gap: .85rem; margin-right: auto; }
.brand img {
  height: 48px; width: auto;
  background: #fff; border-radius: 10px;
  padding: 6px 9px;
}
/* o nome da marca ao lado do símbolo: a 48px o wordmark de dentro do logo
   é ilegível, então quem carrega o nome é este texto */
.brand__txt { display: none; }
@media (min-width: 620px) {
  .brand__txt {
    display: block;
    font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700;
    letter-spacing: -.015em; line-height: 1;
    color: var(--text-strong);
    padding-left: .9rem; border-left: 1px solid var(--line);
  }
}

.nav { display: none; gap: 2rem; align-items: center; }
.nav a { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); position: relative; }
.nav a:hover { color: var(--text-strong); }
.nav a[aria-current="page"] { color: var(--text-strong); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--lime-400);
}
@media (min-width: 940px) { .nav { display: flex; } }

.header-cta { display: none; }
@media (min-width: 940px) { .header-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -6px; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text-strong); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--line-strong); }
@media (min-width: 940px) { .nav-toggle { display: none; } }

.nav-drawer { display: none; border-top: 1px solid var(--line); background: var(--surface-sunken); padding-block: 1rem 1.5rem; }
.nav-drawer[data-open="true"] { display: block; }
.nav-drawer nav { display: grid; }
.nav-drawer nav a {
  padding: .95rem .25rem; font-weight: 500; color: var(--text-body);
  border-bottom: 1px solid var(--line);
}
.nav-drawer nav a:hover { color: var(--lime-400); }
.nav-drawer .cp-btn { margin-top: 1.25rem; }
@media (min-width: 940px) { .nav-drawer { display: none !important; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--surface-page); }
.hero::after { /* véu preto na base, funde a foto com a página */
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to bottom, transparent, var(--surface-page));
  pointer-events: none;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem);
}
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: .98fr 1.02fr; align-items: center; gap: clamp(3rem, 5vw, 5rem); }
}
.hero h1 { margin-block: 1.5rem 1.5rem; }
.hero__sub { font-size: clamp(1.0625rem, 1.7vw, 1.25rem); line-height: 1.55; color: var(--text-muted); max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.5rem; }
@media (max-width: 560px) { .hero__cta { display: grid; } .hero__cta .cp-btn { width: 100%; } }

.hero__seals {
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem;
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

/* a foto sangra para fora do container e dissolve nas bordas */
.hero__media { position: relative; }
@media (min-width: 620px) { .hero__media { margin-right: calc(var(--pad-x) * -1); } }
/* sangra até a borda direita da viewport.
   A conta é: quanto falta da borda do .wrap até a borda da tela.
   (a versão anterior invertia o sinal e, acima de ~1300px, ENCOLHIA a foto) */
@media (min-width: 980px) {
  .hero__media { margin-right: calc(var(--shell) / 2 - 50vw - var(--pad-x)); }
}
.hero__media img {
  width: 100%; height: auto; display: block;
  border-radius: 18px 0 0 18px;
  /* a foto original é de bancada clara: sem escurecer, ela vira um bloco branco
     brilhando no meio do preto */
  filter: brightness(.74) contrast(1.12) saturate(.92);
}
/* véus da própria cor da página fundem a foto no fundo.
   Mais previsível que mask-image, que extrapolava a caixa. */
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  /* stops curtos: a foto ficou maior, e em % o véu antigo virava vinheta */
  background:
    linear-gradient(to right,  var(--surface-page), transparent 10%),
    linear-gradient(to left,   var(--surface-page), transparent 11%),
    linear-gradient(to top,    var(--surface-page), transparent 11%),
    linear-gradient(to bottom, var(--surface-page), transparent 13%);
}
/* legenda embaixo da foto: sobre a imagem o lime some no cinza claro */
.hero__stamp {
  position: relative; z-index: 2;
  margin-top: 1.1rem;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-subtle);
}
.hero__stamp::before { content: "— "; color: var(--lime-400); }
.hero--compact .hero__grid { padding-block: clamp(3rem, 7vw, 5rem) clamp(3rem, 6vw, 4.5rem); }
.hero--compact .hero__media img { max-height: 400px; object-fit: cover; }

/* ---------- grids ---------- */
.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1040px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- comparativo ---------- */
.vs { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .vs { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.vs__col { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 18px; border: 1px solid var(--line); }
.vs__col--them { background: transparent; opacity: .72; }
.vs__col--us { background: var(--surface-card); border-color: var(--line-lime); }
.vs__col h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin-top: .9rem; }
.vs__col--them h3 { color: var(--text-muted); }
.vs__tag { margin-bottom: 0; }

.vs__list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.vs__list li {
  display: grid; grid-template-columns: 20px 1fr; gap: .85rem; align-items: start;
  font-size: var(--text-sm); line-height: 1.55;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.vs__list li:first-child { padding-top: 0; border-top: 0; }
.vs__list svg { width: 18px; height: 18px; margin-top: 2px; }
.vs__col--them svg { color: var(--text-subtle); }
.vs__col--us svg { color: var(--lime-400); }
.vs__col--us b { color: var(--text-strong); font-weight: 600; }

/* ---------- passos ---------- */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem;
  align-items: start;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  transition: background-color .25s var(--ease-standard);
}
@media (min-width: 760px) { .step { grid-template-columns: 6.5rem 1fr; gap: 2.5rem; } }
.step:hover { background: rgba(255,255,255,.018); }

/* número em contorno: o detalhe que dá cara de 2026 sem custar nada */
.step__n {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  font-weight: 800; line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  transition: -webkit-text-stroke-color .25s var(--ease-standard), color .25s var(--ease-standard);
}
.step:hover .step__n { -webkit-text-stroke-color: var(--lime-400); }
.step h3 { font-size: clamp(1.1875rem, 2.2vw, 1.5rem); margin-bottom: .65rem; }
.step p { font-size: var(--text-sm); line-height: 1.65; color: var(--text-muted); max-width: 62ch; }
.step p + p { margin-top: .6rem; }
.step__note {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--lime-400);
}
.step__note::before { content: ""; width: 14px; height: 1px; background: var(--lime-400); }

/* ---------- categorias ---------- */
.cat {
  display: block; padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text-body);
  transition: border-color .2s var(--ease-standard), transform .2s var(--ease-standard), background-color .2s var(--ease-standard);
}
.cat:hover { border-color: var(--line-lime); transform: translateY(-3px); background: var(--surface-raised); color: var(--text-body); }
.cat svg { width: 22px; height: 22px; color: var(--lime-400); margin-bottom: 1.5rem; }
.cat h3 { font-size: var(--text-base); margin-bottom: .35rem; }
.cat p { font-size: var(--text-sm); color: var(--text-subtle); line-height: 1.5; }

.cat-list { display: grid; gap: 1.25rem; }
@media (min-width: 940px) { .cat-list { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.cat-list article { display: flex; flex-direction: column; }
.cat-list article .hero__cta { margin-top: auto; padding-top: 2rem; }
.cat-list h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.cat-list .lede { font-size: var(--text-base); margin-top: 1rem; }
.cat-list__ico { width: 24px; height: 24px; color: var(--lime-400); margin-bottom: 1.25rem; }
.cat-list__nota { margin-top: 1rem; font-size: var(--text-sm); line-height: 1.6; color: var(--text-subtle); }

/* aviso destacado (ex.: por que não há preço no catálogo) */
.note {
  display: grid; grid-template-columns: 20px 1fr; gap: .9rem; align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2rem);
  font-size: var(--text-sm); line-height: 1.65; color: var(--text-muted); max-width: 82ch;
}
.note svg { width: 18px; height: 18px; color: var(--lime-400); margin-top: 3px; }
.note b { color: var(--text-strong); font-weight: 600; }
.note em { color: var(--text-body); font-style: italic; }

/* ---------- garantia: tipografia como imagem ---------- */
.guarantee {
  display: grid; gap: 2rem; align-items: start;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--surface-card);
  border: 1px solid var(--line-lime);
  border-radius: 22px;
}
@media (min-width: 860px) { .guarantee { grid-template-columns: auto 1fr; gap: 3.5rem; align-items: center; } }
.guarantee__ico { width: 40px; height: 40px; color: var(--lime-400); }
.guarantee h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.guarantee h2 em { color: var(--lime-400); }
.guarantee p { margin-top: 1.25rem; font-size: var(--text-md); line-height: 1.6; color: var(--text-muted); max-width: 60ch; }
.guarantee p + p { margin-top: .75rem; font-size: var(--text-sm); }

/* ---------- loja ---------- */
.store { display: grid; gap: 2.5rem; }
@media (min-width: 940px) { .store { grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 6vw, 5rem); align-items: center; } }
.store__img {
  width: 100%; height: auto; border-radius: 18px;
  border: 1px solid var(--line);
  filter: brightness(.86) contrast(1.06);
}
.store__facts { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; }
.store__facts li {
  display: grid; grid-template-columns: 20px 1fr; gap: .9rem; align-items: start;
  font-size: var(--text-sm);
  padding-block: 1.1rem; border-bottom: 1px solid var(--line);
}
.store__facts li:first-child { border-top: 1px solid var(--line); }
.store__facts svg { width: 17px; height: 17px; color: var(--lime-400); margin-top: 3px; }
.store__facts b {
  display: block; color: var(--text-subtle); font-weight: 500;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .3rem;
}
.store__facts span { color: var(--text-body); }

/* ---------- avaliações (carrossel de rolagem contínua) ----------
   A fila é clonada pelo JS e a animação anda exatamente metade da largura:
   quando termina, o clone está no lugar exato do original e o loop não tem emenda.
   Sangra até as bordas da tela de propósito — sugere que a fila não acaba. */
/* respiro grande antes do bloco do mapa: sem ele, o link "ver todas"
   encosta no olho da seção seguinte e os dois viram um bloco só */
.reviews { margin-bottom: clamp(4.5rem, 9vw, 7rem); }
.reviews__viewport {
  overflow: hidden;
  /* dissolve as pontas, senão o card aparece e some com corte seco */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.reviews__track {
  display: flex; gap: 1rem; width: max-content;
  padding-inline: 1rem;
  animation: reviews-marquee var(--marquee-dur, 60s) linear infinite;
}
.reviews__viewport:hover .reviews__track,
.reviews__viewport:focus-within .reviews__track { animation-play-state: paused; }
@keyframes reviews-marquee { to { transform: translateX(-50%); } }

.review {
  flex: 0 0 auto; width: clamp(272px, 27vw, 340px);
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--line); border-radius: 16px;
}
.review__stars { display: flex; gap: 2px; color: var(--lime-400); font-size: 13px; letter-spacing: .1em; }
.review__txt {
  font-size: var(--text-sm); line-height: 1.6; color: var(--text-body);
  /* avaliação longa não pode esticar o card e quebrar o ritmo da fila */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.review__by { margin-top: auto; padding-top: .25rem; display: grid; gap: .15rem; }
.review__by b { font-size: var(--text-sm); color: var(--text-strong); font-weight: 600; }
.review__by span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-subtle);
}
.reviews__fonte { margin-top: 1.5rem; text-align: center; font-size: var(--text-sm); }
.reviews__fonte a { color: var(--text-muted); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.reviews__fonte a:hover { color: var(--lime-400); border-color: var(--line-lime); }

@media (prefers-reduced-motion: reduce) {
  /* sem animação vira uma faixa que o usuário rola com o dedo/trackpad */
  .reviews__track { animation: none; }
  .reviews__viewport { overflow-x: auto; }
}

/* nota do Google em texto */
.rating {
  display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.75rem; padding: .7rem 1.15rem;
  border: 1px solid var(--line-lime); border-radius: 999px;
  font-size: var(--text-sm); color: var(--text-muted);
}
.rating b { color: var(--text-strong); font-weight: 700; }
.rating__stars { color: var(--lime-400); letter-spacing: .08em; font-size: 13px; }

/* ---------- mapa ----------
   Largura contida: o mapa do Google é um bloco branco, e em tela cheia
   ele ofusca o resto da página escura. */
.map { max-width: 920px; }
.map__frame {
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: var(--surface-sunken); line-height: 0;
}
.map__frame iframe { width: 100%; height: clamp(300px, 42vw, 420px); border: 0; display: block; }
.map__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; margin-top: 1.75rem; }
@media (max-width: 560px) { .map__cta { display: grid; } .map__cta .cp-btn { width: 100%; } }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); background: transparent; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.1875rem); letter-spacing: -.015em;
  color: var(--text-strong); cursor: pointer; list-style: none;
  transition: color .18s var(--ease-standard);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 1.5px solid var(--text-subtle); border-bottom: 1.5px solid var(--text-subtle);
  transform: rotate(45deg) translateY(-25%);
  transition: transform .22s var(--ease-standard), border-color .22s var(--ease-standard);
}
.faq details[open] summary { color: var(--lime-400); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-25%); border-color: var(--lime-400); }
.faq summary:hover { color: var(--lime-400); }
.faq__a { padding-bottom: 1.6rem; font-size: var(--text-sm); line-height: 1.7; color: var(--text-muted); max-width: 66ch; }
.faq__a p + p { margin-top: .8rem; }
.faq__a a { color: var(--lime-400); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(2.25rem, 7vw, 4.5rem); }
.cta-final .lede { margin-inline: auto; margin-top: 1.5rem; }
.cta-final .hero__cta { justify-content: center; }
.band--lime .cta-final .lede { color: color-mix(in srgb, var(--lime-950) 78%, transparent); }

/* ---------- consumidor ---------- */
.consumer {
  display: grid; gap: 1.75rem; align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface-card);
}
@media (min-width: 820px) { .consumer { grid-template-columns: 1fr auto; gap: 3rem; } }
.consumer h2 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); }
.consumer p { margin-top: .7rem; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; max-width: 56ch; }

/* ---------- rodapé ---------- */
.site-footer { background: var(--surface-sunken); border-top: 1px solid var(--line); }
.site-footer__grid { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.site-footer img.logo { height: 44px; width: auto; background: #fff; border-radius: 10px; padding: 7px 10px; }
.site-footer h3 {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: 1.25rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.site-footer li, .site-footer p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.site-footer a { color: var(--text-body); }
.site-footer a:hover { color: var(--lime-400); }
.site-footer__tag { margin-top: 1.5rem; max-width: 32ch; }
.site-footer__bottom {
  border-top: 1px solid var(--line); padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; justify-content: space-between;
}
.site-footer__bottom small { font-size: var(--text-xs); color: var(--text-subtle); }

/* ---------- WhatsApp flutuante ---------- */
.wa-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; box-shadow: 0 14px 40px -14px rgba(0,0,0,.9); }
@media (min-width: 940px) {
  .wa-float { right: 1.75rem; bottom: 1.75rem; box-shadow: 0 18px 50px -16px rgba(0,0,0,.95); }
}

/* ---------- reveal no scroll ----------
   O atributo é posto pelo JS, e só em elemento abaixo da dobra.
   Sem JS, nada recebe o atributo e a página aparece normal. */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- utilitários ---------- */
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pending { border-bottom: 1px dotted var(--amber-500); color: var(--text-muted); }

hr { border-top-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .cp-btn:hover, .cat:hover { transform: none; }
}