/* Todos los estilos ahora están encapsulados bajo .mi-carrusel-mobile */

.mi-carrusel-mobile {
	min-height: 1px;
	touch-action: pan-y;
}

.mi-carrusel-mobile .ui-carousel-item {
	width: 100%;
	box-sizing: border-box;
	padding: 0;
}

.mi-carrusel-mobile .ui-carousel-indicators {
	display: none !important;
}

/* Esta regla es redundante si la de abajo ya existe, pero no causa daño */
.mi-carrusel-mobile .ui-carousel-indicators.ui-reset {
	display: none !important;
}

.mi-carrusel-mobile .ui-carousel-prev,
.mi-carrusel-mobile .ui-carousel-next {
	width: 1rem !important;
	height: 1rem !important; /* Ajustado para que coincida con el ::before */
	background: none !important;
	color: #ffffff !important;
	border: 0 none !important;
	border-radius: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer !important;
	transition: background-color .2s, opacity .2s !important;
	/* El contenido del icono se manejará con ::before */
	font-size: 0; /* Oculta cualquier texto residual del botón */
}

.mi-carrusel-mobile .ui-carousel-prev:hover,
.mi-carrusel-mobile .ui-carousel-next:hover {
	background: transparent !important;
	/* No es necesario hacer el color transparente si el ::before lo maneja */
}

.mi-carrusel-mobile .ui-carousel-prev:active,
.mi-carrusel-mobile .ui-carousel-next:active {
	background: rgba(0, 0, 0, 0.2); /* Un fondo sutil al hacer clic */
}

.mi-carrusel-mobile .ui-carousel-prev:focus,
.mi-carrusel-mobile .ui-carousel-next:focus {
	outline: none; /* Quita el outline de foco */
	box-shadow: none !important;
}

/* Icono para el botón "previo" */
.mi-carrusel-mobile .ui-carousel-prev::before {
	content: ""; /* Código para pi-chevron-left */
	font-size: 1rem;
	color: #ffffff;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	user-select: none;
}

/* Icono para el botón "siguiente" */
.mi-carrusel-mobile .ui-carousel-next::before {
	content: ""; /* Código para pi-chevron-right */
	font-size: 1rem;
	color: #ffffff;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	user-select: none;
}

/* El contenido del ítem */
.mi-carrusel-mobile .tramite-item {
	width: 100%;
}

/* --- Estilos para el botón con fuente responsiva --- */
.tag-button-movil {
	display: inline-block;
	width: auto;
	padding: 8px 20px;
	border: none;
	box-sizing: border-box;
	text-align: center;
	background-color: #9B2247;
	color: white;
	border-radius: 20px;
	font-weight: bold;
	font-size: 12px;
	text-decoration: underline;
	transition: font-size 0.2s ease;
}

/* --- Media queries para el tamaño de fuente del botón --- */

/* Para pantallas de 340px o más anchas */
@media (min-width: 340px) {
	.tag-button-movil {
		font-size: 16px;
	}
}

/* Para pantallas de 480px o más anchas */
@media (min-width: 480px) {
	.tag-button-movil {
		font-size: 18px;
	}
}


/* --- estilos para Swiper.js --- */

.mi-swiper-personalizado {
	width: 100%;
	max-width: 1200px; /* Centra el carrusel en pantallas grandes */
	margin: 0 auto;
	padding: 10px 0; /* Un poco de espacio vertical */
}

/* Estilos para los slides individuales y el efecto "peek" */
.mi-swiper-personalizado .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;

	/* Estilos para los slides no activos (peeked) */
	opacity: 0.7;
	transform: scale(0.9);
	transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave */
}

/* Estilos para el slide activo (el del centro) */
.mi-swiper-personalizado .swiper-slide-active {
	opacity: 1;
	transform: scale(1);
}

/* Estilo para las flechas de navegación */
.mi-swiper-personalizado .swiper-button-prev,
.mi-swiper-personalizado .swiper-button-next {
	display: none;
}

/* Ocultamos las flechas en pantallas muy pequeñas para favorecer el swipe */
@media (max-width: 640px) {
	.mi-swiper-personalizado .swiper-button-prev,
	.mi-swiper-personalizado .swiper-button-next {
		display: none;
	}
}