/* =========================================================
   depaulo Kit de Efeitos 1.0.0
   Regra de ouro: este arquivo SÓ mexe em elementos com classes dpk-.
   Não altera body, títulos, links, botões nem nada do tema.
   Para trocar cores: Configurações > Kit de Efeitos, ou sobrescreva as variáveis.
   ========================================================= */

:root{
  --dpk-accent:#ff7a59;
  --dpk-accent2:#ffc15e;
  --dpk-violet:#8b7cff;
  --dpk-grad:linear-gradient(105deg,var(--dpk-accent2),var(--dpk-accent) 55%,var(--dpk-violet));
  --dpk-ease:cubic-bezier(.22,1,.36,1);
  --dpk-linha:#ffffff1f;
  --dpk-luz:#ffc15e26;
}

.dpk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 1. ENTRADA AO ROLAR: classe dpk-reveal ---------- */
/* Só esconde quando o JavaScript do kit está ligado (html.dpk-js). */
.dpk-reveal{transition:opacity .7s var(--dpk-ease),translate .7s var(--dpk-ease)}
.dpk-js .dpk-reveal:not(.dpk-in){opacity:0;translate:0 14px}

/* Rede de segurança: se o JS do kit não iniciar em 3 s, mostra tudo. */
@keyframes dpk-fb{to{opacity:1;translate:0 0}}
html.dpk-js:not(.dpk-ok) .dpk-reveal:not(.dpk-in),
html.dpk-js:not(.dpk-ok) .dpk-split:not(.dpk-pronto){animation:dpk-fb 0s 3s forwards}

/* ---------- 2. TÍTULO PALAVRA POR PALAVRA: classe dpk-split ---------- */
.dpk-js .dpk-split:not(.dpk-pronto){opacity:0}
.dpk-w{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.dpk-wt{display:inline-block;transform-origin:0 100%}
.dpk-ac .dpk-wt{background:var(--dpk-grad);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.dpk-js .dpk-split.dpk-pronto:not(.dpk-in) .dpk-wt{opacity:0;transform:translateY(110%) rotate(10deg)}
.dpk-split.dpk-in .dpk-wt{animation:dpk-palavra .8s var(--dpk-ease) calc(var(--dpk-i)*75ms) both}
@keyframes dpk-palavra{from{opacity:0;transform:translateY(110%) rotate(10deg)}to{opacity:1;transform:none}}

/* ---------- 3. LUZ QUE SEGUE O MOUSE: classe dpk-spot ---------- */
.dpk-spot{position:relative}
.dpk-spot::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .3s;background:radial-gradient(230px circle at var(--dpk-x,50%) var(--dpk-y,50%),var(--dpk-luz),transparent 70%)}
.dpk-spot:hover::after{opacity:1}

/* ---------- 4. NÚMERO EM ODÔMETRO: classe dpk-contador ---------- */
.dpk-contador{font-variant-numeric:tabular-nums}
.dpk-cnt{display:inline-flex;align-items:flex-start}
.dpk-cnt-dig{display:inline-block;height:1em;overflow:hidden;line-height:1}
.dpk-cnt-fita{display:flex;flex-direction:column;transition:transform 1.8s var(--dpk-ease)}
.dpk-cnt-fita i{display:block;height:1em;font-style:normal;line-height:1}
.dpk-contador.dpk-rodando .dpk-cnt-fita{transform:translateY(var(--dpk-fim))}

/* ---------- 5. FAIXA QUE CORRE: classe dpk-faixa ---------- */
.dpk-faixa{overflow:clip!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.dpk-faixa-trilho{display:flex;flex:0 0 auto;width:max-content;animation:dpk-corre var(--dpk-faixa-tempo,40s) linear infinite}
.dpk-faixa:not(.dpk-vis) .dpk-faixa-trilho{animation-play-state:paused}
.dpk-faixa-grupo{display:flex;flex:0 0 auto;align-items:center;gap:var(--dpk-faixa-gap,48px);padding-right:var(--dpk-faixa-gap,48px)}
.dpk-faixa-grupo>*{flex:0 0 auto;width:auto!important;max-width:none!important;white-space:nowrap}
@keyframes dpk-corre{to{transform:translateX(-50%)}}

/* ---------- 6. CABEÇALHO DE VIDRO: classe dpk-vidro ---------- */
.dpk-vidro{position:relative;isolation:isolate}
.dpk-vidro::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--dpk-vidro-bg,linear-gradient(145deg,#1b1838c4,#0b0a14b3));
  -webkit-backdrop-filter:blur(var(--dpk-vidro-blur,16px)) saturate(1.2);backdrop-filter:blur(var(--dpk-vidro-blur,16px)) saturate(1.2)}

/* ---------- 7. BOTÃO COM BRILHO QUE PASSA: classe dpk-brilho ---------- */
.dpk-brilho .elementor-button,.dpk-brilho.elementor-button,a.dpk-brilho,button.dpk-brilho{position:relative;overflow:hidden}
.dpk-brilho .elementor-button::after,.dpk-brilho.elementor-button::after,a.dpk-brilho::after,button.dpk-brilho::after{
  content:"";position:absolute;inset:-20% auto -20% -70%;width:50%;pointer-events:none;
  background:linear-gradient(90deg,transparent,#ffffffb0,transparent);transform:skew(-20deg)}
.dpk-brilho .elementor-button:hover::after,.dpk-brilho.elementor-button:hover::after,a.dpk-brilho:hover::after,button.dpk-brilho:hover::after,
.dpk-brilho .elementor-button:focus-visible::after,a.dpk-brilho:focus-visible::after{animation:dpk-passa .7s ease}
@keyframes dpk-passa{to{left:130%}}

/* ---------- 8. PROFUNDIDADE NA ROLAGEM: dpk-profundo (+ -leve ou -forte) ---------- */
/* Não combine com dpk-reveal no MESMO elemento (os dois usam "translate"). Use um dentro do outro. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:768px){
    .dpk-profundo{animation:dpk-fundo linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .dpk-profundo-leve{--dpk-prof:20px}
    .dpk-profundo-forte{--dpk-prof:90px}
    @keyframes dpk-fundo{from{translate:0 var(--dpk-prof,40px)}to{translate:0 calc(var(--dpk-prof,40px)*-1)}}
  }
}

/* ---------- 9. HISTÓRIA FIXA: dpk-historia com filhos dpk-painel ---------- */
.dpk-pontos{display:none}
/* A altura vai no elemento que CONTÉM o palco (o sticky só anda dentro do pai dele). */
.dpk-raiz-on{height:calc(100vh + (var(--dpk-n) - 1)*90vh + 30vh)}
.dpk-historia.dpk-fixa .dpk-palco{position:sticky;top:0;width:100%;height:100vh;display:grid;align-items:center;padding-top:var(--dpk-topo,0px);box-sizing:border-box}
.dpk-historia.dpk-fixa .dpk-painel{grid-area:1/1;width:100%;box-sizing:border-box;opacity:0;pointer-events:none;translate:0 14px;
  transition:opacity .6s var(--dpk-ease),translate .6s var(--dpk-ease)}
.dpk-historia.dpk-fixa .dpk-painel.dpk-ativo{opacity:1;pointer-events:auto;translate:0 0}
.dpk-historia.dpk-fixa .dpk-pontos{display:flex;flex-direction:column;gap:12px;position:absolute;right:20px;top:50%;translate:0 -50%;z-index:3}
.dpk-pontos button{width:10px;height:10px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--dpk-ponto,#ffffff40);cursor:pointer;
  transition:background .3s,scale .3s var(--dpk-ease)}
.dpk-pontos button[aria-current=step]{background:var(--dpk-accent);scale:1.6}

/* ---------- 10. ANTES E DEPOIS: shortcode [dpk_antes_depois] ---------- */
.dpk-comp{--dpk-p:50%;position:relative;overflow:clip;border-radius:var(--dpk-raio,20px);line-height:0}
.dpk-comp img{display:block;width:100%;height:auto;max-width:none}
.dpk-comp .dpk-comp-topo{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--dpk-p)) 0 0)}
.dpk-rot{position:absolute;bottom:12px;z-index:2;padding:5px 12px;border-radius:999px;font:500 13px/1.4 system-ui,sans-serif;color:#fff;background:#000a}
.dpk-rot.e{left:12px}
.dpk-rot.d{right:12px}
.dpk-divisor{position:absolute;top:0;bottom:0;left:var(--dpk-p);z-index:3;width:2px;translate:-1px 0;background:#fff;box-shadow:0 0 14px #fff9;pointer-events:none}
.dpk-divisor::after{content:"\2194";position:absolute;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;background:#fff;color:#14122b;font:400 20px/1 system-ui,sans-serif}
.dpk-comp input{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.dpk-comp:focus-within{outline:2px solid var(--dpk-accent2);outline-offset:4px}

/* ---------- 11. REDUZIR MOVIMENTO: desliga tudo do kit ---------- */
@media (prefers-reduced-motion:reduce){
  [class*="dpk-"],[class*="dpk-"]::before,[class*="dpk-"]::after{animation:none!important;transition:none!important}
}