/* Carrusel de Noticias Mosaico — Webosconjamon */

.wcj-cn {
	--wcj-cn-cols: 6;
	--wcj-cn-row: 210px;
	--wcj-cn-gap: 8px;
	--wcj-cn-radius: 18px;
	--wcj-cn-zoom: 1.08;
	--wcj-cn-zoom-time: 600ms;
	--wcj-cn-overlay: rgba(0, 0, 0, 0.75);
	--wcj-cn-overlay-h: 60%;
	--wcj-cn-bg: #1d2b45;
	--wcj-cn-arrow: #ffffff;
	--wcj-cn-arrow-bg: rgba(0, 0, 0, 0.45);
	--wcj-cn-arrow-size: 44px;
	--wcj-cn-dot: rgba(0, 0, 0, 0.25);
	--wcj-cn-dot-active: #1d2b45;
	--wcj-cn-speed: 600ms;

	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.wcj-cn *,
.wcj-cn *::before,
.wcj-cn *::after {
	box-sizing: border-box;
}

.wcj-cn__viewport {
	overflow: hidden;
	width: 100%;
	touch-action: pan-y;
}

/* Rejilla de 2 filas que crece en columnas: pequeña = 1x1, grande = 2x2 */
.wcj-cn__track {
	position: relative;
	display: grid;
	grid-template-rows: repeat(2, var(--wcj-cn-row));
	grid-auto-flow: column dense;
	grid-auto-columns: calc((100% - (var(--wcj-cn-cols) - 1) * var(--wcj-cn-gap)) / var(--wcj-cn-cols));
	gap: var(--wcj-cn-gap);
	width: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform var(--wcj-cn-speed) cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.wcj-cn.is-dragging .wcj-cn__track {
	transition: none;
}

.wcj-cn__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--wcj-cn-radius);
	background: var(--wcj-cn-bg);
	color: #fff;
	text-decoration: none;
	isolation: isolate; /* recorta bien el zoom con esquinas redondeadas en Safari */
	-webkit-user-drag: none;
}

.wcj-cn__item--big {
	grid-row: span 2;
	grid-column: span 2;
}

.wcj-cn__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform var(--wcj-cn-zoom-time) ease;
	pointer-events: none;
	user-select: none;
}

.wcj-cn__img--vacia {
	background: var(--wcj-cn-bg);
}

.wcj-cn__item:hover .wcj-cn__img,
.wcj-cn__item:focus-visible .wcj-cn__img {
	transform: scale(var(--wcj-cn-zoom));
}

.wcj-cn__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--wcj-cn-overlay-h);
	background: linear-gradient(to top, var(--wcj-cn-overlay) 0%, transparent 100%);
	pointer-events: none;
	z-index: 1;
}

.wcj-cn__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 20px;
}

.wcj-cn__item--big .wcj-cn__content {
	padding: 24px 28px;
}

.wcj-cn__title {
	margin: 0;
	color: #fff;
	font-weight: 800;
	line-height: 1.2;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.wcj-cn__item--small .wcj-cn__title {
	font-size: 16px;
	text-transform: uppercase;
}

.wcj-cn__item--big .wcj-cn__title {
	font-size: 26px;
	text-transform: uppercase;
}

.wcj-cn__cat,
.wcj-cn__date {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	line-height: 1.3;
}

.wcj-cn__cat {
	order: -1;
}

/* Flechas */
.wcj-cn__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: var(--wcj-cn-arrow-size);
	height: var(--wcj-cn-arrow-size);
	margin-top: calc(var(--wcj-cn-arrow-size) / -2);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wcj-cn-arrow-bg);
	color: var(--wcj-cn-arrow);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.wcj-cn__arrow:hover,
.wcj-cn__arrow:focus-visible {
	opacity: 1;
	transform: scale(1.06);
}

.wcj-cn__arrow svg {
	width: 55%;
	height: 55%;
}

.wcj-cn__arrow--prev {
	left: 12px;
}

.wcj-cn__arrow--next {
	right: 12px;
}

.wcj-cn__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* Puntos */
.wcj-cn__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.wcj-cn__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wcj-cn-dot);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.wcj-cn__dot.is-active {
	background: var(--wcj-cn-dot-active);
	transform: scale(1.25);
}

/* Móvil: títulos algo más pequeños por defecto */
@media (max-width: 767px) {
	.wcj-cn__item--small .wcj-cn__title {
		font-size: 13px;
	}
	.wcj-cn__item--big .wcj-cn__title {
		font-size: 18px;
	}
	.wcj-cn__content,
	.wcj-cn__item--big .wcj-cn__content {
		padding: 12px 14px;
	}
	.wcj-cn__arrow {
		--wcj-cn-arrow-size: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcj-cn__track,
	.wcj-cn__img {
		transition: none;
	}
}

.wcj-cn-vacio {
	padding: 20px;
	border: 1px dashed #ccc;
	text-align: center;
}