/* Estilos generales y para móviles (Mobile-First) */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
}

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

.contenedor {
  width: 95%;
  margin: 1rem auto;
  overflow: hidden; /* Para contener los floats */
}

.columna {
  width: 100%; /* En móviles, las columnas se apilan una sobre otra */
  padding: 1rem;
  box-sizing: border-box; /* Para que el padding no afecte el ancho total */
  background-color: #fff;
  margin-bottom: 1rem;
}

/* --- Puntos de Quiebre (Media Queries) --- */

/* Para tabletas y pantallas más grandes */
@media (min-width: 768px) {
  .columna {
    width: 50%; /* Dos columnas una al lado de la otra */
    float: left;
    padding: 1.5rem;
  }

  /* Pequeño ajuste para que no queden pegadas */
  .columna:first-child {
      padding-right: 1rem;
  }

  .columna:last-child {
      padding-left: 1rem;
  }
}

/* Para computadoras de escritorio */
@media (min-width: 1024px) {
  .contenedor {
    width: 80%;
  }

  header h1 {
    font-size: 2.5rem;
  }
}