/**
 * Estilos de la plantilla "Lead Magnet" (page-lead-magnet.php).
 *
 * Todos los selectores van dentro de .niv-lm para que estos estilos
 * no afecten al resto de la web (header, footer, otras páginas).
 * Solo se encola cuando la página usa la plantilla Lead Magnet.
 */

.niv-lm {
	--lm-navy: #222e50;
	--lm-navy-dark: #1a2440;
	--lm-red: #9e2b3e;
	--lm-red-dark: #832333;
	--lm-grey: #f5f6f8;
	--lm-text: #3d4457;
	--lm-white: #ffffff;
	--lm-radius: 12px;

	font-family: inherit;
	color: var(--lm-text);
	line-height: 1.6;
	/* clip y no hidden: hidden convierte el elemento en contenedor de
	   scroll (overflow-y computa a auto) y rompe el scroll de las anclas */
	overflow-x: clip;
}

.niv-lm .lm-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Hero ---------- */

.niv-lm .lm-hero {
	position: relative;
	background: var(--lm-navy);
	color: var(--lm-white);
	/* El padding superior compensa el header del sitio, que va superpuesto al contenido */
	padding: 170px 0 90px;
	overflow: hidden; /* fallback para navegadores sin soporte de clip */
	overflow: clip;
}

/* Círculos decorativos, como la portada de la guía */
.niv-lm .lm-hero::before,
.niv-lm .lm-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.niv-lm .lm-hero::before {
	width: 520px;
	height: 520px;
	background: var(--lm-red);
	top: -220px;
	right: -160px;
	opacity: 0.85;
}

.niv-lm .lm-hero::after {
	width: 420px;
	height: 420px;
	background: var(--lm-navy-dark);
	bottom: -200px;
	right: 80px;
}

.niv-lm .lm-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 56px;
	align-items: start;
}

.niv-lm .lm-eyebrow {
	display: inline-block;
	background: var(--lm-red);
	color: var(--lm-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.niv-lm .lm-hero__title {
	color: var(--lm-white);
	font-size: clamp(32px, 4.5vw, 48px);
	line-height: 1.15;
	font-weight: 800;
	margin: 0 0 18px;
}

.niv-lm .lm-hero__title span {
	color: #e88a9a;
}

.niv-lm .lm-hero__subtitle {
	font-size: 19px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 28px;
	max-width: 520px;
}

.niv-lm .lm-hero__bullets {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.niv-lm .lm-hero__bullets li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	color: rgba(255, 255, 255, 0.9);
}

.niv-lm .lm-hero__bullets li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background: var(--lm-red);
	color: var(--lm-white);
	border-radius: 50%;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	font-weight: 700;
}

.niv-lm .lm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.niv-lm .lm-chips span {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--lm-white);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 16px;
	border-radius: 999px;
}

/* ---------- Tarjeta del formulario ---------- */

.niv-lm .lm-form-card {
	background: var(--lm-white);
	border-radius: var(--lm-radius);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	padding: 36px 32px;
	/* La tarjeta vive dentro del hero (color blanco); recupera el color de texto normal */
	color: var(--lm-text);
}

.niv-lm .lm-form-card__title {
	color: var(--lm-navy);
	font-size: 24px;
	font-weight: 800;
	margin: 0 0 8px;
}

.niv-lm .lm-form-card__text {
	font-size: 15px;
	margin: 0 0 20px;
}

.niv-lm .lm-form-card__legal {
	font-size: 12px;
	color: #8a8f9e;
	margin: 16px 0 0;
	text-align: center;
}

/* Ajustes suaves sobre el formulario embebido de HubSpot */
.niv-lm .lm-form-card .hs-form-frame {
	min-height: 220px;
}

/* ---------- Secciones ---------- */

.niv-lm .lm-section {
	padding: 72px 0;
	background: var(--lm-white);
}

.niv-lm .lm-section--alt {
	background: var(--lm-grey);
}

.niv-lm .lm-section__title {
	color: var(--lm-navy);
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 800;
	text-align: center;
	margin: 0 0 14px;
}

.niv-lm .lm-section__subtitle {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 44px;
	font-size: 17px;
}

/* ---------- Coste de no automatizar ---------- */

.niv-lm .lm-cost-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.niv-lm .lm-cost-card {
	background: var(--lm-red);
	color: var(--lm-white);
	border-radius: var(--lm-radius);
	padding: 28px 24px;
}

.niv-lm .lm-cost-card h3 {
	color: var(--lm-white);
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 10px;
}

.niv-lm .lm-cost-card p {
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.9);
}

/* ---------- Síntomas ---------- */

.niv-lm .lm-symptoms {
	list-style: none;
	margin: 40px auto 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	max-width: 920px;
}

.niv-lm .lm-symptoms li {
	position: relative;
	background: var(--lm-white);
	border: 1px solid #e4e7ee;
	border-radius: var(--lm-radius);
	padding: 20px 24px 20px 56px;
	font-size: 15px;
}

.niv-lm .lm-symptoms li::before {
	content: "✕";
	position: absolute;
	left: 20px;
	top: 20px;
	width: 24px;
	height: 24px;
	background: var(--lm-red);
	color: var(--lm-white);
	border-radius: 50%;
	font-size: 12px;
	line-height: 24px;
	text-align: center;
	font-weight: 700;
}

.niv-lm .lm-symptoms__closing {
	text-align: center;
	max-width: 640px;
	margin: 36px auto 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--lm-navy);
}

/* ---------- Resultado global ---------- */

.niv-lm .lm-results {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 40px;
}

.niv-lm .lm-result {
	background: var(--lm-red);
	color: var(--lm-white);
	border-radius: var(--lm-radius);
	padding: 26px 20px;
	text-align: left;
}

.niv-lm .lm-result strong {
	display: block;
	font-size: 26px;
	font-weight: 800;
	margin-bottom: 8px;
}

.niv-lm .lm-result span {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.9);
}

/* ---------- Autoridad (cifras) ---------- */

.niv-lm .lm-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 40px;
}

.niv-lm .lm-stat {
	background: var(--lm-navy);
	color: var(--lm-white);
	border-radius: var(--lm-radius);
	padding: 30px 20px;
	text-align: center;
}

.niv-lm .lm-stat strong {
	display: block;
	font-size: 34px;
	font-weight: 800;
	margin-bottom: 6px;
}

.niv-lm .lm-stat span {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}

/* ---------- CTA final ---------- */

.niv-lm .lm-cta {
	text-align: center;
	margin-top: 56px;
}

.niv-lm .lm-cta p {
	font-size: 19px;
	color: var(--lm-navy);
	font-weight: 600;
	margin: 0 0 18px;
}

.niv-lm .lm-cta__btn {
	display: inline-block;
	background: var(--lm-red);
	color: var(--lm-white);
	font-size: 16px;
	font-weight: 700;
	padding: 15px 36px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.niv-lm .lm-cta__btn:hover,
.niv-lm .lm-cta__btn:focus {
	background: var(--lm-red-dark);
	color: var(--lm-white);
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
	.niv-lm .lm-hero__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.niv-lm .lm-results {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 767px) {
	.niv-lm .lm-hero {
		padding: 130px 0 64px;
	}

	.niv-lm .lm-cost-grid {
		grid-template-columns: 1fr;
	}

	.niv-lm .lm-symptoms {
		grid-template-columns: 1fr;
	}

	.niv-lm .lm-stats {
		grid-template-columns: 1fr;
	}

	.niv-lm .lm-form-card {
		padding: 28px 22px;
	}
}

@media (max-width: 479px) {
	.niv-lm .lm-results {
		grid-template-columns: 1fr;
	}
}