body {
  margin: 0; /* Elimina márgenes por defecto */
}

.tab-container {
  display: flex;
  position: fixed;
  bottom: 0; /* Pestañas en la parte inferior */
  left: 0;
  right: 0;
  background-color: transparent; /* Mantiene el fondo transparente */
  z-index: 1000;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  border: none; /* Elimina el borde */
  background-color: #e7e7e7; /* Color de fondo de las pestañas */
  margin-right: 8px; /* Separa ligeramente las pestañas */
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.9); /* Sombra para efecto flotante */
  transition: background-color 0.3s, transform 0.3s; /* Transiciones suaves */
  color: #054766;
}

.tab:hover {
  background-color: rgba(255, 255, 255, 0.5); /* Color de fondo al pasar el mouse */
  transform: translateY(-2px); /* Efecto de elevación al pasar el mouse */
}

.info-box {
  display: none; /* Oculta por defecto */
  position: fixed;
  bottom: 50px; /* 5px arriba de las pestañas */
  left: 5%; /* Margen izquierdo del 5% */
  width: 90%; /* Ancho del 90% de la pantalla */
  height: 65%; /* Altura del 50% de la pantalla */
  background-color: rgba(9, 54, 105, 0.95);
  border: 2px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.9);
  z-index: 1000;
  overflow: hidden; /* Oculta el desbordamiento */
}

.content {
  display: flex; /* Usa Flexbox para alinear elementos */
  height: 100%; /* Asegura que ocupe toda la altura del cuadro */
}

.info-image {
  width: 50%; /* Ancho de la imagen al 50% del cuadro */
  height: auto; /* Mantiene la proporción de la imagen */
  object-fit: hidden; /* Mantiene la proporción de la imagen sin deformarla */
}

.info-text {
  padding: 20px; /* Espaciado interno para el texto */
  width: auto; /* Ajusta el ancho del texto */
  display: none; /* Oculta el contenido por defecto */
  color: #e7e7e7;
  font-size: 1.6vh;
  text-align: justify;
}
.titulo-text{
  font-weight: bold; 
  letter-spacing: 4px; 
  text-align: justify;
  color: aqua;
}