/* ═══════════════════════════════════════════════════════════
   LP V2 — blocos que só as campanhas novas usam

   Módulos, integrações, etapas, mockups, "também fazemos" e a
   animação de entrada. Separado de lp.css para a landing antiga
   não baixar CSS de seções que ela não pinta.

   Herda as variáveis do crítico em _base.php (--laranja, --tinta,
   --creme, --linha, --f-tit, --f-txt, --raio). Nada de cor nova:
   a página precisa parecer a mesma marca, só mais moderna.
   ═══════════════════════════════════════════════════════════ */

/* ── Entrada ao rolar ────────────────────────────────────────
   O IntersectionObserver em lp.js acrescenta .visivel. Sem JS, o
   conteúdo aparece normalmente: a regra parte do estado visível e
   só esconde quando a classe .js-anim está no <html>. */
.js-anim .anim{opacity:0;transform:translateY(16px)}
.js-anim .anim.visivel{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.8,.3,1)}

@media (prefers-reduced-motion:reduce){
  .js-anim .anim,.js-anim .anim.visivel{opacity:1;transform:none;transition:none}
}

/* ── Seção com respiro maior ─────────────────────────────── */
.v2-secao{padding:56px 0}
/* A margem negativa aproxima a linha do título, que vem com 32px de
   folga embaixo. Ela só vale quando a linha é IRMÃ IMEDIATA do
   título: solta, sem o seletor, ela subia por cima do h2 em qualquer
   seção onde o título tivesse folga menor. Foi o que aconteceu na
   faixa escura, e o subtítulo ficou ilegível atrás do h2. */
.v2-linha{
  text-align:center;max-width:620px;margin:0 auto 34px;
  color:var(--cinza);font-size:16.5px
}
.tit-secao + .v2-linha{margin-top:-20px}
.v2-fecho{
  text-align:center;max-width:640px;margin:30px auto 0;
  color:var(--cinza);font-size:15.5px
}

/* ── Grade de módulos ────────────────────────────────────────
   auto-fit com minmax: uma coluna no celular, duas no tablet,
   três ou quatro no desktop, sem media query para cada degrau. */
.v2-grade{
  list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr))
}
.v2-card{
  background:var(--branco);border:1px solid var(--linha);
  border-radius:12px;padding:22px 20px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.v2-card:hover{
  transform:translateY(-3px);border-color:#D8CEC0;
  box-shadow:0 2px 0 rgba(26,26,26,.04)
}
.v2-card h3{font-size:17.5px;margin:14px 0 6px}
.v2-card p{margin:0;color:var(--cinza);font-size:15.5px;line-height:1.55}

.v2-card-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:11px;
  background:#FFEBD8;
  color:#B4460B
}

/* ── Integrações: faixa escura ───────────────────────────────
   O escuro separa o bloco do resto e dá o descanso visual que uma
   página longa precisa para não parecer um rolo só. */
.v2-faixa-escura{
  background:#1A1A1A;color:#F3F1EE;padding:54px 0
}
.v2-faixa-escura .tit-secao{color:#FFF}
.v2-faixa-escura .v2-linha{color:#BDB6AD}

.v2-integra{
  list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))
}
.v2-integra li{
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  border-radius:11px;padding:16px 18px
}
.v2-integra-ic{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;
  background:rgba(249,115,22,.17);color:#FDBA74
}
.v2-integra strong{display:block;font-family:var(--f-tit);font-size:16px;margin-bottom:3px}
.v2-integra span{display:block;color:#BDB6AD;font-size:14.5px;line-height:1.5}

/* ── Etapas ──────────────────────────────────────────────────
   O traço vertical liga os números e mostra que é um caminho com
   fim, não uma lista solta de promessas. */
.v2-etapas{list-style:none;margin:0 auto;padding:0;max-width:720px;position:relative}
.v2-etapas li{display:flex;gap:18px;padding-bottom:26px;position:relative}
.v2-etapas li:last-child{padding-bottom:0}
.v2-etapas li::before{
  content:"";position:absolute;left:19px;top:44px;bottom:2px;width:2px;
  background:var(--linha)
}
.v2-etapas li:last-child::before{display:none}
.v2-etapa-n{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--laranja);color:var(--tinta);
  font-family:var(--f-tit);font-weight:700;font-size:17px;
  position:relative;z-index:1
}
.v2-etapas h3{font-size:18px;margin:8px 0 5px}
.v2-etapas p{margin:0;color:var(--cinza);font-size:15.5px;line-height:1.55}

/* ── Também fazemos ─────────────────────────────────────────
   As únicas saídas da página. Só aqui, e só no fim. */
.v2-tambem{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))
}
.v2-tambem a{
  display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:center;
  background:var(--creme);border:1px solid var(--linha);border-radius:12px;
  padding:18px 20px;text-decoration:none;color:var(--tinta);
  transition:border-color .18s ease,transform .18s ease
}
.v2-tambem a:hover{border-color:var(--laranja);transform:translateY(-2px)}
.v2-tambem strong{font-family:var(--f-tit);font-size:16.5px}
.v2-tambem-txt{grid-column:2;color:var(--cinza);font-size:14.5px;line-height:1.45}
.v2-tambem-seta{
  grid-row:1 / span 2;grid-column:3;
  font-size:20px;color:var(--laranja-txt);transition:transform .18s ease
}
.v2-tambem a:hover .v2-tambem-seta{transform:translateX(4px)}

/* ── Preço "sob orçamento" ──────────────────────────────── */
.plano-sob{font-size:clamp(26px,5.5vw,34px);letter-spacing:-.02em}

/* ── Números que contam ao aparecer ──────────────────────── */
.v2-numeros{
  list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));text-align:center
}
.v2-numeros li{
  background:var(--branco);border:1px solid var(--linha);
  border-radius:12px;padding:18px 12px
}
.v2-num{
  display:block;font-family:var(--f-tit);font-weight:700;
  font-size:clamp(26px,5vw,34px);line-height:1;color:var(--laranja-txt)
}
.v2-num-rot{display:block;margin-top:6px;font-size:14px;color:var(--cinza)}

/* ── Mockups em CSS ──────────────────────────────────────────
   Desenhados com div e cor chapada, sem imagem: um PNG de dashboard
   com texto dentro fica borrado no retina e pesa mais que a página
   inteira. Aqui é vetor que escala e não baixa nada.               */
.v2-mock{
  --barra:#E9E4DC;
  background:var(--branco);border:1px solid var(--linha);
  border-radius:12px;box-shadow:0 3px 0 rgba(26,26,26,.06);
  overflow:hidden;max-width:420px;width:100%
}
.v2-mock-topo{
  display:flex;align-items:center;gap:6px;
  padding:10px 12px;background:#F4F0EA;border-bottom:1px solid var(--linha)
}
.v2-mock-topo i{width:9px;height:9px;border-radius:50%;background:#D9D2C8;display:block}
.v2-mock-url{
  flex:1;margin-left:6px;height:16px;border-radius:99px;background:var(--branco);
  border:1px solid var(--linha)
}
.v2-mock-corpo{padding:16px;display:grid;gap:10px}
.v2-mock-linha{height:10px;border-radius:99px;background:var(--barra)}
.v2-mock-linha.curta{width:52%}
.v2-mock-linha.media{width:74%}
.v2-mock-linha.laranja{background:var(--laranja);width:38%}
.v2-mock-cartoes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0}
.v2-mock-cartao{
  height:46px;border-radius:8px;background:#F7F3ED;border:1px solid var(--linha);
  display:grid;align-content:center;gap:5px;padding:0 9px
}
.v2-mock-cartao span{display:block;height:6px;border-radius:99px;background:var(--barra)}
.v2-mock-cartao span:first-child{width:60%;background:var(--laranja);opacity:.75}
/* Barras do gráfico: altura por variável, para variar sem CSS novo. */
.v2-mock-grafico{display:flex;align-items:flex-end;gap:7px;height:76px;padding-top:4px}
.v2-mock-grafico b{
  flex:1;border-radius:4px 4px 0 0;background:var(--barra);
  height:var(--h,40%)
}
.v2-mock-grafico b:nth-child(3){background:var(--laranja)}

/* Celular, para a LP de loja.
   --barra precisa ser declarada aqui também: ela nasce em .v2-mock, e
   o celular não é filho dele. Sem isso, as linhas de conteúdo ficavam
   com background vazio, ou seja, invisíveis dentro da tela branca. */
.v2-cel{
  --barra:#E9E4DC;
  width:208px;border-radius:26px;border:9px solid #1D1D20;background:var(--branco);
  box-shadow:0 3px 0 rgba(26,26,26,.10);overflow:hidden;margin-inline:auto
}
.v2-cel-topo{height:22px;background:#1D1D20;position:relative}
.v2-cel-topo::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);top:5px;
  width:56px;height:5px;border-radius:99px;background:#3A3A40
}
.v2-cel-corpo{padding:12px;display:grid;gap:9px}
.v2-cel-foto{height:96px;border-radius:9px;background:#FFE2C6}
.v2-cel-btn{height:30px;border-radius:7px;background:var(--laranja)}

/* ── Hero com arte ao lado ───────────────────────────────────
   No celular a arte vem DEPOIS do formulário: quem chega do anúncio
   no telefone precisa do campo, não do desenho. */
/* No celular o desenho não aparece, e é decisão de conversão, não de
   gosto: ele ficava entre o selo de avaliação e o formulário, e
   empurrava o campo para baixo da dobra. Quem chega de anúncio no
   telefone precisa ver onde digitar, não um mockup bonito. Como é
   enfeite (aria-hidden), ninguém perde informação, e a página ainda
   fica mais leve onde a banda é pior. */
.v2-hero-arte{display:none}

@media (min-width:980px){
  /* Alinhado à esquerda no desktop, acompanhando o texto. O
     margin-inline:auto do celular precisa sair junto, senão ele se
     recentraliza sozinho. */
  .v2-hero-arte{display:flex;margin-top:34px;justify-content:flex-start}
  .v2-hero-arte .v2-cel{margin-inline:0}
}

@media (min-width:760px){
  .v2-secao{padding:68px 0}
  .v2-card{padding:24px 22px}
  .v2-faixa-escura{padding:66px 0}
}

/* ═══════════════════════════════════════════════════════════
   BLOCOS DA REFORMULAÇÃO DE 15/10
   Etiqueta do hero, dois CTAs, print no celular, esteira de
   clientes, comparativo, vagas e barra fixa do celular.
   Tudo em cor chapada: sem degradê, sem brilho, sem vidro.
   ═══════════════════════════════════════════════════════════ */

/* ── Etiqueta de campanha ─────────────────────────────────── */
.hero-etiqueta{
  display:inline-block;margin:0 0 14px;
  background:#FFEBD8;color:#B4460B;
  font-family:var(--f-tit);font-weight:700;font-size:13.5px;
  letter-spacing:.02em;padding:7px 14px;border-radius:100px
}

/* ── Os dois CTAs do hero ─────────────────────────────────── */
.hero-acoes{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin:22px 0 18px}
.btn-grande{font-size:17.5px;padding:17px 26px;min-height:56px;width:100%;justify-content:center}
.hero-link-form{
  color:var(--cinza);font-size:15px;text-decoration:underline;
  text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center
}
.hero-link-form:hover{color:var(--tinta)}
.selo-extra{margin:8px 0 0;color:var(--cinza);font-size:14.5px;font-weight:600}

@media (min-width:560px){
  .hero-acoes{flex-direction:row;align-items:center;gap:18px}
  .btn-grande{width:auto}
}

/* ── Celular com print de site real ───────────────────────── */
.v2-cel-print{width:262px;padding-bottom:0}
.v2-cel-print img{display:block;width:100%;height:auto}

/* ── Esteira de clientes ──────────────────────────────────── */
.v2-clientes{background:var(--branco);border-block:1px solid var(--linha);padding:26px 0 22px}
.v2-clientes-rot{
  text-align:center;margin:0 0 16px;color:var(--cinza);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600
}
.v2-esteira{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.v2-esteira-fita{
  list-style:none;margin:0;padding:0;display:flex;gap:46px;width:max-content;
  animation:v2-anda 38s linear infinite
}
.v2-esteira-fita li{
  font-family:var(--f-tit);font-weight:700;font-size:19px;
  color:#A49C92;white-space:nowrap
}
.v2-esteira:hover .v2-esteira-fita{animation-play-state:paused}
@keyframes v2-anda{
  /* -50% porque a lista está duplicada: ao chegar na metade, a
     segunda cópia está exatamente onde a primeira começou. */
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .v2-esteira-fita{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:12px 28px}
}

/* ── Comparativo ──────────────────────────────────────────── */
.v2-comp{width:100%;border-collapse:collapse;margin-top:6px;font-size:16px}
.v2-comp th,.v2-comp td{padding:14px 10px;text-align:center;border-bottom:1px solid var(--linha)}
.v2-comp thead th{
  font-family:var(--f-tit);font-size:15px;color:var(--cinza);
  border-bottom:2px solid var(--linha);padding-bottom:10px
}
.v2-comp tbody th{text-align:left;font-weight:600;font-family:var(--f-txt);font-size:15.5px}
.v2-comp .v2-comp-nos{background:#FFF6EC}
.v2-comp thead .v2-comp-nos{color:var(--laranja-txt);font-weight:700}
.v2-comp tbody tr:last-child th,.v2-comp tbody tr:last-child td{border-bottom:0}
.v2-sim{display:inline-flex;color:#15803d}
.v2-nao{display:inline-flex;color:#B9B1A6;font-size:17px;font-weight:700}
/* Só para leitor de tela: o check sozinho não diz "sim". */
.v2-comp-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Vagas restantes ──────────────────────────────────────── */
.plano-vagas{
  margin:18px 0 0;padding:12px 14px;border-radius:8px;
  background:#FFF6EC;border:1px solid #F6D9BC;
  color:#7A3A09;font-size:15px;text-align:center
}
.plano-vagas strong{font-family:var(--f-tit)}

/* ── Barra fixa do celular ────────────────────────────────── */
.v2-barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--branco);border-top:1px solid var(--linha);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom))
}
.v2-barra-fixa .btn{width:100%}
/* Entra deslizando, uma vez só. */
.v2-barra-fixa[hidden]{display:none}
.v2-barra-fixa.entrou{animation:v2-sobe .22s ease-out}
@keyframes v2-sobe{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.v2-barra-fixa.entrou{animation:none}}

@media (min-width:860px){
  /* No computador o botão do topo já está sempre à vista. */
  .v2-barra-fixa{display:none}
}
@media print{.v2-barra-fixa{display:none}}

/* ═══════════════════════════════════════════════════════════
   HERO ESCURO  (<body class="hero-escuro">)

   A reforma de 15/10 trocou blocos e não trocou a cara da página,
   e ele viu na hora: "não vi nenhuma mudança". Estava certo. O hero
   é o que decide, e ele continuava texto preto sobre creme.

   Preto chapado, tipografia bem maior, preço em bloco laranja e o
   formulário em cartão branco destacado contra o escuro. É o mesmo
   conteúdo, com a hierarquia que uma página de campanha precisa:
   a primeira tela tem que gritar o que é e quanto custa.

   Opcional de propósito: quem não liga a classe continua com o hero
   claro. É uma linha no array da LP.
   ═══════════════════════════════════════════════════════════ */
.hero-escuro .hero{
  background:#1A1A1A;color:#F3F1EE;
  padding:30px 0 42px;position:relative
}
/* Fio laranja no pé do bloco, como assinatura da marca. */
.hero-escuro .hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--laranja)
}
.hero-escuro .hero h1{
  color:#FFF;font-size:clamp(32px,8.2vw,62px);line-height:1.04;
  letter-spacing:-.035em;margin-bottom:16px
}
.hero-escuro .hero h1 em{color:var(--laranja)}
.hero-escuro .hero-sub{color:#C6BFB6;font-size:17.5px;max-width:46ch}

/* Etiqueta de campanha: contorno, não preenchimento, para não
   competir com o botão laranja que fica logo abaixo. */
.hero-escuro .hero-etiqueta{
  background:transparent;color:#FDBA74;
  border:1px solid rgba(253,186,116,.45)
}

/* O preço vira o segundo elemento mais forte da tela, depois do H1. */
.hero-escuro .hero-promo{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;
  background:transparent;border:0;padding:0;margin:0 0 6px;
  font-family:var(--f-tit);color:#C6BFB6;font-size:16px
}
.hero-escuro .hero-promo s{color:#8C857C;font-size:19px}
.hero-escuro .hero-promo b{
  color:#FFF;font-size:clamp(40px,9.5vw,58px);line-height:1;letter-spacing:-.03em
}

.hero-escuro .selo{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#F3F1EE
}
.hero-escuro .selo-extra{color:#A79F95}
.hero-escuro .hero-link-form{color:#C6BFB6}
.hero-escuro .hero-link-form:hover{color:#FFF}

/* O cartão do formulário salta do fundo escuro. */
.hero-escuro .cartao-form{
  border:0;box-shadow:0 10px 0 rgba(0,0,0,.22);border-radius:12px
}

/* O topo acompanha o hero, senão fica uma faixa branca solta em cima
   do preto. */
.hero-escuro .topo{background:#1A1A1A;border-bottom-color:rgba(255,255,255,.1)}
.hero-escuro .marca{color:#FFF}
.hero-escuro .marca b{color:var(--laranja)}
.hero-escuro .topo-tel{color:#E8E3DC}

/* A esteira de clientes continua logo abaixo do hero: no escuro ela
   fica preta também, para o corte não acontecer no meio dela. */
.hero-escuro .v2-clientes{background:#141416;border-block-color:rgba(255,255,255,.08)}
.hero-escuro .v2-clientes-rot{color:#8C857C}
.hero-escuro .v2-esteira-fita li{color:#6F6962}

/* ── Correções do hero escuro ─────────────────────────────── */

/* O cartão do formulário é BRANCO: ele não pode herdar a cor clara
   do bloco escuro em volta, senão o rótulo de cada campo fica cinza
   sobre branco e some. Foi o que aconteceu no primeiro teste. */
.hero-escuro .cartao-form{color:var(--tinta)}
.hero-escuro .cartao-form h2{color:var(--tinta)}
.hero-escuro .cartao-form label{color:var(--tinta)}
.hero-escuro .cartao-form .ajuda,
.hero-escuro .cartao-form .pos-btn{color:var(--cinza)}

/* O preço tem line-height 1 e corpo enorme: sem espaço embaixo, ele
   encostava na primeira linha do H1. */
.hero-escuro .hero-promo{margin-bottom:18px;align-items:flex-end}
.hero-escuro .hero-promo b{display:block}

/* ═══════════════════════════════════════════════════════════
   MOVIMENTO

   Três coisas, e só três. Em página de campanha, animação que
   atrapalha a leitura custa conversão, não ganha.

     1. o hero entra em sequência quando a página abre
     2. o celular do hero flutua devagar, de leve
     3. os segundos do contador pulsam a cada virada

   Tudo some em prefers-reduced-motion, e tudo parte do estado
   VISÍVEL: a classe .js-anim só entra pelo JS, então uma falha de
   script nunca deixa a página em branco.
   ═══════════════════════════════════════════════════════════ */

/* 1. Entrada do hero, em escada. */
.js-anim .hero-entra > *{opacity:0;transform:translateY(14px)}
.js-anim .hero-entra.pronto > *{
  opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.9,.3,1)
}
.js-anim .hero-entra.pronto > *:nth-child(1){transition-delay:.04s}
.js-anim .hero-entra.pronto > *:nth-child(2){transition-delay:.10s}
.js-anim .hero-entra.pronto > *:nth-child(3){transition-delay:.16s}
.js-anim .hero-entra.pronto > *:nth-child(4){transition-delay:.22s}
.js-anim .hero-entra.pronto > *:nth-child(5){transition-delay:.28s}
.js-anim .hero-entra.pronto > *:nth-child(6){transition-delay:.34s}
.js-anim .hero-entra.pronto > *:nth-child(7){transition-delay:.40s}

/* O cartão do formulário entra junto, vindo do lado. */
.js-anim .cartao-form{opacity:0;transform:translateY(16px)}
.js-anim body.pronto .cartao-form,
.js-anim .cartao-form.pronto{
  opacity:1;transform:none;
  transition:opacity .6s ease .18s,transform .6s cubic-bezier(.22,.9,.3,1) .18s
}

/* 2. O celular respira. Dois pixels, doze segundos: é para dar vida
      sem puxar o olho do botão. */
.v2-cel-print{animation:v2-flutua 12s ease-in-out infinite}
@keyframes v2-flutua{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

/* 3. Os segundos do relógio. */
.crono-nums b[data-crono="s"]{display:inline-block}
.crono-nums b.tique{animation:v2-tique .3s ease-out}
@keyframes v2-tique{
  0%{transform:scale(1)}
  40%{transform:scale(1.14)}
  100%{transform:scale(1)}
}

/* Botões: sobem um fio e firmam a sombra. Sem brilho, sem degradê. */
.btn-laranja,.btn-zap{box-shadow:0 3px 0 rgba(0,0,0,.14)}
.btn-laranja:hover,.btn-zap:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.16)}
.btn-laranja:active,.btn-zap:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.14)}

@media (prefers-reduced-motion:reduce){
  .js-anim .hero-entra > *,
  .js-anim .hero-entra.pronto > *,
  .js-anim .cartao-form{opacity:1;transform:none;transition:none}
  .v2-cel-print,.crono-nums b.tique{animation:none}
  .btn-laranja:hover,.btn-zap:hover{transform:none}
}