/* ===== spotify.css — Mini-reproductor flotante (identidad Márkora) ===== */

.mk-spotify { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 340px; max-width: calc(100vw - 40px); }
.mk-spotify:not(.open) { width: auto; }

/* Píldora lanzadora (cuando está cerrado) */
.mk-sp-launcher {
  display: none; width: 56px; height: 56px; padding: 0; margin-left: auto;
  border: none; border-radius: 50%; background: #fff; cursor: pointer; overflow: hidden;
  box-shadow: var(--shadow-md); transition: transform var(--transition), box-shadow var(--transition);
}
.mk-spotify:not(.open) .mk-sp-launcher { display: grid; place-items: center; }
.mk-sp-launcher:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow-lg); }
.mk-sp-launcher svg { width: 56px; height: 56px; display: block; }
/* Ondas del logo con movimiento (tipo ecualizador, escalonadas) */
.mk-sp-wave { transform-box: fill-box; transform-origin: center; animation: mk-sp-wave 1.4s ease-in-out infinite; }
.mk-sp-wave.w1 { animation-delay: 0s; }
.mk-sp-wave.w2 { animation-delay: .18s; }
.mk-sp-wave.w3 { animation-delay: .36s; }
@keyframes mk-sp-wave {
  0%, 100% { opacity: .5;  transform: scaleY(.8); }
  50%      { opacity: 1;   transform: scaleY(1.15); }
}
/* Respeta a quien prefiere menos animación */
@media (prefers-reduced-motion: reduce) { .mk-sp-wave { animation: none; opacity: 1; } }

/* Globito emergente que invita a poner música */
.mk-sp-tip {
  position: absolute; bottom: 14px; right: 68px; white-space: nowrap;
  background: var(--navy-900); color: #fff; font-size: 13px; font-weight: 700;
  padding: 10px 15px; border-radius: 14px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateX(10px) scale(.96); pointer-events: none;
  transition: opacity .25s var(--ease, ease), transform .25s var(--ease, ease);
  cursor: pointer; z-index: 2;
}
.mk-sp-tip.show { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
/* Colita del globo apuntando al círculo */
.mk-sp-tip::after {
  content: ""; position: absolute; right: -6px; bottom: 16px;
  width: 12px; height: 12px; background: var(--navy-900); border-radius: 2px;
  transform: rotate(45deg);
}
/* Cuando el reproductor está abierto, nunca se muestra el globo */
.mk-spotify.open .mk-sp-tip { display: none; }

/* Panel del reproductor (cuando está abierto) */
.mk-sp-panel {
  background: var(--navy-900); border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-lg);
  transition: opacity var(--transition), transform var(--transition);
}
/* Cerrado: se colapsa PERO el iframe sigue montado (la música no se corta) */
.mk-spotify:not(.open) .mk-sp-panel { height: 0; opacity: 0; transform: translateY(12px); pointer-events: none; border-color: transparent; }

.mk-sp-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.mk-sp-brand { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .01em; }
.mk-sp-dot { width: 9px; height: 9px; border-radius: 50%; background: #1DB954; box-shadow: 0 0 0 3px rgba(29,185,84,.25); flex: none; }
.mk-sp-min { margin-left: auto; background: transparent; border: none; color: #9aa4b8; cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.mk-sp-min:hover { color: #fff; background: rgba(255,255,255,.08); }
.mk-sp-frame { display: block; width: 100%; border: 0; }

/* En móvil, deja espacio a la barra inferior */
@media (max-width: 600px) { .mk-spotify { right: 12px; bottom: 84px; } }