/* Estilos para el carrusel */
        .slider {
             width: 90%;
  height: 100%;
        }
 .slider2 {
            width: 50%;
            margin: 0 auto;
        }
        .slider-item {
            display: inline-block;
            background-color: none;
         
            padding: 5px;
            margin: 5px;
            text-align: center;



            height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
        }

        .slick-prev:hover,
        .slick-prev:focus,
        .slick-next:hover,
        .slick-next:focus {
            color: #c10e1aa8;
            outline: none;
            background: transparent;
        }

        /* Estilo para las imágenes dentro del carrusel */
        .slider-item img {
            /* max-height: 100%;
            width: auto;
            height: 100%;
            object-fit: contain; */
 max-height: 95%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 15px;
        }

        /* Flechas personalizadas */
        .slick-prev,
        .slick-next {
            background-color: transparent;
            border: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            cursor: pointer;
            outline: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 90px;
            outline: none;
            transition: transform 0.3s ease;
            /* Transición suave */
        }

        .slick-prev {
            left: -10px;
        }

        .slick-next {
            right: -10px;
        }

        /* Efecto hover para agrandar las flechas */
        .slick-prev:hover,
        .slick-next:hover {
            transform: translateY(-50%) scale(1.5);
            /* Aumenta el tamaño a 1.5 veces */
        }

        .slick-dots {
            bottom: -19px;
        }


        /* Círculos personalizados */
        .arrow-circle {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #BBBBBB;
            margin: 3px 0;
        }

        

        .arrow-right {
       width: 3rem;
       height: 4rem;
       background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/btnR.svg");
       background-size: contain;
       background-repeat: no-repeat;
       /* background-color: #bc9563; */
        }

        .arrow-left {
          width: 3rem;
       height: 4rem;
       background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/btnL.svg");
       background-size: contain;
       background-repeat: no-repeat;
        }

        /* Asegura que las flechas estén visibles sobre el slider */
        .slick-prev:before,
        .slick-next:before {
            content: '';
        }

        /* Centramos el carrusel */
        .slick-list {
            overflow: hidden;
            margin: 0 auto;
            width: 100%;
  height: 100%;
        }

        /* Ajuste del contenedor del slider */
        .slider-item {
           
     height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
        }
.slider,
.slick-list,
.slick-track,
.slick-slide,
.slick-slide > div {
  height: 100%;
}
        /* Cambiar el color de los dots a rojo */
        .slick-dots li button:before {
            color: #fffefdf0;
            /* Cambia el color de los dots a rojo */
            font-size: 8px;
            /* Ajusta el tamaño si es necesario */
            opacity: 1;
            /* Asegúrate de que no estén translúcidos */
        }

        /* Cambiar el color del dot activo a un rojo más oscuro si deseas */
        .slick-dots li.slick-active button:before {
            color: #d996ad;
            /* Cambia el color del dot activo */
            opacity: 1;
            /* Asegúrate de que no estén translúcidos */
        }
.slick-slide > div {
  /* height: 400px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen proporcional */
.slick-slide img {
  max-height: 100%;
  max-width: 100%;

  object-fit: contain;
}
.slick-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.slick-list,
.slick-track,
.slick-slide {
  height: 100%;
}
        @media only screen and (max-width: 768px){
             .slider2 {
            width: 90%;
            
        }
        }