.redi1 {
    max-width: 1200px;
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;

    --color__marca1: #009251;
    --color__marca2: #FFD83B;
    --color__marca3: #79B82C;

    --color1: #f44144;
    --color2: #f4a144;
    --color3: #51c8ab;
    --color4: #4db2f8;
    --color5: #a549aa;

    --color__texto: #000;

    --color__grisClaro: #EFEFEF;
    --color__grisMedio: #beb9b4;
    --color__grisOscuro: #444B44;

    --color__blanco: #ffffff;
    --color__negro: #000000;

    --origenContenedor__gap: 20px;
    --origenContenedor__ancho: calc(100% - var(--origenContenedor__gap)/5);
    --origenContenedor__anchoMaximo: 300px;
    --origenContenedor__alto: 0;
    --origenContenedor__altoPadding: 56.29%;

    --destinoContenedor__gap: var(--origenContenedor__gap);
    --destinoContenedor__ancho: var(--origenContenedor__ancho);
    --destinoContenedor__anchoMaximo: var(--origenContenedor__anchoMaximo);

    --elemento__bordeAncho: 10px;
}

@media (max-width: 992px) {
    .redi1 {
        flex-wrap: nowrap;

        --origenContenedor__gap: 10px;
        --origenContenedor__ancho: calc(100% - var(--origenContenedor__gap) * 2);

        --destinoContenedor__gap: var(--origenContenedor__gap);
        --destinoContenedor__ancho: var(--origenContenedor__ancho);

        --elemento__bordeAncho: 5px;
    }
}

.redi1 li {
    list-style: none;
}

.contenedorOrigen,
.contenedorDestino {
    width: 100%;
}

@media (max-width: 992px) {

    .contenedorOrigen,
    .contenedorDestino {
        width: 50%;
        flex-wrap: wrap;
    }
}

.redi1 .origen,
.redi1 .destino {
    display: flex;
    margin: 0 auto;
    padding-left: 0;
    justify-content: center;
    text-align: center;
    height: 100%;
    align-items: center;
    gap: var(--origenContenedor__gap);
}

@media (max-width: 992px) {

    .redi1 .origen,
    .redi1 .destino {
        flex-wrap: wrap;
    }
}

.redi1 .origen__contenedor {
    list-style: none;
    display: inline-block;
    max-width: var(--origenContenedor__anchoMaximo);
    width: var(--origenContenedor__ancho);
    height: 100%;
}

@media (max-width: 992px) {
    .redi1 .origen__contenedor {
        height: auto;
    }

}

.redi1 .origen__contenedor:hover {
    cursor: move;
}

.elemento-texto {
    position: absolute;
    top: 10px;
    left: 10px;
}

.card {
    border-radius: 15px;
    position: relative;
    /* box-shadow: -4px -4px 0 var(--color__marca2); */
    border: 2px solid var(--color__marca2);
    background-color: hsla(0, 0%, 94%, 0.8);
    background-image: url(../img/interactivo/bg1.png),
        url(../img/interactivo/bg2.png);
    background-position: bottom left, top right;
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: color-dodge;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 15px;
    height: 100%;
    min-height: 220px;
}

@media (max-width: 992px) {
    .redi1 .card {
        padding: 10px;
    }
}

.redi1 .destino__contenedor {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    /* margin: var(--destinoContenedor__gap); */
    max-width: var(--destinoContenedor__anchoMaximo);
    width: var(--destinoContenedor__ancho);
    border-radius: 15px;
    min-height: 240px;
    justify-content: start;
    /* box-shadow: 4px 4px 0 var(--color__marca2); */
    /* border: 2px solid var(--color__marca2); */
    background-color: var(--color__marca2);
}

.redi1 .destino__contenedor:nth-child(1) {
    background-color: var(--color1);
}

.redi1 .destino__contenedor:nth-child(2) {
    background-color: var(--color2);
}

.redi1 .destino__contenedor:nth-child(3) {
    background-color: var(--color3);
}

.redi1 .destino__contenedor:nth-child(4) {
    background-color: var(--color4);
}

.redi1 .destino__contenedor:nth-child(5) {
    background-color: var(--color5);
}

.destino {
    counter-reset: num;
}

.redi1 .destino__contenedor::before {
    content: counter(num);
    counter-increment: num;
    display: inline-flex;
    justify-content: center;
    align-items: start;
    width: 100%;
    color: var(--color__blanco);
    font-size: 85px;
    line-height: 1;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 600;
}

.redi1 .destino__contenedor:after {
    content: attr(data-text);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: var(--color__blanco);
    font-size: 35px;
    line-height: 1.2;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 600;
}

@media (max-width: 992px) {
    .redi1 .destino__contenedor:after {
        font-size: 25px;
    }
}

@media (max-width: 576px) {
    .redi1 .destino__contenedor:after {
        font-size: 18px;
    }
}

.redi1 .destino__contenedor .card {
    position: absolute;
    top: 0;
    left: 0;
}

.card p {
    margin-bottom: 0;
    font-size: 22px;
}

#temporizador-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

#temporizador {
    font-size: 35px;
    font-weight: bold;
    color: var(--color5);
}


@keyframes vibration {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(0);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0);
    }
}


.icon {
    width: 30px;
    margin-right: 10px;
    animation: vibration .3s infinite;
}