/* ---------- vitrine: telas de sistema que se montam com a rolagem ---------- */
.vitrine{display:grid;gap:16px}
@media (min-width:768px){.vitrine{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vitrine .v{margin:0;border:1px solid var(--linha);border-radius:6px;overflow:hidden;background:var(--branco)}
.escuro .vitrine .v{border-color:var(--linha-e);background:var(--grafite)}
.vitrine .t{padding:16px 20px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vitrine .t b{font-size:17px;font-weight:600}
.vitrine .t .rot{white-space:nowrap}

.app{--a-bg:#121211;--a-pn:#1c1c1a;--a-ln:#2f302b;--a-tx:#ecece6;--a-mu:#8d8f84;--a-v:#b5cc18;--a-er:#e06a48;--a-am:#d4a017;--a-az:#7aa2c8;
  container-type:inline-size;aspect-ratio:16/9;background:var(--a-bg);color:var(--a-tx);overflow:hidden;position:relative;font-family:var(--t)}
.app .in{position:absolute;inset:0;display:flex;flex-direction:column;font-size:1.9cqw;line-height:1.3}
.app .tb{display:flex;align-items:center;gap:.5em;height:2.6em;flex:none;padding:0 1em;border-bottom:1px solid var(--a-ln);color:var(--a-mu)}
.app .tb i{width:.65em;height:.65em;border-radius:50%;background:var(--a-ln)}
.app .tb span{margin-left:.6em;font-family:var(--m);font-size:.85em}
.app .tb em{margin-left:auto;font-style:normal;font-family:var(--m);font-size:.8em;color:var(--a-v);display:flex;align-items:center;gap:.45em}
.app .tb em::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--a-v);animation:t-pisca 1.6s infinite}
.app .ar{flex:1;display:grid;gap:.7em;padding:.9em;min-height:0}
.app .ar2{display:grid;gap:.7em;min-height:0}
.app .pn{background:var(--a-pn);border:1px solid var(--a-ln);border-radius:.45em;padding:.7em .8em;min-width:0;min-height:0;position:relative;overflow:hidden}
.app .col{display:flex;flex-direction:column;gap:.45em}
.app .ro{font-family:var(--m);font-size:.68em;color:var(--a-mu);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .nu{font-size:1.6em;font-weight:600;line-height:1.15;white-space:nowrap}
.app .nu.gr{color:var(--a-v)}.app .nu.am{color:var(--a-am)}
.app .mu{color:var(--a-mu);font-size:.8em}
.app .ln{display:block;height:.5em;border-radius:.3em;background:var(--a-ln);width:var(--w,80%);flex:none}
.app .pl{font-family:var(--m);font-size:.66em;padding:.25em .65em;border-radius:1em;background:rgba(181,204,24,.14);color:var(--a-v);white-space:nowrap}
.app .pl.er{background:rgba(224,106,72,.16);color:var(--a-er)}.app .pl.pa{background:rgba(141,143,132,.16);color:var(--a-mu)}
.app .pl.fi{background:rgba(122,162,200,.16);color:var(--a-az)}.app .pl.am{background:rgba(212,160,23,.16);color:var(--a-am)}
.app .pl.alerta{animation:t-alerta 1.2s ease-in-out infinite}
.app .tr{display:flex;align-items:center;gap:.6em;font-size:.82em;padding:.35em 0;border-bottom:1px solid var(--a-ln);min-width:0}
.app .tr:last-child{border-bottom:0}
.app .tr > span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .tr em{font-style:normal;font-family:var(--m);font-size:.9em;color:var(--a-mu)}
.app .resumo{display:flex;align-items:center;gap:.8em;font-size:.82em}
.app .dest{margin:0;font-size:1em;font-weight:600;color:var(--a-v)}
.app .leg{display:flex;gap:.4em .9em;flex-wrap:wrap;font-size:.72em;color:var(--a-mu)}
.app .leg span{display:flex;align-items:center;gap:.4em}
.app .leg s{width:.8em;height:.8em;border-radius:.15em;display:inline-block}

/* barras verticais e horizontais */
.app .bs{flex:1;display:flex;align-items:flex-end;gap:3%;min-height:0;margin-top:.4em}
.app .bs b{flex:1;height:var(--h);transform-origin:bottom}
.app .bs b i{display:block;height:100%;background:var(--a-v);border-radius:.2em .2em 0 0;transform-origin:bottom;animation:t-respira 2.6s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -.37s)}
.app .bs b:nth-child(odd) i{opacity:.75}
.app .hb{display:grid;grid-template-columns:5.6em minmax(0,1fr) auto;align-items:center;gap:.6em;font-size:.78em}
.app .hb span{color:var(--a-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .hb u,.app .fila u,.app .trilha u{display:block;height:.6em;background:var(--a-ln);border-radius:.3em;overflow:hidden;text-decoration:none}
.app .hb b,.app .fila i,.app .trilha i{display:block;height:100%;width:var(--w);background:var(--c,var(--a-v));border-radius:.3em;transform-origin:left}
.app .hb em{font-style:normal;font-family:var(--m);font-size:.9em}

/* mídia */
.app .sd{display:flex;flex-direction:column;align-items:center;gap:.9em;padding-top:.3em;border-right:1px solid var(--a-ln);margin:-.9em 0 -.9em -.9em;padding:.9em .5em}
.app .sd s{width:1.4em;height:1.4em;border-radius:.35em;background:var(--a-ln)}
.app .sd s.on{background:var(--a-v)}
.app .tab{padding:.2em .8em}

/* comando */
.app .cmd{display:flex;align-items:center;gap:.6em;font-family:var(--m);font-size:.95em;padding:.8em 1em;border-color:var(--a-v)}
.app .cmd .sinal{color:var(--a-v);font-weight:700}
.app .digita{display:inline-block;overflow:hidden;white-space:nowrap;width:0;max-width:max-content;animation:t-digita 7s steps(41) infinite}
.app .cursor{width:.55em;height:1.1em;background:var(--a-v);animation:t-pisca 1s steps(1) infinite}

/* relatório */
.app .spark{flex:1;min-height:0}.app .spark svg{width:100%;height:100%}
.app .donut{width:58%;aspect-ratio:1;border-radius:50%;margin:.2em auto;background:conic-gradient(var(--a-v) 0 46%,var(--a-az) 0 74%,var(--a-am) 0 88%,var(--a-ln) 0);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 55%);mask:radial-gradient(circle,transparent 54%,#000 55%)}

/* svg em geral */
.app svg{display:block;width:100%;height:100%;overflow:visible}
.app .pt{fill:none;stroke:var(--a-v);stroke-width:1.4;stroke-dasharray:1;stroke-linecap:round;stroke-linejoin:round}
.app .ps{transform-box:fill-box;transform-origin:center}
.app .grafo .arestas .pt{stroke:var(--a-mu);stroke-width:.5}
.app .grafo .nucleo .pt{stroke:var(--a-v);stroke-width:1}
.app .grafo .nos circle{fill:#55574f}
.app .grafo .nos.nucleo circle{fill:var(--a-v)}
.app .grafo .onda{fill:none;stroke:var(--a-v);stroke-width:.6;transform-box:fill-box;transform-origin:center;animation:t-onda 2.4s ease-out infinite}
.app .grafico{flex:1;min-height:0}
.app .grafico .grade{stroke:var(--a-ln);stroke-width:1;vector-effect:non-scaling-stroke}
.app .grafico .area{fill:rgba(181,204,24,.12);transform-origin:bottom}
.app .grafico .pico{fill:var(--a-er);transform-box:fill-box;transform-origin:center;animation:t-onda2 1.4s ease-out infinite}
.app .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em}

/* linha do tempo */
.app .linha-t{padding:0}
.app .linha-t .eixo{position:absolute;left:3%;right:3%;top:50%;height:2px;background:var(--a-v);transform-origin:left}
.app .linha-t .hora{position:absolute;top:calc(50% + .5em);font-family:var(--m);font-size:.6em;color:var(--a-mu);transform:translateX(-50%)}
.app .ev{position:absolute;width:19%;display:flex;flex-direction:column;gap:.3em;align-items:flex-start;font-size:.72em}
.app .ev b{font-weight:500;line-height:1.25}
.app .ev::after{content:"";position:absolute;left:.6em;width:1px;background:var(--a-mu)}
.app .ev.cima{bottom:calc(50% + .9em)}.app .ev.cima::after{top:100%;height:.9em}
.app .ev.baixo{top:calc(50% + 2.2em)}.app .ev.baixo::after{bottom:100%;height:2.2em}

/* mapa */
.app .mapa-t{padding:.4em}
.app .rs .contorno{stroke:var(--a-v);stroke-width:1.2}
.app .rs rect.n0{fill:#2f3a1f}.app .rs rect.n1{fill:#4f6216}.app .rs rect.n2{fill:#86991a}.app .rs rect.n3{fill:#c9de2a}
.app .leg s.n0{background:#2f3a1f}.app .leg s.n1{background:#4f6216}.app .leg s.n2{background:#86991a}.app .leg s.n3{background:#c9de2a}
.app .leg.col{flex-direction:column}
.app .pin{position:absolute;width:1em;height:1em;margin:-1em 0 0 -.5em;background:var(--a-er);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.app .pin::after{content:"";position:absolute;inset:-60%;border:1px solid var(--a-er);border-radius:50%;animation:t-onda2 1.8s ease-out infinite}
.app .equipe{position:absolute;width:.8em;height:.8em;border-radius:50%;background:var(--a-az);box-shadow:0 0 0 .3em rgba(122,162,200,.3);animation:t-ronda 9s ease-in-out infinite}

/* gabinete */
.app .ag{display:flex;gap:.6em;font-size:.78em;padding:.4em .5em;border-left:2px solid var(--a-ln);border-radius:0 .3em .3em 0}
.app .ag em{font-style:normal;font-family:var(--m);color:var(--a-mu)}
.app .ag.on{border-color:var(--a-v);background:rgba(181,204,24,.08)}
.app .kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em;min-height:0}
.app .colk{background:var(--a-pn);border:1px solid var(--a-ln);border-radius:.45em;padding:.6em;display:flex;flex-direction:column;gap:.5em;position:relative;min-width:0}
.app .cartao{background:#262622;border-radius:.35em;padding:.5em;display:flex;flex-direction:column;gap:.35em;align-items:flex-start}
.app .cartao.ok{opacity:.65}
.app .cartao.viaja{position:absolute;left:.6em;right:.6em;bottom:.6em;z-index:2;box-shadow:0 .6em 1.4em rgba(0,0,0,.45);animation:t-viaja 8s ease-in-out infinite}
.app .processo{display:flex;align-items:center;gap:1em}
.app .etapas{flex:1;display:flex;gap:.4em}
.app .etapas s{flex:1;height:.55em;border-radius:.3em;background:var(--a-ln);transform-origin:left}
.app .etapas s.feito{background:var(--a-v)}.app .etapas s.atual{background:var(--a-am);animation:t-pisca 1.4s infinite}

/* atendimento */
.app .fila{display:grid;grid-template-columns:1fr auto;gap:.25em .5em;font-size:.78em}
.app .fila b{font-family:var(--m)}.app .fila u{grid-column:1/3}
.app .conversa{display:flex;flex-direction:column;gap:.5em;justify-content:flex-end}
.app .bal{max-width:82%;font-size:.76em;padding:.5em .7em;border-radius:.7em;line-height:1.3}
.app .bal.ent{background:#2a2b26;border-bottom-left-radius:.15em;align-self:flex-start}
.app .bal.sai{background:rgba(181,204,24,.18);color:#e5f0a0;border-bottom-right-radius:.15em;align-self:flex-end}
.app .digitando{display:flex;gap:.3em;padding:.7em .8em}
.app .digitando i{width:.45em;height:.45em;border-radius:50%;background:var(--a-v);animation:t-pula 1.2s infinite}
.app .digitando i:nth-child(2){animation-delay:.15s}.app .digitando i:nth-child(3){animation-delay:.3s}

/* formação */
.app .trilha{display:flex;flex-direction:column;gap:.35em;font-size:.8em;padding:.3em 0}
.app .mods{display:flex;gap:.4em}
.app .mods s{width:1.1em;height:1.1em;border-radius:50%;border:1.5px solid var(--a-ln)}
.app .mods s.f{background:var(--a-v);border-color:var(--a-v)}
.app .aula{aspect-ratio:16/9;background:linear-gradient(135deg,#2a2b26,#1f201c);border-radius:.4em;position:relative;display:grid;place-items:center;flex:none}
.app .aula .play{width:0;height:0;border-left:1.2em solid var(--a-v);border-top:.75em solid transparent;border-bottom:.75em solid transparent;margin-left:.3em}
.app .aula u{position:absolute;left:.6em;right:.6em;bottom:.6em;height:.3em;background:var(--a-ln);border-radius:.2em;overflow:hidden}
.app .aula u i{display:block;height:100%;background:var(--a-v);animation:t-assiste 10s linear infinite}
.app .selo{margin-top:auto;display:flex;align-items:center;gap:.5em;font-size:.8em;color:var(--a-v)}
.app .selo span{width:1.6em;height:1.6em;border-radius:50%;background:var(--a-v);color:var(--a-bg);display:grid;place-items:center;font-weight:700}

/* migração */
.app .amb .srv{display:block;height:1.3em;border-radius:.25em;background:repeating-linear-gradient(90deg,#2a2b26 0 70%,#3a3b35 70% 72%,#2a2b26 72%);position:relative}
.app .amb .srv::after{content:"";position:absolute;right:.5em;top:50%;width:.45em;height:.45em;margin-top:-.225em;border-radius:50%;background:var(--a-mu);animation:t-pisca 1.1s infinite}
.app .amb.novo .srv::after{background:var(--a-v)}
.app .amb .pl{align-self:flex-start;margin-top:auto}
.app .fluxo{position:relative;display:flex;align-items:center;justify-content:center}
.app .fluxo::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--a-ln)}
.app .fluxo i{position:absolute;left:0;top:50%;width:.7em;height:.7em;margin-top:-.35em;border-radius:50%;background:var(--a-v);animation:t-flui 2.5s linear infinite}
.app .fluxo i:nth-child(2){animation-delay:-.5s}.app .fluxo i:nth-child(3){animation-delay:-1s}.app .fluxo i:nth-child(4){animation-delay:-1.5s}.app .fluxo i:nth-child(5){animation-delay:-2s}
.app .fluxo .ro{position:absolute;top:calc(50% + .8em)}
.app .virada{display:flex;flex-direction:column;gap:.5em}
.app .virada u{display:block;height:.8em;background:var(--a-ln);border-radius:.4em;overflow:hidden}
.app .virada u i{display:block;height:100%;background:var(--a-v);animation:t-virada 9s ease-in-out infinite}
.app .chk{display:flex;flex-wrap:wrap;gap:.3em 1.2em;font-size:.74em;color:var(--a-v)}

/* radar */
.app .radar .anel{stroke:#45463f;stroke-width:.4}
.app .radar .antes{fill:rgba(141,143,132,.3);stroke:var(--a-mu);stroke-width:.6}
.app .radar .depois{fill:rgba(181,204,24,.22);stroke:var(--a-v);stroke-width:.8}
.app .radar text{fill:var(--a-mu);font-family:var(--m);font-size:4.4px;text-anchor:middle}
.app .dupla{display:flex;gap:1.4em}

/* ---------- movimentos que continuam depois da tela montada ---------- */
@keyframes t-pisca{50%{opacity:.25}}
@keyframes t-alerta{50%{box-shadow:0 0 0 .3em rgba(224,106,72,.25)}}
@keyframes t-respira{from{transform:scaleY(.8)}to{transform:none}}
@keyframes t-digita{0%{width:0}45%,85%{width:41ch}100%{width:41ch;opacity:0}}
@keyframes t-onda{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes t-onda2{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
@keyframes t-ronda{0%,100%{transform:translate(0,0)}33%{transform:translate(4em,-2.5em)}66%{transform:translate(2em,3em)}}
@keyframes t-viaja{0%,15%{transform:translateX(0);opacity:0}20%{opacity:1}45%,60%{transform:translateX(calc(100% + 1.8em));opacity:1}85%,100%{transform:translateX(calc(200% + 3.6em));opacity:0}}
@keyframes t-pula{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-.35em);opacity:1}}
@keyframes t-assiste{from{width:0}to{width:100%}}
@keyframes t-flui{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% - .7em);opacity:0}}
@keyframes t-virada{0%,10%{width:4%}70%,100%{width:100%}}

/* ---------- montagem: cada peça entra na ordem --i ---------- */
@keyframes t-monta{from{opacity:0;transform:translateY(1.4em) scale(.95)}to{opacity:1;transform:none}}
@keyframes t-cresce{from{transform:scaleY(0)}to{transform:none}}
@keyframes t-estica{from{transform:scaleX(0)}to{transform:none}}
@keyframes t-traca{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes t-surge{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes t-gira{from{opacity:0;transform:rotate(-120deg) scale(.5)}to{opacity:1;transform:none}}

/* telas da vitrine: montagem por tempo, reiniciada a cada volta do comercial (classe .roda posta pelo JS) */
.js .app :is(.p,.pc,.px,.pt,.ps,.gira){animation-duration:.75s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both;
  animation-delay:calc(var(--i,0) * 75ms);animation-play-state:paused}
.js .app.roda :is(.p,.pc,.px,.pt,.ps,.gira){animation-play-state:running}
.js .app.zera :is(.p,.pc,.px,.pt,.ps,.gira){animation-name:none!important}
.js .app .p{animation-name:t-monta}
.js .app .pc{animation-name:t-cresce}
.js .app .px{animation-name:t-estica}
.js .app .pt{animation-name:t-traca}
.js .app .ps{animation-name:t-surge}
.js .app .gira{animation-name:t-gira}

/* diagrama: monta conforme a rolagem e desmonta ao subir */
@supports (animation-timeline: view()){
  .diag{view-timeline:--tela block}
  .diag :is(.p,.pc,.px,.pt,.ps,.gira){animation-duration:auto;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:both;
    animation-timeline:--tela;animation-range:entry calc(var(--i,0) * 4%) cover calc(16% + var(--i,0) * 2.4%)}
  .diag .p{animation-name:t-monta}
  .diag .pt{animation-name:t-traca}
  .diag .ps{animation-name:t-surge}
}
@supports not (animation-timeline: view()){
  .diag :is(.p,.ps){transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
  .diag .pt{transition:stroke-dashoffset 1.2s ease;transition-delay:calc(var(--i,0) * 90ms)}
  .js .rv:not(.ok) .diag .p,.js .diag.rv:not(.ok) .p{opacity:0;transform:translateY(1.4em) scale(.95)}
  .js .rv:not(.ok) .diag .ps,.js .diag.rv:not(.ok) .ps{opacity:0;transform:scale(0)}
  .js .rv:not(.ok) .diag .pt,.js .diag.rv:not(.ok) .pt{stroke-dashoffset:1}
}
@media (prefers-reduced-motion:reduce){
  :is(.app,.diag) *,:is(.app,.diag) *::before,:is(.app,.diag) *::after{animation:none!important;transition:none!important}
  :is(.app,.diag) :is(.p,.pc,.px,.ps,.gira){opacity:1!important;transform:none!important}
  :is(.app,.diag) .pt{stroke-dashoffset:0!important}
  .app .digita{width:auto}
  .app .cena{display:none!important}
}

/* ==========================================================================
   Comercial em loop dentro de cada tela: abertura, montagem, câmera com zoom,
   destaque, cursor, legendas, notificação e cartão final. Movido pelo comercial.js
   ========================================================================== */
.app .in{transform-origin:0 0;will-change:transform}
.app .in.cam{transition:transform 1.2s cubic-bezier(.7,0,.15,1)}
.app .foco{position:absolute;z-index:5;border-radius:.55em;pointer-events:none;opacity:0;
  box-shadow:0 0 0 .16em var(--a-v),0 0 2.2em .2em rgba(181,204,24,.35),0 0 0 300em rgba(6,6,5,.66);
  transition:left 1.2s cubic-bezier(.7,0,.15,1),top 1.2s cubic-bezier(.7,0,.15,1),width 1.2s cubic-bezier(.7,0,.15,1),height 1.2s cubic-bezier(.7,0,.15,1),opacity .6s}
.app .foco.ve{opacity:1}
.app .cena{position:absolute;pointer-events:none;z-index:10}
/* abertura com título grande */
.app .abre{inset:0;background:#0b0b0a;display:flex;flex-direction:column;justify-content:center;gap:1.4cqw;padding:0 7cqw;overflow:hidden;
  clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.75,0,.15,1)}
.app .abre::before{content:"";position:absolute;inset:-20%;background-image:linear-gradient(rgba(181,204,24,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(181,204,24,.09) 1px,transparent 1px);
  background-size:6cqw 6cqw;transform:perspective(60cqw) rotateX(55deg) translateY(0);transform-origin:50% 100%;animation:c-chao 3s linear infinite}
.app .abre::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1.2cqw;background:var(--a-v);transform:scaleY(0);transform-origin:top;transition:transform .8s cubic-bezier(.7,0,.2,1) .1s}
.app .abre.vai::after{transform:none}
.app .abre.sai{clip-path:inset(0 0 0 100%)}
.app .abre .k{position:relative;font-family:var(--m);font-size:1.55cqw;letter-spacing:.14em;color:var(--a-v);text-transform:uppercase;opacity:0;transform:translateY(1cqw);transition:all .6s .15s}
.app .abre.vai .k{opacity:1;transform:none}
.app .abre b{position:relative;font-size:6.6cqw;line-height:1.02;font-weight:600;letter-spacing:-.035em;color:#fff}
.app .abre b em{font-style:normal;color:var(--a-v)}
.app .cena .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.app .cena .w > span{display:inline-block;transform:translateY(115%);transition:transform .75s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k) * 70ms + .2s)}
.app .vai .w > span,.app .ve .w > span{transform:none}
/* legenda de cada cena */
.app .legenda{left:3cqw;bottom:3.2cqw;max-width:62%;display:flex;flex-direction:column;gap:.5cqw;opacity:0;transform:translateY(2cqw);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.app .legenda.ve{opacity:1;transform:none}
.app .legenda small{align-self:flex-start;font-family:var(--m);font-size:1.35cqw;letter-spacing:.12em;background:#0b0b0a;color:var(--a-v);padding:.45cqw .9cqw;border-radius:.3cqw}
.app .legenda b{align-self:flex-start;font-size:3.3cqw;line-height:1.12;font-weight:650;letter-spacing:-.02em;background:var(--a-v);color:#0e0e0d;padding:.9cqw 1.5cqw;border-radius:.4cqw;box-shadow:0 1.4cqw 3cqw -1cqw rgba(0,0,0,.6)}
/* cursor que anda e clica */
.app .mouse{left:0;top:0;width:3.4cqw;height:3.4cqw;opacity:0;transition:transform 1.05s cubic-bezier(.65,0,.2,1),opacity .4s;filter:drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.6))}
.app .mouse.ve{opacity:1}
.app .mouse svg{width:100%;height:100%;display:block}
.app .mouse::after{content:"";position:absolute;left:-1.6cqw;top:-1.6cqw;width:3.2cqw;height:3.2cqw;border-radius:50%;border:.3cqw solid var(--a-v);opacity:0}
.app .mouse.clica::after{animation:c-clique .7s ease-out}
.app .mouse.clica svg{animation:c-aperta .3s}
/* notificação */
.app .toast{right:3cqw;top:4.6cqw;display:flex;align-items:center;gap:1.1cqw;background:#fff;color:#111;border-radius:.8cqw;padding:1.1cqw 1.6cqw 1.1cqw 1.1cqw;font-size:1.9cqw;font-weight:600;
  box-shadow:0 2cqw 4cqw -1cqw rgba(0,0,0,.7);transform:translateX(calc(100% + 6cqw)) rotate(4deg);transition:transform .7s cubic-bezier(.2,1.3,.3,1)}
.app .toast.ve{transform:none}
.app .toast i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--a-v);display:grid;place-items:center;font-style:normal;font-size:1.6cqw;color:#111;flex:none}
/* cartão final */
.app .fecha{inset:0;background:var(--a-v);color:#0e0e0d;display:flex;flex-direction:column;justify-content:center;gap:1.4cqw;padding:0 7cqw;clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.75,0,.15,1)}
.app .fecha.ve{clip-path:inset(0)}
.app .fecha b{font-size:6cqw;line-height:1.02;font-weight:650;letter-spacing:-.035em}
.app .fecha span.f{font-family:var(--m);font-size:1.5cqw;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .5s .6s}
.app .fecha.ve span.f{opacity:.75}
/* régua de tempo do comercial */
.app .regua{left:0;right:0;bottom:0;height:.45cqw;background:rgba(255,255,255,.08);z-index:11}
.app .regua i{display:block;height:100%;background:var(--a-v);transform-origin:left;transform:scaleX(0)}
.app .regua.anda i{transform:scaleX(1);transition:transform linear var(--dur,14s)}
/* realces durante as cenas */
.app .brilha{animation:c-brilha .9s ease-in-out 2}
.app .bs.sobe-tudo b i{animation-duration:.5s}
@keyframes c-chao{to{background-position:0 6cqw}}
@keyframes c-clique{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes c-aperta{50%{transform:scale(.82)}}
@keyframes c-brilha{50%{box-shadow:0 0 0 .3em var(--a-v),0 0 2em rgba(181,204,24,.6);background-color:rgba(181,204,24,.12)}}

/* telas reais do sistema dentro do comercial */
.app.real{background:#f4f6fb}
.app.real .in{display:block}
.app .print{display:block;width:100%;height:auto;max-width:none}
.js .app .print.p{animation-name:c-revela;animation-duration:1.1s}
.app.real .foco{border-radius:.9em;box-shadow:0 0 0 .22em var(--a-v),0 0 2.6em .3em rgba(181,204,24,.45),0 0 0 300em rgba(8,10,16,.62)}
@keyframes c-revela{from{clip-path:inset(0 0 100% 0);transform:scale(1.06)}to{clip-path:inset(0);transform:none}}

/* celular: título da tela em cima, etiqueta embaixo */
@media (max-width:600px){.vitrine .t{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px}.vitrine .t b{font-size:16px}}