/* =========================================================
BASE / GLOBAL

* resets mínimos
* tipografía base
  ========================================================= */

body {
margin: 0;
background: var(--bg-main);
color: var(--text-main);
font-family: Arial, sans-serif;
}

/* =========================================================
PSEUDO-ELEMENTOS GLOBALES (TECLAS NEGRAS)

* brillo superior
* sombra frontal
  ========================================================= */

.black-key::before {
content: "";
position: absolute;
top: -3px;
left: 1px;
right: 1px;
height: 6px;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.85),
rgba(0,0,0,0)
);
pointer-events: none;
}

.black-key::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(
to bottom,
rgba(255,255,255,0.15),
rgba(255,255,255,0.05),
rgba(255,255,255,0)
);
border-radius: 0 0 6px 6px;
pointer-events: none;
}