/* =========================================
PRODUCTION MUSIC
AGREGAR AL FINAL DEL CSS
========================================== */

.production-box{

    background:#111;

    border-radius:30px;

    padding:25px;

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

    margin-bottom:40px;
}

.production-top{

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

    margin-bottom:25px;
}

.studio-icon{

    width:90px;
    height:90px;

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

    border-radius:25px;

    background:
    linear-gradient(
    135deg,
    #ff0000,
    #700000
    );

    font-size:35px;

    box-shadow:
    0 0 25px rgba(255,0,0,.4);
}

.production-title{

    font-size:32px;

    margin-bottom:5px;

    font-family:'Bebas Neue',sans-serif;

    letter-spacing:2px;
}

.production-subtitle{

    color:#999;

    margin:0;
}

.production-description{

    color:#d0d0d0;

    line-height:1.9;

    margin-bottom:30px;
}

/* AUDIO PLAYER */

.audio-player{

    background:#0b0b0b;

    border-radius:25px;

    padding:22px;

    margin-bottom:35px;

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

.audio-top{

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

    margin-bottom:20px;
}

.audio-name{

    font-size:22px;
    font-weight:600;
}

.audio-time{

    color:#888;
}

.audio-bar{

    width:100%;
    height:8px;

    background:#1f1f1f;

    border-radius:30px;

    overflow:hidden;

    margin-bottom:25px;
}

.audio-bar span{

    display:block;

    width:75%;
    height:100%;

    border-radius:30px;

    background:
    linear-gradient(
    90deg,
    #ff0000,
    #ff4d4d
    );

    animation:audioMove 3s infinite ease-in-out;

    box-shadow:
    0 0 20px red;
}

.audio-controls{

    display:flex;
    justify-content:center;
    gap:18px;
}

.audio-controls button{

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

    background:#171717;

    color:white;

    font-size:18px;

    transition:.3s;
}

.audio-controls button:hover{

    background:#ff1f1f;

    transform:scale(1.1);
}

.play-audio{

    width:78px !important;
    height:78px !important;

    background:#ff1f1f !important;

    font-size:24px !important;

    box-shadow:
    0 0 25px rgba(255,0,0,.5);
}

/* SERVICES */

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;
}

.service-card{

    background:#0c0c0c;

    border-radius:25px;

    padding:25px;

    text-align:center;

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

    transition:.4s;
}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 0 25px rgba(255,0,0,.15);
}

.service-card i{

    font-size:38px;

    color:#ff2a2a;

    margin-bottom:18px;
}

.service-card h4{

    font-size:24px;

    margin-bottom:12px;
}

.service-card p{

    color:#aaa;

    font-size:14px;

    line-height:1.7;
}

/* AUDIO ANIMATION */

@keyframes audioMove{

    0%{
        width:65%;
    }

    50%{
        width:85%;
    }

    100%{
        width:75%;
    }

}

/* RESPONSIVE */

@media(max-width:768px){

    .production-top{
        flex-direction:column;
        text-align:center;
    }

    .services-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================
REAL AUDIO PLAYER
AGREGAR AL FINAL DEL CSS
========================================== */

.audio-player{

    background:#0b0b0b;

    border-radius:25px;

    padding:22px;

    margin-bottom:35px;

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

.audio-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;
}

.audio-name{

    font-size:22px;

    font-weight:600;
}

.audio-time{

    color:#888;

    margin-top:4px;
}

/* PROGRESS */

.audio-progress{

    width:100%;

    height:8px;

    background:#1f1f1f;

    border-radius:50px;

    overflow:hidden;

    margin-bottom:25px;

    cursor:pointer;
}

.audio-progress-bar{

    width:0%;

    height:100%;

    border-radius:50px;

    background:
    linear-gradient(
    90deg,
    #ff0000,
    #ff4d4d
    );

    transition:.1s;

    box-shadow:
    0 0 20px red;
}

/* CONTROLS */

.audio-controls{

    display:flex;

    justify-content:center;

    gap:18px;
}

.audio-controls button{

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:#171717;

    color:white;

    font-size:18px;

    transition:.3s;

    cursor:pointer;
}

.audio-controls button:hover{

    background:#ff1f1f;

    transform:scale(1.1);
}

.play-audio{

    width:78px !important;

    height:78px !important;

    background:#ff1f1f !important;

    font-size:24px !important;

    box-shadow:
    0 0 25px rgba(255,0,0,.5);
}