/*
 * Base del tema padre: accesibilidad y piezas compartidas (datos de contacto y redes).
 * Todo va dentro de la capa lgd2: el CSS del hijo, escrito fuera de capas, siempre tiene prioridad.
 */

@layer lgd2 {
	/*
	 * Texto solo para lectores de pantalla. Única excepción con !important:
	 * dentro de una capa, !important protege la ocultación frente a estilos genéricos del hijo
	 * (por ejemplo, "a { position: relative }") que harían visible el texto.
	 */
	.screen-reader-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* Enlace "Saltar al contenido": solo aparece al llegar a él con el teclado. */
	.lgd2-skip-link:focus {
		position: fixed !important;
		top: 0.75rem;
		left: 0.75rem;
		z-index: 100000;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0.75rem 1.25rem !important;
		overflow: visible !important;
		clip-path: none !important;
		background: #fff;
		color: #1a1a1a;
		font-weight: 600;
		text-decoration: none;
		border-radius: 0.25rem;
		box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.2);
	}

	/* Foco visible solo al navegar con teclado. */
	:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 3px;
	}

	.lgd2-icon {
		display: block;
		flex: none;
	}

	/* Datos de contacto (solo maquetación). */
	.lgd2-datos {
		display: grid;
		gap: 0.75rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.lgd2-datos__item {
		display: flex;
		align-items: flex-start;
		gap: 0.625rem;
	}

	.lgd2-datos__item .lgd2-icon {
		width: 1.125rem;
		height: 1.125rem;
		margin-top: 0.2em;
	}

	.lgd2-datos__valor {
		min-width: 0;
	}

	.lgd2-datos__etiqueta {
		display: block;
	}

	/*
	 * Email como imagen: la imagen se usa como máscara pintada con el color del texto,
	 * así se ve igual de bien en fondos claros y oscuros. La URL y la proporción llegan como variables.
	 */
	.lgd2-email--imagen {
		display: inline-block;
		height: 1.2em;
		max-width: 100%;
		aspect-ratio: var(--lgd2-email-proporcion);
		vertical-align: middle;
		background-color: currentColor;
		-webkit-mask: var(--lgd2-email-imagen) no-repeat left center / contain;
		mask: var(--lgd2-email-imagen) no-repeat left center / contain;
	}

	/* Mapa de Google Maps (lgd2_mapa). */
	.lgd2-mapa {
		position: relative;
		width: 100%;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.lgd2-mapa iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	/* Redes sociales (solo maquetación). */
	.lgd2-redes {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.lgd2-redes__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
	}

	.lgd2-redes__link .lgd2-icon {
		width: 1.125rem;
		height: 1.125rem;
	}
}