/**
 * Simó Lorenzo Kit — Colección de tarjetas (base común).
 *
 * Carcasa compartida por Lista numerada, Testimonios, etc.: distribución en
 * columnas, estilo tarjeta/líneas, "llenar el alto", modo deslizable y su
 * navegación. Todo son variables --slk-cc-* que el panel de Elementor rellena
 * por dispositivo; los valores de aquí son solo de reserva.
 *
 * Estructura: ul.slk-cc > li.slk-cc__item (+ clases propias de cada widget).
 */

.slk-cc {
	/* Distribución */
	--slk-cc-cols: 3;
	--slk-cc-gap: 24px;
	--slk-cc-grow: 0;

	/* Valores de cada estilo (los usa el preset elegido) */
	--slk-cc-card-bg: #fff;
	--slk-cc-card-pad: 32px;
	--slk-cc-card-radius: 24px;
	--slk-cc-card-shadow: none;
	--slk-cc-line-color: rgba(17, 27, 46, 0.2);
	--slk-cc-line-width: 1px;
	--slk-cc-lines-pad: 18px 0;

	/* Preset activo (por defecto: tarjeta) */
	--slk-cc-bg: var(--slk-cc-card-bg);
	--slk-cc-pad: var(--slk-cc-card-pad);
	--slk-cc-radius: var(--slk-cc-card-radius);
	--slk-cc-shadow: var(--slk-cc-card-shadow);
	--slk-cc-divider: 0px;

	display: flex;
	/* Deslizable: una sola fila con scroll horizontal nativo que se ajusta a cada tarjeta. */
	flex-wrap: var(--slk-cc-wrap, wrap);
	overflow-x: var(--slk-cc-overflow, visible);
	scroll-snap-type: var(--slk-cc-snap, none);
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none; /* Sin barra de scroll: se navega deslizando o con la navegación. */
	position: relative; /* Referencia para medir la posición de cada tarjeta en el JS. */
	align-content: stretch;
	gap: var(--slk-cc-gap);
	list-style: none;

	/*
	 * "Sobresalir del contenedor" (deslizable): el JS mide cuánto hay hasta cada borde
	 * de la pantalla (--slk-cc-bleed-l / -r). La lista se estira hasta ahí con márgenes
	 * negativos y lo compensa con padding, así la 1ª tarjeta sigue alineada con el
	 * contenido. Sin la opción, ambos valen 0 (sin márgenes ni padding).
	 */
	margin: 0 calc(-1 * var(--slk-cc-bleed-r, 0px)) 0 calc(-1 * var(--slk-cc-bleed-l, 0px));
	padding: 0 var(--slk-cc-bleed-r, 0px) 0 var(--slk-cc-bleed-l, 0px);
	scroll-padding-left: var(--slk-cc-bleed-l, 0px);

	/* "Llenar el alto": la lista crece dentro del widget y reparte el alto entre las filas. */
	flex: var(--slk-cc-fill, 0 1 auto);
}

.slk-cc::-webkit-scrollbar {
	display: none;
}

/* Deslizable con ratón: cursor de "agarrar" (tabindex solo existe en modo deslizable). */
@media (hover: hover) and (pointer: fine) {
	.slk-cc[data-slk-cc][tabindex] {
		cursor: grab;
	}
}

/* Mientras se arrastra con el ratón: sin ajuste ni scroll suave, y sin seleccionar texto. */
.slk-cc.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

/*
 * "Llenar el alto disponible": el widget y su contenedor interno pasan a columna
 * flexible para que la lista pueda estirarse. Sin la opción, se comportan como
 * siempre (block). Vale con y sin el contenedor interno de Elementor.
 */
.elementor-widget:has(> .slk-cc),
.elementor-widget:has(> .elementor-widget-container > .slk-cc),
.elementor-widget > .elementor-widget-container:has(> .slk-cc) {
	display: var(--slk-cc-fill-display, block);
	flex-direction: column;
}

.elementor-widget > .elementor-widget-container:has(> .slk-cc) {
	flex: var(--slk-cc-fill, 0 1 auto);
}

/* El widget crece dentro de su contenedor (columna) o se estira (fila). Especificidad
   doble para ganar a la regla genérica de Elementor; sin la opción, usa los valores de Elementor. */
.elementor-element.elementor-widget:has(> .slk-cc),
.elementor-element.elementor-widget:has(> .elementor-widget-container > .slk-cc) {
	flex-grow: var(--slk-cc-fill-grow, var(--flex-grow));
	align-self: var(--slk-cc-fill-self, var(--align-self));
}

/*
 * Cada elemento mide una columna. Con --slk-cc-grow: 1 los de la última fila
 * incompleta se estiran hasta llenarla (3 elementos en 2 columnas → el 3º a todo el ancho).
 */
.slk-cc__item {
	/* En modo deslizable, --slk-cc-item-flex fija el ancho de tarjeta (control "Ancho de cada tarjeta"). */
	flex: var(--slk-cc-item-flex, var(--slk-cc-grow) 1 calc((100% - (var(--slk-cc-cols) - 1) * var(--slk-cc-gap)) / var(--slk-cc-cols)));
	scroll-snap-align: start;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	padding: var(--slk-cc-pad);
	background: var(--slk-cc-bg);
	border-radius: var(--slk-cc-radius);
	box-shadow: var(--slk-cc-shadow);
	/* Separador (estilo Líneas): --slk-cc-divider es el grosor (0 en los demás estilos);
	   --slk-cc-line-top / -bottom (0 o 1) deciden en qué lados se pinta. */
	border-top: calc(var(--slk-cc-divider) * var(--slk-cc-line-top, 0)) solid var(--slk-cc-line-color);
	border-bottom: calc(var(--slk-cc-divider) * var(--slk-cc-line-bottom, 1)) solid var(--slk-cc-line-color);

	/*
	 * "Llenar el alto" (--slk-cc-fill-on: 1): todas las filas miden lo mismo.
	 * filas = redondear hacia arriba (elementos / columnas); cada elemento mide al menos
	 * (alto de la lista − huecos) / filas. Con 0 queda en 0px (comportamiento normal).
	 * --slk-cc-fill-block: 1 lo desactiva en los modos donde no tiene sentido
	 * (deslizable, acordeón). Si el navegador no soporta round(), se ignora.
	 */
	min-height: calc(
		var(--slk-cc-fill-on, 0) * (1 - var(--slk-cc-fill-block, 0)) *
		(100% - (round(up, var(--slk-cc-count, 1) / var(--slk-cc-cols), 1) - 1) * var(--slk-cc-gap))
		/ round(up, var(--slk-cc-count, 1) / var(--slk-cc-cols), 1)
	);
}

.slk-cc__item::before,
.slk-cc__item::marker {
	content: none; /* Algunos temas añaden viñetas a los <li>. */
}

/* =========================================================================
 * Navegación del deslizable (la crea el JS solo en los dispositivos con "Deslizable")
 * ========================================================================= */

.slk-cc__nav {
	display: flex;
	align-items: center;
	justify-content: var(--slk-cc-nav-align, center);
	gap: 16px;
	margin-top: var(--slk-cc-dots-gap, 16px);
}

.slk-cc__nav[hidden] {
	display: none;
}

/* Con flechas, indicadores a un lado y flechas al otro (como en el diseño de referencia). */
.slk-cc__nav.has-arrows {
	justify-content: space-between;
}

.slk-cc__nav.has-arrows .slk-cc__dots {
	justify-content: var(--slk-cc-nav-align, flex-start);
	flex: 1 1 auto;
}

.slk-cc__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--slk-cc-dot-size, 8px) * 0.75);
}

.slk-cc__dots.is-lines {
	gap: 12px;
}

.slk-cc__dot {
	width: var(--slk-cc-dot-size, 8px);
	height: var(--slk-cc-dot-size, 8px);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--slk-cc-dot-color, rgba(17, 27, 46, 0.2));
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Rayitas: mismo botón, más largo y fino. */
.slk-cc__dots.is-lines .slk-cc__dot {
	width: var(--slk-cc-line-length, 48px);
	height: max(2px, calc(var(--slk-cc-dot-size, 8px) / 2.5));
	border-radius: 999px;
}

/* Área táctil más grande que la rayita visible (fácil de pulsar en móvil). */
.slk-cc__dots.is-lines .slk-cc__dot {
	position: relative;
}

.slk-cc__dots.is-lines .slk-cc__dot::after {
	content: "";
	position: absolute;
	inset: -10px 0;
}

.slk-cc__dots:not(.is-lines) .slk-cc__dot:hover {
	transform: scale(1.2);
}

.slk-cc__dot[aria-current="true"] {
	background: var(--slk-cc-dot-active, #ee5670);
}

.slk-cc__dot:focus-visible,
.slk-cc__arrow:focus-visible {
	outline: 2px solid var(--slk-cc-dot-active, #ee5670);
	outline-offset: 3px;
}

.slk-cc__arrows {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.slk-cc__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--slk-cc-arrow-size, 22px) + 16px);
	height: calc(var(--slk-cc-arrow-size, 22px) + 16px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: var(--slk-cc-arrow-color, currentColor);
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.slk-cc__arrow svg {
	width: var(--slk-cc-arrow-size, 22px);
	height: var(--slk-cc-arrow-size, 22px);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.slk-cc__arrow:hover:not(:disabled) {
	transform: translateX(var(--slk-cc-arrow-nudge, 0));
}

.slk-cc__arrow--prev {
	--slk-cc-arrow-nudge: -2px;
}

.slk-cc__arrow--next {
	--slk-cc-arrow-nudge: 2px;
}

.slk-cc__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.slk-cc {
		scroll-behavior: auto;
	}
}