/* ── BOTÃO GLASS SPARK ─────────────────────────────────────
   Uso: adicione a classe "btn-glass" em qualquer <a> ou <button>
   Pode combinar com ícone sparkle usando .btn-glass .spark
   Exemplo:
   <a href="#" class="btn-glass">
     <span class="spark">✦</span> Gerar diagnóstico
   </a>
──────────────────────────────────────────────────────────── */

.btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  cursor: pointer;
  border: none;

  /* Fundo glass escuro */
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 50%,
      rgba(255,255,255,0.06) 100%
    );

  /* Borda fina com brilho */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),   /* brilho topo */
    inset 0 -1px 0 rgba(255,255,255,0.04),  /* sombra fundo */
    inset 1px 0 0 rgba(255,255,255,0.08),   /* brilho esquerda */
    0 0 0 1px rgba(255,255,255,0.08),       /* borda externa */
    0 4px 24px rgba(0,0,0,0.4);             /* sombra difusa */

  /* Forma */
  padding: 14px 28px;
  border-radius: 100px;

  /* Transição suave */
  transition: all 500ms ease;

  /* Efeito backdrop blur (glass) */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-glass:hover {
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.13) 0%,
      rgba(255,255,255,0.04) 50%,
      rgba(255,255,255,0.10) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    inset 1px 0 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(255,255,255,0.16),
    0 0 24px rgba(50,177,245,0.15),
    0 8px 32px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}

.btn-glass:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 0 1px rgba(255,255,255,0.06),
    0 2px 8px rgba(0,0,0,0.4);
}

/* ── ÍCONE SPARKLE ──────────────────────────────────────── */
.btn-glass .spark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  animation: spark-pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes spark-pulse {
  0%,100% { opacity: 0.7; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(12deg); }
}

/* ── VARIANTE AZUL — glass com toque de cor ─────────────── */
.btn-glass-blue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  cursor: pointer;
  border: none;

  background:
    linear-gradient(
      135deg,
      rgba(50,177,245,0.18) 0%,
      rgba(50,177,245,0.06) 50%,
      rgba(50,177,245,0.14) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(50,177,245,0.3),
    inset 0 -1px 0 rgba(50,177,245,0.06),
    0 0 0 1px rgba(50,177,245,0.2),
    0 4px 24px rgba(0,0,0,0.35);

  padding: 14px 28px;
  border-radius: 100px;
  transition: all 500ms ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  justify-content: center;
  text-align: center;
}

.btn-glass-blue:hover {
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(50,177,245,0.28) 0%,
      rgba(50,177,245,0.10) 50%,
      rgba(50,177,245,0.22) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(50,177,245,0.45),
    0 0 0 1px rgba(50,177,245,0.35),
    0 0 30px rgba(50,177,245,0.25),
    0 8px 32px rgba(0,0,0,0.45);
  transform: translateY(-2px);
}

.btn-glass-blue .spark {
  display: inline-flex;
  align-items: center;
  font-size: 1.1rem;
  color: #32B1F5;
  animation: spark-pulse 2.5s ease-in-out infinite;
}

@media(max-width:480px){
  .btn-glass-blue, .btn-glass {font-size:.85rem; padding:8px 23px;}
}

@media(max-width:376px){.btn-glass-blue {font-size: .7rem !important;}}