/* ── Footer ────────────────────────────────────────────────── */
/* Único <footer> de la página: sin clase, se selecciona por etiqueta. */
footer {
  margin-top: var(--space-3xl);
  background: var(--color-paper);
  border-top: 1px solid var(--color-rule);
}

/* Enlaces del faldón (zona "footer" de menus): una lista plana que se
   reparte en columnas según el ancho disponible. */
footer-top {
  display: block;
  border-bottom: 1px solid var(--color-rule);
}
/* Se identifica por data-nav, no por clase (el aria-label se traduce, no sirve como selector) */
nav[data-nav="footer"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-xs) var(--space-2xl);
  padding-block: var(--space-2xl);
}
nav[data-nav="footer"] a {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  padding: var(--space-2xs) 0;
  transition: color var(--dur-micro) var(--ease-out);
}
nav[data-nav="footer"] a:hover { color: var(--color-ink); }

/* Fila inferior: redes (brand-hub) a un lado, legales (zona "sidebar" de
   menus) y © al otro. */
footer-bottom {
  display: flex;
  padding: var(--space-lg) 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
nav[data-nav="social"] {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
nav[data-nav="social"] a {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  transition: color var(--dur-micro) var(--ease-out);
}
nav[data-nav="social"] a:hover { color: var(--color-ink); }
nav[data-nav="legal"] {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-inline-start: auto;
}
nav[data-nav="legal"] a,
nav[data-nav="legal"] small {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
nav[data-nav="legal"] a { transition: color var(--dur-micro) var(--ease-out); }
nav[data-nav="legal"] a:hover { color: var(--color-ink); }

@media (max-width: 600px) {
  footer-bottom { flex-direction: column; align-items: flex-start; }
  nav[data-nav="legal"] { margin-inline-start: 0; }
}