/* Estilos básicos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  scroll-behavior: smooth;
}
nav {
  background:linear-gradient(135deg, rgb(87, 184, 232), rgb(71, 92, 169)); 
  padding:20px; 
  color:rgb(255, 255, 255);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
    display: flex; /* Usar flexbox para alinear elementos */
    align-items: center; /* Centrar verticalmente */
    padding: 10px 20px; /* Espaciado interno del menú */
}

/* Estilos para el logo */
.logo-container {
    margin-right: 20px; /* Empujar el logo al lado derecho */
}

.logo {
    height: 50px; /* Ajusta la altura del logo según sea necesario */
}

/* Estilos para los enlaces del menú */
nav ul {
    list-style: none; /* Eliminar los puntos de la lista */
    margin: 0; /* Eliminar márgenes */
    padding: 0; /* Eliminar padding */
    display: flex; /* Usar flexbox para los enlaces */
}

nav ul li {
    margin-right: 20px; /* Espacio entre los enlaces */
}

nav ul li a {
    color: white; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
}

nav ul li a:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

/* Estilo del submenú - Elimina la lógica de hover */
.submenu {
  display: none;
  position: absolute;
  background-color: #444;
  padding: 10px;
  top: 40px;
  left: 0;
  z-index: 200;
}
nav ul li a {
  cursor: pointer;
}

.submenu li {
  margin-bottom: 10px;
}
.submenu li a {
  color: white;
  font-size: 0.9rem;
}
.submenu li a:hover {
  text-decoration: underline;
}

.submenu.show {
  display: block;
}

/* Secciones: ajustes de productos */
section {
  padding: 100px 20px;
  min-height: 100vh;
}

#productos {
  background-color: #f4f4f4;
  padding-top: 120px; /* Para evitar superposición con el menú fijo */
}

#mesys-reports, #mesys-pacs, #mesys-insight {
  margin: 50px 0;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}


.parallax {
    background-image: url("https://i.postimg.cc/ryYT1Ndm/pexels-karolina-grabowska-719571.jpg"); /* URL de la imagen seleccionada */
    height: 100vh; /* Altura de la ventana */
    background-attachment: fixed; /* Efecto parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Para cubrir todo el área */
}


/* Footer */
footer {
  position: fixed; /* Mantener el footer fijo en la parte inferior */
  left: 0; /* Alinear a la izquierda */
  bottom: 0; /* Alinear a la parte inferior */
  width: 100%; /* Ocupa todo el ancho */
  background:linear-gradient(135deg, rgb(67, 67, 67), rgb(0, 0, 0));
  color: rgb(193, 193, 193); /* Color del texto */
  text-align: center; /* Centrar el texto */
  padding: 10px; /* Espaciado interno */
  z-index: 1000; /* Asegurarse de que esté por encima de otros elementos */
}

/* Animaciones al hacer scroll */
.animate {
  background-image: url("https://images.pexels.com/photos/269077/pexels-photo-269077.jpeg?cs=srgb&dl=pexels-pixabay-269077.jpg&fm=jpg"); /* URL de la imagen seleccionada */   
  height: 100vh; /* Altura de la ventana */
background-attachment: fixed; /* Efecto parallax */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Para cubrir todo el área */
  opacity: 0;
  transform: translateY(100px); /* Cambié el eje de animación para hacerlo vertical */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate.active {
  opacity: 1;
  transform: translateY(0);
}

/* Selector de idioma */
.language-selector {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
}

/* Estilos para las tarjetas de productos */
.product-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  max-width: 100%; /* Para que se ajuste al contenedor */
  width: 100%; /* Ancho completo por defecto en pantallas pequeñas */
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease-in-out;
}

.product-card:hover {
  transform: translateY(-10px); /* Efecto de flotación al pasar el mouse */
}

.product-image {
  width: 300px;
  height: 142px;
}

.product-content {
  padding: 20px;
}

.product-content h2 {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.product-content p {
  font-size: 0.5rem;
  color: #555;
}

.productos {
    background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); /* URL de la imagen seleccionada */
    height: 100vh; /* Altura de la ventana */
    background-attachment: fixed; /* Efecto parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Para cubrir todo el área */
    color: white; /* Texto blanco para contraste */
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    text-align: center; /* Centra el texto */
}

/* Diseño responsivo */
@media (min-width: 768px) {
  #productos {
	display: flex;
    flex-wrap: wrap; /* Permitir que las tarjetas se envuelvan */
    justify-content: space-between; /* Espacio entre las tarjetas */
	background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); /* URL de la imagen seleccionada */
    height: 100vh; /* Altura de la ventana */
    background-attachment: fixed; /* Efecto parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Para cubrir todo el área */
    color: white; /* Texto blanco para contraste */
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    text-align: center; /* Centra el texto */
  }

	  .product-card:nth-child(odd) {
		align-self: flex-start; /* Tarjetas en posiciones impares alineadas a la izquierda */
	  }

	  .product-card:nth-child(even) {
		align-self: flex-end; /* Tarjetas en posiciones pares alineadas a la derecha */
	  }
	  
	  #productos {
		padding: 0px 20px; /* Espaciado alrededor de la sección */
		text-align: center; /* Centrar texto */
	}

	.product-container {
		display: flex;
		flex-wrap: wrap; /* Para permitir que las tarjetas se acomoden bien */
		justify-content: center; /* Centrar las tarjetas en la página */
	}

	.product-card {
		background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente */
		border-radius: 8px; /* Bordes redondeados */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
		margin: 20px; /* Espacio entre tarjetas */
		width: 90%; /* Ancho fijo para las tarjetas */
		overflow: hidden; /* Para evitar desbordamiento */
		display: flex; /* Usar flexbox para alinear la imagen y contenido */
		flex-direction: row; /* Dirección de los elementos en fila */
	}

	.product-image {
		border-radius: 0; /* Bordes redondeados solo en la parte superior */
	}

	.product-content {
		width: 100%; /* Imagen del producto ocupa todo el ancho */
		padding: 20px; /* Espacio interno en la tarjeta */
		background-color: white; /* Fondo negro translúcido */
		color: #333; /* Texto blanco para contraste */
		flex: 1; /* Permitir que el contenido use el espacio restante */
	}

	.product-thumbnail {
        display: center; /* Usar flexbox para alinear miniatura y texto */
		width: auto; /* Ancho de la miniatura */
		height: 100px; /* Altura automática para mantener proporción */
		margin-right: 15px; /* Espacio entre miniatura y texto */
		border-radius: 4px; /* Bordes redondeados para la miniatura */
	}

	.product-content h2 {
		margin: 10px 0; /* Margen entre título y párrafo */
	}

	.product-content p {
		color: #333; /* Texto blanco para el párrafo */
  font-size: 0.9rem;
	}


}

/* Asegurar que las tarjetas se apilen en pantallas pequeñas */
@media (max-width: 767px) {
  .product-card {
    flex: 1 1 100%; /* Cada tarjeta ocupa el 100% en pantallas pequeñas */
    margin: 10px 0; /* Un margen vertical en pantallas pequeñas */
  }
}

/* Estilo para la sección de introducción */
.intro-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el texto en la sección */
    text-align: center; /* Centra el texto */
    color: white; /* Cambia el color del texto */
    padding: 20px; /* Espaciado alrededor del texto */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para mejorar legibilidad */
    border-radius: 10px; /* Bordes redondeados */
}

/* Opcional: Estilo del encabezado */
.intro-content h1 {
    font-size: 2.5em; /* Ajusta el tamaño de fuente del encabezado */
    margin-bottom: 10px; /* Espacio debajo del encabezado */
}

/* Opcional: Estilo del párrafo */
.intro-content p {
  font-size: 0.7rem;
    line-height: 1.5; /* Espaciado entre líneas */
}

#about-us {
  background-color: #f9f9f9;
  padding: 40px 20px;
  text-align: center;
}


.institutions-header{
    text-align: center; /* Centra el texto */
    color: white; /* Cambia el color del texto */
    padding: 20px; /* Espaciado alrededor del texto */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para mejorar legibilidad */
    border-radius: 10px; /* Bordes redondeados */
}

.institutions {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.institution {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 15px;
  padding: 20px;
  width: 280px; /* Ajusta según sea necesario */
  text-align: center; /* Centra el texto y los elementos dentro de la tarjeta */
}

.institution-photo {
  width: auto;
  height: 100px;
  border-radius: 10px;
}

.institution-logo {
  width: auto; /* Puedes ajustar el tamaño del logo */
  height: 100px;
  margin: 10px 0;
}

h2 {
  margin-bottom: 30px;
}

h3 {
  margin-top: 15px;
  font-size: 1.2em;
  color: #333;
}

p {
  font-size: 0.9em;
}



.contact-header {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para mejorar legibilidad */
    padding: 40px 20px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center; /* Centrar texto */
    max-width: 800px; /* Ancho máximo */
    margin: 0 auto; /* Centra el contenedor */
    transition: transform 0.3s ease; /* Efecto de transición suave */
}

.contact-header:hover {
    transform: scale(1.02); /* Efecto de aumento al pasar el ratón */
}

.contact-header h2 {
    font-size: 2em; /* Tamaño de fuente más grande */
    margin-bottom: 20px; /* Espacio debajo del título */
    color: white; /* Color del texto */
}

.contact-header p {
    font-size: 1.1em; /* Tamaño de fuente ligeramente mayor */
    color: white; /* Color del texto */
    line-height: 1.5; /* Mayor espacio entre líneas */
}

.contact-header a {
    color: #007bff; /* Color del enlace */
    text-decoration: none; /* Sin subrayado */
}

.contact-header a:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón */
}