@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Poppins:wght@300;400;500;600;700&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:
radial-gradient(circle at top,#5d0000 0%,#220000 35%,#000000 100%);

color:#fff;

overflow-x:hidden;

padding:30px;

position:relative;

min-height:100vh;

}

#particles{

position:fixed;

inset:0;

pointer-events:none;

z-index:0;

background-image:

radial-gradient(#ffd86a 1px,transparent 1px),

radial-gradient(#b8860b 1px,transparent 1px);

background-size:140px 140px,220px 220px;

opacity:.18;

animation:particlesMove 30s linear infinite;

}

@keyframes particlesMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-140px);

}

}

.card{

position:relative;

z-index:2;

max-width:560px;

margin:auto;

padding:30px;

border-radius:32px;

background:rgba(20,20,20,.45);

backdrop-filter:blur(14px);

border:1px solid rgba(255,215,120,.15);

box-shadow:

0 0 60px rgba(255,0,0,.18);

animation:fadeIn 1s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

.cover{

width:100%;

border-radius:26px;

box-shadow:

0 0 35px rgba(255,0,0,.35),

0 0 80px rgba(255,215,120,.18);

animation:coverFloat 5s ease-in-out infinite;

transition:.4s;

}

.cover:hover{

transform:scale(1.02);

}

@keyframes coverFloat{

0%{transform:translateY(0);}

50%{transform:translateY(-8px);}

100%{transform:translateY(0);}

}

.gold-title{

font-family:'Cinzel',serif;

font-size:58px;

margin-top:30px;

font-weight:900;

background:linear-gradient(

180deg,

#fff9d0,

#ffe28c,

#d6a735,

#fff3c3);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

text-shadow:

0 0 25px rgba(255,215,120,.35);

animation:goldGlow 3s infinite alternate;

}

@keyframes goldGlow{

from{

filter:brightness(1);

}

to{

filter:brightness(1.3);

}

}

.artist{

margin:18px 0 40px;

font-size:22px;

letter-spacing:3px;

color:#d9c58f;

font-weight:600;

text-transform:uppercase;

}

.button{

display:flex;

align-items:center;

justify-content:center;

gap:14px;

width:100%;

padding:18px;

margin:18px 0;

border-radius:18px;

text-decoration:none;

font-size:20px;

font-weight:700;

color:white;

position:relative;

overflow:hidden;

transition:.35s;

border:1px solid rgba(255,215,120,.25);

backdrop-filter:blur(10px);

}

.button::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent);

transform:skewX(-20deg);

transition:.8s;

}

.button:hover::before{

left:150%;

}

.button:hover{

transform:translateY(-5px) scale(1.02);

box-shadow:

0 0 30px rgba(255,215,120,.35);

}

.spotify{
background:linear-gradient(135deg,#0d7f39,#1ed760);
}

.apple{
background:linear-gradient(135deg,#111,#444);
}

.youtube{
background:linear-gradient(135deg,#7d0000,#ff0000);
}

.amazon{
background:linear-gradient(135deg,#232f3e,#ff9900);
}

.audiomack{
background:linear-gradient(135deg,#ff7a00,#ffb000);
}

.x{
background:linear-gradient(135deg,#000,#2a2a2a);
}

.instagram{
background:linear-gradient(
45deg,
#833ab4,
#fd1d1d,
#fcb045);
}

.section{

font-family:'Cinzel',serif;

font-size:34px;

margin:60px 0 25px;

background:linear-gradient(
180deg,
#fff5c4,
#e6b648,
#fff3ca);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

text-align:center;

}

.video-box{

border-radius:22px;

overflow:hidden;

border:2px solid rgba(255,215,120,.25);

box-shadow:
0 0 40px rgba(255,215,120,.15);

margin-bottom:35px;

}

.video{

width:100%;

aspect-ratio:16/9;

border:none;

display:block;

}

.share{

width:100%;

padding:18px;

border:none;

border-radius:18px;

cursor:pointer;

font-size:20px;

font-weight:700;

color:#fff;

background:linear-gradient(
135deg,
#b8860b,
#ffd86a);

transition:.35s;

}

.share:hover{

transform:scale(1.03);

box-shadow:
0 0 30px rgba(255,215,120,.45);

}

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.03);

}

}

.bio{

margin-top:25px;

padding:28px;

border-radius:22px;

background:rgba(25,25,25,.55);

backdrop-filter:blur(12px);

border:1px solid rgba(255,215,120,.18);

line-height:1.9;

color:#ececec;

box-shadow:
0 0 30px rgba(255,215,120,.08);

}

.gold-subtitle{

font-family:'Cinzel',serif;

font-size:32px;

margin-bottom:18px;

background:linear-gradient(
180deg,
#fff4bd,
#d7a63a);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.release{

margin-top:25px;

}

.song{

padding:20px;

margin-bottom:18px;

border-radius:18px;

background:rgba(30,30,30,.55);

border:1px solid rgba(255,215,120,.15);

transition:.35s;

}

.song:hover{

transform:translateY(-5px);

box-shadow:
0 0 25px rgba(255,215,120,.2);

}

.footer{

margin-top:60px;

padding-top:30px;

border-top:1px solid rgba(255,215,120,.15);

text-align:center;

font-size:15px;

color:#c7b27b;

}

.reveal{

opacity:0;

transform:translateY(35px);

animation:reveal 1s forwards;

}

@keyframes reveal{

to{

opacity:1;

transform:none;

}

}

@media(max-width:600px){

body{

padding:18px;

}

.card{

padding:22px;

}

.gold-title{

font-size:42px;

}

.artist{

font-size:18px;

}

.button{

font-size:18px;

padding:16px;

}

.section{

font-size:28px;

}

}

.background-video{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

z-index:-3;

filter:brightness(.35) saturate(1.3);

}

.overlay{

position:fixed;

inset:0;

background:
linear-gradient(
180deg,
rgba(0,0,0,.25),
rgba(0,0,0,.55),
rgba(0,0,0,.82));

z-index:-2;

}

.card{

position:relative;

z-index:10;

backdrop-filter:blur(16px);

background:rgba(15,15,15,.45);

border:1px solid rgba(255,215,120,.18);

}

.whatsapp{

background:linear-gradient(
135deg,
#128C7E,
#25D366);

color:white;

}

.whatsapp:hover{

transform:translateY(-5px) scale(1.02);

box-shadow:
0 0 30px rgba(37,211,102,.55);

}

.tiktok{

background:linear-gradient(
135deg,
#000000,
#111111);

color:#ffffff;

border:1px solid rgba(255,255,255,.15);

}

.tiktok:hover{

transform:translateY(-5px) scale(1.02);

box-shadow:
0 0 12px #25F4EE,
0 0 24px #FE2C55;

}

.button.tidal{
    background:linear-gradient(135deg,#111,#333);
    color:#fff;
}

.button.tidal:hover{
    transform:scale(1.03);
}

.button.threads{
    background:linear-gradient(135deg,#000,#333);
    color:#fff;
}

.button.threads:hover{
    transform:scale(1.03);
}

/*==========================
CARRUSEL DE PORTADAS
==========================*/

.cover-slider{
position:relative;
width:100%;
aspect-ratio:1/1;
overflow:hidden;
border-radius:26px;
}

.cover-slider .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity .8s ease;
animation:none;
}

.cover-slider .cover.active{
opacity:1;
position:relative;
}

.button.iheart{
    background:linear-gradient(135deg,#d71920,#ff4b55);
    color:#fff;
}

.button.iheart:hover{
    transform:translateY(-5px) scale(1.02);
    box-shadow:0 0 30px rgba(215,25,32,.45);
}


.boton-contacto {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 24px;
  border-radius: 30px;
  background: linear-gradient(90deg, #d6a719, #ffd45a);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.boton-contacto:hover {
  transform: translateY(-2px);
}

.release-banner {
    width: 100%;
    height: 220px;
    margin: 0 auto 20px;
    overflow: hidden;
    border-radius: 16px;
    background: #111;
}

.release-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}