:root{
    --primary:#e50914;
    --primary-hover:#ff1f2d;
    --primary-dark:#b20710;
    --background:#121212;
    --card:#181818;
    --text:#ffffff;
    --secondary:#bdbdbd;
}

body{
    background:var(--background);
    color:var(--text);
    font-family:Poppins,sans-serif;
}

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

.navbar-custom{
    background:#000;
}

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

.hero{
    padding:100px 20px;
    text-align:center;
    background:linear-gradient(180deg,var(--primary),#121212);
}

.hero h1{
    font-size:60px;
    font-weight:700;
}

.hero p{
    font-size:22px;
    color:#d7d7d7;
}

/* ================= BOTONES ================= */

.btn-success{
    background:var(--primary);
    border-color:var(--primary);
}

.btn-success:hover{
    background:var(--primary-hover);
    border-color:var(--primary-hover);
}

.btn-warning{
    color:white;
}

.btn-outline-success{
    color:var(--primary);
    border-color:var(--primary);
}

.btn-outline-success:hover{
    background:var(--primary);
    color:white;
}

/* ================= TARJETAS ================= */

.album-card{
    background:var(--card);
    border-radius:15px;
    overflow:hidden;
    transition:.3s;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.05);
}

.album-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(229,9,20,.35);
}

.album-card img{
    width:100%;
    height:320px;
    object-fit:cover;
}

.album-card h5{
    font-weight:600;
}

.album-card p{
    color:var(--secondary);
}

/* ================= DETALLE ================= */

.album-detail-hero{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    padding:45px;

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

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);

}

.album-detail-cover{

    width:100%;

    max-width:340px;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:18px;

    box-shadow:0 25px 55px rgba(0,0,0,.6);

}

.album-info-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 15px;

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

    border-radius:999px;

    color:#efefef;

}

.album-description{

    color:#d0d0d0;

    line-height:1.8;

}

.average-rating{

    display:flex;

    align-items:center;

    gap:20px;

}

.rating-number{

    font-size:3rem;

    font-weight:bold;

}

.rating-stars{

    color:#ffc107;

    letter-spacing:2px;

}

/* ================= RESEÑAS ================= */

.review-form-card{

    top:90px;

}

.review-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:var(--primary);

    color:white;

    font-weight:bold;

}

.review-text{

    color:#dddddd;

    line-height:1.7;

}

/* ================= FORMULARIOS ================= */

.form-control,

.form-select{

    background:#242424;

    border-color:#3a3a3a;

    color:white;

}

.form-control:focus,

.form-select:focus{

    background:#242424;

    color:white;

    border-color:var(--primary);

    box-shadow:0 0 0 .25rem rgba(229,9,20,.25);

}

.form-control::placeholder{

    color:#8e8e8e;

}

/* ================= PERFIL ================= */

.profile-avatar{

    width:110px;

    height:110px;

    font-size:2.5rem;

}

/* ================= LINKS ================= */

.album-link{

    color:inherit;

    text-decoration:none;

}

.album-link:hover{

    color:inherit;

}

.album-link:hover .album-card{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(229,9,20,.35);

}

/* ================= ALERTAS ================= */

.alert-success{

    background:rgba(229,9,20,.18);

    border-color:rgba(229,9,20,.4);

    color:white;

}

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

@media(max-width:767px){

.album-detail-hero{

padding:24px;

text-align:center;

}

.album-detail-hero .d-flex{

justify-content:center;

}

.average-rating{

justify-content:center;

}

.review-form-card{

position:static!important;

}

}

.album-detail-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top left,
        rgba(255,255,255,.08),
        transparent 45%
    );

    pointer-events:none;

}

.album-detail-cover{

    transition:.35s;

}

.album-detail-cover:hover{

    transform:scale(1.03);

}

.btn-spotify{

    background:#1DB954;

    color:white;

    border:none;

}

.btn-spotify:hover{

    background:#1ED760;

    color:white;

}

.btn-spotify:focus{

    background:#1DB954;

    color:white;

}

.btn-youtube{

    background:#FF0000;

    color:white;

    border:none;

}

.btn-youtube:hover{

    background:#d40000;

    color:white;

}