/* Estilos Generales */
body {
    font-family: 'Roboto', sans-serif; /* Usa la fuente de Google Fonts o una sans-serif por defecto */
    margin: 0; /* Elimina el margen por defecto del body */
    padding: 0;
    background-color: #f4f4f4; /* Fondo gris claro */
    color: #333; /* Color de texto principal */
    line-height: 1.6;
    scroll-behavior: smooth; /* Desplazamiento suave al hacer clic en enlaces internos */
}

.container {
    width: 90%; /* Ancho del contenedor */
    max-width: 1100px; /* Ancho máximo para pantallas grandes */
    margin: 0 auto; /* Centra el contenedor */
    overflow: hidden; /* Limpia floats dentro del contenedor */
    padding: 0 20px; /* Espaciado interno a los lados */
}

/* Encabezado (Header) */
header {
    background: #1e90ff; /* Color azul para el encabezado (Dodger Blue) */
    color: #fff; /* Color de texto blanco */
    padding: 15px 0; /* Aumenta el padding vertical para dar espacio al logo más grande */
    position: sticky; /* Hace que el encabezado se quede pegado arriba al hacer scroll */
    top: 0; /* Se pega en la parte superior */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra sutil */
}

header .container {
    display: flex; /* Usa flexbox para alinear logo y navegación */
    justify-content: space-between; /* Espacio entre logo y navegación */
    align-items: center; /* Centra verticalmente */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

/* Estilo para la imagen del logo en el encabezado */
header .logo img {
    height: 80px; /* Aumenta la altura del logo para que se vea más grande */
    width: auto; /* Para mantener la proporción */
    vertical-align: middle; /* Ayuda a alinearlo */
}

header nav ul {
    margin: 0;
    padding: 0;
    list-style: none; /* Elimina los puntos de la lista */
    display: flex; /* Usa flexbox para los elementos del menú */
}

header nav ul li {
    margin-left: 20px; /* Espacio entre los elementos del menú */
}

header nav a {
    color: #fff; /* Color de los enlaces del menú */
    text-decoration: none; /* Sin subrayado */
    text-transform: uppercase; /* Texto en mayúsculas */
    font-size: 0.9em;
    transition: color 0.3s ease; /* Transición suave al pasar el ratón */
    display: flex; /* Usa flexbox para alinear icono y texto */
    align-items: center; /* Centra verticalmente icono y texto */
}

header nav a:hover {
    color: #ffc107; /* Color al pasar el ratón (amarillo/naranja) */
}

/* Sección Hero (Bienvenida) */
#hero {
    /* Usar el logo como fondo */
    background-image: url('logo.png'); /* Ruta a tu archivo logo.png */
    background-size: contain; /* Asegura que el logo completo sea visible y se ajuste */
    background-position: center center; /* Centra el logo en la sección */
    background-repeat: no-repeat; /* Evita que el logo se repita */

    color: #fff; /* Color del texto (se mostrará sobre el overlay) */
    min-height: 400px; /* Altura mínima de la sección (ajusta si es necesario) */
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    text-align: center; /* Centra el texto */
    position: relative; /* Necesario para el overlay */
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Overlay oscuro (ajusta la opacidad 0.5 si el texto no se lee bien sobre tu logo) */
    z-index: 1; /* Asegura que el overlay esté entre el fondo y el contenido */
}

#hero .container {
    position: relative;
    z-index: 2; /* Asegura que el contenido esté por encima del overlay */
}

#hero h2 {
    margin: 0 0 10px 0;
    font-size: 2.5em;
}

#hero p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* Estilo de Botones */
.btn {
    display: inline-flex; /* Cambiado a inline-flex para alinear icono y texto */
    background: #ffc107; /* Color de fondo del botón (amarillo/naranja) */
    color: #333; /* Color del texto del botón */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px; /* Bordes redondeados */
    transition: background 0.3s ease; /* Transición suave al pasar el ratón */
    font-weight: bold;
    align-items: center; /* Centra verticalmente icono y texto */
    justify-content: center; /* Centra horizontalmente el contenido */
}

.btn:hover {
    background: #ffa500; /* Color al pasar el ratón (naranja) */
}

/* Estilos de las Secciones de Contenido */
section {
    padding: 40px 0; /* Espacio superior e inferior para cada sección */
    text-align: center; /* Centra el contenido de las secciones */
}

section:nth-child(even) {
    background: #e9e9e9; /* Color de fondo diferente para secciones alternas */
}

section h2 {
    text-align: center;
    color: #1e90ff; /* Color azul para los títulos de sección */
    margin-bottom: 20px;
}

/* Estilos Específicos de Secciones */

/* Sección del Reproductor */
#player audio {
    width: 100%; /* El reproductor ocupa todo el ancho disponible */
    max-width: 500px; /* Ancho máximo para que no sea gigante en pantallas grandes */
    margin-top: 20px;
    outline: none; /* Elimina el contorno al seleccionarlo */
}

/* Sección de Programación */
#programacion ul {
    list-style: none;
    padding: 0;
    text-align: left; /* Alinea el texto de la lista a la izquierda */
    max-width: 600px; /* Ancho máximo para la lista */
    margin: 20px auto; /* Centra la lista */
}

#programacion li {
    background: #fff; /* Fondo blanco para cada item de la lista */
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Sección de Contacto */
#contact a {
    color: #1e90ff; /* Color azul para el enlace de correo */
    text-decoration: none;
}

#contact a:hover {
    text-decoration: underline; /* Subraya al pasar el ratón */
}


/* Pie de Página (Footer) */
footer {
    background: #333; /* Fondo oscuro */
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}

footer .social-links a {
    color: #fff; /* Color blanco para los enlaces sociales */
    text-decoration: none;
    margin: 0 10px;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

footer .social-links a:hover {
    color: #1e90ff; /* Color azul al pasar el ratón */
}

/* Estilos para los Iconos en el Menú y Botones */
header nav img,
.btn img {
    height: 1.2em; /* Tamaño del icono basado en el tamaño de fuente del texto */
    vertical-align: middle; /* Alinea el icono verticalmente con el texto */
    margin-right: 5px; /* Espacio a la derecha del icono */
}

/* Responsive Design (Para pantallas pequeñas) */
@media (max-width: 768px) {
     header .container {
        flex-direction: column; /* Apila el logo y la navegación */
        text-align: center;
    }

    header nav ul {
        margin-top: 10px;
        justify-content: center; /* Centra los elementos del menú */
    }

    header nav ul li {
        margin: 0 10px; /* Ajusta el espacio entre elementos del menú */
    }

    header nav a {
         font-size: 0.8em; /* Ajuste si es necesario para pantallas pequeñas */
    }

     /* Ajuste para la imagen del logo en el encabezado en pantallas pequeñas */
    header .logo img {
        height: 50px; /* Ajusta el tamaño del logo en tablets */
    }


    #hero h2 {
        font-size: 2em;
    }

    #hero p {
        font-size: 1em;
    }

    section {
        padding: 30px 0; /* Menor espacio en secciones */
    }

    header nav img,
    .btn img {
         height: 1em; /* Reduce un poco el tamaño del icono en móviles */
         margin-right: 3px; /* Reduce el espacio a la derecha del icono */
    }
}

@media (max-width: 480px) {
    header nav ul {
        flex-direction: column; /* Apila los elementos del menú */
        align-items: center; /* Centra los elementos apilados */
    }

    header nav ul li {
        margin: 5px 0; /* Espacio vertical entre elementos del menú */
    }

     header nav a {
         font-size: 0.9em; /* Ajusta el tamaño de fuente para que quepan mejor si se apilan */
     }

     header .logo img {
         height: 40px; /* Ajusta el tamaño del logo en móviles pequeños */
     }


    #hero h2 {
        font-size: 1.8em;
    }

    #hero p {
        font-size: 0.9em;
    }

    .btn {
        padding: 8px 15px; /* Reduce el padding de los botones */
        font-size: 0.9em;
    }
     header nav img,
    .btn img {
         height: 0.9em; /* Reduce aún más el tamaño del icono en móviles pequeños */
    }
}