/* MKT Canvas — runtime (frontend) */

.mktc-overlay{
  position:fixed;inset:0;z-index:99990;
  display:flex;align-items:center;justify-content:center;
  padding:20px;box-sizing:border-box;
  opacity:0;transition:opacity .25s ease;
}
.mktc-overlay.is-open{opacity:1}
.mktc-overlay[data-pos="top"]{align-items:flex-start}
.mktc-overlay[data-pos="bottom"]{align-items:flex-end}
.mktc-overlay[data-pos="top-left"]{align-items:flex-start;justify-content:flex-start}
.mktc-overlay[data-pos="top-right"]{align-items:flex-start;justify-content:flex-end}
.mktc-overlay[data-pos="bottom-left"]{align-items:flex-end;justify-content:flex-start}
.mktc-overlay[data-pos="bottom-right"]{align-items:flex-end;justify-content:flex-end}
.mktc-overlay .mktc-scrim{position:absolute;inset:0;cursor:pointer}

/* barra fixa */
.mktc-bar{
  position:fixed;left:0;right:0;z-index:99990;display:flex;justify-content:center;
  transform:translateY(-100%);transition:transform .3s ease;
}
.mktc-bar.is-open{transform:translateY(0)}
.mktc-bar[data-pos="bottom"]{bottom:0;top:auto;transform:translateY(100%)}
.mktc-bar[data-pos="bottom"].is-open{transform:translateY(0)}
.mktc-bar[data-pos="top"]{top:0}

/* fullscreen (welcome mat): fundo opaco cobrindo tudo */
.mktc-overlay.mktc-full .mktc-scrim{opacity:1!important}

/* slide-in (mensagem de canto) */
.mktc-slide{position:fixed;z-index:99990;padding:16px;box-sizing:border-box;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s ease;opacity:0}
.mktc-slide.is-open{opacity:1;transform:translate(0,0)!important}
.mktc-slide[data-pos="bottom-right"]{right:0;bottom:0;transform:translateX(110%)}
.mktc-slide[data-pos="bottom-left"]{left:0;bottom:0;transform:translateX(-110%)}
.mktc-slide[data-pos="top-right"]{right:0;top:0;transform:translateX(110%)}
.mktc-slide[data-pos="top-left"]{left:0;top:0;transform:translateX(-110%)}
.mktc-slide[data-pos="bottom"]{left:50%;bottom:0;transform:translate(-50%,110%)}
.mktc-slide[data-pos="bottom"].is-open{transform:translate(-50%,0)!important}
.mktc-slide[data-pos="top"]{left:50%;top:0;transform:translate(-50%,-110%)}
.mktc-slide[data-pos="top"].is-open{transform:translate(-50%,0)!important}
.mktc-slide .mktc-stage{box-shadow:0 12px 40px rgba(0,0,0,.24)}

/* palco (a peça em si) */
.mktc-stage{
  position:relative;overflow:hidden;box-sizing:border-box;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  transform-origin:top center;
}
.mktc-bar .mktc-stage{box-shadow:0 6px 24px rgba(0,0,0,.18);width:100%;border-radius:0!important}
.mktc-mount{display:block;margin:0 auto}
.mktc-mount .mktc-stage{box-shadow:0 8px 30px rgba(0,0,0,.12)}

/* elementos */
.mktc-el{position:absolute;box-sizing:border-box;transform-origin:center center}
.mktc-el.k-text{display:flex;align-items:center;line-height:1.25;white-space:pre-wrap;word-break:break-word}
.mktc-el.k-button{display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;font-weight:600;transition:transform .12s ease,filter .12s ease}
.mktc-el.k-button:hover{filter:brightness(1.05)}
.mktc-el.k-image img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.mktc-el.k-shape{}

/* botão fechar */
.mktc-close{
  position:absolute;top:8px;right:8px;z-index:5;
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.45);color:#fff;font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.mktc-close:hover{background:rgba(0,0,0,.65)}

/* botão de mudo */
.mktc-mute{
  position:absolute;top:8px;left:8px;z-index:5;
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.35);color:#fff;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.mktc-mute:hover{background:rgba(0,0,0,.55)}

/* ----- animações de entrada ----- */
@keyframes mktc-fade{from{opacity:0}to{opacity:1}}
@keyframes mktc-slide-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes mktc-slide-down{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:translateY(0)}}
@keyframes mktc-slide-left{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes mktc-slide-right{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes mktc-zoom-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes mktc-bounce-in{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes mktc-flip-in{from{opacity:0;transform:perspective(600px) rotateX(70deg)}to{opacity:1;transform:perspective(600px) rotateX(0)}}
@keyframes mktc-rotate-in{from{opacity:0;transform:rotate(-14deg) scale(.8)}to{opacity:1;transform:rotate(var(--mktc-rot,0deg)) scale(1)}}

.mktc-anim-fade{animation:mktc-fade .5s both}
.mktc-anim-slide-up{animation:mktc-slide-up .55s both cubic-bezier(.2,.7,.2,1)}
.mktc-anim-slide-down{animation:mktc-slide-down .55s both cubic-bezier(.2,.7,.2,1)}
.mktc-anim-slide-left{animation:mktc-slide-left .55s both cubic-bezier(.2,.7,.2,1)}
.mktc-anim-slide-right{animation:mktc-slide-right .55s both cubic-bezier(.2,.7,.2,1)}
.mktc-anim-zoom-in{animation:mktc-zoom-in .5s both cubic-bezier(.2,.7,.2,1)}
.mktc-anim-bounce-in{animation:mktc-bounce-in .7s both}
.mktc-anim-flip-in{animation:mktc-flip-in .6s both}
.mktc-anim-rotate-in{animation:mktc-rotate-in .6s both}

/* ----- animações de ênfase / loop ----- */
@keyframes mktc-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes mktc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mktc-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes mktc-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes mktc-glow{0%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 22px rgba(255,255,255,.55)}}

.mktc-loop-pulse{animation:mktc-pulse 1.8s ease-in-out infinite}
.mktc-loop-float{animation:mktc-float 3s ease-in-out infinite}
.mktc-loop-shake{animation:mktc-shake 2.4s ease-in-out infinite}
.mktc-loop-wobble{animation:mktc-wobble 2.6s ease-in-out infinite}
.mktc-loop-glow{animation:mktc-glow 2s ease-in-out infinite}

/* disparo pontual (interação) — roda 1x */
.mktc-once-pulse{animation:mktc-pulse .5s ease-in-out 1}
.mktc-once-float{animation:mktc-float .6s ease-in-out 1}
.mktc-once-shake{animation:mktc-shake .5s ease-in-out 1}
.mktc-once-wobble{animation:mktc-wobble .5s ease-in-out 1}
.mktc-once-glow{animation:mktc-glow .6s ease-in-out 1}

.mktc-hidden{display:none!important}
.mktc-scene-off{display:none!important}
.mktc-badge{position:absolute;right:6px;bottom:5px;z-index:6;font-size:10px;line-height:1.4;padding:2px 7px;border-radius:6px;
  color:rgba(20,20,30,.5);background:rgba(255,255,255,.7);text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  backdrop-filter:saturate(140%) blur(2px);-webkit-backdrop-filter:saturate(140%) blur(2px)}
a.mktc-badge:hover{color:rgba(20,20,30,.8)}

/* acessibilidade: foco visível */
.mktc-el:focus-visible,.mktc-close:focus-visible,.mktc-mute:focus-visible,
.mktc-form-input:focus-visible,.mktc-form-btn:focus-visible,.mktc-quiz-opt:focus-visible,
.mktc-wheel-btn:focus-visible,.mktc-stage:focus-visible{
  outline:3px solid #4c6ef5;outline-offset:2px;border-radius:4px
}
.mktc-stage:focus{outline:none}
.mktc-stage:focus-visible{outline:3px solid #4c6ef5}

/* ----- roleta ----- */
.mktc-wheel{display:flex;align-items:center;justify-content:center}
.mktc-wheel-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  border:none;border-radius:999px;cursor:pointer;font-weight:700;font-size:13px;
  padding:9px 14px;background:#191a22;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.3);
  max-width:34%;line-height:1.05}
.mktc-wheel-btn:hover:not(:disabled){filter:brightness(1.12)}
.mktc-wheel-btn:disabled{opacity:.5;cursor:default}
.mktc-wheel-result{
  position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;
  background:rgba(255,255,255,.96);border-radius:inherit;opacity:0;transition:opacity .3s ease}
.mktc-wheel-result.is-open{opacity:1}
.mktc-wheel-rtitle{font-size:20px;font-weight:800;color:#191a22}
.mktc-wheel-rprize{font-size:16px;font-weight:600;color:#e8425c;
  background:#fbe7eb;border:1px dashed #e8425c;border-radius:8px;padding:6px 12px}
.mktc-wheel-rclose{position:absolute;top:8px;right:10px;border:none;background:transparent;
  font-size:22px;line-height:1;color:#6a6b7a;cursor:pointer}
.mktc-wheel-rclose:hover{color:#191a22}
@media (prefers-reduced-motion:reduce){
  .mktc-wheel-rot{transition:transform 1s ease-out!important}
}

/* ----- formulário ----- */
.mktc-form{width:100%;height:100%;box-sizing:border-box;padding:14px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.mktc-form-input{width:100%;box-sizing:border-box;border:1px solid rgba(0,0,0,.18);padding:10px 12px;font-size:14px;background:#fff;color:#111}
.mktc-form-input:focus{outline:2px solid rgba(87,79,224,.4);outline-offset:1px}
.mktc-form-btn{width:100%;border:none;color:#fff;font-weight:700;font-size:15px;padding:11px;cursor:pointer;transition:filter .12s ease}
.mktc-form-btn:hover:not(:disabled){filter:brightness(1.07)}
.mktc-form-btn:disabled{opacity:.6;cursor:default}
.mktc-form-msg{font-size:13px;min-height:1em;text-align:center}
.mktc-form-msg.ok{color:#0e9c6a;font-weight:600;font-size:15px}
.mktc-form-msg.err{color:#c0392b}
.mktc-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

/* ----- countdown ----- */
.mktc-cd{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.mktc-cd-box{display:flex;flex-direction:column;align-items:center;min-width:48px}
.mktc-cd-num{font-size:32px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.mktc-cd-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-top:4px}
.mktc-cd-exp{font-size:22px;font-weight:800}

/* ----- raspadinha ----- */
.mktc-scratch-prize{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px;font-weight:800;font-size:20px}
.mktc-scratch-cv{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
.mktc-scratch-cv:active{cursor:grabbing}

/* ----- quiz ----- */
.mktc-quiz{width:100%;height:100%;box-sizing:border-box;padding:14px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.mktc-quiz-prog{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.6;font-weight:600}
.mktc-quiz-q{font-size:18px;font-weight:700;margin-bottom:4px}
.mktc-quiz-opt{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid;border-radius:9px;
  padding:10px 12px;font-size:14px;cursor:pointer;color:inherit;transition:background .12s ease,transform .1s ease}
.mktc-quiz-opt:hover{background:rgba(87,79,224,.07);transform:translateX(2px)}
.mktc-quiz-rtitle{font-size:22px;font-weight:800}
.mktc-quiz-rtext{font-size:14px;opacity:.85;margin-top:6px}

/* ----- vídeo ----- */
.mktc-video{border-radius:inherit}

/* ----- vitrine de produtos ----- */
.mktc-products{width:100%;height:100%;display:grid;gap:8px;padding:8px;box-sizing:border-box;overflow:auto}
.mktc-product{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;
  border:1px solid rgba(0,0,0,.08);border-radius:8px;overflow:hidden}
.mktc-product-img{width:100%;aspect-ratio:1/1;background:#f0f0f3 center/cover no-repeat}
.mktc-product-name{font-size:12px;font-weight:600;padding:6px 8px 0;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mktc-product-price{font-size:12px;padding:2px 8px 8px;opacity:.8}
.mktc-products-empty{grid-column:1/-1;text-align:center;color:#888;font-size:13px;padding:20px}

@media (prefers-reduced-motion:reduce){
  .mktc-overlay,.mktc-bar,.mktc-stage,.mktc-el,[class*="mktc-anim-"],[class*="mktc-loop-"],[class*="mktc-once-"]{
    animation:none!important;transition:opacity .2s ease!important;transform:none!important;
  }
}