/* La Estrella – Vinilo de la discografía (rejilla y tocadiscos) */

/* Surcos del vinilo, reutilizados en la rejilla y en el tocadiscos */
.album_vinyl, .ed-vinyl { border-radius: 50%;
	background:
		radial-gradient(circle, transparent 0 31%, rgba(255, 255, 255, .06) 31.5% 32%, transparent 32.5%),
		repeating-radial-gradient(circle, #121212 0 1.2px, #1c1c1c 1.6px 2.6px),
		#151515;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8), inset 0 0 0 2px #0a0a0a; }
.album_vinyl::after, .ed-vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
	background: conic-gradient(from 20deg, transparent 0 10%, rgba(255, 255, 255, .16) 14%, transparent 22% 55%, rgba(255, 255, 255, .1) 60%, transparent 68%); }
.album_vinyl__label, .ed-vinyl__label { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; margin: -17% 0 0 -17%; border-radius: 50%; background-position: center; background-size: cover; box-shadow: 0 0 0 3px rgba(0, 0, 0, .5); }
.album_vinyl__label::after, .ed-vinyl__label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12%; height: 12%; margin: -6% 0 0 -6%; border-radius: 50%; background: #0d0d0d; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
@keyframes edSpin { to { transform: rotate(360deg); } }

/* Rejilla: al pasar el ratón el vinilo sale de la funda (una sola vez, sin girar en bucle) */
.estrella-albums .has-vinyl .album_image_container { position: relative; isolation: isolate; background: radial-gradient(circle at 70% 50%, #2b0b3b, #12011a 70%); }
.estrella-albums .has-vinyl .album_image_container img { position: relative; z-index: 2; box-shadow: 14px 0 30px -12px rgba(0, 0, 0, .7); transition: transform .7s cubic-bezier(.2, .7, .2, 1) !important; }
.album_vinyl { position: absolute; z-index: 1; left: 5%; top: 5%; width: 90%; height: 90%; transform: translateX(0) rotate(0deg); transition: transform .9s cubic-bezier(.25, .8, .25, 1); }
.estrella-albums.titles-below .has-vinyl > a:hover img, .estrella-albums.titles-below .has-vinyl > a:focus-visible img { transform: translateX(-24%) scale(.96) !important; }
.has-vinyl > a:hover .album_vinyl, .has-vinyl > a:focus-visible .album_vinyl { transform: translateX(34%) rotate(160deg); }
.album_vinyl__chip { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 6px 11px; border-radius: 999px; background: rgba(18, 1, 26, .82); color: #fff; font: 400 11px/1 Oswald, sans-serif; letter-spacing: 2px; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .3s .15s, transform .3s .15s; }
.has-vinyl > a:hover .album_vinyl__chip, .has-vinyl > a:focus-visible .album_vinyl__chip { opacity: 1; transform: none; }
@media (hover: none) {
	/* En pantallas táctiles el vinilo asoma un poco siempre, como pista de que se puede pulsar. */
	.estrella-albums.titles-below .has-vinyl > a img { transform: translateX(-12%) !important; }
	.has-vinyl .album_vinyl { transform: translateX(10%); }
	.has-vinyl .album_vinyl__chip { opacity: 1; transform: none; }
}

/* Tocadiscos (ventana) */
.ed-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(12, 1, 18, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; }
.ed-modal[hidden] { display: none; }
.ed-modal.is-open { opacity: 1; }
.ed-dialog { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; width: min(1060px, 100%); max-height: calc(100vh - 48px); padding: 40px; overflow: hidden; border-radius: 22px; background: radial-gradient(ellipse at 20% 30%, #3d0f52, #1f052c 60%, #12011a); color: #fff; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); transform: translateY(24px) scale(.98); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.ed-modal.is-open .ed-dialog { transform: none; }
.ed-close { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color .2s; }
.ed-close:hover, .ed-close:focus-visible { background: #c32720; }
.ed-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; }

/* Plato: funda y vinilo que sale de ella */
.ed-deck { position: relative; aspect-ratio: 1 / 1; width: 82%; }
.ed-sleeve { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 6px; background: #111 center / cover no-repeat; box-shadow: 18px 0 40px -14px rgba(0, 0, 0, .8), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.ed-platter { position: absolute; z-index: 1; left: 3%; top: 3%; width: 94%; height: 94%; transform: translateX(0); transition: transform 1s cubic-bezier(.2, .7, .2, 1) .2s; }
.ed-vinyl { position: absolute; inset: 0; animation: edSpin 2.4s linear infinite; }
.ed-modal.is-open .ed-platter { transform: translateX(38%); }
.ed-arm { position: absolute; z-index: 3; right: -18%; top: -4%; width: 34%; height: 64%; transform-origin: 80% 10%; transform: rotate(-28deg); transition: transform .8s cubic-bezier(.2, .7, .2, 1) .9s; pointer-events: none; }
.ed-modal.is-open .ed-arm { transform: rotate(0deg); }
.ed-arm svg { width: 100%; height: 100%; }

/* Lista de temas */
.ed-info { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 128px); }
.ed-kicker { margin: 0 0 8px; color: #ff7a6e; font: 400 13px/1 Oswald, sans-serif; letter-spacing: 5px; text-transform: uppercase; }
.ed-title { margin: 0 0 18px; color: #fff; font: 400 clamp(26px, 3vw, 40px)/1.1 Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.ed-list { flex: 1; min-height: 0; margin: 0; padding: 0 8px 0 0; overflow: auto; list-style: none; counter-reset: ed; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.ed-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); opacity: 0; transform: translateX(16px); transition: opacity .4s, transform .4s; }
.ed-modal.is-open .ed-list li { opacity: 1; transform: none; }
.ed-list li.is-track { counter-increment: ed; }
.ed-list li.is-track::before { content: counter(ed, decimal-leading-zero); grid-row: span 2; color: #ff7a6e; font: 400 14px/1.5 Oswald, sans-serif; letter-spacing: 1px; }
.ed-list .ed-t { font-size: 15px; line-height: 1.35; }
.ed-list .ed-a { color: rgba(255, 255, 255, .55); font-size: 12.5px; line-height: 1.3; }
.ed-list li.is-head { display: block; padding: 16px 0 6px; border: 0; color: #e2bf6a; font: 400 13px/1 Oswald, sans-serif; letter-spacing: 3px; text-transform: uppercase; counter-reset: ed; }
.ed-list li.is-head:first-child { padding-top: 0; }
.ed-list li.is-note { display: block; border: 0; color: rgba(255, 255, 255, .6); font-size: 13px; font-style: italic; }
.ed-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ed-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff !important; font: 400 13px/1 Oswald, sans-serif; letter-spacing: 2px; text-decoration: none !important; text-transform: uppercase; transition: background-color .2s; }
.ed-btn:hover, .ed-btn:focus-visible { background: #c32720; }
.ed-btn.is-spotify { background: #1db954; color: #04130a !important; }
.ed-btn.is-spotify:hover, .ed-btn.is-spotify:focus-visible { background: #1ed760; }
.ed-btn svg { width: 18px; height: 18px; fill: currentColor; }
html.ed-lock { overflow: hidden; }

@media (max-width: 781px) {
	.ed-modal { align-items: flex-end; padding: 0; }
	.ed-dialog { grid-template-columns: minmax(0, 1fr); gap: 18px; max-height: 92vh; padding: 26px 20px 20px; border-radius: 22px 22px 0 0; }
	.ed-deck { width: 48%; margin: 0 auto 0 8%; }
	.ed-modal.is-open .ed-platter { transform: translateX(46%); }
	.ed-info { max-height: none; min-height: 0; overflow: hidden; }
	.ed-title { margin-bottom: 10px; font-size: 24px; }
	.ed-list { max-height: 40vh; }
}

/* Ficha del disco */
.estrella-ficha { max-width: 1170px; margin: 0 auto; }
.ef-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.ef-stage { position: relative; display: flex; align-items: center; justify-content: flex-start; aspect-ratio: 1 / 1; padding: 0 0 0 9%; overflow: hidden; border-radius: 18px; background: radial-gradient(ellipse at 25% 30%, #3d0f52, #1f052c 60%, #12011a); box-shadow: 0 30px 60px -30px rgba(31, 5, 44, .7); }
.ef-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #c32720; }
.ef-deck { position: relative; width: 62%; aspect-ratio: 1 / 1; }
.ef-sleeve { position: absolute; inset: 0; z-index: 2; margin: 0; overflow: hidden; border-radius: 6px; background: #111; box-shadow: 18px 0 40px -14px rgba(0, 0, 0, .8), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.ef-sleeve img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ef-sleeve.is-fit::before { content: ""; position: absolute; inset: -12%; background: var(--ef-cover) center / cover no-repeat; filter: blur(14px) brightness(.55); }
.ef-sleeve.is-fit img { position: relative; object-fit: contain; }
.ef-platter { position: absolute; z-index: 1; left: 3%; top: 3%; width: 94%; height: 94%; transform: translateX(44%); animation: efOut 1.1s cubic-bezier(.2, .7, .2, 1) .2s backwards; }
.ef-platter .ed-vinyl { position: absolute; inset: 0; animation: edSpin 9s linear infinite; }
@keyframes efOut { from { transform: translateX(0); } }
.ef-info { min-width: 0; }
.ef-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; }
.ef-facts li { flex: 1 1 120px; padding: 13px 18px 14px; border-radius: 12px; background: linear-gradient(180deg, #2b0b3b, #1f052c); box-shadow: 0 14px 30px -20px rgba(31, 5, 44, .8); }
.ef-facts__label { display: block; margin-bottom: 5px; color: #ff7a6e; font: 400 11px/1.2 Oswald, sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.ef-facts__value { display: block; color: #fff; font: 400 19px/1.25 Oswald, sans-serif; letter-spacing: .5px; }
.ef-text p { margin: 0 0 16px; line-height: 1.8; }
.ef-text p:last-child { margin-bottom: 0; }
.ef-player { margin-top: 4px; }
.ef-text + .ef-player { margin-top: 26px; }
.ef-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.ef-tracks { margin-top: 56px; padding: 44px 48px 40px; border-radius: 18px; background: radial-gradient(ellipse at 15% 0, #3d0f52, #1f052c 55%, #12011a); color: #fff; box-shadow: 0 30px 60px -30px rgba(31, 5, 44, .7); }
.ef-tracks__kicker { margin: 0 0 8px; color: #ff7a6e; font: 400 13px/1.3 Oswald, sans-serif; letter-spacing: 5px; text-transform: uppercase; }
.ef-tracks__title { margin: 0 0 24px; color: #fff; font: 400 clamp(26px, 3vw, 36px)/1.15 Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.ef-list { margin: 0; padding: 0; list-style: none; counter-reset: ef; columns: 2; column-gap: 48px; }
.ef-list li { break-inside: avoid; }
.ef-list li.is-track { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); counter-increment: ef; }
.ef-list li.is-track::before { content: counter(ef, decimal-leading-zero); grid-row: span 2; color: #ff7a6e; font: 400 14px/1.6 Oswald, sans-serif; letter-spacing: 1px; }
.ef-t { font-size: 15.5px; line-height: 1.4; }
.ef-a { grid-column: 2; color: rgba(255, 255, 255, .6); font-size: 12.5px; line-height: 1.35; }
.ef-list li.is-head { padding: 18px 0 6px; color: #e2bf6a; font: 400 13px/1.3 Oswald, sans-serif; letter-spacing: 3px; text-transform: uppercase; counter-reset: ef; }
.ef-list li.is-head:first-child { padding-top: 0; }
.ef-list li.is-note { padding: 10px 0; color: rgba(255, 255, 255, .65); font-size: 13px; font-style: italic; }
.ef-back { margin: 44px 0 0; text-align: center; }
.ef-back a { color: inherit; font: 400 14px/1 Oswald, sans-serif; letter-spacing: 2px; text-decoration: underline; text-decoration-color: #c32720; text-underline-offset: 5px; text-transform: uppercase; }
.ef-back a:hover, .ef-back a:focus-visible { color: #c32720; }
@media (max-width: 900px) {
	.ef-top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ef-tracks { margin-top: 40px; padding: 30px 22px 26px; }
	.ef-list { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.album_vinyl, .ed-vinyl, .ef-platter, .ef-platter .ed-vinyl { animation: none !important; }
	.ed-platter, .ed-arm, .ed-list li, .ed-dialog { transition: none !important; }
}