/* Estilos Generales */
body {
    background-color: #1c1c1c;
    color: #bdbdbd;
    font-family: 'Exo 2', sans-serif;
    margin: 0;
    padding: 0;
}

.header {
    padding: 20px;
    text-align: center;
}

.logo-container {
    max-width: 600px;
    margin: 0 auto;
}

.logo {
    max-width: 100%;
    height: auto;
}

.main-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Sección de Video y Texto */
.video-info-container {
    width: 100%;
    max-width: 900px; /* Limita el ancho total del contenedor video+info */
    margin: 0 auto 30px auto; /* Centra y añade margen inferior */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    gap: 30px; /* Espacio entre el video y la info */
}

.video-player-container {
    flex: 2 1 560px; /* El video ocupará 2 partes, con un tamaño base de 560px */
    position: relative;
    padding-bottom: 315px; /* Altura fija inicial (para desktop) */
    height: 0;
    overflow: hidden;
    max-width: 560px; /* Ancho máximo para el reproductor */
}

.video-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-info {
    flex: 1 1 300px; /* La info ocupará 1 parte, con un tamaño base de 300px */
    padding: 10px 0; /* Un poco de padding vertical si es necesario */
    text-align: left; /* Asegura que el texto esté a la izquierda */
}

.video-info p {
    font-size: 1.1em; /* Ajustado para que no sea muy grande */
    margin: 0 0 8px 0; /* Espacio entre líneas de info */
    line-height: 1.4;
}

.video-info p strong {
    color: #e53935; /* Color de acento para los títulos */
    display: inline-block; /* Para que 'Band:' o 'Song:' siempre tengan el acento */
    min-width: 60px; /* Alinea el texto después de los dos puntos */
}

/* Nueva clase para los párrafos de info */
.info-text {
    font-size: 1.1em;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.info-text strong {
    color: #e53935;
    display: inline-block;
    min-width: 60px;
}

.tags {
    margin-top: 15px;
}

.tags span {
    background-color: #444;
    color: #bdbdbd;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    margin-right: 5px;
    margin-bottom: 5px; /* Para espacio entre tags si se envuelven */
    display: inline-block;
}

/* Botones */
.btn {
    border: none;
    padding: 10px 20px;
    font-family: 'Exo 2', sans-serif;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background-color: #e53935;
    color: white;
    margin-top: 0; /* Elimina el margen superior para que no haya un espacio extra */
    width: 100%; /* El botón ocupará todo el ancho del contenedor */
    max-width: 200px; /* Limita el ancho del botón en pantallas grandes */
    display: block; /* Para centrarlo con margin: auto */
    margin-left: auto;
    margin-right: auto;
}

.btn-primary:hover {
    background-color: #d32f2f;
}

/* Secciones Secundarias y Footer (sin cambios) */
.secondary-sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top: 40px;
}

.playlists-section,
.rockcast-section {
    flex-basis: 48%;
    margin-bottom: 20px;
}

.playlists-section h2,
.rockcast-section h2 {
    font-family: 'Orbitron', sans-serif;
    color: #bdbdbd;
    border-bottom: 2px solid #e53935;
    padding-bottom: 5px;
}

.playlists-section ul,
.rockcast-section ul {
    list-style-type: none;
    padding: 0;
}

.playlists-section li a,
.rockcast-section li a {
    color: #bdbdbd;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.playlists-section li a:hover,
.rockcast-section li a:hover {
    color: #e53935;
}

.footer {
    text-align: center;
    padding: 40px 20px;
    border-top: 1px solid #444;
}

.footer-buttons .btn-secondary {
    background-color: transparent;
    border: 2px solid #bdbdbd;
    color: #bdbdbd;
    margin: 0 10px;
}

.footer-buttons .btn-secondary:hover {
    background-color: #bdbdbd;
    color: #1c1c1c;
}

/* Media Queries para Responsive */
/* Media Queries para Responsive */
@media (max-width: 960px) {
    .video-info-container {
        max-width: 90%; /* Se ajusta mejor en pantallas más pequeñas */
    }
    .video-player-container {
        flex: 1 1 100%; /* El video ocupa todo el ancho */
        max-width: 100%; /* Asegura que el video no exceda el 100% en pantallas medianas */
        padding-bottom: 56.25%; /* Relación de aspecto 16:9 para adaptarse al ancho completo */
        height: 0; /* Resetea altura fija */
    }
    .video-info {
        flex: 1 1 100%; /* La info ocupa todo el ancho */
        text-align: center; /* Centra el texto debajo del video */
    }
    .video-info p strong {
        min-width: unset; /* Quita el min-width para centrar mejor en móvil */
        display: block; /* Cada etiqueta en su propia línea */
    }
    .main-content {
        padding: 10px;
    }

    .secondary-sections {
        flex-direction: column;
    }
    
    .playlists-section,
    .live-section {
        flex-basis: 100%;
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
    .video-info p {
        font-size: 1em;
    }
    .tags span {
        font-size: 0.7em;
        padding: 4px 8px;
    }
}