/* =========================================================
   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)}

/* ===== HERO DIVIDIDO (variante F) =====
   Texto à esquerda, formulário à direita, no modelo da LP que o Giraud mandou
   em 21/09/2026. Abaixo de 940px empilha: texto em cima, formulário embaixo. */
.hero.hero-dividido{text-align:left;padding:72px 0 88px}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.hero-dividido .hero-inner{max-width:600px;margin:0}
.hero-dividido h1{font-size:clamp(32px,4.4vw,52px)}
.hero-dividido p.sub{margin:22px 0 0;max-width:540px}
.hero-nums{display:flex;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}
.hero-dividido .hero-sec{margin-top:32px}
.hero-form{scroll-margin-top:110px}
.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:940px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-dividido .hero-inner{max-width:none}
}
@media(max-width:620px){
  .hero.hero-dividido{padding:40px 0 64px}
  .hero-nums{gap:22px}
  .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 =================
   Mesma forma dos cartões de problema, trocando o vermelho pelo verde. A
   rima é de propósito e é a mesma do ciclo lá em cima: vermelho é a
   operação parada, verde é a operação rodando. Os dois blocos ficam um
   debaixo do outro, o problema e a resposta. */
.hl-ok{color:#0F8A5F}
/* Três colunas, então os seis itens caem em 3x2. */
.ent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ent-card{background:var(--surface);border:1px solid rgba(51,194,122,.26);border-radius:18px;padding:26px 22px;position:relative;overflow:hidden;transition:.3s}
.ent-card::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,#1E8F52,#33C27A);transition:width .5s cubic-bezier(.16,.84,.44,1)}
.ent-card:hover{border-color:rgba(51,194,122,.62);transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(51,194,122,.45)}
.ent-card:hover::after{width:100%}
.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)}
@media(prefers-reduced-motion:reduce){
  .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}
  .ent-grid{grid-template-columns:1fr 1fr}
  .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}
  .ent-grid{grid-template-columns:1fr}
  .lf-row{grid-template-columns:1fr}
}