/* ----------------------------------

   1. RESET GENERAL Y ESTILOS BASE

   ---------------------------------- */

* {

    /* Es mejor usar 0 en lugar de 0% para padding/margin */

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    /* Las siguientes propiedades no deberían estar en el selector universal (*), ya que afectan a *todo* el contenido, incluyendo enlaces e imágenes que deben tener colores/decoraciones específicas. */

    /* Lo quitamos de aquí y lo aplicamos al body y a los enlaces donde sea necesario. */

}



body, html {

    margin: 0;

    padding: 0;

    height: 100%;

    /* Quitamos 'overflow: hidden;' para permitir el desplazamiento si el contenido crece. */

    /* Color base para el texto que no es un enlace */

    color: aliceblue;

}



/* ----------------------------------

   2. ESTILOS DE FONDO

   ---------------------------------- */



/* Si solo estás usando .fondoalbums, .fondo puede ser redundante o puede ser para un video/fondo diferente */





.fondoalbums {

    /* Usamos 'fixed' para que cubra toda la ventana */

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: -2; /* Puesto que es un fondo, debe estar detrás de todo */

}



/* Estilo para la imagen dentro de fondoalbums (albums.gif) */

.fondoalbums img {

    /* Asegura que la imagen de fondo cubra el área completamente sin distorsión */

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    /* Centrar la imagen, aunque con min-width/height puede ser innecesario si ya cubre todo */

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    object-fit: cover; /* Asegura que la imagen cubra sin estirar */

}





/* ----------------------------------

   3. ESTILOS DE ENCABEZADO Y NAVEGACIÓN

   ---------------------------------- */



header {

    width: 100%;

    position: relative; /* Para que el menú se posicione dentro de él */

    z-index: 10; /* Asegura que el encabezado esté sobre el fondo */

    background-color: transparent; /* O el color que desees para la barra superior */

}



.content {

    /* Mantenemos el contenido de ancho completo, centrado si es necesario */

    max-width: 1200px; /* Ejemplo de ancho máximo */

    margin: 0 auto;

    min-height: 1px;

    /* La línea 'background-color: black;' aquí hará que el área de menú sea negra.

       Lo muevo a 'header' o '.menu' si es necesario. */

}



.menu {

    /* ----------------------------------
   3. ESTILOS DE ENCABEZADO Y NAVEGACIÓN (MODIFICADO)
   ---------------------------------- */

header {
    width: 100%;
    position: fixed; /* 🌟 CAMBIO CLAVE: Poner el header fijo para que cubra el slideshow */
    top: 0;
    left: 0;
    z-index: 10;
    /* QUITAMOS EL BACKGROUND COLOR DE AQUÍ */
}

/* El 'content' se queda igual */
.content {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 1px;
}

.menu {
    position: relative; 
    top: 0;
    padding: 20px;
    display: flex;
    align-items: center; 
    justify-content: space-between;
    
    /* 🌟 CAMBIO CLAVE: Fondo moderno y difuminado */
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente y más suave */
    backdrop-filter: blur(8px); /* 🌟 EFECTO DIFUMINADO */
    -webkit-backdrop-filter: blur(8px); /* Soporte para navegadores Webkit (Safari, Chrome antiguos) */
    
    /* Añadir un borde sutil para una estética limpia */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}

/* El logo, navbar, y lista principal se quedan iguales */

.menu .navbar ul li a {
    font-size: 18px; /* Ligeramente más pequeño para estética moderna */
    padding: 8px 12px;
    color: aliceblue;
    font-weight: 500; /* Ligeramente menos negrita */
    text-decoration: none;
    display: block;
    transition: background-color 0.3s, color 0.3s;
}

.menu .navbar ul li:hover a {
    color: #000;
    background-color: aliceblue;
    border-radius: 4px; /* Borde menos redondeado para un look más limpio */
}

sss    position: relative; /* Cambiado a relative o quitado, si ya el header tiene posición */

    top: 0; /* Ajustado */

    padding: 20px;

    display: flex;

    align-items: center; /* Centra verticalmente los ítems */

    justify-content: space-between;

    background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente para el menú */

}



.logo img {

    max-width: 50px; /* Tamaño del logo */

    height: auto;

    display: block;

}



.menu .navbar ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.menu .navbar ul li {

    position: relative;

    float: left;

    padding: 0 15px; /* Espaciado entre ítems */

    /* Estas propiedades deben ir en el enlace <a>, no en el <li> */

}



.menu .navbar ul li a {

    font-size: 20px;

    padding: 10px 15px;

    color: aliceblue; /* Color inicial del texto del enlace (no el li) */

    font-weight: bold;

    text-decoration: none; /* Asegurar que no hay subrayado */

    display: block; /* Para que el padding funcione en toda el área */

    transition: background-color 0.3s, color 0.3s;

}



.menu .navbar ul li:hover a {

    color: #000; /* Texto negro al pasar el ratón */

    background-color: aliceblue; /* Fondo blanco al pasar el ratón */

    border-radius: 20px;

}





/* ----------------------------------

   4. ESTILOS DEL MENÚ DESPLEGABLE (ÁLBUMS)

   ---------------------------------- */



.opciones {

    position: absolute;
    top: 100%;
    left: 0;
    
    /* 🌟 CAMBIO CLAVE: Fondo limpio */
    background: rgba(255, 255, 255, 0.95); /* Fondo casi blanco sólido para máxima legibilidad */
    
    border-radius: 4px; /* Borde menos redondeado */
    min-width: 220px; /* Un poco más ancho */
    z-index: 25; /* Un poco más alto que el menu */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
    
    display: none; 
    list-style: none;
    padding: 5px 0; /* Padding reducido */
    margin-top: 5px;
}



    


.opciones li {

    float: none; /* Los elementos del submenú deben apilarse verticalmente */

    width: 100%;

    padding: 0;

}



.opciones li a {

   color: #333; /* Texto gris oscuro para contraste sobre fondo blanco */
    padding: 10px 20px;
    font-size: 15px;
    font-weight: normal;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;

}





/* **CLAVE**: Mostrar el submenú al pasar el ratón por el <li> padre */

.menu .navbar ul li.dropdown:hover .opciones {

    display: block;

}



/* Estilos de hover para los ítems individuales del submenú */

.opciones li a:hover {

    background-color: #f0f0f0; /* Fondo gris muy claro al pasar el ratón */
    color: #000;
    border-radius: 0;

}



/* ----------------------------------

   5. OTROS ELEMENTOS

   ---------------------------------- */



audio {

    /* Posicionar el reproductor de audio, por ejemplo, en la esquina inferior */

    position: fixed;

    bottom: 10px;

    right: 10px;

    z-index: 50;

    width: 250px; /* Ancho ajustable */

}



/* Por si hay un elemento video */

video {

    position: fixed;

    top: 50%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    transform: translate(-50%, -50%);

    z-index: -1;

    object-fit: cover;

}



/* Selectores para el menú móvil que no se usan en este momento, pero se mantienen */

#menu, .menu label {

    display: none;

}



/* ----------------------------------

   ESTILOS DE FONDO (AJUSTADOS PARA IMAGEN)

   ---------------------------------- */



.fondo {

    /* Usamos 'fixed' para que cubra toda la ventana */

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: -2; /* Puesto que es un fondo, debe estar detrás de todo */

}



/* Estilo para la imagen dentro de .fondo */

.fondo img {

    /* Asegura que la imagen de fondo cubra el área completamente sin distorsión */

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    /* Centrar la imagen en caso de que no cubra exactamente */

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    object-fit: cover; /* Asegura que la imagen cubra sin estirar */

}







/* ----------------------------------

   CÓDIGO SLIDESHOW ANIMADO (CSS)

   ---------------------------------- */



/* Es importante eliminar o comentar las reglas antiguas de '.fondo' y 'video' si ya no se usan */



/* Establecer la altura y ancho del contenedor del slideshow para que ocupe toda la pantalla. */

.slideshow-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: -3; /* Un índice z bajo para que quede detrás de todo el contenido */

}



.slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0; /* Ocultar todas las diapositivas por defecto */

    animation: slideshow-animation 15s infinite; /* Duración total de la animación (3 imágenes * 5 segundos por imagen = 15s) */

}



/* Asegurar que las imágenes dentro del slide cubran todo el espacio sin distorsión. */

.slide img {

    width: 100%;

    height: 100%;

    object-fit: cover; /* Recorta la imagen para cubrir el contenedor */

    /* Ajusta el brillo para que el menú y texto se vean mejor sobre las imágenes */

    filter: brightness(60%);

}



/* Retraso para que cada imagen aparezca en el momento correcto */

.slideshow-container .slide:nth-child(1) {

    animation-delay: 0s;   /* Imagen 1: Inicia inmediatamente */

}

.slideshow-container .slide:nth-child(2) {

    animation-delay: 5s;   /* Imagen 2: Aparece a los 5 segundos */

}

.slideshow-container .slide:nth-child(3) {

    animation-delay: 10s;  /* Imagen 3: Aparece a los 10 segundos */

}

/* Si añades más imágenes, ajusta el 'nth-child' y 'animation-delay' accordingly.

   También deberías aumentar la duración total en 'animation: slideshow-animation [duracion_total]s infinite;'

   (por ejemplo, si añades una 4ta imagen, sería 20s en total).

*/





/* Definición de la animación de transición entre las diapositivas.

   Aquí se controla cómo cada imagen aparece y desaparece.

   Los porcentajes son sobre la duración de CADA imagen (5 segundos en este caso):

   0%  = Inicio del ciclo de la imagen (opacidad 0)

   10% = 0.5s (transición a opacidad 1)

   20% = 1.0s (transición completa, opacidad 1)

   33.33% = 1.66s (mantiene opacidad 1)

   40% = 2.0s (transición a opacidad 0)

   100% = 5.0s (opacidad 0, esperando el siguiente ciclo)

*/

@keyframes slideshow-animation {

    0% { opacity: 0; }             /* Inicia oculto */

    10% { opacity: 1; }            /* Aparece en 0.5s */

    20% { opacity: 1; }            /* Completamente visible hasta 1s */

    30% { opacity: 0; }            /* Empieza a desaparecer a los 1.5s */

    100% { opacity: 0; }           /* Permanece oculto hasta el final del ciclo de 5s */

}



/* ----------------------------------

   CÓDIGO RESPONSIVO (Asegúrate de que esté después de todo lo demás)

   ---------------------------------- */



@media (max-width: 768px) {

    /* ... (tu código CSS responsive anterior aquí) ... */



    /* Por ejemplo, ajustar el brillo del fondo si es necesario en móvil */

    .slideshow-container .slide img {

        filter: brightness(50%); /* Quizás un poco más oscuro en móvil para mejor legibilidad */

    }

}