/*
 * Componente de botão "notch" (cantos cortados via clip-path), repetido
 * quase identico em produtos.css (.soluctions__link, .load-more__btn),
 * home.css (.soluctions__link), servicos.css (.project__link) e
 * contato.css (.common-button do formulário).
 *
 * Uso: adicione a classe `btn-notch` no elemento, junto com a classe
 * específica do módulo que já define tamanho/cor/padding/hover.
 * Ex.: <a class="soluctions__link btn-notch">...</a>
 */

.btn-notch {
  font-family: var(--font-button);
  text-transform: uppercase;
  transition: var(--transition-base);
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    100% 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
}