/* ==========================================================================
   SISTEMA GLOBAL DE BOTÕES 3D (JNSOFT) - ORIGINAL RESTAURADO + CORREÇÕES
   ========================================================================== */

/* --- 1. BOTÃO 3D CLÁSSICO (Cinética de Tecla Corrigida) --- */
.btn-jn-3d {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 40px; border-radius: 8px; position: relative;
    text-decoration: none; transition: all 0.1s ease;
    font-weight: 800; text-transform: uppercase; font-size: 13px;
    letter-spacing: 1px; color: #ffffff !important;
    background: #007FFF;
    box-shadow: 0 6px 0 #0059b3;
    border-top: 1px solid rgba(255,255,255,0.3);
}
.btn-jn-3d i { font-size: 1.3rem; color: #ffffff; }
/* Hover estático - sem levitar */
.btn-jn-3d:hover { background: #0066cc; box-shadow: 0 6px 0 #004d99; transform: translateY(0); }
/* Active - afunda a tecla */
.btn-jn-3d:active { transform: translateY(6px); box-shadow: 0 0px 0 #004d99; border-top: none; }


/* --- 2. BOTÃO 3D AZUL QUADRADO (Dupla Camada) --- */
.btn-jn-3d-clean {
    display: inline-block;
    background: #0056b3;
    border-radius: 8px;
    padding: 0;
    border: none;
    text-decoration: none;
}
.btn-jn-3d-clean .btn-3d-inner {
    display: block;
    padding: 12px 35px;
    border-radius: 8px;
    background: #007FFF;
    color: white;
    font-weight: 700;
    transform: translateY(-4px);
    transition: all 0.1s ease;
}
.btn-jn-3d-clean:hover .btn-3d-inner { background: #3399FF; transform: translateY(-4px); }
.btn-jn-3d-clean:active .btn-3d-inner { transform: translateY(-1px); }


/* --- 3. BOTÃO 3D PRETO -> OURO (Login / Academy) --- */
.btn-jn-3d-black {
    display: inline-block;
    background: #000; 
    border-radius: 5px;
    padding: 0;
    border: none;
    text-decoration: none;
}
.btn-jn-3d-black .btn-3d-inner {
    display: block;
    padding: 10px 25px;
    border-radius: 5px;
    background: #1a1a1a; 
    color: white;
    font-weight: 700;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    border: 1px solid #333;
}
.btn-jn-3d-black:hover .btn-3d-inner { background: #FFD700; color: #000; border-color: #DAA520; transform: translateY(-4px); }
.btn-jn-3d-black:active .btn-3d-inner { transform: translateY(-1px); }


/* --- 4. BOTÃO 3D MINI (Usado na Store) --- */
.btn-jn-3d-mini {
    display: inline-block;
    background: #111;
    border-radius: 5px;
    padding: 0;
    border: none;
    text-decoration: none;
}
.btn-3d-inner-sm {
    display: block;
    padding: 8px 20px;
    border-radius: 5px;
    background: #222;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    transform: translateY(-3px);
    transition: transform 0.1s;
}
.btn-jn-3d-mini:hover .btn-3d-inner-sm { background: #333; transform: translateY(-3px); }
.btn-jn-3d-mini:active .btn-3d-inner-sm { transform: translateY(-1px); }


/* --- 5. BOTÃO MATRICULAR 3D (Com Pulso Animado) --- */
.btn-matricular-v4 {
    display: inline-block;
    position: relative;
    background: #0056b3;
    border-radius: 6px;
    padding: 0;
    border: none;
    cursor: pointer;
    text-decoration: none;
    animation: pulse-3d-btn 2s infinite;
}
.btn-matricular-v4 .btn-3d-top {
    display: block;
    padding: 8px 18px;
    border-radius: 6px;
    background: #007FFF;
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    transform: translateY(-4px);
    transition: all 0.1s ease;
}
.btn-matricular-v4:hover .btn-3d-top { background: #3399FF; }
.btn-matricular-v4:active .btn-3d-top { transform: translateY(-1px); }

@keyframes pulse-3d-btn {
    0% { box-shadow: 0 0 0 0 rgba(0, 127, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 127, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 127, 255, 0); }
}


/* --- 6. BOTÕES AUXILIARES (Hero e Apps) - FORMATOS PRESERVADOS --- */
.btn-get-started {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 40px;
    border-radius: 50px; /* Mantido Formato Pílula */
    transition: 0.5s;
    margin: 10px;
    color: #fff;
    border: 2px solid #007FFF;
    text-decoration: none;
}
.btn-get-started:hover { background: #007FFF; color: #fff !important;}

.btn-jn-main {
    margin-top: auto;
    display: block;
    padding: 15px;
    background: #111;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: 0.3s;
}
.btn-jn-main:hover { background: #007FFF; color: #fff; }


/* ==========================================================================
   ADICIONAIS E CORREÇÕES: FÍSICA DE TECLADO E CORES LEGÍVEIS
   ========================================================================== */
.btn-eng-link {
    display: inline-block;
    margin-top: auto;
    font-size: 0.75rem;
    font-weight: 800;
    color: #333333 !important;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 6px;
    background: #fdfdfd;
    border: 1px solid #dcdcdc;
    box-shadow: 0 4px 0 #b3b3b3;
    transition: all 0.1s ease;
}
.btn-eng-link:hover { background: #eeeeee; border-color: #cccccc; transform: translateY(0); }
.btn-eng-link:active { background: #d1d1d1; transform: translateY(4px); box-shadow: 0 0px 0 #a0a0a0; border-color: #b3b3b3; }


/* --- 8. STORE: DETALHES --- */
.btn-play-details {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    background: #ffffff;
    color: #007FFF !important;
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 0 #a9a9a9;
    transition: all 0.1s ease;
}
.btn-play-details:hover { background: #f8f9fa; border-color: #007FFF; box-shadow: 0 4px 0 #007FFF; }
.btn-play-details:active { transform: translateY(4px); box-shadow: 0 0px 0 #007FFF; }


/* --- 9. STORE: WHATSAPP (Formatos preservados) --- */
.btn-play-zap {
    width: 45px;
    height: 45px;
    border-radius: 6px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #ffffff !important;
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-play-zap:hover { background: #128C7E; transform: scale(1.05); }
.btn-play-zap:active { transform: scale(0.95); }