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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#0d0d0d;
    color:#fff;
    overflow-x:hidden;
}

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

:root{

    --orange:#ff7300;
    --orange-dark:#e65c00;

    --bg:#0d0d0d;
    --card:#181818;

    --white:#ffffff;
    --gray:#bdbdbd;

    --radius:25px;

}

/* =========================
   APP
========================= */

.app{
    display:flex;
    min-height:100vh;
}

/* =========================
   SIDEBAR
========================= */

.sidebar{

    width:280px;

    position:fixed;

    top:0;
    left:0;
    bottom:0;

    overflow-y:auto;

    background:linear-gradient(
        180deg,
        #ff7300,
        #ff5500
    );

    padding:25px;

    z-index:1000;

}

.logo-container{

    display:flex;
    justify-content:center;

    margin-bottom:35px;

}

.logo{

    width:180px;
    max-width:100%;

}

/* =========================
   MENU
========================= */

.sidebar-menu{

    display:flex;
    flex-direction:column;
    gap:10px;

}

.menu-item{

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

    padding:14px;

    border-radius:16px;

    text-decoration:none;

    color:#fff;

    transition:.3s;

}

.menu-item:hover,
.menu-item.active{

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

}

.menu-item i{

    width:20px;
    text-align:center;

}

/* =========================
   REDES
========================= */

.sidebar-social{

    margin-top:40px;

}

.sidebar-social h4{

    margin-bottom:15px;

}

.social-icons{

    display:flex;
    gap:12px;

}

.social-icons a{

    width:42px;
    height:42px;

    border-radius:50%;

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

    text-decoration:none;

    color:#fff;

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

    transition:.3s;

}

.social-icons a:hover{

    transform:translateY(-3px);

}

/* =========================
   CONTENIDO
========================= */

.content{

    width:100%;

    margin-left:280px;

    padding:25px;

}

/* =========================
   TOPBAR
========================= */

.topbar{

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

    margin-bottom:25px;

}

.menu-btn{

    background:none;
    border:none;

    color:#fff;

    font-size:1.4rem;

    cursor:pointer;

}

.live-badge{

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

    background:#1d1d1d;

    padding:10px 18px;

    border-radius:50px;

}

.live-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:red;

    animation:pulse 1s infinite;

}

@keyframes pulse{

    0%{
        opacity:1;
    }

    50%{
        opacity:.3;
    }

    100%{
        opacity:1;
    }

}

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

.hero{

    margin-bottom:30px;

}

.hero-slide{

    position:relative;

    height:420px;

    border-radius:30px;

    overflow:hidden;

}

.hero-slide img{

 width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

}

.overlay{

    position:absolute;

    inset:0;

    padding:40px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );

}

.hero-tag{

    width:max-content;

    background:var(--orange);

    padding:8px 15px;

    border-radius:50px;

    font-size:.8rem;

    font-weight:bold;

    margin-bottom:15px;

}

.overlay h1{

    font-size:2.2rem;

    margin-bottom:10px;

}

.overlay p{

    color:#ddd;

    max-width:600px;

}

/* =========================
   REPRODUCTOR
========================= */

.now-playing{

    background:var(--card);

    border-radius:30px;

    padding:30px;

    margin-bottom:30px;

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

}

/* =========================
   VINILO
========================= */

.radio-disc{

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

}

.vinyl{

    width:180px;
    height:180px;

    border-radius:50%;

    position:relative;

    background:
    repeating-radial-gradient(
        circle,
        #111 0px,
        #111 3px,
        #1d1d1d 4px,
        #1d1d1d 6px
    );

    box-shadow:
    0 0 30px rgba(255,115,0,.4);

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

}

.vinyl img{

    width:90px;
    height:90px;

    border-radius:50%;

    object-fit:cover;

}

.logo-spinning{

    animation:spin 8s linear infinite;

}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* =========================
   INFO STREAM
========================= */

.song-info{

    flex:1;

}

.live-tag{

    display:inline-block;

    background:red;

    padding:8px 14px;

    border-radius:20px;

    font-size:.8rem;

    margin-bottom:15px;

}

.song-info h2{

    margin-top:15px;

    font-size:1.8rem;

}

.song-info p{

    margin-top:8px;

    color:#ccc;

}

.stream-status{

    display:block;

    margin-top:12px;

    color:var(--orange);

    font-weight:bold;

}

/* =========================
   BARRAS AUDIO
========================= */

.wave-bars{

    display:flex;
    align-items:flex-end;

    gap:5px;

    height:35px;

    margin-top:15px;

}

.wave-bars span{

    width:5px;

    background:var(--orange);

    border-radius:10px;

    animation:wave 1s infinite ease-in-out;

}

.wave-bars span:nth-child(1){height:10px;}
.wave-bars span:nth-child(2){height:25px;}
.wave-bars span:nth-child(3){height:35px;}
.wave-bars span:nth-child(4){height:18px;}
.wave-bars span:nth-child(5){height:28px;}

@keyframes wave{

    50%{
        transform:scaleY(1.5);
    }

}

/* =========================
   BOTON PLAY
========================= */

.play-btn{

    width:80px;
    height:80px;

    border:none;

    border-radius:50%;

    background:var(--orange);

    color:#fff;

    font-size:1.5rem;

    cursor:pointer;

    transition:.3s;

}

.play-btn:hover{

    transform:scale(1.05);

}

/* =========================
   QUICK MENU
========================= */

.quick-menu{

    display:grid;

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

    gap:20px;

}

.quick-card{

    background:var(--card);

    border-radius:25px;

    padding:30px 20px;

    text-align:center;

    transition:.3s;

    cursor:pointer;

}

.quick-card:hover{

    transform:translateY(-5px);

}

.quick-card i{

    font-size:2rem;

    color:var(--orange);

    margin-bottom:15px;

    display:block;

}

.quick-card span{

    font-weight:bold;

}





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

.artist-layer{

    position:absolute;

    left:0;

    bottom:0;

    height:100%;

    max-width:45%;

    object-fit:contain;

    z-index:2;

    pointer-events:none;

}

/* Overlay por encima */

.overlay{

    z-index:3;

}



.sponsors-bar{
    width: 100%;
    padding: 0;              /* 🔥 elimina espacio muerto */
    margin: 0;
}

..sponsors-bar img{
    width: 100%;
    height: 180px;

    display: block;

    object-fit: contain;   /* 🔥 clave */
    object-position: center;

    background: rgba(0,0,0,0.2); /* opcional: para que no se vea vacío */
}









.sponsors-bar{
    width: 100%;
    height: 180px;

    position: relative;
    overflow: hidden;

    margin: 20px 0;
}

/* contenedor interno */
.sponsor-wrap{
    width: 100%;
    height: 100%;

    position: relative;
}

/* 🔥 fondo borroso (rellena todo) */
.sponsor-bg{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: blur(25px);
    transform: scale(1.3);

    opacity: 0.6;

    z-index: 1;
}

/* 🔥 imagen principal (sin recorte) */

.sponsor-main{
    position: absolute;
    top: 50%;
    left: 50%;

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

    width: 100%;   /* 🔥 ahora sí más grande que el contenedor */
    height: 100%;  /* 🔥 rellena más espacio visual */

    object-fit: contain;
    object-position: center;

    z-index: 2;

    display: block;
}


.logo-text{
    color: #fff;

    font-size: 20px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;

    text-align: center;

    padding: 10px 12px;

    background: linear-gradient(90deg, #ff3b00, #ff7a00);

    border-radius: 8px;

    box-shadow: 0 5px 15px rgba(255, 60, 0, 0.4);

    display: inline-block;

    animation: pulseLogo 2s infinite;
}

/* 🔥 ANIMACIÓN */
@keyframes pulseLogo{
    0%{
        box-shadow: 0 5px 15px rgba(255, 60, 0, 0.3);
    }
    50%{
        box-shadow: 0 5px 25px rgba(255, 60, 0, 0.7);
    }
    100%{
        box-shadow: 0 5px 15px rgba(255, 60, 0, 0.3);
    }
}