/* Tokens e sistema de botoes do site novo.
 *
 * Fica fora do home.css porque o cabecalho usa o mesmo modificador de brilho, e
 * o cabecalho vale para todas as paginas — inclusive as convertidas, que nao
 * carregam o estilo da Home.
 *
 * Os tokens vinham do :root do home.css. Como as paginas convertidas nao
 * carregam aquele arquivo, o var(--sg-white) do botao do cabecalho resolvia
 * para nada e o texto caia para a cor herdada.
 */

:root {
  --sg-black: #050505;
  --sg-white: #fff;
  --sg-orange: #ff6500;
  --sg-orange-button: #ff7a00;
  --sg-green: #4dff26;
  --sg-green-button: #18cc61;
  --sg-peach: #ffd9bf;
  --sg-gray: #f2f2f2;
  --sg-line: #dadada;
  --sg-container: 1580px;
  --sg-text: #191919;
  --sg-radius-lg: 32px;
  --sg-radius-md: 24px;
  --sg-shadow: 0 18px 50px rgba(20, 20, 20, .08);
}

.sg-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border-radius: 999px;
  color: var(--sg-white);
  font-size: 15px;
  line-height: 1;
  font-variation-settings: "wght" 700;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.sg-button:hover,
.sg-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .14);
  filter: saturate(1.1);
}

/* O site-vendor.css traz a regra de link do Bootstrap antigo
   (a:active, a:hover { color: #333366 }). Ela tem especificidade (0,1,1) e
   vence o .sg-button (0,1,0), entao o texto branco virava azul-marinho ao
   passar o mouse. Nenhum estado do desenho novo mexe na cor do texto: o hover
   atua no fundo, na sombra e no brilho. Duas classes desfazem.
   O .sg-mobile-banner .sg-button segue preto — mesma especificidade, porem
   declarado depois no arquivo. */
.sg-button:hover,
.sg-button:focus-visible,
.sg-button:active {
  color: var(--sg-white);
}

/* ---------------------------------------------------------------------------
   Brilho do hover

   Duas camadas atras do conteudo: o ::before e a luz colorida desfocada e o
   ::after e a superficie opaca que cobre quase toda essa luz, deixando escapar
   so a franja em volta. Duas consequencias para quem usar o modificador:
   o fundo do botao passa a ser pintado pelo ::after, e o texto precisa vir
   dentro de um <span> para subir acima da pilha.

   Cada botao ajusta quatro variaveis:
     --sg-glow-surface       cor de fundo
     --sg-glow-radius        raio, que os pseudo-elementos herdam
     --sg-glow-border        borda em repouso
     --sg-glow-border-hover  borda com o mouse em cima
   --------------------------------------------------------------------------- */
.sg-button--glow {
  --sg-glow-surface: var(--sg-orange-button);
  --sg-glow-radius: 16px;
  --sg-glow-border: transparent;
  --sg-glow-border-hover: rgba(255, 255, 255, .9);
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: var(--sg-glow-radius);
  background: transparent;
  transition: border-color .3s ease-out;
}

.sg-button--glow::before,
.sg-button--glow::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* A luz ultrapassa a borda em 2px. E o que faz o halo aparecer em volta do
   botao, em vez de ficar preso atras da superficie opaca. */
.sg-button--glow::before {
  inset: -2px;
  background: conic-gradient(
    from 0deg,
    #ff7700 14.43%,
    #74d31e 25.10%,
    #4dff26 36.23%,
    #ff8c00 69.28%,
    #ed9415 82.48%,
    #00ff4d 92.64%,
    #ff7700 100%
  );
  opacity: 0;
  filter: blur(12px);
  transition: opacity .3s ease-out;
}

.sg-button--glow::after {
  z-index: 0;
  border: 1px solid var(--sg-glow-border);
  background: var(--sg-glow-surface);
  transition: border-color .3s ease-out;
}

.sg-button--glow > span {
  position: relative;
  z-index: 1;
}

/* O .sg-button generico levanta e ganha sombra no hover. Aqui quem responde e
   o brilho, entao os dois efeitos saem de cena. */
.sg-button--glow:hover,
.sg-button--glow:focus-visible {
  transform: none;
  box-shadow: none;
  filter: none;
}

.sg-button--glow:hover::before,
.sg-button--glow:focus-visible::before {
  opacity: 1;
}

.sg-button--glow:hover::after,
.sg-button--glow:focus-visible::after {
  border-color: var(--sg-glow-border-hover);
}