/* Estilo para botões com visual retrô de alto relevo */
/* Estilo para botões com visual retrô de alto relevo e efeito 3D */
/* Estilo para botões com visual retrô de alto relevo e cores neon */
@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vast+Shadow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Codystar&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ewert&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tilt+Prism&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plaster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hanalei&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* Estilo para botões com visual retrô de alto relevo e cores neon */
.btn {
    background-color: #02414c; /* Cyan neon */
    color: #ffff00; /* Texto branco para melhor contraste */
    border: #000000;
    padding: 12px 24px;
    font-size:10px;
    font-family: 'Bauhaus 93';
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 8px;
    box-shadow: 
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 6px 0 #ff00ff, /* Magenta neon para sombra inferior */
        0 12px 20px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0)
    );
    transform: rotate(45deg);
    pointer-events: none;
}

.btn:hover {
    background-color: #ff00ff; /* Magenta neon no hover */
    color: #ffffff;
    box-shadow: 
        0 0 15px #ff00ff,
        0 0 30px #ff00ff,
        0 4px 0 #00ffff,
        0 8px 15px rgba(0, 0, 0, 0.9);
    transform: translateY(2px);
}

.btn:active {
    transform: translateY(4px);
    box-shadow: 
        0 0 5px #ff00ff,
        0 0 10px #ff00ff,
        0 2px 0 #00ffff,
        0 4px 10px rgba(0, 0, 0, 0.9);
}
/* ================= */
/* ================= */
/* VARIAÇÃO DE BOTÃO */
/* ================= */
/* ================= */



/* Estilos base compartilhados */
.btn {
    border: none;
    padding: 12px 24px;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0)
    );
    transform: rotate(45deg);
    pointer-events: none;
}

/* 1. Botão Neon Cyberpunk */
.btn-neon-cyber {
    background-color: #0a0a0a;
    color: #00ff00;
    font-family: 'Orbitron', sans-serif;
    box-shadow: 
        0 0 10px #00ff00,
        0 0 20px #00ff00,
        0 6px 0 #005500,
        0 12px 20px rgba(0, 0, 0, 0.8);
    text-shadow: 0 0 5px #00ff00;
}

.btn-neon-cyber:hover {
    background-color: #00ff00;
    color: #0a0a0a;
    box-shadow: 
        0 0 15px #00ff00,
        0 0 30px #00ff00,
        0 4px 0 #005500,
        0 8px 15px rgba(0, 0, 0, 0.9);
}

/* 2. Botão Noir Retrô */
.btn-noir-retro {
    background-color: #2b2b2b;
    color: #d4d4d4;
    font-family: 'Special Elite', cursive;
    box-shadow: 
        inset 0 0 10px #000000,
        0 4px 0 #000000,
        0 8px 15px rgba(0, 0, 0, 0.7);
    text-shadow: 1px 1px 2px #000000;
}

.btn-noir-retro:hover {
    background-color: #3f3f3f;
    color: #ffffff;
    box-shadow: 
        inset 0 0 15px #000000,
        0 2px 0 #000000,
        0 6px 10px rgba(0, 0, 0, 0.8);
}

/* 3. Botão Holográfico Futurista */
.btn-holo-future {
    background: linear-gradient(45deg, #ff00ff, #00ffff);
    color: #ffffff;
    font-family: 'Bauhaus 93', sans-serif;
    box-shadow: 
        0 0 10px rgba(255, 0, 255, 0.5),
        0 0 20px rgba(0, 255, 255, 0.5),
        0 6px 0 #8b008b,
        0 12px 20px rgba(0, 0, 0, 0.8);
}

.btn-holo-future:hover {
    background: linear-gradient(45deg, #00ffff, #ff00ff);
    box-shadow: 
        0 0 15px rgba(0, 255, 255, 0.7),
        0 0 30px rgba(255, 0, 255, 0.7),
        0 4px 0 #008b8b,
        0 8px 15px rgba(0, 0, 0, 0.9);
}

/* 4. Botão Glitch Distorcido */
.btn-glitch-distort {
    background-color: #111111;
    color: #ff3300;
    font-family: 'Orbitron', sans-serif;
    box-shadow: 
        0 0 5px #ff3300,
        0 0 10px #0033ff,
        0 6px 0 #660000,
        0 12px 20px rgba(0, 0, 0, 0.8);
    text-shadow: 
        2px 2px #0033ff,
        -2px -2px #ff3300;
}

.btn-glitch-distort:hover {
    background-color: #222222;
    color: #ff6600;
    box-shadow: 
        0 0 10px #ff6600,
        0 0 20px #0066ff,
        0 4px 0 #990000,
        0 8px 15px rgba(0, 0, 0, 0.9);
    text-shadow: 
        -2px 2px #0066ff,
        2px -2px #ff6600;
}

/* Efeito de pressionar para todos os botões */
.btn:active {
    transform: translateY(4px);
    box-shadow: 
        0 0 5px rgba(255, 255, 255, 0.5),
        0 0 10px rgba(255, 255, 255, 0.5),
        0 2px 0 #000000,
        0 4px 10px rgba(0, 0, 0, 0.9);
}

/* ================= */
/* ================= */
/* VARIAÇÃO DE BOTÃO */
/* ================= */
/* ================= */