/* =========================================
   ESTILOS DOS BOTÕES NEON ZAPHITO 360 IA
   Estilo: Opção 1 - Neon Cyberpunk
   ========================================= */

/* --- Variáveis de Cor (Fácil Ajuste) --- */
:root {
    /* Cores WhatsApp - Verde Elétrico */
    --neon-wa-primary: #39ff14; 
    --neon-wa-secondary: #00f7ff; /* Azul ciano para o efeito elétrico */
    
    /* Cores Instagram - Gradiente Neon */
    --neon-ig-primary: #ff3399; /* Rosa choque principal */
    --neon-ig-secondary: #bd33ff; /* Roxo para o brilho secundário */
    
    /* Cor do texto (Geralmente branco para brilhar com o text-shadow) */
    --text-glow: #ffffff; 
}

/* --- Estrutura Base do Botão --- */
.z-btn-neon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    margin: 10px; /* Espaçamento entre botões se estiverem juntos */
    
    font-family: 'Arial', sans-serif; /* SUBSTITUA pela fonte principal do seu site */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    
    border: 2px solid transparent; /* A borda será definida pela cor neon */
    border-radius: 50px; /* Formato de pílula arredondada */
    background-color: rgba(0, 0, 0, 0.3); /* Fundo semi-transparente escuro */
    
    position: relative;
    overflow: visible; /* Necessário para o brilho vazar para fora */
    transition: all 0.3s ease-in-out;
}

/* Estilo do Ícone dentro do botão */
.z-btn-neon i {
    margin-right: 10px;
    font-size: 1.3rem;
}


/* =========================================
   BOTÃO WHATSAPP IA (PRINCIPAL)
   Foco: Alta energia, elétrico, pulsante.
   ========================================= */
.z-btn-wa {
    color: var(--text-glow);
    border-color: var(--neon-wa-primary);
    
    /* O segredo do neon: múltiplas sombras */
    box-shadow: 
        0 0 5px var(--neon-wa-primary),   /* Brilho interno sutil */
        0 0 15px var(--neon-wa-primary),  /* Brilho médio */
        0 0 30px var(--neon-wa-secondary), /* Halo elétrico externo azulado */
        inset 0 0 10px rgba(57, 255, 20, 0.5); /* Brilho interno na borda */
        
    /* Faz o texto parecer luz também */
    text-shadow: 0 0 5px var(--neon-wa-primary);
    
    /* Animação de pulsação constante */
    animation: pulse-electric 2s infinite alternate;
}

/* Efeito Hover (Ao passar o mouse) - Intensifica a energia */
.z-btn-wa:hover {
    transform: scale(1.05); /* Cresce ligeiramente */
    background-color: rgba(57, 255, 20, 0.1); /* Tinge o fundo de verde */
    box-shadow: 
        0 0 10px var(--neon-wa-primary),
        0 0 30px var(--neon-wa-primary),
        0 0 60px var(--neon-wa-secondary), /* Halo muito maior */
        inset 0 0 15px var(--neon-wa-primary);
}


/* =========================================
   BOTÃO INSTAGRAM (SECUNDÁRIO)
   Foco: Brilho neon vibrante, cores quentes.
   ========================================= */
.z-btn-ig {
    color: var(--text-glow);
    border-color: var(--neon-ig-primary);
    
    box-shadow: 
        0 0 5px var(--neon-ig-primary),
        0 0 15px var(--neon-ig-secondary),
        inset 0 0 10px rgba(255, 51, 153, 0.4);
        
    text-shadow: 0 0 5px var(--neon-ig-primary);
}

/* Efeito Hover (Ao passar o mouse) */
.z-btn-ig:hover {
    transform: scale(1.05);
    background-color: rgba(255, 51, 153, 0.1);
    box-shadow: 
        0 0 10px var(--neon-ig-primary),
        0 0 30px var(--neon-ig-secondary),
        0 0 50px var(--neon-ig-primary),
        inset 0 0 15px var(--neon-ig-primary);
}

/* =========================================
   ANIMAÇÕES (KEYFRAMES)
   ========================================= */
@keyframes pulse-electric {
    0% {
        box-shadow: 0 0 5px var(--neon-wa-primary), 0 0 15px var(--neon-wa-secondary), inset 0 0 5px var(--neon-wa-primary);
    }
    100% {
        box-shadow: 0 0 15px var(--neon-wa-primary), 0 0 35px var(--neon-wa-secondary), inset 0 0 15px var(--neon-wa-primary);
    }
}