/* ==========================================================================
   [hero-fone] iPhone do topo da home (12/10/2026)
   Substitui o painel "Configure sua proxy": o app da ALLAN PROXYS conectado,
   com o IP trocando, a Dynamic Island avisando a troca e cards de vidro
   flutuando em volta. Tudo com prefixo hf- e dentro de .hf (nada vaza).
   Só transform/opacity animam; fora da tela o JS pausa (.hf-pausa); no
   celular/toque os enfeites contínuos param (fim do arquivo).
   ========================================================================== */

.hf{--hf-w:288px;--hf-neon:#39ff88;position:relative;display:grid;place-items:center;
  padding:22px 0 38px;isolation:isolate;min-height:640px}

/* luz atrás + anel girando */
.hf-aura{position:absolute;z-index:-2;width:calc(var(--hf-w)*1.95);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side at 38% 40%,rgba(139,92,246,.45),transparent 70%),
             radial-gradient(closest-side at 66% 62%,rgba(56,189,248,.24),transparent 70%),
             radial-gradient(closest-side at 50% 82%,rgba(57,255,136,.12),transparent 70%);
  animation:hf-respira 7s ease-in-out infinite}
.hf-anel{position:absolute;z-index:-1;width:calc(var(--hf-w)*1.55);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:.85;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(167,139,250,.6) 74%,rgba(57,255,136,.55) 82%,transparent 92%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));
  mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));
  animation:hf-gira 14s linear infinite}
@keyframes hf-respira{0%,100%{transform:scale(.94);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes hf-gira{to{transform:rotate(360deg)}}

.hf-flutua{animation:hf-flutua 7s ease-in-out infinite}
@keyframes hf-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hf-tilt{--rx:0deg;--ry:0deg;--gx:30%;transform:perspective(1300px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hf-sombra{position:absolute;bottom:6px;left:50%;z-index:-1;width:calc(var(--hf-w)*.78);height:26px;margin-left:calc(var(--hf-w)*-.39);
  border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);animation:hf-sombra 7s ease-in-out infinite}
@keyframes hf-sombra{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.86);opacity:.6}}

/* ---- aparelho ---- */
.hf-fone{position:relative;width:var(--hf-w);aspect-ratio:9/19.2;border-radius:calc(var(--hf-w)*.175);padding:4px;
  background:linear-gradient(145deg,#8f8a9e 0%,#3b3846 18%,#24222c 42%,#5d5969 62%,#1d1b24 84%,#77728a 100%);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 22px 40px -24px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14)}
.hf-fone::before{content:"";position:absolute;inset:4px;border-radius:inherit;background:#050507}
.hf-bt{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#4a4656,#8e899d)}
.hf-bt.a{left:-2px;top:17%;height:4.5%}.hf-bt.b{left:-2px;top:25%;height:8.5%}.hf-bt.c{left:-2px;top:36%;height:8.5%}
.hf-bt.d{right:-2px;top:29%;height:13%;background:linear-gradient(270deg,#4a4656,#8e899d)}
.hf-tela{position:absolute;inset:11px;border-radius:calc(var(--hf-w)*.145);overflow:hidden;color:#fff;
  background:#0a0816;font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;transform:translateZ(0)}
.hf-papel{position:absolute;inset:0;background:radial-gradient(140% 90% at 50% -10%,#2a1f5c 0%,#110d27 50%,#07060e 100%)}
.hf-papel i{position:absolute;border-radius:50%;will-change:transform}
.hf-papel i:nth-child(1){width:120%;aspect-ratio:1;left:-45%;top:-20%;background:radial-gradient(closest-side,rgba(124,58,237,.5),transparent);animation:hf-m1 16s ease-in-out infinite alternate}
.hf-papel i:nth-child(2){width:110%;aspect-ratio:1;right:-55%;top:35%;background:radial-gradient(closest-side,rgba(37,99,235,.38),transparent);animation:hf-m2 19s ease-in-out infinite alternate}
.hf-papel i:nth-child(3){width:100%;aspect-ratio:1;left:-25%;bottom:-48%;background:radial-gradient(closest-side,rgba(57,255,136,.14),transparent);animation:hf-m3 22s ease-in-out infinite alternate}
@keyframes hf-m1{to{transform:translate(28%,18%) scale(1.12)}}
@keyframes hf-m2{to{transform:translate(-30%,-12%) scale(.9)}}
@keyframes hf-m3{to{transform:translate(22%,-24%) scale(1.15)}}
.hf-reflexo{position:absolute;inset:0;z-index:9;pointer-events:none;
  background:linear-gradient(115deg,transparent 0 calc(var(--gx,30%) - 18%),rgba(255,255,255,.06) var(--gx,30%),transparent calc(var(--gx,30%) + 16%))}

/* barra de status */
.hf-status{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 0 24px;height:40px;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.hf-hora{font-variant-numeric:tabular-nums}
.hf-status-d{display:inline-flex;align-items:center;gap:5px}
.hf-px{font:700 8.5px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;padding:3px 5px;border-radius:5px;background:var(--hf-neon);color:#03200d}

/* Dynamic Island */
.hf-ilha{position:absolute;z-index:6;top:10px;left:0;right:0;margin:0 auto;width:92px;height:27px;border-radius:20px;background:#000;
  display:flex;align-items:center;justify-content:flex-end;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.04);
  transition:width .6s cubic-bezier(.3,1.4,.45,1),height .6s cubic-bezier(.3,1.4,.45,1),border-radius .6s ease}
.hf-ilha.aberta{width:calc(100% - 22px);height:50px;border-radius:25px;justify-content:stretch;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.hf-cam{width:10px;height:10px;margin-right:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#34345a,#0b0b14 60%);box-shadow:inset 0 0 0 1.5px #15151f;transition:opacity .2s}
.hf-ilha.aberta .hf-cam{opacity:0;position:absolute}
.hf-ilha-c{display:flex;align-items:center;gap:9px;width:100%;padding:0 14px 0 10px;white-space:nowrap;opacity:0;filter:blur(6px);transition:opacity .3s .12s,filter .3s .12s}
.hf-ilha.aberta .hf-ilha-c{opacity:1;filter:blur(0)}
.hf-ilha:not(.aberta) .hf-ilha-c{position:absolute;transition:none}
.hf-ilha-ic{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#7dffb2,#39ff88 55%,#10b981)}
.hf-ilha-t{display:flex;flex-direction:column;font-size:11.5px;font-weight:650;line-height:1.15}
.hf-ilha-t small{font-size:9.5px;font-weight:500;color:rgba(255,255,255,.55)}
.hf-ilha-ip{margin-left:auto;font:700 12.5px ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--hf-neon);letter-spacing:.02em}

/* app */
.hf-app{position:absolute;inset:46px 13px 22px;z-index:2;display:flex;flex-direction:column;gap:10px}
.hf-topo{display:flex;align-items:center;justify-content:space-between}
.hf-marca{display:inline-flex;align-items:center;gap:6px;font:700 11.5px Inter,system-ui,sans-serif;letter-spacing:.03em}
.hf-marca img{width:18px;height:18px}
.hf-marca b{color:#c4b5fd}
.hf-on{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--hf-neon);padding:3px 8px;border-radius:999px;background:rgba(57,255,136,.12)}
.hf-on i{width:6px;height:6px;border-radius:50%;background:var(--hf-neon);box-shadow:0 0 8px var(--hf-neon);animation:hf-pisca 1.8s ease-in-out infinite}
@keyframes hf-pisca{0%,100%{opacity:1}50%{opacity:.35}}

/* globo de conexão */
.hf-globo{position:relative;align-self:center;width:118px;height:118px;margin:0}
.hf-globo .hf-centro{inset:36px}.hf-globo .hf-onda{inset:21px}
.hf-globo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hf-giro{transform-origin:50% 50%;animation:hf-gira 9s linear infinite}
.hf-giro2{transform-origin:50% 50%;animation:hf-gira 14s linear infinite reverse}
.hf-onda{position:absolute;inset:26px;border-radius:50%;border:1.5px solid rgba(57,255,136,.45);opacity:0;animation:hf-onda 3.2s cubic-bezier(.2,.6,.3,1) infinite}
.hf-onda:nth-of-type(2){animation-delay:1.6s}
@keyframes hf-onda{0%{transform:scale(.7);opacity:0}15%{opacity:.8}100%{transform:scale(1.55);opacity:0}}
.hf-centro{position:absolute;inset:44px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,rgba(196,181,253,.35),rgba(124,58,237,.25) 55%,rgba(15,10,35,.6));
  box-shadow:0 0 0 1px rgba(196,181,253,.3),0 0 30px -4px rgba(139,92,246,.7)}
.hf-tipo{align-self:center;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.62);margin-top:-2px}
.hf-tipo b{color:#fff}

/* cartão do IP */
.hf-ipcard{position:relative;overflow:hidden;padding:11px 13px;border-radius:17px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.hf-ipcard.troca::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 66%);transform:translateX(-120%);animation:hf-brilho 1.2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hf-brilho{to{transform:translateX(120%)}}
.hf-rot{font-size:9.5px;font-weight:650;letter-spacing:.12em;color:rgba(255,255,255,.5)}
.hf-ip{display:block;margin:3px 0 5px;font:700 19px ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(196,181,253,.45)}
.hf-loc{display:flex;align-items:center;gap:7px;font-size:11.5px;color:rgba(255,255,255,.8)}
.hf-flag{display:inline-block;width:18px;height:13px;border-radius:2px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.hf-flag svg{display:block;width:100%;height:100%}

/* números */
.hf-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.hf-num{padding:9px 6px 8px;border-radius:13px;text-align:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.hf-num b{display:block;font:700 15px Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.hf-num small{display:block;font-size:9px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.5);margin-top:2px;text-transform:uppercase}
.hf-num .hf-ms{color:var(--hf-neon)}

/* gráfico de tráfego */
.hf-graf{position:relative;height:38px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.hf-graf svg{position:absolute;inset:0;width:100%;height:100%}
.hf-graf small{position:absolute;left:9px;top:6px;font-size:9px;font-weight:650;letter-spacing:.1em;color:rgba(255,255,255,.45)}
.hf-home{position:absolute;z-index:3;bottom:8px;left:50%;width:36%;height:4.5px;margin-left:-18%;border-radius:3px;background:rgba(255,255,255,.85)}

/* ---- cards flutuando em volta ---- */
.hf-chip{position:absolute;z-index:4;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}
.hf-chip b{display:block;font-size:12.5px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.hf-chip small{display:block;font-size:10.5px;color:rgba(233,222,255,.62);line-height:1.3}
.hf-chip-ic{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center}
.hf-chip-ic svg{width:15px;height:15px}
.hf-chip-ic.ok{background:linear-gradient(135deg,#7dffb2,#39ff88 55%,#10b981);box-shadow:0 0 16px -2px rgba(57,255,136,.55);color:#04260f}
.hf-chip-ic.roxo{background:linear-gradient(135deg,#a78bfa,#7c3aed);box-shadow:0 6px 16px -6px rgba(124,58,237,.7);color:#fff}
.hf-chip-ic.azul{background:linear-gradient(135deg,#7dd3fc,#2563eb);box-shadow:0 6px 16px -6px rgba(37,99,235,.7);color:#fff}
.hf-chip-ic.rosa{background:linear-gradient(135deg,#f9a8d4,#db2777);box-shadow:0 6px 16px -6px rgba(219,39,119,.7);color:#fff}
.hf-c1{left:0;top:9%}
.hf-c2{right:-2%;top:20%;animation-delay:-2s;animation-duration:8s}
.hf-c3{left:-2%;bottom:30%;animation-delay:-4s;animation-duration:9s}
.hf-c5{right:-4%;top:47%;animation-delay:-5.5s;animation-duration:8.5s}
.hf-c4{right:0;bottom:8%;animation-delay:-1s;animation-duration:7.5s}
/* ícones dos produtos: cada um com a sua cor */
.hf-chip-ic.px-mobile{background:linear-gradient(135deg,#5eead4,#0d9488);box-shadow:0 0 16px -3px rgba(45,212,191,.6);color:#fff}
.hf-chip-ic.px-isp{background:linear-gradient(135deg,#c4b5fd,#7c3aed);box-shadow:0 0 16px -3px rgba(139,92,246,.7);color:#fff}
.hf-chip-ic.px-dc{background:linear-gradient(135deg,#fdba74,#ea580c);box-shadow:0 0 16px -3px rgba(249,115,22,.6);color:#fff}
.hf-chip-ic.px-v4{background:linear-gradient(135deg,#7dd3fc,#2563eb);box-shadow:0 0 16px -3px rgba(59,130,246,.65);color:#fff}
.hf-chip-ic svg{width:17px;height:17px}
/* tráfego do plano */
.hf-plano{padding:10px 12px 9px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.hf-plano-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.hf-plano-top span{font-size:8.5px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.5);white-space:nowrap}
.hf-plano-top b{font-size:10.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.hf-plano-barra{height:6px;margin:8px 0 6px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.hf-plano-barra span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#39ff88,#38bdf8 55%,#a78bfa);
  box-shadow:0 0 10px rgba(57,255,136,.45);transition:width 1s ease}
.hf-plano small{display:block;font-size:10px;color:rgba(255,255,255,.55)}
.hf-plano small b{color:rgba(255,255,255,.85)}
@keyframes hf-chip{0%,100%{transform:translate(0,0) rotate(-1.5deg)}50%{transform:translate(5px,-12px) rotate(1.5deg)}}

/* congela quando fora da tela */
.hf.hf-pausa,.hf.hf-pausa *{animation-play-state:paused!important}

/* ---- tamanhos ---- */
@media (max-width:1180px){.hf-c1{left:-4px}.hf-c2{right:-4px}.hf-c3,.hf-c4,.hf-c5{display:none}}
@media (max-width:980px){.hf{margin-top:6px}}
@media (max-width:560px){
  .hf{--hf-w:262px;min-height:590px;padding:12px 0 30px}
  .hf-c1,.hf-c2{display:none}
  .hf-globo{width:100px;height:100px}.hf-globo .hf-centro{inset:30px}.hf-globo .hf-onda{inset:18px}
  .hf-app{gap:8px}.hf-graf{height:32px}
  .hf-ip{font-size:17px}
}
/* celular e toque: param os enfeites contínuos e o vidro com desfoque
   (o IP trocando e a ilha continuam: são eles que contam a história) */
@media (max-width:760px),(hover:none){
  .hf-aura,.hf-anel,.hf-flutua,.hf-sombra,.hf-papel i,.hf-chip,.hf-giro2{animation:none!important}
  .hf-papel i{will-change:auto}
  .hf-ipcard,.hf-chip{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hf-ipcard{background:rgba(255,255,255,.13)}
}
@media (prefers-reduced-motion:reduce){.hf *,.hf{animation:none!important}.hf-tilt{transition:none}}

/* ------------------------------------------------ promoção (4 anos / Black Friday)
   Tudo aqui só existe com <html class="promo-4anos"> (o script da promoção
   liga e desliga sozinho pela data). */
.hf-promo,.hf-promo-chip{display:none!important}
html.promo-4anos .hf-promo{display:flex!important}
html.promo-4anos .hf-promo-chip{display:flex!important}
.hf-promo{position:relative;overflow:hidden;align-items:center;gap:8px;padding:7px 9px;border-radius:13px;
  background:linear-gradient(120deg,rgba(251,191,36,.2),rgba(217,70,239,.22) 55%,rgba(124,58,237,.25));
  border:1px solid rgba(252,211,77,.35)}
.hf-promo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-120%);animation:hf-faixa 3.6s 1s ease-in-out infinite}
@keyframes hf-faixa{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.hf-promo-ic{width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;font:800 15px Inter,system-ui,sans-serif;color:#2a1600;
  background:linear-gradient(135deg,#fde68a,#f59e0b);box-shadow:0 0 14px -2px rgba(251,191,36,.7)}
.hf-promo-t{display:flex;flex-direction:column;line-height:1.1}
.hf-promo-t b{font-size:10.5px;font-weight:800;letter-spacing:.06em;background:linear-gradient(90deg,#fff,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hf-promo-t small{font-size:9px;color:rgba(255,255,255,.7)}
.hf-promo-off{margin-left:auto;font-size:10px;font-weight:700;color:#fcd34d;white-space:nowrap}
.hf-promo-off b{font-size:14px;font-weight:800}
.hf-chip-ic.ouro{background:linear-gradient(135deg,#fde68a,#f59e0b 60%,#d97706);box-shadow:0 0 18px -2px rgba(251,191,36,.7);color:#2a1600}
.hf-chip-ic.ouro b{font:800 17px Inter,system-ui,sans-serif}
.hf-promo-chip{border-color:rgba(252,211,77,.35)!important}
.hf-c6{left:-4%;top:33%;animation-delay:-3s;animation-duration:6.5s}
/* ilha no modo promoção */
.hf-ilha.promo .hf-ilha-ic{background:linear-gradient(135deg,#fde68a,#f59e0b)}
.hf-ilha.promo .hf-ilha-ip{color:#fcd34d}

/* card da Black Friday: mais vida, sem moldura (decisão antiga: solto na página) */
html.promo-4anos .cy-marca{position:relative}
html.promo-4anos .cy-bf{position:relative;overflow:hidden;padding-bottom:.04em}
html.promo-4anos .cy-bf::after{content:"";position:absolute;inset:-10% 0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);mix-blend-mode:overlay;
  transform:translateX(-110%);animation:hf-bf 5s 1.2s ease-in-out infinite}
@keyframes hf-bf{0%,50%{transform:translateX(-110%)}80%,100%{transform:translateX(110%)}}
html.promo-4anos .cy-off{position:relative;overflow:hidden;animation:hf-off 2.8s ease-in-out infinite}
html.promo-4anos .cy-off::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:hf-faixa 3.2s .4s ease-in-out infinite}
@keyframes hf-off{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
html.promo-4anos .cy-prazo-ic{color:#fcd34d}
html.promo-4anos .cy-precos li{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){html.promo-4anos .cy-precos li:hover{transform:translateY(-4px)}}

@media (max-width:1180px){.hf-c6{left:-4px;top:30%}}
@media (max-width:560px){html.promo-4anos .hf-c6,.hf-c6{display:none!important}}
@media (max-width:760px),(hover:none){
  .hf-promo::after,html.promo-4anos .cy-bf::after,html.promo-4anos .cy-off,html.promo-4anos .cy-off::after{animation:none!important}
}

/* ==========================================================================
   [hero-fone] CARD DA BLACK FRIDAY — versão 2 (12/10/2026)
   O Allan pediu o card mais forte: moldura de vidro com borda em degradê
   correndo (ouro, rosa, roxo), selo "4 ANOS" girando, preços em blocos e
   contagem de dias/horas/minutos (sem segundos: decisão antiga, "relógio em
   segundos é linguagem de leilão"). Só com <html class="promo-4anos">.
   ========================================================================== */
@property --cy-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
html.promo-4anos .cy{padding:26px 26px 24px!important;border-radius:28px!important;
  background:linear-gradient(160deg,rgba(40,20,72,.62),rgba(14,9,26,.78))!important;
  box-shadow:0 40px 90px -50px rgba(217,70,239,.55),inset 0 1px 0 rgba(255,255,255,.08)!important}
html.promo-4anos .cy::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;z-index:3;pointer-events:none;
  background:conic-gradient(from var(--cy-ang),rgba(252,211,77,.9),rgba(236,72,153,.9) 25%,rgba(168,85,247,.85) 50%,rgba(56,189,248,.6) 70%,rgba(252,211,77,.9));
  -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:cy-gira 6s linear infinite}
@keyframes cy-gira{to{--cy-ang:360deg}}
html.promo-4anos .cy-hr,html.promo-4anos .cy-mono{display:none!important}
html.promo-4anos .cy-top{padding-right:92px}

/* selo 4 ANOS girando no canto */
.cy-selo4{position:absolute;right:14px;top:12px;z-index:5;width:88px;height:88px;pointer-events:none}
.cy-selo4 svg{position:absolute;inset:0;width:100%;height:100%;animation:cy-gira-selo 16s linear infinite}
@keyframes cy-gira-selo{to{transform:rotate(360deg)}}
.cy-selo4 b{position:absolute;inset:20px;border-radius:50%;display:grid;place-items:center;
  font:900 26px/1 Inter,system-ui,sans-serif;color:#2a1600;background:radial-gradient(circle at 35% 30%,#fff4c2,#fcd34d 45%,#d97706);
  box-shadow:0 0 0 3px rgba(20,10,30,.9),0 10px 30px -6px rgba(251,191,36,.7)}
.cy-selo4 b small{display:block;font-size:8px;font-weight:800;letter-spacing:.1em;margin-top:-6px}

/* preços em blocos */
html.promo-4anos .cy-precos{gap:10px!important}
html.promo-4anos .cy-precos li{padding:12px 14px!important;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(233,222,255,.1);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s}
html.promo-4anos .cy-precos li::before{display:none!important}
@media (hover:hover){html.promo-4anos .cy-precos li:hover{border-color:rgba(252,211,77,.45);background:rgba(252,211,77,.06)}}
html.promo-4anos .cy-p-de{color:#fb7185!important;opacity:.85}

/* contagem regressiva */
.cy-cont{display:flex;align-items:center;gap:6px;margin:0}
.cy-cont-t{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a99cc0;margin-right:4px}
.cy-cont-b{min-width:46px;padding:6px 6px 5px;border-radius:11px;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(252,211,77,.28)}
.cy-cont-b b{display:block;font:800 18px/1 Inter,system-ui,sans-serif;color:#fcd34d;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(252,211,77,.35)}
.cy-cont-b small{display:block;margin-top:3px;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8d7fa8}
.cy-cont-sep{color:#fcd34d;font-weight:800;animation:pv-pisca 1.4s ease-in-out infinite}
html.promo-4anos .cy-prazo.cy-trocado{display:none!important}

@media (max-width:760px){
  html.promo-4anos .cy{padding:20px 16px 18px!important;border-radius:22px!important}
  .cy-selo4{right:8px;top:8px;width:70px;height:70px}.cy-selo4 b{inset:16px;font-size:18px}
  html.promo-4anos .cy-top{padding-right:66px;justify-content:flex-start!important}
  html.promo-4anos .cy-tag{font-size:10.5px!important;letter-spacing:.08em!important;padding:6px 12px 6px 10px!important;white-space:normal!important;text-align:left}
  .cy-cont{justify-content:center;flex-wrap:wrap}
  html.promo-4anos .cy-precos li{padding:10px 12px!important}
}
@media (max-width:760px),(hover:none){
  html.promo-4anos .cy::before,.cy-selo4 svg,.cy-cont-sep{animation:none!important}
}
@media (prefers-reduced-motion:reduce){html.promo-4anos .cy::before,.cy-selo4 svg{animation:none!important}}

/* preços no celular: três blocos lado a lado (nome em cima, valor alinhado
   pela base), no lugar da lista comprida com o "a partir de" solto */
@media (max-width:860px){
  html.promo-4anos .cy-precos{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;align-items:stretch!important}
  html.promo-4anos .cy-precos li{align-self:stretch!important;height:auto!important}
  html.promo-4anos .cy-precos li{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;
    min-width:0!important;padding:11px 6px 10px!important;border-radius:14px!important}
  html.promo-4anos .cy-precos li::before{display:none!important}
  html.promo-4anos .cy-p-nome{order:0;font-size:8.5px!important;letter-spacing:.1em!important;max-width:100%}
  html.promo-4anos .cy-p-apartir{order:1;margin:3px 0 0!important;font-size:9px!important;line-height:1.2}
  html.promo-4anos .cy-p-linha{order:2;margin-top:auto!important;padding-top:6px;display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important}
  html.promo-4anos .cy-p-val{font-size:19px!important;line-height:1.05!important;white-space:nowrap}
  html.promo-4anos .cy-p-un{font-size:9.5px!important;margin-top:1px}
  html.promo-4anos .cy-p-de{order:3;margin-top:3px!important;font-size:9.5px!important;text-align:center!important;min-height:12px}
}
@media (max-width:360px){html.promo-4anos .cy-p-val{font-size:17px!important}}

/* blocos de preço mais premium: ícone do produto em degradê (casa, sinal,
   servidor), linha de luz no topo e valor com brilho. A ordem dos itens vem
   do script da promoção: residencial, mobile, datacenter. */
html.promo-4anos .cy-precos li{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02))!important;
  border:1px solid rgba(233,222,255,.13)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px -22px rgba(0,0,0,.8)}
html.promo-4anos .cy-precos li::after{content:"";position:absolute;left:14%;right:14%;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cy-c,#a78bfa),transparent);box-shadow:0 0 12px var(--cy-c,#a78bfa)}
html.promo-4anos .cy-precos li:nth-child(1){--cy-c:#39ff88;--cy-g:linear-gradient(135deg,#7dffb2,#10b981)}
html.promo-4anos .cy-precos li:nth-child(2){--cy-c:#38bdf8;--cy-g:linear-gradient(135deg,#7dd3fc,#2563eb)}
html.promo-4anos .cy-precos li:nth-child(3){--cy-c:#fb923c;--cy-g:linear-gradient(135deg,#fdba74,#ea580c)}
/* o ícone usa o ::before (o fio antigo entre colunas foi desligado) */
html.promo-4anos .cy-precos li::before{content:""!important;display:block!important;position:static!important;order:-1;
  width:30px!important;height:30px!important;margin:0 0 8px!important;border-radius:10px;background:var(--cy-g)!important;
  box-shadow:0 8px 18px -8px var(--cy-c);
  -webkit-mask:var(--cy-ic) center/18px 18px no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:var(--cy-ic) center/18px 18px no-repeat,linear-gradient(#000 0 0);mask-composite:exclude}
html.promo-4anos .cy-precos li:nth-child(1){--cy-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 10 3.5l7 6V17H3z'/%3E%3Cpath d='M8 17v-4.5h4V17'/%3E%3C/svg%3E")}
html.promo-4anos .cy-precos li:nth-child(2){--cy-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='6' y='5' width='8' height='12.5' rx='2'/%3E%3Cpath d='M4.5 4a7.5 7.5 0 0 1 11 0M9 15.2h2'/%3E%3C/svg%3E")}
html.promo-4anos .cy-precos li:nth-child(3){--cy-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='3' width='13' height='5' rx='1.5'/%3E%3Crect x='3.5' y='10' width='13' height='5' rx='1.5'/%3E%3Cpath d='M6.5 5.5h.01M6.5 12.5h.01'/%3E%3C/svg%3E")}
html.promo-4anos .cy-p-val{background:linear-gradient(180deg,#fff 40%,#e2d4ff)!important;-webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;filter:drop-shadow(0 0 14px rgba(196,160,255,.35))}
@media (hover:hover){html.promo-4anos .cy-precos li:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--cy-c) 55%,transparent)!important;
  box-shadow:0 18px 40px -22px var(--cy-c),inset 0 1px 0 rgba(255,255,255,.1)}}
@media (max-width:860px){html.promo-4anos .cy-precos li::before{width:26px!important;height:26px!important;margin-bottom:6px!important}}

/* ==========================================================================
   AJUSTE 12/10/2026 (pedido do Allan)
   - card da Black Friday um pouco menor e com moldura SUAVE (a borda em
     degradê forte girando saiu);
   - celular mais para a direita;
   - cards flutuantes presos ao CELULAR, nao a borda da coluna: antes, conforme
     a largura, eles entravam 50-100px na tela e tampavam IP, latencia e o
     grafico "AO VIVO";
   - blocos de preco: nome do plano em branco e as tres colunas alinhadas.
   ========================================================================== */

/* moldura: fio claro e transparente, parado */
html.promo-4anos .cy::before{padding:1px!important;animation:none!important;
  background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(196,170,255,.07) 35%,rgba(255,255,255,.025) 60%,rgba(252,211,77,.09))!important}
html.promo-4anos .cy{box-shadow:0 40px 90px -64px rgba(168,85,247,.4),inset 0 1px 0 rgba(255,255,255,.06)!important}

/* TOPO MAIS BAIXO: card e celular ocupavam ~680px de altura e os planos so
   apareciam depois de rolar bastante. zoom encolhe tudo na mesma proporcao
   (texto, blocos, selo; aparelho e cards flutuantes juntos), sem reflow — o
   desenho continua o mesmo, so menor. ~680px -> ~560px. */
@media (min-width:981px){
  html.promo-4anos #inicio .v3-left .cy{zoom:.82}
  .hf{zoom:.86}
}

/* posicao dos cards flutuantes a partir do CENTRO do celular (--hf-cx):
   os da esquerda terminam 12px para dentro da borda do aparelho (so encostam
   na moldura), os da direita comecam 12px para dentro da outra borda */
@media (min-width:981px){
  .hf{--hf-pl:0px;--hf-cx:calc(var(--hf-pl) + (100% - var(--hf-pl)) / 2);padding-left:var(--hf-pl)!important}
  .hf-c1,.hf-c3,.hf-c6{left:auto!important;right:calc(100% - var(--hf-cx) + var(--hf-w) / 2 - 12px)!important}
  .hf-c2,.hf-c5{right:auto!important;left:calc(var(--hf-cx) + var(--hf-w) / 2 - 12px)!important}
  /* multilogins: embaixo do aparelho, encostando so na borda de baixo — antes
     ficava em cima do grafico "AO VIVO" */
  .hf-c4{right:auto!important;bottom:auto!important;left:calc(var(--hf-cx) - 96px)!important;
    top:calc(22px + var(--hf-w) * 19.2 / 9 - 18px)!important}
}
@media (min-width:1181px){
  /* coluna do card menor, a do celular maior, e o celular empurrado para a
     direita dentro dela (padding-left desloca o centro em metade do valor) */
  html.promo-4anos #inicio .v3-split{grid-template-columns:minmax(0,500px) minmax(0,1fr)!important}
  .hf{--hf-pl:clamp(40px,calc((100vw - 1180px) * .5 + 96px),150px)}
}

/* blocos de preco */
html.promo-4anos .cy-p-nome{color:#fff!important;font-weight:700!important;opacity:1!important}
html.promo-4anos .cy-p-apartir{color:#b3acc4!important;min-height:1.2em}
@media (min-width:861px){
  html.promo-4anos .cy-precos li{display:flex!important;flex-direction:column!important;align-items:flex-start!important}
  html.promo-4anos .cy-p-nome{order:0;font-size:10.5px!important;letter-spacing:.12em!important}
  html.promo-4anos .cy-p-apartir{order:1;margin:3px 0 0!important;font-size:10.5px!important;line-height:1.2}
  html.promo-4anos .cy-p-linha{order:2;margin-top:6px!important}
  html.promo-4anos .cy-p-de{order:3}
}

/* 981-1180px (notebook pequeno, iPad deitado): pouco espaço dos lados do
   celular. Card da promocao um pouco menor, cards flutuantes 10% menores,
   sem o "4 anos" (ja esta no card ao lado) — e abaixo de 1100px so o
   aparelho: os cards ou invadiam a promocao ou saiam da tela. */
@media (min-width:1100px) and (max-width:1180px){
  html.promo-4anos #inicio .v3-split{grid-template-columns:minmax(0,480px) minmax(0,1fr)!important}
  html.promo-4anos #inicio .v3-left .cy{zoom:.76}
  html.promo-4anos .hf-c6,.hf-c6{display:none!important}
}
@media (min-width:981px) and (max-width:1099px){
  .hf-c1,.hf-c2,.hf-c6,html.promo-4anos .hf-c6{display:none!important}
}