.centro-rueda {
    width: 260px;
    margin-bottom: 70px;
    margin-right: -10px;
    z-index: 10;
    position: absolute;
    border-radius: 50%;
}

.rueda-centro-container {
    position: absolute;
    transform: translate(-50%, -50%);
    margin-left: 50%;
    margin-top: 50%;
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-areas {
    position: relative;
    height: 50px;
    width: 506px;


}

.rueda-right {
    top: 0px;
    right: 0px;
    width: 250px;
}

.rueda-left {
    top: -1px;
    left: 1px;

    height: 550px;
    width: 256px;
}

.rueda-medio {
    filter: brightness(0.6);
    cursor: pointer;
    position: absolute;
}

.rueda-medio:hover {
    filter: brightness(1);
}

.circle-areas {
    animation: blink 2s infinite ease-in-out;
    animation-play-state: running;
}

.circle-areas:hover {
    animation-play-state: paused;

}

.rueda-medio img {

    width: 100%
}

.hover-content2 {
    display: none
}

@keyframes blink {
    0% {
        filter: brightness(0.7);
    }

    50% {
        filter: brightness(1);
    }

    100% {
        filter: brightness(0.7);
    }
}




/* Añadimos una clase para cuando el usuario interactúa */
.no-blink {
    animation: none;
    /* Desactiva la animación */
}

.rueda-medio.active {
    filter: brightness(1);
}

@media(min-width:1200px) {
    .visualizacion-mb {
        display: none;
    }
}

@media(max-width:1200px) {
    .visualizacion-pc {
        display: none;
    }
}



.text-left-btns {
    display: block;
    position: absolute;
    top: -20px;
    left: -140px;
    z-index: 10;
    background: 0 0;
    box-shadow: none;
    width: 140px;
    text-align: left;
}

.text-right-btns {
    display: block;
    position: absolute;
    top: 0px;
    right: 250px;
    z-index: 10;
    background: 0 0;
    box-shadow: none;
    width: 140px;
    text-align: left;
}

.hover-content-btn {
    position: relative;
    width: 700px;
    margin-top: 80px;
    display: none;
}

.hover-content-btn .text-right {
    position: absolute;
    right: -50px;
    width: 150px;
    text-align: left !important;
}

.hover-content-btn .text-left {
    position: absolute;
    left: -200px;
    width: 150px;
    text-align: left;
}

.hover-content-btn ul {
    list-style: none !important;
    padding-left: 0;
}

.hover-content-btn ul li {
    text-decoration: underline;
    text-align: left;
}

.text-right-info,
.text-left-info {
    cursor: pointer
}