.botao {
  --ponto: 15px;                                 
  --bm-raio: calc(var(--botao-h) / 2);
  --bm-vao: 33px;                                
  --bm-pl: calc(var(--botao-px) - 8px);          
  --bm-pr: calc(var(--botao-px) + 11px);
  --bm-feixe-r: 40px;                            
  --bm-ponto-op: 1;
  --bm-curva: cubic-bezier(.2, .7, .2, 1);       
  padding: 0 var(--bm-pr) 0 var(--bm-pl);
  column-gap: var(--bm-vao);
}
@media (hover: none) {
  
  .botao { --bm-vao: 24px; --bm-pl: calc(var(--botao-px) - 12px); --bm-pr: calc(var(--botao-px) - 4px); }
}
.botao--nav { --bm-feixe-r: 36px; }

.botao::before {
  border: 0;
  background: radial-gradient(circle, var(--cor-estacao) 0 2.95px, var(--cor-fundo) 3.35px);
  box-shadow: inset 0 0 0 1.3px var(--cor-traco);
  opacity: var(--bm-ponto-op);
}
.botao[data-ponto-chegando]::before { opacity: 0; }

.botao-tinta,
.botao-veladura,
.bm-mare {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: var(--bm-raio);
}
.botao-tinta {
  background:
    url(../materia/botao/seco-esq.webp) left center / auto 100% no-repeat,
    url(../materia/botao/seco-dir.webp) right center / auto 100% no-repeat,
    url(../materia/botao/seco-meio.webp) 0 0 / auto 100% repeat-x;
}
.botao-veladura {
  background:
    url(../materia/botao/molhado-esq.webp) left center / auto 100% no-repeat,
    url(../materia/botao/molhado-dir.webp) right center / auto 100% no-repeat,
    url(../materia/botao/molhado-meio.webp) 0 0 / auto 100% repeat-x;
  -webkit-mask: none; mask: none;                
  opacity: 0;
}
.bm-mare {
  background:
    url(../materia/botao/mare-esq.webp) left center / auto 100% no-repeat,
    url(../materia/botao/mare-dir.webp) right center / auto 100% no-repeat,
    url(../materia/botao/mare-meio.webp) 0 0 / auto 100% repeat-x;
  opacity: 0;
}

.bm-gota,
.bm-vista {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-clip-path: inset(0 round var(--bm-raio)); clip-path: inset(0 round var(--bm-raio));
}
.bm-gota-disco {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%;
  background: url(../materia/botao/flor.webp) center / 100% 100% no-repeat;
  opacity: 0; transform: scale(0);
}

.bm-giro { position: absolute; left: var(--bm-px, 25.5px); top: 50%; width: 0; height: 0; }
.bm-abre { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.bm-feixe {
  position: absolute;
  left: calc(-1 * var(--bm-feixe-r)); top: calc(-1 * var(--bm-feixe-r));
  width: calc(2 * var(--bm-feixe-r)); height: calc(2 * var(--bm-feixe-r));
  background: url(../materia/botao/robustez-feixe.png) center / 100% 100% no-repeat;
}

.bm-raios { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.bm-raio {
  position: absolute; left: 9px; top: -.5px; height: 1px; width: calc(var(--bm-feixe-r) - 12px);
  transform-origin: -9px 50%;
  background: linear-gradient(90deg, rgb(255 247 246 / .66), rgb(255 247 246 / 0));
}
.bm-raio:first-child { transform: rotate(-29deg); }
.bm-raio:last-child { transform: rotate(29deg); }
.botao[data-ponto-chegando] .bm-vista { opacity: 0; }

.bm-carimbo {
  position: absolute; left: var(--bm-px, 25.5px); top: 50%; pointer-events: none;
  width: var(--ponto); height: var(--ponto); margin: calc(var(--ponto) / -2) 0 0 calc(var(--ponto) / -2);
  border-radius: 50%; box-shadow: 0 0 0 1.3px var(--cor-acao-texto); opacity: 0;
}

.botao .botao-seta { display: none; }

@media (hover: hover) {
  .botao:hover .botao-veladura { opacity: 1; }
  .botao:hover .bm-abre { transform: scale(1.6, 1.41); }
}
.botao:focus-visible .botao-veladura,
.botao.bm-toque .botao-veladura { opacity: 1; }
.botao:focus-visible .bm-abre,
.botao.bm-toque .bm-abre { transform: scale(1.6, 1.41); }

.convite .botao .bm-vista { opacity: 0; }
@media (hover: hover) { .convite .botao:hover .bm-vista { opacity: 1; } }
.convite .botao:focus-visible .bm-vista,
.convite .botao.bm-toque .bm-vista { opacity: 1; }

html.com-movimento .botao .botao-veladura,
html.com-movimento .botao:hover .botao-veladura,
html.com-movimento .botao:focus-visible .botao-veladura { animation: none; transition: opacity .6s ease .22s; }
html.com-movimento .botao .bm-abre { transition: transform .7s var(--bm-curva); }
html.com-movimento .convite .botao .bm-vista { transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) {
  html.com-movimento .botao .botao-veladura,
  html.com-movimento .botao .bm-abre,
  html.com-movimento .convite .botao .bm-vista { transition: none; }
}