:root{
  --ac:#18cb96;--ab:#33dea6;--acsoft:rgba(24,203,150,.12);
  --chrome:#0b0b0d;--sec-1:#0f0f11;--sec-2:#151517;--card:#1c1c1f;--pressed:#08080a;
  --bg:#16171b;--bg2:#24262a;--card:#1f2024;--inset:#24262a;
  --text:#ffffff;--text2:#c7cad0;--muted:#9a9da4;--faint:#7c7f86;--border:rgba(255,255,255,.07)
}
html{scroll-behavior:smooth;scrollbar-color:#3a3c42 #1b1c1f}
body{background:var(--bg);color:var(--text2);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 24px 72px}

/* ===== classes custom do site (usadas no header/footer via chrome.js) ===== */
.btn{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease}
.btn-green{background:#18cb96;color:#0e1e16}
.btn-green:hover{background:#0fa374;transform:translateY(-1px)}
.btn-green:active{background:#0b855e;transform:translateY(0)}
.btn-ghost{position:relative;overflow:hidden;z-index:0;transition:color .35s ease,border-color .35s ease}
.btn-ghost::before{content:"";position:absolute;inset:0;background:#18cb96;transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.42,0,.58,1);z-index:-1}
.btn-ghost:hover{color:#0e1e16;border-color:#18cb96}
.btn-ghost:hover::before{transform:scaleX(1)}
.navlink{position:relative}
.navlink::after{content:'';position:absolute;left:0;bottom:-5px;height:2px;width:0;background:#18cb96;transition:width .22s ease}
.navlink:hover::after{width:100%}
.navlink.active{color:#18cb96}
.navlink.active::after{width:100%}
.pay{opacity:1}
.pay svg{transition:transform .2s ease;cursor:default}
.pay svg:hover{transform:scale(1.35)}
/* tooltip dos selos de pagamento */
.tip{ position:relative; display:inline-flex }
.tip::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px); white-space:nowrap; background:#0e1012; color:#e4e4e7; font:500 11px/1 Inter,sans-serif; padding:6px 9px; border-radius:7px; border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 22px -8px rgba(0,0,0,.65); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:5 }
.tip::before{ content:""; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#0e1012; opacity:0; transition:opacity .18s ease; z-index:5 }
.tip:hover::after{ opacity:1; transform:translateX(-50%) translateY(0) }
.tip:hover::before{ opacity:1 }

.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;justify-content:center;height:56px;width:56px;border-radius:9999px;background:#18cb96;color:#0e1e16;transition:transform .2s ease,filter .2s ease;animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{box-shadow:0 10px 28px -10px rgba(24,203,150,.5),0 0 0 0 rgba(24,203,150,.5)}70%{box-shadow:0 10px 28px -10px rgba(24,203,150,.5),0 0 0 16px rgba(24,203,150,0)}100%{box-shadow:0 10px 28px -10px rgba(24,203,150,.5),0 0 0 0 rgba(24,203,150,0)}}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none}}
.wa-float:hover{transform:scale(1.08);filter:drop-shadow(0 8px 18px rgba(24,203,150,.5))}
#mobileMenu{transition:opacity .25s ease}

/* ===== conteúdo do artigo/blog ===== */
.chip{display:inline-block;background:var(--acsoft);color:var(--ac);font:600 12px 'Inter';padding:5px 11px;border-radius:8px}
.meta{color:var(--faint);font:400 14px 'Inter'}
article{padding:44px 0 20px}
article h1{font:800 clamp(30px,5vw,44px)/1.15 'Sora';letter-spacing:-.02em;margin:18px 0 14px;color:var(--text)}
article h2{font:700 clamp(22px,3vw,28px)/1.3 'Sora';margin:40px 0 14px;color:var(--text)}
article h3{font:700 19px 'Inter';margin:28px 0 10px;color:var(--text)}
article p,article li{color:var(--text2);font:400 18px/1.75 'Inter'}
article p{margin:0 0 20px}
article ul,article ol{margin:0 0 20px;padding-left:24px}
article ul{list-style:disc}
article ol{list-style:decimal}
article li{margin-bottom:10px}
article strong{color:var(--text);font-weight:600}
.lede{font-size:20px!important;color:var(--muted)!important}
.cta{margin:40px 0 10px;padding:28px;background:var(--card);border:1px solid rgba(24,203,150,.28);border-radius:20px}
.cta h3{margin:0 0 8px;color:var(--text);font-family:'Inter'}
.cta p{margin:0 0 16px;color:var(--muted)}
.cta .btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--ac);color:#0e1e16;font:600 15px 'Inter';padding:13px 22px;border-radius:11px}
.cta .btn:hover{background:#0fa374;transform:translateY(-1px)}
.cta .btn:active{background:#0b855e;transform:translateY(0)}

/* ===== índice do blog ===== */
.postcard{display:block;position:relative;text-decoration:none;background:var(--card);border:1px solid transparent;border-radius:18px;overflow:hidden;box-shadow:0 3px 6px rgba(0,0,0,.05),0 8px 15px rgba(0,0,0,.14),0 0 0 1px rgba(255,255,255,.08);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),background-color .4s ease,border-color .4s ease}
.postcard:hover{transform:scale(1.03) translateY(-8px);background:var(--pressed);border-color:rgba(24,203,150,.32);z-index:5;box-shadow:0 0 0 1px rgba(24,203,150,.25),0 24px 40px -24px rgba(0,0,0,.9),0 10px 18px -14px rgba(0,0,0,.6)}
.postcard h2,.postcard h3{transition:transform .5s cubic-bezier(.16,1,.3,1),color .35s ease;transform-origin:left center}
.postcard:hover h2,.postcard:hover h3{transform:scale(1.05);color:#33dea6}
.postcard .cover{position:relative;height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,var(--card),var(--pressed))}
.postcard .cover::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(24,203,150,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(24,203,150,.06) 1px,transparent 1px);background-size:26px 26px}
.postcard .cover .glow{position:absolute;width:220px;height:220px;background:radial-gradient(circle,rgba(24,203,150,.2),transparent 60%)}
.postcard .cover .ico{position:relative;color:var(--ac)}
.postcard:hover .cover .ico{transform:scale(1.06);transition:transform .3s ease}
/* capa (hero) dentro do artigo */
.hero-cover{position:relative;height:255px;margin:8px 0 4px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,var(--card),var(--pressed));border:1px solid var(--border)}
.hero-cover::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(24,203,150,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(24,203,150,.06) 1px,transparent 1px);background-size:30px 30px}
.hero-cover .glow{position:absolute;width:300px;height:300px;background:radial-gradient(circle,rgba(24,203,150,.2),transparent 60%)}
.hero-cover .ico{position:relative;color:var(--ac)}
@media(max-width:760px){#grid{grid-template-columns:1fr!important}}

/* ===== menu mobile animado (igual à home) ===== */
#mobileMenu{ position:absolute; left:0; right:0; top:100%; background:var(--chrome); border-radius:0 0 22px 22px; box-shadow:0 22px 44px -18px rgba(24,203,150,.35), 0 16px 34px -22px rgba(0,0,0,.65); opacity:0; visibility:hidden; transform:translateY(-14px); transition:opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1), visibility 0s linear .4s }
#mobileMenu.open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1) }
#mobileMenu a{ transition:background .2s ease, color .2s ease }
#mobileMenu a:not(.bg-green):not(.active){ color:#e4e4e7 !important }
#mobileMenu a:not(.bg-green):hover{ color:#18cb96 !important }
.ham{ cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 400ms; user-select:none; display:block }
.ham .line{ fill:none; transition:stroke-dasharray 400ms, stroke-dashoffset 400ms, stroke 300ms ease; stroke:#a1a1aa; stroke-width:6; stroke-linecap:round }
.ham1.active .line{ stroke:#ef4444 }
.hamRotate.active{ transform:rotate(45deg) }
.ham1 .top{ stroke-dasharray:40 139 }
.ham1 .bottom{ stroke-dasharray:40 180 }
.ham1.active .top{ stroke-dashoffset:-98px }
.ham1.active .bottom{ stroke-dashoffset:-138px }

/* scrim: escurece a página com o menu aberto */
#mm-scrim{ position:fixed; inset:0; z-index:40; background:rgba(4,4,6,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s }
#mm-scrim.open{ opacity:1; visibility:visible; transition:opacity .3s ease }

/* mega-menu: item com ícone + título + descrição */
#mobileMenu .mm-item{ transition:background .2s ease }
#mobileMenu .mm-ic{ color:#8b8e95; transition:color .2s ease, transform .2s ease }
#mobileMenu .mm-ic svg{ height:1.3rem; width:1.3rem }
#mobileMenu .mm-title{ color:#f4f4f5; transition:color .2s ease }
#mobileMenu .mm-sub{ color:#82858c; line-height:1.3; margin-top:1px }
#mobileMenu .mm-item:hover .mm-ic{ color:#18cb96; transform:scale(1.08) }
#mobileMenu .mm-item:hover .mm-title{ color:#18cb96 }
#mobileMenu .mm-active .mm-ic, #mobileMenu .mm-active .mm-title{ color:#18cb96 }

/* acessibilidade: foco visível no teclado */
:focus-visible{ outline:2px solid #33dea6; outline-offset:2px; border-radius:6px }
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline:none }

/* link "voltar ao blog": fica verde no hover */
a[data-i18n="blog.back"]{transition:color .2s}
a[data-i18n="blog.back"]:hover{color:var(--ac)}

/* hero ANIMADO do agendamento — loop 10s: clica horário -> confirma -> PIX/QR -> pago -> cai no sistema */
.agd-scrA,.agd-scrB,.agd-scrC{position:absolute;inset:0}
.agd-scrB,.agd-scrC{opacity:0}
.agd-scrA{opacity:1;animation:agd-sa 10s ease-in-out infinite}
.agd-scrB{animation:agd-sb 10s ease-in-out infinite}
.agd-scrC{animation:agd-sc 10s ease-in-out infinite}
.agd-slot09{background:#18cb96;color:#0e1e16;animation:agd-sel 10s ease-in-out infinite}
.agd-btn{animation:agd-press 10s ease-in-out infinite}
.agd-recv{animation:agd-recv 10s ease-in-out infinite}
.agd-tap1,.agd-tap2{position:absolute;inset:-2px;border:1.5px solid #18cb96;pointer-events:none;opacity:0}
.agd-tap1{border-radius:6px;animation:agd-tap1 10s ease-out infinite}
.agd-tap2{border-radius:9px;animation:agd-tap2 10s ease-out infinite}
.agd-flow{position:absolute;top:50%;left:47%;height:7px;width:7px;margin-top:-3px;border-radius:9999px;background:#18cb96;box-shadow:0 0 7px #18cb96;z-index:15;pointer-events:none;opacity:0;animation:agd-flow 10s ease-in-out infinite}
.agd-cur{position:absolute;left:44%;top:30%;z-index:20;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));animation:agd-cur 10s ease-in-out infinite}
@keyframes agd-sa{0%,28%{opacity:1}32%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes agd-sb{0%,28%{opacity:0}32%,50%{opacity:1}54%,100%{opacity:0}}
@keyframes agd-sc{0%,50%{opacity:0}54%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes agd-sel{0%,15%{background:rgba(255,255,255,.06);color:#9a9da4}18%,90%{background:#18cb96;color:#0e1e16}94%,100%{background:rgba(255,255,255,.06);color:#9a9da4}}
@keyframes agd-press{0%,25%{transform:scale(1)}28%{transform:scale(.95)}31%,100%{transform:scale(1)}}
@keyframes agd-tap1{0%,15%{opacity:0;transform:scale(.85)}17%{opacity:.9;transform:scale(1)}25%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
@keyframes agd-tap2{0%,26%{opacity:0;transform:scale(.85)}28%{opacity:.9;transform:scale(1)}36%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
@keyframes agd-recv{0%,58%{opacity:0;transform:translateY(6px)}66%,90%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(6px)}}
@keyframes agd-flow{0%,52%{opacity:0;left:44%}56%{opacity:1}62%{opacity:1;left:54%}66%,100%{opacity:0;left:54%}}
@keyframes agd-cur{0%{opacity:0;left:44%;top:30%;transform:rotate(-10deg) scale(1)}6%{opacity:1}14%{left:13%;top:60%;transform:rotate(-10deg) scale(1)}17%{transform:rotate(-10deg) scale(.82)}20%{left:13%;top:60%;transform:rotate(-10deg) scale(1)}25%{left:44%;top:90%;transform:rotate(-10deg) scale(1)}28%{transform:rotate(-10deg) scale(.82)}31%{left:44%;top:90%;opacity:1;transform:rotate(-10deg) scale(1)}35%{opacity:0}100%{opacity:0;left:44%;top:30%}}
@media (prefers-reduced-motion: reduce){.agd-cur,.agd-flow,.agd-tap1,.agd-tap2{display:none!important}.agd-scrA,.agd-scrB,.agd-scrC,.agd-slot09,.agd-btn,.agd-recv{animation:none!important}.agd-recv{opacity:1!important;transform:none!important}}

/* hero ANIMADO do cardápio — loop 10s: adiciona (total sobe) -> finaliza -> PIX/QR -> pago automático -> cozinha */
.crd-scrA,.crd-scrB,.crd-scrC{position:absolute;inset:0}
.crd-scrB,.crd-scrC{opacity:0}
.crd-scrA{opacity:1;animation:crd-sa 10s ease-in-out infinite}
.crd-scrB{animation:crd-sb 10s ease-in-out infinite}
.crd-scrC{animation:crd-sc 10s ease-in-out infinite}
.crd-add{animation:crd-add 10s ease-in-out infinite}
.crd-add2{animation:crd-add2 10s ease-in-out infinite}
.crd-btn{animation:crd-press 10s ease-in-out infinite}
.crd-recv{animation:crd-recv 10s ease-in-out infinite}
.crd-tot0{animation:crd-tot0 10s ease-in-out infinite}
.crd-tot1{animation:crd-tot1 10s ease-in-out infinite;opacity:0}
.crd-tot2{animation:crd-tot2 10s ease-in-out infinite;opacity:0}
.crd-tap1,.crd-tap2,.crd-tap3{position:absolute;inset:-2px;border:1.5px solid #18cb96;pointer-events:none;opacity:0}
.crd-tap1,.crd-tap3{border-radius:8px}
.crd-tap2{border-radius:9px}
.crd-tap1{animation:crd-tap1 10s ease-out infinite}
.crd-tap3{animation:crd-tap3 10s ease-out infinite}
.crd-tap2{animation:crd-tap2 10s ease-out infinite}
.crd-flow{position:absolute;top:50%;left:47%;height:7px;width:7px;margin-top:-3px;border-radius:9999px;background:#18cb96;box-shadow:0 0 7px #18cb96;z-index:15;pointer-events:none;opacity:0;animation:crd-flow 10s ease-in-out infinite}
.crd-cur{position:absolute;left:30%;top:24%;z-index:20;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));animation:crd-cur 10s ease-in-out infinite}
@keyframes crd-sa{0%,34%{opacity:1}38%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes crd-sb{0%,34%{opacity:0}38%,56%{opacity:1}60%,100%{opacity:0}}
@keyframes crd-sc{0%,58%{opacity:0}62%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes crd-press{0%,30%{transform:scale(1)}33%{transform:scale(.96)}36%,100%{transform:scale(1)}}
@keyframes crd-add{0%,14%{background:rgba(255,255,255,.04)}17%,34%{background:rgba(24,203,150,.14)}40%,100%{background:rgba(255,255,255,.04)}}
@keyframes crd-add2{0%,24%{background:rgba(255,255,255,.04)}27%,34%{background:rgba(24,203,150,.14)}40%,100%{background:rgba(255,255,255,.04)}}
@keyframes crd-tot0{0%,15%{opacity:1}17%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes crd-tot1{0%,15%{opacity:0}17%,25%{opacity:1}27%,100%{opacity:0}}
@keyframes crd-tot2{0%,25%{opacity:0}27%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes crd-tap1{0%,12%{opacity:0;transform:scale(.85)}15%{opacity:.9;transform:scale(1)}23%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
@keyframes crd-tap3{0%,22%{opacity:0;transform:scale(.85)}25%{opacity:.9;transform:scale(1)}33%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
@keyframes crd-tap2{0%,30%{opacity:0;transform:scale(.85)}33%{opacity:.9;transform:scale(1)}41%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
@keyframes crd-recv{0%,58%{opacity:0;transform:translateY(6px)}66%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(6px)}}
@keyframes crd-flow{0%,58%{opacity:0;left:44%}62%{opacity:1}68%{opacity:1;left:54%}72%,100%{opacity:0;left:54%}}
@keyframes crd-cur{0%{opacity:0;left:30%;top:24%;transform:rotate(-10deg) scale(1)}6%{opacity:1}13%{left:42%;top:43%;transform:rotate(-10deg) scale(1)}15%{transform:rotate(-10deg) scale(.82)}18%{left:42%;top:43%;transform:rotate(-10deg) scale(1)}23%{left:42%;top:72%;transform:rotate(-10deg) scale(1)}25%{transform:rotate(-10deg) scale(.82)}28%{left:42%;top:72%;transform:rotate(-10deg) scale(1)}31%{left:44%;top:90%;transform:rotate(-10deg) scale(1)}33%{transform:rotate(-10deg) scale(.82)}37%{left:44%;top:90%;opacity:1;transform:rotate(-10deg) scale(1)}41%{opacity:0}100%{opacity:0;left:30%;top:24%}}
@media (prefers-reduced-motion: reduce){.crd-cur,.crd-flow,.crd-tap1,.crd-tap2,.crd-tap3{display:none!important}.crd-scrA,.crd-scrB,.crd-scrC,.crd-add,.crd-add2,.crd-btn,.crd-recv,.crd-tot0,.crd-tot1,.crd-tot2{animation:none!important}.crd-recv{opacity:1!important;transform:none!important}.crd-tot0{opacity:0!important}.crd-tot2{opacity:1!important}}

/* hero ANIMADO do PIX — loop 10s: cliente paga com PIX -> QR (aguardando ~2s) -> aprovado -> cai na conta (sem taxa) */
.pix-scrA,.pix-scrB,.pix-scrC{position:absolute;inset:0}
.pix-scrB,.pix-scrC{opacity:0}
.pix-scrA{opacity:1;animation:pix-sa 10s ease-in-out infinite}
.pix-scrB{animation:pix-sb 10s ease-in-out infinite}
.pix-scrC{animation:pix-sc 10s ease-in-out infinite}
.pix-btn{animation:pix-press 10s ease-in-out infinite}
.pix-recv{animation:pix-recv 10s ease-in-out infinite}
.pix-tap{position:absolute;inset:-2px;border:1.5px solid #18cb96;border-radius:9px;pointer-events:none;opacity:0;animation:pix-tap 10s ease-out infinite}
.pix-flow{position:absolute;top:50%;left:47%;height:7px;width:7px;margin-top:-3px;border-radius:9999px;background:#18cb96;box-shadow:0 0 7px #18cb96;z-index:15;pointer-events:none;opacity:0;animation:pix-flow 10s ease-in-out infinite}
.pix-cur{position:absolute;left:55%;top:30%;z-index:20;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));animation:pix-cur 10s ease-in-out infinite}
@keyframes pix-sa{0%,20%{opacity:1}24%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes pix-sb{0%,20%{opacity:0}24%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes pix-sc{0%,48%{opacity:0}52%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes pix-press{0%,14%{transform:scale(1)}17%{transform:scale(.96)}20%,100%{transform:scale(1)}}
@keyframes pix-tap{0%,14%{opacity:0;transform:scale(.85)}17%{opacity:.9;transform:scale(1)}25%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
@keyframes pix-recv{0%,50%{opacity:0;transform:translateY(6px)}58%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(6px)}}
@keyframes pix-flow{0%,48%{opacity:0;left:44%}52%{opacity:1}58%{opacity:1;left:54%}62%,100%{opacity:0;left:54%}}
@keyframes pix-cur{0%{opacity:0;left:55%;top:30%;transform:rotate(-10deg) scale(1)}6%{opacity:1}14%{left:44%;top:82%;transform:rotate(-10deg) scale(1)}17%{transform:rotate(-10deg) scale(.82)}20%{left:44%;top:82%;opacity:1;transform:rotate(-10deg) scale(1)}24%{opacity:0}100%{opacity:0;left:55%;top:30%}}
@media (prefers-reduced-motion: reduce){.pix-cur,.pix-flow,.pix-tap{display:none!important}.pix-scrA,.pix-scrB,.pix-scrC,.pix-btn,.pix-recv{animation:none!important}.pix-recv{opacity:1!important;transform:none!important}}

/* hero ANIMADO do site-ou-sistema — comparação: Site rola uma landing / Sistema é um dashboard vivo */
.sos-page{animation:sos-scroll 12s ease-in-out infinite}
.sos-sb{animation:sos-sb 12s ease-in-out infinite}
.sos-bar{transform-origin:bottom;animation:sos-bar 2.6s ease-in-out infinite}
.sos-b2{animation-delay:-.3s}
.sos-b3{animation-delay:-.7s}
.sos-b4{animation-delay:-1s}
.sos-b5{animation-delay:-1.4s}
.sos-b6{animation-delay:-.5s}
.sos-b7{animation-delay:-.9s}
@keyframes sos-scroll{0%,8%{transform:translateY(0)}26%,34%{transform:translateY(-50px)}52%,60%{transform:translateY(-100px)}78%,86%{transform:translateY(-150px)}94%,100%{transform:translateY(0)}}
@keyframes sos-sb{0%,8%{top:3px}26%,34%{top:30%}52%,60%{top:55%}78%,86%{top:80%}94%,100%{top:3px}}
@keyframes sos-bar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){.sos-page,.sos-sb,.sos-bar{animation:none!important}}

/* sos: interação no sistema — cursor clica no sidebar e troca as views (Vendas/Relatórios/Clientes) */
.sos-cur{position:absolute;left:36%;top:15%;z-index:20;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));animation:sos-cur 12s ease-in-out infinite}
.sos-v1{animation:sos-v1 12s ease-in-out infinite}
.sos-v2,.sos-v3,.sos-t2,.sos-t3{opacity:0}
.sos-v2{animation:sos-v2 12s ease-in-out infinite}
.sos-v3{animation:sos-v3 12s ease-in-out infinite}
.sos-t1{animation:sos-v1 12s ease-in-out infinite}
.sos-t2{animation:sos-v2 12s ease-in-out infinite}
.sos-t3{animation:sos-v3 12s ease-in-out infinite}
.sos-n1{animation:sos-n1 12s ease-in-out infinite}
.sos-n2{animation:sos-n2 12s ease-in-out infinite}
.sos-n3{animation:sos-n3 12s ease-in-out infinite}
@keyframes sos-v1{0%,30%{opacity:1}34%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes sos-v2{0%,31%{opacity:0}35%,61%{opacity:1}65%,100%{opacity:0}}
@keyframes sos-v3{0%,63%{opacity:0}67%,91%{opacity:1}95%,100%{opacity:0}}
@keyframes sos-n1{0%,30%{background-color:rgba(24,203,150,.2);color:#18cb96}34%,92%{background-color:transparent;color:#52525b}96%,100%{background-color:rgba(24,203,150,.2);color:#18cb96}}
@keyframes sos-n2{0%,31%{background-color:transparent;color:#52525b}35%,61%{background-color:rgba(24,203,150,.2);color:#18cb96}65%,100%{background-color:transparent;color:#52525b}}
@keyframes sos-n3{0%,63%{background-color:transparent;color:#52525b}67%,91%{background-color:rgba(24,203,150,.2);color:#18cb96}95%,100%{background-color:transparent;color:#52525b}}
@keyframes sos-cur{0%{left:36%;top:15%;transform:rotate(-10deg) scale(1)}4%{transform:rotate(-10deg) scale(.82)}8%{transform:rotate(-10deg) scale(1)}27%{left:36%;top:26%;transform:rotate(-10deg) scale(1)}31%{transform:rotate(-10deg) scale(.82)}35%{transform:rotate(-10deg) scale(1)}59%{left:36%;top:37%;transform:rotate(-10deg) scale(1)}63%{transform:rotate(-10deg) scale(.82)}67%{transform:rotate(-10deg) scale(1)}90%,100%{left:36%;top:15%;transform:rotate(-10deg) scale(1)}}
@media (prefers-reduced-motion: reduce){.sos-cur{display:none!important}.sos-v1,.sos-v2,.sos-v3,.sos-t1,.sos-t2,.sos-t3,.sos-n1,.sos-n2,.sos-n3{animation:none!important}.sos-v1,.sos-t1{opacity:1!important}.sos-n1{background-color:rgba(24,203,150,.2)!important;color:#18cb96!important}}


/* recalibragem emerald 2026-07 (escuro) — accent -> #33dea6 (mesma lógica do index.html) */
.chip{ background:rgba(51,222,166,.12); color:#33dea6 }
.postcard .cover .ico{ color:#33dea6 }
.hero-cover .ico{ color:#33dea6 }
a[data-i18n="blog.back"]:hover{ color:#33dea6 }
.navlink::after{ background:#33dea6 }
.navlink.active{ color:#33dea6 }
#mobileMenu a:not(.bg-green):hover{ color:#33dea6 !important }
#mobileMenu .mm-item:hover .mm-ic,#mobileMenu .mm-item:hover .mm-title{ color:#33dea6 }
#mobileMenu .mm-active .mm-ic,#mobileMenu .mm-active .mm-title{ color:#33dea6 }