/* ============================================================================
   BOTÕES DE VIDRO E ÂMBAR — kit-visual-produtos (v1, 30/10/2026)

   Autossuficiente: um arquivo só, CSS puro, sem biblioteca, sem Tailwind, sem imagem.
   Guia de uso, exemplos e o script opcional do reflexo: LEIA-botoes-vidro.md

   CLASSES
     .btn-vidro            vidro fosco neutro (backdrop-filter, borda luminosa, brilho no hover)
     .btn-vidro-ambar      vidro âmbar quente (texto escuro, contraste alto). Também vale .btn-vidro--ambar
     .btn-vidro--cor       vidro colorido a partir do token --btn-matiz (0 a 360)
     .btn-vidro--azul | --verde | --violeta | --rosa | --vermelho | --ciano   atalhos de cor (função: azul=principal,
                           verde=confirmar, violeta=ver/comunicar, rosa e vermelho=risco, ciano=info)
     .btn-vidro--sm | --lg  tamanhos (o padrão é o médio)
     .btn-vidro--pilula     cantos totalmente redondos
     .btn-vidro--icone      só ícone, quadrado (com --pilula vira círculo). EXIGE aria-label
     .btn-vidro--bloco      ocupa a linha inteira

   TOKENS QUE VOCÊ PODE MEXER (em classe ou style inline)
     --btn-matiz   cor do botão colorido e do halo (0 a 360). Ex.: style="--btn-matiz: 150"
     --btn-brilho  0 a 1: força do halo. Usa --brilho-botao do ecossistema quando existir (padrão .35)
     --btn-raio    arredondamento     --btn-h  altura mínima     --btn-fs  tamanho da letra

   TEMAS (escuro, claro, intermediário)
     - sem atributo: segue o sistema (prefers-color-scheme); escuro é o padrão.
     - [data-theme="dark|escuro"], [data-theme="light|claro"], [data-theme="dim|intermediario|moderado"] em qualquer
       elemento (html, body ou um bloco) forçam o tema daquele pedaço.
     - Plataforma que é escura por padrão mesmo com o sistema claro: ponha data-theme="dark" no <html>.

   ACESSIBILIDADE E ROBUSTEZ
     - Contraste conferido em WCAG (tabela no LEIA): texto branco nas cores >= 4,5:1; âmbar com texto escuro >= 7:1.
     - :focus-visible com anel afastado (âmbar no escuro, azul no claro); hover só em aparelho com mouse; alvo de toque >= 36 px.
     - prefers-reduced-motion: sem movimento e sem varredura de brilho (a cor continua mudando).
     - prefers-reduced-transparency / prefers-contrast: more / sem backdrop-filter: fundo semitransparente mais denso.
     - forced-colors (alto contraste do Windows): vira botão do sistema, com borda.
   ========================================================================== */


/* ============================================================================
   1. TOKENS DE TEMA
   Mantenha os três blocos (escuro, claro, intermediário) com as MESMAS chaves.
   O bloco claro aparece duas vezes (sistema claro sem data-theme; data-theme explícito): mantenha idênticos.
   ========================================================================== */

/* escuro (padrão) */
:root,
:is([data-theme="dark"], [data-theme="escuro"]) {
  --vidro-fundo: rgba(255, 255, 255, 0.08);          /* superfície do vidro neutro */
  --vidro-fundo-hover: rgba(255, 255, 255, 0.15);
  --vidro-fundo-solido: #262a33;                     /* usado quando não há blur / pedem menos transparência */
  --vidro-fundo-solido-hover: #323744;
  --vidro-texto: #f4f4f5;
  --vidro-luz: rgba(255, 255, 255, 0.6);             /* início da borda luminosa */
  --vidro-borda-fim: rgba(255, 255, 255, 0.1);       /* fim da borda luminosa */
  --vidro-sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 18px -8px rgba(0, 0, 0, 0.7);
  --vidro-sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.5), 0 14px 26px -10px rgba(0, 0, 0, 0.8);
  --vidro-esp: rgba(255, 255, 255, 0.22);            /* reflexo especular do vidro neutro */
  --vidro-varre: rgba(255, 255, 255, 0.42);          /* faixa de brilho que varre no hover */
  --vidro-anel: #fcd34d;                             /* anel de foco: âmbar sobre fundo escuro */
  --vidro-cor-alpha: 0.92;                           /* opacidade do vidro colorido */
}

/* claro, quando o sistema pede claro e a página não escolheu tema */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --vidro-fundo: rgba(255, 255, 255, 0.66);
    --vidro-fundo-hover: rgba(255, 255, 255, 0.9);
    --vidro-fundo-solido: #ffffff;
    --vidro-fundo-solido-hover: #f1f5f9;
    --vidro-texto: #18181b;
    --vidro-luz: rgba(255, 255, 255, 0.95);
    --vidro-borda-fim: rgba(20, 33, 61, 0.22);
    --vidro-sombra: 0 1px 2px rgba(15, 23, 42, 0.12), 0 8px 18px -8px rgba(15, 23, 42, 0.28);
    --vidro-sombra-alta: 0 2px 4px rgba(15, 23, 42, 0.14), 0 14px 26px -10px rgba(15, 23, 42, 0.34);
    --vidro-esp: rgba(37, 99, 235, 0.16);
    --vidro-varre: rgba(37, 99, 235, 0.14);
    --vidro-anel: #1d4ed8;
    --vidro-cor-alpha: 0.94;
  }
}

/* claro, escolhido pela página */
:is([data-theme="light"], [data-theme="claro"]) {
  --vidro-fundo: rgba(255, 255, 255, 0.66);
  --vidro-fundo-hover: rgba(255, 255, 255, 0.9);
  --vidro-fundo-solido: #ffffff;
  --vidro-fundo-solido-hover: #f1f5f9;
  --vidro-texto: #18181b;
  --vidro-luz: rgba(255, 255, 255, 0.95);
  --vidro-borda-fim: rgba(20, 33, 61, 0.22);
  --vidro-sombra: 0 1px 2px rgba(15, 23, 42, 0.12), 0 8px 18px -8px rgba(15, 23, 42, 0.28);
  --vidro-sombra-alta: 0 2px 4px rgba(15, 23, 42, 0.14), 0 14px 26px -10px rgba(15, 23, 42, 0.34);
  --vidro-esp: rgba(37, 99, 235, 0.16);
  --vidro-varre: rgba(37, 99, 235, 0.14);
  --vidro-anel: #1d4ed8;
  --vidro-cor-alpha: 0.94;
}

/* intermediário (escuro suave) */
:is([data-theme="dim"], [data-theme="intermediario"], [data-theme="moderado"]) {
  --vidro-fundo: rgba(255, 255, 255, 0.1);
  --vidro-fundo-hover: rgba(255, 255, 255, 0.17);
  --vidro-fundo-solido: #2c313c;
  --vidro-fundo-solido-hover: #383e4c;
  --vidro-texto: #e5e7eb;
  --vidro-luz: rgba(255, 255, 255, 0.55);
  --vidro-borda-fim: rgba(255, 255, 255, 0.12);
  --vidro-sombra: 0 1px 2px rgba(0, 0, 0, 0.38), 0 8px 18px -8px rgba(0, 0, 0, 0.55);
  --vidro-sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 26px -10px rgba(0, 0, 0, 0.62);
  --vidro-esp: rgba(255, 255, 255, 0.22);
  --vidro-varre: rgba(255, 255, 255, 0.4);
  --vidro-anel: #fcd34d;
  --vidro-cor-alpha: 0.92;
}


/* ============================================================================
   2. BASE — vale para .btn-vidro e .btn-vidro-ambar
   Camadas (de baixo para cima): cor de fundo > brilho do alto e varredura (background) > reflexo especular (::before)
   > texto > aro luminoso (::after).  isolation:isolate mantém os pseudo-elementos atrás do texto.
   ========================================================================== */
:is(.btn-vidro, .btn-vidro-ambar) {
  /* API pública (sobrescreva por classe ou style inline) */
  --btn-matiz: 255;
  --btn-brilho: var(--brilho-botao, 0.35);
  --btn-raio: 12px;
  --btn-h: 40px;
  --btn-fs: 0.9375rem;
  --btn-px: 1.1em;
  /* movimento: 180 ms com saída suave (desacelera no fim) */
  --btn-t: 180ms;
  --btn-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  /* derivados (as variantes trocam estes) */
  --btn-fundo: var(--btn-fundo-neutro, var(--vidro-fundo));
  --btn-fundo-hover: var(--btn-fundo-neutro-hover, var(--vidro-fundo-hover));
  --btn-texto: var(--vidro-texto);
  --btn-halo: oklch(0.72 0.17 var(--btn-matiz));     /* cor do brilho em volta */
  --btn-esp: var(--vidro-esp);                       /* cor (com transparência) do reflexo especular */
  --btn-varre: var(--vidro-varre);                   /* cor da faixa de brilho que varre no hover */
  --btn-blur: 14px;
  --btn-aro: 0 0 0 0 transparent;                    /* aro de reserva (só sem máscara) */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  box-sizing: border-box;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  margin: 0;
  border: 0;
  border-radius: var(--btn-raio);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--btn-texto);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  vertical-align: middle;

  background-color: var(--btn-fundo);
  /* 1ª camada: faixa de brilho (varre no hover). 2ª: luz no alto e leve sombra embaixo (volume) */
  background-image:
    linear-gradient(112deg, transparent 42%, var(--btn-varre) 50%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.1));
  background-repeat: no-repeat;
  background-size: 260% 100%, 100% 100%;
  background-position: 100% 0, 0 0;

  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(1.6);
  backdrop-filter: blur(var(--btn-blur)) saturate(1.6);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -10px 14px -10px rgba(0, 0, 0, 0.28),
    var(--btn-aro),
    var(--vidro-sombra),
    0 0 calc(4px + 14px * var(--btn-brilho)) 0 color-mix(in srgb, var(--btn-halo) calc(10% + 35% * var(--btn-brilho)), transparent);

  transition:
    transform var(--btn-t) var(--btn-ease),
    box-shadow var(--btn-t) var(--btn-ease),
    background-color var(--btn-t) var(--btn-ease),
    filter var(--btn-t) var(--btn-ease);
}

/* Reflexo especular: um ponto de luz que acompanha o mouse (--mx e --my, ver o script de 3 linhas no LEIA).
   Sem o script ele fica no centro do alto. Só aparece no hover e no foco. */
:is(.btn-vidro, .btn-vidro-ambar)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 84px at var(--mx, 50%) var(--my, 0%), var(--btn-esp), transparent 100%);
  transition: opacity var(--btn-t) var(--btn-ease);
}

/* Aro luminoso de 1px: gradiente na diagonal (luz no canto de cima, tom da cor no meio, sombra no fim).
   Feito com máscara para ficar só na borda e não pintar o interior. */
:is(.btn-vidro, .btn-vidro-ambar)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, var(--vidro-luz) 0%, color-mix(in srgb, var(--btn-halo) 55%, transparent) 36%, var(--vidro-borda-fim) 62%, color-mix(in srgb, var(--btn-halo) 42%, transparent) 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;
}

/* Ícones dentro do botão herdam a cor do texto */
:is(.btn-vidro, .btn-vidro-ambar) > svg,
:is(.btn-vidro, .btn-vidro-ambar) > img,
.btn-vidro__icone {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  stroke: currentColor;
  transition: transform var(--btn-t) var(--btn-ease);
}


/* ============================================================================
   3. VARIANTES DE COR
   Vidro colorido: o tom vem de --btn-matiz (oklch mantém a luminosidade igual em qualquer cor, então
   o contraste do texto branco se mantém). L .46 / C .16 validados: veja a tabela no LEIA.
   ========================================================================== */
.btn-vidro--cor,
.btn-vidro--azul,
.btn-vidro--verde,
.btn-vidro--violeta,
.btn-vidro--rosa,
.btn-vidro--vermelho,
.btn-vidro--ciano {
  --btn-fundo: oklch(0.46 0.16 var(--btn-matiz) / var(--vidro-cor-alpha, 0.92));
  --btn-fundo-hover: var(--btn-fundo);               /* a cor não clareia no hover (protege o contraste) */
  --btn-texto: #fff;
  --btn-halo: oklch(0.7 0.19 var(--btn-matiz));
  --btn-esp: rgba(255, 255, 255, 0.16);              /* fraco de propósito: o texto branco precisa continuar legível sob o reflexo */
  --btn-varre: rgba(255, 255, 255, 0.3);
  --btn-blur: 6px;
}
.btn-vidro--azul     { --btn-matiz: 255; }
.btn-vidro--verde    { --btn-matiz: 155; }
.btn-vidro--violeta  { --btn-matiz: 295; }
.btn-vidro--rosa     { --btn-matiz: 0; }
.btn-vidro--vermelho { --btn-matiz: 25; }
.btn-vidro--ciano    { --btn-matiz: 215; }

/* Âmbar: fundo claro e quente com texto marrom-escuro (contraste >= 7:1 em qualquer tema) */
.btn-vidro-ambar,
.btn-vidro--ambar {
  --btn-matiz: 78;
  --btn-fundo: oklch(0.82 0.165 var(--btn-matiz) / 0.92);
  --btn-fundo-hover: oklch(0.85 0.17 var(--btn-matiz) / 0.96);
  --btn-texto: oklch(0.24 0.05 60);
  --btn-halo: oklch(0.8 0.17 70);
  --btn-esp: rgba(255, 255, 255, 0.4);
  --btn-varre: rgba(255, 255, 255, 0.5);
  --btn-blur: 8px;
}


/* ============================================================================
   4. TAMANHOS E FORMATOS (valem para .btn-vidro e .btn-vidro-ambar)
   ========================================================================== */
.btn-vidro--sm { --btn-h: 32px; --btn-fs: 0.8125rem; --btn-raio: 10px; --btn-px: 0.95em; }
.btn-vidro--lg { --btn-h: 48px; --btn-fs: 1.0625rem; --btn-raio: 14px; --btn-px: 1.35em; }
@media (pointer: coarse) {
  .btn-vidro--sm { --btn-h: 36px; }                  /* dedo precisa de alvo maior */
}

.btn-vidro--pilula { --btn-raio: 999px; }
.btn-vidro--bloco { display: flex; width: 100%; }

/* só ícone: quadrado do tamanho da altura; com --pilula vira círculo. Use sempre aria-label */
.btn-vidro--icone {
  --btn-px: 0;
  width: var(--btn-h);
  padding: 0;
  gap: 0;
}
.btn-vidro--icone > svg,
.btn-vidro--icone > img { width: 1.3em; height: 1.3em; }


/* ============================================================================
   5. ESTADOS
   ========================================================================== */

/* Hover: só em aparelho com mouse (no toque o hover "gruda"). Sobe 1px, acende o halo, mostra o reflexo e varre o brilho. */
@media (hover: hover) {
  :is(.btn-vidro, .btn-vidro-ambar):hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-1px);
    background-color: var(--btn-fundo-hover);
    animation: vidro-varredura 640ms var(--btn-ease) 1;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -10px 14px -10px rgba(0, 0, 0, 0.3),
      var(--btn-aro),
      var(--vidro-sombra-alta),
      0 0 calc(10px + 24px * var(--btn-brilho)) 1px color-mix(in srgb, var(--btn-halo) calc(22% + 45% * var(--btn-brilho)), transparent);
  }
  :is(.btn-vidro, .btn-vidro-ambar):hover:not(:disabled):not([aria-disabled="true"])::before { opacity: 1; }
  :is(.btn-vidro, .btn-vidro-ambar):hover:not(:disabled):not([aria-disabled="true"]) > svg { transform: scale(1.08); }
}

/* Foco por teclado: anel afastado 3px (separa do botão), âmbar no escuro e azul no claro, ambos com contraste >= 3:1 com o fundo */
:is(.btn-vidro, .btn-vidro-ambar):focus-visible {
  outline: 2px solid var(--vidro-anel);
  outline-offset: 3px;
}
:is(.btn-vidro, .btn-vidro-ambar):focus-visible::before { opacity: 1; }

/* Clique: afunda (desce 1px, encolhe um pouco, sombra por dentro). Mais rápido que o hover para parecer mecânico. */
:is(.btn-vidro, .btn-vidro-ambar):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px) scale(0.985);
  transition-duration: 80ms;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    var(--btn-aro),
    0 0 6px 0 color-mix(in srgb, var(--btn-halo) 30%, transparent);
}

/* Desativado: mesma cor, menos vida. Use disabled, aria-disabled="true" ou a classe .is-desativado */
:is(.btn-vidro, .btn-vidro-ambar):is(:disabled, [aria-disabled="true"], .is-desativado) {
  cursor: not-allowed;
  opacity: 0.5;
  filter: saturate(0.55);
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--btn-aro);
}

/* Varredura de brilho: a faixa cruza o botão uma vez, da esquerda para a direita */
@keyframes vidro-varredura {
  from { background-position: 100% 0, 0 0; }
  to   { background-position: 0% 0, 0 0; }
}


/* ============================================================================
   6. FALLBACKS E PREFERÊNCIAS DO USUÁRIO
   ========================================================================== */

/* 6a. Navegador sem backdrop-filter: o vidro vira um fundo semitransparente mais denso (e o aro de reserva aparece). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.btn-vidro, .btn-vidro-ambar) {
    --btn-fundo-neutro: var(--vidro-fundo-solido);
    --btn-fundo-neutro-hover: var(--vidro-fundo-solido-hover);
  }
}

/* 6b. Quem pede menos transparência ou mais contraste no sistema recebe o mesmo fundo denso e borda firme. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :is(.btn-vidro, .btn-vidro-ambar) {
    --btn-fundo-neutro: var(--vidro-fundo-solido);
    --btn-fundo-neutro-hover: var(--vidro-fundo-solido-hover);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --btn-aro: inset 0 0 0 1px var(--vidro-texto);
  }
}

/* 6c. Sem suporte à máscara do aro luminoso: esconde o aro em gradiente e usa uma borda simples por dentro. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  :is(.btn-vidro, .btn-vidro-ambar)::after { display: none; }
  :is(.btn-vidro, .btn-vidro-ambar) { --btn-aro: inset 0 0 0 1px rgba(255, 255, 255, 0.32); }
  :is([data-theme="light"], [data-theme="claro"]) :is(.btn-vidro, .btn-vidro-ambar) { --btn-aro: inset 0 0 0 1px rgba(20, 33, 61, 0.28); }
}

/* 6d. Sem oklch (navegadores de antes de 2023): cores fixas equivalentes. */
@supports not (color: oklch(0.5 0.1 200)) {
  :is(.btn-vidro, .btn-vidro-ambar) { --btn-halo: #5b8def; }
  .btn-vidro--cor, .btn-vidro--azul { --btn-fundo: #0055aef0; --btn-halo: #3b82f6; }
  .btn-vidro--verde    { --btn-fundo: #00702bf0; --btn-halo: #22c55e; }
  .btn-vidro--violeta  { --btn-fundo: #613ea6f0; --btn-halo: #8b5cf6; }
  .btn-vidro--rosa     { --btn-fundo: #992154f0; --btn-halo: #f43f5e; }
  .btn-vidro--vermelho { --btn-fundo: #9e2225f0; --btn-halo: #ef4444; }
  .btn-vidro--ciano    { --btn-fundo: #006a8ff0; --btn-halo: #06b6d4; }
  .btn-vidro-ambar, .btn-vidro--ambar { --btn-fundo: #feb41feb; --btn-fundo-hover: #ffc247f5; --btn-texto: #301904; --btn-halo: #f59e0b; }
}

/* 6d2. Sem color-mix (Safari 15.4 a 16.1): halo e aro simples, sem mistura de cor. */
@supports not (color: color-mix(in srgb, red, blue)) {
  :is(.btn-vidro, .btn-vidro-ambar) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--btn-aro), var(--vidro-sombra); }
  :is(.btn-vidro, .btn-vidro-ambar)::after { background: linear-gradient(135deg, var(--vidro-luz), var(--vidro-borda-fim)); }
  :is(.btn-vidro, .btn-vidro-ambar):hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--btn-aro), var(--vidro-sombra-alta); }
}

/* 6e. Menos movimento: nada se mexe nem varre; só a cor e o halo mudam, na hora. */
@media (prefers-reduced-motion: reduce) {
  :is(.btn-vidro, .btn-vidro-ambar),
  :is(.btn-vidro, .btn-vidro-ambar)::before,
  :is(.btn-vidro, .btn-vidro-ambar) > svg {
    transition: none;
    animation: none !important;
  }
  :is(.btn-vidro, .btn-vidro-ambar):hover:not(:disabled):not([aria-disabled="true"]),
  :is(.btn-vidro, .btn-vidro-ambar):active:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
  :is(.btn-vidro, .btn-vidro-ambar):hover > svg { transform: none; }
}

/* 6f. Alto contraste do Windows (forced-colors): botão do sistema, com borda, sem efeitos. */
@media (forced-colors: active) {
  :is(.btn-vidro, .btn-vidro-ambar) {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  :is(.btn-vidro, .btn-vidro-ambar)::before,
  :is(.btn-vidro, .btn-vidro-ambar)::after { display: none; }
  :is(.btn-vidro, .btn-vidro-ambar):focus-visible { outline: 2px solid Highlight; }
  :is(.btn-vidro, .btn-vidro-ambar):is(:disabled, [aria-disabled="true"], .is-desativado) { color: GrayText; border-color: GrayText; opacity: 1; }
}

/* 6g. Impressão: botão chapado, sem blur nem sombra. */
@media print {
  :is(.btn-vidro, .btn-vidro-ambar) {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  :is(.btn-vidro, .btn-vidro-ambar)::before,
  :is(.btn-vidro, .btn-vidro-ambar)::after { display: none; }
}