/* Estilo do funil de captação — porta quase 1:1 do template validado
   (index (2).html). Escopado por ficar só nesta rota: nenhuma outra página
   do subdomínio usa estes nomes de classe. */
.funil-page{
  /* ── TEMA CLARO (21/09) ───────────────────────────────────────────────
     O funil inteiro virou branco, clonando a estrutura de um funil de
     referência. O roxo deixou de ser o FUNDO e passou a ser o DESTAQUE:
     barra de progresso, botão, foco do campo, dia escolhido, letra da
     alternativa. É o que a wordmark pede — "LEAL" é quase preto e só tem
     contraste sobre claro.

     ⚠️ Superfície é `--surface`, NUNCA um rgba branco novo. As do tema
     escuro eram translúcidas de BRANCO (`rgba(255,255,255,.03)`) e, em
     fundo branco, viram invisíveis — foi o que esta conversão teve que
     caçar uma a uma. */
  --bg:#FFFFFF; --bg-deep:#FFFFFF;
  --surface:#FFFFFF; --surface-2:#F5F4F8; --surface-3:rgba(20,16,31,.05);
  --brand:#8B5CF6; --brand-2:#7C3AED; --brand-lite:#A855F7; --brand-soft:rgba(139,92,246,.10);
  /* O CTA era VERDE. Virou o roxo da marca — "o laranja vai usar meu
     gradiente roxo". `--cta-deep` é o fim do gradiente, não um hover. */
  --cta:#7C3AED; --cta-lite:#A855F7; --cta-deep:#6D28D9;
  --txt:#14101F; --txt2:#55506B; --txt3:#8B849E;
  --ok:#16A34A; --err:#DC2626;
  --line:rgba(20,16,31,.12);
  background:var(--bg-deep);color:var(--txt);font-weight:500;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
  min-height:100vh;
}
.funil-page h1,.funil-page h2,.funil-page h3{letter-spacing:-.02em;font-weight:800}

/* Preto quase liso, como a referência de marca — a aurora fica só um sinal
   fraco no topo, não o fundo inteiro colorido de antes. */
/* No claro a aurora vira um véu roxo quase imperceptível no topo — zerar
   de vez deixaria a tela sem nenhuma âncora de marca. */
.funil-bg-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(760px 320px at 50% -10%,rgba(139,92,246,.10),transparent 68%)}
.funil-page-inner{position:relative;z-index:1}

/* A marca é o ARQUIVO oficial (`/leal-midia.png`, 407×103). A peça vetorial
   que existia aqui — duas barras em gradiente + wordmark em texto — era uma
   imitação com a fonte do sistema; ver `Marca.tsx`. Altura pelo CSS, largura
   automática: o `next/image` entrega o bitmap, o CSS manda no tamanho. */
.funil-logo{display:inline-flex;align-items:center;flex:none;line-height:0}
.funil-logo img{height:46px;width:auto;display:block}
/* Sem slogan: recorta a arte pelo rodapé em vez de esconder elemento — é uma
   peça só. 26% é a faixa que o slogan ocupa nos 103px de altura da arte; a
   margem negativa devolve o espaço que o recorte deixou vazio. */
.funil-logo--curta img{height:46px}
@media(max-width:640px){
  .funil-logo img{height:38px}
  .funil-logo--curta img{height:38px}
}

.funil-authbar{position:relative;overflow:hidden;background:linear-gradient(90deg,var(--brand),var(--brand-2) 55%,#6B21A8);
  border-bottom:1px solid rgba(255,255,255,.12);padding:9px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.funil-marquee{display:flex;width:max-content;animation:funil-roll 140s linear infinite}
.funil-authbar:hover .funil-marquee{animation-play-state:paused}
.funil-marquee-seq{display:flex;align-items:center;flex:none}
.funil-marquee-seq span{display:inline-flex;align-items:center;gap:9px;padding:0 26px;white-space:nowrap;
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#F3EDFF}
.funil-marquee-seq span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--cta-lite);
  box-shadow:0 0 8px var(--cta-lite);margin-left:17px}
@keyframes funil-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.funil-marquee{animation:none}}

/* ── FAIXA FIXA (marquee de UM item) ──────────────────────────────────────
   Preto chapado, parada, e o texto inteiro visível de ponta a ponta.
   Três detalhes que NÃO são cosméticos:
   1. a máscara de fade das bordas é DESLIGADA. Ela existe pra o texto
      rolante nascer e morrer suave; num texto parado ela apaga a primeira e
      a última palavra — e ninguém entende por que "EXCLUSIVO" está cinza.
   2. `letter-spacing:0` a pedido, e ele também é o que devolve ~6% da
      largura pro texto caber.
   3. o corpo cresce com a tela (`vw`) até um teto em `rem`. Tamanho fixo em
      `px` estouraria a linha no celular — e `white-space:nowrap` não quebra,
      ele VAZA. */
.funil-authbar--fixa{background:#000;border-bottom-color:rgba(255,255,255,.08);
  -webkit-mask-image:none;mask-image:none}
.funil-marquee--fixa{animation:none;width:100%;justify-content:center}
.funil-marquee--fixa .funil-marquee-seq{min-width:0}
.funil-marquee--fixa .funil-marquee-seq span{padding:0 12px;letter-spacing:0;
  font-size:min(2.02vw,.76rem)}
/* A bolinha separava um aviso do outro na fila. Com um aviso só ela vira um
   ponto solto no fim da frase. */
.funil-marquee--fixa .funil-marquee-seq span::after{content:none}

/* A marca no topo da capa, centralizada — o mesmo lockup do cabeçalho das
   telas de pergunta, pra a jornada não trocar de cara no meio. */
.funil-hero-marca{position:relative;z-index:2;display:flex;justify-content:center;padding:18px 20px 4px}
@media(max-width:640px){.funil-hero-marca{padding:12px 16px 2px}}

/* O CTA principal em BLOCO, como na referência: largura de coluna (não do
   texto), rótulo em caixa alta e a seta na direita. `max-width` e não
   `width:100%` solto — num desktop largo o botão iria de ponta a ponta da
   coluna de 1000px e viraria uma faixa. */
.funil-btn-bloco{width:100%;max-width:440px;justify-content:center;text-transform:uppercase;
  letter-spacing:.02em;border-radius:10px}
.funil-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:linear-gradient(160deg,var(--cta-lite),var(--cta) 45%,var(--cta-deep));
  color:#fff;font-weight:800;font-size:1.05rem;border:0;border-radius:13px;
  padding:17px 30px;cursor:pointer;text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 10px 24px -8px rgba(124,58,237,.42),0 3px 10px rgba(0,0,0,.34);
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}
.funil-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* ── QUANTAS LINHAS CADA BLOCO OCUPA ──────────────────────────────────────
   Pedido do Giovani, com contagem exata: headline em 3 linhas, subheadline em
   2, e os dois parágrafos do corpo em 1 e 2.

   Linha é `largura ÷ (tamanho da fonte × largura média do caractere)`. Pra a
   contagem não mudar de aparelho pra aparelho, os dois lados precisam crescer
   juntos: a fonte em `vw` E o trilho em `vw`. Com fonte fixa em `px`, o mesmo
   texto que cabe em 3 linhas no notebook vira 6 no celular — que era o estado
   anterior.

   ⚠️ O `clamp` tem PISO, e no celular é ele que manda. Subheadline e corpo
   têm ~195 caracteres cada: em 2 linhas numa tela de 375px a conta pede fonte
   de ~7px, metade do mínimo legível. Abaixo do piso a contagem cede e o texto
   ganha linha — legibilidade ganha de contagem, sempre. */
.funil-hero{max-width:min(1180px,94vw);margin:0 auto;padding:32px 24px 44px;text-align:center}
.funil-hero h1{font-size:var(--tipo-headline-size,clamp(.875rem,3.55vw,2.6rem));line-height:var(--tipo-headline-lh,1.14);letter-spacing:var(--tipo-headline-ls,-.02em);color:var(--tipo-headline-cor,inherit);font-weight:var(--tipo-headline-peso,800);text-align:var(--tipo-headline-align,inherit);margin-bottom:14px}
.funil-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--brand-lite) 8%,#C4B5FD 50%,var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.funil-hero-subhead{color:var(--tipo-subheadline-cor,var(--txt));font-size:var(--tipo-subheadline-size,clamp(.8rem,1.70vw,1.34rem));line-height:var(--tipo-subheadline-lh,inherit);letter-spacing:var(--tipo-subheadline-ls,inherit);font-weight:var(--tipo-subheadline-peso,inherit);text-align:var(--tipo-subheadline-align,inherit);max-width:100%;margin:0 auto 20px}
.funil-hero .funil-micro{margin-top:11px;font-size:var(--tipo-cta-micro-size,.8rem);line-height:var(--tipo-cta-micro-lh,inherit);letter-spacing:var(--tipo-cta-micro-ls,inherit);font-weight:var(--tipo-cta-micro-peso,inherit);text-align:var(--tipo-cta-micro-align,inherit);color:var(--tipo-cta-micro-cor,var(--txt2))}
.funil-social{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-top:26px;
  padding-top:20px;border-top:1px solid var(--line)}
.funil-social div{font-size:.78rem;color:var(--txt2)}
.funil-social b{display:block;font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:2px;letter-spacing:-.02em}
.funil-social b.pendente{color:var(--txt3);font-size:.92rem;font-weight:700}
.funil-page-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 24px;border-top:1px solid var(--line);font-size:.76rem;color:var(--txt3)}
.funil-foot-confianca{display:inline-flex;align-items:center;gap:8px;color:var(--txt)}
.funil-foot-marca{opacity:.7}
@media(max-width:640px){.funil-page-foot{justify-content:center;text-align:center;padding:16px 18px 24px}}

.funil-hero-video{position:relative;margin:6px auto 20px;max-width:336px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
  box-shadow:0 14px 34px -14px rgba(20,16,31,.22)}
/* Vídeo original é 9:16 (720x1280). Recorte visual (sem reprocessar o
   arquivo): aspect-ratio mais quadrado — a altura encolhe ~20% em relação
   à largura — com object-fit:cover cortando topo/base igualmente. */
.funil-hero-video video{display:block;width:100%;aspect-ratio:45/64;object-fit:cover;background:#000}
/* O player do VTurb (Hub) no lugar do <video>: MESMA moldura 45/64. O recorte
   que o object-fit fazia aqui é feito lá dentro (`?ajuste=cobrir`), porque
   iframe não recorta o que carrega. */
.funil-hero-video iframe{display:block;width:100%;aspect-ratio:45/64;border:0;background:#000}
/* Barra "estilo VSL" — sem controle nativo nenhum, só esta linha do tempo.
   O preenchimento não é o tempo real (ver progressoVsl em FunilCapa.tsx):
   anda mais rápido no começo de propósito, pra parecer um vídeo curto. */
.funil-hero-videobarra{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18)}
.funil-hero-videobarra i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-lite),var(--brand));
  box-shadow:0 0 8px rgba(168,85,247,.6)}
.funil-hero-video-legenda{padding:9px 14px;font-size:.78rem;color:var(--txt3);text-align:center}
/* Aviso de "toque pra ouvir" — o vídeo autoplay nasce mudo por obrigação do
   navegador (ver FunilCapa.tsx), e sem isso a pessoa nunca descobre que
   clicar em qualquer lugar da página liga o som. Some sozinho no primeiro
   clique, quando `videoSilenciado` vira falso. */
.funil-hero-video-som{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:rgba(5,2,12,.72);backdrop-filter:blur(2px);color:#fff;
  font-size:.72rem;font-weight:600;white-space:nowrap;pointer-events:none;
  animation:funil-som-pulso 1.8s ease-in-out infinite}
.funil-hero-video-som svg{flex:none;color:var(--brand-lite)}
@keyframes funil-som-pulso{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}

/* `pre-line` porque o campo do Hub é uma textarea: linha em branco ali é
   parágrafo, e sem isto o HTML colapsa tudo num bloco corrido — a pessoa
   formata, salva, e a página ignora sem avisar. */
.funil-hero-corpo{white-space:pre-line;color:var(--tipo-corpo-cor,var(--txt));font-size:var(--tipo-corpo-size,clamp(.8rem,1.70vw,1.34rem));line-height:var(--tipo-corpo-lh,inherit);letter-spacing:var(--tipo-corpo-ls,inherit);font-weight:var(--tipo-corpo-peso,inherit);text-align:var(--tipo-corpo-align,inherit);max-width:100%;margin:0 auto 12px}
.funil-hero-corpo-destaque{color:var(--tipo-corpo-destaque-cor,#6D28D9);font-weight:var(--tipo-corpo-destaque-peso,800);font-size:var(--tipo-corpo-destaque-size,inherit);letter-spacing:var(--tipo-corpo-destaque-ls,inherit)}
.funil-hero-ctaintro{font-style:var(--tipo-cta-intro-estilo,italic);color:var(--tipo-cta-intro-cor,var(--txt));font-weight:var(--tipo-cta-intro-peso,600);font-size:var(--tipo-cta-intro-size,clamp(.8rem,1.8vw,.88rem));line-height:var(--tipo-cta-intro-lh,inherit);letter-spacing:var(--tipo-cta-intro-ls,inherit);text-align:var(--tipo-cta-intro-align,inherit);
  max-width:560px;margin:0 auto 18px}

/* Mobile: tudo (headline até o botão) cabe na primeira tela, sem rolar —
   pedido explícito do Giovani ("o botão já tem que estar no campo de
   visão"). O vídeo é o maior consumidor de altura (retrato, ~16:9 invertido)
   e por isso é o que mais encolhe; os textos encolhem também, mas continuam
   legíveis — não some nenhum, só ocupa menos linha. */
@media(max-width:640px){
  /* ⚠️ O trilho volta a 100% no celular. `min(1180px,94vw)` da regra base
     tira 6% da largura — no desktop isso é margem, no celular são 23px que
     faziam o rótulo do CTA quebrar em duas linhas. */
  .funil-hero{max-width:100%;padding:16px 18px 20px}
  /* ⚠️ A HEADLINE VOLTA AO TAMANHO GRANDE NO CELULAR, e isso rompe a
     contagem de 3 linhas de propósito.
     Medido em 375px: 3 linhas exigiriam fonte de ~14px — o MESMO corpo do
     texto de apoio logo abaixo. Uma manchete do tamanho do parágrafo deixa
     de ser manchete, e o que a contagem estava comprando (uma tela mais
     compacta) custava a hierarquia inteira da peça.
     Aqui ela ocupa 5 linhas a 21px. Pra ter 3 linhas E manchete grande no
     celular, o caminho é ENCURTAR o texto (hoje são 117 caracteres), não
     diminuir a fonte. */
  /* ⚠️ O TETO SUBIU DE 1.26rem PRA 1.6rem, e isso é o que segura as 3 linhas
     no celular largo. Medido com a headline de 75 caracteres: 375px e 390px
     davam 3 linhas, mas num 430px (Pro Max) o texto cabia em 2 — a tela
     crescia e a fonte parava de crescer junto, então sobrava largura. Com o
     teto mais alto a fonte acompanha a tela e a contagem se mantém.
     O piso não muda: ele é quem protege a tela estreita. */
  .funil-hero h1{font-size:var(--tipo-headline-size,clamp(1.02rem,5.6vw,1.6rem));line-height:var(--tipo-headline-lh,1.16);margin-bottom:7px}
  .funil-hero-subhead{line-height:var(--tipo-subheadline-lh,1.35);margin:0 auto 9px}
  .funil-hero-video{max-width:221px;margin:2px auto 7px}
  .funil-hero-video-legenda{font-size:.64rem;padding:5px 8px}
  .funil-hero-corpo{line-height:var(--tipo-corpo-lh,1.32);margin:0 auto 7px}
  .funil-hero-ctaintro{font-size:var(--tipo-cta-intro-size,.7rem);line-height:var(--tipo-cta-intro-lh,1.32);margin:0 auto 9px}
  .funil-btn{padding:12px 20px;font-size:.9rem}
  .funil-hero .funil-micro{margin-top:7px;font-size:var(--tipo-cta-micro-size,.7rem)}
}

/* ── CELULAR BAIXO (iPhone SE e afins) ────────────────────────────────────
   A régua de "cabe numa tela só" era LARGURA (`max-width:640px`), e largura
   não diz nada sobre altura: medido em produção, num 375×667 o botão
   terminava em 737px — 70px fora da tela, justamente o CTA.

   A consulta olha a ALTURA. O vídeo é o que encolhe mais, porque é o que
   custa mais altura (retrato): 184px de largura viram ~255px de altura;
   142px viram ~197px. O resto vem de espaçamento, nunca de tamanho de fonte
   — texto menor que isto deixa de ser lido no celular, e aí não adianta
   caber. */
@media(max-width:640px) and (max-height:700px){
  .funil-hero-marca{padding:8px 16px 0}
  .funil-hero{padding:10px 16px 6px}
  .funil-hero h1{margin-bottom:5px}
  .funil-hero-subhead{margin:0 auto 6px}
  .funil-hero-video{max-width:158px;margin:0 auto 6px}
  .funil-hero-corpo{margin:0 auto 5px}
  .funil-hero-ctaintro{margin:0 auto 7px}
  .funil-btn{padding:11px 18px}
  .funil-hero .funil-micro{margin-top:5px}
}

.funil-passos{max-width:1000px;margin:0 auto;padding:12px 24px 44px;text-align:center}
.funil-passos-titulo{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-lite);margin-bottom:8px}
.funil-passos-subtitulo{color:var(--txt2);font-size:.92rem;max-width:560px;margin:0 auto 22px}
/* Timeline (não cartões): cada passo é um "nó" (círculo + linha) na LINHA DE
   CIMA e o texto embaixo, como na referência de marca — sem borda de cartão
   em volta, é a própria fileira de nós conectados que faz a leitura de
   sequência, sem precisar de setas. */
.funil-passos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 14px;text-align:left}
.funil-passo{padding:0}
.funil-passo-no{display:flex;align-items:center;height:34px;margin-bottom:12px}
.funil-passo-icone{flex:none;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  background:var(--brand-soft);border:1px solid rgba(168,85,247,.3);color:var(--brand-lite)}
.funil-passo-linha{flex:1;height:2px;background:var(--line);margin-left:2px}
.funil-passo-titulo{font-weight:700;font-size:.94rem;margin-bottom:4px;color:var(--brand-lite)}
.funil-passo-texto{color:var(--txt2);font-size:.84rem;line-height:1.45;padding-right:8px}
/* No celular os nós empilham: a linha horizontal não faz sentido entre itens
   que já não estão lado a lado, então ela some — o número/ícone já entrega a
   ordem sozinho quando a leitura é de cima pra baixo. */
@media(max-width:640px){
  .funil-passos-grid{grid-template-columns:1fr;gap:16px}
  .funil-passo-linha{display:none}
}

/* ---------- TELA CHEIA (formulário / agenda / fim) ---------- */
.funil-tf{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--bg-deep)}
/* Branco liso nas telas de formulário: a referência não tem fundo nenhum, e
   qualquer véu aqui compete com o texto da pergunta, que é a única coisa que
   a tela tem. A capa mantém o véu — lá ele é a âncora de marca. */
.funil-tf-bg{display:none}

/* (A foto de fundo das perguntas saiu no tema claro — ver Runner.) */

/* (A marca d'água gigante saiu junto com o tema claro — ver Runner.) */

/* Cabeçalho: logo à esquerda, fechar à direita — em fluxo normal, não mais
   flutuando por cima do conteúdo. Passo (N DE M) e a barra ficam por baixo,
   com o MESMO progresso que já era calculado (`prog`/`fillFino` no Runner). */
.funil-tf-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 18px}
/* O "‹" e o vazio da direita têm a MESMA largura — é o par que mantém a marca
   no centro óptico. Mexer num sem o outro descentraliza a logo. */
.funil-tf-voltar,.funil-tf-top-vazio{flex:none;width:34px;height:34px}
.funil-tf-voltar{display:grid;place-items:center;background:none;border:0;border-radius:9px;
  color:var(--txt2);cursor:pointer;padding:0}
.funil-tf-voltar:hover{background:var(--surface-3);color:var(--txt)}
/* Selo da FASE (curto: "FORMULÁRIO", "AGENDAMENTO"…) — cabe até no celular,
   por isso não é escondido em nenhuma largura, diferente da tagline longa que
   ele substituiu. */
.funil-tf-tagline{flex:1;text-align:right;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-lite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.funil-tf-x{flex:none;background:var(--surface-3);border:1px solid var(--line);color:var(--txt2);
  width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  font-size:1.15rem;line-height:1;cursor:pointer;padding:0}
.funil-tf-x:hover{color:var(--txt);border-color:var(--brand-lite)}

/* Colada no alto e de ponta a ponta: sem raio, sem margem, sem invólucro com
   padding. É a primeira coisa que a tela mostra. */
.funil-tf-prog{position:relative;z-index:3;height:4px;background:rgba(20,16,31,.07);overflow:hidden}
.funil-tf-prog i{display:block;height:100%;
  background:linear-gradient(90deg,var(--brand-2),var(--brand) 55%,var(--brand-lite));
  transition:width .45s cubic-bezier(.22,.9,.32,1)}

/* `align-items:safe center` cobria o topo cortado em conteúdo mais alto que a
   tela, mas depende do navegador reconhecer o valor "safe" — sem suporte, a
   declaração inteira é descartada e volta o defeito original. Centralização
   por MARGEM no filho (`.funil-tf-in{margin:auto}`, logo abaixo) é o mesmo
   resultado sem depender de nada além de flexbox básico: absorve o espaço
   sobrando pra centralizar quando cabe, e cai pra 0 (encostando no topo, sem
   cortar nada) quando o conteúdo é mais alto que a tela — daí rolar pra baixo
   sempre chega no fim de verdade. */
.funil-tf-stage{position:relative;z-index:2;flex:1;display:flex;justify-content:center;padding:20px 24px 32px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.funil-tf-in{width:100%;max-width:600px;margin:auto}

.funil-q{font-size:clamp(1.3rem,3.8vw,1.8rem);font-weight:800;line-height:1.2;letter-spacing:-.025em;margin-bottom:18px}
/* Texto de apoio da pergunta. `pre-line` pelo mesmo motivo do corpo da capa:
   o campo do Hub é textarea e linha em branco ali é parágrafo. */
.funil-q-apoio{white-space:pre-line;color:var(--txt2);font-size:.95rem;line-height:1.5;margin-bottom:14px}
/* A ressalva da pergunta — itálico e um corpo menor, porque é nota de
   rodapé da pergunta, não parte do enunciado. */
.funil-q-nota{font-style:italic;color:var(--txt3);font-size:.86rem;line-height:1.45;margin-bottom:22px}
@media(max-width:640px){
  .funil-q-apoio{font-size:.88rem;margin-bottom:11px}
  .funil-q-nota{font-size:.8rem;margin-bottom:16px}
}
.funil-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.funil-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:14px 16px;
  font-family:inherit;font-size:.98rem;font-weight:500;color:var(--txt);
  transition:border-color .14s ease,background .14s ease,transform .14s ease}
.funil-opt:hover{border-color:var(--brand-lite);background:var(--brand-soft);transform:translateY(-1px)}
/* A letra no lugar do radio: um alvo curto de leitura ("a B"), como na
   referência. Some o "✓" da direita junto — marcar JÁ avança de tela, então
   o check aparecia por uma fração de segundo e nunca era lido. */
.funil-opt-letra{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--txt2);
  font-size:.72rem;font-weight:800}
.funil-opt[data-sel="1"]{border-color:var(--brand);background:var(--brand-soft)}
.funil-opt[data-sel="1"] .funil-opt-letra{background:var(--brand);border-color:var(--brand);color:#fff}

/* Campo tipo "underline" (Typeform-like) em vez de caixa fechada — mais
   enxuto na tela e é o padrão da referência de marca. */
.funil-field{margin-bottom:16px}
.funil-field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:8px}
.funil-field input{width:100%;background:transparent;border:0;border-bottom:2px solid var(--line);border-radius:0;
  padding:10px 2px;font-size:1.15rem;font-family:inherit;font-weight:500;color:var(--txt)}
.funil-field input:focus{outline:none;border-bottom-color:var(--brand)}
.funil-field.invalid input{border-bottom-color:var(--err)}
.funil-fe{display:none;color:var(--err);font-size:.85rem;margin-top:6px}
.funil-field.invalid .funil-fe{display:block}

.funil-tel-wrap{display:flex;align-items:stretch;background:transparent;border:0;border-bottom:2px solid var(--line);
  border-radius:0}
.funil-field-tel.invalid .funil-tel-wrap{border-bottom-color:var(--err)}
.funil-tel-wrap:focus-within{border-bottom-color:var(--brand)}
.funil-tel-prefixo{display:flex;align-items:center;gap:6px;padding:0 10px 0 0;font-weight:700;font-size:1.02rem;
  color:var(--txt2);white-space:nowrap}
.funil-tel-wrap input{border:0;background:none;box-shadow:none !important;flex:1;padding:10px 2px;
  font-size:1.15rem;font-family:inherit;font-weight:500;color:var(--txt)}
.funil-tel-wrap input:focus{outline:none}

.funil-avancar{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(160deg,var(--cta-lite),var(--cta) 55%,var(--cta-deep));
  color:#fff;font-weight:800;font-size:1rem;border:0;border-radius:8px;
  padding:15px 34px;cursor:pointer;text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 6px 16px -6px rgba(124,58,237,.42);
  transition:transform .14s ease,filter .14s ease}
.funil-avancar:hover{transform:translateY(-1px);filter:brightness(1.05)}
.funil-avancar svg{color:#fff}
.funil-enter-dica{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--txt3)}
.funil-enter-dica kbd{background:var(--surface-3);border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;font-family:inherit;font-weight:700;color:var(--txt)}

/* A linha de controles: Voltar à esquerda, dica+Avançar à direita — como na
   referência de marca. `flex-wrap` porque no celular "ou pressione Enter"
   junto do botão não cabe numa linha só com o Voltar. */
/* Coluna, alinhada à esquerda: o botão e, abaixo dele, a dica do Enter como
   nota de rodapé. `align-items:flex-start` impede o botão de esticar pra
   largura do trilho — ele tem que ter o tamanho do rótulo. */
.funil-controles{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:22px}

.funil-cal-grid{display:grid;grid-template-columns:1fr 210px;gap:16px;align-items:start}
.funil-cal{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface)}
.funil-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.funil-cal-nav button{background:none;border:1px solid var(--line);color:var(--txt2);width:30px;height:30px;border-radius:8px;cursor:pointer}
.funil-cal-nav button:disabled{opacity:.28;cursor:not-allowed}
.funil-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px}
.funil-dow span{text-align:center;font-size:.62rem;font-weight:700;color:var(--txt3)}
.funil-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.funil-day{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-size:.88rem;font-weight:600;border:1px solid transparent;color:var(--txt)}
.funil-day.off{color:var(--txt3);opacity:.4}
/* Dia livre já nasce MARCADO, não só no hover: num calendário em que a maior
   parte dos dias está fora (fim de semana, fora da janela), o que a pessoa
   procura é onde DÁ — e no hover isso só existe pra quem usa mouse. No
   celular, que é de onde vem o tráfego de anúncio, não existe hover nenhum. */
.funil-day.free{cursor:pointer;background:var(--brand-soft);color:var(--brand-2);font-weight:700}
.funil-day.free:hover{border-color:var(--brand)}
.funil-day.sel{background:linear-gradient(160deg,var(--brand-lite),var(--brand) 55%,var(--brand-2));color:#fff}
.funil-slot-list{display:flex;flex-direction:column;gap:8px;max-height:252px;overflow-y:auto}
.funil-slot{background:none;border:1.5px solid var(--line);border-radius:11px;padding:12px;font-weight:700;font-size:.95rem;color:var(--txt);cursor:pointer}
.funil-slot:hover{border-color:var(--brand-lite);background:var(--brand-soft)}
/* ⚠️ `color:#fff` explícito. Sem ele o horário escolhido herdava `--txt`
   (quase preto) e ficava texto escuro sobre o roxo cheio — o único item da
   lista que a pessoa realmente precisa ler era o menos legível. O mesmo vale
   no hover, que também pinta o fundo. */
.funil-slot.sel{background:linear-gradient(160deg,var(--brand-lite),var(--brand) 55%,var(--brand-2));border-color:transparent;color:#fff}
.funil-slot.sel:hover{color:#fff}
.funil-slot-empty{font-size:.85rem;color:var(--txt3);padding:12px 0}
.funil-instrucoes{margin-bottom:16px}
.funil-instrucoes-titulo{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-lite);margin-bottom:8px}
.funil-instrucoes-texto{color:var(--txt2);font-size:.86rem;line-height:1.5;margin-bottom:10px}
.funil-instrucoes-texto:last-child{margin-bottom:0}

.funil-done{text-align:center}
.funil-done .ico{width:66px;height:66px;border-radius:50%;background:rgba(22,163,74,.10);border:2px solid var(--ok);display:grid;place-items:center;margin:0 auto 22px;color:var(--ok)}
@media(max-width:640px){.funil-cal-grid{grid-template-columns:1fr}.funil-slot-list{flex-direction:row;overflow-x:auto}.funil-slot{flex:0 0 auto}}

/* ---------- TELA FINAL PÓS-AGENDAMENTO — confirmação, checklist, fura-fila ---------- */
.funil-confirma{text-align:left;border:1px solid var(--line);border-radius:16px;padding:20px;
  background:var(--surface-2);margin-bottom:20px}
.funil-confirma-sessao{color:var(--txt2);font-size:.92rem;margin-bottom:16px}
.funil-confirma-acoes{display:flex;flex-wrap:wrap;gap:20px}
.funil-confirma-acao{flex:1 1 220px;min-width:200px}
.funil-confirma-acao-label{font-weight:700;font-size:.92rem;margin-bottom:4px}
.funil-confirma-acao-micro{color:var(--txt3);font-size:.8rem;margin-bottom:10px;line-height:1.4}
.funil-confirma-btn{display:inline-flex;align-items:center;gap:8px;background:none;
  border:1.5px solid var(--brand-lite);color:var(--txt);border-radius:10px;padding:10px 16px;
  font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:none}
.funil-confirma-btn:hover{background:var(--brand-soft)}
.funil-convite-form{display:flex;gap:8px;flex-wrap:wrap}
.funil-convite-form input{flex:1 1 160px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:10px;padding:10px 12px;font-size:.9rem;color:var(--txt);font-family:inherit}
.funil-convite-msg{font-size:.82rem;margin-top:8px}
.funil-convite-msg.ok{color:var(--ok)}
.funil-convite-msg.erro{color:var(--err)}

.funil-checklist{text-align:left;border:1px solid var(--line);border-radius:16px;padding:20px;
  background:var(--surface-2);margin-bottom:20px}
.funil-checklist-titulo{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-lite);margin-bottom:4px}
.funil-checklist-subtitulo{color:var(--txt2);font-size:.9rem;margin-bottom:16px}
.funil-checklist-item{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.funil-checklist-item:first-of-type{border-top:0}
.funil-checklist-check{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;font-weight:800;margin-top:1px}
.funil-checklist-check.feito{background:rgba(22,163,74,.12);color:var(--ok);border:1px solid rgba(22,163,74,.35)}
.funil-checklist-check.pendente{background:var(--surface-2);color:var(--txt3);border:1px solid var(--line)}
.funil-checklist-texto b{display:block;font-size:.92rem;margin-bottom:2px}
.funil-checklist-texto span{color:var(--txt2);font-size:.85rem}


/* ---------- OBRIGADO: OS TRES BLOCOS NUMA TELA SO ----------
   A ordem da copy (10/09) e titulo -> fura-fila -> passos -> calendario: o
   fura-fila e a unica acao que rende agora, entao ele nao pode depender de
   rolagem; o calendario e o ultimo porque so importa depois que a pessoa
   decidiu se quer antecipar.

   Como caber sem rolar: os passos deitam em COLUNAS (quatro passos em pe
   custavam ~240px de altura; deitados custam ~110px) e todo espacamento desta
   tela encolhe. E compressao pontual, nao um tema novo -- as perguntas e a
   agenda seguem com os valores originais.

   ⚠️ "Sem rolar" e verdade a partir de ~760px de altura de viewport. Em
   celular baixo (~640px) a rolagem volta, e por isso a ORDEM importa mais que
   a compressao: o que fica de fora do primeiro olhar e o calendario, que e o
   bloco que a pessoa procura depois -- nunca o fura-fila. */
/* ⚠️ `margin-top:0` no filho e o que tira o vazio de cima, NAO o padding.
   `.funil-tf-in{margin:auto}` centraliza na vertical: com o conteudo mais
   curto que a tela, a sobra era dividida em duas e viravam ~270px de nada
   acima do titulo — e mexer no padding so devolvia metade do que se tirava.
   Preso no topo, o `padding-top` daqui passa a ser exatamente o respiro que
   se ve. `margin-bottom:auto` mantem a sobra embaixo, onde nao incomoda.
   No celular isso nao muda nada: la o conteudo e mais alto que a tela e o
   `auto` ja caia pra zero sozinho. */
/* `clamp` e nao valor fixo: preso no topo, o respiro precisa acompanhar a
   altura da tela — 84px fixos que ficam bem num notebook viram uma tarja fina
   num monitor de 1400px de altura. */
/* ⚠️ Este `clamp` ERA calibrado pra ZERO cabeçalho em fluxo na tela de
   obrigado (só a tarja fina de 4px, `position:absolute`, não ocupava altura
   nenhuma). Agora o cabeçalho (logo + selo) apareceu ali também — ver Runner
   — e ele SOZINHO já ocupa ~64px reais antes deste padding começar a contar.
   Reduzido na mesma proporção pra não dobrar o respiro que a seção acima
   descreve ter contado a dedo. */
.funil-tf-stage-larga{padding:clamp(12px,3vh,40px) 20px 28px}
.funil-tf-stage-larga .funil-tf-in{margin-top:0;margin-bottom:auto}
.funil-tf-in-larga{max-width:920px}

/* O CTA solto.
   ⚠️ NAO forcar `width:100%` aqui (era o que esta linha fazia antes). O texto
   do rotulo vem do painel e pode ser longo: preso num trilho de 420px ele
   quebrava em DUAS linhas, e como `.funil-btn` distribui o espaco entre o
   icone e o texto, o icone descolava pro canto esquerdo enquanto o texto
   ficava centralizado no resto — um botao gordo com o icone solto num canto.
   Sem largura imposta, o `inline-flex` do `.funil-btn` encolhe pro tamanho do
   conteudo (uma linha, icone junto do texto) e o `text-align:center` do
   `.funil-done` centraliza. `max-width:100%` e o que impede um rotulo enorme
   de estourar a tela. */
.funil-done-cta{max-width:100%;margin-top:22px;margin-bottom:22px}

/* ── OS TRES NIVEIS DO TEXTO ───────────────────────────────────────────
   Antes era UMA frase longa no maior corpo da tela, toda em 800 — tres linhas
   em que nada se destacava porque tudo se destacava. Agora o peso e o tamanho
   caem a cada nivel, e o amarelo aparece UMA vez. */
.funil-done-confirma .funil-q{font-size:clamp(1.2rem,2.6vw,1.62rem);line-height:1.22;margin-bottom:10px}
/* Mesma cor e mesmo peso do destaque do corpo da capa (`#FACC15`), pela mesma
   variavel: e a linguagem de destaque que o funil ja falava. */
.funil-done-destaque{color:var(--tipo-corpo-destaque-cor,#6D28D9);font-weight:800}
/* Peso NORMAL de proposito: e a instrucao, nao a manchete. */
.funil-done-sub{color:var(--txt);font-size:1rem;font-weight:400;line-height:1.45;
  max-width:44ch;margin:0 auto 10px}
/* A data em verde — é a confirmação de que o horário pegou, e verde é a cor
   que o resto da tela já usa pra "deu certo" (o check dos passos, o CTA). Em
   tabular pra os números não dançarem. */
.funil-done-data{color:var(--ok);font-size:.9rem;font-weight:700;margin:0 0 4px;
  font-variant-numeric:tabular-nums}
.funil-done-confirma .funil-checklist{padding:16px 18px;margin-bottom:14px}
.funil-done-confirma .funil-checklist-subtitulo{margin-bottom:12px}
.funil-done-confirma .funil-confirma{padding:16px 18px;margin-bottom:0}
.funil-done-confirma .funil-confirma-sessao{margin-bottom:12px}

/* `align-items:start` para que uma coluna de texto mais longo nao esticar as
   outras -- sem isso, o passo com duas linhas de texto empurra a altura dos
   quatro. */
.funil-checklist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;align-items:start}
/* Em coluna o item deita: o nó sobe pra cima do texto, e a linha divisoria
   horizontal (`border-top`) sai -- ela separava itens empilhados, e aqui
   cortaria o topo de cada coluna. */
.funil-checklist-grid .funil-checklist-item{flex-direction:column;gap:8px;padding:0;border-top:0}
/* O nó: círculo (número ou check) + linha conectando até o próximo — a MESMA
   leitura de timeline do "Próximo Passo" da capa, só que aqui o círculo troca
   de check pra número real (`p.feito`), não decoração. */
.funil-checklist-node{display:flex;align-items:center;height:22px}
.funil-checklist-linha{flex:1;height:2px;background:rgba(20,16,31,.10);margin-left:2px}
.funil-checklist-linha.feito{background:rgba(22,163,74,.35)}

@media(max-width:640px){
  /* Zero padding lateral: no celular a margem custava 28px de largura util,
     e largura util e o que tira linha dos textos dos passos — que e o que
     estava empurrando o calendario pra fora da tela. Os cartoes vao de ponta
     a ponta; quem mantem o respiro e o padding INTERNO deles. */
  .funil-tf-stage-larga{padding:16px 0 16px}
  /* O titulo e o botao nao sao cartao, entao ganham o respiro lateral aqui —
     sem isso o texto colaria na borda da tela. */
  .funil-done-confirma .funil-q{padding:0 14px;font-size:1.18rem}
  .funil-done-sub{padding:0 14px;font-size:.92rem}
  .funil-done-data{padding:0 14px;font-size:.8rem}
  .funil-done-cta{margin-top:18px;margin-bottom:18px}
  .funil-done-cta{margin-left:14px;margin-right:14px}
  /* Borda e raio laterais saem: cartao encostado na borda com canto
     arredondado fica com um recorte solto no meio do nada. */
  .funil-done-confirma .funil-checklist,
  .funil-done-confirma .funil-confirma{border-radius:0;border-left:0;border-right:0}
  /* Duas colunas, nao uma: em coluna unica os passos voltariam a empilhar e a
     tela ficaria mais alta do que era antes desta mudanca. */
  .funil-checklist-grid{grid-template-columns:1fr 1fr;gap:10px}
  .funil-done-confirma .funil-q{font-size:1.12rem;line-height:1.2;margin-bottom:12px}
  .funil-done-confirma .funil-checklist{padding:14px;margin-bottom:10px}
  .funil-done-confirma .funil-checklist-subtitulo{font-size:.82rem;margin-bottom:10px}
  .funil-done-confirma .funil-checklist-check{width:18px;height:18px;font-size:.64rem}
  .funil-done-confirma .funil-checklist-texto b{font-size:.85rem}
  .funil-done-confirma .funil-checklist-texto span{font-size:.76rem;line-height:1.35}
  .funil-done-confirma .funil-confirma{padding:14px}
  .funil-done-confirma .funil-confirma-sessao{font-size:.85rem;margin-bottom:10px}
  .funil-done-confirma .funil-confirma-acao-micro{margin-bottom:8px}
}

/* ---------- POP-UP DE SAÍDA (exit-intent, só desktop) ---------- */
.funil-exit-overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(5,2,12,.78);backdrop-filter:blur(3px)}
.funil-exit-card{position:relative;width:100%;max-width:440px;text-align:center;border-radius:18px;
  padding:34px 28px 28px;background:var(--bg-deep);border:1px solid rgba(192,132,252,.3);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6)}
.funil-exit-fechar{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--txt3);
  cursor:pointer;padding:6px;line-height:0}
.funil-exit-fechar:hover{color:var(--txt)}
.funil-exit-sobrelinha{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cta-lite);margin-bottom:10px}
.funil-exit-titulo{font-size:clamp(1.3rem,4vw,1.7rem);line-height:1.2;margin-bottom:12px}
.funil-exit-texto{color:var(--txt2);font-size:.94rem;line-height:1.5;margin-bottom:22px}

/* ---------- SELO DE PRÉ-VISUALIZAÇÃO (só em /f/<slug>/ver/<tela>) ---------- */
/* Fica por cima de tudo (o Runner usa z-index 90) e não intercepta clique:
   sem `pointer-events:none` ele engoliria o canto da tela que está sendo
   conferida. Existe pra ninguém confundir a conferência com a página real —
   aqui nada é gravado, e um print desta tela não é print da produção. */
.funil-preview-tag{position:fixed;left:16px;bottom:16px;z-index:200;pointer-events:none;
  padding:7px 13px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:#0A0316;background:var(--brand-lite,#C084FC);box-shadow:0 8px 24px -8px rgba(0,0,0,.7)}

/* ---------- TELA DE REDIRECIONAMENTO PRO WHATSAPP ----------
   Uma coisa só na tela: o aviso. Nada de cartão, borda ou ícone competindo —
   a tela dura ~2 segundos e tem UMA mensagem pra passar. */
.funil-redirect{text-align:left}
.funil-redirect-avisos{list-style:none;padding:0;margin:18px 0 26px;display:flex;flex-direction:column;gap:7px}
.funil-redirect-avisos li{display:flex;align-items:center;gap:10px;color:var(--err);
  font-weight:800;font-size:1.02rem;letter-spacing:.01em}
.funil-redirect-avisos li span{font-size:1.1rem;line-height:1}
/* Sublinhado e não botão: é a SAÍDA de emergência, e com cara de botão ela
   competiria com o redirecionamento que já está acontecendo. */
.funil-redirect-link{color:var(--txt2);font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.funil-redirect-link:hover{color:var(--txt)}
.funil-redirect-preview{margin-top:14px;color:var(--txt3);font-size:.82rem}
@media(max-width:640px){
  .funil-redirect-avisos li{font-size:.94rem}
}

/* ── CAPA EM COLUNA (tema.layout = "coluna") ──────────────────────────────
   Réplica da referência Holistic: logo centrada, texto numa coluna estreita
   ALINHADA À ESQUERDA, lista em cinza, botão laranja de largura do texto.
   Só vale pra funil que liga o modo — os outros não mudam. */
.funil-page--coluna .funil-bg-aurora{display:none}
/* POSIÇÃO, não só estilo: a página ocupa a altura toda — logo no topo, o bloco de
   texto no MEIO do espaço que sobra e o botão colado no rodapé (h1 e botão com
   margin-top:auto dividem a folga por igual). Era assim na referência. */
.funil-page--coluna .funil-page-inner{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.funil-page--coluna .funil-hero-marca{padding:40px 20px 0}
.funil-page--coluna .funil-hero{flex:1;width:100%;box-sizing:border-box;max-width:560px;margin:0 auto;display:flex;flex-direction:column;text-align:left;padding:32px 24px 18px}
.funil-page--coluna .funil-hero h1{margin-top:auto;font-size:clamp(1.75rem,6vw,2.4rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:#000;text-align:left;margin-bottom:54px}
.funil-page--coluna .funil-hero-corpo{font-size:1.3rem;line-height:1.6;font-weight:400;color:#6B7280;text-align:left;max-width:100%;margin:0 0 28px}
.funil-page--coluna .funil-hero-ctaintro{font-size:1.3rem;line-height:1.6;font-weight:400;color:#6B7280;text-align:left;max-width:100%;margin:0 0 44px}
.funil-page--coluna .funil-btn-bloco{margin-top:auto;align-self:flex-start;width:auto;max-width:100%;justify-content:flex-start;border-radius:4px;padding:20px 24px;font-size:1.15rem;font-weight:600;box-shadow:0 8px 20px -8px rgba(0,0,0,.25)}
.funil-page--coluna .funil-micro{text-align:left}
@media(max-width:640px){
  .funil-page--coluna .funil-hero-marca{padding:28px 16px 0}
  .funil-page--coluna .funil-hero{padding:24px 22px 18px}
  .funil-page--coluna .funil-hero h1{margin-bottom:40px}
  .funil-page--coluna .funil-hero-corpo,.funil-page--coluna .funil-hero-ctaintro{font-size:1.05rem}
  .funil-page--coluna .funil-btn-bloco{font-size:1rem;padding:18px 20px}
}

/* ── MOTION ENTRE PERGUNTAS ──────────────────────────────────────────────
   Cada pergunta é remontada (key) e sobe de baixo com fade — como no vídeo
   de referência. Quem pede menos movimento não recebe. */
@keyframes funil-q-sobe{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.funil-q-entra{animation:funil-q-sobe .46s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){.funil-q-entra{animation:none}}

/* ── SELETOR DE PAÍS DO WHATSAPP ─────────────────────────────────────── */
.funil-field-tel{position:relative}
.funil-tel-pais{display:flex;align-items:center;gap:8px;padding:0 10px;border:0;background:rgba(0,0,0,.045);
  color:var(--txt2);font:inherit;font-size:1.02rem;font-weight:500;cursor:pointer;white-space:nowrap}
.funil-tel-pais svg{opacity:.7}
.funil-bandeira{width:22px;height:16px;object-fit:cover;border-radius:2px;display:block;flex:none}
.funil-tel-lista{position:absolute;z-index:20;left:0;top:calc(100% - 4px);width:min(300px,100%);background:#fff;
  border:1px solid rgba(0,0,0,.1);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.14);overflow:hidden}
.funil-tel-busca{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.08);color:#6B7280}
.funil-field .funil-tel-busca input{border:0;padding:0;font-size:.92rem;font-weight:400;width:100%;background:none}
.funil-tel-itens{max-height:290px;overflow-y:auto}
.funil-tel-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;text-align:left;
  font:inherit;font-size:.92rem;color:#111;cursor:pointer}
.funil-tel-item:hover,.funil-tel-item[data-sel="1"]{background:#E5E9F0}
.funil-tel-item-ddi{color:#6B7280;font-size:.82rem}
.funil-tel-vazio{padding:14px 12px;color:#6B7280;font-size:.9rem}