/* Playlist de Spotify (igual en todos los modelos): fondo blanco, texto negro,
   disco de vinilo con el logo y el play verde de Spotify */
.ai-playlist { background: #fff; border-radius: 22px; padding: 2rem 18px; margin: 2rem auto; width: calc(100% - 30px); max-width: 560px; box-shadow: 0 6px 22px rgba(0,0,0,.08); text-align: center; clear: both; }
.ai-pl-tarjeta { max-width: 520px; margin: 0 auto; text-align: center; color: #111; display: block; }
/* Título en la fuente base del modelo (no la de destaque), más grande y en negrita */
.ai-pl-spotify { display: block; margin: 0 auto .5rem; color: #000; width: 30px; height: 30px; }
.ai-playlist .ai-pl-titulo { font-family: inherit !important; font-weight: 400 !important; color: #111 !important; font-size: 1.3rem !important; letter-spacing: normal !important; text-transform: none !important; margin: 0 0 .35rem; line-height: 1.2; border: 0 !important; background: none !important; }
.ai-pl-texto { color: #222; margin: 0 0 1.4rem; font-size: 1.05rem; }
.ai-vinilo { position: relative; width: min(240px, 66vw); aspect-ratio: 1; margin: 0 auto 1rem; }
.ai-v-disco { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, transparent 0 30%, #111 30.5% 31.5%, transparent 32%),
    repeating-radial-gradient(circle at 50% 50%, #1a1a1a 0 1.2px, #0b0b0b 1.6px 3px),
    #111;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 0 0 4px #0a0a0a; }
.ai-v-disco::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 12%, rgba(255,255,255,.16) 16%, transparent 22% 60%, rgba(255,255,255,.12) 66%, transparent 72%); }
.ai-v-etiqueta { position: relative; z-index: 1; width: 40%; aspect-ratio: 1; border-radius: 50%; background: #3f9e86; display: grid; place-items: center; box-shadow: 0 0 0 3px #0a0a0a; }
.ai-v-etiqueta::after { content: ""; position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.ai-vinilo:not(.sin-logo) .ai-v-etiqueta::after { display: none; }
.ai-vinilo.sin-logo .ai-v-etiqueta { background: radial-gradient(circle, #e9e6df 0 60%, #d8d3c8 61%); }
.ai-v-logo { width: 78%; height: 78%; }
.ai-vinilo.girando .ai-v-disco { animation: ai-girar 3.2s linear infinite; }
@keyframes ai-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-vinilo.girando .ai-v-disco { animation-duration: 12s; } }
.ai-v-play { position: absolute; right: -2%; bottom: 4%; width: 26%; aspect-ratio: 1; border-radius: 50%; border: 0; background: #1ed760; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.ai-v-icono { width: 0; height: 0; border-left: 17px solid #111; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px; }
.ai-v-play.pausa .ai-v-icono { border: 0; margin: 0; width: 16px; height: 20px; background: linear-gradient(90deg, #111 0 35%, transparent 35% 65%, #111 65%); }
.ai-pl-resumen { font-size: .9rem; color: #222; margin: .2rem 0 .6rem; padding-bottom: .6rem; border-bottom: 1px solid #eee; }
.ai-pl-lista { list-style: none; margin: 0; padding: 0; text-align: left; }
.ai-pl-lista li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f0f0f0; }
.ai-pl-n { color: #888; font-size: .8rem; text-align: center; }
.ai-pl-cancion { display: grid; line-height: 1.25; min-width: 0; }
.ai-pl-cancion strong { font-weight: 500; font-size: .95rem; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-pl-cancion small { color: #777; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-pl-d { color: #888; font-size: .8rem; }
.ai-pl-ver { border: 0; background: none; color: #555; text-decoration: underline; font-size: .85rem; margin-top: .6rem; cursor: pointer; }
.ai-pl-tarjeta { position: relative; }
/* El reproductor de Spotify queda funcionando pero sin verse: se maneja con el play del disco.
   Si la API de Spotify no carga, se muestra el reproductor común (clase "visible"). */
.ai-pl-reproductor { position: absolute; left: 0; bottom: 0; width: 300px; height: 80px; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.ai-pl-reproductor.visible { position: static; width: auto; opacity: 1; pointer-events: auto; clip-path: none; margin-top: 1rem; }
.ai-pl-reproductor iframe { border: 0; border-radius: 12px; }
.ai-pl-abrir { display: inline-block; margin-top: .5rem; font-size: .8rem; color: #555; }

/* Etiquetas del disco (diseño de Amo Invitar; la lisa para marca blanca) */
.ai-v-etiqueta { background: url("../img/vinilo-etiqueta.webp") center / cover no-repeat; box-shadow: 0 0 0 3px #0a0a0a, 0 2px 6px rgba(0,0,0,.35); }
.ai-v-etiqueta::after { display: none !important; }
.ai-vinilo.sin-logo .ai-v-etiqueta { background: url("../img/vinilo-etiqueta-blanca.webp") center / cover no-repeat; }
.ai-v-etiqueta > * { display: none; }
/* En el celular la tarjeta usa todo el ancho de la sección de Música (los diseños con mucho margen la apretaban) */
@media (max-width: 767px) { .ai-playlist { width: 100%; padding: 1.5rem 12px; margin: 1.5rem auto 0; } }
.ai-playlist-aparte { padding-top: .5rem; padding-bottom: 2rem; }