* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 100%;
    width: 100%;
    background-color: rgb(24, 32, 49);
    display: flex;
    flex-direction: column; /* Asegura que los elementos se apilen de arriba a abajo */
    min-height: 100vh; /* Hace que el body ocupe al menos toda la altura de la pantalla */
}

.Menu {
    position: fixed; /* Fija el menú en la parte superior */
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro y semitransparente */
    z-index: 10; /* Asegura que esté sobre los demás elementos */
    padding: 15px 20px;
}

#menu-container {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {
    margin-top: 0; /* Elimina margen superior */
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Ajusta la imagen de fondo */
#Fondo {
    display: block;
    width: 100%; /* Ajusta la imagen al ancho de la pantalla */
    height: 100vh; /* La imagen ocupará toda la altura de la pantalla */
    margin-top: 80px; /* La imagen comienza justo debajo del menú */
    object-fit: cover; /* Hace que la imagen cubra el área sin distorsionarse */
    border: none; /* Elimina cualquier borde */
    z-index: -1; /* Asegura que la imagen esté detrás de otros elementos */
}

/* El footer no necesita clase específica, solo asegura que el contenido fluya hacia abajo */
footer {
    margin-top: 0px; /* Espacio entre la imagen de fondo y el footer */
    padding: 20px 0;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
}

@media screen and (max-width: 1024px) {
    #Fondo-wrapper {
        width: 90%; /* Ajusta el tamaño de la imagen en pantallas pequeñas */
        margin-top: 60px; /* Reduce el espacio entre el menú y la imagen */
    }

    #Fondo {
        object-position: top; /* Mantiene el corte en la parte superior de la imagen */
    }
    .Menu {
        flex-direction: column;
        padding: 10px 20px;
    }
    #menu-container {
        display: flex;
        justify-content: center;
    }
}