:root {
    --bg-color: #050505;
    --neon-gradient: linear-gradient(90deg, #ff4d4d, #f9cb28, #20e2ff, #ff4d4d);
}

body { 
    margin: 0; padding: 0; 
    color: #fff; 
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 15% 45%, rgba(213, 83, 62, 0.15) 0%, transparent 45%),
        radial-gradient(circle at 85% 55%, rgba(43, 169, 189, 0.12) 0%, transparent 45%),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-attachment: fixed; 
    background-size: 100% 100%, 100% 100%, 25px 25px; 
    background-repeat: no-repeat, no-repeat, repeat;
    overflow-x: hidden; 
}

header { 
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(12px); 
    padding: 15px 0; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

.header-container { 
    max-width: 1200px; margin: auto; 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 20px; 
}

.logo-img { height: 50px; }
nav a { color: #eee; text-decoration: none; margin: 0 15px; font-weight: 600; font-size: 14px; transition: 0.3s; }
nav a:hover { color: #f9cb28; }

.btn-live { 
    background: red; padding: 8px 18px; border-radius: 50px; 
    font-weight: bold; font-size: 12px; display: flex; align-items: center; gap: 8px; 
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
}

.live-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: blink 1s infinite; }

/* SECCIÓN DEL REPRODUCTOR */
.player-outer-box { width: 100%; padding: 40px 0; display: flex; justify-content: center; }

.vtv-player-container {
    width: 95%; max-width: 1100px; position: relative;
    padding: 4px; background: var(--neon-gradient);
    background-size: 300% 300%; animation: moveNeon 8s linear infinite;
    border-radius: 15px; box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

.vtv-aspect-ratio {
    position: relative; width: 100%; padding-top: 56.25%; /* Ratio 16:9 */
    height: 0; overflow: hidden; border-radius: 12px; background: #000;
}

#player-live {
    position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
}

/* Forzar que el video ocupe todo el espacio */
#player-live [data-player], #player-live .clappr-video {
    width: 100% !important; height: 100% !important;
}

.prog-section { max-width: 1100px; margin: 50px auto; padding: 0 20px; }
.prog-header h3 { border-left: 4px solid red; padding-left: 15px; font-size: 22px; }

.grid-cards { 
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 25px; margin-top: 30px; 
}

.card { 
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 25px; border-radius: 15px; display: flex; align-items: center; gap: 20px; 
}

.card img { width: 50px; }

footer { padding: 60px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); text-align: center; }
.social-links { margin-bottom: 25px; display: flex; justify-content: center; gap: 20px; }
.social-icon { color: white; font-size: 24px; transition: 0.3s; opacity: 0.7; }
.st-link { color: #f9cb28; text-decoration: none; font-weight: bold; }

@keyframes moveNeon { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }