.cd-selector-container {
    position: center;
    width: 400px; /* Ajusta el ancho */
    height: 150px; /* Ajusta la altura */
    perspective: 1000px;
    margin-top: 20px;
}

.cd-selector {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s ease-in-out;

}

.cd-item {
    position: absolute;
    width: 200px; /* Ancho del diploma */
    height: 150px; /* Alto del diploma */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(0px);

    border-radius: 5px;
    overflow: hidden;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    border: 1px solid #555;
    background-color: #444;
    color: #eee; /* Texto blanco para mejor contraste */
    display: flex;

    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, z-index 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out; /* Añade transición para width y height */
}

.cd-item.front { /* Clase para el elemento frontal */
    z-index: 100; /* Asegura que esté encima */
}

.cd-item.front:hover {
   width: 400px;
    height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateX(0) translateZ(50px) rotateY(0deg);
    transform-origin: center center; /* Añade esto explícitamente */
    z-index: 100;
}

.cd-item:hover {
    transform: translate(-50%, -50%) translateX(0px) translateZ(50px) rotateY(0deg) scale(2); /* Ajusta el factor de escala */
    z-index: 100; /* Asegúrate de que esté por encima de los demás */
}
.cd-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.prev-button, .next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    color: #eee;
    font-size: 24px;
    border: 1px solid #777; /* Borde para que se vean en el fondo oscuro */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 10;
}

.prev-button:hover, .next-button:hover {
    background-color: rgba(255, 0, 0, 0.5);
    color: #fff;
    border-color: rgba(255, 0, 0, 0.8);
}

.prev-button {
    left: 20px;
}

.next-button {
    right: 20px;
}