/* responsive.css */

/* Diseño mobile-first */

/* Pantallas pequeñas (por defecto) */
.hero img {
  max-width: 260px;
}

nav a {
  display: inline-block;
  margin: 0.5rem;
}

/* Tablets y pantallas medianas */
@media (min-width: 600px) {
  header h1 {
    font-size: 2.8rem;
  }
  .hero img {
    max-width: 320px;
  }
}

/* Escritorio */
@media (min-width: 1024px) {
  main {
    max-width: 100%;
  }
  header h1 {
    font-size: 3.5rem;
  }
  .hero {
    padding: 2rem 2rem;
  }
  nav a {
    margin: 0 1rem;
    font-size: 1rem;
  }
}