/* Rodízio de exemplos (lp-interativa-hero.js): o serviço troca com fade curto
 * e as fontes acendem uma por vez, cada uma com o seu card. */
.lp-interativa .li-radar .li-service-node strong { max-width: 300px; }
.lp-interativa .li-radar .li-service-node,
.lp-interativa .li-radar .li-radar-insight h2,
.lp-interativa .li-radar .li-radar-insight p { transition: opacity .32s ease, transform .32s ease, filter .32s ease; }
.lp-interativa .li-radar.li-radar-trocando .li-service-node { opacity: 0; transform: translateX(-50%) translateY(-6px); filter: blur(2px); }
.lp-interativa .li-radar.li-radar-card-oculto .li-radar-insight h2,
.lp-interativa .li-radar.li-radar-card-oculto .li-radar-insight p { opacity: 0; transform: translateY(6px); filter: blur(2px); }
/* só com o JS rodando: sem ele nenhuma fonte fica apagada */
.lp-interativa .li-radar.li-radar-rodizio .li-source-node { opacity: .45; transition: opacity .32s ease; }
.lp-interativa .li-radar.li-radar-rodizio .li-source-node.li-source-on { opacity: 1; }
.lp-interativa .li-radar .li-source-node .li-node-icon { transition: border-color .32s ease, color .32s ease; }
.lp-interativa .li-radar .li-source-node.li-source-on .li-node-icon { border-color: var(--li-cor, #D4EF98); color: var(--li-cor, #D4EF98); }
/* Uma cor por fonte, no ícone, no caminho e no sinal: Maps azul, empresas
 * novas lima, Instagram rosa. */
.lp-interativa .li-radar .li-source-node.li-source-on strong { color: #F2F6E9; }
/* Conexões medidas pelo JS: as originais do SVG saem de cena. */
.lp-interativa .li-radar.li-radar-conectado .li-radar-lines g[stroke="url(#li-connection)"],
.lp-interativa .li-radar.li-radar-conectado .li-radar-lines g[fill="#d4ef98"] { display: none; }
.lp-interativa .li-radar .li-radar-conexoes { position: absolute; top: 0; left: 0; width: 100%; overflow: visible; pointer-events: none; fill: none; }
.lp-interativa .li-radar .li-radar-conexoes path { stroke: var(--li-cor, #D6F198); stroke-opacity: .16; stroke-width: 1.5; stroke-dasharray: 7 11; animation: li-restored-connection 2s linear infinite; transition: stroke-opacity .32s ease, stroke-width .32s ease; }
.lp-interativa .li-radar .li-radar-conexoes circle { fill: var(--li-cor, #D4EF98); opacity: .25; transition: opacity .32s ease; }
.lp-interativa .li-radar .li-radar-conexoes .li-conn-on path { stroke-opacity: 1; stroke-width: 2.2; stroke-dasharray: 12 6; }
.lp-interativa .li-radar .li-radar-conexoes .li-conn-on circle { opacity: 1; }
/* Percurso de uma fonte por vez: o rastro cresce com a ponta brilhando na
 * frente e, ao chegar no card, dá lugar ao tracejado aceso. */
.lp-interativa .li-radar .li-radar-conexoes path.li-conn-rastro { stroke: #E4F7B4; stroke-opacity: 1; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: none; animation: none; opacity: 0; transition: opacity .45s ease; }
.lp-interativa .li-radar .li-radar-conexoes .li-conn-tracando path.li-conn-rastro { opacity: 1; transition: none; }
.lp-interativa .li-radar.li-radar-empresa .li-radar-conexoes circle.li-conn-cabeca { display: block; fill: #F2FBD9; opacity: 0; filter: drop-shadow(0 0 6px #D4EF98) drop-shadow(0 0 12px #D4EF98AA); transition: opacity .2s ease; }
.lp-interativa .li-radar .li-radar-conexoes.li-cabeca-on circle.li-conn-cabeca { opacity: 1; }
/* Card vazio enquanto o caminho desce: diz em qual fonte o Radar está. */
.lp-interativa .li-radar .li-radar-busca { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 20px; color: #5E7457; font-size: 14px; letter-spacing: .2px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .32s ease; }
.lp-interativa .li-radar .li-radar-busca b { color: #173C2A; font-size: 21px; font-weight: 650; letter-spacing: -.3px; }
.lp-interativa .li-radar .li-radar-busca::after { content: ""; width: 132px; height: 3px; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, transparent, #8DB85C, transparent) 0 0 / 50% 100% no-repeat #E2EBCB; animation: li-busca-varre 1.1s ease-in-out infinite; }
.lp-interativa .li-radar.li-radar-card-oculto .li-radar-busca { opacity: 1; }
@keyframes li-busca-varre { from { background-position: -100% 0; } to { background-position: 200% 0; } }
/* Varredura: a fonte acende, sem pulso, e mostra o sinal que achou. Os
 * ícones também não flutuam: o movimento fica só nos caminhos. */
.lp-interativa .li-radar.li-radar-rodizio .li-node-icon { animation: none; }
.lp-interativa .li-radar .li-source-sinal { display: block; max-width: 100%; margin-top: 7px; padding: 2px 9px; border: 1px solid #86A07660; border-radius: 999px; overflow: hidden; color: #CFE2BE; background: #123C2D; font-size: 13px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.lp-interativa .li-radar .li-source-sinal::before { content: "✓ "; color: var(--li-cor, #D4EF98); }
.lp-interativa .li-radar .li-source-sinal.li-sinal-falta { border-color: #E8C77A99; color: #F6DFAE; background: #3A3B22; }
.lp-interativa .li-radar .li-source-sinal.li-sinal-falta::before { content: "! "; color: #F2C66D; font-weight: 700; }
.lp-interativa .li-radar .li-source-sinal.li-sinal-on { opacity: 1; transform: none; }
/* Nota de lead qualificado: selo escuro com a nota grande em lima, para
 * destacar do card claro. */
.lp-interativa .li-radar .li-insight-score { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 5px 7px 5px 14px; border-radius: 999px; color: #D4EF98; background: #123C2D; box-shadow: 0 6px 16px -6px #123C2D99; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; opacity: 0; transform: scale(.9); transition: opacity .3s ease, transform .3s ease; }
.lp-interativa .li-radar .li-insight-score::before { content: "✓"; }
.lp-interativa .li-radar .li-insight-score b { min-width: 2ch; padding: 2px 9px; border-radius: 999px; color: #123C2D; background: #D4EF98; font-size: 22px; font-weight: 750; line-height: 1.15; text-align: center; font-variant-numeric: tabular-nums; }
.lp-interativa .li-radar .li-insight-score.li-score-on { opacity: 1; transform: none; }
/* Empresa do exemplo no topo do card, onde os três caminhos chegam: o
 * avatar leva as três cores das fontes. Com ela, some o "Um possível
 * caminho para você". */
.lp-interativa .li-radar.li-radar-empresa .li-insight-top > .li-insight-icon,
.lp-interativa .li-radar.li-radar-empresa .li-insight-top > .li-insight-icon + span { display: none; }
/* espaço para os caminhos se juntarem antes do card; a linha entra no card
 * e encaixa no avatar */
.lp-interativa .li-radar.li-radar-empresa .li-radar-insight { margin-top: 34px; }
.lp-interativa .li-radar.li-radar-empresa .li-radar-conexoes circle { display: none; }
.lp-interativa .li-radar .li-empresa-avatar { position: relative; }
.lp-interativa .li-radar .li-empresa-avatar::before { content: ""; position: absolute; bottom: calc(100% + 3px); left: calc(50% - 1px); width: 2px; height: 26px; border-radius: 2px; background: linear-gradient(#D4EF9800, #8DB866); }
.lp-interativa .li-radar .li-insight-empresa { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lp-interativa .li-radar .li-empresa-avatar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; color: #D4EF98; background: #123C2D; box-shadow: 0 0 0 3px #F4F7E9, 0 0 0 4px #123C2D26; font-size: 14px; font-weight: 750; letter-spacing: .02em; }
.lp-interativa .li-radar .li-insight-empresa > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.lp-interativa .li-radar .li-insight-empresa b { overflow: hidden; color: #173C2A; font-size: 17px; font-weight: 650; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.lp-interativa .li-radar .li-insight-empresa small { overflow: hidden; color: #5E7457; font-size: 13.5px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.lp-interativa .li-radar .li-insight-empresa { transition: opacity .32s ease, transform .32s ease, filter .32s ease; }
.lp-interativa .li-radar.li-radar-card-oculto .li-insight-empresa { opacity: 0; transform: translateY(6px); filter: blur(2px); }
/* o selo fica no lugar da seta e desce de linha se não couber */
.lp-interativa .li-radar .li-insight-score + .li-insight-arrow { display: none; }
.lp-interativa .li-radar.li-radar-rodizio .li-insight-top { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 1300px) {
  .lp-interativa .li-radar .li-source-sinal { padding: 1px 7px; font-size: 12px; }
}
/* Radar estreito (tablet): sem espaço pro sinal e o selo fica só com a nota. */
@media (min-width: 851px) and (max-width: 1050px) {
  .lp-interativa .li-radar .li-source-sinal,
  .lp-interativa .li-radar .li-score-rotulo { display: none; }
  .lp-interativa .li-radar .li-service-node strong { font-size: 16px; }
}
/* Celular e tablet em pé: o radar desce para baixo do botão e encolhe, com
 * o mesmo efeito do desktop. O display repete o do lp-interativa-radar.css
 * porque a versão antiga dele, ainda em cache, escondia o radar aqui. */
@media (max-width: 850px) {
  .lp-interativa .li-radar { display: flex; width: 100%; max-width: 520px; justify-self: center; }
}
@media (max-width: 620px) {
  .lp-interativa .li-radar { padding: 16px 14px; border-radius: 20px; }
  .lp-interativa .li-radar .li-radar-heading { margin-bottom: 4px; font-size: 13px; }
  .lp-interativa .li-radar .li-radar-example { font-size: 13px; }
  .lp-interativa .li-radar .li-radar-map { height: 248px; margin-top: 4px; }
  .lp-interativa .li-radar .li-service-node { top: 12px; gap: 9px; padding: 8px 13px 8px 8px; border-radius: 11px; }
  .lp-interativa .li-radar .li-service-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; }
  .lp-interativa .li-radar .li-service-icon svg { width: 18px; height: 18px; }
  .lp-interativa .li-radar .li-service-node strong { max-width: 230px; margin-top: 0; font-size: 16px; }
  .lp-interativa .li-radar .li-source-nodes { top: 112px; gap: 6px; }
  .lp-interativa .li-radar .li-node-icon { flex-basis: 38px; width: 38px; height: 38px; margin-bottom: 7px; border-radius: 11px; }
  .lp-interativa .li-radar .li-node-icon svg { width: 20px; height: 20px; }
  .lp-interativa .li-radar .li-source-node strong { font-size: 14px; }
  /* o sinal é o achado: quebra em duas linhas em vez de cortar */
  .lp-interativa .li-radar .li-source-sinal { margin-top: 5px; padding: 2px 7px; border-radius: 9px; font-size: 11px; line-height: 1.3; white-space: normal; }
  .lp-interativa .li-radar .li-radar-insight { padding: 15px 15px 16px; border-radius: 12px; }
  .lp-interativa .li-radar.li-radar-empresa .li-radar-insight { margin-top: 26px; }
  .lp-interativa .li-radar .li-radar-insight h2 { margin: 12px 0 8px; font-size: 19px; }
  .lp-interativa .li-radar .li-radar-insight p { font-size: 15px; }
  .lp-interativa .li-radar .li-empresa-avatar { flex-basis: 34px; width: 34px; height: 34px; font-size: 12px; }
  .lp-interativa .li-radar .li-insight-empresa { gap: 9px; }
  .lp-interativa .li-radar .li-insight-empresa b { font-size: 15px; }
  .lp-interativa .li-radar .li-insight-empresa small { font-size: 12.5px; }
  .lp-interativa .li-radar .li-insight-score { gap: 6px; padding: 4px 5px 4px 11px; font-size: 13px; }
  .lp-interativa .li-radar .li-insight-score b { padding: 1px 7px; font-size: 18px; }
}
/* Subtítulo na largura do título, não nos 32ch do guia. */
.lp-interativa .li-hero .li-intro { max-width: 44ch; }
/* "A IA analisa..." do subtítulo: verde de destaque, como o título, na
 * linha de baixo (display: table quebra a linha e encolhe no texto) */
.lp-interativa .li-intro .li-intro-ia { display: table; margin-top: 8px; padding: 1px 5px; border-radius: 6px; color: #146B45; background: #DDF2C6; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Um botão só (Google) e o e-mail como saída discreta ao lado; no celular o
 * botão ocupa a linha e o link fica embaixo, centralizado. */
.lp-interativa .li-hero .li-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* padding: o link tem 23 px de altura; com ele o toque chega a 44 px. */
.lp-interativa .li-email-start { padding-block: 10px; color: #5D6B62; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.lp-interativa .li-email-start:hover { color: #0D6A4D; }
@media (max-width: 620px) {
  .lp-interativa .li-hero .li-hero-actions { flex-direction: column; align-items: stretch; }
  .lp-interativa .li-email-start { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-interativa .li-radar .li-service-node,
  .lp-interativa .li-radar .li-radar-insight h2,
  .lp-interativa .li-radar .li-radar-insight p { transition: none; }
  .lp-interativa .li-radar.li-radar-rodizio .li-source-node { opacity: 1; }
  .lp-interativa .li-radar .li-radar-conexoes path { animation: none; }
}
/* Camada 3D (lp-interativa-hero-3d.js): piso de radar num canvas atrás e o
 * card inclinando com o mouse, conteúdo em camadas de profundidade.
 * overflow visível porque overflow:hidden achataria o preserve-3d; quem
 * recorta o piso é o border-radius do próprio canvas. */
.lp-interativa .li-radar.li-radar-3d {
  overflow: visible;
  background: radial-gradient(ellipse 90% 70% at 50% 34%, #21503A 0, #133B2B 48%, #0B281D 100%);
  box-shadow: 0 50px 80px -40px #0B281Dcc, 0 0 0 1px #D4EF9814 inset, 0 1px 0 #D4EF9833 inset, 0 0 60px -18px #9FD15A40;
}
/* Inclinação e profundidade só com o mouse em cima (o JS tira a classe
 * quando o card volta ao lugar): parado, sem transform 3D, o texto fica
 * nítido, porque camada 3D é rasterizada e escalada. */
.lp-interativa .li-radar.li-radar-3d-inclinado {
  transform-style: preserve-3d;
  transform: perspective(1500px) rotateX(var(--li-rx, 0deg)) rotateY(var(--li-ry, 0deg));
}
.lp-interativa .li-radar .li-radar-3d-piso { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.lp-interativa .li-radar.li-radar-3d .li-radar-lines { display: none; }
.lp-interativa .li-radar.li-radar-3d-inclinado .li-radar-heading { transform: translateZ(calc(var(--li-z, 0) * 20px)); }
.lp-interativa .li-radar.li-radar-3d-inclinado .li-radar-map { transform: translateZ(calc(var(--li-z, 0) * 45px)); }
.lp-interativa .li-radar.li-radar-3d-inclinado .li-radar-insight { transform: translateZ(calc(var(--li-z, 0) * 75px)); }
.lp-interativa .li-radar.li-radar-3d .li-radar-insight { box-shadow: 0 30px 50px -18px #04150fcc, 0 0 0 1px #FFFFFF80 inset; }
.lp-interativa .li-radar.li-radar-3d .li-service-node { background: #2B553Bd9; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 30px #041F2680, 0 0 24px -6px #D4EF9855; }
.lp-interativa .li-radar.li-radar-3d .li-node-icon { box-shadow: 0 0 0 5px #0F3024, 0 8px 18px #04150f99; }
.lp-interativa .li-radar.li-radar-3d .li-source-on .li-node-icon { box-shadow: 0 0 0 5px #0F3024, 0 8px 18px #04150f99; }
/* reflexo de vidro que segue o mouse */
.lp-interativa .li-radar .li-radar-3d-brilho { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--li-gx, 50%) var(--li-gy, 30%), #FFFFFF1f, #FFFFFF00 42%); transition: opacity .4s ease; }
.lp-interativa .li-radar.li-radar-3d-inclinado .li-radar-3d-brilho { transform: translateZ(calc(var(--li-z, 0) * 90px)); }
.lp-interativa .li-radar.li-radar-3d-mouse .li-radar-3d-brilho { opacity: 1; }