/* Estilo general para el preloader, posicionándolo de manera fija para que cubra toda la pantalla */
.preloader {
    position: fixed; /* Fija el preloader en la pantalla */
    top: 0; /* Alinea el preloader al borde superior de la pantalla */
    left: 0; /* Alinea el preloader al borde izquierdo de la pantalla */
    width: 100%; /* Hace que el preloader ocupe el 100% del ancho de la pantalla */
    height: 100%; /* Hace que el preloader ocupe el 100% de la altura de la pantalla */
    display: flex; /* Utiliza flexbox para centrar el contenido */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    background: #ffffff; /* Establece el fondo blanco para el preloader */
    z-index: 1000; /* Asegura que el preloader esté por encima de otros elementos */
    transition: opacity 0.5s ease-out; /* Transición suave de opacidad */
}

/* Estilo para el contenedor del logo dentro del preloader */
.preloader__logo {
    background-size: 75%;
    background-image: url(../img/avida/logoavis.png);
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    width: 100px; /* Ancho del logo */
    height: 100px; /* Altura del logo */
    animation: spinning 2s infinite;
    transform-style:preserve-3d;
}

@keyframes spinning {
  from  { transform: translateZ(-5em) rotateY(0deg);   }
  to    { transform: translateZ(-5em) rotateY(360deg); }
}

/* Estilo para el círculo animado dentro del logo */
.preloader__circle {
    width: 100px; /* Ancho del círculo */
    height: 100px; /* Altura del círculo */
    border: 5px solid #01B400; /* Borde del círculo con color azul */
    border-radius: 50%; /* Hace que el borde sea redondeado (círculo) */
    border-top-color: transparent; /* Hace transparente la parte superior del borde para crear el efecto de rotación */
    animation: spin 1s linear infinite; /* Aplica la animación de rotación infinita */
}

/* Define la animación 'spin' para rotar el círculo */
@keyframes spin {
    to {
        transform: rotate(360deg); /* Rota el elemento 360 grados */
    }
}

/* Clase para hacer el preloader invisible (opacidad 0) */
.preloader--invisible {
    opacity: 0; /* Establece la opacidad a 0 para ocultar el preloader */
}

/* Clase para ocultar completamente el preloader (display: none) */
.preloader--hidden {
    display: none; /* Elimina el preloader del flujo del documento */
}