:root {
	--gold: #d8b45f;
	--gold-light: #f6e3a8;
	--gold-deep: #9c7a2c;
	--ink: #ffffff;
	--muted: #b9b09a;
}
body {
	color: var(--ink);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.15rem;
	background: #000;
	background-image: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(216,180,95,.22), transparent 70%);
	background-repeat: no-repeat;
}
h1, h2, h3 {
	display: none;
}
.cover {
	width: min(350px, 70vw);
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid rgba(216,180,95,.45);
	box-shadow: 0 0 60px rgba(216,180,95,.25);
}
.cover.cicatriz-de-amor {
	border: 1px solid rgba(243,77,87,.45);
	box-shadow: 0 0 60px rgba(243,77,87,.25);
}
.album-title {
	font-weight: 500;
	font-size: clamp(2.4rem, 8vw, 4.5rem);
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-transform: uppercase;
	background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.artist {
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	text-transform: uppercase;
	font-size: 1.4rem;
	color: var(--muted);
}
.divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	color: var(--gold);
	max-width: 360px;
	margin: 1.5rem auto 0;
}
.divider::before, .divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold));
}
.divider::after {
	transform: scaleX(-1);
}
.section-title {
	font-weight: 500;
	font-size: 1.6rem;
	color: var(--gold-light);
	margin-bottom: 2rem;
	text-align: center;
}
.tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	aspect-ratio: 1;
	width: 100%;
	background: #050505;
	border: 1px solid rgba(216,180,95,.3);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, color 0.2s;
}
.tile i {
	font-size: clamp(2.6rem, 8vw, 4.2rem);
	color: var(--gold);
	transition: color 0.2s;
}
.tile span {
	font-size: 1.2rem;
	letter-spacing: 0.05em;
}
.tile:hover, .tile:focus-visible {
	border-color: var(--gold-light);
	box-shadow: 0 0 28px rgba(216,180,95,.35), inset 0 0 30px rgba(216,180,95,.08);
	transform: translateY(-4px);
	color: var(--gold-light);
}
.tile:hover i, .tile:focus-visible i {
	color: var(--gold-light);
}
.tile:focus-visible {
	outline: 2px solid var(--gold-light);
	outline-offset: 3px;
}
footer {
	color: var(--muted);
	font-size: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
	.tile { transition: none; }
	.tile:hover, .tile:focus-visible { transform: none; }
}

/* Album tabs */
.album-tabs {
	border-bottom: 1px solid rgba(216,180,95,.3);
	justify-content: center;
	gap: .25rem;
	/*margin-bottom: 2rem;*/
}
.album-tabs .nav-link {
	font-family: inherit;
	font-size: 1.35rem;
	letter-spacing: .08em;
	color: var(--muted);
	background: transparent;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 0;
	padding: .6rem 1.4rem;
	text-transform: uppercase;
}
.album-tabs .nav-link:hover {
	color: var(--gold-light);
	border-color: transparent;
}
.album-tabs .nav-link.active {
	color: var(--gold-light);
	background: #050505;
	border-color: rgba(216,180,95,.3);
	border-bottom: 1px solid #050505;
	margin-bottom: -1px;
}
.album-tabs .nav-link:focus-visible {
	outline: 2px solid var(--gold-light);
	outline-offset: 2px;
}
.album-year {
	color: var(--muted);
	text-align: center;
	margin-bottom: 1.5rem;
	letter-spacing: .1em;
}

.tab-content {
	border-left: 1px solid rgba(216, 180, 95, .3);
	border-right: 1px solid rgba(216, 180, 95, .3);
	border-bottom: 1px solid rgba(216, 180, 95, .3);
	margin-top: 1rem;
	padding: 0 1rem 1rem;
}
.tab-content .player {
	padding-top: 1rem;
}

/* Track list */
.tracklist {
	/*max-width: 620px;*/
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.tracklist li {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	padding: .75rem .25rem;
	border-bottom: 1px solid rgba(216,180,95,.18);
	font-size: 1.3rem;
}
.tracklist li:last-child {
	border: 0;
}
.tracklist .num {
	width: 1.75rem;
	text-align: right;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}
.tracklist .name {
	flex: 1;
}
.tracklist .time {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	font-size: 1.1rem;
}

/* Cicatriz de Amor */
.album-tabs .nav-item.cicatriz-de-amor .nav-link.active,
.tab-pane.cicatriz-de-amor a.tile i,
.tab-pane.cicatriz-de-amor h3.section-title,
.tab-pane.cicatriz-de-amor .tracklist .num,
.tab-pane.cicatriz-de-amor .tracklist .time {
	color: rgb(247, 86, 92);
}
.album-tabs .nav-item.cicatriz-de-amor .nav-link.active {
    color: rgb(247, 86, 92);
    border-color: rgba(247, 86, 92, .3);
	border-bottom: 1px solid #050505;
}
.album-tabs:has(.nav-item.cicatriz-de-amor .nav-link.active) {
	border-bottom: 1px solid rgba(247, 86, 92, .3);
}
.tab-content:has(.tab-pane.cicatriz-de-amor.active) {
    border-left: 1px solid rgba(247, 86, 92, .3);
    border-right: 1px solid rgba(247, 86, 92, .3);
    border-bottom: 1px solid rgba(247, 86, 92, .3);
}
.tab-pane.cicatriz-de-amor a.tile {
	border: 1px solid rgba(247, 86, 92, .3);
}
.tab-pane.cicatriz-de-amor a.tile:hover {
    box-shadow: 0 0 28px rgba(247, 86, 92, .35), inset 0 0 30px rgba(247, 86, 92, .08);
    color: rgb(247, 86, 92);
}

.tab-pane.cicatriz-de-amor img.cover {
	border-color: rgba(247, 86, 92, .45);
	box-shadow: 0 0 60px rgba(247, 86, 92, .25);
}
.tab-pane.cicatriz-de-amor .tracklist li {
    border-bottom: 1px solid rgba(247, 86, 92, .18);
}
.tab-pane.cicatriz-de-amor .tracklist li:last-child {
	border: 0;
}

/* Iluminado */
.album-tabs .nav-item.iluminado .nav-link.active,
.tab-pane.iluminado a.tile i,
.tab-pane.iluminado h3.section-title,
.tab-pane.iluminado .tracklist .num,
.tab-pane.iluminado .tracklist .time {
	color: rgb(50, 160, 190);
}
.album-tabs .nav-item.iluminado .nav-link.active {
    color: rgb(50, 160, 190);
    border-color: rgba(50, 160, 190, .3);
	border-bottom: 1px solid #050505;
}
.album-tabs:has(.nav-item.iluminado .nav-link.active) {
	border-bottom: 1px solid rgba(50, 160, 190, .3);
}
.tab-content:has(.tab-pane.iluminado.active) {
    border-left: 1px solid rgba(50, 160, 190, .3);
    border-right: 1px solid rgba(50, 160, 190, .3);
    border-bottom: 1px solid rgba(50, 160, 190, .3);
}
.tab-pane.iluminado a.tile {
	border: 1px solid rgba(50, 160, 190, .3);
}
.tab-pane.iluminado a.tile:hover {
    box-shadow: 0 0 28px rgba(50, 160, 190, .35), inset 0 0 30px rgba(50, 160, 190, .08);
    color: rgb(50, 160, 190);
}

.tab-pane.iluminado img.cover {
	border-color: rgba(50, 160, 190, .45);
	box-shadow: 0 0 60px rgba(50, 160, 190, .25);
}
.tab-pane.iluminado .tracklist li {
    border-bottom: 1px solid rgba(50, 160, 190, .18);
}