body {
    margin: 0;
    padding: 0;
    background-color: #1b1e23;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden; /* Evita que el body muestre scroll */
}

main {
    width: 90%;
    overflow: hidden; /* Evita que el contenedor principal muestre scroll */
}

.list-title{
    margin-top: 20px;
}

.list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px; /* Espacio entre las imágenes */
    overflow: hidden; /* Evita que el contenedor de las imágenes muestre scroll */
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.item {
    height: 100px; /* altura uniforme para todas las imágenes */
    object-fit: contain; /* mantiene la proporción sin deformar */
    display: block;
    overflow: hidden; /* Evita que el contenedor de la imagen muestre scroll */
    transition: 0.5s ease;
    filter: brightness(0.8);
    transform: translateZ(0px); /* Asegura que cada item comience sin transformación */
}

.item img {
    display: block;
    max-width: 150px; /* Ancho máximo de las imágenes */
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease;
    object-fit: contain; /* ajusta sin recortar */
}

.item:hover {
    filter: brightness(1);
    transform: translateZ(200px); /* Mueve la imagen en el eje Z */
}

.item:hover img {
    transform: scale(1.1); /* Efecto de zoom al pasar el mouse */
}

.item:hover + * {
    filter: brightness(0.94);
    transform: translateZ(150px) rotateY(40deg);
}

.item:hover + * + * {
    filter: brightness(0.87);
    transform: translateZ(70px) rotateY(20deg);
}

.item:hover + * + * + * {
    filter: brightness(0.75);
    transform: translateZ(30px) rotateY(10deg);
}

.item:has(+ *:hover) {
    filter: brightness(0.94);
    transform: translateZ(150px) rotateY(-40deg);
}

.item:has(+ * + *:hover) {
    filter: brightness(0.87);
    transform: translateZ(70px) rotateY(-20deg);
}

.item:has(+ * + * + *:hover) {
    filter: brightness(0.75);
    transform: translateZ(30px) rotateY(-10deg);
}