/* =========================================================================
   Colegio Novo Mundo · CSS del tema hijo
   Paleta y tipografía de plan/02-marca-y-kit.md
   Se encola en functions.php con prioridad 30 y versión filemtime().
   ========================================================================= */

:root {
	/* --- Violetas (institucional · Novo Horizonte) ---
	   Los dos colegios comparten isotipo y la dupla violeta + amarillo; la
	   diferencia es de matiz y está declarada en la propuesta: Novo Mundo usa
	   un morado profundo (#240B69 / #4A1FA8) y Novo Horizonte un violeta más
	   luminoso, #773CBD. El amarillo es el mismo en ambos.

	   La indicación de diseño del espejo es «más blanco y menos bloque»: el
	   violeta se usa en titulares, botones y detalles, y las franjas sólidas
	   de color se reservan para los cortes de sección, no para bloques
	   enteros como en el piloto. */
	--nm-morado: #773CBD;        /* violeta institucional: hero, botón primario */
	--nm-morado-medio: #5E2E97;  /* la versión profunda, para degradados y hover */
	--nm-violeta-marca: #8B55C9; /* franjas y fondos secundarios */
	--nm-violeta: #9460D6;       /* hover, detalles */

	/* --- Acento --- */
	--nm-amarillo: #FCCC00;      /* botones secundarios, franjas (02) */

	/* --- Neutros --- */
	--nm-tinta: #221636;         /* texto sobre fondo claro, afinado al violeta */
	--nm-gris-texto: #4A4A5A;
	--nm-gris-borde: #E6E0EF;
	--nm-fondo-claro: #F8F5FC;   /* más claro que en el piloto: «más blanco» */
	--nm-blanco: #FFFFFF;

	/* --- Tipografía (Inter 600 titulares + Inter 400/500 cuerpo + Noto Sans 500 menú) --- */
	--nm-font-titulo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;  /* sin serif: decisión 18-sep */
	--nm-font-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--nm-font-menu: 'Noto Sans', var(--nm-font-cuerpo);

	/* --- Escalas (escritorio / teléfono en las media queries) --- */
	--nm-size-hero: 56px;
	--nm-size-h1: 48px;
	--nm-size-h2: 36px;
	--nm-size-cuerpo: 17px;

	/* --- Varios --- */
	--nm-radio: 0;   /* el kit usa esquinas rectas */
	--nm-sombra: 0 6px 24px rgba(94, 46, 151, .12);
}

@media (max-width: 767px) {
	:root {
		--nm-size-hero: 32px;
		--nm-size-h1: 32px;
		--nm-size-h2: 28px;
		--nm-size-cuerpo: 16px;
	}
}

/* =========================================================================
   PRUEBA VISUAL (tarea 9) — retirada en la tarea 25: el encabezado del
   Theme Builder ya está montado y la franja morada/amarilla de testigo
   quedaba como una banda suelta sobre la barra superior.
   ========================================================================= */

/* =========================================================================
   Base
   ========================================================================= */
body {
	font-family: var(--nm-font-cuerpo);
	font-size: var(--nm-size-cuerpo);
	color: var(--nm-gris-texto);
	background-color: var(--nm-blanco);
}

h1, h2, h3, h4, h5, h6,
.site-title {
	font-family: var(--nm-font-titulo);
	font-weight: 600;
	color: var(--nm-morado);
}

h1 { font-size: var(--nm-size-h1); }
h2 { font-size: var(--nm-size-h2); }

/*
 * Hallazgo de la tarea 35, corrección sitewide: la tipografía global "Text"
 * del kit Edupreme (post-5.css, --e-global-typography-text-text-transform)
 * trae text-transform:uppercase y se aplica a CUALQUIER párrafo dentro del
 * widget nativo "Editor de texto" (`.elementor-widget-text-editor`, sin
 * !important, especificidad 0,1,0) — no solo a los titulares, que t27 ya
 * había corregido. Confirmado en vivo con getComputedStyle() en DOS páginas
 * ya publicadas antes de esta tarea: `.nm-encabezado-pagina__bajada` (la
 * bajada del encabezado de página, compartida por TODAS las páginas
 * interiores) y `.nm-intro` en /pie/ (t34) salían en mayúsculas aunque el
 * texto en la base de datos está en minúsculas — el bug estaba ahí desde
 * antes de esta tarea, simplemente nadie lo había mirado con el zoom
 * suficiente. La regla de abajo carga después del kit (nm.css se encola con
 * prioridad 30) y con la misma especificidad basta para ganar; se agrega
 * `!important` igual, por consistencia con el resto de las correcciones de
 * especificidad de este archivo.
 */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	text-transform: none !important;
}

/* Enlaces en morado institucional (por defecto Hello los pinta fucsia). */
a,
.site-title a,
.entry-title a,
.page-content a {
	color: var(--nm-morado);
	text-decoration: none;
}

a:hover,
a:focus,
.site-title a:hover,
.entry-title a:hover {
	color: var(--nm-violeta);
}

a:focus-visible {
	outline: 3px solid var(--nm-amarillo);
	outline-offset: 2px;
}

/* =========================================================================
   Encabezado y pie del tema (mientras no esté el Theme Builder)
   ========================================================================= */
.site-header {
	background-color: var(--nm-morado);
	border-bottom: 6px solid var(--nm-amarillo);
}

.site-header .site-title,
.site-header .site-title a,
.site-header .site-description {
	color: var(--nm-blanco);
}

.site-header .site-title a:hover {
	color: var(--nm-amarillo);
}

.site-navigation ul li a {
	font-family: var(--nm-font-menu);
	font-weight: 500;
	color: var(--nm-blanco);
}

.site-footer {
	background-color: var(--nm-tinta);
	color: var(--nm-blanco);
}

.site-footer a {
	color: var(--nm-amarillo);
}

/* =========================================================================
   Botones — LOS PONE EL KIT, no este archivo.
   El kit Edupreme define los botones en los Ajustes del sitio de Elementor:
   esquinas rectas (radio 0), Inter 500 en versalitas con interletrado,
   sombra suave y, en el hero, borde de 2 px. Aquí NO se tocan: la versión
   anterior los redondeaba y les quitaba el borde con `body .elementor-widget-button`
   y el resultado no se parecía al kit ni a la simulación aprobada.
   El problema que aquel bloque intentaba resolver (botón amarillo con texto
   blanco, 1,68:1) se corrige donde corresponde: en el color global de botón
   del kit, hoy el violeta de marca. Ver plan/11-metodo-maquetacion.md.
   Solo se estilan los botones nativos que Elementor no alcanza.
   ========================================================================= */
button,
input[type="submit"],
.button,
.wp-block-button__link {
	font-family: var(--nm-font-cuerpo);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	background-color: var(--nm-violeta-marca);
	color: var(--nm-blanco);
	border: 0;
	border-radius: 0;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
}

/* =========================================================================
   Formularios — nunca bajo 16px: iOS hace zoom al enfocar el campo.
   ========================================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
	font-family: var(--nm-font-cuerpo);
	font-size: 16px;
	color: var(--nm-tinta);
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--nm-violeta);
	outline: 2px solid var(--nm-violeta);
	outline-offset: 0;
}

/* =========================================================================
   Utilidades de bloque
   ========================================================================= */
.nm-fondo-morado {
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
}

.nm-fondo-claro {
	background-color: var(--nm-fondo-claro);
	color: var(--nm-tinta);
}

.nm-borde {
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
}

.nm-sombra {
	box-shadow: var(--nm-sombra);
}

/* =========================================================================
   Encabezado de página (tarea 28) — franja morada con migas de pan + H1 +
   bajada. "La misma sección reutilizada" (03, reglas transversales): estas
   clases son el punto de reuso; cada página vuelve a armar el HTML con su
   propio texto (no hay una plantilla Elementor sincronizada para bloques de
   contenido de página, a diferencia de header/footer que sí usan el Theme
   Builder — ver bitácora t28).
   ========================================================================= */
.nm-encabezado-pagina {
	background-color: var(--nm-morado);
	padding: 40px 20px 34px;
}

.nm-encabezado-pagina__migas,
.nm-encabezado-pagina__migas a,
.nm-encabezado-pagina__migas span {
	font-family: var(--nm-font-cuerpo);
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

.nm-encabezado-pagina__migas a:hover {
	color: var(--nm-amarillo);
}

.nm-encabezado-pagina__titulo {
	color: var(--nm-blanco);
	margin: 10px 0 8px;
}

.nm-encabezado-pagina__bajada {
	font-family: var(--nm-font-cuerpo);
	font-size: 17px;
	color: rgba(255, 255, 255, .88);
	max-width: 62ch;
	margin: 0;
}

/*
 * Ojo (tarea 29): la bajada del encabezado de página salía invisible —
 * gris oscuro sobre morado. Mismo problema que t28 ya dejó documentado más
 * abajo para `.nm-cta__pregunta` (el CSS del Global Kit del kit Edupreme
 * fija el color del párrafo con más especificidad que el selector de
 * clase sola): se sube la especificidad con `body` por delante, igual que
 * ahí.
 */
body .nm-encabezado-pagina__bajada,
body .nm-encabezado-pagina__bajada p {
	color: rgba(255, 255, 255, .88) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
}

/* =========================================================================
   Comunidad (tarea 28) — filtro por equipo, tarjeta de persona, egresados.
   ========================================================================= */
.nm-intro {
	font-family: var(--nm-font-cuerpo);
	font-size: 17px;
	line-height: 1.7;
	color: var(--nm-gris-texto);
	max-width: 70ch;
}

.nm-filtro-equipo .e-filter {
	--e-filter-space-between: 10px;
	--e-filter-item-border-radius: 999px;
	--e-filter-item-padding: 10px 18px;
}

.nm-filtro-equipo .e-filter-item {
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 15px;
	border: 1px solid var(--nm-gris-borde);
	background-color: var(--nm-blanco);
	color: var(--nm-tinta);
	cursor: pointer;
}

.nm-filtro-equipo .e-filter-item:hover {
	border-color: var(--nm-violeta);
	color: var(--nm-violeta);
}

.nm-filtro-equipo .e-filter-item[aria-pressed="true"] {
	background-color: var(--nm-morado);
	border-color: var(--nm-morado);
	color: var(--nm-blanco);
}

.nm-tarjeta {
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--nm-sombra);
	height: 100%;
}

.nm-tarjeta__foto img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	display: block;
}

.nm-tarjeta__cuerpo {
	padding: 18px 20px 22px;
}

.nm-tarjeta__nombre {
	font-size: 18px !important;
	margin: 0 0 4px !important;
}

.nm-persona-cargo {
	display: block;
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--nm-violeta);
	margin: 0 0 10px;
}

.nm-persona-descripcion {
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	line-height: 1.55;
	color: var(--nm-gris-texto);
	margin: 0 0 10px;
}

.nm-persona-correo {
	display: inline-block;
	font-family: var(--nm-font-cuerpo);
	font-size: 14px;
	color: var(--nm-morado);
	overflow-wrap: anywhere;
}

.nm-egresados {
	background-color: var(--nm-fondo-claro);
}

.nm-egresados__testimonio {
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: 14px;
	padding: 20px 22px;
	height: 100%;
}

.nm-egresados__cita {
	font-family: var(--nm-font-titulo);
	font-style: italic;
	font-size: 15px;
	line-height: 1.55;
	color: var(--nm-tinta);
	margin: 0 0 12px;
}

.nm-egresados__autor {
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 14px;
	color: var(--nm-morado);
	margin: 0;
}

.nm-egresados__periodo {
	font-family: var(--nm-font-cuerpo);
	font-size: 13px;
	color: var(--nm-gris-texto);
	margin: 2px 0 0;
}

/* CTA de cierre (03, reglas transversales): morado, pregunta + botón. */
.nm-cta {
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
	text-align: center;
	padding: 54px 24px;
}

.nm-cta__pregunta {
	color: var(--nm-blanco);
	margin: 0 0 22px;
}

/*
 * Ojo (tarea 28): en el CTA de cierre el H2 salía invisible — morado sobre
 * morado. `color` sí quedaba en blanco (comprobado con getComputedStyle),
 * pero el texto no se pintaba porque algo con más peso en la cascada (el
 * CSS del Global Kit del kit Edupreme, importado en t14) deja
 * `-webkit-text-fill-color` fijo en el morado institucional para los
 * títulos, y en WebKit/Blink esa propiedad manda sobre `color` para el
 * relleno del texto. Mismo problema y misma solución que ya dejó anotada
 * t14 para `.elementor-widget-button .elementor-button` más arriba: subir
 * la especificidad con `body` por delante en vez de perseguir el selector
 * exacto del kit.
 */
body .nm-cta__pregunta,
body .nm-cta__pregunta .elementor-heading-title {
	color: var(--nm-blanco) !important;
	-webkit-text-fill-color: var(--nm-blanco) !important;
}

/* Mismo problema que .nm-cta__pregunta, para el párrafo de la franja PIE
   (tarea 33): el CSS del Global Kit deja -webkit-text-fill-color fijo en
   el morado institucional también en párrafos dentro de una franja morada. */
body .nm-cta__texto,
body .nm-cta__texto p {
	color: rgba(255, 255, 255, 0.9) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
	max-width: 60ch;
	margin: 0 auto 22px;
}

@media (max-width: 767px) {
	.nm-tarjeta__nombre { font-size: 17px !important; }
	.nm-encabezado-pagina { padding: 30px 18px 26px; }
}

/* =========================================================================
   Apoderados (tarea 29) — selector de curso, tiles, acordeón, minuta del
   mes, fila con ícono (biblioteca de documentos), enlaces externos.
   ========================================================================= */

/* --- Selector "¿De qué curso?" --- */
.nm-selector-curso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	background-color: var(--nm-fondo-claro);
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
	padding: 18px 22px;
}

.nm-selector-curso__label {
	font-family: var(--nm-font-titulo);
	font-weight: 600;
	color: var(--nm-morado);
	font-size: 18px;
}

.nm-selector-curso__select {
	min-width: 220px;
	padding: 10px 14px;
	cursor: pointer;
}

/* --- 4 tiles de accesos rápidos --- */
.nm-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.nm-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 22px 14px;
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
	text-decoration: none;
	color: var(--nm-tinta);
	transition: box-shadow .15s ease, transform .15s ease;
}

.nm-tile:hover {
	box-shadow: var(--nm-sombra);
	transform: translateY(-2px);
	color: var(--nm-tinta);
}

.nm-tile__icono {
	width: 34px;
	height: 34px;
	color: var(--nm-violeta);
}

.nm-tile__texto {
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 15px;
}

@media (max-width: 767px) {
	.nm-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* --- Acordeón de preguntas frecuentes (<details> nativo, cerrado al entrar) --- */
.nm-acordeon {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nm-acordeon__item {
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
	padding: 4px 20px;
}

.nm-acordeon__pregunta {
	font-family: var(--nm-font-titulo);
	font-weight: 600;
	font-size: 17px;
	color: var(--nm-morado);
	padding: 16px 0;
	cursor: pointer;
	list-style: none;
}

.nm-acordeon__pregunta::-webkit-details-marker {
	display: none;
}

.nm-acordeon__pregunta::before {
	content: '+';
	display: inline-block;
	width: 20px;
	font-weight: 700;
	color: var(--nm-violeta);
}

.nm-acordeon__item[open] .nm-acordeon__pregunta::before {
	content: '–';
}

.nm-acordeon__respuesta {
	color: var(--nm-gris-texto);
	padding: 0 0 18px 20px;
}

.nm-acordeon__vacio {
	color: var(--nm-gris-texto);
}

/* --- Minuta del mes --- */
.nm-minuta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	background-color: var(--nm-fondo-claro);
	border: 1px solid var(--nm-gris-borde);
	border-left: 6px solid var(--nm-amarillo);
	border-radius: var(--nm-radio);
	padding: 22px 26px;
}

.nm-minuta__etiqueta {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--nm-violeta);
	margin-bottom: 4px;
}

.nm-minuta__titulo {
	margin: 0;
	color: var(--nm-tinta);
}

/* --- Botón "Descargar" (fila con ícono y minuta) --- */
.nm-boton-descargar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 15px;
	padding: 10px 20px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}

.nm-boton-descargar:hover {
	background-color: var(--nm-violeta);
	color: var(--nm-blanco);
}

.nm-boton-descargar--sin-archivo {
	background-color: var(--nm-gris-borde);
	color: var(--nm-gris-texto);
	cursor: not-allowed;
}

/*
 * Ojo (tarea 29): mismo bug de especificidad que la bajada del encabezado
 * y que `.nm-cta__pregunta` (t28) — el link por defecto del Global Kit
 * pinta el texto morado, y con la misma especificidad que ese morado se
 * queda encima del blanco del botón (morado sobre morado, texto
 * invisible). `body` por delante + !important, mismo mecanismo.
 */
body .nm-boton-descargar,
body a.nm-boton-descargar {
	color: var(--nm-blanco) !important;
	-webkit-text-fill-color: var(--nm-blanco) !important;
}

body .nm-boton-descargar:hover {
	color: var(--nm-blanco) !important;
	-webkit-text-fill-color: var(--nm-blanco) !important;
}

body .nm-boton-descargar--sin-archivo {
	color: var(--nm-gris-texto) !important;
	-webkit-text-fill-color: var(--nm-gris-texto) !important;
}

/* --- Biblioteca de documentos: filtros + fila con ícono --- */
.nm-filtro-tipo .e-filter,
.nm-filtro-anio .e-filter {
	--e-filter-space-between: 10px;
	--e-filter-item-border-radius: 999px;
	--e-filter-item-padding: 8px 16px;
}

.nm-filtro-tipo .e-filter-item,
.nm-filtro-anio .e-filter-item {
	background-color: var(--nm-fondo-claro);
	color: var(--nm-tinta);
	border: 1px solid var(--nm-gris-borde);
	font-size: 14px;
}

.nm-filtro-tipo .e-filter-item[aria-pressed="true"],
.nm-filtro-anio .e-filter-item[aria-pressed="true"] {
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
	border-color: var(--nm-morado);
}

.nm-fila-doc {
	display: flex;
	align-items: center;
	gap: 18px;
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
	padding: 16px 20px;
	margin-bottom: 12px;
}

.nm-fila-doc__icono {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	color: var(--nm-morado);
}

.nm-fila-doc__cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

.nm-fila-doc__nombre {
	font-family: var(--nm-font-titulo);
	font-size: 17px !important;
	margin: 0 0 6px !important;
	color: var(--nm-tinta);
	overflow-wrap: break-word;
}

.nm-fila-doc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.nm-chip {
	display: inline-block;
	background-color: var(--nm-fondo-claro);
	color: var(--nm-gris-texto);
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
}

.nm-chip--vigente {
	background-color: #E5F3E9;
	color: #1E7A3D;
}

.nm-chip--vencido {
	background-color: #FBEAEA;
	color: #A32424;
}

.nm-fila-doc__peso {
	font-size: 12px;
	color: var(--nm-gris-texto);
}

@media (max-width: 767px) {
	.nm-fila-doc { flex-wrap: wrap; }
}

/* --- Enlaces externos con ícono --- */
.nm-enlaces-externos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.nm-enlace-externo {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 220px;
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
	padding: 16px 20px;
	text-decoration: none;
	color: var(--nm-tinta);
}

.nm-enlace-externo:hover {
	box-shadow: var(--nm-sombra);
	color: var(--nm-tinta);
}

.nm-enlace-externo__icono {
	width: 26px;
	height: 26px;
	color: var(--nm-violeta);
	flex: 0 0 auto;
}

/* =========================================================================
   Tarea 31 · /noticias/ (archive de `post`) y single de `post`
   ========================================================================= */

/* --- Buscador --- */
.nm-buscador-noticias {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.nm-buscador-noticias__campo {
	flex: 1 1 260px;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--nm-gris-borde);
	border-radius: 999px;
	font-family: var(--nm-font-cuerpo);
	font-size: 16px;
	color: var(--nm-tinta);
	background-color: var(--nm-blanco);
}

.nm-buscador-noticias__campo:focus {
	outline: 2px solid var(--nm-violeta);
	outline-offset: 1px;
}

.nm-buscador-noticias__boton {
	flex: 0 0 auto;
	padding: 12px 22px;
	border: none;
	border-radius: 999px;
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

.nm-buscador-noticias__boton:hover {
	background-color: var(--nm-violeta);
}

.nm-buscador-noticias__limpiar {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--nm-violeta);
	text-decoration: underline;
}

/* --- Filtro por categoría (Taxonomy Filter, mismo patrón que nm-filtro-tipo) --- */
.nm-filtro-noticias .e-filter {
	--e-filter-space-between: 10px;
	--e-filter-item-border-radius: 999px;
	--e-filter-item-padding: 10px 18px;
}

.nm-filtro-noticias .e-filter-item {
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 15px;
	border: 1px solid var(--nm-gris-borde);
	background-color: var(--nm-blanco);
	color: var(--nm-tinta);
	cursor: pointer;
}

.nm-filtro-noticias .e-filter-item:hover {
	border-color: var(--nm-violeta);
	color: var(--nm-violeta);
}

.nm-filtro-noticias .e-filter-item[aria-pressed="true"] {
	background-color: var(--nm-morado);
	border-color: var(--nm-morado);
	color: var(--nm-blanco);
}

/* --- Destacada --- */
.nm-destacada {
	display: flex;
	gap: 32px;
	align-items: stretch;
	text-decoration: none;
	color: inherit;
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--nm-sombra);
}

.nm-destacada__media {
	flex: 0 0 46%;
	display: block;
}

.nm-destacada__foto {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
}

.nm-destacada__cuerpo {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 32px 36px 32px 0;
}

.nm-destacada__media + .nm-destacada__cuerpo {
	padding-left: 0;
}

.nm-destacada:not(:has(.nm-destacada__media)) .nm-destacada__cuerpo {
	padding: 32px 36px;
}

.nm-destacada__etiqueta {
	display: inline-block;
	width: fit-content;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--nm-violeta);
}

.nm-destacada__meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nm-destacada__titulo {
	font-family: var(--nm-font-titulo);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.28;
	color: var(--nm-tinta);
}

.nm-destacada__resumen {
	font-size: 16px;
	line-height: 1.6;
	color: var(--nm-gris-texto);
	max-width: 62ch;
}

.nm-destacada__boton {
	display: inline-block;
	width: fit-content;
	margin-top: 4px;
	font-weight: 700;
	font-size: 15px;
	color: var(--nm-morado);
}

.nm-destacada:hover .nm-destacada__boton {
	color: var(--nm-violeta);
}

@media (max-width: 767px) {
	.nm-destacada {
		flex-direction: column;
	}
	.nm-destacada__media {
		flex-basis: auto;
	}
	.nm-destacada__cuerpo,
	.nm-destacada__media + .nm-destacada__cuerpo {
		padding: 22px 20px;
	}
	.nm-destacada__titulo {
		font-size: 23px;
	}
}

/* --- Tarjeta de noticia (grilla y relacionadas), sobre la base .nm-tarjeta --- */
.nm-tarjeta-noticia__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
}

.nm-tarjeta-noticia__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 22px;
}

.nm-tarjeta-noticia__meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nm-post-fecha {
	font-family: var(--nm-font-cuerpo);
	font-size: 13px;
	font-weight: 500;
	color: var(--nm-gris-texto);
}

.nm-tarjeta-noticia__titulo {
	margin: 0;
}

/* El widget "theme-post-title" pinta su <h3> con
   `.elementor-widget-theme-post-title .elementor-heading-title{font-size:
   var(--e-global-typography-primary-font-size)}` (post-169.css, regla propia
   del widget) SIN IMPORTAR el `header_size` elegido — el control solo cambia
   la etiqueta HTML (accesibilidad/SEO), no el tamaño visual. Comprobado en
   el sitio: con `header_size:h3` el título de cada tarjeta salía en el
   tamaño de H1 (~48px), rompiendo el layout de la grilla. Hay que pisarlo
   en el <h3> real, no en el contenedor. */
.nm-tarjeta-noticia__titulo .elementor-heading-title {
	font-family: var(--nm-font-titulo) !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	line-height: 1.32 !important;
	color: var(--nm-tinta) !important;
	letter-spacing: normal !important;
}

.nm-post-resumen {
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	line-height: 1.55;
	color: var(--nm-gris-texto);
	margin: 0;
}

/* --- Barra lateral: próximas fechas + minuta --- */
.nm-noticias-sidebar {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.nm-noticias-sidebar__bloque {
	background-color: var(--nm-fondo-claro);
	border-radius: var(--nm-radio);
	padding: 22px 22px 26px;
}

.nm-noticias-sidebar__titulo {
	margin: 0 0 14px;
}

/* Mismo hallazgo que .nm-tarjeta-noticia__titulo: el widget "heading" del
   kit también fuerza la tipografía "Primary" en `.elementor-heading-title`
   sin importar el `header_size` — hay que pisar el <h3> real. */
.nm-noticias-sidebar__titulo .elementor-heading-title {
	font-family: var(--nm-font-titulo) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--nm-tinta) !important;
	letter-spacing: normal !important;
}

/* --- Cuerpo de la noticia (single), columna de lectura ~70ch --- */
.nm-noticia__cuerpo {
	max-width: 70ch;
	font-size: 17px;
	line-height: 1.75;
	color: var(--nm-gris-texto);
}

.nm-noticia__cuerpo p {
	margin: 0 0 20px;
}

.nm-noticia__cuerpo .wp-block-gallery {
	max-width: 100%;
	margin: 28px 0;
}

.nm-noticia__cuerpo figure.wp-block-image img {
	border-radius: 10px;
	cursor: zoom-in;
}

/* --- Documentos adjuntos --- */
.nm-post-adjuntos {
	max-width: 70ch;
}

.nm-post-adjuntos__titulo {
	font-family: var(--nm-font-titulo);
	font-size: 20px;
	font-weight: 600;
	color: var(--nm-tinta);
	margin: 0 0 14px;
}

.nm-post-adjuntos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --- Compartir --- */
.nm-compartir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	max-width: 70ch;
}

.nm-compartir__etiqueta {
	font-weight: 700;
	font-size: 14px;
	color: var(--nm-tinta);
}

.nm-compartir__boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--nm-gris-borde);
	background-color: var(--nm-blanco);
	color: var(--nm-tinta);
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
}

.nm-compartir__boton:hover {
	border-color: var(--nm-violeta);
	color: var(--nm-violeta);
}

.nm-compartir__boton--whatsapp {
	border-color: #25D366;
	color: #1B8A48;
}

.nm-compartir__boton--whatsapp:hover {
	background-color: #25D366;
	color: var(--nm-blanco);
}

.nm-compartir__aviso {
	font-size: 13px;
	color: #1E7A3D;
	font-weight: 600;
}

/* =========================================================================
   Apoyo al Estudiante (tarea 33) — índice de anclas, acordeón de las 8
   áreas (reusa .nm-acordeon* de apoderados, t29), franja PIE (reusa
   .nm-cta), filtro de talleres por área y tarjeta taller.
   ========================================================================= */

/* --- Índice de anclas: fila de píldoras, scroll horizontal en teléfono --- */
.nm-indice-anclas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * "Índice de anclas pegajoso" (tarea 35, 03 § "2 · Nuestro Colegio", punto
 * 2). El sticky va en `.nm-indice-anclas-w` — el div que Elementor genera
 * para EL WIDGET, no en el `<nav>` que va adentro — probado en vivo:
 * `position:sticky` en el propio nav no alcanzaba a viajar nada, porque su
 * padre inmediato (ese mismo div del widget) solo lo envuelve a él y mide
 * lo mismo que él, sin alto de sobra donde "pegarse". Ese div SÍ es un
 * ítem flex directo de `$c_cuerpo` (el contenedor columna que agrupa
 * Historia a Equipo, `runbook/t35-nuestro-colegio.php`), que es alto de
 * verdad — confirmado con getBoundingClientRect() antes y después de un
 * scroll de 1400px: con el sticky acá, el índice se queda en top:0 en vez
 * de desplazarse con el resto de la página. El encabezado del sitio
 * (Theme Builder, t25) NO usa position:sticky/fixed — sin regla
 * `.site-header{position:…}` en ningún archivo — así que el índice puede
 * pegarse a `top:0` sin pelear con una barra fija encima.
 */
.nm-indice-anclas-w {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: var(--nm-blanco);
	box-shadow: 0 4px 14px rgba(94, 46, 151, .08);
}

.nm-indice-anclas-w .nm-indice-anclas {
	padding: 12px 20px;
}

.nm-indice-anclas a {
	display: inline-block;
	background-color: var(--nm-fondo-claro);
	color: var(--nm-morado);
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--nm-gris-borde);
	white-space: nowrap;
}

.nm-indice-anclas a:hover {
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
	border-color: var(--nm-morado);
}

@media (max-width: 767px) {
	.nm-indice-anclas {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
	}
}

/* --- Acordeón de las 8 áreas: mismo <details> de nm-acordeon, + contacto --- */
.nm-acordeon-areas .nm-acordeon__item {
	scroll-margin-top: 90px; /* el ancla no queda tapada por el header fijo */
}

.nm-area__meta {
	color: var(--nm-gris-texto);
	margin: 0 0 8px;
}

.nm-area__meta strong {
	color: var(--nm-tinta);
}

.nm-area__contacto {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 14px;
	color: var(--nm-gris-texto);
	margin: 12px 0 0;
}

.nm-area__contacto a {
	color: var(--nm-violeta);
}

.nm-area__boton {
	display: inline-block;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nm-violeta);
	text-decoration: underline;
}

/* --- 3 accesos directos "¿Necesitas ayuda ahora?" (reusa .nm-tile) --- */
.nm-tiles--3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
	.nm-tiles--3 { grid-template-columns: 1fr; }
}

/* --- Filtro de talleres por área (mismo patrón que nm-filtro-tipo, t29) --- */
.nm-filtro-area .e-filter {
	--e-filter-space-between: 10px;
	--e-filter-item-border-radius: 999px;
	--e-filter-item-padding: 8px 16px;
}

.nm-filtro-area .e-filter-item {
	background-color: var(--nm-fondo-claro);
	color: var(--nm-tinta);
	border: 1px solid var(--nm-gris-borde);
	font-size: 14px;
}

.nm-filtro-area .e-filter-item[aria-pressed="true"] {
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
	border-color: var(--nm-morado);
}

/* --- Tarjeta taller (Loop Item, mismo patrón visual que nm-tarjeta-nivel) --- */
.nm-tarjeta-taller {
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
	overflow: hidden;
}

.nm-tarjeta-taller__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.nm-tarjeta-taller__cuerpo {
	padding: 16px 18px 20px;
}

.nm-tarjeta-taller__titulo {
	font-size: 18px !important;
	margin: 0 0 8px !important;
}

.nm-tarjeta-taller__linea {
	display: block;
	font-size: 14px;
	color: var(--nm-gris-texto);
	margin: 2px 0;
}

/* El chip del área va dentro de un shortcode: el interlineado heredado del
   cuerpo le sumaba 30 px de aire muerto entre el título y el horario. Con
   `display:flex` el chip perdía su píldora, así que se deja en bloque y solo
   se le quita el medio-renglón sobrante. */
.nm-tarjeta-taller__cuerpo .elementor-shortcode {
	line-height: 1;
	margin: 0 0 12px;
}

/* =========================================================================
   PIE (tarea 34) — tarjetas "a quién acompaña", pasos numerados de "cómo
   funciona" y el botón deshabilitado del blog externo (sin URL real).
   ========================================================================= */
.nm-pie-tarjetas {
	/* Son ocho necesidades. Con auto-fit quedaban 5 + 3 y un hueco al final:
	   cuatro columnas exactas dan dos filas parejas. */
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-pie-tarjeta {
	padding: 26px 22px;
	border-radius: var(--nm-radio);
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
}

.nm-pie-tarjeta__icono {
	width: 40px;
	height: 40px;
	color: var(--nm-violeta);
	display: block;
	margin-bottom: 14px;
}

.nm-pie-tarjeta__titulo,
.nm-pie-tarjeta__titulo .elementor-heading-title {
	font: 600 18px/1.3 var(--nm-font-titulo) !important;
	color: var(--nm-tinta) !important;
	-webkit-text-fill-color: var(--nm-tinta) !important;
	margin: 0 0 8px !important;
}

.nm-pie-tarjeta__texto {
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	line-height: 1.6;
	color: var(--nm-gris-texto);
	margin: 0;
}

/* Marco legal del programa, bajo las tarjetas. */
.nm-pie-nota {
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	line-height: 1.6;
	color: var(--nm-gris-texto);
	margin: 22px 0 0;
	padding-left: 14px;
	border-left: 3px solid var(--nm-amarillo);
}

/* --- Cómo funciona: 4 pasos numerados --- */
.nm-pasos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-paso {
	position: relative;
	padding: 28px 20px 22px;
	background-color: var(--nm-fondo-claro);
	border-radius: var(--nm-radio);
}

.nm-paso__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
	font-family: var(--nm-font-titulo);
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 14px;
}

.nm-paso__titulo,
.nm-paso__titulo .elementor-heading-title {
	font: 600 17px/1.3 var(--nm-font-titulo) !important;
	color: var(--nm-tinta) !important;
	-webkit-text-fill-color: var(--nm-tinta) !important;
	margin: 0 0 8px !important;
}

.nm-paso__texto {
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	line-height: 1.6;
	color: var(--nm-gris-texto);
	margin: 0;
}

/* --- Botón deshabilitado del blog externo del PIE (sin URL real, mismo
   criterio que .nm-boton-descargar--sin-archivo, t29) --- */
.nm-blog-pie-boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--nm-gris-borde);
	color: var(--nm-gris-texto);
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 15px;
	padding: 12px 26px;
	border-radius: 999px;
	cursor: not-allowed;
}

.nm-blog-pie-simulado {
	font-family: var(--nm-font-cuerpo);
	font-size: 13px;
	color: var(--nm-gris-texto);
	margin: 10px 0 0;
}

/* El equipo son cinco especialidades, no ocho: con cuatro columnas fijas la
   quinta tarjeta quedaba sola en una fila. */
.nm-pie-equipo {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

@media (max-width: 1024px) {
	.nm-pie-tarjetas {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.nm-pie-tarjetas,
	.nm-pasos {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Nuestro Colegio (tarea 35) — misión/visión, sellos (mismo componente que
   la portada, ahora clases globales en vez de CSS embebido por página),
   franja PEI, galería de infraestructura y cifras.
   ========================================================================= */

/* --- Historia: foto + texto (mismo patrón que "Nuestro colegio" de la
   portada, t27, ahora reutilizable) --- */
.nm-historia {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 44px;
	align-items: center;
}

.nm-historia__foto img {
	width: 100%;
	border-radius: var(--nm-radio);
	display: block;
	box-shadow: var(--nm-sombra);
}

.nm-historia__texto p {
	font-family: var(--nm-font-cuerpo);
	font-size: 17px;
	line-height: 1.75;
	color: var(--nm-gris-texto);
	margin: 0 0 16px;
}

/* --- Misión / Visión: dos tarjetas lado a lado sobre fondo claro --- */
.nm-mv {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.nm-mv__tarjeta {
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
	padding: 32px 30px;
	scroll-margin-top: 90px;
}

.nm-mv__icono {
	width: 42px;
	height: 42px;
	color: var(--nm-violeta);
	display: block;
	margin-bottom: 16px;
}

.nm-mv__titulo,
.nm-mv__titulo .elementor-heading-title {
	font: 600 23px/1.3 var(--nm-font-titulo) !important;
	color: var(--nm-tinta) !important;
	-webkit-text-fill-color: var(--nm-tinta) !important;
	margin: 0 0 12px !important;
}

.nm-mv__texto {
	font-family: var(--nm-font-cuerpo);
	font-size: 16px;
	line-height: 1.7;
	color: var(--nm-gris-texto);
	margin: 0;
}

/* --- Sellos: 4 tarjetas con ícono (mismo componente visual de la
   portada, t27, ahora en clases globales) --- */
.nm-sellos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-sello {
	padding: 26px 22px;
	border-radius: var(--nm-radio);
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
}

.nm-sello__icono {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--nm-morado);
	margin: 0 0 16px;
}

.nm-sello__icono svg {
	width: 24px;
	height: 24px;
	color: var(--nm-amarillo);
}

.nm-sello__titulo,
.nm-sello__titulo .elementor-heading-title {
	font: 600 19px/1.3 var(--nm-font-titulo) !important;
	color: var(--nm-tinta) !important;
	-webkit-text-fill-color: var(--nm-tinta) !important;
	margin: 0 0 8px !important;
}

.nm-sello__texto {
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	line-height: 1.6;
	color: var(--nm-gris-texto);
	margin: 0;
}

/* --- PEI: franja morada con botón de descarga (o "Próximamente") --- */
.nm-pei {
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
	text-align: center;
	padding: 56px 24px;
	scroll-margin-top: 70px;
}

/*
 * Mismo bug de especificidad que .nm-cta__pregunta (t28) y
 * .nm-encabezado-pagina__bajada (t29): el CSS del Global Kit del kit
 * Edupreme fija -webkit-text-fill-color con más peso que una clase suelta
 * sobre un h2/p dentro de una franja morada. `body` por delante, mismo
 * mecanismo ya probado.
 */
body .nm-pei__titulo,
body .nm-pei__titulo .elementor-heading-title {
	color: var(--nm-blanco) !important;
	-webkit-text-fill-color: var(--nm-blanco) !important;
}

body .nm-pei__texto,
body .nm-pei__texto p {
	color: rgba(255, 255, 255, 0.9) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
	max-width: 62ch;
	margin: 0 auto 26px;
	font-family: var(--nm-font-cuerpo);
	font-size: 16px;
	line-height: 1.7;
}

/* Salida del shortcode [nm_pei_descarga] cuando no hay PDF real (estado
   por defecto hoy): mismo riesgo de morado-sobre-morado que .nm-pei__texto,
   aunque sea un <p> suelto fuera de un widget de texto de Elementor. */
body .nm-pei__proximamente {
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
	font-style: italic;
	margin: 0;
}

/* Variante clara del botón de descarga para usarse sobre fondo morado
   (t29 solo dejó la variante morada/blanca, pensada para fondo blanco). */
.nm-boton-descargar--claro {
	background-color: var(--nm-amarillo);
}

body .nm-boton-descargar--claro,
body a.nm-boton-descargar--claro {
	color: var(--nm-tinta) !important;
	-webkit-text-fill-color: var(--nm-tinta) !important;
}

body .nm-boton-descargar--claro:hover {
	background-color: #ffd34d;
}

/* --- Infraestructura: texto + galería de 6 fotos reales --- */
.nm-infra-galeria {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 26px 0 0;
}

.nm-infra-galeria img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--nm-radio);
	display: block;
}

/* --- Equipo (#directivos): reusa .nm-tarjeta del Loop Grid de personas
   (t28) + botón "Ver toda la comunidad educativa" --- */
.nm-equipo-boton {
	text-align: center;
	margin-top: 32px;
}

/* --- Cifras del colegio: 4 contadores --- */
.nm-cifras {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.nm-cifra {
	padding: 30px 16px;
	border-radius: var(--nm-radio);
	background-color: var(--nm-fondo-claro);
}

.nm-cifra__numero {
	display: block;
	font-family: var(--nm-font-titulo);
	font-weight: 700;
	font-size: 38px;
	color: var(--nm-morado);
	line-height: 1;
	margin-bottom: 10px;
}

.nm-cifra__etiqueta {
	display: block;
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 14px;
	color: var(--nm-gris-texto);
}

@media (max-width: 1024px) {
	.nm-mv,
	.nm-sellos,
	.nm-infra-galeria {
		grid-template-columns: repeat(2, 1fr);
	}
	.nm-cifras {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.nm-historia {
		grid-template-columns: 1fr;
	}
	.nm-mv,
	.nm-sellos,
	.nm-infra-galeria,
	.nm-cifras {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Admisión (tarea 36) — franja de plazos, botón grande al SAE, caja del
   formulario MetForm y datos de la oficina con mapa. "Qué ofrece el
   colegio" reusa .nm-sellos/.nm-sello (t27/t35) y "Cómo se postula" reusa
   .nm-pasos/.nm-paso (t34) tal cual, sin clases nuevas.
   ========================================================================= */
.nm-plazos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-plazo {
	background-color: var(--nm-fondo-claro);
	border-radius: var(--nm-radio);
	padding: 22px 18px;
	text-align: center;
}

.nm-plazo__etiqueta {
	display: block;
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 14px;
	color: var(--nm-morado);
	margin: 0 0 8px;
}

.nm-plazo__fecha {
	display: block;
	font-family: var(--nm-font-cuerpo);
	font-size: 14px;
	line-height: 1.5;
	color: var(--nm-gris-texto);
	font-style: italic;
}

/* --- Botón grande al SAE + nota de que es del Mineduc: extiende
   .nm-boton-descargar (t29, ya tiene el fix de especificidad
   blanco-sobre-morado en "body .nm-boton-descargar" más arriba, que
   también alcanza a este modificador por ser el mismo selector base) --- */
.nm-admision-sae {
	text-align: center;
	margin-top: 30px;
}

.nm-boton-grande {
	padding: 18px 44px;
	font-size: 17px;
}

.nm-admision-sae__nota {
	font-family: var(--nm-font-cuerpo);
	font-size: 13px;
	color: var(--nm-gris-texto);
	margin: 12px 0 0;
}

/* --- Caja del formulario (03 · nota: /contacto/ reutiliza este mismo
   esqueleto, así que la clase queda genérica, no "admision") --- */
.nm-formulario-caja {
	background-color: var(--nm-fondo-claro);
	border-radius: var(--nm-radio);
	padding: 34px 30px;
}

.nm-formulario-caja .mf-form-shortcode {
	max-width: 640px;
	margin: 0 auto;
}

/* --- Datos de la oficina de Admisión + mapa simple --- */
.nm-admision-oficina {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	align-items: center;
}

.nm-admision-oficina__dato {
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	line-height: 1.8;
	color: var(--nm-gris-texto);
	margin: 0 0 10px;
}

.nm-admision-oficina__dato strong {
	color: var(--nm-tinta);
}

.nm-admision-oficina__mapa {
	border-radius: var(--nm-radio);
	overflow: hidden;
	box-shadow: var(--nm-sombra);
	line-height: 0;
}

.nm-admision-oficina__mapa iframe {
	width: 100%;
	height: 280px;
	border: 0;
	display: block;
}

@media (max-width: 1024px) {
	.nm-plazos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.nm-plazos {
		grid-template-columns: 1fr;
	}
	.nm-admision-oficina {
		grid-template-columns: 1fr;
	}
	.nm-formulario-caja {
		padding: 24px 18px;
	}
}

/* =========================================================================
   Contacto (tarea 37) — reutiliza .nm-formulario-caja y .nm-admision-oficina
   tal cual (03 · nota final de "12 · Admisión": "/contacto/ reutiliza este
   esqueleto"). Lo único nuevo es el bloque 1, "¿Con quién necesitas
   hablar?": una leyenda con horario y correo por área (`[nm_dato]` de
   verdad, `.nm-contacto-leyenda`, runbook/t37-contacto.php) seguida del
   selector de área — tarjetas que envuelven el widget Radio nativo de
   MetForm (`mf-radio`, sin Pro no trae un tipo "tarjeta"). El texto de
   cada opción del radio es SOLO el nombre del área, una línea: un
   `mf_input_option_text` con salto de línea hace que MetForm reviente al
   armar el formulario (`SyntaxError: Bad control character in string
   literal in JSON`, confirmado en el navegador) — por eso el horario/
   correo van en la leyenda aparte, no dentro del radio. Cada
   `.mf-radio-option` es un `<label>` completo — clic en cualquier parte
   selecciona la opción, es el propio comportamiento nativo del navegador,
   no hace falta JS para eso.
   ========================================================================= */
.nm-contacto-leyenda {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.nm-contacto-leyenda__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 0 4px;
}

.nm-contacto-leyenda__area {
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 14px;
	color: var(--nm-morado);
}

.nm-contacto-leyenda__dato {
	font-family: var(--nm-font-cuerpo);
	font-size: 13px;
	line-height: 1.5;
	color: var(--nm-gris-texto);
}
/* MetForm pinta las etiquetas de campo con el estilo del titular de la
   sección: "¿Con quién necesitas hablar?" salía a 38 px en negro, más grande
   que el título "Envíanos un mensaje" que va encima. Es una etiqueta, no un
   titular. Hace falta !important porque MetForm gana en especificidad. */
body .elementor-widget-metform .mf-input-label,
.nm-contacto-areas .mf-input-label {
	display: block;
	font-family: var(--nm-font-titulo) !important;
	color: var(--nm-morado) !important;
	-webkit-text-fill-color: var(--nm-morado) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	margin: 0 0 12px !important;
}

/* El rótulo de cada paso ("¿Con quién necesitas hablar?", "Cuéntanos más")
   sí es un subtítulo, pero de 19 px, no de titular de página. */
.nm-contacto-areas .mf-input-label {
	font-size: 19px !important;
	margin: 0 0 16px !important;
}

.nm-contacto-areas .mf-radio {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.nm-contacto-areas .mf-radio-option {
	border: 2px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
	background-color: var(--nm-blanco);
	transition: border-color .15s ease, background-color .15s ease;
}

.nm-contacto-areas .mf-radio-option label {
	display: block;
	margin: 0;
	padding: 18px;
	cursor: pointer;
}

.nm-contacto-areas .mf-radio-option span {
	white-space: pre-line;
	line-height: 1.6;
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	color: var(--nm-gris-texto);
}

/* El círculo de la opción NO es el control nativo (que MetForm deja en 0x0):
   lo dibuja `span::before`, y sin medidas propias salía como una elipse de
   25x46 px encima del texto ("Secretaría" se leía "ecretaría"). Se le da
   tamaño fijo y se le reserva el espacio con el relleno del span. */
.nm-contacto-areas .mf-radio-option label span {
	position: relative;
	display: block;
	padding-left: 30px;
}

/* MetForm gana en especificidad con sus propias medidas, así que el círculo
   salía como una elipse de 25x46. Van forzadas. */
.nm-contacto-areas .mf-radio-option label span::before {
	position: absolute !important;
	left: 0 !important;
	top: 4px !important;
	right: auto !important;
	bottom: auto !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	max-width: 18px !important;
	min-height: 18px !important;
	max-height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--nm-gris-borde) !important;
	border-radius: 50% !important;
	background-color: transparent !important;
	box-sizing: border-box !important;
	transform: none !important;
	content: "" !important;
}

.nm-contacto-areas .mf-radio-option:has(input:checked) label span::before {
	border-color: var(--nm-violeta) !important;
	background-color: var(--nm-violeta) !important;
	box-shadow: inset 0 0 0 3px var(--nm-blanco) !important;
}

.nm-contacto-areas .mf-radio-option:hover {
	border-color: var(--nm-violeta);
}

.nm-contacto-areas .mf-radio-option:has(input:checked) {
	border-color: var(--nm-morado);
	background-color: var(--nm-fondo-claro);
}

/* Paso 2 (nombre/correo/teléfono/mensaje): se revela con
   assets/contacto.js (encolado solo en /contacto/, functions.php) apenas se
   elige un área — el mismo formulario MetForm de una sola página, sin
   wizard nativo (MetForm sin Pro no trae un widget de pasos). Ese JS es un
   archivo aparte y no un `<script>` inline a propósito: un inline en
   cualquier parte de una página con un formulario MetForm le rompe la
   hidratación (ver el comentario de assets/contacto.js). Si JS no corre
   por algún motivo, el formulario igual queda visible (nunca
   `display:none` puro), solo sin la animación. */
.nm-contacto-paso2 {
	opacity: .001;
	max-height: 0;
	overflow: hidden;
	transition: max-height .4s ease, opacity .4s ease;
}

.nm-contacto-paso2.nm-visible {
	opacity: 1;
	max-height: 2400px;
}

@media (max-width: 1024px) {
	.nm-contacto-areas .mf-radio,
	.nm-contacto-leyenda {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.nm-contacto-areas .mf-radio,
	.nm-contacto-leyenda {
		grid-template-columns: 1fr;
	}
	.nm-contacto-areas .mf-input-label {
		font-size: 19px;
	}
}

/* =========================================================================
   Tarea 41 · Revisión visual final de la Fase 2 (escritorio + teléfono).
   Correcciones GLOBALES de bugs que aparecían repetidos en varias páginas.
   Cada bloque dice qué se vio en el navegador y por qué la regla es así.
   ========================================================================= */

/*
 * 41.1 · El H1 del encabezado de página salía INVISIBLE (morado sobre
 * morado) en 10 de las 11 secciones: /nuestro-colegio/, /comunidad/,
 * /niveles/, /apoyo-al-estudiante/, /pie/, /noticias/, /galeria/,
 * /apoderados/, /admision/ y /contacto/. Medido: color rgb(36,11,105)
 * sobre fondo rgb(36,11,105), contraste 1.00.
 * Causa: `_css_classes` pone la clase en el WRAPPER del widget
 * (`.elementor-element`), así que `.nm-encabezado-pagina__titulo{color:#fff}`
 * (más arriba en este archivo, t35) era un selector de ANCESTRO, y el
 * `h1,h2,...{color:var(--nm-morado)}` de este mismo archivo apunta al `h1`
 * directamente y gana por ser más específico sobre el elemento pintado.
 * Es exactamente el mismo error que t29 ya había corregido para la bajada
 * (`.nm-encabezado-pagina__bajada`) sin darse cuenta de que el título tenía
 * el mismo problema. Se corrige apuntando al `h1`/`.elementor-heading-title`
 * de adentro, con `-webkit-text-fill-color` porque el Global Kit del kit
 * Edupreme fija esa propiedad para los titulares (ver nota de t28).
 */
body .nm-encabezado-pagina__titulo,
body .nm-encabezado-pagina__titulo .elementor-heading-title,
body .nm-encabezado-pagina h1,
body .nm-encabezado-pagina h1.elementor-heading-title,
body .nm-encabezado-pagina .elementor-heading-title {
	color: var(--nm-blanco) !important;
	-webkit-text-fill-color: var(--nm-blanco) !important;
}

/*
 * 41.2 · La fecha del héroe de una noticia (`.nm-post-fecha`, t31) y la
 * bajada `.nm-intro` dentro de una franja `.nm-cta` salían gris oscuro
 * sobre morado (contraste 1.82, ilegible). Ambas clases están pensadas
 * para fondo claro; acá se les da la variante "sobre morado".
 */
body .nm-encabezado-pagina .nm-post-fecha,
body .nm-encabezado-pagina .nm-noticia-single__meta,
body .nm-encabezado-pagina .nm-noticia-single__meta > *,
body .nm-encabezado-pagina .nm-noticia-single__meta .elementor-shortcode,
body .nm-encabezado-pagina .nm-noticia-single__meta .nm-post-separador {
	color: rgba(255, 255, 255, .78) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, .78) !important;
}

/*
 * …pero NO el chip de categoría, que en ese mismo bloque va con fondo claro:
 * la primera versión de la regla de arriba usaba `*` y dejó el texto del chip
 * en blanco sobre lavanda (contraste 1.09, invisible). Visto en la captura de
 * verificación de esta misma tarea, corregido antes de cerrarla.
 */
body .nm-encabezado-pagina .nm-chip,
body .nm-encabezado-pagina .nm-chip--categoria {
	color: var(--nm-morado) !important;
	-webkit-text-fill-color: var(--nm-morado) !important;
}

body .nm-cta .nm-intro,
body .nm-cta .nm-intro p {
	color: rgba(255, 255, 255, .9) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, .9) !important;
	margin-left: auto;
	margin-right: auto;
}

/*
 * 41.3 · Tipografía global del kit: a partir de esta tarea las globales
 * "Primary" y "Text" del kit Edupreme quedan en text-transform:none (ver
 * bitácora t41 — se cambió en los ajustes del kit, no acá), porque
 * "capitalize" convertía TODOS los titulares a Título En Español Mal
 * Escrito ("Oficina De Admisión", "¿Con Quién Necesitas Hablar?") y
 * "uppercase" dejaba EN MAYÚSCULAS el cuerpo de cada noticia y la
 * descripción de cada nivel. Esa global "Text" es la que el kit usa
 * también para los BOTONES, así que la mayúscula de los botones —que sí
 * es del diseño— se restituye acá de forma explícita.
 */
body .elementor-button,
body .elementor-widget-button .elementor-button,
body .metform-btn,
body button.metform-submit-btn,
body .elementor-post__read-more {
	text-transform: uppercase;
}

/* El cuerpo de una noticia y la descripción de un nivel son texto real del
   colegio: nunca en mayúsculas, pase lo que pase con el kit. */
body .nm-noticia__cuerpo,
body .nm-noticia__cuerpo *,
body .nm-nivel__descripcion,
body .nm-nivel__descripcion *,
body .elementor-widget-theme-post-content,
body .elementor-widget-theme-post-content * {
	text-transform: none !important;
}

/*
 * 41.4 · MetForm (/admision/ y /contacto/). Tres bugs vistos en la
 * captura, no leyendo el código:
 *  (a) el botón "Enviar mensaje" salía AZUL GOOGLE (#4285F4, el color de
 *      fábrica de `.metform-btn` en metform/app/index.css, que se encola
 *      después del tema) — fuera de marca y con contraste 3.56;
 *  (b) el marcador de posición de los campos se pintaba en Inter 49px
 *      ("Tu Nombre", "Tucorreo@…" cortado a la mitad) porque `::placeholder`
 *      heredaba la tipografía de titular del kit;
 *  (c) los `input` traían text-transform:capitalize, o sea el correo que
 *      escribe el apoderado se ve "Tucorreo@Gmail.Com".
 */
body .metform-btn,
body .metform-form-main-wrapper .metform-btn,
body button.metform-submit-btn {
	background-color: var(--nm-morado) !important;
	color: var(--nm-blanco) !important;
	-webkit-text-fill-color: var(--nm-blanco) !important;
	border: 0 !important;
	border-radius: var(--nm-radio) !important;
	box-shadow: none !important;
	font-family: var(--nm-font-cuerpo) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	padding: 14px 30px !important;
}

body .metform-btn:hover,
body button.metform-submit-btn:hover {
	background-color: var(--nm-violeta) !important;
}

body .metform-form-main-wrapper .mf-input,
body .metform-form-main-wrapper input,
body .metform-form-main-wrapper textarea,
body .metform-form-main-wrapper select {
	font-family: var(--nm-font-cuerpo) !important;
	/* 16px exactos: menos que eso y iOS hace zoom al enfocar el campo */
	font-size: 16px !important;
	text-transform: none !important;
	line-height: 1.4 !important;
	border-radius: 8px !important;
}

body .metform-form-main-wrapper ::placeholder {
	font-family: var(--nm-font-cuerpo) !important;
	font-size: 15px !important;
	text-transform: none !important;
	color: #8A8A99 !important;
	opacity: 1;
}

/*
 * 41.5 · El selector de área de /contacto/ (widget `mf-radio`) se pintaba
 * como una rejilla de 4 columnas FIJAS (275px 288px 323px 331px = 1219px)
 * dentro de un contenedor de 620px: en escritorio se veían 2 tarjetas y
 * media y las otras quedaban cortadas fuera del borde derecho. Se cambia
 * por una rejilla que se acomoda sola al ancho disponible.
 */
body .mf-radio.multi-option-input-type,
body .mf-checkbox.multi-option-input-type {
	display: grid !important;
	/* 140 px dejaba dos tarjetas por fila incluso en teléfono, y los rótulos
	   largos se partían palabra por palabra ("UTP / (Unidad / Técnico- /
	   Pedagógica)"). Con 200 px, una columna de 300 px da una tarjeta por fila
	   y la de 450 px del escritorio, dos. OJO: esta regla lleva !important y
	   más especificidad que cualquier `.nm-contacto-areas .mf-radio`, así que
	   el ancho de las opciones se decide AQUÍ y no más abajo. */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 14px !important;
}

/*
 * El texto de cada opción no va en el `label` sino en un `<span>` pelado
 * dentro de él (`<label><input><span>Admisión y matrícula</span></label>`),
 * y ese span heredaba Inter 49px: las cuatro tarjetas salían con el nombre
 * del área cortado ("Admisión y matrícul…", "UTP (Unidad Técnico-Pedagóg…").
 * Hay que nombrar el span explícitamente.
 */
body .mf-radio-option,
body .mf-radio-option label,
body .mf-radio-option label span,
body .mf-checkbox-option label,
body .mf-checkbox-option label span {
	font-family: var(--nm-font-cuerpo) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	text-transform: none !important;
	color: var(--nm-tinta) !important;
	-webkit-text-fill-color: var(--nm-tinta) !important;
}

/*
 * 41.6 · Pie de página: los tres bloques (marca / enlaces rápidos /
 * contacto) se apilaban en una sola columna a la izquierda y dejaban dos
 * tercios del ancho en morado vacío en escritorio. La causa real está en
 * la plantilla (`element_id` en vez de `_element_id`, corregido en
 * runbook/t26-footer.php), pero se deja además esta red de seguridad
 * estructural por si la plantilla se vuelve a generar sin los IDs.
 */
@media (min-width: 768px) {
	.elementor-location-footer .e-con-inner > .e-con {
		flex: 1 1 240px;
		min-width: 200px;
	}
	.elementor-location-footer .e-con-inner > .e-con:first-child {
		flex: 1.4 1 280px;
	}
}

/*
 * 41.7 · `.nm-boton-secundario` (botón amarillo secundario, usado en 10
 * páginas) tenía un solo par de propiedades: `background-color` + `color`.
 * Eso produjo DOS bugs distintos, según dónde estuviera la clase:
 *  (a) puesta con `_css_classes` en un widget de botón, la clase cae en el
 *      WRAPPER del widget (1280px de ancho): el amarillo pintaba una franja
 *      de lado a lado detrás del botón real. Visto en /apoderados/,
 *      /admision/, /niveles/ y /nuestro-colegio/ — parecía una barra, no un
 *      botón;
 *  (b) puesta en un `<a>` pelado que imprime un shortcode (el "Ver
 *      documentos y útiles" de /niveles/basica/), quedaba como texto con
 *      fondo amarillo tipo destacador: sin relleno, sin borde redondeado,
 *      `display:inline`.
 */
body .elementor-element.nm-boton-secundario {
	background-color: transparent !important;
}

body a.nm-boton-secundario {
	display: inline-block;
	background-color: var(--nm-amarillo);
	color: var(--nm-tinta);
	font-family: var(--nm-font-cuerpo);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 13px 24px;
	border-radius: var(--nm-radio);
	text-decoration: none;
}

body a.nm-boton-secundario:hover,
body a.nm-boton-secundario:focus {
	background-color: #FFD75A;
	color: var(--nm-tinta);
}

/*
 * 41.8 · El shortcode `[nm_proximas_fechas]` (plugin nm-core, t27) se usa en
 * la portada Y en /apoderados/, pero su CSS vivía dentro de un widget HTML
 * de la PORTADA (runbook/t27-portada.php): en /apoderados/ la misma lista
 * salía como viñetas crudas con el día, el mes, el título y el detalle
 * pegados ("29sepReunión de apoderados…19:00 h · Salas de cada curso").
 * El estilo de un componente compartido va en la hoja del tema, no dentro
 * del contenido de una página. Mismos valores que la portada, para que las
 * dos se vean igual.
 */
.nm-fechas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-fechas__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	border-radius: 14px;
	background: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
}

.nm-fechas__dia {
	flex: 0 0 auto;
	width: 54px;
	text-align: center;
	border-radius: 10px;
	background: var(--nm-morado);
	color: var(--nm-blanco);
	padding: 8px 0;
}

.nm-fechas__dia b { display: block; font: 700 23px/1 var(--nm-font-cuerpo); }
.nm-fechas__dia i { display: block; font: 700 13px/1.3 var(--nm-font-cuerpo); font-style: normal; text-transform: uppercase; color: var(--nm-amarillo); }
.nm-fechas__titulo { display: block; font: 600 15px/1.45 var(--nm-font-cuerpo); color: var(--nm-tinta); }
.nm-fechas__detalle { display: block; margin-top: 5px; font: 400 14px/1.4 var(--nm-font-cuerpo); color: var(--nm-gris-texto); }
.nm-fechas__vacio { font: 400 16px/1.6 var(--nm-font-cuerpo); color: var(--nm-gris-texto); }

@media (max-width: 1024px) { .nm-fechas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .nm-fechas { grid-template-columns: 1fr; } }

/*
 * 41.9 · En el selector de área de /contacto/ el texto de la opción quedaba
 * en la misma línea que el círculo del radio en unas tarjetas y debajo en
 * otras, según el largo del nombre. Se fuerza siempre debajo, para que las
 * cuatro tarjetas se vean iguales.
 */
body .mf-radio-option label span {
	display: block;
	margin-top: 6px;
}

/*
 * 41.10 · Formularios MetForm en teléfono (390px). Los campos "Nombre
 * completo" y "Correo electrónico" están puestos al 50% de ancho en la
 * plantilla del formulario (t36/t37) y ese 50% no se anulaba para móvil:
 * en un teléfono quedaban de 127px (el marcador del correo salía cortado,
 * "tucorreo@ejem…") y desalineados respecto de Teléfono y Mensaje, que sí
 * van a una columna. Visto en /admision/ y en el paso 2 de /contacto/.
 * En un teléfono, un campo de formulario siempre ocupa todo el ancho.
 */
@media (max-width: 767px) {
	body .metform-form-main-wrapper .elementor-widget,
	body .metform-form-main-wrapper .elementor-widget__width-inherit,
	body .metform-form-main-wrapper .elementor-widget__width-initial {
		width: 100% !important;
		max-width: 100% !important;
	}

	body .metform-form-main-wrapper .mf-input,
	body .metform-form-main-wrapper textarea.mf-input,
	body .metform-form-main-wrapper input,
	body .metform-form-main-wrapper textarea {
		width: 100% !important;
	}

	/* los contenedores internos del formulario no meten sangría propia:
	   todos los campos arrancan en la misma vertical */
	body .metform-form-main-wrapper .e-con {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/*
 * 41.11 · Mismo error de selector que el H1 del encabezado (41.1): la regla
 * `.nm-tarjeta__nombre{font-size:18px}` de más arriba apunta al WRAPPER del
 * widget, no al titular de adentro, así que el nombre de cada persona se
 * seguía pintando con la escala de titular del kit (~34px): en /comunidad/
 * y en el equipo directivo de /nuestro-colegio/ cada tarjeta gastaba cuatro
 * líneas en el nombre. Se nombra el titular explícitamente.
 */
body .nm-tarjeta__nombre,
body .nm-tarjeta__nombre .elementor-heading-title,
body .nm-tarjeta__nombre h3,
body .nm-tarjeta__nombre h2 {
	font-size: 19px !important;
	line-height: 1.3 !important;
	margin: 0 0 4px !important;
}

@media (max-width: 767px) {
	body .nm-tarjeta__nombre,
	body .nm-tarjeta__nombre .elementor-heading-title,
	body .nm-tarjeta__nombre h3,
	body .nm-tarjeta__nombre h2 {
		font-size: 18px !important;
	}
}

/*
 * 41.12 · El mismo error de selector que 41.1 y 41.11, en las tarjetas de
 * taller (/apoyo-al-estudiante/, t33) y de nivel (/niveles/, t32): la regla
 * de tamaño estaba puesta en el wrapper del widget, así que el titular
 * seguía saliendo con la escala de titular del kit (49px) dentro de una
 * tarjeta. t31 ya lo había resuelto bien para `.nm-tarjeta-noticia__titulo`
 * (pisar el `.elementor-heading-title` de adentro); se homologan las otras
 * dos al mismo patrón, de una vez y para todas las tarjetas.
 */
body .nm-tarjeta-taller__titulo .elementor-heading-title,
body .nm-tarjeta-nivel__titulo .elementor-heading-title,
body .nm-tarjeta-album__titulo .elementor-heading-title {
	font-family: var(--nm-font-titulo) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.32 !important;
	color: var(--nm-tinta) !important;
	margin: 0 0 8px !important;
}

@media (max-width: 767px) {
	body .nm-tarjeta-taller__titulo .elementor-heading-title,
	body .nm-tarjeta-nivel__titulo .elementor-heading-title,
	body .nm-tarjeta-album__titulo .elementor-heading-title {
		font-size: 19px !important;
	}
}

/*
 * 41.13 · Además de las tipografías globales (41.3), el kit trae un ajuste
 * aparte para las etiquetas de formulario:
 * `.elementor-kit-5 label{text-transform:capitalize}`. Con eso, TODA
 * etiqueta del sitio salía en Título En Español Mal Escrito — se veía en
 * "¿De Qué Curso?" de /apoderados/ y en las etiquetas de los dos
 * formularios. En español una etiqueta se escribe como una frase normal.
 */
/* Ojo con el selector: `.elementor-kit-5` está en el PROPIO <body>, no en un
   contenedor de adentro, así que `body .elementor-kit-5 label` no engancha
   nada y `body label` (0,0,2) pierde contra `.elementor-kit-5 label` (0,1,1).
   Se resuelve con !important, igual que el resto de las correcciones de
   especificidad de este archivo. */
body label,
body.elementor-kit-5 label {
	text-transform: none !important;
}

/*
 * 41.14 · En teléfono, el nombre de la persona quedaba pegado al borde
 * inferior de la foto en la tarjeta de /comunidad/, /pie/ y el equipo
 * directivo de /nuestro-colegio/ — las mayúsculas del nombre se montaban
 * sobre la última línea de píxeles de la imagen. En escritorio la tarjeta
 * tiene relleno propio y el problema no se ve; en 390px no. Visto en una
 * captura recortada de la tarjeta, no midiendo el DOM (la medición decía
 * "38px de separación" y aun así el texto se montaba: la foto se recorta
 * distinto en móvil).
 */
@media (max-width: 767px) {
	body .e-loop-item .nm-tarjeta__nombre {
		margin-top: 16px !important;
	}
}


/* =========================================================================
   NM-TACTIL · área de toque en teléfono (auditoría 18-sep-2026)
   Enlaces de 16-21 px de alto son imposibles de acertar con el pulgar. No se
   cambia el tamaño de letra, solo se agranda el área sensible con relleno.
   Referencia: 44 px de lado mínimo.
   ========================================================================= */
@media (max-width: 767px) {
	.elementor-post__read-more,
	.elementor-posts .elementor-post__read-more,
	.nm-enlace-seccion,
	.nm-fila-titulo a,
	.elementor-icon-list-item > a,
	.site-footer a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.elementskit-social-media li a,
	.elementor-social-icon {
		min-width: 44px;
		min-height: 44px;
	}
}


/* =========================================================================
   NM-CORRECCIONES-AUDITORIA · hallazgos de scrape/auditar.js (18-sep-2026)
   ========================================================================= */

/* El asterisco de campo obligatorio de MetForm viene en rojo puro (#FF0000):
   3,67:1 sobre el fondo claro del formulario. Se oscurece para llegar a 4,5:1. */
/* MetForm imprime el asterisco con `className` (atributo de React) en vez de
   `class`, así que el navegador NO le aplica la clase. Hay que apuntarlo por
   atributo. El rojo puro daba 4,0:1 sobre blanco; con este queda sobre 4,5:1. */
[className="mf-input-required-indicator"],
[classname="mf-input-required-indicator"],
.mf-input-required-indicator,
.elementor-mark-required .elementor-field-label:after {
	color: #C2183B !important;
}

/* Los filtros por taxonomía se salían de la pantalla en teléfono: una sola fila
   que no envolvía. Se dejan en varias líneas y con área de toque suficiente. */
@media (max-width: 767px) {
	.elementor-widget-taxonomy-filter .e-filter,
	.e-filter {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		overflow-x: visible;
	}

	.e-filter-item {
		flex: 0 0 auto;
		min-height: 40px;
		white-space: nowrap;
	}
}

/* Fichas de persona y cifras: tamaños de la escala, no valores sueltos. */
.nm-persona-descripcion { font-size: 15px; line-height: 1.55; }
.nm-mv__titulo          { font-size: 23px; line-height: 1.3; }
.nm-cifra__numero       { font-size: 38px; line-height: 1.1; }
.nm-contacto-leyenda__dato { font-size: 13px; }


/* =========================================================================
   NM-METFORM · las opciones tipo tarjeta del formulario mostraban el círculo
   del radio encima del texto. Se le da su espacio y se alinea.
   ========================================================================= */
.mf-input-wrapper .mf-radio-image-wrapper label,
.metform-radio-wrapper label,
.mf-radio-wrapper label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.4;
}

.mf-input-wrapper input[type="radio"],
.mf-input-wrapper input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 2px;
}


/* =========================================================================
   NM-FORMULARIO-MOVIL · MetForm arma sus filas con anchos fijos y en 390 px
   el formulario se salía de la pantalla. Se fuerza a una columna.
   ========================================================================= */
@media (max-width: 767px) {
	.mf-main-container,
	.metform-form-content,
	.mf-input-wrapper,
	.metform-input-wrapper {
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.mf-main-container .row,
	.metform-form-content .row {
		margin-left: 0;
		margin-right: 0;
		flex-direction: column;
	}

	/* El formulario se arma con contenedores de Elementor dentro del widget:
	   sus anchos fijos también hay que soltarlos. */
	.metform-form-content .e-con,
	.metform-form-content .e-con-inner,
	.metform-form-content .elementor-element,
	.mf-main-container .e-con,
	.mf-main-container .elementor-element {
		max-width: 100%;
		width: 100%;
	}

	.mf-main-container [class*="col-"],
	.metform-form-content [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}


/* =========================================================================
   NM-COLUMNAS · utilidad de columnas iguales para las filas del kit.
   Los contenedores del kit traen anchos en % calculados sobre el ancho total
   de la ventana; cuando aparece la barra de desplazamiento, la última columna
   se sale de la pantalla. Con `flex: 1 1 0` y `min-width: 0` el reparto es
   exacto y el texto largo no empuja. Se aplica poniendo la clase en la fila.
   ========================================================================= */
.nm-columnas {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

.nm-columnas > .e-con,
.nm-columnas > .elementor-element {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: none;
}

@media (max-width: 1024px) {
	.nm-columnas { flex-wrap: wrap; }
	.nm-columnas > .e-con,
	.nm-columnas > .elementor-element { flex: 1 1 46%; }
}

@media (max-width: 767px) {
	.nm-columnas { flex-direction: column; }
	.nm-columnas > .e-con,
	.nm-columnas > .elementor-element { flex: 1 1 auto; width: 100%; }
}


/* =========================================================================
   NM-METFORM-CLASSNAME · MetForm imprime el formulario con el atributo
   `className` (de React) en vez de `class`. El navegador NO aplica esas clases,
   así que TODO el CSS que Elementor genera para esos contenedores queda muerto:
   el formulario ignora anchos, dirección y relleno, y en 390 px se salía de la
   pantalla. Hay que apuntarlos por atributo de datos, que sí existe.
   ========================================================================= */
.elementor-widget-metform [data-element_type="container"] {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	gap: 16px;
}

.elementor-widget-metform [data-element_type="container"] [data-element_type="widget"] {
	width: 100%;
	max-width: 100%;
}

/* En escritorio, nombre y correo sí van en dos columnas. */
@media (min-width: 768px) {
	.elementor-widget-metform [data-element_type="container"][data-id="0000006"] {
		flex-direction: row;
	}

	.elementor-widget-metform [data-element_type="container"][data-id="0000006"] > [data-element_type="widget"] {
		flex: 1 1 0;
		min-width: 0;
	}
}


/* =========================================================================
   NM-TARJETA-DOCUMENTO · el titulo de cada documento salia al tamano de un H2
   y dominaba la biblioteca entera. Va al escalon de tarjeta (19 px).
   ========================================================================= */
.nm-doc__titulo,
.nm-doc h3,
.nm-doc h2,
.elementor-widget-loop-grid .nm-doc__titulo {
	font-size: 19px;
	line-height: 1.35;
	font-weight: 600;
}

@media (max-width: 767px) {
	.nm-doc__titulo,
	.nm-doc h3,
	.nm-doc h2 { font-size: 18px; }
}

/* Estado vacio de la minuta del mes. */
.nm-minuta--vacia {
	border: 1px dashed var(--nm-gris-borde);
	border-radius: 0;
	padding: 28px 30px;
	background: var(--nm-blanco);
}

.nm-minuta--vacia .nm-minuta__titulo {
	font-weight: 600;
	color: var(--nm-morado);
	margin: 0 0 6px;
}

.nm-minuta--vacia .nm-minuta__texto {
	color: var(--nm-gris-texto);
	margin: 0;
}


/* =========================================================================
   NM-DESTACADA · la foto de la noticia destacada se estiraba por encima de su
   tamano real y salia borrosa. Se recorta en vez de ampliarse.
   ========================================================================= */
.nm-destacada img,
.nm-noticia-destacada img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.nm-destacada__foto,
.nm-destacada__media,
.nm-noticia-destacada__foto {
	/* `nm-destacada__media` es un <span>: sin `display:block` ignora el ancho
	   maximo y la relacion de aspecto. Mismo gotcha que ya nos costo antes. */
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nm-fondo-claro);
	/* Varias fotos del sitio anterior son pequenas (341 px de ancho). Estirarlas
	   a 620 px las deja pixeladas, asi que la columna no pasa de 440. */
	max-width: 440px;
}

@media (max-width: 767px) {
	.nm-destacada__foto,
	.nm-destacada__media,
	.nm-noticia-destacada__foto { max-width: 100%; }
}

.nm-destacada__media img,
.nm-destacada__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Rótulo del selector de curso: iba en 16,1 px por un valor en rem. */
.nm-selector-curso__label { font-size: 16px; }


/* =========================================================================
   NM-TARJETA-ALBUM · /galeria/ y la franja de la portada.
   Las portadas de los álbumes vienen del sitio anterior y tienen proporciones
   muy distintas (un retrato, un panorámico, un afiche). Sin proporción fija,
   cada tarjeta medía un alto distinto y la rejilla quedaba escalonada, con un
   hueco grande entre la primera fila y la segunda. Se les da la misma caja.
   ========================================================================= */
.nm-tarjeta-album {
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
	overflow: hidden;
	height: 100%;
}

.nm-tarjeta-album__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.nm-tarjeta-album__cuerpo {
	padding: 16px 18px 20px;
}

.nm-tarjeta-album__meta {
	font-family: var(--nm-font-cuerpo);
	font-size: 14px;
	color: var(--nm-gris-texto);
}

/* Que todas las tarjetas de una fila midan lo mismo. */
.elementor-widget-loop-grid .elementor-grid > .e-loop-item,
.elementor-widget-loop-grid .elementor-grid > .elementor-post {
	display: flex;
}

.elementor-widget-loop-grid .elementor-grid > .e-loop-item > .elementor-element,
.elementor-widget-loop-grid .elementor-grid > .e-loop-item > .e-con {
	width: 100%;
}

/* =========================================================================
   NM-AVISOS-FORMULARIO · los mensajes de validación de MetForm heredaban el
   tamaño del titular de la sección: "Elige un área para continuar." salía a
   38 px en rojo, como si el sitio se hubiera roto. Van al tamaño del cuerpo,
   en el rojo accesible del proyecto.
   ========================================================================= */
body .elementor-widget-metform .mf-error-message,
body .elementor-widget-metform .mf-input-message,
body .elementor-widget-metform .mf-response-massage,
body .elementor-widget-metform .validation-warning,
body .elementor-widget-metform .mf-validation-warning {
	font-family: var(--nm-font-cuerpo) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	color: #C2183B !important;
	margin: 8px 0 0 !important;
	display: block;
}


/* =========================================================================
   NM-ICON-BOX-ANCHO · en /contacto/ los cuatro datos (dirección, teléfono,
   correo, horario) salían con una palabra por línea: "Avda. / Lo / Cruzat /
   125,". El contenedor de cada dato mide 344 px, pero el widget se encogía a
   172 y el bloque de texto, a 69. El widget no llenaba su columna.
   ========================================================================= */
.elementor-widget-icon-box {
	width: 100%;
}

.elementor-widget-icon-box .elementor-icon-box-wrapper {
	width: 100%;
}

.elementor-widget-icon-box .elementor-icon-box-content {
	min-width: 0;
}


/* =========================================================================
   NM-CONTACTO-REMATES · detalles de /contacto/ que solo se ven mirando.
   ========================================================================= */

/* Un teléfono partido en dos líneas ("+56 2 603 / 3538") se lee como dos
   números distintos. */
.elementor-widget-icon-box .elementor-icon-box-description a[href^="tel:"],
.nm-telefono {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.nm-contacto-leyenda {
		grid-template-columns: 1fr;
	}
}


/* =========================================================================
   NM-BOTON-TIPOGRAFIA · el widget Botón de Elementor trae por defecto la
   tipografía del estilo global `accent` ("Destacado", 19 px / 500), con más
   especificidad que el estilo de botón del kit
   (`.elementor-kit-5 .elementor-button`, 14 px / 600). Resultado: todos los
   botones de página salían a 19 px en versalitas y los rótulos largos se
   partían en dos líneas. `accent` no se puede reutilizar: hay una treintena
   de widgets que lo usan como bajada destacada.
   Esto repone SOLO la tipografía que el kit ya define para sus botones. No
   toca forma, color, borde ni relleno: de eso sigue mandando el kit (02).
   ========================================================================= */
body .elementor-widget-button .elementor-button,
body .elementor-widget-button .elementor-button .elementor-button-text {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

/* NM-TESTIMONIO-COMILLA · la comilla decorativa es un widget de icono aparte,
   absoluto en la esquina inferior derecha de la tarjeta y con z-index sobre el
   texto. La atribución del egresado corría por debajo y perdía la última
   palabra ("hoy Jefe" se leía "hoy Jef"). Se le reserva ese ancho. */
.elementor-widget-testimonial .elementor-testimonial-meta {
	padding-right: 58px;
}

/* NM-MENU-ABRIR · el botón de cerrar del menú móvil ya medía 44×44, pero el de
   abrirlo se había quedado en 44×27 de alto útil. Es el único acceso a la
   navegación en teléfono: tiene que aceptar un pulgar.
   NO se toca `display`: ElementsKit oculta esta hamburguesa en escritorio con
   `display:none`, y un `display:flex !important` aquí le gana a esa regla y la
   deja asomando al final de la barra de navegación. Solo relleno y alto. */
.elementskit-menu-hamburger {
	min-height: 44px;
	padding: 10px 0 !important;
}

/* NM-MINUTA-PENDIENTE · el mes en que el colegio todavía no subió la minuta,
   la tarjeta explica por qué está vacía en vez de dejar el título flotando
   sobre un hueco. Sin el borde amarillo: no hay nada que descargar. */
.nm-minuta--pendiente {
	border-left-color: var(--nm-gris-borde);
}

.nm-minuta__pendiente {
	margin: 4px 0 0;
	max-width: 62ch;
}

/* NM-MENU-INTERMEDIO · el 21-sep-2026 el menú de cabecera pasó de 8 ítems a 7
   con desplegables, pero dos de ellos son largos ("Apoyo al Estudiante",
   "Apoderados"). Se midió a 1366 —donde entra— y a 1024 —donde ya es
   hamburguesa—, y nunca en medio: entre 1025 y 1279 px los ítems suman 972
   sobre 853 disponibles y la fila se parte en dos, con "Contacto" saliéndose
   de la barra porque el alto del `ul` sigue fijo en 50 px.

   El relleno de fábrica es de 45 px a la derecha de cada enlace: con siete
   ítems son 315 px de aire. En este tramo se aprieta ese aire, que es lo que
   sobra, antes de tocar el cuerpo de letra.

   7-oct-2026: el tramo se extiende hasta 1365 px. Al sumar la lupa de
   búsqueda al encabezado (44 px más), el punto en que la fila deja de caber
   se corrió hacia arriba: a 1280 volvía a partirse en dos. Medido de nuevo a
   1440 (entra), 1366 (entra), 1280 y 1100 (necesitan el apriete). */
/* Novo Horizonte: el ajuste aplica en todo escritorio, sin límite superior.
   El contenedor del menú tiene ancho fijo, así que a 1920 el espacio útil es
   el mismo que a 1600 pero vuelve el relleno de fábrica y la fila se parte. Sus entradas son más largas
   que las del piloto —«Cursos y Niveles» donde Novo Mundo dice «Niveles»,
   que es el nombre que pidió el colegio en su arquitectura— y con el relleno
   de fábrica la fila se partía en dos a 1440. */
@media (min-width: 1025px) {
	.elementskit-navbar-nav > li > a {
		padding-right: 20px !important;
		font-size: 15px !important;
	}

	/* Si aun así no cupiera, que no se salga de la barra: se ve el recorte
	   antes que el desborde silencioso sobre el contenido de abajo. */
	.elementskit-navbar-nav {
		flex-wrap: nowrap;
	}
}

/* =========================================================================
   NM-BANDAS-PORTADA · «Últimas noticias» y «Así vivimos nuestro Novo Mundo»
   (21-sep-2026, reportado por Andrés)

   Dos cosas, las dos medidas:

   1. El bloque de título y la rejilla estaban pegados: **5 px** entre «Ver
      todos los álbumes» y la primera tarjeta, y 4 px entre el titular y ese
      enlace. Con esa distancia el enlace deja de leerse como parte del
      encabezado y parece la etiqueta de la primera tarjeta.

   2. El pie blanco de las tarjetas quedaba desbalanceado. La rejilla estira
      todas las tarjetas al alto de la más alta, pero el texto se quedaba
      pegado arriba: la tarjeta de noticia con un título de una línea tenía
      **132 px de blanco muerto** debajo, la de cuatro líneas 55, y en la
      banda de álbumes 36 contra 10. Cada tarjeta parecía cortada a una
      altura distinta. El texto ahora ocupa el alto sobrante y se centra en
      él, así que el aire se reparte arriba y abajo y se lee como decisión.
   ========================================================================= */
/* Al medir el hueco apareció la causa de fondo, que no era el espaciado:
   **parte del CSS propio de la portada nunca se desplegó**. Las clases
   `.nm-enlace`, `.nm-p-versalita` y el `display:flex` de `.nm-fila-titulo`
   están escritas en `runbook/t27-portada.php` pero no existen en ninguna hoja
   servida — comprobado contra `nm.css`, contra las `post-*.css` de Elementor
   y contra los seis bloques `<style>` de la página. Por eso el enlace «Ver
   todos los álbumes» caía debajo del titular y alineado a la izquierda, donde
   parece la etiqueta de la primera tarjeta, en vez de ir a la derecha en la
   misma línea. Se reponen acá, que es donde corresponde que vivan.

   NO se repone `.nm-h2` de ese mismo bloque: define `font: 600 36px/1.15
   Lora, Georgia, serif`, y el serif está descartado en este proyecto salvo
   el logo. Que esa regla nunca llegara fue una suerte; el titular ya toma la
   tipografía correcta del tema. */
.nm-fila-titulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.nm-p-versalita {
	font-family: "Inter", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.nm-enlace {
	font-family: "Inter", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--nm-morado);
	text-decoration: none;
	border-bottom: 2px solid var(--nm-amarillo);
	padding-bottom: 3px;
}

.nm-enlace:hover,
.nm-enlace:focus {
	color: var(--nm-violeta);
}

.elementor-post__card {
	display: flex;
	flex-direction: column;
}

.elementor-post__card .elementor-post__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 22px;
}

/* El margen inferior del titular sobra cuando el bloque ya está centrado:
   sumaba 10 px al aire de abajo y desalineaba el centro óptico. */
.elementor-post__card .elementor-post__title {
	margin-bottom: 0;
}

.elementor-post__card .elementor-post__meta-data {
	margin-top: 8px;
	margin-bottom: 0;
}

/* =========================================================================
   NM-CONSENTIMIENTO · la casilla de los dos formularios (21-sep-2026)

   Mismo patrón que las tarjetas de área de más arriba: MetForm esconde el
   `input` y dibuja el recuadro con un `::before` sobre el `span`. De fábrica
   ese pseudo-elemento sale de 25×46 px **dentro del flujo del texto**, así
   que el cuadrado se montaba sobre la primera palabra («Autorizo» empezaba
   debajo del recuadro). Se saca del flujo, se le da tamaño de casilla y se
   le reserva el espacio con relleno a la izquierda.

   Lleva `!important` por la misma razón documentada en el bloque de las
   tarjetas: las reglas propias de MetForm ganan por especificidad y este es
   un componente cerrado del plugin.
   ========================================================================= */
.elementor-widget-mf-gdpr-consent .mf-checkbox-option label {
	display: block;
	cursor: pointer;
}

.elementor-widget-mf-gdpr-consent .mf-checkbox-option label span {
	position: relative !important;
	display: block !important;
	padding-left: 30px !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--nm-gris) !important;
}

.elementor-widget-mf-gdpr-consent .mf-checkbox-option label span::before {
	position: absolute !important;
	left: 0 !important;
	top: 2px !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--nm-gris-borde) !important;
	border-radius: 3px !important;
	background: #fff !important;
	content: "" !important;
	display: block !important;
}

.elementor-widget-mf-gdpr-consent .mf-checkbox-option:hover label span::before,
.elementor-widget-mf-gdpr-consent .mf-checkbox-option label:focus-within span::before {
	border-color: var(--nm-violeta) !important;
}

/* Marcada: relleno morado con el visto en blanco. */
.elementor-widget-mf-gdpr-consent .mf-checkbox-option:has(input:checked) label span::before {
	background: var(--nm-morado) !important;
	border-color: var(--nm-morado) !important;
}

.elementor-widget-mf-gdpr-consent .mf-checkbox-option:has(input:checked) label span::after {
	content: "" !important;
	position: absolute;
	left: 6px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* El enlace a la política tiene que parecer un enlace. */
.elementor-widget-mf-gdpr-consent .mf-checkbox-option a {
	color: var(--nm-morado) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	font-weight: 600;
}

/* =========================================================================
   NM-FORM-PASOS · formularios por pasos (21-sep-2026)

   Sustituye al despliegue condicional de t37 (`.nm-contacto-paso2`), que
   mostraba todo el resto del formulario de golpe al elegir un área. Ahora son
   pasos de verdad, con indicador y navegación, según la preferencia de
   formularios del proyecto: pocos pasos, pocos campos, aire generoso.

   Regla de seguridad: los pasos SOLO se ocultan cuando el JS agrega
   `nm-pasos-activo`. Sin JS el formulario se ve entero y se puede enviar.
   ========================================================================= */
.nm-form-pasos.nm-pasos-activo .nm-paso[hidden] {
	display: none;
}

.nm-pasos__cabecera {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 26px;
}

.nm-pasos__cuenta {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nm-violeta);
}

.nm-pasos__barra {
	display: block;
	height: 4px;
	border-radius: 999px;
	background: var(--nm-gris-borde);
	overflow: hidden;
}

.nm-pasos__barra-relleno {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--nm-violeta);
	transition: width .32s ease;
}

.nm-paso__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

/* El kit define `.elementor-kit-5 button` con su propio fondo y le gana en
   especificidad a estas clases: sin `!important`, «Atrás» salía morado y
   parecía la acción principal. Mismo caso documentado en el aviso de cookies. */
.nm-paso__siguiente {
	order: 2;
	margin-left: auto;
	padding: 14px 30px;
	border: 0 !important;
	background: var(--nm-morado) !important;
	color: #fff;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 48px;
}

.nm-paso__siguiente:hover,
.nm-paso__siguiente:focus-visible {
	background: var(--nm-violeta) !important;
}

.nm-paso__atras {
	order: 1;
	padding: 14px 20px;
	border: 1px solid var(--nm-gris-borde) !important;
	background: #fff !important;
	color: var(--nm-gris) !important;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	min-height: 48px;
}

.nm-paso__atras:hover,
.nm-paso__atras:focus-visible {
	border-color: var(--nm-violeta) !important;
	color: var(--nm-morado) !important;
}

/* El botón de envío de MetForm, ya dentro de la fila de navegación. */
.nm-paso__enviar {
	order: 3;
	margin-left: auto;
	width: auto !important;
}

.nm-paso__nav .nm-paso__siguiente {
	order: 2;
}



/* El aviso de «falta responder» es informativo, no una alarma: ámbar y
   debajo del paso, nunca un salto de página. */
.nm-paso__aviso {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--nm-amarillo);
	background: #FDF8E6;
	font-size: 14px;
	color: #7A5B00;
}

/* Aire entre los campos de cada paso. */
.nm-form-pasos .nm-paso > .e-con-inner,
.nm-form-pasos .nm-paso {
	row-gap: 18px;
}

@media (max-width: 600px) {
	.nm-paso__nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.nm-paso__siguiente,
	.nm-paso__atras {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}
}

/* NM-PASO-TITULO · los títulos de paso son widgets de encabezado, así que
   tomaban la escala de titular de página: 38 px dentro de una tarjeta cuyo
   propio título de sección mide 23. La jerarquía quedaba invertida —el paso
   gritaba más que la sección que lo contiene— y «¿Cómo te contactamos?» se
   partía en dos líneas. Un título de paso es un rótulo, no un titular. */
.nm-paso h1,
.nm-paso h2,
.nm-paso h3,
.nm-paso h4 {
	font-size: 19px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
	color: var(--nm-morado) !important;
	margin: 0 0 4px !important;
}

@media (max-width: 767px) {
	.nm-paso h1,
	.nm-paso h2,
	.nm-paso h3,
	.nm-paso h4 {
		font-size: 18px !important;
	}
}

/* NM-PAGINACION · el archivo de noticias tiene 55 páginas reales (490 posts
   de 2015 a 2025). Con las flechas «Anterior/Siguiente» la fila se alarga y
   en teléfono se parte en dos líneas: los números quedaban con 26 px de alto,
   por debajo del área táctil mínima. Se les da alto y separación propios en
   vez de tocar el widget, que es del kit. */
.elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0 6px;
}

/* Los puntos suspensivos no son un destino: no necesitan área táctil y
   separan mejor si no ocupan 44 px de ancho. */
.elementor-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 2px;
}

/* «Anterior» y «Siguiente» son palabras, no números: se les deja respirar a
   los lados para que no se peguen al 1 ni al 55. */
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next {
	padding: 0 12px;
}

/* En la primera página «Anterior» sale como <span> sin enlace: se atenúa para
   que se lea como «no hay hacia dónde», no como un enlace que no responde. */
.elementor-pagination span.page-numbers.prev,
.elementor-pagination span.page-numbers.next {
	opacity: 0.35;
}

/* En teléfono la fila completa (Anterior 1 … 26 27 28 29 30 … 55 Siguiente)
   se partía en tres líneas y «Siguiente» quedaba solo abajo, como si fuera
   otra cosa. Ahí no se navega saltando a la página 26: se avanza y se
   retrocede. Se dejan las dos flechas y la página actual, y se saca de
   `elementor-screen-only` la palabra «Página», que ya viene en el HTML, para
   que la fila diga qué es ese número en vez de mostrarlo suelto. */
@media (max-width: 767px) {
	.elementor-pagination .page-numbers:not(.prev):not(.next):not(.current) {
		display: none;
	}

	.elementor-pagination .page-numbers.current .elementor-screen-only {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
		clip-path: none;
		overflow: visible;
		white-space: normal;
		margin: 0 5px 0 0;
	}

	/* «Anterior Página 28 Siguiente» se pasaba por unos 20 px del ancho de un
	   teléfono de 390 y saltaba a dos líneas. Se le quita el aire lateral que
	   solo hacía falta cuando había números en medio. */
	.elementor-pagination .page-numbers.prev,
	.elementor-pagination .page-numbers.next {
		padding: 0 4px;
	}

	.elementor-pagination .page-numbers {
		font-size: 17px;
	}
}

/* NM-FILTRO-ANIOS · el archivo va de 2015 a 2025 y muy desparejo (2021 tiene
   147 publicaciones, 2016 tiene 1). Los chips son enlaces, no un <select>:
   se ve el rango completo de un vistazo —que el colegio lleva una década
   publicando es parte de lo que la página tiene que decir— y elegir un año
   es un clic, no tres. */
.nm-filtro-anios {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-top: 18px;
}

.nm-filtro-anios__label {
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	font-weight: 600;
	color: var(--nm-gris-texto);
	letter-spacing: .02em;
}

.nm-filtro-anios__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Medidas copiadas del filtro de tipo (TODAS · COMUNICADOS · NOTICIAS) que
   está justo encima, medidas en pantalla: radio 999px, alto 41, relleno
   10/18, 15px, peso 600, borde #E3E0EC. Son dos filas de filtros pegadas:
   si una es píldora y la otra rectángulo se leen como dos controles
   distintos en vez de como el mismo filtro de dos maneras. */
.nm-chip-anio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 41px;
	padding: 0 18px;
	border: 1px solid var(--nm-gris-borde);
	border-radius: 999px;
	background: var(--nm-blanco);
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* `!important` en el color por lo de siempre en este kit: `.elementor-kit-5 a`
   tiene especificidad (0,1,1) y le gana a `.nm-chip-anio` (0,1,0). Sin esto,
   el chip activo salía con texto morado sobre fondo morado — invisible, y no
   se nota midiendo: el texto está en el DOM y el ancho es correcto. Mismo
   caso que los botones del aviso de cookies y de la navegación de pasos. */
.nm-chip-anio {
	color: var(--nm-morado) !important;
}

.nm-chip-anio:hover,
.nm-chip-anio:focus-visible {
	border-color: var(--nm-morado);
	background: var(--nm-fondo-claro);
}

.nm-chip-anio--activo,
.nm-chip-anio--activo:hover,
.nm-chip-anio--activo:focus-visible {
	background: var(--nm-morado);
	border-color: var(--nm-morado);
	color: var(--nm-blanco) !important;
}

/* Cuántas noticias tiene cada año. Va en el chip porque es lo que decide si
   vale la pena entrar: 2016 con una sola publicación no es un año que
   alguien quiera abrir a ciegas. */
.nm-chip-anio__total {
	font-size: 12px;
	font-weight: 500;
	opacity: .6;
}

/* La línea de estado ocupa el ancho completo, debajo de los chips. */
.nm-filtro-anios__estado {
	flex-basis: 100%;
	margin: 2px 0 0;
	font-family: var(--nm-font-cuerpo);
	font-size: 14px;
	color: var(--nm-gris-texto);
}

/* Con un filtro puesto, la tarjeta ancha «Lo último» deja de tener sentido:
   muestra siempre la noticia más reciente del sitio, así que alguien que
   pidió 2019 se encontraría encabezando la página una de 2025. Se oculta el
   contenedor entero y no solo su contenido, porque el contenedor tiene
   relleno propio y quedaría un hueco en blanco. */
body.nm-noticias-filtradas .elementor-element[data-id="nmdestacada"] {
	display: none;
}

@media (max-width: 767px) {
	.nm-chip-anio {
		min-height: 44px;
		padding: 0 12px;
	}
}

/* NM-BUSQUEDA · la página de resultados. El alcance incluye buscador interno
   y el motor existía, pero los resultados salían con la plantilla del tema
   padre: fotos de noticias a pantalla completa y ningún campo para corregir
   la búsqueda. Los documentos van primero porque quien escribe «reglamento»
   quiere el archivo, no la noticia que lo menciona. */
.nm-busqueda {
	max-width: 880px;
	margin: 0 auto;
	padding: 56px 16px 72px;
}

.nm-busqueda__cabecera {
	padding-bottom: 26px;
	border-bottom: 1px solid var(--nm-gris-borde);
	margin-bottom: 34px;
}

.nm-busqueda__rotulo {
	margin: 0 0 6px;
	font-family: var(--nm-font-cuerpo);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nm-morado);
}

.nm-busqueda__titulo {
	margin: 0 0 22px;
	font-family: var(--nm-font-titulo);
	font-size: 34px;
	line-height: 1.2;
	color: var(--nm-morado);
}

.nm-busqueda__form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* 16px o iOS hace zoom al enfocar el campo. */
.nm-busqueda__campo {
	flex: 1 1 240px;
	min-height: 50px;
	padding: 0 16px;
	border: 1px solid var(--nm-gris-borde);
	font-family: var(--nm-font-cuerpo);
	font-size: 16px;
	color: var(--nm-tinta);
}

.nm-busqueda__campo:focus {
	outline: 2px solid var(--nm-morado);
	outline-offset: 1px;
}

.nm-busqueda__boton {
	min-height: 50px;
	padding: 0 26px;
	border: 0;
	background: var(--nm-morado) !important;
	color: #fff !important;
	font-family: var(--nm-font-cuerpo);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.nm-busqueda__grupo {
	margin-bottom: 38px;
}

.nm-busqueda__grupo-titulo {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-family: var(--nm-font-titulo);
	font-size: 19px;
	color: var(--nm-tinta);
}

.nm-busqueda__grupo-n {
	min-width: 24px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--nm-fondo-claro);
	font-family: var(--nm-font-cuerpo);
	font-size: 13px;
	font-weight: 700;
	color: var(--nm-morado);
	text-align: center;
}

.nm-busqueda__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-busqueda__item + .nm-busqueda__item {
	border-top: 1px solid var(--nm-gris-borde);
}

.nm-busqueda__enlace {
	display: block;
	padding: 15px 0;
	text-decoration: none;
	color: inherit;
}

.nm-busqueda__enlace:hover .nm-busqueda__item-titulo,
.nm-busqueda__enlace:focus-visible .nm-busqueda__item-titulo {
	text-decoration: underline;
}

.nm-busqueda__item-titulo {
	display: block;
	font-family: var(--nm-font-cuerpo);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--nm-morado) !important;
}

.nm-busqueda__item-fecha {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--nm-gris-texto);
}

.nm-busqueda__item-resumen {
	display: block;
	margin-top: 5px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--nm-gris-texto);
}

.nm-busqueda__vacio {
	padding: 26px 24px;
	background: var(--nm-fondo-claro);
	border-left: 3px solid var(--nm-amarillo);
}

.nm-busqueda__vacio-titulo {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	color: var(--nm-tinta);
}

.nm-busqueda__atajos {
	margin: 12px 0 0;
	padding-left: 18px;
}

.nm-busqueda__atajos li {
	margin-bottom: 6px;
}

@media (max-width: 767px) {
	.nm-busqueda {
		padding: 36px 16px 56px;
	}

	.nm-busqueda__titulo {
		font-size: 26px;
	}
}

/* NM-BUSCAR-ENLACE · el acceso a la búsqueda en el encabezado, junto al botón
   de admisión. Enlace y no campo desplegable: el encabezado se imprime en
   todas las páginas y un script en línea ahí rompe los formularios. */
.nm-buscar-enlace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	border: 1px solid var(--nm-gris-borde);
	border-radius: 999px;
	color: var(--nm-morado) !important;
	font-family: var(--nm-font-cuerpo);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, background-color .15s ease;
}

.nm-buscar-enlace:hover,
.nm-buscar-enlace:focus-visible {
	border-color: var(--nm-morado);
	background: var(--nm-fondo-claro);
}

.nm-buscar-enlace__icono {
	flex: 0 0 auto;
}

/* La palabra «Buscar» no se dibuja en ningún tamaño. Con ella, el enlace mide
   102 px y empuja el menú: a 1440 «Contacto» caía a una segunda línea, que es
   la misma trampa que ya obligó a ajustar el relleno de los enlaces entre
   1025 y 1279 px (ver NM-MENU-INTERMEDIO). La lupa sola se entiende, y el
   texto sigue estando para quien usa lector de pantalla, más el `aria-label`
   y el `title` del enlace. */
.nm-buscar-enlace__texto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* El tramo más angosto antes de la hamburguesa (1025-1180 px): con siete
   entradas y «Cursos y Niveles», ni el ajuste general alcanza a 1025. */
@media (min-width: 1025px) and (max-width: 1180px) {
	.elementskit-navbar-nav > li > a {
		padding-right: 12px !important;
		font-size: 14px !important;
	}
}

/* ==========================================================================
   NM-LOGO-MEDALLON · el escudo de NH sobre el pie oscuro
   El logo disponible es un JPG con fondo blanco. Sobre el violeta del pie
   dejaba un recuadro blanco; recortado en círculo se lee como medallón. El
   escudo cabe entero en el círculo (se midió: el borde del texto curvo queda
   a 164-167 px del centro, radio 176). Sobra cuando llegue el logo original.
   ========================================================================== */
.nm-logo-medallon img {
	border-radius: 50%;
	background: var(--nm-blanco, #fff);
	box-shadow: 0 0 0 4px var(--nm-blanco, #fff);
}

/* ==========================================================================
   NM-ESPECIALIDADES · tarjetas de especialidades y cifras en la ficha TP
   Viven en el contenido de la ficha «Media Técnico-Profesional»
   (runbook/nh-niveles.php). Mismo lenguaje que las tarjetas de la ficha
   rápida: fondo blanco, borde var(--nm-gris-borde), radio 14.
   ========================================================================== */
.nm-nivel-descripcion ul.nm-especialidades-lista,
.nm-nivel-descripcion ul.nm-cifras {
	list-style: none;
	margin: 18px 0 34px;
	padding: 0;
	display: grid;
	gap: 14px;
}
.nm-nivel-descripcion ul.nm-especialidades-lista { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.nm-nivel-descripcion ul.nm-cifras { grid-template-columns: repeat(3, 1fr); }
.nm-especialidades-lista li,
.nm-cifras li {
	margin: 0;
	background: var(--nm-blanco, #fff);
	border: 1px solid var(--nm-gris-borde);
	border-radius: 14px;
	padding: 18px 20px;
}
.nm-especialidades-lista li { position: relative; transition: border-color .18s ease, box-shadow .18s ease; }
.nm-especialidades-lista li:hover { border-color: var(--nm-violeta-marca); box-shadow: 0 6px 18px rgba(119, 60, 189, .12); }
.nm-especialidades-lista a {
	display: block;
	font-weight: 700;
	font-size: 17px;
	color: var(--nm-morado) !important;
	text-decoration: none;
}
/* Toda la tarjeta es el enlace (el `a` se estira sobre el li). */
.nm-especialidades-lista a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.nm-especialidades-lista a:focus-visible { outline: none; }
.nm-especialidades-lista li:focus-within { outline: 3px solid var(--nm-amarillo, #F2C230); outline-offset: 2px; }
.nm-especialidades-lista span { display: block; margin-top: 4px; font-size: 14px; color: #5B5670; }
.nm-cifras li { font-size: 15px; line-height: 1.4; color: #4A4A5A; }
.nm-cifras strong {
	display: block;
	font-size: 34px;
	line-height: 1.1;
	color: var(--nm-morado);
	margin-bottom: 4px;
}
@media (max-width: 767px) {
	.nm-nivel-descripcion ul.nm-cifras { grid-template-columns: 1fr; }
}

/* NM-MALLA · la malla curricular de cada especialidad (runbook/nh-especialidades.php).
   Usa las tarjetas de la ficha de nivel; solo agrega los rótulos internos. */
.nm-malla__titulo { margin-bottom: 18px; }
.nm-malla__sub {
	margin: 14px 0 4px;
	font: 600 12px/1.3 Inter, system-ui, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nm-violeta-marca);
}
.nm-malla__sub:first-child { margin-top: 2px; }
.nm-malla__lista li { line-height: 1.5; padding: 3px 0; }

/* NM-CTA-CENTRO · el título de la franja final va centrado, como su botón.
   `.nm-cta` ya centra el texto, pero el kit le fija `text-align:left` a los
   títulos y en la ficha de nivel la pregunta quedaba a la izquierda con el
   botón al centro (visto el 07-oct en NM y NH). */
body .nm-cta .nm-cta__pregunta .elementor-heading-title { text-align: center !important; }

/* Las listas dentro de la descripción de un nivel o especialidad: mismo ancho
   de lectura que los párrafos (74ch); las grillas de tarjetas quedan libres. */
.nm-nivel-descripcion ul:not(.nm-especialidades-lista):not(.nm-cifras) {
	max-width: 74ch;
	margin: 0 0 18px;
	font: 400 17px/1.7 Inter, system-ui, sans-serif;
	color: #4A4A5A;
}

/* Apoyo al Estudiante: «A cargo de» va en su propia línea, antes de correo y horario. */
.nm-area__contacto .nm-area__encargado { flex-basis: 100%; }

/* NM-CLIMA · «14°C en Quilicura» sobre la foto del hero. Era texto gris suelto:
   en el piloto se leía porque detrás hay cielo; en NH cae sobre el edificio y
   desaparecía. Con pastilla se lee sobre cualquier foto. */
.nm-clima {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .88);
	color: var(--nm-tinta) !important;
	font-weight: 500;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

/* Nuestro Colegio · cifras: el número no se encoge. «+2.000» es más ancho que
   las cifras del piloto y se montaba sobre su rótulo; el rótulo es el que
   debe ceder y partirse en líneas. */
.elementor-widget-counter {
	flex-shrink: 0;
	--container-widget-width: auto !important;
	width: auto !important;
	max-width: none !important;
}

/* Nombre del documento en la biblioteca (t29): la regla de .nm-fila-doc__nombre
   caía en el contenedor del widget y el H4 de adentro tomaba los 38 px del kit.
   Cada documento se leía como un titular de página (visto el 07-oct en NM y NH). */
.nm-fila-doc__nombre .elementor-heading-title {
	font-family: var(--nm-font-titulo) !important;
	font-size: 18px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
	color: var(--nm-tinta) !important;
	-webkit-text-fill-color: var(--nm-tinta) !important;
}