/* ==========================================================================
   GARAGE MR2 — SISTEMA VISUAL
   --------------------------------------------------------------------------
   Tudo aqui é derivado da marca, não de um moodboard:

   1. GEOMETRIA  A logo são três paralelogramos cisalhados. O ângulo -18° é a
                 única gestualidade de forma do site: marcadores, badges,
                 preenchimento dos botões no hover. Nada de enfeite solto.
   2. MATÉRIA    Na logo cada forma é um gradiente teal escuro com um fio de
                 luz #2fdacb na borda. Superfícies seguem a mesma lógica:
                 preenchimento fosco + fio de 1px que acende no hover.
   3. TIPOGRAFIA O wordmark é uma geométrica extendida. Archivo no eixo
                 wdth 108–125 faz o display; Inter carrega o texto corrido.
   4. LUZ        Base fria quase preta (a marca nasceu para fundo escuro), com
                 UMA seção invertida em off-white. O contraste é o ritmo da
                 página — por isso acontece uma vez só, e no manifesto.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* escuro — padrão */
  --bg:        #07100f;
  --bg-2:      #0b1615;
  --surface:   #101d1b;
  --surface-2: #162624;
  --ink:       #eef3f2;
  --muted:     #8d9d9a;
  --muted-2:   #5d6c69;
  --line:      rgba(238, 243, 242, .10);
  --line-2:    rgba(238, 243, 242, .20);

  /* rampa da logo */
  --accent:      #2fdacb;
  --accent-lite: #9ff3e2;
  --accent-mid:  #289d90;
  --accent-deep: #018075;
  --accent-dark: #004d3b;
  --on-accent:   #042724;

  /* geometria */
  --shear: -18deg;
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 36px;

  /* tipografia */
  --display: 'Archivo', 'Plus Jakarta Sans', system-ui, sans-serif;
  --sans:    'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;

  /* métrica */
  --wrap: 1280px;
  --gut:  clamp(20px, 4.5vw, 64px);
  --hdr:  92px;
  --h1:   clamp(44px, 12.4vw, 208px);   /* refinado por JS para encaixe exato */

  --ease:  cubic-bezier(.22, 1, .36, 1);
  --quart: cubic-bezier(.165, .84, .44, 1);   /* ease-out-quart */
}

/* seção invertida: mesmos componentes, outra luz */
.invert {
  --bg:        #f1f0ec;
  --bg-2:      #e8e7e2;
  --surface:   #ffffff;
  --surface-2: #f7f6f3;
  --ink:       #0a1413;
  --muted:     #566360;
  --muted-2:   #8a9794;
  --line:      rgba(10, 20, 19, .12);
  --line-2:    rgba(10, 20, 19, .22);
  --accent:    #017264;          /* teal profundo: contraste AA sobre claro */
  --on-accent: #ffffff;
  background: var(--bg);
  color: var(--ink);
}

/* ---------------------------------------------------------------- 2. RESET */
* { box-sizing: border-box }
/* Duas armadilhas do ScrollTrigger resolvidas aqui:
   1. `scroll-behavior: smooth` faz o pin e o reveal saltarem — fora.
   2. `overflow-x: hidden` no BODY faz o overflow-y computar para `auto`,
      o que transforma o body em container de rolagem: o ScrollTrigger para
      de receber os eventos e congela em progress 0. O corte vai no html,
      com `clip`, que recorta sem criar container de rolagem. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip }
@supports not (overflow: clip) { html { overflow-x: hidden } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
button { font: inherit }
p { margin: 0 }
::selection { background: var(--accent); color: var(--on-accent) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px }

/* ----------------------------------------------------------- 3. TIPOGRAFIA */
h1, h2, h3, h4 {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-variation-settings: 'wdth' 108, 'wght' 700;
  line-height: 1.02; letter-spacing: -.028em;
}
h2 { font-size: clamp(30px, 4vw, 58px) }
h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2; letter-spacing: -.018em }
h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-variation-settings: 'wdth' 100, 'wght' 600 }
em { font-style: normal; color: var(--accent) }
strong { font-weight: 600; color: var(--ink) }

.lead { color: var(--muted); font-size: clamp(15.5px, 1.15vw, 18.5px); line-height: 1.68; max-width: 58ch }
.center { text-align: center } .center .lead { margin-inline: auto }
.wrap   { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto }
.narrow { width: min(780px, 100% - 2 * var(--gut)); margin-inline: auto }

/* Marcador de seção — o mark da logo reduzido a três hastes cisalhadas.
   Funciona como bullet da marca: onde ele aparece, começa um bloco. */
.label {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.label::before {
  content: ""; width: 24px; height: 11px; flex: none; transform: skewX(var(--shear));
  background: linear-gradient(90deg,
    var(--accent) 0 4px, transparent 4px 8px,
    var(--accent) 8px 12px, transparent 12px 16px,
    var(--accent) 16px 24px);
}
.label.center { justify-content: center }

/* --------------------------------------------------------------- 4. BOTÕES */
/* Duas camadas: ::before é a base, que encolhe a partir de 50% 90%; ::after é
   o preenchimento de acento, que sobe de baixo. O label desliza para baixo e
   um duplicado (text-shadow a -2em, recortado pelo .span-wrapper) toma o
   lugar. O .span-wrapper é injetado pelo main.js — o HTML segue limpo. */
.btn {
  position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 54px; padding: 0 26px; border-radius: 999px; border: 0; overflow: hidden;
  background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  transition: color .5s var(--quart);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 999px;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink) 5%, transparent);
  transform-origin: 50% 90%; transition: all .5s var(--quart);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 999px;
  background: var(--accent); transform: translateY(100%); transition: all .5s var(--quart);
}
.btn:hover::before { scale: .9 }
.btn:hover::after  { transform: translateY(0%) }
.btn:hover { color: var(--on-accent) }
.btn:active { scale: .99 }

/* O recuo curto da direita existe SO para acomodar o badge da seta. Sem ele
   o botao ficava com 26px de um lado e 8px do outro — visivelmente torto. */
.btn:has(.ico) { padding-right: 8px }

.btn .span-wrapper { position: relative; z-index: 4; overflow: hidden; white-space: nowrap }
.btn .span-text {
  display: inline-block; position: relative;
  text-shadow: 0 -2em 0 currentColor;              /* o duplicado, 2em acima */
  transition: transform .3s var(--quart);
}
.btn:hover .span-text { transform: translateY(2em) }

.btn .ico {
  position: relative; z-index: 4;
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, currentColor 12%, transparent);
  transition: background .5s var(--quart), transform .5s var(--quart);
}
.btn .ico svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.btn:hover .ico { transform: translateX(2px) }

/* sólido: base no acento, preenchimento no off-white — a inversão da marca */
.btn.solid { color: var(--on-accent) }
.btn.solid::before { background: var(--accent); border-color: var(--accent) }
.btn.solid::after  { background: var(--ink) }
.btn.solid:hover   { color: var(--bg) }

.btn.ghost::before { background: color-mix(in srgb, var(--ink) 8%, transparent) }
.btn.sm { height: 44px; padding: 0 20px; font-size: 13.5px }

/* dentro da célula de acento o jogo se inverte */
.bento .cell.accent .btn { color: var(--on-accent) }
.bento .cell.accent .btn::before { background: transparent; border-color: color-mix(in srgb, var(--on-accent) 32%, transparent) }
.bento .cell.accent .btn::after  { background: var(--on-accent) }
.bento .cell.accent .btn:hover   { color: var(--accent) }

/* link sublinhado: só o deslize do label, sem camadas */
.btn.text {
  height: auto; padding: 0 0 8px; border-radius: 0; gap: 10px; overflow: visible;
  border-bottom: 1px solid var(--line-2); transition: color .3s var(--quart), border-color .3s var(--quart);
}
.btn.text::before, .btn.text::after { display: none }
.btn.text:hover { color: var(--accent); border-color: var(--accent) }
.btn.text .ico { width: auto; height: auto; background: none }
.btn.text:hover .ico { transform: translateX(4px) }

/* --------------------------------------------------------------- 5. HEADER */
/* Ilha flutuante (ref. print1): destacada do topo, contrai ao rolar. */
.header {
  position: fixed; inset: 0 0 auto; z-index: 60; padding: 18px var(--gut) 0;
  transition: transform .5s var(--ease), padding .5s var(--ease);
}
.header.hide { transform: translateY(-150%) }
.header .bar {
  width: min(var(--wrap), 100%); margin-inline: auto; height: 68px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 0 10px 0 22px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  transition: height .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.header.scrolled { padding-top: 10px }
.header.scrolled .bar {
  height: 60px; border-color: var(--line-2);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  box-shadow: 0 24px 50px -30px #000;
}
.header .logo img { height: 42px; transition: height .5s var(--ease) }
.header.scrolled .logo img { height: 36px }
.nav { display: flex; justify-content: center; gap: 4px }
.nav a {
  position: relative; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: var(--muted); transition: color .3s var(--ease), background .3s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--line) }
.nav a.on { color: var(--ink) }
.nav a.on::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 14px; height: 3px;
  transform: translateX(-50%) skewX(var(--shear)); background: var(--accent);
}
.header .right { display: flex; align-items: center; gap: 10px }
.burger { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--line); color: var(--ink); cursor: pointer; place-items: center }
.burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round }

@media (max-width: 1000px) {
  .header .bar { grid-template-columns: auto auto; justify-content: space-between; padding-right: 12px }
  .header .right .btn { display: none }
  .burger { display: grid }
  .nav {
    position: fixed; inset: 0; z-index: 70; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
  }
  .nav.open { opacity: 1; pointer-events: auto }
  .nav a { font-family: var(--display); font-size: 30px; font-variation-settings: 'wdth' 108, 'wght' 600; letter-spacing: -.02em; color: var(--ink) }
  .nav a.on::after { bottom: 6px }
}

/* ----------------------------------------------------------------- 6. HERO */
/* A jogada central (ref. print4/print5): a palavra ocupa a largura inteira e
   a foto sobe por cima do terço inferior das letras. A oclusão é o que cria
   profundidade real — não é sombra falsa, é ordem de empilhamento. */
/* O respiro de baixo NAO e decorativo: o parallax desliza o hero para dentro
   da secao seguinte, e sem essa folga quem entra debaixo da secao e a barra
   de dados — os numeros apareciam cortados ao meio. A folga e o que o efeito
   consome. Ela tem de ser >= ao data-st-y do hero (120px). */
.hero { position: relative; padding: calc(var(--hdr) + clamp(28px, 5vw, 60px)) 0 132px; overflow: clip }
/* o brilho do hero agora é o .prism (seção 20) */
.hero .wrap { position: relative; z-index: 1 }

/* Texto corrido, nao flex: em flex cada trecho vira um item e a linha
   quebrava em tres pedacos irregulares no celular, com os separadores
   soltos. O flex so existia por causa do cursor piscante, que saiu. */
.eyebrow {
  display: block; text-align: center; margin-bottom: clamp(16px, 2.2vw, 30px);
  font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  text-wrap: balance;
}
.eyebrow b { color: var(--accent); font-weight: 500; margin-inline: 4px }
@media (max-width: 560px) { .eyebrow { letter-spacing: .14em; font-size: 11px } }
.display { text-align: center; text-transform: uppercase }
.display .kicker {
  display: block; margin-bottom: clamp(4px, .9vw, 12px);
  font-size: clamp(15px, 2.1vw, 33px); letter-spacing: .05em; color: var(--muted);
  font-variation-settings: 'wdth' 100, 'wght' 500;
}
.display .big {
  display: block; width: max-content; max-width: 100%; margin-inline: auto; white-space: nowrap;
  font-size: var(--h1); line-height: .84; letter-spacing: -.035em;
  font-variation-settings: 'wdth' 125, 'wght' 800;
  /* a base das letras escurece um grau: a foto encosta nelas sem colar */
  background: linear-gradient(180deg, var(--ink) 58%, color-mix(in srgb, var(--ink) 58%, var(--bg)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Em tela estreita a linha unica obriga um corpo pequeno demais (32px num
   celular de 390px) e o titulo perde a forca. Empilhado, cada palavra ocupa
   a largura toda e o corpo quase dobra. Quem decide e o JS, medindo. */
.display .big.stack { white-space: normal }
/* `width: max-content` e essencial: um bloco puro preenche o container e as
   duas palavras mediriam a largura da frase inteira — o JS nunca veria
   diferenca entre os dois modos. Aqui cada linha encolhe ate o proprio texto. */
.display .big.stack .w { display: block; width: max-content; max-width: 100%; margin-inline: auto }

/* palco da foto — sobe sobre a palavra */
.hero-stage { position: relative; z-index: 2; margin-top: calc(var(--h1) * -.17) }
.hero-card {
  position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: 0 60px 90px -60px #000;
  aspect-ratio: 21 / 9;
}
@media (max-width: 760px) { .hero-card { aspect-ratio: 4 / 3 } }
.hero-card .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.8) brightness(.86) contrast(1.05);
  animation: rise 1.6s var(--ease) both;
}
@keyframes rise { from { transform: scale(1.08) } to { transform: scale(1) } }
.hero-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(190deg, color-mix(in srgb, var(--bg) 52%, transparent) 0%, transparent 34%, color-mix(in srgb, var(--bg) 88%, transparent) 100%);
}
.hero-card .overlay {
  position: absolute; inset: auto 0 0; z-index: 2;
  /* o respiro extra embaixo é o espaço que a barra de dados ocupa ao encavalar */
  padding: clamp(18px, 2.8vw, 38px) clamp(18px, 2.8vw, 38px) clamp(58px, 5.5vw, 80px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.hero-card .pitch { display: flex; align-items: center; gap: 18px; flex-wrap: wrap }
.hero-card .pitch p { max-width: 40ch; font-size: clamp(13.5px, 1.05vw, 15.5px); color: color-mix(in srgb, var(--ink) 88%, transparent) }

/* card dentro do card (ref. print2) */
.inset {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .5s var(--ease), border-color .4s var(--ease);
}
.inset:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, transparent) }
.inset img { width: 76px; height: 54px; object-fit: cover; border-radius: 10px; flex: none }
.inset .t { font-size: 14px; font-weight: 600; line-height: 1.25 }
.inset .s { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 500 }
@media (max-width: 620px) { .inset { display: none } }

/* barra de dados encavalada na borda do card (ref. print1) */
.databar {
  position: relative; z-index: 3; width: min(calc(var(--wrap) - 96px), 100% - 2 * var(--gut));
  margin: -44px auto 0; padding: 6px; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 40px 70px -46px #000;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.databar div { padding: 20px clamp(12px, 2vw, 28px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; position: relative }
.databar div + div::before { content: ""; position: absolute; left: 0; top: 24%; height: 52%; width: 1px; background: var(--line-2); transform: skewX(var(--shear)) }
.databar b {
  font-family: var(--display); font-size: clamp(23px, 2.4vw, 36px); line-height: 1;
  font-variation-settings: 'wdth' 112, 'wght' 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.databar span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500 }
@media (max-width: 760px) {
  .databar { margin-top: -30px }
  .databar div { padding: 16px 6px }
  .databar span { font-size: 9.5px; letter-spacing: .1em }
}

/* --------------------------------------------------------------- 7. SEÇÕES */
section { position: relative; padding-block: clamp(76px, 9.5vw, 148px) }
section.tight { padding-top: 0 }
/* grade de estoque sem cabecalho proprio: .tight a deixaria colada na secao
   de cima (70px acima contra 168px abaixo). Respiro proprio, menor que o de
   uma secao inteira porque o hero ja contribui com o dele. */
section.estoque-sec { padding-top: clamp(40px, 5vw, 80px) }
/* REGRA DO RESPIRO NA TROCA DE FUNDO
   Entre dois blocos do MESMO fundo, o intervalo pode vir de qualquer um dos
   lados: o que importa e a soma (137px).
   Numa TROCA DE COR isso deixa de valer. A borda parte o intervalo em dois,
   e cada bloco so exibe a propria metade — se um deles nao tiver padding, o
   conteudo dele encosta na linha de cor. Por isso os dois lados de um bloco
   invertido mantem os 137px inteiros: ali a soma da 274px de proposito. */
.invert + section.tight, .invert + .band { padding-top: clamp(76px, 9.5vw, 148px) }

.sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(34px, 4.6vw, 62px) }
.sec h2 { max-width: 20ch }
.sec .lead { margin-top: 16px }

/* --------------------------------------------- 8. BENTO DE SERVIÇOS (print3) */
/* Ritmo largo–estreito / estreito–largo: a mesma alternância do "M" da logo. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px }
.bento .cell {
  --pad: clamp(22px, 2.4vw, 34px);
  position: relative; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  padding: var(--pad); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .45s var(--ease), background .45s var(--ease), transform .55s var(--ease);
}
.bento .cell:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface-2) }
.bento .w4 { grid-column: span 4 } .bento .w2 { grid-column: span 2 } .bento .w6 { grid-column: span 6 }
@media (max-width: 900px) { .bento .w4, .bento .w2, .bento .w6 { grid-column: span 6 } }

.n-badge {
  width: 46px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 7px;
  background: var(--accent); transform: skewX(var(--shear));
}
.n-badge span { transform: skewX(18deg); font-family: var(--display); font-size: 12.5px; font-variation-settings: 'wdth' 100, 'wght' 700; color: var(--on-accent) }
.bento .cell:not(.accent) h3 { max-width: calc(100% - 56px) }   /* não encosta na seta */
.bento .cell p { color: var(--muted); font-size: 15px; max-width: 44ch }
.bento .cell .grow { flex: 1; min-height: 46px }
/* A foto sangra ate as bordas do card: anula o padding do proprio card.
   As fotos do galpao sao RETRATO (0.56:1). Numa faixa horizontal elas eram
   recortadas a 4:1 — o object-fit descartava ~86% da imagem e sobrava meio
   carro. Empilhado, o corte volta a 4:3, que e o mesmo dos cards de estoque
   e enquadra o veiculo inteiro. */
.bento .thumb { margin: 6px calc(var(--pad) * -1) calc(var(--pad) * -1); border-radius: var(--r) var(--r) 0 0; overflow: hidden; aspect-ratio: 4 / 3 }
.bento .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; transition: transform 1s var(--ease); filter: saturate(.82) }

/* Nos cards largos ha espaco para a foto ficar EM PE, na lateral: e o unico
   enquadramento que respeita a origem vertical das fotos. */
@media (min-width: 901px) {
  .bento .cell.w4 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(190px, 25%, 260px);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--pad);
    align-content: start;
  }
  .bento .cell.w4 > .n-badge, .bento .cell.w4 > h3, .bento .cell.w4 > p { grid-column: 1 }
  .bento .cell.w4 > h3 { max-width: 100% }
  .bento .cell.w4 > .grow { display: none }
  .bento .cell.w4 > .thumb {
    grid-column: 2; grid-row: 1 / -1;
    margin: calc(var(--pad) * -1) calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
    /* altura fixa: em proporcao cheia (0.56:1) a foto esticava o card para
       mais de 400px e sobrava um vazio enorme ao lado do texto. Aqui o corte
       tira so teto e chao, que nessas fotos e espaco morto. */
    aspect-ratio: auto; height: clamp(250px, 24vw, 310px); border-radius: 0;
  }
  .bento .cell.w4 > .thumb img { object-position: 50% 58% }
}
.bento .cell:hover .thumb img { transform: scale(1.05) }
/* sempre no pe a esquerda: nos cards largos o canto superior direito e da
   foto, e seta em lugar diferente por tipo de card parece descuido */
.arr {
  position: absolute; bottom: var(--pad, 26px); left: var(--pad, 26px);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--muted);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.arr svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.bento .cell:hover .arr { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: rotate(-45deg) }

/* Empilhado, a foto volta para o rodape do card — que e onde a seta esta.
   Nesses cards ela sobe para o topo, onde nao ha foto no modo empilhado. */
@media (max-width: 900px) {
  .bento .cell.w4 .arr { top: var(--pad); right: var(--pad); bottom: auto; left: auto }
}

/* célula invertida no acento — o CTA dentro da própria grade */
.bento .cell.accent {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px;
}
.bento .cell.accent:hover { background: var(--accent-lite); border-color: var(--accent-lite); transform: none }
.bento .cell.accent > div { display: grid; gap: 8px }
.bento .cell.accent h3 { max-width: 22ch }
.bento .cell.accent p { color: color-mix(in srgb, var(--on-accent) 76%, transparent) }

/* -------------------------------------------------------- 9. FAIXA DE FOTO */
.band { position: relative; height: clamp(300px, 52vh, 560px); overflow: hidden; border-block: 1px solid var(--line) }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62% }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), transparent 35%, transparent 62%, color-mix(in srgb, var(--bg) 88%, transparent)) }
.band .cap {
  position: absolute; left: var(--gut); bottom: 26px; z-index: 1;
  font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}

/* ------------------------------------------------- 10. MANIFESTO (invertido) */
.manifesto { text-align: center }
.manifesto h2 { font-size: clamp(28px, 3.6vw, 52px); max-width: 21ch; margin-inline: auto; line-height: 1.08 }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(42px, 5.6vw, 74px); text-align: left }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr } }
.pillar { padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform .5s var(--ease) }
.pillar:hover { transform: translateY(-4px) }
.pillar .n-badge { margin-bottom: 20px }
.pillar h3 { margin-bottom: 10px }
.pillar p { color: var(--muted); font-size: 15px }

/* -------------------------------------------------------------- 11. SPLIT */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; gap: 36px } }
.split .media { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line) }
.split .media img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; filter: saturate(.82); transition: transform 1.2s var(--ease) }
.split .media:hover img { transform: scale(1.04) }
.split.rev .media { order: 2 } @media (max-width: 920px) { .split.rev .media { order: 0 } }
.split h2 { margin-bottom: 18px }
.split .lead + .lead { margin-top: 16px }

.checks { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 2px }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line) }
.checks li::before { content: ""; width: 12px; height: 8px; margin-top: 7px; transform: skewX(var(--shear)); background: var(--accent) }
.checks b { display: block; font-weight: 600; font-size: 15.5px }
.checks p { color: var(--muted); font-size: 14.5px; margin-top: 2px }

/* --------------------------------------------------------- 12. DEPOIMENTOS */
.testimonial { text-align: center }
.testimonial .q { position: relative; min-height: 210px }
.testimonial blockquote { margin: 0; position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); pointer-events: none }
.testimonial blockquote.on { opacity: 1; transform: none; pointer-events: auto; position: relative }
.testimonial blockquote p {
  font-family: var(--display); font-size: clamp(21px, 2.5vw, 34px); line-height: 1.25;
  font-variation-settings: 'wdth' 104, 'wght' 500; letter-spacing: -.025em;
  max-width: 26ch; margin-inline: auto;
}
.testimonial cite { display: block; font-style: normal; margin-top: 26px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500 }
.testimonial cite b { color: var(--ink); font-weight: 600 }
.testimonial .tnav { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 14px; width: max-content; max-width: 100%; margin: 34px auto 0 }
.testimonial .dots { display: flex; justify-content: center; gap: 8px }
/* setas com a mesma geometria da .arr dos cards; o .q recebe o arrasto */
.testimonial .q { touch-action: pan-y; cursor: grab; user-select: none }
.testimonial .q.dragging { cursor: grabbing }
.testimonial .tarr {
  width: 42px; height: 42px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.testimonial .tarr svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.testimonial .tarr:hover, .testimonial .tarr:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); outline: none }
.testimonial .dots button { width: 30px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center }
.testimonial .dots button::before { content: ""; height: 4px; background: var(--line-2); transform: skewX(var(--shear)); transition: background .4s var(--ease) }
.testimonial .dots button.on::before { background: var(--accent) }

/* ---------------------------------------------------------------- 13. CTA */
.cta-card {
  position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line-2);
  padding: clamp(44px, 7vw, 104px) clamp(24px, 4vw, 64px); text-align: center; isolation: isolate;
}
.cta-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.7) }
.cta-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 76%, transparent), color-mix(in srgb, var(--bg) 93%, transparent));
}
.cta-card h2 { max-width: 17ch; margin: 0 auto 16px }
.cta-card .lead { margin: 0 auto 34px }
.actions { display: flex; gap: 12px; flex-wrap: wrap }
.center .actions, .cta-card .actions, .estoque-off .actions { justify-content: center }

/* ------------------------------------------------------ 14. PÁGINAS INTERNAS */
.phero { padding: calc(var(--hdr) + clamp(44px, 6.5vw, 100px)) 0 clamp(38px, 5vw, 70px) }
.phero h1 { font-size: clamp(38px, 6vw, 88px); line-height: .96; margin-bottom: 22px; max-width: 15ch; font-variation-settings: 'wdth' 116, 'wght' 700 }
.phero .media { margin-top: clamp(34px, 5vw, 70px); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line) }
.phero .media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; filter: saturate(.8) }
@media (max-width: 760px) { .phero .media img { aspect-ratio: 4 / 3 } }

/* processo */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
@media (max-width: 920px) { .steps { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr } }
.step { padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface) }
.step .n-badge { margin-bottom: 20px }
.step h3 { margin-bottom: 8px } .step p { color: var(--muted); font-size: 14.5px }

/* FAQ */
.faq { display: grid; gap: 8px }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .4s var(--ease) }
.faq details[open] { border-color: var(--line-2) }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px clamp(18px, 2vw, 26px); font-family: var(--display);
  font-variation-settings: 'wdth' 104, 'wght' 600; font-size: clamp(16px, 1.4vw, 19px); letter-spacing: -.018em;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translateY(-3px); transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); border-color: var(--accent) }
.faq details p { color: var(--muted); padding: 0 clamp(18px, 2vw, 26px) 24px; max-width: 66ch; font-size: 15px }

/* formulário */
.cgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: start }
@media (max-width: 920px) { .cgrid { grid-template-columns: 1fr } }
.form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 38px); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface) }
.form .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px } @media (max-width: 560px) { .form .g2 { grid-template-columns: 1fr } }
.form label { display: grid; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.form input, .form select, .form textarea {
  width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink);
  font: 400 15.5px var(--sans); outline: 0; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.form select option { background: var(--surface); color: var(--ink) }
.form textarea { height: auto; min-height: 118px; padding: 14px 16px; resize: vertical; line-height: 1.6 }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); background: var(--surface-2) }
.form .btn { justify-self: start; margin-top: 6px }

.info { display: grid; gap: 2px }
.info .item { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: baseline; padding: 16px 18px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line) }
.info .item b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.info .item span, .info .item a { font-size: 15px }
.info .item a:not(.btn):hover { color: var(--accent) }
@media (max-width: 420px) { .info .item { grid-template-columns: 1fr; gap: 4px } }
.map { margin-top: 12px; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface) }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.9) contrast(.86) hue-rotate(150deg) }

/* -------------------------------------------------------------- 15. FOOTER */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: clamp(44px, 6vw, 72px) 0 26px; font-size: 15px; overflow: hidden }

/* faixa de decisao: aberto agora, onde fica, como falar */
.f-top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
  padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line);
}
.f-top h3 { font-size: clamp(22px, 2.6vw, 34px); margin-bottom: 12px; max-width: 18ch }
.f-status {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.f-status::before { content: ""; width: 11px; height: 7px; flex: none; transform: skewX(var(--shear)); background: currentColor }
.f-status.on  { color: var(--accent) }
.f-status.off { color: var(--muted-2) }
.f-addr { color: var(--muted); font-size: 15px; line-height: 1.55 }
.f-addr span { color: var(--accent) }
.f-acoes { display: flex; gap: 10px; flex-wrap: wrap }
@media (max-width: 720px) { .f-top { align-items: flex-start } .f-acoes .btn { flex: 1 1 auto; justify-content: center } }

.footer .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: clamp(32px, 4vw, 48px) }
@media (max-width: 760px) { .footer .grid { grid-template-columns: 1fr 1fr; gap: 28px } }
.footer p, .footer li { color: var(--muted) }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.footer h4 { color: var(--ink); margin: 0 0 16px }
/* `:not(.btn)` NAO e detalhe. `.footer a:hover` vale (0,2,1) e vence
   `.btn:hover` (0,2,0): sem a exclusao o texto do botao ficava teal sobre o
   preenchimento teal e sumia no hover. Regra de cor de LINK nao pode pegar
   componente que ja tem estado proprio. */
.footer a:not(.btn) { transition: color .3s var(--ease) }
.footer a:not(.btn):hover { color: var(--accent) }

/* A marca fecha a pagina cortada pela borda: o container e mais baixo que o
   logo, entao ele sangra. Watermark centralizado no meio do vazio parecia
   enfeite; cortado, vira acabamento. */
.footer .mark {
  margin-top: clamp(36px, 5vw, 64px); height: clamp(74px, 9.5vw, 128px);
  overflow: hidden; display: grid; place-items: start center; opacity: .13;
}
/* a altura do container e ~63% da do logo: corta o wordmark e deixa os tres
   chevrons INTEIROS. Cortando no meio deles o corte parece acidente. */
.footer .mark img { height: clamp(118px, 15vw, 202px); width: auto; max-width: none }

.footer .bottom {
  margin-top: clamp(20px, 2.5vw, 30px); border-top: 1px solid var(--line); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-2);
}
.footer .bottom a { color: var(--muted) }

/* WhatsApp fixo */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .7); transition: transform .4s var(--ease), background .3s var(--ease);
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); background: var(--accent-lite) }
.wa-float svg { width: 27px; height: 27px; fill: currentColor }

/* ------------------------------------------------------------- 16. MOTION */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease) }
.rv.in { opacity: 1; transform: none }
/* Quando um bloco .rv contem um texto com reveal-02, as duas animacoes se
   atropelam: o fade do bloco inteiro (0.8s) passa por cima do escalonamento
   palavra a palavra e o efeito some. Nesse caso o bloco so desliza — quem
   cuida do fade e o proprio texto. */
.rv:has([data-reveal-02]) { opacity: 1 }

.rv[data-delay="1"] { transition-delay: .09s }
.rv[data-delay="2"] { transition-delay: .18s }
.rv[data-delay="3"] { transition-delay: .27s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none }
  .band img { transform: none !important }
}

/* estoque embutido (MR2 System) */
#destaques { padding-top: 0 }   /* a folga do hero (132px) ja e o intervalo */
#mr2-destaques, #mr2-estoque { min-height: 260px }

/* ---------------------------------------------- 17. CARDS DE VEÍCULO (preview)
   Layout de referência do estoque. Quando o MR2 System responde, o widget
   assume o lugar; este bloco é o que aparece enquanto ele não carrega. */
.cars { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 28px) }
@media (max-width: 1000px) { .cars { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 620px)  { .cars { grid-template-columns: 1fr } }

.car {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
  transition: border-color .45s var(--ease), transform .55s var(--ease), background .45s var(--ease);
}
.car:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface-2) }
.car .shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2) }
.car .shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform 1s var(--ease) }
.car:hover .shot img { transform: scale(1.05) }
/* selo cisalhado: mesma diagonal da marca */
.car .tag {
  position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 7px;
  transform: skewX(var(--shear)); background: var(--accent); color: var(--on-accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.car .tag span { display: block; transform: skewX(18deg) }
.car .tag.ghost { background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px) }

.car .body { display: flex; flex-direction: column; gap: 12px; padding: 20px; flex: 1 }
.car .brand { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.car h3 { font-size: 19px; line-height: 1.15 }
.car .ver { font-size: 13.5px; color: var(--muted); line-height: 1.3; margin: -4px 0 0 }
.car .meta { font-size: 13px; color: var(--muted-2); font-variant-numeric: tabular-nums; margin: 0 }

/* nota do rodape da grade — mesma frase do widget oficial */
.cars-nota {
  margin: clamp(22px, 2.4vw, 34px) 0 0; text-align: center;
  font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2);
}

.car .specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px }
.car .specs li {
  padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line);
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.car .foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.car .price {
  font-family: var(--display); font-size: 21px; line-height: 1;
  font-variation-settings: 'wdth' 110, 'wght' 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.car .price small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; font-variation-settings: normal }
.car .go {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--muted);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.car .go svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.car:hover .go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: rotate(-45deg) }

/* veiculo publicado sem foto: vao neutro, nunca uma imagem de outro carro */
.car .shot-vazio {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.car .shot-vazio span {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2);
}

/* esqueleto de carregamento: a forma do card, sem nenhum dado.
   Pulso lento e de baixa amplitude — presenca, nao chamariz. */
.car-esqueleto { pointer-events: none }
.car-esqueleto:hover { transform: none; border-color: var(--line); background: var(--surface) }
.car-esqueleto .shot { background: var(--bg-2) }
.car-esqueleto .body { gap: 14px; padding: 22px }
.car-esqueleto .barra { display: block; height: 9px; border-radius: 3px; background: var(--bg-2) }
.car-esqueleto .barra.w60 { width: 60% }
.car-esqueleto .barra.w40 { width: 40% }
.car-esqueleto .barra.w30 { width: 30%; height: 15px; margin-top: 6px }
.car-esqueleto .shot, .car-esqueleto .barra { animation: pulso-esqueleto 2.4s var(--ease) infinite }
@keyframes pulso-esqueleto { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) {
  .car-esqueleto .shot, .car-esqueleto .barra { animation: none }
}

/* aviso de amostra — sai assim que o estoque real carrega */
.preview-note {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-weight: 500;
}
.preview-note::before { content: ""; width: 12px; height: 8px; background: var(--muted-2); transform: skewX(var(--shear)) }

/* ================================================ 18. TRANSIÇÕES DE SEÇÃO
   Base mínima para o sectionTransition01 (GSAP + ScrollTrigger).
   NOTA: o `min-height: 100vh` do spec original foi omitido de propósito —
   este site tem seções de altura variável e forçar viewport cheia quebraria
   o ritmo vertical. O que o efeito realmente exige é o empilhamento. */
/* Os blocos precisam ser OPACOS: no parallax o bloco anterior desliza por
   baixo do seguinte, e no reveal o anterior tem de esconder o revelado até
   sair. Com fundo transparente os dois efeitos viram sobreposição de texto. */
body > section, body > .band { position: relative; z-index: 1; background: var(--bg) }
[data-st-01]:not([data-st-01="pin"]) { will-change: transform }
[data-st-overlay-el] { border-radius: inherit }

/* ==================================================== 19. TEXT REVEAL 02
   Estado oculto obrigatório: sem isso o texto pisca no estado final antes
   do JS rodar. O .no-js devolve a visibilidade se o GSAP não carregar. */
[data-reveal-02] { visibility: hidden }
html.no-reveal [data-reveal-02] { visibility: visible }
[data-reveal-02] .line { overflow: visible }

/* ================================================= 20. GRADIENTE ANIMADO
   Preset "Prism": dois cones contrarrotativos na rampa da logo, desfocados
   até virarem luz. É o brilho do hero — substitui o radial estático. */
.prism {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(62% 68% at 50% 42%, #000 0%, transparent 72%);
          mask-image: radial-gradient(62% 68% at 50% 42%, #000 0%, transparent 72%);
}
/* Tamanho FIXO e blur moderado de proposito: um circulo de 120vmax com
   blur(120px) girando em loop e uma camada composta gigantesca — bonito no
   desktop, forno no celular. 880px com blur(70px) da o mesmo resultado
   visual atras da mascara e cabe no orcamento de pintura. */
.prism::before, .prism::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 880px; height: 880px;
  margin: -440px 0 0 -440px; border-radius: 50%; will-change: transform;
}
.prism::before {
  background: conic-gradient(from 0deg,
    transparent 0deg, var(--accent-dark) 35deg, var(--accent-deep) 70deg,
    var(--accent) 105deg, transparent 150deg, transparent 210deg,
    var(--accent-mid) 250deg, var(--accent-lite) 290deg, transparent 330deg);
  filter: blur(70px); opacity: .34;
  animation: prism-a 26s linear infinite;
}
.prism::after {
  background: conic-gradient(from 180deg,
    transparent 0deg, var(--accent) 45deg, transparent 110deg,
    var(--accent-deep) 190deg, transparent 260deg, var(--accent-lite) 320deg, transparent 360deg);
  filter: blur(80px); opacity: .22;
  animation: prism-b 38s linear infinite;
}
@keyframes prism-a { to { transform: rotate(360deg) scale(1.08) } }
@keyframes prism-b { to { transform: rotate(-360deg) } }
/* fora de cena a animacao para: nada de repintar o que ninguem ve */
.prism.off::before, .prism.off::after { animation-play-state: paused }
@media (prefers-reduced-motion: reduce) { .prism::before, .prism::after { animation: none } }

/* Bloco de fecho. O modo `reveal` do sectionTransition01 assume blocos de
   altura de viewport (é o que o `min-height: 100vh` do spec original garante):
   sem isso o bloco grudado no rodapé não tem curso para ser revelado. Aqui a
   altura é dada só a este bloco, em vez de a todas as seções. */
.closing { min-height: 100svh; display: grid; align-content: center }

/* ---------------------------------------- 21. ESTOQUE INDISPONIVEL / NOTAS */
.estoque-off {
  text-align: center; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px);
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface);
}
.estoque-off h3 { margin-bottom: 12px }
.estoque-off .lead { margin: 0 auto 28px; max-width: 46ch }

.form-nota { margin-top: -4px; font-size: 12.5px; line-height: 1.55; color: var(--muted-2); max-width: 56ch }