/* V49 — efeitos no estilo do CGI aplicados ao site todo.
   Cor de destaque vem de --sx / --sx-rgb (cinza da Sete nas páginas gerais, cor do produto nas páginas de produto). */
@keyframes fxScan{0%{transform:translateY(-120%)}100%{transform:translateY(1100%)}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxRing{0%{transform:scale(.3);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes fxGlow{0%,100%{opacity:.55;transform:translate(0,0)}50%{opacity:.85;transform:translate(-2%,2%)}}

/* ---------- seções escuras: grade, varredura e brilho na cor ---------- */
.fx-dark,.fx-light,.fx-panel{position:relative;overflow:hidden;isolation:isolate}
.fx-grid{position:absolute!important;inset:0;z-index:-1!important;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(75% 75% at 72% 35%,#000 0%,transparent 78%);mask-image:radial-gradient(75% 75% at 72% 35%,#000 0%,transparent 78%)}
.fx-grid:after{content:"";position:absolute;right:-10%;top:-30%;width:60%;height:90%;border-radius:50%;background:radial-gradient(circle,rgb(var(--sx-rgb,107 110 115) / .22),transparent 65%);animation:fxGlow 9s ease-in-out infinite}
.fx-scan{position:absolute!important;left:0;right:0;top:0;height:10%;z-index:-1!important;pointer-events:none;background:linear-gradient(180deg,transparent,rgb(var(--sx-rgb,107 110 115) / .06) 60%,rgb(var(--sx-rgb,107 110 115) / .16) 100%);animation:fxScan 8s linear infinite}
.sx-gray .fx-scan{background:linear-gradient(180deg,transparent,rgba(255,255,255,.04) 60%,rgba(255,255,255,.1) 100%)}
.fx-panel-list{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)!important;background-size:48px 48px!important}

/* ---------- seções claras: brilho suave na cor ---------- */
.fx-glow{position:absolute!important;z-index:-1!important;right:-12%;top:-25%;width:55%;height:80%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgb(var(--sx-rgb,107 110 115) / .12),transparent 62%);animation:fxGlow 12s ease-in-out infinite}
.sx-gray .fx-glow{background:radial-gradient(circle,rgba(120,122,128,.08),transparent 62%)}

/* ---------- cards: sobem, foco de luz seguindo o mouse e borda acesa ---------- */
.fx-card{position:relative;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease!important}
.fx-card:hover{transform:translateY(-5px);box-shadow:0 0 0 1px rgb(var(--sx-rgb,107 110 115) / .55),0 24px 48px rgba(0,0,0,.12)!important}
.fx-card-dark:hover{box-shadow:0 0 0 1px rgb(var(--sx-rgb,107 110 115) / .6),0 0 40px rgb(var(--sx-rgb,107 110 115) / .14),0 24px 48px rgba(0,0,0,.45)!important}
.sx-gray .fx-card-dark:hover{box-shadow:0 0 0 1px rgba(255,255,255,.35),0 24px 48px rgba(0,0,0,.45)!important}
.fx-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(var(--sx-rgb,107 110 115) / .14),transparent 60%)}
.fx-card-dark .fx-spot{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(var(--sx-rgb,107 110 115) / .2),transparent 60%)}
.sx-gray .fx-card-dark .fx-spot{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 60%)}
.fx-card:hover .fx-spot{opacity:1}
/* entrada em sequência (ativada pelo script) */
.fx-pre{opacity:0;transform:translateY(18px)}
.fx-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}

/* ---------- chamadas finais: bloco preto com radar na cor ---------- */
.fx-cta{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#141517 0%,#0b0b0c 60%)!important;border:1px solid rgba(255,255,255,.08)!important;color:#fff!important;box-shadow:0 30px 70px rgba(0,0,0,.25)!important}
.fx-cta:after{content:none!important}
.fx-cta h2,.fx-cta h3,.fx-cta .dk-h span{color:#fff!important}
.fx-cta p,.fx-cta li,.fx-cta span:not([class]){color:#b5b7bc!important}
.fx-cta .kicker{color:#9a9ca1!important}
.fx-cta .dk-h::after{background:var(--sx)!important}
.fx-cta .btn,.fx-cta .button,.fx-cta a.btn-dark{background:var(--sx)!important;color:#0b0b0b!important;border-color:var(--sx)!important}
.sx-gray .fx-cta .btn,.sx-gray .fx-cta .button,.sx-gray .fx-cta a.btn-dark{background:#fff!important;color:#0b0b0b!important;border-color:#fff!important}
.fx-cta .tx-chips li,.fx-cta .oq-diffs li{background:rgba(255,255,255,.08)!important;color:#fff!important}
.fx-cta .tx-chips li:before,.fx-cta .oq-diffs li:before{background:var(--sx)!important}
.fx-radar{position:absolute;z-index:-1;right:-40px;top:50%;width:300px;height:300px;margin-top:-150px;border-radius:50%;pointer-events:none;opacity:.9;
  background:radial-gradient(circle,rgba(255,255,255,.07) 0 1px,transparent 1px) 0 0/26px 26px;border:1px solid rgba(255,255,255,.08)}
.fx-radar i{position:absolute;inset:0;border-radius:50%;border:1px solid rgb(var(--sx-rgb,107 110 115) / .55);animation:fxRing 3.6s ease-out infinite}
.sx-gray .fx-radar i{border-color:rgba(255,255,255,.3)}
.fx-radar i:nth-child(2){animation-delay:1.2s}.fx-radar i:nth-child(3){animation-delay:2.4s}
.fx-radar b{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgb(var(--sx-rgb,107 110 115) / .32),transparent 22%);animation:fxSpin 5s linear infinite}
.sx-gray .fx-radar b{background:conic-gradient(from 0deg,rgba(255,255,255,.22),transparent 22%)}
.fx-radar:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--sx);box-shadow:0 0 18px var(--sx)}
.sx-gray .fx-radar:after{background:#fff;box-shadow:0 0 18px #fff}
@media (max-width:760px){.fx-radar{width:200px;height:200px;margin-top:-100px;right:-70px;opacity:.5}}

/* ---------- textos em seções escuras ---------- */
.fx-dark .kicker{color:#9a9ca1!important}

@media (prefers-reduced-motion:reduce){
  .fx-scan,.fx-grid:after,.fx-glow,.fx-radar i,.fx-radar b{animation:none!important}
  .fx-pre{opacity:1;transform:none}
}
.fx-cta .next-text{color:#fff!important}