.pncito{
    width: 100%;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10% 90%,
        transparent
    );
}
.pncito .list{
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}
.pncito .list .item{
    width: var(--width);
    height: var(--height);
    position: absolute;
    /* left: 100%;  <-- opcional, los keyframes lo controlan */
    animation: autoRun 80s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (80s / var(--quantity)) * (var(--position) - 1) - 80s)!important;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
	transition: all 0.3s ease;
	height:230px;
	border-radius:10px;
}
.pncito .list .item:hover
{
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.pncito .list .item img{
    width: 80%;
}
@keyframes autoRun{
  from{
    left: calc(100% + var(--drag-x, 0px));
  }
  to{
    left: calc((var(--width) * -1) + var(--drag-x, 0px));
  }
}
.pncito:hover .item{
    animation-play-state: paused!important;
    filter: grayscale(1);
}
.pncito .item:hover{
    filter: grayscale(0);
}
.pncito[reverse="true"] .item{
    animation: reversePlay 80s linear infinite;
}
@keyframes reversePlay{
  from{
    left: calc((var(--width) * -1) + var(--drag-x, 0px));
  }
  to{
    left: calc(100% + var(--drag-x, 0px));
  }
}


.card-servicio
{
	height:0px;
	width:0px;
	padding:6px;
	box-sizing:border-box;
	position:absolute;
	color:white;
	visibility:hidden;
	transition:.5s;
	}
	.card-servicio ul
	{
		visibility:hidden;
		font-family:'Montserrat', sans-serif;
		padding:0;
		text-align:center;
		font-size:14px;
		transition:.5s;
		font-weight:500;
	}
	.card-servicio ul li
	{
		margin:10px 0;
	}
	.item:hover .card-servicio{
		height:100%;
		width:100%;
		visibility:visible;
		background: rgb(27, 27, 27, .7);
		background-color: rgba(6, 11, 4, 0.7);
		border-radius: 10px;
		padding: 10px;
	}
	.item:hover .card-servicio ul
	{
		visibility:visible;
	}
