/* Reset del documento */
body, html {
    height: 100%;
    margin: 0;
    background-color: #f0f0f0;
    position: relative; /* Necesario para posicionar elementos hijos con absolute */
}

/* Estilo del contenedor */
.logo-container {
    text-align: center;
}

/* Estilo del logo */
.logo {
    max-width: 100%;
    height: auto;
    width: 300px; /* Ajusta según necesidad */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Loader animado */
.loader {
    width: 44.8px;
    height: 44.8px;
    color: #FE6F27;
    background: radial-gradient(11.2px, currentColor 94%, transparent);
    border-radius: 50%;
    position: absolute;
    top: 50%; /* Posiciona el centro del loader en la mitad de la pantalla */
    left: 50%; /* Posiciona el centro del loader en la mitad de la pantalla */
    transform: translate(-50%, -50%); /* Ajusta la posición para centrarlo completamente */
}

.loader:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(10.08px at bottom right, transparent 94%, currentColor) top left,
        radial-gradient(10.08px at bottom left , transparent 94%, currentColor) top right,
        radial-gradient(10.08px at top right   , transparent 94%, currentColor) bottom left,
        radial-gradient(10.08px at top left    , transparent 94%, currentColor) bottom right;
    background-size: 22.4px 22.4px;
    background-repeat: no-repeat;
    animation: loader-spin 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

/* Animación del loader */
@keyframes loader-spin {
    33% {
        inset: -11.2px;
        transform: rotate(0deg);
    }
    66% {
        inset: -11.2px;
        transform: rotate(90deg);
    }
    100% {
        inset: 0;
        transform: rotate(90deg);
    }
}