/* ==========================================================================
   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) --- */
/* .sempre-escuro (16/10): bloco com as cores do modo escuro nos dois temas (card do módulo de Reativação, pedido do Murilo) */
html.escuro, .sempre-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); }
/* texto translúcido sobre o lime (text-ink/70, /60…): no escuro o --ink vira claro e some no fundo lime */
html.escuro .bg-lime [class*="text-ink/"], html.escuro .bg-lime[class*="text-ink/"] { 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; }
/* cartão que chama a atenção (página do fornecedor, 01/11): dá um pulo e volta, com um contorno limão que acende e apaga */
@keyframes jn-pulo{
  0%{ transform: none; box-shadow: 0 0 0 0 rgb(var(--lime-c) / 0); }
  18%{ transform: translateY(-12px) scale(1.025); box-shadow: 0 0 0 6px rgb(var(--lime-c) / .95); }
  38%{ transform: translateY(0) scale(.992); }
  56%{ transform: translateY(-5px) scale(1.01); }
  74%{ transform: none; box-shadow: 0 0 0 6px rgb(var(--lime-c) / .95); }
  100%{ transform: none; box-shadow: 0 0 0 0 rgb(var(--lime-c) / 0); }
}
.anima-pulo{ animation: jn-pulo 1.15s var(--ease-mola) both; }
/* barra de tempo (janela "Liberando o pedido", 01/11): enche da esquerda para a direita no tempo de animation-duration */
@keyframes jn-barra{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.anima-barra{ animation: jn-barra linear both; transform-origin: left; }
@media (prefers-reduced-motion: reduce){ .anima-pulo{ animation: jn-destaque .9s ease; } }
/* pulso contínuo e calmo (cartão "Vocês atendem este pedido?" no painel do fornecedor, 01/11): um brilho limão que acende e apaga em
   volta, sem mexer o cartão do lugar. Quem pediu menos movimento no sistema fica só com o contorno parado */
@keyframes nk-pulsar{
  0%, 100%{ box-shadow: 0 0 0 0 rgb(var(--lime-c) / 0), 0 0 0 0 rgb(var(--lime-c) / 0); }
  50%{ box-shadow: 0 0 0 4px rgb(var(--lime-c) / .75), 0 0 28px 6px rgb(var(--lime-c) / .35); }
}
.anima-pulsar{ animation: nk-pulsar 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .anima-pulsar{ animation: none; box-shadow: 0 0 0 3px rgb(var(--lime-c) / .7); } }

/* 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; }

/* onboarding: a tela nova entra de lado (avançar vem da direita, voltar da esquerda) */
@keyframes jn-onb-vai{ from{ opacity: 0; transform: translateX(22px); } to{ opacity: 1; transform: none; } }
@keyframes jn-onb-volta{ from{ opacity: 0; transform: translateX(-22px); } to{ opacity: 1; transform: none; } }
.anima-onb-vai{ animation: jn-onb-vai .34s var(--ease-mola) backwards; }
.anima-onb-volta{ animation: jn-onb-volta .34s var(--ease-mola) backwards; }
@media (prefers-reduced-motion: reduce){ .anima-onb-vai, .anima-onb-volta{ animation: jn-pagina .2s ease backwards; } }

/* barra de progresso, arraste (range) e caixa de marcar: o "preto" do painel vira cinza no escuro e some no fundo; lá usam o limão */
.cor-destaque{ background-color: #141414; }
html.escuro .cor-destaque{ background-color: #ebf57d; }
.marca-destaque{ accent-color: #151515; }
html.escuro .marca-destaque{ accent-color: #ebf57d; }

/* ---- celular (09/10, teste do Murilo no iPhone) ----
   fundo da página até as bordas (com viewport-fit=cover o conteúdo passa por baixo das barras do Safari) */
html{ background: var(--paper); }
/* filho de grade não encolhe abaixo do conteúdo por padrão (min-width:auto): um item largo empurrava a página para fora */
.grid > *{ min-width: 0; }
@media (max-width: 1023px){
  /* no celular o título da página não gruda no topo: ocupava meia tela e cobria o conteúdo */
  /* e fica ABAIXO das barras de vidro (z-index 25 o fazia passar por cima da barra de cima e do menu de aparência) */
  .topo-gruda{ position: relative; top: auto; z-index: auto; }
}

/* termos no onboarding (celular): a caixa do texto ocupa o que sobra da tela e o botão desce para baixo */
@media (max-width: 1023px){
  .caixa-termos{ height: calc(100dvh - 410px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 260px; }
}

/* cápsulas do celular no modo CLARO: vidro claro (como as barras do iOS 26 e o Instagram), não o vidro escuro, que sobre o fundo
   claro ficava cinza apagado. Item ativo vira pílula limão com texto escuro. No escuro continua o vidro escuro. */
html:not(.escuro) .vidro-celular{
  background-color: rgba(255,255,255,.66);
  background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  border-color: rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 32px -14px rgba(0,0,0,.28);
}
html:not(.escuro) .vidro-celular .text-white{ color: #141414; }
html:not(.escuro) .vidro-celular .text-white\/70, html:not(.escuro) .vidro-celular .text-white\/60{ color: #55555c; }
html:not(.escuro) .vidro-celular .hover\:bg-white\/10:hover{ background-color: rgba(0,0,0,.05); }
html:not(.escuro) .vidro-celular .text-lime{ color: #141414; }
/* limão a 92% (não 100%): cor SÓLIDA dentro de barra fixa faz o Safari 26 pintar a faixa do relógio com uma cor lisa em vez de
   deixar o conteúdo passar por trás (achado no simulador em 09/10, testando peça por peça) */
html:not(.escuro) .vidro-celular .lente-escura{ background-color: rgba(235,245,125,.92); }
/* lente ao segurar, no modo claro: vidro neutro (estava verde-limão) com aro de luz, como a lente das abas */
html:not(.escuro) .vidro-celular .lente-escura.arrastando{ background-color: rgba(255,255,255,.18) !important;
  background-image: radial-gradient(closest-side, rgba(255,255,255,0) 70%, rgba(255,255,255,.5) 100%), linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 30%) !important;
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(255,255,255,.6), 0 0 0 .5px rgba(0,0,0,.12), 0 10px 24px -10px rgba(0,0,0,.3) !important; }
html:not(.escuro) .vidro-celular .text-red-400\/90{ color: #d92d20; }
/* abas que rolam para o lado no celular: some aos poucos na borda, para mostrar que tem mais */
@media (max-width: 1023px){
  .abas-rolam{ -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .abas-rolam.no-fim{ -webkit-mask-image: none; mask-image: none; }
  .abas-rolam.rolou{ -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
  .abas-rolam.rolou.no-fim{ -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
}

/* barra de baixo do celular (09/10): sem sombra (ficava uma mancha embaixo) e sem o brilho em degradê; encolhe ao rolar */
.barra-baixo{ left: 12px; right: 12px; height: 62px; border-radius: 26px; box-shadow: none !important; background-image: none !important;
  transition: left .38s var(--ease-mola), right .38s var(--ease-mola), height .38s var(--ease-mola), border-radius .38s; }
.barra-baixo .rotulo{ max-height: 14px; opacity: 1; transition: max-height .3s var(--ease), opacity .2s ease; }
.barra-baixo.encolhida{ left: 16%; right: 16%; height: 52px; border-radius: 26px; }
.barra-baixo.encolhida .rotulo{ max-height: 0; opacity: 0; }
.barra-baixo.encolhida button{ gap: 0; }
/* a lente ao segurar sai para fora da barra (mais alta que ela), como no computador */
nav.barra-baixo .lente-escura.arrastando{ scale: 1.08 1.4; }
/* item ativo da barra de baixo: só cor e peso (sem fundo); os outros ficam em cinza claro para o ativo se destacar */
html:not(.escuro) .barra-baixo .text-white\/60{ color: #8e8e93; }
@media (max-width: 1023px){ html.conversa-aberta .vidro-celular{ display: none; } }
/* data e hora no iPhone: o campo nativo tem largura mínima própria e vazava da caixa */
input[type="date"], input[type="time"]{ min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; min-height: 42px; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value{ text-align: left; }
/* cápsulas do chat em tela cheia (celular): vidro solto, sem borda de barra */
/* sem sombra (11/10, Murilo: a pílula de baixo deixava uma mancha escura embaixo dela) */
.capsula-chat{ box-shadow: none; border: 1px solid rgba(255,255,255,.35); }
html.escuro .capsula-chat{ border-color: rgba(255,255,255,.08); }
/* conversa aberta no celular: o fundo da página (o que aparece atrás da barra do Safari no fim da rolagem) é o papel do chat */
@media (max-width: 1023px){
  html.conversa-aberta, html.conversa-aberta body{ background-color: var(--chat-fundo); background-image: url("/chat-fundo-site.png"); background-size: 250px 459px; background-blend-mode: var(--chat-mistura); }
}

/* tour guiado no celular (10/10): com a página parada no topo, o Safari 26 pinta a faixa do relógio e a da barra de baixo com o
   fundo do documento. Durante o tour, o fundo vira o tom escurecido (fundo da página + escurecimento do tour), para as faixas
   combinarem com a tela escurecida em vez de ficarem claras. Claro: #f5f5f7 sob rgba(10,10,12,.55); escuro: #0e0e10 sob preto .78 */
html.tour-celular, html.tour-celular body{ background-color: #747476 !important; background-image: none !important; }
html.escuro.tour-celular, html.escuro.tour-celular body{ background-color: #030304 !important; }

/* imagens da tela (foto do Kotta, logo) não se arrastam: arrastada para o chat, virava anexo (31/10, Murilo) */
img { -webkit-user-drag: none; user-drag: none; }