/* Imagen de fondo: conserva su color original */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el fondo */
    z-index: -2; /* Envía la imagen al fondo */
}

/* Tarjeta principal */
.card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

.message-box {
    background: white; /* Fondo blanco para la tarjeta */
    border-radius: 15px; /* Bordes redondeados */
    padding: 30px 40px; /* Espaciado interno */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Sombra alrededor */
    max-width: 500px;
    width: 90%; /* Ajustable para pantallas pequeñas */
    z-index: 1;
}

.message-box h1 {
    color: #333; /* Texto oscuro */
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif !important; /* Fuente Poppins */
    font-size: 15px;
}

/* Estilo del botón */
.message-box button {
    margin-top: 20px;
    padding: 10px 20px;
    border: 2px solid #3683FB; /* Borde celeste */
    background-color: rgba(54, 131, 251, 0.1); /* Interior opaco con fondo casi transparente */
    color: #3683FB; /* Texto celeste */
    font-size: 1rem;
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover del botón */
.message-box button:hover {
    background-color: rgba(54, 131, 251, 0.25); /* Interior ligeramente más opaco */
    box-shadow: 0 0 10px rgba(54, 131, 251, 0.5); /* Sombra brillante alrededor */
    color: #3683FB; /* Mantiene el texto celeste */
}