/* ==========================================================================
   NL Group Consulting — Home
   Paleta y tipografia tomadas del diseno original. Todo cuelga de .nl-home
   para no filtrar estilos al resto del sitio ni pelear con el theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

.nl-home {
	/* --- Colores de marca (Manual Editorial Noelia Lerda) --------------- */
	--nl-verde:  #556b4f; /* criterio, aprendizaje, evolucion */
	--nl-verde-2:#6d7f5a;
	--nl-arena:  #c8a97e; /* calma, naturalidad */
	--nl-marfil: #f2efe7; /* claridad, minimalismo */
	--nl-marfil-rgb: 242, 239, 231; /* para los velos con alpha */
	--nl-carbon: #2b2b2b; /* profundidad, contraste */

	/* --- Derivados de uso ---------------------------------------------- */
	/* Los verdes profundos no estan en el manual: salen del diseno de la home,
	   que usa el verde de marca oscurecido para los fondos grandes. */
	--nl-cream:      var(--nl-marfil); /* fondo principal */
	--nl-cream-soft: #fcfbf5;          /* tarjetas y bloques claros */
	--nl-sand:       #f2e9d9;          /* beige de acento, circulos de iconos */
	--nl-sand-warm:  #f1e6d9;          /* beige rosado del centro del diagrama */
	--nl-line:       #dbd2c6;          /* bordes y divisores */
	--nl-card:       #ece8de;          /* fondo de tarjeta sobre marfil */
	--nl-ghost:      #e3dcce;          /* numeros grandes de fondo */
	--nl-green:      #354229;          /* bloques y boton primario */
	--nl-green-deep: #26331c;          /* secciones oscuras */
	--nl-gold:       var(--nl-arena);  /* acento */
	--nl-gold-deep:  #ae8e6b;          /* arena oscurecida: bordes y lineas finas */
	--nl-gold-soft:  #bea687;
	--nl-ink:        var(--nl-carbon); /* texto principal */
	--nl-ink-soft:   #55564f;          /* texto secundario */

	/* --- Tipografia ----------------------------------------------------- */
	--nl-font-display: 'Cinzel', 'Playfair Display', Georgia, serif;             /* wordmark */
	--nl-font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;    /* titulos */
	--nl-font-sans:    'Montserrat', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Medidas */
	--nl-max:    1440px;
	--nl-gutter: clamp(20px, 5vw, 72px);

	/* Cuanto tapa el header fijo del theme. nl-home.js lo mide y lo pisa con
	   el valor real; este es el fallback por si el JS no llega a correr. */
	--nl-header-h: 96px;

	/* El theme es "boxed" y deja franjas grises a los costados en pantallas
	   anchas. nl-home.js estira la home a todo el ancho; esto es la red de
	   seguridad para que, si no puede, las franjas sean del color de la marca
	   en vez de gris. */
	background-color: var(--nl-marfil);
}

/* Pagina sola (NL_HOME_USE_THEME_HEADER en false): no hay header del theme
   que tape nada, asi que el fallback de arriba no aplica. Sin esto, mientras
   carga el JS se ve un hueco vacio de 96px al principio del hero. */
.nl-home.nl-home--standalone {
	--nl-header-h: 0px;
}

/* --------------------------------------------------------------------------
   2. Base

   REGLA IMPORTANTE para las secciones que faltan: todo elemento de texto lleva
   su `color` explicito, aunque el contenedor ya tenga el color correcto.
   Heredar no alcanza: en CSS la herencia pierde contra cualquier declaracion
   directa, asi que un `h2 { color: #333 }` del theme le gana al color heredado
   del padre por especifico que sea el selector de ese padre. Pasa sobre todo
   en las secciones oscuras, donde el titulo sale negro sobre verde.
   -------------------------------------------------------------------------- */

.nl-home .nl-home-main {
	background: var(--nl-cream);
	color: var(--nl-ink);
	font-family: var(--nl-font-sans);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: clip;
}

.nl-home .nl-home-main *,
.nl-home .nl-home-main *::before,
.nl-home .nl-home-main *::after {
	box-sizing: border-box;
}

/* Reset envuelto en :where() para que su especificidad sea cero. Sin eso,
   `.nl-home .nl-home-main h2` (dos clases + elemento) le gana a las reglas de
   seccion (dos clases) y anula cualquier margin-bottom de los titulos. */
:where(.nl-home .nl-home-main) :where(p, h1, h2, h3, ol, ul, figure) {
	margin: 0;
	padding: 0;
}

.nl-home .nl-home-main img {
	max-width: 100%;
	height: auto;
}

.nl-home .nl-container {
	width: 100%;
	max-width: var(--nl-max);
	margin-inline: auto;
	padding-inline: var(--nl-gutter);
}

/* Antetitulo: una linea corta arriba y mayusculas con tracking amplio. */
.nl-home .nl-eyebrow {
	margin: 0 0 clamp(20px, 2.4vw, 30px);
	color: var(--nl-ink);
	font-size: clamp(0.64rem, 0.8vw, 0.76rem);
	font-weight: 500;
	letter-spacing: 0.24em;
	line-height: 1.4;
	text-transform: uppercase;
}

.nl-home .nl-eyebrow::before {
	display: block;
	width: 36px;
	height: 1px;
	margin-bottom: 20px;
	background: var(--nl-carbon);
	content: '';
}

/* --------------------------------------------------------------------------
   3. Botones
   -------------------------------------------------------------------------- */

.nl-home .nl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 17px 34px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--nl-font-serif);
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.nl-home .nl-btn__arrow {
	font-family: var(--nl-font-sans);
	transition: transform 0.25s ease;
}

.nl-home .nl-btn--solid {
	background: var(--nl-green);
	color: var(--nl-cream);
}

.nl-home .nl-btn--solid:hover,
.nl-home .nl-btn--solid:focus-visible {
	background: var(--nl-green-deep);
	color: var(--nl-cream);
}

.nl-home .nl-btn--solid:hover .nl-btn__arrow {
	transform: translateX(4px);
}

.nl-home .nl-btn--ghost {
	border-color: var(--nl-gold-deep);
	color: var(--nl-ink);
}

.nl-home .nl-btn--ghost:hover,
.nl-home .nl-btn--ghost:focus-visible {
	background: var(--nl-sand);
	color: var(--nl-ink);
}

.nl-home .nl-btn--ghost:hover .nl-btn__arrow {
	transform: translateY(3px);
}

/* --------------------------------------------------------------------------
   4. Seccion 01 — Hero
   -------------------------------------------------------------------------- */

.nl-home .nl-hero {
	position: relative;
	padding-block: calc(var(--nl-header-h) + clamp(40px, 5vw, 72px)) clamp(64px, 8vw, 110px);
	background: var(--nl-cream);
	overflow: hidden;
}

/* La foto de ambiente cubre todo el bloque y se apaga hacia arriba, donde va
   el texto. Sin bordes: lo que no se ve es porque el degradado la apaga. */
.nl-home .nl-hero__bg {
	position: absolute;
	inset: 0;
	background-position: 50% 45%;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.6;
	-webkit-mask-image: linear-gradient(to bottom, transparent 4%, rgba(0, 0, 0, 0.28) 38%, #000 88%);
	mask-image: linear-gradient(to bottom, transparent 4%, rgba(0, 0, 0, 0.28) 38%, #000 88%);
	pointer-events: none;
}

/* Velo que abre paso al texto por la izquierda sin recortar la foto.
   Las paradas van ancladas al centro y no en porcentajes: el hero ocupa todo
   el ancho de la pantalla, pero el contenido queda centrado en --nl-max. Con
   porcentajes, en un monitor ancho el velo se estira y tapa el diagrama. */
.nl-home .nl-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		var(--nl-cream) 0%,
		rgba(var(--nl-marfil-rgb), 0.95) calc(50% - 420px),
		rgba(var(--nl-marfil-rgb), 0.62) calc(50% - 160px),
		rgba(var(--nl-marfil-rgb), 0.18) calc(50% + 180px),
		rgba(var(--nl-marfil-rgb), 0) calc(50% + 430px));
	pointer-events: none;
}

/* Bloque verde pegado al borde derecho. */
.nl-home .nl-hero__tag {
	position: absolute;
	top: calc(var(--nl-header-h) + clamp(24px, 3vw, 40px));
	right: 0;
	z-index: 2;
	padding: 26px clamp(28px, 3vw, 44px) 32px;
	background: var(--nl-green);
	color: var(--nl-cream);
	font-size: clamp(0.62rem, 0.82vw, 0.72rem);
	font-weight: 400;
	letter-spacing: 0.22em;
	line-height: 2.1;
	text-transform: uppercase;
}

.nl-home .nl-hero__tag::after {
	display: block;
	width: 34px;
	height: 1px;
	margin-top: 18px;
	background: var(--nl-gold-soft);
	content: '';
}

/* Sin z-index a proposito: alcanza el orden del DOM para quedar sobre el velo,
   y un stacking context aca romperia cualquier mezcla con el fondo. */
.nl-home .nl-hero__inner {
	display: grid;
	position: relative;
	align-items: center;
	gap: clamp(32px, 4vw, 56px);
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

.nl-home .nl-hero__title {
	margin-bottom: clamp(28px, 3.2vw, 44px);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(2.6rem, 5.6vw, 5.2rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.03;
}

.nl-home .nl-hero__title em {
	font-style: italic;
}

.nl-home .nl-hero__lead {
	max-width: 46ch;
	color: var(--nl-ink-soft);
	font-size: clamp(0.94rem, 1.05vw, 1.02rem);
	line-height: 1.75;
}

/* Separador corto entre los dos parrafos, como en el diseno. */
.nl-home .nl-hero__rule {
	width: 36px;
	height: 0;
	margin: 26px 0;
	border: 0;
	border-top: 1px solid var(--nl-gold-deep);
}

.nl-home .nl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: clamp(32px, 4vw, 48px);
}

/* Cierre del hero: la pregunta con una barra al costado y la flecha debajo. */
.nl-home .nl-hero__note {
	margin-top: clamp(30px, 3.5vw, 42px);
}

.nl-home .nl-hero__note-text {
	padding-left: 16px;
	border-left: 1px solid var(--nl-carbon);
	color: var(--nl-ink);
	font-size: clamp(0.95rem, 1.15vw, 1.1rem);
	font-weight: 500;
	line-height: 1.4;
}

.nl-home .nl-hero__note-arrow {
	display: block;
	margin-top: 14px;
	padding-left: 40px;
	color: var(--nl-ink);
	font-size: 1.2rem;
	line-height: 1;
}

.nl-home .nl-hero__col--media {
	display: flex;
	justify-content: center;
}

/* PNG con transparencia real: se apoya sobre la foto sin caja ni recuadro. */
.nl-home .nl-hero__diagram {
	width: 100%;
	max-width: 720px;
	height: auto;
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	/* minmax(0, 1fr) y no 1fr: con el minimo automatico, el diagrama y el texto
	   empujan la columna y desbordan el ancho de la pantalla. */
	.nl-home .nl-hero__inner {
		gap: clamp(28px, 4vw, 40px);
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-hero__diagram {
		max-width: 480px;
	}

	/* relative, no static: el velo es absolute y taparia el bloque verde.
	   Con top/right en auto, si no arrastra el desplazamiento del desktop y se
	   monta sobre el titulo. */
	.nl-home .nl-hero__tag {
		position: relative;
		top: auto;
		right: auto;
		width: fit-content;
		margin-bottom: 36px;
		padding: 20px 28px 24px;
	}

	/* En una columna el texto ya no esta a la izquierda: el velo pasa a
	   trabajar de arriba hacia abajo. */
	.nl-home .nl-hero__veil {
		background: linear-gradient(to bottom,
			var(--nl-cream) 0%,
			rgba(var(--nl-marfil-rgb), 0.92) 45%,
			rgba(var(--nl-marfil-rgb), 0.55) 72%,
			rgba(var(--nl-marfil-rgb), 0.1) 100%);
	}

	.nl-home .nl-hero__bg {
		background-position: 70% 85%;
		opacity: 0.8;
	}
}

@media (max-width: 640px) {
	.nl-home .nl-hero {
		padding-block: calc(var(--nl-header-h) + 28px) 56px;
	}

	.nl-home .nl-hero__lead {
		max-width: none;
	}

	.nl-home .nl-hero__actions .nl-btn {
		flex: 1 1 100%;
	}

	.nl-home .nl-hero__bg {
		opacity: 0.65;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nl-home .nl-btn,
	.nl-home .nl-btn__arrow {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   6. Secciones oscuras
   Redefinen los tokens de texto en vez de pisar cada regla: asi .nl-eyebrow y
   los demas elementos compartidos se adaptan solos al fondo verde.
   -------------------------------------------------------------------------- */

.nl-home .nl-section--dark {
	--nl-ink: var(--nl-marfil);
	--nl-ink-soft: rgba(var(--nl-marfil-rgb), 0.76);
	--nl-carbon: rgba(var(--nl-marfil-rgb), 0.85);
	background: var(--nl-green-deep);
	color: var(--nl-marfil);
}

/* --------------------------------------------------------------------------
   7. Seccion 02 — Decisiones en el dia a dia
   -------------------------------------------------------------------------- */

.nl-home .nl-dia {
	position: relative;
	padding-block: clamp(72px, 8vw, 120px) clamp(56px, 6vw, 88px);
	overflow: hidden;
}

/* Luz que entra por arriba a la derecha, como en el diseno. */
.nl-home .nl-dia__glow {
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60%;
	height: 90%;
	background: radial-gradient(closest-side, rgba(var(--nl-marfil-rgb), 0.16), rgba(var(--nl-marfil-rgb), 0));
	pointer-events: none;
}

.nl-home .nl-dia__arc {
	position: absolute;
	top: -14%;
	right: -6%;
	width: clamp(320px, 34vw, 560px);
	height: auto;
	color: var(--nl-gold-deep);
	opacity: 0.5;
	pointer-events: none;
}

.nl-home .nl-dia__net {
	position: absolute;
	bottom: -4%;
	left: 2%;
	width: clamp(200px, 22vw, 330px);
	height: auto;
	color: var(--nl-gold-deep);
	opacity: 0.24;
	pointer-events: none;
}

.nl-home .nl-dia__inner {
	position: relative;
}

.nl-home .nl-dia__head {
	max-width: 56%;
}

.nl-home .nl-dia__title {
	margin-bottom: clamp(24px, 2.8vw, 40px);
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(2rem, 4vw, 3.6rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.nl-home .nl-dia__title em {
	font-style: italic;
}

.nl-home .nl-dia__lead {
	max-width: 44ch;
	color: var(--nl-ink-soft);
	font-size: clamp(0.92rem, 1vw, 1rem);
	line-height: 1.7;
}

/* El texto del costado acompana el final de la curva, arriba, no el centro
   del bloque: por eso align-items start y no center. */
.nl-home .nl-dia__mid {
	display: grid;
	align-items: start;
	gap: clamp(24px, 3vw, 48px);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-top: clamp(8px, 1vw, 16px);
}

.nl-home .nl-dia__aside {
	padding-top: clamp(24px, 4vw, 64px);
}

/* --- La curva y sus hitos --- */

.nl-home .nl-dia__track {
	position: relative;
	height: clamp(255px, 21vw, 305px);
}

.nl-home .nl-dia__curve {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--nl-gold-deep);
}

.nl-home .nl-dia__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El origen del hito es el punto sobre la curva; el resto cuelga de ahi.
   El -24px alinea el eje del circulo con ese punto. */
.nl-home .nl-step {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: 168px;
	margin-left: -24px;
}

/* Tallo vertical que cruza el punto y une el numero con el icono. */
.nl-home .nl-step::before {
	position: absolute;
	top: -46px;
	left: 24px;
	width: 1px;
	height: 96px;
	background: var(--nl-gold-deep);
	opacity: 0.7;
	content: '';
}

.nl-home .nl-step__num {
	position: absolute;
	top: -52px;
	left: 24px;
	transform: translate(-50%, -100%);
	color: var(--nl-gold);
	font-family: var(--nl-font-serif);
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	line-height: 1;
}

.nl-home .nl-step__dot {
	position: absolute;
	top: 0;
	left: 24px;
	width: 7px;
	height: 7px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--nl-gold);
}

.nl-home .nl-step__icon {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: 26px;
	border: 1px solid var(--nl-gold-deep);
	border-radius: 50%;
	color: var(--nl-gold);
}

.nl-home .nl-step__text {
	margin-top: 16px;
	color: var(--nl-marfil);
	font-size: 0.85rem;
	line-height: 1.55;
}

/* --- Textos al costado y al pie --- */

.nl-home .nl-dia__aside,
.nl-home .nl-dia__tagline {
	color: var(--nl-gold);
	font-size: clamp(0.6rem, 0.72vw, 0.7rem);
	letter-spacing: 0.24em;
	line-height: 2.2;
	text-transform: uppercase;
}

.nl-home .nl-dia__aside::after,
.nl-home .nl-dia__tagline::after {
	display: block;
	width: 34px;
	height: 1px;
	margin-top: 16px;
	background: var(--nl-gold-deep);
	content: '';
}

.nl-home .nl-dia__tagline {
	position: relative;
	color: rgba(var(--nl-marfil-rgb), 0.62);
}

.nl-home .nl-dia__foot {
	display: grid;
	align-items: end;
	gap: clamp(24px, 4vw, 56px);
	grid-template-columns: auto minmax(0, 1fr);
	margin-top: clamp(20px, 2.5vw, 36px);
}

.nl-home .nl-dia__close {
	justify-self: end;
	max-width: 46ch;
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.15rem, 1.9vw, 1.75rem);
	line-height: 1.35;
}

.nl-home .nl-dia__close em {
	display: block;
	margin-top: 4px;
	color: var(--nl-gold);
	font-style: italic;
}

.nl-home .nl-dia__close::after {
	display: block;
	width: 34px;
	height: 1px;
	margin-top: 22px;
	background: var(--nl-gold-deep);
	content: '';
}

/* --- Seccion 02 en pantallas chicas ---
   La curva deja de tener sentido cuando los hitos no entran en fila: pasa a
   una lista vertical con el tallo como hilo conductor. */

@media (max-width: 1000px) {
	.nl-home .nl-dia__head {
		max-width: none;
	}

	.nl-home .nl-dia__mid,
	.nl-home .nl-dia__foot {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-dia__track {
		height: auto;
	}

	.nl-home .nl-dia__curve {
		display: none;
	}

	.nl-home .nl-dia__steps {
		display: grid;
		gap: 28px;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		margin-top: 36px;
	}

	/* Los hitos vuelven al flujo: se ignoran --x / --y. */
	.nl-home .nl-step {
		position: relative;
		top: auto;
		left: auto;
		display: grid;
		width: auto;
		margin-left: 0;
		align-items: start;
		column-gap: 16px;
		grid-template-columns: 48px minmax(0, 1fr);
	}

	.nl-home .nl-step::before {
		display: none;
	}

	.nl-home .nl-step__num {
		position: static;
		transform: none;
		grid-column: 2;
		margin-bottom: 6px;
		font-size: 1.25rem;
	}

	.nl-home .nl-step__dot {
		display: none;
	}

	.nl-home .nl-step__icon {
		grid-row: 1 / span 2;
		grid-column: 1;
		margin-top: 0;
	}

	.nl-home .nl-step__text {
		grid-column: 2;
		margin-top: 0;
	}

	.nl-home .nl-dia__aside {
		display: none;
	}

	.nl-home .nl-dia__close {
		justify-self: start;
	}

	.nl-home .nl-dia__arc {
		top: -6%;
		width: clamp(220px, 40vw, 340px);
	}
}

@media (max-width: 560px) {
	.nl-home .nl-dia__net {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   8. Seccion 03 — Cuando el sistema empieza a mostrarse
   -------------------------------------------------------------------------- */

.nl-home .nl-patron {
	position: relative;
	padding-block: clamp(64px, 7vw, 104px);
	background: var(--nl-cream);
	overflow: hidden;
}

.nl-home .nl-patron__arc {
	position: absolute;
	top: -13%;
	right: 15%;
	width: clamp(170px, 17vw, 270px);
	height: auto;
	color: var(--nl-gold-deep);
	opacity: 0.4;
	pointer-events: none;
}

.nl-home .nl-patron__head {
	display: grid;
	position: relative;
	align-items: start;
	gap: clamp(20px, 3vw, 48px);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-bottom: clamp(32px, 4vw, 52px);
}

.nl-home .nl-patron__title {
	max-width: 46ch;
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.75rem, 3.3vw, 3.05rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.16;
}

/* El titulo entra en dos lineas: la segunda, en italica, va en su propio
   renglon aunque el ancho de pantalla cambie. */
.nl-home .nl-patron__title em {
	display: block;
	color: var(--nl-ink);
	font-style: italic;
}

.nl-home .nl-patron__notes {
	display: grid;
	gap: 22px;
}

/* Bloque de mayusculas con tracking y una linea corta debajo. Se repite en
   varias secciones. */
.nl-home .nl-note {
	color: var(--nl-gold-deep);
	font-size: clamp(0.58rem, 0.7vw, 0.68rem);
	font-weight: 500;
	letter-spacing: 0.24em;
	line-height: 2;
	text-transform: uppercase;
}

.nl-home .nl-note::after {
	display: block;
	width: 30px;
	height: 1px;
	margin-top: 12px;
	background: var(--nl-gold-deep);
	content: '';
}

/* --- Las dos filas de casos --- */

.nl-home .nl-patron__row {
	display: grid;
	align-items: stretch;
	gap: clamp(16px, 1.6vw, 26px);
	margin-bottom: clamp(16px, 1.6vw, 26px);
}

.nl-home .nl-patron__row--a {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.34fr);
}

.nl-home .nl-patron__row--b {
	grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.4fr) minmax(0, 1.1fr) auto;
}

/* La foto se adapta a la altura que fijan las tarjetas de texto. Con la imagen
   en el flujo pasaba al reves: al ser cuadrada estiraba toda la fila y las
   tarjetas quedaban con un hueco enorme abajo. */
.nl-home .nl-patron__photo {
	position: relative;
	min-height: 240px;
	overflow: hidden;
}

.nl-home .nl-patron__photo img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nl-home .nl-patron__note-b {
	align-self: center;
	max-width: 110px;
}

/* El recorte por defecto se come el texto grabado en los libros por la
   izquierda; anclando la foto a ese borde se lee completo. */
.nl-home .nl-patron__photo--books img {
	object-position: left center;
}

/* --- Tarjeta de caso --- */

.nl-home .nl-case {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.2vw, 34px) clamp(22px, 2.2vw, 36px) clamp(26px, 2.6vw, 40px);
}

.nl-home .nl-case--card {
	background: var(--nl-card);
}

/* El 03 rompe el patron: sin fondo y con el numero en grande al costado. */
.nl-home .nl-case--plain {
	display: grid;
	align-items: start;
	column-gap: clamp(16px, 1.8vw, 30px);
	grid-template-columns: auto minmax(0, 1fr);
	padding-inline: 0;
}

.nl-home .nl-case__num {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(14px, 1.6vw, 22px);
	color: var(--nl-gold-deep);
	font-family: var(--nl-font-serif);
	font-size: 1.3rem;
	letter-spacing: 0.06em;
	line-height: 1;
}

/* Linea horizontal que sale del numero y termina en un punto. */
.nl-home .nl-case--card .nl-case__num::after {
	flex: 1 1 auto;
	max-width: 120px;
	height: 1px;
	background:
		radial-gradient(circle at right center, var(--nl-gold-deep) 2.5px, transparent 3px) right center / 7px 7px no-repeat,
		linear-gradient(var(--nl-gold-deep), var(--nl-gold-deep)) left center / 100% 1px no-repeat;
	content: '';
}

.nl-home .nl-case--plain .nl-case__num {
	margin-bottom: 0;
	color: var(--nl-ghost);
	font-size: clamp(3.2rem, 6vw, 5.6rem);
	line-height: 0.82;
}

.nl-home .nl-case__title {
	margin-bottom: clamp(14px, 1.4vw, 20px);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.1rem, 1.5vw, 1.42rem);
	font-weight: 400;
	line-height: 1.3;
}

.nl-home .nl-case__title em {
	color: var(--nl-ink);
	font-style: italic;
}

.nl-home .nl-case__text {
	color: var(--nl-ink-soft);
	font-size: clamp(0.8rem, 0.92vw, 0.88rem);
	line-height: 1.7;
}

/* Linea corta al pie de la tarjeta, como cierre. */
.nl-home .nl-case--card .nl-case__body::after {
	display: block;
	width: 34px;
	height: 1px;
	margin-top: clamp(18px, 2vw, 28px);
	background: var(--nl-gold-deep);
	content: '';
}

/* --- Pie de la seccion --- */

.nl-home .nl-patron__foot {
	display: grid;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	grid-template-columns: minmax(0, 1fr) auto;
	padding-top: clamp(20px, 2.4vw, 32px);
	border-top: 1px solid var(--nl-line);
	margin-top: clamp(12px, 1.4vw, 20px);
}

.nl-home .nl-patron__close {
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1rem, 1.5vw, 1.4rem);
	line-height: 1.4;
}

.nl-home .nl-patron__close em {
	color: var(--nl-ink);
	font-style: italic;
}

/* --- Seccion 03 en pantallas chicas --- */

@media (max-width: 1100px) {
	.nl-home .nl-patron__row--a,
	.nl-home .nl-patron__row--b {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.nl-home .nl-patron__photo {
		min-height: 260px;
	}

	.nl-home .nl-patron__note-b {
		display: none;
	}

	.nl-home .nl-case--plain {
		padding-inline: clamp(22px, 2.2vw, 36px);
		background: var(--nl-card);
	}

	/* Al ganar fondo de tarjeta, el numero grande en beige casi desaparece:
	   pasa a comportarse como el de las otras tarjetas. */
	.nl-home .nl-case--plain .nl-case__num {
		margin-bottom: clamp(14px, 1.6vw, 22px);
		color: var(--nl-gold-deep);
		font-size: 1.3rem;
		line-height: 1;
	}

	.nl-home .nl-case--plain .nl-case__num::after {
		flex: 1 1 auto;
		max-width: 120px;
		height: 1px;
		background:
			radial-gradient(circle at right center, var(--nl-gold-deep) 2.5px, transparent 3px) right center / 7px 7px no-repeat,
			linear-gradient(var(--nl-gold-deep), var(--nl-gold-deep)) left center / 100% 1px no-repeat;
		content: '';
	}
}

@media (max-width: 760px) {
	.nl-home .nl-patron__head,
	.nl-home .nl-patron__row--a,
	.nl-home .nl-patron__row--b,
	.nl-home .nl-patron__foot {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-patron__notes {
		grid-auto-flow: column;
		justify-content: start;
		gap: 32px;
	}

	.nl-home .nl-patron__title {
		max-width: none;
	}

	.nl-home .nl-case--plain {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 10px;
	}

	.nl-home .nl-patron__arc {
		display: none;
	}

	/* En una columna, las dos filas ya no alcanzan a repartir sus fotos: las
	   dos quedarian pegadas una debajo de la otra. Aplanamos las filas con
	   display:contents para que sus items entren en un solo flujo y el
	   caso 03 quede entre las dos fotos con order, como en el diseno. */
	.nl-home .nl-patron > .nl-container {
		display: flex;
		flex-direction: column;
		gap: clamp(16px, 1.6vw, 26px);
	}

	.nl-home .nl-patron__head {
		margin-bottom: 0;
	}

	.nl-home .nl-patron__row--a,
	.nl-home .nl-patron__row--b {
		display: contents;
	}

	.nl-home .nl-patron__row--a .nl-case--card:nth-of-type(1) {
		order: 1;
	}

	.nl-home .nl-patron__row--a .nl-case--card:nth-of-type(2) {
		order: 2;
	}

	.nl-home .nl-patron__row--a .nl-patron__photo {
		order: 3;
	}

	.nl-home .nl-patron__row--b .nl-case--plain {
		order: 4;
	}

	.nl-home .nl-patron__row--b .nl-patron__photo--books {
		order: 5;
	}

	.nl-home .nl-patron__row--b .nl-case--card {
		order: 6;
	}

	.nl-home .nl-patron__foot {
		order: 7;
	}
}

/* --------------------------------------------------------------------------
   9. Seccion 04 — De donde viene esta mirada
   -------------------------------------------------------------------------- */

/* Sin .nl-container: la foto sangra hasta el borde izquierdo y el padding lo
   pone la columna de texto. */
.nl-home .nl-mirada {
	display: grid;
	grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr);
	background: var(--nl-cream);
}

/* --- Columna de la foto --- */

.nl-home .nl-mirada__media {
	position: relative;
	min-height: 560px;
	overflow: hidden;
}

.nl-home .nl-mirada__media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 16%;
}

/* Velo solo donde hay texto — arriba y abajo. En el medio la foto queda
   limpia, si no toda la columna se apaga. */
.nl-home .nl-mirada__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(20, 26, 16, 0.46) 0%,
		rgba(20, 26, 16, 0.1) 22%,
		rgba(20, 26, 16, 0) 40%,
		rgba(20, 26, 16, 0.22) 62%,
		rgba(20, 26, 16, 0.6) 100%);
	content: '';
}

.nl-home .nl-mirada__media > :not(img) {
	position: absolute;
	z-index: 1;
}

.nl-home .nl-note--light {
	color: rgba(var(--nl-marfil-rgb), 0.9);
}

.nl-home .nl-note--light::after {
	background: var(--nl-gold);
}

.nl-home .nl-mirada__tag-top {
	top: clamp(28px, 4vw, 52px);
	left: clamp(22px, 3vw, 46px);
}

.nl-home .nl-mirada__tag-bottom {
	bottom: clamp(28px, 4vw, 52px);
	left: clamp(22px, 3vw, 46px);
}

.nl-home .nl-mirada__quote {
	right: 0;
	bottom: 42%;
	max-width: 62%;
	padding: 6px 0 6px clamp(16px, 2vw, 26px);
	border-left: 1px solid var(--nl-gold);
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.3rem, 1.9vw, 1.9rem);
	line-height: 1.25;
}

/* --- Columna de contenido --- */

.nl-home .nl-mirada__body {
	position: relative;
	padding: clamp(52px, 6vw, 88px) clamp(24px, 4vw, 72px);
	overflow: hidden;
}

.nl-home .nl-mirada__arc {
	position: absolute;
	top: -16%;
	right: 6%;
	width: clamp(180px, 20vw, 300px);
	height: auto;
	color: var(--nl-gold-deep);
	opacity: 0.4;
	pointer-events: none;
}

.nl-home .nl-mirada__head {
	display: grid;
	position: relative;
	align-items: start;
	gap: clamp(20px, 3vw, 44px);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-bottom: clamp(30px, 3.4vw, 46px);
}

/* Variante del antetitulo con la linea al costado, no arriba. */
.nl-home .nl-eyebrow--inline {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nl-home .nl-eyebrow--inline::before {
	order: 1;
	flex: 1 1 auto;
	width: auto;
	max-width: 180px;
	margin-bottom: 0;
	background: var(--nl-gold-deep);
}

.nl-home .nl-mirada__title {
	max-width: 20ch;
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.7rem, 2.9vw, 2.75rem);
	font-weight: 400;
	line-height: 1.16;
}

/* La segunda mitad del titulo va en verde, como en el diseno. */
.nl-home .nl-mirada__title em {
	display: block;
	color: var(--nl-green);
	font-style: normal;
}

.nl-home .nl-mirada__notes {
	display: grid;
	gap: 20px;
}

/* --- Las dos miradas --- */

.nl-home .nl-mirada__cols {
	display: grid;
	position: relative;
	gap: clamp(28px, 3.4vw, 56px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: clamp(30px, 3.4vw, 48px);
}

.nl-home .nl-mirada__col + .nl-mirada__col {
	padding-left: clamp(28px, 3.4vw, 56px);
	border-left: 1px solid var(--nl-line);
}

.nl-home .nl-mirada__col-title {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(14px, 1.6vw, 22px);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.05rem, 1.35vw, 1.3rem);
	font-weight: 400;
}

.nl-home .nl-mirada__col-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--nl-card);
	color: var(--nl-ink);
}

.nl-home .nl-mirada__col p {
	color: var(--nl-ink-soft);
	font-size: clamp(0.8rem, 0.92vw, 0.88rem);
	line-height: 1.7;
}

.nl-home .nl-mirada__col p + p {
	margin-top: 16px;
}

/* --- Union de las dos miradas + diagrama --- */

.nl-home .nl-mirada__join {
	display: grid;
	align-items: center;
	gap: clamp(24px, 3vw, 48px);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-bottom: clamp(26px, 3vw, 40px);
}

.nl-home .nl-mirada__join-lead {
	max-width: 42ch;
	color: var(--nl-ink-soft);
	font-size: clamp(0.8rem, 0.92vw, 0.88rem);
	line-height: 1.7;
}

.nl-home .nl-mirada__join-strong {
	margin-top: 12px;
	max-width: 24ch;
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.15rem, 1.6vw, 1.55rem);
	line-height: 1.3;
}

/* Dos circulos translucidos: donde se superponen, el beige se suma solo. */
.nl-home .nl-venn {
	display: flex;
	align-items: center;
}

.nl-home .nl-venn__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(120px, 13vw, 168px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(198, 186, 160, 0.34);
	color: var(--nl-ink-soft);
	font-size: clamp(0.56rem, 0.68vw, 0.66rem);
	letter-spacing: 0.16em;
	line-height: 1.9;
	text-align: center;
	text-transform: uppercase;
}

.nl-home .nl-venn__circle + .nl-venn__circle {
	margin-left: clamp(-46px, -4.6vw, -34px);
}

.nl-home .nl-venn__circle span {
	position: relative;
	padding-inline: 8px;
}

/* --- La pregunta --- */

.nl-home .nl-mirada__ask {
	display: grid;
	align-items: center;
	gap: clamp(16px, 2.4vw, 40px);
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
	margin-bottom: clamp(22px, 2.6vw, 34px);
	padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 38px);
	background: var(--nl-card);
}

.nl-home .nl-mirada__ask-lead {
	position: relative;
	padding-left: clamp(16px, 2vw, 26px);
	border-left: 1px solid var(--nl-gold-deep);
	color: var(--nl-ink-soft);
	font-size: clamp(0.78rem, 0.9vw, 0.86rem);
	line-height: 1.7;
}

.nl-home .nl-mirada__ask-quote {
	margin: 0;
	padding-left: clamp(16px, 2vw, 28px);
	border-left: 1px solid var(--nl-line);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1rem, 1.35vw, 1.3rem);
	line-height: 1.42;
}

.nl-home .nl-mirada__foot {
	padding-left: clamp(16px, 2vw, 26px);
	border-left: 1px solid var(--nl-gold-deep);
	color: var(--nl-ink-soft);
	font-size: clamp(0.78rem, 0.9vw, 0.86rem);
	line-height: 1.7;
}

.nl-home .nl-mirada__foot strong {
	color: var(--nl-ink);
	font-weight: 600;
}

/* --- Seccion 04 en pantallas chicas --- */

@media (max-width: 1100px) {
	.nl-home .nl-mirada {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-mirada__media {
		min-height: clamp(400px, 56vw, 520px);
	}

	.nl-home .nl-mirada__media img {
		object-position: center 22%;
	}

	.nl-home .nl-mirada__quote {
		right: auto;
		bottom: clamp(28px, 4vw, 52px);
		left: clamp(22px, 3vw, 46px);
		max-width: 68%;
	}

	/* En horizontal los dos bloques de abajo se amontonan; el de arriba ya dice
	   lo mismo, asi que este sale. */
	.nl-home .nl-mirada__tag-bottom {
		display: none;
	}

	.nl-home .nl-mirada__tag-top {
		right: clamp(22px, 3vw, 46px);
		left: auto;
		text-align: right;
	}

	.nl-home .nl-mirada__tag-top::after {
		margin-left: auto;
	}
}

@media (max-width: 860px) {
	.nl-home .nl-mirada__head,
	.nl-home .nl-mirada__cols,
	.nl-home .nl-mirada__join,
	.nl-home .nl-mirada__ask {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-mirada__col + .nl-mirada__col {
		padding-top: clamp(24px, 4vw, 36px);
		padding-left: 0;
		border-top: 1px solid var(--nl-line);
		border-left: 0;
	}

	.nl-home .nl-mirada__notes {
		grid-auto-flow: column;
		justify-content: start;
		gap: 32px;
	}

	.nl-home .nl-mirada__title {
		max-width: none;
	}

	.nl-home .nl-mirada__ask-quote {
		padding-left: 0;
		border-left: 0;
	}

	.nl-home .nl-mirada__arc {
		display: none;
	}
}

@media (max-width: 480px) {
	.nl-home .nl-venn {
		justify-content: center;
	}

	.nl-home .nl-venn__circle {
		width: 140px;
	}
}

/* --------------------------------------------------------------------------
   10. Seccion 05 — No necesitas otra tecnica
   -------------------------------------------------------------------------- */

.nl-home .nl-lab {
	background: var(--nl-cream);
}

.nl-home .nl-lab__split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- Mitad clara --- */

.nl-home .nl-lab__light {
	padding: clamp(48px, 5.5vw, 84px) clamp(24px, 4vw, 72px);
}

.nl-home .nl-lab__title {
	margin-bottom: clamp(22px, 2.6vw, 34px);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.8rem, 3vw, 2.9rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.12;
}

/* La ultima linea del titulo va en dorado oscuro. */
.nl-home .nl-lab__title em {
	color: var(--nl-gold-deep);
	font-style: normal;
}

.nl-home .nl-lab__text {
	max-width: 50ch;
	color: var(--nl-ink-soft);
	font-size: clamp(0.85rem, 0.95vw, 0.94rem);
	line-height: 1.75;
}

.nl-home .nl-lab__highlight {
	margin-block: clamp(22px, 2.4vw, 32px);
	padding-left: clamp(16px, 1.8vw, 24px);
	border-left: 2px solid var(--nl-gold-deep);
}

.nl-home .nl-lab__highlight p {
	color: var(--nl-ink);
	font-size: clamp(0.88rem, 1vw, 0.98rem);
	font-weight: 600;
	line-height: 1.6;
}

.nl-home .nl-lab__highlight-gold {
	color: var(--nl-gold-deep);
}

.nl-home .nl-lab__note {
	margin-top: clamp(28px, 3.2vw, 44px);
}

/* --- Mitad oscura --- */

.nl-home .nl-lab__dark {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 5.5vw, 84px) clamp(24px, 4vw, 64px);
	background: var(--nl-green-deep);
	overflow: hidden;
}

/* Cuando la foto existe, entra de fondo con un velo verde que mantiene el
   texto legible. */
.nl-home .nl-lab__dark--photo {
	background-position: center right;
	background-size: cover;
}

.nl-home .nl-lab__dark--photo::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(38, 51, 28, 0.96) 0%,
		rgba(38, 51, 28, 0.9) 42%,
		rgba(38, 51, 28, 0.55) 72%,
		rgba(38, 51, 28, 0.35) 100%);
	content: '';
}

.nl-home .nl-lab__arc {
	position: absolute;
	top: -12%;
	right: -18%;
	width: clamp(240px, 26vw, 400px);
	height: auto;
	color: var(--nl-gold-deep);
	opacity: 0.28;
	pointer-events: none;
}

/* Nada de un selector generico tipo `> *` para levantar los hijos sobre el
   velo: pisaba el position de los bloques que ya lo traen. Los laterales son
   absolute y el cuerpo se posiciona aca, que es el unico que lo necesita. */

.nl-home .nl-lab__dark-top,
.nl-home .nl-lab__dark-bottom {
	position: absolute;
	right: clamp(24px, 4vw, 64px);
	max-width: 120px;
	text-align: right;
}

.nl-home .nl-lab__dark-top::after,
.nl-home .nl-lab__dark-bottom::after {
	margin-left: auto;
}

.nl-home .nl-lab__dark-top {
	top: clamp(40px, 4.6vw, 64px);
}

.nl-home .nl-lab__dark-bottom {
	bottom: clamp(40px, 4.6vw, 64px);
}

/* En px y no en ch: la unidad ch se mide con la fuente del cuerpo, que es
   mucho mas angosta que la serif del titulo, y "No es un curso." terminaba
   partido en dos renglones. */
.nl-home .nl-lab__dark-body {
	position: relative;
	max-width: 430px;
}

.nl-home .nl-lab__dark-title {
	margin-bottom: clamp(20px, 2.4vw, 30px);
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.8rem, 3.1vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
}

.nl-home .nl-lab__dark-title em {
	display: block;
	color: var(--nl-gold);
	font-style: normal;
}

.nl-home .nl-lab__nots {
	margin: 0 0 clamp(22px, 2.6vw, 34px);
	padding: 0;
	list-style: none;
}

.nl-home .nl-lab__nots li {
	color: rgba(var(--nl-marfil-rgb), 0.86);
	font-size: clamp(0.85rem, 0.95vw, 0.94rem);
	line-height: 1.95;
}

.nl-home .nl-lab__object {
	position: relative;
	padding-top: clamp(20px, 2.4vw, 30px);
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.1rem, 1.5vw, 1.45rem);
	line-height: 1.35;
}

.nl-home .nl-lab__object::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 1px;
	background: var(--nl-gold);
	content: '';
}

.nl-home .nl-lab__object em {
	color: var(--nl-gold);
	font-style: normal;
}

/* --- Banner al pie --- */

.nl-home .nl-lab__banner {
	padding-block: clamp(34px, 4vw, 58px);
	background: var(--nl-card);
}

.nl-home .nl-lab__banner--photo {
	background-position: center 62%;
	background-size: cover;
}

.nl-home .nl-lab__banner-inner {
	display: grid;
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.nl-home .nl-lab__banner-note {
	max-width: 130px;
}

.nl-home .nl-lab__banner-note--right {
	text-align: right;
}

.nl-home .nl-lab__banner-note--right::after {
	margin-left: auto;
}

.nl-home .nl-lab__banner-text {
	padding-left: clamp(20px, 3vw, 44px);
	border-left: 1px solid var(--nl-gold-deep);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.1rem, 1.7vw, 1.7rem);
	line-height: 1.32;
}

.nl-home .nl-lab__banner-text em {
	display: block;
	color: var(--nl-gold-deep);
	font-style: italic;
}

/* --- Seccion 05 en pantallas chicas --- */

@media (max-width: 1000px) {
	.nl-home .nl-lab__split {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En una columna los dos bloques de nota vuelven al flujo. Si el de abajo
	   queda absolute, se monta sobre "El objeto de trabajo es...". */
	.nl-home .nl-lab__dark {
		justify-content: flex-start;
		padding-block: clamp(56px, 8vw, 84px);
	}

	.nl-home .nl-lab__dark-top,
	.nl-home .nl-lab__dark-bottom {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		max-width: none;
		text-align: left;
	}

	.nl-home .nl-lab__dark-top::after,
	.nl-home .nl-lab__dark-bottom::after {
		margin-left: 0;
	}

	.nl-home .nl-lab__dark-top {
		margin-bottom: 28px;
	}

	.nl-home .nl-lab__dark-bottom {
		margin-top: 32px;
	}

	.nl-home .nl-lab__dark-body {
		max-width: none;
	}

	.nl-home .nl-lab__banner-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-lab__banner-text {
		order: -1;
		padding-left: 0;
		border-left: 0;
	}

	.nl-home .nl-lab__banner-note--right {
		text-align: left;
	}

	.nl-home .nl-lab__banner-note--right::after {
		margin-left: 0;
	}

	.nl-home .nl-lab__banner-note {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   11. Seccion 06 — Como funciona
   -------------------------------------------------------------------------- */

.nl-home .nl-como {
	padding-block: clamp(60px, 6.5vw, 96px) 0;
	background: var(--nl-cream);
}

.nl-home .nl-como__head {
	display: grid;
	align-items: start;
	gap: clamp(24px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-bottom: clamp(24px, 2.6vw, 36px);
}

.nl-home .nl-como__title {
	margin-bottom: clamp(18px, 2.2vw, 28px);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.8rem, 3.1vw, 3rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.14;
}

.nl-home .nl-como__title em {
	display: block;
	color: var(--nl-gold-deep);
	font-style: normal;
}

.nl-home .nl-como__lead {
	max-width: 60ch;
	color: var(--nl-ink-soft);
	font-size: clamp(0.85rem, 0.98vw, 0.95rem);
	line-height: 1.75;
}

.nl-home .nl-como__aside {
	max-width: 260px;
	padding-left: clamp(20px, 2.4vw, 34px);
	border-left: 1px solid var(--nl-line);
}

.nl-home .nl-como__aside-quote {
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.95rem, 1.2vw, 1.15rem);
	font-style: italic;
	line-height: 1.45;
}

.nl-home .nl-como__aside-quote::after {
	display: block;
	width: 40px;
	height: 1px;
	margin-top: 18px;
	background: var(--nl-gold-deep);
	content: '';
}

.nl-home .nl-como__aside-note {
	margin-top: 18px;
	color: var(--nl-ink-soft);
	font-size: clamp(0.6rem, 0.72vw, 0.7rem);
	letter-spacing: 0.18em;
	line-height: 2;
	text-transform: uppercase;
}

/* --- Los cuatro encuentros --- */

/* Dos grillas con las mismas columnas: la de las marcas y la de los textos.
   El rail lleva la curva de fondo. */
.nl-home .nl-como__rail,
.nl-home .nl-como__steps {
	display: grid;
	gap: clamp(18px, 2.2vw, 34px);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nl-home .nl-como__rail {
	position: relative;
	align-items: center;
	height: 86px;
}

.nl-home .nl-como__curve {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--nl-gold-deep);
}

.nl-home .nl-como__mark {
	display: flex;
	position: relative;
	align-items: center;
	gap: clamp(10px, 1.2vw, 18px);
}

.nl-home .nl-como__num {
	color: var(--nl-gold-soft);
	font-family: var(--nl-font-serif);
	font-size: clamp(2.2rem, 3.4vw, 3.2rem);
	line-height: 1;
}

.nl-home .nl-como__icon {
	display: flex;
	position: relative;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: clamp(46px, 4.4vw, 58px);
	aspect-ratio: 1;
	border: 1px solid var(--nl-gold-deep);
	border-radius: 50%;
	background: var(--nl-cream);
	color: var(--nl-ink);
}

/* El punto donde la curva toca cada encuentro. */
.nl-home .nl-como__icon::before {
	position: absolute;
	top: -5px;
	left: 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--nl-green);
	content: '';
}

.nl-home .nl-como__steps {
	margin-top: clamp(16px, 1.8vw, 24px);
	padding-bottom: clamp(48px, 5vw, 72px);
	list-style: none;
}

.nl-home .nl-como__step-name {
	margin-bottom: 8px;
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nl-home .nl-como__step-claim {
	margin-bottom: 14px;
	color: var(--nl-gold-deep);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.95rem, 1.2vw, 1.15rem);
	line-height: 1.35;
}

.nl-home .nl-como__step-text {
	color: var(--nl-ink-soft);
	font-size: clamp(0.78rem, 0.9vw, 0.86rem);
	line-height: 1.7;
}

/* --- Banda intermedia --- */

.nl-home .nl-como__band {
	padding-block: clamp(30px, 3.4vw, 46px);
	background: var(--nl-card);
}

.nl-home .nl-como__band-inner {
	padding-left: clamp(40px, 6vw, 96px);
}

.nl-home .nl-como__band-title {
	position: relative;
	padding-left: clamp(20px, 2.4vw, 34px);
	border-left: 1px solid var(--nl-gold-deep);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.2rem, 2.1vw, 2.05rem);
	line-height: 1.26;
}

.nl-home .nl-como__band-title em {
	display: block;
	color: var(--nl-gold-deep);
	font-style: normal;
}

.nl-home .nl-como__band-note {
	margin-top: 14px;
	padding-left: clamp(20px, 2.4vw, 34px);
	color: var(--nl-ink-soft);
	font-size: clamp(0.6rem, 0.74vw, 0.72rem);
	letter-spacing: 0.16em;
	line-height: 1.8;
	text-transform: uppercase;
}

/* --- Franja de datos --- */

.nl-home .nl-como__facts {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: clamp(28px, 3vw, 40px) 0 clamp(20px, 2.4vw, 30px);
	list-style: none;
}

.nl-home .nl-como__fact {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 16px);
	padding-inline: clamp(12px, 1.6vw, 24px);
}

.nl-home .nl-como__fact + .nl-como__fact {
	border-left: 1px solid var(--nl-line);
}

.nl-home .nl-como__fact:first-child {
	padding-left: 0;
}

.nl-home .nl-como__fact-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	aspect-ratio: 1;
	border: 1px solid var(--nl-gold-deep);
	border-radius: 50%;
	color: var(--nl-ink);
}

.nl-home .nl-como__fact-title {
	display: block;
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.92rem, 1.1vw, 1.05rem);
	line-height: 1.25;
}

.nl-home .nl-como__fact-note {
	display: block;
	margin-top: 6px;
	color: var(--nl-ink-soft);
	font-size: clamp(0.55rem, 0.66vw, 0.64rem);
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-transform: uppercase;
}

.nl-home .nl-como__foot {
	padding-top: clamp(16px, 1.8vw, 24px);
	padding-bottom: clamp(20px, 2.2vw, 28px);
	border-top: 1px solid var(--nl-line);
	color: var(--nl-ink-soft);
	font-size: clamp(0.58rem, 0.7vw, 0.68rem);
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
}

.nl-home .nl-como__cta {
	padding-bottom: clamp(36px, 4vw, 56px);
	text-align: center;
}

/* --- Seccion 06 en pantallas chicas --- */

@media (max-width: 1100px) {
	/* La curva solo tiene sentido con los cuatro en fila. */
	.nl-home .nl-como__curve {
		display: none;
	}

	.nl-home .nl-como__rail {
		display: none;
	}

	.nl-home .nl-como__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(28px, 3.6vw, 44px);
	}

	/* Sin el rail, cada paso recupera su numero e icono arriba del texto. */
	.nl-home .nl-como__step::before {
		display: block;
		margin-bottom: 12px;
		color: var(--nl-gold-soft);
		content: counter(nl-como-step, decimal-leading-zero);
		counter-increment: nl-como-step;
		font-family: var(--nl-font-serif);
		font-size: 2.4rem;
		line-height: 1;
	}

	.nl-home .nl-como__steps {
		counter-reset: nl-como-step;
	}

	.nl-home .nl-como__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 0;
	}

	.nl-home .nl-como__fact:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 760px) {
	.nl-home .nl-como__head,
	.nl-home .nl-como__steps,
	.nl-home .nl-como__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-como__aside {
		max-width: none;
	}

	.nl-home .nl-como__fact {
		padding-left: 0;
		border-left: 0;
	}

	.nl-home .nl-como__band-inner {
		padding-left: var(--nl-gutter);
	}
}

/* --------------------------------------------------------------------------
   12. Seccion 07 — Que empieza a cambiar
   -------------------------------------------------------------------------- */

.nl-home .nl-cambia {
	padding-block: clamp(60px, 6.5vw, 96px);
	background: var(--nl-cream);
}

.nl-home .nl-cambia__head {
	display: grid;
	align-items: start;
	gap: clamp(24px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-bottom: clamp(26px, 3vw, 42px);
}

.nl-home .nl-cambia__title {
	max-width: 30ch;
	margin-bottom: clamp(18px, 2.2vw, 28px);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.7rem, 2.9vw, 2.75rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.16;
}

.nl-home .nl-cambia__title em {
	display: block;
	color: var(--nl-gold-deep);
	font-style: normal;
}

.nl-home .nl-cambia__lead {
	max-width: 62ch;
	color: var(--nl-ink-soft);
	font-size: clamp(0.85rem, 0.98vw, 0.95rem);
	line-height: 1.75;
}

.nl-home .nl-cambia__aside {
	max-width: 250px;
	padding-left: clamp(20px, 2.4vw, 34px);
	border-left: 1px solid var(--nl-line);
}

.nl-home .nl-cambia__aside-quote {
	margin-bottom: 20px;
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.95rem, 1.2vw, 1.15rem);
	font-style: italic;
	line-height: 1.5;
}

/* --- Las cinco columnas --- */

.nl-home .nl-cambia__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.nl-home .nl-cambia__item {
	padding-inline: clamp(14px, 1.8vw, 28px);
}

.nl-home .nl-cambia__item:first-child {
	padding-left: 0;
}

.nl-home .nl-cambia__item + .nl-cambia__item {
	border-left: 1px solid var(--nl-line);
}

.nl-home .nl-cambia__mark {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 16px);
	margin-bottom: clamp(18px, 2vw, 26px);
}

.nl-home .nl-cambia__num {
	color: var(--nl-gold-soft);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.7rem, 2.4vw, 2.3rem);
	line-height: 1;
}

.nl-home .nl-cambia__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: clamp(44px, 3.8vw, 52px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--nl-sand);
	color: var(--nl-ink);
}

/* Los circulos alternan beige y verde claro, como en el diseno. */
.nl-home .nl-cambia__item:nth-child(even) .nl-cambia__icon {
	background: #d8ddd0;
}

.nl-home .nl-cambia__item-title {
	margin-bottom: clamp(12px, 1.4vw, 18px);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1rem, 1.28vw, 1.22rem);
	font-weight: 400;
	line-height: 1.32;
}

.nl-home .nl-cambia__item-text {
	color: var(--nl-ink-soft);
	font-size: clamp(0.76rem, 0.88vw, 0.84rem);
	line-height: 1.7;
}

/* --- Seccion 07 en pantallas chicas --- */

@media (max-width: 1100px) {
	.nl-home .nl-cambia__list {
		gap: clamp(26px, 3.4vw, 40px) 0;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Con tres por fila, el borde izquierdo va en todas menos la primera de
	   cada fila. */
	.nl-home .nl-cambia__item:nth-child(3n + 1) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 760px) {
	.nl-home .nl-cambia__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-cambia__aside {
		max-width: none;
	}

	.nl-home .nl-cambia__title,
	.nl-home .nl-cambia__lead {
		max-width: none;
	}

	.nl-home .nl-cambia__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nl-home .nl-cambia__item:nth-child(3n + 1) {
		padding-left: clamp(14px, 1.8vw, 28px);
		border-left: 1px solid var(--nl-line);
	}

	.nl-home .nl-cambia__item:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 480px) {
	.nl-home .nl-cambia__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-cambia__item,
	.nl-home .nl-cambia__item:nth-child(3n + 1) {
		padding-left: 0;
		border-left: 0;
	}

	.nl-home .nl-cambia__item + .nl-cambia__item {
		padding-top: clamp(22px, 4vw, 30px);
		border-top: 1px solid var(--nl-line);
	}
}

/* --------------------------------------------------------------------------
   13. Seccion 08 — El valor de hacerlo en grupo
   -------------------------------------------------------------------------- */

.nl-home .nl-grupo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.56fr);
}

.nl-home .nl-grupo__body {
	padding: clamp(52px, 6vw, 88px) clamp(24px, 4vw, 76px);
}

/* En px: la unidad ch se mide con la fuente del cuerpo y parte el titulo en
   cuatro renglones en vez de dos. */
.nl-home .nl-grupo__title {
	max-width: 760px;
	margin-bottom: clamp(22px, 2.6vw, 34px);
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.9rem, 3.2vw, 3.1rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.12;
}

.nl-home .nl-grupo__title em {
	display: block;
	color: var(--nl-gold);
	font-style: normal;
}

.nl-home .nl-grupo__text {
	max-width: 62ch;
}

.nl-home .nl-grupo__text p {
	color: rgba(var(--nl-marfil-rgb), 0.86);
	font-size: clamp(0.85rem, 0.98vw, 0.95rem);
	line-height: 1.75;
}

.nl-home .nl-grupo__text p + p {
	margin-top: 18px;
}

/* --- Los cuatro aportes --- */

/* El divisor va aca y no al pie del texto: el texto tiene su propio ancho
   maximo y la linea quedaba cortada a media columna. */
.nl-home .nl-grupo__list {
	display: grid;
	gap: clamp(18px, 2.2vw, 32px);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: clamp(26px, 3vw, 40px) 0 0;
	padding-top: clamp(26px, 3vw, 40px);
	border-top: 1px solid rgba(var(--nl-marfil-rgb), 0.22);
	list-style: none;
}

.nl-home .nl-grupo__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(46px, 4vw, 56px);
	aspect-ratio: 1;
	margin-bottom: clamp(14px, 1.8vw, 22px);
	border-radius: 50%;
	background: rgba(var(--nl-marfil-rgb), 0.12);
	color: var(--nl-marfil);
}

.nl-home .nl-grupo__item-title {
	margin-bottom: 12px;
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.98rem, 1.24vw, 1.18rem);
	font-weight: 400;
	line-height: 1.3;
}

.nl-home .nl-grupo__item-text {
	color: rgba(var(--nl-marfil-rgb), 0.74);
	font-size: clamp(0.76rem, 0.88vw, 0.84rem);
	line-height: 1.65;
}

/* --- La foto --- */

.nl-home .nl-grupo__media {
	position: relative;
	min-height: 520px;
	margin: 0;
	overflow: hidden;
}

.nl-home .nl-grupo__media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo inferior para que la leyenda se lea sobre la foto. */
.nl-home .nl-grupo__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(20, 26, 16, 0) 52%,
		rgba(20, 26, 16, 0.66) 100%);
	content: '';
}

.nl-home .nl-grupo__caption {
	position: absolute;
	right: clamp(20px, 2.6vw, 40px);
	bottom: clamp(24px, 3vw, 44px);
	z-index: 1;
	max-width: 230px;
	padding-left: clamp(14px, 1.6vw, 22px);
	border-left: 1px solid var(--nl-gold);
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.95rem, 1.2vw, 1.15rem);
	font-style: italic;
	line-height: 1.4;
}

/* --- Seccion 08 en pantallas chicas --- */

@media (max-width: 1100px) {
	.nl-home .nl-grupo {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-grupo__media {
		order: -1;
		min-height: clamp(300px, 46vw, 420px);
	}

	.nl-home .nl-grupo__title {
		max-width: none;
	}

	.nl-home .nl-grupo__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(24px, 3.4vw, 36px);
	}
}

@media (max-width: 560px) {
	.nl-home .nl-grupo__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-grupo__caption {
		right: auto;
		left: clamp(20px, 5vw, 40px);
		max-width: 20ch;
	}
}

/* --------------------------------------------------------------------------
   14. Seccion 09 — El resultado
   -------------------------------------------------------------------------- */

/* Variante del antetitulo sin la linea superior: aca el bloque entero ya
   cuelga de una linea vertical. */
.nl-home .nl-eyebrow--plain::before {
	display: none;
}

.nl-home .nl-resultado {
	display: flex;
	position: relative;
	align-items: center;
	min-height: clamp(420px, 44vw, 620px);
	padding-block: clamp(56px, 6vw, 88px);
	/* Sin foto, un degradado calido en vez de un bloque plano. */
	background:
		radial-gradient(120% 90% at 18% 88%, rgba(174, 142, 107, 0.2), rgba(174, 142, 107, 0) 60%),
		linear-gradient(170deg, var(--nl-cream-soft) 0%, var(--nl-cream) 45%, var(--nl-card) 100%);
}

/* Anclada arriba: el texto tiene que caer sobre el cielo, que es la zona
   clara. Centrada, la segunda linea se apoya en las montanas y pierde
   contraste. */
.nl-home .nl-resultado--photo {
	background-position: center 12%;
	background-size: cover;
}

/* Con foto, un velo claro sostiene el texto oscuro. Va fuerte en la mitad de
   arriba, que es donde cae el texto: la foto del diseno tiene el cielo claro
   ahi, pero el velo no puede depender de que la imagen sea esa. */
.nl-home .nl-resultado--photo::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(var(--nl-marfil-rgb), 0.62) 0%,
		rgba(var(--nl-marfil-rgb), 0.5) 40%,
		rgba(var(--nl-marfil-rgb), 0.24) 68%,
		rgba(var(--nl-marfil-rgb), 0.06) 88%,
		rgba(var(--nl-marfil-rgb), 0) 100%);
	content: '';
}

/* El bloque no arranca en el margen: en el diseno empieza al 20,6% del ancho
   y termina al 96,3%, dejando libre toda la zona de la roca a la izquierda.
   Por eso esta seccion no usa .nl-container, que lo pegaria al borde. */
.nl-home .nl-resultado__inner {
	display: grid;
	position: relative;
	align-items: center;
	gap: clamp(22px, 3.4vw, 56px);
	/* Columnas al contenido y no 1fr: con 1fr, en un monitor ancho el titulo
	   se queda en su max-width y la nota se va sola contra el borde derecho. */
	grid-template-columns: minmax(0, auto) auto;
	justify-content: start;
	width: 100%;
	max-width: 1500px;
	margin-left: 20.6%;
	padding-right: var(--nl-gutter);
}

/* 56% del ancho total, como en el diseno. */
.nl-home .nl-resultado__main {
	max-width: 900px;
	padding-left: clamp(20px, 2.6vw, 40px);
	border-left: 1px solid var(--nl-gold-deep);
}

.nl-home .nl-resultado__title {
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.6rem, 2.8vw, 2.7rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.nl-home .nl-resultado__title em {
	display: block;
	color: var(--nl-gold-deep);
	font-style: normal;
}

.nl-home .nl-resultado__note {
	max-width: 250px;
	padding-left: clamp(20px, 2.6vw, 40px);
	border-left: 1px solid var(--nl-gold-deep);
	color: var(--nl-gold-deep);
	font-size: clamp(0.6rem, 0.74vw, 0.72rem);
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 2;
	text-transform: uppercase;
}

/* --- Seccion 09 en pantallas chicas --- */

@media (max-width: 860px) {
	/* En vertical no hay lugar para ese margen: el bloque vuelve al gutter. */
	.nl-home .nl-resultado__inner {
		grid-template-columns: minmax(0, 1fr);
		margin-left: var(--nl-gutter);
		padding-right: var(--nl-gutter);
	}

	.nl-home .nl-resultado__note {
		max-width: none;
	}

	/* En vertical la foto se recorta a lo ancho y la roca sube hasta donde va
	   el texto: se muestra la esquina de cielo y el velo se refuerza. */
	.nl-home .nl-resultado--photo {
		background-position: 74% 0;
	}

	/* El texto ocupa casi toda la altura, asi que el velo se mantiene alto casi
	   hasta el final: en vertical la foto es acompanamiento, no protagonista. */
	.nl-home .nl-resultado--photo::before {
		background: linear-gradient(to bottom,
			rgba(var(--nl-marfil-rgb), 0.9) 0%,
			rgba(var(--nl-marfil-rgb), 0.86) 62%,
			rgba(var(--nl-marfil-rgb), 0.72) 86%,
			rgba(var(--nl-marfil-rgb), 0.35) 100%);
	}
}

/* --------------------------------------------------------------------------
   15. Seccion 10 — ¿Es para mi?
   -------------------------------------------------------------------------- */

.nl-home .nl-parami {
	background: var(--nl-cream);
}

.nl-home .nl-parami__head {
	display: grid;
	align-items: start;
	gap: clamp(24px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr) auto;
	padding-block: clamp(56px, 6vw, 88px) clamp(32px, 3.6vw, 48px);
}

.nl-home .nl-parami__title {
	max-width: 900px;
	margin-bottom: clamp(18px, 2.2vw, 28px);
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.75rem, 3vw, 2.85rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.14;
}

.nl-home .nl-parami__title em {
	display: block;
	color: var(--nl-gold-deep);
	font-style: normal;
}

.nl-home .nl-parami__lead {
	max-width: 62ch;
	color: var(--nl-ink-soft);
	font-size: clamp(0.85rem, 0.98vw, 0.95rem);
	line-height: 1.75;
}

.nl-home .nl-parami__aside {
	max-width: 230px;
	padding-left: clamp(20px, 2.4vw, 34px);
	border-left: 1px solid var(--nl-line);
}

.nl-home .nl-parami__aside-quote {
	margin-bottom: 18px;
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.95rem, 1.15vw, 1.1rem);
	font-style: italic;
	line-height: 1.45;
}

/* --- Las dos mitades --- */

/* Un degradado de corte seco pinta las dos mitades de borde a borde, sin
   duplicar contenedores ni sacar el contenido del container. */
.nl-home .nl-parami__split {
	background: linear-gradient(to right,
		var(--nl-cream-soft) 0 50%,
		var(--nl-card) 50% 100%);
}

.nl-home .nl-parami__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nl-home .nl-parami__col {
	padding-block: clamp(34px, 3.8vw, 52px) clamp(40px, 4.4vw, 62px);
}

.nl-home .nl-parami__col--b {
	padding-left: clamp(26px, 3.4vw, 56px);
}

.nl-home .nl-parami__label {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(18px, 2.2vw, 28px);
	color: var(--nl-gold-deep);
	font-size: clamp(0.6rem, 0.74vw, 0.72rem);
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
}

.nl-home .nl-parami__label::after {
	flex: 1 1 auto;
	height: 1px;
	background: var(--nl-gold-deep);
	opacity: 0.6;
	content: '';
}

.nl-home .nl-parami__label--second {
	margin-top: clamp(28px, 3.2vw, 44px);
}

/* --- Columna izquierda: perfil con iconos --- */

.nl-home .nl-parami__perfil {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nl-home .nl-parami__perfil-item {
	display: grid;
	align-items: start;
	gap: clamp(14px, 1.8vw, 24px);
	grid-template-columns: auto minmax(0, 1fr);
	padding-block: clamp(16px, 1.8vw, 24px);
}

.nl-home .nl-parami__perfil-item + .nl-parami__perfil-item {
	border-top: 1px solid var(--nl-line);
}

.nl-home .nl-parami__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: clamp(46px, 4vw, 58px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #d8ddd0;
	color: var(--nl-ink);
}

.nl-home .nl-parami__perfil-title {
	margin-bottom: 8px;
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.98rem, 1.24vw, 1.18rem);
	font-weight: 400;
	line-height: 1.32;
}

.nl-home .nl-parami__perfil-text {
	color: var(--nl-ink-soft);
	font-size: clamp(0.76rem, 0.88vw, 0.84rem);
	line-height: 1.6;
}

/* --- Columna derecha: listas con punto --- */

.nl-home .nl-parami__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nl-home .nl-parami__lista li {
	position: relative;
	padding-left: 26px;
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.95rem, 1.16vw, 1.1rem);
	line-height: 1.4;
}

.nl-home .nl-parami__lista li + li {
	margin-top: clamp(12px, 1.4vw, 18px);
}

.nl-home .nl-parami__lista li::before {
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nl-gold);
	content: '';
}

/* --- Seccion 10 en pantallas chicas --- */

@media (max-width: 900px) {
	.nl-home .nl-parami__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-parami__aside {
		max-width: none;
	}

	/* En una columna el corte vertical no aplica: cada mitad lleva su fondo. */
	.nl-home .nl-parami__split {
		background: var(--nl-cream-soft);
	}

	.nl-home .nl-parami__grid {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 0;
	}

	.nl-home .nl-parami__col {
		padding-inline: var(--nl-gutter);
	}

	.nl-home .nl-parami__col--b {
		padding-left: var(--nl-gutter);
		background: var(--nl-card);
	}
}

/* --------------------------------------------------------------------------
   16. Seccion 11 — Disposicion real
   -------------------------------------------------------------------------- */

.nl-home .nl-disposicion {
	display: grid;
	grid-template-columns: minmax(0, 0.64fr) minmax(0, 1fr);
}

.nl-home .nl-disposicion__media {
	position: relative;
	min-height: clamp(360px, 38vw, 560px);
	margin: 0;
	overflow: hidden;
}

.nl-home .nl-disposicion__media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nl-home .nl-disposicion__body {
	display: grid;
	align-items: center;
	gap: clamp(24px, 3.4vw, 56px);
	grid-template-columns: minmax(0, 1fr) auto;
	padding: clamp(48px, 5.5vw, 84px) clamp(24px, 4vw, 72px);
	background: var(--nl-green-deep);
}

.nl-home .nl-disposicion__text {
	max-width: 620px;
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.4rem, 2.3vw, 2.2rem);
	font-weight: 400;
	line-height: 1.28;
}

/* El remate en dorado arranca en su propio renglon, con aire arriba. */
.nl-home .nl-disposicion__text em {
	display: block;
	margin-top: clamp(16px, 1.8vw, 26px);
	color: var(--nl-gold);
	font-style: normal;
}

.nl-home .nl-disposicion__note {
	align-self: center;
	max-width: 200px;
	padding-left: clamp(20px, 2.6vw, 38px);
	border-left: 1px solid rgba(var(--nl-marfil-rgb), 0.3);
	color: var(--nl-marfil);
	font-size: clamp(0.6rem, 0.74vw, 0.72rem);
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 2;
	text-transform: uppercase;
}

/* --- Seccion 11 en pantallas chicas --- */

@media (max-width: 1000px) {
	.nl-home .nl-disposicion {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-disposicion__media {
		min-height: clamp(260px, 42vw, 380px);
	}
}

@media (max-width: 680px) {
	.nl-home .nl-disposicion__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-disposicion__note {
		max-width: none;
		padding-left: 0;
		padding-top: clamp(20px, 4vw, 28px);
		border-top: 1px solid rgba(var(--nl-marfil-rgb), 0.3);
		border-left: 0;
	}
}

/* --------------------------------------------------------------------------
   17. Seccion 12 — Proxima cohorte y Conversemos
   -------------------------------------------------------------------------- */

/* --- Bloque verde: la cohorte --- */

.nl-home .nl-cohorte__top {
	padding-block: clamp(52px, 5.6vw, 84px);
}

.nl-home .nl-cohorte__top-inner {
	display: grid;
	gap: clamp(30px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}

.nl-home .nl-cohorte__title {
	max-width: 620px;
	margin-bottom: clamp(20px, 2.4vw, 30px);
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.6rem, 2.7vw, 2.6rem);
	font-weight: 400;
	line-height: 1.16;
}

.nl-home .nl-cohorte__title em {
	color: var(--nl-gold);
	font-style: normal;
}

.nl-home .nl-cohorte__lead {
	max-width: 52ch;
	color: rgba(var(--nl-marfil-rgb), 0.82);
	font-size: clamp(0.85rem, 0.96vw, 0.93rem);
	line-height: 1.75;
}

.nl-home .nl-cohorte__tag {
	margin-top: clamp(24px, 2.8vw, 38px);
}

/* La columna derecha arranca con una linea que la separa de la izquierda. */
.nl-home .nl-cohorte__detalle {
	padding-left: clamp(26px, 3.4vw, 56px);
	border-left: 1px solid rgba(var(--nl-marfil-rgb), 0.22);
}

.nl-home .nl-cohorte__specs {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	grid-template-columns: minmax(0, 1fr) auto;
}

.nl-home .nl-cohorte__formato {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nl-home .nl-cohorte__formato li {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 22px);
	padding-block: clamp(9px, 1vw, 14px);
}

.nl-home .nl-cohorte__formato li + li {
	border-top: 1px solid rgba(var(--nl-marfil-rgb), 0.16);
}

.nl-home .nl-cohorte__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: clamp(42px, 3.6vw, 52px);
	aspect-ratio: 1;
	border: 1px solid rgba(var(--nl-marfil-rgb), 0.4);
	border-radius: 50%;
	color: var(--nl-marfil);
}

.nl-home .nl-cohorte__formato-text {
	color: var(--nl-marfil);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.95rem, 1.16vw, 1.1rem);
	line-height: 1.3;
}

.nl-home .nl-cohorte__aside {
	max-width: 180px;
	padding-left: clamp(20px, 2.4vw, 34px);
	border-left: 1px solid rgba(var(--nl-marfil-rgb), 0.22);
}

.nl-home .nl-cohorte__aside-quote {
	color: var(--nl-gold);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.92rem, 1.1vw, 1.05rem);
	font-style: italic;
	line-height: 1.4;
}

.nl-home .nl-cohorte__aside-quote::after {
	display: block;
	width: 34px;
	height: 1px;
	margin: 16px 0;
	background: var(--nl-gold);
	content: '';
}

.nl-home .nl-cohorte__cercana {
	margin-top: clamp(24px, 3vw, 38px);
	padding-top: clamp(20px, 2.4vw, 32px);
	border-top: 1px solid rgba(var(--nl-marfil-rgb), 0.22);
}

.nl-home .nl-cohorte__cercana-title {
	margin-bottom: 12px;
	color: var(--nl-gold);
	font-family: var(--nl-font-serif);
	font-size: clamp(1.15rem, 1.7vw, 1.6rem);
	font-weight: 400;
	line-height: 1.3;
}

.nl-home .nl-cohorte__cercana-text {
	max-width: 58ch;
	color: rgba(var(--nl-marfil-rgb), 0.82);
	font-size: clamp(0.82rem, 0.94vw, 0.9rem);
	line-height: 1.7;
}

/* --- Bloque claro: Conversemos --- */

.nl-home .nl-cohorte__cta {
	padding-block: clamp(40px, 4.6vw, 68px);
	background: var(--nl-cream);
}

.nl-home .nl-cohorte__cta-inner {
	display: grid;
	align-items: center;
	gap: clamp(24px, 3.4vw, 56px);
	grid-template-columns: minmax(0, 1fr) auto auto;
}

.nl-home .nl-cohorte__cta-title {
	margin-bottom: 14px;
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(2.2rem, 4.2vw, 4rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1;
}

.nl-home .nl-cohorte__cta-title::before {
	display: block;
	width: 40px;
	height: 1px;
	margin-bottom: clamp(16px, 1.8vw, 24px);
	background: var(--nl-gold-deep);
	content: '';
}

.nl-home .nl-cohorte__cta-text p {
	max-width: 54ch;
	color: var(--nl-ink-soft);
	font-size: clamp(0.82rem, 0.94vw, 0.9rem);
	line-height: 1.7;
}

.nl-home .nl-cohorte__cta-action {
	padding-inline: clamp(20px, 3vw, 48px);
	border-left: 1px solid var(--nl-gold-deep);
	border-right: 1px solid var(--nl-gold-deep);
}

/* El boton de WhatsApp: mismo pill que el resto, con el logo adelante. */
.nl-home .nl-btn--wa {
	gap: 16px;
	padding-inline: clamp(24px, 2.6vw, 38px);
}

.nl-home .nl-btn__wa {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(var(--nl-marfil-rgb), 0.14);
	color: var(--nl-marfil);
}

.nl-home .nl-cohorte__cta-note {
	max-width: 150px;
}

/* --- Enlace a la consultora --- */
/* Esta landing es de Noelia, no de NL Group Consulting: por eso no lleva el
   header/footer del sitio y todo el resto de los botones va a sus canales
   personales. Este es el unico que sale de ahi, a proposito, hacia la home
   real del sitio. */

.nl-home .nl-cohorte__brand {
	padding-block: clamp(28px, 3.4vw, 44px);
	border-top: 1px solid var(--nl-line);
	background: var(--nl-cream);
	text-align: center;
}

/* --- Pie de firma --- */

.nl-home .nl-cohorte__firma {
	padding-block: clamp(18px, 2vw, 26px);
	border-top: 1px solid var(--nl-line);
	background: var(--nl-cream);
}

.nl-home .nl-cohorte__firma-inner {
	display: grid;
	align-items: center;
	gap: 16px;
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.nl-home .nl-cohorte__firma-name {
	color: var(--nl-ink);
	font-family: var(--nl-font-serif);
	font-size: clamp(0.95rem, 1.15vw, 1.1rem);
}

.nl-home .nl-cohorte__firma-claim {
	color: var(--nl-ink-soft);
	font-size: clamp(0.56rem, 0.68vw, 0.66rem);
	letter-spacing: 0.2em;
	text-align: center;
	text-transform: uppercase;
}

.nl-home .nl-cohorte__firma-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--nl-ink);
	font-size: clamp(0.56rem, 0.68vw, 0.66rem);
	letter-spacing: 0.2em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.nl-home .nl-cohorte__firma-link:hover {
	color: var(--nl-gold-deep);
}

/* --- Seccion 12 en pantallas chicas --- */

@media (max-width: 1100px) {
	.nl-home .nl-cohorte__top-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-cohorte__detalle {
		padding-left: 0;
		padding-top: clamp(24px, 4vw, 36px);
		border-top: 1px solid rgba(var(--nl-marfil-rgb), 0.22);
		border-left: 0;
	}

	.nl-home .nl-cohorte__title,
	.nl-home .nl-cohorte__lead {
		max-width: none;
	}

	.nl-home .nl-cohorte__cta-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En una columna el boton no va entre dos lineas verticales. */
	.nl-home .nl-cohorte__cta-action {
		padding-inline: 0;
		border-left: 0;
		border-right: 0;
	}

	.nl-home .nl-cohorte__cta-note {
		max-width: none;
	}
}

@media (max-width: 680px) {
	.nl-home .nl-cohorte__specs {
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-home .nl-cohorte__aside {
		max-width: none;
		padding-left: 0;
		padding-top: clamp(20px, 4vw, 28px);
		border-top: 1px solid rgba(var(--nl-marfil-rgb), 0.22);
		border-left: 0;
	}

	.nl-home .nl-cohorte__firma-inner {
		grid-template-columns: minmax(0, 1fr);
		text-align: left;
	}

	.nl-home .nl-cohorte__firma-claim {
		text-align: left;
	}

	.nl-home .nl-btn--wa {
		width: 100%;
	}
}

/* Icono de LinkedIn junto a la firma del pie. */
.nl-home .nl-cohorte__firma-name {
	display: flex;
	align-items: center;
	gap: 14px;
}

.nl-home .nl-cohorte__firma-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--nl-ink-soft);
	line-height: 0;
	transition: color 0.25s ease;
}

.nl-home .nl-cohorte__firma-social--linkedin:hover,
.nl-home .nl-cohorte__firma-social--linkedin:focus-visible {
	color: #0a66c2;
}

.nl-home .nl-cohorte__firma-social--instagram:hover,
.nl-home .nl-cohorte__firma-social--instagram:focus-visible {
	color: #d6249f;
}