main{
	--widthUnidad: calc(100vh/9);
	height:calc(var(--widthUnidad) * 7.5);
  display: block; /* Cambia display a block */
  align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}

main img{
	height: 100%;
	object-fit: contain;
  touch-action: pan-x; /* Habilita el deslizamiento vertical en dispositivos táctiles */
}

/*.menuPrincipal .activo{
	font-weight: bold;*/
	
	
#imagenPrincipal {
	 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	margin:auto;
  max-width: 100%; /* Ajustar al ancho máximo de la pantalla */
  max-height: 100%; /* Ajustar a la altura máxima de la pantalla */
  object-fit: contain; /* Ajustar el contenido sin distorsión */
 /*transition: transform 0.3s ease; *//* For smooth transformation */
  transition: transform 0.3s ease-in-out; /* Agregamos una transición suave para el deslizamiento */
  touch-action: pan-x; /* Habilita el deslizamiento vertical en dispositivos táctiles */
}

.flechaIzquierda:hover, .flechaDerecha:hover{
	cursor:pointer;
	
	 }
.flechaIzquierda {
position: absolute;
left: -1in;
	}

.flechaDerecha {
position: absolute;
right: -1in;

	}
.flechaIzquierda, .flechaDerecha {
  position: absolute;
  top: 50%; /* Centra verticalmente */
  transform: translateY(-50%); /* Ajusta verticalmente */
  /* Agrega otras propiedades como left o right según sea necesario */
}

@media screen and (max-width:640px){
#imagenPrincipal {
 position: absolute;
  top: 50%;
  left: 50%;
 	transform: translate(-50%, -50%);
	margin:auto;
  max-width: 100%; /* Ajustar al ancho máximo de la pantalla */
  max-height: 100%; /* Ajustar a la altura máxima de la pantalla */
  object-fit: contain; /* Ajustar el contenido sin distorsión */
  transition: transform 0.3s ease-in-out; /* Agregamos una transición suave para el deslizamiento */
  touch-action: pan-x; /* Habilita el deslizamiento vertical en dispositivos táctiles */
}