body { font-family: sans-serif; background: #f8f8f8; margin: 0; padding: 0; text-align: center; }
header { background: #fff; padding: 1em; text-align: center; box-shadow: 0 2px 4px #0001; }
.puntos-link {
  display: inline-block;
  margin-top: 0.5em;
  margin-left: 1em;
  padding: 0.5em 1.2em;
  background: #e0e7ff;
  color: #1a237e;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.2s;
}
.puntos-link:hover {
  background: #b3bcf5;
  color: #0d133d;
}

main { max-width: 900px; margin: 2em auto; background: #fff; padding: 2em; border-radius: 8px; text-align: center; }
ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 2em; justify-content: center; }
li.categoria-card { background: #fafafa; border-radius: 8px; box-shadow: 0 1px 3px #0001; padding: 1em; width: 250px; display: flex; flex-direction: column; align-items: center; transition: box-shadow 0.2s; justify-content: center; text-align: center; }
.categoria-card:hover { box-shadow: 0 4px 12px #0002; }
.categoria-card img { max-width: 100%; border-radius: 4px; margin-bottom: 1em; display: block; margin-left: auto; margin-right: auto; }
.categoria-card span { font-size: 1.1em; font-weight: bold; margin-top: 0.5em; text-align: center; }
h1, h2 { text-align: center; }
a { text-decoration: none; color: inherit; text-align: center; display: block; }