/* 
Archivo: estilos-carrusel.css
Descripción: Estilos personalizados para el carrusel 3D en la página "Tarjetas".
Autor: Nexbu
Fecha: 25 Noviembre 2024
*/
.carousel {
    position: relative;
    padding-top: 60px;
    width: 100%;
}
.bullet-carrusel {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding-top: 60px;
}
.carousel__prev, .carousel__next {
    color: #fff;
    cursor: pointer;
    transition: transform 0.25s ease;
    opacity: .4;
}
.carousel__prev:hover, .carousel__next:hover {
    transform: scale(1.25);
    opacity: 1;
}
.carousel__body {
    padding: 20px 0 50px 0;
    width: 100%;
}
.carousel__slider {
    display: flex;
    height: 500px;
    position: relative;
    transition: transform 1s ease-in-out;
}
.carousel__slider__item {
    flex: 0 0 auto;
    margin: 20px;
    perspective: 1200px;
}
.item__3d-frame {
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;
    position: relative;
    width: 100%;
}
.item__3d-frame__box {
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
}
.item__3d-frame__box--front {
    backface-visibility: hidden;
    text-align: center;
}
.item__3d-frame__box--front img.card {
    border-radius: 15px;
    box-shadow: 89.119px 273.299px 80.207px 0px rgba(61, 61, 61, 0.00), 57.432px 174.278px 73.276px 0px rgba(61, 61, 61, 0.01), 31.687px 98.031px 62.384px 0px rgba(61, 61, 61, 0.05), 13.863px 43.569px 45.55px 0px rgba(61, 61, 61, 0.09), 3.961px 10.892px 25.746px 0px rgba(61, 61, 61, 0.10);
}
.item__3d-frame__box--left, .item__3d-frame__box--right {
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
}
.item__3d-frame__box--left {
    transform: rotateY(-90deg);
    transform-origin: left;
}
.item__3d-frame__box--right {
    transform: rotateY(90deg);
    transform-origin: right;
}
.box-iconos {
    position: absolute;
    width: 100%;
}
.box-iconos img {
    margin: 0 auto;
}
.carousel__slider__item img.icono-gif, .carousel__slider__item.carousel__slider__item--active img.icono {
    display: none;
}
.carousel__slider__item img.icono, .carousel__slider__item.carousel__slider__item--active img.icono-gif {
    display: block;
}
a.btn-3d {
    background: #853C0B;
    bottom: 60px;
    border-radius: 45px;
    color: #fff!important;
    display: inline-table;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 10px 26px;
    position: absolute;
}
a.btn-3d:hover {
    background: #FFA775;
}
/*** RESPONSIVE ***/
@media only screen and (max-width: 1200px) {
    .carousel__slider {
        height: 440px;
    }
}
@media only screen and (max-width: 600px) {
    .carousel {
        padding-top: 0px;
    }
    .carousel__body {
        padding: 0;
    }
    .carousel__slider, .carousel__slider__item {
        height: 320px;
    }
    .carousel__slider, img.card, .item__3d-frame, .carousel__slider__item {
        max-height: 320px;
    }
    .carousel__slider__item {
        margin: auto;
    }
    .box-iconos img {
        max-width: 170px!important;
    }
    a.btn-3d {
        margin-bottom: -10px !important;
    }
}