/* Elementos visuais desenhados em HTML/CSS/SVG: fundos, retrato com halo, HUD, mockups, mapa, processo, rodapé. */


/* ---------- Retrato recortado com halo de luz ---------- */
.retrato { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; }
.retrato__halo { position: absolute; left: 4%; top: -4%; width: 76%; z-index: -1; overflow: visible; }
.retrato__brilho {
  position: absolute; left: 10%; top: 6%; width: 64%; aspect-ratio: 1; z-index: -2; border-radius: 50%;
  background: radial-gradient(circle, rgb(61 139 255 / 0.45), rgb(61 139 255 / 0) 65%);
  filter: blur(8px);
}
.retrato__brilho::after {
  content: ''; position: absolute; right: -18%; bottom: 8%; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 154 77 / 0.35), rgb(255 154 77 / 0) 65%);
}
.retrato__foto {
  position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
  filter: drop-shadow(0 20px 40px rgb(0 0 0 / 0.45));
}
.retrato .painel { position: absolute; z-index: 2; padding: var(--espaco-3); }

/* ---------- Painéis HUD ---------- */
.hud-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); font-size: var(--texto-2); }
.hud-linha + .hud-linha { margin-top: var(--espaco-2); }
.hud-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--cor-ativo); font-family: var(--fonte-mono); font-size: var(--texto-1); }
.hud-ok::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(70 211 154 / 0.18); }
.hud-lista { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; font-size: var(--texto-2); }
.hud-lista li { display: flex; align-items: center; gap: 8px; }
.hud-lista .icone { width: 1rem; height: 1rem; color: var(--cor-primaria); }
.sparkline { width: 100%; height: 2.25rem; margin-top: var(--espaco-2); }

/* ---------- Mockup de celular (conversa no WhatsApp) ---------- */
.mockup-celular {
  width: min(100%, 16.5rem); aspect-ratio: 9 / 18.5; margin-inline: auto;
  display: flex; flex-direction: column; overflow: hidden;
  border: 8px solid #182233; border-radius: 2.25rem; background: #0b141a;
  box-shadow: 0 30px 70px -30px rgb(61 139 255 / 0.55), 0 0 0 1px rgb(61 139 255 / 0.25);
}
.chat__topo { display: flex; align-items: center; gap: 10px; padding: 14px 12px 10px; background: #1f2c34; }
.chat__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2a6b5f; color: #e9edef; font-weight: 700; font-size: 13px; }
.chat__avatar--thiago { background: #1d4f9a; }
.chat__nome { display: grid; line-height: 1.2; font-size: 13px; color: #e9edef; font-weight: 600; }
.chat__nome small { color: #8696a0; font-weight: 400; font-size: 11px; }
.chat__corpo {
  flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; overflow: hidden;
  background-image: radial-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px); background-size: 14px 14px;
}
.bolha { max-width: 82%; padding: 6px 9px 5px; border-radius: 8px; font-size: 12px; line-height: 1.35; color: #e9edef; }
.bolha small { display: block; text-align: right; font-size: 9.5px; color: rgb(233 237 239 / 0.8); margin-top: 2px; } /* 0,6 dava 3,5:1 na bolha verde (Lighthouse) */
.bolha--recebida { align-self: flex-start; background: #202c33; border-top-left-radius: 2px; }
.bolha--enviada { align-self: flex-end; background: #005c4b; border-top-right-radius: 2px; }
.chat__opcoes { display: flex; gap: 6px; align-self: flex-start; }
.chat__opcoes span { padding: 4px 10px; border: 1px solid #2a3942; border-radius: 999px; font-size: 11px; color: #53bdeb; background: #111b21; }
.chat__digitar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 12px; background: #0b141a; }
.chat__digitar span { flex: 1; height: 30px; border-radius: 999px; background: #202c33; }
.chat__digitar i { width: 30px; height: 30px; border-radius: 50%; background: #00a884; }

/* ---------- Mockup de navegador ---------- */
.mockup-navegador {
  overflow: hidden; border: 1px solid var(--cor-borda); border-radius: var(--raio-2); background: var(--cor-superficie);
  box-shadow: 0 30px 70px -32px rgb(61 139 255 / 0.5);
}
.navegador__barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #0d1a2e; border-bottom: 1px solid var(--cor-borda); }
.navegador__barra i { width: 9px; height: 9px; border-radius: 50%; background: #2a3a55; }
.navegador__url { flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--cor-fundo); color: var(--cor-texto-suave); font-family: var(--fonte-mono); font-size: 11px; }
.mockup-navegador img { width: 100%; height: auto; }

/* ---------- Mockup de painel de marketing (ilustrativo, sem números) ---------- */
.mockup-painel { display: grid; gap: var(--espaco-3); padding: var(--espaco-4); }
.mockup-painel__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); }
.mockup-painel__grade { display: grid; gap: var(--espaco-3); grid-template-columns: 1fr 1fr; }
.cartao { padding: var(--espaco-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-1); background: var(--cor-fundo); }
.cartao--largo { grid-column: 1 / -1; }
.cartao .rotulo-mono { display: block; margin-bottom: var(--espaco-2); }
.barras-h { display: grid; gap: 7px; }
.barras-h div { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: 8px; font-size: 11px; color: var(--cor-texto-suave); }
.barras-h b { height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--cor-primaria), #8ec5ff); }
.funil { display: grid; gap: 5px; justify-items: center; }
.funil b { height: 12px; border-radius: 3px; background: linear-gradient(90deg, rgb(61 139 255 / 0.5), var(--cor-primaria)); }
.donut { width: 100%; max-width: 6rem; margin-inline: auto; display: block; }
.grafico-linha { width: 100%; height: 4.5rem; }

/* ---------- Visual no topo dos cards de serviço ---------- */
.card-servico__visual {
  position: relative; height: 7.5rem; margin: calc(-1 * var(--espaco-6)) calc(-1 * var(--espaco-5)) 0;
  padding: var(--espaco-4) var(--espaco-5); overflow: hidden; border-bottom: 1px solid var(--cor-borda);
  border-radius: var(--raio-3) var(--raio-3) 0 0;
  background:
    radial-gradient(80% 120% at 85% 0%, rgb(61 139 255 / 0.22), transparent 60%),
    linear-gradient(rgb(61 139 255 / 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(61 139 255 / 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--cor-fundo-profundo);
}
.card-servico__visual .card-servico__icone { position: absolute; left: var(--espaco-5); bottom: var(--espaco-3); }
.card-servico__visual svg.ilustracao { position: absolute; right: var(--espaco-4); top: var(--espaco-4); width: 62%; height: calc(100% - 2 * var(--espaco-4)); }
.card-servico { transition: border-color var(--duracao) var(--curva), box-shadow var(--duracao) var(--curva); }
.card-servico:hover { border-color: rgb(61 139 255 / 0.45); box-shadow: 0 20px 50px -30px rgb(61 139 255 / 0.6); }

/* ---------- Passos com ícone em círculo de luz ---------- */
.passo__icone {
  position: absolute; left: calc(-1 * var(--espaco-7) + 1.25rem); top: -0.4rem; translate: -50% 0; z-index: 1;
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #16294a, var(--cor-fundo));
  border: 1.5px solid var(--cor-primaria); color: var(--cor-primaria);
  box-shadow: 0 0 0 6px rgb(61 139 255 / 0.08), 0 0 24px rgb(61 139 255 / 0.35);
}
.passo__icone .icone { width: 1.3rem; height: 1.3rem; }
.passo__icone b {
  position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--cor-primaria); color: var(--cor-fundo-profundo);
  font: 500 11px var(--fonte-mono);
}
@media (min-width: 56rem) {
  .passo__icone { left: 0; top: calc(-1 * var(--espaco-7) - 0.4rem); translate: 0 0; }
}

/* ---------- Banner de fechamento ---------- */
.banner-final {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--espaco-6); padding: var(--espaco-7) var(--espaco-5);
  border: 1px solid rgb(61 139 255 / 0.35); border-radius: var(--raio-3);
  background:
    radial-gradient(70% 90% at 100% 0%, rgb(61 139 255 / 0.3), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgb(255 154 77 / 0.14), transparent 60%),
    var(--cor-superficie);
}
.banner-final__mapa { position: absolute; right: -12%; bottom: -14%; width: 85%; z-index: -1; opacity: 0.55; }
.banner-final__texto { display: grid; gap: var(--espaco-5); justify-items: start; }
.banner-final__texto > p { color: var(--cor-texto-suave); max-width: 32rem; }
.banner-final__texto > .assinatura { font-family: var(--fonte-titulo); font-stretch: 82%; font-weight: 700; font-size: var(--texto-4); color: var(--cor-texto); }
.banner-final .mockup-celular { width: min(100%, 14.5rem); }
@media (min-width: 56rem) {
  .banner-final { grid-template-columns: 1.2fr 1fr; align-items: center; padding: var(--espaco-8) var(--espaco-7); }
}

/* ---------- Rodapé em colunas ---------- */
.rodape__grade { display: grid; gap: var(--espaco-6); }
.rodape__coluna { display: grid; gap: var(--espaco-2); align-content: start; }
.rodape__coluna h3 { font-size: var(--texto-2); font-stretch: 100%; color: var(--cor-texto); font-weight: 600; margin-bottom: var(--espaco-1); }
/* Links com 44 px de altura (alvo de toque); sem espaço entre eles, o ritmo fica igual ao de antes. */
.rodape__coluna:has(> a) { row-gap: 0; }
.rodape__coluna a { display: flex; align-items: center; min-height: 2.75rem; color: var(--cor-texto-suave); text-decoration: none; }
.rodape__coluna a:hover { color: var(--cor-texto); }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espaco-3); padding-top: var(--espaco-5); border-top: 1px solid var(--cor-borda); }
@media (min-width: 56rem) { .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* Passos com ícone: mais espaço à esquerda no celular para o círculo não encostar no título. */
.passos--icones { padding-left: 4.5rem; }
.passos--icones::before, .passos--icones::after { left: 1.5rem; }
.passos--icones .passo__icone { left: calc(-4.5rem + 1.5rem); }
@media (min-width: 56rem) {
  .passos--icones { padding-left: 0; }
  .passos--icones::before, .passos--icones::after { left: 1.5rem; }
  .passos--icones .passo__icone { left: 0; }
}

/* Celular do fechamento: mais baixo, só com a conversa inicial. */
.banner-final .mockup-celular { aspect-ratio: 9 / 11; }

/* Rodapé: duas colunas já no celular. */
.rodape__grade { grid-template-columns: 1fr 1fr; }
.rodape__grade > :first-child { grid-column: 1 / -1; }
@media (min-width: 56rem) { .rodape__grade > :first-child { grid-column: auto; } }

.mockup-painel__topo .rotulo-mono { white-space: nowrap; }
.etiqueta { padding: 2px 8px; border: 1px solid var(--cor-borda); border-radius: 999px; font: 500 11px var(--fonte-mono); color: var(--cor-texto-suave); white-space: nowrap; }

/* ======================= v3: cyberpunk e componentes premium ======================= */

/* Retrato neon: cidade atrás, anel de luz atrás da cabeça. */
.retrato__cidade {
  position: absolute; inset: -4% -12% 4%; z-index: -3; width: 124%; height: 100%; object-fit: cover; object-position: 50% 62%;
  -webkit-mask-image: radial-gradient(closest-side at 50% 55%, #000 45%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 55%, #000 45%, transparent 100%);
  opacity: 0.95;
}
.retrato__anel { position: absolute; left: 15%; top: 2%; width: 58%; height: auto; z-index: -1; pointer-events: none; }
.retrato--neon .retrato__foto { -webkit-mask-image: none; mask-image: none; filter: none; }

/* Trilho de redes na lateral (desktop largo). */
.trilho-social { display: none; }
@media (min-width: 80rem) {
  .trilho-social {
    position: absolute; left: 1.5rem; top: 50%; translate: 0 -50%; z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: var(--espaco-3);
  }
  .trilho-social::before, .trilho-social::after { content: ''; width: 1px; height: 4rem; background: linear-gradient(transparent, var(--cor-borda)); }
  .trilho-social::after { background: linear-gradient(var(--cor-borda), transparent); }
  .trilho-social a {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-1);
    color: var(--cor-texto-suave); text-decoration: none; font: 700 0.8rem var(--fonte-titulo); background: rgb(16 32 56 / 0.6);
  }
  .trilho-social a:hover { color: var(--cor-texto); border-color: var(--cor-primaria); }
}

/* Indicador de rolagem (desktop). */
.indicador-rolagem { display: none; }
@media (min-width: 56rem) {
  .indicador-rolagem {
    display: block; position: absolute; left: 50%; bottom: var(--espaco-4); translate: -50% 0;
    width: 22px; height: 34px; border: 1.5px solid var(--cor-texto-suave); border-radius: 12px; opacity: 0.7;
  }
  .indicador-rolagem::after {
    content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px;
    background: var(--cor-texto); animation: rolar 1.8s ease-in-out infinite;
  }
  @keyframes rolar { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }
}

/* Faixa de ferramentas rolando sem fim. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__trilha { display: flex; gap: var(--espaco-2); width: max-content; animation: marquee 45s linear infinite; }
.marquee__trilha .chips { flex-wrap: nowrap; }
.marquee:hover .marquee__trilha { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--espaco-1))); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__trilha { animation: none; width: auto; }
  .marquee__trilha .chips { flex-wrap: wrap; }
  .marquee__trilha > [aria-hidden='true'] { display: none; }
}

/* Título com cursor de terminal. */
.titulo-cursor::after { content: '_'; margin-left: 0.04em; color: var(--cor-primaria); animation: piscar 1.1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }

/* Borda com luz em degradê. */
.borda-luz { position: relative; }
.borda-luz::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgb(61 139 255 / 0.85), rgb(61 139 255 / 0.05) 38%, rgb(61 139 255 / 0.05) 62%, rgb(255 154 77 / 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Cartão holográfico (Sobre). */
.cartao-holograma { position: relative; overflow: hidden; padding: var(--espaco-4); }
.cartao-holograma img { width: 100%; height: auto; }
.cartao-holograma__topo, .cartao-holograma__base { display: flex; justify-content: space-between; gap: var(--espaco-3); }
.cartao-holograma__base { margin-top: calc(-1 * var(--espaco-6)); position: relative; }
.cartao-holograma::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30%; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, transparent, rgb(61 139 255 / 0.16) 85%, rgb(142 197 255 / 0.5) 100%);
  animation: varrer 4.5s ease-in-out infinite;
}
@keyframes varrer { 0% { transform: translateY(-100%); } 100% { transform: translateY(340%); } }
@media (prefers-reduced-motion: reduce) { .cartao-holograma::before { display: none; } }

/* Fatos em cards com ícone. */
.fatos-cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-3); padding: 0; margin: 0; list-style: none; }
.fatos-cartoes li {
  display: grid; gap: var(--espaco-2); align-content: start; padding: var(--espaco-4);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-2); background: rgb(16 32 56 / 0.6);
}
.fatos-cartoes .icone { width: 1.5rem; height: 1.5rem; color: var(--cor-primaria); }
.fatos-cartoes strong { font-family: var(--fonte-titulo); font-stretch: 85%; font-size: var(--texto-4); line-height: 1.1; }
.fatos-cartoes span { color: var(--cor-texto-suave); font-size: var(--texto-2); line-height: 1.4; }

/* Cartão "Ainda com dúvida?" ao lado das perguntas. */
.cartao-duvida {
  display: grid; gap: var(--espaco-4); justify-items: start; padding: var(--espaco-6) var(--espaco-5);
  border-radius: var(--raio-3); background: radial-gradient(90% 90% at 100% 0%, rgb(61 139 255 / 0.22), transparent 60%), var(--cor-superficie);
}
.cartao-duvida p { color: var(--cor-texto-suave); }
.perguntas__grade { display: grid; gap: var(--espaco-6); }
@media (min-width: 56rem) {
  .perguntas__grade { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .cartao-duvida { position: sticky; top: calc(var(--altura-cabecalho) + var(--espaco-5)); }
}

/* Rodapé: a regra de celular acima não pode vencer a de desktop. */
@media (min-width: 56rem) { .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* =====================================================================================================
   Painel ilustrativo do caso 3 (pedido do Thiago): dados chegando. Um pulso corre por cada barra e acende a ponta,
   um ponto desce pelo funil acendendo cada etapa, um brilho varre a rosca e um pulso percorre a linha da semana até
   o último ponto, que pisca como dado novo. Sem números: continua sendo ilustração. Só transform e opacity; pausa
   fora da tela (.em-cena, movimento.js) e não existe com "reduzir movimento".
   ===================================================================================================== */
.grafico-linha__area { position: relative; }
.grafico-linha { display: block; }
.grafico-linha__ponto {
  position: absolute; right: 0; top: 16.67%; width: 7px; height: 7px; translate: 50% -50%; border-radius: 50%;
  background: #e6f2ff; box-shadow: 0 0 0 2px rgb(61 139 255 / 0.45), 0 0 10px rgb(142 197 255 / 0.8);
}
.mockup-painel__vivo {
  display: inline-block; width: 6px; height: 6px; margin-right: 0.5rem; vertical-align: 0.1em; border-radius: 50%;
  background: #34c3b1; box-shadow: 0 0 8px rgb(52 195 177 / 0.8);
}
.donut__varredura, .grafico-linha__pulso { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .mockup-painel__vivo { animation: vivo-pulsa 1.6s ease-in-out infinite; }

  /* Barras: o pulso entra pela esquerda e chega à ponta; a ponta acende na chegada. */
  .barras-h b { position: relative; overflow: hidden; }
  .barras-h b::after, .barras-h b::before { content: ''; position: absolute; top: 0; bottom: 0; pointer-events: none; }
  .barras-h b::after {
    left: 0; right: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent calc(100% - 2.75rem), rgb(255 255 255 / 0.9));
    animation: dado-chega 2.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  }
  .barras-h b::before {
    right: 0; width: 1.25rem; opacity: 0; border-radius: inherit;
    background: linear-gradient(90deg, transparent, #fff);
    animation: ponta-acende 2.8s ease-out infinite;
  }
  .barras-h div:nth-child(2) b::after, .barras-h div:nth-child(2) b::before { animation-delay: -0.7s; }
  .barras-h div:nth-child(3) b::after, .barras-h div:nth-child(3) b::before { animation-delay: -1.4s; }
  .barras-h div:nth-child(4) b::after, .barras-h div:nth-child(4) b::before { animation-delay: -2.1s; }

  /* Funil: um ponto desce do clique ao contato e cada etapa acende quando ele passa. */
  .funil { position: relative; }
  .funil::after {
    content: ''; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
    background: #e6f2ff; box-shadow: 0 0 8px 2px rgb(142 197 255 / 0.8); opacity: 0;
    animation: funil-cai 2.4s linear infinite;
  }
  .funil b { position: relative; overflow: hidden; }
  .funil b::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(90deg, rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.15));
    animation: funil-acende 2.4s ease-out infinite;
  }
  .funil b:nth-child(1)::after { animation-delay: 0.05s; }
  .funil b:nth-child(2)::after { animation-delay: 0.5s; }
  .funil b:nth-child(3)::after { animation-delay: 0.95s; }
  .funil b:nth-child(4)::after { animation-delay: 1.4s; }

  /* Rosca: um brilho dá a volta no anel. */
  .donut__varredura {
    display: inline; opacity: 0.5; transform-box: fill-box; transform-origin: center;
    animation: girar 3.6s linear infinite;
  }

  /* Linha da semana: o pulso percorre o gráfico e o último ponto pisca quando ele chega. */
  .grafico-linha__pulso { display: inline; animation: pulso-linha 3.2s linear infinite; }
  .grafico-linha__ponto::after {
    content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid #8ec5ff; opacity: 0;
    animation: ponto-chega 3.2s ease-out infinite;
  }
}
@keyframes vivo-pulsa { 50% { opacity: 0.35; } }
@keyframes dado-chega {
  0% { transform: translateX(-100%); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translateX(0); opacity: 1; }
  78%, 100% { transform: translateX(0); opacity: 0; }
}
@keyframes ponta-acende { 0%, 58% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 0; } }
@keyframes funil-cai {
  0% { transform: translateY(-2px); opacity: 0; }
  6% { opacity: 1; }
  72% { transform: translateY(57px); opacity: 1; }
  82%, 100% { transform: translateY(60px); opacity: 0; }
}
@keyframes funil-acende { 0% { opacity: 0; } 10% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes pulso-linha { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ponto-chega {
  0%, 84% { opacity: 0; transform: scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: scale(3.4); }
}