/**
 * Páginas legales — privacidad, términos, cookies, habeas data, envíos y PQRS.
 *
 * Son las únicas páginas del sitio que NO se maquetan en Elementor: el contenido
 * vive en `post_content` y sale dentro de `.page-content`. Sin esta hoja quedaban
 * con los estilos base del theme, o sea 20-26 KB de texto legal a todo el ancho
 * del viewport sobre fondo negro — ilegible en desktop y peor en mobile.
 *
 * El objetivo acá no es que se vean "de marca": es que se puedan LEER. Por eso el
 * ancho se limita por medida tipográfica y no por el contenedor del sitio, y el
 * cuerpo va en gris claro en vez de blanco puro, que sobre negro vibra.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Contenedor      → .cr-legal-page .page-content (ancho, aire, color)
 *   §2  Títulos         → h2 / h3 dentro del documento
 *   §3  Párrafos        → medida, interlínea, énfasis
 *   §4  Listas          → ul / ol / li
 *   §5  Enlaces         → subrayado y foco visible
 *   §6  Tablas          → por si algún documento incorpora uma
 *   §7  Responsive      → @media de tamaño + accesibilidad
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS
 *   Tablet      → max-width: 1024px  (baja el padding lateral)
 *   Mobile      → max-width:  767px  (tipografía y aire más compactos)
 *
 *   Más 1 media de accesibilidad (prefers-reduced-motion) en subsección propia
 *   al final de §7.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · CONTENEDOR
   ───────────────────────────────────────────────────────────────────────
   El ancho se limita en `ch` y no en px: lo que cansa al leer no son los
   píxeles sino la cantidad de caracteres por renglón. 72ch cae dentro del
   rango cómodo para texto largo.
   ═══════════════════════════════════════════════════════════════════════ */

body.cr-legal-page .page-content {
	max-width: 72ch;
	margin: 0 auto;
	padding: 64px var(--cr-container-pad, 32px) 96px;
	color: var(--cr-color-text-dim, rgba(255, 255, 255, 0.78));
	font-family: var(--cr-font-body, system-ui, sans-serif);
	font-size: 1rem;
	line-height: 1.75;
}

/* La primera línea de todos los documentos es "Última actualización: …".
   Se despega del resto y baja de jerarquía: es metadato, no contenido. */
body.cr-legal-page .page-content > p:first-child {
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cr-color-gray-800, #2a2a2a);
	color: var(--cr-color-text-muted, #81817f);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · TÍTULOS
   ───────────────────────────────────────────────────────────────────────
   En Montserrat y NO en la display del sitio: Super Brigade es italic-only
   y en mayúsculas, ilegible para encabezados de un documento largo.
   ═══════════════════════════════════════════════════════════════════════ */

body.cr-legal-page .page-content h2 {
	margin: 56px 0 20px;
	color: var(--cr-color-text, #fff);
	font-family: var(--cr-font-body, system-ui, sans-serif);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Regla roja corta arriba de cada sección: da ritmo al recorrer el documento
   sin necesidad de un índice. */
body.cr-legal-page .page-content h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-bottom: 16px;
	background-color: var(--cr-color-primary, #c00000);
}

body.cr-legal-page .page-content h2:first-of-type {
	margin-top: 0;
}

body.cr-legal-page .page-content h3 {
	margin: 36px 0 14px;
	color: var(--cr-color-text, #fff);
	font-family: var(--cr-font-body, system-ui, sans-serif);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · PÁRRAFOS
   ═══════════════════════════════════════════════════════════════════════ */

body.cr-legal-page .page-content p {
	margin: 0 0 20px;
}

body.cr-legal-page .page-content strong {
	color: var(--cr-color-text, #fff);
	font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · LISTAS
   ═══════════════════════════════════════════════════════════════════════ */

body.cr-legal-page .page-content ul,
body.cr-legal-page .page-content ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

body.cr-legal-page .page-content li {
	margin-bottom: 10px;
	padding-left: 4px;
}

body.cr-legal-page .page-content li::marker {
	color: var(--cr-color-primary, #c00000);
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · ENLACES
   ───────────────────────────────────────────────────────────────────────
   Subrayados a propósito: en un documento legal el enlace tiene que
   distinguirse por algo más que el color, que es requisito de accesibilidad.
   ═══════════════════════════════════════════════════════════════════════ */

body.cr-legal-page .page-content a {
	color: var(--cr-color-primary-hover, #e60000);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--cr-transition-fast, 150ms ease);
	overflow-wrap: anywhere;
}

body.cr-legal-page .page-content a:hover {
	color: var(--cr-color-text, #fff);
}

body.cr-legal-page .page-content a:focus-visible {
	outline: 2px solid var(--cr-color-primary-hover, #e60000);
	outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · TABLAS
   ═══════════════════════════════════════════════════════════════════════ */

body.cr-legal-page .page-content table {
	display: block;
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	overflow-x: auto;
	font-size: 0.9375rem;
}

body.cr-legal-page .page-content th,
body.cr-legal-page .page-content td {
	padding: 10px 14px;
	border: 1px solid var(--cr-color-gray-800, #2a2a2a);
	text-align: left;
	vertical-align: top;
}

body.cr-legal-page .page-content th {
	background-color: var(--cr-color-darker, #0f0f0f);
	color: var(--cr-color-text, #fff);
	font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────── TABLET · max-width: 1024px ─────────────────────── */
@media (max-width: 1024px) {

	/* §1 · Menos aire vertical: en pantallas más chicas el padding grande
	   empuja el contenido debajo del pliegue sin aportar nada. */
	body.cr-legal-page .page-content {
		padding: 48px 24px 72px;
	}
}


/* ───────────────────── MOBILE · max-width: 767px ──────────────────────── */
@media (max-width: 767px) {

	/* §1 · El límite en ch deja de mandar (la pantalla es más angosta), así
	   que lo que se ajusta es el aire y el tamaño base. */
	body.cr-legal-page .page-content {
		padding: 36px 20px 64px;
		font-size: 0.9375rem;
		line-height: 1.7;
	}

	/* §2 · Encabezados más compactos, pero sin perder la jerarquía. */
	body.cr-legal-page .page-content h2 {
		margin-top: 44px;
		font-size: 1.1875rem;
	}

	body.cr-legal-page .page-content h3 {
		margin-top: 28px;
		font-size: 1rem;
	}

	/* §4 · Sangría menor: en 360px de ancho, 24px de padding se comen la
	   medida del renglón. */
	body.cr-legal-page .page-content ul,
	body.cr-legal-page .page-content ol {
		padding-left: 20px;
	}
}


/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {

	body.cr-legal-page .page-content a {
		transition: none;
	}
}