:root{
    --og-black:#050505;
    --og-dark:#0d0d0d;
    --og-card:#161616;
    --og-border:#252525;
    --og-gold:#d4af37;
    --og-white:#ffffff;
    --og-muted:#b1b1b1;
}

body.og-body{
    background:var(--og-black);
    color:var(--og-white);
    font-family:'Inter',sans-serif;
}

/* NAVBAR */

.og-navbar{
    background:rgba(5,5,5,.75);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.05);
    padding:14px 0;
}

.og-logo{
    height:78px;
    width:auto;
}

.nav-link{
    color:#d1d5db!important;
    font-weight:500;
    transition:.3s;
}

.nav-link:hover{
    color:var(--og-gold)!important;
}

/* HERO */

.hero-og{
    position:relative;
    /* min-height:calc(92vh - 95px); */
    min-height:55vh;
    margin-top:95px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:url('../img/hero-music.jpeg') center top/cover no-repeat;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.62) 35%,
        rgba(0,0,0,.18) 65%,
        rgba(0,0,0,.10) 100%
    );
}

.hero-content{
    position:relative;
    z-index:2;
    background-position:60% top;
    padding-top: 45px;
}

.min-vh-75{
    min-height:55vh;
}

.hero-title{
    font-size:clamp(3rem,7vw,5.8rem);
    line-height:.95;
    font-weight:800;
    color:#fff;
    margin-bottom:1.2rem;
}

.hero-subtitle{
    max-width:620px;
    color:rgba(255,255,255,.82);
    font-size:1.25rem;
    line-height:1.7;
}

.hero-badge{
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
    margin-bottom:1rem;
}

/* BUTTONS */

.btn-gold{
    background:var(--og-gold);
    border:none;
    color:#000;
    font-weight:700;
    border-radius:50px;
    padding:14px 28px;
    transition:.3s;
}

.btn-gold:hover{
    opacity:.9;
}

/* SECTIONS */

.section-dark{
    background:#0d0d0d;
    padding:80px 0;
}

.section-title{
    font-size:2rem;
    font-weight:700;
    margin-bottom:10px;
}

/* SONGS */

.song-card{
    background:var(--og-card);
    border:1px solid var(--og-border);
    border-radius:22px;
    overflow:hidden;
    transition:.35s;
    height:100%;
}

.song-card:hover{
    transform:translateY(-8px);
    border-color:rgba(212,175,55,.45);
    box-shadow:
    0 20px 45px rgba(0,0,0,.45);
}

.song-cover{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    background:#111;
    display:block;
}

.song-body{
    padding:24px;
}

.song-title{
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:10px;
}

.song-text{
    color:var(--og-muted);
    margin-bottom:20px;
    min-height:72px;
}

.song-play{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    background:#ff7a00;
    border:none;
}

.song-play i{
    color:#fff!important;
    font-size:20px;
    display:block;
    line-height:1;
}

/* FILTROS */
.song-sort{
    margin-bottom:12px;
}

/* PLAYER */

.player-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    background:#0d0d0d;
    border-top:1px solid rgba(255,255,255,.06);
    display:none;
}

/* FOOTER */

.footer-og{
    background:#050505;
    border-top:1px solid rgba(255,255,255,.05);
    padding:80px 0 120px;
}

.footer-link{
    color:#bdbdbd;
    text-decoration:none;
    transition:.3s;
}

.footer-link:hover{
    color:var(--og-gold);
}

.footer-divider{
    border-color:rgba(255,255,255,.08);
    margin:40px 0;
}

.social-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#181818;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.social-icon:hover{
    background:var(--og-gold);
    color:#000;
}

/* UTILITIES */

.text-secondary{
    color:var(--og-muted)!important;
}

/* BOTÓN CERRAR */
.player-close{
    position:absolute;
    right:15px;
    top:10px;
    z-index:10001;

    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    border-radius:50%;

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

    color:#fff;

    font-size:14px;
    font-weight:700;
}

.player-close:hover{
    background:#ff7a00;
}

/* TOGGLER MENÚ DE HAMBURGUESA */
.navbar-toggler{
    border:1px solid rgba(255,122,0,.45);
    background:rgba(255,122,0,.08);
}

.navbar-toggler:focus{
    box-shadow:none;
}

.navbar-toggler-icon{
    filter:invert(65%) sepia(92%) saturate(2135%) hue-rotate(1deg);
}

/* SECCION DONACIONES */

.btn-support{
    display:inline-block;
    margin-top:15px;
    background:#ff7a00;
    color:#fff;
    padding:18px 35px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.btn-support:hover{
    background:#ff8f1f;
    color:#fff;
    transform:translateY(-2px);
}

@media(max-width:768px){

    .support-section{
        padding:80px 0;
    }

    .support-content h2{
        font-size:2.1rem;
    }

}



/* MOBILE */
@media(max-width:992px){

    .hero-og{
        min-height:92vh;
        background-position:center right;
        background-position:73% center;
    }

    .hero-overlay{
        background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.86) 100%
        );
    }

    .hero-title{
        font-size:3rem;
    }

    .hero-subtitle{
        font-size:1rem;
    }

    .og-logo{
        height:64px;
    }
}


/*----------------------------------
LINK DE CANCIONES
-------------------------------------*/
.song-link{
    display:block;
    text-decoration:none;
}

.song-title-link{
    color:#fff;
    text-decoration:none;
    transition:.25s;
}

.song-title-link:hover{
    color:var(--og-gold);
}
/*----------------------------------
LANDING DE CANCIONES
------------------------------------*/
.song-hero{
    padding:150px 0 90px;
    background:#080808;
}

.song-detail-cover{
    width:100%;
    border-radius:26px;
    display:block;
    box-shadow:0 25px 60px rgba(0,0,0,.45);
}

.song-detail-title{
    font-size:clamp(2.6rem,5vw,4.6rem);
    line-height:1.05;
    font-weight:800;
    margin-bottom:18px;
    letter-spacing:-1px;
    max-width:900px;
    word-break:break-word;
}

.song-detail-text{
    font-size:1.1rem;
    color:var(--og-muted);
    margin-bottom:28px;
    line-height:1.8;
    max-width: 720px;
}

.song-meta{
    color:#bdbdbd;
}

.song-story,
.song-lyrics,
.song-credits{
    color:#d6d6d6;
    line-height:1.9;
    font-size:1rem;
    white-space:pre-wrap;
}

.song-lyrics{
    font-style:italic;
    color:#ececec;
}

.song-credits{
    color:#bdbdbd;
    font-size:.96rem;
}

.song-side-card{
    background:#141414;
    border:1px solid rgba(255,255,255,.06);
    border-radius:22px;
    padding:28px;
    margin-bottom:24px;
}