body {
    margin: 0;               /* Elimina los márgenes del body */
    height: 100vh;           /* Ocupa el 100% de la altura de la ventana */
    background-image: url('img/fondo.png');  /* Ruta de la imagen */
    background-size: cover;  /* Asegura que la imagen cubra toda la pantalla */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */  
    background-attachment: fixed;  /* 🚨 Mantiene la imagen estática */
}

.navbar {
    display: flex; 
    justify-content: center;   /* Centra horizontalmente */
    align-items: center; 
}

.logo {
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 140px;
}

.logo img {
    width: 180px;
    height: auto;
}

.text {
    display: flex; 
    justify-content: center;   /* Centra horizontalmente */
    align-items: center; 
    margin-bottom: -150px;
}

.ullist {
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 50%;
    margin-top: -40px; 
}

.text1 {
    font-family: 'Belleza';
    font-size: 50px;
    text-transform: uppercase;
    color: #333333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra suave y elegante */
    padding-top: 80px;
}

.text2 {
    font-family: 'Belleza';
    text-transform: uppercase;
    color: #000;
    margin-top: -50px;
    font-size: small;
}

.imgmusiate {
    margin-top: -60px;
}

.agendbutton {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button {
    background-color: #0f283d;  /* Color de fondo (verde) */
    color: #fff;               /* Color del texto (blanco) */
    border: none;              /* Elimina el borde predeterminado */
    padding: 15px 40px;        /* Tamaño del botón (ajusta según necesites) */
    font-size: 18px;           /* Tamaño del texto */
    border-radius: 10px;       /* Bordes redondeados */
    cursor: pointer;           /* Cambia el cursor a "mano" */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efecto suave */
    margin-bottom: 160px;
}

/* Efecto al pasar el mouse */
.boton:hover {
    background-color: #2a5c85; /* Color más oscuro al pasar el cursor */
    transform: scale(1.05);    /* Efecto de "crecer" ligeramente */
}

/* Efecto al presionar el botón */
.boton:active {
    background-color: #2b6799;
    transform: scale(0.95);    /* Efecto de "hundimiento" */
}

body::before {
    content: "";
    position: fixed;         /* 🚨 Mantiene la imagen fija */
    top: 0; left: 0;         /* Ocupa toda la pantalla */
    width: 100%; height: 100%;
    background-image: url('img/fondo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;             /* Coloca el fondo detrás del contenido */
}