/* ==========================================================================
   [home-vivo] 12/10/2026 — planos com vida + seção "Como funciona" com celular.
   Os cards de plano continuam sendo montados pelo store-main.js (checkout
   intocado): aqui só entra CSS por cima das classes .v3p e um script à parte
   (home-vivo.js) para a luz que segue o mouse. A seção nova usa o aparelho do
   hero-fone.css (classes hf-) e prefixo cfp- no resto.
   ========================================================================== */

/* ------------------------------------------------------------- planos */
@property --pv-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
html body #plans .v3p{position:relative;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease!important}
html body #plans .v3p::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(var(--accent-rgb,168,85,247),.16),transparent 70%);transition:opacity .35s ease}
html body #plans .v3p:hover::after{opacity:1}
@media (hover:hover){html body #plans .v3p:hover{transform:translateY(-6px)!important;box-shadow:0 34px 70px -40px rgba(var(--accent-rgb,168,85,247),.75)!important}}
/* borda com luz correndo: só no "Mais vendida" (contínuo) e no hover dos outros */
html body #plans .v3p .pv-borda{position:absolute;inset:0;border-radius:inherit;padding:1.3px;pointer-events:none;z-index:3;opacity:0;
  background:conic-gradient(from var(--pv-ang),transparent 0 58%,rgba(var(--accent-rgb,168,85,247),.95) 72%,#39ff88 82%,transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:opacity .4s ease}
html body #plans .v3p-featured .pv-borda,html body #plans .v3p:hover .pv-borda{opacity:1;animation:pv-gira 5s linear infinite}
@keyframes pv-gira{to{--pv-ang:360deg}}
/* ícone: flutua de leve e gira no hover */
html body #plans .v3p-ic{transition:transform .5s cubic-bezier(.3,1.5,.5,1)!important}
html body #plans .v3p:hover .v3p-ic{transform:translateY(-3px) rotate(-8deg) scale(1.08)!important}
/* selo "Mais vendida" com ponto neon */
html body #plans .v3p-flag{display:inline-flex!important;align-items:center;gap:6px}
html body #plans .v3p-flag::before{content:"";width:6px;height:6px;border-radius:50%;background:#39ff88;box-shadow:0 0 8px #39ff88;animation:pv-pisca 1.8s ease-in-out infinite}
@keyframes pv-pisca{0%,100%{opacity:1}50%{opacity:.35}}
/* botão: faixa de luz passando */
html body #plans .v3p button[data-buy]{position:relative;overflow:hidden}
html body #plans .v3p button[data-buy]::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%)}
html body #plans .v3p:hover button[data-buy]::after{animation:pv-faixa .9s cubic-bezier(.2,.8,.2,1)}
html body #plans .v3p-featured button[data-buy]::after{animation:pv-faixa2 4s 1.5s ease-in-out infinite}
@keyframes pv-faixa{to{transform:translateX(120%)}}
@keyframes pv-faixa2{0%,60%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}
/* checks dos recursos em neon */
html body #plans .v3p-feats svg{color:#39ff88!important}

/* cards flutuando ao lado do título da seção de planos (só computador) */
/* o bloco do título tem só ~535px: a nuvem se ancora na SEÇÃO (1180px) e
   ocupa o vazio à direita do título, acima dos cards */
html body #planos{position:relative}
html body #planos .v3-sh{position:static!important}
.pv-nuvem{position:absolute;right:0;top:0;width:min(46%,540px);height:280px;pointer-events:none}
.pv-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:15px;white-space:nowrap;
  background:rgba(22,16,40,.72);border:1px solid rgba(233,222,255,.14);color:#fff;
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);animation:hf-chip 7s ease-in-out infinite}
.pv-chip b{display:block;font-size:12.5px;font-weight:650;line-height:1.25}
.pv-chip small{display:block;font-size:10.5px;color:rgba(233,222,255,.62);line-height:1.3}
.pv-chip .hf-chip-ic{width:30px;height:30px}
.pv-chip.c1{right:34%;top:6%}.pv-chip.c2{right:0;top:38%;animation-delay:-2.4s;animation-duration:8s}.pv-chip.c3{right:24%;bottom:2%;animation-delay:-4s;animation-duration:9s}
@media (max-width:1180px){.pv-nuvem{display:none}}

/* --------------------------------------------------- como funciona */
.cfp{padding-top:10px}
.cfp-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center;margin-top:28px}
.cfp .hf{--hf-w:280px;min-height:620px}
.cfp-passos{display:grid;gap:12px}
.cfp-passo{position:relative;overflow:hidden;display:flex;gap:16px;align-items:flex-start;width:100%;text-align:left;padding:18px 20px;border-radius:18px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid rgba(233,222,255,.12);color:#fff;font:inherit;
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
/* a loja fixa todo <button> em 46px de altura (regra global antiga) */
html body .cfp-passo{height:auto!important;min-height:0!important;max-height:none!important;line-height:normal!important;letter-spacing:normal!important;text-transform:none!important}
.cfp-passo:hover{transform:translateX(4px);border-color:rgba(196,160,255,.35)}
.cfp-passo:active{transform:scale(.985)}
.cfp-passo.on{background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(124,58,237,.06));border-color:rgba(196,160,255,.5);
  box-shadow:0 22px 44px -30px rgba(124,58,237,.9),inset 0 0 0 1px rgba(57,255,136,.08)}
.cfp-ic{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;background:rgba(168,85,247,.14);color:#c4b5fd;
  transition:background .3s ease,transform .4s cubic-bezier(.3,1.5,.5,1),box-shadow .3s ease,color .3s}
.cfp-ic svg{width:19px;height:19px}
.cfp-passo.on .cfp-ic{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;transform:scale(1.06) rotate(-4deg);box-shadow:0 10px 22px -10px rgba(124,58,237,.9)}
.cfp-passo.feito .cfp-ic{color:#39ff88;background:rgba(57,255,136,.1)}
.cfp-n{display:block;font:600 11px ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.1em;color:rgba(233,222,255,.5)}
.cfp-passo.on .cfp-n{color:#c4b5fd}
.cfp-passo strong{display:block;font-size:17px;letter-spacing:-.01em;margin:2px 0 4px}
.cfp-passo small{display:block;font-size:13.5px;line-height:1.5;color:rgba(233,222,255,.66)}
.cfp-barra{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,#a78bfa,#39ff88);box-shadow:0 0 10px #39ff88}
.cfp-passo.on .cfp-barra{animation:cfp-barra var(--cfp-dur,5.4s) linear forwards}
@keyframes cfp-barra{to{transform:scaleX(1)}}

/* telas do app dentro do celular */
.cfp-tela{position:absolute;inset:46px 13px 22px;z-index:2;display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateX(26px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.cfp-tela.on{opacity:1;transform:none}
.cfp-tela h4{margin:2px 0 0;font:700 19px Inter,system-ui,sans-serif;letter-spacing:-.02em;color:#fff}
.cfp-sub{margin:0;font-size:11px;color:rgba(255,255,255,.6)}
.cfp-prod{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid transparent;font-size:12.5px;color:#fff;transition:background .35s,border-color .35s,opacity .35s,transform .35s}
.cfp-prod i{width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;font-style:normal;font-size:12px;background:rgba(168,85,247,.25)}
.cfp-prod b{margin-left:auto;font-size:11px;color:#c4b5fd}
.cfp-tela.f1 .cfp-prod.alvo{background:rgba(139,92,246,.28);border-color:rgba(196,181,253,.5);transform:scale(1.02)}
.cfp-tela.f1 .cfp-prod:not(.alvo){opacity:.4}
.cfp-gb{padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.07);font-size:11px;color:rgba(255,255,255,.65)}
.cfp-gb-top{display:flex;justify-content:space-between;align-items:baseline}
.cfp-gb-top b{font:700 16px Inter,system-ui,sans-serif;color:#fff}
.cfp-trilho{position:relative;height:6px;border-radius:6px;margin:9px 0 6px;background:rgba(255,255,255,.12)}
.cfp-trilho span{position:absolute;inset:0 auto 0 0;width:12%;border-radius:inherit;background:linear-gradient(90deg,#a78bfa,#39ff88);transition:width 1.6s cubic-bezier(.3,.8,.3,1)}
.cfp-tela.f2 .cfp-trilho span{width:78%}
.cfp-desc{color:#39ff88;font-weight:700}
.cfp-botao{margin-top:auto;padding:11px;border-radius:13px;text-align:center;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 10px 22px -10px rgba(124,58,237,.8)}
.cfp-qr{position:relative;align-self:center;width:146px;height:146px;margin-top:4px;padding:11px;border-radius:18px;background:#fff;overflow:hidden;transition:box-shadow .5s}
.cfp-qr .g{display:grid;grid-template-columns:repeat(21,1fr);width:100%;height:100%;transition:opacity .4s,filter .4s}
.cfp-qr .g i{background:transparent}.cfp-qr .g i.p{background:#1a1530}
.cfp-scan{position:absolute;left:8px;right:8px;top:10px;height:2px;background:linear-gradient(90deg,transparent,#8b5cf6,transparent);box-shadow:0 0 12px #8b5cf6;animation:cfp-scan 1.6s ease-in-out infinite alternate}
@keyframes cfp-scan{to{transform:translateY(122px)}}
.cfp-ok{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#04260f;opacity:0;transform:scale(.4);
  background:radial-gradient(circle at 35% 30%,#a7ffcb,#39ff88 60%,#10b981);box-shadow:0 0 30px rgba(57,255,136,.7);transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.cfp-tela.f1 .cfp-qr{box-shadow:0 0 0 3px rgba(57,255,136,.7),0 0 30px -4px rgba(57,255,136,.6)}
.cfp-tela.f1 .cfp-qr .g{opacity:.22;filter:blur(1px)}
.cfp-tela.f1 .cfp-scan{display:none}
.cfp-tela.f1 .cfp-ok{opacity:1;transform:none}
.cfp-status{text-align:center;font-size:11.5px;color:rgba(255,255,255,.62)}
.cfp-tela.f1 .cfp-status{color:#39ff88;text-shadow:0 0 12px rgba(57,255,136,.45)}
.cfp-cred{padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  font:600 11.5px/1.75 ui-monospace,"Cascadia Mono",Consolas,monospace;color:#e9e5ff;word-break:break-all}
.cfp-cred span{color:rgba(255,255,255,.45)}
.cfp-cred em{font-style:normal;color:#7dd3fc}
.cfp-cursor{display:inline-block;width:6px;height:12px;margin-left:1px;vertical-align:-1px;background:#39ff88;animation:cfp-pisca 1s steps(2) infinite}
@keyframes cfp-pisca{50%{opacity:0}}
.cfp-copiar{align-self:center;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.14);transition:background .35s,color .35s,box-shadow .35s}
.cfp-tela.f2 .cfp-copiar{background:#39ff88;color:#04260f;box-shadow:0 0 18px -2px rgba(57,255,136,.6)}
.cfp-apps{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.cfp-apps span{font-size:10.5px;font-weight:600;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75)}
.cfp-conecta{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0}
.cfp-conecta .hf-globo{width:120px;height:120px}
.cfp-conecta .hf-centro{inset:37px}.cfp-conecta .hf-onda{inset:22px}
.cfp-estado{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.6);transition:color .3s}
.cfp-tela.f1 .cfp-estado{color:#39ff88;text-shadow:0 0 12px rgba(57,255,136,.45)}

@media (max-width:980px){.cfp-grid{grid-template-columns:1fr;gap:20px}.cfp .hf{--hf-w:262px;min-height:580px}}
@media (max-width:560px){.cfp .hf{--hf-w:250px;min-height:550px}.cfp-passo{padding:14px 15px;gap:12px}.cfp-passo strong{font-size:15.5px}.cfp-passo small{font-size:12.5px}
  .cfp-qr{width:128px;height:128px}@keyframes cfp-scan{to{transform:translateY(104px)}}}
@media (max-width:760px),(hover:none){
  html body #plans .v3p-featured .pv-borda,html body #plans .v3p-featured button[data-buy]::after,.pv-chip{animation:none!important}
  html body #plans .v3p-featured .pv-borda{opacity:.7}
}
@media (prefers-reduced-motion:reduce){.cfp *,html body #plans .v3p *{animation:none!important;transition:none!important}}

/* ------------------------------------------- logos dos multilogins */
.ml-ics{display:flex;flex:none}
.ml-ics img{width:30px;height:30px;object-fit:contain;border-radius:9px;background:rgba(255,255,255,.06);padding:3px;
  box-shadow:0 0 0 2px #160f2a;margin-left:-8px}
.ml-ics img:first-child{margin-left:0}
.ml-card{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:11px 15px 9px;border-radius:15px;
  background:rgba(22,16,40,.72);border:1px solid rgba(233,222,255,.14);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);animation:hf-chip 7s ease-in-out infinite}
.ml-card img{display:block;height:24px;width:auto}
.ml-card small{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#39ff88}
.ml-card small::before{content:"";width:5px;height:5px;border-radius:50%;background:#39ff88;box-shadow:0 0 6px #39ff88}
.ml1{left:-2%;top:12%}
.ml2{right:-4%;top:24%;animation-delay:-2s;animation-duration:8s}
.ml3{left:0;bottom:22%;animation-delay:-3.5s;animation-duration:9s}
.ml4{right:-2%;bottom:12%;animation-delay:-1.2s;animation-duration:7.5s}
@media (max-width:1180px){.ml-card{display:none}}
@media (max-width:760px),(hover:none){.ml-card{animation:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* ==========================================================================
   [home-vivo] CELULAR LEVE E CENTRALIZADO (12/10/2026)
   1) seção fora da tela = animações pausadas (o JS marca .fora-tela);
   2) no celular, vidro com desfoque nos cards da página vira fundo
      translúcido comum (backdrop-filter é o que mais trava a rolagem);
   3) partículas de tela inteira: só 8 no celular;
   4) margem lateral padrão de 16px;
   5) card da Black Friday centralizado.
   ========================================================================== */
.fora-tela,.fora-tela *{animation-play-state:paused!important}
@media (max-width:760px){
  html body main :is(.v3p,.comparison-table-wrap,.limit-ops-card,.availability-card,.smsx,.tool,.testimonial-card,.v3-sms,.proxy-choice-card,.cfp-passo){
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .ap-particles i:nth-child(n+9){display:none!important}
  html body main .wrap{width:calc(100% - 32px)!important;margin-left:auto!important;margin-right:auto!important}
  html.promo-4anos .cy-top{justify-content:center}
  html.promo-4anos .cy-hr,html.promo-4anos .cy-mono{display:none}
  html.promo-4anos .cy-marca,html.promo-4anos .cy-h1,html.promo-4anos .cy-lead{text-align:center}
  html.promo-4anos .cy-bf{display:inline-block}
  html.promo-4anos .cy-marca{display:flex;flex-direction:column;align-items:center}
  html.promo-4anos .cy-isp{justify-content:center;text-align:center}
  html.promo-4anos .cy-selos{justify-content:center}
}

/* ==========================================================================
   [home-vivo] CATEGORIAS NO ESTILO DOS PASSOS (12/10/2026)
   "Casos de uso" (.v3u) e "Sua operação sempre online" (.limit-ops-card)
   ganham o visual dos passos do Como funciona: número em mono, ícone em
   degradê, destaque que anda sozinho com barra neon na base. Seletor com uma
   classe a mais que o bloco antigo (html body .v3u ... !important) para vencer.
   O JS marca .pv-lista no grupo e .on no card em destaque.
   ========================================================================== */
html body .v3-uses,html body .limit-ops-grid{counter-reset:pvn}
html body .operations-section .v3u,html body .limit-ops-section .limit-ops-card{
  counter-increment:pvn;position:relative;overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.035)!important;border:1px solid rgba(233,222,255,.12)!important;border-radius:18px!important;
  box-shadow:none!important;transition:border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)!important}
html body .operations-section .v3u::before{opacity:0!important}
/* número do card (01, 02...) no canto, como nos passos */
html body .operations-section .v3u h3::before,html body .limit-ops-section .limit-ops-card h3::before{
  content:counter(pvn,decimal-leading-zero);display:block;margin-bottom:2px;
  font:600 11px ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.1em;color:rgba(233,222,255,.42);transition:color .35s}
/* em destaque (o JS troca sozinho; o mouse também) */
html body .operations-section .v3u.on,html body .limit-ops-section .limit-ops-card.on{
  background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(124,58,237,.06))!important;border-color:rgba(196,160,255,.5)!important;
  box-shadow:0 22px 44px -30px rgba(124,58,237,.9),inset 0 0 0 1px rgba(57,255,136,.08)!important}
html body .operations-section .v3u.on h3::before,html body .limit-ops-section .limit-ops-card.on h3::before{color:#c4b5fd}
/* ícone em degradê */
html body .operations-section .v3u .v3u-ic,html body .limit-ops-section .limit-ops-icon{
  background:rgba(168,85,247,.14)!important;border:0!important;color:#c4b5fd!important;
  transition:background .35s ease,transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .35s ease,color .3s!important}
html body .operations-section .v3u.on .v3u-ic,html body .limit-ops-section .limit-ops-card.on .limit-ops-icon{
  background:linear-gradient(135deg,#a78bfa,#7c3aed)!important;color:#fff!important;transform:scale(1.06) rotate(-4deg);box-shadow:0 10px 22px -10px rgba(124,58,237,.9)!important}
html body .operations-section .v3u .v3u-ic svg :is(g,path,circle,line,rect,polyline),
html body .limit-ops-section .limit-ops-icon svg :is(g,path,circle,line,rect,polyline){stroke:currentColor}
/* barra neon de progresso */
.pv-barra{position:absolute;left:0;bottom:0;height:3px;width:100%;z-index:3;transform-origin:left;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,#a78bfa,#39ff88);box-shadow:0 0 10px #39ff88}
.on > .pv-barra{animation:pv-barra var(--pv-dur,3.8s) linear forwards}
@keyframes pv-barra{to{transform:scaleX(1)}}
/* "Indicado: ..." com o tipo em neon */
html body .operations-section .v3u-for b{color:#39ff88!important}
html body .operations-section .v3u-for svg{color:#39ff88!important}
@media (hover:hover){
  html body .operations-section .v3u:hover,html body .limit-ops-section .limit-ops-card:hover{transform:translateY(-4px)!important}
}
@media (prefers-reduced-motion:reduce){.pv-barra{display:none}}

/* ==========================================================================
   [home-vivo] TABELA COMPARATIVA (12/10/2026)
   Coluna da ALLAN PROXYS em destaque com luz, selos de sim/parcial/não em
   círculos, linhas entrando em cascata e destaque no hover.
   ========================================================================== */
html body .comparison-section .comparison-table-wrap{position:relative;border-radius:22px!important;overflow:auto;
  border:1px solid rgba(233,222,255,.14)!important;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))!important}
html body .comparison-section .comparison-table tbody tr{transition:background .25s ease}
@media (hover:hover){html body .comparison-section .comparison-table tbody tr:hover{background:rgba(168,85,247,.06)}}
html body .comparison-section .comparison-table td.brand-col,html body .comparison-section .comparison-table th.brand-col{
  position:relative;background:linear-gradient(180deg,rgba(124,58,237,.2),rgba(124,58,237,.08))!important;
  box-shadow:inset 1px 0 0 rgba(196,160,255,.35),inset -1px 0 0 rgba(196,160,255,.35)!important}
html body .comparison-section .comparison-table thead th.brand-col{box-shadow:inset 1px 0 0 rgba(196,160,255,.35),inset -1px 0 0 rgba(196,160,255,.35),inset 0 2px 0 #a78bfa!important}
html body .comparison-section .comparison-table thead th.brand-col::after{content:"MELHOR ESCOLHA";display:block;width:max-content;margin:8px auto 0;padding:3px 9px;border-radius:999px;
  font:800 8.5px/1.3 Inter,system-ui,sans-serif;letter-spacing:.12em;color:#04260f;background:linear-gradient(135deg,#7dffb2,#39ff88);box-shadow:0 0 14px -2px rgba(57,255,136,.6)}
html body .comparison-section .comparison-price.brand-col{font-size:18px!important;color:#39ff88!important;text-shadow:0 0 14px rgba(57,255,136,.4)}
html body .comparison-section .comparison-price:not(.brand-col){color:rgba(233,222,255,.55)!important}
html body .comparison-section .comparison-price small{display:block;font-size:10px;font-weight:600;color:rgba(233,222,255,.55);text-shadow:none}
html body .comparison-section :is(.comparison-check,.comparison-dash,.comparison-x){display:inline-grid!important;place-items:center;width:26px;height:26px;border-radius:50%}
html body .comparison-section .comparison-check{background:rgba(57,255,136,.12);color:#39ff88!important;box-shadow:inset 0 0 0 1px rgba(57,255,136,.3)}
html body .comparison-section .brand-col .comparison-check{background:linear-gradient(135deg,#7dffb2,#39ff88);color:#04260f!important;box-shadow:0 0 14px -2px rgba(57,255,136,.6)}
html body .comparison-section .comparison-dash{background:rgba(251,191,36,.1);color:#fbbf24!important;box-shadow:inset 0 0 0 1px rgba(251,191,36,.25)}
html body .comparison-section .comparison-x{background:rgba(244,63,94,.08);color:#fb7185!important;box-shadow:inset 0 0 0 1px rgba(244,63,94,.2)}
html body .comparison-section :is(.comparison-check,.comparison-dash,.comparison-x) svg{width:13px!important;height:13px!important}
html body .comparison-section :is(.comparison-check,.comparison-dash,.comparison-x) svg *{stroke:currentColor}
/* linhas entram em cascata quando a tabela aparece (o JS liga .cmp-vis) */
.cmp-pronta tbody tr{opacity:0;transform:translateY(10px)}
.cmp-vis tbody tr{animation:cmp-entra .5s cubic-bezier(.2,.8,.2,1) both}
.cmp-vis tbody tr:nth-child(2){animation-delay:.05s}.cmp-vis tbody tr:nth-child(3){animation-delay:.1s}.cmp-vis tbody tr:nth-child(4){animation-delay:.15s}
.cmp-vis tbody tr:nth-child(5){animation-delay:.2s}.cmp-vis tbody tr:nth-child(6){animation-delay:.25s}.cmp-vis tbody tr:nth-child(7){animation-delay:.3s}
.cmp-vis tbody tr:nth-child(8){animation-delay:.35s}.cmp-vis tbody tr:nth-child(n+9){animation-delay:.4s}
@keyframes cmp-entra{to{opacity:1;transform:none}}

/* ==========================================================================
   [home-vivo] PAÍSES — estrutura nova (12/10/2026)
   Montada pelo JS a partir dos cartões que a loja já desenha; os antigos só
   somem depois que a versão nova existe (.av-nova). Busca, regiões, lista
   ordenada com barra proporcional e "ver todos".
   ========================================================================== */
.availability-section.av-nova .availability-grid,.availability-section.av-nova #showAllLocationsButton,
.availability-section.av-nova #allLocationsNote,.availability-section.av-nova .availability-actions,
.availability-section.av-nova .availability-more{display:none!important}
.av{margin-top:22px}
.av-topo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.av-num{position:relative;overflow:hidden;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(233,222,255,.12)}
.av-num b{display:block;font:700 26px/1.1 Inter,system-ui,sans-serif;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.av-num small{display:block;margin-top:4px;font-size:12.5px;color:rgba(233,222,255,.62)}
.av-num i{position:absolute;right:14px;top:14px;width:8px;height:8px;border-radius:50%;background:#39ff88;box-shadow:0 0 10px #39ff88;animation:pv-pisca 1.8s ease-in-out infinite}
.av-barra-ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.av-busca{flex:1 1 240px;display:flex;align-items:center;gap:9px;padding:0 14px;height:46px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(233,222,255,.14);color:rgba(233,222,255,.6)}
.av-busca:focus-within{border-color:rgba(196,160,255,.55);box-shadow:0 0 0 4px rgba(168,85,247,.14)}
html body .av-busca input{flex:1;min-width:0;height:auto!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;color:#fff;font:inherit;font-size:15px;padding:0!important}
.av-abas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:3px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(233,222,255,.1)}
.av-abas::-webkit-scrollbar{display:none}
html body .av-aba{flex:none;height:38px!important;min-height:0!important;padding:0 14px!important;border-radius:11px!important;border:0!important;background:transparent!important;
  color:rgba(233,222,255,.7)!important;font:600 13px Inter,system-ui,sans-serif!important;cursor:pointer;box-shadow:none!important;transition:background .25s,color .25s}
html body .av-aba.on{background:linear-gradient(135deg,rgba(168,85,247,.45),rgba(124,58,237,.35))!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(196,160,255,.45)!important}
.av-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.av-pais{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(233,222,255,.09);animation:av-entra .45s cubic-bezier(.2,.8,.2,1) both;transition:border-color .25s,background .25s}
@media (hover:hover){.av-pais:hover{border-color:rgba(196,160,255,.4);background:rgba(168,85,247,.07)}}
@keyframes av-entra{from{opacity:0;transform:translateY(8px)}}
.av-pais img{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.av-pais strong{font-size:14.5px;font-weight:650;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-pais em{font-style:normal;font:600 12.5px ui-monospace,"Cascadia Mono",Consolas,monospace;color:#39ff88;white-space:nowrap}
.av-pais .av-b{grid-column:2/4;height:4px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.av-pais .av-b span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a78bfa,#39ff88);transform-origin:left;animation:av-barra 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes av-barra{from{transform:scaleX(0)}}
.av-vazio{grid-column:1/-1;padding:20px;text-align:center;color:rgba(233,222,255,.6);font-size:14px}
html body .av-mais{display:block;margin:16px auto 0;height:46px!important;padding:0 26px!important;border-radius:14px!important;border:1px solid rgba(196,160,255,.4)!important;
  background:rgba(168,85,247,.12)!important;color:#fff!important;font:650 14px Inter,system-ui,sans-serif!important;cursor:pointer;box-shadow:none!important}
.av-nota{margin:12px 0 0;text-align:center;font-size:12px;color:rgba(233,222,255,.5)}
@media (max-width:760px){
  .av-topo{gap:8px}.av-num{padding:12px 10px;text-align:center}.av-num b{font-size:18px}.av-num small{font-size:11px}.av-num i{display:none}
  .av-lista{grid-template-columns:1fr}.av-barra-ctl{flex-direction:column;align-items:stretch}
  .av-busca{flex:none;height:46px}
  .av-pais{animation:none}
}

/* ==========================================================================
   [home-vivo] ALLAN SMS COM O CELULAR (12/10/2026)
   Duas colunas: texto + serviços à esquerda, iPhone recebendo códigos à
   direita, com cards flutuantes de SMS. No celular o aparelho vem logo depois
   do título, menor.
   ========================================================================== */
@media (min-width:1101px){
  html body .smsx.sx-on{display:grid!important;grid-template-columns:minmax(0,1fr) 340px;column-gap:36px;align-items:start}
  html body .smsx.sx-on > :not(.sx-palco){grid-column:1}
  html body .smsx.sx-on .sx-palco{grid-column:2;grid-row:1 / span 3;align-self:center}
  /* 14 serviços em 7x2: sem card sobrando sozinho na última linha */
  html body .smsx.sx-on .smsx-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:8px!important}
  html body .smsx.sx-on .smsx-serv{padding-left:4px!important;padding-right:4px!important}
  html body .smsx.sx-on .smsx-nome{font-size:11.5px!important;line-height:1.2!important;text-align:center}
}
@media (max-width:1100px){
  html body .smsx.sx-on{display:flex!important;flex-direction:column}
  html body .smsx.sx-on .smsx-head{order:0}.sx-palco{order:1}
  html body .smsx.sx-on .smsx-grid{order:2}html body .smsx.sx-on .smsx-pe{order:3}
}
.sx-palco{position:relative}
.sx-palco .hf{--hf-w:258px;min-height:560px;padding:10px 0 28px}
.sx-hora{position:relative;z-index:2;text-align:center;padding-top:48px}
.sx-hora small{display:block;font-size:12px;color:rgba(255,255,255,.75)}
.sx-hora b{display:block;font:600 58px/1 Inter,system-ui,sans-serif;letter-spacing:-.03em;background:linear-gradient(180deg,#fff 30%,rgba(225,215,255,.78));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.sx-notis{position:relative;z-index:2;display:flex;flex-direction:column;gap:7px;margin:18px 9px 0;height:236px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.sx-noti{display:flex;gap:10px;align-items:flex-start;padding:10px 11px;border-radius:17px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.12);
  flex:none;animation:sx-cai .5s cubic-bezier(.3,1.3,.5,1) both;transition:opacity .4s,transform .4s}
.sx-noti:nth-child(2){opacity:.72;transform:scale(.97)}.sx-noti:nth-child(3){opacity:.42;transform:scale(.95)}
@keyframes sx-cai{from{opacity:0;transform:translateY(-22px) scale(.92)}}
.sx-noti img{width:32px;height:32px;border-radius:9px;object-fit:contain;background:transparent;flex:none} /* sem o quadrado branco atras do logo (12/10) */
.sx-noti div{min-width:0;flex:1}
.sx-noti b{display:flex;justify-content:space-between;font-size:12px;color:#fff}
.sx-noti b span{font-weight:500;font-size:10px;color:rgba(255,255,255,.55)}
.sx-noti p{margin:2px 0 0;font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.88)}
.sx-noti code{font:700 12px ui-monospace,"Cascadia Mono",Consolas,monospace;color:#c4b5fd;letter-spacing:.04em}
.sx-noti:first-child code{color:#39ff88;text-shadow:0 0 10px rgba(57,255,136,.45)}
.sx-c1{left:-34px;top:16%}.sx-c2{right:-30px;top:44%;animation-delay:-2.5s;animation-duration:8s}.sx-c3{left:-24px;bottom:12%;animation-delay:-4s;animation-duration:9s}
@media (max-width:1100px){.sx-palco .hf{--hf-w:246px;min-height:530px}.sx-c1{left:6%}.sx-c2{right:6%}.sx-c3{left:8%}}
@media (max-width:560px){.sx-c1,.sx-c2,.sx-c3{display:none}.sx-palco .hf{--hf-w:236px;min-height:510px}}
@media (max-width:760px),(hover:none){.sx-noti{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* tabela no celular: rola para o lado; a dica e o esmaecido avisam que tem mais */
.cmp-dica{display:none}
@media (max-width:760px){
  .cmp-dica{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px;font-size:12.5px;font-weight:600;color:#c4b5fd}
  .cmp-dica i{font-style:normal;animation:cmp-desliza 1.6s ease-in-out infinite}
  @keyframes cmp-desliza{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
  html body .comparison-section .comparison-table-wrap{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  html body .comparison-section .comparison-table-wrap.fim{-webkit-mask-image:none;mask-image:none}
}

/* ==========================================================================
   NUMEROS DA REDE — 3 cards depois dos planos (12/10/2026)
   Sempre 3 lado a lado. No celular viram compactos (icone, numero e legenda
   empilhados) — antes eram 7 cards de linha inteira, um atras do outro.
   ========================================================================== */
html body .v3-band.v3-nums{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;
  max-width:860px!important;margin:34px auto 30px!important}
html body .v3-nums .v3-band-i{min-width:0}
@media (max-width:640px){
  html body .v3-band.v3-nums{gap:8px!important;margin:22px auto 18px!important}
  html body .v3-nums .v3-band-i{flex-direction:column!important;align-items:center!important;text-align:center;gap:7px!important;
    padding:12px 6px 11px!important;border-radius:15px!important}
  html body .v3-nums .v3-band-ic{width:28px!important;height:28px!important;border-radius:9px!important}
  html body .v3-nums .v3-band-ic svg{width:14px!important;height:14px!important}
  html body .v3-nums .v3-band-i b{font-size:16px!important;white-space:nowrap}
  html body .v3-nums .v3-band-tx>span{font-size:10px!important;margin-top:2px!important;line-height:1.3}
}

/* nota da disponibilidade: toda proxy sai no Brasil; residencial e mobile
   trocam o local depois, na area do cliente */
html body .availability-section .av-nota{display:flex!important;align-items:flex-start;gap:10px;max-width:640px;margin:14px auto 0!important;
  padding:11px 16px 11px 12px;border-radius:16px;text-align:left;font-size:13.5px!important;line-height:1.5;color:#c9c1da!important;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(233,222,255,.12)}
html body .availability-section .av-nota b{color:#fff;font-weight:650}
html body .availability-section .av-nota-ic{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#7dffb2,#10b981);box-shadow:0 6px 14px -6px rgba(57,255,136,.6)}
@media (max-width:640px){html body .availability-section .av-nota{font-size:12.5px!important;padding:10px 12px 10px 10px;margin-top:12px!important}}

/* ==========================================================================
   LEVEZA (12/10/2026) — medido na home em 1366px:
   - 151 elementos com backdrop-filter, 79 deles cards grandes da pagina
     (49 paises, 20 depoimentos, casos de uso, ferramentas, tabela);
   - 30 particulas animadas num fundo FIXO atras de tudo.
   Desfoque em cima de algo que se mexe obriga o navegador a refazer o
   desfoque de cada card visivel a cada quadro. O fundo atras desses cards e
   quase liso, entao o desfoque nao aparece — so pesa. Sai deles; continua no
   cabecalho, nas janelas e nos cards flutuantes do celular.
   ========================================================================== */
html body main :is(.availability-card,.testimonial-card,.limit-ops-card,.tool,.proxy-choice-card,.comparison-table-wrap,.v3-sms,.smsx,.cfp-passo){
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* particulas do fundo: 18 em vez de 30 (no celular ja eram 8) */
.ap-particles i:nth-child(n+19){display:none!important}

/* ==========================================================================
   VANTAGENS — no lugar da tabela comparativa (12/10/2026)
   Destaque com o preco (borda viva) + 6 vantagens: 3x2 no computador,
   2x3 no celular. Cada vantagem com a sua cor (linha de luz e icone).
   ========================================================================== */
@property --vt-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
html body .vt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:14px;align-items:stretch;margin-top:8px}
html body .vt-destaque{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:24px 22px 22px;border-radius:22px;
  background:radial-gradient(120% 70% at 0% 0%,rgba(168,85,247,.22),transparent 60%),linear-gradient(165deg,rgba(40,22,72,.7),rgba(14,9,26,.9));
  box-shadow:0 30px 70px -40px rgba(124,58,237,.6),inset 0 1px 0 rgba(255,255,255,.08)}
html body .vt-destaque::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.3px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--vt-ang),rgba(167,139,250,.2) 0 55%,#a78bfa 70%,#39ff88 80%,rgba(167,139,250,.2) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:vt-gira 7s linear infinite}
@keyframes vt-gira{to{--vt-ang:360deg}}
html body .vt-selo{align-self:flex-start;display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-size:10.5px;font-weight:750;
  letter-spacing:.16em;color:#d8c8ff;background:rgba(168,85,247,.12);border:1px solid rgba(196,160,255,.3)}
html body .vt-rotulo{margin:18px 0 4px!important;font-size:13px!important;color:#b3acc4!important}
html body .vt-preco{margin:0!important;display:flex;align-items:baseline;gap:6px}
html body .vt-preco b{font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(38px,4.2vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(180deg,#fff 30%,#a7ffc9);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
html body .vt-preco span{font-size:15px;color:#b3acc4}
html body .vt-sub{margin:6px 0 0!important;font-size:13px!important;color:#cfc6e2!important}
html body .vt-mercado{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:3px}
html body .vt-mercado span{font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:#8d84a3}
html body .vt-mercado b{font-size:15px;font-weight:600;color:#fca5a5;text-decoration:line-through;text-decoration-color:rgba(252,165,165,.5)}
html body .vt-btn{position:relative;overflow:hidden;margin-top:18px;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 18px;
  border-radius:999px;font-size:14px;font-weight:650;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,#a78bfa,#7c3aed 60%,#6d28d9);box-shadow:0 14px 30px -14px rgba(124,58,237,.95),inset 0 1px 0 rgba(255,255,255,.22)}
html body .vt-btn::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:vt-faixa 5.5s ease-in-out infinite}
@keyframes vt-faixa{0%,70%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(560%)}}
html body .vt-seta{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16)}
html body .vt-seta svg{width:14px;height:14px}

html body .vt-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html body .vt-card{--c:#a78bfa;--g:linear-gradient(135deg,#a78bfa,#7c3aed);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;
  padding:18px 16px 17px;border-radius:18px;min-width:0;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid rgba(233,222,255,.11);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
html body .vt-card::before{content:"";position:absolute;left:16px;right:16px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);box-shadow:0 0 10px var(--c);opacity:.85}
html body .vt-card h3{margin:4px 0 0!important;font-size:15px!important;font-weight:650!important;letter-spacing:-.01em;color:#fff!important}
html body .vt-card p{margin:0!important;font-size:13px!important;line-height:1.5!important;color:#b3acc4!important}
html body .vt-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--g);box-shadow:0 8px 18px -8px var(--c)}
html body .vt-ic svg{width:18px;height:18px}
html body .vt-roxo{--c:#a78bfa;--g:linear-gradient(135deg,#a78bfa,#7c3aed)}
html body .vt-azul{--c:#38bdf8;--g:linear-gradient(135deg,#7dd3fc,#2563eb)}
html body .vt-verde{--c:#39ff88;--g:linear-gradient(135deg,#7dffb2,#10b981)}
html body .vt-ouro{--c:#fcd34d;--g:linear-gradient(135deg,#fde68a,#d97706)}
html body .vt-rosa{--c:#f472b6;--g:linear-gradient(135deg,#f9a8d4,#db2777)}
html body .vt-ciano{--c:#2dd4bf;--g:linear-gradient(135deg,#5eead4,#0d9488)}
@media (hover:hover){html body .vt-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 45%,transparent)}}
@media (max-width:1100px){
  html body .vt{grid-template-columns:minmax(0,1fr)}
  html body .vt-destaque{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:end}
  html body .vt-selo,html body .vt-rotulo,html body .vt-preco,html body .vt-sub{grid-column:1}
  html body .vt-mercado{grid-column:2;grid-row:2/4;margin:0;padding:0;text-align:right}
  html body .vt-btn{grid-column:2;grid-row:4;justify-self:end;margin-top:12px}
}
@media (max-width:760px){
  html body .vt-destaque{display:flex;padding:20px 18px 18px;border-radius:20px;text-align:center;align-items:center}
  html body .vt-selo,html body .vt-btn{align-self:center}
  html body .vt-preco{justify-content:center}
  html body .vt-mercado{text-align:center;padding-top:14px}
  html body .vt-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html body .vt-card{padding:14px 12px 13px;border-radius:16px;gap:6px}
  html body .vt-ic{width:32px;height:32px;border-radius:10px}
  html body .vt-ic svg{width:15px;height:15px}
  html body .vt-card h3{font-size:13.5px!important}
  html body .vt-card p{font-size:11.8px!important}
}
@media (max-width:760px),(hover:none){html body .vt-destaque::before,html body .vt-btn::before{animation:none}}
@media (prefers-reduced-motion:reduce){html body .vt-destaque::before,html body .vt-btn::before{animation:none}}
.fora-tela .vt-destaque::before,.fora-tela .vt-btn::before{animation-play-state:paused}
@media (max-width:1100px) and (min-width:761px){html body .vt-selo{justify-self:start}html body .vt-destaque{row-gap:0}}