/* Estética de Laboratorio de Audio Integrada */
    body { font-family: 'Barlow', sans-serif; }
    
    .lab-hero-section {
        background: linear-gradient(135deg, #1e1e24 0%, #15151a 100%);
        padding: 40px 0;
        margin-bottom: 0px;
        color: white;
        border-bottom: 2px solid #00ffcc;
    }

    .training-card { 
        background-color: #0f0f0f !important; 
        border: 1px solid #222 !important;
        border-radius: 4px;
        position: relative;
    }
    
    .training-card::after {
        content: 'RE-MOD EAR LAB // NOTE FINDER v1.0';
        position: absolute;
        bottom: 10px; right: 15px;
        font-size: 8px; font-family: monospace; color: #333;
    }

    .ear-control-btn { 
        border-radius: 2px; 
        text-transform: uppercase; 
        letter-spacing: 2px; 
        font-weight: 600;
        font-size: 0.85rem;
    }
    
    .text-info { color: #00ffcc !important; }
    .btn-info { background-color: #00ffcc; border-color: #00ffcc; color: #000; }
    .btn-info:hover { background-color: #00e6b8; border-color: #00e6b8; color: #000; box-shadow: 0 0 20px rgba(0, 255, 204, 0.4); }
    
    .btn-outline-info { border-color: #00ffcc; color: #00ffcc; background: transparent; }
    .btn-outline-info:hover { background-color: #00ffcc; color: #000; }

    /* Animaciones Custom */
    .animated { animation-duration: 0.6s; animation-fill-mode: both; }
    .delay-1s { animation-delay: 0.3s; }

    /* Override del Teclado para hacer look Dark/Synth */
    .nota {
        background: #e0e0e0;
        border: 1px solid #333;
        border-radius: 0 0 4px 4px;
        box-shadow: inset 0 -4px 10px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.5);
        color: #333 !important;
        transition: transform 0.1s, background-color 0.2s, box-shadow 0.1s;
    }
    .nota:active {
        transform: translateY(2px);
        box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2), 0 2px 3px rgba(0,0,0,0.5);
    }
    .nota.negra {
        background: #111;
        color: #888 !important;
        box-shadow: inset 0 -4px 10px rgba(255,255,255,0.05), 0 4px 5px rgba(0,0,0,0.5);
        border: 1px solid #000;
        border-top: none;
    }
    .nota:hover {
        background: #fff;
    }
    .nota.negra:hover {
        background: #222;
    }
    .correcta {
        outline: none !important;
        background: #00ffcc !important;
        box-shadow: 0 0 20px rgba(0,255,204,0.6) !important;
        color: #000 !important;
    }
    .incorrecta {
        outline: none !important;
        background: #ff3366 !important;
        box-shadow: 0 0 20px rgba(255,51,102,0.6) !important;
        color: #fff !important;
    }
    
    .neon-text {
        text-shadow: 0 0 10px rgba(0,255,204,0.4);
    }