/* ============================================================
   DEMO "vidro líquido" (estilo iOS 26 / expo-glass-effect) — SÓ barras e botões.
   Carregado DEPOIS do landing.css. Para desligar: remova a linha <link> no HTML.
   Tudo fica sob html:not(.v0) para o botão de comparação da demo.
   ============================================================ */
html:not(.v0){
  --g-blur:24px; --g-sat:1.5; --g-bri:1.08;
  --g-fill:rgba(255,255,255,.10);
  --g-borda:rgba(255,255,255,.34);
  --g-spec:rgba(255,255,255,.72);
}
/* receita do vidro: desfoque forte + saturação + brilho; borda de luz em cima; sombra interna suave; sombra externa curta */
html:not(.v0) .nav.vidro,
html:not(.v0) .btn,
html:not(.v0) .nav .atual,
html:not(.v0) .chip-bolao{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05)) , var(--g-fill);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bri));
          backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bri));
  border:1px solid var(--g-borda);
  box-shadow:
    inset 0 1.5px 0 var(--g-spec),              /* reflexo especular na borda de cima */
    inset 0 -1px 0 rgba(255,255,255,.14),       /* contraluz embaixo */
    inset 1.5px 0 0 rgba(255,255,255,.18),
    inset -1.5px 0 0 rgba(255,255,255,.10),
    inset 0 10px 18px -8px rgba(255,255,255,.28),/* brilho interno */
    0 10px 28px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
  transition:transform .35s cubic-bezier(.2,.9,.25,1.2), box-shadow .3s, background .3s, filter .3s;
}
/* barra de cima: mais "pílula flutuante" */
html:not(.v0) .nav.vidro{
  --dk:255,255,255;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.06)), rgba(18,22,64,.28);
  border-radius:999px;
}
html:not(.v0) .nav.vidro::before{
  background:radial-gradient(260px circle at var(--mx,18%) -20%, rgba(255,255,255,.34), transparent 62%),
             linear-gradient(105deg, transparent 30%, rgba(255,255,255,.14) 46%, transparent 60%);
}
html:not(.v0) .nav .atual{background:rgba(255,255,255,.12)}
/* botões: vidro neutro; o botão principal vira vidro COLORIDO (cor do jogo) */
html:not(.v0) .btn{position:relative;overflow:hidden;isolation:isolate;text-shadow:0 1px 2px rgba(0,0,0,.25)}
html:not(.v0) .btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.30) 44%,rgba(255,255,255,.04) 56%,transparent 70%);
  transform:translateX(-30%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
html:not(.v0) .btn:hover::after{transform:translateX(30%)}
html:not(.v0) .btn-pri,
html:not(.v0) .nav .btn-bol-nav{
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.04) 55%), color-mix(in srgb,var(--tint,var(--base)) 92%,transparent);
  border-color:rgba(255,255,255,.55);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.2),
    inset 0 12px 20px -10px rgba(255,255,255,.45),
    0 12px 30px color-mix(in srgb,var(--tint,var(--base)) 55%,transparent), 0 2px 8px rgba(0,0,0,.2);
}
html:not(.v0) .nav .btn-bol-nav{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.05) 55%), color-mix(in srgb,var(--laranja,#F09641) 78%,transparent);color:#2a1500;text-shadow:none}
/* toque: o vidro "afunda" e a luz muda, como no iOS */
html:not(.v0) .btn:hover{transform:translateY(-2px) scale(1.015)}
html:not(.v0) .btn:active{transform:scale(.955);filter:brightness(1.12) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 8px 16px -8px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.2)}
html:not(.v0) .hero .btn-pri{--tint:var(--laranja)}
html:not(.v0) .btn-pri:hover,html:not(.v0) .nav .btn-bol-nav:hover{filter:brightness(1.08) saturate(1.1)}
/* navegadores sem backdrop-filter: cai num vidro opaco legível */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(.v0) .nav.vidro{background:rgba(24,30,84,.86)}
  html:not(.v0) .btn{background:rgba(255,255,255,.22)}
}
@media (prefers-reduced-transparency:reduce){
  html:not(.v0) .nav.vidro{background:rgba(24,30,84,.92);-webkit-backdrop-filter:none;backdrop-filter:none}
  html:not(.v0) .btn{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.24)}
}
@media (prefers-reduced-motion:reduce){html:not(.v0) .btn::after{display:none}}

/* botão da demo (liga/desliga o efeito para comparar) */
#v-demo{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;border:0;font:700 .85rem/1 var(--corpo,system-ui);color:#fff;
  padding:.8em 1.3em;border-radius:999px;cursor:pointer;background:rgba(20,24,70,.55);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 22px rgba(0,0,0,.35)}

/* botões com robozinho (Telegram): o robô fica fora do botão, então o botão não pode cortar o que sai dele */
html:not(.v0) .btn.btn-robo{overflow:visible}
html:not(.v0) .btn.btn-robo::after{clip-path:inset(0 round 999px)}