/* Contenedor de personajes */
.characters-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
    position: relative;
    min-height: 180px;
}

/* Estilos para múltiples personajes */
.character-wrapper {
    position: relative;
    transition: transform 0.3s ease;
}

.character-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.character-wrapper:hover {
    transform: scale(1.05);
    z-index: 2;
}

/* Ajustes de tamaño según el número de personajes */
.characters-count-1 .character-wrapper {
    width: 100%;
    max-width: 250px;
}

/* Dos personajes */
.characters-count-2 .character-wrapper {
    width: 45%;
    max-width: 180px;
}

.characters-count-2 .character-wrapper:first-child {
    transform: translateX(20px);
    z-index: 2;
}

.characters-count-2 .character-wrapper:last-child {
    transform: translateX(-20px);
    z-index: 1;
}

/* Tres personajes */
.characters-count-3 .character-wrapper {
    width: 35%;
    max-width: 160px;
    position: absolute;
    transition: transform 0.3s ease;
}

.characters-count-3 .character-wrapper:first-child {
    left: 20%;
    transform: translateX(-30px) scale(0.9);
    z-index: 1;
}

.characters-count-3 .character-wrapper:nth-child(2) {
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.characters-count-3 .character-wrapper:last-child {
    right: 20%;
    transform: translateX(30px) scale(0.9);
    z-index: 1;
}

/* Efecto hover para tres personajes */
.characters-count-3 .character-wrapper:first-child:hover,
.characters-count-3 .character-wrapper:last-child:hover {
    transform: translateX(-30px) scale(1);
    z-index: 4;
}

.characters-count-3 .character-wrapper:last-child:hover {
    transform: translateX(30px) scale(1);
}

/* Animaciones específicas por posición */
.character-wrapper:nth-child(1) {
    animation-delay: 0s;
}

.character-wrapper:nth-child(2) {
    animation-delay: 0.2s;
}

.character-wrapper:nth-child(3) {
    animation-delay: 0.4s;
}

/* Estilos responsivos */
@media (max-width: 480px) {
    .characters-container {
        min-height: 150px;
    }

    .characters-count-3 .character-wrapper {
        width: 40%;
    }

    .characters-count-3 .character-wrapper:first-child {
        left: 15%;
        transform: translateX(-15px) scale(0.9);
    }

    .characters-count-3 .character-wrapper:last-child {
        right: 15%;
        transform: translateX(15px) scale(0.9);
    }

    .characters-count-2 .character-wrapper {
        width: 45%;
    }

    .characters-count-2 .character-wrapper:first-child {
        transform: translateX(10px);
    }

    .characters-count-2 .character-wrapper:last-child {
        transform: translateX(-10px);
    }
}