/* =====================================================================
   funil.css · 24por7 · card "Sites e landing pages" (Soluções)
   Uma landing page em miniatura com o funil dentro. Desenhado em HTML/CSS:
   nítido em qualquer tela, sem download, legível para leitor de tela.
   Sem JS ou com "reduzir movimento": aparece pronto, com os números finais.
   Usa só medidas que o site já tem: fonte 12px, raio de pílula, tons do próprio card.
   ===================================================================== */
.funil { grid-template-rows: auto 1fr auto; gap: var(--esp-8); }
.funil__navegador { display: flex; align-items: center; gap: 5px; min-width: 0; }
.funil__pontos { display: inline-flex; gap: 3px; flex: none; }
.funil__pontos i { width: 6px; height: 6px; border-radius: var(--raio-pilula); background: color-mix(in srgb, var(--texto) 12%, transparent); }
.funil__url { flex: 1 1 auto; min-width: 0; padding: 2px 6px; border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--texto) 12%, transparent); font-family: var(--fonte-mono); font-size: 12px; letter-spacing: -.04em;
  color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funil__navegador .s-tag { flex: none; font-size: 12px; line-height: 1.6; padding-inline: 6px; }

.funil__etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: center; }
.funil__etapas li { display: grid; grid-template-columns: 9ch minmax(0, 1fr); align-items: center; gap: var(--esp-8); }
.funil__rotulo { font-size: 12px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funil__trilho { display: flex; justify-content: center; }
.funil__barra { width: var(--w, 100%); height: 18px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--raio-pilula); background: color-mix(in srgb, var(--acento) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 38%, transparent); transform-origin: 50% 50%; }
.funil__barra b { font-family: var(--fonte-mono); font-size: 12px; font-weight: 700; color: var(--texto); letter-spacing: .02em; }
.funil__barra--fim { background: var(--acento); box-shadow: none; }
.funil__barra--fim b { color: #0b1a12; }
.funil__taxa { color: var(--acento); font-weight: 700; }