/* ===== V17 — Camada extra de animações e interações ===== */

/* Transição suave entre páginas */
html.fx-ready body{animation:fx-page-in .4s ease-out}
html.fx-leaving body{opacity:0;transition:opacity .18s ease}
@keyframes fx-page-in{from{opacity:0}to{opacity:1}}

/* Título do topo entrando palavra por palavra */
.fx-word{display:inline-block;white-space:pre;opacity:0;transform:translateY(.55em) rotateX(-40deg);filter:blur(6px);animation:fx-word-in .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + 120ms)}
@keyframes fx-word-in{to{opacity:1;transform:none;filter:none}}

/* Destaque amarelo com brilho correndo */
.hero h1>span:not(.fx-word),.page-hero h1>strong{background:linear-gradient(100deg,var(--yellow) 0%,var(--yellow) 40%,#fff6bf 50%,var(--yellow) 60%,var(--yellow) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shimmer 5.5s ease-in-out 1.4s infinite}
.hero h1>span:not(.fx-word) .fx-word,.page-hero h1>strong .fx-word{background:inherit;background-size:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-word-in .7s cubic-bezier(.2,.8,.2,1) forwards,fx-shimmer 5.5s ease-in-out 1.4s infinite;animation-delay:calc(var(--i) * 70ms + 120ms),1.4s}
@keyframes fx-shimmer{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}

/* Fundo do topo com zoom lento */
.hero-media{animation:fx-kenburns 22s ease-in-out infinite alternate;transform-origin:70% 60%}
@keyframes fx-kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}

/* Rede de circuitos animada no topo */
.fx-network{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.55}
.page-hero>.container,.hero-inner{position:relative;z-index:2}

/* Faixa de serviços em movimento */
.fx-ticker{position:relative;overflow:hidden;border-bottom:1px solid rgba(255,212,0,.18);background:linear-gradient(90deg,#0b0d10,#111318,#0b0d10);padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-ticker-group{display:flex}
.fx-ticker-track{display:flex;width:max-content;animation:fx-ticker 38s linear infinite}
.fx-ticker:hover .fx-ticker-track{animation-play-state:paused}
.fx-ticker a{display:inline-flex;align-items:center;gap:14px;padding:0 22px;font-weight:900;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#d9dce0;white-space:nowrap;transition:color .2s}
.fx-ticker a:hover{color:var(--yellow)}
.fx-ticker a:after{content:"";width:7px;height:7px;border-radius:2px;background:var(--yellow);transform:rotate(45deg);box-shadow:0 0 12px rgba(255,212,0,.7);margin-left:22px}
@keyframes fx-ticker{to{transform:translateX(-50%)}}

/* Linha amarela desenhada sob os títulos de seção */
.section-head h2{position:relative;padding-bottom:12px}
.section-head h2:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:72px;border-radius:3px;background:linear-gradient(90deg,var(--yellow),rgba(255,212,0,0));transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1) .25s}
.section-head.is-visible h2:after,html:not(.reveal-ready) .section-head h2:after{transform:scaleX(1)}

/* Brilho passando pelos cards */
.fx-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:3}
.fx-shine:before{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg) translateX(0);transition:none}
.fx-has-shine:hover .fx-shine:before{transform:skewX(-18deg) translateX(420%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.fx-has-shine{position:relative}

/* Imagem dos cards aproxima no hover */
.card .card-media{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .35s}
.card:hover .card-media{transform:scale(1.035);filter:saturate(1.15) brightness(1.05)}
.card .icon{transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.card:hover .icon{transform:translateY(-4px) rotate(-6deg) scale(1.08);box-shadow:0 0 22px rgba(255,212,0,.25)}

/* Atalhos: seta desliza */
.shortcut-card b span,.btn span[aria-hidden]{display:inline-block;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.shortcut-card:hover b span,.btn:hover span[aria-hidden]{transform:translateX(6px)}

/* Etapas do processo acendendo em sequência */
.process{position:relative}
.process:before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;z-index:2;background:linear-gradient(90deg,var(--yellow),#fff3a6,var(--yellow));box-shadow:0 0 14px rgba(255,212,0,.6);transform:scaleX(0);transform-origin:left;transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
.process.fx-on:before{transform:scaleX(1)}
.process .step b{display:inline-flex;align-items:center;gap:8px}
.process .step b:before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid rgba(255,212,0,.5);transition:background .35s,box-shadow .35s,border-color .35s}
.process .step.fx-lit b:before{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,212,0,.15),0 0 14px rgba(255,212,0,.8)}
.process .step{transition:background .5s,transform .3s,border-color .3s,box-shadow .3s}
.process .step.fx-lit{background:linear-gradient(180deg,rgba(255,212,0,.06),#0a0c0f 55%)}

/* Números contando */
.fx-count{font-variant-numeric:tabular-nums}

/* Botões: ondulação ao clicar + ímã */
.btn,.wa,.assistant-type,.mobile-bar a,.shop-filter,.back-to-top{position:relative;overflow:hidden}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.55;background:currentColor;animation:fx-ripple .65s ease-out forwards}
.btn-primary .fx-ripple,.wa .fx-ripple,.mobile-bar a:first-child .fx-ripple{background:#fff}
@keyframes fx-ripple{to{transform:scale(1);opacity:0}}
.fx-magnet{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,color .2s,border-color .2s}
.btn-primary:hover{box-shadow:0 10px 30px rgba(255,212,0,.28),0 0 0 1px rgba(255,212,0,.5)}

/* Pulso no WhatsApp */
.wa,.mobile-bar a:first-child{animation:fx-pulse 2.8s ease-out infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(255,212,0,.55)}70%{box-shadow:0 0 0 12px rgba(255,212,0,0)}100%{box-shadow:0 0 0 0 rgba(255,212,0,0)}}

/* Seleção no atendimento guiado */
.assistant-type[aria-pressed="true"] svg{animation:fx-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes fx-pop{0%{transform:scale(.6) rotate(-12deg)}100%{transform:none}}
.assistant-type:active{transform:scale(.96)}

/* Luz que segue o mouse */
.fx-spotlight{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(255,212,0,.07),transparent 62%);opacity:0;transition:opacity .4s;will-change:transform}
.fx-spotlight.is-on{opacity:1}

/* Botão flutuante de WhatsApp com balão (computador) */
.fx-wa-float{position:fixed;right:22px;bottom:84px;z-index:36;display:flex;align-items:center;gap:10px;flex-direction:row-reverse}
.fx-wa-btn{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#080808;box-shadow:0 12px 30px rgba(0,0,0,.45);animation:fx-pulse 2.8s ease-out infinite,fx-float 4s ease-in-out infinite;transition:transform .25s}
.fx-wa-btn:hover{transform:scale(1.08) rotate(-6deg)}
.fx-wa-btn svg{width:28px;height:28px}
.fx-wa-bubble{position:relative;max-width:230px;padding:12px 34px 12px 14px;border-radius:14px 14px 4px 14px;background:#111318;border:1px solid rgba(255,212,0,.4);color:#eef0f2;font-size:13px;font-weight:700;line-height:1.35;box-shadow:0 14px 36px rgba(0,0,0,.45);opacity:0;transform:translateY(10px) scale(.92);transform-origin:right bottom;visibility:hidden;transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.5,1),visibility .35s}
.fx-wa-bubble.is-open{opacity:1;transform:none;visibility:visible}
.fx-wa-bubble b{color:var(--yellow)}
.fx-wa-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:#9aa0a8;cursor:pointer;font-size:16px;line-height:1}
.fx-wa-close:hover{color:#fff;background:rgba(255,255,255,.08)}
@keyframes fx-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media (max-width:900px){.fx-wa-float{display:none}}

/* Barra de progresso com brilho */
.scroll-progress{box-shadow:0 0 12px rgba(255,212,0,.7)}

/* Logo com brilho suave ao passar o mouse */
.brand img{transition:filter .3s,transform .3s}
.brand:hover img{filter:drop-shadow(0 0 10px rgba(255,212,0,.45));transform:scale(1.02)}

/* Movimento reduzido: tudo desligado */
@media (prefers-reduced-motion:reduce){
  html.fx-ready body,.fx-word,.hero h1>span,.page-hero h1>strong,.hero h1>span .fx-word,.page-hero h1>strong .fx-word,.hero-media,.fx-ticker-track,.wa,.mobile-bar a:first-child,.fx-wa-btn,.assistant-type[aria-pressed="true"] svg{animation:none!important}
  .fx-word{opacity:1;transform:none;filter:none}
  .hero h1>span,.page-hero h1>strong,.hero h1>span .fx-word,.page-hero h1>strong .fx-word{color:var(--yellow);background:none}
  .fx-network,.fx-spotlight{display:none}
  .process:before{transition:none}
  .fx-ticker-track{flex-wrap:wrap;width:auto}
  .fx-ticker-group[aria-hidden="true"]{display:none}
  .fx-ticker-group{display:flex;flex-wrap:wrap;justify-content:center;row-gap:8px}
}

/* Correção: alinhar o conteúdo do topo da home com o restante do site */
.hero-inner.container{width:min(1180px,calc(100% - 36px));margin-left:auto;margin-right:auto}
.hero h1>.fx-word{color:inherit;text-shadow:none}