.wccs-slider{
	--wccs-radius:16px;
	--wccs-gap:12px;
	--wccs-arrow-size:36px;
	--wccs-arrow-color:#111;
	--wccs-arrow-bg:transparent;
	--wccs-title-font:inherit;
	--wccs-title-size:14px;
	--wccs-title-weight:600;
	--wccs-title-color:inherit;
	position:relative;
	margin:0 auto;
	box-sizing:border-box;
}
.wccs-slider *,
.wccs-slider *::before,
.wccs-slider *::after{box-sizing:border-box}

.wccs-slider.is-arrows-outside{padding:0 56px}
.wccs-slider.is-arrows-inside{padding:0}

.wccs-slider .swiper{overflow:hidden;position:relative}
.wccs-slider .swiper-wrapper{align-items:flex-start}

.wccs-slider .wccs-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-decoration:none;
	color:inherit;
	height:auto;
}
.wccs-slider .wccs-tile{
	width:100%;
	aspect-ratio:1/1;
	border-radius:var(--wccs-radius);
	overflow:hidden;
	background:transparent;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:transform .2s ease;
}
.wccs-slider .wccs-item:hover .wccs-tile{transform:translateY(-2px)}
.wccs-slider .wccs-tile img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.wccs-slider .wccs-title{
	display:block;
	margin-top:8px;
	text-align:center;
	line-height:1.2;
	font-family:var(--wccs-title-font);
	font-size:var(--wccs-title-size);
	font-weight:var(--wccs-title-weight);
	color:var(--wccs-title-color);
}

/* Flechas: base — se posicionan respecto al contenedor .wccs-slider (padding-box),
   no respecto a .swiper. Vertical: centro del tile (no del slide, que incluye el título).
   Los !important son defensivos contra Swiper y temas que definen top/left/right en .swiper-button-*. */
.wccs-slider > .wccs-prev,
.wccs-slider > .wccs-next{
	position:absolute !important;
	width:var(--wccs-arrow-size);
	height:var(--wccs-arrow-size);
	margin:0 !important;
	color:var(--wccs-arrow-color);
	background:var(--wccs-arrow-bg);
	border-radius:50%;
	top:calc(var(--wccs-tile-h, 100px) / 2) !important;
	transform:translateY(-50%);
	z-index:5;
	right:auto;
	left:auto;
}
.wccs-slider > .wccs-prev::after,
.wccs-slider > .wccs-next::after{
	font-size:20px;
	font-weight:700;
}
.wccs-slider > .swiper-button-disabled{opacity:.3;pointer-events:none}

/* Flechas por fuera: sentadas en el padding del contenedor, fuera del track */
.wccs-slider.is-arrows-outside > .wccs-prev{left:8px !important}
.wccs-slider.is-arrows-outside > .wccs-next{right:8px !important}

/* Flechas por dentro: superpuestas sobre el track con fondo blanco translúcido */
.wccs-slider.is-arrows-inside > .wccs-prev,
.wccs-slider.is-arrows-inside > .wccs-next{
	background:rgba(255,255,255,.92);
	box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.wccs-slider.is-arrows-inside > .wccs-prev{left:8px !important}
.wccs-slider.is-arrows-inside > .wccs-next{right:8px !important}

@media (max-width:767px){
	.wccs-slider.is-arrows-outside{padding:0 40px}
	.wccs-slider{--wccs-arrow-size:28px}
}