/* ==========================================================================
   Footer del sitio.
   Bloque oscuro grafito con marca + descripción + 3 columnas + legal.
   ========================================================================== */

.site-footer {
	background: var(--color-graphite);
	color: rgba(245, 239, 230, 0.72);
	padding: var(--space-8) 0 var(--space-6);
	font-family: var(--font-sans);
	font-size: 14px;
}

.site-footer__grid {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 0 var(--container-pad-x);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}

@media (min-width: 720px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: var(--space-7);
	}
}

.site-footer__name {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 22px;
	letter-spacing: var(--ls-wordmark);
	color: var(--color-cream);
	text-transform: uppercase;
	margin-bottom: var(--space-3);
}

.site-footer__rule {
	width: 48px;
	height: 2px;
	background: var(--color-gold);
	margin-bottom: var(--space-4);
}

.site-footer__about {
	font-size: 14px;
	line-height: var(--lh-long);
	max-width: 340px;
	margin-bottom: var(--space-4);
	color: rgba(245, 239, 230, 0.72);
}

.site-footer__heading {
	font-family: var(--font-serif);
	color: var(--color-cream);
	font-weight: 500;
	font-size: var(--fz-h4);
	margin-bottom: var(--space-4);
	letter-spacing: 0.02em;
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer__list li,
.site-footer__list a {
	font-size: 14px;
	color: rgba(245, 239, 230, 0.72);
	transition: color var(--transition-fast);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
	color: var(--color-gold);
}

.site-footer__social {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.site-footer__social-link {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(245, 239, 230, 0.2);
	border-radius: var(--radius-pill);
	color: rgba(245, 239, 230, 0.72);
	transition: color var(--transition-fast),
	            border-color var(--transition-fast);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	color: var(--color-gold);
	border-color: var(--color-gold);
}

.site-footer__social-link svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.site-footer__legal {
	max-width: var(--maxw);
	margin: var(--space-7) auto 0;
	padding: var(--space-5) var(--container-pad-x) 0;
	border-top: 1px solid var(--color-line-on-navy);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	font-size: 12px;
	color: rgba(245, 239, 230, 0.45);
	letter-spacing: 0.04em;
}

.site-footer__legal-list {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.site-footer__legal-list li::after {
	content: " · ";
	color: rgba(245, 239, 230, 0.3);
	margin-left: var(--space-3);
}

.site-footer__legal-list li:last-child::after {
	content: "";
}

.site-footer__legal a:hover {
	color: var(--color-gold);
}