body {
    /* Fondo base con la imagen */
    background: url(../img/3409297.jpg) no-repeat center center fixed;
    background-size: cover;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    position: relative;
}

/* Capa para el efecto de cristal esmerilado aplicado al fondo */
.frosted-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 115%;
    background: rgba(255, 255, 255, 0); /* Transparencia inicial */
    backdrop-filter: blur(10px); /* Efecto de desenfoque */
    -webkit-backdrop-filter: blur(10px); /* Compatibilidad Safari */
    z-index: 0; /* Detrás del contenido */
    animation: frostEffect 2s infinite alternate ease-in-out;
    pointer-events: none; /* No afecta la interacción del usuario */
}

/* Contenido de la página */
.content {
    position: relative;
    z-index: 1; /* Por encima del fondo */
    color: white;
    font-family: Arial, sans-serif;
    text-align: center;
    padding-top: 0%;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0);
    width: 100%;
    height: 100%;
}

/* Animación para variar el efecto */
@keyframes frostEffect {
    0% {
        background: rgba(255, 255, 255, 0); /* Menor opacidad */
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    100% {
        background: rgba(255, 255, 255, 0.05); /* Mayor opacidad */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
}