/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   ANIMAÇÃO DO TOPO NO CELULAR (24/10/2026). Luiz: "faça uma animação nova... mais polida, mais fluida, com um gráfico melhor".
   Uma venda inteira em ~13 s, num celular claro: o cliente chama no WhatsApp → o robô responde com o link → o link vira a loja →
   os produtos vão para a sacola → paga no Pix → o "pago" desenha → a notificação salta para fora e o painel mostra o dia subindo.
   Tudo é desenhado num palco de 360×580 e escalado para a largura da tela (o JS põe --k). Só transform e opacity animam
   (o celular desenha isso sem esforço, mesmo dentro do navegador do Instagram/Facebook).
   Prefixo .ha- (hero animation). Sem emoji (vira quadrado em alguns aparelhos): ícones em SVG.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.ha{
  --ha-azul:#1E5BD8; --ha-azul-claro:#DCE6FB; --ha-tinta:#0F172A; --ha-suave:#5B6478; --ha-borda:#D6DBE6;
  --ha-verde:#16A34A; --ha-zap:#D9FDD3; --ha-loja:#9A3D1E; --ha-loja-fundo:#FBF7F0;
  --ha-sai:cubic-bezier(.16,1,.3,1);           /* sai rápido e assenta devagar */
  --ha-mola:cubic-bezier(.34,1.45,.64,1);      /* passa um pouco e volta */
  --ha-meio:cubic-bezier(.65,0,.35,1);
  position:relative; width:100%; max-width:440px; margin:0 auto;
  font-family:"Hanken Grotesk",system-ui,sans-serif; color:var(--ha-tinta);
  -webkit-tap-highlight-color:transparent;
}
.ha *{ box-sizing:border-box; }
.ha img{ display:block; }

/* ── legenda + progresso (o "stories" de cima) ── */
.ha-leg{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:2.7em; max-width:340px; margin:0 auto 10px; padding:0 6px;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.13rem; line-height:1.28; letter-spacing:-.012em;
  color:var(--ha-tinta); transition:opacity .2s ease, transform .35s var(--ha-sai);
}
.ha-leg.troca{ opacity:0; transform:translateY(6px); }
.ha-prog{ display:flex; gap:5px; width:min(220px,64%); margin:0 auto 12px; }
.ha-prog i{ position:relative; flex:1; height:3px; border-radius:3px; background:rgba(15,23,42,.13); overflow:hidden; }
.ha-prog i::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--ha-azul);
  transform:scaleX(0); transform-origin:left center; transition:transform var(--d,1s) linear; }
.ha-prog i.enche::after{ transform:scaleX(1); }
.ha-prog i.feito::after{ transform:scaleX(1); transition:none; }

/* ── o palco (desenhado em 360×580, escalado pelo JS) ── */
.ha-moldura{ position:relative; width:100%; height:calc(560px * var(--k,1)); }
.ha-palco{ position:absolute; left:50%; top:0; width:360px; height:560px; margin-left:-180px;
  transform:scale(var(--k,1)); transform-origin:top center; transition:opacity .5s ease; }
.ha-palco.some{ opacity:0; }
.ha-fundo{ position:absolute; left:-30px; right:-30px; top:-10px; bottom:-10px; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(30,91,216,.16), rgba(30,91,216,0) 72%) 50% 42% / 92% 74% no-repeat,
    radial-gradient(rgba(30,91,216,.13) 1.1px, transparent 1.5px) 0 0 / 15px 15px;
  -webkit-mask-image:radial-gradient(closest-side, #000 52%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 52%, transparent 100%); }

/* ── o celular (claro, acabamento de produto) ── */
.ha-fone{ position:absolute; left:46px; top:6px; width:268px; height:524px; padding:4px; border-radius:50px;
  /* moldura de titânio escuro: o metal é um degradê com brilho nas quinas */
  background:
    linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(255,255,255,.22) 100%),
    linear-gradient(180deg,#4A4E57 0%,#2B2E34 22%,#1C1E22 50%,#2B2E34 78%,#43474F 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),       /* o fio de luz na borda do metal */
    inset 0 0 0 2.5px rgba(0,0,0,.55),           /* onde o metal encontra o vidro */
    0 0 0 1px #0E0F12,                           /* a quina de fora */
    0 54px 70px -34px rgba(15,23,42,.62),        /* a sombra no chão */
    0 22px 34px -18px rgba(15,23,42,.38),
    0 2px 6px rgba(15,23,42,.18);
  transition:transform .8s var(--ha-sai), opacity .6s ease; }
.ha-fone.recua{ transform:translateY(-4px) scale(.955); }
/* botões: liga (direita) e volume + silencioso (esquerda), no mesmo metal */
.ha-fone::before{ content:""; position:absolute; right:-3px; top:132px; width:3px; height:64px; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,#1A1C20,#4A4E57 60%,#2A2D33); }
.ha-fone::after{ content:""; position:absolute; left:-3px; top:100px; width:3px; height:142px; border-radius:3px 0 0 3px;
  background:linear-gradient(180deg,#3A3D44 0 22px,transparent 22px 42px,#3A3D44 42px 88px,transparent 88px 98px,#3A3D44 98px 142px); }
.ha-vidro{ position:relative; width:100%; height:100%; padding:7px; border-radius:46px; background:#050608;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.ha-ilha{ position:absolute; z-index:40; top:16px; left:50%; width:76px; height:23px; margin-left:-38px; border-radius:20px; background:#000; }
.ha-ilha::after{ content:""; position:absolute; right:9px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #3A4A62 0%, #121822 55%, #05070A 100%); box-shadow:0 0 0 .5px rgba(125,155,205,.25); }
.ha-tela{ position:relative; width:100%; height:100%; border-radius:39px; overflow:hidden; background:#EFEAE2; isolation:isolate; }
/* o reflexo do vidro, por cima de tudo (bem leve: tem que parecer vidro, não mancha) */
.ha-tela::after{ content:""; position:absolute; inset:0; z-index:90; border-radius:inherit; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 40%); }
.ha-home{ position:absolute; z-index:85; left:50%; bottom:7px; width:96px; height:4px; margin-left:-48px; border-radius:4px; background:rgba(17,27,33,.55);
  transition:background .3s; }
.ha-tela.na-loja .ha-home{ background:rgba(36,23,15,.55); }
.ha-barra{ position:absolute; z-index:35; top:0; left:0; right:0; height:38px; display:flex; align-items:center; justify-content:space-between;
  padding:3px 20px 0 30px; font:700 12px/1 "Hanken Grotesk",sans-serif; color:#111B21; pointer-events:none; transition:color .3s; }
.ha-barra svg{ height:10px; width:auto; fill:currentColor; }
.ha-barra .wifi{ height:10px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.ha-barra .ic{ display:flex; gap:4px; align-items:center; }
.ha-tela.na-loja .ha-barra{ color:#fff; }
.ha-tela.no-pix .ha-barra{ color:#111B21; }

/* ── cena 1: o WhatsApp (claro, como o do celular de verdade) ── */
.ha-zap{ position:absolute; inset:0; display:flex; flex-direction:column; }
.ha-zap-topo{ display:flex; align-items:center; gap:8px; height:94px; padding:38px 12px 0 8px; background:#F7F5F3; border-bottom:1px solid #E4E0DA; }
.ha-zap-topo .voltar{ width:16px; height:16px; stroke:#3B4A54; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ha-zap-topo .av{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.ha-zap-topo .quem{ flex:1; min-width:0; line-height:1.15; }
.ha-zap-topo .quem b{ display:block; font-size:13.5px; font-weight:700; }
.ha-zap-topo .quem i{ font-style:normal; font-size:11px; color:#667781; }
.ha-zap-topo .acoes{ display:flex; gap:14px; }
.ha-zap-topo .acoes svg{ width:18px; height:18px; stroke:#3B4A54; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ha-conversa{ flex:1; display:flex; flex-direction:column; gap:6px; padding:14px 10px; justify-content:flex-start;
  background:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.4px) 0 0 / 11px 11px, #EFEAE2; }
.ha-dia{ align-self:center; margin:0 0 6px; padding:3px 9px; border-radius:7px; background:#fff; font-size:10.5px; color:#54656F; box-shadow:0 1px .5px rgba(11,20,26,.1); }
.ha-msg{ position:relative; max-width:82%; padding:6px 8px 5px 9px; border-radius:11px; font-size:12.8px; line-height:1.36; color:#111B21;
  box-shadow:0 1px .6px rgba(11,20,26,.13); opacity:0; transform:translateY(12px) scale(.94);
  transition:opacity .25s ease, transform .5s var(--ha-mola); }
.ha-msg.sai{ align-self:flex-end; background:var(--ha-zap); border-top-right-radius:3px; transform-origin:100% 100%; }
.ha-msg.entra{ align-self:flex-start; background:#fff; border-top-left-radius:3px; transform-origin:0 100%; }
.ha-msg.on{ opacity:1; transform:none; }
.ha-hora{ float:right; display:inline-flex; align-items:center; gap:3px; margin:5px 0 -2px 9px; font-size:9.5px; color:#667781; }
.ha-hora svg{ width:14px; height:9px; fill:#53BDEB; }
.ha-digitando{ display:flex; gap:4px; padding:11px 12px; }
.ha-digitando span{ width:6px; height:6px; border-radius:50%; background:#9AA6AE; animation:haPula 1s infinite ease-in-out; }
.ha-digitando span:nth-child(2){ animation-delay:.15s; } .ha-digitando span:nth-child(3){ animation-delay:.3s; }
@keyframes haPula{ 0%,60%,100%{ transform:translateY(0); opacity:.55; } 30%{ transform:translateY(-4px); opacity:1; } }
.ha-cartao{ display:flex; gap:8px; align-items:center; margin:7px -2px 3px; padding:6px; border-radius:9px; background:#F0F2F5; position:relative; overflow:hidden; }
.ha-cartao img{ width:44px; height:44px; border-radius:7px; object-fit:cover; flex:none; }
.ha-cartao b{ display:block; font-size:12px; font-weight:700; }
.ha-cartao i{ display:block; font-style:normal; font-size:10.5px; color:#667781; margin-top:1px; }
.ha-cartao u{ display:block; text-decoration:none; font-size:10.5px; color:#0B7FB8; margin-top:2px; }

/* o toque: um anel que cresce e some */
.ha-toque{ position:absolute; z-index:60; width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%; pointer-events:none;
  background:rgba(30,91,216,.22); box-shadow:0 0 0 2px rgba(30,91,216,.55); transform:scale(.3); opacity:0; }
.ha-toque.vai{ animation:haToque .55s var(--ha-sai) forwards; }
@keyframes haToque{ 0%{ transform:scale(.3); opacity:0; } 25%{ opacity:1; } 100%{ transform:scale(1.35); opacity:0; } }

/* ── cena 2: a loja (abre a partir do cartão do link) ── */
.ha-loja{ position:absolute; inset:0; z-index:20; background:linear-gradient(180deg,#8E3A18 0,#B4532A 128px,var(--ha-loja-fundo) 128px); clip-path:inset(var(--ct,60%) var(--cr,10%) var(--cb,30%) var(--cl,10%) round 10px);
  visibility:hidden; }
.ha-loja.abre{ visibility:visible; clip-path:inset(0 0 0 0 round 38px); transition:clip-path .62s var(--ha-meio); }
.ha-loja-capa{ opacity:0; transition:opacity .3s ease .28s; position:relative; height:128px; padding:0 16px 14px; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(135deg,#6B2611 0%,#A9481F 62%,#C9682E 100%); color:#fff; }
.ha-loja-capa::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.22), transparent 55%); }
.ha-loja-capa b{ position:relative; z-index:1; font:700 17px/1.1 "Outfit","Hanken Grotesk",sans-serif; letter-spacing:-.01em; }
.ha-loja-capa i{ position:relative; z-index:1; font-style:normal; display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:10.5px; opacity:.92; }
.ha-loja-capa i::before{ content:""; width:6px; height:6px; border-radius:50%; background:#4ADE80; }
.ha-itens{ padding:6px 14px 0; }
.ha-sec{ margin:10px 0 2px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9A8778; }
.ha-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #EFE6DA; opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .5s var(--ha-sai); }
.ha-loja.abre .ha-item{ opacity:1; transform:none; }
.ha-loja.abre .ha-loja-capa{ opacity:1; }
.ha-loja.abre .ha-item:nth-child(2){ transition-delay:.36s; } .ha-loja.abre .ha-item:nth-child(3){ transition-delay:.42s; } .ha-loja.abre .ha-item:nth-child(4){ transition-delay:.48s; }
.ha-item img{ width:52px; height:52px; border-radius:12px; object-fit:cover; flex:none; }
.ha-item .t{ flex:1; min-width:0; line-height:1.25; }
.ha-item .t b{ display:block; font-size:12.8px; font-weight:700; color:#2A1A12; }
.ha-item .t i{ display:block; font-style:normal; font-size:10.5px; color:#8C7A6B; }
.ha-item .t s{ display:block; text-decoration:none; margin-top:3px; font-size:12px; font-weight:800; color:#2A1A12; }
.ha-mais{ width:28px; height:28px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--ha-loja); transition:transform .25s var(--ha-mola), background .25s; }
.ha-mais svg{ width:14px; height:14px; stroke:#fff; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round; grid-area:1/1; transition:opacity .2s ease, transform .3s var(--ha-mola); }
.ha-mais .v{ opacity:0; transform:scale(.4); }
.ha-mais.ok .m{ opacity:0; transform:scale(.4) rotate(90deg); }
.ha-mais.ok .v{ opacity:1; transform:none; }
.ha-mais.ok{ background:#2F7A3B; transform:scale(1.08); }
.ha-voa{ position:absolute; z-index:55; width:52px; height:52px; border-radius:12px; object-fit:cover; box-shadow:0 8px 18px -6px rgba(42,26,18,.5); pointer-events:none; }
.ha-sacola{ position:absolute; z-index:30; left:12px; right:12px; bottom:14px; height:48px; padding:0 8px 0 14px; border-radius:14px;
  display:flex; align-items:center; justify-content:space-between; background:#24170F; color:#fff; box-shadow:0 14px 26px -12px rgba(36,23,15,.6);
  transform:translateY(80px); transition:transform .55s var(--ha-mola); }
.ha-sacola.on{ transform:none; }
.ha-sacola .q{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; }
.ha-sacola .q em{ font-style:normal; display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#fff; color:#24170F; font-size:11px; font-weight:800; transition:transform .3s var(--ha-mola); }
.ha-sacola .q em.bate{ transform:scale(1.35); }
.ha-sacola .v{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; }
.ha-sacola .v span{ padding:7px 10px; border-radius:10px; background:#fff; color:#24170F; font-size:11px; font-weight:800; }
/* a folha do pedido */
.ha-veu{ position:absolute; z-index:40; inset:0; background:rgba(15,10,6,.36); opacity:0; transition:opacity .35s ease; pointer-events:none; }
.ha-veu.on{ opacity:1; }
.ha-folha{ position:absolute; z-index:45; left:0; right:0; bottom:0; padding:10px 16px 18px; border-radius:22px 22px 0 0; background:#fff;
  box-shadow:0 -12px 30px -14px rgba(0,0,0,.35); transform:translateY(105%); transition:transform .6s var(--ha-sai); }
.ha-folha.on{ transform:none; }
.ha-folha .alca{ width:36px; height:4px; margin:0 auto 12px; border-radius:4px; background:#D8D2CA; }
.ha-folha h4{ margin:0 0 8px; font:800 14px/1.2 "Outfit","Hanken Grotesk",sans-serif; color:#2A1A12; }
.ha-lin{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:11.5px; color:#4A3B30; }
.ha-lin.ent{ color:#2F7A3B; }
.ha-lin.tot{ margin-top:4px; padding-top:9px; border-top:1px dashed #E1D8CC; font-size:13px; font-weight:800; color:#2A1A12; }
.ha-pagar{ margin-top:12px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ha-azul); color:#fff; font-size:12.8px; font-weight:800; position:relative; overflow:hidden; }
.ha-pagar svg{ width:16px; height:16px; fill:#fff; }

/* ── cena 3: o Pix e o "pago" ── */
.ha-pix{ position:absolute; z-index:30; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:#fff; opacity:0; transform:translateY(16px); transition:opacity .35s ease, transform .55s var(--ha-sai); pointer-events:none; }
.ha-pix.on{ opacity:1; transform:none; }
.ha-pix .rot{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#64748B; }
.ha-pix .valor{ font:800 26px/1.1 "Bricolage Grotesque",sans-serif; letter-spacing:-.02em; color:var(--ha-tinta); margin-bottom:14px; }
.ha-qr{ position:relative; width:148px; height:148px; padding:10px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px #E3E7EF, 0 10px 24px -14px rgba(15,23,42,.35);
  transition:opacity .3s ease, transform .45s var(--ha-sai); }
.ha-qr svg{ width:100%; height:100%; display:block; }
.ha-qr::after{ content:""; position:absolute; left:8px; right:8px; top:10px; height:2px; border-radius:2px; background:var(--ha-azul);
  box-shadow:0 0 12px 2px rgba(30,91,216,.45); opacity:0; }
.ha-pix.on .ha-qr::after{ animation:haVarre 1.1s ease-in-out .15s 1 both; }
@keyframes haVarre{ 0%{ opacity:0; transform:translateY(0); } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ opacity:0; transform:translateY(124px); } }
.ha-pix .cop{ margin-top:12px; padding:8px 14px; border-radius:10px; background:#EEF3FD; color:var(--ha-azul); font-size:11.5px; font-weight:800; transition:opacity .25s; }
.ha-pago{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:104px; gap:6px; background:#fff; opacity:0; transition:opacity .3s ease; }
.ha-pix.feito .ha-pago{ opacity:1; }
.ha-pago svg{ width:78px; height:78px; overflow:visible; margin-bottom:4px; }
.ha-pago .anel{ fill:none; stroke:var(--ha-verde); stroke-width:5; stroke-linecap:round; stroke-dasharray:214; stroke-dashoffset:214; transform:rotate(-90deg); transform-origin:50% 50%; }
.ha-pago .marca{ fill:none; stroke:var(--ha-verde); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; }
.ha-pago .bolo{ fill:rgba(22,163,74,.12); transform:scale(.6); transform-origin:50% 50%; opacity:0; }
.ha-pix.feito .anel{ transition:stroke-dashoffset .6s var(--ha-meio); stroke-dashoffset:0; }
.ha-pix.feito .marca{ transition:stroke-dashoffset .35s ease .45s; stroke-dashoffset:0; }
.ha-pix.feito .bolo{ transition:transform .7s var(--ha-mola) .35s, opacity .3s ease .35s; transform:scale(1); opacity:1; }
.ha-pago b{ font:800 17px/1.2 "Bricolage Grotesque",sans-serif; color:var(--ha-tinta); opacity:0; transform:translateY(6px); transition:opacity .3s ease .55s, transform .45s var(--ha-sai) .55s; }
.ha-pago i{ font-style:normal; font-size:11.5px; color:#64748B; opacity:0; transition:opacity .3s ease .7s; }
.ha-pix.feito .ha-pago b, .ha-pix.feito .ha-pago i{ opacity:1; transform:none; }

/* ── cena 4: fora do celular, a notificação e o painel ── */
.ha-notif{ position:absolute; z-index:70; right:2px; top:50px; width:244px; padding:10px 12px; border-radius:18px; display:flex; gap:10px; align-items:flex-start;
  background:rgba(255,255,255,.97); box-shadow:0 0 0 1px rgba(15,23,42,.06), 0 18px 36px -16px rgba(15,23,42,.42);
  opacity:0; transform:translateY(-18px) scale(.94); transform-origin:80% 0; transition:opacity .3s ease, transform .6s var(--ha-mola); }
.ha-notif.on{ opacity:1; transform:none; }
.ha-notif img{ width:30px; height:30px; border-radius:8px; flex:none; }
.ha-notif .t{ flex:1; min-width:0; line-height:1.25; }
.ha-notif .t small{ display:flex; justify-content:space-between; font-size:10px; color:#64748B; font-weight:600; }
.ha-notif .t b{ display:block; margin-top:2px; font-size:12.5px; font-weight:800; }
.ha-notif .t span{ display:block; font-size:11px; color:#334155; }
.ha-painel{ position:absolute; z-index:65; left:0; top:248px; width:270px; padding:14px 14px 12px; border-radius:20px; background:#fff;
  box-shadow:0 0 0 1px rgba(15,23,42,.06), 0 26px 50px -22px rgba(15,23,42,.5);
  opacity:0; transform:translateY(34px) scale(.97); transform-origin:20% 100%; transition:opacity .35s ease, transform .7s var(--ha-sai); }
.ha-painel.on{ opacity:1; transform:none; }
.ha-painel .cab{ display:flex; justify-content:space-between; align-items:center; font-size:10.5px; color:#64748B; font-weight:700; }
.ha-painel .cab span{ display:inline-flex; align-items:center; gap:5px; }
.ha-painel .cab span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ha-verde); box-shadow:0 0 0 3px rgba(22,163,74,.18); }
.ha-painel .num{ margin-top:6px; font:800 25px/1 "Bricolage Grotesque",sans-serif; letter-spacing:-.02em; color:var(--ha-tinta); font-variant-numeric:tabular-nums; }
.ha-painel .mais{ display:inline-block; margin-top:5px; padding:2px 7px; border-radius:6px; background:rgba(22,163,74,.12); color:#15803D; font-size:10.5px; font-weight:800;
  opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .4s var(--ha-sai); }
.ha-painel.conta .mais{ opacity:1; transform:none; }
.ha-graf{ display:flex; align-items:flex-end; gap:6px; height:48px; margin:12px 0 10px; }
.ha-graf i{ flex:1; border-radius:5px 5px 2px 2px; background:var(--ha-azul-claro); transform-origin:bottom; height:var(--h); }
.ha-graf i:last-child{ background:var(--ha-azul); transform:scaleY(var(--s0,.62)); transition:transform .9s var(--ha-sai) .15s; }
.ha-painel.conta .ha-graf i:last-child{ transform:scaleY(1); }
.ha-ped{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:12px; background:#F6F8FC; }
.ha-ped img{ width:30px; height:30px; border-radius:8px; object-fit:cover; flex:none; }
.ha-ped .t{ flex:1; min-width:0; line-height:1.2; }
.ha-ped .t b{ display:block; font-size:11.5px; font-weight:800; }
.ha-ped .t span{ display:block; font-size:10px; color:#64748B; }
.ha-ped em{ font-style:normal; padding:3px 8px; border-radius:7px; background:rgba(22,163,74,.13); color:#15803D; font-size:10px; font-weight:800; }

/* o "Assistente" do site (canto de baixo) cobria o celular: no celular ele aparece depois que a animação sai da tela */
@media (max-width:980px){
  html.ha-pronto .cpa-lanc{ transition:opacity .3s ease, transform .35s ease; }
  html.ha-na-tela .cpa-lanc{ opacity:0; transform:translateY(18px) scale(.96); pointer-events:none; }
}

/* ── movimento reduzido: a mesma história, as telas trocando sem deslizar ── */
@media (prefers-reduced-motion: reduce){
  .ha *, .ha *::before, .ha *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}