:root{
    --bg-main: #050505;
    --bg-section1: #0a0a0a;
    --bg-section2: #111111;
    --bg-warm: #0d0d0d;
    --bg-accent: #141414;
    --bg-control: #1a1a1a;
    --text-main: #f5f5f5;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;
    --primary: #ffd700;
    --primary-hover: #e6c200;
    --neon: #27f538;
    --accent: #00d4ff;
    --glass: rgba(5, 5, 5, 0.7);
    --glass-border: rgba(255, 215, 0, 0.15);
    --shadow: 0 12px 24px -6px rgba(0,0,0,0.8);
    --radius: 12px;
    --radius-lg: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg-main);color:var(--text-main);overflow-x:hidden;padding-bottom:100px}
header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(5,5,5,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);transition:var(--transition)}
nav{max-width:1200px;margin:0 auto;padding:0.8rem 1.5rem;display:flex;justify-content:space-between;align-items:center}
.logo-container{display:flex;align-items:center}.header-logo{width:45px;height:45px;border-radius:12px;object-fit:cover;border:2px solid var(--primary);box-shadow:0 0 12px rgba(255, 215, 0, 0.3);transition:var(--transition)}.header-logo:hover{transform:scale(1.1) rotate(5deg)}
.nav-links{display:flex;gap:1.2rem;list-style:none}.nav-links a{text-decoration:none;color:var(--text-secondary);font-weight:500;padding:0.4rem 0.8rem;border-radius:8px;transition:var(--transition)}.nav-links a:hover,.nav-links a.active{background:var(--primary);color:var(--bg-main);transform:translateY(-2px)}
section{padding:5rem 1.5rem;max-width:1200px;margin:0 auto;opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease}section.visible{opacity:1;transform:translateY(0)}
h2{font-size:2.5rem;margin-bottom:0.5rem;display:inline-block}.subtitle{color:var(--text-secondary);margin-bottom:3rem;font-size:1.1rem}

/* 🏠 INICIO */
#inicio{padding-top:6rem;padding-bottom:3rem}#inicio .streaming-container{width:100%;max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:50px;flex-wrap:wrap}
#inicio .streaming-card{width:320px;height:400px;border-radius:25px;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.8);transition:0.4s;flex-shrink:0}#inicio .streaming-card:hover{transform:scale(1.05)}
#inicio .streaming-card img{width:100%;height:100%;object-fit:cover}
#inicio .overlay{position:absolute;bottom:0;width:100%;height:45%;background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);padding:20px;display:flex;flex-direction:column;justify-content:flex-end}
#inicio .overlay h2{font-family:'Pacifico',cursive;font-size:28px;color:var(--primary);text-shadow:0 0 15px rgba(255, 215, 0, 0.4)}
#inicio .social{margin-top:10px;display:flex;gap:10px}#inicio .social span{width:25px;height:25px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:var(--transition)}#inicio .social span:hover{background:var(--primary);color:var(--bg-main);transform:scale(1.2)}
#inicio .streaming-info{flex:1;min-width:300px}#inicio .badge{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:var(--bg-main);padding:8px 15px;border-radius:50px;font-size:12px;font-weight:600;box-shadow:0 0 15px rgba(255, 215, 0, 0.4);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 15px rgba(255, 215, 0, 0.4)}50%{box-shadow:0 0 25px rgba(255, 215, 0, 0.6)}}
#inicio .title{font-family:'Poppins',sans-serif;font-size:48px;font-weight:700;margin:20px 0 10px;line-height:1.1}#inicio .artist{color:var(--text-secondary);margin-bottom:30px;font-size:1.1rem}
#inicio .buttons{display:flex;gap:20px;flex-wrap:wrap}#inicio .btn{padding:15px 25px;border-radius:30px;border:none;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:10px;transition:0.3s;font-family:'Poppins',sans-serif}
#inicio .play{background:var(--bg-section2);color:var(--text-main);border:2px solid var(--primary);box-shadow:0 0 10px rgba(255, 215, 0, 0.2)}#inicio .play:hover{background:var(--primary);color:var(--bg-main);box-shadow:0 0 25px rgba(255, 215, 0, 0.5);transform:scale(1.05)}

/* 🎠 SLIDES - ACTUALIZADO A 2 SLIDES */
.slider-container{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);height:450px;background:var(--bg-section1);border:1px solid var(--glass-border)}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 0.8s ease;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}.slide::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,#000,transparent);opacity:0.7}.slide.active{opacity:1}
.slide-content{position:relative;z-index:2;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);padding:2rem;border-radius:var(--radius);border:1px solid var(--glass-border);max-width:90%;text-align:center}
.slide-content h3{color:white;font-size:1.8rem;margin-bottom:0.8rem;text-shadow:0 2px 8px rgba(0,0,0,0.8)}
.slide-content p{color:#e2e8f0;font-size:1.1rem;text-shadow:0 1px 4px rgba(0,0,0,0.8)}

/* 📰 NOTICIAS */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.card{background:var(--bg-section2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);cursor:pointer;border:1px solid var(--glass-border);display:flex;flex-direction:column;text-decoration:none;color:inherit}.card:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 15px 30px rgba(0,0,0,0.6)}
.card-img{height:180px;background:linear-gradient(45deg,#0a0a0a,#050505);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.card-img img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}.card-img .placeholder{position:absolute;font-size:2.5rem;opacity:0.3;z-index:1;color:var(--text-secondary)}
.card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column;z-index:2;position:relative;background:var(--bg-section2)}
.card-tag{background:rgba(255, 215, 0, 0.15);color:var(--primary);padding:0.3rem 0.8rem;border-radius:20px;font-size:0.7rem;font-weight:600;display:inline-block;margin-bottom:0.8rem;width:fit-content}
.card-title{font-size:1.1rem;margin-bottom:0.5rem;color:var(--text-main);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-desc{color:var(--text-secondary);font-size:0.85rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.card-meta{margin-top:1rem;font-size:0.75rem;color:var(--text-secondary);display:flex;align-items:center;gap:0.5rem}
.card-link{color:var(--accent);text-decoration:none;font-weight:500;margin-top:0.8rem;display:inline-flex;align-items:center;gap:0.3rem;transition:var(--transition)}.card:hover .card-link{gap:0.6rem}
.loading-news{grid-column:1/-1;text-align:center;padding:2rem;color:var(--text-secondary)}

/* 🎬 VIDEOS - MEDIA PLAYER COMPLETO */
#videos .videos-section{background: var(--bg-accent);border-radius: var(--radius-lg);padding: 1.5rem;border: 1px solid var(--glass-border)}
.media-player{display: grid;grid-template-columns: 1fr 360px;gap: 1.5rem}
.player-main{display: flex;flex-direction: column}
.video-container{position: relative;width: 100%;aspect-ratio: 16/9;background: #000;border-radius: var(--radius);overflow: hidden;margin-bottom: 1rem}
.video-container iframe{width: 100%;height: 100%;border: none}
.video-controls{background: var(--bg-control);border-radius: var(--radius);padding: 1rem 1.2rem;display: flex;align-items: center;gap: 1rem;border: 1px solid var(--glass-border)}
.ctrl-btn{background: none;border: none;color: var(--text-main);font-size: 1.1rem;cursor: pointer;transition: var(--transition);display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;border-radius: 50%}
.ctrl-btn:hover{background: rgba(255, 215, 0, 0.15);color: var(--primary)}
.ctrl-btn.play-btn{background: var(--primary);color: var(--bg-main)}.ctrl-btn.play-btn:hover{background: var(--primary-hover)}
.progress-wrapper{flex: 1;display: flex;flex-direction: column;gap: 0.3rem}
.progress-bar-container{width: 100%;height: 6px;background: #333;border-radius: 3px;cursor: pointer;position: relative;overflow: hidden}
.progress-bar{height: 100%;background: linear-gradient(90deg, var(--primary), var(--accent));border-radius: 3px;width: 0%;transition: width 0.1s linear}
.time-display{display: flex;justify-content: space-between;font-size: 0.75rem;color: var(--text-muted);font-family: 'Inter', monospace}
.volume-control{display: flex;align-items: center;gap: 0.5rem}
.volume-slider{width: 70px;height: 4px;background: #333;border-radius: 2px;-webkit-appearance: none;appearance: none;cursor: pointer}
.volume-slider::-webkit-slider-thumb{-webkit-appearance: none;width: 12px;height: 12px;background: var(--primary);border-radius: 50%;cursor: pointer;box-shadow: 0 0 4px rgba(255, 215, 0, 0.5)}
.video-info-box{margin-top: 1rem;padding: 1rem 1.2rem;background: var(--bg-control);border-radius: var(--radius);border: 1px solid var(--glass-border)}
.video-info-box h3{font-size: 1.1rem;font-weight: 600;color: var(--text-main);margin-bottom: 0.3rem}
.video-info-box .video-meta{font-size: 0.8rem;color: var(--text-secondary);display: flex;gap: 1rem}
.playlist-sidebar{display: flex;flex-direction: column;gap: 0.8rem;max-height: 620px;overflow-y: auto;padding-right: 4px}
.playlist-header{font-size: 1rem;font-weight: 600;color: var(--text-main);padding-bottom: 0.8rem;border-bottom: 1px solid var(--glass-border);margin-bottom: 0.5rem;display: flex;align-items: center;gap: 0.5rem}
.playlist-item{display: flex;align-items: center;gap: 0.8rem;padding: 0.8rem;background: var(--bg-control);border-radius: var(--radius);cursor: pointer;transition: var(--transition);border: 1px solid transparent}
.playlist-item:hover{background: rgba(255, 215, 0, 0.05);border-color: var(--primary);transform: translateX(4px)}
.playlist-item.active{background: rgba(0, 212, 255, 0.1);border-color: var(--accent)}
.playlist-thumb{width: 100px;height: 56px;border-radius: 6px;overflow: hidden;flex-shrink: 0;position: relative;background: #222}
.playlist-thumb img{width: 100%;height: 100%;object-fit: cover}
.playlist-thumb .duration{position: absolute;bottom: 3px;right: 3px;background: rgba(0,0,0,0.85);color: white;font-size: 0.65rem;padding: 1px 4px;border-radius: 3px;font-weight: 600}
.playlist-info{flex: 1;min-width: 0}
.playlist-info h4{color: var(--text-main);font-size: 0.85rem;margin-bottom: 0.2rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 500}
.playlist-item.active .playlist-info h4{color: var(--accent)}
.playlist-info p{color: var(--text-muted);font-size: 0.7rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.playing-badge{display: none;align-items: center;gap: 0.3rem;font-size: 0.7rem;color: var(--neon);margin-top: 0.2rem}
.playlist-item.active .playing-badge{display: flex}
.playing-dot{width: 5px;height: 5px;background: var(--neon);border-radius: 50%;animation: pulse 1.5s infinite}

/* 🎤 LOCUTORES */
.host-card{background:var(--bg-warm);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:var(--transition);position:relative;border:1px solid var(--glass-border);display:flex;flex-direction: row-reverse;align-items:center;gap:20px;height:auto;margin-bottom:10px}
.host-card:hover{transform:translateX(-5px);background:var(--bg-accent);border-color:var(--primary)}
.host-card.live{border:2px solid var(--neon);box-shadow:0 0 0 2px rgba(39, 245, 56, 0.3),0 15px 30px rgba(39, 245, 56, 0.2)}
.host-img{width:200px;height:200px;min-width:200px;min-height:200px;border-radius:50%;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);margin:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:2px solid var(--glass-border);transition:var(--transition)}
.host-img img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.host-img .host-initials{font-size:3.5rem;font-weight:700;color:var(--text-secondary);opacity:0.5;z-index:1}
.host-card.live .host-img{border:2px solid var(--neon);box-shadow:0 0 10px rgba(39, 245, 56, 0.4);animation:hostGlow 2s infinite ease-in-out}
@keyframes hostGlow{0%,100%{box-shadow:0 0 10px rgba(39,245,56,0.4)}50%{box-shadow:0 0 20px rgba(39,245,56,0.7)}}
.host-live-badge{display:none;position:absolute;top:12px;right:12px;background:var(--neon);color:var(--bg-main);font-size:0.65rem;font-weight:800;padding:4px 10px;border-radius:20px;animation:pulse 2s infinite;z-index:5}
.host-card.live .host-live-badge{display:block}
.host-body{width:100%;padding:0;text-align:left}.host-name{font-size:1.1rem;font-weight:700;color:var(--text-main);margin-bottom:0.2rem;line-height:1.2}.host-card.live .host-name{color:var(--neon)}
.host-role{color:var(--text-secondary);font-size:0.8rem;margin-bottom:0.5rem;line-height:1.2}
.host-schedule{background:rgba(255,255,255,0.05);border-radius:6px;padding:0.4rem 0.6rem;margin-bottom:0.5rem;display:inline-block}
.host-schedule-title{font-size:0.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.1rem}
.host-schedule-time{font-size:0.8rem;color:var(--text-main);font-weight:600}.host-card.live .host-schedule-time{color:var(--neon)}
.host-next{font-size:0.75rem;color:var(--text-secondary);display:flex;align-items:center;gap:0.3rem}.host-next::before{content:'🔜'}
.socials{display:flex;gap:6px;margin-top:0.5rem}.socials span{width:28px;height:28px;background:rgba(255,255,255,0.05);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);font-size:0.7rem;border:1px solid rgba(255,255,255,0.1)}.socials span:hover{background:var(--primary);color:var(--bg-main);transform:scale(1.1)}

/* 📅 PROGRAMACIÓN */
.tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:1px solid var(--glass-border);padding-bottom:1rem}.tab-btn{background:none;border:none;font-size:1.1rem;font-weight:600;color:var(--text-secondary);padding:0.8rem 1.5rem;cursor:pointer;position:relative;transition:var(--transition)}.tab-btn.active{color:var(--accent)}.tab-btn.active::after{content:'';position:absolute;bottom:-1.15rem;left:0;width:100%;height:2px;background:var(--accent);box-shadow:0 0 10px rgba(0, 212, 255, 0.4)}
.schedule-item{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--glass-border);transition:var(--transition);position:relative}
.schedule-item:hover{padding-left:10px;background:rgba(255,255,255,0.03);border-radius:8px}
.time{font-weight:700;color:var(--accent);min-width:90px}
.schedule-item.on-air{background:rgba(0, 212, 255, 0.08);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding-left:calc(1rem - 4px)}
.schedule-item.on-air .time{color:var(--accent);text-shadow:0 0 10px rgba(0, 212, 255, 0.4)}
.schedule-item.on-air::after{content:'🔴 EN EMISIÓN';font-size:0.7rem;font-weight:700;color:var(--accent);background:rgba(0, 212, 255, 0.15);padding:2px 8px;border-radius:12px;margin-left:10px;animation:pulse 2s infinite}

/* 🔊 PLAYER FLOTANTE */
#floating-player{position:fixed;bottom:0;left:0;width:100%;z-index:1100;background:linear-gradient(to top,var(--bg-main),rgba(5,5,5,0.8));border-top:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;padding:10px}
.player-wrapper{display:flex;align-items:center;gap:1rem;background:var(--bg-section2);padding:0.8rem 1.5rem;border-radius:50px;box-shadow:var(--shadow);border:1px solid var(--glass-border);max-width:95%;width:1000px;justify-content:space-between;backdrop-filter:blur(20px);position:relative;overflow:hidden}
.play-btn-p{background:var(--primary);color:var(--bg-main);width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;transition:var(--transition);flex-shrink:0;box-shadow:0 0 15px rgba(255, 215, 0, 0.3);z-index:10}.play-btn-p:hover{transform:scale(1.1);box-shadow:0 0 25px rgba(255, 215, 0, 0.5)}
#player{display:flex;align-items:center;gap:1rem;flex:1;overflow:hidden;z-index:10}
#song{font-weight:700;color:var(--primary);font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:380px;max-width:380px;text-shadow:0 0 8px rgba(255, 215, 0, 0.2);transition:all 0.3s ease}
#artist{color:var(--text-secondary);font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;margin-left:auto;text-shadow:0 2px 4px rgba(0,0,0,0.5)}
#cover{width:120px;height:120px;border-radius:12px;object-fit:cover;background:#111;border:2px solid var(--glass-border);box-shadow:0 4px 12px rgba(0,0,0,0.4);margin-left:1rem;flex-shrink:0;z-index:10}
.analyzer-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:space-between;padding:0 10px;pointer-events:none;z-index:2;opacity:0.85}
.analyzer-bar{width:3px;min-width:2px;flex:1;margin:0 1px;background:linear-gradient(to top, var(--primary), var(--accent));border-radius:2px 2px 0 0;transition: height 0.06s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.06s ease-out;transform-origin:bottom;box-shadow:0 0 8px rgba(0, 212, 255, 0.2);height:3%;opacity:0.15}
.player-wrapper::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, transparent 0%, rgba(5,5,5,0.5) 100%);z-index:1;pointer-events:none}
.volume-icon{font-size:1.2rem;cursor:pointer;opacity:0.7;transition:var(--transition);color:var(--text-secondary);z-index:10}.volume-icon:hover{opacity:1;transform:scale(1.1)}
.player-wrapper.css-fallback .analyzer-bar{animation: cssFallback 0.7s ease-in-out infinite alternate;transition: none !important}
@keyframes cssFallback{0%{height:5%;opacity:0.3}100%{height:85%;opacity:0.9}}
.player-wrapper.css-fallback:nth-child(2n) .analyzer-bar{animation-duration:0.6s}
.player-wrapper.css-fallback:nth-child(3n) .analyzer-bar{animation-duration:0.8s}

.whatsapp-float {position: fixed;width: 60px;height: 60px;bottom: 100px;right: 20px;background-color: var(--neon);color: var(--bg-main);border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 12px rgba(39, 245, 56, 0.4);z-index: 1150;transition: var(--transition)}
.whatsapp-float:hover{transform: scale(1.15) rotate(5deg);background-color: #1db954;box-shadow: 0 0 20px rgba(39, 245, 56, 0.6)}
.whatsapp-float svg{width: 34px;height: 34px;fill: var(--bg-main)}

@media(max-width:1100px){
    .media-player{grid-template-columns: 1fr}
    .playlist-sidebar{max-height:300px;flex-direction:row;flex-wrap:wrap;gap:0.5rem;overflow-x:auto;overflow-y:visible}
    .playlist-item{width:calc(50% - 0.25rem);flex-direction:row}
}
@media(max-width:900px){
    #inicio .streaming-container{flex-direction:column;text-align:center}#inicio .buttons{justify-content:center}nav{flex-direction:column;gap:1rem}.nav-links{flex-wrap:wrap;justify-content:center}.slider-container{height:250px}h2{font-size:2rem}
    .player-wrapper{padding:0.6rem 1rem;border-radius:20px;gap:0.5rem;background:var(--bg-section2);flex-wrap:wrap}
    #player{order:3;width:100%;justify-content:center;margin-top:0.5rem}
    #cover{width:70px;height:70px; margin-left: 10px;}
    #song{width: 100%; max-width: 100%; font-size: 0.95rem; text-align: center;}
    #artist{font-size:0.8rem;max-width:100px}
    .analyzer-container{padding:0 5px}.analyzer-bar{width:2px;margin:0 0.5px}
    .host-card{flex-direction:column;text-align:center;gap:15px}.host-img{width:120px;height:120px;min-width:120px;min-height:120px}.host-img .host-initials{font-size:2rem}.host-body{text-align:center}.socials{justify-content:center}
    .whatsapp-float { width: 50px; height: 50px; bottom: 90px; right: 15px; }
    .whatsapp-float svg { width: 28px; height: 28px; }
    .video-controls{flex-wrap:wrap;justify-content:center}
}
.playlist-sidebar::-webkit-scrollbar{width:6px}
.playlist-sidebar::-webkit-scrollbar-track{background:var(--bg-control)}
.playlist-sidebar::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}
.playlist-sidebar::-webkit-scrollbar-thumb:hover{background:var(--primary-hover)}