/* Tour interativo do primeiro acesso: fundo animado, spotlight, cartão e ilustrações em movimento. */
.tour { position: fixed; inset: 0; z-index: 300; }
.tour-fundo { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 20% 10%, #2740A8 0%, #14206B 45%, #0B1226 100%); animation: tour-fade .4s ease; transition: opacity .4s; }
.tour-fundo::before, .tour-fundo::after { content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: tour-flutua 14s ease-in-out infinite; }
.tour-fundo::before { width: 46vmax; height: 46vmax; left: -12vmax; top: -10vmax; background: #FF6A3D; opacity: .28; }
.tour-fundo::after { width: 40vmax; height: 40vmax; right: -10vmax; bottom: -14vmax; background: #26A5E4; opacity: .3; animation-delay: -7s; animation-direction: reverse; }
.tour.com-destaque .tour-fundo { opacity: 0; }

.tour-destaque { position: fixed; z-index: 1; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 100vmax rgba(8, 14, 40, .66); transition: left .38s cubic-bezier(.4, 0, .2, 1), top .38s cubic-bezier(.4, 0, .2, 1), width .38s cubic-bezier(.4, 0, .2, 1), height .38s cubic-bezier(.4, 0, .2, 1); }
.tour-destaque::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #fff; }
.tour-destaque::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid #fff; animation: tour-pulso 1.7s ease-out infinite; }

.tour-cartao { position: fixed; z-index: 2; width: min(380px, calc(100vw - 24px)); box-sizing: border-box; background: var(--superficie, #fff); color: var(--texto, #111); border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(4, 8, 30, .45), 0 0 0 1px rgba(255, 255, 255, .06); transition: left .38s cubic-bezier(.4, 0, .2, 1), top .38s cubic-bezier(.4, 0, .2, 1); animation: tour-entra .38s cubic-bezier(.2, .8, .2, 1) both; }
.tour-cartao.tela { width: min(540px, calc(100vw - 24px)); padding: 28px 30px 22px; transform: translate(-50%, -50%); animation-name: tour-entra-centro; }
.tour-cartao:focus { outline: none; }
.tour-contador { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--destaque, #2740A8); }
.tour-cartao h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; }
.tour-cartao.tela h2 { font-size: 28px; }
.tour-texto { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--texto-fraco, #444); }
.tour-lista { list-style: none; margin: 4px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tour-lista li { font-size: 15px; line-height: 1.45; color: var(--texto-fraco, #444); padding-left: 14px; border-left: 3px solid var(--laranja, #FF6A3D); animation: tour-sobe .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.tour-lista strong { color: var(--texto, #111); }
.tour-pontos { display: flex; gap: 5px; margin: 6px 0 14px; }
.tour-pontos span { height: 5px; width: 5px; border-radius: 3px; background: var(--linha-forte, #ccc); transition: width .3s, background .3s; }
.tour-pontos span.feito { background: var(--destaque, #2740A8); opacity: .45; }
.tour-pontos span.atual { width: 20px; background: var(--destaque, #2740A8); }
.tour-botoes { display: flex; align-items: center; gap: 8px; }
.tour-espaco { flex: 1; }
.tour-botoes .btn { min-height: 40px; }
.tour-botoes .btn.primario { animation: tour-chama 2.4s ease-in-out 1.2s infinite; }
.tour-pular { background: none; border: 0; padding: 8px 4px; color: var(--texto-tenue, #777); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tour-pular:hover { color: var(--texto, #111); }

/* ilustrações */
.ilu { position: relative; height: 150px; margin: 0 0 14px; border-radius: 14px; background: var(--superficie-2, #f3efe6); overflow: hidden; }

.ilu-chat { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ilu-chat .bolha { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.3; opacity: 0; }
.ilu-chat .cliente { align-self: flex-start; background: var(--superficie, #fff); border: 1px solid var(--linha, #ddd); border-bottom-left-radius: 4px; animation: ilu-chat-cliente 8s ease infinite; }
.ilu-chat .digitando { position: absolute; right: 16px; top: 62px; display: flex; gap: 4px; padding: 10px 12px; background: var(--destaque, #2740A8); border-bottom-right-radius: 4px; animation: ilu-chat-digitando 8s ease infinite; }
.ilu-chat .digitando i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: ilu-ponto .9s ease-in-out infinite; }
.ilu-chat .digitando i:nth-child(2) { animation-delay: .15s; }
.ilu-chat .digitando i:nth-child(3) { animation-delay: .3s; }
.ilu-chat .ia { position: absolute; right: 16px; top: 58px; background: var(--destaque, #2740A8); color: #fff; border-bottom-right-radius: 4px; animation: ilu-chat-ia 8s ease infinite; }
.ilu-chat .ia b { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .22); font-size: 10px; letter-spacing: .06em; }
.ilu-chat .nota-ia { position: absolute; left: 16px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ok-fundo, #DDEBDD); color: var(--ok, #1F6B41); opacity: 0; animation: ilu-chat-nota 8s ease infinite; }

.ilu-funil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.ilu-funil .coluna { border-radius: 10px; background: var(--superficie, #fff); border: 1px dashed var(--linha-forte, #ccc); padding: 6px 8px; }
.ilu-funil .coluna span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-tenue, #777); }
.ilu-funil .cartao-lead { position: absolute; left: 14px; top: 56px; width: calc(33.33% - 16px); box-sizing: border-box; padding: 8px 10px; border-radius: 10px; background: var(--destaque, #2740A8); color: #fff; display: flex; flex-direction: column; box-shadow: 0 6px 16px rgba(39, 64, 168, .35); animation: ilu-funil-anda 6.5s cubic-bezier(.5, 0, .2, 1) infinite; }
.ilu-funil .cartao-lead b { font-size: 13px; }
.ilu-funil .cartao-lead small { font-size: 12px; opacity: .85; }
.ilu-funil .selo-ia { position: absolute; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--laranja, #FF6A3D); color: #fff; opacity: 0; animation: ilu-funil-selo 6.5s ease infinite; }

.ilu-radar { display: grid; place-items: center; }
.ilu-radar i { position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--destaque, #2740A8); opacity: 0; animation: ilu-radar 3s ease-out infinite; }
.ilu-radar i:nth-child(2) { animation-delay: 1s; }
.ilu-radar i:nth-child(3) { animation-delay: 2s; }
.ilu-radar span { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--destaque, #2740A8); color: #fff; box-shadow: 0 8px 22px rgba(39, 64, 168, .4); animation: tour-bate 3s ease-in-out infinite; }
.ilu-radar span .icone { width: 30px; height: 30px; }

.tour-confete { position: fixed; inset: 0; z-index: 310; pointer-events: none; overflow: hidden; }
.tour-confete span { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: confete-cai 1.8s cubic-bezier(.3, .6, .4, 1) both; }

@keyframes tour-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tour-flutua { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vmax, 4vmax) scale(1.12); } }
@keyframes tour-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tour-entra-centro { from { opacity: 0; transform: translate(-50%, -47%) scale(.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes tour-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tour-pulso { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.5); } }
@keyframes tour-chama { 0%, 100% { box-shadow: 0 0 0 0 rgba(39, 64, 168, 0); } 50% { box-shadow: 0 0 0 6px rgba(39, 64, 168, .22); } }
@keyframes tour-bate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes ilu-ponto { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes ilu-chat-cliente { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ilu-chat-digitando { 0%, 17% { opacity: 0; transform: translateY(8px); } 22%, 40% { opacity: 1; transform: none; } 41%, 100% { opacity: 0; } }
@keyframes ilu-chat-ia { 0%, 41% { opacity: 0; transform: translateY(8px) scale(.96); } 47%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ilu-chat-nota { 0%, 58% { opacity: 0; transform: translateY(6px); } 64%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ilu-funil-anda { 0%, 12% { transform: translateX(0); } 38%, 52% { transform: translateX(calc(100% + 8px)); } 78%, 92% { transform: translateX(calc(200% + 16px)); } 100% { transform: translateX(0); opacity: 0; } }
@keyframes ilu-funil-selo { 0%, 36% { opacity: 0; transform: translateY(6px) scale(.9); } 42%, 52% { opacity: 1; transform: none; } 56%, 74% { opacity: 0; } 80%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ilu-radar { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
@keyframes confete-cai { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--desvio, 0), 105vh) rotate(var(--giro, 360deg)); } }

@media (max-width: 900px) {
  .tour-cartao:not(.tela) { max-height: 55vh; overflow: auto; }
  .tour-cartao.tela { padding: 22px 20px 18px; }
  .tour-cartao.tela h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour *, .tour *::before, .tour *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .ilu-chat .bolha, .ilu-chat .nota-ia, .ilu-funil .selo-ia { opacity: 1; }
  .ilu-chat .digitando { display: none; }
  .ilu-chat .ia { position: static; align-self: flex-end; }
  .ilu-funil .cartao-lead { transform: translateX(calc(100% + 8px)); }
}