/* ===== Carrusel de servicios (Websy) ===== */

.wsyc {
	--wsyc-slides: 4;
	--wsyc-gap: 20px;
	position: relative;
	max-width: 100%;
}

.wsyc-viewport {
	overflow: hidden;
	width: 100%;
}

.wsyc-track {
	display: flex;
	gap: var(--wsyc-gap);
	will-change: transform;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.wsyc-track.wsyc-sin-transicion { transition: none; }

.wsyc-slide {
	flex: 0 0 calc((100% - (var(--wsyc-gap) * (var(--wsyc-slides) - 1))) / var(--wsyc-slides));
	min-width: 0;
}

.wsyc-tarjeta {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	background-color: #0b1b34;
	border: 2px solid #2a4d7a;
	border-radius: 14px;
	overflow: hidden;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.wsyc-media {
	height: 220px;
	overflow: hidden;
	background: #10233f;
}
.wsyc-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wsyc-cuerpo {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wsyc-titulo {
	font-size: 20px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.25;
	margin-bottom: 8px;
}

.wsyc-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #4db8ff;
	transition: color .25s ease;
}
.wsyc-btn svg {
	width: 16px;
	height: 16px;
	transition: transform .25s ease;
}
.wsyc-tarjeta:hover .wsyc-btn svg { transform: translateX(4px); }

/* Flechas */
.wsyc-flecha {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0b1b34;
	color: #ffffff;
	cursor: pointer;
	z-index: 3;
	transition: opacity .2s ease, background-color .2s ease;
}
.wsyc-flecha svg { width: 20px; height: 20px; }
.wsyc-flecha--prev { left: -8px; }
.wsyc-flecha--next { right: -8px; }
.wsyc-flecha[disabled] { opacity: .35; cursor: default; }
.wsyc-flecha:hover:not([disabled]) { filter: brightness(1.15); }

/* Puntos */
.wsyc-puntos {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}
.wsyc-punto {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: #2a4d7a;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.wsyc-punto.is-activo {
	background-color: #4db8ff;
	transform: scale(1.25);
}

/* El número de tarjetas visibles en tablet/celular lo controla Elementor
   (control responsivo "Tarjetas visibles"), que sobrescribe --wsyc-slides
   dentro de sus propios breakpoints. Aquí solo ajustamos detalles menores. */
@media (max-width: 600px) {
	.wsyc-flecha { width: 36px; height: 36px; }
	.wsyc-flecha--prev { left: 4px; }
	.wsyc-flecha--next { right: 4px; }
}