/* =====================================================================
   Tráfego para loja de veículos — AZO Assessoria
   Landing de campanha. Nasce para o link da bio do Instagram, então a
   ordem de prioridade é: celular primeiro, botão do WhatsApp sempre à
   mão, e peso de página baixo (nenhuma biblioteca, fonte só a do guia).

   Os tokens são os mesmos do azoassessoria.com — tema claro, gradiente
   como único acento de cor, Inter no que se lê de perto e Sora só em
   título e número grande.
   ===================================================================== */
:root {
  --red: #EE2105;
  --magenta: #A20C73;
  --violet: #3D02B6;
  --gradient: linear-gradient(90deg, var(--red) 0%, var(--magenta) 50%, var(--violet) 100%);

  --bg: #F7F2EC;
  --bg-alt: #EFE8DF;
  --surface: #FFFFFF;
  --ink: #15121C;
  --ink-secondary: #5B5762;
  --ink-tertiary: #918D99;
  --line: #E6E2DC;
  --link: var(--magenta);

  --font-body: 'Inter', Arial, sans-serif;
  --font-display: 'Sora', Arial, sans-serif;

  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-6: 48px; --space-8: 64px; --space-12: 96px;

  --radius: 10px;
  --ease: cubic-bezier(.16,.84,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body { position: relative; overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--link); text-decoration: none; }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--ink); padding: 12px 18px; border-radius: var(--radius);
}
.pular:focus { left: var(--space-2); top: var(--space-2); }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 6px;
}

.coluna { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-3); }
.coluna--estreita { max-width: 800px; }

/* ---------- tipografia ---------- */
.sobrancelha {
  font-weight: 600; font-size: 12px; line-height: 18px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-secondary);
  margin: 0 0 var(--space-3); display: flex; align-items: center; gap: 10px;
}
.sobrancelha::before { content: ''; width: 22px; height: 1px; background: var(--magenta); opacity: .7; flex: none; }

.titulo {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 7.4vw, 104px); line-height: .95; letter-spacing: -.03em;
  margin: 0 0 var(--space-4);
}
.t2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 54px); line-height: 1.04; letter-spacing: -.026em;
  margin: 0 0 var(--space-4);
}
.grad, .pedra__n, .placa__num--grad, .conta__faixa {
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* A lanterna: o gradiente só acende nas letras por baixo do cursor.
   A máscara tem tamanho FIXO e o que muda é a posição dela. A primeira
   versão redesenhava o gradiente da máscara a cada movimento
   (`radial-gradient(... at var(--sx) var(--sy))`), o que repinta o texto
   inteiro: na dobra, com a esteira andando por baixo, isso derrubava a
   página para 12 quadros por segundo. Com mask-position o efeito é o
   mesmo e a medição dá 60. */
.spot-glow {
  position: absolute; inset: 0; display: block; pointer-events: none;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  /* ela herdaria o halo do título, e sombra de texto é pintada por cima do
     fundo recortado pelas letras — cobriria justamente o gradiente que a
     lanterna existe para mostrar */
  text-shadow: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 76%);
  mask-image: radial-gradient(closest-side, #000 0%, transparent 76%);
  -webkit-mask-size: 300px 300px; mask-size: 300px 300px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: calc(var(--sx, -9999px) - 150px) calc(var(--sy, -9999px) - 150px);
  mask-position: calc(var(--sx, -9999px) - 150px) calc(var(--sy, -9999px) - 150px);
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .spot-glow { display: none; } }

.linha-fina {
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--ink-secondary);
  max-width: 54ch; margin: 0 0 var(--space-6);
}
.linha-fina--centro { margin-left: auto; margin-right: auto; text-align: center; }

.selo { font-size: 13px; line-height: 20px; color: var(--ink-secondary); margin: var(--space-4) 0 0; }
.selo strong { color: var(--ink); font-weight: 600; }

/* ---------- botões ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 20px;
  padding: 12px 22px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { border-color: var(--violet); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(21,18,28,.06); }
.btn-primary { background: var(--gradient); border: none; color: #fff; }
.btn-primary:hover { box-shadow: 0 12px 26px rgba(162,12,115,.26); }
.btn-sm { padding: 9px 16px; min-height: 40px; font-size: 13px; }
.btn-lg { padding: 17px 34px; min-height: 56px; font-size: 16px; }
.zap::before {
  content: ''; width: 16px; height: 16px; flex: none;
  background: currentColor; opacity: .95;
  -webkit-mask: var(--zap-icon) center/contain no-repeat; mask: var(--zap-icon) center/contain no-repeat;
  --zap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.87 9.87 0 0 0 4.79 1.22h.01c5.46 0 9.9-4.45 9.9-9.91A9.85 9.85 0 0 0 12.04 2Zm5.8 14.03c-.25.7-1.44 1.33-2 1.37-.5.03-1.13.09-3.28-.86-2.53-1.12-4.13-3.77-4.26-3.94-.12-.17-1.01-1.4-1.01-2.67 0-1.27.66-1.9.9-2.16.24-.26.52-.33.7-.33.17 0 .35 0 .5.01.16.01.38-.06.59.45.21.51.72 1.77.79 1.9.06.12.1.27.02.44-.09.17-.13.27-.26.42-.13.15-.27.33-.39.45-.13.13-.27.27-.12.53.15.26.66 1.09 1.42 1.77.97.87 1.79 1.14 2.05 1.27.26.13.41.11.56-.07.15-.17.65-.76.82-1.02.17-.26.35-.21.59-.13.24.09 1.5.71 1.76.84.26.13.43.19.5.3.06.11.06.64-.19 1.34Z'/%3E%3C/svg%3E");
}
.acoes { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.acoes--centro { justify-content: center; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(247,242,236,.84); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.topo--colado { border-bottom-color: var(--line); }
.topo__marca { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 14px; }
.topo__marca img { display: block; border-radius: 6px; }
@media (max-width: 420px) { .topo__marca span { display: none; } }

/* =====================================================================
   A ESTEIRA — a dobra
   Três faixas de trabalho real correndo em sentidos alternados por trás
   do título. O esteira.js escreve dois números aqui:
     --cor  0 → 1   o quanto as faixas já ganharam cor (vem da rolagem)
     --alvo 0 → 1   o quanto o cursor está perto do meio (freia a esteira)
   O deslocamento de cada fita é escrito direto no transform pelo JS.
   Sem JS: faixas paradas, coloridas, título legível por cima do véu.
   ===================================================================== */
.palco {
  position: relative; overflow: hidden;
  min-height: min(92vh, 860px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 9vh, 120px) 0 clamp(72px, 11vh, 132px);
  /* sem JS o pátio já nasce colorido e parado; com JS ele começa lavado e
     acende, então o valor inicial muda para não dar um piscão de cor no
     carregamento */
  --cor: 1; --alvo: 0;
}
.temjs .palco { --cor: 0; }
.esteira {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1.6vw, 22px);
  pointer-events: none;
}
.faixa { overflow: hidden; }
.faixa__fita { display: flex; gap: clamp(10px, 1.6vw, 22px); width: max-content; will-change: transform; }
.lamina {
  display: block; position: relative; flex: none;
  width: clamp(168px, 20vw, 290px); aspect-ratio: 4 / 5;
  border-radius: 14px; overflow: hidden;
  background: #15121C; border: 1px solid rgba(21,18,28,.08);
  box-shadow: 0 26px 48px -28px rgba(21,18,28,.42);
}
.lamina img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* apagadas e sem cor no começo; a rolagem acende o pátio */
  /* o pátio nunca desaparece de todo: nasce meio lavado e acende até a
     cor cheia. Foi medido na tela — com grayscale(1) e opacidade baixa os
     carros viravam manchas brancas e a dobra perdia o assunto. */
  filter: grayscale(calc(.52 - .52 * var(--cor))) contrast(calc(.94 + .06 * var(--cor)));
  opacity: calc(.82 + .18 * var(--cor));
  transition: none;
}

/* o véu segura o contraste do título por cima das imagens: 4,5:1 garantido
   no meio, onde o texto vive, e transparente nas bordas, onde não há texto */
.palco__véu {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* a elipse central é a garantia de contraste do título e do texto por
     cima das fotos; as bordas ficam livres, é lá que o pátio se mostra */
  background:
    radial-gradient(58% 46% at 50% 50%, rgba(247,242,236,.97) 0%, rgba(247,242,236,.92) 52%, rgba(247,242,236,.4) 80%, rgba(247,242,236,0) 100%),
    linear-gradient(180deg, rgba(247,242,236,.8) 0%, rgba(247,242,236,0) 28%, rgba(247,242,236,0) 72%, rgba(247,242,236,.88) 100%);
}
.palco__texto { position: relative; z-index: 3; max-width: 1180px; margin: 0 auto; padding: 0 var(--space-3); }
/* o colchão de luz: em vez de lavar a tela inteira para o título ter
   contraste, a luz fica só atrás do texto — que mora à esquerda. O pátio
   segue visível à direita, que é onde ele tem serviço a fazer. */
/* no celular a coluna de texto ocupa a tela toda e o véu do palco, que é
   uma elipse larga, deixa a base da foto batendo no texto. Aqui a luz
   entra de novo, mas só nessa largura. */
@media (max-width: 860px) {
  .palco__texto::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    inset: -6% -14%;
    background: radial-gradient(74% 66% at 46% 50%,
      rgba(247,242,236,.9) 0%, rgba(247,242,236,.74) 48%,
      rgba(247,242,236,.3) 76%, rgba(247,242,236,0) 100%);
  }
}
.palco .linha-fina { max-width: 50ch; color: var(--ink); }
.palco .sobrancelha { color: var(--ink); }
/* o halo: cada letra carrega a sua própria luz de fundo. É o que deixa o
   pátio aparecer atrás do texto sem que a leitura sofra. */
.palco__texto .titulo,
.palco__texto .linha-fina,
.palco__texto .sobrancelha,
.palco__texto .selo {
  /* uma camada só. Três sombras em texto de 90px custavam ~15 ms de
     repintura por quadro e apareciam como travada quando algo se movia
     por cima. O resto do contraste vem do véu e do colchão. */
  text-shadow: 0 0 20px rgba(247,242,236,.94);
}
/* A linha do gradiente é pintada dentro das letras (background-clip:text),
   e text-shadow não aparece por baixo de texto pintado assim. O halo dela
   sai de drop-shadow, que trabalha na silhueta do que foi desenhado — a
   própria letra. Sem isso, "Carro vendido." fica fantasma em cima de foto
   clara, que foi exatamente o que aconteceu na primeira prova de tela. */
.palco__texto .titulo .grad {
  /* o halo do título herdaria como text-shadow, e sombra de texto é
     pintada DEPOIS do fundo recortado pelas letras: o creme cobria o
     gradiente e a linha ficava desbotada. Aqui ele é desligado e o halo
     vem só do filtro, que trabalha por trás. */
  text-shadow: none;
  filter:
    drop-shadow(0 0 7px rgba(247,242,236,.98))
    drop-shadow(0 0 18px rgba(247,242,236,.92))
    drop-shadow(0 0 40px rgba(247,242,236,.7));
}

/* a dica de rolagem, com o fio que respira */
.dica {
  position: absolute; left: 50%; bottom: 18px; z-index: 3; transform: translateX(-50%);
  margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-tertiary);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: opacity .4s ease;
}
.dica span { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, var(--ink-tertiary)); }
.palco--rolou .dica { opacity: 0; }
@media (max-width: 640px) { .dica { display: none; } }

/* ---------- a dobra no celular ----------
   Este site nasce para o link da bio: o clique vem do Instagram, de
   polegar, e o botão do WhatsApp tem que caber na primeira tela junto com
   o título. Por isso aqui a dobra deixa de ser uma tela cheia e passa a
   ter a altura do que precisa dizer. */
@media (max-width: 640px) {
  .palco { min-height: 0; padding: 40px 0 56px; }
  .titulo { font-size: clamp(34px, 10.4vw, 46px); }
  .palco .linha-fina { font-size: 16px; margin-bottom: var(--space-4); }
  .palco .acoes { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .palco .acoes .btn { width: 100%; }
  .lamina { width: clamp(128px, 38vw, 190px); border-radius: 12px; }
  .esteira { gap: 10px; }
  .palco .selo { margin-top: var(--space-3); }
}

/* ---------- seções ---------- */
.secao { padding: clamp(64px, 9vw, 130px) 0; }
.secao--aperto { background: var(--bg-alt); }
.secao--prova { padding-top: clamp(56px, 8vw, 110px); }
.colunas-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); }
@media (max-width: 760px) { .colunas-2 { grid-template-columns: 1fr; } }

.keyline { display: block; width: 100%; height: 1px; overflow: visible; margin: 0 0 var(--space-8); }
.keyline path {
  fill: none; stroke: var(--line); stroke-width: 1;
  stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.6s var(--ease);
}
.keyline.in path { stroke-dashoffset: 0; }

/* entrada em cascata */
.temjs .rise { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.temjs .in .rise, .temjs .in.rise { opacity: 1; transform: none; }
.temjs .in .rise:nth-child(1) { transition-delay: 0s; }
.temjs .in .rise:nth-child(2) { transition-delay: .07s; }
.temjs .in .rise:nth-child(3) { transition-delay: .14s; }
.temjs .in .rise:nth-child(4) { transition-delay: .21s; }
.temjs .in .rise:nth-child(5) { transition-delay: .28s; }
.temjs .in .rise:nth-child(6) { transition-delay: .35s; }
.temjs .in .rise:nth-child(7) { transition-delay: .42s; }
.temjs .in .rise:nth-child(8) { transition-delay: .48s; }
/* a dobra entra sozinha no carregamento, sem esperar rolagem */
.temjs .palco__texto .rise { opacity: 1; transform: none; transition-delay: 0s; }
.temjs .palco--entrou .palco__texto .rise { opacity: 1; transform: none; }
.temjs .palco:not(.palco--entrou) .palco__texto .rise { opacity: 0; transform: translateY(24px); }
.temjs .palco--entrou .palco__texto .rise:nth-child(2) { transition-delay: .08s; }
.temjs .palco--entrou .palco__texto .rise:nth-child(3) { transition-delay: .18s; }
.temjs .palco--entrou .palco__texto .rise:nth-child(4) { transition-delay: .26s; }
.temjs .palco--entrou .palco__texto .rise:nth-child(5) { transition-delay: .34s; }

/* ---------- o problema ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }
.pedra {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--space-4) var(--space-3) var(--space-4);
  transition: border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
/* a lanterna dos cartões: um brilho fraco segue o cursor dentro do cartão */
.pedra::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none; opacity: 0;
  background: radial-gradient(240px 240px at var(--sx, 50%) var(--sy, 50%), rgba(162,12,115,.12), transparent 70%);
  transition: opacity .3s ease;
}
.pedra:hover { border-color: rgba(61,2,182,.34); transform: translateY(-3px); box-shadow: 0 18px 38px -24px rgba(21,18,28,.3); }
.pedra:hover::before { opacity: 1; }
.pedra__n { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; display: block; margin-bottom: var(--space-3); }
.pedra h3 { font-size: 19px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.01em; }
.pedra p { font-size: 15px; line-height: 1.6; color: var(--ink-secondary); margin: 0; }

/* ---------- a prova ---------- */
.placas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
@media (max-width: 860px) { .placas { grid-template-columns: 1fr; } }
.placa {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column; gap: 6px;
}
.placa--destaque { background: #15121C; border-color: #15121C; }
.placa--destaque .placa__topo, .placa--destaque .placa__verba { color: rgba(245,245,245,.72); }
.placa--destaque .placa__pe { color: rgba(245,245,245,.86); }
.placa__topo { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-tertiary); margin: 0; }
.placa__verba { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.placa__verba span { font-weight: 400; color: var(--ink-tertiary); }
.placa__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 7vw, 92px); line-height: 1; letter-spacing: -.04em;
  margin: 6px 0 2px; font-variant-numeric: tabular-nums;
}
.placa--destaque .placa__num { font-size: clamp(42px, 5.4vw, 72px); }
.placa__pe { font-size: 14px; line-height: 1.5; color: var(--ink-secondary); margin: 0; }
.placa__pe strong { color: var(--ink); }
.placa--destaque .placa__pe strong { color: #fff; }

.ressalva {
  font-size: 13px; line-height: 1.65; color: var(--ink-tertiary);
  max-width: 76ch; margin: var(--space-6) 0 0; padding-left: var(--space-2);
  border-left: 2px solid var(--line);
}

/* ---------- depoimentos ---------- */
.depos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
@media (max-width: 900px) { .depos { grid-template-columns: 1fr; max-width: 420px; } }
/* fachada: o vídeo do Instagram só carrega no clique. Três iframes de
   largada custariam mais que o site inteiro e a campanha paga por isso. */
.depo {
  position: relative; display: block; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: #15121C; color: #fff;
  aspect-ratio: 9 / 13; cursor: pointer; padding: 0; width: 100%; text-align: left;
  font-family: var(--font-body);
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.depo:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(21,18,28,.4); }
.depo__fundo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* o quadro sobe: a capa é 9:16 e o cartão é mais baixo, então o corte
     tira a barra de legenda queimada no pé do vídeo e deixa o rosto no
     meio, em vez de cortar a cabeça */
  object-position: center 28%;
  opacity: .94;
  transition: transform .5s var(--ease);
}
.depo:hover .depo__fundo { transform: scale(1.04); }
.depo__gradiente {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 46% at 50% 44%, rgba(162,12,115,.16) 0%, transparent 70%),
    linear-gradient(180deg, rgba(21,18,28,.12) 0%, rgba(21,18,28,.06) 36%, rgba(21,18,28,.82) 72%, rgba(21,18,28,.97) 100%);
}
.depo__texto { position: absolute; inset: auto 0 0 0; padding: var(--space-3); z-index: 2; }
.depo__quem { display: block; font-weight: 600; font-size: 15px; margin: 0 0 4px; }
.depo__o-que { display: block; font-size: 13px; line-height: 1.5; color: rgba(245,245,245,.78); margin: 0; }
.depo__play {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); z-index: 2;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--gradient); display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(162,12,115,.45);
  transition: transform .25s var(--ease);
}
.depo:hover .depo__play { transform: translate(-50%,-50%) scale(1.08); }
.depo__play::after { content: ''; width: 0; height: 0; margin-left: 4px; border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.depo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.depo--tocando { cursor: default; }
.depo--tocando .depo__fundo, .depo--tocando .depo__gradiente, .depo--tocando .depo__texto, .depo--tocando .depo__play { display: none; }

/* ---------- prints de conversa ---------- */
.conversas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.conversa {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
}
.conversa img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.conversa__pe { padding: var(--space-3); font-size: 14px; line-height: 1.55; color: var(--ink-secondary); margin: 0; }
.conversa__pe strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
/* moldura vazia enquanto o print não chegou: melhor um espaço marcado do
   que uma imagem quebrada no ar */
.conversa--vaga {
  display: grid; place-items: center; min-height: 260px; text-align: center;
  border-style: dashed; color: var(--ink-tertiary); font-size: 13px; padding: var(--space-4);
}

/* ---------- passos ---------- */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.passo { border-bottom: 1px solid var(--line); padding: var(--space-4) 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(16px, 4vw, 56px); align-items: start; }
@media (max-width: 760px) { .passo { grid-template-columns: 1fr; gap: 10px; } }
.passo h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.02em; margin: 0; display: flex; gap: 14px; align-items: baseline; }
.passo h3 span { font-size: 13px; font-family: var(--font-body); font-weight: 600; color: var(--ink-tertiary); letter-spacing: 0; }
.passo p { font-size: 16px; line-height: 1.65; color: var(--ink-secondary); margin: 0; }

/* ---------- a conta ---------- */
.secao--conta { background: var(--bg-alt); }
.secao--conta .t2, .secao--conta .sobrancelha { text-align: center; }
.secao--conta .sobrancelha { justify-content: center; }
.conta {
  max-width: 720px; margin: var(--space-6) auto 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 30px 60px -40px rgba(21,18,28,.3);
  text-align: center;
}
.conta__rotulo { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tertiary); margin-bottom: 8px; }
.conta__verba { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; margin-bottom: var(--space-3); font-variant-numeric: tabular-nums; }
.conta__range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.conta__range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--red), var(--magenta), var(--violet)); }
.conta__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--magenta); box-shadow: 0 4px 14px rgba(21,18,28,.22); }
.conta__range::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--red), var(--magenta), var(--violet)); }
.conta__range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--magenta); }
.conta__escala { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-tertiary); margin-bottom: var(--space-4); }
.conta__saida { padding: var(--space-4) 0 var(--space-2); border-top: 1px solid var(--line); }
.conta__faixa { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 8vw, 88px); line-height: 1; letter-spacing: -.04em; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.conta__legenda { font-size: 15px; color: var(--ink-secondary); margin: 0; }
.conta__nota { font-size: 12.5px; line-height: 1.6; color: var(--ink-tertiary); margin: var(--space-3) 0 var(--space-4); }

/* ---------- galeria ---------- */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
@media (max-width: 860px) { .galeria { grid-template-columns: 1fr; } }
.quadro {
  display: block; border-radius: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
.quadro img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.quadro:hover { transform: translateY(-4px); border-color: rgba(61,2,182,.3); box-shadow: 0 26px 50px -30px rgba(21,18,28,.36); }
.quadro:hover img { transform: scale(1.035); }
.quadro--parado { cursor: default; }
.quadro--parado:hover { transform: none; border-color: var(--line); box-shadow: none; }
.quadro--parado:hover img { transform: none; }
.quadro__pe { display: block; padding: var(--space-3); font-size: 14px; color: var(--ink-secondary); border-top: 1px solid var(--line); }
.quadro__pe strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* ---------- para quem ---------- */
.secao--filtro { background: var(--bg-alt); }
.lado__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.02em; margin: 0 0 var(--space-3); }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
.lista li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
}
.lista--sim li::after { content: ''; position: absolute; left: 5px; top: 9px; width: 8px; height: 4px; border-left: 2px solid var(--magenta); border-bottom: 2px solid var(--magenta); transform: rotate(-45deg); }
.lista--nao li::after { content: ''; position: absolute; left: 7px; top: 12px; width: 5px; height: 1px; background: var(--ink-tertiary); box-shadow: 0 0 0 0 transparent; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--space-3) 36px var(--space-3) 0; position: relative;
  font-weight: 600; font-size: 17px; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--ink-tertiary); border-bottom: 2px solid var(--ink-tertiary);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details[open] summary { color: var(--magenta); }
.faq p { font-size: 15.5px; line-height: 1.7; color: var(--ink-secondary); margin: 0 0 var(--space-3); max-width: 68ch; }

/* ---------- fechamento ---------- */
.fecho { padding: clamp(80px, 12vw, 160px) 0; text-align: center; background: var(--bg-alt); }
.fecho__t {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -.03em;
  margin: 0 0 var(--space-4);
}

/* ---------- rodapé ---------- */
.rodape { padding: var(--space-6) 0 calc(var(--space-6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.rodape__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-size: 13px; color: var(--ink-tertiary); }
.rodape__linha p { margin: 0; display: flex; align-items: center; gap: 8px; }
.rodape__linha img { border-radius: 5px; }

/* ---------- a barra do celular ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px var(--space-3) calc(10px + env(safe-area-inset-bottom));
  background: rgba(247,242,236,.9); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  transform: translateY(120%); transition: transform .35s var(--ease);
}
.barra .btn { width: 100%; }
.barra--vem { transform: none; }
@media (min-width: 861px) { .barra { display: none; } }
@media (max-width: 860px) { .rodape { padding-bottom: 96px; } }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .temjs .rise, .temjs .palco:not(.palco--entrou) .palco__texto .rise { opacity: 1 !important; transform: none !important; }
  .keyline path { transition: none; stroke-dashoffset: 0; }
  .quadro:hover img, .pedra:hover, .quadro:hover, .btn:hover { transform: none; }
  .barra { transition: none; }
}