/* Reset y variables */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #fff; background: #0f0f0f; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
a { text-decoration: none; color: #fff; }
button { border: none; cursor: pointer; }

/* Header */
.header { background: linear-gradient(to right, #1e3c72, #2a5298); padding: 1rem 0; position: sticky; top: 0; z-index: 10; }
.header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 1rem; }
.logo img { border-radius: 50%; }
.logo h1 { font-size: 1.8rem; }
.nav ul { display: flex; list-style: none; gap: 2rem; }
.nav a { transition: color 0.3s; }
.nav a:hover { color: #ff6b6b; }

/* Hero / Player */
.hero-content {
    max-width: 300 px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.banner-background {
    background-attachment: fixed !important;
}
.player-container { background: rgba(0,0,0,0.8); border-radius: 15px; padding: 2rem; max-width: 300px; margin: 0 auto; }
.play-btn { background: #ff6b6b; color: #fff; padding: 1rem 2rem; border-radius: 30px; font-size: 1.2rem; margin-bottom: 1rem; transition: transform 0.3s; }
.play-btn {
    font-size: 1.4rem !important;
    padding: 1rem 3rem !important;
    background: #ff3366 !important;
    border-radius: 50px !important;
}
.progress-container, .volume-container { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
input[type="range"] { flex: 1; height: 5px; border-radius: 5px; background: #333; outline: none; }
#currentTime, #duration { font-size: 0.9rem; min-width: 4rem; }
.volume-container { justify-content: flex-end; }
.now-playing { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
#coverArt { width: 80px; height: 80px; border-radius: 10px; }
.track-info { flex: 1; text-align: left; }
#trackTitle { font-size: 1.2rem; margin-bottom: 0.5rem; }
.live-indicator { color: #ff6b6b; font-size: 0.8rem; }

/* Secciones */
.section { padding: 4rem 0; }
.section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #2a5298; }
.program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; }
.program-card { background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 10px; text-align: center; transition: transform 0.3s; }
.program-card:hover { transform: translateY(-5px); }
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.about-content img { border-radius: 10px; }


/* Footer */
.footer { background: #1e1e1e; padding: 2rem 0; text-align: center; }
.social-links { margin-top: 1rem; }
.social-links a { margin: 0 1rem; }

/* Responsive */
@media (max-width: 768px) {
    .header .container { flex-direction: column; gap: 1rem; }
    .nav ul { flex-direction: column; gap: 1rem; text-align: center; }
    .hero-content { padding: 2rem 1.5rem; margin-top: -60px; }
    .about-content { grid-template-columns: 1fr; }
    .player-container { padding: 1rem; }
    .now-playing { flex-direction: column; text-align: center; }
    .banner-background { height: 400px; } 
}

/* Quitar espacios grandes entre secciones */
.section {
    padding: 40px 0 !important;   /* antes tenía más arriba */
    margin: 0 !important;
}

/* La primera sección después del hero con aún menos espacio */
#programacion {
    padding-top: 20px !important;
}
    
.contacto-centrado {
  text-align: center;
  margin: 30px auto;
  padding: 20px;
  background: rgba(0,0,0,0.05);
  border-radius: 12px;
  max-width: 90%;
}
.contacto-centrado a {
  color: #e74c3c;
  font-weight: bold;
  text-decoration: none;
}