/* ==========================================
   VARIABLES Y CONFIGURACIÓN GENERAL
========================================== */
:root {
    --bg-dark: #0d0d0e;          /* Fondo base ultra oscuro */
    --bg-card: rgba(20, 20, 22, 0.6); /* Fondos de tarjetas con transparencia */
    --gold: #b39266;             /* Dorado elegante / mate de la imagen */
    --gold-hover: #cbab7f;
    --text-muted: #8a8a93;
}

body {
    background-color: var(--bg-dark);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #ffffff;
    overflow-x: hidden;
}

/* Tipografías Especiales */
.tracking-widest {
    letter-spacing: 0.25em;
}

.tracking-wide {
    letter-spacing: 0.1em;
}

.text-gold {
    color: var(--gold) !important;
}

/* ==========================================
   HEADER / NAVBAR
========================================== */
.main-header {
    background: linear-gradient(to bottom, rgba(13,13,14,0.9) 0%, rgba(13,13,14,0) 100%);
    backdrop-filter: blur(5px);
    transition: background 0.3s ease;
}

.logo {
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #ffffff !important;
}

.navbar-nav .nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0.5rem 1.2rem !important;
    transition: color 0.3s ease;
}

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

.header-social a {
    font-size: 0.9rem;
    opacity: 0.7;
    transition: opacity 0.3s, color 0.3s;
}

.header-social a:hover {
    opacity: 1;
    color: var(--gold) !important;
}

/* ==========================================
   HERO SECTION
========================================== */
.hero-section {
    background: linear-gradient(rgba(13, 13, 14, 0.4), rgba(13, 13, 14, 0.95)), 
                url('../img/hero-bg.jpg') no-repeat center center / cover;
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--text-muted);
}

.hero-title {
    letter-spacing: -0.02em;
}

/* Botones con estilo de la muestra */
.btn-gold {
    background-color: var(--gold);
    color: #0d0d0e;
    border: 1px solid var(--gold);
}

.btn-gold:hover {
    background-color: var(--gold-hover);
    border-color: var(--gold-hover);
    color: #0d0d0e;
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.02);
}

.btn-outline-light:hover {
    background-color: white;
    color: black;
}

/* Tarjeta Flotante del Álbum */
.backdrop-blur {
    background: var(--bg-card);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* ==========================================
   REPRODUCTOR (MUSIC PLAYER)
========================================== */
.music-player-section {
    background-color: #09090a;
}

.music-player {
    background-color: rgba(25, 25, 28, 0.4);
}

.play-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.bg-gold {
    background-color: var(--gold) !important;
}

/* ==========================================
   SOBRE MÍ (ABOUT)
========================================== */
.py-6 {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

.feature-card {
    background-color: rgba(20, 20, 22, 0.3);
    transition: transform 0.3s, border-color 0.3s;
}

.feature-card:hover {
    border-color: rgba(179, 146, 102, 0.3) !important;
    transform: translateY(-3px);
}

/* ==========================================
   MÚSICA / DISCOGRAFÍA (GRID DE 5 COLUMNAS)
========================================== */
.view-all-link {
    transition: color 0.3s;
}
.view-all-link:hover {
    color: var(--gold) !important;
}

/* Modificación para soportar 5 columnas en pantallas grandes */
@media (min-width: 1200px) {
    .col-lg-2\.4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

.album-card img {
    transition: transform 0.4s ease;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.album-card:hover img {
    transform: scale(1.03);
}

.btn-play-card {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ==========================================
   EVENTOS & NEWSLETTER
========================================== */
.event-row {
    background-color: rgba(20, 20, 22, 0.2);
    transition: background-color 0.3s;
}

.event-row:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.event-row .btn-outline-secondary {
    border-color: rgba(255,255,255,0.15);
    color: var(--gold);
}

.event-row .btn-outline-secondary:hover {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #000;
}

/* Tarjeta Newsletter con foto del artista a la derecha */
.card-bg-image {
    background: linear-gradient(to right, #0d0d0e 45%, rgba(13,13,14,0.4) 100%), 
                url('../img/newsletter-artist.jpg') no-repeat center right / cover;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.max-width-60 {
    max-width: 65%;
}

@media (max-width: 991px) {
    .card-bg-image {
        background: linear-gradient(180deg, #0d0d0e 60%, rgba(13,13,14,0.7) 100%), 
                    url('../img/newsletter-artist.jpg') no-repeat center right / cover;
    }
    .max-width-60 {
        max-width: 100%;
    }
}

/* ==========================================
   FOOTER
========================================== */
.main-footer a {
    transition: color 0.3s;
}
.main-footer a:hover {
    color: var(--gold) !important;
}

.hero-section{
    overflow:hidden;
}

/* VIDEO */

.youtube-bg{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
}

.youtube-bg iframe{

    position:absolute;

    top:50%;
    left:50%;

    width:177.77777778vh;
    height:56.25vw;

    min-width:100%;
    min-height:100%;

    transform:translate(-50%,-50%);

    pointer-events:none;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
            linear-gradient(
                    to right,
                    rgba(0,0,0,.55),
                    rgba(0,0,0,.25),
                    rgba(0,0,0,.40)
            );

    backdrop-filter: blur(2px);

    z-index:2;
}
.hero-content,
.album-floating-card,
.vertical-text,
.scroll-indicator,
.container{

    position:relative;
    z-index:3;
}

.release-badge{

    position:absolute;
    top:12px;
    left:12px;

    z-index:10;

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

    backdrop-filter:blur(12px);

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

    color:#fff;

    padding:8px 12px;

    border-radius:12px;

    font-size:.7rem;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:600;
}

.release-badge span{

    display:block;

    color:#c89b52;

    font-size:.65rem;

    margin-top:2px;
}

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

.album-card .position-relative{
    aspect-ratio:1/1;
    overflow:hidden;
}

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

.bio-modal{

    background:#050505;

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

    border-radius:25px;

    overflow:hidden;

    color:#fff;
}

.bio-image{

    height:100%;

    min-height:700px;

    position:relative;
}

.bio-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:
            sepia(.15)
            contrast(1.05)
            brightness(.85);
}

.bio-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
            linear-gradient(
                    to right,
                    rgba(0,0,0,.10),
                    rgba(0,0,0,.35)
            );
}

.bio-content{

    padding:60px;
}

.bio-label{

    color:#c89b52;

    letter-spacing:4px;

    font-size:.8rem;
}

.bio-content h2{

    font-size:3rem;

    margin:15px 0 30px;
}

.bio-content p{

    color:#d0d0d0;

    line-height:1.9;

    margin-bottom:20px;
}

.bio-content blockquote{

    border-left:4px solid #c89b52;

    padding-left:20px;

    margin-top:40px;

    font-style:italic;

    color:#fff;
}

.music-player{
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(10px);
}

.play-btn{
    width:55px;
    height:55px;
}

.progress{
    height:6px;
    cursor:pointer;
}

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

.playlist-item{
    padding:15px 20px;
    cursor:pointer;
    transition:.3s;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.playlist-item:hover{
    background:rgba(200,155,82,.15);
}

.playlist-item.active{
    background:rgba(200,155,82,.20);
    color:#c89b52;
}

#volumeSlider{
    width:120px;
}

.bg-gold{
    background:#c89b52 !important;
}

.music-player{

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

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

    border-radius:20px;

    padding:20px;

    display:flex;

    align-items:center;

    gap:25px;

    backdrop-filter:blur(15px);
}

.player-info{

    display:flex;

    align-items:center;

    gap:15px;

    min-width:240px;
}

.player-info img{

    width:60px;

    height:60px;

    border-radius:12px;

    object-fit:cover;
}

.player-info h5{

    margin:0;

    font-size:1rem;
}

.player-info span{

    opacity:.6;

    font-size:.85rem;
}

.player-controls{

    display:flex;

    align-items:center;

    gap:10px;
}

.player-controls button{

    background:none;

    border:none;

    color:#fff;

    font-size:1.1rem;
}

.play-btn{

    width:48px;

    height:48px;

    border-radius:50% !important;

    background:#c89b52 !important;

    color:#000 !important;
}

.player-progress{

    flex:1;

    display:flex;

    align-items:center;

    gap:10px;
}

.progress-track{

    flex:1;

    height:5px;

    background:#333;

    border-radius:10px;

    overflow:hidden;
}

#progressBar{

    width:0;

    height:100%;

    background:#c89b52;
}

.player-extra{

    display:flex;

    align-items:center;

    gap:15px;
}

.player-extra button{

    background:none;

    border:none;

    color:#fff;
}

#volumeSlider{

    width:100px;
}

.playlist-panel{

    display:none;

    margin-top:15px;

    background:#111;

    border-radius:15px;

    overflow:hidden;

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

.playlist-panel.show{

    display:block;
}

.playlist-item{

    padding:14px 20px;

    cursor:pointer;

    transition:.3s;
}

.playlist-item:hover{

    background:rgba(200,155,82,.15);
}

.playlist-item.active{

    background:rgba(200,155,82,.20);

    color:#c89b52;
}

@media(max-width:992px){

    .music-player{

        flex-direction:column;

        align-items:stretch;
    }

    .player-progress{

        width:100%;
    }
}

.cenizas-modal{
    background:#050505;
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
}

.trina-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:30px;
    height:100%;
}

.trina-card h3{
    color:#c89b52;
    margin-bottom:20px;
}

.trina-card ul{
    list-style:none;
    padding:0;
    margin-top:20px;
}

.trina-card li{
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.cenizas-story{
    background:rgba(255,255,255,.03);
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
}

.cenizas-story blockquote{
    border-left:4px solid #c89b52;
    padding-left:20px;
    margin-top:25px;
    font-style:italic;
}

.text-gold{
    color:#c89b52;
}
.album-card{
    transition:.4s ease;
    cursor:pointer;
    position:relative;
}

.album-card:hover{
    transform:translateY(-10px);
}

.album-card img{
    transition:.6s ease;
}

.album-card:hover img{
    transform:scale(1.06);
}

.album-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
            to top,
            rgba(0,0,0,.55),
            rgba(0,0,0,0)
    );

    opacity:0;

    transition:.35s;

    z-index:1;

    pointer-events:none;
}

.album-card:hover::before{
    opacity:1;
}

.album-card::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid transparent;

    border-radius:12px;

    transition:.35s;

    z-index:2;

    pointer-events:none;
}

.album-card:hover::after{
    border-color:rgba(200,155,82,.45);
}

.album-meta{

    position:relative;

    z-index:50;
}

.album-meta h6{
    transition:.3s;
}

.album-card:hover .album-meta h6{
    color:#c89b52;
}

.stream-links{

    display:flex;

    gap:16px;

    margin-top:15px;

    padding-top:10px;

    padding-bottom:8px;

    position:relative;

    z-index:60;
}

.stream-links a{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:50%;

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

    color:rgba(255,255,255,.70);

    transition:.3s ease;

    position:relative;

    z-index:61;

    pointer-events:auto;
}

.stream-links a:hover{

    color:#c89b52;

    background:rgba(200,155,82,.12);

    transform:translateY(-3px);
}

.release-badge{

    z-index:100;

    position:absolute;
}

.btn-play-card{

    z-index:100;

    position:absolute;
}

.upcoming-event{

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

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

    transition:.35s;
}

.upcoming-event:hover{

    transform:translateY(-5px);

    border-color:rgba(200,155,82,.35);
}

.newsletter-card{

    background:linear-gradient(
            135deg,
            rgba(20,20,20,.95),
            rgba(10,10,10,.98)
    );

    border:1px solid rgba(200,155,82,.15);

    backdrop-filter:blur(20px);
}

.newsletter-glow{

    position:absolute;

    width:300px;

    height:300px;

    background:rgba(200,155,82,.08);

    border-radius:50%;

    right:-100px;

    top:-100px;

    filter:blur(80px);
}

.newsletter-input{

    background:rgba(255,255,255,.04)!important;

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

    color:#fff!important;

    padding:14px 18px;
}

.newsletter-input::placeholder{

    color:rgba(255,255,255,.50);
}

.newsletter-input:focus{

    box-shadow:none;

    border-color:#c89b52!important;
}

.benefit-item{

    margin-bottom:10px;

    opacity:.85;
}

.main-header{

    transition:.4s ease;

    z-index:9999;
}

.header-scrolled{

    background:rgba(8,8,8,.92);

    backdrop-filter:blur(18px);

    box-shadow:0 10px 40px rgba(0,0,0,.45);
}

.nav-link{

    position:relative;

    transition:.3s ease;
}

.nav-link:hover{

    color:#c89b52 !important;
}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:1px;

    background:#c89b52;

    transition:.3s ease;
}

.nav-link:hover::after{

    width:100%;
}

html{
    scroll-behavior:smooth;
}

.logo{

    letter-spacing:6px;

    font-weight:800;

    transition:.3s ease;
}

.logo:hover{

    color:#c89b52 !important;

    text-shadow:0 0 25px rgba(200,155,82,.5);
}

.custom-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9999;
}

.custom-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
}

.music-toast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(10px);
    color: white;
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 14px;
    letter-spacing: 0.3px;
    opacity: 0;
    transition: all 0.35s ease;
    z-index: 9999;
    border: 1px solid rgba(255,255,255,0.08);
}

.music-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px);
}


.now-playing-float{
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 14px;
    width: 320px;

    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 16px;
    color: #fff;

    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.now-playing-float img{
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
}

.np-text{
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.2;
}

#npCurrent{
    font-weight: 600;
}

#npNext{
    font-size: 12px;
    opacity: 0.7;
}

.now-playing-float img {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    object-fit: cover;
}

/* estado girando */
.spin {
    animation: none !important;
}

/* pausa suave (opcional pero se ve más pro) */
.spin.pause {
    animation-play-state: paused;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


.now-playing-float img {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* 🔥 clave: lo vuelve circular */
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
    position: relative;
}

/* centro del vinilo (agujero) */
.now-playing-float img::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #111;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* animación giro */
.spin {
    animation: none !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



/* ==========================================
   REQUEST SECTION PRO (ARTIST BOOKING STYLE)
========================================== */

.request-wrapper {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background: #0a0a0b;
}

/* FOTO LADO IZQUIERDO */
.request-image {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}

.request-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.05) brightness(.85) saturate(.9);
    transform: scale(1.05);
}

/* overlay tipo cinematic */
.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.25),
        rgba(0,0,0,.2)
    );
}

/* texto sobre imagen */
.image-caption {
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    z-index: 2;
}

/* FORM AREA */
.request-form-area {
    background: linear-gradient(
        135deg,
        rgba(20,20,20,.96),
        rgba(10,10,10,.92)
    );

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

/* inputs */
.request-input {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #fff !important;
    border-radius: 12px;
    padding: 12px 14px;
    transition: .3s;
}

.request-input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 0.2rem rgba(200,155,82,.15);
    background: rgba(255,255,255,.06) !important;
}

.request-input::placeholder {
    color: rgba(255,255,255,.4);
}

.hero-title {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 700;

    background: linear-gradient(90deg, #ffffff, #c89b52);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 25px rgba(200,155,82,0.15);
}








.album-card {
    position: relative;
    overflow: hidden;
}

/* BOTÓN CENTRADO PERFECTO */
.album-story-btn {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) scale(0.95);

    padding: 8px 16px;
    font-size: 12px;

    border: 1px solid var(--gold);
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);

    color: var(--gold);
    border-radius: 999px;

    opacity: 0;
    transition: 0.3s ease;

    z-index: 5;

    pointer-events: none;
}

/* SHOW ON HOVER */
.album-card:hover .album-story-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}



.story-panel {
    display: none;
}

.story-panel.active {
    display: block;
    animation: fadeUp 0.5s ease;
}

.story-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.song-story-modal{
    background:#0f0f10;
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    border-radius:30px;
}

.story-cover-wrapper{
    position:relative;
    height:100%;
    min-height:750px;
}

.story-cover-img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.story-cover-overlay{
    position:absolute;
    inset:0;
    background:
            linear-gradient(
                    to top,
                    rgba(0,0,0,.7),
                    transparent
            );
}

.story-content{
    padding:60px;
}

.story-label{
    color:var(--gold);
    font-size:.75rem;
    letter-spacing:4px;
    text-transform:uppercase;
    display:block;
    margin-bottom:15px;
}

.story-content h2{
    font-size:3rem;
    font-weight:800;
    margin-bottom:30px;
}

.story-description{
    color:rgba(255,255,255,.75);
    line-height:1.9;
    font-size:1rem;
}

.story-divider{
    height:1px;
    background:rgba(255,255,255,.08);
    margin:35px 0;
}

.story-scripture h6{
    color:var(--gold);
    margin-bottom:10px;
}

.story-scripture p{
    opacity:.8;
}

.modal.fade .modal-dialog{
    transform:scale(.95);
}

.modal.show .modal-dialog{
    transform:scale(1);
    transition:.35s ease;
}




.trilogy-timeline{
    text-align:center;
    padding:80px 20px;
}

.trilogy-subtitle{
    font-size:.8rem;
    letter-spacing:4px;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
    margin-bottom:10px;
}

.trilogy-title{
    font-weight:300;
    font-size:2rem;
    margin-bottom:60px;
    color:#fff;
}

.timeline-wrapper{
    position:relative;
    max-width:700px;
    margin:auto;
    display:flex;
    justify-content:space-between;
}

.timeline-track{
    position:absolute;
    top:12px;
    left:15%;
    right:15%;
    height:1px;

    background:linear-gradient(
            90deg,
            rgba(212,175,55,.15),
            rgba(212,175,55,.65),
            rgba(212,175,55,.15)
    );
}

.timeline-step{
    position:relative;
    z-index:2;
}

.timeline-dot{
    width:24px;
    height:24px;
    border-radius:50%;
    margin:auto;
    margin-bottom:15px;
}

.completed .timeline-dot{
    background:#d4af37;
}

.current .timeline-dot{
    background:#d4af37;

    box-shadow:
            0 0 10px rgba(212,175,55,.8),
            0 0 25px rgba(212,175,55,.4),
            0 0 50px rgba(212,175,55,.2);

    animation:pulse 3s infinite;
}

.upcoming .timeline-dot{
    background:transparent;
    border:1px solid rgba(212,175,55,.4);
}

.timeline-step span{
    display:block;
    font-size:.95rem;
    color:#ddd;
}

@keyframes pulse{
    0%{
        box-shadow:
                0 0 10px rgba(212,175,55,.8),
                0 0 25px rgba(212,175,55,.3);
    }

    50%{
        box-shadow:
                0 0 20px rgba(212,175,55,1),
                0 0 40px rgba(212,175,55,.6);
    }

    100%{
        box-shadow:
                0 0 10px rgba(212,175,55,.8),
                0 0 25px rgba(212,175,55,.3);
    }
}




/* ==========================
   FONDO ATMOSFÉRICO
========================== */

body{
    background:#0b0b0b;
    color:#fff;
    overflow-x:hidden;
    position:relative;
}

/* Resplandor dorado suave */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;

    background:
            radial-gradient(
                    circle at 50% 15%,
                    rgba(212,175,55,.08),
                    transparent 50%
            );

    animation:ambientGlow 12s ease-in-out infinite alternate;
}

/* Polvo dorado casi imperceptible */
body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;

    background-image:
            radial-gradient(
                    circle,
                    rgba(212,175,55,.25) 1px,
                    transparent 1px
            );

    background-size:250px 250px;
    opacity:.08;

    animation:floatDust 80s linear infinite;
}

@keyframes ambientGlow{
    from{
        transform:scale(1);
        opacity:.5;
    }

    to{
        transform:scale(1.15);
        opacity:.8;
    }
}

@keyframes floatDust{
    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-120px);
    }
}

/* ==========================
   TIMELINE
========================== */

.trilogy-timeline{
    text-align:center;
    padding:90px 20px;
}

.trilogy-badge{
    display:inline-block;
    padding:8px 18px;
    margin-bottom:25px;

    border-radius:30px;

    border:1px solid rgba(212,175,55,.25);

    background:rgba(212,175,55,.04);

    color:#d4af37;

    font-size:.8rem;
    letter-spacing:2px;
    text-transform:uppercase;

    text-decoration:none;

    transition:.3s ease;
}

.trilogy-badge:hover{
    transform:translateY(-2px);
    box-shadow:0 0 20px rgba(212,175,55,.12);
}

.trilogy-subtitle{
    font-size:.8rem;
    letter-spacing:4px;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
    margin-bottom:12px;
}

.trilogy-title{
    font-size:2rem;
    font-weight:300;
    margin-bottom:60px;
}

.timeline-wrapper{
    max-width:700px;
    margin:auto;

    position:relative;

    display:flex;
    justify-content:space-between;
}

.timeline-track{
    position:absolute;

    top:12px;
    left:15%;
    right:15%;

    height:1px;

    background:linear-gradient(
            90deg,
            rgba(212,175,55,.10),
            rgba(212,175,55,.55),
            rgba(212,175,55,.10)
    );
}

.timeline-step{
    position:relative;
    z-index:2;
}

.timeline-dot{
    width:24px;
    height:24px;
    border-radius:50%;

    margin:auto;
    margin-bottom:15px;
}

.completed .timeline-dot{
    background:#d4af37;
}

.current .timeline-dot{
    background:#d4af37;

    animation:heartbeat 4s ease-in-out infinite;

    box-shadow:
            0 0 12px rgba(212,175,55,.5);
}

.upcoming .timeline-dot{
    background:transparent;
    border:1px solid rgba(212,175,55,.4);
}

.timeline-step span{
    font-size:.95rem;
    color:#ddd;
}

@keyframes heartbeat{

    0%,100%{
        transform:scale(1);
        box-shadow:
                0 0 10px rgba(212,175,55,.3);
    }

    50%{
        transform:scale(1.15);
        box-shadow:
                0 0 30px rgba(212,175,55,.7);
    }
}

/* ==========================
   ANIMACIONES SCROLL
========================== */

.fade-up{
    opacity:0;
    transform:translateY(35px);
    transition:
            opacity .8s ease,
            transform .8s ease;
}

.fade-up.visible{
    opacity:1;
    transform:none;
}

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

@media(max-width:768px){

    .timeline-wrapper{
        gap:20px;
    }

    .timeline-step span{
        font-size:.8rem;
    }

    .trilogy-title{
        font-size:1.5rem;
    }
}


.hero::before{
    content:'';
    position:absolute;
    inset:0;

    background:
            radial-gradient(
                    circle at 30% 40%,
                    rgba(255,255,255,.08),
                    transparent 50%
            );

    filter: blur(60px);
}

@keyframes floatAsh {

    0%{
        transform:translateY(0);
        opacity:.2;
    }

    50%{
        opacity:.6;
    }

    100%{
        transform:translateY(-100px);
        opacity:.1;
    }
}


.hero-light{
    position:absolute;
    inset:0;

    background:
            linear-gradient(
                    120deg,
                    transparent 40%,
                    rgba(255,255,255,.08) 50%,
                    transparent 60%
            );

    pointer-events:none;
}

@keyframes coverFloat{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }
}

.album-cover{
    animation:coverFloat 8s ease-in-out infinite;
}


.bio-image {
    height: 100%;
    min-height: 500px; /* ajusta según tu diseño */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000; /* opcional elegante */
}

.bio-image img.bio-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* clave para que no se deforme */
    object-position: center;
}



.bio-wrapper {
    align-items: stretch;
}

/* Imagen tipo “panel fijo elegante” */
.bio-left {
    position: relative;
}

.bio-image {
    position: sticky;
    top: 0;
    height: 100vh; /* ocupa toda la pantalla */
    overflow: hidden;
}

/* Imagen limpia sin deformación */
.bio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Texto fluido normal */
.bio-right {
    max-height: 100vh;
    overflow-y: auto;
    padding: 2rem;
}



.bio-content {
    padding: 2.5rem;
    color: #eaeaea;
    background: transparent;
}

/* título fijo narrativo */
.bio-title-fixed {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* 🔥 SCROLL SOLO DESPUÉS DEL TÍTULO */
.bio-scroll {
    max-height: 55vh; /* clave para que el título quede fuera */
    overflow-y: auto;

    padding-right: 10px;
    line-height: 1.75;

    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

/* scrollbar elegante */
.bio-scroll::-webkit-scrollbar {
    width: 6px;
}

.bio-scroll::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

.bio-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* texto limpio */
.bio-scroll p {
    margin-bottom: 18px;
    color: #d6d6d6;
}

/* quote premium */
.bio-scroll blockquote {
    margin-top: 25px;
    padding-left: 15px;
    border-left: 2px solid #666;
    font-style: italic;
    color: #aaa;
}




.bio-discography {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

/* título */
.bio-discography h3 {
    font-size: 16px;
    letter-spacing: 2px;
    color: #aaa;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* 🔥 TRACKLIST HORIZONTAL */
.song-tracklist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
}

/* cada canción estilo “chip musical” */
.song-tracklist span {
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(201, 162, 74, 0.35);
    color: #eaeaea;
    font-size: 14px;
    transition: 0.3s ease;
    cursor: default;
}

/* hover con vida */
.song-tracklist span:hover {
    background: rgba(201, 162, 74, 0.12);
    border-color: #c9a24a;
    transform: translateY(-2px);
}

/* frase final */
.song-epic-phrase {
    max-width: 800px;
    margin: 0 auto;
    font-style: italic;
    color: #d6d6d6;
    line-height: 1.7;
}

.song-epic-phrase::before,
.song-epic-phrase::after {
    content: "✦";
    color: #c9a24a;
    margin: 0 8px;
}



#preloader {
    position: fixed;
    inset: 0;
    background: #050505;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* portada álbum */
#album-cover {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    transform: scale(1.1);
    opacity: 0;
    animation: coverIn 1.2s ease forwards;
}

@keyframes coverIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* textos */
#text-container {
    text-align: center;
    margin-top: 25px;
    color: white;
}

h1, h2, h3 {
    margin: 10px 0;
    letter-spacing: 4px;
}

/* letras animadas */
.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    animation: appear 0.4s forwards;
}

@keyframes appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* salida épica */
.fade-out {
    opacity: 0;
    transition: 1.2s ease;
    transform: scale(1.05);
}


/* TEXTO BASE */
#text-container {
    text-align: center;
    margin-top: 25px;
    color: white;
}

/* jerarquía */
#title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 20px rgba(255,255,255,0.4),
    0 0 40px rgba(255,255,255,0.2);
}

/* 🔥 GLOW ESPECIAL PARA CENIZAS */
#title.glow {
    animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        text-shadow: 0 0 10px rgba(255,255,255,0.3),
        0 0 25px rgba(255,255,255,0.2);
    }
    50% {
        text-shadow: 0 0 25px rgba(255,255,255,0.7),
        0 0 60px rgba(255,255,255,0.4);
    }
}

/* subtítulo */
#subtitle {
    font-size: 1rem;
    color: #cfcfcf;
    letter-spacing: 3px;
}

/* marca */
#brand {
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 6px;
}

/* 🔥 EFECTO LETRA 3D ENTRANDO DESDE FRENTE */
.char {
    display: inline-block;
    opacity: 0;
    transform: perspective(600px) translateZ(200px) scale(1.8);
    filter: blur(6px);
    animation: appearFront 0.7s forwards;
}

@keyframes appearFront {
    to {
        opacity: 1;
        transform: perspective(600px) translateZ(0) scale(1);
        filter: blur(0);
    }
}