/* =========================================================
   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'); }

/* ---------- 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', 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; }
.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.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(3, 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; }
/* 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 img { height: 34px; width: auto; max-width: 160px; object-fit: contain; filter: brightness(0) invert(1); opacity: .82; }
.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; }
.placa:hover img { opacity: 1; }

/* pista do fundo (outros segmentos): menor e mais apagada */
.pista3d-faixa.volta .placa { height: 52px; padding: 0 20px; opacity: .72; }
.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: 44px; max-width: 200px; }
  .faixa-grupo { gap: 26px; padding-right: 26px; }
  .pista3d-faixa.volta .placa { height: 62px; padding: 0 28px; }
  .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);
}

/* =========================================================
   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; }

/* "em breve": card holográfico */
.futuro {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  margin-top: 20px;
  padding: 22px;
  border-radius: var(--raio);
  background: linear-gradient(135deg, rgba(255, 182, 0, .08), rgba(255, 255, 255, .03) 50%, rgba(255, 182, 0, .04));
  isolation: isolate;
}
.futuro::before { /* borda que brilha correndo */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: linear-gradient(110deg, rgba(255, 182, 0, .2) 0%, rgba(255, 182, 0, .2) 35%, #FFE3A1 48%, rgba(235, 240, 255, .95) 52%, rgba(255, 182, 0, .2) 65%, rgba(255, 182, 0, .2) 100%);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: holograma 4.5s linear infinite;
}
.futuro::after { /* linhas de varredura */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px);
}
@keyframes holograma { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.futuro-icone {
  position: relative;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: var(--amarelo);
}
.futuro-icone .icone { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(255, 182, 0, .6)); }
.digitando {
  position: absolute; right: -10px; top: -10px;
  display: flex; gap: 3px; padding: 6px 8px; border-radius: 12px 12px 12px 3px;
  background: #1C2028; border: 1px solid rgba(255, 255, 255, .12);
}
.digitando i { width: 5px; height: 5px; border-radius: 50%; background: var(--amarelo-luz); animation: digita 1.2s ease-in-out infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digita { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-3px); opacity: 1; } }
.futuro-selo {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #E9ECF2;
}
.futuro-selo .led { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15), 0 0 12px rgba(255, 255, 255, .9); }
.futuro h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 6px; }
.futuro p { font-size: .92rem; color: var(--texto-2); }
.futuro .futuro-pendente { margin-top: 8px; font-size: .8rem; }
@media (max-width: 767px) { .futuro { grid-template-columns: 1fr; align-items: start; } }
@media (min-width: 768px) { .futuro { padding: 26px 30px; gap: 26px; } .futuro h3 { font-size: 1.4rem; } }
@media (max-width: 639px) {
  .modulo-cartao { padding: 20px 18px 12px; }
  .modulo-itens li { padding: 11px 4px 11px 2px; gap: 10px; }
  .modulo-itens strong { font-size: .96rem; }
  .modulo-itens span { font-size: .84rem; }
}
.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; }
.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; 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 { 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); }
.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 3: velocímetro do ROAS */
.gauge { position: relative; margin: 18px auto 0; max-width: 360px; padding-bottom: 78px; perspective: 700px; }
.gauge svg { width: 100%; height: auto; overflow: visible; transform: rotateX(14deg); transform-origin: 50% 100%; }
.gauge-arco { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 10; stroke-linecap: round; }
.gauge-zona { fill: none; stroke: var(--amarelo); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255, 182, 0, .7)); }
.gauge-marcas path { stroke: rgba(255, 255, 255, .3); stroke-width: 2; stroke-linecap: round; }
.gauge-marcas path.zona { stroke: rgba(255, 182, 0, .8); }
.gauge-marcas text { font-family: var(--fonte); font-size: 13px; font-weight: 600; fill: var(--texto-3); }
.gauge-ponteiro { transform-origin: 150px 160px; transition: transform 1.9s cubic-bezier(.25, 1.55, .45, 1); }
.gauge-ponteiro line { stroke: #FFF3D1; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 182, 0, .9)); }
.gauge-ponteiro circle { fill: #14161B; stroke: var(--amarelo); stroke-width: 3; }
.gauge-leitura {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 2px;
  line-height: 1;
}
.gauge-num { font-size: 3.4rem; font-weight: 800; letter-spacing: -.05em; color: var(--texto); text-shadow: 0 0 24px rgba(255, 182, 0, .5); font-variant-numeric: tabular-nums; }
.gauge-x { font-size: 1.6rem; font-weight: 800; color: var(--amarelo); }
.gauge-leitura small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-size: .66rem; font-weight: 700; letter-spacing: .2em; color: var(--texto-3); }
.caso-roas .caso-texto { margin-top: 26px; }

/* 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; }
}

/* ---------- Marcador de lugar das próximas seções ---------- */
.em-breve { padding: 72px 0 120px; border-top: 1px solid var(--linha); scroll-margin-top: var(--topo-h); }
.em-breve-rotulo { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 16px; }
.em-breve-lista { list-style: none; counter-reset: s 8; display: grid; gap: 8px; color: var(--texto-3); font-size: .95rem; }
.em-breve-lista li { counter-increment: s; padding: 12px 16px; border: 1px dashed var(--linha-forte); border-radius: var(--raio-p); scroll-margin-top: calc(var(--topo-h) + 16px); }
.em-breve-lista li::before { content: counter(s) ". "; color: var(--texto-2); font-weight: 600; }

/* ---------- 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; }
@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) */
.fora *, .fora *::before, .fora *::after { 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; }
  .particula { display: none; }
}