body {
  margin: 0;
  padding: 0;
}

/* figura izquierda - fondo fijo */
body::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 300px;   /* ancho de la figura */
  height: 100vh;
  background-image: url("images/microscopic-pathogens.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* contenido principal - corregido */
.main-container {
  max-width: 720px;
  margin-left: 320px;  /* aumentado: 300px (imagen) + 20px de separación */
  padding: 20px;       /* padding uniforme alrededor del contenido */
  background-color: rgba(255, 255, 255, 0.95); /* fondo semitransparente para mejorar legibilidad */
  border-radius: 8px;  /* bordes redondeados opcionales */
  box-shadow: 0 0 15px rgba(0,0,0,0.1); /* sombra suave para destacar el contenido */
}

/* mejora la legibilidad del texto */
h1, h2, h3, h4, p, li {
  color: #333;  /* texto más oscuro para mejor contraste */
}

/* opcional: si quieres que el footer también tenga el fondo */
footer {
  margin-left: 320px;
  padding: 15px 20px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  margin-top: 20px;
}

/* ajuste responsive para móviles */
@media (max-width: 768px) {
  body::before {
    width: 100%;
    height: 200px;  /* imagen se vuelve header en móvil */
    position: fixed;
    top: 0;
    z-index: -1;
  }
  
  .main-container {
    margin-left: 0;
    margin-top: 220px;  /* espacio para la imagen */
    padding: 15px;
  }
  
  footer {
    margin-left: 0;
    margin-top: 20px;
  }
}