.desarr-grid {
    display: grid;
    grid-template-columns: var(--columnas, repeat(3, 1fr));
    gap: 0px;
    margin:0;
    padding:0;
}
.elemento-vertical{
    height: 10vw; width:50%;
}
.elemento-horizontal{
    height: 5vw; width:100%;
}
.elemento-movil{
    height: 14vw; width:100%;
}
.elemento{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin:0; 
    padding:0;
    transition: all 0.4s ease-out;
}
.elemento::before {
    content: '';
    position: absolute;
    inset: -1px;
    background-image: var(--desarr-bg-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(0.5);
    opacity: 0.8;
    z-index: 0;
}
.elemento > * {
    position: relative;
    z-index: 1;
    perspective: 1000px;
}

.elemento-bg {
    width: 100%; 
    height: 100%; justify-content: center;
    position: absolute; 
    inset: 0;
}

.elemento-icono-derecha{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
    text-align: end;
    padding: 0 10% 0 0;
}
.elemento-icono-izquierda{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    text-align: start;
    padding: 0 0 0 10%;
}
.elemento-icono-arriba{
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 10% 0 0 0;
}
.elemento-icono-movil{
    flex-direction: column;
    justify-content: end;
    align-items: center;
    text-align: center;
    padding: 0% 0 0 0;
}
.elemento-icono-debajo{
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    text-align: center;
    padding: 0 0 10% 0;
}
.icono-vertical{
    height: 100px; 
    max-height: 5.5vw;  
    width: auto; 
    aspect-ratio: 1/1; 
}
.icono-horizontal{
    height: 70px; 
    max-height: 4vw; 
    width: auto; 
    aspect-ratio: 1/1; 
    line-height: 0;
}
.icono-movil{
    height: 70%; 
    max-height: 10vw; 
    width: auto; 
    aspect-ratio: 1/1; 
}
.elemento-bg-texto {
    width: 100%;
    font-size: 14px;
}
.elemento-bg-numerador {
   position: absolute; 
   top: 0; 
   left: 0; 
   font-size: 28px; 
   font-weight: 800; 
   width: 100%;
}

.elemento:hover{
    transition: all 0.2s ease-out;
    z-index: 3;
    filter: brightness(1.1);
    opacity: 1;
}


.elemento:hover .rotar3d {
    animation: rotacion 1s ease-out;
}

.elemento:hover .rotar2d {
    animation: rotacion2d 4s linear infinite;
}

.elemento:hover .acercamiento {
    animation: acercamiento 1s ease-out;
}

.elemento:hover .palpitar {
    animation: palpitar 1s ease-out infinite;
}

.elemento:hover .moverX {
    animation: moverseX 5s ease-out;
}
.elemento:hover .moverY {
    animation: moverseY 2s ease-out;
}

.showDesktop{
    display: block;
}
.showMobile{
    display: none;
}

@keyframes pandeo {
    0% { transform: rotate(0deg); }
    33% { transform: rotate(10deg); }
    66% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

@keyframes acercamiento {
    0%{ transform: scale(1); }
    33% { transform: scale(1.05); }
    66% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes palpitar {
    0%{ transform: scale(1); }
    33% { transform: scale(1.15); }
    66% { transform: scale(0.85); }
    100% { transform: scale(1); }
}

@keyframes rotacion {
    0%{ transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(0deg); }
}

@keyframes rotacion2d {
    0%{ transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes moverseX {
     0%{ transform: translateX(0); }
    40%{ transform: translateX(-100%); }
    80%{ transform: translateX(100%); }
    100% { transform: translateX(0); }
}

@keyframes moverseY {
     0%{ transform: translateY(0); }
    40%{ transform: translateY(-50%); }
    41%{ transform: translateY(-50%) scale(0.1); opacity: 0;  }
    42%{ transform: translateY(50%) scale(0.1); opacity: 0;  }
    42%{ transform: translateY(50%) scale(0.1); opacity: 1;  }
    100% { transform: translateY(0) scale(1);}
}

@media (max-width: 1225px) {
    .elemento-bg-numerador{
        font-size: 18px;
    }
   .elemento-icono-derecha{
        padding: 0 20% 0 0;
    }
    .elemento-icono-izquierda{
        padding: 0 0 0 20%;
    }
    .elemento-bg-texto {
        font-size: 9.5px;
    }
    .elemento-bg {
        font-size: 20px;
    }
}

@media (max-width: 930px) {
    .showDesktop{
        display: none;
    }
    .showMobile{
        display: block;
    }
}

@media (max-width: 602px) {
    .elemento-movil{
        height: 20vw;
    }
}

@media (max-width: 302px) {
    .elemento-movil{
        height: 30vw;
    }
}