/* Footer — extraído de src/lib/components/Footer.svelte.
   Scopeado con anidamiento nativo bajo su raíz para evitar colisiones
   de nombres de clase al pasar de CSS scoped de Svelte a CSS global. */

.footer {
	background: var(--tinta-deep);
	color: var(--on-dark);
	padding: var(--space-9) var(--pad) var(--space-7);

	.top {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr;
		gap: var(--space-7);
		align-items: start;
		border-bottom: 1px solid var(--line-on-dark);
		padding-bottom: var(--space-8);
	}

	.brand img {
		width: min(420px, 72%);
		height: auto;
	}

	.brand p {
		max-width: 360px;
		color: var(--on-dark-muted);
		margin: var(--space-5) 0 0;
		line-height: 1.6;
		font-size: var(--fs-sm);
	}

	.sc-label {
		font-family: var(--sans);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: var(--track-caps-xs);
		text-transform: uppercase;
		color: var(--on-dark-muted);
		margin: 0 0 var(--space-4);
	}

	.col a {
		display: block;
		text-decoration: none;
		color: var(--on-dark);
		margin-bottom: var(--space-3);
		font-size: var(--fs-sm);
		transition: color 0.3s;
	}

	.col a:hover {
		color: var(--accent);
	}

	.legal {
		margin: var(--space-5) auto 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-3);
		font-family: var(--sans);
		font-size: var(--fs-micro);
		font-weight: 500;
		letter-spacing: var(--track-caps-lg);
		color: var(--on-dark-muted);
	}

	@media (max-width: 760px) {
		.top {
			grid-template-columns: 1fr;
			gap: var(--space-6);
		}
	}
}