.marginal {
	position: relative;
	padding: 20px;
	border: 2px solid #4CAF50;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: border-color 0.3s ease;
}
.marginal:hover {
	border-color: #ff5733; /* Cambia el color del marco al pasar el ratón */
}
/*Para acomodar el menu de botones al centro */
.abs-center {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 1vh;
}
/* Asegúrate de ajustar el ancho de la imagen como lo necesites */
.image-container {
	position: relative;
	display: inline-block;
	overflow: hidden; /* Asegura que el texto no se desborde */
}

.image-container img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.5s ease; /* Suaviza el zoom de la imagen si se desea */
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente negro */
	opacity: 0; /* Inicialmente invisible */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease, transform 0.5s ease; /* Transiciones suaves */
	transform: scale(1.5); /* Escala ligeramente la superposición */
}

.image-container:hover .overlay {
	opacity: 1; /* Muestra el overlay al pasar el mouse */
	transform: scale(1); /* Regresa a la escala normal al pasar el mouse */
}

.text {
	color: white;
	text-align: center;
	padding: 10px;
	opacity: 0;
	transition: opacity 0.5s ease; /* Suaviza la aparición del texto */
}

.image-container:hover .text {
	opacity: 1; /* Muestra el texto al pasar el mouse */
}

@media (max-width: 768px) {
	.text {
		font-size: 18px; /* Ajusta el tamaño del texto para pantallas más pequeñas */
		padding: 15px; /* Reduce el padding para más espacio en pantalla pequeña */
	}

	.overlay {
		transform: scale(1); /* Elimina el zoom en pantallas más pequeñas para evitar distorsiones */
	}

	.image-container img {
		transition: none; /* Opcional: desactiva el zoom de imagen en dispositivos móviles */
	}
}

	@media (max-width: 480px) {
		.text {
			font-size: 16px; /* Ajusta el tamaño del texto aún más para pantallas pequeñas */
			padding: 10px; /* Ajusta el padding para pantallas muy pequeñas */
		}
	}

	.buttonScr {
		position: fixed;
		bottom: 20px;
		right: 20px;
		background-color: #007bff;
		color: white;
		border: none;
		padding: 10px 20px;
		border-radius: 5px;
		cursor: pointer;
		font-size: 16px;
		display: none; /* Ocultar por defecto */
	}
	.wrapper
	{
		
		border: 1px solid #ddd;
		display: flex;
		overflow-x: auto;
	}
	.wrapper ::-webkit-scrollbar{
		width: 0;
		overflow: hidden;
	} 

	/* estilo de el contenedor con flechas */

	.cont-mov {
				
				overflow: hidden; /* Oculta el contenido desbordante */
				width: 100%;
				position: relative;
				border: 1px solid #ccc;
			}

			.content {
				display: flex;
				width: 100%; /* Ajusta el ancho para permitir el ajuste dinámico */
				height: 100%;
				transition: transform 0.3s ease; /* Animación suave para el desplazamiento */
			}

			.arrow-con {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: #ccc;
				border: none;
				padding: 10px;
				cursor: pointer;
				z-index: 1;
			}

			.arrow-left {
				left: 0;
			}

			.arrow-right {
				right: 0;
			}

			/** Fin del estilo con las flechas **/

	
		#thumbnail-list {
		  display: flex;
		  flex-wrap: wrap;
		}

		.thumbnail-wrapper {
		  margin: 0px;
		}

		.thumbnail {
		  max-width: 100%;
		  cursor: pointer;
		  border: 3px solid black;
		}

		.thumbnail.active {
		  border: 3px solid #ffc107;
		}

		#main-image-container {
		  text-align: center;
		  margin-top: 0px;
		}

		#main-image {
		  max-width: 100%;
		}


		/* Estilos personalizados */
		#main-image-container {
			background: #fff; /* Fondo blanco */
			padding: 1em; /* Espaciado interno */
			border-radius: 10px; /* Esquinas redondeadas */
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra */
		}

		.btn-custom {
			background-color: #007bff; /* Color de fondo azul */
			color: white; /* Color del texto */
			border: none; /* Sin borde */
			border-radius: 25px; /* Esquinas redondeadas */
			padding: 10px 15px; /* Espaciado interno */
			transition: background-color 0.3s, transform 0.2s; /* Efectos de transición */
		}

		.btn-custom:hover {
			background-color: #0056b3; /* Color de fondo al pasar el ratón */
			transform: scale(1.05); /* Aumentar ligeramente al pasar el ratón */
		}

		.thumbnail-wrapper {
			transition: transform 0.2s, border-color 0.3s; /* Efecto al pasar el ratón */
		}

		.thumbnail-wrapper:hover {
			transform: scale(1.05); /* Aumentar ligeramente al pasar el ratón */
			border-color: red; /* Cambiar el color del borde al pasar el ratón */
		}

		.thumbnail {
			max-height: 100px; /* Limitar la altura de las miniaturas */
			object-fit: cover; /* Mantener la relación de aspecto */
		}

	
	/* Imágenes responsivas */
.content-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 1em;
}

/* Videos responsivos (incrustados y locales) */
.content-wrapper iframe,
.content-wrapper video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1em auto; /* Centrado y separación inferior */
    border-radius: 5px;
}

/* Tablas responsivas */
.content-wrapper table {
    width: 100%;
    overflow-x: auto; /* Permite desplazamiento horizontal si la tabla es muy ancha */
    border-collapse: collapse;
    margin-bottom: 1em;
    text-align: left;
}

.content-wrapper table th,
.content-wrapper table td {
    padding: 0.5em;
    border: 1px solid #ddd;
}

.content-wrapper table th {
    background-color: #f8f9fa;
    font-weight: bold;
}

/* Texto adicional */
.content-wrapper p {
    margin-bottom: 1em;
    line-height: 1.6;
    color: #333;
}

.content-wrapper h1, h2, h3, h4, h6 {
    margin-bottom: 1em;
    color: #2c3e50;
}

		/* Estilos personalizados */
		.content-wrapper {
			line-height: 1.6; /* Mejora la legibilidad del texto */
		}

		.content-wrapper img,
		.content-wrapper video {
			max-width: 100%; /* Limitar el ancho de imágenes y videos */
			height: auto; /* Mantener la relación de aspecto */
			margin: 1em auto; /* Espacio arriba y abajo de imágenes/videos y centrarlos */
			display: block; /* Hacer que las imágenes y videos se comporten como bloques */
		}

		/* Agregar margen inferior a los párrafos para mayor separación */
		.content-wrapper p {
			margin-bottom: 1.5em; /* Espacio inferior en párrafos */
		}