/* responsive.css */

/* Estilos para pantallas menores a 768px */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    align-items: center;
  }

  nav ul li {
    margin: 0.25rem 0;
  }

  header h1 {
    font-size: 2rem;
  }

  section {
    padding: 1.5rem 1rem;
  }

  form {
    width: 100%;
  }

  input, textarea {
    width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

/* Estilos para pantallas menores a 480px */
@media (max-width: 480px) {
  header h1 {
    font-size: 1.5rem;
  }

  nav ul li a {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  button {
    font-size: 0.9rem;
    padding: 0.6rem;
  }
}