/**
 * JL Forense — tokens de diseño y estilos base de los widgets propios.
 *
 * Los tokens replican los del template original (assets/css/style.css :root).
 * Todo lo que Elementor puede resolver de forma nativa se controla desde el Kit
 * Global; aquí sólo vive lo que los widgets propios necesitan.
 */

:root {
	--jlf-primary: #5153ed;
	--jlf-secondary: #3e40c4;
	--jlf-accent: #9b9dfa;
	--jlf-body: #5f6478;
	--jlf-heading: #1b1d33;
	--jlf-title: #12132a;
	--jlf-white: #fff;
	--jlf-border: #e6e8f2;
	--jlf-light: #f5f6fa;
	--jlf-radius: 15px;
	--jlf-transition: 0.3s;
	--jlf-font-heading: "Red Hat Display", sans-serif;
	--jlf-font-body: "DM Sans", sans-serif;
}

/* ---------------------------------------------------------------------------
 * Título de sección (widget jlf-section-title)
 * Replica .title-style-two: palabra fantasma perfilada + antetítulo + título.
 * -------------------------------------------------------------------------*/

.jlf-section-title {
	position: relative;
	z-index: 1;
}

.jlf-section-title__ghost {
	position: absolute;
	top: -65px;
	left: -90px;
	z-index: -1;
	min-width: max-content;
	color: transparent;
	font-family: var(--jlf-font-heading);
	font-size: 150px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: rgba(0, 0, 0, 0.1);
	pointer-events: none;
	user-select: none;

	/*
	 * El difuminado se hace con máscara, no con una capa de color encima.
	 *
	 * Antes era un degradado a blanco superpuesto: se fundía bien sobre fondo
	 * blanco, pero sobre los fondos grises del sitio (#F5F6FA) dibujaba un
	 * rectángulo claro con el borde a la vista. Al enmascarar, lo que se
	 * desvanece es el propio trazo, hacia transparente, así que sirve para
	 * cualquier fondo —y hace innecesaria la variante para fondo oscuro.
	 *
	 * Las opacidades son el complemento de las del degradado anterior
	 * (1 − 0,885 y 1 − 0,608), para conservar exactamente el mismo difuminado.
	 */
	-webkit-mask-image: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.115) 0%,
		rgba(0, 0, 0, 0.392) 35%,
		rgba(0, 0, 0, 1) 100%
	);
	mask-image: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.115) 0%,
		rgba(0, 0, 0, 0.392) 35%,
		rgba(0, 0, 0, 1) 100%
	);
}

.jlf-section-title__pre {
	display: flex;
	margin-bottom: 22px;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1.2;
	text-transform: uppercase;
}

.jlf-section-title__title {
	margin: 0;
	color: var(--jlf-heading);
	font-family: var(--jlf-font-heading);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.35;
}

.jlf-section-title--center {
	text-align: center;
}

.jlf-section-title--center .jlf-section-title__pre {
	justify-content: center;
}

.jlf-section-title--center .jlf-section-title__ghost {
	left: 50%;
	transform: translateX(-50%);
}

/* El fantasma se apoya en un tono claro; sobre fondo oscuro se invierte. */
.jlf-section-title--light .jlf-section-title__title {
	color: var(--jlf-white);
}

.jlf-section-title--light .jlf-section-title__pre {
	color: var(--jlf-white);
}

.jlf-section-title--light .jlf-section-title__ghost {
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 1599px) {
	.jlf-section-title__title {
		font-size: 36px;
	}
}

@media (max-width: 1199px) {
	.jlf-section-title__title {
		font-size: 32px;
	}
	.jlf-section-title__ghost {
		font-size: 120px;
		top: -50px;
		left: -50px;
	}
}

@media (max-width: 767px) {
	.jlf-section-title__title {
		font-size: 26px;
	}
	.jlf-section-title__pre {
		margin-bottom: 16px;
		font-size: 14px;
		letter-spacing: 1.5px;
	}
	.jlf-section-title__ghost {
		font-size: 100px;
		top: -40px;
		left: -20px;
	}
}

/* ---------------------------------------------------------------------------
 * Contenido de la entrada de blog
 *
 * Elementor imprime el contenido tal cual lo devuelve WordPress y no ofrece
 * control de separación entre párrafos. El ritmo vertical se ajusta aquí al
 * del diseño original (40 px entre bloques de texto).
 * -------------------------------------------------------------------------*/

.elementor-widget-theme-post-content > p,
.elementor-widget-theme-post-content > ul,
.elementor-widget-theme-post-content > ol {
	margin-bottom: 40px;
}

.elementor-widget-theme-post-content > ul,
.elementor-widget-theme-post-content > ol {
	padding-left: 22px;
}

.elementor-widget-theme-post-content li {
	margin-bottom: 10px;
}

.elementor-widget-theme-post-content > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.elementor-widget-theme-post-content > p,
	.elementor-widget-theme-post-content > ul,
	.elementor-widget-theme-post-content > ol {
		margin-bottom: 26px;
	}
}