body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8f8f8;
}

header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

main {
  padding: 1rem;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* Tablet: 600px - 1023px */
@media screen and (min-width: 600px) and (max-width: 1023px) {
  body {
    background-color: #e0f7fa;
  }

  header, footer {
    text-align: left;
    padding: 2rem;
  }
}

/* Móvil: hasta 599px */
@media screen and (max-width: 599px) {
  nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  body {
    background-color: #fff3e0;
  }

  main {
    font-size: 1.2rem;
  }
}