/* CONTENEDOR */
/* =========================
   SLIDER PROFESIONAL
========================= */

.mc-slider-pro{
	position:relative;
	width:100%;
	max-width:1920px;
	margin:auto;
	overflow:hidden;

	/* PROPORCIÓN PARA PC */
	aspect-ratio:1920 / 864;

	background:#000;
}

/* =========================
   SLIDES
========================= */

.mc-slide{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	opacity:0;
	transition:opacity 1s ease-in-out;
}

.mc-slide.active{
	opacity:1;
	z-index:1;
}

/* =========================
   IMÁGENES
========================= */

.mc-slide img{
	width:100%;
	height:100%;
	object-fit:cover;

	/* MUESTRA EL CENTRO */
	object-position:center center;

	display:block;
}

/* =========================
   BOTONES
========================= */

.mc-prev,
.mc-next{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	background:rgba(0,0,0,0.35);
	border:none;
	color:#fff;
	font-size:28px;
	padding:12px 16px;
	cursor:pointer;
	z-index:5;
	border-radius:8px;
	transition:0.3s ease;
}

.mc-prev:hover,
.mc-next:hover{
	background:rgba(0,0,0,0.7);
}

.mc-prev{
	left:20px;
}

.mc-next{
	right:20px;
}

/* =========================
   DOTS
========================= */

.mc-dots{
	position:absolute;
	bottom:18px;
	width:100%;
	text-align:center;
	z-index:5;
}

.mc-dots span{
	display:inline-block;
	width:12px;
	height:12px;
	margin:0 5px;
	background:rgba(255,255,255,0.5);
	border-radius:50%;
	cursor:pointer;
	transition:0.3s;
}

.mc-dots span.active{
	background:#fff;
	transform:scale(1.2);
}

/* =========================
   TABLET
========================= */

@media screen and (max-width:992px){

	.mc-slider-pro{
		aspect-ratio:16 / 9;
	}

	.mc-prev,
	.mc-next{
		font-size:22px;
		padding:10px 14px;
	}
}

/* =========================
   CELULARES
========================= */

@media screen and (max-width:768px){

	.mc-slider-pro{

		aspect-ratio:4 / 5;

		min-height:450px;

		max-height:650px;
	}

	.mc-slide img{

		/* 👇 MUESTRA LA PARTE IZQUIERDA */
		object-position:left center;
	}

	.mc-prev,
	.mc-next{

		font-size:18px;

		padding:8px 12px;

		top:45%;
	}

	.mc-prev{
		left:10px;
	}

	.mc-next{
		right:10px;
	}

	.mc-dots{
		bottom:10px;
	}

	.mc-dots span{

		width:10px;

		height:10px;
	}
}

/* =========================
   CELULARES PEQUEÑOS
========================= */

@media screen and (max-width:480px){

	.mc-slider-pro{

		aspect-ratio:9 / 16;

		min-height:520px;
	}

	.mc-slide img{

		/* 👇 MÁS ENFOQUE A LA IZQUIERDA */
		object-position:25% center;
	}
}