/*
 * Carrusel texto + imagen (Man City Widgets).
 * Aquí solo va la estructura y unos valores de reserva: los colores, tamaños y
 * tipografías definitivos salen de los ajustes del widget en Elementor.
 * Los selectores llevan dos clases para ganar a los estilos genéricos de
 * botones del tema (Hello Elementor pinta los <button> de rosa).
 */

/* El carrusel es la referencia de medida (unidades cqi) para que el título
   se reduzca con su ancho y no con el de la pantalla. */
.mcw-cti {
	display: flex;
	flex-direction: column;
	gap: 64px;
	width: 100%;
	container-type: inline-size;
}

.mcw-cti__visor {
	position: relative;
}

.mcw-cti .mcw-cti__swiper {
	width: 100%;
	overflow: hidden;
}

/* Todas las diapositivas igual de altas: la más alta manda. */
.mcw-cti .mcw-cti__slide {
	display: flex;
	height: auto;
	box-sizing: border-box;
}

.mcw-cti__diapositiva {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 7.4%;
	width: 100%;
}

.mcw-cti__contenido {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	min-width: 0;
	padding: 0 4.94%;
	text-align: center;
}

.mcw-cti .mcw-cti__titulo {
	margin: 0;
	padding: 0;
	color: #fff;
	overflow-wrap: break-word;
}

.mcw-cti__texto {
	color: #fff;
}

.mcw-cti__texto p {
	margin: 0 0 0.75em;
}

.mcw-cti__texto > :last-child {
	margin-bottom: 0;
}

.mcw-cti__media {
	position: relative;
	flex: 0 0 auto;
	align-self: center;
	width: 46.3%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 600 / 572;
	overflow: hidden;
}

.mcw-cti .mcw-cti__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

/* Flechas: centradas en la altura del carrusel y sobresaliendo 24 px. */
.mcw-cti__flechas {
	position: absolute;
	top: 50%;
	left: -24px;
	right: -24px;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}

.mcw-cti .mcw-cti__flecha {
	--mcw-icono: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	transition-property: background-color, color, border-color, opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

/* Colores: los valores reales llegan en variables desde los ajustes del widget. */
.mcw-cti .mcw-cti__flecha,
.mcw-cti .mcw-cti__flecha:focus {
	background-color: var(--mcw-flecha-fondo, #3bd6ff);
	color: var(--mcw-flecha-icono, #001838);
}

.mcw-cti .mcw-cti__flecha:hover,
.mcw-cti .mcw-cti__flecha:focus-visible {
	background-color: var(--mcw-flecha-fondo-hover, #6caddf);
	color: var(--mcw-flecha-icono-hover, var(--mcw-flecha-icono, #001838));
}

.mcw-cti .mcw-cti__flecha svg,
.mcw-cti .mcw-cti__flecha i {
	flex: none;
	width: var(--mcw-icono);
	height: var(--mcw-icono);
	font-size: var(--mcw-icono);
	fill: currentColor;
}

.mcw-cti .mcw-cti__flecha.is-desactivada {
	opacity: 0.4;
	cursor: default;
}

/* Línea de progreso: un tramo por diapositiva. El tramo es un botón más alto
   que la línea para que sea fácil de pulsar; el margen negativo lo compensa. */
.mcw-cti__progreso {
	--mcw-grosor: 4px;
	--mcw-activo: #3bd6ff;
	--mcw-inactivo: rgba(59, 214, 255, 0.15);
	display: flex;
	gap: 0;
	margin-block: -10px;
}

.mcw-cti .mcw-cti__tramo {
	--mcw-p: 0;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.mcw-cti .mcw-cti__tramo:hover,
.mcw-cti .mcw-cti__tramo:focus {
	background: transparent;
}

.mcw-cti .mcw-cti__tramo.is-activo {
	--mcw-p: 1;
}

.mcw-cti__pista {
	position: relative;
	display: block;
	width: 100%;
	height: var(--mcw-grosor);
	overflow: hidden;
	background: var(--mcw-inactivo);
	transition: background-color 0.3s ease;
}

.mcw-cti .mcw-cti__tramo:hover .mcw-cti__pista {
	background: color-mix(in srgb, var(--mcw-activo) 40%, transparent);
}

.mcw-cti__relleno {
	position: absolute;
	inset: 0;
	background: var(--mcw-activo);
	transform: scaleX(var(--mcw-p));
	transform-origin: left center;
	transition: transform 0.3s ease;
}

/* Con paso automático el relleno avanza fotograma a fotograma: sin transición. */
.mcw-cti--autoplay .mcw-cti__relleno {
	transition: none;
}

/* Foco visible solo con teclado. */
.mcw-cti .mcw-cti__flecha:focus,
.mcw-cti .mcw-cti__tramo:focus {
	outline: none;
}

.mcw-cti .mcw-cti__flecha:focus-visible,
.mcw-cti .mcw-cti__tramo:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.mcw-cti--unica .mcw-cti__flechas,
.mcw-cti--unica .mcw-cti__progreso {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.mcw-cti .mcw-cti__flecha,
	.mcw-cti__pista,
	.mcw-cti__relleno {
		transition: none;
	}
}