/*!
 * Archivo del Desierto — páginas legales
 *
 * Sólo se carga en las cuatro rutas legales, como el mapa o el álbum cargan la suya.
 *
 * Un texto legal se consulta más de lo que se lee, y quien lo consulta aquí ronda los ochenta
 * años. Todo lo de abajo sale de esas dos frases: una medida corta de verdad, un índice fijo a
 * la izquierda en cuanto hay sitio, y las obligaciones sacadas del párrafo a listas de
 * definición y a tablas, donde se ven de un vistazo en vez de haber que buscarlas dentro de un
 * bloque de prosa.
 */

@layer pages {

	.legal {
		/* La medida de lectura, no la del sitio: 66 caracteres. Un párrafo legal a todo lo
		   ancho de 108rem es ilegible por mucho cuerpo que se le ponga. */
		--legal-measure: 66ch;
	}

	/*
	 * `--accent-text` está calibrado para fondo claro y aquí cae sobre la cabecera oscura: medía
	 * 3,29:1. `--color-brass` es lo que el sitio ya usa para el texto pequeño sobre el intro
	 * oscuro —ver `.page-intro .eyebrow`— y es la misma familia de color.
	 */
	.legal__updated {
		margin-block: 1rem 0;
		font-family: var(--font-mono);
		font-size: 0.75rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--color-brass);
	}

	.legal__body { max-width: var(--legal-measure); }

	.legal__section { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }

	.legal__section:first-child { margin-block-start: 0; }

	/* Espacio por encima del ancla, para que al saltar desde el índice el título no quede
	   escondido bajo la barra fija. */
	.legal__section { scroll-margin-block-start: 7rem; }

	.legal__heading {
		margin: 0 0 1rem;
		font-family: var(--font-display);
		font-size: clamp(1.4rem, 2.6vw, 1.8rem);
		font-weight: 600;
		line-height: 1.2;
		color: var(--color-ink);
	}

	.legal__heading::after {
		content: "";
		display: block;
		width: 3rem;
		height: 2px;
		margin-block-start: 0.7rem;
		background-color: var(--color-brass);
	}

	.legal__subheading {
		margin: 2rem 0 0.75rem;
		font-family: var(--font-display);
		font-size: 1.1rem;
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-ink);
	}

	.legal__p {
		margin: 0 0 1.1rem;
		font-size: 1rem;      /* = 19px del tema. No se baja. */
		line-height: 1.7;
		color: var(--color-charcoal);
	}

	.legal__p:last-child { margin-bottom: 0; }

	/* Lo que hay que leer aunque no se lea nada más. */
	.legal__note {
		margin: 0 0 1.25rem;
		padding: clamp(1rem, 2.2vw, 1.4rem);
		font-size: 1.0625rem;
		line-height: 1.65;
		color: var(--color-ink);
		background-color: var(--color-paper-warm);
		border-inline-start: 3px solid var(--color-brass);
		border-radius: 0 var(--radius-m) var(--radius-m) 0;
	}

	.legal__list {
		margin: 0 0 1.25rem;
		padding-inline-start: 1.3rem;
		font-size: 1rem;
		line-height: 1.65;
		color: var(--color-charcoal);
	}

	.legal__list li { margin-block-end: 0.6rem; }

	.legal__list li::marker { color: var(--color-brass); }

	/* ── Listas de definición: finalidad, base jurídica, plazo ──────────── */

	.legal__dl,
	.legal__identity {
		display: grid;
		grid-template-columns: minmax(9rem, 14rem) 1fr;
		gap: 0.55rem 1.25rem;
		margin: 0 0 1.5rem;
		padding: clamp(0.9rem, 2vw, 1.25rem);
		background-color: color-mix(in oklab, var(--color-sand) 22%, transparent);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-m);
	}

	.legal__dl dt,
	.legal__identity dt {
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
		line-height: 1.6;
		color: var(--accent-text);
	}

	.legal__dl dd,
	.legal__identity dd {
		margin: 0;
		font-size: 0.9375rem;
		line-height: 1.6;
		color: var(--color-ink);
	}

	/* Un hueco que se ve. Ver legal_pending(). */
	.legal__identity-pending {
		font-style: italic;
		color: var(--color-blood-earth);
	}

	.legal__pending {
		margin: -0.75rem 0 1.5rem;
		font-size: 0.875rem;
		line-height: 1.6;
		color: var(--color-blood-earth);
	}

	@media (max-width: 34em) {
		/* A una columna: en pantalla estrecha, dos columnas dejan la etiqueta en tres líneas. */
		.legal__dl,
		.legal__identity { grid-template-columns: 1fr; gap: 0.15rem 0; }

		.legal__dl dd,
		.legal__identity dd { margin-block-end: 0.9rem; }
	}

	/* ── Índice ─────────────────────────────────────────────────────────── */

	.legal__toc {
		margin-block-end: clamp(2rem, 4vw, 3rem);
		padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.6rem);
		background-color: var(--color-paper-warm);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-m);
	}

	.legal__toc-title {
		margin: 0 0 0.6rem;
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
		color: var(--accent-text);
	}

	.legal__toc-list {
		margin: 0;
		padding-inline-start: 1.3rem;
		font-size: 0.9375rem;
		line-height: 1.5;
		color: var(--color-charcoal);
	}

	.legal__toc-list li::marker {
		font-family: var(--font-mono);
		font-size: 0.75rem;
		color: var(--color-brass);
	}

	/*
	 * El índice es una lista de destinos, no enlaces sueltos dentro de una frase, así que la
	 * excepción de WCAG 2.5.8 para enlaces en línea no le vale: cada uno tiene que poder
	 * pulsarse. En cuerpo de texto medían 21 px de alto. Ahora el enlace es de bloque y la
	 * altura la pone él, no la línea de texto.
	 */
	.legal__toc-list a {
		display: block;
		min-height: 44px;
		padding-block: 0.6rem;
		color: var(--color-ink);
	}

	/* Sin margen entre elementos: los bloques ya se tocan, y un hueco entre dos destinos
	   contiguos es superficie donde el dedo no acierta nada. */
	.legal__toc-list li + li { border-block-start: 1px solid var(--color-border); }

	/* En cuanto hay sitio, el índice se va al margen y se queda ahí mientras se lee. */
	@media (min-width: 68em) {
		.legal .shell {
			display: grid;
			grid-template-columns: 17rem minmax(0, 1fr);
			gap: clamp(2rem, 5vw, 4.5rem);
			align-items: start;
		}

		.legal__toc {
			position: sticky;
			inset-block-start: 7rem;
			margin-block-end: 0;
		}

		.legal__body { max-width: var(--legal-measure); }
	}

	/* ── Tabla de cookies ───────────────────────────────────────────────── */

	.legal__cookie-group { margin-block-end: 2rem; }

	/*
	 * La tabla se desplaza dentro de su caja; la página nunca. `tabindex` en el contenedor
	 * porque una región desplazable a la que sólo se llega con el ratón no se puede leer con
	 * teclado, y la tabla de cookies es justo la que hay que poder leer entera.
	 */
	.legal__table-scroll {
		overflow-x: auto;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-m);
	}

	.legal__table-scroll:focus-visible {
		outline: 2px solid var(--color-brass);
		outline-offset: 2px;
	}

	.legal__table {
		width: 100%;
		min-width: 44rem;
		border-collapse: collapse;
		font-size: 0.875rem;
		line-height: 1.55;
	}

	.legal__table th,
	.legal__table td {
		padding: 0.7rem 0.9rem;
		text-align: start;
		vertical-align: top;
		border-block-end: 1px solid var(--color-border);
	}

	.legal__table thead th {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		font-weight: 500;
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
		color: var(--accent-text);
		background-color: var(--color-paper-warm);
		white-space: nowrap;
	}

	.legal__table tbody th {
		font-weight: 400;
		white-space: nowrap;
	}

	.legal__table tbody th code {
		font-family: var(--font-mono);
		font-size: 0.8125rem;
		color: var(--color-ink);
	}

	.legal__table td { color: var(--color-charcoal); }

	.legal__table tbody tr:last-child th,
	.legal__table tbody tr:last-child td { border-block-end: 0; }

	/* ── Encargados del tratamiento ─────────────────────────────────────── */

	.legal__processors {
		display: grid;
		gap: 1rem;
		margin: 0 0 1.5rem;
		padding: 0;
		list-style: none;
	}

	.legal__processor {
		padding: clamp(0.9rem, 2vw, 1.25rem);
		background-color: var(--color-paper-warm);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-m);
	}

	.legal__processor-name {
		margin: 0;
		font-family: var(--font-display);
		font-size: 1.0625rem;
		font-weight: 600;
		color: var(--color-ink);
	}

	.legal__processor-role {
		margin: 0.15rem 0 0.5rem;
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
		color: var(--accent-text);
	}

	.legal__processor-detail {
		margin: 0;
		font-size: 0.9375rem;
		line-height: 1.6;
		color: var(--color-charcoal);
	}

	.legal__consent { margin: 0 0 1.25rem; }

	/* ── Cierre ─────────────────────────────────────────────────────────── */

	.legal__aside {
		margin-block-start: clamp(3rem, 6vw, 4.5rem);
		padding-block-start: clamp(1.5rem, 3vw, 2rem);
		border-block-start: 1px solid var(--color-border);
	}

	.legal__aside-title {
		margin: 0 0 0.7rem;
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
		color: var(--accent-text);
	}

	.legal__aside-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.5rem;
		margin: 0 0 1.25rem;
		padding: 0;
		list-style: none;
		font-size: 0.9375rem;
	}

	/* Mismo motivo que en el índice: son destinos, y hay que poder darles. */
	.legal__aside-list a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.legal__aside-note {
		margin: 0;
		font-size: 0.9375rem;
		line-height: 1.6;
		color: var(--color-charcoal);
	}
}