/* ===========================================================================
   LP de anúncio do Marvee Hub (/lp-hub) e a página de agradecimento
   (/lp-hub-obrigado).

   Override pontual sobre o /site/site.css, no padrão das campanhas
   (/site/imersao/lp.css, /site/scale/lp.css). Nada aqui é fork do design
   system: a página reusa hero, mockup vivo, carrossel de casos, .glow-card,
   .faq e os botões da base. Este arquivo só cobre o que é próprio de uma LP
   de mídia paga:

     1. topo sem menu (um caminho só, sem link de fuga)
     2. grade dos quatro pilares do produto
     3. o tom claro dos cards de caso dentro da caixa que cresce
     4. prova social (depoimentos + faixa de logos, ainda vazia)
     5. a dobra do diagnóstico (retrato de quem conduz e o corte declarado)
     6. o embed do HubSpot (mesmo kit visual do #ic-hsform da /imersao-in-company)
     7. o botão flutuante, que leva ao formulário e não ao WhatsApp
     8. o rodapé mínimo e a página de agradecimento

   Regra da página: todo CTA vai para #form. Não existe segundo destino.
   =========================================================================== */

/* ---- 1. topo: logo, âncoras da página e um botão ------------------------ */
nav.nav-lp .nav-in{justify-content:space-between}
nav.nav-lp .logo{gap:9px}
/* A base esconde a CTA do topo abaixo de 900px porque ali entra o menu
   sanduíche das páginas do site. Esta LP não tem sanduíche (nem carrega o
   nav-menu.js), então a CTA seria a única coisa a sumir do topo no celular,
   que é de onde vem a maior parte do tráfego. Ela fica. */
@media(max-width:900px){
  nav.nav-lp .nav-in > a.btn{display:inline-flex}
}
/* Em troca, o menu recolhe mais cedo do que os 900px da base. Esta LP tem cinco
   âncoras (uma a mais que as páginas do site, desde a dobra do diagnóstico) e
   entre 901 e 1000px a linha fica sem nenhuma folga entre logo, menu e CTA.
   Recolhendo antes, sobra o que importa no topo: o logo e a única CTA. */
@media(max-width:1000px){
  nav.nav-lp .nav-links{display:none}
}
/* As âncoras não passam por baixo do topo grudado ao rolar. */
#produto,#casos,#prova,#diagnostico,#form,#faq{scroll-margin-top:92px}

/* A headline do hero é uma frase só, sem o <br> que a /hub usa para separar
   duas sentenças, então a quebra fica a cargo do navegador e a última palavra
   caía sozinha numa linha. O balance distribui as linhas por igual e resolve a
   órfã em qualquer largura. A base já faz isso no hero abaixo de 700px
   (site.css) e nos títulos dos apps; aqui vale no desktop também. */
.hero h1{text-wrap:balance}

/* ---- 2. os quatro pilares do produto ------------------------------------ */
/* A grade é a .wgrid / .wcell do design system, reusada inteira (bordas finas
   como divisores, gradiente do hover subindo do divisor, título deslizando e a
   barra vertical crescendo). Duas coisas mudam aqui:

     1. o tom. O componente nasceu dentro da seção clara e pinta texto e
        divisor com os tokens --light-*; nesta seção o fundo é escuro.
     2. a linha. Lá são seis células em duas linhas de três; aqui são quatro
        numa linha só, então o divisor de baixo não existe e o gradiente do
        hover sobe da borda inferior em todas.

   Se este arranjo de quatro pegar em outras páginas, ele se promove ao
   design-system em vez de continuar preso aqui. */
#produto .wgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
#produto .wcell{border-right:0;border-bottom:0}
#produto .wcell:not(:last-child){border-right:1px solid var(--line-2)}
#produto .wcell::before{
  top:auto;bottom:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--wc) 14%,transparent),transparent);
}
#produto .wcell-t{color:var(--white)}
#produto .wcell-t::before{background:var(--line-2)}
#produto .wcell-d{color:var(--muted)}

@media(max-width:900px){
  /* duas colunas: divisor à direita na coluna da esquerda e embaixo só na
     primeira linha; na segunda linha o gradiente desce da borda de cima */
  #produto .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #produto .wcell:not(:last-child){border-right:0}
  #produto .wcell:nth-child(odd){border-right:1px solid var(--line-2)}
  #produto .wcell:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  #produto .wcell:nth-child(n+3)::before{
    top:0;bottom:auto;
    background:linear-gradient(to bottom,color-mix(in srgb,var(--wc) 14%,transparent),transparent);
  }
}
@media(max-width:640px){
  /* Abaixo de 640 as células ficam uma embaixo da outra, e o divisor vira
     horizontal: o traço lateral não faz sentido numa coluna só.

     Isso desfaz a pista horizontal que a base liga nesta faixa (ela existe lá
     porque são seis células; aqui são quatro e a leitura empilhada é mais
     direta). Desfazer é explícito de propósito: a pista mora em três
     propriedades (a rolagem no wrapper, o auto-flow e o auto-columns na
     grade) e deixar qualquer uma passar quebra o empilhamento. */
  #produto .wgrid-scroll{overflow-x:visible;scroll-snap-type:none}
  #produto .wgrid{grid-template-columns:1fr;grid-auto-flow:row;grid-auto-columns:auto}
  /* divisor embaixo de cada célula menos a última, nunca ao lado. O
     !important responde ao !important da base, que zera a borda de baixo para
     a pista. */
  #produto .wcell:not(:last-child),
  #produto .wcell:nth-child(odd){border-right:0}
  #produto .wcell:not(:last-child){border-bottom:1px solid var(--line-2) !important}
  #produto .wcell:last-child{border-bottom:0 !important}
  /* o gradiente do hover sobe do divisor, que agora é o de baixo, em todas */
  #produto .wcell::before,
  #produto .wcell:nth-child(n+3)::before{
    top:auto;bottom:0;
    background:linear-gradient(to top,color-mix(in srgb,var(--wc) 14%,transparent),transparent);
  }
  /* sem pista, sem pontos */
  #produto .cdots.wgrid-dots{display:none}
}

/* O apoio da seção cabe em uma linha só no desktop: o .lede da base para em
   880px e quebraria em três linhas curtas, que empilham mal debaixo de um
   título de duas linhas. */
@media(min-width:1100px){
  #produto .lede{max-width:none}
}

/* ---- 3. os casos: caixa clara que cresce, e a tira que a acompanha ------- */
/* A seção usa o .sec-tall + .sec-grow + .sec-light da base. O que fica aqui é
   o tom claro do conteúdo (a base só reescreve .h2 e .lede) e a geometria da
   tira de cards.

   A tira segue a caixa: enquanto a caixa é a pequena, ela para na borda dela e
   mostra três cards; quando a caixa toma a tela, a tira passa a entrar e sair
   pelas bordas. O elo é o --secg, o mesmo progresso que comanda o crescimento
   da caixa (1 = caixa pequena, 0 = tela cheia), então os dois nunca saem de
   sincronia. */
.casos-box{padding:clamp(48px,6vw,84px) 0}

#casos .cases-scroll{
  /* a calha lateral da caixa, o mesmo cálculo do .sec-grow da base */
  --gi:calc(max(24px, (100vw - 1240px) / 2) * var(--secg));
  /* sai do .wrap e ocupa a largura da caixa, seja ela qual for no momento */
  margin-left:calc(50% - 50vw + var(--gi));
  margin-right:calc(50% - 50vw + var(--gi));
  /* e o teto é a própria largura da caixa. Só as margens não bastam: com a
     margem negativa a largura automática resolvia maior que a caixa em telas
     estreitas, e o card seguinte vazava para fora do branco. */
  max-width:calc(100vw - 2 * var(--gi));
  /* e o recuo interno devolve o primeiro card ao alinhamento do título, que
     também anda para os lados conforme a caixa cresce */
  --pad:max(24px, calc((100vw - 2 * var(--gi) - 1180px) / 2 + 24px));
  padding-left:var(--pad);
  padding-right:var(--pad);
  /* sem encaixe: o scroll-snap reancorava o primeiro card na borda do
     contêiner e desfazia o recuo acima, jogando o card contra a borda.
     Quem indica a posição aqui são os pontos, não o encaixe. */
  scroll-snap-type:none;
}
@media(max-width:600px){
  #casos .cases-scroll{--pad:18px}
}

/* O cabeçalho é o .mh-head da base, nas duas colunas: título grande à esquerda
   ocupando várias linhas, apoio à direita alinhado pelo topo. O título vai um
   pouco maior que o .h2 padrão para a coluna da esquerda encher, que é o que dá
   o peso da abertura. */
.casos-box .mh-head .h2{font-size:clamp(30px,3.9vw,52px)}

/* Tom claro do conteúdo da caixa */
.casos-box .mh-ic{background:var(--light-card);border-color:var(--light-line2)}
.casos-box .mh-rule{background:var(--light-line2)}
/* A chamada do topo, no tom claro: mesmo tratamento que a base dá à .why-box */
.casos-box .mh-top .mh-cta{color:var(--light-tx);border-color:rgba(16,24,40,.3)}
.casos-box .mh-top .mh-cta:hover{border-color:var(--light-tx);background:rgba(16,24,40,.06)}
.casos-box .mh-sub{color:var(--light-tx2)}

/* Os cards: superfície clara com uma sombra leve, no lugar do vidro escuro
   que a base escopa em #casos. */
#casos .case-card{
  background:var(--light-card);
  border:1px solid var(--light-line);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 28px -18px rgba(16,24,40,.28);
}
#casos .case-card:hover{
  transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 20px 40px -20px rgba(16,24,40,.34);
}
#casos .case-card h3{color:var(--light-tx)}
#casos .case-card p{color:var(--light-tx2)}
#casos .cc-cat{color:var(--light-mut)}
#casos .cc-ic{background:var(--light-soft);border-color:var(--light-line2);color:var(--light-tx2)}
#casos .case-card:hover .cc-ic{color:var(--light-tx)}
/* O cluster de três ícones (card de grupo de empresas) tinha ficado de fora da
   virada de tom, em três frentes:

     1. os chips vinham com o azul translúcido e a borda BRANCA do fundo escuro,
        que na caixa clara desaparece e deixa três manchas sem contorno. Passam a
        usar o mesmo par de cores do chip solo dos outros cards;
     2. o contêiner não pode ter fundo nem borda, porque ele só alinha os chips.
        A base zera isso, mas o `#casos .cc-ic` acima é mais específico e
        reacendia o fundo claro nele, desenhando um quarto retângulo pálido atrás
        dos três que aparecia como uma faixa nos vãos;
     3. a base encavala os chips 12px, o que funciona no escuro porque a borda
        clara separa um do outro. Aqui só embolava os ícones, então eles ficam
        lado a lado: cada app se lê sozinho e os três seguem sendo um grupo pela
        proximidade. */
#casos .cc-ic-g{background:none;border:0;box-shadow:none;gap:8px}
#casos .ccg-i{background:var(--light-soft);border-color:var(--light-line2)}
#casos .ccg-i + .ccg-i{margin-left:0}
/* os pontos: o inativo era branco translúcido, invisível no claro. O ativo
   mantém o traço gradiente da base, que é elemento e não texto. */
#casos .cdots button:not(.on){background:rgba(16,24,40,.16)}
#casos .cdots button.on{box-shadow:0 0 12px rgba(123,92,255,.32)}

/* ---- 4. prova social ---------------------------------------------------- */
/* Cards sem moldura fechada: o contorno é desenhado por quatro fios que
   ultrapassam o card, então as linhas de cards vizinhos se encontram e a grade
   lê como uma malha, não como três caixas soltas.

   A escada é viva: cada card nasce um degrau acima ou abaixo do vizinho
   (--dep-i vale 0, 1 e 2, e o -1 centra a escada em torno do card do meio) e os
   três se alinham quando a seção passa pelo centro da tela. Quem comanda é o
   --secg, o mesmo progresso da caixa clara dos casos: 1 nas pontas, 0 no meio.
   Reusar essa animação em vez de escrever outra mantém as duas seções com o
   mesmo tempo de resposta ao scroll.

   A escada é centrada, e não descendente a partir do primeiro card, para o
   espaço reservado nas pontas ser metade: descendente, o terceiro card
   empurraria 96px que virariam um buraco embaixo justo no momento em que os três
   estão alinhados. */
.deps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin-top:calc(38px + 48px);margin-bottom:48px;
}
.dep{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:32px 32px 26px;
  background:radial-gradient(50% 80% at 25% 0%,rgba(231,237,255,.07),transparent);
}
/* os quatro fios do contorno, cada um passando 16px além do card */
.dep::before,.dep::after,
.dep-quote::before,.dep-who::before{
  content:"";position:absolute;background:var(--line-2);pointer-events:none;z-index:-1;
}
.dep::before{top:-16px;bottom:-16px;left:-1px;width:1px}
.dep::after{top:-16px;bottom:-16px;right:-1px;width:1px}
.dep-quote::before{left:-16px;right:-16px;top:-32px;height:1px}
.dep-who::before{left:-16px;right:-16px;bottom:-26px;height:1px}
/* a cruz que marca o canto, na emenda dos dois fios */
.dep-cross{
  position:absolute;top:0;left:0;width:14px;height:14px;
  transform:translate(-50%,-50%);color:var(--muted-2);pointer-events:none;
}
.dep-cross svg{width:100%;height:100%}
@supports (animation-timeline: view()){
  .deps{
    animation:secGrow linear both;animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  /* O degrau mora dentro do @supports, junto da animação que o comanda. Solto
     lá fora, num navegador sem scroll-driven animation o --secg ficaria no
     valor inicial 1 (o @property da base) e a escada nunca se alinharia: o
     secGrowFallback do site.js só escreve o progresso nas .sec-grow, e esta
     seção não é uma. Sem suporte, os três nascem alinhados. */
  .dep{transform:translateY(calc(48px * (var(--dep-i) - 1) * var(--secg)))}
}
@media(prefers-reduced-motion:reduce){
  /* sem movimento, fica o estado calmo: os três alinhados */
  .deps{animation:none !important;--secg:0}
}

.dep-quote{display:flex;gap:16px;margin:0}
.dep-mark{width:24px;height:24px;flex:none;color:var(--muted-2)}
.dep-quote p{flex:1;font-size:15.5px;line-height:1.68;color:var(--muted)}

.dep-who{display:flex;align-items:center;gap:12px;position:relative}
.dep-av{
  width:40px;height:40px;border-radius:999px;flex:none;overflow:hidden;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--line-2);
  transition:box-shadow .25s var(--ease-soft);
}
.dep:hover .dep-av{box-shadow:0 0 0 2px var(--bg),0 0 0 4px rgba(231,237,255,.28)}
.dep-av img{width:100%;height:100%;object-fit:cover;display:block}
.dep-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.dep-id cite{font-style:normal;font-size:14px;font-weight:600;color:var(--white)}
.dep-id > span{font-size:12.5px;color:var(--muted-2)}

@media(max-width:900px){
  /* sem escada: empilhado, o degrau viraria só um buraco entre os cards */
  .deps{grid-template-columns:1fr;gap:48px;margin-top:38px;margin-bottom:0;animation:none}
  .dep{transform:none;padding:28px 24px 24px}
  .dep-quote::before{top:-28px}
  .dep-who::before{bottom:-24px}
}

/* Faixa de logos de cliente: o slot fica montado e some enquanto está vazio,
   para a seção não abrir um buraco antes da liberação chegar. */
.logowall{margin-top:34px;display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:center}
.logowall:empty{display:none}
.logowall img{height:28px;width:auto;opacity:.7}

/* ---- 5. a dobra do diagnóstico (ilha azul) ------------------------------- */
/* A dobra é a ilha da base pintada de azul (.sec-grow + .sec-blue, catálogo em
   marca/design-system): o h2 abre direto, as etapas são o .sflow do CRM
   (escopado abaixo) e o CTA fecha sozinho. Foi por isso que a ilha azul virou
   variante no site.css em vez de tom solto aqui: pintada de claro, cada um
   desses componentes precisaria de uma cor própria nesta página.

   O que é desta página vive aqui: o banner de quem conduz, as etapas
   escopadas e o CTA. Se a dobra "quem conduz + etapas + CTA" reaparecer em
   outra LP de mídia, é ela que se promove ao design system, não este arquivo
   que se copia. */
.diag-box{padding:clamp(56px,7vw,92px) 0}

/* O título da seção rebaixado a tag (pedido da autora): a mesma pílula que
   era a .fc-eyebrow do banner, com os valores da /imersao2 e sem o glow que
   já tinha saído. O elemento segue h2 (semântica da seção) com a classe
   .badge-pill da base, que dá o caps e o inline-flex; por isso ele centra
   pelo .center do wrapper. O respiro até o banner fica por conta do
   margin-top que a .founder já pratica. */
.diag-cap{
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.1), rgba(91, 192, 190, 0.04));
  border-color: rgba(91, 192, 190, 0.22);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 22px;
  line-height: 1.4;
}
@media (max-width: 820px) {
  /* o mesmo degrau que a pílula fazia no banner (valor da /imersao2) */
  .diag-cap { font-size: 10.5px; }
}

/* Quem conduz: o banner "À mesa com o fundador", reusado da /imersao2. O bloco
   .founder / .founder-card / .fc-* abaixo veio do public/site/imersao2/lp.css;
   os assets seguem servidos de /site/imersao/. Divergências pedidas pela
   autora nas rodadas 3 e 4: a pílula do eyebrow saiu do card (o formato dela
   virou o título da seção, a .diag-cap acima) e o nome e o cargo cresceram
   ~25% pra ocupar o espaço dela. O resto segue com os valores da imersão. */
.founder {
  margin-top: clamp(20px, 3.5vw, 44px); /* folga menor: sobe a seção (a foto ainda vaza pelo topo) */
}
.founder-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1212 / 558;
  background: #0a0f26;
  border: 1px solid rgba(58, 80, 107, 0.2);
  border-radius: 30px;
}
/* marca d'água: símbolo Marvee transparente, aparece em volta do recorte do Manoel */
.founder-card .fc-watermark {
  position: absolute;
  left: 36%;
  top: -8%;
  width: 62%;
  height: 96%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}
/* recorte do Manoel (fundo transparente), vaza pelo topo e cola na base do card */
.founder-card .fc-photo {
  position: absolute;
  left: 47.6%;
  bottom: 0;
  width: 50.99%;
  height: 115.41%;
  object-fit: cover;
  object-position: 50% 38%;
  z-index: 2;
}
/* badge do símbolo: sobre o ombro esquerdo do Manoel (posição do Figma) */
.founder-card .fc-badge {
  position: absolute;
  left: 52.6%;
  top: 37.4%;
  width: 7.47%;
  height: auto;
  z-index: 3;
  pointer-events: none;
}
.founder-card .fc-copy {
  position: absolute;
  left: 6.1%;
  top: 50%;
  transform: translateY(-50%);
  width: 42.1%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* A pílula do eyebrow saiu do banner e virou o título da seção (.diag-cap).
   Com o espaço que ela deixou, nome e cargo crescem ~25% sobre os valores da
   /imersao2 (divergência pedida pela autora), com os respiros reescalados
   junto; o .fc-text não muda. */
.founder-card .fc-name {
  font-size: clamp(38px, 5.4vw, 65px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
  margin: 0 0 clamp(12px, 1.8vw, 20px);
}
.founder-card .fc-role {
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}
.founder-card .fc-text {
  font-size: clamp(15px, 1.78vw, 21px);
  line-height: 1.4;
  color: #7e83a6;
  margin: 0;
}
/* PNG composto (símbolo + Manoel + badge) usado só no mobile */
.founder-card .fc-photo-mobile {
  display: none;
}
@media (max-width: 820px) {
  .founder {
    margin-top: 40px;
  }
  .founder-card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #04071d; /* casa com o fundo do PNG composto */
  }
  /* mobile usa o PNG composto (símbolo + Manoel + badge) numa imagem só;
     esconde as 3 camadas separadas (resolve o bug de sobreposição/símbolo) */
  .founder-card .fc-watermark,
  .founder-card .fc-photo,
  .founder-card .fc-badge {
    display: none;
  }
  .founder-card .fc-photo-mobile {
    display: block;
    order: 1; /* imagem abaixo do texto */
    width: 100%;
    height: auto;
  }
  .founder-card .fc-copy {
    position: static;
    top: auto;
    transform: none; /* reseta o translateY(-50%) do desktop (evitava o vão) */
    width: auto;
    order: -1; /* texto acima da imagem */
    align-items: flex-start; /* Figma mobile: texto alinhado à esquerda */
    text-align: left;
    padding: 40px 30px 20px;
  }
  /* nome menor no mobile como no Figma da imersão, com os mesmos ~25% a mais */
  .founder-card .fc-name {
    font-size: 34px;
  }
}

/* O fechamento é só o CTA (a nota e o corte saíram a pedido da autora). A
   margem que a .journey-note trazia veio pra cá, senão o botão colava na
   jornada. */
.diag-cta{margin-top:56px;display:flex;flex-direction:column;align-items:center;gap:16px}
/* O miolo do botão na cor da ilha (a mesma mistura do .sec-blue no site.css):
   o .btn-grad da base pinta o padding-box com var(--bg), que aqui ficava um
   quase-preto destacado do azul. Só a borda gradiente desenha o botão; o
   background-size volta porque o shorthand acima o reseta (a faixa de 300% é o
   que o gradSlide anima). */
.diag-cta .btn-grad{
  background:
    linear-gradient(color-mix(in srgb,var(--blue) 10%,var(--bg)),color-mix(in srgb,var(--blue) 10%,var(--bg))) padding-box,
    linear-gradient(92deg,#3972FD,#A364FF,#FA9800,#34D399,#5BC0BE,#3972FD) border-box;
  background-size:100% 100%, 300% 100%;
}

/* As etapas na gramática do CRM: o bloco abaixo é o .sflow/.snode/.sflow-lk
   do #diferencial da /crm (CSS embutido de lá), escopado em #diagnostico e
   com três adaptações declaradas: (1) --app vira o azul do site e --ease vem
   junto, porque lá os dois nascem no embed da página; (2) são 4 cards em vez
   de 5, então o arco dos nth-of-type e a cadência dos delays foram reindexados
   mantendo os valores do CRM (o destaque .key é a etapa 03); (3) a .sflow-cap
   e os rótulos .lb ficaram de fora (seria copy nova; os .lb são display:none
   no próprio CRM). Fora isso, valores intactos. */
#diagnostico .sflow{position:relative;margin:52px auto 0;max-width:1280px;
  --app:var(--blue);--ease:cubic-bezier(.22,1,.36,1)}
#diagnostico .sflow-row{display:flex;align-items:stretch;justify-content:center;gap:0}
#diagnostico .snode{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  padding:30px 20px 26px;border-radius:18px;isolation:isolate;
  background:linear-gradient(155deg,rgba(151,178,239,.09),rgba(16,22,48,.66) 38%,rgba(8,12,31,.78));
  backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);
  border:1px solid rgba(181,202,247,.16);
  box-shadow:0 26px 54px -34px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -10px 24px rgba(2,6,24,.24);
  transition:transform .65s var(--ease),border-color .65s var(--ease),box-shadow .65s var(--ease),background .65s var(--ease)}
/* o arco do CRM reindexado pra 4 cards: pontas mais baixas, vizinho do key no meio */
#diagnostico .snode:nth-of-type(1),#diagnostico .snode:nth-of-type(4){margin:10px 0}
#diagnostico .snode:nth-of-type(2){margin:5px 0}
#diagnostico .snode:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--app) 38%,rgba(181,202,247,.16));
  background:linear-gradient(155deg,rgba(151,178,239,.13),rgba(18,26,56,.72) 38%,rgba(8,12,31,.82));
  box-shadow:0 34px 64px -34px rgba(0,0,0,.96),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -10px 24px rgba(2,6,24,.28)}
#diagnostico .snode .step{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:var(--font);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:999px;white-space:nowrap;
  background:#101736;border:1px solid var(--line-2);color:var(--muted)}
#diagnostico .snode .sic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none;color:var(--app);
  background:linear-gradient(160deg,color-mix(in srgb,var(--app) 18%,#0A0F26),#0A0F26);border:1px solid color-mix(in srgb,var(--app) 32%,transparent);
  box-shadow:0 13px 24px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.12);
  transition:box-shadow .6s var(--ease),transform .6s var(--ease),border-color .6s var(--ease)}
#diagnostico .snode:hover .sic{transform:translateY(-2px) rotate(-2deg) scale(1.055);border-color:color-mix(in srgb,var(--app) 52%,transparent);
  box-shadow:0 18px 30px -18px rgba(0,0,0,.95),0 0 26px -17px rgba(57,114,253,.72),inset 0 1px 0 rgba(255,255,255,.16)}
#diagnostico .snode .sic svg{width:24px;height:24px}
#diagnostico .snode b{font-family:var(--font);font-size:14px;font-weight:600;color:#fff;line-height:1.3}
#diagnostico .snode span{font-size:11.5px;color:var(--muted);line-height:1.55;text-wrap:balance}
#diagnostico .snode .txt{display:flex;flex-direction:column;gap:7px}
/* etapa em destaque: a 03, onde a promessa da dobra acontece */
#diagnostico .snode.key{z-index:2;flex:1.16;margin:-9px 0;padding-top:39px;padding-bottom:34px;border-color:color-mix(in srgb,var(--app) 48%,transparent);
  background:radial-gradient(120% 95% at 50% 0%,rgba(57,114,253,.2),transparent 58%),linear-gradient(155deg,rgba(74,116,224,.2),rgba(15,23,52,.82) 48%,rgba(7,11,30,.9));
  box-shadow:0 34px 74px -38px rgba(0,0,0,.98),0 0 48px -31px rgba(57,114,253,.62),
    inset 0 1px 0 rgba(192,211,255,.24),inset 0 -14px 30px rgba(2,6,24,.3)}
#diagnostico .snode.key:hover{transform:translateY(-8px) scale(1.018);border-color:color-mix(in srgb,var(--app) 68%,transparent)}
#diagnostico .snode.key .step{background:var(--app);border-color:transparent;color:#fff}
#diagnostico .snode.key .sic{width:60px;height:60px;border-radius:18px;border-color:color-mix(in srgb,var(--app) 58%,transparent);
  box-shadow:0 18px 34px -20px rgba(0,0,0,.95),0 0 34px -16px rgba(57,114,253,.72),inset 0 1px 0 rgba(255,255,255,.18)}
/* a energia chega em cada etapa e respira antes de reiniciar a jornada */
#diagnostico .snode .sic{animation:snJourney 12s cubic-bezier(.37,0,.23,1) infinite;animation-delay:var(--sd,0s)}
@keyframes snJourney{0%,7%,100%{filter:brightness(.88);translate:0 0}12%,19%{filter:brightness(1.18);translate:0 -3px}27%,92%{filter:brightness(1);translate:0 0}}
#diagnostico .snode:nth-of-type(1) .sic{--sd:0s}
#diagnostico .snode:nth-of-type(2) .sic{--sd:1.45s}
#diagnostico .snode:nth-of-type(3) .sic{--sd:3.1s}
#diagnostico .snode:nth-of-type(4) .sic{--sd:4.75s}

/* conector entre os cards (sem os rótulos .lb do CRM) */
#diagnostico .sflow-lk{flex:none;width:52px;align-self:center;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 2px}
#diagnostico .sflow-lk .ln{position:relative;width:100%;height:1px;overflow:visible;background:linear-gradient(90deg,transparent,rgba(157,189,255,.26) 20%,rgba(157,189,255,.26) 80%,transparent)}
#diagnostico .sflow-lk .ln::before{content:"";position:absolute;left:0;top:-1px;width:42%;height:3px;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(57,114,253,.38),#6E9CFF,transparent);
  filter:drop-shadow(0 0 5px rgba(57,114,253,.65));opacity:0;
  animation:lkFlow 12s cubic-bezier(.42,0,.25,1) infinite;animation-delay:var(--ld,0s)}
#diagnostico .sflow-lk .ln::after{content:"";position:absolute;right:-1px;top:50%;width:0;height:0;margin-top:-3.5px;
  border:3.5px solid transparent;border-left-color:color-mix(in srgb,var(--app) 68%,transparent);opacity:.7}
@keyframes lkFlow{0%,4%,100%{opacity:0;transform:translateX(-80%)}8%{opacity:1}20%{opacity:.9}27%,92%{opacity:0;transform:translateX(220%)}}
#diagnostico .sflow-lk:nth-of-type(1) .ln::before{--ld:.75s}
#diagnostico .sflow-lk:nth-of-type(2) .ln::before{--ld:2.4s}
#diagnostico .sflow-lk:nth-of-type(3) .ln::before{--ld:4.05s}

@media(max-width:900px){
  #diagnostico .sflow-row{flex-direction:column;align-items:stretch;gap:0}
  #diagnostico .snode,#diagnostico .snode:nth-of-type(1),#diagnostico .snode:nth-of-type(2),#diagnostico .snode:nth-of-type(4){margin:0}
  #diagnostico .snode{flex-direction:row;text-align:left;gap:14px;align-items:center;padding:18px 16px 18px 18px}
  #diagnostico .snode.key{flex:1;padding:23px 18px}
  #diagnostico .snode.key .sic{width:56px;height:56px}
  #diagnostico .snode .step{top:-9px;left:18px;transform:none}
  #diagnostico .snode .txt{flex:1;min-width:0}
  #diagnostico .sflow-lk{width:100%;height:38px;flex-direction:row;justify-content:center;gap:9px;padding:0}
  #diagnostico .sflow-lk .ln{width:1px;height:30px;background:linear-gradient(180deg,transparent,rgba(157,189,255,.28) 18%,rgba(157,189,255,.28) 82%,transparent)}
  #diagnostico .sflow-lk .ln::before{left:-1px;top:0;width:3px;height:42%;
    background:linear-gradient(180deg,transparent,rgba(57,114,253,.38),#6E9CFF,transparent);
    animation-name:lkFlowY}
  #diagnostico .sflow-lk .ln::after{border-left-color:transparent;border-top-color:color-mix(in srgb,var(--app) 75%,transparent);
    right:auto;left:50%;top:auto;bottom:-7px;margin:0 0 0 -3.5px}
  @keyframes lkFlowY{0%,4%,100%{opacity:0;transform:translateY(-80%)}8%{opacity:1}20%{opacity:.9}27%,92%{opacity:0;transform:translateY(220%)}}
}
@media(prefers-reduced-motion:reduce){#diagnostico .snode .sic,#diagnostico .sflow-lk .ln::before{animation:none!important;filter:none!important;translate:none!important}}


/* ---- 6. embed do HubSpot ------------------------------------------------ */
/* Mesmo kit visual do #ic-hsform (/imersao-in-company), que por sua vez veio
   do embed da /scale-ai. Um único form na página inteira. */
/* A copy fica à esquerda e o formulário ao lado, alinhados pelo topo. O
   .mh-top acima atravessa a largura inteira. */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:34px}
/* O título desta seção não abre seção, rotula o formulário que está ao lado.
   No corpo cheio do .h2 (até 46px) ele ocupava três linhas em meia coluna e
   pesava mais que o próprio formulário, que é a única conversão da página. */
.form-copy .h2{text-align:left;font-size:clamp(24px,2.2vw,32px)}
/* pretty evita que a última linha do parágrafo fique com uma palavra só, que é
   o que acontecia aqui em várias larguras. A base já usa isso em texto de apoio
   (site.css). */
.form-copy .lede{margin:16px 0 0;max-width:46ch;text-align:left;text-wrap:pretty}
@media(max-width:900px){
  .form-grid{grid-template-columns:1fr;gap:28px}
  .form-copy .lede{max-width:none}
}
/* Variante das LPs de app (/lp-crm, /lp-crm-whatsapp): o formulário fica à
   ESQUERDA e a copy à direita, centrada na altura dele: a conversão entra
   primeiro no sentido de leitura e o texto vira o apoio. Mais ar entre as
   colunas e o título um degrau maior, porque agora ele tem a coluna inteira
   pra respirar. No mobile a ordem visual volta a ser título → formulário. */
.form-grid.form-esq{gap:clamp(44px,6vw,88px)}
.form-esq .form-copy{order:2;align-self:center;justify-self:start}
.form-esq .form-copy .h2{font-size:clamp(26px,2.6vw,38px)}
.form-esq .form-copy .lede{margin-top:24px;line-height:1.75}
/* a CTA da coluna de texto: mesmo destino de todos os CTAs da página (rola
   ao formulário e foca o primeiro campo, via lp.js) */
.form-esq .form-copy .btn{margin-top:36px}
@media(max-width:900px){
  .form-esq .form-copy{order:0;align-self:start}
}
#lp-hsform{max-width:560px;margin:0;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px}
#lp-hsform fieldset{max-width:none!important;margin-bottom:0}
#lp-hsform .hs-form-field{margin-bottom:15px}
#lp-hsform .hs-form-field>label{display:block;font-family:var(--font);font-size:12.5px;color:#cfd3e6;margin-bottom:6px;font-weight:500}
#lp-hsform .hs-form-field>label .hs-form-required{color:var(--teal);margin-left:2px}
#lp-hsform .hs-input{width:100%;box-sizing:border-box;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font-family:var(--font);font-size:14.5px}
#lp-hsform .hs-input:focus{outline:none;border-color:color-mix(in srgb,var(--teal) 55%,var(--line))}
#lp-hsform textarea.hs-input{min-height:88px;resize:vertical}
#lp-hsform select.hs-input option{background:#0A0F26;color:#fff}
#lp-hsform .hs-input::placeholder{color:#6b7193}
#lp-hsform ul,#lp-hsform .inputs-list{list-style:none;margin:0;padding:0}
#lp-hsform .hs-error-msgs{margin:6px 0 0;color:#ffb1b1;font-size:12px}
/* O envio é o CTA primário da página e usa o teal sólido de campanha, no padrão
   da /imersao e da /palestra: cor cheia, sem gradiente. Numa LP de mídia paga
   existe um botão só que importa, e sólido ele aparece mais do que competindo
   com o gradiente que já vive no traço do topo e no hover dos pilares. O .btn
   vem da base; o .btn-teal é escopo de campanha e mora aqui (a base não tem
   essa variante). As classes entram pelo lp.js, porque o markup do botão é
   gerado pelo HubSpot. */
.btn-teal{
  background:var(--teal);color:#04121f;
  font-weight:700;border:none;
  box-shadow:0 0 30px -10px rgba(91,192,190,.7);
}
.btn-teal:hover{
  transform:translateY(-2px);background:#6fd0ce;
  box-shadow:0 14px 40px -12px rgba(91,192,190,.7);
}
#lp-hsform .hs-button{width:100%;margin-top:8px;cursor:pointer}
/* Rede de segurança: se o HubSpot reconstruir o botão e as classes se
   perderem, ele continua legível em vez de virar um retângulo transparente.
   Mesmo teal do .btn-teal, então a troca nem aparece. */
#lp-hsform .hs-button:not(.btn){
  border:none;border-radius:999px;padding:15px 20px;
  font-family:var(--font);font-weight:700;font-size:15px;
  color:#04121f;background:var(--teal);
}
#lp-hsform .legal-consent-container,#lp-hsform .hs-richtext{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5}
@media(max-width:600px){#lp-hsform{padding:24px}}

/* ---- 7. botão flutuante ------------------------------------------------- */
/* Ícone de WhatsApp, mas o destino é o formulário: quem dispara a mensagem é o
   CRM, depois do preenchimento, com a régua certa para o porte da empresa. */
.float-cta{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px 13px 16px;border-radius:999px;
  background:#25D366;color:#04121f;text-decoration:none;
  font-family:var(--font);font-weight:700;font-size:14.5px;
  box-shadow:0 16px 38px -14px rgba(37,211,102,.7);
  transition:transform .18s ease,filter .18s ease;
}
.float-cta:hover{filter:brightness(1.06);transform:translateY(-2px)}
.float-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.float-cta svg{width:22px;height:22px;flex:none}
@media(max-width:600px){
  .float-cta{right:14px;bottom:14px;padding:13px 17px 13px 14px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.float-cta{transition:none}}
/* Nas LPs de app o flutuante sai (pedido da autora, 04/09): a página já tem
   CTA no topo, na hero, nos casos e na copy do formulário. O markup vem da
   parcial de rodapé compartilhada com a /lp-hub, então o corte é por CSS,
   ancorado no nav que só essas duas páginas têm. */
body:has(nav.nav-pill) .float-cta{display:none}

/* ---- 8. rodapé mínimo e página de agradecimento ------------------------- */
footer.foot-lp .foot-in{gap:10px}
/* o <nav> do rodapé herda o estilo do nav cru da base (sticky, fundo escuro,
   borda e blur) e virava uma caixa atrás dos links: aqui ele volta a ser só
   uma linha de links */
footer.foot-lp .foot-legal{
  display:flex;flex-wrap:wrap;gap:18px;
  position:static;z-index:auto;background:transparent;border:0;backdrop-filter:none;
}
/* Wordmark do rodapé nas LPs de app (pedido da autora, 04/09): Palanquin,
   com "Marvee" bold e "Hub" fino. A secundária do design system já carrega
   no Base (300-700). */
body:has(nav.nav-pill) footer.foot-lp .wordmark{font-family:'Palanquin',sans-serif;font-weight:700;letter-spacing:0}
body:has(nav.nav-pill) footer.foot-lp .wordmark .hub{font-weight:300}
/* os links legais centrados na coluna do meio do rodapé */
body:has(nav.nav-pill) footer.foot-lp .foot-legal{justify-content:center}

/* Nas LPs de app os detalhes do formulário são AZUIS, não teal (a cor de
   ação do site): asterisco de obrigatório e borda de foco. O Enviar é a
   exceção suave: branco com texto navy, a CTA primária do site novo (PR
   #312), sem glow: o azul forte fica pro CTA da copy ao lado. A regra pega
   com e sem as classes do lp.js (rede de segurança inclusa). */
body:has(nav.nav-pill) #lp-hsform .hs-form-field>label .hs-form-required{color:#6FA8FF}
body:has(nav.nav-pill) #lp-hsform .hs-input:focus{border-color:color-mix(in srgb,#3972FD 60%,var(--line))}
body:has(nav.nav-pill) #lp-hsform .hs-button{
  color:#0A0F26;background:#fff;border:none;font-weight:700;
  box-shadow:0 10px 26px -16px rgba(2,6,24,.9);
  animation:none;
}
body:has(nav.nav-pill) #lp-hsform .hs-button:hover{
  transform:translateY(-2px);filter:none;
  background:#f2f5ff;
  box-shadow:0 14px 32px -16px rgba(57,114,253,.4);
}
body:has(nav.nav-pill) #lp-hsform .hs-button:active{
  transform:translateY(1px);
  box-shadow:0 6px 16px -12px rgba(2,6,24,.8);
}

/* ---- 13. os acentos verdes da /lp-crm-whatsapp --------------------------
   Pedido da autora (04/09): na LP de WhatsApp os DETALHES são verdes, na cor
   do app (o glow atrás do mockup já vem verde pelo --luz-mock). As AÇÕES
   seguem azuis, que é a cor de ação do site. O gancho body.lp-crm-whatsapp
   vem do lp.js (slug do MARVEE_LP). */
body.lp-crm-whatsapp .lp-pill svg{color:#6EE7B7}
body.lp-crm-whatsapp .dores-v2 .pain .ic{
  background:linear-gradient(160deg,rgba(34,181,99,.22),rgba(255,255,255,.05) 55%,rgba(34,181,99,.1));
  border-color:rgba(110,231,183,.34);
  color:#4ADE97;
}
body.lp-crm-whatsapp .dores-v2 .pain:hover .ic{
  color:#fff;
  background:linear-gradient(160deg,#2fbf72,#12a06f);
  border-color:rgba(110,231,183,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 16px 30px -14px rgba(34,181,99,.7);
}
/* Nesta LP os BOTÕES também são verdes (ordem da autora, 04/09, que aqui
   vence o azul-de-ação padrão): topo, hero, copy do formulário e o Enviar.
   Texto navy sobre o verde, o par de contraste que o repo já usa. */
body.lp-crm-whatsapp .btn-blue-3d{
  color:#04121f;
  background:linear-gradient(180deg,#33d47f,#1fae63);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 26px -4px rgba(37,211,102,.55), 0 12px 32px -10px rgba(37,211,102,.5);
}
body.lp-crm-whatsapp .btn-blue-3d:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 34px -2px rgba(37,211,102,.65), 0 16px 38px -10px rgba(37,211,102,.55);
}
body.lp-crm-whatsapp .btn-blue-3d:active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 0 18px -4px rgba(37,211,102,.5), 0 6px 16px -8px rgba(37,211,102,.4);
}
/* o .hs-button dobrado vence a regra branca do Enviar, que carrega um :has
   com argumento contando na especificidade */
body.lp-crm-whatsapp #lp-hsform .hs-button.hs-button{
  color:#04121f;background:linear-gradient(180deg,#33d47f,#1fae63);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 26px -14px rgba(37,211,102,.7);
}
body.lp-crm-whatsapp #lp-hsform .hs-button.hs-button:hover{
  background:linear-gradient(180deg,#3bdd88,#25b96c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 32px -14px rgba(37,211,102,.8);
}
/* e os demais detalhes da página: asterisco e foco do formulário, os acentos
   dos pilares e das dores (as vars por seção), o hover dos chips dos casos e
   o ponto ativo dos carrosséis */
body.lp-crm-whatsapp #lp-hsform .hs-form-field>label .hs-form-required{color:#4ADE97}
body.lp-crm-whatsapp #lp-hsform .hs-input:focus{border-color:color-mix(in srgb,#22b563 60%,var(--line))}
body.lp-crm-whatsapp #produto .wcell{--wc:#22b563}
body.lp-crm-whatsapp #dores .grid4{--pain-c:#22b563}
body.lp-crm-whatsapp #casos .case-card:hover .cc-ic{color:#12a06f}
body.lp-crm-whatsapp .cdots button.on{background:linear-gradient(90deg,#2fd57e,#12a06f);box-shadow:0 0 12px rgba(37,211,102,.5)}

/* Nunca palavra sozinha na última linha (ordem da autora, 04/09): títulos
   equilibram as linhas (balance) e texto corrido evita a órfã (pretty),
   nas duas LPs inteiras. */
body:has(nav.nav-pill) h1,
body:has(nav.nav-pill) h2,
body:has(nav.nav-pill) h3{text-wrap:balance}
body:has(nav.nav-pill) p{text-wrap:pretty}

/* A /lp-hub-obrigado não tem saída: nem menu, nem botão de voltar. Só a
   confirmação, centrada na tela. */
.ty{min-height:82vh;display:grid;place-items:center;padding:80px 0}
.ty-in{max-width:640px;margin:0 auto;padding:0 24px;text-align:center}
.ty-badge{
  width:64px;height:64px;margin:0 auto 26px;border-radius:20px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--teal) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 32%,transparent);
  color:var(--teal);
}
.ty-badge svg{width:30px;height:30px}
.ty-in h1{font-size:clamp(30px,4.6vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.14}
.ty-in .lede{margin-top:18px}
.ty-list{
  margin:34px auto 0;max-width:460px;text-align:left;
  display:flex;flex-direction:column;gap:12px;
  padding:24px;border-radius:20px;
  background:rgba(13,16,35,.46);border:1px solid rgba(231,237,255,.1);
}
.ty-list p{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.ty-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ty-list li{display:flex;gap:10px;font-size:14.5px;color:var(--muted);line-height:1.55}
.ty-list li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--teal)}

/* ---- 9. mockup parado, em moldura de vidro (/lp-crm, /lp-crm-whatsapp) --- */
/* Nas LPs de app o mockup fica de frente e parado: sem a inclinação 3D e sem o
   parallax do mouse da base (o heroParallax segue escrevendo --mx/--my, mas
   nada aqui consome). A janela ganha canto arredondado no topo, uma moldura de
   vidro em volta e uma luz atrás na cor do app, que cada página declara em
   --luz-mock (RGB) na própria section.hero: azul do CRM na /lp-crm, verde do
   WhatsApp na /lp-crm-whatsapp. O pé é reto e termina RENTE à borda de baixo
   do painel da hero (.lp-hero-box), sem o fade da base: quem fecha a janela é
   o próprio canto arredondado do painel. A /lp-hub não usa a classe e mantém
   a cena inclinada da /hub. */
.lp-mock-fixo{--luz-mock:57,114,253}
.lp-mock-fixo .hero-mock{perspective:none}
.lp-mock-fixo .mock-frame{
  transform:none !important;
  /* um pouco mais alta que a base (420/37vw/478): de frente, sem a
     inclinação encurtando a janela, ela pedia mais tela */
  height:clamp(456px,40vw,516px);
  border:1px solid rgba(255,255,255,.16);border-bottom:none;
  border-radius:16px 16px 0 0;
  box-shadow:
    0 46px 90px -28px rgba(0,0,0,.92),
    0 16px 38px -16px rgba(0,0,0,.72),
    0 0 160px -10px rgba(var(--luz-mock),.62),
    inset 0 1px 0 rgba(255,255,255,.07);
}
/* sem o fade da base no pé: a janela vai inteira até a borda do painel */
.lp-mock-fixo .mock-frame::after{display:none}
/* a sombra projetada era do mockup inclinado; de frente ela não existe */
.lp-mock-fixo .mock-floor{display:none}
/* o mockup cola no fundo do painel: sem respiro embaixo do palco */
.lp-mock-fixo .hero-stage{margin-bottom:0;padding-bottom:0}
/* moldura de vidro: um anel translúcido em volta da janela, aberto embaixo
   como ela (o corte de baixo é a borda do painel) */
.lp-mock-fixo .hero-mock::before{
  content:"";position:absolute;inset:-12px -12px 0;z-index:0;
  border-radius:26px 26px 0 0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.13);border-bottom:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
  pointer-events:none;
}
/* a tela do CRM em vídeo dentro da janela (/lp-crm). Sem a toolbar de
   navegador (pedido da autora): o .is-tela vira só a tela do produto, na
   proporção exata do vídeo (nada corta, nada sobra), sem o traço claro da
   base, que sobre o conteúdo branco virava uma borda suja. O fundo claro
   segura o primeiro quadro enquanto o vídeo carrega. */
.lp-mock-fixo .mock-frame.is-tela{
  height:auto;aspect-ratio:1058/472;
  border:none;
  background:#FBFCFF;
}
.lp-mock-fixo .mock-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;display:block;
  background:#FBFCFF;
}
/* a luz atrás da janela, na cor do app, sem acompanhar o mouse */
.lp-mock-fixo .hero-light{transform:translateX(-50%)}
.lp-mock-fixo .hero-light .haze{
  background:
    radial-gradient(64% 70% at 50% 48%, rgba(var(--luz-mock),.42), transparent 74%),
    radial-gradient(38% 44% at 60% 28%, rgba(var(--luz-mock),.16), transparent 76%);
}

/* ---- 10. veste do site novo nas LPs de app: nav pílula + hero em painel ---
   Destilado da hero do site institucional em construção (PR #312, /site2):
   lá o menu é uma barra pílula de vidro flutuando sobre um painel arredondado
   com respiro nos quatro lados. Aqui entra a mesma leitura, sem os três
   estados de rolagem do original: o vidro escuro é permanente. As classes
   .nav-pill e .lp-hero-box só existem na /lp-crm e na /lp-crm-whatsapp. */
nav.nav-lp.nav-pill{
  position:fixed;left:0;right:0;
  top:calc(clamp(6px,.9vw,12px) + clamp(14px,1.6vw,20px));
  background:transparent;border-bottom:0;backdrop-filter:none;
  pointer-events:none;
}
/* Dois estados (lp.js escreve .is-boxed e mede --pillw): no topo a barra é
   larga e solta sobre o painel; rolou, compacta pra pílula de vidro. Os
   valores neutros (blur 0px, cor com alfa 0) ficam declarados pros dois
   sentidos interpolarem: backdrop-filter não transiciona vindo de none. */
nav.nav-lp.nav-pill .nav-in{
  pointer-events:auto;
  width:100%;max-width:min(1180px, calc(100vw - 48px));
  gap:clamp(16px,2.2vw,30px);
  /* a mesma medida da barra do site do PR #312: 72px de altura, pílula
     plena (raio = metade) e 19px de respiro até o logo e até a CTA */
  min-height:72px;
  padding:8px 19px;
  border-radius:36px;
  box-sizing:border-box;
  background:rgba(5,9,28,0);
  border:1px solid rgba(255,255,255,0);
  backdrop-filter:blur(0px) saturate(100%);
  -webkit-backdrop-filter:blur(0px) saturate(100%);
  box-shadow:0 18px 44px -30px rgba(0,0,0,0);
  transition:max-width .55s var(--ease-soft), background .4s var(--ease-soft),
    border-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft),
    backdrop-filter .4s var(--ease-soft);
}
nav.nav-lp.nav-pill.medindo .nav-in{width:max-content;max-width:none;transition:none}
nav.nav-lp.nav-pill.is-boxed .nav-in{
  max-width:var(--pillw, 640px);
  background:rgba(5,9,28,.58);
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  box-shadow:0 18px 44px -30px rgba(0,0,0,.85);
}
/* o vidro é sempre escuro: os links não trocam de cor quando a caixa clara
   dos casos passa por baixo (anula o .nav-adaptive aqui) */
nav.nav-lp.nav-pill .mm-link{color:rgba(255,255,255,.84)}
/* o headset e a CTA andam juntos: desconta o vão da barra e deixa 10px */
nav.nav-lp.nav-pill .nav-help{margin-right:calc(10px - clamp(16px,2.2vw,30px))}
nav.nav-lp.nav-pill .mm-link:hover{color:#fff}
nav.nav-lp.nav-pill .logo svg{color:#fff}
/* o símbolo no topo: branco com o detalhe (a asa superior direita) em teal.
   As vars entram pelo <use>; onde ninguém as define, o símbolo segue nas
   cores oficiais (a parcial de abertura guarda os fallbacks). */
nav.nav-lp.nav-pill .logo svg{--logo-corpo:#fff;--logo-asa:#5BC0BE}

/* o painel da hero: respiro nos quatro lados, raio grande, traço interno e a
   luz do app subindo do topo (a cor vem do --luz-mock de cada página) */
.lp-hero-box{
  margin:clamp(6px,.9vw,12px);
  padding-top:clamp(118px,13vw,148px);
  border-radius:clamp(20px,2.2vw,30px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 26px 60px -46px rgba(16,24,40,.5);
}
.lp-hero-box::before{
  /* o painel é um degrau mais claro que o navy da página, do topo ao pé:
     é a diferença de tonalidade que faz a caixa existir */
  background:
    radial-gradient(140% 100% at 50% -30%, rgba(var(--luz-mock),.26), rgba(var(--luz-mock),.07) 55%, transparent 74%),
    linear-gradient(180deg,#101B4A,#0C1638 58%,#0A1330);
}

/* ---- 11. pílula de apoio antes dos títulos (/lp-crm, /lp-crm-whatsapp) ---
   Portada da .mv-pill do site institucional em construção (PR #312): um
   rótulo curto em pílula antes de cada título de seção. Sobre o navy ela é
   vidro (translúcida, borda clara, brilho de topo); dentro da caixa clara
   dos casos vira branca com sombra, sozinha, pelo .sec-light. */
.lp-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:100px;
  font-family:var(--font);font-size:14px;font-weight:600;
  letter-spacing:-.01em;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  margin-bottom:20px;
  /* em coluna de flex/grid ela não estica: é do tamanho do rótulo */
  width:fit-content;align-self:flex-start;justify-self:start;
}
.lp-pill svg{width:16px;height:16px;flex:none;color:#9DBDFF}
/* na linha do topo dos casos ela toma o lugar da CTA, alinhada ao traço */
.mh-top .lp-pill{margin-bottom:0}
.sec-light .lp-pill{
  background:#fff;border-color:transparent;color:#141B33;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.sec-light .lp-pill svg{color:#3972FD}

/* ---- 12. cards do cenário: a veste da referência, em modo escuro --------
   Referência trazida pela autora em 04/09 (componente de cards com tilt
   3D): raio bem grande, ícone num tile arredondado no alto, título forte,
   texto, e o card inclinando em 3D atrás do mouse. Aplicada nos cards de
   dor da seção "O cenário" (#dores), que já são escuros: é o modo escuro
   pedido. Só nas duas LPs (classe .dores-v2 na section). A seção de casos
   ficou como era (a autora reverteu a rodada que mexeu lá). */
.dores-v2 .grid4{gap:18px}
.dores-v2 .pain{
  background:linear-gradient(180deg,#0C1332,#080E27);
  border:1px solid rgba(255,255,255,.09);
  border-radius:32px;
  padding:34px 26px 32px;
  min-height:340px;box-sizing:border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -26px rgba(2,6,24,.8);
  transition:transform .18s ease-out, box-shadow .35s ease;
  will-change:transform;
  /* o conteúdo tem profundidade própria no tilt (o translateZ dos filhos
     só aparece porque o card preserva o 3D) */
  transform-style:preserve-3d;
}
.dores-v2 .pain .ic,
.dores-v2 .pain h3,
.dores-v2 .pain p{transform:translateZ(28px)}
.dores-v2 .pain:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 56px -28px rgba(2,6,24,.9);
}
/* o tile do ícone: vidro com profundidade (gradiente, traço claro em cima,
   sombra interna embaixo e a projetada). Sem backdrop-filter de propósito: o
   card inclina com transform e ancestral transformado mata o efeito; o vidro
   aqui vem das pistas ópticas. Ícone no azul do app. */
.dores-v2 .pain .ic{
  width:56px;height:56px;border-radius:16px;margin-bottom:22px;
  background:linear-gradient(160deg,rgba(57,114,253,.2),rgba(255,255,255,.05) 55%,rgba(57,114,253,.08));
  border:1px solid rgba(122,160,255,.3);
  color:#6FA8FF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -9px 16px rgba(2,6,24,.35),
    0 12px 24px -14px rgba(2,6,24,.9);
}
.dores-v2 .pain .ic svg{width:24px;height:24px}
/* no hover o tile inverte, como na referência: enche do azul do app e o
   ícone vira branco, com a sombra colorida crescendo */
.dores-v2 .pain .ic{transition:background .5s var(--ease-soft), color .5s var(--ease-soft), border-color .5s var(--ease-soft), box-shadow .5s var(--ease-soft)}
.dores-v2 .pain:hover .ic{
  color:#fff;
  background:linear-gradient(160deg,#4a7dff,#2f5fe8);
  border-color:rgba(122,160,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 16px 30px -14px rgba(57,114,253,.7);
}
.dores-v2 .pain h3{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.3;margin-bottom:10px}
.dores-v2 .pain p{font-size:14px;line-height:1.7}