.elementor-896 .elementor-element.elementor-element-2aba5fd{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* Conferencia de motion 28/08/2026 - copia da secao 9 de public/l2y/l2y.css.
   Aqui as regras levam !important e no arquivo NAO levam: esta folha
   (post-896.css) carrega no head e o l2y.css carrega depois, dentro do body,
   entao sem !important o arquivo ganha. */

/* 1) hover que MOVE so onde existe mouse: no toque o efeito grudava */
@media (hover:none),(pointer:coarse){
  .btn:hover,
  .wa:hover,
  .cell:hover,.step-cell:hover,.case:hover,.quote:hover,
  .selo-img:hover{transform:none!important}
  .btn:hover svg{transform:none!important}
  .btn-solid:hover::after{transform:translateX(-130%)!important}
  .cert:hover figure img{transform:scale(1)!important;filter:saturate(.85) contrast(1.02)!important}
  .selo-img:hover{box-shadow:none!important}
}

/* 2) resposta de ponteiro de volta para menos de 300ms */
.btn-solid::after{transition:transform .28s var(--ease)!important}
.cert figure img{transition:transform .26s var(--ease),filter .26s var(--ease)!important}
.cell,.step-cell,.case,.quote{transition:background .28s var(--ease),transform .2s var(--ease)!important}

/* 3) aviso de cookies sai de cima dos botoes do hero e ganha a cor da casa.
   Nada e escondido: Rejeitar e Aceitar ficam do mesmo tamanho e alcancaveis. */
@media (min-width:901px){
  #cookie-banner{left:auto!important;right:24px!important;bottom:104px!important}
}
#cookie-banner{background:#081019!important;border:1px solid rgba(29,230,232,.22)!important;
  box-shadow:0 24px 64px -20px rgba(0,0,0,.8)!important;border-radius:16px!important;color:#E7ECF2!important}
#cookie-banner *{color:inherit!important;font-family:inherit!important}
#cookie-banner a{color:var(--cyan)!important;text-decoration-color:rgba(29,230,232,.4)!important}
#cookie-banner small,#cookie-banner p,#cookie-banner div{background:transparent!important}
#cookie-banner button{border-radius:999px!important;font-weight:600!important;min-height:44px!important;
  padding:0 20px!important;border:1px solid var(--line-2)!important;background:transparent!important;color:#E7ECF2!important}
#cookie-banner button:last-of-type{background:var(--cyan)!important;color:#03080E!important;border-color:var(--cyan)!important}
#adopt-controller-button{width:44px!important;height:44px!important;bottom:16px!important;left:16px!important;
  opacity:.55!important;transition:opacity .25s var(--ease)!important}
#adopt-controller-button:hover,#adopt-controller-button:focus-within{opacity:1!important}

/* ============================================================================
   10 - PECAS DE 28/08 (a fileira de selos migrou para o bloco 12)
   ============================================================================ */

/* 10.2 - depoimentos: sao 5 cartoes e a grade base e de 4 colunas, o que deixa
   um orfao. Aqui a grade vai para 3 colunas e o depoimento longo ocupa 2. */
#depoimentos .quotes{grid-template-columns:1fr!important}
@media (min-width:700px){
  #depoimentos .quotes{grid-template-columns:repeat(2,1fr)!important}
  #depoimentos .q-wide{grid-column:span 2!important}
}
@media (min-width:1100px){
  #depoimentos .quotes{grid-template-columns:repeat(3,1fr)!important}
}
.depo-nota{margin:22px 0 0!important;max-width:70ch!important}

/* 10.3 - alvo de toque do menu: "Cases" media 43x44 (medido em 1024 e 1440),
   1px abaixo do piso. */
.nav-links a{min-width:44px!important;justify-content:center!important}

/* ===========================================================================
   11 - CASES SEM CIFRA E FAIXA DE PROVA (28/08/2026)
   As nove cifras dos cases sairam: nenhuma tinha lastro em PRODUCT.md, e duas
   eram promessa de resultado em nome de cliente de nicho regulado (CFM e OAB).
   Os unicos numeros da pagina agora sao as cinco provas auditadas em 12/08.
   =========================================================================== */

/* 11.2 - cases: a linha vira rotulo em cima e escopo embaixo.
   O dd base e mono, ciano e nowrap, feito para cifra curta; texto de escopo
   quebraria a linha e estouraria o cartao. */
.case dl.escopo .row{display:block!important}
.case dl.escopo dt{display:block!important;font-family:"Geist Mono",ui-monospace,monospace!important;
  font-size:.68rem!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--cyan)!important;margin-bottom:4px!important}
.case dl.escopo dd{white-space:normal!important;font-family:inherit!important;font-size:.9rem!important;
  color:var(--fg-2)!important;line-height:1.45!important}

/* 11.3 - faixa das cinco provas auditadas */
#prova{padding-block:0!important}
#prova .provas{list-style:none!important;margin:0!important;padding:clamp(30px,3.2vw,44px) 0!important;
  border-block:1px solid var(--line)!important;display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(24px,2.6vw,34px)!important}
@media (min-width:900px){#prova .provas{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
#prova .provas li{display:flex!important;flex-direction:column!important;gap:6px!important}
#prova .provas b{font-size:clamp(1.6rem,3.2vw,2.4rem)!important;font-weight:600!important;
  letter-spacing:-.03em!important;color:var(--cyan)!important;line-height:1}
#prova .provas span{font-size:.85rem!important;color:var(--fg-3)!important;line-height:1.35}

/* 11.4 - abertura sem o numero */
.band-in.sem-num{grid-template-columns:minmax(0,1fr)!important}
@media (min-width:900px){.band-in.sem-num{grid-template-columns:minmax(0,1fr) auto!important}}

/* ===========================================================================
   12 - POLIMENTO: fileira de selos e comparativo com chavinha (28/08/2026)
   O comparativo era uma tabela em duas colunas e lia como planilha. Agora cada
   linha e um cartao com uma chavinha que LIGA quando a secao entra na tela:
   desligada (vermelha) do lado da agencia comum, ligada (ciano) do nosso.
   A chavinha INDICA estado, nao e controle: aria-hidden, sem foco, sem hover.
   =========================================================================== */

/* 12.1 - fileira de selos: dois logos oficiais em cartao branco e tres
   certificacoes em cartao escuro com o selo de conferido. Mesma altura e
   mesmo raio: le como faixa de selo, nao como lista de texto. */
.hero-cred{display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;
  gap:10px!important;margin:26px 0 0!important;padding:0!important;list-style:none!important}
.hero-cred li{display:flex!important;align-items:center!important;gap:10px!important;
  min-height:54px!important;border:0!important;border-radius:14px!important;padding:8px 14px!important;
  max-width:100%!important;box-sizing:border-box!important;font-size:1rem!important;color:var(--fg-2)!important}
.hero-cred .hc-logo{background:#fff!important;padding:8px 16px!important;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.9)!important}
.hero-cred .hc-logo img{display:block!important;height:30px!important;width:auto!important;
  max-width:none!important;object-fit:contain!important}
.hero-cred .hc-cert{background:rgba(29,230,232,.05)!important;
  border:1px solid rgba(29,230,232,.24)!important}
.hero-cred .hc-cert svg{flex:none!important;width:20px!important;height:20px!important;
  fill:none!important;stroke:var(--cyan)!important;stroke-width:1.7!important;
  stroke-linecap:round!important;stroke-linejoin:round!important}
.hero-cred .hc-cert span{display:flex!important;flex-direction:column!important;gap:1px!important;min-width:0!important}
.hero-cred .hc-cert b{font-family:inherit!important;font-size:.82rem!important;font-weight:500!important;
  letter-spacing:0!important;color:var(--fg)!important;line-height:1.25!important}
.hero-cred .hc-cert em{font-style:normal!important;font-family:"Geist Mono",ui-monospace,monospace!important;
  font-size:.66rem!important;letter-spacing:.06em!important;color:var(--cyan)!important;line-height:1.25!important}
@media (max-width:700px){
  .hero-cred{gap:8px!important;margin-top:20px!important}
  .hero-cred li{min-height:46px!important;padding:6px 11px!important;border-radius:12px!important}
  .hero-cred .hc-logo{padding:6px 12px!important}
  .hero-cred .hc-logo img{height:22px!important}
  .hero-cred .hc-cert b{font-size:.75rem!important}
  .hero-cred .hc-cert em{font-size:.62rem!important}
  .hero .hero-cta{margin-top:24px!important}
}

/* 12.2 - comparativo: cada par vira cartao, com a chavinha na frente */
#comparativo .vs{position:relative!important;display:grid!important;gap:14px!important;
  background:none!important;border:0!important;border-radius:0!important;overflow:visible!important;
  margin-top:clamp(34px,3.6vw,54px)!important}
@media (min-width:900px){#comparativo .vs{grid-template-columns:repeat(2,1fr)!important;gap:clamp(18px,2vw,30px)!important}}
#comparativo .vs-col{background:none!important;padding:0!important;display:flex!important;
  flex-direction:column!important;gap:12px!important}
#comparativo .vs-tit{margin:0 0 4px!important;font-family:"Geist Mono",ui-monospace,monospace!important;
  font-size:.72rem!important;letter-spacing:.16em!important;text-transform:uppercase!important;
  padding:0 0 0 4px!important;border:0!important}
#comparativo .vs-a .vs-tit{color:var(--fg-3)!important}
#comparativo .vs-b .vs-tit{color:var(--cyan)!important}

#comparativo .vs-item{display:flex!important;align-items:flex-start!important;gap:14px!important;
  margin:0!important;padding:clamp(16px,1.6vw,20px)!important;border-radius:16px!important;
  border:1px solid var(--line)!important;background:var(--ground)!important;
  transition:border-color .3s var(--ease),background .3s var(--ease)!important}
#comparativo .vs-b .vs-item{background:var(--surface)!important;border-color:var(--line-2)!important}
#comparativo.ligado .vs-b .vs-item{border-color:rgba(29,230,232,.28)!important}
#comparativo .vs-item h3{margin:0 0 4px!important;font-size:1rem!important}
#comparativo .vs-a .vs-item h3{color:var(--fg-2)!important}
#comparativo .vs-item p{margin:0!important}

/* a chavinha */
#comparativo .sw{flex:none!important;position:relative!important;display:block!important;
  width:42px!important;height:24px!important;margin-top:2px!important;border-radius:999px!important;
  background:rgba(255,255,255,.09)!important;border:1px solid var(--line-2)!important;
  transition:background .34s var(--ease),border-color .34s var(--ease)!important}
#comparativo .sw i{position:absolute!important;top:3px!important;left:3px!important;
  width:16px!important;height:16px!important;border-radius:50%!important;background:var(--fg-3)!important;
  transition:transform .34s var(--ease),background .34s var(--ease)!important}
/* estado final: tambem e o estado sem JS e com movimento reduzido */
#comparativo .vs-a .sw{background:rgba(232,80,86,.16)!important;border-color:rgba(232,80,86,.4)!important}
#comparativo .vs-a .sw i{background:#E85056!important;transform:translateX(0)!important}
#comparativo .vs-b .sw{background:rgba(29,230,232,.2)!important;border-color:rgba(29,230,232,.5)!important}
#comparativo .vs-b .sw i{background:var(--cyan)!important;transform:translateX(18px)!important}
/* estado armado: so existe quando o JS marcou a secao, e cai quando ela entra na tela */
#comparativo.arma .sw{background:rgba(255,255,255,.07)!important;border-color:var(--line-2)!important}
#comparativo.arma .sw i{background:var(--fg-3)!important;transform:translateX(0)!important}
#comparativo.arma.ligado .vs-a .sw{background:rgba(232,80,86,.16)!important;border-color:rgba(232,80,86,.4)!important}
#comparativo.arma.ligado .vs-a .sw i{background:#E85056!important}
#comparativo.arma.ligado .vs-b .sw{background:rgba(29,230,232,.2)!important;border-color:rgba(29,230,232,.5)!important}
#comparativo.arma.ligado .vs-b .sw i{background:var(--cyan)!important;transform:translateX(18px)!important}
/* escada: cada linha liga 70ms depois da anterior */
#comparativo .vs-item:nth-child(3) .sw,#comparativo .vs-item:nth-child(3) .sw i{transition-delay:70ms!important}
#comparativo .vs-item:nth-child(4) .sw,#comparativo .vs-item:nth-child(4) .sw i{transition-delay:140ms!important}
#comparativo .vs-item:nth-child(5) .sw,#comparativo .vs-item:nth-child(5) .sw i{transition-delay:210ms!important}

/* o disco "vs" entre as colunas */
#comparativo .vs-selo{display:none!important}
@media (min-width:900px){
  #comparativo .vs-selo{display:grid!important;place-content:center!important;position:absolute!important;
    left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:3!important;
    width:52px!important;height:52px!important;border-radius:50%!important;
    background:var(--ground)!important;border:1px solid var(--line-2)!important;
    font-family:"Geist Mono",ui-monospace,monospace!important;font-size:.72rem!important;
    letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--fg-3)!important;
    box-shadow:0 0 0 8px var(--bg)!important}
}
@media (prefers-reduced-motion:reduce){
  #comparativo .sw,#comparativo .sw i,#comparativo .vs-item{transition:none!important}
}

/* 12.3 - acima de 1180px o hero e limitado a 60% da largura para nao brigar com
   o objeto 3D, e nessa faixa a fileira ganha 637-706px enquanto os 5 selos
   precisam de 751px: o quinto caia sozinho numa segunda linha. A fileira e
   decorativa a direita, entao pode passar do limite do texto sem encostar no
   objeto (que comeca perto de x=1150 em 1440). Medido em 900/1180/1440/1920. */
@media (min-width:1180px){
  .hero .hero-cred{width:790px!important;max-width:100%!important}
}

/* ===========================================================================
   13 - PARECER DO VERIFICADOR, 28/08/2026 (achados 5 e 6)
   =========================================================================== */

/* 13.1 - achado 5: a manchete do comparativo abria em 5 linhas em 1440, contra
   o teto de 3 da casa. Causa medida: a fonte vai de 57px (1024) para 76px
   (1440) e a caixa continua em 920px, sobrando ~500px vazios a direita. Aqui
   a caixa do titulo acompanha a tela nessa faixa. Nao mexe no tamanho da
   fonte, entao a hierarquia da pagina continua igual. */
@media (min-width:1180px){
  #comparativo .sec-head h2,
  #cases .sec-head h2{max-width:min(1180px,100%)!important}
}

/* 13.2 - achado 6: filete de 1px medido em 1,27:1 contra piso de 3:1 no
   separador do depoimento, e 1,46:1 na borda do "Rejeitar" que a casa
   repintou. Texto do botao ja estava em 17:1; o que falhava era o contorno. */
#depoimentos .quote figcaption{border-top-color:#6E7883!important}
#cookie-banner button{border-color:#6E7883!important}
#cookie-banner button:last-of-type{border-color:var(--cyan)!important}

/* 13.3 - a caixa maior do 13.1 resolveu o titulo dos cases (5 -> 3 linhas em
   1440) mas NAO o do comparativo: medido, a 1a frase tem ~50 caracteres e a
   76px precisaria de ~1900px de linha, que nao existe em 1440. Como sao duas
   frases e nao um titulo de tres palavras, ela pode viver um corpo abaixo da
   escala. Nao mexe nas outras manchetes. */
@media (min-width:1180px){
  #comparativo .sec-head h2{font-size:clamp(2.6rem,3.5vw,3.2rem)!important;line-height:1.06!important}
}

/* ===========================================================================
   14 - SELOS REDONDOS (28/08/2026)
   Gerados no Higgsfield com gpt_image_2 (2k, quality high). O texto em arco
   saiu exato: nano_banana_pro embaralhava ("MV CERTIFICADO", "GESTAO ABO").
   Servidos pelo tamanho 150x150 que o WordPress gera: 28 KB cada, o mesmo
   arquivo cobre o hero (44px) e o cracha do certificado (110px).
   Escolha do Renan: PEQUENOS no hero, GRANDES em Credenciais.
   =========================================================================== */

/* 14.1 - no hero o selo entra no lugar do icone de conferido */
.hero-cred .hc-cert svg{display:none!important}
.hero-cred .hc-selo{flex:none!important;width:40px!important;height:40px!important;
  display:block!important;border-radius:50%!important;object-fit:contain!important}
@media (max-width:700px){.hero-cred .hc-selo{width:32px!important;height:32px!important}}

/* 14.2 - em Credenciais o selo vira cracha no canto da foto do certificado.
   Marcado como decoracao (a prova de verdade e a foto do certificado e o
   codigo de verificacao logo abaixo). */
#credenciais .cert figure{position:relative!important}
#credenciais .cert figure::after{content:""!important;position:absolute!important;
  right:14px!important;bottom:-30px!important;width:110px!important;height:110px!important;
  border-radius:50%!important;background-size:contain!important;background-repeat:no-repeat!important;
  background-position:center!important;z-index:2!important;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.9)!important}
#credenciais .cert:nth-child(1) figure::after{
  background-image:url("https://lead2you.com.br/wp-content/uploads/2026/08/hf_20260828_203929_17372944-8792-4152-8d7c-6cb33d5cf0d2-300x300.png")!important}
#credenciais .cert:nth-child(2) figure::after{
  background-image:url("https://lead2you.com.br/wp-content/uploads/2026/08/hf_20260828_204250_edc88acb-1314-49a9-93b9-7462864da626-300x300.png")!important}
#credenciais .cert:nth-child(3) figure::after{
  background-image:url("https://lead2you.com.br/wp-content/uploads/2026/08/hf_20260828_204300_0f071ead-f11c-425e-ba8b-738b08f318a0-300x300.png")!important}
#credenciais .cert h3{margin-top:34px!important}
@media (max-width:700px){
  #credenciais .cert figure::after{width:84px!important;height:84px!important;bottom:-22px!important;right:10px!important}
  #credenciais .cert h3{margin-top:26px!important}
}

/* 14.3 - com o selo redondo o chip ficou mais largo: a fileira passou a
   precisar de 829px (medido) contra os 790px do bloco 12.3. Bump para 880
   com folga. Abaixo de 1180px ela quebra em 2 ou 3 linhas de proposito -
   empilhar e o comportamento certo em tela estreita. */
@media (min-width:1180px){
  .hero .hero-cred{width:880px!important;max-width:100%!important}
}

/* ===========================================================================
   15 - O OBJETO 3D ESTAVA POR CIMA DO ULTIMO SELO (28/08/2026)
   Medido por diferenca de pixel na area do ultimo chip, com e sem o canvas:
   45,2% coberto em 1180px · 20,3% em 1366 · 14,7% em 1440 · 8,5% em 1600 ·
   0% so em 1920. Causa: a fileira cresceu para 880px (bloco 14.3) e entrou
   na area onde o objeto e desenhado.

   O que NAO funciona (testado): estreitar o canvas (`width:52vw` e menores)
   RECORTA o objeto em vez de reduzir - o desenho e escalado pela altura.
   O que funciona: escala CSS com origem na direita. Em .72 a sobreposicao
   vai a 0% em 1180/1366/1440/1600 e o objeto continua inteiro. Em .82 ainda
   sobrava 3,2% em 1180.

   PREGO CONHECIDO: o efeito de "desmanchar perto do ponteiro" usa coordenada
   de tela crua dentro do l2y.js, entao com o canvas escalado ele passa a
   acontecer deslocado. E efeito decorativo; a alternativa recortava a marca.
   Some de vez quando o l2y.js puder ser atualizado para escalar por dentro.
   =========================================================================== */
@media (min-width:901px){
  .mark3d{transform:scale(.72)!important;transform-origin:100% 50%!important}
}

/* ===========================================================================
   16 - AS CHAVINHAS LIGAM UMA POR VEZ, COM LUZ (28/08/2026)
   Pedido do Renan. Antes a escada era de 70ms, imperceptivel: as quatro
   pareciam ligar juntas. Agora 190ms entre linhas (0/190/380/570), o que
   da 910ms do primeiro ao ultimo - le como sequencia sem virar espera.
   As duas colunas disparam no mesmo passo de propósito: o bloco e um
   comparativo, e o par lado a lado e a unidade de leitura.

   A LUZ so acende do lado que LIGA. O lado "Agencia comum" fica vermelho e
   apagado, sem brilho nenhum - e o contraste apagado/aceso que carrega o
   recado, nao a cor sozinha.
   =========================================================================== */

/* o brilho entra junto com a cor e a posicao do botao */
#comparativo .sw{
  transition:background .34s var(--ease),border-color .34s var(--ease),
             box-shadow .42s var(--ease)!important}
#comparativo .sw i{
  transition:transform .38s cubic-bezier(.34,1.42,.64,1),background .34s var(--ease),
             box-shadow .42s var(--ease)!important}

/* apagado: sem luz nenhuma */
#comparativo.arma .sw{box-shadow:none!important}
#comparativo.arma .sw i{box-shadow:none!important}

/* aceso: neon no trilho e no botao */
#comparativo .vs-b .sw,
#comparativo.arma.ligado .vs-b .sw{
  box-shadow:0 0 0 1px rgba(29,230,232,.35),
             0 0 20px -2px rgba(29,230,232,.55),
             inset 0 0 12px -4px rgba(29,230,232,.7)!important}
#comparativo .vs-b .sw i,
#comparativo.arma.ligado .vs-b .sw i{
  box-shadow:0 0 10px 1px rgba(29,230,232,.85)!important}

/* o lado apagado nao ganha luz em momento nenhum */
#comparativo .vs-a .sw,
#comparativo.arma.ligado .vs-a .sw{box-shadow:none!important}
#comparativo .vs-a .sw i,
#comparativo.arma.ligado .vs-a .sw i{box-shadow:none!important}

/* a escada: .vs-item sao os filhos 2 a 5 da coluna (o filho 1 e o titulo) */
#comparativo .vs-item:nth-child(2) .sw,#comparativo .vs-item:nth-child(2) .sw i{transition-delay:0ms!important}
#comparativo .vs-item:nth-child(3) .sw,#comparativo .vs-item:nth-child(3) .sw i{transition-delay:190ms!important}
#comparativo .vs-item:nth-child(4) .sw,#comparativo .vs-item:nth-child(4) .sw i{transition-delay:380ms!important}
#comparativo .vs-item:nth-child(5) .sw,#comparativo .vs-item:nth-child(5) .sw i{transition-delay:570ms!important}

/* a borda do cartao aceso acompanha, meio passo atras */
#comparativo .vs-b .vs-item{transition:border-color .5s var(--ease),background .3s var(--ease)!important}
#comparativo .vs-b .vs-item:nth-child(3){transition-delay:190ms!important}
#comparativo .vs-b .vs-item:nth-child(4){transition-delay:380ms!important}
#comparativo .vs-b .vs-item:nth-child(5){transition-delay:570ms!important}

/* movimento reduzido: chega no estado final, sem escada e sem viagem */
@media (prefers-reduced-motion:reduce){
  #comparativo .sw,#comparativo .sw i,#comparativo .vs-item{
    transition:none!important;transition-delay:0ms!important}
}

/* 16.1 - CONSERTO medido: a luz nascia acesa. `#comparativo.arma .sw` e
   `#comparativo .vs-b .sw` tem a MESMA forca (1 id + 2 classes), e a do
   brilho vinha depois, entao ganhava sempre - o neon aparecia em t=0 em vez
   de acender com a chavinha. Aqui o estado apagado ganha uma classe a mais,
   e o aceso (`.arma.ligado`, 1 id + 4 classes) continua ganhando dele.
   Medido antes: luz em 0ms nas quatro. */
#comparativo.arma .vs-b .sw{box-shadow:none!important}
#comparativo.arma .vs-b .sw i{box-shadow:none!important}
#comparativo.arma.ligado .vs-b .sw{
  box-shadow:0 0 0 1px rgba(29,230,232,.35),
             0 0 20px -2px rgba(29,230,232,.55),
             inset 0 0 12px -4px rgba(29,230,232,.7)!important}
#comparativo.arma.ligado .vs-b .sw i{
  box-shadow:0 0 10px 1px rgba(29,230,232,.85)!important}

/* 16.2 - `box-shadow: none` NAO interpola: o navegador nao tem de onde sair,
   entao o neon estalava em vez de acender, e o atraso da escada ficava
   invisivel no brilho (a posicao do botao respeitava, a luz nao).
   Aqui o estado apagado tem a MESMA forma de sombra, so que transparente.
   Com origem e destino da mesma forma, a transicao acontece de verdade. */
#comparativo.arma .vs-b .sw{
  box-shadow:0 0 0 1px rgba(29,230,232,0),
             0 0 20px -2px rgba(29,230,232,0),
             inset 0 0 12px -4px rgba(29,230,232,0)!important}
#comparativo.arma .vs-b .sw i{
  box-shadow:0 0 10px 1px rgba(29,230,232,0)!important}
/* o lado apagado usa a mesma forma transparente, e nunca acende */
#comparativo .vs-a .sw,
#comparativo.arma .vs-a .sw,
#comparativo.arma.ligado .vs-a .sw{
  box-shadow:0 0 0 1px rgba(232,80,86,0),
             0 0 20px -2px rgba(232,80,86,0),
             inset 0 0 12px -4px rgba(232,80,86,0)!important}
#comparativo .vs-a .sw i,
#comparativo.arma .vs-a .sw i,
#comparativo.arma.ligado .vs-a .sw i{
  box-shadow:0 0 10px 1px rgba(232,80,86,0)!important}

/* ===========================================================================
   17 - CENA PRESA DO COMPARATIVO (28/08/2026)
   Pedido do Renan: a tela trava e os botoes ligam conforme a rolagem desce;
   voltando, desligam. Mesmo padrao da cena do grafico (`.hold-a` + sticky),
   por isso reusa `.hold`. Quem manda o tempo agora e a rolagem, nao o relogio:
   a escada do bloco 16 fica anulada no modo preso.
   =========================================================================== */
.js .hold-c{min-height:230vh}
#comparativo.preso{position:sticky;top:clamp(84px,11vh,132px);z-index:6}

/* no modo preso a escada por tempo sai: cada par responde a rolagem */
#comparativo.preso .sw,
#comparativo.preso .sw i,
#comparativo.preso .vs-item{transition-delay:0ms!important}

/* ponto de partida: tudo apagado, botao a esquerda, sem luz */
#comparativo.preso .vs-item .sw{
  background:rgba(255,255,255,.07)!important;border-color:var(--line-2)!important;
  box-shadow:0 0 0 1px rgba(29,230,232,0),
             0 0 20px -2px rgba(29,230,232,0),
             inset 0 0 12px -4px rgba(29,230,232,0)!important}
#comparativo.preso .vs-item .sw i{
  background:var(--fg-3)!important;transform:translateX(0)!important;
  box-shadow:0 0 10px 1px rgba(29,230,232,0)!important}
#comparativo.preso .vs-b .vs-item{border-color:var(--line-2)!important}

/* ligado: a esquerda fica vermelha e apagada, a direita acende em ciano */
#comparativo.preso .vs-a .vs-item.on .sw{
  background:rgba(232,80,86,.16)!important;border-color:rgba(232,80,86,.4)!important}
#comparativo.preso .vs-a .vs-item.on .sw i{background:#E85056!important}
#comparativo.preso .vs-b .vs-item.on .sw{
  background:rgba(29,230,232,.2)!important;border-color:rgba(29,230,232,.5)!important;
  box-shadow:0 0 0 1px rgba(29,230,232,.35),
             0 0 20px -2px rgba(29,230,232,.55),
             inset 0 0 12px -4px rgba(29,230,232,.7)!important}
#comparativo.preso .vs-b .vs-item.on .sw i{
  background:var(--cyan)!important;transform:translateX(18px)!important;
  box-shadow:0 0 10px 1px rgba(29,230,232,.85)!important}
#comparativo.preso .vs-b .vs-item.on{border-color:rgba(29,230,232,.28)!important}

/* a cena so existe onde ela cabe: abaixo de 900px, com movimento reduzido,
   sem JS ou sem sticky o script nao prende nada e a secao nasce ligada */
@media (max-width:899px){.js .hold-c{min-height:0}}
@media (prefers-reduced-motion:reduce){.js .hold-c{min-height:0}}

/* 17.1 - CONSERTO medido: quem gruda e a GRADE, nao a secao.
   Medido em 1024x700, 1280x800, 1440x900, 1440x720 e 1920x1080: a secao
   inteira tem 1077 a 1219px e NUNCA cabe na tela (sobra de 413 a 578px), e o
   ultimo par acendia fora de vista. A grade (.vs) tem 480 a 509px e cabe nas
   cinco. O cabecalho passa rolando normal e a grade e que fica presa - que e
   exatamente o quadro que o Renan mandou.
   Altura do trilho em 168vh: com a grade em ~509px e topo de ~99px, sobra
   perto de 900px de curso, e o ultimo par acende aos 76% dele. */
#comparativo.preso{position:static!important}
#comparativo.preso .vs{position:sticky!important;top:clamp(84px,11vh,132px)!important;z-index:6!important}
.js .hold-c{min-height:168vh}
@media (max-width:899px){.js .hold-c{min-height:0}}
@media (prefers-reduced-motion:reduce){.js .hold-c{min-height:0}}

/* 15.1 - o `!important` do bloco 15 saiu daqui: com ele, uma folha de estilo
   ganha de `style="transform:..."` inline, e o script que da movimento a marca
   na rolagem nunca conseguiria escrever. Sem `!important` o inline ganha
   quando o JS roda, e esta regra continua valendo como reserva para quem
   nao tem JS ou usa movimento reduzido. `.mark3d` nao tem nenhuma outra
   regra de transform no l2y.css, entao nada mais disputa. */
@media (min-width:901px){
  .mark3d{transform:scale(.72);transform-origin:100% 50%!important}
}/* End custom CSS */