/**
 * Nuvia Sequera — hoja de estilos principal
 * ------------------------------------------------------------------
 *  1. Tokens de diseño
 *  2. Reinicio y base
 *  3. Accesibilidad
 *  4. Composición (contenedor, secciones, rejillas)
 *  5. Tipografía
 *  6. Componentes
 *  7. Cabecera y navegación
 *  8. Pie
 *  9. Secciones de página
 * 10. Contenido editorial (bloques de WordPress)
 *
 *  Sistema de dos ejes: los componentes son únicos y cambian de acento
 *  según el contenedor tenga [data-eje="terapia"] (lila) o
 *  [data-eje="formacion"] (rosa Ruta4A).
 */

/* ==================================================================
   1. TOKENS DE DISEÑO
   ================================================================== */

:root {
	/* --- Superficies cálidas --------------------------------------- */
	--ns-hueso: #fbf9f7;
	--ns-crema: #f4efe9;
	--ns-arena: #e8ded1;
	--ns-blanco: #ffffff;

	/* --- Tinta ------------------------------------------------------ */
	--ns-tinta: #1e1e1c;          /* negro de marca            15.9:1 */
	--ns-tinta-suave: #55524e;    /* texto secundario           7.4:1 */
	--ns-tinta-tenue: #8a857f;    /* metadatos, solo apoyo            */

	/* --- Lila · eje marca personal y terapia ------------------------ */
	--ns-lila-50: #f6f2fa;
	--ns-lila-100: #ece4f3;
	--ns-lila-200: #d9cae6;
	--ns-lila-300: #bda3d4;
	--ns-lila-400: #9373b1;       /* lila de marca (logo)   decorativo */
	--ns-lila-500: #7e5b9f;       /* texto AA                   4.7:1 */
	--ns-lila-600: #6a4a88;       /* botones, blanco encima     7.1:1 */
	--ns-lila-700: #574073;       /* titulares y enlaces        7.7:1 */
	--ns-lila-900: #2f2340;

	/* --- Rosa · eje formación / Ruta4A ------------------------------ */
	--ns-rosa-50: #fdf5f9;
	--ns-rosa-100: #fae7f1;
	--ns-rosa-200: #f5d3e6;
	--ns-rosa-300: #ecb2d2;       /* rosa de marca (logo Ruta4A)      */
	--ns-rosa-500: #c96a9e;
	--ns-rosa-600: #ac4f81;
	--ns-rosa-700: #8c3d68;       /* texto AA                   6.2:1 */

	/* --- Acento cálido (jersey de la sesión) ------------------------ */
	--ns-ocre: #e9d071;
	--ns-ocre-oscuro: #8a7420;

	/* --- Acento conmutable por eje ----------------------------------
	   Por defecto lila (marca personal / terapia). Cualquier contenedor
	   con [data-eje="formacion"] reescribe estas variables a rosa y todos
	   los componentes de dentro cambian de acento sin CSS adicional.     */
	--ns-acento: var(--ns-lila-400);          /* #9373b1 — el morado de marca */
	--ns-acento-solido: var(--ns-lila-400);   /* botones: morado de marca     */
	--ns-acento-solido-texto: var(--ns-blanco);
	--ns-acento-tenue: var(--ns-lila-50);
	--ns-acento-borde: var(--ns-lila-200);

	/* Decisión de marca: el morado es #9373b1 en todo, también en texto
	   pequeño. Sobre hueso da 3.75:1 — cumple para titular y componentes,
	   se queda por debajo del 4.5 que pediría un rótulo de 13 px. */
	--ns-acento-texto: var(--ns-lila-400);

	/* --- Semánticos -------------------------------------------------- */
	--ns-fondo: var(--ns-hueso);
	--ns-texto: var(--ns-tinta);
	--ns-borde: #e4ddd4;
	--ns-borde-tenue: #efe9e2;

	/* --- Tipografía --------------------------------------------------
	   Tipografías de marca auto-alojadas (ver assets/css/fuentes.css).
	   Los pesos declarados son exactamente los que trae el kit: cualquier
	   otro valor obligaría al navegador a sintetizar el grosor.          */
	--ns-font-display: "TT Ramillas", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--ns-font-texto: "Helvetica Neue LT", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--ns-peso-fino: 100;     /* Helvetica Neue Thin Italic — cursivas    */
	--ns-peso-ligero: 300;   /* Helvetica Neue Light — entradillas       */
	--ns-peso-normal: 400;   /* Helvetica Neue Roman  — texto corrido    */
	--ns-peso-medio: 500;    /* Helvetica Neue Medium · TT Ramillas Medium */
	--ns-peso-fuerte: 700;   /* Helvetica Neue Bold   — botones, rótulos */
	--ns-peso-negro: 900;    /* TT Ramillas Black     — numerales        */

	/* Escala fluida — cuerpo generoso: el público de Nuvia es adulto
	   y lee textos largos y reflexivos.                                 */
	--ns-t-display: clamp(2.75rem, 1.6rem + 5vw, 5.25rem);
	/* Titular del héroe: cabe en la columna de texto (40rem) sin que
	   ninguna palabra desborde sobre la fotografía. */
	--ns-t-heroe: clamp(2.5rem, 1.7rem + 2.9vw, 4.5rem);
	--ns-t-h1: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);
	--ns-t-h2: clamp(1.875rem, 1.4rem + 2.2vw, 2.875rem);
	--ns-t-h3: clamp(1.3rem, 1.15rem + 0.8vw, 1.75rem);
	--ns-t-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
	--ns-t-cuerpo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--ns-t-grande: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
	--ns-t-pequeno: 0.9375rem;
	--ns-t-micro: 0.8125rem;

	--ns-alto-titular: 1.1;
	--ns-alto-cuerpo: 1.7;

	/* --- Espaciado --------------------------------------------------- */
	--ns-e-1: 0.25rem;
	--ns-e-2: 0.5rem;
	--ns-e-3: 0.75rem;
	--ns-e-4: 1rem;
	--ns-e-5: 1.5rem;
	--ns-e-6: 2rem;
	--ns-e-7: 3rem;
	--ns-e-8: 4rem;
	--ns-e-9: 6rem;
	--ns-seccion: clamp(4rem, 9vw, 8rem);

	/* --- Composición --------------------------------------------------
	   El ancho general es amplio para que la fotografía respire; la
	   medida de lectura se mantiene acotada aparte, en --ns-ancho-texto,
	   porque una línea de texto larga se lee peor por mucho sitio que
	   haya.                                                              */
	--ns-ancho: 1480px;
	--ns-ancho-medio: 1120px;
	--ns-ancho-texto: 70ch;
	--ns-gutter: clamp(1.25rem, 5vw, 4rem);

	/* --- Formas ------------------------------------------------------- */
	--ns-radio-s: 6px;
	--ns-radio-m: 12px;
	--ns-radio-l: 20px;
	--ns-radio-xl: 32px;
	--ns-radio-pill: 999px;

	--ns-sombra-s: 0 1px 2px rgb(30 30 28 / 6%), 0 4px 12px rgb(30 30 28 / 4%);
	--ns-sombra-m: 0 2px 4px rgb(30 30 28 / 5%), 0 12px 32px rgb(30 30 28 / 7%);

	--ns-transicion: 200ms cubic-bezier(0.32, 0.72, 0, 1);
	--ns-cabecera-alto: 76px;

	/*
	 * Dónde empieza el tagline dentro de los logotipos de Nosotras y
	 * Nosotros (logo-nosotras/nosotros-*.svg): la «N» sale hasta el
	 * borde, pero «Una ruta de...» arranca más adentro. Medido en los
	 * propios trazos del SVG — el grupo del tagline empieza en x=208.13
	 * de un viewBox de 690.43 de ancho — así que cualquier texto que
	 * vaya debajo del logotipo se alinea con esta fracción de su ancho
	 * (más el propio margen del logotipo), no con el borde de la «N».
	 * Se repite en assets/css/rutas.css y assets/css/aula.css, que no
	 * cargan siempre junto a esta hoja.
	 */
	--ns-ruta-tagline-fraccion: 0.3015;
}

/* Eje formación (Ruta4A): mismo sistema de componentes, acento rosa. */
[data-eje="formacion"] {
	--ns-acento: var(--ns-rosa-300);
	--ns-acento-texto: var(--ns-rosa-700);
	--ns-acento-solido: var(--ns-rosa-300);
	--ns-acento-solido-texto: var(--ns-tinta);
	--ns-acento-tenue: var(--ns-rosa-50);
	--ns-acento-borde: var(--ns-rosa-200);
}

/* ==================================================================
   2. REINICIO Y BASE
   ================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ns-cabecera-alto) + 1rem);
}

body {
	margin: 0;
	background-color: var(--ns-fondo);
	color: var(--ns-texto);
	font-family: var(--ns-font-texto);
	font-size: var(--ns-t-cuerpo);
	line-height: var(--ns-alto-cuerpo);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	/* El kit trae los pesos y la cursiva que usa el diseño: si algo no
	   existe, preferimos verlo a que el navegador lo falsifique. */
	font-synthesis: none;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--ns-e-4);
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	line-height: var(--ns-alto-titular);
	text-wrap: balance;
	color: var(--ns-tinta);
}

h1 { font-size: var(--ns-t-h1); }
h2 { font-size: var(--ns-t-h2); }
h3 { font-size: var(--ns-t-h3); }
h4 { font-size: var(--ns-t-h4); font-family: var(--ns-font-texto); font-weight: var(--ns-peso-fuerte); letter-spacing: 0; }

p {
	margin: 0 0 var(--ns-e-5);
	text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

a {
	color: var(--ns-acento-texto);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--ns-transicion);
}

a:hover { color: var(--ns-tinta); }

img, picture, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { padding-inline-start: 1.35em; }
li { margin-bottom: var(--ns-e-2); }

blockquote { margin: 0; }

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

strong, b { font-weight: var(--ns-peso-fuerte); }

/* Decisión de marca: nunca cursiva. Con TT Ramillas sin itálica real, una
   cursiva forzaría un cambio de familia a media frase; el énfasis se marca
   con peso, no con inclinación (ver también .ns-enfasis y .ns-frase em). */
em, i, cite { font-style: normal; font-weight: var(--ns-peso-medio); }

hr {
	border: 0;
	border-top: 1px solid var(--ns-borde);
	margin: var(--ns-e-7) 0;
}

::selection {
	background-color: var(--ns-lila-200);
	color: var(--ns-tinta);
}

/* ==================================================================
   3. ACCESIBILIDAD
   ================================================================== */

/* Anillo de foco visible y consistente en toda la interfaz */
:focus-visible {
	outline: 3px solid var(--ns-lila-600);
	outline-offset: 3px;
	border-radius: var(--ns-radio-s);
}

/* Sobre fondos oscuros o de acento el anillo cambia a blanco */
.ns-seccion--tinta :focus-visible,
.ns-seccion--acento-solido :focus-visible {
	outline-color: var(--ns-blanco);
}

.ns-solo-lectores {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Salto al contenido: oculto hasta recibir foco por teclado */
.ns-saltar {
	position: absolute;
	top: var(--ns-e-3);
	left: var(--ns-e-3);
	z-index: 999;
	padding: var(--ns-e-3) var(--ns-e-5);
	background-color: var(--ns-tinta);
	color: var(--ns-blanco);
	border-radius: var(--ns-radio-pill);
	text-decoration: none;
	font-size: var(--ns-t-pequeno);
	font-weight: var(--ns-peso-fuerte);
	transform: translateY(-150%);
	transition: transform var(--ns-transicion);
}

.ns-saltar:focus-visible {
	transform: translateY(0);
	color: var(--ns-blanco);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.ns-revelar { opacity: 1 !important; transform: none !important; }
}

/* Modo de alto contraste de Windows */
@media (forced-colors: active) {
	.ns-boton { border: 1px solid ButtonText; }
	.ns-tarjeta { border: 1px solid CanvasText; }
}

/* ==================================================================
   4. COMPOSICIÓN
   ================================================================== */

.ns-contenedor {
	width: 100%;
	max-width: var(--ns-ancho);
	margin-inline: auto;
	padding-inline: var(--ns-gutter);
}

.ns-contenedor--medio { max-width: var(--ns-ancho-medio); }
.ns-contenedor--texto { max-width: var(--ns-ancho-texto); }

.ns-seccion {
	padding-block: var(--ns-seccion);
	position: relative;
}

.ns-seccion--compacta { padding-block: clamp(2.5rem, 6vw, 5rem); }
.ns-seccion--crema { background-color: var(--ns-crema); }
.ns-seccion--tenue { background-color: var(--ns-acento-tenue); }
.ns-seccion--blanca { background-color: var(--ns-blanco); }

.ns-seccion--tinta {
	background-color: var(--ns-tinta);
	color: var(--ns-hueso);
}

.ns-seccion--tinta h1,
.ns-seccion--tinta h2,
.ns-seccion--tinta h3,
.ns-seccion--tinta h4 { color: var(--ns-hueso); }

.ns-seccion--tinta a { color: var(--ns-lila-300); }
.ns-seccion--tinta a:hover { color: var(--ns-blanco); }

/* Rejillas reutilizables */
.ns-rejilla {
	display: grid;
	gap: var(--ns-e-6);
}

/* --2 se declara explícita: con auto-fit el ancho del contenedor daba
   tres columnas y dejaba huérfana la cuarta tarjeta. */
.ns-rejilla--2 { grid-template-columns: 1fr; }

@media (min-width: 48rem) {
	.ns-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
}

.ns-rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ns-rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Dos columnas asimétricas: texto + imagen */
.ns-duo {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

@media (min-width: 62rem) {
	.ns-duo { grid-template-columns: 1fr 1fr; }
	.ns-duo--texto-ancho { grid-template-columns: 1.15fr 0.85fr; }
	.ns-duo--imagen-ancha { grid-template-columns: 0.85fr 1.15fr; }
}

/* ==================================================================
   5. TIPOGRAFÍA
   ================================================================== */

/* Antetítulo: regla corta + versalitas espaciadas */
.ns-antetitulo {
	display: flex;
	align-items: center;
	gap: var(--ns-e-3);
	margin-bottom: var(--ns-e-4);
	font-family: var(--ns-font-texto);
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ns-acento-texto);
	line-height: 1.4;
}

.ns-antetitulo::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 1px;
	background-color: var(--ns-acento);
}

.ns-antetitulo--centrado { justify-content: center; }

.ns-display {
	font-size: var(--ns-t-display);
	font-weight: var(--ns-peso-negro);
}

/* Entradilla bajo los titulares — Helvetica Neue Light, más aire */
.ns-entradilla {
	font-size: var(--ns-t-grande);
	font-weight: var(--ns-peso-ligero);
	line-height: 1.55;
	color: var(--ns-tinta-suave);
	max-width: 46ch;
	text-wrap: pretty;
}

.ns-entradilla--centrada { margin-inline: auto; }

.ns-prosa > * + * { margin-top: var(--ns-e-5); }
.ns-prosa { max-width: var(--ns-ancho-texto); }

/* Énfasis dentro de un titular: la voz personal de Nuvia.
   TT Ramillas no tiene cursiva, así que el énfasis es de color, no de
   inclinación — nada de cursivas sintéticas en un serif de alto contraste. */
.ns-enfasis {
	position: relative;
	display: inline-block;
	font-family: var(--ns-font-display);
	font-style: normal;
	/* Titular a tamaño display: 3.75:1 basta y así se ve el morado real. */
	color: var(--ns-lila-400);
}

/* --- Chispa decorativa -------------------------------------------------
   Un solo acento suelto en toda la web, en el cierre. Gira despacísimo
   cuando el movimiento no está reducido; si lo está, se queda quieta. */
.ns-chispa {
	position: absolute;
	width: clamp(2.5rem, 5vw, 3.5rem);
	height: clamp(2.5rem, 5vw, 3.5rem);
	color: var(--ns-acento);
	pointer-events: none;
}

/* ------------------------------------------------------------------
   El logotipo tipográfico Ruta4A
   ------------------------------------------------------------------
   «Ruta4A» no es texto corriente: es una marca. Aparezca donde aparezca
   —en un botón, en mitad de un párrafo o en un titular— se compone
   siempre igual, en TT Ramillas Black y con sus propios colores, sin
   heredar los del contexto. Lo monta ns_marcar_ruta4a() en
   inc/plantillas.php.
   ------------------------------------------------------------------ */
.ns-ruta4a {
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-style: normal;
	letter-spacing: -0.025em;
	color: var(--ns-tinta);
	/* El serif tiene menor altura de x que la Helvetica del texto: este
	   ajuste lo iguala ópticamente cuando va embebido en una frase. */
	font-size: 1.04em;
}

.ns-ruta4a .ns-cuatro { color: var(--ns-rosa-300); }

/* Sobre el campo rosa el «4» va en blanco — así lo resuelve la cubierta
   del dosier, porque el rosa sobre rosa desaparecería. */
.ns-sala .ns-ruta4a .ns-cuatro,
.ns-seccion--tenue[data-eje="formacion"] .ns-ruta4a .ns-cuatro,
[data-eje="formacion"] .ns-seccion--tenue .ns-ruta4a .ns-cuatro {
	color: var(--ns-blanco);
}

/* Sobre fondo oscuro «Ruta» y «A» pasan a hueso; el «4» mantiene su rosa. */
.ns-seccion--tinta .ns-ruta4a,
.ns-escena--clara .ns-ruta4a,
.ns-pie .ns-ruta4a {
	color: var(--ns-hueso);
}

/* Sobre un botón de color macizo, «Ruta» y «A» toman el color del propio
   botón y el «4» se queda en blanco. Es el mismo criterio que aplica el
   dosier en su cubierta: cuando el fondo se come un color de la marca, ese
   color se invierte en lugar de desaparecer. */
.ns-boton--primario .ns-ruta4a,
.ns-boton--tinta .ns-ruta4a,
.ns-boton--claro .ns-ruta4a,
.ns-boton--secundario .ns-ruta4a {
	color: inherit;
}

.ns-boton--primario .ns-ruta4a .ns-cuatro,
.ns-boton--tinta .ns-ruta4a .ns-cuatro {
	color: var(--ns-blanco);
}

/* El botón secundario y el claro van sobre fondo pálido: ahí el rosa sí
   se distingue y el «4» conserva su color. */
.ns-boton--secundario .ns-ruta4a .ns-cuatro,
.ns-boton--claro .ns-ruta4a .ns-cuatro {
	color: var(--ns-rosa-500);
}

/* Botón «Formación Ruta4A» de la cabecera: siempre en rosa, viva la
   página donde viva — es la puerta a la formación, no otro botón más
   del sistema de acento conmutable por eje. Dentro, la marca se compone
   como en el campo rosa (negro con el «4» en blanco), no como el resto
   del botón. */
.ns-boton--ruta4a {
	background-color: var(--ns-rosa-300);
	color: var(--ns-blanco);
}

.ns-boton--ruta4a:hover { background-color: var(--ns-rosa-500); }

.ns-boton--ruta4a .ns-ruta4a { color: var(--ns-tinta); }
.ns-boton--ruta4a .ns-ruta4a .ns-cuatro { color: var(--ns-blanco); }

/* En un titular ya compuesto en TT Ramillas no hace falta reajustar. */
h1 .ns-ruta4a, h2 .ns-ruta4a, h3 .ns-ruta4a,
.ns-rotulo .ns-ruta4a { font-size: inherit; letter-spacing: inherit; }

.ns-centrado { text-align: center; }
.ns-encabezado-seccion { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ns-encabezado-seccion--centrado { text-align: center; max-width: 44rem; margin-inline: auto; }

/* Corazón del logotipo reutilizado como viñeta de marca */
.ns-corazon {
	display: inline-block;
	width: 0.62em;
	height: 0.62em;
	background-color: var(--ns-acento);
	mask: var(--ns-corazon-svg) center / contain no-repeat;
	-webkit-mask: var(--ns-corazon-svg) center / contain no-repeat;
	vertical-align: baseline;
}

:root {
	--ns-corazon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 22C6 17.5 0 13.2 0 7.4 0 3.3 2.9 0 6.6 0 9 0 11 1.4 12 3.5 13 1.4 15 0 17.4 0 21.1 0 24 3.3 24 7.4c0 5.8-6 10.1-12 14.6Z'/%3E%3C/svg%3E");

	/* El mismo corazón orgánico de assets/svg/ilustraciones/corazon.svg,
	   como máscara: para viñetas que deben llevar el trazo dibujado a mano
	   de la marca en vez del corazón geométrico del logotipo. */
	--ns-corazon-marca-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 826.72 715.43'%3E%3Cpath d='M381.38,406.81S475.13-50.69,728.1,4.64c252.97,55.34-30.51,694.66-291.38,710.47C175.84,730.93-112.22,136.88,44.4,72.91,211.56,4.64,381.38,406.81,381.38,406.81Z'/%3E%3C/svg%3E");
}

/* ==================================================================
   6. COMPONENTES
   ================================================================== */

/* --- Botones ------------------------------------------------------ */
.ns-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ns-e-2);
	padding: 0.9em 1.85em;
	border: 1px solid transparent;
	border-radius: var(--ns-radio-pill);
	font-family: var(--ns-font-texto);
	font-size: var(--ns-t-pequeno);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.02em;
	line-height: 1.25;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--ns-transicion), color var(--ns-transicion),
		border-color var(--ns-transicion), transform var(--ns-transicion);
	/* Área táctil mínima recomendada */
	min-height: 44px;
}

.ns-boton:hover { transform: translateY(-1px); }
/* scale además de deshacer la elevación: en táctil no hay :hover, así
   que esta es la única señal de que el botón ha oído la pulsación. */
.ns-boton:active { transform: translateY(0) scale(0.97); }

.ns-boton--primario {
	background-color: var(--ns-acento-solido);
	color: var(--ns-acento-solido-texto);
}

.ns-boton--primario:hover {
	background-color: var(--ns-lila-600);
	color: var(--ns-blanco);
}

/* El CTA del héroe hacia Ruta4A lleva el rosa de esa formación, no el
   lila genérico del resto de botones primarios del sitio. */
.ns-portada .ns-boton--primario {
	background-color: var(--ns-rosa-300);
	color: var(--ns-blanco);
}

[data-eje="formacion"] .ns-boton--primario:hover {
	background-color: var(--ns-rosa-500);
	color: var(--ns-blanco);
}

.ns-boton--secundario {
	background-color: transparent;
	border-color: var(--ns-tinta);
	color: var(--ns-tinta);
}

.ns-boton--secundario:hover {
	background-color: var(--ns-tinta);
	color: var(--ns-hueso);
}

.ns-boton--tinta {
	background-color: var(--ns-rosa-300);
	color: var(--ns-blanco);
}

.ns-boton--tinta:hover {
	background-color: var(--ns-lila-700);
	color: var(--ns-blanco);
}

.ns-boton--claro {
	background-color: var(--ns-hueso);
	color: var(--ns-tinta);
}

.ns-boton--claro:hover { background-color: var(--ns-blanco); color: var(--ns-tinta); }

/* El botón de #terapia lleva el acento de marca en vez del hueso plano
   de #manifiesto: la sección lo pide con más peso, como una llamada a
   la acción propia. */
#terapia .ns-boton--claro {
	background-color: var(--ns-acento-solido);
	color: var(--ns-acento-solido-texto);
}

#terapia .ns-boton--claro:hover {
	background-color: var(--ns-lila-700);
	color: var(--ns-blanco);
}

.ns-boton--grande { padding: 1.05em 2.4em; font-size: 1rem; }

/* Enlace con flecha, para acciones terciarias */
.ns-enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: var(--ns-e-2);
	font-size: var(--ns-t-pequeno);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--ns-acento-texto);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.ns-enlace-flecha svg { transition: transform var(--ns-transicion); flex: none; }
.ns-enlace-flecha:hover svg { transform: translateX(4px); }

.ns-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-e-3);
	margin-top: var(--ns-e-6);
}

.ns-acciones--centradas { justify-content: center; }

/* --- Etiqueta / píldora -------------------------------------------- */
.ns-etiqueta {
	display: inline-flex;
	align-items: center;
	/* Dentro de una tarjeta (flex en columna) se estiraría a todo el
	   ancho; una píldora tiene que ceñirse a su texto. */
	align-self: flex-start;
	gap: var(--ns-e-2);
	padding: 0.4em 0.95em;
	border-radius: var(--ns-radio-pill);
	background-color: var(--ns-acento-tenue);
	border: 1px solid var(--ns-acento-borde);
	color: var(--ns-acento-texto);
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.ns-etiqueta--solida {
	background-color: var(--ns-acento);
	border-color: transparent;
	color: var(--ns-tinta);
}

/* --- Tarjetas ------------------------------------------------------ */
.ns-tarjeta {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde-tenue);
	border-radius: var(--ns-radio-l);
	transition: border-color var(--ns-transicion), transform var(--ns-transicion),
		box-shadow var(--ns-transicion);
}

.ns-tarjeta--interactiva:hover {
	border-color: var(--ns-acento-borde);
	transform: translateY(-3px);
	box-shadow: var(--ns-sombra-m);
}

.ns-tarjeta__titulo {
	font-size: var(--ns-t-h3);
	margin-bottom: var(--ns-e-3);
}

.ns-tarjeta__texto {
	color: var(--ns-tinta-suave);
	font-size: var(--ns-t-pequeno);
	line-height: 1.65;
	margin-bottom: 0;
}

.ns-tarjeta__pie { margin-top: auto; padding-top: var(--ns-e-5); }

.ns-tarjeta__icono {
	/* El trazo de las ilustraciones necesita una escala algo mayor que un
	   icono convencional: así sigue leyéndose como ilustración también en
	   las tarjetas de una columna del móvil. */
	width: clamp(3.75rem, 6vw, 4.75rem);
	height: clamp(3.75rem, 6vw, 4.75rem);
	margin-bottom: clamp(1rem, 1.5vw, 1.25rem);
	color: var(--ns-lila-600);
}

/* --- La sala de las rutas grupales (portada) ---------------------------
   Mismo gesto que la sala rosa de Ruta4A (ver ns-sala en este archivo y
   template-parts/secciones/metodo.php): un campo de color a sangre con
   una forma de la identidad enorme detrás de todo. Aquí el campo es el
   lila de marca y la forma es el corazón, no el «4». Autocontenida a
   propósito: rutas.css no se carga en la portada, así que estas reglas
   no dependen de las suyas. */

.ns-rutas-sala {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--ns-lila-400);
	color: var(--ns-blanco);
}

/* El antetítulo y el título heredan los tonos pensados para fondos
   claros (--ns-acento-texto, tinta): sobre un campo lila saturado hay
   que decírselo explícitamente, igual que hace .ns-cartel en rutas.css. */
.ns-rutas-sala .ns-antetitulo { color: rgb(255 255 255 / 78%); }
.ns-rutas-sala .ns-antetitulo::before { background-color: rgb(255 255 255 / 55%); }
.ns-rutas-sala h2 { color: var(--ns-blanco); }

/*
 * El corazón, a sangre por la esquina y enorme: la misma proporción
 * respecto a la sala que tiene el «4» de Ruta4A respecto a la suya.
 * Regla completa y no solo un ajuste: .ns-cartel__corazon vive en
 * rutas.css, que aquí no se carga, así que su posición de base
 * (absolute, right, bottom, la rotación) hay que darla entera.
 */
.ns-rutas-sala > .ns-cartel__corazon {
	position: absolute;
	z-index: -1;
	right: -8%;
	bottom: -34%;
	width: clamp(30rem, 62vw, 58rem);
	aspect-ratio: 826 / 715;
	transform: rotate(-8deg);
	opacity: 0.22;
	pointer-events: none;
}

.ns-rutas-sala > .ns-cartel__corazon svg { display: block; width: 100%; height: 100%; }
.ns-rutas-sala > .ns-cartel__corazon svg path { fill: var(--ns-blanco); }

.ns-rutas-sala .ns-contenedor { position: relative; z-index: 1; }

/*
 * Cinta del taller gratuito: el único rosa de la portada. Anuncia y
 * lleva a la página de Ruta4A, donde está el cartel entero y la
 * inscripción. Toda la cinta es un enlace, así que el botón de dentro
 * es un <span> con aspecto de botón, no un control aparte.
 */
.ns-anuncio-taller {
	background-color: var(--ns-rosa-300);
	color: var(--ns-tinta);
}

.ns-anuncio-taller__enlace {
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: background-color var(--ns-transicion);
}

/* El «4A» de la ruta, a sangre por la derecha y recortado por la propia
   cinta. Es la misma pieza que hace de marca de agua en el héroe de
   Ruta4A y en el cartel del taller. */
.ns-anuncio-taller__marca {
	position: absolute;
	top: 50%;
	right: -3%;
	translate: 0 -50%;
	z-index: -1;
	width: clamp(16rem, 27vw, 32rem);
	height: auto;
	pointer-events: none;
}

.ns-anuncio-taller__enlace:hover,
.ns-anuncio-taller__enlace:focus-visible {
	background-color: #f2c8e0;
}

.ns-anuncio-taller__enlace:focus-visible {
	outline: 3px solid var(--ns-tinta);
	outline-offset: -6px;
}

.ns-anuncio-taller__interior {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"rotulo accion"
		"titulo accion"
		"fecha  accion";
	align-items: center;
	column-gap: clamp(1.5rem, 4vw, 3rem);
	row-gap: 0.4rem;
	padding-block: clamp(1.25rem, 2.5vw, 1.9rem);
}

.ns-anuncio-taller__rotulo {
	grid-area: rotulo;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-fuerte);
	line-height: 1.2;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

/* Grande a propósito: sobre el campo rosa el «4» va en blanco, y a
   tamaño de rótulo se leería como un hueco en la palabra en vez de como
   el logotipo que es. */
.ns-anuncio-taller__rotulo .ns-ruta4a {
	font-size: 2em;
	letter-spacing: -0.03em;
	text-transform: none;
}

.ns-anuncio-taller .ns-ruta4a .ns-cuatro {
	color: var(--ns-blanco);
}

/* «gratuito» sí se queda en tinta: en el cartel es blanco y enorme, pero
   aquí es un rótulo de 13 px y el blanco sobre rosa no se leería. */
.ns-anuncio-taller__rotulo strong {
	color: inherit;
}

.ns-anuncio-taller__separador {
	width: 1.5rem;
	height: 1px;
	background-color: currentColor;
}

.ns-anuncio-taller__titulo {
	grid-area: titulo;
	max-width: 36ch;
	margin: 0;
	font-family: var(--ns-font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.9rem);
	font-weight: var(--ns-peso-negro);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.ns-anuncio-taller__fecha {
	grid-area: fecha;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.6rem;
	margin: 0;
	font-size: var(--ns-t-pequeno);
	line-height: 1.45;
}

/* El punto va pegado al dato que separa, no suelto entre los dos: así,
   cuando la línea rompe, no se queda un «·» colgando al final. */
.ns-anuncio-taller__fecha > * + *::before {
	content: "·";
	margin-right: 0.6rem;
}

.ns-anuncio-taller__accion {
	grid-area: accion;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.6rem;
	border-radius: var(--ns-radio-pill);
	background-color: var(--ns-tinta);
	color: var(--ns-blanco);
	font-size: var(--ns-t-pequeno);
	font-weight: var(--ns-peso-fuerte);
	line-height: 1;
	white-space: nowrap;
	transition: transform var(--ns-transicion);
}

.ns-anuncio-taller__enlace:hover .ns-anuncio-taller__accion,
.ns-anuncio-taller__enlace:focus-visible .ns-anuncio-taller__accion {
	transform: translateX(3px);
}

@media (max-width: 48rem) {
	.ns-anuncio-taller__marca {
		right: -14%;
		width: 15rem;
	}

	.ns-anuncio-taller__interior {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"rotulo"
			"titulo"
			"fecha"
			"accion";
		row-gap: var(--ns-e-3);
	}

	.ns-anuncio-taller__accion {
		justify-self: start;
		margin-top: var(--ns-e-2);
	}
}

.ns-anuncio-ruta {
	--ns-ruta-margen: clamp(1.5rem, 3vw, 2.25rem);

	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--ns-radio-l);
	background-color: var(--ns-lila-600);
	color: var(--ns-blanco);
	text-decoration: none;
	transition: transform var(--ns-transicion), box-shadow var(--ns-transicion);
}

.ns-anuncio-ruta:hover,
.ns-anuncio-ruta:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--ns-sombra-m);
}

/* La foto, real y a tamaño legible: una franja propia, no una textura
   apagada detrás del texto. Relativa porque el logotipo se apoya encima. */
.ns-anuncio-ruta__foto {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

/*
 * Solo la foto, no el logotipo: los dos son <img> dentro del mismo
 * contenedor, y sin este :not() esta regla ganaba por especificidad y
 * estiraba el logotipo al 100% × 100% del marco de la foto.
 */
.ns-anuncio-ruta__foto img:not( .ns-anuncio-ruta__logo ) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 24%;
	display: block;
}

/*
 * Velo morado tras el logotipo, arriba de la foto: sin él, según qué
 * foto, el logotipo blanco pierde legibilidad contra las zonas claras
 * de la imagen. El mismo morado del cuerpo de la tarjeta, para que el
 * degradado lea como una continuación de ese color, no como un añadido.
 */
.ns-anuncio-ruta__foto::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 55%;
	background: linear-gradient(to bottom, var(--ns-lila-600) 0%, transparent 100%);
	pointer-events: none;
}

.ns-anuncio-ruta__interior {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ns-e-3);
	padding: var(--ns-ruta-margen);
	/*
	 * El texto no arranca en el margen de la tarjeta: arranca donde
	 * arranca el tagline dentro del logotipo («Una ruta de...», no la
	 * «N»), justo encima. Es la misma cuenta que pediste alinear en
	 * todos los sitios donde sale este logotipo — ver el comentario de
	 * --ns-ruta-tagline-fraccion en el bloque de tokens.
	 */
	padding-left: calc(
		var(--ns-ruta-margen) +
		( 100% - var(--ns-ruta-margen) * 2 ) * var(--ns-ruta-tagline-fraccion)
	);
}

/*
 * El mismo logotipo que en la cabecera de cada página, a un tamaño que
 * de verdad se lee (con el lema que lleva incrustado el propio SVG).
 * Arriba de la foto, sobre el velo morado: ocupa el ancho de la
 * tarjeta menos el mismo margen que usa el cuerpo de texto, para que
 * sus bordes se alineen con el resto del contenido.
 */
.ns-anuncio-ruta__logo {
	position: absolute;
	z-index: 1;
	left: var(--ns-ruta-margen);
	top: clamp(1.25rem, 2.5vw, 1.75rem);
	display: block;
	width: calc(100% - var(--ns-ruta-margen) * 2);
	height: auto;
}

/* El titular del cartel, el mismo texto que abre cada página — no el
   lema corto. */
.ns-anuncio-ruta__titular {
	margin: 0;
	font-family: var(--ns-font-texto);
	font-weight: var(--ns-peso-ligero);
	font-size: clamp(1.4rem, 1.05rem + 1.5vw, 1.85rem);
	line-height: 1.16;
	letter-spacing: -0.01em;
}

.ns-anuncio-ruta__titular span { display: block; }

.ns-anuncio-ruta__sello {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-e-5);
	margin-top: auto;
	padding-top: var(--ns-e-4);
	border-top: 1px solid rgb(255 255 255 / 22%);
}

.ns-anuncio-ruta__sello strong {
	display: block;
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: var(--ns-t-h4);
	line-height: 1;
}

.ns-anuncio-ruta__sello span {
	display: block;
	margin-top: 0.2em;
	color: rgb(255 255 255 / 78%);
	font-size: var(--ns-t-micro);
	letter-spacing: 0.02em;
}

.ns-anuncio-ruta__accion {
	display: inline-flex;
	align-items: center;
	gap: var(--ns-e-2);
	font-weight: var(--ns-peso-fuerte);
	font-size: var(--ns-t-pequeno);
}

.ns-anuncio-ruta__accion svg {
	transition: transform var(--ns-transicion);
}

.ns-anuncio-ruta:hover .ns-anuncio-ruta__accion svg,
.ns-anuncio-ruta:focus-visible .ns-anuncio-ruta__accion svg {
	transform: translateX(3px);
}

/* --- Ilustraciones de línea fina --------------------------------------
   Sustituyen a la fotografía allí donde el contenido es un concepto, no
   algo que fotografiar. Un solo grosor de trazo, color heredado del
   contexto (tinta por defecto, acento para los puntos), para que convivan
   con la tipografía en vez de competir con ella como lo haría un icono de
   librería relleno. */
/* Sin tamaño propio a propósito: cada sitio donde se usa (ns-tarjeta__icono,
   ns-ascenso__icono, ns-eje__icono, ns-figura__garabato, ns-chispa…) trae su
   propia clase con el tamaño, y así no hay pelea de cascada por el orden en
   que aparezcan las reglas en la hoja de estilos. */
.ns-ilustracion {
	display: block;
	overflow: visible;
	color: var(--ns-tinta);
}

.ns-ilustracion__punto { color: var(--ns-acento); }

/* El grosor original está pensado para un lienzo de 100 unidades. Al
   mostrarse en las tarjetas, un leve refuerzo evita que los detalles se
   desvanezcan en pantallas de alta densidad sin convertirlos en pictogramas
   pesados. */
.ns-tarjeta__icono .ns-ilustracion__linea { stroke-width: 2.9; }

.ns-sala .ns-ilustracion,
.ns-escena--clara .ns-ilustracion { color: var(--ns-hueso); }

.ns-sala .ns-ilustracion__punto { color: var(--ns-tinta); }

@media (prefers-reduced-motion: reduce) {
	.ns-ilustracion * { animation: none !important; }
}

/* --- Los cuatro ejes de la Ruta 4A --------------------------------- */
.ns-eje {
	position: relative;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	padding-top: clamp(3.25rem, 5vw, 4rem);
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde-tenue);
	border-radius: var(--ns-radio-l);
	overflow: hidden;
}

/* Icono en la esquina contraria al numeral gigante, para que no compitan
   por el mismo rincón de la tarjeta. */
.ns-eje__icono {
	position: relative;
	width: clamp(2.25rem, 4vw, 2.75rem);
	height: clamp(2.25rem, 4vw, 2.75rem);
	margin-bottom: var(--ns-e-3);
	color: var(--ns-tinta-tenue);
}

/* Numeral editorial sobredimensionado en tinta de acento */
.ns-eje__numero {
	position: absolute;
	top: -0.32em;
	right: 0.12em;
	font-family: var(--ns-font-display);
	font-size: clamp(6rem, 11vw, 9rem);
	font-weight: var(--ns-peso-negro);
	line-height: 1;
	color: var(--ns-acento);
	opacity: 0.16;
	pointer-events: none;
	user-select: none;
}

/* «Autoreconocimiento» es la palabra más larga del modelo y marca el
   tamaño máximo posible aquí: con la escala h3 se salía de la tarjeta.
   La partición silábica en español la resuelve sin descuadrar la rejilla. */
.ns-eje__titulo {
	position: relative;
	font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.45rem);
	margin-bottom: var(--ns-e-3);
	overflow-wrap: break-word;
	hyphens: auto;
	text-wrap: balance;
}

.ns-eje__texto {
	position: relative;
	color: var(--ns-tinta-suave);
	font-size: var(--ns-t-pequeno);
	line-height: 1.65;
	margin: 0;
}

/* --- Cita destacada ------------------------------------------------- */
.ns-cita {
	position: relative;
	padding-left: clamp(1.25rem, 3vw, 2.25rem);
	border-left: 2px solid var(--ns-acento);
}

/* En el manifiesto esta cita hace de titular de la sección, así que
   comparte el peso Black. Las citas dentro de un artículo (más abajo)
   se quedan en Medium: ahí son voz, no estructura. */
.ns-cita__texto {
	font-family: var(--ns-font-display);
	font-size: clamp(1.35rem, 0.9rem + 1.9vw, 2.25rem);
	font-weight: var(--ns-peso-negro);
	line-height: 1.25;
	margin-bottom: var(--ns-e-4);
	text-wrap: balance;
}

.ns-cita__autoria {
	font-size: var(--ns-t-pequeno);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ns-tinta-tenue);
	margin: 0;
}

/* --- Acordeón (programa y preguntas frecuentes) --------------------- */
.ns-acordeon {
	border-top: 1px solid var(--ns-borde);
}

.ns-acordeon__item {
	border-bottom: 1px solid var(--ns-borde);
}

.ns-acordeon__cabecera {
	display: flex;
	align-items: flex-start;
	gap: var(--ns-e-4);
	width: 100%;
	padding: var(--ns-e-5) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--ns-font-texto);
	transition: color var(--ns-transicion);
}

/* Oculta el triángulo nativo en todos los motores */
.ns-acordeon__cabecera::-webkit-details-marker { display: none; }
.ns-acordeon__cabecera::marker { content: ""; }

.ns-acordeon__cabecera:hover { color: var(--ns-acento-texto); }

.ns-acordeon__indice {
	flex: none;
	font-family: var(--ns-font-display);
	font-size: 1.05rem;
	font-weight: var(--ns-peso-negro);
	color: var(--ns-acento-texto);
	min-width: 2.5rem;
	padding-top: 0.15em;
}

.ns-acordeon__titulo {
	flex: 1;
	font-family: var(--ns-font-display);
	font-size: var(--ns-t-h3);
	font-weight: var(--ns-peso-negro);
	line-height: 1.25;
	margin: 0;
}

.ns-acordeon__icono {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.35em;
	position: relative;
}

.ns-acordeon__icono::before,
.ns-acordeon__icono::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1.5px;
	background-color: currentColor;
	transition: transform var(--ns-transicion);
}

.ns-acordeon__icono::after { transform: rotate(90deg); }

.ns-acordeon__item[open] .ns-acordeon__icono::after { transform: rotate(0deg); }

.ns-acordeon__cuerpo {
	padding: 0 0 var(--ns-e-6) calc(2.5rem + var(--ns-e-4));
	color: var(--ns-tinta-suave);
	max-width: 62ch;
}

.ns-acordeon__cuerpo > *:last-child { margin-bottom: 0; }

/* Variante sin numeral (preguntas frecuentes): sin sangrado de columna. */
.ns-acordeon__cuerpo--simple { padding-left: 0; }

@media (max-width: 40rem) {
	.ns-acordeon__cuerpo { padding-left: 0; }
}

/* --- Lista de datos (horas, modalidad…) ----------------------------- */
.ns-datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: var(--ns-e-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-dato { margin: 0; }

.ns-dato__cifra {
	display: block;
	font-family: var(--ns-font-display);
	font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
	font-weight: var(--ns-peso-negro);
	line-height: 1;
	color: var(--ns-acento-texto);
}

.ns-dato__etiqueta {
	display: block;
	margin-top: var(--ns-e-2);
	font-size: var(--ns-t-pequeno);
	color: var(--ns-tinta-suave);
	line-height: 1.45;
}

.ns-seccion--tinta .ns-dato__cifra { color: var(--ns-lila-300); }
.ns-seccion--tinta .ns-dato__etiqueta { color: var(--ns-arena); }

/* --- Lista con viñeta de corazón ------------------------------------ */
.ns-lista-marca {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--ns-e-3);
}

.ns-lista-marca li {
	position: relative;
	padding-left: 2.45rem;
	margin: 0;
}

.ns-lista-marca li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.55em - 0.35rem);
	width: 1.4rem;
	height: 1.4rem;
	background-color: var(--ns-acento);
	mask: var(--ns-corazon-marca-svg) center / contain no-repeat;
	-webkit-mask: var(--ns-corazon-marca-svg) center / contain no-repeat;
}

/* --- Figura orgánica --------------------------------------------------
   Nada de tarjetas: la fotografía se recorta con una forma irregular, como
   un papel cortado a mano, no con esquinas redondeadas uniformes. Tres
   variantes (--org-1/2/3) para que no se repita la misma silueta cada vez
   que aparece una foto. Transición suave al pasar el ratón: la forma
   respira un poco, un gesto pequeño y con intención, no un efecto. */
.ns-figura {
	position: relative;
	margin: 0;
}

.ns-figura img {
	position: relative;
	width: 100%;
	object-fit: cover;
	border-radius: 63% 37% 41% 59% / 44% 38% 62% 56%;
	transition: border-radius 700ms ease;
}

.ns-figura:hover img {
	border-radius: 48% 52% 55% 45% / 55% 45% 58% 42%;
}

.ns-figura--org-2 img { border-radius: 30% 70% 66% 34% / 62% 33% 67% 38%; }
.ns-figura--org-2:hover img { border-radius: 45% 55% 50% 50% / 50% 48% 52% 50%; }

/* Rectángulo limpio, sin mancha orgánica: para cuando la foto ya vive en
   una tarjeta con su propio marco y no necesita otro recorte encima. */
.ns-figura--recta img,
.ns-figura--recta:hover img { border-radius: var(--ns-radio-l); }

.ns-figura--org-3 img { border-radius: 56% 44% 30% 70% / 66% 56% 44% 34%; }
.ns-figura--org-3:hover img { border-radius: 42% 58% 48% 52% / 52% 46% 54% 48%; }

/* Mancha de color desplazada detrás: firma visual del tema. También
   orgánica, con un contorno distinto al de la fotografía para que no
   parezcan la misma forma calcada dos veces. */
.ns-figura--lavado::before {
	content: "";
	position: absolute;
	inset: auto -1.5rem -1.5rem auto;
	width: 72%;
	height: 72%;
	background-color: var(--ns-acento);
	border-radius: 42% 58% 61% 39% / 55% 44% 56% 45%;
	opacity: 0.3;
}

/* Garabato de acento: un trazo suelto que se posa sobre una esquina de la
   fotografía, como una anotación a mano. Se ancla aparte del ::before
   porque necesita su propio color de línea (currentColor) y no participa
   del recorte de la imagen. */
.ns-figura__garabato {
	position: absolute;
	top: -1.25rem;
	left: -1.25rem;
	width: clamp(2.75rem, 6vw, 4rem);
	height: clamp(2.75rem, 6vw, 4rem);
	color: var(--ns-acento);
	rotate: -8deg;
	z-index: 2;
	pointer-events: none;
}

@media (max-width: 30rem) {
	.ns-figura__garabato { top: -0.75rem; left: -0.75rem; }
}

.ns-figura__pie {
	margin-top: var(--ns-e-3);
	font-size: var(--ns-t-micro);
	color: var(--ns-tinta-tenue);
}

.ns-figura--retrato img { aspect-ratio: 3 / 4; }
.ns-figura--paisaje img { aspect-ratio: 4 / 3; }
.ns-figura--cuadrada img { aspect-ratio: 1 / 1; }

@media (prefers-reduced-motion: reduce) {
	.ns-figura img { transition: none; }
}

/* --- Tabla de precios ------------------------------------------------ */
.ns-precio {
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde-tenue);
	border-radius: var(--ns-radio-l);
}

.ns-precio--destacado {
	border-color: var(--ns-acento);
	border-width: 2px;
	background-color: var(--ns-acento-tenue);
}

.ns-precio__cifra {
	font-family: var(--ns-font-display);
	font-size: clamp(2.5rem, 1.8rem + 2.8vw, 3.75rem);
	font-weight: var(--ns-peso-negro);
	line-height: 1;
	margin: var(--ns-e-3) 0 var(--ns-e-2);
}

.ns-precio__nota {
	font-size: var(--ns-t-pequeno);
	color: var(--ns-tinta-suave);
	margin-bottom: var(--ns-e-5);
}

.ns-precio__detalle {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--ns-e-5);
	display: grid;
	gap: var(--ns-e-2);
	font-size: var(--ns-t-pequeno);
	color: var(--ns-tinta-suave);
}

.ns-precio__detalle li { margin: 0; }

/* --- Calendario ------------------------------------------------------ */
.ns-calendario {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.ns-calendario li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ns-e-2) var(--ns-e-5);
	margin: 0;
	padding: var(--ns-e-4) 0;
	border-bottom: 1px solid var(--ns-borde);
}

.ns-calendario li:first-child { border-top: 1px solid var(--ns-borde); }

.ns-calendario__taller {
	flex: none;
	min-width: 5.5rem;
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ns-acento-texto);
}

.ns-calendario__mes {
	flex: none;
	min-width: 8rem;
	font-family: var(--ns-font-display);
	font-size: 1.15rem;
}

.ns-calendario__dias {
	color: var(--ns-tinta-suave);
	font-size: var(--ns-t-pequeno);
}

/* --- Aviso / nota ---------------------------------------------------- */
.ns-nota {
	padding: var(--ns-e-5);
	background-color: var(--ns-acento-tenue);
	border-left: 3px solid var(--ns-acento);
	border-radius: 0 var(--ns-radio-m) var(--ns-radio-m) 0;
	font-size: var(--ns-t-pequeno);
	color: var(--ns-tinta-suave);
}

/* --- Revelado al hacer scroll ----------------------------------------
   El estado oculto solo se aplica si hay JavaScript para revelarlo. Sin
   JS —o si el script falla— el contenido se ve, que es lo que importa. */
.ns-con-js .ns-revelar {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ns-con-js .ns-revelar.esta-visible {
	opacity: 1;
	transform: none;
}

/* --- Buscador ---------------------------------------------------------- */
.ns-buscador {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-e-3);
	align-items: center;
}

.ns-buscador__campo {
	flex: 1 1 12rem;
	min-height: 44px;
	padding: 0.7em 1.1em;
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde);
	border-radius: var(--ns-radio-pill);
	color: var(--ns-tinta);
}

.ns-buscador__campo::placeholder { color: var(--ns-tinta-tenue); }
.ns-buscador__campo:focus-visible { border-color: var(--ns-acento); }

/* ==================================================================
   7. CABECERA Y NAVEGACIÓN
   ================================================================== */

/* Barra de progreso: la añade animaciones.js; sin JS no existe, así que
   no hay nada que reservar aquí por adelantado. */
.ns-progreso {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: var(--ns-lila-400);
	transform: scaleX(0);
	transform-origin: left center;
	z-index: 200;
	pointer-events: none;
}

.ns-cabecera {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: color-mix(in srgb, var(--ns-hueso) 88%, transparent);
	backdrop-filter: blur(12px) saturate(1.4);
	-webkit-backdrop-filter: blur(12px) saturate(1.4);
	border-bottom: 1px solid transparent;
	transition: border-color var(--ns-transicion), background-color var(--ns-transicion);
}

/* Sin soporte de backdrop-filter, fondo sólido para no perder contraste */
@supports not (backdrop-filter: blur(1px)) {
	.ns-cabecera { background-color: var(--ns-hueso); }
}

.ns-cabecera.esta-fijada {
	border-bottom-color: var(--ns-borde);
}

.ns-cabecera__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ns-e-5);
	min-height: var(--ns-cabecera-alto);
	transition: min-height var(--ns-transicion);
}

.ns-cabecera.esta-fijada .ns-cabecera__interior {
	min-height: 58px;
}

.ns-marca {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
	color: var(--ns-tinta);
}

.ns-marca img,
.ns-marca svg {
	width: auto;
	height: 80px;
	transition: height var(--ns-transicion);
}

.ns-cabecera.esta-fijada .ns-marca img,
.ns-cabecera.esta-fijada .ns-marca svg {
	height: 44px;
}

@media (max-width: 61.9375rem) {
	.ns-marca img,
	.ns-marca svg {
		height: 52px;
	}

	.ns-cabecera.esta-fijada .ns-marca img,
	.ns-cabecera.esta-fijada .ns-marca svg {
		height: 36px;
	}
}

.ns-marca__texto {
	font-family: var(--ns-font-display);
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.02em;
}

.ns-marca__lema {
	display: block;
	font-family: var(--ns-font-texto);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ns-tinta-tenue);
	margin-top: 0.35em;
}

/* --- Acceso al aula: el icono de usuario ------------------------------
   Sale en todas las páginas, junto al botón de la formación, así que
   sus estilos viven aquí y no en la hoja del aula.                     */

.ns-aula-acceso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ns-e-2);
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--ns-borde);
	border-radius: var(--ns-radio-pill);
	color: var(--ns-tinta);
	background-color: transparent;
	text-decoration: none;
	transition:
		color var(--ns-transicion),
		border-color var(--ns-transicion),
		background-color var(--ns-transicion),
		transform var(--ns-transicion);
}

.ns-aula-acceso:hover {
	color: var(--ns-acento-texto);
	border-color: var(--ns-acento-borde);
	background-color: var(--ns-acento-tenue);
	transform: translateY(-1px);
}

.ns-aula-acceso__icono {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

.ns-aula-acceso__icono svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Con sesión iniciada, un punto lila discreto: se ve de un vistazo. */
.ns-aula-acceso.esta-dentro {
	position: relative;
	border-color: var(--ns-acento-borde);
}

.ns-aula-acceso.esta-dentro::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 0.4rem;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background-color: var(--ns-lila-400);
}

/*
 * El icono aparece dos veces en la cabecera —dentro de la navegación de
 * escritorio y junto a la hamburguesa— y solo una está visible a la vez.
 */
.ns-aula-acceso--movil { display: inline-flex; }

@media (min-width: 62rem) {
	.ns-aula-acceso--movil { display: none; }
}

/* Agrupa el icono y la hamburguesa para que viajen juntos a la derecha. */
.ns-cabecera__acciones {
	display: flex;
	align-items: center;
	gap: var(--ns-e-3);
	flex: none;
}

@media (min-width: 62rem) {
	.ns-cabecera__acciones { display: none; }
}

/* --- Navegación de escritorio ---------------------------------------- */
.ns-nav { display: none; }

@media (min-width: 62rem) {
	.ns-nav {
		display: flex;
		align-items: center;
		gap: clamp(1rem, 2.2vw, 2rem);
	}
}

.ns-nav__lista {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.85rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-nav__lista li { margin: 0; position: relative; }

.ns-nav__lista a {
	display: inline-block;
	padding: 0.4rem 0;
	font-size: 0.9375rem;
	font-weight: var(--ns-peso-medio);
	text-decoration: none;
	color: var(--ns-tinta);
	position: relative;
}

/* Subrayado que crece desde la izquierda */
.ns-nav__lista a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background-color: var(--ns-acento);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ns-transicion);
}

.ns-nav__lista a:hover::after {
	transform: scaleX(1);
}

.ns-nav__lista .current-menu-item > a,
.ns-nav__lista .current_page_item > a { color: var(--ns-acento-texto); }

/* Submenús */
.ns-nav__lista .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 15rem;
	padding: var(--ns-e-3);
	margin: 0;
	list-style: none;
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde-tenue);
	border-radius: var(--ns-radio-m);
	box-shadow: var(--ns-sombra-m);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--ns-transicion), transform var(--ns-transicion),
		visibility var(--ns-transicion);
	z-index: 10;
}

.ns-nav__lista li:hover > .sub-menu,
.ns-nav__lista li:focus-within > .sub-menu,
.ns-nav__lista li.esta-abierto > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ns-nav__lista .sub-menu a {
	display: block;
	padding: var(--ns-e-2) var(--ns-e-3);
	border-radius: var(--ns-radio-s);
}

/*
 * «Qué ofrezco» solo abre el desplegable, así que es un botón y no un
 * enlace (ver ns_menu_desplegable). Se le da exactamente el mismo aspecto
 * que a los demás elementos del menú, subrayado incluido.
 */
.ns-nav__desplegable {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4rem 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: var(--ns-peso-medio);
	color: var(--ns-tinta);
	position: relative;
}

.ns-nav__desplegable::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background-color: var(--ns-acento);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ns-transicion);
}

.ns-nav__lista li:hover > .ns-nav__desplegable::after,
.ns-nav__desplegable[aria-expanded="true"]::after {
	transform: scaleX(1);
}

/* La punta de flecha, dibujada con bordes para no cargar otro SVG. */
.ns-nav__chevron {
	width: 0.45em;
	height: 0.45em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--ns-transicion);
}

.ns-nav__desplegable[aria-expanded="true"] .ns-nav__chevron {
	transform: translateY(0.05em) rotate(225deg);
}

/* Cuando la página abierta cuelga del grupo, el rótulo también se marca. */
.ns-nav__lista .current-menu-ancestor > .ns-nav__desplegable,
.ns-nav__lista .current-menu-parent > .ns-nav__desplegable { color: var(--ns-acento-texto); }

.ns-nav__lista .sub-menu a::after { display: none; }
.ns-nav__lista .sub-menu a:hover { background-color: var(--ns-acento-tenue); color: var(--ns-acento-texto); }

/* --- Botón hamburguesa ------------------------------------------------ */
.ns-hamburguesa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--ns-radio-s);
	cursor: pointer;
	color: var(--ns-tinta);
}

@media (min-width: 62rem) {
	.ns-hamburguesa { display: none; }
}

.ns-hamburguesa__caja {
	position: relative;
	width: 22px;
	height: 14px;
}

.ns-hamburguesa__caja span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background-color: currentColor;
	transition: transform var(--ns-transicion), opacity var(--ns-transicion);
}

.ns-hamburguesa__caja span:nth-child(1) { top: 0; }
.ns-hamburguesa__caja span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.ns-hamburguesa__caja span:nth-child(3) { bottom: 0; }

.ns-hamburguesa[aria-expanded="true"] .ns-hamburguesa__caja span:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.ns-hamburguesa[aria-expanded="true"] .ns-hamburguesa__caja span:nth-child(2) { opacity: 0; }

.ns-hamburguesa[aria-expanded="true"] .ns-hamburguesa__caja span:nth-child(3) {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
}

/* --- Panel móvil ------------------------------------------------------- */
.ns-panel {
	position: fixed;
	inset: var(--ns-cabecera-alto) 0 0 0;
	z-index: 99;
	padding: var(--ns-e-6) var(--ns-gutter) var(--ns-e-8);
	background-color: var(--ns-hueso);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	/* visibility se conmuta de golpe, no se interpola: al abrir cambia en
	   el instante 0 para que el foco pueda entrar en el panel, y al cerrar
	   espera a que termine el desvanecido. */
	transition: opacity var(--ns-transicion), transform var(--ns-transicion),
		visibility 0s linear 200ms;
}

.ns-panel.esta-abierto {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--ns-transicion), transform var(--ns-transicion),
		visibility 0s;
}

@media (min-width: 62rem) {
	.ns-panel { display: none; }
}

.ns-panel__lista {
	list-style: none;
	margin: 0 0 var(--ns-e-6);
	padding: 0;
}

.ns-panel__lista li { margin: 0; border-bottom: 1px solid var(--ns-borde); }

.ns-panel__lista a {
	display: block;
	padding: var(--ns-e-4) 0;
	font-family: var(--ns-font-texto);
	font-size: 0.9375rem;
	font-weight: var(--ns-peso-medio);
	text-decoration: none;
	color: var(--ns-tinta);
}

.ns-panel__lista .current-menu-item > a { color: var(--ns-acento-texto); }

/*
 * En el panel móvil no hace falta desplegar nada: el grupo se anuncia con
 * su rótulo y los cuatro enlaces cuelgan debajo, indentados.
 */
.ns-panel__grupo {
	display: block;
	padding: var(--ns-e-4) 0 var(--ns-e-2);
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ns-tinta-tenue);
}

.ns-panel__lista .sub-menu {
	list-style: none;
	padding: 0 0 var(--ns-e-3) var(--ns-e-4);
	margin: 0;
}

.ns-panel__lista .sub-menu li { border: 0; }

.ns-panel__lista .sub-menu a {
	font-family: var(--ns-font-texto);
	font-size: 1rem;
	padding: var(--ns-e-2) 0;
	color: var(--ns-tinta-suave);
}

/* Bloquea el desplazamiento del fondo con el panel abierto */
body.ns-sin-scroll { overflow: hidden; }

/* ==================================================================
   8. PIE
   ================================================================== */

.ns-pie {
	background-color: var(--ns-tinta);
	color: var(--ns-arena);
	padding-block: clamp(3rem, 7vw, 5.5rem) var(--ns-e-6);
}

.ns-pie a { color: var(--ns-arena); text-decoration: none; }
.ns-pie a:hover { color: var(--ns-blanco); text-decoration: underline; }

.ns-pie__superior {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid rgb(255 255 255 / 12%);
}

@media (min-width: 52rem) {
	.ns-pie__superior { grid-template-columns: 1.4fr 1fr 1fr; }
}

.ns-pie__marca img,
.ns-pie__marca svg { height: 52px; width: auto; margin-bottom: var(--ns-e-4); }

.ns-pie__lema {
	max-width: 34ch;
	font-size: var(--ns-t-pequeno);
	line-height: 1.65;
	color: var(--ns-arena);
	margin: 0;
}

.ns-pie__titulo {
	font-family: var(--ns-font-texto);
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ns-lila-300);
	margin-bottom: var(--ns-e-4);
}

.ns-pie__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ns-e-3);
	font-size: var(--ns-t-pequeno);
}

.ns-pie__lista li { margin: 0; }

.ns-pie__inferior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ns-e-4);
	padding-top: var(--ns-e-6);
	font-size: var(--ns-t-micro);
	color: var(--ns-tinta-tenue);
}

.ns-pie__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-e-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-pie__legal li { margin: 0; }

/* ==================================================================
   9. SECCIONES DE PÁGINA
   ================================================================== */

/* --- Portada: héroe --------------------------------------------------- */
/* A tamaño héroe, Black necesita el tracking más cerrado y algo menos
   de interlínea para que las líneas formen un bloque compacto. */
.ns-heroe__titulo {
	font-size: var(--ns-t-heroe);
	font-weight: var(--ns-peso-negro);
	line-height: 0.98;
	margin-bottom: var(--ns-e-5);
}

.ns-heroe__credenciales {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ns-e-2) var(--ns-e-4);
	list-style: none;
	margin: var(--ns-e-6) 0 0;
	padding: 0;
	font-size: var(--ns-t-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ns-tinta-suave);
	font-weight: var(--ns-peso-medio);
}

.ns-heroe__credenciales li {
	display: flex;
	align-items: center;
	gap: var(--ns-e-4);
	margin: 0;
}

.ns-heroe__credenciales li:not(:last-child)::after {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--ns-lila-300);
}

/* --- Manifiesto (banda oscura con cita) -------------------------------- */
/* 36rem (no 34rem): a ese ancho «No todos los cuidados están
   igualmente repartidos.» —la más larga de las tres afirmaciones—
   entra justa en una sola línea. */
.ns-manifiesto__texto { max-width: 36rem; }

.ns-manifiesto__lista {
	list-style: none;
	padding: 0;
	margin: var(--ns-e-6) 0 0;
	display: grid;
	gap: var(--ns-e-3);
	font-family: var(--ns-font-display);
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.45rem);
	font-weight: var(--ns-peso-medio);
	line-height: 1.4;
	color: var(--ns-lila-200);
}

.ns-manifiesto__lista li { margin: 0; }

/* --- Bloque de método (Ruta 4A) ---------------------------------------- */
.ns-metodo__transversal {
	margin-top: var(--ns-e-6);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background-color: var(--ns-acento-tenue);
	border: 1px dashed var(--ns-acento-borde);
	border-radius: var(--ns-radio-l);
	text-align: center;
}

.ns-metodo__transversal p { margin: 0; color: var(--ns-tinta-suave); font-size: var(--ns-t-pequeno); }

/* --- Llamada a la acción final ------------------------------------------ */
.ns-llamada {
	position: relative;
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}

.ns-chispa--llamada {
	top: -2.75rem;
	left: 50%;
	translate: -132% 0;
}

@media (max-width: 34rem) {
	.ns-chispa--llamada { display: none; }
}

.ns-llamada__titulo {
	font-size: var(--ns-t-h1);
	margin-bottom: var(--ns-e-5);
}

/* --- Cabecera de página interior ----------------------------------------- */
.ns-cabecera-pagina {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3.5rem);
	background-color: var(--ns-acento-tenue);
	border-bottom: 1px solid var(--ns-acento-borde);
}

.ns-cabecera-pagina__titulo { margin-bottom: var(--ns-e-4); }

/* --- Migas de pan --------------------------------------------------------- */
.ns-migas {
	font-size: var(--ns-t-micro);
	color: var(--ns-tinta-suave);
	margin-bottom: var(--ns-e-5);
}

.ns-migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-e-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-migas li { margin: 0; display: flex; gap: var(--ns-e-2); align-items: center; }
.ns-migas li:not(:last-child)::after { content: "/"; color: var(--ns-tinta-tenue); }

/* --- Listado de entradas / cursos ------------------------------------------ */
.ns-entrada-tarjeta {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde-tenue);
	border-radius: var(--ns-radio-l);
	overflow: hidden;
	transition: transform var(--ns-transicion), box-shadow var(--ns-transicion),
		border-color var(--ns-transicion);
}

.ns-entrada-tarjeta:hover {
	transform: translateY(-3px);
	box-shadow: var(--ns-sombra-m);
	border-color: var(--ns-acento-borde);
}

.ns-entrada-tarjeta__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ns-entrada-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.ns-entrada-tarjeta__titulo {
	font-size: var(--ns-t-h3);
	margin-bottom: var(--ns-e-3);
}

.ns-entrada-tarjeta__titulo a { color: inherit; text-decoration: none; }

/* Enlace de cobertura: toda la tarjeta es clicable sin anidar enlaces */
.ns-entrada-tarjeta__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ns-entrada-tarjeta { position: relative; }

.ns-entrada-tarjeta__meta {
	font-size: var(--ns-t-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ns-tinta-tenue);
	margin-bottom: var(--ns-e-3);
}

.ns-entrada-tarjeta__extracto {
	font-size: var(--ns-t-pequeno);
	color: var(--ns-tinta-suave);
	margin-bottom: var(--ns-e-5);
}

.ns-entrada-tarjeta__pie { margin-top: auto; }

/* --- Paginación ------------------------------------------------------------- */
.ns-paginacion {
	margin-top: var(--ns-e-8);
	padding-top: var(--ns-e-6);
	border-top: 1px solid var(--ns-borde);
}

.ns-paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-e-2);
	justify-content: center;
}

.ns-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--ns-e-3);
	border: 1px solid var(--ns-borde);
	border-radius: var(--ns-radio-pill);
	text-decoration: none;
	font-size: var(--ns-t-pequeno);
	color: var(--ns-tinta);
	transition: background-color var(--ns-transicion), border-color var(--ns-transicion);
}

.ns-paginacion .page-numbers:hover { border-color: var(--ns-acento); }

.ns-paginacion .page-numbers.current {
	background-color: var(--ns-acento-solido);
	border-color: var(--ns-acento-solido);
	color: var(--ns-acento-solido-texto);
	font-weight: var(--ns-peso-fuerte);
}

/* ==================================================================
   10. CONTENIDO EDITORIAL (BLOQUES DE WORDPRESS)
   ================================================================== */

.ns-contenido > * { margin-bottom: var(--ns-e-5); }
.ns-contenido > *:last-child { margin-bottom: 0; }

.ns-contenido h2 { margin-top: var(--ns-e-8); }
.ns-contenido h3 { margin-top: var(--ns-e-7); }
.ns-contenido h2:first-child,
.ns-contenido h3:first-child { margin-top: 0; }

.ns-contenido img,
.ns-contenido .wp-block-image img { border-radius: var(--ns-radio-m); }

.ns-contenido figure { margin: var(--ns-e-7) 0; }

.ns-contenido figcaption {
	margin-top: var(--ns-e-3);
	font-size: var(--ns-t-micro);
	color: var(--ns-tinta-tenue);
	text-align: center;
}

.ns-contenido blockquote,
.ns-contenido .wp-block-quote {
	margin: var(--ns-e-7) 0;
	padding-left: clamp(1.25rem, 3vw, 2rem);
	border-left: 2px solid var(--ns-acento);
	font-family: var(--ns-font-display);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem);
	font-weight: var(--ns-peso-medio);
	line-height: 1.4;
}

.ns-contenido blockquote cite {
	display: block;
	margin-top: var(--ns-e-3);
	font-family: var(--ns-font-texto);
	font-size: var(--ns-t-micro);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ns-tinta-tenue);
}

.ns-contenido table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ns-t-pequeno);
}

.ns-contenido th,
.ns-contenido td {
	padding: var(--ns-e-3);
	border-bottom: 1px solid var(--ns-borde);
	text-align: left;
}

.ns-contenido th { font-weight: var(--ns-peso-fuerte); }

/* Tablas y bloques anchos se desplazan dentro de su caja, nunca la página */
.ns-contenido .wp-block-table,
.ns-tabla-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ns-contenido pre {
	padding: var(--ns-e-5);
	background-color: var(--ns-crema);
	border-radius: var(--ns-radio-m);
	overflow-x: auto;
	font-size: var(--ns-t-pequeno);
}

.ns-contenido code {
	font-size: 0.9em;
	background-color: var(--ns-crema);
	padding: 0.15em 0.4em;
	border-radius: var(--ns-radio-s);
}

.ns-contenido pre code { background: none; padding: 0; }

/* Alineaciones de bloque */
.ns-contenido .alignwide {
	width: min(100vw - (var(--ns-gutter) * 2), var(--ns-ancho));
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--ns-gutter), var(--ns-ancho) / 2));
}

.ns-contenido .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.ns-contenido .alignleft {
	float: left;
	margin: 0.35em var(--ns-e-5) var(--ns-e-4) 0;
	max-width: 45%;
}

.ns-contenido .alignright {
	float: right;
	margin: 0.35em 0 var(--ns-e-4) var(--ns-e-5);
	max-width: 45%;
}

.ns-contenido .aligncenter { margin-inline: auto; }

/* Utilidades de espaciado */
.ns-mt-0 { margin-top: 0; }
.ns-mt-4 { margin-top: var(--ns-e-4); }
.ns-mt-5 { margin-top: var(--ns-e-5); }
.ns-mt-6 { margin-top: var(--ns-e-6); }
.ns-mt-7 { margin-top: var(--ns-e-7); }
.ns-mb-0 { margin-bottom: 0; }

/* Impresión */
@media print {
	.ns-cabecera, .ns-panel, .ns-pie, .ns-acciones, .ns-saltar { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.ns-seccion { padding-block: 1rem; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* ==================================================================
   11. ESCENAS — la capa espectacular
   ------------------------------------------------------------------
   Todo lo de aquí sale del Dosier-Ruta4A.pdf, que ya tenía un lenguaje
   propio y muy poco genérico:

     · el campo rosa #ecb2d2 a sangre, plano y sin textura
     · un «4» gigantesco que se sale del lienzo, en un tono del propio rosa
     · tarjetas blancas de esquina muy redondeada flotando sobre el rosa
     · frases que mezclan cursiva ligera de palo seco con una palabra en
       serif Black («Ampliación del autoconcepto como terapeuta»)
     · los cuatro ejes como ascenso, no como rejilla de iguales

   La web entra literalmente en esa habitación rosa cuando llega a la
   formación. Es el golpe de efecto y es el único: alrededor, disciplina.
   ================================================================== */

/* --- Sección a sangre con imagen de fondo ---------------------------- */
.ns-escena {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding-block: var(--ns-e-9);
	overflow: hidden;
	isolation: isolate;
}

.ns-escena--media { min-height: 88svh; }

.ns-escena__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ns-escena__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
}

/* Las fotos de #manifiesto y #terapia son apaisadas, con Nuvia a la
   derecha y medio encuadre liso a la izquierda: el sesgo horizontal
   mantiene ese hueco visible para el texto en vez del recorte vertical
   pensado para retratos. */
#manifiesto .ns-escena__fondo img { object-position: 74% center; }
#terapia .ns-escena__fondo img { object-position: 73% center; }

/* Velo para que el texto encima siempre tenga contraste suficiente,
   sin apagar la fotografía más de lo necesario. */
.ns-escena__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ns-escena__velo--tinta {
	background: linear-gradient(
		100deg,
		rgb(30 30 28 / 88%) 0%,
		rgb(30 30 28 / 72%) 38%,
		rgb(30 30 28 / 25%) 72%,
		rgb(30 30 28 / 10%) 100%
	);
}

.ns-escena__velo--base {
	background: linear-gradient(
		to top,
		rgb(30 30 28 / 82%) 0%,
		rgb(30 30 28 / 45%) 42%,
		rgb(30 30 28 / 5%) 78%
	);
}

/* Espejo de --tinta: oscurece la derecha en vez de la izquierda, para las
   escenas donde el texto se empaqueta al otro lado. */
.ns-escena__velo--tinta-derecha {
	background: linear-gradient(
		260deg,
		rgb(30 30 28 / 88%) 0%,
		rgb(30 30 28 / 72%) 38%,
		rgb(30 30 28 / 25%) 72%,
		rgb(30 30 28 / 10%) 100%
	);
}

/* Velo claro: para fotografías ya luminosas (cortinas blancas, luz de
   estudio) donde oscurecer solo ensuciaría la imagen. El texto encima
   vuelve a leerse en tinta, no en hueso. */
.ns-escena__velo--clara-izquierda {
	background: linear-gradient(
		100deg,
		rgb(251 249 247 / 95%) 0%,
		rgb(251 249 247 / 82%) 30%,
		rgb(251 249 247 / 34%) 52%,
		rgb(251 249 247 / 0%) 66%
	);
}

/* Columna de texto sobre la fotografía: no se estira a todo lo ancho del
   contenedor, para que siga leyéndose como una columna, no como una banda. */
.ns-escena__texto { max-width: 30rem; }

.ns-escena--alinear-derecha .ns-escena__texto { margin-inline-start: auto; }

.ns-escena--clara { color: var(--ns-hueso); }

.ns-escena--clara h1,
.ns-escena--clara h2,
.ns-escena--clara h3 { color: var(--ns-hueso); }

.ns-escena--clara .ns-entradilla { color: rgb(251 249 247 / 82%); }
.ns-escena--clara .ns-antetitulo { color: var(--ns-lila-200); }
.ns-escena--clara .ns-antetitulo::before { background-color: var(--ns-lila-300); }

/* En móvil el recorte ya no deja un lado liso: la foto y el texto se
   apilan, igual que en el héroe, para que el velo nunca tenga que
   oscurecer la cara para que el texto se lea encima. */
@media (max-width: 48rem) {
	.ns-escena {
		display: block;
		min-height: 0;
		padding-block: 0;
	}

	.ns-escena__fondo {
		position: relative;
		height: min(52svh, 28rem);
	}

	.ns-escena__velo { display: none; }

	.ns-escena--clara { color: var(--ns-tinta); }

	.ns-escena--clara h1,
	.ns-escena--clara h2,
	.ns-escena--clara h3 { color: var(--ns-tinta); }

	.ns-escena--clara .ns-entradilla { color: var(--ns-tinta-suave); }
	.ns-escena--clara .ns-antetitulo { color: var(--ns-acento-texto); }
	.ns-escena--clara .ns-antetitulo::before { background-color: var(--ns-acento-texto); }
	.ns-escena--clara .ns-ilustracion { color: var(--ns-tinta); }

	.ns-escena .ns-contenedor { padding-block: var(--ns-e-7) var(--ns-e-8); }

	.ns-escena__texto,
	.ns-manifiesto__texto { max-width: none; }

	.ns-manifiesto__lista { color: var(--ns-tinta-suave); }

	/* Cada afirmación en una sola línea: a este ancho, con el tamaño de
	   .ns-manifiesto__lista sin recortar, «No todos los cuidados están
	   igualmente repartidos.» se parte en dos. */
	.ns-manifiesto__lista {
		font-size: 0.8125rem;
		gap: var(--ns-e-2);
		margin-top: var(--ns-e-4);
	}

	/* #manifiesto reemplaza el patrón apilado genérico de .ns-escena por
	   el mismo que escritorio: foto de fondo a sangre completa (con su
	   propio recorte para móvil) y el texto encima, con el mismo velo
	   oscuro y los mismos colores que en escritorio — así el contraste
	   no depende de encajar el texto en una franja exacta de la foto
	   (que además deriva con el scroll, ver iniciarFotosASangre() en
	   animaciones.js). #terapia no se toca: sigue con el patrón apilado. */
	#manifiesto.ns-escena {
		display: grid;
		align-items: start;
		/* Más alto que una pantalla: dado que la foto cubre el 100% de
		   este alto, esto es lo que empuja la cabeza hacia abajo y deja
		   aire entre el botón y el pelo. */
		min-height: 124svh;
	}

	#manifiesto .ns-escena__fondo {
		position: absolute;
		inset: 0;
		height: auto;
	}

	/* El <picture> tiene height:auto por defecto — sin fijarlo, el img
	   hijo no puede resolver su height:100% (ver el mismo arreglo en
	   el héroe). */
	#manifiesto .ns-escena__fondo picture {
		display: block;
		width: 100%;
		height: 100%;
	}

	#manifiesto .ns-escena__fondo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 18%;
	}

	/* El velo horizontal de escritorio (claro a la izquierda, oscuro a
	   la derecha) no encaja en el recorte vertical de móvil: aquí el
	   texto vive arriba y la cara abajo, así que el degradado va de
	   arriba (oscuro, bajo el texto) a abajo (claro, sobre la cara). */
	#manifiesto .ns-escena__velo {
		display: block;
		background: linear-gradient(
			to bottom,
			rgb(30 30 28 / 90%) 0%,
			rgb(30 30 28 / 78%) 45%,
			rgb(30 30 28 / 35%) 72%,
			rgb(30 30 28 / 8%) 100%
		);
	}

	#manifiesto.ns-escena--clara { color: var(--ns-hueso); }

	#manifiesto.ns-escena--clara h1,
	#manifiesto.ns-escena--clara h2,
	#manifiesto.ns-escena--clara h3 { color: var(--ns-hueso); }

	#manifiesto .ns-antetitulo { color: var(--ns-lila-200); }
	#manifiesto .ns-antetitulo::before { background-color: var(--ns-lila-300); }

	#manifiesto .ns-manifiesto__lista { color: var(--ns-lila-200); }

	#manifiesto .ns-contenedor {
		padding-block: clamp(1rem, 4svh, 2rem) 3rem;
		/* Ítem de grid: sin esto, el contenido se niega a encoger por
		   debajo de su ancho de contenido y desborda el viewport. */
		min-width: 0;
	}

	#manifiesto .ns-acciones { margin-top: var(--ns-e-4); }

	/* #terapia, mismo patrón que el héroe: foto de fondo a sangre
	   completa y texto encima. La foto (recorte 18:33, con la cara
	   empezando alrededor del 48% de su alto) no deja hueco de sobra
	   bajo el título, la entradilla y los seis ítems de la lista: con
	   min-height:100svh el texto y el botón caían directamente sobre
	   la cara. Igual que en #manifiesto, una sección más alta que la
	   pantalla empuja la cara hacia abajo (la foto cubre el 100% de
	   este alto, así que estirarlo aleja la cara del texto) y deja
	   aire real antes del pelo. El velo, en vez de degradarse hasta
	   el final de la sección, termina de desvanecerse mucho antes —
	   así no le añade ningún velo blanco a la cara, solo cubre la
	   franja donde vive el texto. */
	#terapia.ns-escena {
		display: grid;
		align-items: start;
		min-height: 195svh;
		background-color: var(--ns-hueso);
	}

	#terapia .ns-escena__fondo {
		position: absolute;
		inset: 0;
		height: auto;
	}

	#terapia .ns-escena__fondo picture {
		display: block;
		width: 100%;
		height: 100%;
	}

	#terapia .ns-escena__fondo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 18%;
	}

	#terapia .ns-escena__velo {
		display: block;
		background: linear-gradient(
			to bottom,
			rgb(251 249 247 / 95%) 0%,
			rgb(251 249 247 / 85%) 19%,
			rgb(251 249 247 / 45%) 36%,
			rgb(251 249 247 / 0%) 47%
		);
	}

	#terapia .ns-contenedor {
		padding-block: clamp(1rem, 4svh, 2rem) 3rem;
		min-width: 0;
	}
}

/* --- Héroe a pantalla completa -------------------------------------------
   La fotografía cubre toda la ventana y el titular vive encima, sobre el
   campo lila liso que deja media escena. Sin velo: es color plano, no
   fotografía, así que la tinta ya tiene su contraste de siempre. */
.ns-portada {
	position: relative;
	overflow: hidden;
	min-height: 100svh;
	display: grid;
	align-items: start;
}

/* Base (móvil): la fotografía (recorte propio, con el campo lila arriba)
   cubre toda la sección de fondo y el titular vive encima, sobre ese
   campo liso — igual que en escritorio, sin velo. */
.ns-portada__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* El <picture> (necesario para servir el retrato específico de móvil)
   tiene height:auto por defecto — sin fijarlo, el img hijo no puede
   resolver su height:100% contra un ancestro sin altura definida. */
.ns-portada__fondo picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ns-portada__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
}

.ns-portada__interior {
	padding-block: clamp(1rem, 4svh, 2rem) 3rem;
	width: 100%;
	/* Ítem de grid: sin esto, el contenido sin ajuste de línea (las
	   credenciales en una sola línea) fuerza al grid a ensancharse más
	   allá del viewport en vez de encogerse. */
	min-width: 0;
}

/* Escritorio: el recorte conserva el campo lila liso a la izquierda del
   retrato, así que el titular vive ahí encima, sin velo — es color plano,
   no fotografía, y la tinta ya tiene de sobra su contraste habitual. */
@media (min-width: 62rem) {
	.ns-portada { align-items: center; }

	.ns-portada__fondo img { object-position: center center; }

	/* Ancho igual al de .ns-contenedor a secas (sin tope propio) para que
	   el margen izquierdo coincida exactamente con el de #manifiesto y
	   #terapia; la columna de texto limita su propio ancho de lectura
	   más abajo, en .ns-portada__texto. */
	.ns-portada__interior {
		padding-block: clamp(6rem, 14vh, 9rem) clamp(4rem, 10vh, 7rem);
	}

	.ns-portada__texto { max-width: 40rem; }
}

/* --- Atmósfera: degradado vivo, sutil y lentísimo ---------------------
   Dos manchas de luz que derivan muy despacio detrás del contenido, como
   una respiración. El mismo mecanismo sirve para el héroe (lila, el
   corazón del logotipo ampliado) y la sala rosa (blanco cálido, apenas
   perceptible); cada contexto solo cambia el color con las variables. */
.ns-atmosfera { position: relative; }

.ns-atmosfera::before,
.ns-atmosfera::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: -2;
}

.ns-atmosfera::before {
	top: 50%;
	right: -14%;
	translate: 0 -50%;
	width: min(66vw, 52rem);
	aspect-ratio: 1;
	background: radial-gradient(circle, var(--ns-atmosfera-1, var(--ns-lila-100)) 0%, transparent 66%);
	animation: ns-atmosfera-deriva-1 24s ease-in-out infinite;
}

.ns-atmosfera::after {
	bottom: -20%;
	left: -10%;
	width: min(40vw, 30rem);
	aspect-ratio: 1;
	background: radial-gradient(circle, var(--ns-atmosfera-2, var(--ns-rosa-100)) 0%, transparent 70%);
	animation: ns-atmosfera-deriva-2 30s ease-in-out infinite;
}

@keyframes ns-atmosfera-deriva-1 {
	0%, 100% { transform: translate(0, -50%) scale(1); }
	50%      { transform: translate(-4%, -46%) scale(1.14); }
}

@keyframes ns-atmosfera-deriva-2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(5%, -6%) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
	.ns-atmosfera::before,
	.ns-atmosfera::after { animation: none; }
}

/* La columna de texto se eleva sobre la fotografía de fondo. */
.ns-portada__interior { position: relative; z-index: 2; }

/* Corazón decorativo: cae sobre la fotografía, no sobre el campo de
   color — por eso vive fuera de .ns-portada__interior, con su propio
   z-index entre el fondo (-1) y el texto (2). El multiply deja ver la
   fotografía a través suyo en vez de taparla. */
.ns-heroe__corazon {
	position: absolute;
	z-index: 1;
	width: min(34vw, 30rem);
	right: -2.5rem;
	bottom: -2rem;
	opacity: 0.5;
	pointer-events: none;
}

@media (max-width: 61.9375rem) {
	/* La foto móvil corregida viene con la cara arriba (el pelo empieza al
	   23 % de una foto de 634×1024), sin campo lila libre para el titular.
	   Como en «Sobre mí», la foto se ancla al pie y el texto reserva debajo
	   lo que ocupa Nuvia: 0,769 × 1024 / 634 ≈ 1,242 veces su ancho. Lo que
	   queda por encima lo cubre el lila de su borde superior; isolation
	   hace falta para que ese fondo no tape la foto (z-index -1). */
	.ns-portada {
		--ns-portada-cabeza: 1.242;

		isolation: isolate;
		background-color: rgb(200 193 228);
	}

	.ns-portada__fondo img {
		position: absolute;
		bottom: 0;
		left: 0;
		height: auto;
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%);
		mask-image: linear-gradient(to bottom, transparent, #000 10%);
	}

	.ns-portada__interior {
		padding-bottom: calc(100% * var(--ns-portada-cabeza) + var(--ns-e-6));
	}

	/* Igual que en escritorio, el corazón cae sobre la fotografía en la
	   esquina inferior, nunca sobre la cara ni sobre el titular. */
	.ns-heroe__corazon {
		width: 12rem;
		right: -1.5rem;
		bottom: -1.5rem;
	}

	/* Bloque de texto del héroe más compacto: menos aire entre título,
	   entradilla y botones para que quepa mejor sobre el campo lila. */
	.ns-portada .ns-heroe__titulo { margin-bottom: var(--ns-e-3); }

	.ns-portada .ns-frase.ns-mt-5 { margin-top: var(--ns-e-3); }

	/* Botones del héroe más compactos para que quepan en una sola línea
	   sobre el campo lila, en vez de apilarse. */
	.ns-portada .ns-acciones {
		flex-wrap: nowrap;
		gap: var(--ns-e-2);
		margin-top: var(--ns-e-4);
	}

	.ns-portada .ns-boton--grande {
		padding: 0.7em 1.1em;
		font-size: var(--ns-t-pequeno);
	}

	/* Credenciales más pequeñas y en una sola línea. */
	.ns-portada .ns-heroe__credenciales {
		flex-wrap: nowrap;
		gap: var(--ns-e-2);
		margin-top: var(--ns-e-4);
		font-size: 0.5625rem;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.ns-portada .ns-heroe__credenciales li { gap: var(--ns-e-2); }
}

/* ==================================================================
   LA HABITACIÓN ROSA — el universo Ruta4A
   ================================================================== */

.ns-sala {
	position: relative;
	background-color: var(--ns-rosa-300);
	color: var(--ns-tinta);
	padding-block: clamp(5rem, 11vw, 9rem);
	overflow: hidden;
	isolation: isolate;
	/* Tinte de la atmósfera viva sobre el rosa: blanco cálido casi
	   imperceptible, para no ensuciar un color ya saturado. */
	--ns-atmosfera-1: rgb(255 255 255 / 20%);
	--ns-atmosfera-2: rgb(255 255 255 / 12%);
}

/* #metodo más compacto: menos aire entre el borde superior del campo
   rosa y el título, y entre el título y las tarjetas. */
#metodo { padding-top: 2rem; }
#metodo .ns-encabezado-seccion { margin-bottom: 1.5rem; }

.ns-sala h1,
.ns-sala h2,
.ns-sala h3 { color: var(--ns-tinta); }

.ns-sala .ns-antetitulo { color: var(--ns-tinta); }
.ns-sala .ns-antetitulo::before { background-color: var(--ns-tinta); }
.ns-sala .ns-entradilla { color: rgb(30 30 28 / 74%); }

.ns-sala__cifra {
	position: absolute;
	top: 40%;
	translate: 0 -50%;
	right: clamp(-4rem, -3vw, -1rem);
	z-index: -1;
	width: 100%;
	height: auto;
	pointer-events: none;
}

@media (max-width: 61.9375rem) {
	.ns-sala__cifra { width: 220%; }
}

/* Deriva lenta ligada al scroll: sin JavaScript ni librerías. Donde no
   haya soporte, el «4» simplemente se queda quieto y no pasa nada. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ns-sala__cifra {
			animation: ns-deriva linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}

@keyframes ns-deriva {
	from { transform: translate3d(0, 4%, 0) scale(1.06); }
	to   { transform: translate3d(0, -4%, 0) scale(1.12); }
}

/* Tarjeta blanca flotando sobre el rosa: la página interior del dosier. */
.ns-ficha {
	position: relative;
	background-color: var(--ns-blanco);
	border-radius: clamp(1.25rem, 3vw, 2.25rem);
	padding: clamp(1.75rem, 4vw, 3.25rem);
}

.ns-ficha--holgada { padding: clamp(2.25rem, 5vw, 4.5rem); }

/* --- El ascenso de los cuatro movimientos ---------------------------
   En el dosier los 4A no son cuatro iguales en fila: son una flecha
   que sube. Aquí cada peldaño se eleva un poco más que el anterior.  */
.ns-ascenso {
	display: grid;
	gap: var(--ns-e-5);
	/* Es una lista ordenada porque el orden significa algo, pero la
	   numeración visible es la cifra grande de cada peldaño. */
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-ascenso > li { margin: 0; }

@media (min-width: 62rem) {
	.ns-ascenso {
		grid-template-columns: repeat(4, 1fr);
		align-items: end;
		margin-top: 0;
	}

	.ns-ascenso__peldano:nth-child(1) { margin-bottom: 0; }
	.ns-ascenso__peldano:nth-child(2) { margin-bottom: 2.5rem; }
	.ns-ascenso__peldano:nth-child(3) { margin-bottom: 5rem; }
	.ns-ascenso__peldano:nth-child(4) { margin-bottom: 7.5rem; }
}

.ns-ascenso__peldano {
	position: relative;
	background-color: var(--ns-blanco);
	border-radius: clamp(1rem, 2.5vw, 1.75rem);
	padding: clamp(1.5rem, 2.6vw, 2rem);
}

.ns-ascenso__numero {
	display: block;
	font-family: var(--ns-font-display);
	font-size: clamp(2.75rem, 5vw, 4rem);
	font-weight: var(--ns-peso-negro);
	line-height: 0.9;
	color: var(--ns-rosa-300);
	margin-bottom: var(--ns-e-3);
}

/* El icono acompaña a la cifra sin competir con ella: pequeño, en la
   esquina, como un sello. La cifra grande sigue siendo el protagonista. */
.ns-ascenso__icono {
	position: absolute;
	top: clamp(1.5rem, 2.6vw, 2rem);
	right: clamp(1.5rem, 2.6vw, 2rem);
	width: clamp(3.5rem, 6vw, 4.5rem);
	height: clamp(3.5rem, 6vw, 4.5rem);
	color: var(--ns-acento-texto);
}

/* La tarjeta es blanca aunque .ns-sala sea rosa: el icono necesita el
   tinte oscuro de siempre, no el hueso claro pensado para el fondo
   directo de la sala. Misma especificidad que esa regla → gana por
   ir después. */
.ns-sala .ns-ascenso__icono { color: var(--ns-acento-texto); }
.ns-ascenso__icono .ns-ilustracion__linea { stroke-width: 2.8; }

.ns-ascenso__titulo {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
	margin-bottom: var(--ns-e-2);
	overflow-wrap: break-word;
	hyphens: auto;
}

.ns-ascenso__texto {
	font-size: var(--ns-t-pequeno);
	line-height: 1.6;
	color: var(--ns-tinta-suave);
	margin: 0;
}

/* La altervisión envuelve el ascenso: píldora rosa, como en el dosier. */
.ns-transversal {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 3vw, 2rem) clamp(1.75rem, 4vw, 3rem);
	background-color: var(--ns-rosa-100);
	border-radius: var(--ns-radio-pill);
	text-align: center;
}

@media (max-width: 48rem) {
	.ns-transversal { border-radius: var(--ns-radio-l); }
}

/* ==================================================================
   LA FRASE MIXTA — el recurso tipográfico del dosier
   ------------------------------------------------------------------
   Cursiva ligera de palo seco + una palabra en serif Black. Invierte lo
   que se espera de <em>: aquí el énfasis no se inclina, se hace pesado.
   ================================================================== */

.ns-frase {
	font-family: var(--ns-font-texto);
	font-weight: var(--ns-peso-ligero);
	font-size: clamp(1.25rem, 0.95rem + 1.35vw, 2.1rem);
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-wrap: balance;
	margin: 0;
}

/* Una sola voz por frase: nunca cursiva, nunca cambia de familia a media
   palabra. El énfasis se nota solo en el peso. */
.ns-frase em { font-weight: var(--ns-peso-medio); font-style: normal; }
.ns-frase strong { font-weight: var(--ns-peso-fuerte); font-style: normal; }

.ns-frase--cursiva {
	font-style: italic;
	font-weight: var(--ns-peso-fino);
	line-height: 1.15;
}

/* En #metodo la frase vive debajo de «Ruta4A»: en escritorio el ancho
   se afina para que parta justo después de «feminista» y el resto
   quepa en una sola línea. text-wrap:wrap en vez de balance: con solo
   dos líneas, balance podía repartir las palabras de otro modo. */
@media (min-width: 62rem) {
	#metodo .ns-frase--cursiva {
		max-width: 32rem;
		text-wrap: wrap;
	}
}

@media (max-width: 61.9375rem) {
	#metodo .ns-rotulo { font-size: clamp(4rem, 3rem + 10vw, 6rem); }
	#metodo .ns-frase--cursiva { font-size: clamp(1.5rem, 1.1rem + 3vw, 2rem); }
}

/* Las citas grandes (manifiesto, llamada final) pasan al serif Black:
   son el golpe editorial de la página, no texto corrido. */
.ns-frase--grande {
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
	line-height: 1.16;
	letter-spacing: -0.01em;
}

/* --- Rótulo Ruta4A a lo grande, como la cubierta del dosier ---------- */
.ns-rotulo {
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: clamp(3.25rem, 1.5rem + 8vw, 8rem);
	line-height: 0.92;
	margin: 0;
}

#metodo .ns-rotulo { letter-spacing: -0.05em; }

/* Sobre el campo rosa el «4» va en blanco: así lo resuelve la cubierta. */
.ns-sala .ns-rotulo .ns-cuatro,
.ns-escena--clara .ns-rotulo .ns-cuatro { color: var(--ns-blanco); }

/* --- Cinta de datos --------------------------------------------------- */
.ns-cinta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: var(--ns-e-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-cinta li { margin: 0; }

.ns-cinta__cifra {
	display: block;
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem);
	line-height: 0.95;
	color: var(--ns-rosa-300);
}

.ns-cinta__etiqueta {
	display: block;
	margin-top: var(--ns-e-2);
	font-size: var(--ns-t-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(30 30 28 / 62%);
}

/* Dentro del campo rosa, el botón primario en rosa desaparecería sobre el
   fondo. Ahí manda la tinta, que es justo el contraste que usa el dosier:
   negro sobre rosa. */
.ns-sala .ns-boton--primario {
	background-color: var(--ns-tinta);
	color: var(--ns-hueso);
}

.ns-sala .ns-boton--primario:hover {
	background-color: var(--ns-rosa-700);
	color: var(--ns-blanco);
}

.ns-sala .ns-boton--secundario {
	border-color: var(--ns-tinta);
	color: var(--ns-tinta);
}

.ns-sala .ns-boton--secundario:hover {
	background-color: var(--ns-tinta);
	color: var(--ns-hueso);
}

/* La etiqueta de edición sobre rosa: blanca, para que despegue del campo. */
.ns-sala .ns-etiqueta {
	background-color: var(--ns-blanco);
	border-color: transparent;
	color: var(--ns-tinta);
}

/* ==================================================================
   12. PÁGINAS INTERIORES
   ------------------------------------------------------------------
   Las fotografías del material gráfico tienen el mismo peso que el
   retrato de la portada. Aquí se convierten en escenas completas: el
   texto ocupa el aire de la imagen y el contenido queda libre para leerse
   después, sin repetir composiciones de tarjetas.
   ================================================================== */

.ns-escena--interior {
	min-height: max(42rem, 100svh);
	padding-block: clamp(8rem, 16vh, 11rem) clamp(4rem, 10vh, 7rem);
}

.ns-escena--interior .ns-escena__fondo picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ns-escena--interior .ns-escena__fondo img {
	width: 100%;
	height: 100%;
	object-position: center center;
}

.ns-escena--interior .ns-escena__texto { max-width: 38rem; }
.ns-escena--interior .ns-display { max-width: 11ch; }
.ns-escena--interior .ns-entradilla { margin-bottom: 0; }

.ns-escena--sobre-mi .ns-escena__fondo img { object-position: center 38%; }
.ns-escena--terapia .ns-escena__fondo img { object-position: center 44%; }
.ns-escena--contacto .ns-escena__fondo img { object-position: center 42%; }
.ns-escena--archivo .ns-escena__fondo img { object-position: center 34%; }
.ns-escena--entrada .ns-escena__fondo img { object-position: center 35%; }
.ns-escena--404 .ns-escena__fondo img { object-position: center 38%; }

.ns-escena--sobre-mi .ns-escena__velo {
	background: linear-gradient(
		100deg,
		rgb(251 249 247 / 96%) 0%,
		rgb(251 249 247 / 82%) 34%,
		rgb(251 249 247 / 28%) 60%,
		rgb(251 249 247 / 0%) 76%
	);
}

.ns-escena--contacto .ns-escena__velo {
	background: linear-gradient(
		100deg,
		rgb(251 249 247 / 96%) 0%,
		rgb(251 249 247 / 86%) 35%,
		rgb(251 249 247 / 38%) 59%,
		rgb(251 249 247 / 0%) 78%
	);
}

.ns-escena--interior .ns-heroe__credenciales {
	margin-top: var(--ns-e-5);
	color: var(--ns-tinta);
}

.ns-escena--interior .ns-heroe__credenciales li:not(:last-child)::after {
	background-color: var(--ns-tinta-tenue);
}

.ns-escena--interior.ns-escena--clara .ns-boton--secundario {
	border-color: rgb(251 249 247 / 76%);
	color: var(--ns-hueso);
}

.ns-escena--interior.ns-escena--clara .ns-boton--secundario:hover {
	background-color: var(--ns-hueso);
	border-color: var(--ns-hueso);
	color: var(--ns-tinta);
}

.ns-contenido--principal {
	font-size: clamp(1.08rem, 1rem + 0.2vw, 1.2rem);
	line-height: 1.72;
}

.ns-contenido--principal > p:first-child {
	font-family: var(--ns-font-display);
	font-size: clamp(1.55rem, 1.2rem + 1vw, 2.35rem);
	font-weight: var(--ns-peso-fuerte);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--ns-tinta);
}

.ns-contenido--principal ul {
	margin-block: var(--ns-e-6);
	padding-left: 0;
	list-style: none;
}

.ns-contenido--principal li {
	position: relative;
	padding: var(--ns-e-3) 0 var(--ns-e-3) 2rem;
	border-top: 1px solid var(--ns-borde);
}

.ns-contenido--principal li::before {
	content: "";
	position: absolute;
	top: 1.12em;
	left: 0;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	background-color: var(--ns-acento);
}

.ns-contenido--principal li:last-child { border-bottom: 1px solid var(--ns-borde); }

/* Tres marcos con ritmo editorial. La segunda y la tercera pieza suben
   como una conversación, en vez de quedar como tres tarjetas idénticas. */
.ns-marcos {
	display: grid;
	gap: var(--ns-e-6);
}

.ns-marco {
	padding-top: var(--ns-e-5);
	border-top: 1px solid var(--ns-borde);
}

.ns-marco__icono {
	width: clamp(2.75rem, 5vw, 3.5rem);
	height: clamp(2.75rem, 5vw, 3.5rem);
	margin-bottom: var(--ns-e-5);
	color: var(--ns-acento-texto);
}

.ns-marco__titulo {
	font-size: var(--ns-t-h3);
	margin-bottom: var(--ns-e-3);
}

.ns-marco__texto {
	max-width: 34ch;
	margin-bottom: 0;
	font-size: var(--ns-t-pequeno);
	line-height: 1.68;
	color: var(--ns-tinta-suave);
}

.ns-llamada--editorial { max-width: 48rem; }

/* Archivo de Reflexiones: una entrada principal y el resto a dos voces. */
.ns-listado-entradas {
	display: grid;
	gap: var(--ns-e-6);
}

.ns-listado-entradas .ns-entrada-tarjeta {
	border-top: 1px solid var(--ns-borde);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.ns-listado-entradas .ns-entrada-tarjeta:hover {
	border-color: var(--ns-acento);
	box-shadow: none;
}

.ns-listado-entradas .ns-entrada-tarjeta__media img {
	border-radius: var(--ns-radio-m);
}

@media (min-width: 48rem) {
	.ns-marcos { grid-template-columns: 1.15fr 0.92fr 0.92fr; }
	.ns-marco:nth-child(2) { margin-top: clamp(2.5rem, 8vw, 6rem); }
	.ns-marco:nth-child(3) { margin-top: clamp(1.25rem, 4vw, 3rem); }

	.ns-listado-entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ns-listado-entradas > :first-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
		align-items: stretch;
	}
	.ns-listado-entradas > :first-child .ns-entrada-tarjeta__media {
		min-height: 24rem;
	}
	.ns-listado-entradas > :first-child .ns-entrada-tarjeta__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.ns-listado-entradas > :first-child .ns-entrada-tarjeta__cuerpo {
		padding: clamp(2rem, 4vw, 4.5rem);
		align-self: center;
	}
	.ns-listado-entradas > :first-child .ns-entrada-tarjeta__titulo {
		font-size: clamp(1.8rem, 1.3rem + 1.4vw, 3rem);
	}
}

@media (max-width: 48rem) {
	/* Las escenas internas mantienen foto y texto superpuestos también en
	   móvil. El texto se sitúa arriba, antes del rostro, y el velo se adapta
	   a esa lectura en vez de apilar una miniatura sobre el título. */
	.ns-escena--interior {
		display: grid;
		align-items: start;
		min-height: 100svh;
		padding-block: 0;
	}

	.ns-escena--interior .ns-escena__fondo {
		position: absolute;
		inset: 0;
		height: auto;
	}

	.ns-escena--interior .ns-escena__velo { display: block; }

	.ns-escena--interior .ns-contenedor {
		min-width: 0;
		padding-block: clamp(7rem, 15svh, 9rem) 3rem;
	}

	.ns-escena--interior .ns-escena__texto { max-width: 31rem; }
	.ns-escena--interior .ns-display { max-width: 10ch; }

	.ns-escena--interior.ns-escena--clara { color: var(--ns-hueso); }
	.ns-escena--interior.ns-escena--clara h1,
	.ns-escena--interior.ns-escena--clara h2,
	.ns-escena--interior.ns-escena--clara h3 { color: var(--ns-hueso); }
	.ns-escena--interior.ns-escena--clara .ns-entradilla { color: rgb(251 249 247 / 84%); }
	.ns-escena--interior.ns-escena--clara .ns-antetitulo { color: var(--ns-lila-200); }
	.ns-escena--interior.ns-escena--clara .ns-antetitulo::before { background-color: var(--ns-lila-300); }

	.ns-escena--sobre-mi .ns-escena__velo,
	.ns-escena--contacto .ns-escena__velo {
		background: linear-gradient(
			to bottom,
			rgb(251 249 247 / 96%) 0%,
			rgb(251 249 247 / 86%) 38%,
			rgb(251 249 247 / 30%) 64%,
			rgb(251 249 247 / 0%) 100%
		);
	}

	.ns-escena--sobre-mi .ns-escena__fondo img { object-position: center 22%; }
	.ns-escena--terapia .ns-escena__fondo img { object-position: center 20%; }
	.ns-escena--contacto .ns-escena__fondo img { object-position: center 18%; }
	.ns-escena--archivo .ns-escena__fondo img,
	.ns-escena--entrada .ns-escena__fondo img { object-position: center 20%; }

	.ns-escena--interior .ns-heroe__credenciales {
		flex-wrap: wrap;
		font-size: 0.625rem;
	}

	.ns-marco:nth-child(n + 2) { margin-top: 0; }

	.ns-listado-entradas > :first-child .ns-entrada-tarjeta__media {
		min-height: 18rem;
	}
}

/* ==================================================================
   13. INFOGRAFÍAS EDITORIALES
   ------------------------------------------------------------------
   Las páginas internas traducen ideas complejas a mapas de lectura.
   No son imágenes cerradas: el texto mantiene su orden semántico, se
   adapta a cualquier pantalla y se lee correctamente con tecnologías de
   apoyo. Las fotografías siguen ocupando la primera vista; aquí el color,
   la escala y la posición explican las relaciones entre ideas.
   ================================================================== */

.ns-seccion--infografia {
	position: relative;
	overflow: clip;
}

.ns-encabezado-infografia {
	max-width: 43rem;
	margin-bottom: clamp(2.5rem, 6vw, 5.5rem);
}

.ns-encabezado-infografia h2 {
	max-width: 17ch;
	margin-bottom: var(--ns-e-4);
	font-size: clamp(2.25rem, 1.6rem + 2.5vw, 4.5rem);
	line-height: 0.98;
	letter-spacing: -0.045em;
}

.ns-encabezado-infografia .ns-entradilla {
	max-width: 36rem;
	margin-bottom: 0;
}

/* --- Sobre mí: tres lentes que se superponen ---------------------- */
.ns-lentes {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.86fr) minmax(0, 1.04fr);
	align-items: start;
	gap: clamp(0.75rem, 2vw, 2rem);
	padding: clamp(0.25rem, 1vw, 1rem) 0 clamp(1.5rem, 4vw, 4rem);
}

.ns-lente {
	position: relative;
	min-height: clamp(23rem, 30vw, 31rem);
	padding: clamp(1.75rem, 3vw, 3.5rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ns-lente::before {
	content: "";
	position: absolute;
	inset: 1rem;
	border: 1px solid currentColor;
	border-radius: inherit;
	opacity: 0.22;
	pointer-events: none;
}

.ns-lente:hover { transform: translateY(-0.65rem); }

.ns-lente--gestalt {
	background: var(--ns-lila-200);
	border-radius: 58% 42% 42% 58% / 47% 43% 57% 53%;
	color: var(--ns-tinta);
}

.ns-lente--sistemica {
	margin-top: clamp(2rem, 7vw, 7rem);
	background: var(--ns-arena);
	border-radius: 44% 56% 59% 41% / 60% 38% 62% 40%;
	color: var(--ns-tinta);
}

.ns-lente--feminismo {
	margin-top: clamp(0.75rem, 3vw, 3.5rem);
	background: var(--ns-rosa-200);
	border-radius: 40% 60% 47% 53% / 59% 50% 50% 41%;
	color: var(--ns-tinta);
}

.ns-lente__ilustracion {
	position: absolute;
	top: clamp(1.4rem, 3vw, 3rem);
	left: clamp(1.4rem, 3vw, 3rem);
	width: clamp(3rem, 6vw, 5.5rem);
	height: clamp(3rem, 6vw, 5.5rem);
	color: currentColor;
}

.ns-lente__accion {
	margin: 0 0 var(--ns-e-2);
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ns-lente h3 {
	margin-bottom: var(--ns-e-3);
	font-size: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
	line-height: 0.95;
	letter-spacing: -0.04em;
}

.ns-lente > p:last-child {
	max-width: 24ch;
	margin-bottom: 0;
	font-size: var(--ns-t-pequeno);
	line-height: 1.55;
}

/* --- Terapia: el mapa del vínculo ---------------------------------- */
.ns-mapa-vinculo {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(40rem, 56vw, 48rem);
	isolation: isolate;
}

.ns-mapa-vinculo::before {
	content: "";
	position: absolute;
	width: min(60vw, 39rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgb(251 249 247 / 0%) 0 22%,
		var(--ns-lila-300) 22.2% 22.8%,
		rgb(251 249 247 / 0%) 23% 43%,
		var(--ns-rosa-200) 43.2% 43.8%,
		rgb(251 249 247 / 0%) 44% 64%,
		var(--ns-arena) 64.2% 64.8%,
		rgb(251 249 247 / 0%) 65%
	);
	opacity: 0.78;
	z-index: -1;
}

.ns-mapa-vinculo__nucleo {
	display: grid;
	place-items: center;
	gap: 0.4rem;
	width: clamp(10.5rem, 16vw, 13.5rem);
	aspect-ratio: 1;
	padding: 1.5rem;
	border-radius: 48% 52% 44% 56% / 58% 42% 58% 42%;
	background: var(--ns-tinta);
	color: var(--ns-hueso);
	text-align: center;
}

.ns-mapa-vinculo__nucleo strong {
	font-family: var(--ns-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.15rem);
	line-height: 0.95;
}

.ns-mapa-vinculo__nucleo span {
	max-width: 15ch;
	font-size: 0.75rem;
	line-height: 1.3;
}

.ns-mapa-vinculo__piezas {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-mapa-vinculo__pieza {
	position: absolute;
	width: min(28%, 13.5rem);
	padding: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	background: var(--ns-hueso);
	color: var(--ns-tinta);
	font-size: var(--ns-t-pequeno);
	line-height: 1.38;
}

.ns-mapa-vinculo__pieza strong,
.ns-mapa-vinculo__pieza span { display: block; }
.ns-mapa-vinculo__pieza strong { margin-bottom: 0.35rem; font-size: 1rem; }
.ns-mapa-vinculo__pieza span { color: var(--ns-tinta-suave); }

.ns-mapa-vinculo__pieza--historia {
	top: 0;
	left: 0;
	border-radius: 58% 42% 57% 43% / 46% 51% 49% 54%;
}

.ns-mapa-vinculo__pieza--cuerpo {
	top: 2%;
	right: 0;
	border-radius: 43% 57% 39% 61% / 58% 45% 55% 42%;
}

.ns-mapa-vinculo__pieza--cuidados {
	top: 39%;
	left: 0;
	border-radius: 53% 47% 39% 61% / 53% 42% 58% 47%;
}

.ns-mapa-vinculo__pieza--limites {
	top: 39%;
	right: 0;
	border-radius: 42% 58% 60% 40% / 46% 57% 43% 54%;
}

.ns-mapa-vinculo__pieza--entorno {
	bottom: 0;
	left: 7%;
	border-radius: 59% 41% 53% 47% / 43% 58% 42% 57%;
}

.ns-mapa-vinculo__pieza--poder {
	right: 7%;
	bottom: 0;
	border-radius: 41% 59% 47% 53% / 58% 40% 60% 42%;
}

/* --- Contacto: una secuencia de tres gestos ----------------------- */
.ns-ruta-contacto {
	counter-reset: ruta;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 4vw, 4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-ruta-contacto__paso {
	position: relative;
	min-height: 16rem;
	padding: clamp(1.5rem, 3vw, 2.75rem) 0 0;
	border-top: 2px solid var(--ns-tinta);
	counter-increment: ruta;
}

.ns-ruta-contacto__paso::before {
	content: counter(ruta, decimal-leading-zero);
	display: block;
	margin-bottom: clamp(2rem, 5vw, 4.5rem);
	font-family: var(--ns-font-display);
	font-size: clamp(2rem, 1.4rem + 2vw, 3.75rem);
	line-height: 0.85;
	letter-spacing: -0.05em;
	color: var(--ns-acento-texto);
}

.ns-ruta-contacto__paso:nth-child(2) { margin-top: clamp(1.5rem, 5vw, 5rem); }
.ns-ruta-contacto__paso:nth-child(3) { margin-top: clamp(0.75rem, 2.5vw, 2.75rem); }

.ns-ruta-contacto__paso h3 {
	max-width: 13ch;
	margin-bottom: var(--ns-e-3);
	font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2rem);
	line-height: 1.03;
}

.ns-ruta-contacto__paso p {
	max-width: 27ch;
	margin-bottom: 0;
	font-size: var(--ns-t-pequeno);
	line-height: 1.6;
	color: var(--ns-tinta-suave);
}

.ns-ruta-contacto + .ns-acciones { margin-top: clamp(2.5rem, 6vw, 6rem); }

/* --- Contacto: formulario editorial y accesible ------------------- */
.ns-contacto {
	scroll-margin-top: calc(var(--ns-cabecera-alto) + 1rem);
}

.ns-contacto__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: start;
}

.ns-contacto__introduccion {
	position: sticky;
	top: calc(var(--ns-cabecera-alto) + var(--ns-e-6));
}

.ns-contacto__introduccion h2 {
	max-width: 11ch;
	font-size: clamp(2.25rem, 1.55rem + 2.4vw, 4rem);
	line-height: 1;
	letter-spacing: -0.04em;
}

.ns-contacto__introduccion .ns-entradilla {
	font-size: clamp(1.08rem, 1rem + 0.35vw, 1.32rem);
}

.ns-contacto__datos {
	display: grid;
	gap: var(--ns-e-4);
	margin-top: var(--ns-e-7);
	padding-block: var(--ns-e-5);
	border-block: 1px solid var(--ns-borde);
}

.ns-contacto__dato {
	display: grid;
	grid-template-columns: minmax(7rem, 0.45fr) minmax(0, 1fr);
	gap: var(--ns-e-4);
	margin: 0;
	font-size: var(--ns-t-pequeno);
}

.ns-contacto__dato > span {
	font-weight: var(--ns-peso-fuerte);
	color: var(--ns-tinta);
}

.ns-contacto__dato a {
	overflow-wrap: anywhere;
}

.ns-contacto__nota {
	margin-top: var(--ns-e-5);
	padding-left: var(--ns-e-4);
	border-left: 2px solid var(--ns-acento);
	font-size: var(--ns-t-micro);
	line-height: 1.55;
	color: var(--ns-tinta-suave);
}

.ns-contacto__formulario {
	padding: clamp(1.5rem, 4vw, 3.5rem);
	background-color: var(--ns-lila-50);
	border-top: 3px solid var(--ns-acento);
}

.ns-formulario {
	display: grid;
	gap: var(--ns-e-6);
}

.ns-formulario__fila {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ns-e-5);
}

.ns-campo {
	display: grid;
	gap: var(--ns-e-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ns-campo > label,
.ns-campo > legend {
	font-size: var(--ns-t-pequeno);
	font-weight: var(--ns-peso-fuerte);
	line-height: 1.45;
}

.ns-campo__opcional {
	font-weight: var(--ns-peso-normal);
	color: var(--ns-tinta-suave);
}

.ns-campo input[type="text"],
.ns-campo input[type="email"],
.ns-campo input[type="tel"],
.ns-campo textarea {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.8rem 0.95rem;
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde);
	border-radius: var(--ns-radio-s);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color var(--ns-transicion), box-shadow var(--ns-transicion), background-color var(--ns-transicion);
}

.ns-campo textarea {
	min-height: 11rem;
	resize: vertical;
}

.ns-campo input[type="text"]:hover,
.ns-campo input[type="email"]:hover,
.ns-campo input[type="tel"]:hover,
.ns-campo textarea:hover {
	border-color: var(--ns-lila-300);
}

.ns-campo input[type="text"]:focus,
.ns-campo input[type="email"]:focus,
.ns-campo input[type="tel"]:focus,
.ns-campo textarea:focus {
	background-color: var(--ns-blanco);
	border-color: var(--ns-lila-600);
	box-shadow: 0 0 0 3px rgb(106 74 136 / 13%);
	outline: 0;
}

.ns-campo__opciones {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ns-e-2);
}

.ns-campo__opciones label {
	position: relative;
	display: flex;
	min-width: 0;
	cursor: pointer;
}

.ns-campo__opciones input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ns-campo__opciones span {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 4.5rem;
	padding: 0.75rem;
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde);
	border-radius: var(--ns-radio-s);
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-medio);
	line-height: 1.35;
	text-align: center;
	transition: border-color var(--ns-transicion), background-color var(--ns-transicion), color var(--ns-transicion);
}

.ns-campo__opciones label:hover span {
	border-color: var(--ns-lila-300);
}

.ns-campo__opciones input:focus-visible + span {
	outline: 3px solid var(--ns-lila-600);
	outline-offset: 3px;
}

.ns-campo__opciones input:checked + span {
	background-color: var(--ns-lila-700);
	border-color: var(--ns-lila-700);
	color: var(--ns-blanco);
}

.ns-campo__ayuda,
.ns-formulario__obligatorios {
	margin: 0;
	font-size: var(--ns-t-micro);
	line-height: 1.5;
	color: var(--ns-tinta-suave);
}

.ns-campo--aceptacion {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--ns-e-3);
	cursor: pointer;
	font-size: var(--ns-t-micro);
	line-height: 1.55;
	color: var(--ns-tinta-suave);
}

.ns-campo--aceptacion input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2rem 0 0;
	accent-color: var(--ns-lila-700);
}

.ns-formulario > .ns-boton {
	justify-self: start;
}

.ns-formulario__aviso {
	margin-bottom: var(--ns-e-6);
	padding: var(--ns-e-4) var(--ns-e-5);
	border-left: 3px solid;
	font-size: var(--ns-t-pequeno);
	line-height: 1.55;
}

.ns-formulario__aviso--exito {
	background-color: #edf6ee;
	border-color: #347143;
	color: #254f30;
}

.ns-formulario__aviso--error {
	background-color: #fbefef;
	border-color: #9e3f45;
	color: #712b30;
}

.ns-formulario__trampa {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media (max-width: 61.9375rem) {
	.ns-contacto__rejilla {
		grid-template-columns: 1fr;
	}

	.ns-contacto__introduccion {
		position: static;
	}

	.ns-contacto__introduccion h2 {
		max-width: 14ch;
	}
}

@media (max-width: 40rem) {
	.ns-contacto__formulario {
		margin-inline: calc(var(--ns-gutter) * -0.35);
		padding: var(--ns-e-5);
	}

	.ns-formulario__fila,
	.ns-campo__opciones {
		grid-template-columns: 1fr;
	}

	.ns-campo__opciones span {
		place-items: center start;
		min-height: 3.35rem;
		text-align: left;
	}

	.ns-contacto__dato {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ns-formulario > .ns-boton {
		width: 100%;
		justify-content: center;
	}
}

/* --- Blog: cuatro zonas que orientan los textos -------------------- */
.ns-brujula-blog {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(2rem, 7vw, 8rem);
	margin-bottom: clamp(4rem, 10vw, 9rem);
	padding: clamp(1.5rem, 5vw, 5rem);
	background: var(--ns-acento-tenue);
	overflow: hidden;
}

.ns-brujula-blog__texto h2 {
	max-width: 12ch;
	margin-bottom: var(--ns-e-4);
	font-size: clamp(2rem, 1.3rem + 2vw, 3.75rem);
	line-height: 0.98;
	letter-spacing: -0.045em;
}

.ns-brujula-blog__texto p {
	max-width: 30ch;
	margin-bottom: 0;
	color: var(--ns-tinta-suave);
}

.ns-brujula-blog__temas {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(0.5rem, 1.5vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-brujula-blog__temas li {
	display: flex;
	align-items: flex-end;
	min-height: clamp(7.5rem, 12vw, 11rem);
	padding: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	font-family: var(--ns-font-display);
	font-size: clamp(1.15rem, 0.95rem + 1vw, 1.8rem);
	line-height: 0.95;
	letter-spacing: -0.035em;
}

.ns-brujula-blog__temas li:nth-child(1) {
	background: var(--ns-lila-300);
	border-radius: 58% 42% 48% 52% / 51% 44% 56% 49%;
}

.ns-brujula-blog__temas li:nth-child(2) {
	margin-top: clamp(1rem, 3vw, 3rem);
	background: var(--ns-rosa-200);
	border-radius: 40% 60% 59% 41% / 54% 42% 58% 46%;
}

.ns-brujula-blog__temas li:nth-child(3) {
	margin-top: clamp(0.5rem, 2vw, 2rem);
	background: var(--ns-arena);
	border-radius: 46% 54% 42% 58% / 58% 48% 52% 42%;
}

.ns-brujula-blog__temas li:nth-child(4) {
	background: var(--ns-blanco);
	border-radius: 60% 40% 54% 46% / 42% 57% 43% 58%;
}

@media (max-width: 64rem) {
	.ns-mapa-vinculo {
	min-height: 0;
	gap: var(--ns-e-6);
	padding: 0;
	place-items: stretch;
	}

	.ns-mapa-vinculo::before { display: none; }

	.ns-mapa-vinculo__nucleo {
	justify-self: center;
	margin-bottom: var(--ns-e-2);
	}

	.ns-mapa-vinculo__piezas {
	position: static;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ns-e-4);
	}

	.ns-mapa-vinculo__pieza {
	position: static;
	width: auto;
	min-height: 9.5rem;
	}
}

@media (max-width: 48rem) {
	.ns-encabezado-infografia { margin-bottom: var(--ns-e-6); }

	.ns-lentes {
	grid-template-columns: 1fr;
	gap: var(--ns-e-4);
	padding-bottom: 0;
	}

	.ns-lente,
	.ns-lente--sistemica,
	.ns-lente--feminismo {
	min-height: 19rem;
	margin-top: 0;
	}

	.ns-mapa-vinculo__piezas { grid-template-columns: 1fr; }
	.ns-mapa-vinculo__pieza { min-height: 0; }

	.ns-ruta-contacto {
	grid-template-columns: 1fr;
	gap: var(--ns-e-5);
	}

	.ns-ruta-contacto__paso,
	.ns-ruta-contacto__paso:nth-child(2),
	.ns-ruta-contacto__paso:nth-child(3) {
	min-height: 0;
	margin-top: 0;
	padding-top: var(--ns-e-4);
	}

	.ns-ruta-contacto__paso::before { margin-bottom: var(--ns-e-4); }

	.ns-brujula-blog {
	grid-template-columns: 1fr;
	gap: var(--ns-e-6);
	margin-bottom: var(--ns-e-8);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ns-lente { transition: none; }
	.ns-lente:hover { transform: none; }
}

/* ==================================================================
   14. SOBRE MÍ — recorrido biográfico
   ------------------------------------------------------------------
   Implementación de la dirección visual de Main-html: una primera
   escena sobre el campo lila de la fotografía, cronología editorial,
   retrato en blanco y negro, programas y cierre de marca. Todo queda
   acotado al artículo para no alterar el resto de plantillas.
   ================================================================== */

/* El lienzo de referencia reserva el primer viewport completo para el
   encabezado y la escena. Restamos la cabecera para evitar un falso
   segundo pliegue en pantallas de escritorio de poca altura. */
.ns-sobre-mi .ns-escena--sobre-mi {
	min-height: max(42rem, calc(100svh - var(--ns-cabecera-alto)));
	padding-block: clamp(5rem, 12vh, 8rem);
}

.ns-sobre-mi .ns-escena--sobre-mi .ns-escena__fondo img {
	object-position: right center;
}

.ns-sobre-mi .ns-escena--sobre-mi .ns-escena__texto {
	max-width: 40rem;
}

.ns-sobre-mi .ns-escena--sobre-mi .ns-heroe__titulo {
	max-width: 9.65em;
	margin-bottom: 0;
	color: var(--ns-blanco);
	font-size: clamp(2.75rem, 2rem + 2.25vw, 4.31rem);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.ns-sobre-mi .ns-escena--sobre-mi .ns-frase {
	max-width: 38rem;
}

.ns-sobre-mi .ns-escena--sobre-mi .ns-boton--tinta {
	background-color: var(--ns-tinta);
	color: var(--ns-hueso);
}

.ns-sobre-mi .ns-escena--sobre-mi .ns-boton--tinta:hover {
	background-color: var(--ns-lila-700);
	color: var(--ns-blanco);
}

/* Cabecera de dos voces: el origen a la izquierda y la entradilla a la
   derecha, alineada con la base del titular como en la maqueta. */
.ns-sobre-mi .ns-encabezado-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: end;
	gap: var(--ns-e-8);
}

.ns-sobre-mi .ns-encabezado-duo .ns-entradilla {
	margin-bottom: 0;
}

/* Cronología. La línea ocupa una columna real, no un borde del contenido:
   así los puntos conservan la misma posición aunque cambie el texto. */
.ns-cronologia {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-cronologia__hito {
	display: grid;
	grid-template-columns: 12.5rem 1px minmax(0, 1fr);
	gap: 3rem;
	margin: 0;
}

.ns-cronologia__ano {
	padding-top: 2.5rem;
	font-family: var(--ns-font-display);
	font-size: 4rem;
	font-weight: var(--ns-peso-negro);
	line-height: 1;
	color: var(--ns-lila-400);
	text-align: right;
}

.ns-cronologia__linea {
	position: relative;
	background-color: var(--ns-lila-200);
}

.ns-cronologia__linea::before {
	content: "";
	position: absolute;
	top: 3rem;
	left: 50%;
	width: 0.5625rem;
	height: 0.5625rem;
	border-radius: 50%;
	background-color: var(--ns-lila-400);
	translate: -50% 0;
}

.ns-cronologia__hito:last-child .ns-cronologia__linea {
	background: linear-gradient(
		to bottom,
		var(--ns-lila-200) 0 6rem,
		transparent 100%
	);
}

.ns-cronologia__cuerpo {
	padding: 2.5rem 0 3rem;
}

.ns-cronologia__hito:not(:first-child) .ns-cronologia__cuerpo {
	border-top: 1px solid var(--ns-borde);
}

.ns-cronologia__titulo {
	margin-bottom: var(--ns-e-2);
}

.ns-cronologia__texto {
	margin-bottom: 0;
	color: var(--ns-tinta-suave);
}

/* La tesis se trata como una pieza editorial independiente al final del
   recorrido. Mantiene dos columnas, pero no depende de anchos fijos. */
.ns-sobre-mi .ns-ficha--duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: start;
	gap: 3.5rem;
	margin-top: var(--ns-e-5);
	padding: 3.5rem;
}

.ns-sobre-mi .ns-ficha__titulo {
	margin-bottom: 0;
	font-size: 2rem;
}

.ns-sobre-mi .ns-frase--media {
	margin-bottom: 1.25rem;
	font-size: 1.5rem;
}

.ns-sobre-mi .ns-ficha__texto {
	margin-bottom: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ns-tinta-suave);
}

/* Segunda escena: encuadre a la izquierda y lectura a la derecha. */
.ns-sobre-mi .ns-escena--aprender {
	min-height: 47.5rem;
	padding-block: clamp(5rem, 10vw, 8rem);
}

.ns-sobre-mi .ns-escena--aprender .ns-escena__fondo img {
	object-position: left center;
}

.ns-sobre-mi .ns-escena--aprender .ns-escena__texto {
	max-width: 35rem;
}

.ns-sobre-mi .ns-escena--aprender .ns-frase--grande {
	font-size: clamp(2rem, 1.55rem + 1.35vw, 2.5rem);
}

.ns-sobre-mi .ns-escena--aprender .ns-lista-marca {
	font-size: 1.0625rem;
}

/* El bloque de programas invierte la proporción genérica de .ns-duo:
   la fotografía tiene aquí más peso que la columna de texto. */
@media (min-width: 62rem) {
	.ns-sobre-mi #aprendizaje .ns-duo {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
		gap: 4.5rem;
	}
}

.ns-sobre-mi #aprendizaje .ns-revelar > p {
	color: var(--ns-tinta-suave);
}

.ns-programas {
	display: grid;
	gap: 0;
	margin: var(--ns-e-2) 0 0;
}

.ns-programas__fila {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: var(--ns-e-5);
	padding-block: 1.25rem;
	border-top: 1px solid var(--ns-borde);
}

.ns-programas__fila:last-child {
	border-bottom: 1px solid var(--ns-borde);
}

.ns-programas__nombre {
	font-family: var(--ns-font-display);
	font-size: 1.35rem;
	font-weight: var(--ns-peso-negro);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.ns-programas__texto {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--ns-tinta-suave);
}

.ns-sobre-mi #aprendizaje .ns-figura img,
.ns-sobre-mi #aprendizaje .ns-figura:hover img {
	aspect-ratio: 19 / 14;
	border-radius: 2rem;
	object-fit: cover;
}

/* Cierre lila: el botón principal se invierte a blanco para no perderse
   sobre el mismo acento y la chispa queda centrada sobre la frase. */
.ns-sobre-mi .ns-seccion--acento {
	background-color: var(--ns-lila-400);
	color: var(--ns-tinta);
}

.ns-sobre-mi .ns-seccion--acento .ns-chispa--llamada {
	top: -4.5rem;
	left: 50%;
	color: var(--ns-blanco);
	translate: -50% 0;
}

.ns-sobre-mi .ns-seccion--acento .ns-frase--grande {
	font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem);
}

.ns-sobre-mi .ns-seccion--acento .ns-acciones {
	margin-top: var(--ns-e-7);
}

.ns-sobre-mi .ns-seccion--acento .ns-boton--primario {
	background-color: var(--ns-blanco);
	color: var(--ns-lila-400);
}

.ns-sobre-mi .ns-seccion--acento .ns-boton--primario:hover {
	background-color: var(--ns-tinta);
	color: var(--ns-blanco);
}

.ns-sobre-mi .ns-seccion--acento .ns-boton--secundario {
	border-color: var(--ns-tinta);
	color: var(--ns-tinta);
}

.ns-sobre-mi .ns-seccion--acento .ns-boton--secundario:hover {
	background-color: var(--ns-tinta);
	color: var(--ns-blanco);
}

@media (max-width: 64rem) {
	.ns-sobre-mi .ns-encabezado-duo {
		grid-template-columns: 1fr;
		gap: var(--ns-e-5);
	}

	.ns-cronologia__hito {
		grid-template-columns: 8rem 1px minmax(0, 1fr);
		gap: var(--ns-e-6);
	}

	.ns-cronologia__ano { font-size: 3rem; }

	.ns-sobre-mi .ns-ficha--duo { gap: var(--ns-e-6); }
}

@media (max-width: 48rem) {
	/* Igual que el héroe de portada, el retrato vertical conserva un campo
	   lila amplio arriba: el contenido vive sobre él y Nuvia aparece al
	   final de la escena, sin dividir imagen y texto en dos bloques. */
	/* La foto se ancla al pie de la escena y el texto reserva debajo el
	   alto que ocupa Nuvia, así la cara nunca queda bajo el texto, mida lo
	   que mida el bloque. En la foto móvil (2155×3840) el pelo empieza a
	   la mitad: 0,5 × 3840 / 2155 ≈ 0,891 veces el ancho con que se pinta.
	   Nunca más estrecha que la escena, para no dejar costuras laterales;
	   lo que queda por encima de la foto lo cubre el lila de su borde. */
	.ns-sobre-mi .ns-escena--sobre-mi {
		--ns-sobre-mi-foto: max(100%, min(140%, 40rem));
		--ns-sobre-mi-cabeza: 0.891;

		display: flex;
		flex-direction: row;
		align-items: flex-start;
		min-height: 100svh;
		padding: 0;
		background: rgb(145 124 171);
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-escena__fondo {
		position: absolute;
		inset: 0;
		order: initial;
		height: auto;
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-escena__fondo picture {
		display: block;
		width: 100%;
		height: 100%;
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-escena__fondo img {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: var(--ns-sobre-mi-foto);
		max-width: none;
		height: auto;
		margin-left: calc(var(--ns-sobre-mi-foto) / -2);
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%);
		mask-image: linear-gradient(to bottom, transparent, #000 12%);
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-contenedor {
		order: initial;
		position: relative;
		z-index: 2;
		padding-block: clamp(1rem, 4svh, 2rem) calc(var(--ns-sobre-mi-foto) * var(--ns-sobre-mi-cabeza) + var(--ns-e-6));
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-heroe__titulo {
		max-width: none;
		margin-bottom: var(--ns-e-3);
		font-size: clamp(2.55rem, 1.9rem + 3.2vw, 3.5rem);
		text-wrap: wrap;
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-frase {
		margin-top: var(--ns-e-3);
		font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-acciones {
		flex-wrap: nowrap;
		gap: var(--ns-e-2);
		margin-top: var(--ns-e-4);
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-acciones .ns-boton {
		width: auto;
		padding: 0.7em 1.1em;
		font-size: var(--ns-t-pequeno);
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-heroe__credenciales {
		flex-wrap: nowrap;
		gap: var(--ns-e-2);
		margin-top: var(--ns-e-4);
		font-size: 0.5625rem;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-heroe__credenciales li {
		gap: var(--ns-e-2);
	}

	.ns-cronologia__hito {
		grid-template-columns: 4.75rem 1px minmax(0, 1fr);
		gap: var(--ns-e-4);
	}

	.ns-cronologia__ano {
		padding-top: var(--ns-e-6);
		font-size: 2rem;
	}

	.ns-cronologia__linea::before { top: 2.25rem; }

	.ns-cronologia__cuerpo {
		padding: var(--ns-e-6) 0 var(--ns-e-7);
	}

	.ns-cronologia__titulo { font-size: 1.35rem; }

	.ns-sobre-mi .ns-ficha--duo {
		grid-template-columns: 1fr;
		gap: var(--ns-e-5);
		padding: clamp(1.75rem, 7vw, 2.5rem);
	}

	.ns-sobre-mi .ns-ficha__titulo { font-size: 1.65rem; }

	.ns-sobre-mi .ns-escena--aprender {
		min-height: 0;
		padding-block: 0;
	}

	.ns-sobre-mi .ns-escena--aprender .ns-escena__fondo img {
		object-position: 28% center;
	}

	.ns-sobre-mi .ns-escena--aprender .ns-contenedor {
		padding-block: var(--ns-e-7) var(--ns-e-8);
	}

	.ns-sobre-mi #aprendizaje .ns-duo { align-items: start; }

	.ns-sobre-mi .ns-seccion--acento .ns-chispa--llamada {
		top: -3.5rem;
	}
}

@media (max-width: 30rem) {
	.ns-sobre-mi .ns-escena--sobre-mi .ns-acciones {
		display: grid;
	}

	.ns-sobre-mi .ns-escena--sobre-mi .ns-boton {
		width: 100%;
	}

	.ns-programas__fila {
		grid-template-columns: 1fr;
		gap: var(--ns-e-2);
	}

	.ns-sobre-mi .ns-seccion--acento .ns-chispa--llamada {
		display: none;
	}
}


/* ==================================================================
   15. TERAPIA DE PAREJA — proceso y gráficos explicativos
   ------------------------------------------------------------------
   Página editorial basada en el documento de contenido. El movimiento
   explica el ciclo, el proceso y los posibles rumbos; no desplaza texto
   largo ni condiciona la lectura cuando JavaScript no está disponible.
   ================================================================== */

.ns-terapia-pareja {
	--ns-terapia-lila: #8f70ad;
	--ns-terapia-lila-claro: #e8dff0;
	--ns-terapia-tinta: #2f2340;
}

.ns-terapia-pareja .ns-terapia-heroe {
	min-height: max(44rem, calc(100svh - var(--ns-cabecera-alto)));
	padding-block: clamp(4rem, 10vh, 7rem);
}

.ns-terapia-pareja .ns-terapia-heroe .ns-escena__fondo img {
	object-position: center 44%;
}

.ns-terapia-heroe__velo {
	background: linear-gradient(
		90deg,
		rgb(21 18 22 / 91%) 0%,
		rgb(25 21 28 / 82%) 31%,
		rgb(30 24 34 / 48%) 55%,
		rgb(30 24 34 / 4%) 82%
	);
}

.ns-terapia-pareja .ns-terapia-heroe__texto {
	max-width: 47rem;
}

.ns-terapia-pareja .ns-terapia-heroe h1 {
	max-width: 13ch;
	margin-bottom: var(--ns-e-5);
	font-size: clamp(2.8rem, 2rem + 3.1vw, 5.25rem);
	letter-spacing: -0.025em;
}

.ns-terapia-pareja .ns-terapia-heroe .ns-entradilla {
	max-width: 39rem;
}

.ns-terapia-pareja .ns-terapia-heroe .ns-boton--secundario {
	border-color: rgb(255 255 255 / 72%);
	color: var(--ns-blanco);
}

.ns-terapia-pareja .ns-terapia-heroe .ns-boton--secundario:hover {
	border-color: var(--ns-blanco);
	background-color: var(--ns-blanco);
	color: var(--ns-tinta);
}

/* Trazos compartidos por los tres gráficos. El estado por defecto es
   completo: GSAP solo lo repliega cuando puede animarlo. */
.ns-terapia-pareja .ns-grafico-trazo,
.ns-terapia-pareja .ns-proceso__ruta {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.ns-terapia-pareja .ns-grafico-trazo--base,
.ns-terapia-pareja .ns-proceso__ruta--base {
	stroke: var(--ns-lila-200);
	stroke-width: 1.5;
}

.ns-terapia-pareja .ns-grafico-trazo--activo,
.ns-terapia-pareja .ns-proceso__ruta--activa {
	stroke: var(--ns-lila-500);
	stroke-width: 4;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

/* Ciclo del conflicto ------------------------------------------------ */
.ns-terapia-ciclo__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(32rem, 1.18fr);
	align-items: center;
	gap: clamp(4rem, 8vw, 8rem);
}

.ns-terapia-ciclo__texto h2 {
	max-width: 11ch;
}

.ns-terapia-ciclo__texto > p:last-child {
	color: var(--ns-tinta-suave);
}

.ns-ciclo {
	position: relative;
	justify-self: center;
	width: min(100%, 36rem);
	aspect-ratio: 1;
}

.ns-ciclo__trazo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ns-ciclo__tramo {
	stroke: var(--ns-lila-500);
	stroke-width: 4;
	opacity: 0;
	transition: opacity 100ms linear;
}

.ns-ciclo__tramo.esta-activo {
	opacity: 1;
}

.ns-ciclo__paso {
	position: absolute;
	z-index: 2;
	display: grid;
	place-content: center;
	gap: 0.15rem;
	width: 8.25rem;
	height: 8.25rem;
	padding: 1rem;
	border: 1px solid var(--ns-lila-200);
	border-radius: 50%;
	background: var(--ns-hueso);
	box-shadow: 0 0.75rem 2rem rgb(47 35 64 / 7%);
	color: var(--ns-terapia-tinta);
	font: var(--ns-peso-fuerte) 0.95rem/1.15 var(--ns-font-texto);
	text-align: center;
	cursor: pointer;
	transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.ns-ciclo__paso span {
	font-size: 0.68rem;
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.14em;
	color: var(--ns-lila-500);
}

.ns-ciclo__paso:focus-visible {
	outline: none;
	border-color: var(--ns-lila-500);
}

.ns-ciclo__paso.esta-activo {
	border-color: var(--ns-lila-600);
	background-color: var(--ns-lila-600);
	color: var(--ns-blanco);
}

.ns-ciclo__paso.esta-activo span {
	color: var(--ns-lila-100);
}

.ns-ciclo__paso--uno {
	top: 0;
	left: 50%;
	translate: -50% -4%;
}

.ns-ciclo__paso--dos {
	top: 50%;
	right: 0;
	translate: 4% -50%;
}

.ns-ciclo__paso--tres {
	bottom: 0;
	left: 50%;
	translate: -50% 4%;
}

.ns-ciclo__paso--cuatro {
	top: 50%;
	left: 0;
	translate: -4% -50%;
}

.ns-ciclo__centro {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: grid;
	place-content: center;
	width: 14rem;
	min-height: 14rem;
	padding: 1.5rem;
	border-radius: 50%;
	background-color: var(--ns-lila-100);
	text-align: center;
	translate: -50% -50%;
}

.ns-ciclo__centro > span {
	font-size: 0.68rem;
	font-weight: var(--ns-peso-fuerte);
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ns-lila-600);
}

.ns-ciclo__centro p {
	margin: 0.55rem 0 0;
	font-family: var(--ns-font-display);
	font-size: 1.25rem;
	font-weight: var(--ns-peso-negro);
	line-height: 1.25;
	color: var(--ns-terapia-tinta);
}

/* Señales para pedir ayuda ------------------------------------------ */
.ns-terapia-senales__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: end;
	gap: clamp(3rem, 8vw, 8rem);
	margin-bottom: clamp(3rem, 7vw, 6rem);
}

.ns-terapia-senales__cabecera h2 {
	max-width: 12ch;
	margin-bottom: 0;
}

.ns-terapia-senales__cabecera .ns-entradilla {
	margin-bottom: 0;
}

.ns-terapia-senales__cuerpo {
	display: grid;
	grid-template-columns: minmax(21rem, 0.83fr) minmax(0, 1.17fr);
	align-items: start;
	gap: clamp(3rem, 7vw, 7rem);
}

.ns-terapia-senales__foto {
	position: sticky;
	top: calc(var(--ns-cabecera-alto) + 2rem);
	margin: 0;
}

.ns-terapia-senales__foto img {
	display: block;
	width: 100%;
	max-height: 46rem;
	aspect-ratio: 4 / 5;
	border-radius: 1.5rem;
	object-fit: cover;
	object-position: center 38%;
}

.ns-senales-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-senales-lista li {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: var(--ns-e-5);
	padding: 1.75rem 0;
	border-top: 1px solid var(--ns-borde);
}

.ns-senales-lista li:last-child {
	border-bottom: 1px solid var(--ns-borde);
}

.ns-senales-lista__numero {
	padding-top: 0.18rem;
	font-family: var(--ns-font-display);
	font-size: 1.15rem;
	font-weight: var(--ns-peso-negro);
	color: var(--ns-lila-500);
}

.ns-senales-lista p {
	margin: 0;
	font-family: var(--ns-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.65rem);
	font-weight: var(--ns-peso-medio);
	line-height: 1.35;
}

/* Cinco pasos del proceso ------------------------------------------- */
.ns-terapia-proceso__cabecera {
	max-width: 66rem;
	margin-bottom: clamp(4rem, 8vw, 7rem);
}

.ns-terapia-proceso__cabecera h2 {
	max-width: 12ch;
}

.ns-proceso {
	display: grid;
	grid-template-columns: minmax(24rem, 0.9fr) minmax(0, 1.1fr);
	align-items: start;
	gap: clamp(3rem, 8vw, 8rem);
}

.ns-proceso__visual {
	position: sticky;
	top: calc(var(--ns-cabecera-alto) + 2rem);
}

.ns-proceso__esquema {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 38rem;
	border-radius: 1.5rem;
	background-color: var(--ns-lila-100);
	overflow: hidden;
}

.ns-proceso__esquema svg {
	position: absolute;
	inset: 2rem;
	width: calc(100% - 4rem);
	height: calc(100% - 4rem);
}

.ns-proceso__ruta {
	stroke-width: 2;
}

.ns-proceso__ruta--activa {
	stroke-width: 5;
}

.ns-proceso [data-ns-ruta-proceso] {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0.8;
	transition: stroke-dashoffset var(--ns-transicion);
}

.ns-proceso__esquema circle {
	fill: var(--ns-hueso);
	stroke: var(--ns-lila-500);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.ns-proceso__contador {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.ns-proceso__contador span {
	font-family: var(--ns-font-display);
	font-size: clamp(5.5rem, 9vw, 8.5rem);
	font-weight: var(--ns-peso-negro);
	line-height: 0.8;
	color: var(--ns-lila-600);
}

.ns-proceso__contador small {
	font-weight: var(--ns-peso-fuerte);
	color: var(--ns-lila-600);
}

.ns-proceso__esquema > p {
	position: absolute;
	right: 2rem;
	bottom: 2rem;
	left: 2rem;
	margin: 0;
	font-family: var(--ns-font-display);
	font-size: 1.55rem;
	font-weight: var(--ns-peso-negro);
	line-height: 1.2;
	text-align: center;
	color: var(--ns-terapia-tinta);
}

.ns-proceso__pasos {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ns-borde);
	list-style: none;
}

.ns-proceso__paso {
	border-top: 1px solid var(--ns-borde);
}

.ns-proceso__paso button {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 1.5rem;
	width: 100%;
	padding: 2rem 1.5rem;
	border: 0;
	background: transparent;
	color: var(--ns-tinta);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.ns-proceso__paso button:focus-visible,
.ns-proceso__paso.esta-activo button {
	background-color: var(--ns-lila-100);
	outline: none;
}

.ns-proceso__paso-numero {
	font-family: var(--ns-font-display);
	font-size: 1.35rem;
	font-weight: var(--ns-peso-negro);
	color: var(--ns-lila-500);
}

.ns-proceso__paso strong,
.ns-proceso__paso small {
	display: block;
}

.ns-proceso__paso strong {
	margin-bottom: 0.5rem;
	font-family: var(--ns-font-display);
	font-size: clamp(1.35rem, 1.2rem + 0.45vw, 1.75rem);
	line-height: 1.2;
}

.ns-proceso__paso small {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ns-tinta-suave);
}

/* Lente feminista --------------------------------------------------- */
.ns-terapia-lente {
	background-color: var(--ns-terapia-tinta);
	color: var(--ns-lila-50);
}

.ns-terapia-lente h2,
.ns-terapia-lente blockquote {
	color: var(--ns-blanco);
}

.ns-terapia-lente .ns-antetitulo {
	color: var(--ns-lila-300);
}

.ns-terapia-lente__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(30rem, 0.95fr);
	align-items: center;
	gap: clamp(4rem, 8vw, 8rem);
}

.ns-terapia-lente__texto h2 {
	max-width: 13ch;
}

.ns-terapia-lente__texto > p {
	color: var(--ns-lila-100);
}

.ns-terapia-lente__texto > p:not(.ns-entradilla) {
	font-size: 1.05rem;
	color: rgb(236 228 243 / 78%);
}

.ns-terapia-lente blockquote {
	margin: 2.75rem 0 0;
	padding: 0.25rem 0 0.25rem 1.75rem;
	border-left: 3px solid var(--ns-lila-300);
	font-family: var(--ns-font-display);
	font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.8rem);
	font-weight: var(--ns-peso-medio);
	line-height: 1.4;
}

.ns-lente {
	position: relative;
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid rgb(217 202 230 / 32%);
	border-radius: 2rem;
	background-color: rgb(255 255 255 / 4%);
}

.ns-lente__orbita {
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, 23rem);
	aspect-ratio: 1;
	margin: 0 auto 2.5rem;
}

.ns-lente__orbita span {
	position: absolute;
	inset: 8%;
	border: 1px solid rgb(217 202 230 / 44%);
	border-radius: 50%;
}

.ns-lente__orbita span:nth-child(2) {
	inset: 20%;
	border-color: rgb(217 202 230 / 30%);
}

.ns-lente__orbita span:nth-child(3) {
	top: 0;
	right: 47%;
	bottom: 0;
	left: 47%;
	border: 0;
	border-left: 1px solid rgb(217 202 230 / 26%);
	border-radius: 0;
}

.ns-lente__orbita div {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 9.5rem;
	aspect-ratio: 1;
	padding: 1rem;
	border-radius: 50%;
	background-color: var(--ns-lila-300);
	font-family: var(--ns-font-display);
	font-size: 1.35rem;
	font-weight: var(--ns-peso-negro);
	line-height: 1.15;
	text-align: center;
	color: var(--ns-terapia-tinta);
}

.ns-lente__controles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.ns-lente__controles button {
	padding: 0.65rem 0.95rem;
	border: 1px solid rgb(217 202 230 / 35%);
	border-radius: var(--ns-radio-pill);
	background: transparent;
	color: var(--ns-lila-100);
	font: var(--ns-peso-fuerte) 0.82rem/1 var(--ns-font-texto);
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ns-lente__controles button:focus-visible,
.ns-lente__controles button.esta-activo {
	border-color: var(--ns-lila-300);
	background-color: var(--ns-lila-300);
	color: var(--ns-terapia-tinta);
	outline: none;
}

.ns-lente__paneles {
	min-height: 10rem;
	margin-top: 1.25rem;
}

.ns-con-js .ns-lente__panel:not(.esta-activo) {
	display: none;
}

.ns-lente__panel {
	padding: 1.5rem 0 0;
	border-top: 1px solid rgb(217 202 230 / 22%);
}

.ns-lente__panel > span {
	display: inline-block;
	margin-right: 0.75rem;
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	color: var(--ns-lila-300);
}

.ns-lente__panel > strong {
	font-family: var(--ns-font-display);
	font-size: 1.35rem;
	color: var(--ns-blanco);
}

.ns-lente__panel p {
	margin: 0.75rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ns-lila-100);
}

/* Cierre ------------------------------------------------------------ */
.ns-terapia-cierre {
	background-color: var(--ns-terapia-lila);
	color: var(--ns-tinta);
}

.ns-terapia-cierre__contenido {
	text-align: center;
}

.ns-terapia-cierre .ns-antetitulo,
.ns-terapia-cierre .ns-entradilla {
	color: var(--ns-tinta);
}

.ns-terapia-cierre .ns-antetitulo::before {
	background-color: var(--ns-tinta);
}

.ns-terapia-cierre h2 {
	max-width: 17ch;
	margin-inline: auto;
	font-size: clamp(2.2rem, 1.55rem + 2.4vw, 4rem);
}

.ns-terapia-cierre .ns-entradilla {
	max-width: 50rem;
	margin-inline: auto;
}

.ns-terapia-cierre blockquote {
	max-width: 48rem;
	margin: 3rem auto 0;
	padding: 2rem clamp(1.5rem, 5vw, 3.5rem);
	border-radius: 1.5rem;
	background-color: rgb(255 255 255 / 72%);
	font-family: var(--ns-font-display);
	font-size: clamp(1.25rem, 1.08rem + 0.55vw, 1.65rem);
	font-weight: var(--ns-peso-medio);
	line-height: 1.45;
}

.ns-terapia-cierre .ns-acciones {
	margin-top: 3rem;
}

.ns-terapia-cierre .ns-boton--tinta {
	background-color: var(--ns-tinta);
	color: var(--ns-blanco);
}

.ns-terapia-cierre .ns-boton--tinta:hover {
	background-color: var(--ns-lila-700);
	color: var(--ns-blanco);
}

@media (max-width: 70rem) {
	.ns-terapia-ciclo__rejilla,
	.ns-terapia-lente__rejilla {
		grid-template-columns: 1fr 1fr;
		gap: var(--ns-e-8);
	}

	.ns-ciclo__paso {
		width: 7.25rem;
		height: 7.25rem;
	}

	.ns-ciclo__centro {
		width: 12rem;
		min-height: 12rem;
	}

	.ns-proceso {
		grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
		gap: var(--ns-e-8);
	}

	.ns-proceso__esquema { min-height: 34rem; }
}

@media (max-width: 62rem) {
	.ns-terapia-ciclo__rejilla,
	.ns-terapia-senales__cabecera,
	.ns-terapia-lente__rejilla {
		grid-template-columns: 1fr;
	}

	.ns-terapia-ciclo__texto h2,
	.ns-terapia-lente__texto h2 {
		max-width: 15ch;
	}

	.ns-ciclo { width: min(100%, 38rem); }

	.ns-terapia-senales__cabecera {
		gap: var(--ns-e-5);
	}

	.ns-terapia-senales__cuerpo {
		grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr);
		gap: var(--ns-e-8);
	}

	.ns-proceso {
		grid-template-columns: 1fr;
	}

	.ns-proceso__visual {
		position: relative;
		top: auto;
		width: 100%;
		max-width: 34rem;
		margin-inline: auto;
	}

	.ns-proceso__esquema { min-height: 30rem; }
}

@media (max-width: 48rem) {
	.ns-terapia-pareja .ns-terapia-heroe {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: 0;
		background-color: var(--ns-terapia-tinta);
	}

	.ns-terapia-pareja .ns-terapia-heroe .ns-escena__fondo {
		position: relative;
		inset: auto;
		order: 2;
		height: min(64svh, 34rem);
	}

	.ns-terapia-pareja .ns-terapia-heroe .ns-escena__fondo img {
		object-position: 62% center;
	}

	.ns-terapia-heroe__velo { display: none; }

	.ns-terapia-pareja .ns-terapia-heroe .ns-contenedor {
		order: 1;
		padding-block: clamp(3rem, 10vw, 5rem) var(--ns-e-7);
	}

	.ns-terapia-pareja .ns-terapia-heroe h1 {
		max-width: 12ch;
		font-size: clamp(2.55rem, 1.9rem + 3.2vw, 3.5rem);
	}

	.ns-terapia-pareja .ns-terapia-heroe .ns-acciones {
		display: grid;
	}

	.ns-terapia-pareja .ns-terapia-heroe .ns-boton {
		width: 100%;
	}

	.ns-terapia-senales__cuerpo {
		grid-template-columns: 1fr;
	}

	.ns-terapia-senales__foto {
		position: relative;
		top: auto;
		max-width: 32rem;
		margin-inline: auto;
	}

	.ns-terapia-senales__foto img {
		max-height: none;
		border-radius: 1.25rem;
	}

	.ns-proceso__paso button {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		gap: var(--ns-e-4);
		padding: 1.5rem 1rem;
	}

}

@media (max-width: 38rem) {
	.ns-ciclo {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
		width: 100%;
		aspect-ratio: auto;
	}

	.ns-ciclo__trazo { display: none; }

	.ns-ciclo__paso {
		position: static;
		width: 100%;
		height: auto;
		min-height: 6.5rem;
		border-radius: 1.25rem;
		translate: none;
	}

	.ns-ciclo__centro {
		position: static;
		grid-column: 1 / -1;
		grid-row: 3;
		width: 100%;
		min-height: 9rem;
		border-radius: 1.25rem;
		translate: none;
	}

	.ns-proceso__esquema {
		min-height: 23rem;
		padding-bottom: 5rem;
		border-radius: 1.25rem;
	}

	.ns-proceso__esquema svg { inset: 1rem 1rem 6rem; width: calc(100% - 2rem); height: calc(100% - 7rem); }

	.ns-proceso__contador span { font-size: 4.5rem; }

	.ns-lente { padding: 1.25rem; }

	.ns-lente__orbita { width: min(100%, 18rem); }

	.ns-lente__orbita div { width: 8rem; font-size: 1.15rem; }

	.ns-lente__controles { justify-content: flex-start; }

	.ns-terapia-cierre blockquote { padding-inline: 1.25rem; }
}

@media (hover: hover) and (pointer: fine) {
	.ns-ciclo__paso:hover {
		transform: scale(1.025);
		border-color: var(--ns-lila-500);
	}

	.ns-proceso__paso button:hover {
		background-color: var(--ns-lila-100);
	}

	.ns-lente__controles button:hover {
		border-color: var(--ns-lila-300);
		background-color: var(--ns-lila-300);
		color: var(--ns-terapia-tinta);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ns-terapia-pareja .ns-ciclo__paso,
	.ns-terapia-pareja .ns-proceso__paso button,
	.ns-terapia-pareja .ns-lente__controles button {
		transition: none;
	}

	.ns-ciclo__tramo {
		transition: none;
	}

	.ns-proceso [data-ns-ruta-proceso] {
		transition: none;
	}
}

/* ==================================================================
   16. AVISO DE COOKIES
   ==================================================================
   Una tarjeta discreta anclada abajo, no una barra que tape la página.
   El aviso se imprime oculto y lo revela el JavaScript de inc/cookies.php,
   así que su estado inicial en el HTML es siempre el mismo y sobrevive a
   cualquier caché. Por encima de la cabecera (200) y por debajo del enlace
   de salto (999). */

.ns-cookies {
	position: fixed;
	inset-inline: var(--ns-e-4);
	bottom: var(--ns-e-4);
	z-index: 300;
	display: flex;
	justify-content: center;
	/* La tarjeta recibe el ratón; el resto de la franja, no. */
	pointer-events: none;
}

/* El `display: flex` de arriba gana al `display: none` que el navegador da
   a [hidden], así que hay que devolvérselo a mano. Sin esta regla la
   tarjeta sigue ocupando su sitio aunque esté decidida: es invisible
   (opacity: 0), pero `opacity` no quita el clic, y en móvil ocupa el tercio
   inferior de la pantalla de lado a lado, de modo que se comía los toques
   de cualquier botón que cayera ahí —los «Inscribirme» de los talleres,
   entre otros—. */
.ns-cookies[hidden] {
	display: none;
}

.ns-cookies__caja {
	pointer-events: auto;
	width: min(100%, 44rem);
	padding: var(--ns-e-5);
	background-color: var(--ns-hueso);
	border: 1px solid var(--ns-borde);
	border-radius: var(--ns-radio-l);
	box-shadow: var(--ns-sombra-m);
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity var(--ns-transicion), transform var(--ns-transicion);
}

.ns-cookies--visible .ns-cookies__caja {
	opacity: 1;
	transform: none;
}

.ns-cookies__rotulo {
	margin: 0 0 var(--ns-e-2);
	font-family: var(--ns-font-texto);
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ns-acento-texto);
}

.ns-cookies__texto {
	margin: 0 0 var(--ns-e-4);
	font-size: var(--ns-t-pequeno);
	line-height: var(--ns-alto-cuerpo);
	color: var(--ns-tinta-suave);
	text-wrap: pretty;
}

.ns-cookies__texto a {
	color: var(--ns-lila-700);
	text-underline-offset: 0.2em;
}

.ns-cookies__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-e-3);
}

/* En pantallas estrechas los dos botones ocupan el ancho: la decisión es
   lo único que hay que hacer ahí y así el área táctil es cómoda. */
@media (max-width: 30rem) {
	.ns-cookies {
		inset-inline: 0;
		bottom: 0;
	}

	.ns-cookies__caja {
		border-radius: var(--ns-radio-l) var(--ns-radio-l) 0 0;
		border-inline: 0;
		border-bottom: 0;
	}

	.ns-cookies__acciones .ns-boton {
		flex: 1 1 100%;
	}
}

/* «Preferencias de cookies» en el pie: es un botón, pero se lee como el
   resto de los enlaces legales. Lo añade ns_cookies_enlace_pie(). */
.ns-pie__legal-cookies button {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	color: var(--ns-arena);
	cursor: pointer;
}

.ns-pie__legal-cookies button:hover {
	color: var(--ns-blanco);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.ns-cookies__caja {
		transition: none;
	}
}