/* ==========================================================================
   [leve] HOME LEVE E SUAVE EM TODOS OS APARELHOS (12/10/2026)

   O desenho e as animacoes continuam. O que sai e o que custa caro e quase
   nao aparece:

   TODOS OS APARELHOS
   - auroras do fundo: filter:blur(100px) em circulos de ate 800px, se
     mexendo, fixos atras da pagina inteira — a placa de video refazia esse
     desfoque a cada quadro. Agora o degrade radial (que ja tinham) faz a
     borda macia sozinho, sem filtro; o movimento continua;
   - granulado: camada fixa de tela inteira POR CIMA do conteudo com
     mix-blend-mode, a 3% de opacidade (invisivel na pratica) — misturava a
     tela toda a cada quadro. Saiu;
   - aurora do card da promocao: blur(8px) numa camada 1,8x maior que o card,
     animada. O degrade ja e suave: sem o filtro;
   - fundo animado pausa SO enquanto a pagina rola (classe html.rolando,
     posta pelo home-vivo.js) — a rolagem fica lisa e o fundo volta a se
     mexer quando para;
   - secoes fora da tela nao sao desenhadas ate chegar perto
     (content-visibility). `auto` no tamanho lembra a altura real: nada pula.

   CELULAR E TABLET (toque)
   - as animacoes baratas (mover/transparencia) continuam;
   - saem as que repintam todo quadro: brilhos que correm por dentro do texto
     (background-position), halo desfocado do botao e a borda que corre no
     plano em destaque;
   - sem backdrop-filter em nada (o cabecalho fica escuro quase opaco).

   `:not(#nx#nx)` soma dois IDs ao seletor para vencer o legado com
   !important sem reescreve-lo.
   ========================================================================== */

/* ------------------------------------------------ todos os aparelhos */
html body .v3a-orb:not(#nx#nx){filter:none!important;opacity:.55!important}
html body .v3a-o1:not(#nx#nx){background:radial-gradient(circle,rgba(168,85,247,.42) 0%,rgba(168,85,247,.22) 30%,rgba(168,85,247,.08) 52%,transparent 70%)!important}
html body .v3a-o2:not(#nx#nx){background:radial-gradient(circle,rgba(109,40,217,.4) 0%,rgba(109,40,217,.2) 30%,rgba(109,40,217,.07) 52%,transparent 70%)!important}
html body .v3a-o3:not(#nx#nx){background:radial-gradient(circle,rgba(34,211,238,.1) 0%,rgba(34,211,238,.05) 34%,transparent 70%)!important}
html body .v3a-grain:not(#nx#nx){display:none!important}
html body .cy-aurora:not(#nx#nx){filter:none!important}

/* fundo parado so durante a rolagem */
html.rolando body :is(#apFundo,.v3a,.ap-particles),
html.rolando body :is(#apFundo,.v3a,.ap-particles) *{animation-play-state:paused!important}

/* secoes longe da tela: o navegador nao desenha ate chegarem perto */
/* SO DEPOIS DOS PLANOS. Secao adiada comeca com altura estimada (900px):
   se uma delas ficasse ANTES de #planos (a faixa de logos fica), o link
   "Planos" do menu calcularia o destino com a estimativa e o cliente cairia
   centenas de px abaixo — foi o que quebrou o menu na ALLAN SMS. */
html body main > #planos ~ section{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* cards flutuantes do celular do topo: desfoque menor (16px -> 8px). O
   custo cresce com o raio, e por baixo deles a tela do aparelho se mexe. */
@media (hover:hover){
  html body :is(.hf-chip,.pv-chip,.ml-card,.ax-chip):not(#nx#nx){-webkit-backdrop-filter:blur(8px) saturate(1.2)!important;backdrop-filter:blur(8px) saturate(1.2)!important}
}

/* cabecalho fixo: o desfoque e refeito a cada quadro porque as auroras se
   mexem atras dele. 18px -> 12px (o custo cresce com o raio; o vidro continua) */
@media (hover:hover){
  html body .nav:not(#nx#nx){-webkit-backdrop-filter:blur(12px) saturate(1.2)!important;backdrop-filter:blur(12px) saturate(1.2)!important}
}

/* ------------------------------------------------ celular e tablet */
@media (max-width:760px),(hover:none) and (max-width:1100px){
  /* repintam o texto/borda a cada quadro: param (o degrade fica, parado) */
  html body :is(.cy-p-val,.cy-bf-1,.cy-bf-2,.brand-wordmark,.brand-wordmark *):not(#nx#nx),
  html body .cy-de em:not(#nx#nx),
  html body .v3p-featured:not(#nx#nx)::before,
  html body .cy-cta:not(#nx#nx)::after{animation:none!important}
  /* auroras grandes paradas no celular (camadas enormes se mexendo) */
  html body .v3a-orb:not(#nx#nx){animation:none!important}
  /* nada de desfoque de vidro: fundo escuro quase opaco no lugar */
  html body .nav:not(#nx#nx){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(14,9,26,.94)!important}
  html body :is(main,.nav,.coupon-widget,.ap-footer,.account-menu):not(#nx#nx),
  html body :is(main,.nav):not(#nx#nx) *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html body .cy-bf-eco:not(#nx#nx){filter:none!important;opacity:.5!important}
  /* particulas: so movem; sem camada reservada de antemao */
  html body .ap-particles i{will-change:auto!important}
}