/* ===== TECLADO ===== */
.keyboard{
  position:relative;
  left:10px;
  top:2px;
  margin-bottom: 12px;
  width:480px;
  height:200px;
}

.white-keys{ display:flex; }

.white-key{
  position: relative; 
  width:60px;
  height:180px;
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
  border: 1px solid #bbb;
  box-shadow:
    inset 0 -3px 4px rgba(0,0,0,0.12),
    0 3px 6px rgba(0,0,0,0.15);

  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding-bottom:12px;
  font-weight:bold;
}
/* NEGRAS */
.black-keys{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:110px;
  pointer-events:none;
}

.black-key{
  position:absolute;
  width:38px;
  height:110px;
  background:#000;
}
/* ===== LETRAS BEMOLES ===== */
.white-key.key-b span{
  position: absolute;
  top: 0;                 
  left: 0;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  z-index: 10;              
  pointer-events: none;
}

/* ===== LETRAS ===== */
.white-key span{
  color:#4A6B8C;
  font-size:14px;
}
/* posiciones negras */
.db{ left:42px; }
.eb{ left:102px; }
.gb{ left:222px; }
.ab{ left:282px; }
.bb{ left:342px; }

/* ===== FLECHAS ===== */
.interval-arrows{
  position:absolute;
  top:180px;
  left:0;
  width:100%;
  height:40px;
}

.arrow{
  position:absolute;
  width:60px;
  text-align:center;
  font-size:14px;
  font-weight:bold;
  color:#4A6B8C;
  top:8px;
}
.arrow-small{
  position:absolute;
  width:60px;
  text-align:center;
  font-size:14px;
  font-weight:bold;
  color:#808080;
  top:8px;
}
.arrow::after{
  content:"→";
  display:block;
  font-size:18px;
  margin-top:-60px;
}
/* ===============================
   TECLADO CON SCROLL (MÓVIL)
================================ */

@media (max-width: 768px) {

  .keyboard-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .keyboard {
    min-width: 720px; 
  } 
  .keyboard-scroll::after {
    content: "⇆ Desliza";
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: #777;
    margin-top: 6px;
  }
}