/* Faixa do /altyfood-novo: cartão flutuante com a mini animação de cada recurso (core/institucional/demos.js). */
.faixa-trilho button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:12px;font:600 22px/1 var(--titulo);white-space:nowrap;color:#d9d4ff;padding:6px 4px;border-radius:8px;transition:color .2s}
.faixa-trilho button::before{content:"✦";color:var(--laranja);font-size:16px;transition:transform .3s}
.faixa-trilho button:hover,.faixa-trilho button:focus-visible,.faixa-trilho button.ativo{color:#fff}
.faixa-trilho button:hover::before,.faixa-trilho button.ativo::before{transform:rotate(180deg) scale(1.3)}
.faixa-trilho button:focus-visible{outline:2px solid var(--roxo2);outline-offset:4px}
.faixa.parada .faixa-trilho{animation-play-state:paused}

.demo-card{position:fixed;z-index:50;width:300px;padding:14px;border-radius:20px;background:linear-gradient(160deg,#1f1850f5,#100c2cf5);border:1px solid #ffffff2e;box-shadow:0 30px 70px #000000a0,0 0 0 1px #6c5cff22,0 0 50px #6c5cff33;backdrop-filter:blur(14px);opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.demo-card.aberto{opacity:1;transform:none;pointer-events:auto}
.demo-card::after{content:"";position:absolute;left:var(--seta,50%);bottom:-7px;width:14px;height:14px;background:#100c2c;border-right:1px solid #ffffff2e;border-bottom:1px solid #ffffff2e;transform:translateX(-50%) rotate(45deg)}
.demo-card.embaixo::after{bottom:auto;top:-7px;transform:translateX(-50%) rotate(225deg);background:#1f1850}
.demo-card h4{margin:0 0 2px;font:700 19px/1.2 var(--titulo);color:#fff}
.demo-card p{margin:0 0 10px;font-size:12.5px;line-height:1.4;color:var(--muted)}

/* Gravações do sistema real */
.demo-card.vertical{width:250px}
.dm-video{position:relative;border-radius:14px;overflow:hidden;background:#000;border:1px solid #ffffff14}
.dm-video video{display:block;width:100%;height:auto}
.dm-video.vertical video{height:400px;object-fit:cover;object-position:top}
.dm-video .real{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:20px;background:#000000b0;color:#4ade80;font-size:10px;font-weight:800;letter-spacing:.3px}

/* Palco comum de cada animação */
.dm{position:relative;height:150px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 80% 0,#6c5cff30,transparent 60%),#0b0920;border:1px solid #ffffff14;font-size:12px;color:#e9e5ff}
.dm *{box-sizing:border-box}

/* Cursor com etiqueta (como no modelo de referência) */
.cur{position:absolute;left:0;top:0;z-index:5;display:flex;align-items:flex-start;gap:4px;pointer-events:none}
.cur i{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:16px solid #fff;transform:rotate(-30deg);filter:drop-shadow(0 2px 3px #0008)}
.cur b{margin-top:12px;padding:3px 8px;border-radius:20px;background:var(--roxo);font-size:10px;font-weight:700;color:#fff;white-space:nowrap}

/* 1. Cardápio digital */
.dm-cardapio .cel{position:absolute;left:50%;top:8px;width:150px;bottom:-10px;transform:translateX(-50%);border-radius:16px 16px 0 0;background:#15112f;border:1px solid #ffffff1f;padding:8px}
.cel-top{display:flex;justify-content:space-between;font-weight:800;font-size:11px;margin-bottom:6px}
.carr{position:relative}
.carr em{position:absolute;right:-7px;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--laranja);color:#111;font:800 9px/14px var(--texto);text-align:center;font-style:normal;transform:scale(0);animation:dm-pop 4s infinite}
.prod{display:flex;align-items:center;gap:6px;padding:5px;margin-bottom:5px;border-radius:8px;background:#ffffff0c;font-size:14px;opacity:0;transform:translateX(20px);animation:dm-entra 4s infinite}
.prod span{flex:1;font-size:10px;font-weight:700;line-height:1.2}.prod small{display:block;font-weight:500;color:var(--muted)}
.prod u{text-decoration:none;width:18px;height:18px;border-radius:6px;background:var(--roxo);text-align:center;font:800 13px/18px var(--texto)}
.prod.p2{animation-delay:.15s}.prod.p3{animation-delay:.3s}
.dm-cardapio .p1 u{animation:dm-toque 4s infinite}
.dm-cardapio .cur{animation:dm-cur-cardapio 4s infinite}
@keyframes dm-entra{0%,5%{opacity:0;transform:translateX(20px)}15%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dm-pop{0%,48%{transform:scale(0)}55%{transform:scale(1.4)}60%,92%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes dm-toque{0%,44%,52%,100%{transform:none}48%{transform:scale(.8);background:var(--laranja)}}
@keyframes dm-cur-cardapio{0%,15%{transform:translate(240px,140px)}42%,52%{transform:translate(196px,46px)}80%,100%{transform:translate(240px,140px)}}

/* 2. WhatsApp com IA */
.dm-whats{display:flex;flex-direction:column;gap:5px;padding:9px;background:#0b141a}
.dm-whats .b{max-width:78%;padding:5px 9px;border-radius:10px;font-size:10.5px;line-height:1.3;opacity:0;animation:dm-bolha 6s infinite}
.dm-whats .cli{align-self:flex-end;background:#1f6b50}.dm-whats .bot{align-self:flex-start;background:#202c33}
.dm-whats .b1{animation-delay:0s}.dm-whats .b2{animation-delay:1.2s}.dm-whats .b3{animation-delay:1.9s}.dm-whats .b4{animation-delay:3.1s}
.dig{align-self:flex-start;display:flex;gap:3px;padding:6px 9px;border-radius:10px;background:#202c33;opacity:0}
.dig i{width:5px;height:5px;border-radius:50%;background:#aab;animation:dm-pula .6s infinite alternate}.dig i:nth-child(2){animation-delay:.2s}.dig i:nth-child(3){animation-delay:.4s}
.dig.d1{position:absolute;left:9px;top:38px;animation:dm-digita 6s infinite .4s}
.dig.d2{position:absolute;left:9px;top:94px;animation:dm-digita 6s infinite 2.3s}
@keyframes dm-bolha{0%{opacity:0;transform:translateY(8px) scale(.9)}6%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dm-digita{0%{opacity:0}2%,12%{opacity:1}14%,100%{opacity:0}}
@keyframes dm-pula{to{transform:translateY(-3px)}}

/* 3. Rastreio */
.dm-rastreio svg{position:absolute;inset:0;width:100%;height:100%}
.dm-rastreio .rua{fill:none;stroke:#ffffff14;stroke-width:12}
.dm-rastreio .trajeto{fill:none;stroke:var(--roxo2);stroke-width:3;stroke-dasharray:4 5;opacity:.8}
.dm-rastreio .loja,.dm-rastreio .casa,.dm-rastreio .moto{position:absolute;font-size:18px;transform:translate(-50%,-50%)}
.dm-rastreio .loja{left:30px;top:100px}.dm-rastreio .casa{left:190px;top:80px}
.dm-rastreio .moto{offset-path:path("M30 100H70V30H190V80");offset-rotate:0deg;animation:dm-anda 5s infinite ease-in-out;left:0;top:0;transform:none;filter:drop-shadow(0 0 6px #8f7dff)}
.dm-rastreio .aviso{position:absolute;right:8px;top:8px;padding:4px 9px;border-radius:20px;background:#6c5cff40;border:1px solid #8f7dff66;font-size:10px;font-weight:700}
@keyframes dm-anda{0%,8%{offset-distance:0%}85%,100%{offset-distance:100%}}

/* 4. Cupons */
.dm-cupom{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.ticket{display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:10px;border:2px dashed var(--laranja);background:#ff8a4c18;animation:dm-balanca 4s infinite}
.ticket b{font:700 20px/1 var(--titulo);letter-spacing:1px}.ticket span{font-weight:800;color:var(--laranja)}
.preco{display:flex;align-items:center;gap:10px;font-size:15px}
.preco s{color:var(--muted);text-decoration-color:transparent;animation:dm-risca 4s infinite}
.preco strong{color:#4ade80;opacity:0;animation:dm-aparece 4s infinite}
.carimbo{position:absolute;right:16px;top:14px;padding:3px 8px;border:2px solid #4ade80;border-radius:6px;color:#4ade80;font-weight:800;font-size:10px;transform:rotate(12deg) scale(2);opacity:0;animation:dm-carimba 4s infinite}
.dm-cupom .cur{animation:dm-cur-cupom 4s infinite}
@keyframes dm-balanca{0%,30%,100%{transform:none}35%{transform:scale(.94)}40%{transform:scale(1.04)}}
@keyframes dm-risca{0%,40%{text-decoration-color:transparent}48%,92%{text-decoration-color:#ff6b6b}}
@keyframes dm-aparece{0%,45%{opacity:0;transform:translateY(6px)}55%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dm-carimba{0%,50%{opacity:0;transform:rotate(12deg) scale(2)}58%,92%{opacity:1;transform:rotate(12deg) scale(1)}100%{opacity:0}}
@keyframes dm-cur-cupom{0%{transform:translate(250px,140px)}30%,40%{transform:translate(150px,40px)}75%,100%{transform:translate(250px,140px)}}

/* 5. Mais vendidos */
.dm-top{display:flex;align-items:center;justify-content:space-around;padding:0 14px}
.card-prod{position:relative;width:110px;border-radius:12px;background:#ffffff0d;border:1px solid #ffffff1a;padding:8px}
.card-prod .foto{height:56px;border-radius:8px;background:linear-gradient(135deg,#3a2a6a,#6c3a4a);display:grid;place-items:center;font-size:30px}
.card-prod span{display:block;margin-top:6px;font-weight:700;font-size:11px}.card-prod small{display:block;color:var(--muted);font-weight:500}
.selo-top{position:absolute;right:-10px;top:-10px;padding:4px 8px;border-radius:20px;background:linear-gradient(90deg,#ff5e3a,#ffb03a);color:#1a0b00;font:800 10px/1 var(--texto);font-style:normal;transform:scale(0) rotate(-20deg);animation:dm-selo 4s infinite}
.barras{display:flex;align-items:flex-end;gap:6px;height:90px}
.barras i{width:14px;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--roxo2),var(--roxo));transform-origin:bottom;animation:dm-barra 4s infinite}
.barras i:first-child{background:linear-gradient(180deg,#ffb03a,#ff5e3a)}
.barras i:nth-child(2){animation-delay:.1s}.barras i:nth-child(3){animation-delay:.2s}.barras i:nth-child(4){animation-delay:.3s}
@keyframes dm-selo{0%,35%{transform:scale(0) rotate(-20deg)}45%{transform:scale(1.3) rotate(8deg)}52%,92%{transform:scale(1) rotate(0)}100%{transform:scale(0)}}
@keyframes dm-barra{0%{transform:scaleY(0)}25%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* 6. Tela da cozinha */
.dm-cozinha{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px}
.dm-cozinha .col{border-radius:8px;background:#ffffff08;border:1px solid #ffffff12;padding:6px;text-align:center}
.dm-cozinha .col b{font-size:10px;color:var(--muted);letter-spacing:.5px}
.comanda{position:absolute;top:36px;left:14px;width:72px;padding:8px;border-radius:8px;background:#fbe9cd;color:#5a3a12;font:800 14px/1.1 var(--titulo);animation:dm-comanda 5s infinite;box-shadow:0 6px 16px #0007}
.comanda small{display:block;font:600 9px/1.4 var(--texto)}
@keyframes dm-comanda{0%,12%{transform:none;background:#fbe9cd}30%,50%{transform:translateX(88px);background:#ffd8a8}68%,90%{transform:translateX(176px);background:#bff3cf;color:#14532d}100%{transform:translateX(176px);opacity:0}}

/* 7. Garçonete */
.dm-garcom .mesas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 14px 0}
.dm-garcom .mesas i{display:grid;place-items:center;height:34px;border-radius:9px;background:#ffffff0c;border:1px solid #ffffff1a;font-style:normal;font-weight:800}
.dm-garcom .m3{animation:dm-ocupa 4s infinite}
.item-lancado{position:absolute;left:14px;right:14px;bottom:10px;padding:6px 10px;border-radius:9px;background:#6c5cff33;border:1px solid #8f7dff66;font-weight:700;font-size:11px;opacity:0;transform:translateY(10px);animation:dm-aparece 4s infinite}
.dm-garcom .cur{animation:dm-cur-garcom 4s infinite}
@keyframes dm-ocupa{0%,38%{background:#ffffff0c}45%,92%{background:#ff8a4c;color:#1a0b00;border-color:#ff8a4c}}
@keyframes dm-cur-garcom{0%{transform:translate(250px,140px)}32%,42%{transform:translate(230px,26px)}75%,100%{transform:translate(250px,140px)}}

/* 8. PDV */
.dm-pdv{padding:10px 12px}
.dm-pdv p{display:flex;justify-content:space-between;margin:0 0 5px;padding:4px 8px;border-radius:6px;background:#ffffff0a;font-size:11px;opacity:0;animation:dm-entra 5s infinite}
.dm-pdv .l2{animation-delay:.4s}.dm-pdv .l3{animation-delay:.8s}
.total{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:6px;border-top:1px dashed #ffffff2a;font-weight:700}
.total b{font:700 18px/1 var(--titulo);color:#4ade80}
.pago{position:absolute;right:18px;top:40px;padding:4px 12px;border:3px solid #4ade80;border-radius:8px;color:#4ade80;font:800 16px/1 var(--titulo);letter-spacing:2px;transform:rotate(-14deg) scale(2);opacity:0;animation:dm-carimba 5s infinite}

/* 9. Pagamento online */
.dm-pix{display:flex;align-items:center;justify-content:center}
.qr{display:grid;grid-template-columns:repeat(4,16px);gap:3px;padding:8px;border-radius:8px;background:#fff;animation:dm-some-qr 4s infinite}
.qr i{width:16px;height:16px;background:#111;border-radius:2px;transform:scale(0);animation:dm-qr 4s infinite}
.qr i:nth-child(3n){background:transparent}.qr i:nth-child(5n+1){background:#111}
.qr i:nth-child(odd){animation-delay:.1s}.qr i:nth-child(4n){animation-delay:.2s}
.ok{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;font:800 34px/1 var(--texto);color:#4ade80;opacity:0;transform:scale(.6);animation:dm-ok 4s infinite}
.ok span{font-size:12px;color:#e9e5ff}
@keyframes dm-qr{0%{transform:scale(0)}20%,100%{transform:scale(1)}}
@keyframes dm-some-qr{0%,50%{opacity:1;transform:none}58%,95%{opacity:0;transform:scale(.8)}100%{opacity:1}}
@keyframes dm-ok{0%,55%{opacity:0;transform:scale(.6)}65%,92%{opacity:1;transform:none}100%{opacity:0}}

/* 10. Estoque */
.dm-estoque{padding:16px}
.dm-estoque p{margin:0;font-weight:700}
.saldo{position:relative;height:40px;margin:6px 0;font:700 14px/40px var(--texto);color:var(--muted)}
.saldo span{position:absolute;left:0;top:0;font:700 34px/40px var(--titulo);color:#fff}
.saldo{padding-left:44px}
.n12{animation:dm-sai 4s infinite}.n11{opacity:0;animation:dm-chega 4s infinite}
.barra-e{height:8px;border-radius:6px;background:#ffffff12;overflow:hidden}
.barra-e i{display:block;height:100%;width:60%;border-radius:6px;background:linear-gradient(90deg,var(--roxo),var(--laranja));animation:dm-baixa 4s infinite}
.venda{position:absolute;right:14px;top:14px;padding:4px 9px;border-radius:20px;background:#ff8a4c30;border:1px solid #ff8a4c80;font-size:10px;font-weight:800;color:#ffc7a8;opacity:0;animation:dm-aparece 4s infinite}
@keyframes dm-sai{0%,45%{opacity:1;transform:none}55%,100%{opacity:0;transform:translateY(-16px)}}
@keyframes dm-chega{0%,45%{opacity:0;transform:translateY(16px)}55%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dm-baixa{0%,45%{width:60%}60%,100%{width:55%}}

/* 11. Rotas */
.dm-rotas svg{position:absolute;inset:0;width:100%;height:100%}
.dm-rotas .linha{fill:none;stroke:url(#x);stroke:var(--roxo2);stroke-width:3;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;animation:dm-desenha 4.5s infinite}
.pin{position:absolute;display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--roxo);border:2px solid #fff;font:800 11px/1 var(--texto);color:#fff;transform:scale(0);animation:dm-pino 4.5s infinite}
.pin.loja-r{background:transparent;border:0;font-size:18px;transform:none;animation:none}
.pin.n1{animation-delay:.6s}.pin.n2{animation-delay:1.1s}.pin.n3{animation-delay:1.6s}
@keyframes dm-desenha{0%,10%{stroke-dashoffset:260}50%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:260}}
@keyframes dm-pino{0%{transform:scale(0)}10%{transform:scale(1.3)}15%,80%{transform:scale(1)}95%,100%{transform:scale(0)}}

/* 12. Motoboys */
.dm-moto{display:flex;align-items:center;justify-content:center}
.corrida{position:relative;width:200px;padding:12px;border-radius:12px;background:#ffffff0d;border:1px solid #ffffff1f;animation:dm-chega-corrida 4s infinite}
.corrida b{display:block;font-size:13px}.corrida small{display:block;color:var(--muted);margin:2px 0 10px}
.btn-aceitar,.status{display:block;text-align:center;padding:7px;border-radius:9px;font-weight:800;font-size:12px}
.btn-aceitar{background:#22c55e;color:#052e16;animation:dm-aceita 4s infinite}
.status{position:absolute;left:12px;right:12px;bottom:12px;background:#6c5cff;color:#fff;opacity:0;animation:dm-aparece-status 4s infinite}
.dm-moto .cur{animation:dm-cur-moto 4s infinite}
@keyframes dm-chega-corrida{0%{transform:translateY(30px);opacity:0}10%,92%{transform:none;opacity:1}100%{opacity:0}}
@keyframes dm-aceita{0%,40%,100%{transform:none}45%{transform:scale(.92)}}
@keyframes dm-aparece-status{0%,48%{opacity:0}55%,92%{opacity:1}100%{opacity:0}}
@keyframes dm-cur-moto{0%{transform:translate(250px,150px)}35%,45%{transform:translate(140px,110px)}80%,100%{transform:translate(250px,150px)}}

@media (prefers-reduced-motion:reduce){
  .demo-card *{animation-delay:0s!important}
  .dm .prod,.dm .b,.dm-pdv p,.item-lancado,.preco strong,.status{opacity:1!important;transform:none!important}
  .cur,.dig,.qr{display:none!important}
  .ok{opacity:1!important;transform:none!important}
}