.spinner-container{
    position: fixed;
    z-index: 10000;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    margin-top: -72px; /*cambios antes no estaba*/
}
.spinner-over{
    position: absolute;
    width: calc(100% - 18px);
    background-color: #ffffffc2;
    z-index: 3;
    border-radius: 20px;
    padding: 25px 10px;
    display: flex;
    min-height: calc(100% - 19px);
    align-items: center;
    justify-content: center;
}
.spinner{
    width: 120px;
    aspect-ratio: 1/1;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.3rem;
    overflow: hidden;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    z-index: 10001;
    animation: text-color-spin 2s ease-in-out infinite alternate;
}
.spinner-over .spinner{
    width: 90px;
}
#carColor .spinner{
    position: absolute;
}
.spinner-sector{
    position: absolute;
    border-radius: 50%;
    border: 7px solid transparent;
    mix-blend-mode: overlay;
    z-index: 10002;
}
.spinner-pos-a{
    width: 100%;
    aspect-ratio: 1/1;
    animation: rotate calc(var(--durationSpin) + 9.2s) var(--timingSpin) infinite;
}
.spinner-pos-b{
    width: calc(100% - 47px);
    aspect-ratio: 1/1;
    animation: rotate-inv calc(var(--durationSpin) + 0.8s) var(--timingSpin) infinite;
}
.spinner-pos-c{
    width: calc(100% - 95px);
    aspect-ratio: 1/1;
    animation: rotate calc(var(--durationSpin) + 3.2s) var(--timingSpin) infinite;
}
.spinner-sector-left{
    border-left-color: rgba(59,110,130,0.67);
    --durationSpin: 1.2s;
    --timingSpin:ease-in-out;
}
.spinner-sector-right{
    border-right-color: rgba(191, 191, 32, 0.71);
    --durationSpin: 2.6s;
    --timingSpin:ease-in;
}
.spinner-sector-top{
    border-top-color: rgba(22, 70, 89, 0.85);
    --durationSpin: 0.6s;
    --timingSpin:ease-out;
}
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotate-inv {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(-360deg);
    }
}
@keyframes text-color-spin {
    0%{
        color: rgba(0, 0, 0, 1);
    }
    50%{
        color: rgba(0, 0, 0, 0.5);
    }
    100%{
        color: rgba(0, 0, 0, 0.3);
    }
}