/* AdiantaZap — loops.css (v10)
   Três animações demonstrativas da home. CSS puro, 60fps em GPU (apenas transform
   e opacity), sem vídeo pesado e sem biblioteca externa.

   Contrato com o motion.js:
   · o CSS só anima sob .js-loop (adicionada por JS quando não há reduced-motion)
   · sem JS ou com movimento reduzido, tudo aparece no estado final completo, 100% legível
   · [data-loop] fora da tela recebe animation-play-state:paused (economiza frame)
   · Regra de ouro V10/11: o card (rótulo, palco e legenda) nunca some — só os
     elementos internos se montam em sequência (opacity/transform, zero CLS) e
     o ciclo termina com o quadro completo antes de reiniciar.
*/

:root{
  --loop-hero:10.5s;
  --loop-fluxo:8s;
}

/* pausa fora da tela — vale para todos os loops.
   Os pseudo-elementos precisam ser listados à parte: `*` não os alcança, e o
   glow/borda/anel dos cards do fluxo vivem em ::before/::after. */
.js-loop [data-loop]:not(.is-looping) *,
.js-loop [data-loop]:not(.is-looping) *::before,
.js-loop [data-loop]:not(.is-looping) *::after{
  animation-play-state:paused !important;
}

/* ==========================================================================
   1. HERO V13 — "3 Momentos Narrativos no Mockup do Hero"
   10.5s de ciclo fluido em 3 atos sequenciais:
   · Momento 1 (0%–32%): Proposta gerada rápida + intervalo de leitura + clique em "Enviar proposta" (muda para "Proposta enviada")
   · Momento 2 (33%–64%): Proposta enviada (balão WhatsApp subindo rápido + check duplo + Cláudia digitando... + resposta de aprovação)
   · Momento 3 (65%–96%): Caiu na conta direto no fundo verde (sem container branco, 4 notificações brancas Pix em cascata + selo glass)
   · Transição (96%–100%): Fade suave de volta ao Momento 1 (zero CLS, 60fps GPU)
   ========================================================================== */

/* Timing & bindings universais do Hero */
.js-loop [data-loop="gerar"],
.js-loop [data-loop="gerar"] .hero-stage--1,
.js-loop [data-loop="gerar"] .hero-stage--1 .mock-rows .mock-row,
.js-loop [data-loop="gerar"] .hero-stage--1 .mock-total,
.js-loop [data-loop="gerar"] .hero-stage--1 .mock-total__amount,
.js-loop [data-loop="gerar"] .hero-stage--1 .mock-pix,
.js-loop [data-loop="gerar"] .hero-send-btn,
.js-loop [data-loop="gerar"] .hero-send-state--idle,
.js-loop [data-loop="gerar"] .hero-send-state--sent,
.js-loop [data-loop="gerar"] .hero-send-tap,
.js-loop [data-loop="gerar"] .hero-stage--2,
.js-loop [data-loop="gerar"] .hero-status-online,
.js-loop [data-loop="gerar"] .hero-status-typing,
.js-loop [data-loop="gerar"] .hero-chat-msg--out,
.js-loop [data-loop="gerar"] .hero-checks path,
.js-loop [data-loop="gerar"] .hero-chat-typing,
.js-loop [data-loop="gerar"] .hero-chat-msg--in,
.js-loop [data-loop="gerar"] .hero-chat-status,
.js-loop [data-loop="gerar"] .hero-stage--3,
.js-loop [data-loop="gerar"] .hero-stage-3__header,
.js-loop [data-loop="gerar"] .hero-push--1,
.js-loop [data-loop="gerar"] .hero-push--2,
.js-loop [data-loop="gerar"] .hero-push--3,
.js-loop [data-loop="gerar"] .hero-push--4,
.js-loop [data-loop="gerar"] .hero-stage--3 .hero-seal{
  animation-duration:var(--loop-hero);
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-fill-mode:both;
}

/* Transição do card .mock: no momento 3 o container branco fica transparente */
.js-loop [data-loop="gerar"]{ animation-name:hero-mock-bg; }

/* Momento 1: Proposta Gerada Rápida + Leitura + Enviar Proposta */
.js-loop [data-loop="gerar"] .hero-stage--1{ animation-name:hero-stage-1-flow; }
.js-loop [data-loop="gerar"] .hero-stage--1 .mock-rows .mock-row:nth-child(1){ animation-name:hero-row-1; }
.js-loop [data-loop="gerar"] .hero-stage--1 .mock-rows .mock-row:nth-child(2){ animation-name:hero-row-2; }
.js-loop [data-loop="gerar"] .hero-stage--1 .mock-rows .mock-row:nth-child(3){ animation-name:hero-row-3; }
.js-loop [data-loop="gerar"] .hero-stage--1 .mock-total{ animation-name:hero-total; }
.js-loop [data-loop="gerar"] .hero-stage--1 .mock-total__amount{ animation-name:hero-total-pulse; }
.js-loop [data-loop="gerar"] .hero-stage--1 .mock-pix{ animation-name:hero-pix; }
.js-loop [data-loop="gerar"] .hero-send-btn{ animation-name:hero-send-btn; }
.js-loop [data-loop="gerar"] .hero-send-state--idle{ animation-name:hero-send-idle; }
.js-loop [data-loop="gerar"] .hero-send-state--sent{ animation-name:hero-send-sent; }
.js-loop [data-loop="gerar"] .hero-send-tap{ animation-name:hero-send-tap; }

/* Momento 2: Proposta Enviada (WhatsApp com Typing Indicator) */
.js-loop [data-loop="gerar"] .hero-stage--2{ animation-name:hero-stage-2-flow; }
.js-loop [data-loop="gerar"] .hero-status-online{ animation-name:hero-status-online; }
.js-loop [data-loop="gerar"] .hero-status-typing{ animation-name:hero-status-typing; }
.js-loop [data-loop="gerar"] .hero-chat-msg--out{ animation-name:hero-chat-out; }
.js-loop [data-loop="gerar"] .hero-checks path{ animation-name:hero-chat-checks; }
.js-loop [data-loop="gerar"] .hero-chat-typing{ animation-name:hero-chat-typing; }
.js-loop [data-loop="gerar"] .hero-chat-msg--in{ animation-name:hero-chat-in; }
.js-loop [data-loop="gerar"] .hero-chat-status{ animation-name:hero-chat-status; }

/* Momento 3: Caiu na Conta (Direto no fundo verde com 4 pushes brancos) */
.js-loop [data-loop="gerar"] .hero-stage--3{ animation-name:hero-stage-3-flow; }
.js-loop [data-loop="gerar"] .hero-stage-3__header{ animation-name:hero-stage-3-header; }
.js-loop [data-loop="gerar"] .hero-push--1{ animation-name:hero-push-1; }
.js-loop [data-loop="gerar"] .hero-push--2{ animation-name:hero-push-2; }
.js-loop [data-loop="gerar"] .hero-push--3{ animation-name:hero-push-3; }
.js-loop [data-loop="gerar"] .hero-push--4{ animation-name:hero-push-4; }
.js-loop [data-loop="gerar"] .hero-stage--3 .hero-seal{ animation-name:hero-seal-3; }

/* --------------------------------------------------------------------------
   Keyframes — Container .mock
   -------------------------------------------------------------------------- */
@keyframes hero-mock-bg{
  0%, 63%{
    background:#FFFFFF;
  }
  66%, 94.5%{
    background:#F8FAFC;
  }
  97%, 100%{
    background:#FFFFFF;
  }
}

/* --------------------------------------------------------------------------
   Keyframes — Momento 1: Proposta Gerada Rápida (0%–32%)
   -------------------------------------------------------------------------- */
@keyframes hero-stage-1-flow{
  0%,29%{ opacity:1; transform:none; pointer-events:auto; }
  32%{ opacity:0; transform:translate3d(0,-8px,0); pointer-events:none; }
  32.1%,96.9%{ opacity:0; transform:translate3d(0,10px,0); pointer-events:none; }
  98.5%,100%{ opacity:1; transform:none; pointer-events:auto; }
}
@keyframes hero-row-1{
  0%,0.5%{ opacity:0; transform:translate3d(0,8px,0); }
  2%,29%{ opacity:1; transform:none; }
  32%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-row-2{
  0%,2%{ opacity:0; transform:translate3d(0,8px,0); }
  3.8%,29%{ opacity:1; transform:none; }
  32%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-row-3{
  0%,3.8%{ opacity:0; transform:translate3d(0,8px,0); }
  5.6%,29%{ opacity:1; transform:none; }
  32%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-total{
  0%,5.6%{ opacity:0; transform:translate3d(0,8px,0); }
  7.5%,29%{ opacity:1; transform:none; }
  32%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-total-pulse{
  0%,7%{ transform:scale(1); }
  9%{ transform:scale(1.05); }
  11%,100%{ transform:scale(1); }
}
@keyframes hero-pix{
  0%,7.5%{ opacity:0; transform:translate3d(0,8px,0); }
  10%,29%{ opacity:1; transform:none; }
  32%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-send-btn{
  0%,11%{ opacity:0; transform:translate3d(0,8px,0) scale(.96); }
  13.5%,20%{ opacity:1; transform:none; background:var(--bg-elev); border-color:var(--line); color:var(--text); }
  21%{ transform:scale(.95); }
  22%,29%{ opacity:1; transform:none; background:var(--success-soft); border-color:rgba(33,192,99,.35); color:var(--brand-text); }
  32%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-send-idle{
  0%,20.9%{ opacity:1; transform:none; }
  21.5%,100%{ opacity:0; transform:scale(.9); }
}
@keyframes hero-send-sent{
  0%,21.5%{ opacity:0; transform:scale(.9); }
  22%,29%{ opacity:1; transform:none; }
  32%,100%{ opacity:0; }
}
@keyframes hero-send-tap{
  0%,20.8%{ opacity:0; transform:scale(.3); }
  21.3%{ opacity:.75; transform:scale(1); }
  22.2%,100%{ opacity:0; transform:scale(2); }
}

/* --------------------------------------------------------------------------
   Keyframes — Momento 2: Proposta Enviada (WhatsApp) (33%–64%)
   -------------------------------------------------------------------------- */
@keyframes hero-stage-2-flow{
  0%,31.9%{ opacity:0; transform:translate3d(0,10px,0); pointer-events:none; }
  33%,61%{ opacity:1; transform:none; pointer-events:auto; }
  63.5%{ opacity:0; transform:translate3d(0,-8px,0); pointer-events:none; }
  63.6%,100%{ opacity:0; transform:translate3d(0,10px,0); pointer-events:none; }
}
@keyframes hero-status-online{
  0%,38%{ opacity:1; }
  39%,47.5%{ opacity:0; }
  48.5%,61%{ opacity:1; }
  63.5%,100%{ opacity:1; }
}
@keyframes hero-status-typing{
  0%,38%{ opacity:0; }
  39%,47.5%{ opacity:1; color:#25D366; }
  48.5%,100%{ opacity:0; }
}
@keyframes hero-chat-out{
  0%,33%{ opacity:0; transform:translate3d(0,14px,0) scale(.96); }
  35.5%,61%{ opacity:1; transform:none; }
  63.5%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-chat-checks{
  0%,35.5%{ stroke-dashoffset:1; }
  38%,100%{ stroke-dashoffset:0; }
}
@keyframes hero-chat-typing{
  0%,38%{ opacity:0; transform:translate3d(0,8px,0) scale(.9); max-height:0; padding-top:0; padding-bottom:0; margin:0; border-color:transparent; pointer-events:none; }
  39.5%,47%{ opacity:1; transform:none; max-height:40px; padding:7px 12px; margin:0; border-color:var(--line); }
  48.5%,100%{ opacity:0; transform:translate3d(0,-6px,0) scale(.95); max-height:0; padding-top:0; padding-bottom:0; margin:0; border-color:transparent; pointer-events:none; }
}
@keyframes hero-chat-in{
  0%,48%{ opacity:0; transform:translate3d(0,14px,0) scale(.96); }
  50.5%,61%{ opacity:1; transform:none; }
  63.5%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-chat-status{
  0%,51.5%{ opacity:0; transform:translate3d(0,6px,0); }
  53.5%,61%{ opacity:1; transform:none; }
  63.5%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}

/* --------------------------------------------------------------------------
   Keyframes — Momento 3: Caiu na Conta (65%–96%)
   -------------------------------------------------------------------------- */
@keyframes hero-stage-3-flow{
  0%,63.9%{ opacity:0; transform:translate3d(0,10px,0); pointer-events:none; }
  65%,94.5%{ opacity:1; transform:none; pointer-events:auto; }
  97%{ opacity:0; transform:translate3d(0,-8px,0); pointer-events:none; }
  97.1%,100%{ opacity:0; transform:translate3d(0,10px,0); pointer-events:none; }
}
@keyframes hero-stage-3-header{
  0%,64.5%{ opacity:0; transform:translate3d(0,6px,0); }
  66%,94.5%{ opacity:1; transform:none; }
  97%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-push-1{
  0%,65%{ opacity:0; transform:translate3d(0,-8px,0) scale(.97); }
  67.5%{ opacity:1; transform:translate3d(0,1px,0) scale(1.01); }
  69%,94.5%{ opacity:1; transform:none; }
  97%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-push-2{
  0%,69.5%{ opacity:0; transform:translate3d(0,-8px,0) scale(.97); }
  72%{ opacity:1; transform:translate3d(0,1px,0) scale(1.01); }
  73.5%,94.5%{ opacity:1; transform:none; }
  97%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-push-3{
  0%,74%{ opacity:0; transform:translate3d(0,-8px,0) scale(.97); }
  76.5%{ opacity:1; transform:translate3d(0,1px,0) scale(1.01); }
  78%,94.5%{ opacity:1; transform:none; }
  97%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-push-4{
  0%,78.5%{ opacity:0; transform:translate3d(0,-8px,0) scale(.97); }
  81%{ opacity:1; transform:translate3d(0,1px,0) scale(1.01); }
  82.5%,94.5%{ opacity:1; transform:none; }
  97%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}
@keyframes hero-seal-3{
  0%,83%{ opacity:0; transform:translate3d(0,6px,0); }
  85.5%,94.5%{ opacity:1; transform:none; }
  97%,100%{ opacity:0; transform:translate3d(0,-6px,0); }
}

/* ==========================================================================
   2. FLUXO V11 — "enviado + resposta Cláudia → aguardando/Pix recebido → push Pix"
   8s: movimentos ágeis, spring easings e repouso de leitura (~1.8s) no fim.
   ========================================================================== */

.js-loop [data-loop="fluxo"] .flow-step,
.js-loop [data-loop="fluxo"] .flow-step::before,
.js-loop [data-loop="fluxo"] .flow-step::after,
.js-loop [data-loop="fluxo"] .flow-rail > i,
.js-loop [data-loop="fluxo"] .flow-msg--out,
.js-loop [data-loop="fluxo"] .flow-msg--out .flow-msg__text,
.js-loop [data-loop="fluxo"] .flow-msg--out .flow-msg__link,
.js-loop [data-loop="fluxo"] .flow-msg--out .flow-msg__meta,
.js-loop [data-loop="fluxo"] .flow-msg--in,
.js-loop [data-loop="fluxo"] .flow-checks,
.js-loop [data-loop="fluxo"] .flow-checks path,
.js-loop [data-loop="fluxo"] .flow-state__head,
.js-loop [data-loop="fluxo"] .flow-state__amount-row,
.js-loop [data-loop="fluxo"] .flow-dot--wait,
.js-loop [data-loop="fluxo"] .flow-tap,
.js-loop [data-loop="fluxo"] .flow-status--wait,
.js-loop [data-loop="fluxo"] .flow-status--ok,
.js-loop [data-loop="fluxo"] .flow-push,
.js-loop [data-loop="fluxo"] .flow-push::after,
.js-loop [data-loop="fluxo"] .flow-push__ico,
.js-loop [data-loop="fluxo"] .flow-push__top,
.js-loop [data-loop="fluxo"] .flow-push__title,
.js-loop [data-loop="fluxo"] .flow-push__text,
.js-loop [data-loop="fluxo"] .flow-seal{
  animation-duration:var(--loop-fluxo);
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-fill-mode:both;
}

/* card ativo: eleva 4px; a camada ::after acende a borda e o wash verde */
.js-loop [data-loop="fluxo"] .flow-step:nth-child(1){ animation-name:flow-card-1; }
.js-loop [data-loop="fluxo"] .flow-step:nth-child(2){ animation-name:flow-card-2; }
.js-loop [data-loop="fluxo"] .flow-step:nth-child(3){ animation-name:flow-card-3; }
.js-loop [data-loop="fluxo"] .flow-step:nth-child(1)::after{ animation-name:flow-glow-1; }
.js-loop [data-loop="fluxo"] .flow-step:nth-child(2)::after{ animation-name:flow-glow-2; }
.js-loop [data-loop="fluxo"] .flow-step:nth-child(3)::after{ animation-name:flow-glow-3; }
.js-loop [data-loop="fluxo"] .flow-step:nth-child(1)::before{ animation-name:flow-glow-1; }
.js-loop [data-loop="fluxo"] .flow-step:nth-child(2)::before{ animation-name:flow-glow-2; }
.js-loop [data-loop="fluxo"] .flow-step:nth-child(3)::before{ animation-name:flow-glow-3; }
.js-loop [data-loop="fluxo"] .flow-rail > i{ animation-name:flow-rail; }

/* micro-eventos internos dos 3 quadros — montagem progressiva:
   quadro 1 (envio → link → hora → check → resposta), quadro 2 (cabeçalho →
   valor → aguardando → toque → Pix recebido), quadro 3 (push → ícone/hora →
   título → valor → selo). Nada muda de altura: só opacity/transform. */
.js-loop [data-loop="fluxo"] .flow-msg--out{ animation-name:flow-msg-out-in; }
.js-loop [data-loop="fluxo"] .flow-msg--out .flow-msg__text{ animation-name:flow-text-in; }
.js-loop [data-loop="fluxo"] .flow-msg--out .flow-msg__link{ animation-name:flow-link-in; }
.js-loop [data-loop="fluxo"] .flow-msg--out .flow-msg__meta{ animation-name:flow-meta-in; }
.js-loop [data-loop="fluxo"] .flow-checks{ animation-name:flow-check-pop; }
.js-loop [data-loop="fluxo"] .flow-checks path{ animation-name:flow-check-draw; }
.js-loop [data-loop="fluxo"] .flow-msg--in{ animation-name:flow-reply-in; }
.js-loop [data-loop="fluxo"] .flow-state__head{ animation-name:flow-head-in; }
.js-loop [data-loop="fluxo"] .flow-state__amount-row{ animation-name:flow-amount-in; }
.js-loop [data-loop="fluxo"] .flow-dot--wait{ animation-name:flow-dot-pulse; }
.js-loop [data-loop="fluxo"] .flow-tap{ animation-name:flow-tap; }
.js-loop [data-loop="fluxo"] .flow-status--wait{ animation-name:flow-wait; }
.js-loop [data-loop="fluxo"] .flow-status--ok{ animation-name:flow-ok; }
.js-loop [data-loop="fluxo"] .flow-push{ animation-name:flow-push-pop; }
.js-loop [data-loop="fluxo"] .flow-push::after{ animation-name:flow-push-ring; }
.js-loop [data-loop="fluxo"] .flow-push__ico{ animation-name:flow-push-ico-in; }
.js-loop [data-loop="fluxo"] .flow-push__top{ animation-name:flow-push-top-in; }
.js-loop [data-loop="fluxo"] .flow-push__title{ animation-name:flow-push-title-in; }
.js-loop [data-loop="fluxo"] .flow-push__text{ animation-name:flow-push-text-in; }
.js-loop [data-loop="fluxo"] .flow-seal{ animation-name:flow-seal; }

/* Palco de cada quadro: antes do seu momento fica em "fantasma" (12%), não em zero.
   Assim a caixa nunca aparece como um retângulo morto — dá para ver que há uma
   tela ali esperando a vez. Ao entrar, o palco sobe para opacidade cheia. */
.js-loop [data-loop="fluxo"] .flow-step:nth-child(2) .flow-stage{ animation:flow-stage-2 var(--loop-fluxo) linear infinite both; }
.js-loop [data-loop="fluxo"] .flow-step:nth-child(3) .flow-stage{ animation:flow-stage-3 var(--loop-fluxo) linear infinite both; }
@keyframes flow-stage-2{
  0%, 22%{ opacity:0; }
  25%, 96%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes flow-stage-3{
  0%, 49%{ opacity:0; }
  52%, 96%{ opacity:1; }
  100%{ opacity:0; }
}

/* Etapa ativa = o card sobe 4px e acende (borda + wash). */
@keyframes flow-card-1{
  0%{ transform:translate3d(0,0,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  3%, 22%{ transform:translate3d(0,-4px,0); animation-timing-function:ease-out; }
  26%, 100%{ transform:translate3d(0,0,0); }
}
@keyframes flow-card-2{
  0%, 23%{ transform:translate3d(0,0,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  27%, 49%{ transform:translate3d(0,-4px,0); animation-timing-function:ease-out; }
  53%, 100%{ transform:translate3d(0,0,0); }
}
@keyframes flow-card-3{
  0%, 50%{ transform:translate3d(0,0,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  54%, 78%{ transform:translate3d(0,-4px,0); animation-timing-function:ease-out; }
  82%, 100%{ transform:translate3d(0,0,0); }
}

/* mesma janela de cada card, só que na camada de luz */
@keyframes flow-glow-1{
  0%{ opacity:0; animation-timing-function:ease-out; }
  3%, 22%{ opacity:1; animation-timing-function:ease-out; }
  26%, 100%{ opacity:0; }
}
@keyframes flow-glow-2{
  0%, 23%{ opacity:0; animation-timing-function:ease-out; }
  27%, 49%{ opacity:1; animation-timing-function:ease-out; }
  53%, 100%{ opacity:0; }
}
@keyframes flow-glow-3{
  0%, 50%{ opacity:0; animation-timing-function:ease-out; }
  54%, 78%{ opacity:1; animation-timing-function:ease-out; }
  82%, 100%{ opacity:0; }
}

/* trilho: mostra a passagem do foco 1 → 2 → 3 (só no desktop) */
@keyframes flow-rail{
  0%, 2%{ transform:scaleX(.12); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  24%{ transform:scaleX(.38); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  51%{ transform:scaleX(.72); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  72%, 96%{ transform:scaleX(1); animation-timing-function:ease-in-out; }
  99%, 100%{ transform:scaleX(.12); }
}

/* --------------------------------------------------------------------------
   Quadro 1 — montagem ágil em 2 momentos:
   (a) bolha enviada entra com snap → texto → link → hora → duplo check (pop + traço rápido);
   (b) resposta da Cláudia sobe ágil de baixo.
   -------------------------------------------------------------------------- */
@keyframes flow-msg-out-in{
  0%{ opacity:0; transform:translate3d(0,10px,0) scale(.97); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  3.5%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; transform:translate3d(0,6px,0) scale(.98); }
}
@keyframes flow-text-in{
  0%, 1%{ opacity:0; transform:translate3d(0,4px,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  4%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; }
}
@keyframes flow-link-in{
  0%, 2.5%{ opacity:0; transform:translate3d(0,4px,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  5.5%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; }
}
@keyframes flow-meta-in{
  0%, 4%{ opacity:0; transform:translate3d(0,3px,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  7%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; }
}
/* o duplo check azul já crava com pop rápido e traço dinâmico */
@keyframes flow-check-pop{
  0%, 5%{ opacity:0; transform:scale(.4); animation-timing-function:cubic-bezier(0.34, 1.5, 0.64, 1); }
  8%{ opacity:1; transform:scale(1.22); animation-timing-function:ease-out; }
  10%, 94%{ opacity:1; transform:scale(1); }
  98%, 100%{ opacity:0; transform:scale(.9); }
}
@keyframes flow-check-draw{
  0%, 6%{ stroke-dashoffset:1; animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  10%, 100%{ stroke-dashoffset:0; }
}
@keyframes flow-reply-in{
  0%, 9%{ opacity:0; transform:translate3d(0,12px,0) scale(.97); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  14%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; transform:translate3d(0,8px,0) scale(.98); }
}

/* --------------------------------------------------------------------------
   Quadro 2 — cabeçalho → valor → "Aguardando sinal" (dot pulsando) → toque sem demora →
   virada para "Pix recebido" com impacto visual imediato.
   -------------------------------------------------------------------------- */
@keyframes flow-head-in{
  0%, 24%{ opacity:0; transform:translate3d(0,5px,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  28%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; }
}
@keyframes flow-amount-in{
  0%, 26%{ opacity:0; transform:translate3d(0,5px,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  30%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; }
}
@keyframes flow-wait{
  0%, 28%{ opacity:0; transform:translate3d(0,4px,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  31%, 40%{ opacity:1; transform:none; }
  42%, 100%{ opacity:0; transform:translate3d(0,-4px,0) scale(.96); }
}
/* o dot laranja pulsa enquanto o pagamento está pendente */
@keyframes flow-dot-pulse{
  0%, 28%{ opacity:.6; transform:scale(1); }
  31%, 34%{ opacity:1; transform:scale(1.3); }
  37%{ opacity:.6; transform:scale(1); }
  40%, 100%{ opacity:.9; transform:scale(1.15); }
}
/* ripple do toque dispara sem demora aos 36% */
@keyframes flow-tap{
  0%, 36%{ opacity:0; transform:scale(.4); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  38%{ opacity:.75; transform:scale(.85); }
  41%{ opacity:0; transform:scale(1.9); }
  100%{ opacity:0; transform:scale(1.9); }
}
/* virada para "Pix recebido" com impacto imediato e pop firme */
@keyframes flow-ok{
  0%, 40%{ opacity:0; transform:translate3d(0,4px,0) scale(.92); animation-timing-function:cubic-bezier(0.34, 1.4, 0.64, 1); }
  43%{ opacity:1; transform:translate3d(0,-1px,0) scale(1.05); animation-timing-function:ease-out; }
  46%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; transform:translate3d(0,4px,0) scale(.96); }
}

/* --------------------------------------------------------------------------
   Quadro 3 — push bancário entra com escala e leve bounce (pop firme),
   ícone acende, título/texto e selo "100% na sua conta" entra direto.
   Repouso agradável de ~1.5s a 2s (70%–94%) antes do reinício.
   -------------------------------------------------------------------------- */
@keyframes flow-push-pop{
  0%, 51%{ opacity:0; transform:translate3d(0,12px,0) scale(.93); animation-timing-function:cubic-bezier(0.34, 1.35, 0.64, 1); }
  56%{ opacity:1; transform:translate3d(0,-3px,0) scale(1.03); animation-timing-function:ease-out; }
  59%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; transform:translate3d(0,6px,0) scale(.98); }
}
@keyframes flow-push-ring{
  0%, 52%{ opacity:0; animation-timing-function:ease-out; }
  56%, 86%{ opacity:1; }
  94%, 100%{ opacity:0; }
}
@keyframes flow-push-ico-in{
  0%, 52%{ opacity:0; transform:scale(.65); animation-timing-function:cubic-bezier(0.34, 1.45, 0.64, 1); }
  56%{ opacity:1; transform:scale(1.12); animation-timing-function:ease-out; }
  59%, 94%{ opacity:1; transform:scale(1); }
  98%, 100%{ opacity:0; }
}
@keyframes flow-push-top-in{
  0%, 54%{ opacity:0; transform:translate3d(0,4px,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  57%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; }
}
@keyframes flow-push-title-in{
  0%, 56%{ opacity:0; transform:translate3d(0,4px,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  60%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; }
}
@keyframes flow-push-text-in{
  0%, 58%{ opacity:0; transform:translate3d(0,4px,0); animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1); }
  62%, 94%{ opacity:1; transform:none; }
  98%, 100%{ opacity:0; }
}
@keyframes flow-seal{
  0%, 63%{ opacity:0; transform:translate3d(0,4px,0) scale(.92); animation-timing-function:cubic-bezier(0.34, 1.4, 0.64, 1); }
  67%{ opacity:1; transform:translate3d(0,-1px,0) scale(1.05); animation-timing-function:ease-out; }
  70%, 94%{ opacity:1; transform:translate3d(0,0,0) scale(1); }
  98%, 100%{ opacity:0; transform:translate3d(0,2px,0) scale(.97); }
}

/* ==========================================================================
   3. ESTÁTICO — estrutura dos 3 momentos do Hero + 3 quadros de #passos
   ========================================================================== */

/* Hero: palco dos 3 momentos com sobreposição em grid (zero CLS) */
.hero-stages{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-items:start;
  min-height:388px;
  position:relative;
  width:100%;
  min-width:0;
}
.hero-stage{
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
}
/* No-JS e fallback: momento 1 visível por padrão */
.hero-stage--2,
.hero-stage--3{
  display:none;
}
.hero-stage--1{
  display:flex;
}
.js-loop [data-loop="gerar"] .hero-stage--2,
.js-loop [data-loop="gerar"] .hero-stage--3{
  display:flex;
}

/* Badge de momento do Hero */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2.5px 8px;
  border-radius:var(--radius-pill);
  background:var(--success-soft);
  color:var(--brand-text);
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  flex-shrink:0;
}
@media(max-width:480px){
  .hero-badge{
    font-size:9.5px;
    padding:2px 5px;
    gap:3.5px;
    letter-spacing:-0.01em;
  }
}
.hero-badge__dot{
  width:5.5px;
  height:5.5px;
  border-radius:50%;
  background:var(--brand);
}
.hero-badge--glass{
  background:rgba(255,255,255,.22) !important;
  color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.35) !important;
  backdrop-filter:blur(8px);
}
.hero-badge--glass .hero-badge__dot{
  background:#FFFFFF !important;
  box-shadow:0 0 8px #FFFFFF !important;
}

/* Hero: Momento 1 — Botão Secundário de Envio */
.hero-send-wrap{
  display:flex;
  justify-content:center;
}
.hero-send-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:38px;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.1);
  background:#F4F5F7;
  color:#111827;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.hero-send-state{
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:opacity .15s ease, transform .15s ease;
}
.hero-send-state--idle svg{
  color:#25D366;
}
.hero-send-state--sent{
  position:absolute;
  color:#0E7036;
}
.hero-send-state--sent svg{
  color:#0E7036;
}
.hero-send-tap{
  position:absolute;
  inset:0;
  margin:auto;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(33,192,99,.35);
  pointer-events:none;
  opacity:0;
}

/* Hero: Momento 2 — Chat WhatsApp com Typing Indicator */
.hero-chat-status-text{
  position:relative;
  height:16px;
  overflow:hidden;
}
.hero-status-online,
.hero-status-typing{
  position:absolute;
  left:0;
  top:0;
  line-height:16px;
  transition:opacity .2s ease;
}
.hero-status-typing{
  color:#25D366 !important;
  font-weight:600;
}
.hero-chat-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hero-chat-msg{
  padding:10px 13px;
  border-radius:14px;
  font-size:13px;
  line-height:1.4;
  min-width:0;
}
.hero-chat-msg--out{
  align-self:stretch;
  border-radius:14px 14px 4px 14px;
  background:#D9FDD3;
  border:1px solid rgba(37,211,102,.3);
  color:#111B21;
}
.hero-chat-typing{
  align-self:flex-start;
  display:flex;
  align-items:center;
  padding:7px 12px;
  border-radius:14px 14px 14px 3px;
  background:var(--bg-elev);
  border:1px solid var(--line);
  width:fit-content;
}
.hero-typing-bubble{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.hero-typing-dot{
  width:5.5px;
  height:5.5px;
  border-radius:50%;
  background:#8696A0;
  animation:hero-dot-bounce 1.1s infinite ease-in-out;
}
.hero-typing-dot:nth-child(2){ animation-delay:.18s; }
.hero-typing-dot:nth-child(3){ animation-delay:.36s; }

@keyframes hero-dot-bounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.4; }
  30%{ transform:translateY(-3.5px); opacity:1; }
}

.hero-chat-msg--in{
  align-self:flex-start;
  max-width:92%;
  border-radius:14px 14px 14px 4px;
  background:var(--bg-elev);
  border:1px solid var(--line);
  color:#111B21;
}
.hero-chat-author{
  margin:0 0 2px;
  font-size:11px;
  font-weight:600;
  color:var(--brand-text);
}
.hero-chat-text{
  margin:0;
  font-size:13px;
  line-height:1.4;
  color:var(--text);
}
.hero-chat-link-box{
  margin-top:4px;
}
.hero-chat-link{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  color:var(--brand-text);
  text-decoration:underline;
  text-underline-offset:2px;
}
.hero-chat-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  font-size:10.5px;
  color:var(--text-2);
  margin-top:3px;
}
.hero-checks{
  color:#53BDEB;
  flex:none;
}
.hero-checks path{
  stroke-dasharray:1;
}
.hero-chat-status{
  display:flex;
  justify-content:center;
  margin-top:6px;
}
.hero-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--success-soft);
  color:var(--brand-text);
  border:1px solid rgba(33,192,99,.3);
  font-size:11.5px;
  font-weight:600;
  text-align:center;
}

/* Hero: Momento 3 — Notificações Pix no Celular (Push nativo iOS/Android) */
.hero-stage-3__header{
  border-bottom:1px solid var(--line) !important;
}
.hero-pushes{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  min-width:0;
}
@media(max-width:767px){
  .hero-pushes{
    gap:6px;
  }
}
.hero-push{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 13px;
  border-radius:18px;
  background:rgba(255,255,255,0.95) !important;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 8px 24px -4px rgba(0,0,0,0.10), 0 2px 6px -1px rgba(0,0,0,0.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:#111827 !important;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
@media(max-width:767px){
  .hero-push{
    padding:7px 9px;
    gap:8px;
    border-radius:14px;
  }
}
.hero-push__ico{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:none;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(50,188,173,.22) 0%, rgba(33,192,99,.22) 100%);
  border:1px solid rgba(50,188,173,.35);
  box-shadow:0 2px 6px rgba(50,188,173,.15);
}
@media(max-width:767px){
  .hero-push__ico{
    width:30px;
    height:30px;
    border-radius:8px;
  }
  .hero-push__ico svg{
    width:15px;
    height:15px;
  }
}
.hero-push__body{
  flex:1 1 auto;
  min-width:0;
}
.hero-push__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  min-width:0;
}
.hero-push__app{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#6B7280;
  display:inline-flex;
  align-items:center;
  gap:4.5px;
  flex-shrink:0;
}
@media(max-width:767px){
  .hero-push__app{
    font-size:9px;
    gap:3.5px;
  }
}
.hero-push__app::before{
  content:'';
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#32BCAD;
}
.hero-push--1 .hero-push__app::before{ background:#820AD1; }
.hero-push--2 .hero-push__app::before{ background:#FF7A00; }
.hero-push--3 .hero-push__app::before{ background:#EC7000; }
.hero-push--4 .hero-push__app::before{ background:#242424; }
.hero-push__meta{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.hero-push__chip{
  font-size:9.5px;
  font-weight:600;
  padding:1.5px 7px;
  border-radius:var(--radius-pill);
  background:rgba(50,188,173,.16);
  color:#00875A;
  white-space:nowrap;
}
@media(max-width:767px){
  .hero-push__chip{
    font-size:8.5px;
    padding:1px 5px;
  }
}
.hero-push__chip--full{
  background:rgba(33,192,99,.18);
  color:#0E7036;
}
.hero-push__time{
  font-size:10.5px;
  color:#9CA3AF !important;
  flex-shrink:0;
  white-space:nowrap;
}
@media(max-width:767px){
  .hero-push__time{
    font-size:9px;
  }
}
.hero-push__title{
  margin:2px 0 0;
  font-size:12.5px;
  font-weight:600;
  color:#111827 !important;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:767px){
  .hero-push__title{
    margin:1px 0 0;
    font-size:11.5px;
    line-height:1.2;
  }
}
.hero-push__title strong{
  color:#00875A !important;
  font-family:var(--font-display);
  font-size:13.5px;
}
@media(max-width:767px){
  .hero-push__title strong{
    font-size:12px;
  }
}
.hero-push--4 .hero-push__title strong{
  color:#0E7036 !important;
}
.hero-push__text{
  margin:1px 0 0;
  font-size:11px;
  color:#6B7280 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:767px){
  .hero-push__text{
    margin:1px 0 0;
    font-size:10px;
  }
}
.hero-seal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--success-soft);
  border:1px solid rgba(33,192,99,.25);
  color:var(--brand-text);
  font-size:11.5px;
  font-weight:600;
  margin-top:4px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
}
@media(max-width:767px){
  .hero-seal{
    font-size:10px;
    padding:3px 8px;
    gap:4px;
    margin-top:2px;
  }
}
.hero-seal svg{
  color:var(--brand);
}

/* selo do hero */
.mock-seal{
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  margin:12px auto 0;
  padding:5px 12px 5px 5px;
  border-radius:var(--radius-pill);
  background:var(--success-soft);
  color:var(--brand-text);
  font-size:13px;
  font-weight:600;
  line-height:1.33;
}
.mock-seal__ring{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:none;
  border-radius:var(--radius-pill);
  background:var(--brand);
  color:var(--brand-ink);
}
.mock-seal__ring svg{ width:13px; height:13px; display:block; }
.mock-seal__check{ stroke-dasharray:1; }

/* grade dos 3 passos na banda noturna */
.flow-steps{
  display:grid;
  gap:var(--space-4);
  margin:var(--space-6) 0 0;
  padding:0;
  list-style:none;
}
@media (min-width:900px){
  .flow-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* trilho do foco 1 → 2 → 3: só no desktop */
.flow-rail{ display:none; }
@media (min-width:900px){
  .flow-rail{
    display:block;
    height:2px;
    margin:0;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.12);
    overflow:hidden;
  }
  .flow-rail > i{
    display:block;
    height:100%;
    border-radius:var(--radius-pill);
    background:var(--brand);
    transform:scaleX(.12);
    transform-origin:left center;
  }
}

.flow-step{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding:var(--space-5);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.045);
  color:var(--night-ink);
  min-width:0;
}
/* wash verde por baixo do conteúdo (z-index -1 + isolation no card) */
.flow-step::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:radial-gradient(120% 90% at 50% 0%, rgba(33,192,99,.22) 0%, rgba(33,192,99,0) 72%);
  opacity:0;
  pointer-events:none;
}
/* anel de foco: 1px de marca, por opacidade — nenhum border-color animado */
.flow-step::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid var(--brand);
  box-shadow:0 12px 32px -12px rgba(33,192,99,.55);
  opacity:0;
  pointer-events:none;
}

/* Palco de cada etapa com a MESMA altura mínima e distribuição flexível */
.flow-stage,
.flow-bubble,
.flow-actions,
.flow-pix{
  flex:1 1 auto;
  min-height:148px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.flow-step__label{
  margin:0;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--night-body);
}
.flow-step__cap{
  margin:auto 0 0;
  font-size:var(--fs-sm);
  line-height:1.43;
  color:var(--night-body);
}

/* --------------------------------------------------------------------------
   QUADRO 1 — Conversa WhatsApp (envio do prestador + resposta da Cláudia)
   -------------------------------------------------------------------------- */
.flow-chat{
  gap:8px;
}
.flow-msg{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
  line-height:1.4;
  color:#FFFFFF;
  min-width:0;
}
/* Mensagem enviada pelo prestador (verde escuro estilo WhatsApp Dark) */
.flow-msg--out{
  align-self:stretch;
  border-radius:14px 14px 4px 14px;
  background:rgba(33,192,99,.16);
  border:1px solid rgba(33,192,99,.32);
}
/* Resposta recebida da cliente Cláudia Lopes */
.flow-msg--in{
  align-self:flex-start;
  max-width:94%;
  border-radius:14px 14px 14px 4px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}
.flow-msg__author{
  margin:0;
  font-size:11px;
  font-weight:600;
  color:var(--night-success);
  letter-spacing:.01em;
}
.flow-msg__text{
  margin:0;
  color:#FFFFFF;
  word-break:break-word;
}
.flow-msg__text strong{
  font-weight:600;
  color:#FFFFFF;
}
.flow-msg__link{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--night-success);
  text-decoration:underline;
  text-underline-offset:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.flow-msg__meta{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  align-self:flex-end;
  font-size:11px;
  line-height:1;
  color:var(--night-body);
}
.flow-checks{
  color:#53BDEB; /* azul de leitura do WhatsApp, 6,4:1 sobre fundo escuro */
  flex:none;
}
/* pathLength="1" no SVG: dasharray 1 = traço inteiro; a animação desenha de 1 → 0 */
.flow-checks path{ stroke-dasharray:1; }

/* --------------------------------------------------------------------------
   QUADRO 2 — Aguardando sinal do cliente → Pix recebido
   -------------------------------------------------------------------------- */
.flow-state-card{
  gap:12px;
  padding:14px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
}
.flow-state__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:12px;
}
.flow-state__client{
  font-weight:600;
  color:#FFFFFF;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.flow-state__total{
  color:var(--night-body);
  white-space:nowrap;
}
.flow-state__amount-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.flow-state__kicker{
  font-size:12px;
  color:var(--night-body);
}
.flow-state__amount{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  color:#FFFFFF;
}
.flow-actions{
  position:relative;
  display:grid;
  place-items:center;
  min-height:44px;
  flex:0 0 auto;
}
.flow-actions > *{ grid-area:1 / 1; }
.flow-dot{
  width:7px;
  height:7px;
  border-radius:9999px;
  background:currentColor;
  flex:none;
}
.flow-dot--wait{
  background:#F5A623;
  box-shadow:0 0 0 3px rgba(245,166,35,.22);
}
.flow-tap{
  width:52px;
  height:52px;
  border-radius:var(--radius-pill);
  border:2px solid var(--brand);
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   QUADRO 3 — Notificação estilo celular com logotipo do Pix
   -------------------------------------------------------------------------- */
.flow-push-wrap{
  gap:10px;
}
.flow-push{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 14px;
  border-radius:18px;
  background:rgba(18,22,27,.92);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55);
  min-width:0;
}
/* Anel de destaque quando a notificação chega no Quadro 3 */
.flow-push::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(50,188,173,.75);
  box-shadow:0 0 24px -6px rgba(50,188,173,.45);
  opacity:0;
  pointer-events:none;
}
.flow-push__ico{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:none;
  border-radius:11px;
  background:rgba(50,188,173,.14);
  border:1px solid rgba(50,188,173,.35);
}
/* logotipo oficial do Pix (Phosphor pix-logo-fill) já vem com fill="#32BCAD" */
.flow-push__ico svg{ display:block; }
.flow-push__body{
  flex:1 1 auto;
  min-width:0;
}
/* sem "Seu Banco · Pix": a linha fica só com o horário, alinhado à direita */
.flow-push__top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  font-size:11px;
  line-height:1.2;
  color:var(--night-body);
}
.flow-push__time{
  color:var(--night-body);
  flex:none;
}
.flow-push__title{
  margin:3px 0 0;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  color:#FFFFFF;
}
.flow-push__text{
  margin:2px 0 0;
  font-size:13px;
  line-height:1.4;
  color:var(--night-body);
  word-break:break-word;
}
.flow-push__text strong{
  color:#FFFFFF;
  font-weight:600;
}

.flow-seal{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:5px 11px;
  border-radius:var(--radius-pill);
  background:rgba(33,192,99,.16);
  color:var(--night-success);
  font-size:12px;
  font-weight:600;
  line-height:1.3;
}

/* status sobre vidro escuro: os tons claros do DS não têm fundo suficiente,
   então inverte para o par escuro→verde-claro com contraste WCAG AA */
.section--night .flow-step .status-pending{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#FFFFFF; /* 15,4:1 sobre o vidro escuro */
}
.section--night .flow-step .status-ok{
  background:rgba(33,192,99,.20);
  border:1px solid rgba(33,192,99,.45);
  color:var(--night-success);   /* 9,65:1 medido sobre o chip no vidro escuro */
}

/* ==========================================================================
   4. OFERTA — “a coluna vencedora ganha o preço”
   A seção vende uma comparação: 468/ano vs 67 único. A animação não decora,
   ela repete a conclusão — a célula do AdiantaZap pulsa devagar e o CTA
   chama atenção duas vezes, depois silencia.
   ========================================================================== */

/* 4.1 chip de lançamento: uma faixa de luz passa a cada 6s */
.js-loop [data-loop="oferta"] .chip--shine{
  position:relative;
  overflow:hidden;
}
.js-loop [data-loop="oferta"] .chip--shine::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg, transparent 25%, rgba(255,255,255,.75) 50%, transparent 75%);
  opacity:0;
  transform:translate3d(-120%,0,0);
  animation:chip-shine 6s ease-out infinite;
}
@keyframes chip-shine{
  0%, 72%{ opacity:0; transform:translate3d(-120%,0,0); }
  76%{ opacity:.9; }
  88%, 100%{ opacity:0; transform:translate3d(120%,0,0); }
}

/* 4.2 célula vencedora: background gradient verde suave com transição refinada */
.compare-cell--win{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(33, 192, 99, 0.14) 0%, rgba(33, 192, 99, 0.04) 100%) !important;
  transition:background 0.4s ease;
}
.js-loop [data-loop="oferta"] .compare-cell--win::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(33, 192, 99, 0.18), transparent 70%);
  pointer-events:none;
  z-index:0;
  animation:win-glow 4.8s ease-in-out infinite alternate;
}
@keyframes win-glow{
  0%{ opacity:0.4; }
  100%{ opacity:1; }
}
/* o preço acompanha com pulso sutil: 2% é o máximo antes de parecer “piscando” */
.js-loop [data-loop="oferta"] .compare-price{
  display:inline-block;
  transform-origin:left center;
  animation:win-price 4.2s ease-in-out infinite;
}
@keyframes win-price{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.02); }
}

/* 4.3 economia: entrada única */
.js-loop [data-loop="oferta"] .save-value{
  display:inline-block;
  transform-origin:left bottom;
  animation:save-land .7s cubic-bezier(.16,1,.3,1) .2s 1 both;
}
@keyframes save-land{
  from{ transform:translate3d(0,8px,0) scale(.96); }
  to{ transform:none; }
}

/* 4.4 CTA: dois brilhos e silêncio quando NÃO usa .btn--beam (evita colisão de especificidade) */
.js-loop [data-loop="oferta"] .btn-primary:not(.btn--beam)::after{
  animation:cta-nudge 9s ease-out 2.5s 2 both;
}
@keyframes cta-nudge{
  0%, 78%{ opacity:0; transform:translate3d(-120%,0,0); }
  82%{ opacity:.55; }
  92%, 100%{ opacity:0; transform:translate3d(120%,0,0); }
}
/* o hover continua ganhando do brilho automático (exceto em .btn--beam) */
@media (hover:hover) and (pointer:fine){
  .js-loop [data-loop="oferta"] .btn-primary:not(.btn--beam):hover::after{
    animation:sheen .52s ease-out;
  }
}

/* 4.5 barra que mostra a proporção 401/468 cobrindo 100% da largura */
.compare-save{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  width:100%;
}
.compare-save > div{
  width:100%;
}
.save-bar{
  display:flex;
  width:100%;
  height:8px;
  margin-top:12px;
  border-radius:var(--radius-pill);
  background:var(--line-soft);
  overflow:hidden;
}
.save-bar > i{
  display:block;
  height:100%;
  border-radius:var(--radius-pill);
  background:var(--brand);
  transform-origin:left center;
}
.js-loop [data-loop="oferta"] .save-bar > i{
  animation:bar-fill 1.1s cubic-bezier(.16,1,.3,1) .35s 1 both;
}
@keyframes bar-fill{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

/* ==========================================================================
   5. ACESSIBILIDADE E SEM-JS — estado final legível
   ========================================================================== */

/* Sem .js-loop ou em prefers-reduced-motion: no Quadro 2 mostra o estado final
   confirmado ("Pix recebido") ou empilha sem colisão. Aqui deixamos ambos os
   estados visíveis lado a lado em flex-wrap para quem desativa movimento
   enxergar a transição Aguardando → Pix recebido completa. */
html:not(.js-loop) [data-loop="fluxo"] .flow-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:6px;
}
html:not(.js-loop) [data-loop="fluxo"] .flow-tap{
  display:none;
}

@media (prefers-reduced-motion: reduce){
  .js-loop [data-loop] *,
  .js-loop [data-loop] *::before,
  .js-loop [data-loop] *::after{
    animation:none !important;
  }
  .js-loop [data-loop="gerar"] .hero-stage--1{
    display:flex !important;
    opacity:1 !important;
    transform:none !important;
  }
  .js-loop [data-loop="gerar"] .hero-stage--2,
  .js-loop [data-loop="gerar"] .hero-stage--3{
    display:none !important;
  }
  .js-loop [data-loop="gerar"] .mock-row,
  .js-loop [data-loop="gerar"] .mock-total,
  .js-loop [data-loop="gerar"] .mock-pix,
  .js-loop [data-loop="gerar"] .mock-seal{
    opacity:1 !important;
    transform:none !important;
  }
  .js-loop [data-loop="gerar"] .mock-seal__check{
    stroke-dashoffset:0 !important;
  }
  .js-loop [data-loop="fluxo"] .flow-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:6px;
  }
  .js-loop [data-loop="fluxo"] .flow-status--wait,
  .js-loop [data-loop="fluxo"] .flow-status--ok{
    opacity:1 !important;
    transform:none !important;
  }
  .js-loop [data-loop="fluxo"] .flow-tap{
    display:none !important;
  }
}