/* Layout: Footer */
.footer {
    background-color: var(--surface-offset);
    padding: var(--space-xl) 0;
    margin-top: var(--space-2xl);
    border-top: 1px solid var(--border-hair);
}

/* Rótulo del pie: aspecto de h3, pero sin entrar en el árbol de encabezados */
.footer__title {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
    color: var(--text-strong);
    margin: 0 0 var(--space-s);
}

.footer__links {
    list-style: none;
    padding: 0;
    display: flex;
    /* Seis enlaces no caben en una fila en móvil: sin wrap desbordaban la página
       ~100px en horizontal. Entre filas, menos aire que entre enlaces. */
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    margin: var(--space-m) 0;
}

.footer__links a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.85rem;
}

.footer__links a:hover {
    color: var(--link-hover);
}

/* Sin opacity: --text-dim ya es el gris más claro que pasa AA sobre el pie, y
   atenuarlo más lo dejaba por debajo de 4,5:1 a 12px. */
.footer__copy {
    font-size: 0.75rem;
    color: var(--text-dim);
}