/**
 * Nuvia Sequera — rutas de acompañamiento (NOSOTRAS y NOSOTROS)
 * ==================================================================
 *
 * Traduce a la web el cartel de cada ruta. Lo que define ese cartel:
 *
 *   · Un campo lila a sangre, el morado de marca #9373b1, con la
 *     fotografía en duotono sobre el mismo lila, de modo que foto y
 *     fondo son una sola superficie sin costura.
 *   · El logotipo (TT Ramillas Black con el corazón dentro de la «o»)
 *     haciendo de titular.
 *   · El mensaje en Helvetica Neue Light muy grande, blanco, en líneas
 *     cortas apiladas y alineadas a la izquierda.
 *   · Los rótulos pequeños en TT Ramillas Black: «Taller de divulgación
 *     gratuito», «Sesión 0», «Reservas».
 *   · El corazón de la identidad, gigante y blanco, saliendo por la
 *     esquina inferior derecha.
 *
 * Se carga solo en la plantilla page-templates/ruta.php.
 *
 *  1. Tokens del cartel
 *  2. El campo lila
 *  3. Héroe
 *  4. Secciones de contenido
 *  5. Práctica
 *  6. Cierre
 */

/* ==================================================================
   1. TOKENS DEL CARTEL
   ================================================================== */

.ns-ruta {
	/*
	 * El lila del cartel es el morado de marca. La fotografía viene ya
	 * virada a ese mismo tono desde el original, así que el campo plano
	 * y la foto empalman sin borde visible.
	 */
	--cartel-lila: var(--ns-lila-400);
	--cartel-lila-hondo: #6f5490;

	/* Blanco del cartel: el titular y el corazón. */
	--cartel-tinta: var(--ns-blanco);
	--cartel-tinta-suave: rgb(255 255 255 / 88%);
	--cartel-tinta-tenue: rgb(255 255 255 / 68%);

	/* El titular grande: Helvetica Light, muy apretado de interlínea. */
	--cartel-titular: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);
	--cartel-titular-alto: 1.06;
}

/* ==================================================================
   2. EL CAMPO LILA
   ================================================================== */

.ns-cartel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--cartel-lila);
	color: var(--cartel-tinta);
	padding-block: var(--ns-seccion);
}

.ns-cartel--compacto {
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

/*
 * La fotografía. Llega ya virada al lila de marca, con su propio fondo
 * plano del mismo tono, así que basta con difuminar el borde por donde
 * entra el texto para que foto y campo sean una sola superficie.
 *
 * En vertical se comporta como el cartel: la imagen detrás de todo y el
 * texto encima. En apaisado no cabe así —el recorte dejaría solo un
 * amasijo de brazos—, de modo que la foto se va a la derecha y el texto
 * ocupa la izquierda, que es la misma jerarquía en otro formato.
 */
.ns-cartel__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ns-cartel__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 100%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 14%, #000 52%);
	mask-image: linear-gradient(to bottom, transparent 0%, transparent 14%, #000 52%);
}

@media (min-width: 62rem) {
	.ns-cartel__foto {
		inset: 0 0 0 40%;
	}

	.ns-cartel__foto img {
		object-position: 50% 45%;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
		mask-image: linear-gradient(to right, transparent 0%, #000 40%);
	}
}

/* El corazón gigante, a sangre por la esquina. */
.ns-cartel__corazon {
	position: absolute;
	z-index: -1;
	width: clamp(20rem, 46vw, 44rem);
	aspect-ratio: 826 / 715;
	pointer-events: none;

	/*
	 * En el cartel la forma es blanca y la fotografía se multiplica encima,
	 * así que la figura se sigue leyendo a través. Aquí se consigue lo
	 * mismo dejándola por encima de la foto a media opacidad.
	 */
	opacity: 0.3;
}

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

.ns-cartel__corazon svg path {
	fill: var(--ns-blanco);
}

.ns-cartel__corazon--derecha {
	right: -6%;
	bottom: -14%;
	transform: rotate(-8deg);
}

.ns-cartel__corazon--izquierda {
	left: -12%;
	top: -18%;
	transform: rotate(172deg);
}

/* Antetítulos y rótulos dentro del campo. */
.ns-cartel .ns-antetitulo {
	color: var(--cartel-tinta-suave);
}

.ns-cartel .ns-antetitulo::before {
	background-color: var(--cartel-tinta-tenue);
}

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

/*
 * Botones sobre el campo: el claro es blanco sólido, y el secundario pasa
 * a contorno blanco porque el suyo, pensado para fondo hueso, desaparece
 * aquí.
 */
.ns-cartel .ns-boton--secundario {
	color: var(--cartel-tinta);
	border-color: rgb(255 255 255 / 55%);
	background-color: transparent;
}

.ns-cartel .ns-boton--secundario:hover,
.ns-cartel .ns-boton--secundario:focus-visible {
	border-color: var(--cartel-tinta);
	background-color: rgb(255 255 255 / 12%);
	color: var(--cartel-tinta);
}

/* El titular grande del cartel. */
.ns-ruta-titular {
	font-family: var(--ns-font-texto);
	font-weight: var(--ns-peso-ligero);
	font-size: var(--cartel-titular);
	line-height: var(--cartel-titular-alto);
	letter-spacing: -0.015em;
	color: var(--cartel-tinta);
	margin: 0;
	text-wrap: balance;
}

/* En el héroe cada línea del cartel es una línea de verdad. */
.ns-ruta-titular > span {
	display: block;
}

/* Fuera del héroe el mismo tono, pero dejando que el texto fluya. */
.ns-ruta-titular--fluido {
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
	max-width: 22ch;
}

/* ==================================================================
   3. HÉROE
   ================================================================== */

.ns-ruta-heroe {
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding-block: clamp(6rem, 12vw, 9rem) clamp(3rem, 7vw, 5rem);
}

.ns-ruta-heroe__interior {
	position: relative;
	z-index: 1;
}

/*
 * En apaisado el texto se queda en la mitad izquierda, la que no pisa la
 * fotografía. Se acota el contenido, no el contenedor: el contenedor
 * sigue centrado y alineado con el resto de la página.
 */
@media (min-width: 62rem) {
	.ns-ruta-heroe__interior > * {
		max-width: min(100%, 34rem);
	}

	.ns-ruta-heroe__interior > .ns-ruta-titular {
		max-width: min(100%, 38rem);
	}
}

/* El logotipo hace de titular: es la marca del cartel, no un adorno. */
.ns-ruta-heroe__marca {
	margin: 0 0 var(--ns-e-6);
	line-height: 0;
}

.ns-ruta-heroe__marca img {
	width: min(100%, 34rem);
	height: auto;
}

/*
 * El titular no arranca en el borde del contenedor: arranca donde
 * arranca el tagline dentro del logotipo («Una ruta de...», no la
 * «N»), justo encima. --ns-ruta-tagline-fraccion está definida en
 * principal.css, medida en los propios trazos del SVG.
 */
.ns-ruta-heroe .ns-ruta-titular {
	max-width: 18ch;
	margin-left: calc( min( 100%, 34rem ) * var( --ns-ruta-tagline-fraccion, 0.3015 ) );
}

/* El bloque del acto de apertura, como el pie del cartel. */
.ns-ruta-apertura {
	margin-top: var(--ns-e-6);
}

.ns-ruta-apertura__rotulo {
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: var(--ns-t-h4);
	color: var(--cartel-tinta);
	margin: 0 0 var(--ns-e-2);
}

.ns-ruta-apertura__cuando {
	font-family: var(--ns-font-texto);
	font-weight: var(--ns-peso-ligero);
	font-size: var(--ns-t-grande);
	line-height: 1.35;
	color: var(--cartel-tinta-suave);
	margin: 0;
}

.ns-ruta-heroe .ns-acciones {
	margin-top: var(--ns-e-6);
}

/*
 * El sello (18 años · 18 ediciones · 21 sesiones) va en una cinta debajo
 * del cartel, no dentro: el cartel original no lo lleva, y sacarlo deja
 * que la fotografía y el corazón entren enteros en la primera pantalla.
 */
.ns-ruta-cinta {
	background-color: var(--ns-blanco);
	border-bottom: 1px solid var(--ns-borde);
}

.ns-ruta-sello {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ns-e-4) var(--ns-e-7);
	list-style: none;
	margin: 0;
	padding-block: var(--ns-e-5);
}

.ns-ruta-sello li {
	display: flex;
	align-items: baseline;
	gap: var(--ns-e-2);
}

.ns-ruta-sello__cifra {
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	line-height: 1;
	color: var(--ns-acento-texto);
}

.ns-ruta-sello__etiqueta {
	font-size: var(--ns-t-pequeno);
	color: var(--ns-tinta-suave);
	letter-spacing: 0.04em;
}

.ns-ruta-sello__edicion {
	margin-inline-start: auto;
	font-size: var(--ns-t-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ns-tinta-tenue);
}

/* ==================================================================
   4. SECCIONES DE CONTENIDO
   ================================================================== */

.ns-ruta-intro {
	text-align: center;
}

.ns-ruta-intro__texto {
	max-width: 62ch;
	margin-inline: auto;
	margin-top: var(--ns-e-5);
}

.ns-ruta-intro__frase {
	margin-top: var(--ns-e-7);
}

/* De dónde viene: el rótulo a un lado y el relato al otro. */
.ns-ruta-origen__rejilla {
	display: grid;
	gap: var(--ns-e-7);
}

@media (min-width: 62rem) {
	.ns-ruta-origen__rejilla {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		gap: var(--ns-e-9);
		align-items: start;
	}

	.ns-ruta-origen__cabecera {
		position: sticky;
		top: 7rem;
	}
}

.ns-ruta-origen__firma {
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	color: var(--ns-acento-texto);
}

/* Mandatos: del «debería» al «yo quiero». */
.ns-mandatos {
	list-style: none;
	margin: var(--ns-e-8) 0 0;
	padding: 0;
	display: grid;
	gap: var(--ns-e-4);
}

@media (min-width: 48rem) {
	.ns-mandatos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ns-e-5);
	}
}

.ns-mandato {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--ns-e-4);
	margin: 0;
	padding: var(--ns-e-5);
	border: 1px solid var(--ns-borde);
	border-radius: var(--ns-radio-m);
	background-color: var(--ns-blanco);
}

.ns-mandato p {
	margin: 0;
	font-size: var(--ns-t-pequeno);
	line-height: 1.45;
}

.ns-mandato__antes {
	color: var(--ns-tinta-tenue);
	font-style: italic;
}

.ns-mandato__flecha {
	display: flex;
	color: var(--ns-acento-texto);
}

.ns-mandato__despues {
	color: var(--ns-tinta);
	font-weight: var(--ns-peso-medio);
}

.ns-ruta-mandatos .ns-frase {
	margin-top: var(--ns-e-8);
	max-width: 46ch;
	margin-inline: auto;
}

/* Responsabilidad sin culpabilización (solo en NOSOTROS). */
.ns-ruta-responsabilidad {
	text-align: center;
}

.ns-ruta-responsabilidad .ns-ruta-titular {
	margin-inline: auto;
	max-width: 26ch;
}

.ns-ruta-responsabilidad__texto {
	margin-top: var(--ns-e-7);
	max-width: 58ch;
	margin-inline: auto;
	color: var(--cartel-tinta-suave);
	text-align: start;
}

.ns-ruta-responsabilidad__texto p + p {
	margin-top: var(--ns-e-4);
}

/* Gestalt + feminismo. */
.ns-ruta-mirada__columnas {
	display: grid;
	gap: var(--ns-e-6);
	margin-top: var(--ns-e-8);
}

@media (min-width: 48rem) {
	.ns-ruta-mirada__columnas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ns-e-7);
	}
}

.ns-ruta-pilar {
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde);
	border-radius: var(--ns-radio-l);
	padding: var(--ns-e-6);
}

.ns-ruta-pilar h3 {
	margin: var(--ns-e-4) 0 var(--ns-e-3);
}

.ns-ruta-pilar__icono {
	width: 3.5rem;
	color: var(--ns-acento);
}

.ns-ruta-pilar__icono svg {
	width: 100%;
	height: auto;
	display: block;
}

.ns-ruta-pilar__texto {
	color: var(--ns-tinta-suave);
	margin: 0 0 var(--ns-e-5);
}

.ns-ruta-pilar__pasos {
	margin: 0;
	padding-left: 1.35em;
	display: grid;
	gap: var(--ns-e-3);
	font-size: var(--ns-t-pequeno);
	line-height: 1.55;
	color: var(--ns-tinta-suave);
}

.ns-ruta-pilar__pasos::marker,
.ns-ruta-pilar__pasos li::marker {
	color: var(--ns-acento-texto);
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
}

.ns-ruta-mirada__confluencia {
	margin-top: var(--ns-e-8);
	max-width: 50ch;
	margin-inline: auto;
}

/* Los movimientos, en acordeón. */
.ns-ruta-acordeon {
	margin-top: var(--ns-e-8);
}

.ns-ruta-acordeon__encabezado {
	flex: 1;
	display: block;
}

.ns-ruta-acordeon__lema {
	display: block;
	margin-top: var(--ns-e-2);
	font-family: var(--ns-font-texto);
	font-weight: var(--ns-peso-ligero);
	font-size: var(--ns-t-cuerpo);
	line-height: 1.45;
	color: var(--ns-tinta-suave);
}

.ns-ruta-acordeon .ns-acordeon__cuerpo {
	padding-left: 2.5rem;
	max-width: var(--ns-ancho-texto);
}

.ns-ruta-acordeon__pregunta {
	margin-top: var(--ns-e-5);
	padding-left: var(--ns-e-5);
	border-left: 2px solid var(--ns-acento);
	font-style: italic;
	color: var(--ns-tinta);
}

.ns-ruta-acordeon__pregunta span {
	display: block;
	font-style: normal;
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ns-acento-texto);
	margin-bottom: var(--ns-e-2);
}

.ns-ruta-acordeon__sesiones {
	margin-top: var(--ns-e-4);
	font-size: var(--ns-t-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ns-tinta-tenue);
}

/* Lo que se activa. */
.ns-ruta-activar__rejilla {
	display: grid;
	gap: var(--ns-e-7);
}

@media (min-width: 62rem) {
	.ns-ruta-activar__rejilla {
		grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
		gap: var(--ns-e-9);
		align-items: start;
	}
}

.ns-ruta-activar__lista {
	columns: 1;
}

@media (min-width: 48rem) {
	.ns-ruta-activar__lista {
		columns: 2;
		column-gap: var(--ns-e-7);
	}

	.ns-ruta-activar__lista li {
		break-inside: avoid;
	}
}

/* El grupo: el segundo momento cartel. */
.ns-ruta-grupo {
	text-align: center;
}

.ns-ruta-grupo__titulo {
	margin-bottom: var(--ns-e-6);
}

.ns-ruta-grupo__texto {
	max-width: 60ch;
	margin-inline: auto;
	text-align: start;
	color: var(--cartel-tinta-suave);
}

.ns-ruta-grupo__texto p + p {
	margin-top: var(--ns-e-4);
}

.ns-ruta-grupo__frase {
	margin: var(--ns-e-8) auto 0;
	max-width: 24ch;
}

/* Para quién es. */
.ns-ruta-quien__aviso {
	margin-top: var(--ns-e-6);
}

.ns-ruta-quien__lista {
	margin-block: var(--ns-e-7);
}

/* ==================================================================
   5. PRÁCTICA
   ================================================================== */

.ns-ruta-practica__datos {
	margin-block: var(--ns-e-8);
}

.ns-ruta-practica__cuerpo {
	display: grid;
	gap: var(--ns-e-8);
}

@media (min-width: 62rem) {
	.ns-ruta-practica__cuerpo {
		/* Los grupos ocupan una columna compacta; las pautas, que son
		   texto y deben leerse sin esfuerzo, se llevan el resto del ancho. */
		grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
		gap: var(--ns-e-9);
		align-items: start;
	}
}

.ns-ruta-grupos h3,
.ns-ruta-pautas h3 {
	margin: 0 0 var(--ns-e-5);
}

/* Pautas logísticas y administrativas: una lista numerada, cada punto con
   su título y su texto, separados por una línea para que no se confundan. */
.ns-ruta-pautas__intro {
	margin: 0 0 var(--ns-e-6);
	max-width: 62ch;
	color: var(--ns-tinta-suave);
}

.ns-ruta-pautas__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-ruta-pautas__lista li {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: var(--ns-e-2) var(--ns-e-4);
	padding: var(--ns-e-5) 0;
	border-top: 1px solid var(--ns-borde);
}

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

.ns-ruta-pautas__numero {
	padding-top: 0.1em;
	font-family: var(--ns-font-display);
	font-size: 1rem;
	font-weight: var(--ns-peso-negro);
	color: var(--ns-lila-500);
}

.ns-ruta-pautas__titulo {
	margin: 0 0 var(--ns-e-2);
	font-family: var(--ns-font-display);
	font-size: var(--ns-t-h4);
	font-weight: var(--ns-peso-negro);
	line-height: 1.2;
}

.ns-ruta-pautas__cuerpo p {
	margin: 0;
	max-width: 64ch;
	line-height: 1.6;
	color: var(--ns-tinta-suave);
}

@media (max-width: 47.99rem) {
	.ns-ruta-pautas__lista li {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ns-e-2);
	}
}

.ns-ruta-grupo-ficha {
	border: 1px solid var(--ns-borde);
	border-radius: var(--ns-radio-m);
	background-color: var(--ns-blanco);
	padding: var(--ns-e-5);
}

.ns-ruta-grupo-ficha + .ns-ruta-grupo-ficha {
	margin-top: var(--ns-e-4);
}

.ns-ruta-grupo-ficha__dia {
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: var(--ns-t-h3);
	line-height: 1.1;
	margin: 0;
}

.ns-ruta-grupo-ficha__horario {
	margin: var(--ns-e-1) 0 var(--ns-e-4);
	color: var(--ns-acento-texto);
	font-weight: var(--ns-peso-medio);
}

.ns-ruta-grupo-ficha__detalle {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--ns-e-2) var(--ns-e-4);
	margin: 0;
	font-size: var(--ns-t-pequeno);
}

.ns-ruta-grupo-ficha__detalle dt {
	color: var(--ns-tinta-tenue);
	font-size: var(--ns-t-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-top: 0.15em;
}

.ns-ruta-grupo-ficha__detalle dd {
	margin: 0;
	color: var(--ns-tinta-suave);
}

.ns-ruta-grupos .ns-nota {
	margin-top: var(--ns-e-5);
}

.ns-ruta-grupos .ns-acciones {
	margin-top: var(--ns-e-5);
}

/* ==================================================================
   6. CIERRE
   ================================================================== */

.ns-ruta-cierre {
	text-align: center;
}

.ns-ruta-cierre__frase {
	font-family: var(--ns-font-texto);
	font-weight: var(--ns-peso-ligero);
	font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
	line-height: 1.18;
	color: var(--cartel-tinta);
	max-width: 26ch;
	margin: var(--ns-e-5) auto 0;
	padding: 0;
	border: 0;
	text-wrap: balance;
}

.ns-ruta-cierre__texto {
	margin-top: var(--ns-e-7);
	max-width: 56ch;
	margin-inline: auto;
	text-align: start;
	color: var(--cartel-tinta-suave);
}

.ns-ruta-cierre__texto p + p {
	margin-top: var(--ns-e-4);
}

/* «Reservas», como en el pie del cartel. */
.ns-ruta-cierre__rotulo {
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: var(--ns-t-h4);
	color: var(--cartel-tinta);
	margin: var(--ns-e-8) 0 var(--ns-e-2);
}

.ns-ruta-cierre__apoyo {
	color: var(--cartel-tinta-tenue);
	margin: 0 0 var(--ns-e-6);
}

.ns-ruta-cierre__correo {
	margin-top: var(--ns-e-6);
	font-size: var(--ns-t-pequeno);
}

.ns-ruta-cierre__correo a {
	color: var(--cartel-tinta-suave);
	text-decoration-color: rgb(255 255 255 / 45%);
}

.ns-ruta-cierre__correo a:hover {
	color: var(--cartel-tinta);
}

/* ==================================================================
   Reducción de movimiento y pantallas pequeñas
   ================================================================== */

@media (max-width: 47.99rem) {
	.ns-cartel__foto img {
		object-position: 50% 100%;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, #000 64%);
		mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, #000 64%);
	}

	.ns-cartel__corazon {
		opacity: 0.3;
	}

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

	.ns-mandato__flecha {
		transform: rotate(90deg);
		width: 14px;
	}
}