/* ══════════════════════════════════════════════════════════════════════════
   PÁGINAS DE TEXTO LARGO (avisos legales, condiciones, envíos)

   Estas páginas salían con la plantilla de respaldo: un h1 gigante —el mismo
   tamaño que el titular de la portada— y el contenido en un <div> pelado, sin
   medida de lectura, sin jerarquía y con las tablas saliéndose por el lado en
   el teléfono.

   Nadie lee un aviso legal por gusto. Lo consulta buscando un dato concreto:
   el plazo de devolución, quién paga el porte, qué cookie hace qué. Así que lo
   que importa aquí es poder BARRER el texto: encabezados que se distingan de
   un vistazo y líneas que no obliguen a recorrer media pantalla.
   ══════════════════════════════════════════════════════════════════════════ */

.zihouse-legal {
	/* 68ch es la medida de lectura cómoda. Sin esto, en un portátil ancho la
	   línea llega a 150 caracteres y el ojo pierde el renglón al volver. */
	max-width: 68ch;
	margin-inline: auto;
}

.zihouse-legal__title {
	/* El h1 heredaba --zihouse-text-hero, pensado para la portada. Aquí es el
	   título de un documento, no un reclamo. */
	font-size: var(--zihouse-text-3xl);
	margin-bottom: var(--zihouse-space-xs);
}

.zihouse-legal__fecha {
	display: block;
	margin-bottom: var(--zihouse-space-xl);
	font-size: var(--zihouse-text-xs);
	letter-spacing: var(--zihouse-tracking-wide);
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
}

.zihouse-legal__body > h2 {
	font-size: var(--zihouse-text-xl);
	/* Un encabezado pertenece al texto que viene DESPUÉS: mucho aire arriba,
	   poco abajo. Con el mismo margen a ambos lados queda flotando entre dos
	   bloques y no se sabe de cuál es. */
	margin-top: var(--zihouse-space-xl);
	margin-bottom: var(--zihouse-space-xs);
	padding-top: var(--zihouse-space-sm);
	border-top: 1px solid var(--zihouse-color-border);
}

.zihouse-legal__body > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.zihouse-legal__body > h3 {
	font-size: var(--zihouse-text-lg);
	margin-top: var(--zihouse-space-md);
	margin-bottom: var(--zihouse-space-2xs);
}

.zihouse-legal__body p {
	max-width: none;
	line-height: 1.65;
	color: var(--zihouse-color-ink);
}

.zihouse-legal__body ul {
	margin: 0 0 var(--zihouse-space-sm);
	padding-left: 1.1em;
	line-height: 1.65;
}

.zihouse-legal__body li { margin-bottom: var(--zihouse-space-2xs); }

.zihouse-legal__body a { text-decoration-color: currentColor; }

.zihouse-legal__body code {
	font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
	font-size: 0.92em;
	/* Los nombres de cookie son largos y no tienen espacios: sin esto rompen
	   la caja de la celda en un teléfono. */
	overflow-wrap: anywhere;
	color: var(--zihouse-color-ink);
}

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.zihouse-legal__body figure.wp-block-table { margin: 0 0 var(--zihouse-space-md); }

.zihouse-legal__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--zihouse-text-sm);
	line-height: 1.5;
}

.zihouse-legal__body th,
.zihouse-legal__body td {
	padding: 0.7em 0.8em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--zihouse-color-border);
}

.zihouse-legal__body th {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-xs);
	font-weight: 600;
	letter-spacing: var(--zihouse-tracking-wide);
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
	border-bottom-color: var(--zihouse-color-ink);
}

/* En el teléfono, una tabla de cuatro columnas mide 490 px sobre 390 de
   pantalla: hay que arrastrarla de lado para leer la última columna, y la
   cabecera se pierde en cuanto empiezas a moverla. Aquí cada fila pasa a ser
   una ficha y cada dato lleva su etiqueta delante, tomada de data-label. */
@media (max-width: 40rem) {
	.zihouse-legal__body table,
	.zihouse-legal__body tbody,
	.zihouse-legal__body tr,
	.zihouse-legal__body td { display: block; width: 100%; }

	.zihouse-legal__body thead { display: none; }

	.zihouse-legal__body tr {
		padding: var(--zihouse-space-sm) 0;
		border-bottom: 1px solid var(--zihouse-color-border);
	}

	.zihouse-legal__body td {
		padding: 0 0 var(--zihouse-space-2xs);
		border: 0;
	}

	.zihouse-legal__body td:last-child { padding-bottom: 0; }

	.zihouse-legal__body td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.15em;
		font-size: var(--zihouse-text-xs);
		font-weight: 600;
		letter-spacing: var(--zihouse-tracking-wide);
		text-transform: uppercase;
		color: var(--zihouse-color-ink-muted);
	}
}