/* =====================================================================
   LP Método Acelerador de VGV — Gabriel Capellari
   Portado de design_handoff_lp_tracao_vgv/ (protótipo React).

   Os seletores usam os atributos [data-m="..."] que o próprio protótipo
   já marcava. Nada de classe inventada: a media query mobile do handoff
   já mirava nessas âncoras, então ela veio quase literal.
   ===================================================================== */

/* ── Fontes: servidas daqui, nunca de CDN ───────────────────────────
   Subset latin apenas (U+0000-00FF cobre todo o português).           */
@font-face{font-family:'Barlow';src:url(../fonts/barlow-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(../fonts/barlow-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(../fonts/barlow-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(../fonts/barlow-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(../fonts/barlow-cond-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(../fonts/barlow-cond-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ── Fallbacks com a MESMA métrica ──────────────────────────────────
   Com `font-display:swap`, o texto aparece primeiro na fonte do sistema
   e é retrocado quando a Barlow chega. Se as larguras diferem, as linhas
   quebram em pontos diferentes e a página inteira dá um pulo — foi isso
   que jogou o CLS do celular para 0,208.

   O size-adjust foi medido comparando a largura da mesma frase nas duas
   fontes (Barlow Condensed 800 = 76,3% da Arial; Barlow 400 = 95,1%).
   Com o fallback ajustado, a quebra de linha é idêntica antes e depois
   da troca, e o reflow deixa de existir.                                */
@font-face{font-family:'Barlow Fallback';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:95.1%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Barlow Cond Fallback';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:76.3%;ascent-override:110%;descent-override:28%;line-gap-override:0%}

/* ── Tokens ───────────────────────────────────────────────────────── */
:root{
  --bg:#0B0B0D; --bg-alt:#12120F; --bg-hero:#050506; --bg-modal:#15140F;
  --txt:#F3EFE6; --txt-2:#CFC9BC; --txt-3:#8F8A7E;
  --ouro:#F2B01E; --ouro-claro:#FFC94A;
  --cta:linear-gradient(90deg,#FF7A00,#FFA200);
  --wa:#25D366; --wa-hover:#1EBE5A;
  --f-corpo:'Barlow','Barlow Fallback',Helvetica,Arial,sans-serif;
  --f-titulo:'Barlow Condensed','Barlow Cond Fallback',Helvetica,Arial,sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
/* Avisa o navegador que a página é escura: com isso a lista aberta do
   <select>, o cursor e a barra de rolagem vêm no tema escuro em vez de
   abrirem brancos por cima do formulário. */
:root{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--f-corpo);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ouro)}
a:hover{color:var(--ouro-claro)}
img{max-width:100%}
/* <picture> não pinta nada: o filho <img> é que deve herdar o layout. */
picture{display:contents}
[hidden]{display:none!important}
[data-m="ouro"]{color:var(--ouro)}

/* ── Animações ──────────────────────────────────────────────────────
   Só `transform` e `opacity` são animados: os dois rodam no compositor,
   sem repintar. A versão original animava `box-shadow`, que obriga o
   navegador a repintar o botão a cada quadro — com 7 botões pulsando ao
   mesmo tempo isso aparecia como trabalho de thread principal no
   Lighthouse ("evite animações não compostas").                        */
@keyframes pulseEscala{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@keyframes pulseBrilho{0%,100%{opacity:.45}50%{opacity:1}}

/* ── CTAs ─────────────────────────────────────────────────────────── */
[data-m="cta"],[data-m="cta2"]{
  position:relative;isolation:isolate;
  border:0;cursor:pointer;background:var(--cta);color:#fff;
  font-family:var(--f-corpo);font-weight:700;font-size:16px;
  letter-spacing:.02em;text-transform:uppercase;padding:18px 45px;
  animation:pulseEscala 1.8s ease-in-out infinite;
}
/* O brilho vive num pseudo-elemento: box-shadow fixo, só a opacidade pulsa. */
[data-m="cta"]::after,[data-m="cta2"]::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;box-shadow:0 0 24px 8px rgba(255,140,0,.6);
  animation:pulseBrilho 1.8s ease-in-out infinite;
}
[data-m="cta"]{border-radius:999px}
[data-m="cta2"]{border-radius:6px}
[data-m="cta"]:hover,[data-m="cta2"]:hover{filter:brightness(1.08)}
[data-m="cta2"][data-espaco="topo"]{margin-top:12px}
[data-m="cta2"][data-espaco="topo-p"]{margin-top:10px}

/* Respeita quem pediu menos movimento no sistema operacional. */
@media (prefers-reduced-motion:reduce){
  [data-m="cta"],[data-m="cta2"],[data-m="submit"]{animation:none}
  *{scroll-behavior:auto!important}
}

/* ══════════════════ FAIXA DO TOPO ══════════════════
   Vermelho #DC2626: contraste de 4,83:1 com o branco. Vermelhos mais
   vivos (#E53935, #EF4444) ficam abaixo de 4,5:1 e o texto some no sol.
   A faixa substitui a linha dourada de 6px que o hero tinha no alto.
   Barlow Condensed 800: pré-carregada e com fallback de métrica medida,
   então a faixa não muda de número de linhas quando a fonte chega. */
[data-m="faixa-topo"]{margin:0;padding:11px 16px;background:#DC2626;color:#fff;font-family:var(--f-titulo);font-weight:800;font-size:15px;line-height:1.25;letter-spacing:.1em;text-transform:uppercase;text-align:center;text-wrap:balance}

/* ══════════════════ HERO ══════════════════ */
[data-m="hero"]{position:relative;overflow:hidden;background:var(--bg-hero);min-height:720px;display:flex;align-items:center}
[data-m="hero-img"]{position:absolute;top:0;right:0;bottom:0;width:54%;min-width:400px}
/* object-position vertical: quanto MENOR a porcentagem, mais do topo da
   foto aparece. Em 70% o corte comia a cabeça; 40% enquadra o rosto
   inteiro com o letreiro do palco ao fundo. */
[data-m="hero-foto"]{width:100%;height:100%;object-fit:cover;object-position:right 40%;filter:saturate(.85) brightness(.9);display:block;transform:translateX(3%);transform-origin:right center}
/* A LP principal trocou de foto em 19/10/2026: retrato de estúdio, fundo
   liso e escuro, sujeito centralizado — o oposto da foto de palco que as
   variantes /campanha ainda usam.
   `right 40%` cortava 110px do topo e decepava o cabelo; 8% tira quase
   nada de cima e sobra no rodapé, onde só há mãos e banco. O brilho sobe
   porque a foto nova é escura e o véu dourado + degradê a escureciam mais.
   Escopado em :not([data-lp]) — as variantes têm o atributo e ficam como
   estão. Se um dia a foto delas mudar, remova o escopo. */
html:not([data-lp]) [data-m="hero-foto"]{object-position:center 8%;filter:saturate(.95) brightness(1.06)}
[data-m="hero-fade-x"],[data-m="hero-fade-y"],[data-m="hero-veu"]{position:absolute;inset:0;pointer-events:none}
[data-m="hero-fade-x"]{background:linear-gradient(90deg,#050506 0%,rgba(5,5,6,.96) 26%,rgba(5,5,6,.6) 50%,rgba(5,5,6,.15) 75%,rgba(5,5,6,.35) 100%)}
[data-m="hero-fade-y"]{background:linear-gradient(180deg,rgba(5,5,6,.35) 0%,rgba(5,5,6,0) 30%,rgba(5,5,6,0) 55%,#050506 100%)}
[data-m="hero-veu"]{background:rgba(242,176,30,.08);mix-blend-mode:multiply}

[data-m="hero-body"]{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:72px 24px 84px;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
[data-m="marca"]{display:flex;align-items:center;gap:10px;font-family:var(--f-titulo);font-weight:800;font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt)}
[data-m="losango"]{width:11px;height:11px;background:var(--ouro);display:inline-block;transform:rotate(45deg)}
[data-m="hero-body"] h1{margin:0;font-family:var(--f-titulo);font-weight:800;font-size:clamp(24px,3.4vw,43px);line-height:1;letter-spacing:.005em;text-wrap:pretty;max-width:640px}
/* Headline em 5 linhas no desktop, sem encolher a fonte.
   Acima de 1200px sobra preto à direita — o degradê do hero ainda cobre
   96% da foto nessa faixa — então o bloco pode ir a 700px sem o texto
   cair em cima da imagem. Abaixo disso a própria fonte já encolhe pelo
   clamp, e 640px continua fechando em 5 linhas. Medido em 1100, 1280,
   1440 e 1920: 5 linhas em todos. */
@media (min-width:1201px){
  [data-m="hero-body"] h1{max-width:700px}
}
[data-m="hero-body"] p{margin:0;font-size:clamp(16px,1.4vw,19px);color:var(--txt-2);max-width:520px;text-wrap:pretty}

[data-m="info"]{display:flex;flex-direction:column;gap:12px;padding:16px 20px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:16px;color:var(--txt);max-width:560px;backdrop-filter:blur(6px)}
[data-m="info"]>div{display:flex;align-items:center;gap:12px}
[data-m="info-dia"],[data-m="info-play"]{width:28px;height:28px;flex:none;border:2px solid var(--ouro);display:grid;place-items:center;color:var(--ouro)}
[data-m="info-dia"]{border-radius:5px;font-family:var(--f-titulo);font-weight:800;font-size:13px}
[data-m="info-play"]{border-radius:50%;font-size:12px;font-weight:700}

/* ══════════════════ SEÇÕES ══════════════════ */
[data-m="sec"]{padding:80px 24px;background:var(--bg)}
[data-m="sec"][data-fundo="alt"]{background:var(--bg-alt);border-top:1px solid rgba(255,255,255,.06)}
[data-m="sec"][data-fundo="metodo"]{padding:90px 24px;background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(242,176,30,.14),transparent 70%),var(--bg)}
/* ── Seções abaixo do topo: montadas só quando a pessoa chega perto ──
   Sem isto o navegador calcula estilo e layout da página inteira antes
   de pintar a primeira tela, e baixa as fotos dos depoimentos junto com
   a do topo — o "carregar depois" nativo do Chrome dispara a até 2.500 px
   de distância, o que no celular inclui o carrossel.
   `contain-intrinsic-size` é a altura reservada enquanto a seção não foi
   montada; o `auto` faz o navegador guardar a altura real depois da
   primeira vez, então rolar de volta não mexe em nada.
   A altura reservada é a do MIOLO: o padding da seção soma por cima.
   Médias medidas em 16/09 menos o padding — desktop 753 − 160, celular
   992 − 112, rodapé 140 − 80. Errar um pouco só faz a barra de rolagem
   se ajustar enquanto a pessoa desce. `auto none` na largura: seção é
   bloco e ocupa a largura do pai, não precisa de reserva horizontal. */
[data-m="sec"],footer{content-visibility:auto;contain-intrinsic-size:auto none auto 590px}
footer{contain-intrinsic-size:auto none auto 60px}
@media (max-width:760px){[data-m="sec"]{contain-intrinsic-size:auto none auto 880px}}
[data-m="sec"] h2{margin:0;font-family:var(--f-titulo);font-weight:800;font-size:clamp(21px,2.6vw,34px);line-height:1.02;text-transform:uppercase;text-wrap:pretty}
[data-m="sec"] p{margin:0;font-size:18px;color:var(--txt-2)}
[data-m="centro"]{text-align:center}

[data-m="grid"]{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:center}
[data-m="grid"][data-min="280"]{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
[data-m="col"]{display:flex;flex-direction:column;gap:20px}
[data-m="grid"][data-largura="980"] [data-m="col"]{gap:22px}
[data-m="nao-e"]{font-family:var(--f-titulo);font-weight:700;font-size:30px;text-transform:uppercase;color:var(--txt)!important}
[data-m="eyebrow"]{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)}

[data-m="reframe-card"]{background:#0E0E10;border:1px solid rgba(242,176,30,.28);border-radius:20px;padding:24px 22px 20px;box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);display:flex;flex-direction:column;gap:18px;width:100%}
[data-m="rc-top"]{display:flex;flex-direction:column;gap:14px}
[data-m="rc-top-header"]{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
[data-m="rc-badge-neg"]{background:#232730;color:#FFFFFF;font-family:var(--f-titulo);font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:100px;display:inline-flex;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.3)}
[data-m="rc-top-sub"]{color:#A0A5AC;font-size:13px;font-weight:400}
[data-m="rc-tags"]{display:flex;flex-wrap:wrap;gap:8px}
[data-m="rc-tag"]{display:inline-flex;align-items:center;gap:7px;border:1px dashed rgba(255,255,255,.25);border-radius:100px;padding:6px 12px 6px 7px;font-size:13px;color:#E2E1DF;background:rgba(255,255,255,.02);line-height:1.2}
[data-m="rc-x"]{width:17px;height:17px;border-radius:50%;background:#282C35;color:#8D949F;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex-shrink:0}
[data-m="rc-divider"]{height:1px;width:100%;background:linear-gradient(90deg,rgba(242,176,30,.4) 0%,rgba(242,176,30,.15) 60%,rgba(242,176,30,.02) 100%);margin:2px 0}
[data-m="rc-bottom"]{display:flex;flex-direction:column;gap:16px}
[data-m="rc-bot-title"]{display:flex;align-items:center;gap:8px;font-family:var(--f-titulo);font-weight:800;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:#FFFFFF}
[data-m="rc-raio"]{flex-shrink:0;filter:drop-shadow(0 0 6px rgba(242,176,30,.5))}
[data-m="rc-flow"]{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:4px}
[data-m="rc-step"]{aspect-ratio:1/1;min-height:72px;border:1.5px solid rgba(242,176,30,.45);border-radius:12px;background:#12110E;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ouro);box-shadow:inset 0 1px 0 rgba(242,176,30,.12)}
[data-m="rc-step-icon"]{display:flex;align-items:center;justify-content:center}
[data-m="rc-step-lbl"]{font-family:var(--f-titulo);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF}
[data-m="rc-arrow"]{color:rgba(242,176,30,.65);font-size:18px;font-weight:700;line-height:1;text-align:center;user-select:none}
[data-m="rc-step"][data-venda]{border-color:transparent;background:linear-gradient(145deg,#FFBE1A 0%,#E69D00 100%);box-shadow:0 0 24px rgba(242,176,30,.45);color:#0B0B0D}
[data-m="rc-step"][data-venda] [data-m="rc-step-lbl"]{color:#0B0B0D}
[data-m="rc-bot-footer"]{display:flex;align-items:center;gap:12px;margin-top:2px}
[data-m="rc-bot-footer"]::before,[data-m="rc-bot-footer"]::after{content:'';flex:1;height:1px;background:rgba(242,176,30,.35)}
[data-m="rc-bot-footer"] span{font-family:var(--f-titulo);font-weight:700;font-size:12px;letter-spacing:.06em;color:#A69E8F;text-transform:uppercase;text-align:center;white-space:nowrap}

/* ══════════════════ PROVA SOCIAL ══════════════════ */
[data-m="prova-wrap"]{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:40px}
[data-m="prova"]{
  width:100%;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
[data-m="prova"][data-arrastando]{cursor:grabbing}
[data-m="trilha"]{display:flex;gap:20px;width:max-content;will-change:transform}

[data-m="dep-card"]{width:256px;flex:none;display:flex;flex-direction:column;gap:12px}
[data-m="dep-media"]{position:relative;aspect-ratio:591/1280;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:repeating-linear-gradient(135deg,#1C1B17 0 12px,#161511 12px 24px);display:flex;align-items:center;justify-content:center;text-align:center}
[data-m="dep-media"] img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;pointer-events:none}
/* O iframe É o player: precisa receber clique para pausar, buscar e abrir
   em tela cheia. Nada de `pointer-events:none` aqui — isso vinha do desenho
   antigo, em que o vídeo era só um preview mudo com uma camada de clique
   por cima. E nada de `scale()`: ampliar empurra a barra de controles do
   YouTube para fora da área visível. */
/* Nenhum iframe nasce mais dentro do card — o player só existe no
   lightbox, senão ele engole o arrasto do carrossel. Regra removida. */
[data-m="dep-nome"]{font-family:var(--f-titulo);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.03em}
[data-m="dep-links"]{display:flex;flex-direction:column;gap:6px;margin-top:-6px}
[data-m="dep-links"] a{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--txt-2);text-decoration:none}
[data-m="dep-links"] a:hover{color:var(--ouro)}
[data-m="dep-links"] svg{flex:none}

/* ── Fachada de vídeo ───────────────────────────────────────────────
   O card mostra um poster estático (auto-hospedado) com botão de play.
   O iframe do YouTube só é criado no clique. Cada player embutido custa
   ~2 MB e trava a thread principal; com 6 deles a página abria em 12,9s
   no 4G. Poster + clique deixa isso em ~30 KB por card.                */
[data-m="dep-facade"]{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;display:block}
[data-m="dep-facade"] img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;pointer-events:none}
[data-m="dep-play-ico"]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.75);display:grid;place-items:center;color:#fff;backdrop-filter:blur(3px);transition:background .15s,border-color .15s,color .15s}
[data-m="dep-facade"]:hover [data-m="dep-play-ico"],
[data-m="dep-facade"]:focus-visible [data-m="dep-play-ico"]{background:rgba(242,176,30,.92);border-color:var(--ouro);color:var(--bg)}
[data-m="dep-facade"]:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}

/* ══════════════════ ANTES / DEPOIS ══════════════════ */
[data-m="ad-wrap"]{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:40px;align-items:center}
[data-m="ad-grid"]{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
[data-m="card"]{padding:36px 32px;border-radius:14px;display:flex;flex-direction:column;gap:20px}
[data-m="card"][data-variante="antes"]{background:var(--bg);border:1px solid rgba(255,255,255,.08)}
[data-m="card"][data-variante="depois"]{background:linear-gradient(180deg,rgba(242,176,30,.12),rgba(242,176,30,.03));border:1px solid rgba(242,176,30,.5)}
[data-m="card"] h3{margin:0;font-family:var(--f-titulo);font-weight:800;font-size:28px;line-height:1.05;text-transform:uppercase}
[data-m="card"][data-variante="antes"] h3{color:var(--txt-3)}
[data-m="card"][data-variante="depois"] h3{color:var(--ouro)}
[data-m="card"] ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;font-size:17px}
[data-m="card"][data-variante="antes"] ul{color:var(--txt-2)}
[data-m="card"][data-variante="depois"] ul{color:var(--txt)}
[data-m="card"] li{display:flex;gap:12px}
[data-m="marca-x"],[data-m="marca-v"]{font-weight:700;flex:none}
[data-m="marca-x"]{color:var(--txt-3)}
[data-m="marca-v"]{color:var(--ouro)}

/* ══════════════════ O MÉTODO ══════════════════ */
[data-m="metodo-wrap"]{max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
[data-m="metodo-h2"]{font-size:clamp(22px,2.9vw,37px)!important;line-height:1!important}
[data-m="metodo-lead"]{font-size:clamp(19px,2vw,24px)!important;color:var(--txt)!important;font-weight:500;max-width:720px;text-wrap:pretty}
[data-m="sem"]{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;width:100%;max-width:680px;text-align:left;border-top:1px solid rgba(255,255,255,.1)}
[data-m="sem"] li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:18px}
[data-m="sem"] li span{font-family:var(--f-titulo);font-weight:800;color:var(--ouro);font-size:20px;flex:none;text-transform:uppercase}

/* ══════════════════ AUTORIDADE ══════════════════ */
[data-m="foto"]{aspect-ratio:4/5;max-width:420px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.5)}
[data-m="foto"] img{width:100%;height:100%;object-fit:cover;object-position:52% center;display:block}
[data-m="nome-autoridade"]{font-size:clamp(26px,3.2vw,41px)!important;line-height:.98!important}
[data-m="stats"]{display:flex;gap:28px;flex-wrap:wrap}
[data-m="stat-n"]{font-family:var(--f-titulo);font-weight:800;font-size:40px;line-height:1;color:var(--ouro)}
[data-m="stat-l"]{font-size:14px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.08em}

/* ══════════════════ FOOTER ══════════════════ */
footer{padding:40px 24px;border-top:1px solid rgba(255,255,255,.06);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
footer [data-m="losango"]{width:10px;height:10px}
[data-m="copyright"]{font-size:13px;color:var(--txt-3)}

/* ══════════════════ LIGHTBOX ══════════════════ */
[data-m="lightbox"]{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:24px;z-index:60}
[data-m="lb-fechar"]{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:var(--txt);font-size:26px;cursor:pointer;display:grid;place-items:center}
[data-m="lb-caixa"]{max-width:min(92vw,720px);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:14px}
[data-m="lb-media"] img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:10px;display:block}
/* O 40vh é o que garante que o vídeo caiba em pé: como a proporção é
   9/16, a altura sai em 40vh*16/9 = 71vh, sobrando espaço para o nome
   embaixo. Amarrar só a largura e cortar com max-height deixava o vídeo
   com tarja preta em cima e embaixo nas telas mais baixas. */
[data-m="lb-media"] iframe{width:min(80vw,420px,40vh);aspect-ratio:9/16;border:0;border-radius:10px;background:#000;display:block}
[data-m="lb-nome"]{font-family:var(--f-titulo);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.03em}

/* ══════════════════ MODAL ══════════════════ */
[data-m="modal-bg"]{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
[data-m="modal"]{width:100%;max-width:480px;max-height:96vh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg-modal);border:1px solid rgba(242,176,30,.4);border-radius:16px;padding:24px 28px;display:flex;flex-direction:column;gap:12px;position:relative}
/* A caixa recebe o foco ao abrir (para não subir o teclado do celular),
   mas não deve desenhar contorno por causa disso. */
[data-m="modal"]:focus{outline:none}
[data-m="modal-fechar"]{position:absolute;top:12px;right:12px;border:0;background:transparent;color:var(--txt-3);font-size:22px;cursor:pointer;width:44px;height:44px}
[data-m="badge"]{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:10px 16px;border-radius:8px;background:linear-gradient(90deg,var(--ouro),var(--ouro-claro));color:var(--bg);font-family:var(--f-titulo);font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
[data-m="badge-ponto"]{width:8px;height:8px;border-radius:50%;background:var(--bg);display:inline-block}
[data-m="modal"] h3{margin:0;font-family:var(--f-titulo);font-weight:800;font-size:30px;line-height:1;text-transform:uppercase}
[data-m="modal-sub"]{margin:0;font-size:14px;color:var(--txt-2)}
[data-m="sucesso"]{padding:20px;border-radius:10px;background:rgba(242,176,30,.1);border:1px solid rgba(242,176,30,.4);font-size:16px;color:var(--txt)}
[data-m="sucesso-txt"]{margin:0}
/* Mesma casca do botão de envio: quem acabou de converter reconhece o
   verde do WhatsApp na hora. */
[data-m="sucesso-btn"]{
  position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;
  margin:16px 0 0;height:48px;border-radius:8px;text-decoration:none;
  background:var(--wa);color:#fff;font-weight:700;font-size:15px;
  letter-spacing:.02em;text-transform:uppercase;
  animation:pulseEscala 1.8s ease-in-out infinite;
}
[data-m="sucesso-btn"]::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:0 0 10px 3px rgba(37,211,102,.55);animation:pulseBrilho 1.8s ease-in-out infinite}
[data-m="sucesso-btn"]:hover{background:var(--wa-hover);color:#fff}
[data-m="sucesso-contagem"]{margin:10px 0 0;font-size:13px;color:var(--txt-3);text-align:center}
[data-m="erro"]{padding:12px 14px;border-radius:8px;background:rgba(255,90,70,.12);border:1px solid rgba(255,90,70,.45);font-size:14px;color:#FFC9C0}

[data-m="form"]{display:flex;flex-direction:column;gap:9px}
/* Campos e selects com a MESMA casca escura. */
[data-m="form"] input,[data-m="form"] select{
  height:44px;padding:0 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:var(--bg);color:var(--txt);
  font-size:15px;font-family:inherit;
}
[data-m="form"] input::placeholder{color:var(--txt-3)}

/* O Chrome pinta o autofill de amarelo-claro e ignora `background`, o que
   devolveria o campo branco justamente em nome/telefone/e-mail — os três
   que mais são preenchidos automaticamente. A sombra interna é a única
   forma de sobrescrever isso. */
[data-m="form"] input:-webkit-autofill,
[data-m="form"] input:-webkit-autofill:hover,
[data-m="form"] input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--txt);
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset;
  caret-color:var(--txt);
}
[data-m="form"] input:focus-visible,[data-m="form"] select:focus-visible{outline:2px solid var(--ouro);outline-offset:1px}
[data-m="modal-grid"]{display:grid;grid-template-columns:1fr 1fr;gap:9px}
[data-m="modal-grid"] input{min-width:0}

[data-m="submit"]{position:relative;isolation:isolate;margin:7px auto 0;width:70%;height:44px;border:0;cursor:pointer;background:var(--wa);color:#fff;font-family:var(--f-corpo);font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:uppercase;border-radius:6px;animation:pulseEscala 1.8s ease-in-out infinite;display:flex;align-items:center;justify-content:center;gap:10px}
[data-m="submit"]::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:0 0 10px 3px rgba(37,211,102,.55);animation:pulseBrilho 1.8s ease-in-out infinite}
[data-m="submit"]:hover{background:var(--wa-hover)}
[data-m="submit"][disabled]{opacity:.65;cursor:default;animation:none}
[data-m="submit"][disabled]::after{animation:none;opacity:0}
[data-m="privacidade"]{font-size:12px;color:var(--txt-3);text-align:center}

/* Honeypot: fora da tela, fora do fluxo, fora do foco.
   Nunca `display:none` — bot esperto ignora campo escondido assim. */
[data-m="hp"]{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ══════════════════ MOBILE ══════════════════ */
@media (max-width:760px){
  [data-m="faixa-topo"]{font-size:13px;padding:9px 14px;letter-spacing:.06em}
  [data-m="hero"]{min-height:0;display:block}
  [data-m="hero-img"]{position:relative;width:100%;min-width:0;height:62vw;min-height:300px;max-height:420px}
  /* A troca de arquivo é feita pelo <picture> no HTML, não aqui. Com
     content:url() o navegador baixava as DUAS imagens no celular. */
  [data-m="hero-foto"]{object-position:52% 20%;transform:none}
  [data-m="hero-fade-x"]{background:linear-gradient(90deg,rgba(5,5,6,.25),rgba(5,5,6,0) 40%)}
  [data-m="hero-fade-y"]{background:linear-gradient(180deg,rgba(5,5,6,.2) 0%,rgba(5,5,6,0) 35%,#050506 100%)}
  [data-m="hero-body"]{padding:8px 20px 56px;gap:18px;margin-top:-80px}
  /* LP principal: a foto nova é um retrato, e o bloco de texto puxado
     -80px cobria o peito dele. Em -36px a sobreposição cai de 72px para
     ~28px: aparece bem mais do personagem.
     O que desce em cima precisa voltar embaixo, senão o CTA sai da
     primeira tela. gap 18->14, rodapé 56->40 e a margem do CTA devolvem
     38px dos 44px. Medido: no Android 360x780 a folga do botão sai de
     52px para ~46px; no iPhone 14, de 132px para ~126px.
     Escopado como a foto (ver regra do hero-foto): as variantes
     /campanha mantêm a foto de palco e o enquadramento antigo. */
  html:not([data-lp]) [data-m="hero-body"]{margin-top:-36px;gap:14px;padding-bottom:40px}
  html:not([data-lp]) [data-m="cta"]{margin-top:0}
  /* Headline em 6 linhas no celular. Em px fixo era impossivel: 30px
     dava 6 linhas num 430 e 11 num 320. Em vw a fonte encolhe junto com
     a tela, entao a contagem fica igual em qualquer aparelho.
     Medido de 320 a 430px: 6 linhas em todos. 6,8vw ainda cabe, 7vw ja
     estoura para 7 no 320 — 6,6vw deixa a folga que o Safari do iPhone
     precisa, porque ele quebra linha um pouco antes do Chrome.
     Teto de 30px: acima de ~455px o vw passaria do tamanho antigo sem
     necessidade, ja que ali a headline ja fecha em 6 linhas sozinha. */
  [data-m="hero-body"] h1{font-size:clamp(20px,6.6vw,30px)}
  [data-m="hero-body"] p{font-size:16px}
  [data-m="info"]{font-size:14px;padding:14px 16px;width:100%}
  [data-m="cta"]{width:100%;padding:14px 16px;font-size:14px;margin-top:10px}
  [data-m="cta2"]{width:100%;padding:14px 16px;font-size:14px}

  [data-m="sec"]{padding:56px 20px}
  [data-m="sec"] h2{font-size:28px}
  [data-m="sec"] p{font-size:16px}
  [data-m="grid"]{gap:32px}
  [data-m="reframe-card"]{padding:18px 14px;border-radius:16px;gap:15px;width:100%;max-width:480px;margin:0 auto}
  [data-m="rc-top-sub"]{font-size:12px}
  [data-m="rc-tag"]{font-size:11.5px;padding:5px 9px 5px 6px;gap:5px}
  [data-m="rc-x"]{width:14px;height:14px;font-size:8px}
  [data-m="rc-bot-title"]{font-size:15px}
  [data-m="rc-step"]{min-height:56px;border-radius:8px;gap:3px}
  [data-m="rc-step-icon"] svg{width:18px;height:18px}
  [data-m="rc-step-lbl"]{font-size:9px}
  [data-m="rc-arrow"]{font-size:13px}
  [data-m="rc-bot-footer"] span{font-size:9px;white-space:normal}
  [data-m="col"]{width:100%}
  [data-m="nao-e"]{font-size:20px!important}

  [data-m="card"]{padding:26px 22px}
  [data-m="card"] h3{font-size:24px}
  [data-m="card"] li{font-size:16px}

  /* A máscara lateral atrapalha em tela estreita: some. */
  [data-m="prova"]{-webkit-mask-image:none;mask-image:none}
  [data-m="dep-card"]{width:min(80vw,320px)}
  [data-m="dep-nome"]{font-size:16px}

  [data-m="sem"] li{font-size:16px;padding:14px 0;gap:12px}
  [data-m="stats"]{gap:18px}
  [data-m="stat-n"]{font-size:30px}
  [data-m="stat-l"]{font-size:12px}
  [data-m="foto"]{max-width:100%;aspect-ratio:4/5}

  [data-m="modal-bg"]{padding:0}
  [data-m="modal"]{max-width:none;max-height:none;height:100dvh;border-radius:0;border:0;padding:20px 18px 24px;gap:10px;justify-content:center}
  [data-m="badge"]{font-size:14px;padding:8px 12px}
  [data-m="modal"] h3{font-size:26px}
  [data-m="modal-sub"]{font-size:13px}
  [data-m="form"]{gap:8px}
  [data-m="form"] input,[data-m="form"] select{height:42px;font-size:15px}
  [data-m="modal-grid"]{gap:8px}
  [data-m="submit"]{height:44px;font-size:13px;margin-top:8px;width:100%;white-space:nowrap}
  /* Ancorado no próprio aviso — no protótipo esta regra era
     `form > div:last-child`, que na prática escondia os campos
     imobiliária/cidade depois que o aviso saiu do markup. */
  [data-m="privacidade"]{display:none}
}