/*!
 * fx-btn.css — efeitos de hover para botões do Elementor (Elementor FX) · só CSS
 *
 * ONDE APLICAR (Avançado → Classes CSS)
 *   Em um botão:        fx-btn-varredura                 no widget (Botão, Formulário, Call to Action…)
 *   No site inteiro:    fx-btn-site-varredura            no <body> (com o plugin, é uma opção do módulo)
 *   Botão secundário:   + fx-btn-vazado                  fundo transparente; a varredura preenche no hover
 *   Exceção:            fx-btn-nenhum                    desliga o efeito do site naquele widget
 *   HTML próprio:       <a class="fx-btn-varredura">     também funciona direto no link
 *
 * AJUSTES (Avançado → CSS personalizado do widget, ou no CSS do site para todos):
 *   selector { --fx-btn-cor: #2136B0; }
 *   --fx-btn-cor      cor da varredura   (padrão: escurece o botão; no vazado: cor primária do Elementor)
 *   --fx-btn-texto    cor do texto no hover, só no vazado (padrão #fff)
 *   --fx-btn-dur      duração da varredura (.75s)
 *   --fx-btn-angulo   inclinação da borda da varredura (30deg = "\"; -30deg = "/")
 *   --fx-btn-elevar   quanto o botão sobe no hover (-3px; 0 = não sobe)
 *   --fx-btn-sombra   sombra no hover (none = sem sombra)
 *   --fx-btn-seta     quanto o ícone avança no hover (5px)
 *
 * No Elementor, deixe a cor de FUNDO do hover igual à normal: quem troca a cor é a varredura.
 */

/* ===== Varredura diagonal + leve elevação ===== */
:where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button:not(:where(.fx-btn-nenhum *)),
a.fx-btn-varredura {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .55s cubic-bezier(.25, .8, .25, 1),
    box-shadow .55s cubic-bezier(.25, .8, .25, 1),
    color .5s cubic-bezier(.4, .1, .2, 1),
    background-color .5s cubic-bezier(.4, .1, .2, 1);
}

/* 2ª camada: entra pela esquerda com a borda inclinada. A sobra lateral (20% + 1em)
   cobre os cantos mesmo em botões altos ou quase quadrados. */
:where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button:not(:where(.fx-btn-nenhum *))::before,
a.fx-btn-varredura::before {
  content: "";
  position: absolute;
  inset: -2px calc(-20% - 1em);
  z-index: -1;
  pointer-events: none;
  background: var(--fx-btn-cor, rgba(0, 0, 0, .22));
  transform: translateX(-100%) skewX(var(--fx-btn-angulo, 30deg));
  transition: transform var(--fx-btn-dur, .75s) cubic-bezier(.4, .1, .2, 1);
}

:where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button:not(:where(.fx-btn-nenhum *)) .elementor-button-icon {
  transition: transform .5s cubic-bezier(.25, .8, .25, 1);
}

/* hover só em quem tem mouse (no celular o "hover" ficaria preso depois do toque) */
@media (hover: hover) {
  :where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button:not(:where(.fx-btn-nenhum *)):hover::before,
  a.fx-btn-varredura:hover::before {
    transform: translateX(0) skewX(var(--fx-btn-angulo, 30deg));
  }
  :where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button:not(:where(.fx-btn-nenhum *)):hover,
  a.fx-btn-varredura:hover {
    transform: translateY(var(--fx-btn-elevar, -3px));
    box-shadow: var(--fx-btn-sombra, 0 12px 26px -12px rgba(0, 0, 0, .45));
  }
  :where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button:not(:where(.fx-btn-nenhum *)):hover .elementor-button-icon {
    transform: translateX(var(--fx-btn-seta, 5px));
  }
}

/* teclado (e .is-hover, usado nas demos): mesmo efeito */
:where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button:not(:where(.fx-btn-nenhum *)):is(:focus-visible, .is-hover)::before,
a.fx-btn-varredura:is(:focus-visible, .is-hover)::before {
  transform: translateX(0) skewX(var(--fx-btn-angulo, 30deg));
}
:where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button:not(:where(.fx-btn-nenhum *)).is-hover,
a.fx-btn-varredura.is-hover {
  transform: translateY(var(--fx-btn-elevar, -3px));
  box-shadow: var(--fx-btn-sombra, 0 12px 26px -12px rgba(0, 0, 0, .45));
}
:where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button.is-hover .elementor-button-icon {
  transform: translateX(var(--fx-btn-seta, 5px));
}

/* ===== Vazado (secundário): fundo transparente, borda e texto na cor; a varredura preenche =====
   Seletor com 3 classes de propósito: vence o estilo global de botões do Elementor sem !important. */
:is(.fx-btn-varredura.fx-btn-vazado, .fx-btn-site-varredura .fx-btn-vazado) .elementor-button,
a.fx-btn-varredura.fx-btn-vazado {
  background: transparent;
  color: var(--fx-btn-cor, var(--e-global-color-primary, #2136B0));
  border: 1px solid var(--fx-btn-cor, var(--e-global-color-primary, #2136B0));
  /* o texto troca de cor um pouco depois de a varredura começar (na entrada e na saída) */
  transition:
    transform .55s cubic-bezier(.25, .8, .25, 1),
    box-shadow .55s cubic-bezier(.25, .8, .25, 1),
    color .35s cubic-bezier(.4, .1, .2, 1) .22s,
    background-color .5s cubic-bezier(.4, .1, .2, 1);
}
:is(.fx-btn-varredura.fx-btn-vazado, .fx-btn-site-varredura .fx-btn-vazado) .elementor-button::before,
a.fx-btn-varredura.fx-btn-vazado::before {
  background: var(--fx-btn-cor, var(--e-global-color-primary, #2136B0));
}
:is(.fx-btn-varredura.fx-btn-vazado, .fx-btn-site-varredura .fx-btn-vazado) .elementor-button :is(svg, i) {
  fill: currentColor;
  color: inherit;
}
@media (hover: hover) {
  :is(.fx-btn-varredura.fx-btn-vazado, .fx-btn-site-varredura .fx-btn-vazado) .elementor-button:hover,
  a.fx-btn-varredura.fx-btn-vazado:hover {
    background: transparent;
    color: var(--fx-btn-texto, #fff);
  }
}
:is(.fx-btn-varredura.fx-btn-vazado, .fx-btn-site-varredura .fx-btn-vazado) .elementor-button:is(:focus-visible, .is-hover),
a.fx-btn-varredura.fx-btn-vazado:is(:focus-visible, .is-hover) {
  color: var(--fx-btn-texto, #fff);
}

/* ===== Movimento reduzido: troca de cor sem deslizar nem subir ===== */
@media (prefers-reduced-motion: reduce) {
  :where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button,
  :where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button::before,
  :where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button .elementor-button-icon,
  a.fx-btn-varredura, a.fx-btn-varredura::before {
    transition: none !important;
  }
  :where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button:hover,
  :where(.fx-btn-varredura, .fx-btn-site-varredura) .elementor-button:hover .elementor-button-icon,
  a.fx-btn-varredura:hover {
    transform: none !important;
  }
}