/* =========================================================
   Mont Creative Studio — "o painel do carro do futuro"
   Fundo preto/grafite, amarelo da marca (#FFB600) como luz.
   ========================================================= */

/* ---------- Fontes (Poppins, servida localmente) ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fontes/poppins-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fontes/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fontes/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fontes/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fontes/poppins-latin-800-normal.woff2') format('woff2'); }

/* Reserva com métricas da Poppins (Arial ajustada): evita o 'pulo' do layout quando a Poppins chega */
@font-face { font-family: 'Poppins Reserva'; src: local('Arial'); size-adjust: 112.16%; ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; }
@font-face { font-family: 'Poppins Reserva'; font-weight: 700 900; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 106%; ascent-override: 99%; descent-override: 33%; line-gap-override: 9.4%; }

/* ---------- Tokens ---------- */
:root {
  --fundo: #07080A;
  --grafite: #0E1014;
  --grafite-2: #151820;
  --linha: rgba(255, 255, 255, .08);
  --linha-forte: rgba(255, 255, 255, .16);
  --texto: #F3F4F6;
  --texto-2: #AEB4BE;
  --texto-3: #848B96;
  --amarelo: #FFB600;
  --amarelo-claro: #FFC940;
  --amarelo-luz: #FFE3A1;
  --tinta: #0A0A0B;
  --vidro: rgba(16, 18, 23, .62);
  --raio: 18px;
  --raio-p: 12px;
  --fonte: 'Poppins', 'Poppins Reserva', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: 16px;
  --topo-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --topo-h: 76px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
::selection { background: var(--amarelo); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.nq { white-space: nowrap; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pular {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--amarelo); color: var(--tinta); font-weight: 600;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.pular:focus { transform: none; }

/* Marcador de informação que falta (fica visível de propósito) */
mark.pendente {
  display: inline-block;
  padding: .05em .45em;
  border: 1px dashed rgba(255, 182, 0, .75);
  border-radius: 6px;
  background: repeating-linear-gradient(-45deg, rgba(255, 182, 0, .16) 0 6px, rgba(255, 182, 0, .06) 6px 12px);
  color: var(--amarelo-luz);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .78em;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  vertical-align: .08em;
}

/* ---------- Botões ---------- */
.botao {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h);
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, border-color .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
.botao .icone { width: 20px; height: 20px; flex: none; }
.botao-grande { --h: 56px; padding: 0 16px; font-size: .92rem; gap: 8px; }
@media (min-width: 400px) { .botao-grande { padding: 0 26px; font-size: 1rem; gap: 10px; } }
.botao-primario {
  background: var(--amarelo);
  color: var(--tinta);
  box-shadow: 0 0 0 1px rgba(255, 182, 0, .35), 0 10px 40px -10px rgba(255, 182, 0, .55);
}
.botao-primario:hover { background: var(--amarelo-claro); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 201, 64, .5), 0 16px 48px -10px rgba(255, 182, 0, .7); }
.botao-primario:active { transform: translateY(0); }
.botao-fantasma {
  background: rgba(255, 255, 255, .03);
  border-color: var(--linha-forte);
  color: var(--texto);
}
.botao-fantasma:hover { border-color: rgba(255, 182, 0, .6); background: rgba(255, 182, 0, .06); }
.botao-fantasma .icone { transition: transform .25s var(--ease); }
.botao-fantasma:hover .icone { transform: translateY(3px); }

/* =========================================================
   1. MENU FIXO
   ========================================================= */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--topo-h);
  transition: background-color .35s, border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.topo.rolou, .menu-aberto .topo {
  background: rgba(7, 8, 10, .78);
  border-bottom-color: var(--linha);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.topo-int { height: 100%; display: flex; align-items: center; gap: 16px; }
.progresso-pagina { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progresso-pagina i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 182, 0, .35), var(--amarelo));
  box-shadow: 0 0 10px rgba(255, 182, 0, .7);
  transform: scaleX(0); transform-origin: left;
}
.topo-logo { display: inline-flex; color: var(--amarelo); /* cor oficial do logo */ margin-right: auto; padding: 6px 0; }
.topo-logo svg { height: 30px; width: auto; }
@media (min-width: 1024px) { .topo-logo svg { height: 34px; } }

.topo-nav { display: none; }
.topo-nav ul { display: flex; gap: 4px; list-style: none; }
.topo-nav a {
  position: relative; display: block;
  padding: 10px 14px;
  font-size: .94rem; font-weight: 400;
  color: var(--texto-2);
  transition: color .2s;
}
.topo-nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--amarelo); box-shadow: 0 0 12px rgba(255, 182, 0, .8);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.topo-nav a:hover, .topo-nav a[aria-current="true"] { color: var(--texto); }
.topo-nav a:hover::after, .topo-nav a[aria-current="true"]::after { transform: scaleX(1); }

.botao-topo { display: none; --h: 42px; padding: 0 18px; font-size: .88rem; }

.topo-menu-btn {
  position: relative;
  width: 44px; height: 44px; margin-right: -8px;
  border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topo-menu-btn i {
  position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px;
  background: var(--texto);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.topo-menu-btn i:nth-of-type(1) { top: 17px; }
.topo-menu-btn i:nth-of-type(2) { top: 25px; }
.topo-menu-btn[aria-expanded="true"] i:nth-of-type(1) { top: 21px; transform: rotate(45deg); }
.topo-menu-btn[aria-expanded="true"] i:nth-of-type(2) { top: 21px; transform: rotate(-45deg); }

@media (min-width: 768px) { .botao-topo { display: inline-flex; } }
@media (min-width: 1024px) {
  .topo-nav { display: block; }
  .topo-menu-btn { display: none; }
  .topo-int { gap: 28px; }
}

/* Menu do celular */
.menu-movel {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--topo-h) + 28px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 60% at 100% 100%, rgba(255, 182, 0, .12), transparent 60%),
    rgba(7, 8, 10, .97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.menu-movel[hidden] { display: none; }
.menu-movel ul { list-style: none; }
.menu-movel li + li { border-top: 1px solid var(--linha); }
.menu-movel nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.menu-movel nav a::after { content: '→'; font-weight: 300; color: var(--amarelo); }
.menu-movel nav a[aria-current="true"] { color: var(--amarelo); }
.menu-movel.abrindo { animation: menu-entra .35s var(--ease); }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-8px); } }
@media (min-width: 1024px) { .menu-movel { display: none !important; } }

/* =========================================================
   2. HERO
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  padding: calc(var(--topo-h) + 24px) 0 28px;
}
.hero-fundo {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70% 55% at 88% 80%, rgba(255, 182, 0, .13), transparent 70%),
    radial-gradient(60% 45% at 0% 0%, rgba(120, 140, 175, .10), transparent 70%),
    linear-gradient(180deg, #07080A 0%, #0A0B0E 60%, #07080A 100%);
}
.hero-fundo::after { /* textura com o padrão da marca, bem discreta */
  content: ''; position: absolute; inset: 0;
  background: url('../assets/img/padrao-mont.svg') 0 0 / 150px auto repeat;
  opacity: .016;
  -webkit-mask-image: radial-gradient(60% 45% at 100% 12%, #000, transparent 75%);
  mask-image: radial-gradient(60% 45% at 100% 12%, #000, transparent 75%);
}
@media (min-width: 1024px) { .hero-fundo::after { background-size: 200px auto; opacity: .022; } }
.hero::after { /* a estrada some aos poucos antes da próxima seção */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--fundo));
}
.hero-int { display: flex; flex-direction: column; }

.selo {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  margin-bottom: 18px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: .8rem; font-weight: 400; letter-spacing: .02em;
  color: var(--texto-2);
}
.led {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--amarelo);
  box-shadow: 0 0 0 3px rgba(255, 182, 0, .18), 0 0 12px rgba(255, 182, 0, .9);
  animation: led 2.4s ease-in-out infinite;
}
@keyframes led { 50% { opacity: .4; } }

.hero-titulo {
  font-weight: 800;
  font-size: clamp(2.6rem, 1.2rem + 6.4vw, 6.25rem);
  line-height: .98;
  letter-spacing: -.045em;
  color: var(--texto);
  text-wrap: balance;
}
.hero-titulo .linha { display: block; }
.hero-titulo .linha.suave { color: #8E95A0; }
.hero-titulo .linha.luz { color: var(--amarelo); text-shadow: 0 0 34px rgba(255, 182, 0, .35); }
/* palavra por palavra: começa legível (apagada) e "acende" como um painel */
.palavra {
  display: inline-block;
  opacity: .4;
  animation: acende .75s var(--ease) forwards;
  animation-delay: calc(var(--i) * 85ms + 120ms);
}
@keyframes acende {
  0% { opacity: .4; transform: translateY(.05em); }
  45% { opacity: 1; text-shadow: 0 0 28px rgba(255, 182, 0, .6); }
  100% { opacity: 1; transform: none; }
}

.hero-grade { display: grid; gap: 28px; margin-top: 22px; }
.hero-sub {
  max-width: 34em;
  font-size: clamp(1rem, .92rem + .4vw, 1.2rem);
  line-height: 1.6;
  color: var(--texto-2);
}
.hero-sub strong { color: var(--texto); font-weight: 500; }
.hero-acoes { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 640px) {
  .hero-acoes { display: flex; flex-wrap: wrap; }
}

/* Carro desenhado por linhas de luz, estrada digital e rastros de farol */
.hero-carro {
  position: relative;
  z-index: -1;
  aspect-ratio: 740 / 215;
  margin-inline: calc(var(--gutter) * -.25);
}
.carro { position: relative; width: 100%; height: 100%; overflow: visible; }
.carro-massa { fill: #08090C; opacity: 0; animation: aparece-massa .8s ease forwards .9s; }
@keyframes aparece-massa { to { opacity: .92; } }
.carro-brilho path, .carro-brilho circle,
.carro-linhas path, .carro-linhas circle {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: desenha 1.9s var(--ease) forwards;
  animation-delay: calc(var(--o, 0) * 160ms + 250ms);
}
.carro-brilho { stroke: var(--amarelo); stroke-width: 7; opacity: .16; }
.carro-linhas { stroke: var(--amarelo-luz); stroke-width: 1.7; }
.carro-linhas .aro { opacity: .45; }
.carro-linhas .raios {
  stroke: var(--amarelo-luz); stroke-width: 1.4; stroke-linecap: round; opacity: 0;
  animation: aparece .6s ease forwards 1.4s;
}
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: .5; } }
.carro-pulso {
  fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: .07 .93; stroke-dashoffset: 1;
  opacity: 0;
  animation: pulso 4.5s linear infinite 2.2s, aparece-pulso .4s ease forwards 2.2s;
}
@keyframes pulso { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aparece-pulso { to { opacity: 1; } }
.carro-feixe { opacity: 0; animation: liga .5s ease forwards 1.5s; }
.carro-farol { opacity: 0; animation: liga .3s ease forwards 1.4s; }
@keyframes liga { 30% { opacity: .5; } 45% { opacity: .15; } to { opacity: 1; } }

.estrada {
  position: absolute; z-index: -1;
  top: 94.8%; /* linha do chão do desenho */
  left: -100vw; right: -100vw;
  height: 70vh;
  perspective: 380px;
  perspective-origin: 50% 0%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 35%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 35%, transparent 80%);
}
.estrada::before { /* linha do chão iluminada */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent 5%, rgba(255, 182, 0, .7) 35%, rgba(255, 227, 161, .9) 50%, rgba(255, 182, 0, .7) 65%, transparent 95%);
  box-shadow: 0 0 18px 2px rgba(255, 182, 0, .35);
}
.estrada-plano {
  position: absolute; top: 0; left: 0; right: 0; height: 260%;
  transform-origin: 50% 0%;
  transform: rotateX(72deg);
  background-image:
    linear-gradient(90deg, rgba(255, 182, 0, .38) 0 2px, transparent 2px),
    linear-gradient(180deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px);
  background-size: 72px 72px;
  animation: anda .55s linear infinite;
  will-change: transform;
}
@keyframes anda { to { transform: rotateX(72deg) translateX(-72px); } }

.rastros { position: absolute; z-index: -1; left: -100vw; right: -100vw; top: 18%; height: 70%; pointer-events: none; }
.rastros i {
  position: absolute; left: 50%; height: 2px; width: 34vw; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 182, 0, .9) 70%, #FFF3D1);
  box-shadow: 0 0 10px rgba(255, 182, 0, .6);
  opacity: 0;
  animation: rastro 3.6s linear infinite;
  will-change: transform, opacity;
}
.rastros i:nth-child(1) { top: 8%; animation-delay: .6s; animation-duration: 3.2s; }
.rastros i:nth-child(2) { top: 34%; width: 22vw; animation-delay: 1.8s; animation-duration: 2.6s; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7) 70%, #fff); box-shadow: 0 0 10px rgba(255, 255, 255, .4); }
.rastros i:nth-child(3) { top: 58%; height: 1px; animation-delay: 2.6s; animation-duration: 4.4s; }
.rastros i:nth-child(4) { top: 82%; width: 46vw; animation-delay: .1s; animation-duration: 3.9s; }
.rastros i:nth-child(5) { top: 0%; height: 1px; width: 18vw; animation-delay: 3.1s; animation-duration: 2.9s; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6) 70%, #fff); box-shadow: none; }
@keyframes rastro {
  0% { transform: translateX(-120vw); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(80vw); opacity: 0; }
}

/* Painel de números (contadores) */
.painel {
  list-style: none;
  display: grid; gap: 10px;
  margin-top: 30px;
}
.medidor {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "topo topo" "valor legenda";
  align-items: center;
  column-gap: 14px; row-gap: 4px;
  padding: 14px 16px 16px;
  border-radius: var(--raio-p);
  border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(24, 27, 34, .82), rgba(14, 16, 20, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.medidor::before { /* borda iluminada no topo */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 182, 0, .55), transparent);
}
.medidor-topo { grid-area: topo; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.medidor-rotulo {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.4;
  color: var(--texto-3);
}
.medidor .led { width: 6px; height: 6px; box-shadow: 0 0 8px rgba(255, 182, 0, .9); animation: none; }
.a-confirmar {
  margin-left: auto; flex: none;
  padding: 1px 8px; border-radius: 999px;
  border: 1px dashed rgba(255, 182, 0, .6);
  font-size: .64rem; font-weight: 500; letter-spacing: .04em;
  color: var(--amarelo-luz);
}
.medidor-valor {
  grid-area: valor;
  display: flex; align-items: baseline; gap: 4px; flex-wrap: nowrap;
  font-weight: 700;
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--texto);
  text-shadow: 0 0 22px rgba(255, 182, 0, .18);
}
.medidor-valor .pre, .medidor-valor .suf { font-size: .55em; font-weight: 600; color: var(--amarelo); letter-spacing: 0; }
.medidor-valor mark.pendente { font-size: .42em; vertical-align: middle; }
.medidor-legenda { grid-area: legenda; font-size: .8rem; line-height: 1.45; color: var(--texto-2); }
.medidor-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .04); }
.medidor-barra i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 182, 0, .2), var(--amarelo));
  box-shadow: 0 0 10px rgba(255, 182, 0, .7);
  transform: scaleX(0); transform-origin: left;
}

@media (min-width: 768px) {
  .painel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .medidor {
    grid-template-columns: 1fr;
    grid-template-areas: "topo" "valor" "legenda";
    row-gap: 8px;
    padding: 18px 20px 20px;
  }
  .medidor-legenda { font-size: .84rem; }
}
@media (min-width: 1024px) and (hover: hover) {
  .medidor { background: var(--vidro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* Hero no computador: título em cima, texto à esquerda e carro à direita */
@media (min-width: 1024px) {
  .hero { padding-top: calc(var(--topo-h) + 48px); padding-bottom: 36px; }
  .selo { margin-bottom: 26px; }
  .hero-grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: 32px;
    margin-top: 34px;
  }
  .hero-texto { padding-bottom: 30px; } /* botões acima da linha do chão */
  .hero-acoes .botao-grande { padding: 0 22px; }
  .hero-carro { margin: 0 -2% 0 0; }
  /* no computador os rastros ficam só na faixa do carro, longe do texto */
  .rastros {
    left: -12%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%);
    mask-image: linear-gradient(90deg, transparent, #000 25%);
  }
  .painel { margin-top: auto; padding-top: 44px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .hero-titulo { font-size: clamp(2.6rem, 1rem + 5.4vw, 5.2rem); }
}

/* Hero: profundidade seguindo o mouse (camadas andam em velocidades diferentes) */
@media (hover: hover) and (pointer: fine) {
  .hero-titulo { translate: calc(var(--mx, 0) * 6px) calc(var(--my, 0) * 4px); }
  .carro { translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -5px); }
  .rastros { translate: calc(var(--mx, 0) * -34px) 0; }
  .estrada { perspective-origin: calc(50% + var(--mx, 0) * 12%) 0%; }
}

/* =========================================================
   Seções (base comum)
   ========================================================= */
.secao { position: relative; padding: 88px 0; scroll-margin-top: var(--topo-h); }
@media (min-width: 1024px) { .secao { padding: 128px 0; } }
.secao-rotulo {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amarelo);
}
.secao-titulo {
  max-width: 18ch;
  font-weight: 800;
  font-size: clamp(2.1rem, 1.1rem + 4.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
  perspective: 700px;
}
.luz { color: var(--amarelo); text-shadow: 0 0 30px rgba(255, 182, 0, .35); }

/* Revelar ao rolar (só quando o JS está ativo: sem JS, tudo aparece) */
.js [data-revela] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js [data-revela].visivel { opacity: 1; transform: none; }
/* entradas 3D das seções finais (disparam quando aparecem, sem depender da rolagem) */
.js .aval-trilho[data-revela] { opacity: .15; transform: translateX(140px); transition: opacity .8s var(--ease), transform 1.1s var(--ease); }
.js .faq-item[data-revela] { transform: perspective(900px) rotateX(-55deg) translateY(30px); transform-origin: 50% 0; transition-delay: calc(var(--i, 0) * 90ms); }
.js .diag-painel[data-revela] { transform: perspective(1200px) rotateX(18deg) translateY(60px); transition-duration: .8s, 1s; }
.js .aval-trilho[data-revela].visivel, .js .faq-item[data-revela].visivel, .js .diag-painel[data-revela].visivel { opacity: 1; transform: none; }
/* Título 3D: cada palavra gira no eixo X e "acende" */
.p3d { display: inline-block; transform-origin: 50% 85%; }
.js [data-titulo-3d] .p3d {
  opacity: 0;
  transform: rotateX(-88deg) translateY(.18em);
  transition: transform .9s var(--ease), opacity .5s ease;
  transition-delay: calc(var(--i) * 75ms);
}
.js [data-titulo-3d].visivel .p3d { opacity: 1; transform: none; }

/* =========================================================
   3. CLIENTES — rodovia 3D
   ========================================================= */
.clientes { padding-bottom: 56px; overflow: hidden; }
@media (min-width: 1024px) { .clientes { padding-bottom: 72px; } }

.pista3d {
  position: relative;
  margin-top: 40px;
  padding: 36px 0 44px;
  perspective: 1100px;
  perspective-origin: 50% 20%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
@media (min-width: 1024px) { .pista3d { margin-top: 56px; padding: 56px 0 64px; } }

.pista3d-plano {
  --rx: 24deg; --px: 0deg; --py: 0deg; --sc: 1; --ty: 0px;
  position: relative;
  width: 150%; margin-left: -25%;
  padding: 22px 0;
  transform-style: preserve-3d;
  transform: translateY(var(--ty)) rotateX(calc(var(--rx) + var(--py))) rotateY(var(--px)) rotateZ(-2.5deg) scale(var(--sc));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .01)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 120px);
  border-block: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -1px 24px -6px rgba(255, 182, 0, .35), 0 1px 24px -6px rgba(255, 182, 0, .35);
}

/* "pintura" no acostamento */
.pista3d-pintura {
  text-align: center;
  font-size: .68rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255, 182, 0, .55);
}
.pista3d-pintura.topo { margin-bottom: 14px; color: rgba(174, 180, 190, .55); }
.pista3d-pintura.base { margin-top: 16px; }

.pista3d-faixa { overflow: hidden; padding: 10px 0; transform-style: preserve-3d; }
.faixa-trilho {
  display: flex; width: max-content;
  transform-style: preserve-3d;
  animation: faixa var(--duracao, 40s) linear infinite;
}
.pista3d-faixa.volta .faixa-trilho { animation-direction: reverse; }
.pista3d-faixa:hover .faixa-trilho { animation-play-state: paused; }
@keyframes faixa { to { transform: translateX(-50%); } }
.faixa-grupo { display: flex; gap: 18px; padding-right: 18px; list-style: none; transform-style: preserve-3d; }

.placa {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 64px; padding: 0 26px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 30px -18px rgba(0, 0, 0, .9);
  white-space: nowrap;
  transition: transform .45s var(--ease), border-color .3s, box-shadow .3s, background-color .3s;
}
.placa::before { /* reflexo de vidro que corre na borda de cima */
  content: ''; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 227, 161, .7), transparent);
}
.placa-nome { font-size: 1rem; font-weight: 600; letter-spacing: .01em; color: #E4E7EC; }
.placa-segmento { font-size: .66rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
/* placa com logo: cores originais sobre o fundo do próprio logo */
.placa.com-logo { padding: 0 14px; background: var(--fundo-logo, #fff); border-color: rgba(255, 255, 255, .22); overflow: hidden; }
.placa.com-logo::before { opacity: .5; }
.placa img { height: 52px; width: auto; max-width: 190px; object-fit: contain; }
.placa:hover {
  transform: translateZ(34px) rotateX(-8deg);
  border-color: rgba(255, 182, 0, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(255, 182, 0, .25), 0 22px 44px -14px rgba(255, 182, 0, .55);
}
.placa:hover .placa-nome { color: #fff; }

/* pista do fundo (outros segmentos): menor e mais apagada */
.pista3d-faixa.volta .placa { height: 52px; padding: 0 20px; opacity: .72; }
.pista3d-faixa.volta .placa img { height: 42px; }
.pista3d-faixa.volta .placa.com-logo { opacity: 1; } /* logos sempre com a cor original */
.pista3d-faixa.volta .placa-nome { font-size: .86rem; }

/* faixa amarela tracejada entre as pistas */
.pista3d-divisoria {
  position: relative; height: 3px; margin: 10px 0; overflow: hidden;
}
.pista3d-divisoria::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 96px);
  background: repeating-linear-gradient(90deg, var(--amarelo) 0 48px, transparent 48px 96px);
  box-shadow: 0 0 12px rgba(255, 182, 0, .6);
  opacity: .8;
  animation: tracejado 1.4s linear infinite;
}
@keyframes tracejado { to { transform: translateX(-96px); } }

/* farol varrendo o asfalto */
.pista3d-varredura {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.pista3d-varredura::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .22), rgba(255, 182, 0, .06) 60%, transparent);
  mix-blend-mode: screen;
  animation: varre 7s var(--ease) infinite;
}
@keyframes varre { 0% { transform: translateX(-30%); } 55%, 100% { transform: translateX(420%); } }

@media (min-width: 1024px) {
  .placa { height: 84px; padding: 0 38px; border-radius: 18px; }
  .placa-nome { font-size: 1.28rem; }
  .placa img { height: 70px; max-width: 250px; }
  .placa.com-logo { padding: 0 18px; }
  .faixa-grupo { gap: 26px; padding-right: 26px; }
  .pista3d-faixa.volta .placa { height: 62px; padding: 0 28px; }
  .pista3d-faixa.volta .placa img { height: 52px; }
  .pista3d-faixa.volta .placa-nome { font-size: 1rem; }
  .pista3d-pintura { font-size: .74rem; }
}

.nota-pendente { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; font-size: .85rem; color: var(--texto-3); }
.nota-pendente[hidden] { display: none; }

/* =========================================================
   4. PROBLEMA — painel de alertas
   ========================================================= */
.problema { overflow: hidden; }
.secao-intro { max-width: 34em; margin-top: 20px; font-size: clamp(1rem, .94rem + .3vw, 1.12rem); color: var(--texto-2); }
@media (min-width: 1024px) {
  .problema-cabeca { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; }
  .problema-cabeca .secao-intro { margin: 0 0 10px; }
}

/* velocímetro de fundo: o ponteiro sobe com a rolagem */
.velocimetro {
  position: absolute; z-index: -1; pointer-events: none;
  top: -150px; right: -200px; width: 400px; height: 400px;
  opacity: .42;
}
@media (min-width: 1024px) { .velocimetro { top: -40px; right: -150px; width: 580px; height: 580px; opacity: .45; } }
.velocimetro-arco { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 2; stroke-dasharray: 270 90; stroke-dashoffset: -135; }
.velocimetro-zona { fill: none; stroke: rgba(255, 182, 0, .35); stroke-width: 4; stroke-dasharray: 60 300; stroke-dashoffset: -345; }
.velocimetro-marcas line { stroke: rgba(255, 255, 255, .12); stroke-width: 2; stroke-linecap: round; }
.velocimetro-marcas line.zona { stroke: rgba(255, 182, 0, .45); }
.velocimetro-ponteiro { stroke: var(--amarelo); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 182, 0, .8)); }
.velocimetro-eixo { fill: var(--amarelo); opacity: .5; }

/* cartões de alerta */
.alertas {
  list-style: none;
  display: grid; gap: 14px;
  margin-top: 44px;
  perspective: 1400px;
}
@media (min-width: 640px) { .alertas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) {
  .alertas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 64px; perspective: 1600px; }
  /* painel curvo, como uma tela de cockpit */
  .alerta:nth-child(1) .alerta-cartao { --arco: 10deg; --arco-z: 26px; }
  .alerta:nth-child(2) .alerta-cartao { --arco: 3.5deg; --arco-z: 0px; }
  .alerta:nth-child(3) .alerta-cartao { --arco: -3.5deg; --arco-z: 0px; }
  .alerta:nth-child(4) .alerta-cartao { --arco: -10deg; --arco-z: 26px; }
}
.alerta { transform-style: preserve-3d; }
.alerta-cartao {
  position: relative; overflow: hidden;
  height: 100%;
  padding: 22px 22px 24px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(24, 27, 34, .9), rgba(12, 14, 18, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .9);
  transform: rotateY(var(--arco, 0deg)) translateZ(var(--arco-z, 0px)) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .6s var(--ease), border-color .4s, box-shadow .4s;
}
.alerta-cartao.inclinando { transition: transform .12s linear, border-color .4s, box-shadow .4s; }
.alerta-cartao:hover { border-color: rgba(255, 182, 0, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 70px -28px rgba(255, 182, 0, .35); }
.alerta-cartao::before { /* borda de cima que acende junto com a luz */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amarelo), transparent);
  box-shadow: 0 0 16px rgba(255, 182, 0, .8);
  opacity: 0;
}
.alerta-brilho {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 227, 161, .16), transparent 50%);
  opacity: 0; transition: opacity .3s;
}
.alerta-cartao:hover .alerta-brilho { opacity: 1; }

.alerta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.luz-alerta {
  position: relative;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .05), rgba(0, 0, 0, .35));
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6);
}
.luz-alerta::after { /* halo da luz acesa */
  content: ''; position: absolute; inset: -6px; border-radius: 22px;
  background: radial-gradient(closest-side, rgba(255, 182, 0, .32), transparent);
  opacity: 0;
}
.luz-alerta svg { grid-area: 1 / 1; width: 32px; height: 32px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.luz-alerta .apagada { stroke: #3A4049; }
.luz-alerta .acesa { position: relative; z-index: 1; stroke: var(--amarelo); filter: drop-shadow(0 0 5px rgba(255, 182, 0, .9)); opacity: 0; }
.alerta-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3);
}
.alerta-status i { width: 6px; height: 6px; border-radius: 50%; background: #3A4049; }
.alerta-titulo { font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px; }
.alerta-texto { font-size: .95rem; line-height: 1.6; color: var(--texto-2); }
@media (max-width: 639px) {
  .alerta-cartao { padding: 18px 18px 20px; }
  .alerta-topo { margin-bottom: 14px; }
  .luz-alerta { width: 48px; height: 48px; border-radius: 14px; }
  .luz-alerta svg { width: 27px; height: 27px; }
  .alerta-titulo { font-size: 1.16rem; margin-bottom: 6px; }
  .alerta-texto { font-size: .92rem; line-height: 1.55; }
}

/* partida: todas piscam juntas (checagem do painel) e depois acendem uma a uma */
.alertas.partida .acesa { animation: checagem .9s ease, liga .55s ease forwards calc(1.1s + var(--i) * .42s); }
.alertas.partida .luz-alerta::after { animation: liga .55s ease forwards calc(1.1s + var(--i) * .42s), respira 2.8s ease-in-out infinite calc(1.8s + var(--i) * .42s); }
.alertas.partida .alerta-cartao::before { animation: liga .55s ease forwards calc(1.1s + var(--i) * .42s); }
.alertas.partida .alerta-status { animation: status-cor .4s ease forwards calc(1.2s + var(--i) * .42s); }
.alertas.partida .alerta-status i { animation: status-led .4s ease forwards calc(1.2s + var(--i) * .42s); }
@keyframes checagem { 0%, 100% { opacity: 0; } 12%, 55% { opacity: 1; } }
@keyframes liga { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .25; } 100% { opacity: 1; } }
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes status-cor { to { color: var(--amarelo-luz); } }
@keyframes status-led { to { background: var(--amarelo); box-shadow: 0 0 8px rgba(255, 182, 0, .9); } }

/* fechamento: o caminho inteiro até a venda */
.problema-fecho { margin-top: 72px; }
@media (min-width: 1024px) { .problema-fecho { margin-top: 104px; } }
.fecho-texto {
  max-width: 24ch;
  font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  perspective: 700px;
}
.caminho { position: relative; height: 80px; margin: 22px 0 28px; }
@media (min-width: 1024px) { .caminho { height: 130px; margin: 28px 0 36px; } }
.caminho svg { width: 100%; height: 100%; overflow: visible; }
.caminho path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.caminho-base { stroke: rgba(255, 255, 255, .1); stroke-width: 2; stroke-dasharray: 2 10; }
.caminho-luz { stroke: var(--amarelo); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(255, 182, 0, .8)); }
.caminho-ponto {
  position: absolute; left: 100%; top: 74.7%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #FFF3D1;
  box-shadow: 0 0 0 4px rgba(255, 182, 0, .35), 0 0 22px 6px rgba(255, 182, 0, .75);
}

/* =========================================================
   4b. LEADS AO VIVO — gerador de anúncio → WhatsApp + depoimento
   ========================================================= */
.ao-vivo { overflow: hidden; }
@media (min-width: 1024px) {
  .aovivo-cabeca { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; }
  .aovivo-cabeca .secao-intro { margin: 0 0 10px; }
}
.aovivo-palco {
  position: relative;
  display: grid; justify-items: center; gap: 0;
  margin-top: 44px; padding: 54px 0 10px;
  perspective: 1500px;
}
@media (min-width: 1024px) {
  .aovivo-palco { grid-template-columns: minmax(0, 400px) 170px 310px; justify-content: center; align-items: center; margin-top: 56px; padding-top: 64px; }
}
.selo-simulacao {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, .25);
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2);
}

/* gerador de anúncio */
.gerador {
  --ex: 0px; --ery: 0deg;
  width: 100%; max-width: 400px;
  padding: 14px 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(26, 29, 36, .95), rgba(12, 14, 18, .95));
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: translateX(var(--ex)) rotateY(calc(var(--ery) + var(--ty, 0deg))) rotateX(var(--tx, 0deg));
  transition: transform .5s var(--ease);
}
.inclinando .gerador, .inclinando .celular { transition: transform .15s linear; }
@media (min-width: 1024px) { .gerador { transform: translateX(var(--ex)) rotateY(calc(12deg + var(--ery) + var(--ty, 0deg))) rotateX(var(--tx, 0deg)); } }
.gerador-barra { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.gerador-barra i { width: 9px; height: 9px; border-radius: 50%; background: #2A2F38; }
.gerador-barra i:first-child { background: rgba(255, 182, 0, .8); }
.gerador-barra span { margin-left: 8px; }
.gerador-passos { list-style: none; display: grid; gap: 6px; margin-bottom: 14px; }
.passo { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); transition: border-color .3s, background-color .3s; }
.passo-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); font-size: .66rem; font-weight: 700; color: var(--texto-3); transition: all .3s; }
.passo small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.passo-valor { display: block; min-height: 1.4em; font-size: .86rem; font-weight: 500; color: var(--texto); }
.passo.ativo { border-color: rgba(255, 182, 0, .5); background: rgba(255, 182, 0, .06); }
.passo.ativo .passo-valor::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--amarelo); animation: cursor .8s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.passo.ok .passo-num { border-color: var(--amarelo); background: var(--amarelo); color: var(--tinta); }

.anuncio { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: #101318; }
.anuncio-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.anuncio-avatar, .celular-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #000; border: 1px solid rgba(255, 182, 0, .5); flex: none; }
.anuncio-avatar svg, .celular-avatar svg { width: 16px; height: auto; }
.anuncio-topo strong { display: block; font-size: .82rem; font-weight: 600; line-height: 1.2; }
.anuncio-topo small { display: block; font-size: .68rem; color: var(--texto-3); }
.anuncio-imagem {
  position: relative; aspect-ratio: 16 / 8;
  display: grid; place-items: center;
  background: radial-gradient(80% 90% at 50% 100%, rgba(255, 182, 0, .2), transparent 60%), linear-gradient(180deg, #171A21, #0B0D11);
}
.anuncio-imagem svg { width: 78%; height: auto; overflow: visible; }
.anuncio-imagem path, .anuncio-imagem circle { fill: none; stroke: var(--amarelo-luz); stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease); filter: drop-shadow(0 0 6px rgba(255, 182, 0, .7)); }
.criativo .anuncio-imagem path, .criativo .anuncio-imagem circle { stroke-dashoffset: 0; }
.anuncio-oferta { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: var(--amarelo); color: var(--tinta); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.criativo .anuncio-oferta { opacity: 1; transform: none; }
.anuncio-headline { min-height: 2.8em; padding: 10px 12px 4px; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.anuncio-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 6px 12px 12px; padding: 9px; border-radius: 10px;
  background: #1F242C; color: var(--texto-3); font-size: .84rem; font-weight: 600;
  transition: background-color .4s, color .4s, box-shadow .4s;
}
.anuncio-cta .icone { width: 16px; height: 16px; }
.cta .anuncio-cta { background: #25D366; color: #06210F; }
.publicado .anuncio-cta { animation: pulsa-cta 1.6s ease-in-out infinite; }
@keyframes pulsa-cta { 50% { box-shadow: 0 0 0 6px rgba(37, 211, 102, .18); } }
.gerador-publicar {
  position: relative; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 12px;
  background: var(--amarelo); color: var(--tinta); font-weight: 700; font-size: .9rem; cursor: default;
  transition: transform .2s, background-color .4s, color .4s;
}
.gerador-publicar.clicando { transform: scale(.95); }
.publicado .gerador-publicar { background: rgba(37, 211, 102, .12); color: #7CF0A8; box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .5); }
.publicado .gerador-publicar::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #25D366; box-shadow: 0 0 10px #25D366; vertical-align: 1px; }
.publicado .gerador-publicar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(37, 211, 102, .6); animation: radar 1.8s ease-out infinite; }
@keyframes radar { to { transform: scale(1.08, 1.6); opacity: 0; } }

/* feixe: os leads viajam do anúncio ao celular */
.feixe { position: relative; width: 120px; height: 90px; }
.feixe svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.feixe path { fill: none; stroke: rgba(255, 182, 0, .35); stroke-width: 2; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.feixe-h { display: none; }
.publicado .feixe path { stroke: rgba(255, 182, 0, .6); animation: corre 1s linear infinite; }
@keyframes corre { to { stroke-dashoffset: -10; } }
.lead-ponto {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #FFF3D1; box-shadow: 0 0 0 4px rgba(255, 182, 0, .3), 0 0 18px 5px rgba(255, 182, 0, .8);
  offset-path: path("M60 0C10 30 110 60 60 90"); offset-rotate: 0deg;
  animation: viaja .6s cubic-bezier(.5, 0, .5, 1) forwards;
}
@keyframes viaja { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (min-width: 1024px) {
  .feixe { width: 170px; height: 300px; }
  .feixe-v { display: none; }
  .feixe-h { display: block; }
  .lead-ponto { offset-path: path("M0 150C53 70 117 230 170 150"); }
}

/* celular */
.celular {
  --ex: 0px; --ery: 0deg;
  width: 290px; max-width: 100%;
  padding: 10px; border-radius: 42px;
  background: linear-gradient(160deg, #2A2E36, #0D0F13 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 100px -40px rgba(0, 0, 0, 1), 0 0 80px -30px rgba(255, 182, 0, .35);
  transform: translateX(var(--ex)) rotateY(calc(var(--ery) + var(--ty, 0deg))) rotateX(var(--tx, 0deg));
  transition: transform .5s var(--ease);
}
@media (min-width: 1024px) { .celular { width: 310px; transform: translateX(var(--ex)) rotateY(calc(-14deg + var(--ery) + var(--ty, 0deg))) rotateX(calc(4deg + var(--tx, 0deg))); } }
.celular-tela { position: relative; overflow: hidden; height: 520px; border-radius: 33px; background: #0B0E12; display: flex; flex-direction: column; }
.celular-tela::before { content: ''; position: absolute; left: 50%; top: 8px; width: 86px; height: 22px; margin-left: -43px; border-radius: 999px; background: #000; z-index: 2; }
.celular-topo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 40px 14px 12px; background: #13171D; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.celular-topo strong { display: block; font-size: .86rem; font-weight: 600; line-height: 1.2; }
.celular-topo small { display: block; font-size: .7rem; color: #7CF0A8; }
.celular-contador { padding: 4px 9px; border-radius: 999px; background: rgba(255, 182, 0, .14); color: var(--amarelo-luz); font-size: .66rem; font-weight: 600; white-space: nowrap; }
.celular-contador b { font-size: .84rem; font-weight: 800; color: var(--amarelo); font-variant-numeric: tabular-nums; }
.conversas { list-style: none; flex: 1; overflow: hidden; padding: 8px 10px; }
.msg {
  position: relative;
  display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start;
  padding: 10px 8px; border-radius: 14px;
  opacity: 0; transform: translateY(-14px) scale(.96);
  transition: opacity .45s var(--ease), transform .55s var(--ease), background-color .6s;
}
.msg.chegou { opacity: 1; transform: none; background: rgba(255, 182, 0, .07); }
.msg.qualificada { background: transparent; }
.msg-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #3A404B, #22262E); font-weight: 700; color: var(--texto); }
.msg-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.msg-cab strong { font-size: .84rem; font-weight: 600; }
.msg-cab small { font-size: .66rem; color: #7CF0A8; }
.msg-texto { margin-top: 2px; font-size: .8rem; line-height: 1.4; color: var(--texto-2); }
.msg.digitando .msg-texto { color: transparent; position: relative; }
.msg.digitando .msg-texto::after { content: 'digitando…'; position: absolute; left: 0; top: 0; color: #7CF0A8; font-style: italic; }
.msg-tag { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255, 182, 0, .5); font-size: .64rem; font-weight: 600; color: var(--amarelo-luz); opacity: 0; transform: scale(.7); transform-origin: left center; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.msg.qualificada .msg-tag { opacity: 1; transform: none; }
.msg-nova { position: absolute; right: 10px; bottom: 14px; width: 9px; height: 9px; border-radius: 50%; background: #25D366; box-shadow: 0 0 8px #25D366; }
.msg.qualificada .msg-nova { opacity: 0; transition: opacity .6s .4s; }
.celular-final {
  margin: 0 10px 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(37, 211, 102, .1); border: 1px solid rgba(37, 211, 102, .35);
  font-size: .76rem; font-weight: 600; color: #9DF5BE;
  opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease);
}
.final .celular-final { opacity: 1; transform: none; }

/* depoimento em áudio */
.depoimento-audio {
  position: relative; overflow: hidden;
  margin: 56px auto 0; max-width: 820px;
  padding: 26px 22px;
  border-radius: var(--raio);
  border: 1px solid rgba(255, 182, 0, .35);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255, 182, 0, .1), transparent 60%),
    linear-gradient(180deg, rgba(24, 27, 34, .92), rgba(11, 13, 17, .95));
}
@media (min-width: 768px) { .depoimento-audio { padding: 34px 40px; } }
.depo-cabeca { display: grid; gap: 4px; margin-bottom: 18px; }
.depo-cabeca .secao-rotulo { margin: 0; }
.depo-cabeca strong { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.depo-destaque { margin: 22px 0 0; }
.depo-destaque p { font-size: clamp(1.2rem, .95rem + 1.1vw, 1.7rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.depo-destaque p::before { content: '“'; color: var(--amarelo); }
.depo-destaque p::after { content: '”'; color: var(--amarelo); }
.depo-transcricao { margin-top: 14px; font-size: .98rem; line-height: 1.7; color: var(--texto-2); max-width: 62ch; }
.depo-autor { margin-top: 16px; font-size: .84rem; color: var(--texto-3); }
.depo-pendente { margin-top: 8px; font-size: .8rem; }
.depo-pendente[hidden] { display: none; }
.aovivo-cta { margin-top: 32px; }
@media (max-width: 639px) {
  .gerador { padding: 12px 12px 14px; }
  .gerador-passos { gap: 4px; }
  .passo { padding: 6px 8px; gap: 8px; grid-template-columns: 22px 1fr; }
  .passo-num { width: 22px; height: 22px; }
  .passo-valor { font-size: .8rem; }
  .anuncio-imagem { aspect-ratio: 16 / 6; }
  .anuncio-imagem svg { width: 62%; }
  .anuncio-headline { min-height: 2.6em; font-size: .84rem; }
  .celular-tela { height: 450px; }
}

/* =========================================================
   5. MÉTODO — estrada com 4 paradas
   ========================================================= */
.metodo { padding-bottom: 72px; }
.metodo-palco { display: none; }
.metodo-progresso { display: none; }

/* --- Celular / sem animação: estrada vertical ao lado dos cartões --- */
.metodo-trilha-envolve { position: relative; margin-top: 40px; padding-left: 64px; }
.metodo-trilha {
  position: absolute; left: 23px; top: 26px; bottom: 34px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .16) 0 8px, transparent 8px 16px);
}
.metodo-trilha-luz {
  position: absolute; left: -1px; top: 0; width: 4px; height: 100%; border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 182, 0, .4), var(--amarelo));
  box-shadow: 0 0 12px rgba(255, 182, 0, .7);
  transform: scaleY(0); transform-origin: top;
}
.metodo-trilha-ponto {
  position: absolute; left: 50%; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #FFF3D1;
  box-shadow: 0 0 0 4px rgba(255, 182, 0, .35), 0 0 22px 6px rgba(255, 182, 0, .75);
}
.etapas { list-style: none; display: grid; gap: 16px; }
.etapa { position: relative; }
.etapa-marco {
  position: absolute; left: -64px; top: 10px; z-index: 1;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0E1014;
  transition: border-color .4s, box-shadow .4s;
}
.etapa-icone, .totem-icone { width: 24px; height: 24px; fill: none; stroke: #4A505A; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s, filter .4s; }
.etapa-corpo {
  padding: 20px 20px 22px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(24, 27, 34, .85), rgba(12, 14, 18, .85));
  transform: perspective(900px) rotateY(-10deg) translateX(10px);
  transform-origin: left center;
  opacity: .62;
  transition: transform .7s var(--ease), opacity .5s, border-color .5s, box-shadow .5s;
}
.etapa.acesa .etapa-corpo, .metodo.estatico .etapa-corpo {
  transform: none; opacity: 1;
  border-color: rgba(255, 182, 0, .35);
  box-shadow: 0 20px 50px -30px rgba(255, 182, 0, .45);
}
.etapa.acesa .etapa-marco, .metodo.estatico .etapa-marco { border-color: rgba(255, 182, 0, .8); box-shadow: 0 0 0 4px rgba(255, 182, 0, .12), 0 0 18px rgba(255, 182, 0, .45); }
.etapa.acesa .etapa-icone, .metodo.estatico .etapa-icone { stroke: var(--amarelo); filter: drop-shadow(0 0 4px rgba(255, 182, 0, .8)); }
.metodo.estatico .metodo-trilha-luz { transform: none; }
.metodo.estatico .metodo-trilha-ponto { top: 100%; }

.etapa-num { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 6px; }
.etapa-titulo { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; }
.etapa-texto { font-size: .95rem; line-height: 1.6; color: var(--texto-2); }
.etapa-itens { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.etapa-itens li {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  font-size: .74rem; font-weight: 400; color: var(--texto-2);
}

.metodo-final { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 22px; min-height: 48px; }
.metodo-final-icone {
  position: absolute; left: -64px; top: 0;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12); background: #0E1014;
  transition: border-color .4s, box-shadow .4s;
}
.metodo-final p { font-size: 1.05rem; color: var(--texto-2); }
.metodo-final strong { color: var(--texto); font-weight: 700; }
.metodo-final.acesa .metodo-final-icone, .metodo.estatico .metodo-final-icone { border-color: var(--amarelo); box-shadow: 0 0 0 4px rgba(255, 182, 0, .15), 0 0 22px rgba(255, 182, 0, .6); }
.mini-carro { width: 34px; height: auto; overflow: visible; }
.mini-carro path, .mini-carro circle { fill: #0B0C10; stroke: var(--amarelo-luz); stroke-width: 14; stroke-linejoin: round; }

@media (min-width: 640px) and (max-width: 1023px) {
  .etapa-corpo { padding: 24px 26px 26px; }
  .etapa-titulo { font-size: 1.8rem; }
}
/* computador sem animação: 2×2 */
@media (min-width: 1024px) {
  .metodo:not(.fixo) .metodo-trilha-envolve { padding-left: 0; }
  .metodo:not(.fixo) .metodo-trilha, .metodo:not(.fixo) .etapa-marco, .metodo:not(.fixo) .metodo-final-icone { display: none; }
  .metodo:not(.fixo) .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Computador: seção fixa, painel à esquerda e mapa 3D à direita --- */
.metodo.fixo { padding: 0; }
.metodo.fixo .metodo-fixar { height: 100vh; overflow: hidden; }
.metodo.fixo .metodo-grade {
  height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px;
  padding-top: calc(var(--topo-h) + 28px); padding-bottom: 28px;
}
.metodo.fixo .metodo-lado { display: flex; flex-direction: column; min-height: 0; }
.metodo.fixo .secao-titulo { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.8rem); }
.metodo.fixo .secao-intro { margin-top: 14px; font-size: 1rem; }
@media (max-height: 820px) { .metodo.fixo .secao-intro { display: none; } }

.metodo.fixo .metodo-progresso { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
.progresso-item {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; row-gap: 8px;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--texto-3);
  transition: color .3s;
}
.progresso-num { font-size: .72rem; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.progresso-nome { font-size: .84rem; font-weight: 600; }
.progresso-barra { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.progresso-barra i {
  position: absolute; inset: 0; border-radius: 3px;
  background: var(--amarelo); box-shadow: 0 0 10px rgba(255, 182, 0, .8);
  transform: scaleX(0); transform-origin: left;
}
.progresso-item:hover, .progresso-item[aria-current="step"] { color: var(--texto); }
.progresso-item[aria-current="step"] .progresso-num { color: var(--amarelo); }

.metodo.fixo .metodo-trilha-envolve { flex: 1; min-height: 0; margin-top: 30px; padding-left: 0; perspective: 900px; }
.metodo.fixo .metodo-trilha, .metodo.fixo .etapa-marco { display: none; }
.metodo.fixo .etapas { display: grid; }
.metodo.fixo .etapa { grid-area: 1 / 1; }
.metodo.fixo .etapa-corpo {
  padding: 0; border: 0; background: none; box-shadow: none; opacity: 1;
  transform-origin: 50% 0%;
  transform: rotateX(-75deg) translateY(30px);
  opacity: 0;
  transition: transform .75s var(--ease), opacity .45s ease;
}
.metodo.fixo .etapa.ativa .etapa-corpo { transform: none; opacity: 1; transition-delay: .12s; }
.metodo.fixo .etapa.passou .etapa-corpo { transform: rotateX(70deg) translateY(-30px); opacity: 0; }
.metodo.fixo .etapa-num { font-size: .78rem; }
.metodo.fixo .etapa-titulo { font-size: clamp(2rem, 1rem + 2vw, 3rem); margin-bottom: 12px; }
.metodo.fixo .etapa-texto { font-size: 1.02rem; max-width: 36em; }
.metodo.fixo .etapa-itens li { font-size: .8rem; padding: 5px 12px; }
.metodo.fixo .metodo-final { margin-top: 0; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s var(--ease); }
.metodo.fixo .metodo-final-icone { position: static; }
.metodo.fixo.completo .metodo-final { opacity: 1; transform: none; }
.metodo.fixo.completo .metodo-final-icone { border-color: var(--amarelo); box-shadow: 0 0 0 4px rgba(255, 182, 0, .15), 0 0 22px rgba(255, 182, 0, .6); }

/* palco 3D */
.metodo.fixo .metodo-palco {
  display: block; position: relative;
  margin: calc((var(--topo-h) + 28px) * -1) calc(var(--gutter) * -1) -28px 0;
  perspective: 1700px; perspective-origin: 50% 35%;
}
.mapa {
  --rx: 48deg; --rz: -32deg; --s: .9;
  position: absolute; left: 50%; top: 57%;
  width: min(760px, 48vw, 88vh); aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(var(--rx)) rotateZ(var(--rz)) scale(var(--s));
}
.mapa::before { /* chão quadriculado (só ele leva a máscara; as placas em pé não são cortadas) */
  content: ''; position: absolute; inset: -12%;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 7.2% 7.2%;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent);
  mask-image: radial-gradient(closest-side, #000 60%, transparent);
}
.mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.estrada-borda { stroke: rgba(255, 255, 255, .14); stroke-width: 76; }
.estrada-asfalto { stroke: #0F1116; stroke-width: 68; }
.estrada-faixa { stroke: rgba(255, 182, 0, .35); stroke-width: 3; stroke-dasharray: 16 22; }
.estrada-luz { stroke: var(--amarelo); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px rgba(255, 182, 0, .9)); }
.estrada-retorno { stroke: rgba(255, 182, 0, .55); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.metodo.completo .estrada-retorno { stroke-dashoffset: 0; }

.totem, .lead { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.totem-chao {
  position: absolute; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .16);
  transition: border-color .4s, box-shadow .4s;
}
.totem.alcancado .totem-chao { border-color: var(--amarelo); box-shadow: 0 0 24px rgba(255, 182, 0, .6), inset 0 0 18px rgba(255, 182, 0, .4); animation: anel 2.4s ease-out infinite; }
@keyframes anel { 0% { box-shadow: 0 0 0 0 rgba(255, 182, 0, .55), inset 0 0 18px rgba(255, 182, 0, .4); } 100% { box-shadow: 0 0 0 26px rgba(255, 182, 0, 0), inset 0 0 18px rgba(255, 182, 0, .4); } }
/* placas sempre de frente para a câmera (desfazem a rotação do mapa) */
.totem-placa, .lead-placa {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(calc(1 / var(--s))) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1));
}
.totem-cabeca {
  display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, #1A1D24, #0C0E12);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .9);
  transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
}
.totem-icone { width: 32px; height: 32px; }
.totem-nome {
  margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  background: rgba(7, 8, 10, .85); border: 1px solid rgba(255, 255, 255, .12);
  font-size: .82rem; font-weight: 600; white-space: nowrap; color: var(--texto-3);
  transition: color .4s, border-color .4s;
}
.totem-poste { width: 2px; height: 74px; margin-top: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0)); transition: background .4s; }
.totem.alcancado .totem-cabeca { border-color: var(--amarelo); box-shadow: 0 0 0 4px rgba(255, 182, 0, .15), 0 0 30px rgba(255, 182, 0, .55); transform: translateY(-6px); }
.totem.alcancado .totem-icone { stroke: var(--amarelo); filter: drop-shadow(0 0 5px rgba(255, 182, 0, .9)); }
.totem.alcancado .totem-nome { color: var(--amarelo-luz); border-color: rgba(255, 182, 0, .5); }
.totem.alcancado .totem-poste { background: linear-gradient(180deg, var(--amarelo), rgba(255, 182, 0, 0)); }

.lead-chao {
  position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .65), rgba(255, 182, 0, .18) 55%, transparent);
}
.lead-placa { padding-bottom: 6px; }
.lead-luz {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #FFE3A1 45%, var(--amarelo));
  box-shadow: 0 0 18px 6px rgba(255, 182, 0, .8), 0 0 60px 14px rgba(255, 182, 0, .35);
  transition: transform .4s var(--ease), opacity .3s;
}
.lead-carro { display: none; }
.lead-carro .mini-carro { width: 160px; }
.lead-carro .mini-carro path, .lead-carro .mini-carro circle { stroke-width: 9; filter: drop-shadow(0 0 6px rgba(255, 182, 0, .9)); }
.lead-vendido {
  order: -1; margin-bottom: 8px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--amarelo); color: var(--tinta);
  font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 0 24px rgba(255, 182, 0, .7);
  opacity: 0; transform: scale(.4);
  transition: opacity .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.metodo.vendido .lead-luz { display: none; }
.metodo.vendido .lead-carro { display: block; animation: surge .5s cubic-bezier(.3, 1.6, .5, 1); }
.metodo.vendido .lead-vendido { opacity: 1; transform: none; }
@keyframes surge { from { transform: scale(.3); opacity: 0; } }

/* =========================================================
   6. SOLUÇÕES — módulos sobre um túnel de velocidade
   ========================================================= */
.solucoes { overflow: hidden; isolation: isolate; }
.tunel {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  perspective: 520px; perspective-origin: 50% 42%;
  overflow: hidden;
  /* os anéis aparecem nas bordas e somem atrás do texto */
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 45%, transparent 22%, #000 72%);
  mask-image: radial-gradient(ellipse 58% 52% at 50% 45%, transparent 22%, #000 72%);
}
.anel {
  position: absolute; left: 50%; top: 45%;
  width: 92vw; height: 70vh; border-radius: 48px;
  border: 2px solid rgba(255, 182, 0, .62);
  box-shadow: 0 0 30px rgba(255, 182, 0, .32), inset 0 0 30px rgba(255, 182, 0, .16);
  opacity: 0;
  will-change: transform, opacity;
}
.anel.claro { border-color: rgba(255, 255, 255, .28); box-shadow: 0 0 18px rgba(255, 255, 255, .12); }

.modulos {
  display: grid; gap: 16px;
  margin-top: 44px;
  perspective: 1400px;
}
@media (min-width: 1024px) { .modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 60px; } }
.modulo { transform-style: preserve-3d; }
.modulo-cartao {
  position: relative; overflow: hidden; height: 100%;
  padding: 24px 22px 18px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(24, 27, 34, .9), rgba(11, 13, 17, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -40px rgba(0, 0, 0, .95);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .6s var(--ease), border-color .4s, box-shadow .4s;
}
.modulo-cartao.inclinando { transition: transform .12s linear, border-color .4s, box-shadow .4s; }
.modulo-cartao::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amarelo), transparent);
  box-shadow: 0 0 16px rgba(255, 182, 0, .8);
  opacity: .7;
}
.modulo-cartao:hover { border-color: rgba(255, 182, 0, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -36px rgba(255, 182, 0, .35); }
.modulo-cartao:hover .alerta-brilho { opacity: 1; }

.modulo-cabeca { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--linha); }
.modulo-icone {
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 15px;
  border: 1px solid rgba(255, 182, 0, .5);
  background: radial-gradient(circle at 50% 35%, rgba(255, 182, 0, .16), rgba(0, 0, 0, .3));
  box-shadow: 0 0 22px rgba(255, 182, 0, .25);
}
.modulo-svg { width: 26px; height: 26px; fill: none; stroke: var(--amarelo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255, 182, 0, .7)); }
.modulo-etapas { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.modulo-titulo { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.modulo-qtd {
  align-self: start;
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 182, 0, .55);
  font-variant-numeric: tabular-nums;
}
.modulo-itens { list-style: none; }
.modulo-itens li {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  padding: 14px 8px 14px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  transition: background-color .3s, padding-left .35s var(--ease);
}
.modulo-itens li:last-child { border-bottom: 0; }
.modulo-itens li:hover { background: linear-gradient(90deg, rgba(255, 182, 0, .07), transparent 80%); padding-left: 10px; }
.item-led { width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: #3A4049; transition: background .3s, box-shadow .3s; }
.modulo-itens li:hover .item-led { background: var(--amarelo); box-shadow: 0 0 10px rgba(255, 182, 0, .9); }
.modulo-itens strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--texto); }
.modulo-itens span { display: block; margin-top: 3px; font-size: .88rem; line-height: 1.5; color: var(--texto-2); }
.modulo-itens span mark.pendente { margin-top: 4px; }
.modulo-pendente { margin-top: 10px; font-size: .8rem; }

.solucoes-cta { margin-top: 32px; }

/* =========================================================
   7. POR QUE A MONT — outdoor giratório + câmbio
   ========================================================= */
.cambio, .porque-marchas { display: none; }

/* sem animação: 4 cartões */
.porque.estatico .prisma { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 768px) { .porque.estatico .prisma { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.face {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 26px 24px;
  border-radius: var(--raio);
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 182, 0, .1), transparent 55%),
    linear-gradient(180deg, #171A21, #0C0E12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.face::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amarelo), transparent);
  box-shadow: 0 0 16px rgba(255, 182, 0, .8);
}
.face-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.face-icone {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 16px;
  border: 1px solid rgba(255, 182, 0, .5);
  background: radial-gradient(circle at 50% 35%, rgba(255, 182, 0, .16), rgba(0, 0, 0, .3));
  box-shadow: 0 0 24px rgba(255, 182, 0, .25);
}
.face-svg { width: 28px; height: 28px; fill: none; stroke: var(--amarelo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255, 182, 0, .7)); }
.face-num {
  font-size: 3.4rem; font-weight: 800; line-height: .8; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 182, 0, .5);
}
.face-titulo { font-size: clamp(1.45rem, 1rem + 1.6vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin-bottom: 12px; }
.face-texto { font-size: 1rem; line-height: 1.6; color: var(--texto-2); max-width: 36em; }
.face-sombra { display: none; }

/* girando: trilho alto + palco "grudado" na tela */
.porque.girando { padding: 0; }
.porque.girando .porque-trilho { height: 400vh; }
@media (max-width: 1023px) { .porque.girando .porque-trilho { height: 320vh; } }
.porque.girando .porque-fixo {
  position: sticky; top: var(--topo-h);
  height: calc(100vh - var(--topo-h));
  height: calc(100svh - var(--topo-h));
  display: flex; align-items: center;
  overflow: hidden;
}
.porque.girando .porque-grade { display: grid; gap: 22px; align-content: center; width: 100%; }
.porque.girando .secao-titulo { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.8rem); }
.porque.girando .porque-palco { perspective: 1100px; }
.porque.girando .prisma {
  --altura: 330px;
  position: relative; height: var(--altura);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--altura) / -2)) rotateX(var(--giro, 0deg));
}
.porque.girando .face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: rotateX(calc(var(--n) * -90deg)) translateZ(calc(var(--altura) / 2));
}
.porque.girando .face-sombra { display: block; position: absolute; inset: 0; background: #000; opacity: calc((1 - var(--luz, 1)) * .85); pointer-events: none; }

/* marchas: no celular, uma fileira de 1ª–4ª acima do prisma */
.porque.girando .porque-marchas { display: flex; gap: 8px; margin-top: 4px; }
.marcha {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
  color: var(--texto-3); cursor: pointer;
  transition: color .3s, border-color .3s, background-color .3s, box-shadow .3s;
}
.marcha-num { font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.marcha-nome { display: none; font-size: .9rem; font-weight: 600; text-align: left; }
.marcha:hover { color: var(--texto); border-color: rgba(255, 182, 0, .45); }
.marcha[aria-current="true"] { color: var(--tinta); background: var(--amarelo); border-color: var(--amarelo); box-shadow: 0 0 22px rgba(255, 182, 0, .5); }

@media (max-width: 1023px) {
  .porque.girando .secao-intro { display: none; }
  .porque.girando .face { padding: 22px 20px; }
  .porque.girando .face-num { font-size: 2.6rem; }
}
@media (max-height: 700px) and (max-width: 1023px) {
  .porque.girando .prisma { --altura: 290px; }
  .porque.girando .face-texto { font-size: .92rem; }
}

/* computador: texto + câmbio em H à esquerda, outdoor à direita */
@media (min-width: 1024px) {
  .porque.girando .porque-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: center; }
  .porque.girando .prisma { --altura: 400px; }
  .porque.girando .face { padding: 40px 44px; }
  .porque.girando .porque-lado { display: grid; grid-template-columns: auto 1fr; column-gap: 26px; align-items: center; }
  .porque.girando .porque-lado > .secao-rotulo,
  .porque.girando .porque-lado > .secao-titulo,
  .porque.girando .porque-lado > .secao-intro { grid-column: 1 / -1; }
  .porque.girando .cambio { display: block; margin-top: 30px; }
  .porque.girando .porque-marchas { flex-direction: column; gap: 6px; margin-top: 30px; }
  .porque.girando .marcha { padding: 8px 16px 8px 12px; border-radius: 12px; }
  .porque.girando .marcha-nome { display: inline; }
}
.cambio svg { width: 118px; height: auto; overflow: visible; }
.cambio-grade { fill: none; stroke: #1B1F27; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }
.cambio-numeros text { font-family: var(--fonte); font-size: 15px; font-weight: 700; fill: var(--texto-3); transition: fill .3s; }
.porque[data-marcha="1"] .cambio-numeros text:nth-child(1),
.porque[data-marcha="2"] .cambio-numeros text:nth-child(2),
.porque[data-marcha="3"] .cambio-numeros text:nth-child(3),
.porque[data-marcha="4"] .cambio-numeros text:nth-child(4) { fill: var(--amarelo); }
.cambio-bola { fill: var(--amarelo); stroke: #FFE3A1; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(255, 182, 0, .9)); }
.cambio-bola.engatada { animation: engata .5s var(--ease); }
@keyframes engata { 40% { r: 18px; } }

/* =========================================================
   8. RESULTADOS — casos com infográficos
   ========================================================= */
.casos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 44px; perspective: 1400px; }
@media (min-width: 1024px) {
  .casos { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; margin-top: 60px; }
  .caso-funil { grid-column: 1 / -1; }
  /* caso da verba ocupa a linha inteira: texto à esquerda, gráfico à direita */
  .caso-verba { grid-column: 1 / -1; }
  .caso-verba .caso-cartao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "cab fig" "tit fig" "txt fig"; column-gap: 56px; align-items: start; }
  .caso-verba .caso-cabeca { grid-area: cab; }
  .caso-verba .caso-titulo { grid-area: tit; }
  .caso-verba .grafico-barras { grid-area: fig; margin: 0; }
  .caso-verba .caso-texto { grid-area: txt; }
}
.caso { transform-style: preserve-3d; }
.caso-cartao {
  position: relative; overflow: hidden; height: 100%;
  padding: 24px 22px 26px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(24, 27, 34, .9), rgba(11, 13, 17, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -40px rgba(0, 0, 0, .95);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .6s var(--ease), border-color .4s, box-shadow .4s;
}
.caso-cartao.inclinando { transition: transform .12s linear, border-color .4s, box-shadow .4s; }
.caso-cartao::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amarelo), transparent);
  box-shadow: 0 0 16px rgba(255, 182, 0, .8); opacity: .7;
}
.caso-cartao:hover { border-color: rgba(255, 182, 0, .4); }
.caso-cartao:hover .alerta-brilho { opacity: 1; }
@media (min-width: 768px) { .caso-cartao { padding: 30px 32px 32px; } }
.caso-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.caso-cabeca .a-confirmar { margin-left: 0; }
.caso-rotulo { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.caso-titulo { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.caso-texto { margin-top: 18px; font-size: .98rem; line-height: 1.6; color: var(--texto-2); max-width: 38em; }

/* Caso 1: barras 3D (frente + lateral + topo) */
.grafico-barras { margin: 26px 0 0; }
.barras-area {
  display: flex; align-items: flex-end; justify-content: center; gap: 22px;
  height: 250px; padding-top: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: repeating-linear-gradient(180deg, transparent 0 49px, rgba(255, 255, 255, .05) 49px 50px);
}
.barra-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; position: relative; }
.barra-valor { order: -1; margin-bottom: 14px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.barra-col.depois .barra-valor { color: var(--amarelo); text-shadow: 0 0 18px rgba(255, 182, 0, .45); }
.barra-col.antes .barra-valor { color: var(--texto-2); }
.barra-trilho { position: relative; width: 74px; height: calc(var(--alt, 1) * 170px); }
@media (max-width: 380px) {
  .barras-area { gap: 10px; }
  .barra-valor { font-size: .9rem; }
  .barra-trilho { width: 58px; }
  .barra::before { width: 14px; }
}
.barra-rotulo { position: absolute; top: 100%; margin-top: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); white-space: nowrap; }
.barra {
  --cor: #6A707B; --cor-lado: #4A4F58; --cor-topo: #8A909B;
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background:
    linear-gradient(to top, var(--cor) 0 calc(var(--corte, 1) * 100%), transparent 0),
    repeating-linear-gradient(45deg, var(--cor) 0 4px, transparent 4px 9px);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 1.3s var(--ease);
}
.barra::before { /* lateral */
  content: ''; position: absolute; left: 100%; top: 0; bottom: 0; width: 18px;
  background:
    linear-gradient(to top, var(--cor-lado) 0 calc(var(--corte, 1) * 100%), transparent 0),
    repeating-linear-gradient(45deg, var(--cor-lado) 0 4px, transparent 4px 9px);
  transform-origin: left bottom; transform: skewY(-35deg);
}
.barra::after { /* topo */
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 12.6px;
  background: var(--cor-topo); opacity: .55;
  transform-origin: left bottom; transform: skewX(-55deg);
}
.barra-col.depois .barra { --cor: var(--amarelo); --cor-lado: #B07E00; --cor-topo: #FFE3A1; filter: drop-shadow(0 0 14px rgba(255, 182, 0, .35)); transition-delay: .3s; }
.em-vista .barra { transform: scaleY(1); }
.barras-igual {
  align-self: center; margin-bottom: 30px;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18); color: var(--texto-2); font-weight: 700;
}
.grafico-barras figcaption { margin-top: 40px; font-size: .86rem; line-height: 1.5; color: var(--texto-2); text-align: center; }
.grafico-barras figcaption strong { color: var(--texto); font-weight: 600; }
.grafico-barras small { color: var(--texto-3); font-size: .78rem; }

/* Caso 2: funil animado */
@media (min-width: 768px) {
  .caso-funil .caso-cartao { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: center; }
}
@media (min-width: 1024px) { .caso-funil .caso-cartao { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; } }
.funil-botoes { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); }
.funil-botao {
  padding: 9px 18px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: .86rem; font-weight: 600; color: var(--texto-3);
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.funil-botao[aria-pressed="true"] { background: var(--amarelo); color: var(--tinta); box-shadow: 0 0 20px rgba(255, 182, 0, .45); }
.funil-legenda { margin-top: 12px; min-height: 1.5em; font-size: .9rem; color: var(--texto-2); }
.funil { margin: 26px auto 0; display: grid; place-items: center; }
@media (min-width: 768px) { .funil { margin: 0; } }
.funil-palco { position: relative; width: 300px; height: 260px; }
.faixa-funil {
  position: absolute; left: 0; z-index: 1; width: 300px; height: 50px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
  transition: background .5s;
}
.faixa-funil.fim { background: linear-gradient(180deg, rgba(255, 182, 0, .35), rgba(255, 182, 0, .15)); }
.funil.antes .faixa-funil:nth-child(3) { background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); }
.funil.antes .faixa-funil.fim { background: linear-gradient(180deg, rgba(255, 182, 0, .12), rgba(255, 182, 0, .05)); }
.rotulo-funil {
  position: absolute; left: 0; z-index: 3; width: 300px; height: 50px;
  display: grid; place-items: center; pointer-events: none;
}
.rotulo-funil span {
  padding: 3px 9px; border-radius: 7px;
  background: rgba(12, 14, 18, .88); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2);
  transition: color .5s;
}
.rotulo-funil.fim span { color: #FFF3D1; }
.funil.antes .rotulo-funil:nth-last-child(2) span, .funil.antes .rotulo-funil.fim span { color: var(--texto-3); }
.funil.depois .faixa-funil.fim { animation: vende 1.6s ease-in-out infinite; }
@keyframes vende { 50% { background: linear-gradient(180deg, rgba(255, 182, 0, .6), rgba(255, 182, 0, .3)); } }
.particula {
  position: absolute; left: 0; top: 0; z-index: 2; width: 9px; height: 9px; border-radius: 50%;
  background: #FFF3D1; box-shadow: 0 0 10px 2px rgba(255, 182, 0, .85);
  offset-rotate: 0deg; offset-distance: 0%;
  opacity: 0;
  animation: desce 2.6s linear infinite paused;
  animation-delay: calc(var(--i) * -.173s);
}
.particula:nth-child(3n+5) { offset-path: path("M150 0 L150 250"); }
.particula:nth-child(3n+6) { offset-path: path("M138 0 C138 120 158 170 146 250"); }
.particula:nth-child(3n+7) { offset-path: path("M162 0 C162 120 142 170 154 250"); }
/* antes: 2 de cada 3 leads vazam no atendimento (ilustrativo, sem número) */
.funil.antes .particula:nth-child(3n+6) { offset-path: path("M150 0 L150 140 C150 168 214 166 300 202"); background: #8A909B; box-shadow: none; }
.funil.antes .particula:nth-child(3n+7) { offset-path: path("M150 0 L150 140 C150 168 86 166 0 202"); background: #8A909B; box-shadow: none; }
.funil.ativo .particula { animation-play-state: running; }
@keyframes desce {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* =========================================================
   9. PORTFÓLIO — showroom com plataforma giratória
   ========================================================= */
.portfolio { overflow: hidden; }
.portfolio-cabeca { position: relative; z-index: 2; display: grid; gap: 24px; }
@media (min-width: 1024px) { .portfolio-cabeca { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.portfolio-filtros { display: inline-flex; flex-wrap: nowrap; max-width: 100%; gap: 4px; align-self: start; padding: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); justify-self: start; }
@media (min-width: 1024px) { .portfolio-filtros { align-self: end; justify-self: end; } }
.filtro { white-space: nowrap; padding: 9px 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--texto-3); transition: background-color .3s, color .3s, box-shadow .3s; }
.filtro:hover { color: var(--texto); }
.filtro[aria-pressed="true"] { background: var(--amarelo); color: var(--tinta); box-shadow: 0 0 20px rgba(255, 182, 0, .45); }

@media (max-width: 420px) { .filtro { padding: 8px 11px; font-size: .8rem; } }

/* sem animação (ou "menos movimento"): grade simples */
.showroom { margin-top: 36px; }
.pecas { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1024px) { .pecas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.plataforma, .showroom-controles .seta { display: none; }
.peca-cartao {
  position: relative; display: block; overflow: hidden;
  width: 100%; aspect-ratio: 808 / 632; padding: 0;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1);
  background: #0E1014; cursor: pointer;
  transition: border-color .4s, box-shadow .4s;
}
.peca-cartao img { width: 100%; height: 100%; object-fit: cover; display: block; }
.peca { position: relative; }
.peca-tag {
  position: absolute; left: 12px; top: 12px; z-index: 4; pointer-events: none;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(7, 8, 10, .78); border: 1px solid rgba(255, 255, 255, .12);
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2);
}
.peca[data-segmento="automotivo"] .peca-tag { color: var(--amarelo-luz); border-color: rgba(255, 182, 0, .45); }
.peca-cartao.vazia {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 182, 0, .1), transparent 60%),
    linear-gradient(180deg, #14171D, #0B0D11);
}
.peca-cartao.vazia::before { content: ''; position: absolute; inset: 10px; border-radius: 12px; border: 1px dashed rgba(255, 182, 0, .45); }
.peca-vazia-conteudo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 26px 22px; text-align: center; }
.peca-svg { width: 44px; height: 44px; fill: none; stroke: var(--amarelo); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 182, 0, .6)); }
.peca-vazia-tipo { font-size: 1rem; font-weight: 700; color: var(--texto); }
.peca-vazia-conteudo mark.pendente { font-size: .72rem; }
.peca-sombra { display: none; }
.legenda-peca { display: none; }

/* com animação: plataforma giratória 3D */
.anel-ativo .showroom { margin-top: 48px; }
@media (min-width: 1024px) { .anel-ativo .showroom { margin-top: 64px; } }
.anel-ativo .showroom-palco {
  --inclina: 14deg;
  position: relative; height: 340px;
  perspective: 1100px; perspective-origin: 50% 38%;
  touch-action: pan-y; cursor: grab; user-select: none;
}
.anel-ativo .showroom-palco:active { cursor: grabbing; }
@media (min-width: 1024px) { .anel-ativo .showroom-palco { height: 470px; perspective: 1500px; } }
.anel-ativo .carrossel {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--raio, 400px) * -1)) rotateX(var(--inclina)) rotateY(var(--giro, 0deg));
}
.anel-ativo .pecas { display: block; transform-style: preserve-3d; }
.anel-ativo .peca {
  --w: 250px; --h: 196px;
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2);
  width: var(--w); height: var(--h);
  transform: rotateY(var(--ang, 0deg)) translateZ(var(--raio, 400px));
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
@media (min-width: 1024px) { .anel-ativo .peca { --w: 340px; --h: 266px; } }
.anel-ativo .peca[hidden] { display: none; }
.anel-ativo .peca-cartao {
  height: 100%; aspect-ratio: auto;
  -webkit-box-reflect: below 10px linear-gradient(transparent 72%, rgba(0, 0, 0, .22));
}
.anel-ativo .peca-cartao img { transform: translateX(calc(var(--rel, 0) * -0.35px)) scale(1.14); }
.anel-ativo .peca-tag { opacity: calc(.25 + var(--luz, 1) * .75); }
.anel-ativo .peca-sombra { display: block; position: absolute; inset: 0; z-index: 3; background: #000; opacity: calc((1 - var(--luz, 1)) * .82); pointer-events: none; }
.anel-ativo .na-frente .peca-cartao { border-color: rgba(255, 182, 0, .7); box-shadow: 0 0 0 1px rgba(255, 182, 0, .3), 0 30px 80px -20px rgba(255, 182, 0, .45); }
.anel-ativo .plataforma {
  display: block; position: absolute; left: 50%; top: 50%;
  width: calc(var(--raio, 400px) * 2 + 180px); height: calc(var(--raio, 400px) * 2 + 180px);
  margin: calc(var(--raio, 400px) * -1 - 90px) 0 0 calc(var(--raio, 400px) * -1 - 90px);
  border-radius: 50%;
  border: 1px solid rgba(255, 182, 0, .4);
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 182, 0, .14) 0 1.2deg, transparent 1.2deg 22.5deg),
    repeating-radial-gradient(circle, transparent 0 44px, rgba(255, 255, 255, .06) 44px 45px),
    radial-gradient(circle, rgba(255, 182, 0, .16), rgba(10, 11, 14, .95) 70%);
  box-shadow: 0 0 80px rgba(255, 182, 0, .18), inset 0 0 60px rgba(255, 182, 0, .15);
  transform: translateY(calc(98px + 16px)) rotateX(90deg);
}
@media (min-width: 1024px) { .anel-ativo .plataforma { transform: translateY(calc(133px + 18px)) rotateX(90deg); } }

.showroom-controles { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; }
.anel-ativo .showroom-controles .seta {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03);
  color: var(--texto); cursor: pointer;
  transition: border-color .3s, background-color .3s, transform .2s;
}
.seta svg { width: 22px; height: 22px; }
.seta:hover { border-color: rgba(255, 182, 0, .7); background: rgba(255, 182, 0, .08); }
.seta:active { transform: scale(.94); }
.anel-ativo .legenda-peca { display: grid; justify-items: center; gap: 3px; min-width: 0; flex: 1; max-width: 460px; text-align: center; }
.legenda-num { font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--amarelo); font-variant-numeric: tabular-nums; }
.legenda-peca strong { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.legenda-peca strong mark.pendente { font-size: .74rem; }
.legenda-tipo { font-size: .82rem; color: var(--texto-3); }
.portfolio-behance { margin-top: 28px; text-align: center; }

/* ampliar */
.lupa {
  max-width: min(720px, calc(100% - 32px)); max-height: calc(100% - 32px);
  padding: 14px; border: 1px solid rgba(255, 182, 0, .35); border-radius: var(--raio);
  background: #0E1014; color: var(--texto);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}
.lupa::backdrop { background: rgba(4, 5, 7, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lupa img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: 10px; }
.lupa p { margin-top: 12px; font-size: .9rem; color: var(--texto-2); }
.lupa-link { margin-top: 12px; }
.lupa-link[hidden] { display: none; }
.lupa-fechar {
  position: absolute; right: 22px; top: 22px; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(7, 8, 10, .75); color: #fff; cursor: pointer;
}
.lupa-fechar svg { width: 20px; height: 20px; }

/* =========================================================
   10. HISTÓRIA — texto que acende, foto em visor, placas "vendido"
   ========================================================= */
.historia-grade { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .historia-grade { grid-template-columns: minmax(0, 1.4fr) minmax(0, .75fr); gap: 72px; align-items: start; }
  .retrato { position: sticky; top: calc(var(--topo-h) + 40px); justify-self: end; width: 100%; max-width: 360px; }
}
/* celular/tablet: título → texto → foto discreta ("assinatura") → placas */
@media (max-width: 1023px) {
  .historia-grade { display: flex; flex-direction: column; gap: 28px; }
  .historia-texto-col { display: contents; }
  .historia-texto-col > .secao-rotulo { order: -3; margin-bottom: -28px; }
  .historia-texto-col > .secao-titulo { order: -2; margin-bottom: -4px; }
  .historia-texto { order: -1; }
  .retrato { order: 0; display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: end; }
  .retrato figcaption { margin: 0 0 6px; }
  .retrato-moldura { border-radius: 16px; }
  .hud { width: 14px; height: 14px; }
  .hud-a, .hud-b { top: 8px; } .hud-c, .hud-d { bottom: 8px; } .hud-a, .hud-c { left: 8px; } .hud-b, .hud-d { right: 8px; }
  .placas-vendas { order: 1; margin-top: 0; }
}
.historia-texto {
  margin-top: 28px;
  font-size: clamp(1.25rem, .95rem + 1.25vw, 2.05rem);
  font-weight: 500; line-height: 1.42; letter-spacing: -.015em;
}
@media (max-width: 1023px) { .historia-texto { margin-top: 0; } }
.pi { color: #8A909B; transition: color .35s ease, text-shadow .35s ease; }
.pi.acesa { color: var(--texto); }
.pi-luz.acesa { color: var(--amarelo); text-shadow: 0 0 26px rgba(255, 182, 0, .35); }

/* foto em "visor": revelada por uma linha de luz */
.retrato { margin: 0; perspective: 1000px; }
.retrato-moldura {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: 22px;
  background: #0E1014;
  border: 1px solid rgba(255, 182, 0, .35);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 1), 0 0 60px -20px rgba(255, 182, 0, .3);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .6s var(--ease);
}
.retrato-moldura.inclinando { transition: transform .12s linear; }
.retrato-moldura img {
  position: absolute; inset: -7% 0; width: 100%; height: 114%; object-fit: cover;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s cubic-bezier(.65, 0, .35, 1);
}
.retrato-moldura::after { /* vinheta para a foto "sentar" no fundo escuro */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(7, 8, 10, .75)), radial-gradient(120% 80% at 50% 30%, transparent 60%, rgba(7, 8, 10, .5));
}
.retrato-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--amarelo-luz), transparent);
  box-shadow: 0 0 22px 4px rgba(255, 182, 0, .6);
  opacity: 0;
}
.revelado .retrato-moldura img { clip-path: inset(0 0 0 0); }
.revelado .retrato-scan { animation: escaneia 1.5s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes escaneia { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.hud { position: absolute; z-index: 2; width: 22px; height: 22px; border: 2px solid var(--amarelo); opacity: .9; }
.hud-a { left: 12px; top: 12px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.hud-b { right: 12px; top: 12px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.hud-c { left: 12px; bottom: 12px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.hud-d { right: 12px; bottom: 12px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.retrato figcaption { display: grid; gap: 2px; margin-top: 14px; }
.retrato figcaption strong { font-size: 1.05rem; font-weight: 700; }
.retrato figcaption span { font-size: .84rem; color: var(--texto-3); }

/* placas das primeiras vendas: giram para "vendido" */
.placas-vendas { margin-top: 36px; }
.placas-rotulo { margin-bottom: 14px; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.placas-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; perspective: 800px; }
.placa-venda { width: 150px; height: 74px; }
@media (max-width: 639px) {
  .placas-lista { flex-wrap: nowrap; gap: 8px; }
  .placa-venda { flex: 1 1 0; min-width: 0; width: auto; height: 64px; }
  .placas-lista .placa-frente strong { font-size: 1.05rem; }
  .placas-lista .placa-verso strong { font-size: .72rem; letter-spacing: .03em; }
  .placas-lista .placa-faixa { padding: 3px 8px; font-size: .52rem; }
}
@media (min-width: 1024px) { .placa-venda { width: 168px; height: 82px; } }
.placa-giro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--i) * .25s + .2s); }
.viradas .placa-giro { transform: rotateX(180deg); }
.placa-venda:hover .placa-giro { transform: rotateX(0deg); transition-delay: 0s; }
.placa-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 10px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.placa-faixa { padding: 3px 10px; font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.placa-face strong { flex: 1; display: grid; place-items: center; font-weight: 800; letter-spacing: .04em; }
.placa-frente { background: #F3F4F6; color: #0A0A0B; box-shadow: inset 0 0 0 2px #0A0A0B, inset 0 0 0 4px #F3F4F6, inset 0 0 0 5px #9AA0AA; }
.placa-frente .placa-faixa { background: #1F2A44; color: #fff; }
.placa-frente strong { font-size: 1.35rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; text-transform: uppercase; }
.placa-verso { transform: rotateX(180deg); background: var(--amarelo); color: var(--tinta); box-shadow: 0 0 30px rgba(255, 182, 0, .45); }
.placa-verso .placa-faixa { background: rgba(0, 0, 0, .14); }
.placa-verso strong { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .1em; }

/* =========================================================
   11. VISÃO — frase que se preenche, circuito, rota de expansão
   ========================================================= */
.visao { overflow: hidden; isolation: isolate; }
.circuito {
  position: absolute; z-index: -1; pointer-events: none;
  right: -30%; top: 6%; width: 120%; height: auto; opacity: .3;
  overflow: visible;
}
@media (min-width: 1024px) { .circuito { right: -4%; top: 4%; width: 62%; opacity: .55; } }
.circuito path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.circuito-sombra { stroke: rgba(255, 182, 0, .08); stroke-width: 22; }
.circuito-base { stroke: rgba(255, 255, 255, .08); stroke-width: 2; stroke-dasharray: 4 8; }
.circuito-luz { stroke: var(--amarelo-luz); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.circuito-pulso { stroke: #fff; stroke-width: 5; stroke-dasharray: .035 .965; stroke-dashoffset: 1; opacity: 0; transition: opacity .6s; }
.desenhado .circuito-pulso { opacity: 1; animation: volta-pista 5s linear infinite; }
@keyframes volta-pista { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.circuito-largada { stroke: #fff; stroke-width: 4; stroke-dasharray: 4 4; opacity: .8; }

.visao-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.visao-topo .secao-rotulo { margin: 0; }
.visao-topo .a-confirmar { margin-left: 0; }
.visao-titulo {
  --p: 1; --x1: 0vw; --x2: 0vw;
  margin-top: 22px;
  font-weight: 800;
  font-size: clamp(2.5rem, .6rem + 5.4vw, 6.6rem);
  line-height: .98;
  letter-spacing: -.05em;
}
.visao-linha { display: block; }
.visao-linha.hoje { color: var(--texto); transform: translateX(var(--x1)); }
.visao-linha.amanha { position: relative; transform: translateX(var(--x2)); }
@media (min-width: 1024px) { .visao-linha { white-space: nowrap; } }
.amanha-base { color: #8A909B; }
/* camada amarela revelada pela rolagem: da esquerda para a direita no computador (uma linha só)
   e de cima para baixo no celular (texto quebra em linhas, preenche na ordem de leitura).
   As bordas negativas deixam o brilho sair sem formar 'caixa'. */
.amanha-luz {
  position: absolute; left: 0; top: 0; width: 100%;
  color: var(--amarelo);
  text-shadow: 0 0 28px rgba(255, 182, 0, .3);
  clip-path: inset(-15% -15% calc((1 - var(--p)) * 115% - 15%) -15%);
}
@media (min-width: 1024px) {
  .amanha-luz { clip-path: inset(-40% calc((1 - var(--p)) * 110% - 10%) -40% -6%); }
}
@media (max-width: 1023px) { .amanha-luz { text-shadow: none; } }

/* rota de expansão */
.rota { position: relative; margin-top: 52px; max-width: 920px; }
@media (min-width: 1024px) { .rota { margin-top: 72px; } }
.rota-rotulo { height: 20px; line-height: 20px; margin-bottom: 18px; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.rota-trilho {
  position: absolute; left: 10%; right: 10%; top: 54.5px; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 10px, transparent 10px 18px);
}
.rota-trilho i {
  position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 182, 0, .5), var(--amarelo));
  box-shadow: 0 0 14px rgba(255, 182, 0, .8);
  transform: scaleX(1); transform-origin: left;
}
.rota-lista { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.parada { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.parada-ponto {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .2); background: #0E1014;
  transition: border-color .4s, background-color .4s, box-shadow .4s, transform .4s var(--ease);
}
.parada-ponto::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #3A4049; transition: background-color .4s, box-shadow .4s; }
.parada-nome { font-size: .8rem; font-weight: 600; color: var(--texto-3); transition: color .4s; white-space: nowrap; }
.parada-status { margin-top: -4px; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amarelo); }
.parada.acesa .parada-ponto { border-color: var(--amarelo); box-shadow: 0 0 0 4px rgba(255, 182, 0, .14), 0 0 20px rgba(255, 182, 0, .5); transform: scale(1.06); }
.parada.acesa .parada-ponto::after { background: var(--amarelo); box-shadow: 0 0 10px rgba(255, 182, 0, .9); }
.parada.acesa .parada-nome { color: var(--texto); }
.parada.hoje .parada-ponto { animation: pulsa-hoje 2.2s ease-out infinite; }
@keyframes pulsa-hoje { 0% { box-shadow: 0 0 0 0 rgba(255, 182, 0, .55), 0 0 20px rgba(255, 182, 0, .5); } 100% { box-shadow: 0 0 0 18px rgba(255, 182, 0, 0), 0 0 20px rgba(255, 182, 0, .5); } }
/* chegada: bandeira quadriculada */
.parada.chegada .parada-ponto::after { display: none; }
.parada-svg { width: 18px; height: 18px; fill: none; stroke: #6A707B; stroke-width: 1.6; stroke-linejoin: round; transition: stroke .4s; }
.parada.chegada.acesa .parada-ponto {
  background: repeating-conic-gradient(#0E1014 0 25%, #F3F4F6 0 50%) 50% / 12px 12px;
}
.parada.chegada.acesa .parada-svg { display: none; }
.cruzou .parada.chegada .parada-nome { color: var(--amarelo); text-shadow: 0 0 18px rgba(255, 182, 0, .5); }
@media (min-width: 1024px) {
  .parada-ponto { width: 44px; height: 44px; }
  .parada-nome { font-size: .95rem; }
  .rota-trilho { top: 58.5px; }
}
/* celular: nomes alternados acima e abaixo da linha, para não se espremerem */
@media (max-width: 639px) {
  .parada { display: grid; grid-template-rows: 18px auto auto auto; row-gap: 8px; justify-items: center; }
  .parada-ponto { grid-row: 2; width: 30px; height: 30px; }
  .parada-nome { grid-row: 3; font-size: .74rem; }
  .parada-status { grid-row: 4; }
  .parada:nth-child(even) .parada-nome { grid-row: 1; align-self: end; }
  .rota-trilho { top: 77.5px; }
}
.visao-cta { margin-top: 44px; }

/* =========================================================
   12. AVALIAÇÕES — carrossel 3D ("cover flow" com rolagem nativa)
   ========================================================= */
.avaliacoes { overflow: hidden; }
.aval-cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.aval-setas { display: flex; gap: 10px; }
.aval-setas .seta {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03);
  color: var(--texto); cursor: pointer;
  transition: border-color .3s, background-color .3s, transform .2s;
}
.aval-unico .aval-setas, .aval-unico .aval-pontos { display: none; }
.aval-trilho {
  --w: min(78vw, 420px);
  list-style: none;
  display: flex; gap: 22px;
  margin-top: 40px; padding: 30px calc(50% - var(--w) / 2) 40px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  perspective: 1200px;
}
.aval-trilho::-webkit-scrollbar { display: none; }
.aval-trilho:focus-visible { outline-offset: -4px; }
.aval {
  --d: 0; --ad: 0;
  flex: 0 0 var(--w);
  scroll-snap-align: center;
  transform-style: preserve-3d;
}
.aval-cartao {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  height: 100%; min-height: 300px;
  padding: 28px 26px 24px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(24, 27, 34, .95), rgba(11, 13, 17, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -40px rgba(0, 0, 0, .95);
  transform: rotateY(calc(var(--d) * -26deg)) translateZ(calc(var(--ad) * -90px)) rotateX(var(--tx, 0deg));
  opacity: calc(1 - var(--ad) * .45);
  transition: border-color .4s, box-shadow .4s;
}
.aval-cartao.inclinando { transform: rotateY(calc(var(--d) * -26deg + var(--ty, 0deg))) translateZ(calc(var(--ad) * -90px)) rotateX(var(--tx, 0deg)); }
.no-centro .aval-cartao { border-color: rgba(255, 182, 0, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px -30px rgba(255, 182, 0, .35); }
.aval-cartao:hover .alerta-brilho { opacity: 1; }
.aval-aspas { font-size: 5rem; font-weight: 800; line-height: .6; height: 34px; color: var(--amarelo); text-shadow: 0 0 30px rgba(255, 182, 0, .5); }
.aval-texto { margin: 0; flex: 1; }
.aval-texto p { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.aval-autor { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linha); }
.aval-autor strong { display: block; font-size: .92rem; font-weight: 600; }
.aval-autor span { display: block; font-size: .78rem; color: var(--texto-3); }
.aval-pendente .aval-cartao { border-style: dashed; border-color: rgba(255, 182, 0, .35); justify-content: center; align-items: flex-start; }
.aval-icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; border: 1px solid rgba(255, 182, 0, .45); background: rgba(255, 182, 0, .06); }
.aval-svg { width: 28px; height: 28px; fill: none; stroke: var(--amarelo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aval-titulo { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.aval-pend { font-size: .82rem; }
.aval-pontos { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.aval-pontos i { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .2); transition: width .35s var(--ease), background-color .35s; }
.aval-pontos i.ativo { width: 26px; background: var(--amarelo); box-shadow: 0 0 10px rgba(255, 182, 0, .7); }

/* =========================================================
   13. PERGUNTAS FREQUENTES — acordeão
   ========================================================= */
.faq-grade { display: grid; gap: 36px; }
@media (min-width: 1024px) {
  .faq-grade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
  .faq-lado { position: sticky; top: calc(var(--topo-h) + 40px); }
}
.faq-lista { display: grid; gap: 12px; perspective: 1200px; }
.faq-item {
  position: relative; overflow: hidden;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(22, 25, 31, .92), rgba(11, 13, 17, .92));
  transition: border-color .35s, box-shadow .35s;
}
.faq-item::before { /* varredura de luz ao abrir */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--amarelo); box-shadow: 0 0 14px rgba(255, 182, 0, .9);
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease);
}
.faq-item.aberto { border-color: rgba(255, 182, 0, .4); box-shadow: 0 24px 60px -30px rgba(255, 182, 0, .35); }
.faq-item.aberto::before { transform: scaleY(1); }
.faq-h { margin: 0; }
.faq-pergunta {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  width: 100%; padding: 20px 20px; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--texto);
}
.faq-num { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--texto-3); font-variant-numeric: tabular-nums; transition: color .3s; }
.faq-texto { font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); font-weight: 600; line-height: 1.35; }
.faq-mais { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); transition: border-color .3s, background-color .3s, transform .45s var(--ease); }
.faq-mais::before, .faq-mais::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
.faq-mais::after { transform: rotate(90deg); }
.faq-pergunta:hover .faq-mais { border-color: rgba(255, 182, 0, .6); }
.aberto .faq-num { color: var(--amarelo); }
.aberto .faq-mais { transform: rotate(180deg); border-color: var(--amarelo); background: var(--amarelo); color: var(--tinta); }
.aberto .faq-mais::after { transform: rotate(0deg); }
.faq-resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.aberto .faq-resposta { grid-template-rows: 1fr; }
.faq-resposta-int { overflow: hidden; padding: 0 20px 0 66px; }
.faq-resposta-int > :last-child { margin-bottom: 22px; }
.faq-resposta p { font-size: .98rem; line-height: 1.65; color: var(--texto-2); }
.faq-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; color: var(--amarelo); }
.faq-link::after { content: '→'; transition: transform .3s var(--ease); }
.faq-link:hover::after { transform: translateX(4px); }
@media (max-width: 639px) {
  .faq-pergunta { gap: 12px; padding: 18px 16px; }
  .faq-resposta-int { padding: 0 16px; }
}

/* =========================================================
   14. DIAGNÓSTICO — assistente com medidor
   ========================================================= */
.diagnostico { overflow: hidden; }
.diag-grade { display: grid; gap: 32px; }
@media (min-width: 1024px) { .diag-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; } }
.diag-medidor { position: relative; width: 240px; max-width: 70%; margin-top: 28px; }
.diag-medidor svg { width: 100%; height: auto; overflow: visible; }
.dm-arco { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 10; stroke-linecap: round; }
.dm-luz { fill: none; stroke: var(--amarelo); stroke-width: 10; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease); filter: drop-shadow(0 0 8px rgba(255, 182, 0, .7)); }
.dm-ponteiro { transform-origin: 120px 130px; transform: rotate(-90deg); transition: transform .9s cubic-bezier(.3, 1.5, .5, 1); }
.dm-ponteiro line { stroke: #FFF3D1; stroke-width: 4; stroke-linecap: round; }
.dm-ponteiro circle { fill: #14161B; stroke: var(--amarelo); stroke-width: 3; }
.dm-leitura { margin-top: 6px; text-align: center; font-weight: 800; font-size: 1.1rem; color: var(--amarelo); line-height: 1; }
.dm-leitura b { font-size: 2.2rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.dm-leitura small { display: block; margin-top: 6px; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); }
@media (max-width: 1023px) {
  /* celular: a pergunta vem logo depois do título; a barra do painel mostra o progresso */
  .diag-grade { display: flex; flex-direction: column; gap: 24px; }
  .diag-lado { display: contents; }
  .diag-lado > .secao-rotulo { margin-bottom: -24px; }
  .diag-lado > .secao-titulo { margin-bottom: -10px; }
  .diag-medidor { display: none; }
  .diag-painel { order: 1; }
  .diag-privacidade { order: 2; margin-top: 0 !important; }
}
.diag-privacidade { margin-top: 26px; padding-left: 26px; position: relative; font-size: .84rem; color: var(--texto-3); max-width: 34em; }
.diag-privacidade::before { content: ''; position: absolute; left: 0; top: .2em; width: 14px; height: 16px; border-radius: 3px 3px 7px 7px; border: 1.6px solid var(--texto-3); }

.diag-painel {
  position: relative;
  padding: 24px 20px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 182, 0, .35);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255, 182, 0, .09), transparent 60%),
    linear-gradient(180deg, rgba(24, 27, 34, .96), rgba(11, 13, 17, .97));
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 1), 0 0 60px -30px rgba(255, 182, 0, .35);
}
@media (min-width: 768px) { .diag-painel { padding: 32px 34px 28px; } }
.diag-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.diag-passo { flex: none; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amarelo); }
.diag-barra { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.diag-barra i { position: absolute; inset: 0; background: var(--amarelo); box-shadow: 0 0 10px rgba(255, 182, 0, .8); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.diag-palco { perspective: 1200px; min-height: 290px; }
.diag-cartao { animation: diag-entra .55s var(--ease); transform-origin: 50% 50%; }
@keyframes diag-entra { from { opacity: 0; transform: rotateY(calc(var(--dir) * 32deg)) translateX(calc(var(--dir) * 30px)); } }
.diag-pergunta { display: block; margin-bottom: 18px; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; outline: none; }
.diag-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.diag-fieldset legend { padding: 0; }
.diag-ajuda { margin: -8px 0 16px; font-size: .86rem; color: var(--texto-3); }
.diag-campo {
  width: 100%; padding: 16px 18px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04);
  color: var(--texto); font: inherit; font-size: 1.05rem; font-weight: 500;
  transition: border-color .3s, box-shadow .3s;
}
.diag-campo::placeholder { color: #8A909B; }
.diag-campo:focus { outline: none; border-color: var(--amarelo); box-shadow: 0 0 0 4px rgba(255, 182, 0, .15); }
.diag-opcoes { display: grid; gap: 10px; }
@media (min-width: 520px) { .diag-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.diag-opcao {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03);
  font-weight: 600; cursor: pointer;
  animation: diag-opcao .5s var(--ease) both; animation-delay: calc(var(--k) * 60ms + 120ms);
  transition: border-color .25s, background-color .25s, transform .2s;
}
@keyframes diag-opcao { from { opacity: 0; transform: translateY(10px); } }
.diag-opcao:hover { border-color: rgba(255, 182, 0, .6); transform: translateY(-2px); }
.diag-opcao input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); display: grid; place-items: center; transition: border-color .2s; }
.diag-opcao input::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--amarelo); transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.diag-opcao input:checked { border-color: var(--amarelo); }
.diag-opcao input:checked::after { transform: scale(1); }
.diag-opcao:has(input:checked) { border-color: var(--amarelo); background: rgba(255, 182, 0, .1); box-shadow: 0 0 24px -8px rgba(255, 182, 0, .6); }
.diag-opcao:has(input:focus-visible) { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.diag-lista { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: .92rem; }
.diag-lista dt { color: var(--texto-3); }
.diag-lista dd { margin: 0; font-weight: 600; }
.diag-foco { display: grid; gap: 2px; margin-bottom: 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 182, 0, .4); background: rgba(255, 182, 0, .07); }
.diag-foco small { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.diag-foco strong { color: var(--amarelo); font-size: 1rem; }
.diag-foco span { font-size: .88rem; color: var(--texto-2); }
.diag-previa small { display: block; margin-bottom: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.diag-bolha {
  white-space: pre-line;
  padding: 12px 14px; border-radius: 14px 14px 4px 14px;
  background: #1C2A22; border: 1px solid rgba(37, 211, 102, .3);
  font-size: .85rem; line-height: 1.55; color: #D9F7E4;
}
.diag-acoes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 22px; }
.diag-acoes .botao-primario { margin-left: auto; }
.diag-acoes .botao[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.diag-acoes .botao[hidden] { display: none; }

/* =========================================================
   15. RODAPÉ
   ========================================================= */
.rodape { position: relative; overflow: hidden; padding: 72px 0 0; border-top: 1px solid var(--linha); background: linear-gradient(180deg, #07080A, #0A0B0E); }
.rodape-grade { display: grid; gap: 36px; }
@media (min-width: 768px) { .rodape-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rodape-marca { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .rodape-grade { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } .rodape-marca { grid-column: auto; } }
.rodape-logo { display: inline-flex; color: var(--amarelo); }
.rodape-logo svg { height: 40px; width: auto; }
.rodape-frase { margin: 16px 0 20px; font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; }
.rodape-titulo { margin-bottom: 14px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.rodape-col ul { list-style: none; display: grid; gap: 4px; }
.rodape-col a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: var(--texto-2); transition: color .25s; }
.rodape-col a:hover { color: var(--amarelo); }
.rodape-col .icone { width: 18px; height: 18px; }
.rodape-cidade { color: var(--texto-2); white-space: pre-line; }
.rodape-mapa { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; color: var(--amarelo); }
.rodape-mapa::after { content: "↗"; }
.rodape-mapa[hidden] { display: none; }
.cookies a { color: var(--amarelo); text-decoration: underline; text-underline-offset: 3px; }
.rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 48px; padding: 22px 0 28px; border-top: 1px solid var(--linha); font-size: .82rem; color: var(--texto-3); }
.rodape-cookies { padding: 4px 0; border: 0; background: none; color: var(--texto-3); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rodape-cookies:hover { color: var(--texto); }
/* marca-d'água gigante com luz passando */
.rodape-marca-dagua { position: relative; height: clamp(90px, 22vw, 300px); margin-top: -10px; pointer-events: none; }
.rodape-marca-dagua svg { position: absolute; left: 50%; bottom: -14%; width: min(118vw, 1500px); height: auto; transform: translateX(-50%); overflow: visible; }
.rodape-marca-dagua path { fill: none; stroke-linejoin: round; }
.rodape-marca-dagua .md-base { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.rodape-marca-dagua .md-luz { stroke: var(--amarelo); stroke-width: 1.6; stroke-dasharray: 90 910; opacity: .8; }
.rodape-marca-dagua svg { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%); mask-image: linear-gradient(180deg, #000 30%, transparent 95%); }
.rodape-marca-dagua .md-luz { animation: contorno 9s linear infinite; }
@keyframes contorno { to { stroke-dashoffset: -1000; } }
.rodape-chegada { height: 14px; background: repeating-conic-gradient(#F3F4F6 0 25%, #0A0B0E 0 50%) 0 0 / 14px 14px; opacity: .85; }

/* =========================================================
   Aviso de cookies
   ========================================================= */
.cookies {
  position: fixed; z-index: 70;
  left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  max-width: 640px; margin: 0 auto;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 182, 0, .4);
  background: rgba(14, 16, 20, .97);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
  animation: aviso-cookies .45s var(--ease);
}
.cookies[hidden] { display: none; }
@keyframes aviso-cookies { from { opacity: 0; transform: translateY(20px); } }
.cookies p { flex: 1 1 260px; font-size: .88rem; line-height: 1.5; color: var(--texto-2); }
.cookies-botoes { display: flex; gap: 8px; }
.cookies .botao { --h: 42px; padding: 0 18px; font-size: .86rem; }
.cookies-aberto .whats-flutuante { opacity: 0; pointer-events: none; }

/* ---------- WhatsApp flutuante ---------- */
.whats-flutuante {
  position: fixed; z-index: 45;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amarelo); color: var(--tinta);
  box-shadow: 0 0 0 1px rgba(255, 182, 0, .4), 0 12px 32px -6px rgba(255, 182, 0, .55), 0 6px 20px rgba(0, 0, 0, .5);
  transition: transform .25s var(--ease), opacity .3s;
}
.whats-flutuante .icone { width: 26px; height: 26px; }
.whats-flutuante::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--amarelo);
  animation: onda 3.2s var(--ease) infinite 2.5s;
  opacity: 0;
}
@keyframes onda { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.whats-flutuante:hover { transform: scale(1.06); }
.menu-aberto .whats-flutuante { opacity: 0; pointer-events: none; }
.no-hero .whats-flutuante, .sem-flutuante .whats-flutuante { opacity: 0; transform: scale(.6); pointer-events: none; visibility: hidden; transition: transform .25s var(--ease), opacity .3s, visibility 0s .3s; }
@media (min-width: 1024px) { .whats-flutuante { right: 28px; bottom: 28px; width: 60px; height: 60px; } }

/* ---------- Aviso (toast) ---------- */
.aviso {
  position: fixed; z-index: 60;
  left: 50%; bottom: calc(88px + env(safe-area-inset-bottom));
  width: min(560px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 14px 18px;
  border-radius: var(--raio-p);
  border: 1px solid rgba(255, 182, 0, .45);
  background: rgba(14, 16, 20, .96);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  font-size: .88rem; line-height: 1.5; color: var(--texto-2);
}
.aviso strong { color: var(--texto); font-weight: 600; }
.aviso.mostra { animation: aviso-entra .35s var(--ease); }
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, 10px); } }

.sem-js { padding: 120px var(--gutter); text-align: center; color: var(--texto-2); }

/* seções fora da tela: animações infinitas pausadas (economiza bateria e processador) */
/* (seletores específicos: ".fora *" obrigava o navegador a recalcular a página inteira) */
.fora .led,
.fora .carro-pulso,
.fora .estrada-plano,
.fora .rastros i,
.fora .faixa-trilho,
.fora .pista3d-divisoria::before,
.fora .pista3d-varredura::before,
.fora .luz-alerta::after,
.fora .passo-valor::after,
.fora .anuncio-cta,
.fora .gerador-publicar::after,
.fora .feixe path,
.fora .totem-chao,
.fora .faixa-funil,
.fora .particula,
.fora .retrato-scan,
.fora .circuito-pulso,
.fora .parada-ponto,
.fora .rodape-marca-dagua .md-luz { animation-play-state: paused !important; }

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .palavra { opacity: 1; }
  .carro-pulso, .rastros { display: none; }
  .estrada-plano { animation: none; }
  .whats-flutuante::after { display: none; }
  .js [data-revela], .js [data-titulo-3d] .p3d { opacity: 1; transform: none; }
  /* rodovia parada: placas visíveis e sem cópias */
  .pista3d { -webkit-mask-image: none; mask-image: none; }
  .pista3d-plano { display: flex; flex-direction: column; width: auto; margin: 0 var(--gutter); transform: none; }
  .pista3d-pintura.base { order: -2; margin: 0 0 12px; }
  .pista3d-faixa.ida { order: -1; margin-bottom: 20px; }
  .faixa-trilho { width: auto; animation: none; }
  .faixa-grupo { flex-wrap: wrap; justify-content: center; padding: 0; }
  .faixa-grupo[aria-hidden="true"], .placa[aria-hidden="true"] { display: none; }
  .pista3d-pintura { padding: 0; text-align: center; }
  .pista3d-varredura, .pista3d-divisoria::before { display: none; }
  /* problema: luzes já acesas, painel plano */
  .alerta-cartao { transform: none; }
  .luz-alerta .acesa, .luz-alerta::after, .alerta-cartao::before { opacity: 1; animation: none !important; }
  .alerta-status { color: var(--amarelo-luz); animation: none !important; }
  .alerta-status i { background: var(--amarelo); animation: none !important; }
  .modulo-cartao { transform: none; }
  .caso-cartao { transform: none; }
  .aval-cartao { transform: none !important; opacity: 1; }
  .diag-cartao, .diag-opcao { animation: none !important; }
  .particula { display: none; }
}

/* Seções do fim da página: o navegador só calcula o layout quando a pessoa se aproxima
   (o tamanho estimado é trocado pelo real e memorizado depois da primeira vez). */
.avaliacoes, .faq, .diagnostico, .rodape { content-visibility: auto; }
.avaliacoes { contain-intrinsic-size: auto 900px; }
.faq { contain-intrinsic-size: auto 950px; }
.diagnostico { contain-intrinsic-size: auto 900px; }
.rodape { contain-intrinsic-size: auto 620px; }