/* Estilos generales del carrusel */
.encabezado-aliados {
    width: 100%;
    height: 7rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: -100px;
}

.medio-circles {
    width: 90px;
    height: 90px;
    background-color: #d35ea6;
    border-radius: 0 100% 100% 0;
}

.encabezado-aliados h1 {
    font-size: 1.9rem;
    color: #5E17EB;
    margin: 10px 0;
    margin-top: 34px;
}

.encabezado-aliados hr {
    width: 1030px;
    height: 5px;
    background-color: #d35ea6;
    margin-top: 31px;
}

/* Estilo base del contenedor del carrusel */
.carr {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

/* Estilos del carrusel */
.carrusel2 {
    width: 100vw; /* Ancho completo */
    height: 200px; /* Altura ajustada */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1000px); /* Perspectiva 3D */
    animation: rotate 35s linear infinite; /* Animación de rotación */
    margin-top: 70px;
}

.carrusel2 span {
    position: absolute;
    width: 130px; /* Tamaño fijo para todas las tarjetas */
    height: 120px; /* Tamaño fijo para todas las tarjetas */
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 25.71deg)) translateZ(350px); /* Ajustar ángulo y distancia */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con opacidad */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra ligera */
    padding: 10px; /* Espaciado interno */
    box-sizing: border-box; /* Asegura que padding no modifique el tamaño total */
}

/* Estilo para las imágenes dentro de las tarjetas */
.carrusel2 span img {
    width: 90%; /* Ajustar tamaño de la imagen (porcentaje del ancho de la tarjeta) */
    height: auto; /* Mantener proporción */
    max-height: 80%; /* Asegura que la imagen no exceda el 80% de la altura de la tarjeta */
    object-fit: contain; /* Evita deformaciones de la imagen */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: block; /* Evita márgenes inesperados */
    margin: auto; /* Asegura que la imagen se centre */
}

/* Efecto hover en las imágenes */
.carrusel2 span img:hover {
    transform: scale(1.1); /* Ampliar ligeramente al pasar el mouse */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8); /* Sombra más pronunciada */
}

/* Pausar la animación al pasar el mouse sobre el carrusel */
.carrusel2:hover {
    animation-play-state: paused;
}

/* Animación de rotación */
@keyframes rotate {
    from {
        transform: perspective(1000px) rotateY(0deg);
    }
    to {
        transform: perspective(1000px) rotateY(360deg);
    }
}


@media screen and (max-width: 767px) {
    .encabezado-aliados{
        width: 100%;
        height: 7rem;
        margin-top: 60px; /* Ajusta según el espacio exacto */
    }
    .medio-circles{
        width: 35px;
        height: 50px;
        background-color: #d35ea6;
        border-radius: 0 100% 100% 0;
    }
    .encabezado-aliados h1{
        font-size: 1rem;
        color: #5E17EB;
        margin: 10px 0;
        margin-top: 12px;
        position: relative;
        left: 3px; /* Ajusta el valor según necesites */
    }
    
    .encabezado-aliados hr {
        width: 230px;
        height: 4px;
        margin-top: 4px;
    }
    .carrusel2 {
        height: 150px; /* Reducir la altura del carrusel */
        transform: perspective(800px); /* Ajustar la perspectiva */
        margin-top: -20px; /* Subir el carrusel */
        width: 70vw; /* Reducir aún más el ancho */
    }

    .carrusel2 span {
        width: 60px; /* Reducir el tamaño de las tarjetas */
        height: 50px; /* Reducir altura de las tarjetas */
        transform: rotateY(calc(var(--i) * 25.71deg)) translateZ(160px); /* Reducir la distancia */
    }

    .carrusel2 span img {
        width: 100%; /* Reducir imágenes */
        max-height: 80%; /* Ajustar la altura de las imágenes */
    }

    .carr {
        min-height: 30vh;
        overflow: hidden;
    }

}