/* ==========================================================================
   Julia Nova — tema (08/10/2026): visual com base no guia da Apple (HIG + Liquid Glass) e modo escuro.
   Carregado DEPOIS do tokens.css (que é a cópia do site e não se mexe): aqui só sobrescreve.
   Modo escuro: <html class="escuro"> (o script do index.html liga conforme a escolha: claro, escuro ou do sistema).
   Regra da Apple seguida: vidro só no que flutua (menu, barras, janelas, menus suspensos); conteúdo sólido.
   ========================================================================== */

:root{
  /* --- neutros no padrão Apple (claro) --- */
  --ink:        #1d1d1f;
  --ink-soft:   #2c2c2e;
  --paper:      #f5f5f7;   /* fundo da página */
  --stone:      #e8e8ed;   /* superfície rebaixada / preenchimento de controle */
  --stone-deep: #d2d2d7;
  --white:      #ffffff;   /* cartão */
  --muted:      #636366;   /* texto secundário (5.9:1 no branco, 5:1 no cinza de controle) */
  --muted-soft: #6c6c70;   /* legenda (5:1 no branco, 4.6:1 no fundo da página) */
  --line:       rgba(0,0,0,.10);
  --line-soft:  rgba(0,0,0,.06);
  --lime:       #ebf57d;
  --lime-deep:  #dfeb5f;
  --on-lime:    #141414;   /* texto sobre o limão: sempre escuro, nos dois modos */
  --solido:     #1d1d1f;   /* fundo "preto" de botão/menu (no escuro vira cinza elevado) */
  --foco:       rgba(29,29,31,.55);
  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  /* canais "r g b" dos tokens: o Tailwind precisa deles para aplicar transparência (bg-card/95, bg-lime/15…) */
  --ink-c: 29 29 31; --ink-soft-c: 44 44 46; --paper-c: 245 245 247; --stone-c: 232 232 237; --stone-deep-c: 210 210 215;
  --white-c: 255 255 255; --muted-c: 99 99 102; --muted-soft-c: 108 108 112; --lime-c: 235 245 125; --lime-deep-c: 223 235 95;
  --chat-mistura: normal;

  /* chat (cores do WhatsApp) */
  --chat-fundo: #e5ddd5;
  --bolha-lead: #ffffff;
  --bolha-nossa: #d9fdd3;
  --bolha-texto: #111b21;
  --bolha-meta: #667781;
  --bolha-meta-nossa: #4f5f68;   /* horário no balão verde: 5:1 */
  --link: #027eb5;

  /* vidro (Liquid Glass "regular") */
  --vidro-fundo: rgba(255,255,255,.66);
  --vidro-borda: rgba(255,255,255,.6);
  --vidro-brilho: rgba(255,255,255,.75);
  --vidro-sombra: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.10);

  /* paletas de status: claro = Tailwind padrão; o escuro redefine (ver abaixo). Formato "r g b" p/ aceitar /opacidade */
  --red-50: 254 242 242; --red-100: 254 226 226; --red-200: 254 202 202; --red-300: 252 165 165; --red-400: 248 113 113;
  --red-500: 239 68 68; --red-600: 200 30 30; --red-700: 175 25 25; --red-800: 153 27 27; --red-900: 127 29 29;
  --green-50: 240 253 244; --green-100: 220 252 231; --green-200: 187 247 208; --green-300: 134 239 172; --green-400: 74 222 128;
  --green-500: 34 197 94; --green-600: 22 163 74; --green-700: 21 128 61; --green-800: 22 101 52; --green-900: 20 83 45;
  --amber-50: 255 251 235; --amber-100: 254 243 199; --amber-200: 253 230 138; --amber-300: 252 211 77; --amber-400: 251 191 36;
  --amber-500: 245 158 11; --amber-600: 217 119 6; --amber-700: 180 83 9; --amber-800: 146 64 14; --amber-900: 120 53 15;
  --gray-50: 249 250 251; --gray-100: 243 244 246; --gray-200: 229 231 235; --gray-300: 209 213 219; --gray-400: 156 163 175;
  --gray-500: 107 114 128; --gray-600: 75 85 99; --gray-700: 55 65 81; --gray-800: 31 41 55; --gray-900: 17 24 39;
  color-scheme: light;
}

/* --- modo escuro: cinzas da Apple (fundo base mais escuro, camadas de cima mais claras) --- */
html.escuro{
  --ink:        #f2f2f7;
  --ink-soft:   #e5e5ea;
  --paper:      #0e0e10;
  --stone:      #2c2c2e;
  --stone-deep: #3a3a3c;
  --white:      #1c1c1e;
  --muted:      #aeaeb2;
  --muted-soft: #98989d;
  --line:       rgba(255,255,255,.13);
  --line-soft:  rgba(255,255,255,.08);
  --lime-deep:  #f3f99a;
  --solido:     #2c2c2e;
  --foco:       rgba(242,242,247,.6);

  --ink-c: 242 242 247; --ink-soft-c: 229 229 234; --paper-c: 14 14 16; --stone-c: 44 44 46; --stone-deep-c: 58 58 60;
  --white-c: 28 28 30; --muted-c: 174 174 178; --muted-soft-c: 152 152 157; --lime-deep-c: 243 249 154;
  --chat-mistura: multiply;
  --chat-fundo: #0b141a;
  --bolha-lead: #202c33;
  --bolha-nossa: #005c4b;
  --bolha-texto: #e9edef;
  --bolha-meta: #8696a0;
  --bolha-meta-nossa: rgba(233,237,239,.8);
  --link: #53bdeb;

  --vidro-fundo: rgba(36,36,40,.66);
  --vidro-borda: rgba(255,255,255,.10);
  --vidro-brilho: rgba(255,255,255,.08);
  --vidro-sombra: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);

  /* status no escuro: fundo = tinta escura; texto = tom claro (contraste ≥ 4.5 no cartão #1c1c1e) */
  --red-50: 44 18 20; --red-100: 60 24 27; --red-200: 104 36 41; --red-300: 140 48 54; --red-400: 255 128 120;
  --red-500: 235 72 66; --red-600: 255 105 97; --red-700: 255 155 148; --red-800: 255 196 190; --red-900: 255 222 219;
  --green-50: 14 36 24; --green-100: 18 50 33; --green-200: 30 78 50; --green-300: 42 107 69; --green-400: 74 222 128;
  --green-500: 34 197 94; --green-600: 48 186 100; --green-700: 110 231 155; --green-800: 160 240 190; --green-900: 200 247 218;
  --amber-50: 43 32 14; --amber-100: 58 43 16; --amber-200: 92 68 22; --amber-300: 122 90 28; --amber-400: 251 191 36;
  --amber-500: 245 158 11; --amber-600: 250 176 60; --amber-700: 252 211 120; --amber-800: 253 226 160; --amber-900: 254 240 200;
  --gray-50: 28 28 30; --gray-100: 44 44 46; --gray-200: 58 58 60; --gray-300: 72 72 74; --gray-400: 142 142 147;
  --gray-500: 152 152 157; --gray-600: 174 174 178; --gray-700: 199 199 204; --gray-800: 229 229 234; --gray-900: 242 242 247;
  color-scheme: dark;
}

/* texto sobre limão fica escuro nos dois modos */
.bg-lime, .bg-lime .text-ink, .bg-lime.text-ink, .hover\:bg-lime-deep:hover { color: var(--on-lime); }
html.escuro .bg-lime .text-muted, html.escuro .bg-lime.text-muted { color: rgba(20,20,20,.7); }
/* "preto" sólido (menu, botão escuro, pílula escura): no escuro vira cinza elevado, com o texto claro que já tem */
.bg-ink { background-color: var(--solido) !important; }
.hover\:bg-ink-soft:hover { background-color: #3a3a3c !important; }
html.escuro .text-white.bg-ink, html.escuro .bg-ink .text-white { color: #fff; }

body { font-family: var(--font); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--font); color: inherit; }
input, select, textarea { color: var(--ink); }
::placeholder { color: var(--muted-soft); opacity: 1; }

/* foco visível para teclado (HIG: acessibilidade) */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* --- Liquid Glass (variante regular) — só em camadas que flutuam --- */
.vidro{
  background: var(--vidro-fundo);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--vidro-borda);
  box-shadow: inset 0 1px 0 var(--vidro-brilho), var(--vidro-sombra);
}
/* vidro escuro do menu lateral e das barras do celular (escuro nos dois modos) */
.vidro-escuro{
  background: rgba(17,17,19,.94);   /* quase opaco: sobre o fundo liso o vidro não aparece e o menu deve continuar preto */
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -30px rgba(0,0,0,.55);
}
html.escuro .vidro-escuro{ background: rgba(26,26,28,.9); border-color: rgba(255,255,255,.09); }

/* sem suporte a desfoque, ou "reduzir transparência" ligado: vidro opaco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .vidro{ background: var(--white); } .vidro-escuro{ background: #18181a; }
}
@media (prefers-reduced-transparency: reduce){
  .vidro{ background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .vidro-escuro{ background: #18181a; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* "aumentar contraste": bordas mais fortes */
@media (prefers-contrast: more){
  :root{ --line: rgba(0,0,0,.35); --line-soft: rgba(0,0,0,.22); --muted: #48484a; --muted-soft: #48484a; }
  html.escuro{ --line: rgba(255,255,255,.4); --line-soft: rgba(255,255,255,.26); --muted: #d1d1d6; --muted-soft: #d1d1d6; }
  .vidro{ background: var(--white); border-color: var(--line); }
}
/* "reduzir movimento": sem animação de entrada/elástico */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* imagem que só aparece num dos modos (ex.: logo da Salvy claro/escuro) */
.so-escuro{ display: none !important; }
html.escuro .so-escuro{ display: inline-block !important; }
html.escuro .so-claro{ display: none !important; }

/* barra de rolagem discreta nos dois modos */
::-webkit-scrollbar-thumb { background: var(--stone-deep) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft) !important; }

/* troca de tema sem piscar: transição curta só nas cores */
html.trocando-tema *, html.trocando-tema *::before, html.trocando-tema *::after { transition: background-color .25s ease, border-color .25s ease, color .2s ease !important; }

/* verde/vermelho SÓLIDOS com texto/ícone branco (bolinhas de etapa, selos de número): mesmo tom nos dois modos, 5:1 com o branco */
.solido-verde{ background-color: #188038 !important; color: #fff !important; }
.solido-vermelho{ background-color: #d92d20 !important; color: #fff !important; }

/* ==========================================================================
   08/10 (manhã): vidro VISÍVEL. O vidro só aparece com conteúdo passando por baixo — então as camadas de vidro agora
   ficam POR CIMA do conteúdo que rola (cabeçalho da conversa, barra de digitar, topo das páginas, barra do celular).
   ========================================================================== */
:root{ --ease-mola: cubic-bezier(.34,1.36,.64,1); --vidro-leve: rgba(255,255,255,.48); }
html.escuro{ --vidro-leve: rgba(28,28,30,.52); }
/* reflexo (specular) do Liquid Glass: brilho suave no alto da peça */
.vidro, .vidro-topo{
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
}
html.escuro .vidro, html.escuro .vidro-topo{
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%);
}
/* barra de vidro encostada (sem cantos): cabeçalho e rodapé da conversa */
.vidro-barra{
  /* bem transparente (como as barras do iOS): o conteúdo que passa por baixo aparece desfocado e colorido */
  background-color: var(--vidro-leve);
  -webkit-backdrop-filter: blur(14px) saturate(190%);
  backdrop-filter: blur(14px) saturate(190%);
}
.vidro-barra.em-cima{ border-bottom: 1px solid var(--line-soft); box-shadow: 0 8px 24px -16px rgba(0,0,0,.25); }
.vidro-barra.em-baixo{ border-top: 1px solid var(--line-soft); box-shadow: 0 -8px 24px -16px rgba(0,0,0,.2); }

/* topo da página que gruda ao rolar: transparente no início; vira vidro quando o conteúdo passa por baixo */
.topo-gruda{ position: sticky; top: 0; z-index: 25; border-radius: 22px; padding: 10px 14px; margin: 0;
  border: 1px solid transparent; transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease, -webkit-backdrop-filter .25s, backdrop-filter .25s; }
[data-rolou="1"] .topo-gruda{
  background-color: var(--vidro-leve);
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  -webkit-backdrop-filter: blur(16px) saturate(190%); backdrop-filter: blur(16px) saturate(190%);
  border-color: var(--line-soft); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px -12px rgba(0,0,0,.16);
}
html.escuro [data-rolou="1"] .topo-gruda{ background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%); }

/* barras do celular: vidro escuro de verdade (translúcido), o conteúdo passa por baixo */
.vidro-celular{
  background: rgba(20,20,22,.5);
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px -18px rgba(0,0,0,.5);
}

/* backwards (não both): animação que fica "aplicada" depois de acabar deixa transform no elemento e PRENDE os fixed de dentro
   (janela abria espremida no topo — 08/10). */
/* --- movimento (curtos, com propósito; "reduzir movimento" desliga tudo pela regra lá de cima) --- */
@keyframes jn-entrar{ from{ opacity: 0; transform: translateY(6px) scale(.975); } to{ opacity: 1; transform: none; } }
@keyframes jn-surgir{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes jn-gaveta{ from{ opacity: 0; transform: translateX(-14px); } to{ opacity: 1; transform: none; } }
/* só opacidade: transform no recipiente da página prende os elementos fixed (janelas) enquanto a animação roda */
@keyframes jn-pagina{ from{ opacity: 0; } to{ opacity: 1; } }
.anima-entrar{ animation: jn-entrar .26s var(--ease-mola) backwards; }
.anima-surgir{ animation: jn-surgir .2s ease backwards; }
.anima-gaveta{ animation: jn-gaveta .28s var(--ease) backwards; }
.anima-pagina{ animation: jn-pagina .22s var(--ease) backwards; }

/* pressionar: todo botão "afunda" um pouco e escurece (resposta ao toque) */
button:not(:disabled):active, a[role="button"]:active, .pressiona:active{ transform: scale(.96); filter: brightness(.94); }
button{ transition-property: background-color, border-color, color, box-shadow, transform, filter; transition-duration: .15s; transition-timing-function: var(--ease); }
/* cartão clicável sobe de leve ao passar o mouse */
.levanta{ transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.levanta:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(0,0,0,.18); }
/* no celular o topo que gruda fica logo abaixo da barra de cima */
/* (o Chrome já desconta o respiro de cima da área que rola, que no celular inclui a barra; somar a barra de novo deixava um vão) */
@media (max-width: 1023px){ .topo-gruda{ top: -6px; } }

/* lente: indicador que desliza entre abas/itens e que dá para segurar e arrastar (useLente, Lente.tsx) */
.lente{ transition: transform .34s var(--ease-mola), width .34s var(--ease-mola), height .34s var(--ease-mola),
  scale .22s var(--ease-mola), background-color .2s ease, box-shadow .2s ease; }
.lente.arrastando{
  /* segue o dedo sem atraso; cresce e vira vidro (como a lente do seletor do iOS 26) */
  transition: width .18s var(--ease), height .18s var(--ease), scale .22s var(--ease-mola), background-color .2s ease, box-shadow .2s ease;
  scale: 1.14;
  background-color: rgba(255,255,255,.38) !important;
  -webkit-backdrop-filter: blur(3px) saturate(180%) brightness(1.05); backdrop-filter: blur(3px) saturate(180%) brightness(1.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), inset 0 3px 10px rgba(255,255,255,.55), inset 0 -3px 8px rgba(0,0,0,.06),
    0 10px 26px -8px rgba(0,0,0,.32) !important;
}
html.escuro .lente.arrastando{ background-color: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 3px 10px rgba(255,255,255,.12), 0 10px 26px -8px rgba(0,0,0,.6) !important; }
/* no menu escuro (lateral e cápsula do celular) a lente é clara e discreta */
.lente-escura{ background-color: rgba(255,255,255,.10); }
.lente-escura.arrastando{ scale: 1.06; background-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 3px 10px rgba(255,255,255,.10), 0 10px 24px -8px rgba(0,0,0,.5) !important; }

/* ==========================================================================
   08/10 (tarde): pedido do Murilo — SEM borda nas peças de vidro (a borda clara/da cor aparecia como faixa em cima e embaixo),
   janelas mais sólidas e lente com mais cara de vidro, saindo para fora da pílula ao arrastar.
   ========================================================================== */
.vidro{ border-color: transparent !important; box-shadow: var(--vidro-sombra); }
.vidro-barra.em-cima, .vidro-barra.em-baixo{ border: 0 !important; }
[data-rolou="1"] .topo-gruda{ border-color: transparent; }
/* janelas (editar, melhorar, funil): ainda vidro, mas bem menos transparente que barras e menus */
.vidro-janela{ background-color: rgba(255,255,255,.88); background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 30px 70px -20px rgba(0,0,0,.35); }
html.escuro .vidro-janela{ background-color: rgba(32,32,35,.9); background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
  box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 30px 70px -20px rgba(0,0,0,.7); }

/* lente ao arrastar: fica POR CIMA das palavras (o que está embaixo aparece através do vidro, mais vivo), cresce mais na altura
   do que na largura e sai para fora da pílula, com reflexo no alto e borda de luz — como o seletor do iOS 26 */
.lente.arrastando{
  z-index: 20; scale: 1.16 1.5;
  background-color: rgba(255,255,255,.14) !important;
  background-image: radial-gradient(120% 85% at 28% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 58%),
                    linear-gradient(0deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%);
  -webkit-backdrop-filter: blur(.5px) saturate(230%) brightness(1.06) contrast(1.06);
  backdrop-filter: blur(.5px) saturate(230%) brightness(1.06) contrast(1.06);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(255,255,255,.5), inset 0 0 10px rgba(255,255,255,.4),
    inset 0 -8px 14px -8px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.1), 0 14px 30px -10px rgba(0,0,0,.32) !important;
}
html.escuro .lente.arrastando{
  background-color: rgba(255,255,255,.08) !important;
  background-image: radial-gradient(120% 85% at 28% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 58%), linear-gradient(0deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.45), inset -1px -1px 0 rgba(255,255,255,.18), inset 0 0 10px rgba(255,255,255,.12),
    0 0 0 .5px rgba(255,255,255,.12), 0 14px 30px -10px rgba(0,0,0,.7) !important;
}
/* menu lateral e cápsula do celular (fundo escuro): mesma lente, discreta no tamanho */
.lente-escura.arrastando{ z-index: 20; scale: 1.06 1.14;
  background-color: rgba(255,255,255,.10) !important;
  background-image: radial-gradient(120% 85% at 28% 0%, rgba(255,255,255,.30), rgba(255,255,255,0) 58%), linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%);
  -webkit-backdrop-filter: blur(.5px) saturate(200%) brightness(1.15); backdrop-filter: blur(.5px) saturate(200%) brightness(1.15);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.45), inset -1px -1px 0 rgba(255,255,255,.18), inset 0 0 12px rgba(255,255,255,.12),
    0 14px 28px -10px rgba(0,0,0,.6) !important; }
nav .lente-escura.arrastando{ scale: 1.1 1.32; }

/* lente mais "limpa" (08/10, 2ª rodada): quase sem branco no meio — o que está embaixo aparece nítido e mais vivo —, luz só na
   borda (aro) e um fio de reflexo no alto; o item debaixo dela cresce um pouco (efeito de lupa) */
.lente.arrastando{
  background-color: rgba(255,255,255,.04) !important;
  background-image: radial-gradient(closest-side, rgba(255,255,255,0) 72%, rgba(255,255,255,.42) 100%),
                    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 28%);
  -webkit-backdrop-filter: saturate(210%) brightness(1.07); backdrop-filter: saturate(210%) brightness(1.07);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.95), inset -1.5px -1.5px 0 rgba(255,255,255,.55),
    inset 0 -6px 10px -6px rgba(0,0,0,.18), inset 0 6px 10px -6px rgba(255,255,255,.7),
    0 0 0 .5px rgba(0,0,0,.12), 0 12px 26px -10px rgba(0,0,0,.3) !important;
}
html.escuro .lente.arrastando{
  background-color: rgba(255,255,255,.03) !important;
  background-image: radial-gradient(closest-side, rgba(255,255,255,0) 72%, rgba(255,255,255,.18) 100%),
                    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 28%);
}

/* régua de faixas do cartão de planos (Assinatura): bolinha escura com aro, como na apresentação de vendas */
.regua-planos::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 9999px; background: #151515;
  box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.25); cursor: grab; transition: transform .15s var(--ease-mola); }
.regua-planos:active::-webkit-slider-thumb{ transform: scale(1.2); cursor: grabbing; }
.regua-planos::-moz-range-thumb{ width: 18px; height: 18px; border: 0; border-radius: 9999px; background: #151515; box-shadow: 0 0 0 4px rgba(255,255,255,.55); }
.regua-planos::-webkit-slider-runnable-track, .regua-planos::-moz-range-track{ background: transparent; }
.regua-planos:focus-visible{ outline: none; }
.regua-planos:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 0 7px rgba(21,21,21,.35); }

/* janela quase opaca (assinatura: formulário longo por cima do cartão limão, que tingia o vidro) */
.vidro-janela.vidro-solida{ background-color: rgba(255,255,255,.97); }
html.escuro .vidro-janela.vidro-solida{ background-color: rgba(32,32,35,.97); }

/* citação dentro do balão (lead respondeu a uma mensagem) e destaque ao pular até a mensagem citada */
.cita-fundo{ background: rgba(0,0,0,.05); }
html.escuro .cita-fundo{ background: rgba(255,255,255,.07); }
@keyframes jn-destaque{ 0%,40%{ filter: brightness(.86); } 100%{ filter: none; } }
.msg-destaque{ animation: jn-destaque 1.4s ease; }