@import url(https://fonts.googleapis.com/css?family=Red+Hat+Text:700i&display=swap);

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: row;
    justify-content: center;
    aling-items: center;
    align-content: center;
    z-index: 10000
}

#logo {
    z-index: 100;
    perspective: 800;
    transition: top 1.5s ease-in-out;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.symbol {
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    transition: transform 2s linear;
    transform-style: preserve-3d;
    transform-origin: 15px 15px;
    transition: all 1.5s ease-in-out;
    animation: fall 2s 1 ease-in-out
}

.loading .symbol {
    top: 0;
    animation: rotateX 2s infinite ease-in-out
}

.symbol:nth-child(1) {
    z-index: 1;
    animation-delay: .1s
}

.symbol:nth-child(2) {
    z-index: 2;
    animation-delay: .2s
}

.symbol:nth-child(3) {
    z-index: 3;
    animation-delay: .3s
}

.symbol:nth-child(4) {
    z-index: 2;
    animation-delay: .4s
}

.symbol:nth-child(5) {
    z-index: 1;
    animation-delay: .5s
}

.symbol:nth-child(6) {
    z-index: 1;
    animation-delay: .6s
}

.symbol:nth-child(7) {
    z-index: 1;
    animation-delay: .7s
}

@keyframes rotateX {
    0% {
        transform: rotateX(0)
    }
    100% {
        transform: rotateX(360deg)
    }
}

@keyframes fall {
    0% {
        transform: rotateX(0) translateY(0);
        opacity: 1
    }
    100% {
        transform: rotateX(120deg) translateY(1em);
        opacity: 0
    }
}

.symbol > div {
    position: absolute;
    width: 30px;
    height: 30px;
    transform-style: preserve-3d;
    background-color: #1e8650;
    font-family: 'Red Hat Text', sans-serif;
    color: #fc0;
    display: flex;
    justify-content: center;
    aling-items: center;
    text-shadow: 2px 2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, -2px -2px 0 #000, 2px 0 0 #4074b5, 0 2px 0 #000, -2px 0 0 #000, 0 -2px 0 #000
}

.symbol div:nth-child(1) {
    transform: translateZ(15px)
}

.symbol div:nth-child(2) {
    transform: rotateY(90deg) translateZ(15px);
    background-color: #1e8650
}

.symbol div:nth-child(3) {
    transform: rotateY(180deg) translateZ(15px);
    background-color: #1e8650
}

.symbol div:nth-child(4) {
    transform: rotateY(-90deg) translateZ(15px);
    background-color: #165e39
}

.symbol div:nth-child(5) {
    transform: rotateX(-90deg) translateZ(15px) rotate(180deg);
    background-color: #165e39
}

.symbol div:nth-child(6) {
    transform: rotateX(90deg) translateZ(15px);
    background-color: #1e6b43
}

.symbol > div:first-child {
    border: 2px solid transparent;
    background-color: #1e8650
}

.symbol > div:first-child:after, .symbol > div:first-child:before {
    content: "";
    position: absolute
}

lds-hourglass {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px
}

.center-loder {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1100;
    background-color:black;
}

.cargando {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, .9);
    margin-left: 0
}

.cont-carg {
    width: 100%;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 30px
}

.cont-carg span {
    font-size: 25px
}

/* Fondo centrado con efecto suave */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #000 40%, #111);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Contenedor del logo */
.loader-logo img {
    width: 220px; /* puedes ajustar el tamaño */
    animation: pulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 10px gold);
}

/* Efecto de respiración (zoom suave) */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.07);
        opacity: 0.85;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Ocultar el loader cuando la página termine de cargar (opcional con JS)
   Si no usarás JS, puedes controlar la visibilidad con clases manualmente */
body.loaded .loader-container {
    opacity: 0;
    visibility: hidden;
}