.vidro-base {
  /*
    Sem `position` aqui. NUNCA.

    Eu tinha posto `position: relative` para o aro do ::after ter
    onde se ancorar -- e isso DESPREGOU as duas barras. As duas sao
    `position: fixed`, mas `fixed` vem de uma classe (Tailwind) ou
    de estilo em linha com a mesma forca; esta folha e injetada
    depois, entao `relative` ganhava por ordem e a barra passava a
    rolar junto com a pagina.

    O ::after nao precisa disto: quem usa esta classe ja e um
    elemento posicionado.
  */
  /* Duas camadas: a luz que escorre pela face de cima e o corpo do
     vidro. So a cor lisa daria plastico fosco -- que era como a
     barra aparecia no iPhone. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.01) 100%),
    rgba(14,18,26,0.52);
  /* saturate alto porque o desfoque rouba cor: sem ele o vidro
     fica cinza sujo em cima de qualquer foto. */
  -webkit-backdrop-filter: blur(15px) saturate(195%) brightness(1.05);
  backdrop-filter: blur(15px) saturate(195%) brightness(1.05);
  border: none;
  /* A quina de cima recebe a luz, a de baixo devolve sombra: e o que
     da espessura ao vidro sem precisar de lente. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.26);
}

/*
  O aro.

  Uma cor so nao consegue ser clara em cima e quase invisivel
  embaixo, que e como a luz corre numa peca curva. um padding de 1px
  mais mascara xor deixa visivel so o anel de 1px do gradiente.

  So existe enquanto a biblioteca nao refrata: onde ela entra, ela
  desenha o proprio aro.
*/
.vidro-base::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(145deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.08) 34%,
    rgba(255,255,255,0.03) 62%,
    rgba(255,255,255,0.22) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* O conteudo da barra sobe acima do aro. */
/*
  O conteudo da barra sobe acima do aro -- MENOS a camada da
  biblioteca.

  Sem o :not, esta regra pegava tambem o <span class="lg-layers">
  que ela insere, trocando o `position: absolute` dela por
  `relative`. A camada colapsava para 0x0 e NENHUM vidro era
  desenhado: no Chrome do computador a barra ficava sem efeito
  nenhum. A camada ja nasce com z-index -1, entao nao precisa de
  ajuda para ficar atras do conteudo.
*/
.vidro-base > *:not(.lg-layers) { position: relative; z-index: 1 }
/* Tema claro do site do cliente: vidro escuro viraria tarja. */
.vidro-base[data-glass-appearance="light"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.38) 42%, rgba(255,255,255,0.22) 100%),
    rgba(255,255,255,0.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.80),
    inset 0 -1px 0 rgba(0,0,0,0.06);
}
.vidro-base[data-glass-appearance="light"]::after {
  background: linear-gradient(145deg,
    rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.04) 34%,
    rgba(0,0,0,0.02) 62%, rgba(0,0,0,0.09) 100%);
}
/*
  Sai da frente SO quando a lente esta mesmo desenhando.

  Era .lg-ready, e isso estava errado: a biblioteca marca
  lg-ready tambem no modo fallback -- o que o WebKit usa, porque
  nao aceita filtro SVG em backdrop-filter. No Safari o nosso vidro
  saia, o fallback dela nao pintava nada, e a barra ficava
  COMPLETAMENTE transparente: "Como funciona" e "Planos" sumindo por
  cima da foto. Medido com o WebKit de verdade:
  { backdropRefraction: false, modo: fallback, pronto: true }.

  Agora so os dois modos que realmente refratam tomam o lugar.
*/
.vidro-base[data-lg-mode="backdrop"],
.vidro-base[data-lg-mode="scene"] {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}
.vidro-base[data-lg-mode="backdrop"]::after,
.vidro-base[data-lg-mode="scene"]::after { display: none }