.scroll {position:relative;padding-bottom:0}

.scroll .items{overflow:hidden;white-space: nowrap;position:relative;/*border-radius:50px;*/}
.scroll .item{display:inline-block;width:100%;vertical-align:top;white-space:normal}



/* Controles del scroll */
.piece.scroll .scroll-controls{position:absolute;tops:7em;right:0;bottom:0;left:0;width:100%;height:1.5em;font-size:3em;pointer-events:none;z-index:2}
.piece.scroll .scroll-controls{top:50%;transform:translate(0,-50%)}
.piece.scroll .piecetitle + .items + .scroll-controls{top:7em;transform:unset}
.piece.scroll .scroll-controls:before{display:none;content:"";position:absolute;bottom:calc((var(--margin-spacer) / 2) * -1);left:0;right:0;height:1px;background-color:var(--background-main-color)}
.piece.scroll .scroll-controls .scroll-controls-wrapper{position:absolute;top:0;right:0;bottom:0;width:100%}
.piece.scroll .scroll-controls .scroll-button{opacity:1;transition: opacity 0.3s;background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    transform: skewX(-10deg);
    backdrop-filter: saturate(180%) blur(20px);}
.piece.scroll .scroll-controls .scroll-button.hidden{opacity:0}
.piece.scroll .scroll-controls .scroll-button.scroll-prev,
.piece.scroll .scroll-controls .scroll-button.scroll-next{content:"";position:absolute;top:0;right:0;width:45px;height:45px;bottom:0;pointer-events:visible}
.piece.scroll .scroll-controls .scroll-button.scroll-prev{left:0;right:auto}
.piece.scroll .scroll-controls .scroll-button.scroll-prev:after,
.piece.scroll .scroll-controls .scroll-button.scroll-next:after{content:"";width:18px;height:18px;position:absolute;border:2px solid #fff;border-top-color:transparent;border-left-color:transparent;transition:opacity 0.2s;opacity:1;top:50%;left:50%;transform:translate(-50%,-50%)}
.piece.scroll .scroll-controls .scroll-button.scroll-prev:after{    transform: rotate(135deg) translate(calc(-50% - 4px), calc(-50% - 2px));
    margin-left: 2px;
    margin-top: -7px;
    left: 0;}
.piece.scroll .scroll-controls .scroll-button.scroll-next:after{transform:rotate(-45deg) translate(calc(-50% + 4px),calc(-50% + 4px));margin-top:-8px;margin-left:-7px;right:0;transition:transform 0.2s}
.piece.scroll .scroll-controls .scroll-button.scroll-prev:not(.hidden):hover:after{transform: rotate(135deg) translate(calc(-50% - 4px),calc(-50% - 2px)) scale(1.1)}
.piece.scroll .scroll-controls .scroll-button.scroll-next:not(.hidden):hover:after{transform: rotate(-45deg) translate(calc(-50% + 4px),calc(-50% + 4px)) scale(1.1)}
    /*
.piece.scroll .scroll-controls .scroll-button.scroll-prev:before,
.piece.scroll .scroll-controls .scroll-button.scroll-next:before{content:"";position:absolute;width:45px;height:45px;top:50%;left:50%;z-index:1;pointer-events:none;transition:all 0.2s;border-radius:50%;border: 0px solid #d1d1d1;transform:translate(-50%,-50%)}
.piece.scroll .scroll-controls .scroll-button.scroll-prev:hover:before{border: 0 solid #fff}
.piece.scroll .scroll-controls .scroll-button.scroll-next:hover:before{border: 0 solid #fff}
*/
.piece.scroll .scroll-controls .scroll-button.scroll-prev.hidden,
.piece.scroll .scroll-controls .scroll-button.scroll-next.hidden{opacity:0.3;cursor: default;cursor: not-allowed;}

.piece.scroll .scroll-controls .scroll-button.scroll-prev{margin-left:10px;}
.piece.scroll .scroll-controls .scroll-button.scroll-next{margin-right:10px;}