/*
 * Footer del tema padre. Todo va dentro de la capa lgd2: el CSS del hijo siempre tiene prioridad.
 * La tipografía no se fija aquí: se hereda de la web.
 */

@layer lgd2 {
	.lgd2-footer {
		background: #111;
		color: #f2f2f2;
		font-size: 0.9375rem;
	}

	.lgd2-footer a {
		color: inherit;
		text-decoration: none;
	}

	.lgd2-footer a:hover {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.lgd2-footer__inner {
		max-width: 80rem;
		margin-inline: auto;
		padding: 3.5rem clamp(1rem, 4vw, 2rem) 1.5rem;
	}

	.lgd2-footer--simple .lgd2-footer__inner {
		padding-block: 1.5rem;
	}

	.lgd2-footer__columnas {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: 2.5rem;
		padding-bottom: 2.5rem;
	}

	/* Cuatro columnas: la del logo, algo más ancha. */
	@media (min-width: 60em) {
		.lgd2-footer--columnas-servicios .lgd2-footer__columnas {
			grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		}
	}

	.lgd2-footer__brand .custom-logo-link,
	.lgd2-footer__logo-link {
		display: inline-block;
	}

	.lgd2-footer__brand img {
		display: block;
		width: auto;
		max-height: 3rem;
	}

	.lgd2-footer__site-title {
		font-size: 1.25rem;
		font-weight: 700;
	}

	.lgd2-footer__texto {
		max-width: 22rem;
		margin: 1rem 0 0;
		opacity: 0.75;
	}

	.lgd2-footer__titulo {
		margin: 0 0 1rem;
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		opacity: 0.6;
	}

	.lgd2-footer__menu {
		display: grid;
		gap: 0.6rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.lgd2-footer .lgd2-datos__etiqueta {
		margin-bottom: 0.125rem;
		font-size: 0.8125rem;
		opacity: 0.6;
	}

	.lgd2-footer__col--contacto .lgd2-redes {
		margin-top: 1.5rem;
	}

	.lgd2-footer .lgd2-redes__link {
		border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
		border-radius: 50%;
		transition: background-color 0.2s, color 0.2s;
	}

	.lgd2-footer .lgd2-redes__link:hover {
		background: #f2f2f2;
		color: #111;
	}

	.lgd2-footer__legal {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem 2rem;
		padding-top: 1.5rem;
		border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
		font-size: 0.875rem;
	}

	.lgd2-footer--simple .lgd2-footer__legal {
		padding-top: 0;
		border-top: 0;
	}

	.lgd2-footer__copyright {
		margin: 0;
		opacity: 0.75;
	}

	.lgd2-footer__legal-derecha {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem 2rem;
		margin-left: auto;
	}

	/*
	 * Menú de la franja inferior centrado en el footer.
	 * En móvil, el menú (y las redes, si las hay) ocupa su propia línea, centrado.
	 * En escritorio: copyright | menú | redes, con el menú en el centro exacto del footer.
	 */
	.lgd2-footer__legal--menu-centrado .lgd2-footer__legal-derecha {
		flex-basis: 100%;
		flex-direction: column;
		margin-left: 0;
	}

	.lgd2-footer__legal--menu-centrado .lgd2-footer__legal-menu {
		justify-content: center;
	}

	@media (min-width: 60em) {
		.lgd2-footer__legal--menu-centrado {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
		}

		.lgd2-footer__legal--menu-centrado .lgd2-footer__legal-derecha {
			display: contents;
		}

		.lgd2-footer__legal--menu-centrado .lgd2-footer__legal-nav {
			grid-column: 2;
		}

		.lgd2-footer__legal--menu-centrado .lgd2-redes {
			grid-column: 3;
			justify-self: end;
		}
	}

	.lgd2-footer__legal-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
}