/* =========================================
RESET
========================================= */

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

html{
scroll-behavior:smooth;
}

body{


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

background:linear-gradient(
    180deg, #fffafc ,#f8f1ff
);

color:#4b2f6b;

overflow-x:hidden;


}

/* =========================================
VARIABLES
========================================= */

:root{


--lavender:#d9b8ff;
--purple:#8b5cf6;
--dark:#4b2f6b;
--pink:#ffd9f7;
--cream:#fffafc;
--white:#ffffff;


}



/* =========================================
ROYAL DECORATION
========================================= */

.frameTop{

    width:100%;

    display:block;

    margin-bottom:40px;

}

.frameBottom{

    width:100%;

    display:block;

    margin-top:40px;

}

.sectionContent{

    padding:0 40px;

}

/* =========================================
NAVBAR
========================================= */

.navbar{


position:fixed;

width:100%;

top:0;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 60px;

z-index:999;

backdrop-filter:blur(12px);

background:
rgba(255,255,255,.75);

border-bottom:
1px solid rgba(139,92,246,.15);


}

.logo{


width:80px;

}

.navLinks{


display:flex;

gap:40px;

list-style:none;


}

.navLinks a{


text-decoration:none;

color:var(--dark);

font-weight:600;

transition:.3s;


}

.navLinks a:hover{


color:var(--purple);


}

/* =========================================
HERO
========================================= */

.hero{


position:relative;

height:100vh;

overflow:hidden;


}

.heroImage{


position:absolute;

width:100%;
height:100%;

object-fit:cover;


}

.heroOverlay{


position:absolute;

inset:0;

background:

linear-gradient(

    rgba(75,47,107,.55),

    rgba(217,184,255,.35)

);


}

.heroContent{


position:relative;

z-index:10;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

color:white;


}

.heroContent h1{


font-family:'Cinzel',serif;

font-size:6rem;

letter-spacing:10px;

text-shadow:
0 0 20px rgba(255,255,255,.6);


}

.heroContent p{


margin-top:20px;

font-size:1.3rem;

letter-spacing:4px;


}

.heroButtons{


margin-top:40px;

display:flex;

gap:20px;


}

.heroButtons a{


padding:16px 35px;

border-radius:50px;

text-decoration:none;

background:white;

color:var(--purple);

font-weight:700;

transition:.3s;


}

.heroButtons a:hover{


transform:translateY(-5px);


}

.royalBtn{

    background:
    linear-gradient(
        135deg,
        #d8b4fe,
        #a855f7,
        #7c3aed
    );

    color:white;

    border:none;

    padding:18px 40px;

    border-radius:50px;

    font-size:1.2rem;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:
    0 8px 25px
    rgba(124,58,237,.35);

     position:relative;

    overflow:hidden;

}

.royalBtn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 12px 35px
    rgba(124,58,237,.45);

}

.royalBtn:active{

    transform:
    translateY(0);

}

.royalBtn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );

    transition:.6s;

}

.royalBtn:hover::before{

    left:100%;

}

/* =========================================
SECTION TITLES
========================================= */

.sectionTitle{


text-align:center;

margin-bottom:60px;


}

.sectionTitle span{


color:var(--purple);

letter-spacing:4px;

font-weight:600;


}

.sectionTitle h2{


margin-top:15px;

font-size:3.5rem;

font-family:'Cinzel',serif;


}

/* =========================================
MEMBERS
========================================= */

.membersSection{


padding:20px 8%;


}

.membersGrid{


display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:30px;


}

.memberCard{


background:white;

border-radius:25px;

overflow:hidden;

box-shadow:
0 10px 30px rgba(139,92,246,.12);

transition:.4s;


}

.memberCard:hover{


transform:translateY(-10px);


}

.memberCard img{


width:100%;

height:320px;

object-fit:cover;


}

.memberCard h3{


margin-top:20px;

text-align:center;

font-size:1.8rem;


}

.memberCard p{


text-align:center;

padding-bottom:25px;

color:#777;


}

/* =========================================
MUSIC PLAYER
========================================= */

.musicSection{


padding:120px 8%;


}

.musicPlayer{


background:white;

border-radius:35px;

padding:40px;

display:flex;

gap:40px;

align-items:center;

box-shadow:
0 10px 40px rgba(139,92,246,.15);


}

.albumCover img{


width:320px;

border-radius:25px;


}

.playerInfo{


flex:1;


}

.playerInfo h3{


font-size:3rem;

margin:15px 0;


}

.playerInfo button{


margin-top:25px;

border:none;

padding:18px 35px;

border-radius:50px;

background:

linear-gradient(
    45deg,
    #d9b8ff,
    #8b5cf6
);

color:white;

cursor:pointer;

font-weight:700;


}

/* =========================================
EVENTS
========================================= */

.eventsSection{


padding:120px 8%;


}

.eventsGrid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.eventCard{


background:white;

border-radius:25px;

overflow:hidden;

box-shadow:
0 10px 30px rgba(139,92,246,.12);


}

.eventCard img{


width:100%;

height:250px;

object-fit:cover;


}

.eventCard h3{


padding:20px;

font-size:1.7rem;


}

.eventCard p{


padding:
0 20px 25px;


}

/* =========================================
FAN CLUB
========================================= */

.fanClub{

    width:100%;

    max-width:1200px;

    margin:100px auto;

    background-image:
    url("../img/fondo-fans.png");

  
      background-repeat:no-repeat;

    background-position:center;

    background-size:contain;

    min-height:600px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.fanClubWrapper{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    align-items:center;

    gap:80px;

    padding:80px;

    margin-top: 120px;

}

.fanLeft{

    color:#4b2f6b;

}

.fanLeft h1{

    font-size:3rem;

    font-weight:700;

    margin-bottom:20px;


}

.fanLeft p{

    font-size:1.4rem;

    line-height:1.8;

}


.fanRight{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.fanRight input{

    width:100%;

    padding:16px;

    border:none;

    border-radius:30px;

}

.fanRight button{

    border:none;

    padding:18px;

    border-radius:30px;

    background:
    linear-gradient(
        45deg,
        #a25cff,
        #7b3df0
    );

    color:white;

    font-weight:bold;

    cursor:pointer;

}

.fanBox{


max-width:700px;

margin:auto;

background:white;

padding:50px;

border-radius:30px;

text-align:center;

box-shadow:
0 10px 40px rgba(139,92,246,.15);


}



.fanBox h2{


margin-bottom:20px;


}

.fanBox form{


display:flex;

flex-direction:column;

gap:15px;

margin-top:30px;


}

.fanBox input{


padding:15px;

border-radius:15px;

border:
1px solid #ddd;


}

.fanBox button{


padding:18px;

border:none;

border-radius:20px;

background:

linear-gradient(
    45deg,
    #d9b8ff,
    #8b5cf6
);

color:white;

cursor:pointer;

font-weight:700;


}

@media(max-width:768px){

     .fanClub{

        background-image:
        url("../img/fondofans-mobil.png");

        background-repeat:no-repeat;

        background-position:top center;

        background-size:100% auto;

        padding-top:80px;

        padding-bottom:80px;

        min-height:auto;

    }

    .fanClubWrapper{

        grid-template-columns:1fr;

        gap:30px;

        padding:30px;

        text-align:center;

        margin-top: 280px;

    }

    .fanLeft{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .fanLeft h2{

        font-size:2rem;

        margin-bottom:15px;

    }

    .fanLeft p{

        font-size:1.1rem;

        line-height:1.5;

        max-width:280px;

    }

    .fanRight{

        width:100%;

    }

    .fanRight input{

        width:100%;

    }

}

/* =========================================
modal venta
========================================= */
.ticketModal{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    rgba(0,0,0,.75);

    z-index:9999;

    justify-content:center;

    align-items:center;

}

.ticketContent{

    width:90%;

    max-width:700px;

    max-height:90vh;

    overflow-y:auto;

    padding:40px;

    border-radius:30px;

    background:
    linear-gradient(
        180deg,
        #fff7ff,
        #f5e9ff
    );

    border:3px solid #d8b4fe;

}

.ticketHeader{

    text-align:center;

    margin-bottom:25px;

}

.ticketTitle{

    font-family:'Cinzel',serif;

    font-size:2.2rem;

    color:#7c3aed;

    margin-bottom:10px;

}

.ticketSubtitle{

    color:#6b4b91;

    font-size:1rem;

}

.ticketBankInfo{

    background:white;

    border:2px dashed #d8b4fe;

    border-radius:20px;

    padding:20px;

    text-align:center;

    margin-bottom:20px;

}

.ticketBankInfo h3{

    color:#7c3aed;

    margin-bottom:10px;

}

.ticketBankInfo p{

    font-size:1.2rem;

    font-weight:700;

}

.ticketEventInfo{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:25px;

    color:#6b4b91;

    font-weight:500;

}

.ticketGrid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;

}

.ticketField label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#5b3c88;

}

.ticketInput{

    width:100%;

    padding:15px 20px;

    border:none;

    border-radius:25px;

    background:white;

    box-shadow:
    0 4px 15px rgba(139,92,246,.12);

    font-size:1rem;

}

.ticketFile{

    width:100%;

    background:white;

    border-radius:20px;

    padding:15px;

    box-shadow:
    0 4px 15px rgba(139,92,246,.12);

}

.ticketSubmit{

    width:100%;

    margin-top:25px;

    border:none;

    border-radius:50px;

    padding:18px;

    cursor:pointer;

    font-size:1.1rem;

    font-weight:700;

    color:white;

    background:
    linear-gradient(
        135deg,
        #d8b4fe,
        #a855f7,
        #7c3aed
    );

    box-shadow:
    0 8px 25px rgba(124,58,237,.35);

    transition:.3s;

}

.ticketSubmit:hover{

    transform:translateY(-3px);

    box-shadow:
    0 12px 35px rgba(124,58,237,.45);

}

.ticketClose{

    position:absolute;

    top:20px;

    right:25px;

    font-size:2rem;

    font-weight:700;

    cursor:pointer;

    color:#7c3aed;

    transition:.3s;

}

.ticketClose:hover{

    transform:scale(1.2);

}

@media(max-width:768px){

    .ticketGrid{

        grid-template-columns:1fr;

    }

    .ticketContent{

        width:95%;

        padding:25px;

    }

    .ticketTitle{

        font-size:1.8rem;

    }

}

.copyBtn{

    margin-top:15px;

    border:none;

    padding:12px 25px;

    border-radius:30px;

    cursor:pointer;

    font-weight:600;

    color:white;

    background:
    linear-gradient(
        135deg,
        #d8b4fe,
        #a855f7
    );

}

/* =========================================
FOOTER
========================================= */

.footer{

    background:
    linear-gradient(
        180deg,
        #cfa9ff,
        #b58ef3
    );

    display:grid;

    grid-template-columns:
    1fr auto 1fr;

    align-items:center;

    padding:25px 8%;

    border-top:
    8px solid rgba(255,255,255,.4);

}

/* ====================== */
/* IZQUIERDA */
/* ====================== */

.footerLeft{

    color:white;

    font-size:.95rem;

    line-height:1.8;

}

/* ====================== */
/* CENTRO */
/* ====================== */

.footerCenter{

    text-align:center;

}

.footerLogo{

    width:120px;

    display:block;

}

/* ====================== */
/* DERECHA */
/* ====================== */

.footerRight{

    display:flex;

    justify-content:flex-end;

    gap:20px;

}

.footerRight img{

    width:34px;

    height:34px;

    transition:.3s;

}

.footerRight img:hover{

    transform:
    scale(1.15);

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:900px){


.navbar{

    padding:20px;

}

.navLinks{

    display:none;

}

.heroContent h1{

    font-size:3rem;

}

.musicPlayer{

    flex-direction:column;

}

.albumCover img{

    width:100%;

}


}