/*
 * c-footer — sobre la superficie oscura de la marca: logo y una línea,
 * columnas de enlaces (se acomodan solas con auto-fit) y una fila legal.
 */
@layer components {
	.c-footer {
		container: footer / inline-size;
		background: var(--color-strong);
		color: var(--color-strong-fg);
		font-size: var(--step--1);
	}
	.c-footer__inner {
		display: grid;
		grid-template-columns: minmax(14rem, 1fr) 2fr;
		grid-template-areas: "brand nav" "legal legal";
		gap: var(--space-xl) var(--space-l);
		inline-size: min(100% - 2 * var(--gutter), var(--page-max));
		margin-inline: auto;
		padding-block: var(--space-2xl) var(--space-m);
	}
	@container footer (width < 44rem) {
		.c-footer__inner { grid-template-columns: 1fr; grid-template-areas: "brand" "nav" "legal"; }
	}
	.c-footer a { color: inherit; text-decoration: none; }
	.c-footer a:hover { text-decoration: underline; text-decoration-color: var(--color-rule); }

	.c-footer__brand { grid-area: brand; display: grid; gap: var(--space-s); align-content: start; }
	.c-logo--footer { color: inherit; --logo-size: 3rem; }
	.c-footer__claim { color: color-mix(in oklab, currentColor 72%, transparent); max-inline-size: 26ch; }

	.c-footer__nav {
		grid-area: nav;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		gap: var(--space-m);
	}
	.c-footer__title {
		margin-block-end: var(--space-xs);
		color: var(--color-rule);
		/* Cinzel, como el menú */
		font-family: var(--font-institutional);
		font-size: var(--step-0);
		font-weight: 400;
		letter-spacing: 0.02em;
		text-transform: none;
	}
	.c-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4em; }

	.c-footer__legal {
		grid-area: legal;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-xs) var(--space-m);
		padding-block-start: var(--space-s);
		border-block-start: 1px solid color-mix(in oklab, currentColor 22%, transparent);
		color: color-mix(in oklab, currentColor 70%, transparent);
		font-size: var(--step--2);
	}
	.c-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-s); }
}