.site-footer { margin-top: 44px; border-top: 1px solid #e1e8f1; background: #f8fafc; }
/* La franja ancha del pie (.site-footer-inner, -logo, -brand, -links, -funding
   y los patrocinadores de landing.css) se retiró el 2026-07-24 y sus reglas se
   borraron el 2026-08-02: ninguna plantilla emitía ya ese marcado. */
/* Sin border-top: al retirarse la franja ancha del pie (2026-07-24), la barra
   inferior es lo único del pie y ya la separa el borde de .site-footer. */
.site-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto; padding: 18px 22px 18px; max-width: 1240px; flex-wrap: wrap; }
.site-footer-institution { display: flex; align-items: center; gap: 12px; color: #7c8aa0; font-size: .78rem; }
.site-footer-institution img { height: 30px; width: auto; border-radius: 4px; }
.site-footer-meta { display: flex; gap: 18px; }
.site-footer-meta a { color: #5b6c84; font-size: .78rem; text-decoration: none; }
.site-footer-meta a:hover { color: #2682d6; text-decoration: underline; }
/* Perfiles sociales: fila de iconos al final de la barra estrecha. El objetivo
   táctil es de 30px ya en escritorio porque el icono es el único contenido del
   enlace, sin texto al que apuntar. */
.site-footer-social { display: flex; align-items: center; gap: 8px; }
.site-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: #5b6c84; }
.site-footer-social a:hover, .site-footer-social a:focus-visible { color: #2682d6; background: #eef4fb; }
.site-footer-social svg { width: 16px; height: 16px; }
/* El pie inferior se apila: en fila junto a la institución, site-footer-meta
   (seis enlaces) no cabía en 390px y quedaba recortado por `overflow-x: clip`
   en html/body (línea ~413), sin forma de desplazarse para alcanzarlo. En
   columna, cada bloque usa el ancho completo y site-footer-meta envuelve. */
@media (max-width: 620px) {
  .site-footer-bottom { flex-direction: column; align-items: stretch; gap: 14px; }
  /* Rejilla de dos columnas y no `flex-wrap`. Envolviendo, los enlaces caían
     donde les tocaba por su ancho —tres en una línea, cuatro en la siguiente,
     con los bordes izquierdos sin alinear— y el bloque se leía como un montón,
     no como una lista. Con la rejilla hay dos columnas fijas: los enlaces se
     alinean, y añadir uno más crece por filas ordenadas en vez de recolocar
     todo lo anterior. Que sea `1fr 1fr` y no `auto-fit` es a propósito: el
     ancho de columna deja de depender del enlace más largo, así que traducir
     al catalán o al inglés no reordena el pie. */
  .site-footer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
  .site-footer-meta a,
  .site-footer-institution a { display: inline-flex; align-items: center; min-height: 40px; }
  .site-footer-institution a { padding: 3px; margin: -3px; }
  /* Los perfiles pasan a ser un grupo con su propia franja en vez de un icono
     suelto colgando al final: un filete arriba los separa de los enlaces
     legales, con los que no tienen nada que ver. */
  .site-footer-social { padding-top: 12px; border-top: 1px solid #e8eef6; }
  .site-footer-social a { width: 40px; height: 40px; }
  .site-footer-social a:first-child { margin-left: -8px; }
}