/* ==========================================================
   Casos de Éxito - estilos
   ==========================================================
   Variables (las escribe Elementor sobre .iscs-wrap):
     --iscs-spv   slides visibles a la vez (admite decimales, ej. 3.5)
     --iscs-gap   espacio entre tarjetas
   ========================================================== */

.iscs-wrap {
	--iscs-spv: 3.5;
	--iscs-gap: 24px;

	position: relative;
	width: 100%;
}

/* ---------- Viewport + track ----------
   El movimiento se hace con transform sobre el track (no con scroll
   nativo): así el loop puede ser infinito de verdad, reposicionando en
   slides clonados sin animación, en vez de devolver el scroll al inicio.
   La alineación la calcula el JS por el borde IZQUIERDO, de modo que ese
   lado siempre muestra una tarjeta completa y el asomo parcial queda
   siempre a la derecha. */
.iscs-viewport {
	overflow: hidden;
	width: 100%;
}

.iscs-track {
	display: flex;
	gap: var(--iscs-gap);
	will-change: transform;
	transition-property: transform;
	transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reposicionamiento instantáneo del loop (salto invisible). */
.iscs-track.is-instant {
	transition-duration: 0ms !important;
}

.iscs-slide {
	flex: 0 0 calc((100% - (var(--iscs-spv) - 1) * var(--iscs-gap)) / var(--iscs-spv));
	display: flex;
}

/* ---------- Tarjeta ----------
   Una sola tonalidad de fondo para toda la tarjeta (no hay corte
   cabecera/cuerpo): fila superior con título+eslogan a la izquierda e
   imagen a la derecha, luego el subtítulo destacado, luego el texto. */
.iscs-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: #011C3F;
	border-radius: 14px;
	padding: 28px;
	box-sizing: border-box;
	overflow: hidden;
}

.iscs-top-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.iscs-header-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.iscs-main-title {
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
}

.iscs-slogan {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.3;
}

.iscs-header-image {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
}

.iscs-subtitle {
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 14px;
	line-height: 1.3;
}

.iscs-text {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

/* ---------- Flechas ----------
   Renglón propio debajo del carrusel (no flotan sobre las tarjetas),
   así el espaciado y la alineación son predecibles y editables desde
   Elementor sin necesitar CSS a mano por página. */
.iscs-nav-arrows {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}

.iscs-arrow {
	position: static;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background-color: #ffffff;
	color: #011C3F;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.iscs-arrow:hover {
	transform: scale(1.06);
}

.iscs-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* ---------- Puntos ---------- */
.iscs-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}

.iscs-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #d7dce3;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.3s ease, width 0.3s ease;
}

.iscs-dot.is-active {
	width: 24px;
	border-radius: 6px;
	background-color: #011C3F;
}

/* ---------- Responsive ----------
   El valor de --iscs-spv y --iscs-gap por breakpoint lo escribe
   Elementor (Ajustes del carrusel > Slides visibles / Espacio). */
@media (max-width: 767px) {
	.iscs-card { padding: 20px; }
	.iscs-header-image { width: 40px; height: 40px; }
	.iscs-subtitle { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.iscs-track { transition-duration: 0ms !important; }
}