/* =========================================================
   Adshield · Landing de prospecção (variante D · base escura)
   Estrutura herdada de uma LP de gateway: hero centralizado,
   barra de pilares, blocos de formulário, grid de diferenciais,
   esteira de 4 passos e FAQ.
   Identidade conforme Brand Bible v1.0: roxo oficial #7C1AB8,
   gradiente sempre ascendente (Roxo Profundo -> Roxo Adshield),
   base clara em ~70% branco e cinza-lilás, ~20% roxos,
   ~10% quase-preto. O roxo é acento, nunca área cheia.

   Esta é a variante de fundo branco. A gêmea de fundo escuro vive em
   landing-prospeccao-d, com a mesma marcação e os mesmos nomes de token:
   só os valores do bloco :root e alguns fundos mudam. Ficam escuros de
   propósito a barra do topo, o bloco roxo da chamada final e os cartões de
   foto e vídeo, onde o escuro é o fundo certo para a mídia.
   ========================================================= */

:root{
  /* --- cores oficiais (Brand Bible 6.3) --- */
  --roxo:#7C1AB8;
  --roxo-prof:#4A0D6E;
  --quase-preto:#0C0810;   /* segue existindo: é o fundo da mídia */
  --fundo:#F7F5FB;
  --grafite:#17111F;
  --branco:#FFFFFF;
  --grad:linear-gradient(120deg,#4A0D6E 0%,#7C1AB8 100%);
  /* O roxo da barra do topo, que desde 18/09/2026 também é o dos botões de
     ação. É token, e não hex repetido, porque a barra e os botões precisam
     andar juntos: se um dia a página voltar ao roxo oficial, muda aqui e
     muda nos dois. O rgb dele, 139/35/214, é o que aparece nas sombras. */
  --roxo-barra:#8B23D6;

  /* --- apoio em base clara ---
     Os nomes são os mesmos da variante escura, e só os valores mudam: assim
     uma correção feita lá se traduz aqui sem procurar equivalência. A tinta
     é o quase-preto da marca, e o roxo de texto é o oficial, que sobre
     branco tem contraste de sobra. */
  --roxo-claro:#7C1AB8;
  --tinta:#16121C;
  --surface:#FFFFFF;
  --surface-2:#F1EDF8;
  --linha:rgba(22,18,28,.10);
  --linha-2:rgba(22,18,28,.17);
  /* Os dois cinzas de texto subiram duas vezes, em 18/09/2026, porque o
     Giraud não conseguia ler direito. Foram de .72 e .55 para .86 e .78.

     O primeiro ajuste, para .64, só tirava o secundário da reprova da WCAG:
     dava 5,54 sobre branco, acima do mínimo de 4,5. Passar no mínimo e ler
     bem não são a mesma coisa, e o mínimo é chão, não meta. Em .78 ele dá
     9,23 sobre branco e 7,98 sobre a faixa cinza.

     Os dois ficam a oito pontos de distância um do outro para a hierarquia
     entre texto e apoio não se perder agora que os dois são escuros.

     A variante escura não usa estes números, porque lá o texto é claro sobre
     fundo escuro e a conta é outra. */
  --texto:rgba(22,18,28,.86);
  --texto-3:rgba(22,18,28,.78);

  --f-head:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:18px;
  --maxw:1080px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--f-body);font-weight:400;color:var(--tinta);background:var(--fundo);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;width:100%;position:relative}

/* --- O FUNDO DA PÁGINA -----------------------------------------------------
   Uma camada só, do topo ao rodapé, atrás de todo o conteúdo. É ela que faz
   a página não ter emenda: em vez de cada seção ter o seu fundo, com borda
   entre uma e outra, o roxo atravessa tudo e as seções ficam transparentes
   por cima.

   São luzes largas alternando entre a esquerda e a direita, em alturas
   diferentes, mais uma variação de tom no sentido vertical. Nenhuma imagem,
   só gradiente, então não pesa no carregamento.

   z-index negativo põe a camada atrás de qualquer filho do body, e o
   position:relative acima é o que faz o inset:0 medir a altura inteira do
   documento, e não só a da tela. */
body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 640px at 86% 4%,rgba(124,26,184,.10),transparent 62%),
    radial-gradient(760px 520px at 6% 17%,rgba(124,26,184,.07),transparent 64%),
    radial-gradient(1020px 700px at 94% 37%,rgba(124,26,184,.08),transparent 66%),
    radial-gradient(860px 580px at 2% 54%,rgba(124,26,184,.06),transparent 64%),
    radial-gradient(980px 660px at 88% 70%,rgba(124,26,184,.09),transparent 66%),
    radial-gradient(820px 560px at 10% 88%,rgba(124,26,184,.06),transparent 64%),
    linear-gradient(180deg,#F7F5FB 0%,#FFFFFF 24%,#F4F0FA 48%,#FFFFFF 72%,#F6F2FB 100%)}

/* --- A GRADE E A LUZ DO TOPO ----------------------------------------------
   Esta camada desenha a textura de grade e o brilho roxo do alto da página.

   Ela morava no .hero, com inset:0, e por isso começava exatamente na borda
   de cima da seção. Como o cabeçalho não tem fundo próprio, aparecia um risco
   horizontal logo abaixo da barra roxa, onde a textura nascia do nada. Não
   adiantava suavizar a máscara: o problema não era a borda estar dura, era a
   camada ter uma borda ali.

   Aqui ela começa no topo da página, atrás do cabeçalho. Não existe risco
   porque acima dela não existe página. Embaixo ela morre sozinha, pela
   máscara, antes de encostar no fim da própria altura.

   Fica no body, e não no hero, porque o hero tem overflow:hidden, que serve
   às bolinhas e aos cards de plataforma e cortaria qualquer coisa que
   tentasse subir por cima do cabeçalho.

   A grade era de linha cheia, fina e quase invisível. Em 18/09/2026 virou a
   mesma grade tracejada das faixas, no mesmo ladrilho de 78px, e mais forte:
   o Giraud pediu o quadriculado mais à mostra, dividindo o fundo.

   A última camada, o cinza chapado, é o que dá o tom diferente ao alto da
   página. Ele não precisa de borda nem de fim: a mesma máscara que apaga a
   grade apaga o cinza junto, então o topo nasce acinzentado e a página volta
   ao branco sozinha, sem emenda em lugar nenhum.

   A máscara cresceu junto, para a grade chegar mais longe antes de sumir. O
   número que importa nela é este: a altura da camada é 1000px, e a máscara
   precisa estar transparente antes disso, senão a grade termina numa borda
   dura, que foi o defeito que tirou esta camada do hero. Com o centro em 28%
   e raio de 700px, a borda de baixo está a 720px do centro, ou seja, 103% do
   raio, passado o corte de 80%. Quem mexer em um destes três números refaça
   essa conta. */
body::after{content:"";position:absolute;top:0;left:0;right:0;height:1000px;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(860px 460px at 50% 3%,rgba(124,26,184,.14),transparent 64%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Cpath d='M78 0H0v78' fill='none' stroke='%2316121C' stroke-opacity='.2' stroke-width='1' stroke-dasharray='6 6'/%3E%3C/svg%3E"),
    linear-gradient(rgba(22,18,28,.042),rgba(22,18,28,.042));
  background-size:auto,78px 78px,auto;
  -webkit-mask-image:radial-gradient(1000px 700px at 50% 28%,#000,transparent 80%);
  mask-image:radial-gradient(1000px 700px at 50% 28%,#000,transparent 80%)}

h1,h2,h3,h4{font-family:var(--f-head);letter-spacing:-.03em;line-height:1.12}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(124,26,184,.34)}
:focus-visible{outline:2px solid var(--roxo-claro);outline-offset:3px;border-radius:8px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative;scroll-margin-top:76px}
.sec-pad{padding:96px 0}
.hl{color:var(--roxo-claro)}
.grad-text{background:linear-gradient(120deg,#9B44D6 0%,#C08CEA 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* O alinhamento é pelo topo, e não pelo centro, porque o texto pode quebrar
   em mais de uma linha: centralizado, o losango descia para o meio do bloco
   inteiro e ficava torto em relação à primeira linha. Preso no topo, ele
   desce sozinho a metade de uma linha pela margem do próprio losango, e cai
   no centro óptico da primeira, com uma linha ou com três.

   A margem está em em para acompanhar o tamanho da fonte, que muda no
   celular: a conta é (linha de 1,6em menos o losango de 0,61em) dividida por
   dois. */
.eyebrow{display:inline-flex;align-items:flex-start;gap:9px;font-family:var(--f-head);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--roxo-claro)}
.eyebrow i{width:.61em;height:.61em;margin-top:.5em;border-radius:2px;background:var(--roxo-claro);transform:rotate(45deg);box-shadow:0 0 0 4px rgba(124,26,184,.18);flex:none}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f-head);font-weight:600;font-size:14.5px;padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.25s;white-space:nowrap}
.btn svg{width:15px;height:15px;flex:none;transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
/* O botão principal respira: infla de leve e a luz roxa cresce junto, num
   ciclo longo. É movimento para o olho achar o botão numa página escura, não
   para chamar atenção, então o ritmo é lento e a diferença de tamanho é
   pequena. No hover a respiração para, senão ela brigaria com o levantar. */
.btn-primary{background:var(--roxo-barra);color:#fff;
  animation:btnRespira 5.2s cubic-bezier(.45,0,.45,1) infinite}
.btn-primary:hover{transform:translateY(-2px);animation:none;
  box-shadow:0 22px 46px -12px rgba(139,35,214,.95)}
@keyframes btnRespira{
  0%,100%{transform:scale(1);box-shadow:0 12px 30px -14px rgba(124,26,184,.6)}
  50%{transform:scale(1.035);box-shadow:0 22px 52px -12px rgba(139,35,214,1)}
}
@media(prefers-reduced-motion:reduce){
  .btn-primary{animation:none;box-shadow:0 14px 34px -12px rgba(139,35,214,.8)}
}
.btn-ghost{background:rgba(22,18,28,.04);border-color:var(--linha-2);color:var(--tinta)}
.btn-ghost:hover{background:rgba(22,18,28,.07);transform:translateY(-2px)}
.btn-row{display:flex;justify-content:center;margin-top:44px}

/* ================= NAV =================
   A barra é uma faixa roxa dentro do .wrap, e não o cabeçalho inteiro: é
   isso que permite ela encolher sem a página tremer. Quando o main.js põe a
   classe is-encolhido, três coisas mudam ao mesmo tempo, com transição: a
   largura da área, o arredondamento e a altura.

   O cabeçalho fica grudado no topo e tem fundo próprio nenhum, então a
   página passa por baixo dele. */
header.nav{position:sticky;top:0;z-index:60;padding:16px 0;transition:padding .35s cubic-bezier(.16,.84,.44,1)}
header.nav > .wrap{transition:max-width .35s cubic-bezier(.16,.84,.44,1)}
/* Cor chapada, e não degradê, desde 18/09/2026: o Giraud mandou uma
   referência de barra lisa. O tom é o dela, #8B23D6, que é mais claro que o
   roxo oficial #7C1AB8. É mais um roxo na página, e está anotado junto das
   outras ressalvas de roxo no README. Branco sobre ele fica em 6,35 de
   contraste, folgado para os links do menu. */
.nav-barra{display:flex;align-items:center;gap:22px;
  padding:10px 10px 10px 22px;border-radius:20px;
  background:var(--roxo-barra);
  box-shadow:0 18px 44px -22px rgba(102,20,160,.85);
  transition:padding .35s cubic-bezier(.16,.84,.44,1),border-radius .35s,box-shadow .35s}
.nav-logo{flex:none;display:flex;align-items:center}
.nav-logo img{height:28px;width:auto;transition:height .35s}

.nav-links{display:flex;align-items:center;gap:22px;flex:1;justify-content:center}
.nav-links a{font-family:var(--f-head);font-size:14px;font-weight:500;color:rgba(255,255,255,.88);
  padding:6px 2px;position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-cta{flex:none;padding:11px 20px;font-size:13.5px}
.nav-cta svg{width:14px;height:14px}

/* Encolhido: a área aperta, a barra arredonda até virar pílula e tudo baixa
   um pouco de altura. */
header.nav.is-encolhido{padding:10px 0}
header.nav.is-encolhido > .wrap{max-width:900px}
.is-encolhido .nav-barra{padding:7px 7px 7px 18px;border-radius:999px;
  box-shadow:0 14px 32px -18px rgba(74,13,110,.5)}
.is-encolhido .nav-logo img{height:25px}
.is-encolhido .nav-cta{padding:10px 18px;font-size:13px}

@media(prefers-reduced-motion:reduce){
  header.nav,header.nav > .wrap,.nav-barra,.nav-logo img{transition:none}
}
@media(max-width:940px){
  /* Sem espaço para os links: sobram a marca e a ação, que é o que importa. */
  .nav-links{display:none}
  .nav-barra{justify-content:space-between;padding:8px 8px 8px 16px}
  header.nav.is-encolhido > .wrap{max-width:none}
}
/* No celular a barra estourava a tela. O logo e o botão somados passavam da
   largura de dentro da barra, e como o botão não quebra linha ele vazava e
   era cortado pela borda da página.

   A primeira correção apertou os tamanhos e ficou com pouca folga, e o bug
   voltou: medir texto no olho não fecha, porque a largura real depende da
   métrica da fonte, que muda de aparelho para aparelho. Então aqui a folga é
   grande de propósito.

   Três coisas dão espaço: a margem lateral do cabeçalho cai de 24 para 16, a
   seta do botão sai (é decoração, e é a primeira coisa que pode sair sem
   perder sentido) e tudo encolhe um degrau. Numa tela de 390px isso deixa
   cerca de 118px sobrando, e numa de 320px ainda sobram 48px.

   E o logo passa a poder encolher: ele era flex:none, e por isso a barra não
   tinha como se ajustar sozinha em nenhuma largura. */
@media(max-width:620px){
  header.nav > .wrap{padding:0 16px}
  .nav-barra{gap:10px;padding:6px 6px 6px 14px;min-width:0}
  .nav-logo{flex:0 1 auto;min-width:0;overflow:hidden}
  .nav-logo img{height:22px}
  .nav-cta{padding:9px 14px;font-size:12.5px;min-width:0}
  .nav-cta svg{display:none}
  .is-encolhido .nav-barra{padding:5px 5px 5px 13px}
  .is-encolhido .nav-logo img{height:21px}
  .is-encolhido .nav-cta{padding:8px 13px;font-size:12px}
}

/* ================= HERO ================= */
.hero{overflow:hidden;text-align:center;padding:96px 0 104px}
/* A grade e a luz do topo não moram mais aqui: elas subiram para o body.
   O porquê está no comentário da camada, logo abaixo do fundo da página. */
/* --- As bolinhas que sobem no hero ---
   Cada uma carrega o próprio tamanho, altura de subida, desvio lateral e
   opacidade em variáveis, escritas pelo main.js. A animação é uma só, e o
   que muda de bolinha para bolinha são os números, não o código.

   Ficam atrás do conteúdo, que tem z-index 2, e o overflow:hidden do hero
   corta o que passa da borda. */
.particulas{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Cada bolinha é um ponto de luz, não um pontinho chapado: o halo em volta
   é o que faz ela aparecer sem virar um pontinho chapado. */
.particulas i{position:absolute;bottom:-12px;border-radius:50%;
  width:var(--tam);height:var(--tam);background:var(--cor);opacity:0;
  box-shadow:0 0 var(--halo) var(--cor);
  animation:sobeBolinha var(--tempo) linear infinite}
@keyframes sobeBolinha{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:var(--op)}
  88%{opacity:var(--op)}
  100%{transform:translate3d(var(--desvio),calc(-1 * var(--subida)),0);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .particulas{display:none}
}
/* No celular não há bolinha nenhuma. Quem já não as cria é o main.js, mas ele
   mede a largura uma vez só, no carregamento: quem abre no desktop e estreita
   a janela depois continuaria com elas na tela. O corte de verdade é este,
   porque o CSS reage à largura sempre. */
@media(max-width:620px){
  .particulas{display:none}
}
.hero-inner{position:relative;z-index:2;max-width:790px;margin:0 auto}
.hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:700;line-height:1.06;margin:20px 0 0}
.hero p.sub{color:var(--texto);font-size:clamp(14.5px,1.7vw,16.5px);font-weight:300;max-width:600px;margin:24px auto 0}
.hero .btn{margin-top:34px}


/* ================= BLOCO DE FORMULÁRIO ================= */
/* Sem fundo e sem borda: o cartão do formulário já se destaca sozinho, e
   faixa com borda era justamente o que cortava a página em fatias. */
.form-sec{background:transparent}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.form-copy h2{font-size:clamp(26px,3.4vw,38px);font-weight:700}
.form-copy .steps{margin-top:34px;display:flex;flex-direction:column;gap:26px}
.form-copy .steps h3{font-size:16.5px;font-weight:600;letter-spacing:-.02em;padding-top:16px;border-top:1px solid var(--linha)}
.form-copy .steps p{color:var(--texto-3);font-size:14px;font-weight:300;margin-top:8px;max-width:400px}

.lead-form{background:var(--surface);border:1px solid var(--linha);border-radius:20px;padding:26px 24px;position:relative;overflow:hidden;box-shadow:0 30px 60px -36px rgba(22,18,28,.26)}
.lf-progress{height:4px;border-radius:999px;background:rgba(22,18,28,.10);overflow:hidden;margin-bottom:20px}
.lf-fill{display:block;height:100%;width:50%;border-radius:999px;background:var(--grad);transition:width .45s cubic-bezier(.16,.84,.44,1)}
.lf-step{display:none;flex-direction:column;gap:11px}
.lf-step.is-active{display:flex;animation:lfIn .35s ease}
@keyframes lfIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.lf-head{margin-bottom:5px}
.lf-head strong{display:block;font-family:var(--f-head);font-size:18px;font-weight:600;letter-spacing:-.02em}
.lf-head span{display:block;font-size:12.5px;font-weight:300;color:var(--texto-3);margin-top:6px;line-height:1.5}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.lf-field input,.lf-field select,.lf-field textarea{width:100%;background:#FBF9FD;border:1px solid var(--linha-2);border-radius:11px;padding:13px 14px;font-family:var(--f-body);font-size:14px;color:var(--tinta);transition:border-color .2s,background .2s}
.lf-field input::placeholder,.lf-field textarea::placeholder{color:rgba(22,18,28,.38)}
.lf-field select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316121C' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
.lf-field select:required:invalid{color:rgba(22,18,28,.38)}
.lf-field option{background:#fff;color:var(--tinta)}
.lf-field textarea{resize:vertical;min-height:84px}
.lf-field input:focus,.lf-field select:focus,.lf-field textarea:focus{outline:none;border-color:var(--roxo);background:rgba(124,26,184,.08)}
.lf-field.invalid input,.lf-field.invalid select,.lf-field.invalid textarea{border-color:#D9536F;background:rgba(217,83,111,.08)}
.lf-btn{width:100%;background:var(--roxo-barra);color:#fff;font-family:var(--f-head);font-weight:600;font-size:14.5px;border:none;border-radius:12px;padding:15px;cursor:pointer;margin-top:4px;box-shadow:0 14px 32px -12px rgba(139,35,214,.8);transition:.25s}
.lf-btn:hover{transform:translateY(-2px);box-shadow:0 20px 42px -12px rgba(139,35,214,.95)}
.lf-btn:disabled{opacity:.7;cursor:default;transform:none}
.lf-note{font-size:11px;font-weight:300;color:var(--texto-3);text-align:center;margin:2px 0 0;line-height:1.5}
.lf-actions{display:flex;gap:10px;align-items:stretch}
.lf-actions .lf-btn{margin-top:0;flex:1}
.lf-back{background:none;border:1px solid var(--linha-2);color:var(--texto-3);font-family:var(--f-head);font-weight:600;font-size:13.5px;border-radius:12px;padding:0 18px;cursor:pointer;flex:none;transition:.2s}
.lf-back:hover{border-color:var(--roxo);color:var(--roxo)}

/* ===== OS TRÊS NÚMEROS DO HERO (variante G) =====
   Vieram do hero dividido da variante F, onde ficavam alinhados à esquerda,
   embaixo do parágrafo. Em 05/10/2026 o topo voltou a ser centralizado e eles
   vieram junto: a fileira centraliza, e em tela estreita quebra em linhas em
   vez de espremer os três lado a lado.

   O resto do hero dividido saiu daqui: .hero-grid, os ajustes de .hero-inner
   e de tipo, e o .hero-form. Quem manda no topo de novo é o bloco .hero lá
   em cima, o mesmo das variantes D e E. */
.hero-nums{display:flex;flex-wrap:wrap;justify-content:center;gap:34px;margin-top:30px}
.hero-nums strong{display:block;font-family:var(--f-head);font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--tinta)}
.hero-nums span{display:block;font-size:12px;font-weight:300;color:var(--texto-3);margin-top:2px}
/* O botão do hero já ganha margem do .hero .btn, lá em cima. Aqui ele só
   precisa de um respiro a mais, porque os números entraram na frente dele. */
.hero-sec{margin-top:30px}

/* O FORMULÁRIO DO TOPO SAIU DO HTML em 05/10/2026, mas o CSS dele continua
   aqui embaixo (.lead-form-topo e os .lf-*), junto com o envio que ficou no
   main.js. Está parado de propósito: o bloco volta inteiro se precisar,
   enquanto a troca por WhatsApp não fecha. Quando fechar, isso tudo sai. */
.lead-form-topo{padding:30px 28px;border-radius:24px}
.lead-form-topo .lf-step{gap:14px}
.lead-form-topo .lf-head{margin-bottom:6px}
.lead-form-topo .lf-head strong{font-size:21px}
.lf-field{display:block}
.lf-rotulo{display:block;font-family:var(--f-head);font-size:12.5px;font-weight:500;color:var(--tinta);margin-bottom:6px}
.lf-tel{display:grid;grid-template-columns:112px 1fr;gap:8px}
.lf-tel select,.lf-tel input{width:100%;background:#FBF9FD;border:1px solid var(--linha-2);border-radius:11px;padding:13px 14px;font-family:var(--f-body);font-size:14px;color:var(--tinta)}
.lf-tel select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316121C' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:30px}
.lf-tel input::placeholder{color:rgba(22,18,28,.38)}
.lf-tel select:focus,.lf-tel input:focus{outline:none;border-color:var(--roxo);background:rgba(124,26,184,.08)}
.lf-field.invalid .lf-tel input{border-color:#D9536F;background:rgba(217,83,111,.08)}
.lead-form-topo .lf-btn{border-radius:999px;margin-top:8px;padding:16px}
.lf-erro{margin:10px 0 0;font-size:12.5px;font-weight:400;line-height:1.5;color:#B23A54;background:rgba(217,83,111,.1);border:1px solid rgba(217,83,111,.3);border-radius:11px;padding:10px 12px}
.lf-erro a{color:#B23A54;text-decoration:underline}
/* ===== A ESTRUTURA CERTA PARA A FASE (variante F) =====
   O SVG estica no cartão (preserveAspectRatio none), e o cartão tem a mesma
   proporção do viewBox, 5 por 4, então nada deforma. Os chips são HTML por
   cima, em porcentagem do cartão, para a imagem não borrar. As ondas
   respiram de baixo para cima, cada uma no seu tempo. */
.fase-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.fase-olho{display:block;font-family:var(--f-head);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--roxo)}
.fase-titulo{margin-top:16px;font-size:clamp(28px,3.5vw,40px);font-weight:300;line-height:1.14;letter-spacing:-.01em;text-transform:uppercase}
.fase-titulo b{font-weight:800}
.fase-copy p{margin-top:22px;max-width:470px;color:var(--texto-3);font-size:15.5px;font-weight:300}
.fase-copy p b{font-weight:600;color:var(--tinta)}
.fase-copy .btn{margin-top:30px}
.fase-cartao{position:relative;aspect-ratio:5/4;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#F6F0FC 100%);border:1px solid var(--linha);box-shadow:0 40px 80px -48px rgba(74,13,110,.5)}
.fase-graf{position:absolute;inset:0;width:100%;height:100%}
.fase-grade line{stroke:rgba(74,13,110,.08);stroke-width:1;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.fase-linha{fill:none;stroke:#E4D3FA;stroke-width:2.5;vector-effect:non-scaling-stroke}
.fase-ponto{fill:#fff;stroke:#8B1CD4;stroke-width:3;vector-effect:non-scaling-stroke}
.fase-onda,.fase-linha,.fase-graf .o2{transform-box:view-box;transform-origin:50% 100%}
.o1{animation:faseRespira 7s ease-in-out infinite}
.o2{animation:faseRespira 5.6s ease-in-out -1.8s infinite}
.o3{animation:faseRespira 8.4s ease-in-out -3s infinite}
@keyframes faseRespira{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.07)}}
.fase-chip{position:absolute;display:grid;place-items:center;border-radius:18px;background:#fff;border:1px solid rgba(124,26,184,.18);box-shadow:0 18px 36px -16px rgba(74,13,110,.55);animation:faseChip 5s ease-in-out infinite;translate:-50% -50%}
.fase-chip img{width:62%;height:62%;object-fit:contain}
.c-meta{left:50%;top:18%;width:74px;height:74px;border-radius:21px}
.c-google{left:17%;top:33%;width:54px;height:54px;animation-delay:-1.6s}
.c-escudo{left:76%;top:45%;width:50px;height:50px;border-radius:15px;animation-delay:-3.2s}
@keyframes faseChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.o1,.o2,.o3,.fase-chip{animation:none}}
@media(max-width:940px){
  .fase-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:620px){
  .c-meta{width:58px;height:58px;border-radius:17px}
  .c-google{width:44px;height:44px;border-radius:14px}
  .c-escudo{width:40px;height:40px;border-radius:12px}
}

/* ===== ANTES E DEPOIS (variante F) =====
   As duas camadas ocupam o cartão inteiro. O antes fica embaixo, com a lista
   à esquerda; o depois fica por cima, com a lista à direita, e o clip-path
   mostra dele só o que está à direita da divisória (--pos). */
.dif{position:relative;height:440px;border-radius:26px;overflow:hidden;border:1px solid var(--linha);box-shadow:0 40px 80px -48px rgba(74,13,110,.45);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.dif-lado{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 56px}
.dif-antes{background:#F3F1F6;align-items:flex-start}
.dif-depois{background:linear-gradient(135deg,#4A0D6E 0%,#7C1AB8 60%,#8B1CD4 100%);align-items:flex-end;clip-path:inset(0 0 0 var(--pos));color:#fff}
.dif-lado ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:15px;max-width:42%}
.dif-lado li{display:flex;align-items:center;gap:11px;font-size:15px;line-height:1.4}
.dif-lado li svg{width:18px;height:18px;flex:none}
.dif-antes li{color:rgba(22,18,28,.6)}
.dif-antes li svg{color:rgba(22,18,28,.4)}
.dif-depois ul{align-items:flex-end}
.dif-depois li{flex-direction:row-reverse;text-align:right;font-weight:500}
.dif-depois li svg{color:#E4D3FA}
.dif-selo{display:inline-block;font-family:var(--f-head);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:999px}
.dif-antes .dif-selo{background:rgba(22,18,28,.06);border:1px solid rgba(22,18,28,.12);color:rgba(22,18,28,.55)}
.dif-depois .dif-selo{background:#fff;color:var(--roxo)}
.dif-linha{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 18%,#fff 82%,rgba(255,255,255,0));box-shadow:0 0 0 1px rgba(124,26,184,.25);pointer-events:none}
.dif-alca{position:absolute;top:50%;left:var(--pos);width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:none;background:#fff;color:var(--roxo);display:grid;place-items:center;cursor:ew-resize;box-shadow:0 12px 30px -8px rgba(74,13,110,.55),0 0 0 6px rgba(255,255,255,.35);transition:transform .2s}
.dif-alca:hover,.dif.is-arrastando .dif-alca{transform:scale(1.08)}
.dif-alca:focus-visible{outline:3px solid #E4D3FA;outline-offset:3px}
.dif-alca svg{width:24px;height:24px}
@media(max-width:940px){
  .dif{height:500px}
  .dif-lado{padding:0 28px}
  .dif-lado ul{max-width:44%}
  .dif-lado li{font-size:13.5px}
}
@media(max-width:620px){
  /* No celular o espaço é pouco e o texto encostava na divisória, com a alça
     em cima da linha do meio. Cada lado ganha uma coluna estreita colada na
     sua borda, e o miolo fica livre para a alça. */
  .dif{height:auto;min-height:440px;border-radius:20px}
  .dif-lado{padding:26px 14px}
  .dif-lado ul{max-width:none;width:41%;gap:14px}
  .dif-lado li{font-size:12px;line-height:1.35;gap:6px;align-items:flex-start}
  .dif-lado li svg{width:13px;height:13px;margin-top:2px}
  .dif-depois li{gap:6px}
  .dif-selo{font-size:9px;letter-spacing:.06em;padding:5px 9px;white-space:nowrap}
  .dif-alca{width:40px;height:40px;margin:-20px 0 0 -20px}
  .dif-alca svg{width:18px;height:18px}
}


@media(max-width:620px){
  .hero-nums{gap:22px 26px;margin-top:24px}
  .lead-form-topo{padding:24px 20px}
}

/* ================= CABEÇALHO DE SEÇÃO ================= */
.sec-head{text-align:center;max-width:720px;margin:0 auto 52px}
.sec-head h2{font-size:clamp(27px,3.8vw,42px);font-weight:700}
.sec-head p{color:var(--texto-3);font-weight:300;font-size:15px;margin-top:16px}

/* --- A coroa em cima de "players" ---
   Presa na palavra, não na seção: a âncora é o span em volta dela, então a
   coroa acompanha a palavra em qualquer largura de tela, inclusive quando a
   linha quebra em outro ponto.

   A largura vem em em, e não em px, então ela cresce e encolhe junto com o
   título, que é fluido. Uma medida em px daria uma coroa gigante no celular.

   O encaixe é o margin-bottom negativo: sem ele a coroa flutuaria acima das
   letras; com ele ela desce e se apoia no topo da palavra.

   A inclinação mora numa variável porque precisa ser repetida dentro da
   animação: transform não soma, ele substitui, e sem isso a coroa ficaria
   reta ao flutuar. */
.coroada{position:relative;display:inline-block}
.coroa{--giro:-16deg;position:absolute;left:50%;bottom:100%;margin-bottom:-.3em;
  width:1.45em;height:auto;pointer-events:none;
  filter:drop-shadow(0 10px 14px rgba(22,18,28,.28));
  transform:translateX(-50%) rotate(var(--giro));
  animation:coroaFlutua 5.4s ease-in-out infinite}
@keyframes coroaFlutua{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(var(--giro))}
  50%{transform:translateX(-50%) translateY(-6px) rotate(var(--giro))}
}
@media(prefers-reduced-motion:reduce){
  .coroa{animation:none}
}

/* ================= QUEM ESTÁ COM A ADSHIELD =================
   Esteira de rostos que corre sozinha, sangrando até a borda da tela. O
   trilho é duplicado pelo JavaScript e a animação anda exatamente metade
   dele, então o laço não tem emenda visível. O vão entre os cards é
   margin-right, e não gap, justamente para que metade do trilho caia numa
   borda de card: com gap, sobraria meio vão e o laço saltaria. */
.fan{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
/* A distância e a duração vêm do JavaScript, que mede um conjunto de cards
   e conta quantas cópias a tela precisa. O padrão de 50% serve só para o
   caso de o script não rodar. */
.fan-trilho{display:flex;width:max-content;animation:fanCorre 54s linear infinite}
.fan:hover .fan-trilho,.fan:focus-within .fan-trilho{animation-play-state:paused}
@keyframes fanCorre{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--desloca,50%)))}}

.fan-card{position:relative;flex:none;width:212px;aspect-ratio:3/4;margin-right:16px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#1A1226;transition:border-color .3s,transform .3s}
.fan-card:hover{border-color:rgba(124,26,184,.5);transform:translateY(-4px)}
.fan-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Enquanto a foto não existe, o monograma segura o card. */
.fan-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-size:46px;font-weight:700;letter-spacing:-.05em;color:rgba(255,255,255,.26);
  background:radial-gradient(150% 90% at 50% 0%,rgba(124,26,184,.55),transparent 62%),#1A1226}
/* A cortina que faz o nome ficar legível por cima de qualquer foto. */
.fan-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(12,8,16,.55) 66%,rgba(12,8,16,.94) 100%)}
.fan-id{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 12px;text-align:center}
.fan-id strong{display:block;font-family:var(--f-head);font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:#fff}
.fan-id small{display:block;font-size:11.5px;font-weight:400;color:#C08CEA;margin-top:3px}

@media(prefers-reduced-motion:reduce){
  .fan{overflow-x:auto}
  .fan-trilho{animation:none}
}
@media(max-width:620px){
  .fan-card{width:164px;margin-right:12px}
  .fan-mono{font-size:38px}
}

/* ================= AS TRÊS CONTAS =================
   Três cards soltos na página, sem moldura em volta: duas contas em uso e
   uma de reserva. Uma cai, a reserva assume, a reposição entra no lugar da
   que caiu e a reserva volta a ficar de pé.

   O laço fecha sem salto porque o último momento tem exatamente o mesmo
   estado do primeiro: o que muda entre os dois é só o texto. Foi assim de
   propósito, senão a volta ao início pareceria um defeito.

   O CSS conhece três estados de conta e não conhece momento nenhum. Quem
   escreve o estado de cada card é o main.js, num data-estado.

   O flutuar mora numa animação, e o estado nunca mexe em transform: se
   mexesse, uma coisa apagaria a outra, porque transform é uma propriedade
   só. Estado se diz em cor, borda, sombra e ícone. */
.est-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:940px;margin:0 auto}

.est-card{position:relative;text-align:center;padding:28px 22px;border-radius:20px;
  background:var(--surface);border:1px solid var(--linha);
  box-shadow:0 26px 50px -30px rgba(22,18,28,.34);
  animation:estFlutua 6s ease-in-out infinite;
  transition:border-color .35s,background .35s,box-shadow .35s,opacity .35s}
.est-card:nth-child(2){animation-delay:-2s}
.est-card:nth-child(3){animation-delay:-4s}
@keyframes estFlutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* O ícone é o sinal mais rápido de todos, e por isso ele é grande. Os três
   desenhos ficam no HTML e o estado escolhe qual aparece: assim o JavaScript
   não precisa saber desenhar nada. */
.est-ic{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;transition:color .35s,background .35s,border-color .35s,box-shadow .35s}
.est-ic svg{width:26px;height:26px;stroke:currentColor;display:none}

.est-nome{display:block;font-family:var(--f-head);font-size:15px;font-weight:600;letter-spacing:-.02em}
.est-tag{display:inline-block;margin-top:10px;font-family:var(--f-head);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  transition:color .35s,background .35s,border-color .35s}
.est-diz{font-size:13px;font-weight:400;color:var(--texto);line-height:1.6;margin-top:14px;min-height:40px}

/* --- conta no ar ---
   Era verde, e virou roxo em 18/09/2026 a pedido do Giraud. Com isso a
   reserva teve que sair do roxo e ir para o neutro, senão as duas ficariam
   da mesma cor e o desenho perderia a leitura. Ficou assim: roxo é conta
   operando, cinza tracejado é conta de pé esperando, vermelho é conta
   derrubada. O verde sai desta seção e continua valendo no resto da página
   como cor de estado. */
.est-card[data-estado="ativa"]{border-color:rgba(124,26,184,.32);
  box-shadow:0 26px 50px -30px rgba(22,18,28,.3),0 0 60px -26px rgba(124,26,184,.6)}
.est-card[data-estado="ativa"] .est-ic{color:var(--roxo);background:rgba(124,26,184,.11);border-color:rgba(124,26,184,.28)}
.est-card[data-estado="ativa"] .ic-ok{display:block}
.est-card[data-estado="ativa"] .est-tag{color:var(--roxo);background:rgba(124,26,184,.1);border:1px solid rgba(124,26,184,.28)}

/* --- conta de reserva, de pé --- */
.est-card[data-estado="reserva"]{border-style:dashed;border-color:var(--linha-2);
  box-shadow:0 20px 40px -30px rgba(22,18,28,.28)}
.est-card[data-estado="reserva"] .est-ic{color:var(--texto-3);background:rgba(22,18,28,.05);border-color:var(--linha-2)}
.est-card[data-estado="reserva"] .ic-reserva{display:block}
.est-card[data-estado="reserva"] .est-tag{color:var(--texto-3);background:rgba(22,18,28,.05);border:1px solid var(--linha-2)}

/* --- conta derrubada --- */
.est-card[data-estado="caiu"]{border-color:rgba(217,83,111,.4);background:rgba(217,83,111,.05);opacity:.8;
  box-shadow:0 18px 36px -30px rgba(22,18,28,.3)}
.est-card[data-estado="caiu"] .est-ic{color:#C2334F;background:rgba(217,83,111,.12);border-color:rgba(217,83,111,.34)}
.est-card[data-estado="caiu"] .ic-x{display:block}
.est-card[data-estado="caiu"] .est-tag{color:#C2334F;background:rgba(217,83,111,.1);border:1px solid rgba(217,83,111,.3)}
.est-card[data-estado="caiu"] .est-nome{color:var(--texto-3)}

/* O momento em que a reserva assume é o ponto da explicação inteira, então
   ele ganha um anel que acende uma vez e some. */
.est-card.assumiu .est-ic{animation:estAssume 1.2s ease-out}
@keyframes estAssume{
  0%{box-shadow:0 0 0 0 rgba(124,26,184,.5)}
  70%{box-shadow:0 0 0 16px rgba(124,26,184,0)}
  100%{box-shadow:0 0 0 0 rgba(124,26,184,0)}
}

/* A janela e a ressalva ficam fora dos cards, numa linha discreta: elas são
   nota de rodapé da cena, não parte dela. */
.est-pe{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:34px;text-align:center}
.est-sla{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:400;color:var(--texto)}
.est-sla svg{width:16px;height:16px;color:var(--roxo-claro);flex:none}
.est-sla strong{font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--tinta);letter-spacing:-.01em}
/* Só o ponto separador, que é filho direto do pé. Sem o sinal de filho
   este seletor pegava também o "Janela de reposição", que mora num span
   dentro do .est-sla, e pintava ele com a cor de uma borda. */
.est-pe > span{color:var(--linha-2)}
.est-nota{font-size:12.5px;font-weight:400;color:var(--texto)}

@media(prefers-reduced-motion:reduce){
  .est-card{animation:none}
  .est-card.assumiu .est-ic{animation:none}
  .est-card,.est-ic,.est-tag{transition:none}
}
@media(max-width:780px){
  .est-cards{grid-template-columns:1fr;max-width:400px}
  .est-diz{min-height:0}
}

/* ================= SITUAÇÕES ================= */
/* ================= O QUE TRAVA A ESCALA =================
   Único bloco da página em vermelho, e de propósito: aqui o assunto é
   problema, e vermelho é cor de ESTADO, não da marca. É o mesmo vermelho
   que o ciclo usa na conta derrubada, para a página ter um vermelho só.
   O roxo continua sendo o acento de tudo que é Adshield. */
/* O destaque do título desta seção acompanha a cor dos cartões: aqui a
   palavra em evidência é o problema, não a marca. */
.hl-alerta{color:#C2334F}
.sit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sit-card{background:var(--surface);border:1px solid rgba(217,83,111,.26);border-radius:18px;padding:26px 22px;position:relative;overflow:hidden;transition:.3s}
.sit-card::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,#D9536F,#F09BAE);transition:width .5s cubic-bezier(.16,.84,.44,1)}
.sit-card:hover{border-color:rgba(217,83,111,.62);transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(217,83,111,.5)}
.sit-card:hover::after{width:100%}
.sit-card h3{font-size:15.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:9px}
.sit-card p{font-size:12.5px;font-weight:300;color:var(--texto-3);line-height:1.65}
/* O ladrilho de ícone no lugar do número. Ele balança de leve quando o
   cartão recebe o mouse: o suficiente para dar vida, sem virar desenho
   animado. */
.sit-ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  background:rgba(217,83,111,.10);border:1px solid rgba(217,83,111,.3);color:#C2334F;transition:transform .4s cubic-bezier(.16,.84,.44,1),background .3s}
.sit-ic svg{width:21px;height:21px;stroke:currentColor}
.sit-card:hover .sit-ic{background:rgba(217,83,111,.2);transform:translateY(-2px) rotate(-6deg)}
@media(prefers-reduced-motion:reduce){
  .sit-card:hover .sit-ic{transform:none}
}

/* ================= O QUE A ADSHIELD ENTREGA =================
   OS SEIS CARTÕES VIRARAM RECADOS DE PAPEL NUMA PAREDE, a pedido do Giraud
   em 05/10/2026. Cada um está preso por um pregador, e uma trilha pontilhada
   liga um ao outro.

   A metáfora não é enfeite: a seção é a lista do que a Adshield deixa de pé
   enquanto você anuncia, e lista de recado pregado é como essa coisa aparece
   na mesa de quem opera. A trilha é o que diz que os seis são um caminho, e
   não seis itens soltos.

   Três peças fazem o papel parecer papel, e nenhuma delas é imagem:
     . a inclinação, diferente em cada folha, que vem da variável --giro
     . o canto quase reto, porque recado de papel não tem borda arredondada
     . a sombra em duas camadas: uma rente, do papel encostado na parede, e
       uma larga e baixa, do papel que se solta dela

   O verde continua sendo a cor da seção. Ele saiu da borda, que agora é de
   papel, e foi para o ícone e para a trilha. */
.hl-ok{color:#0F8A5F}

/* --- A parede ---
   A seção NÃO tem fundo próprio: ela corre no fundo da página, como corria
   antes dos recados. Cheguei a pintar uma parede bege aqui em 05/10/2026, e
   o Giraud mandou tirar no mesmo dia.

   Ele tem razão, e vale deixar escrito para ninguém repintar: quem faz a
   parede é a sombra, não a cor. A folha com sombra em duas camadas já se lê
   como papel apoiado em alguma coisa, e a grade pontilhada do site, que
   atravessa aqui porque nada a cobre, já dá a textura. O bege só somava uma
   mancha quente no meio de uma página que é lilás de ponta a ponta. */

/* Três colunas, então os seis itens caem em 3x2. O vão entre elas deixou de
   ser respiro e virou peça: é dentro dele que a trilha pontilhada corre, e
   por isso ele é largo. O respiro de cima abre espaço para o pregador, que
   sobe acima da folha. */
.ent-grid{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:46px;row-gap:62px;padding-top:20px}

.ent-card{--giro:-1.4deg;--giro-clip:2deg;
  position:relative;padding:32px 24px 28px;border-radius:3px;
  border:1px solid rgba(22,18,28,.07);
  background:linear-gradient(168deg,#FFFFFF 0%,#FCFDFA 55%,#F1F7F1 100%);
  transform:rotate(var(--giro));
  box-shadow:0 1px 2px rgba(22,18,28,.11),
             0 16px 28px -18px rgba(22,18,28,.45);
  transition:transform .45s cubic-bezier(.16,.84,.44,1),box-shadow .45s}

/* Cada folha foi pregada por uma mão, não por uma régua: as inclinações são
   todas diferentes, e o pregador tem a sua, independente da folha. Sem isso
   os seis ficam alinhados e o papel volta a parecer cartão. */
.ent-card:nth-child(1){--giro:-1.6deg;--giro-clip:3deg}
.ent-card:nth-child(2){--giro:1.1deg;--giro-clip:-2.5deg}
.ent-card:nth-child(3){--giro:-.7deg;--giro-clip:1.5deg}
.ent-card:nth-child(4){--giro:1.4deg;--giro-clip:-3deg}
.ent-card:nth-child(5){--giro:-1.2deg;--giro-clip:2deg}
.ent-card:nth-child(6){--giro:.9deg;--giro-clip:-1.5deg}

/* O reveal da rolagem termina em transform:none, e transform não soma: ele
   substitui. Sem repetir a inclinação aqui, a folha nasceria torta e ficaria
   reta no instante em que entrasse na tela.

   A transição também é redeclarada aqui pelo mesmo motivo. A regra .reveal
   mora no fim do arquivo e, com o mesmo peso, a última escrita vence: ela
   apagaria a transição da sombra e deixaria o papel se soltando da parede
   sem a sombra acompanhar. Com .ent-card.reveal o peso sobe e as duas
   convivem, a entrada e o mouse. */
.ent-card.reveal{transform:translateY(22px) rotate(var(--giro));
  transition:opacity .7s cubic-bezier(.16,.84,.44,1),
             transform .55s cubic-bezier(.16,.84,.44,1),
             box-shadow .45s}
.ent-card.reveal.in{transform:rotate(var(--giro))}

/* No mouse a folha se endireita e se solta da parede. É o movimento de quem
   pega o recado para ler: ela gira até o prumo e a sombra abre embaixo. */
.ent-card:hover,
.ent-card.reveal.in:hover{transform:rotate(0deg) translateY(-7px);
  box-shadow:0 2px 3px rgba(22,18,28,.09),
             0 30px 44px -24px rgba(22,18,28,.5)}

/* --- O PREGADOR ---
   Madeira em cima e embaixo, metal no meio: a faixa cinza entre 41% e 53% é
   a mola, e é ela que faz o desenho ser lido como pregador e não como uma
   tarjeta qualquer. Fica acima da folha no empilhamento, porque pregador
   segura o papel por cima. */
.ent-card::before{content:"";position:absolute;z-index:3;
  top:-16px;left:50%;width:15px;height:33px;
  border-radius:4px 4px 6px 6px;
  transform:translateX(-50%) rotate(var(--giro-clip));
  background:linear-gradient(180deg,#F2E5CA 0%,#E7D4AF 40%,
                                     #A9B2BD 41%,#98A2AE 53%,
                                     #E2CFA8 54%,#D3BC91 100%);
  box-shadow:0 3px 7px -1px rgba(22,18,28,.42),
             inset 0 0 0 1px rgba(124,94,52,.32)}

/* --- A TRILHA PONTILHADA ---
   Corre no vão à direita de cada folha e morre na última coluna. Os pontos
   são um radial-gradient repetido, e não uma borda tracejada, porque borda
   tracejada dá traço e o que se quer aqui é bolinha.

   A contra-rotação é o detalhe que importa: a trilha nasce dentro da folha,
   então herda a inclinação dela. Girando ao contrário na mesma medida, ela
   volta ao nível e liga duas folhas tortas por uma linha reta. */
.ent-card::after{content:"";position:absolute;z-index:0;
  top:50%;left:100%;width:46px;height:10px;margin-top:-5px;
  transform:rotate(calc(var(--giro) * -1));
  background-image:radial-gradient(circle at center,rgba(51,194,122,.6) 2px,transparent 2.4px);
  background-size:11px 10px;background-repeat:repeat-x;background-position:left center}
/* A última coluna não liga a nada: depois dela vem a borda da seção. */
.ent-card:nth-child(3n)::after{display:none}

.ent-card h3{font-size:15.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:9px}
.ent-card p{font-size:12.5px;font-weight:300;color:var(--texto-3);line-height:1.65}
/* Ícone em círculo, com um anel de luz em volta, no lugar do ladrilho
   quadrado. É o que a referência usa, e combina com o verificado redondo que
   flutua no título. */
.ent-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  background:rgba(51,194,122,.12);border:1px solid rgba(51,194,122,.34);color:#0F8A5F;
  box-shadow:0 0 0 6px rgba(51,194,122,.07);
  transition:transform .4s cubic-bezier(.16,.84,.44,1),background .3s,box-shadow .3s}
.ent-ic svg{width:24px;height:24px;stroke:currentColor}
.ent-card:hover .ent-ic{background:rgba(51,194,122,.2);box-shadow:0 0 0 8px rgba(51,194,122,.1);transform:translateY(-2px)}
/* Quem pediu menos movimento mantém o papel: a inclinação e o pregador são
   desenho, não animação. O que sai é só o que se mexe. */
@media(prefers-reduced-motion:reduce){
  .ent-card,.ent-card.reveal,.ent-card.reveal.in{transition:none}
  .ent-card:hover,.ent-card.reveal.in:hover{transform:rotate(var(--giro))}
  .ent-card:hover .ent-ic{transform:none}
}

/* --- A tabela de taxas, que abre --- */
.taxas-abre{display:flex;justify-content:center;margin-top:30px}
/* Botão de contorno, mais leve que os de ação: ele abre detalhe, não leva a
   lugar nenhum. Quando o painel está aberto ele se preenche. */
.btn-linha{background:transparent;border-color:rgba(124,26,184,.55);color:var(--roxo-claro)}
.btn-linha:hover{background:rgba(124,26,184,.14);border-color:var(--roxo);transform:translateY(-2px)}
.btn-linha.is-aberto{background:var(--roxo-barra);border-color:transparent;color:#fff;
  box-shadow:0 14px 34px -14px rgba(139,35,214,.8)}
.taxas-painel{margin-top:34px;animation:taxasEntra .4s cubic-bezier(.16,.84,.44,1)}
.taxas-painel .sec-head{margin-bottom:26px}
.taxas-painel h3{font-size:clamp(20px,2.6vw,27px);font-weight:700;letter-spacing:-.03em}
.taxas-painel .faq{max-width:760px;margin:0 auto}
@keyframes taxasEntra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .taxas-painel{animation:none}
}

/* ================= NOSSOS NÚMEROS =================
   Um número herói e uma fileira de indicadores. O que dá vida à seção:

     . a contagem dos números, que roda quando a seção entra na tela (main.js)
     . a textura de grade no fundo, a mesma do hero, presa por máscara
     . a régua vertical de cada indicador, que vira roxa no hover

   Nada disso inventa dado: é tipografia e luz. O valor que aparece no fim da
   contagem é exatamente o que está escrito no HTML. */
.num-sec{overflow:hidden}
.num-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(22,18,28,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(22,18,28,.045) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(680px 420px at 12% 40%,#000,transparent 72%);
  mask-image:radial-gradient(680px 420px at 12% 40%,#000,transparent 72%)}
.num-sec::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 18% 46%,rgba(124,26,184,.12),transparent 64%)}
.num-sec > .wrap{position:relative;z-index:2}
.num-titulo{font-size:clamp(27px,3.8vw,42px);font-weight:700;margin-top:18px;max-width:620px}

.num-heroi{position:relative;margin-top:64px}
/* O halo atrás do número, que dá peso sem pesar no arquivo. */
.num-heroi::before{content:"";position:absolute;left:-4%;top:-18%;width:70%;height:136%;pointer-events:none;
  background:radial-gradient(60% 60% at 40% 50%,rgba(155,68,214,.26),transparent 70%);filter:blur(22px)}
.num-heroi strong{position:relative;display:block;font-family:var(--f-head);font-weight:800;letter-spacing:-.05em;line-height:.92;
  font-size:clamp(64px,12vw,148px);font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--tinta) 44%,rgba(22,18,28,.68));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.num-legenda{position:relative;display:block;font-size:14px;font-weight:300;color:var(--texto-3);max-width:420px;margin-top:18px;line-height:1.55}

/* --- SELOS FLUTUANTES ------------------------------------------------------
   Peças soltas por cima do conteúdo: o logo do Meta no número herói e o
   cadeado no título dos problemas.

   A base cuida só de posição e do flutuar. O cartão branco é uma classe
   separada, porque o cadeado flutua sem cartão nenhum, e assim ninguém
   precisa desligar estilo que não deveria ter ligado.

   A inclinação mora numa variável, porque ela precisa ser repetida dentro da
   animação: transform não soma, ele substitui, e sem isso o selo perderia a
   inclinação ao flutuar. */
.selo-flutua{--giro:-8deg;position:absolute;display:flex;align-items:center;justify-content:center;
  transform:rotate(var(--giro));animation:seloFlutua 5s ease-in-out infinite}
.selo-flutua img{object-fit:contain}
@keyframes seloFlutua{
  0%,100%{transform:rotate(var(--giro)) translateY(0)}
  50%{transform:rotate(var(--giro)) translateY(-8px)}
}

/* O cartão branco, para o selo que precisa de um. */
.selo-cartao{border-radius:20px;background:#fff;
  border:1px solid var(--linha);
  box-shadow:0 18px 36px -16px rgba(22,18,28,.28),0 0 0 6px rgba(124,26,184,.07)}

/* Os cards de plataforma do hero. Ficam pendurados no bloco de texto, dois
   de cada lado, em alturas diferentes. O bloco tem 790px e a área de
   conteúdo passa de mil, então há folga lateral para eles: por isso as
   posições são negativas.

   Cada um tem inclinação e atraso próprios, senão os quatro subiriam e
   desceriam juntos, o que denuncia a animação na hora. */
.selo-plat{width:76px;height:76px;border-radius:21px;padding:13px}
.selo-plat img{width:100%;height:100%;object-fit:contain;border-radius:9px}
.selo-plat[data-pos="ga"]{--giro:-11deg;left:-126px;top:8%;animation-delay:-.4s}
.selo-plat[data-pos="meta"]{--giro:10deg;right:-130px;top:2%;animation-delay:-2.2s}
.selo-plat[data-pos="tiktok"]{--giro:9deg;left:-112px;bottom:14%;animation-delay:-3.4s}
.selo-plat[data-pos="kwai"]{--giro:-8deg;right:-118px;bottom:6%;animation-delay:-1.3s}
/* Os quatro arquivos têm o mesmo tamanho, mas o desenho dentro de cada um
   ocupa uma fatia diferente da imagem: Meta 98%, Google 85%, Kwai 73% e
   TikTok 66%. Com o mesmo padding para todos, os dois últimos apareciam
   visivelmente menores dentro do card, e não era impressão.

   O padding aqui é o que compensa a diferença: com 6px o desenho do TikTok e
   com 9px o do Kwai saem do mesmo tamanho do Google, por volta de 42px. O
   fundo dos três arquivos é branco puro, o mesmo do card, então aumentar o
   desenho não faz aparecer quadrado nenhum atrás dele. */
.selo-plat[data-pos="tiktok"]{padding:6px}
.selo-plat[data-pos="kwai"]{padding:9px}

/* Abaixo disto não há margem lateral que caiba o card ao lado do texto sem
   ele entrar por cima da headline. Em vez de sumirem, os quatro trocam de
   arranjo: saem das laterais e vão para os cantos das faixas vazias que
   sobram acima do título e abaixo do botão, que são a folga de padding do
   próprio hero.

   Por isso as posições são negativas: elas medem a partir da borda do bloco
   de texto para fora, e caem dentro do padding, nunca em cima de uma linha.
   Os números acompanham esse padding, que é 96/104 aqui e 66/76 no celular,
   e é isso que garante que o card fique na faixa vazia e não encoste na
   primeira nem na última linha. */
@media(max-width:1160px){
  .selo-plat{width:64px;height:64px;border-radius:18px;padding:11px}
  .selo-plat[data-pos="ga"]{left:-8px;top:-64px;bottom:auto;right:auto}
  .selo-plat[data-pos="meta"]{right:-8px;top:-64px;bottom:auto;left:auto}
  .selo-plat[data-pos="tiktok"]{left:-8px;bottom:-70px;top:auto;right:auto;padding:5px}
  .selo-plat[data-pos="kwai"]{right:-8px;bottom:-70px;top:auto;left:auto;padding:8px}
}
@media(max-width:620px){
  .selo-plat{width:52px;height:52px;border-radius:15px;padding:9px}
  .selo-plat[data-pos="ga"],.selo-plat[data-pos="meta"]{top:-56px}
  /* Só os dois de cima ficam no celular. Os de baixo caíam perto do botão e
     da seção seguinte, e ali a tela já está cheia. */
  .selo-plat[data-pos="tiktok"],.selo-plat[data-pos="kwai"]{display:none}
}

/* O selo do número: a linha é inline-block, então tem exatamente a largura do
   número, e o selo fica preso no canto de cima à direita mesmo se o valor
   mudar de 100MM para outro. */
.num-heroi-linha{position:relative;display:inline-block;max-width:100%}
.num-selo{right:-26px;top:-16px;width:76px;height:76px}
.num-selo img{width:46px;height:46px}

/* O cabeçalho que segura um selo no canto. */
.sec-head.com-selo{position:relative}

/* O cadeado flutua solto, sem cartão atrás. Como não tem caixa, a sombra vai
   na própria imagem, senão ele fica chapado no fundo escuro. Vira para o
   mesmo lado do cartão do Meta, e um pouco mais. */
/* O halo do cadeado é vermelho, na cor da seção de problemas, e vem em duas
   camadas: uma colada no desenho e uma aberta em volta. */
.selo-cadeado{--giro:14deg;right:-14px;top:-42px;
  filter:drop-shadow(0 14px 20px rgba(22,18,28,.3))
         drop-shadow(0 0 16px rgba(217,83,111,.45))
         drop-shadow(0 0 40px rgba(217,83,111,.22))}
.selo-cadeado img{width:66px;height:66px}

/* O verificado, na esquerda do título das entregas. Mesma peça do cadeado,
   espelhada: inclina para o outro lado, fica do lado oposto e flutua fora de
   compasso, para os dois não subirem juntos na rolagem. O halo é verde,
   acompanhando a cor daquela seção. */
/* Mais afastado que o cadeado porque o título desta seção é mais comprido,
   e a -14px ele encostava nas letras. Ainda sobra folga até a borda do
   .wrap, que é 180px mais larga que o bloco do cabeçalho de cada lado. */
.selo-verificado{--giro:-13deg;left:-56px;top:-46px;animation-delay:-3.1s;
  filter:drop-shadow(0 14px 20px rgba(22,18,28,.3)) drop-shadow(0 0 16px rgba(51,194,122,.3))}
.selo-verificado img{width:66px;height:66px}

/* auto-fit para a fileira continuar certa se um número entrar ou sair. */
.num-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:56px;padding-top:34px;border-top:1px solid var(--linha)}
.num-item{position:relative;padding:4px 20px 4px 20px}
/* A régua entre um indicador e o outro. A primeira não tem, senão a fileira
   ganharia uma borda solta na margem esquerda. */
.num-item::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--linha);transition:background .3s}
.num-item:first-child{padding-left:0}
.num-item:first-child::before{display:none}
.num-item:hover::before{background:var(--roxo)}
.num-item strong{display:block;font-family:var(--f-head);font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.num-item span{display:block;font-size:12.5px;font-weight:300;color:var(--texto-3);margin-top:9px;line-height:1.5}

@media(prefers-reduced-motion:reduce){
  .selo-flutua{animation:none}
}
@media(max-width:780px){
  .num-heroi{margin-top:44px}
  /* Menor e mais alto que no desktop: no celular o número encolhe até o
     mínimo do clamp, e o selo no tamanho de antes cobria o último M. Aqui ele
     encosta só no topo da letra, em vez de sentar em cima dela. */
  .num-selo{right:-18px;top:-32px;width:46px;height:46px;border-radius:14px}
  .num-selo img{width:27px;height:27px}
  .selo-cadeado{right:-6px;top:-34px}
  .selo-cadeado img{width:50px;height:50px}
  .selo-verificado{left:-6px;top:-34px}
  .selo-verificado img{width:50px;height:50px}
  .num-grid{grid-template-columns:1fr 1fr;gap:26px 0;margin-top:40px}
  .num-item:nth-child(odd){padding-left:0}
  .num-item:nth-child(odd)::before{display:none}
}

/* --- A faixa cinza ---
   Mesma ideia da faixa dos depoimentos: a página corre num fundo contínuo de
   propósito, e a faixa é a exceção que segura um bloco inteiro junto. Ela
   veste "Como a Adshield opera" e "Quem somos", que ficam separadas pelas
   outras seções, então a página alterna claro e faixa em vez de empilhar
   duas faixas seguidas.

   Na seção da operação ela também dá o contraste que os três cards precisam,
   porque eles são brancos e sobre branco ficavam só com a sombra para se
   sustentar. E o card da reserva é transparente por dentro, então sobre a
   faixa ele fica cinza enquanto os outros dois ficam brancos: isso não é
   efeito colateral e sim leitura a mais, o que está em uso acende e o que
   está de pé não. */
/* A grade tracejada vem de um SVG embutido, e não de gradiente: gradiente não
   varia nos dois eixos ao mesmo tempo, então ele sabe fazer uma linha cheia,
   mas não uma linha picotada em um eixo e repetida no outro. O tracejado é
   nativo em SVG, com stroke-dasharray, e o arquivo inteiro cabe numa linha de
   CSS, sem requisição nenhuma.

   O ladrilho tem 78px e desenha só duas arestas, a de cima e a da esquerda.
   Ladrilhado, a aresta de um quadrado encosta na do vizinho e a grade fecha
   sozinha, então nenhuma linha é desenhada duas vezes. */
.faixa-cinza{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Cpath d='M78 0H0v78' fill='none' stroke='%2316121C' stroke-opacity='.13' stroke-width='1' stroke-dasharray='6 6'/%3E%3C/svg%3E"),
                   linear-gradient(180deg,#EFEDF3 0%,#E6E3EC 100%);
  background-size:78px 78px,auto}

/* --- A faixa dos depoimentos ---
   Esta é a única seção com fundo próprio. A página inteira corre num fundo
   contínuo de propósito, para não ficar cortada em fatias, e aqui a quebra é
   justamente o efeito: a faixa segura os vídeos num bloco só e faz o cartão
   do meio saltar.

   Nasceu cinza, passou por um lilás lavado e virou roxo cheio em 18/09/2026,
   na cor de uma referência que o Giraud mandou.

   DUAS RESSALVAS DE MARCA, as duas no README:
     . o Brand Bible diz que roxo é acento e nunca área cheia, e uma faixa da
       largura da tela em roxo saturado é área;
     . este roxo não é o da marca. O #8B5CF6 da referência é mais azulado que
       o #7C1AB8 oficial, e os dois aparecem na mesma página.

   O degradê existe por causa do contraste, e não por estética: no tom exato
   da referência o subtítulo de 15px fica em 4,23, abaixo do mínimo de 4,5 da
   WCAG. Então o topo da faixa, onde mora o texto, é um fio mais escuro
   (#7F4FEC, contraste 4,96) e a cor da referência fica embaixo, na altura dos
   vídeos, onde não há texto pequeno. Quem for clarear a faixa refaça essa
   conta antes.

   Tudo que fica dentro dela escreve em branco na mão, porque a cor herdada
   do corpo é escura. */
.faixa-roxa{background:linear-gradient(180deg,#7F4FEC 0%,#8B5CF6 100%)}
.faixa-roxa .sec-head h2{color:#fff}
.faixa-roxa .sec-head h2 .hl{color:#E4D3FA}
.faixa-roxa .sec-head p{color:rgba(255,255,255,.88)}

/* ================= DEPOIMENTOS EM VÍDEO =================
   Carrossel: o card do meio é o ativo, os vizinhos ficam recuados,
   escurecidos e desfocados. A altura do palco vem da largura do card, para o
   vertical 9:16 dos vídeos nunca ser cortado.

   O trilho é absoluto: cada card é posicionado pelo JavaScript conforme a
   distância dele até o ativo. Por isso não há grid aqui. */
.depo-stage{--cw:clamp(232px,30vw,330px);position:relative;max-width:var(--maxw);margin:0 auto;padding:0 20px;height:calc(var(--cw) * 16 / 9)}
.depo-track{position:relative;width:100%;height:100%}
.depo-card{position:absolute;top:0;left:50%;width:var(--cw);height:100%;margin-left:calc(var(--cw) / -2);
  border-radius:20px;overflow:hidden;cursor:pointer;
  background:linear-gradient(160deg,#1A1226,var(--quase-preto));border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -34px rgba(22,18,28,.45);will-change:transform;
  transition:transform .55s cubic-bezier(.16,.84,.44,1),opacity .45s,filter .45s,box-shadow .45s,border-color .45s}
.depo-card:not(.is-active){filter:blur(3px);opacity:.42}
.depo-card.is-hidden{opacity:0;pointer-events:none}
.depo-card.is-active{box-shadow:0 46px 92px -34px rgba(32,12,64,.62);border-color:rgba(255,255,255,.3)}
.depo-video{width:100%;height:100%;object-fit:cover;display:block;background:var(--quase-preto)}
.depo-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;
  background:var(--roxo-barra);display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 40px -12px rgba(139,35,214,.85);transition:transform .25s,opacity .3s;pointer-events:none}
.depo-card:not(.is-active) .depo-play,.depo-card.is-playing .depo-play{opacity:0}
.depo-card.is-active:hover .depo-play{transform:translate(-50%,-50%) scale(1.07)}
.depo-play svg{width:25px;height:25px;margin-left:3px}
.depo-meta{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;pointer-events:none;
  background:linear-gradient(transparent,rgba(8,5,16,.94));transition:opacity .3s}
.depo-card.is-playing .depo-meta{opacity:0}
.depo-meta b{display:block;font-family:var(--f-head);font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:#fff}
.depo-meta span{display:block;font-size:12.5px;font-weight:300;color:rgba(255,255,255,.62);margin-top:2px}

.depo-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.16);cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,transform .25s}
.depo-nav:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5);transform:translateY(-50%) scale(1.07)}
.depo-nav svg{width:22px;height:22px}
.depo-nav.prev{left:20px}
.depo-nav.next{right:20px}

.depo-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:30px}
.depo-dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.36);cursor:pointer;transition:width .3s,background .3s}
.depo-dot:hover{background:rgba(255,255,255,.6)}
.depo-dot.is-on{width:26px;background:#fff}

@media(max-width:620px){
  .depo-nav.prev{left:4px}
  .depo-nav.next{right:4px}
}

/* ================= PLANOS =================
   Adaptação da tabela clara que o Giraud mandou. A fita colorida do original
   virou faixa do próprio cartão, e cada plano carrega a sua cor de acento
   numa variável: mudar de plano é mudar uma linha.

   Preço nesta página é novidade, e o comentário do index.html diz o que
   ainda depende de aprovação dos sócios. */
.plano-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
/* Cada plano acende na própria cor: um brilho por fora, colado na borda, e
   uma lavada de cor bem fraca no topo de dentro. A cor da luz mora numa
   variável ao lado do acento, em rgba, para não depender de color-mix num
   lugar onde o navegador antigo ficaria sem nada.

   Nesta variante clara o acento é escuro, porque ele também vira texto sobre
   branco. A fita, que é o contrário, cor cheia com texto escuro em cima,
   guarda o tom vivo numa variável própria. */
.plano{--acento:#8A8D9B;--fita:#C9CBD6;--luz:rgba(138,141,155,.16);position:relative;display:flex;flex-direction:column;
  background:radial-gradient(130% 62% at 50% 0%,var(--luz),transparent 68%),var(--surface);
  border:1px solid var(--linha);border-radius:20px;padding:52px 24px 28px;
  box-shadow:0 0 72px -24px var(--luz);
  transition:transform .3s,border-color .3s,box-shadow .3s}
.plano:hover{transform:translateY(-5px);border-color:var(--linha-2);border-color:color-mix(in srgb,var(--acento) 55%,transparent);
  box-shadow:0 26px 50px -30px rgba(22,18,28,.3),0 0 84px -20px var(--luz)}
.plano[data-plano="gold"]{--acento:#C98A0B;--fita:#E8B33C;--luz:rgba(232,179,60,.22)}
.plano[data-plano="diamond"]{--acento:#1B95BD;--fita:#6FD3F2;--luz:rgba(27,149,189,.16);border-color:rgba(27,149,189,.34)}
/* O espaço para a fita é dos três cards, e não só dos dois que a têm. A fita
   é posicionada por cima e não ocupa lugar nenhum, então o vão no topo é
   aberto na mão. Quando só os dois com fita tinham esse vão, o silver subia e
   o nome e o preço dele ficavam fora da linha dos outros dois.

   O mesmo motivo vale para a altura mínima da linha de descrição: ela ocupa
   duas linhas no silver e uma nos outros, e sem um piso os traços de baixo
   ficariam em alturas diferentes. Duas linhas de 13px com entrelinha 1,6 dão
   42px. */
.plano-fita{position:absolute;left:0;right:0;top:0;padding:9px 12px;border-radius:19px 19px 0 0;
  font-family:var(--f-head);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;color:#120C1A;background:var(--fita)}

.plano-topo{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.plano-ic{width:38px;height:38px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--acento);background:rgba(22,18,28,.05);border:1px solid var(--linha-2);
  background:color-mix(in srgb,var(--acento) 16%,transparent);
  border-color:color-mix(in srgb,var(--acento) 34%,transparent)}
.plano-ic svg{width:20px;height:20px;stroke:currentColor}
.plano-nome{font-family:var(--f-head);font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--acento)}

.plano-preco{display:flex;align-items:baseline;gap:7px;margin:0}
.plano-preco strong{font-family:var(--f-head);font-size:clamp(30px,3.4vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1}
.plano-preco span{font-size:13px;font-weight:300;color:var(--texto-3)}
.plano-para{font-size:13px;font-weight:300;color:var(--texto-3);margin-top:12px;min-height:42px;padding-bottom:20px;border-bottom:1px solid var(--linha)}

.plano-lista{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.plano-lista li{position:relative;padding-left:26px;font-size:13px;font-weight:300;color:var(--texto);line-height:1.5}
/* O visto é desenhado em CSS, sem ícone por item: são vinte e sete itens na
   seção, e vinte e sete SVGs iguais só engordariam o arquivo. */
.plano-lista li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:rgba(51,194,122,.16)}
.plano-lista li::after{content:"";position:absolute;left:5px;top:7.5px;width:6px;height:3px;
  border-left:1.6px solid #0F8A5F;border-bottom:1.6px solid #0F8A5F;transform:rotate(-45deg)}

.btn-plano{margin-top:26px;width:100%;background:var(--roxo-barra);color:#fff;
  box-shadow:0 14px 34px -14px rgba(139,35,214,.8)}
.btn-plano:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(139,35,214,.95)}
.plano-nota{text-align:center;color:var(--texto-3);font-size:12.5px;font-weight:300;margin:34px auto 0;max-width:680px;line-height:1.6}

@media(max-width:880px){
  .plano-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
}

/* ================= QUEM SOMOS =================
   Texto à esquerda, foto do escritório à direita. No original o cartão é
   branco sobre roxo; aqui o bloco é claro como o resto da página, e quem
   segura o contraste é a moldura da foto, com um filete roxo por baixo.

   A foto tem proporção fixa de 4x3, a mesma do arquivo, para o bloco não
   mudar de altura enquanto a imagem carrega. */
.quem-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:center}
.quem-copy h2{font-size:clamp(28px,3.8vw,42px);font-weight:700;margin:16px 0 0}
.quem-pilula{display:inline-block;font-family:var(--f-head);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--roxo-claro);
  padding:7px 14px;border-radius:999px;background:rgba(124,26,184,.14);border:1px solid rgba(124,26,184,.32)}
.quem-copy p{color:var(--texto);font-size:14.5px;font-weight:300;margin-top:20px;max-width:520px;line-height:1.7}
.quem-copy .btn{margin-top:28px}

.quem-foto{position:relative;margin:0;border-radius:20px;overflow:hidden;
  border:1px solid var(--linha);box-shadow:0 30px 60px -36px rgba(22,18,28,.32)}
/* O filete roxo no pé da foto costura a imagem com a paleta da página. */
.quem-foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad)}
.quem-foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

@media(max-width:880px){
  .quem-grid{grid-template-columns:1fr;gap:34px}
  .quem-foto{order:-1}
}

/* ================= FAQ ================= */
.faq{max-width:760px;margin:0 auto}
.faq-item{background:var(--surface);border:1px solid var(--linha);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .3s}
.faq-item.open{border-color:rgba(124,26,184,.45)}
.faq-q{width:100%;background:none;border:none;color:var(--tinta);font-family:var(--f-head);font-size:14.5px;font-weight:500;text-align:left;padding:20px 22px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;letter-spacing:-.01em}
.faq-q i{width:16px;height:16px;flex:none;position:relative;transition:transform .3s}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;background:var(--roxo-claro);border-radius:2px}
.faq-q i::before{left:0;top:7px;width:16px;height:2px}
.faq-q i::after{left:7px;top:0;width:2px;height:16px;transition:opacity .3s}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-item.open .faq-q i::after{opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,.84,.44,1)}
.faq-a p{padding:0 22px 22px;color:var(--texto-3);font-size:13.5px;font-weight:300;line-height:1.65}

/* ================= CHAMADA FINAL =================
   Bloco de roxo cheio, e é de propósito: ele é o ponto de parada, e o
   contraste com o branco em volta é o que faz o olho cair ali. Desde
   18/09/2026 ele divide esse peso com a faixa dos depoimentos, o que está
   anotado como ressalva de marca no README.
   O Brand Bible pede roxo como acento, e um bloco numa página inteira clara
   continua sendo acento na proporção. Tudo que fica dentro dele escreve em
   branco na mão, porque a cor herdada do corpo aqui é escura.

   O gradiente sobe do profundo para o vibrante, como manda a marca, e a
   grade por cima é a mesma textura do hero, em opacidade baixa. */
.cta-final{position:relative;overflow:hidden;border-radius:26px;padding:72px 48px;text-align:center;
  background:linear-gradient(160deg,var(--roxo) 0%,var(--roxo-prof) 100%);
  box-shadow:0 44px 90px -46px rgba(74,13,110,.9)}
.cta-final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:56px 56px}
.cta-final::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:rgba(255,255,255,.08);pointer-events:none}
.cta-final h2{position:relative;z-index:2;font-size:clamp(27px,3.8vw,42px);font-weight:700;max-width:640px;margin:0 auto;color:#fff}
.cta-quebra{display:block}
.cta-final p{position:relative;z-index:2;font-size:15px;font-weight:300;color:rgba(255,255,255,.82);margin:18px auto 0;max-width:520px}
.cta-final .btn{position:relative;z-index:2;margin-top:32px}

/* O botão claro só existe aqui, porque só aqui o fundo é roxo cheio. */
.btn-claro{background:#fff;color:var(--roxo-prof);box-shadow:0 14px 30px -14px rgba(74,13,110,.5)}
.btn-claro:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(74,13,110,.65);background:#fff}

@media(max-width:620px){
  .cta-final{padding:52px 24px;border-radius:22px}
}

/* ================= RODAPÉ =================
   Quatro colunas: marca, dois blocos de links e contato. A régua de cima
   nasce e morre transparente, no mesmo espírito de não cortar a página. */
footer{position:relative;padding:64px 0 34px}
footer::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,18,28,.16),transparent)}
.rodape-grid{display:grid;grid-template-columns:1.7fr 1fr 1.2fr;gap:40px;align-items:start}
.rodape-marca img{height:30px;width:auto}
.rodape-marca p{font-size:13.5px;font-weight:300;color:var(--texto-3);margin-top:18px;max-width:320px;line-height:1.65}
.rodape-redes{display:flex;gap:10px;margin-top:20px}
.rodape-redes a{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linha-2);color:var(--texto-3);background:#fff;transition:.25s}
.rodape-redes a:hover{border-color:rgba(124,26,184,.6);color:var(--roxo);background:rgba(124,26,184,.1);transform:translateY(-2px)}
.rodape-redes svg{width:19px;height:19px}
/* O Instagram ganha o degradê da marca deles, do amarelo ao azul, passando
   pelo rosa. O desenho continua em traço, que é como o ícone oficial é, só
   que em branco por cima da cor. */
.rodape-redes a[data-rede="instagram"]{color:#fff;border-color:transparent;
  background:radial-gradient(circle at 28% 106%,#FDDB92 0%,#FD8D32 22%,#E5407B 48%,#B429A5 68%,#5C4BD6 92%);
  box-shadow:0 10px 24px -10px rgba(214,36,159,.65)}
.rodape-redes a[data-rede="instagram"]:hover{border-color:transparent;
  box-shadow:0 14px 30px -10px rgba(214,36,159,.85)}
.rodape-redes a[data-rede="instagram"] svg{width:20px;height:20px;stroke-width:1.9}

/* O WhatsApp sai do traço e vai para o desenho cheio, no verde oficial da
   marca deles. É o único botão colorido do rodapé, e é de propósito: ele é o
   caminho direto de conversa. */
.rodape-redes a[data-rede="whatsapp"]{background:#25D366;border-color:#25D366;color:#fff;
  box-shadow:0 10px 24px -10px rgba(37,211,102,.7)}
.rodape-redes a[data-rede="whatsapp"]:hover{background:#1FBF5B;border-color:#1FBF5B;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.85)}
.rodape-redes a[data-rede="whatsapp"] svg{width:21px;height:21px}

.rodape-col{display:flex;flex-direction:column;gap:11px}
.rodape-titulo{font-family:var(--f-head);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta);margin-bottom:5px}
.rodape-col a{font-size:13.5px;font-weight:300;color:var(--texto-3);transition:color .2s;width:fit-content}
.rodape-col a:hover{color:var(--roxo-claro)}

.rodape-fim{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:48px;padding-top:22px;border-top:1px solid var(--linha)}
.rodape-fim p{font-size:12px;font-weight:300;color:var(--texto-3)}

@media(max-width:880px){
  .rodape-grid{grid-template-columns:1fr 1fr;gap:34px}
  .rodape-marca{grid-column:1 / -1}
}
@media(max-width:520px){
  .rodape-grid{grid-template-columns:1fr}
  .rodape-fim{flex-direction:column;gap:6px}
}

/* ================= REVEAL ================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ================= RESPONSIVO ================= */
@media(max-width:940px){
  .sec-pad{padding:72px 0}
  /* Em duas colunas quem fecha a fileira passa a ser a folha par, não a
     terceira: a trilha volta na terceira e some na segunda, senão ela sairia
     da última folha e apontaria para a borda da tela. */
  .ent-grid{grid-template-columns:1fr 1fr;column-gap:40px}
  .ent-card:nth-child(3n)::after{display:block}
  .ent-card:nth-child(2n)::after{display:none}
  .ent-card::after{width:40px}
  .form-grid{grid-template-columns:1fr;gap:38px}
  .sit-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  /* Menor e com menos espaçamento entre letras: em caixa alta o espaçamento
     come muita largura. Vale para os olhos de "Nossos números" e da FAQ, que
     são curtos e continuam cabendo numa linha. */
  .eyebrow{font-size:10px;letter-spacing:.1em;gap:7px}
  /* O do hero sai: a frase é longa e no celular ela quebrava em duas linhas
     em cima do título, que é onde o olho da pessoa precisa cair primeiro. Com
     ele fora, o título perde também a margem que existia só para separar os
     dois. */
  .hero .eyebrow{display:none}
  .hero h1{margin:0}
  .hero{padding:66px 0 76px}
  /* ===== NO CELULAR A TRILHA VIRA CAMINHO =====
     Com uma folha por vez, a linha entre colunas não existe mais: ela desce
     entre uma folha e a outra. E em vez de descer reta, inclina para um lado
     e depois para o outro, então quem rola vê o caminho serpentear de folha
     em folha em vez de ver seis traços iguais.

     A inclinação sai do alto da trilha, onde ela encosta na folha de cima, e
     por isso o pé dela é que balança. A última folha não liga a nada. */
  .ent-grid{grid-template-columns:1fr;row-gap:66px;padding-top:18px}
  .ent-card:nth-child(3n)::after,
  .ent-card:nth-child(2n)::after{display:block}
  .ent-card::after{top:100%;left:50%;width:10px;height:62px;margin:0 0 0 -5px;
    transform-origin:top center;
    background-size:10px 13px;background-repeat:repeat-y;background-position:center top}
  .ent-card:nth-child(odd)::after{transform:rotate(13deg)}
  .ent-card:nth-child(even)::after{transform:rotate(-13deg)}
  .ent-card:nth-child(6)::after{display:none}
  .lf-row{grid-template-columns:1fr}
}