/* Evita espacio vacío después del contenido en pantallas móviles. */
html,
body {
  min-height: 0;
  overflow-x: hidden;
}

main {
  margin-bottom: 12px;
  padding-bottom: 24px;
}

.catalog {
  padding-bottom: 26px;
}

footer > span:nth-of-type(2) {
  margin-left: auto;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid rgba(67, 84, 112, .16);
  border-radius: 999px;
  color: #31415f;
  background: rgba(255, 255, 255, .5);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}

.social-links a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .9);
}

.social-links svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
}

.social-links a:last-child svg {
  fill: none;
}

@media (max-width: 720px) {
  main {
    margin: 0 8px 8px;
    padding-bottom: 16px;
  }

  .catalog {
    padding-bottom: 20px;
  }

  footer {
    margin-top: 0;
  }

  footer > span:nth-of-type(2) {
    margin-left: 0;
  }

  .social-links {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 4px;
  }
}