/**
 * Páginas legales (términos, privacidad, reembolsos) y la casilla de términos del registro.
 *
 * Un texto legal se lee de corrido y mucha gente lo va a abrir desde el teléfono: columna de
 * ~70 caracteres, letra de 17 px con interlínea amplia y secciones numeradas que coinciden
 * con el índice de arriba (los números los pone CSS, así nunca se desordenan al agregar una).
 */

/* -------------------------------------------------------------------------
 * Columna de lectura
 * ---------------------------------------------------------------------- */

.rm-legal {
	max-width: 70ch;
	margin: 0 auto;
	padding: 40px 0 64px;
	color: var( --rm-tinta );
	font-size: 17px;
	line-height: 1.65;
	counter-reset: rm-legal-seccion;
}

.rm-legal__cabecera {
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var( --rm-linea );
}

/* `.rm-legal` delante: el kit de Elementor pinta h1–h3 con `.elementor-kit-5 hN`. */
.rm-legal .rm-legal__titulo {
	margin: 0 0 10px;
	color: var( --rm-acero );
	font-size: clamp( 32px, 6vw, 44px );
	font-weight: 800;
	font-stretch: 82%;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: none;
}

.rm-legal .rm-legal__fecha {
	margin: 0;
	color: var( --rm-gris );
	font-size: 15px;
}

.rm-legal .rm-aviso-borrador {
	margin: 0 0 28px;
}

/* -------------------------------------------------------------------------
 * Índice
 * ---------------------------------------------------------------------- */

.rm-legal__indice {
	margin: 0 0 40px;
	padding: 18px 22px 16px;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background: var( --rm-hormigon );
}

.rm-legal .rm-legal__indice-titulo {
	margin: 0 0 8px;
	color: var( --rm-tinta );
	font-size: 16px;
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1.3;
	text-transform: none;
}

.rm-legal__indice ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rm-legal-indice;
	font-size: 15px;
	line-height: 1.45;
}

.rm-legal__indice li {
	margin: 0;
	padding: 3px 0 3px 2em;
	text-indent: -2em;
	counter-increment: rm-legal-indice;
}

.rm-legal__indice li::before {
	content: counter( rm-legal-indice ) ".";
	display: inline-block;
	width: 2em;
	text-indent: 0;
	color: var( --rm-gris );
	font-variant-numeric: tabular-nums;
}

/* Dos columnas cuando la línea da para eso: el índice de los términos tiene trece entradas. */
@media ( min-width: 720px ) {
	.rm-legal__indice ol {
		columns: 2;
		column-gap: 28px;
	}

	.rm-legal__indice li {
		break-inside: avoid;
	}
}

/* -------------------------------------------------------------------------
 * Texto
 * ---------------------------------------------------------------------- */

.rm-legal .rm-legal__cuerpo h2 {
	margin: 44px 0 12px;
	color: var( --rm-acero );
	font-size: 24px;
	font-weight: 750;
	line-height: 1.2;
	text-transform: none;
	/* La cabecera del sitio queda fija arriba: sin esto, el enlace del índice deja el título
	   escondido debajo de ella. */
	scroll-margin-top: 96px;
	counter-increment: rm-legal-seccion;
}

.rm-legal .rm-legal__cuerpo h2::before {
	content: counter( rm-legal-seccion ) ". ";
	font-variant-numeric: tabular-nums;
}

.rm-legal .rm-legal__cuerpo h3 {
	margin: 28px 0 8px;
	color: var( --rm-tinta );
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

/*
 * Texto justificado (pedido del dueño). La división en sílabas (`hyphens`, con el idioma de
 * la página) evita los huecos grandes entre palabras que deja el justificado en líneas
 * cortas, sobre todo en el teléfono. Los títulos, el índice y las tablas siguen alineados a
 * la izquierda.
 */
.rm-legal .rm-legal__cuerpo :is( p, li ) {
	color: var( --rm-tinta );
	font-size: 17px;
	line-height: 1.65;
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.rm-legal .rm-legal__cuerpo p {
	margin: 0 0 16px;
}

.rm-legal .rm-legal__cuerpo :is( ul, ol ) {
	margin: 0 0 18px;
	padding-left: 1.4em;
}

.rm-legal .rm-legal__cuerpo li {
	margin: 0 0 8px;
}

.rm-legal .rm-legal__cuerpo li::marker {
	color: var( --rm-gris );
}

.rm-legal .rm-legal__cuerpo strong {
	font-weight: 700;
}

/* Enlaces subrayados en el azul del sitio: dentro de un texto largo, un enlace tiene que
   reconocerse sin depender solo del color. */
.rm-legal a {
	color: var( --rm-acero );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.rm-legal a:hover {
	color: var( --rm-acero );
	text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------------------
 * Tablas (planes y cookies)
 * ---------------------------------------------------------------------- */

.rm-legal__tabla-envoltura,
.rm-legal .wp-block-table {
	margin: 8px 0 24px;
	overflow-x: auto;
}

.rm-legal table {
	width: 100%;
	margin: 0;
	border: 1px solid var( --rm-linea );
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

.rm-legal caption {
	padding: 0 0 8px;
	color: var( --rm-gris );
	font-size: 14px;
	text-align: left;
	caption-side: top;
}

.rm-legal :is( th, td ) {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var( --rm-linea );
	color: var( --rm-tinta );
	text-align: left;
	vertical-align: top;
}

.rm-legal thead :is( th, td ) {
	background: var( --rm-hormigon );
	font-weight: 700;
}

.rm-legal tbody th {
	font-weight: 600;
}

.rm-legal .wp-block-table code {
	padding: 0;
	background: none;
	color: var( --rm-tinta );
	font-size: 14px;
	word-break: break-word;
}

/* -------------------------------------------------------------------------
 * Teléfono
 * ---------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.rm-legal {
		padding: 24px 0 48px;
		font-size: 16px;
	}

	.rm-legal .rm-legal__cuerpo :is( p, li ) {
		font-size: 16px;
	}

	.rm-legal .rm-legal__cuerpo h2 {
		margin-top: 36px;
		font-size: 21px;
	}

	.rm-legal__indice {
		padding: 14px 16px 12px;
	}

	.rm-legal table {
		font-size: 14px;
	}

	.rm-legal :is( th, td ) {
		padding: 8px;
	}
}

/* -------------------------------------------------------------------------
 * Casilla de términos del formulario de registro
 *
 * El kit de Elementor pinta todo <label> con el color de fondo de Motors (blanco), y el
 * formulario de registro es blanco: la frase «Acepto los términos y condiciones» no se veía.
 * Tres clases de especificidad le ganan a `.elementor-kit-5 label`.
 * ---------------------------------------------------------------------- */

.stm-login-register-form .stm-register-form .form-checker label,
.stm-login-register-form .stm-register-form .form-checker label span {
	color: var( --rm-tinta );
}

.stm-login-register-form .stm-register-form .form-checker label a {
	color: var( --rm-acero );
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* El inicio de sesión va sobre el panel azul: ahí la etiqueta («Recordarme») sí es blanca,
   pase lo que pase con la regla global del kit. */
.stm-login-register-form .stm-login-form .form-checker label,
.stm-login-register-form .stm-login-form .form-checker label span {
	color: #fff;
}

.stm-register-form .rm-legal-nota {
	clear: both;
	margin: 14px 0 0;
	color: var( --rm-gris );
	font-size: 14px;
	line-height: 1.5;
}

.stm-register-form .rm-legal-nota a {
	color: var( --rm-acero );
	text-decoration: underline;
	text-underline-offset: 3px;
}