/*
 * Footer
 *
 * Pie de página ligero y aislado. No reutiliza estilos del header ni del blog.
 */

#footer {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.footer__inner {
  width: min(100%, calc(var(--content-max) + (var(--gutter) * 2)));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter);
  margin-inline: auto;
  font-size: 0.875rem;
  line-height: 1.5;
}

.footer__copyright,
.footer__message {
  margin: 0;
}

.footer__copyright {
  color: var(--color-text);
  font-weight: 750;
}

.footer__message {
  margin-inline: auto;
}

.footer__top {
  min-height: 2.5rem;
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
  color: var(--color-brand);
  font-size: 0.8125rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.footer__top::after {
  content: "↑";
  font-size: 1.1em;
  transition: transform var(--duration-fast) var(--ease-out);
}

.footer__top:hover::after,
.footer__top:focus-visible::after {
  transform: translateY(-0.2rem);
}

@media (max-width: 40rem) {
  .footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer__message {
    margin-inline: 0;
  }
}