/**
 * @layer components — footer institucional (4 columnas + línea legal).
 * Versión oscura, mismo lenguaje que el panel del hero (fondo --c-ink-900,
 * eyebrows en --c-accent-400, texto en blanco atenuado vía color-mix).
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer components {
	.site-footer {
		background: var(--c-ink-900);
		border-top: 1px solid transparent;
	}

	.footer__columnas {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-7);
		padding-block: var(--space-8);
	}

	/* Identidad y contacto ocupan todo el ancho; las dos columnas de
	   secciones quedan una al lado de la otra en el medio. */
	.footer__col--identidad,
	.footer__col--contacto {
		grid-column: 1 / -1;
	}

	.footer__col--identidad {
		text-align: center;
	}

	.footer__col--identidad p {
		margin-inline: auto;
	}

	@media (width >= 1024px) {
		.footer__col--identidad {
			text-align: left;
		}

		.footer__col--identidad p {
			margin-inline: 0;
		}

		.footer__columnas {
			grid-template-columns: 1.4fr .8fr .8fr 1fr;
		}

		.footer__col--identidad,
		.footer__col--contacto {
			grid-column: auto;
		}
	}

	.footer__logo {
		display: inline-block;
		margin-bottom: var(--space-3);
	}

	.footer__logo--texto {
		font-family: var(--font-display);
		font-size: var(--text-lg);
		font-weight: 700;
		color: var(--c-white) !important;
		text-decoration: none !important;
	}

	.footer__logo img,
	.footer__logo .custom-logo {
		height: 40px;
		width: auto;
	}

	.footer__col--identidad p {
		max-width: 32ch;
		font-size: var(--text-sm);
		color: color-mix(in oklab, var(--c-white) 70%, transparent);
	}

	.footer__titulo {
		margin-bottom: var(--space-3);
		font-family: var(--font-body) !important;
		font-size: var(--eyebrow-size) !important;
		font-weight: 600 !important;
		letter-spacing: var(--eyebrow-tracking);
		text-transform: uppercase;
		color: var(--c-accent-400) !important;
	}

	.footer__col ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.footer__col ul a {
		font-size: var(--text-sm);
		color: color-mix(in oklab, var(--c-white) 85%, transparent) !important;
		text-decoration: none !important;
	}

	.footer__col ul a:hover,
	.footer__col ul a:focus-visible {
		color: var(--c-accent-400) !important;
	}

	.footer__col--contacto address {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		font-style: normal;
		margin-bottom: var(--space-5);
	}

	.footer__col--contacto address a,
	.footer__col--contacto address span {
		font-size: var(--text-sm);
		color: color-mix(in oklab, var(--c-white) 85%, transparent) !important;
		text-decoration: none !important;
	}

	.footer__col--contacto address a:hover,
	.footer__col--contacto address a:focus-visible {
		color: var(--c-accent-400) !important;
	}

	ul.footer__redes {
		display: flex;
		flex-direction: row;
		gap: var(--space-4);
	}

	.footer__redes a {
		display: inline-flex;
		color: color-mix(in oklab, var(--c-white) 85%, transparent) !important;
		text-decoration: none !important;
	}

	.footer__redes a:hover,
	.footer__redes a:focus-visible {
		color: var(--c-accent-400) !important;
	}

	.footer__redes .icono {
		width: 20px;
		height: 20px;
	}

	.footer__legal {
		border-top: 1px solid color-mix(in oklab, var(--c-white) 12%, transparent);
	}

	.footer__legal-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		padding-block: var(--space-4);
	}

	.footer__legal p {
		margin: 0;
		font-size: 13px;
		color: color-mix(in oklab, var(--c-white) 60%, transparent);
		text-align: left;
		max-width: none;
		opacity: .8;
	}

	.footer__legal-dev {
		display: inline-flex;
		flex-shrink: 0;
	}

	.footer__legal-dev-logo {
		display: block;
		height: 25.92px;
		width: auto;
	}
}