/** * Footer global. * * La maqueta vive en templates/layout/region--footer.html.twig y el contenido * viene de cuatro bloques (footer_redes, footer_contacto, footer_enlaces, * footer_legal). Los estilos de cada columna están en el CSS de su componente. * * Sobre los tokens * ---------------- * Todo el sistema de tokens de css/tokens.css está declarado bajo `.canvas-page`, * o sea que solo existe en las páginas construidas con Canvas. El footer es * global y aparece también en páginas que no lo son (/user/login, búsqueda, * nodos viejos), donde esos tokens no resuelven y las declaraciones que los usan * se descartan en silencio. * * Por eso el bloque de abajo define una capa propia. La regla es: * * - Si el valor del diseño coincide con un token, se usa el token y el valor * literal queda solo como respaldo para las páginas sin `.canvas-page`. * - Si no hay token equivalente, va el valor del diseño con un comentario que * lo dice. Esos son los candidatos a promover a tokens.css si el equipo * decide adoptarlos. * * El resto del CSS del footer y el de sus cuatro componentes usan solo estos * nombres --footer-*, nunca los tokens directos ni valores sueltos. * * @see GlobalFooter.dc.html (diseño de referencia) */ .footer-global { /* Superficies. El diseño trae #1f284d, que no es token. El más cercano del tema es --color-primary-2 (#182951, ΔE OKLab 0.011), que además es el navy de marca usado como superficie oscura en hero.css y en los botones de accesos directos. --mp-navy-700 (#132946) queda al doble de distancia. */ --footer-surface: var(--color-primary-2, #182951); --footer-boton: rgb(255 255 255 / 8%); --footer-hairline: rgb(255 255 255 / 14%); --footer-white: var(--color-white, #ffffff); /* Texto. Solo el "muted" coincide con un token; el resto es la rampa de grises azulados del diseño, sin equivalente en tokens.css. */ --footer-text: #e0e5eb; --footer-text-link: #ced9e5; --footer-text-muted: var(--text-on-inverse-muted, #c4cfdb); --footer-text-soft: #aeb9c4; --footer-eyebrow-color: #9ba6b1; /* Acento: el mismo tan de la franja de fecha se usa para todos los hover. */ --footer-accent: var(--mp-tan-500, #cfad65); --footer-accent-hover: #feedc9; /* Tipografía: los tres tokens coinciden con el diseño. */ --footer-sans: var(--font-sans, "Source Sans 3", Arial, sans-serif); --footer-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); --footer-eyebrow-font: var(--text-eyebrow-font, 500 11px / 1.2 var(--footer-mono)); --footer-eyebrow-tracking: var(--text-eyebrow-tracking, 0.12em); /* Espaciado. 52px y 48px son tokens; 40px, 22px, 14px, 10px y 9px no. */ --footer-space-xs: var(--spacing-xs, 8px); --footer-space-sm: var(--spacing-sm, 12px); --footer-space-md: var(--spacing-md, 16px); --footer-space-lg: var(--spacing-lg, 24px); --footer-space-columnas: var(--spacing-section, 52px); --footer-space-fila: 40px; /* 10px queda entre --radius-medium (8px) y --radius-lg (12px). */ --footer-radius: 10px; /* Interacción */ --footer-focus-ring: var(--focus-ring, 3px solid #094e8c); --footer-focus-offset: var(--focus-ring-offset, 2px); --footer-motion: var(--motion-fast, 0.16s ease); background-color: var(--footer-surface); color: var(--footer-text); font-family: var(--footer-sans); } /* Alineación horizontal con el resto del sitio. El contenido del sitio va dentro de .main-wrapper, que tiene padding 20px 15px (general.css). Para que las columnas del footer arranquen en la misma línea, el .container del footer necesita 15px de padding lateral. Bootstrap deriva ese padding de --bs-gutter-x: el .container usa la mitad como padding y la .row la misma mitad como margen negativo. Por eso el gutter se fija en 30px (mitad = 15px) y se declara en la fila y en el container a la vez: si solo se tocara uno, el margen negativo de la fila dejaría de coincidir con el padding del container y las columnas se saldrían por los lados. Como efecto, las columnas quedan separadas 30px en vez de los 48px del diseño; se prioriza la alineación con el contenido de la página. Los selectores llevan .footer-global por delante a propósito: .row y .container de Bootstrap definen --bs-gutter-x sobre sí mismos con la misma especificidad (0-1-0), así que sin ese prefijo el resultado dependería del orden de carga de las hojas. La separación vertical se hace con row-gap y NO con la clase gy-* de Bootstrap. gy-* define --bs-gutter-y, y .row lo aplica como margin-top: calc(-1 * var(--bs-gutter-y)). Ese margen negativo no encuentra padding ni borde superior en .container ni en