:root{
    --green: rgb(50, 140, 45);
    --pink: rgb(255, 131, 164);
    --orange: rgb(255, 175, 76);
}

/* Pantalla de carga */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white; /* Degradado */
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    z-index: 9999;
    opacity: 1; /* Fondo visible inicialmente */
    transition: opacity 1.5s ease-out; /* Desvanecer el fondo negro con una transición suave */
}

/* Logo */
#logo{
    filter: blur(10px); /* Aplica el desenfoque */
    animation: fadeInLogo 2s ease-out forwards; /* Animación para mostrar el logo */
    width: 350px; /* Ajusta el tamaño del logo */
    height: auto; /* Mantiene la proporción del logo */
    display: block;
}

.loading-text{
    flex-basis: 25%;

}
/* Animación de desvanecimiento del logo */
@keyframes fadeInLogo {
    0% {
        filter: blur(10px); /* Desenfoque al inicio */
        opacity: 1; /* El logo es visible desde el principio */
    }
    100% {
        filter: blur(0); /* Elimina el desenfoque */
        opacity: 1; /* El logo sigue visible */
    }
}

/* Contenido principal de la página (inicialmente oculto) */
#content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease-out, visibility 1s ease-out; /* Desvanecimiento suave para el contenido */
}

/* Estilo cuando la pantalla de carga desaparece */
#loading-screen.loaded {
    opacity: 0; /* Desvanecer el fondo negro */
    visibility: hidden;
    pointer-events: none; /* Para que no se pueda interactuar con la pantalla de carga */
}

/* Cuando se termina la animación y cargamos el contenido */
#content.loaded {
    opacity: 1;
    visibility: visible;
}