.banner{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg);
    overflow: hidden;
}
.banner .bg{
    position: absolute;
    top: -1.5rem;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*gap: 37px;*/
    gap: 36px;
    z-index: 1;
}
.row{
    position: relative;
    display: flex;
    gap: 135px;
    transform: scale(0.3);
}
.wrap{
    perspective: 17000px;
    perspective-origin: 50% -12000px;
    transform: scale(0.806);
}
.cube {
    position: relative;
    width: 200px;
    transform-style: preserve-3d;
    transform: rotateY(45deg);
}
.cube div {
    position: absolute;
    width: 200px;
    height: 200px;
    overflow: hidden;
    transition: 0.3s all ease;
    z-index: 1;
}
.cube.hover div{
    background: var(--variant) !important;
}
/*.cube.hover div,
.cube div.hover{
    width: 200px;
    height: 200px;
    overflow: unset;
}*/
.back {
    transform: translateZ(-100px) rotateY(180deg) translateY(150px);
}
.right {
    transform: rotateY(-270deg) translateX(100px) translateY(150px);
    transform-origin: top right;
}
.left {
    transform: rotateY(270deg) translateX(-100px) translateY(150px);
    transform-origin: center left;
}
.top {
    transform: rotateX(-90deg) translateY(-100px) translateZ(150px);
    transform-origin: top center;
    z-index: 5 !important;
}
.cube.hover .top{
    transform: rotateX(-90deg) translateY(-100px) translateZ(0px);
}
.bottom {
    transform: rotateX(90deg) translateY(100px) translateZ(48px) scale(1);
    transform-origin: bottom center;
    z-index: 5 !important;
    background: var(--bg);
}
.cube.hover .bottom{
    transform: rotateX(90deg) translateY(150px) translateZ(100px) scale(1.5);
    background: var(--input-color) !important;
}
.front {
    transform: translateZ(100px) translateY(150px);
}

div.right,
div.left,
div.back,
div.front{
    height: 0px;
}

.cube.hover div.right,
.cube.hover div.left,
.cube.hover div.back,
.cube.hover div.front{
    height: 100px;
}

.cube.hover .front{
    transform: translateZ(100px) translateY(0px);
}
.cube.hover .back{
    transform: translateZ(-100px) rotateY(180deg) translateY(0px);
}
.cube.hover .left{
    transform: rotateY(270deg) translateX(-100px) translateY(0px);
}
.cube.hover .right{
    transform: rotateY(-270deg) translateX(100px) translateY(0px);
}

.cube div span{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}
.cube .top span::before,
.cube .top span::after,
.cube .front span::before,
.cube .front span::after,
.cube .left span::before,
.cube .left span::after{
    background: var(--input-color);
    opacity: 0.5;
}
.cube.hover .top span::before,
.cube.hover .top span::after,
.cube.hover .front span::before,
.cube.hover .front span::after,
.cube.hover .left span::before,
.cube.hover .left span::after{
    background: var(--input-color);
    opacity: 1;
}
.cube .top span::before,
.cube .top span::after{
    transition: 0.7s cubic-bezier(0.8, 0.7, 0.3, 0.2);
}
.cube .front span::before,
.cube .front span::after{
    transition: 0.7s cubic-bezier(0.2, 0.3, 0.7, 0.8);
}
.cube .left span::before,
.cube .left span::after{
    transition: 0.7s cubic-bezier(0.2, 0.3, 0.7, 0.8);
}
.top .first::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: var(--variant);
    transform: scale(0.5);
}
.cube.hover .top .first::before{
    width: 200px;
    height: 18px;
    transform: scale(1);
}
.top .first::after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: var(--variant);
    transform: scale(0.5);
}
.cube.hover .top .first::after{
    width: 18px;
    height: 200px;
    transform: scale(1);
}

.top .second::before{
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: var(--variant);
    transform: scale(0.5);
}
.cube.hover .top .second::before{
    width: 200px;
    height: 18px;
    transform: scale(1);
}
.top .second::after{
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: var(--variant);
    transform: scale(0.5);
}
.cube.hover .top .second::after{
    width: 200px;
    height: 18px;
    transform: scale(1);
}

.top .third::before{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: var(--variant);
    transform: scale(0.5);
}
.cube.hover .top .third::before{
    width: 18px;
    height: 200px;
    transform: scale(1);
}
.top .third::after{
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: var(--variant);
    transform: scale(0.5);
}
.cube.hover .top .third::after{
    width: 18px;
    height: 200px;
    transform: scale(1);
}

.top .fourth::before{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: var(--variant);
    transform: scale(0.5);
}
.cube.hover .top .fourth::before{
    width: 200px;
    height: 18px;
    transform: scale(1);
}
.top .fourth::after{
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: var(--variant);
    transform: scale(0.5);
}
.cube.hover .top .fourth::after{
    width: 18px;
    height: 200px;
    transform: scale(1);
}


.front .first::before{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 18px;
    height: 0px;
    background: var(--variant);
    transform: translateY(-200%);
}
.cube.hover .front .first::before{
    width: 18px;
    height: 200px;
    transform: translateY(0px);
}
.front .first::after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 18px;
    height: 0px;
    background: var(--variant);
    transform: translateY(-200%);
}
.cube.hover .front .first::after{
    width: 18px;
    height: 200px;
    transform: translateY(0px);
}

.front .first::after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 18px;
    height: 0px;
    background: var(--variant);
    transform: translateY(-200%);
}
.cube.hover .front .first::after{
    width: 18px;
    height: 200px;
    transform: translateY(0px);
}


.left .first::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 18px;
    height: 0px;
    background: var(--variant);
    transform: translateY(-200%);
}
.cube.hover .left .first::before{
    width: 18px;
    height: 200px;
    transform: translateY(0px);
}
.left .first::after{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 18px;
    height: 0px;
    background: var(--variant);
    transform: translateY(-200%);
}
.cube.hover .left .first::after{
    width: 18px;
    height: 200px;
    transform: translateY(0px);
}


/*
.row:nth-child(-n+4) .cube div span::before,
.row:nth-child(-n+4) .cube div span::after,
.row:nth-child(-n+4) .cube.hover .bottom{
    background: var(--border-2) !important;
}

.row:nth-child(n+5) .cube div span::before,
.row:nth-child(n+5) .cube div span::after,
.row:nth-child(n+5) .cube.hover .bottom{
    background: var(--variant) !important;
}
    */



#custom-cursor {
    width: 150px; /* Ancho configurable */
    height: 150px; /* Ancho configurable */
    position: fixed;
    pointer-events: none;
    transition: width 0.2s, height 0.2s;
}