/*
 Theme Name:   Immupigen
 Theme URI:    http://www.immupigen.com/
 Description:  Child theme de GeneratePress con un diseño científico moderno, claro y accesible para Immupigen, Metapigen y Metapigsel. No modifica logos, menús ni contenido: solo la presentación.
 Author:       IRTA
 Template:     generatepress
 Version:      1.2.8
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  nuevotemplatewp
*/

/* ==========================================================================
   1. Variables de diseño
   ========================================================================== */
:root {
	--nt-ink: #2a2150;            /* texto principal / fondos oscuros */
	--nt-ink-soft: #575078;       /* texto secundario */
	--nt-accent: #5b3fd6;         /* violeta de acento (contraste AA sobre blanco) */
	--nt-accent-dark: #4328b0;
	--nt-pink: #a99af2;           /* violeta claro (detalles, bordes hover) */
	--nt-tint: #f0ecff;           /* fondo violeta muy suave */
	--nt-lilac: #ece8f8;
	/* Variables que cambian con la paleta elegida en el Personalizador */
	--nt-accent-rgb: 91, 63, 214;
	--nt-pink-rgb: 169, 154, 242;
	--nt-glow-a: rgba(169, 154, 242, .40);
	--nt-glow-b: rgba(150, 125, 255, .30);
	--nt-hero-bg: linear-gradient(135deg, #f1eeff 0%, #f6f4ff 50%, #eef2ff 100%);
	--nt-footer: #ece8f8;
	--nt-go-ink: #fff;
	--nt-bg: #f6f5fa;
	--nt-card: #ffffff;
	--nt-line: #e7e4f0;
	--nt-radius: 18px;
	--nt-radius-sm: 10px;
	--nt-shadow: 0 1px 2px rgba(27, 21, 48, .04), 0 12px 32px -12px rgba(27, 21, 48, .14);
	--nt-shadow-lg: 0 2px 4px rgba(27, 21, 48, .05), 0 24px 48px -16px rgba(27, 21, 48, .22);
	--nt-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--nt-max: 1200px;
	/* Escala tipográfica única (usar solo estos tamaños) */
	--nt-fs-label: 12.5px;   /* etiquetas en mayúsculas */
	--nt-fs-small: 14.5px;   /* enlaces visibles, créditos, notas */
	--nt-fs-body: 17px;      /* texto */
	--nt-fs-lead: 20px;      /* frase destacada / entradilla */
	--nt-fs-figure: 22px;    /* cifras destacadas */
}

/* Variables derivadas: se declaran en body para que sigan la paleta elegida */
body {
	--nt-bar: linear-gradient(90deg, var(--nt-pink), var(--nt-accent), #7a5cff);
	--nt-go: linear-gradient(135deg, var(--nt-accent), var(--nt-accent-dark));
	--nt-code-bg: var(--nt-tint);
	--nt-code-ink: var(--nt-accent-dark);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
	font-family: var(--nt-font);
	font-size: 17px;
	line-height: 1.75;
	color: var(--nt-ink);
	background: var(--nt-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Halo decorativo suave en la parte superior de todas las páginas */
body::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 520px;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60% 80% at 85% 0%, rgba(var(--nt-pink-rgb), .28), transparent 70%),
		radial-gradient(50% 70% at 5% 10%, rgba(var(--nt-pink-rgb), .15), transparent 70%);
}
body.nt-has-hero::before { display: none; }

::selection { background: var(--nt-pink); color: var(--nt-ink); }

a {
	color: var(--nt-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s ease;
}
a:hover, a:focus { color: var(--nt-accent-dark); }

:focus-visible {
	outline: 3px solid var(--nt-pink);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   3. Cabecera y logo
   ========================================================================== */
body .site-header,
body .site-header.grid-container {
	position: sticky;
	top: 0;
	z-index: 100;
	max-width: 100%;
	margin: 0;
	background: #fff;
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--nt-line);
	box-shadow: 0 0 0 rgba(27, 21, 48, 0);
	transition: box-shadow .25s ease, background .25s ease;
}
/* Franja de color superior */
body .site-header::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--nt-ink) 0%, var(--nt-accent) 55%, var(--nt-pink) 100%);
}
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

body .site-header.is-scrolled {
	background: #fff;
	box-shadow: 0 10px 30px -14px rgba(27, 21, 48, .28);
}

.inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--nt-max);
	margin: 0 auto;
	padding: 10px 24px;
	box-sizing: border-box;
}

/* El logo se muestra tal cual, sin recolorear ni deformar */
.site-logo { flex: 0 0 auto; line-height: 0; }
.site-logo a { display: inline-block; }
.site-logo img.header-image {
	display: block;
	width: auto;
	height: auto;
	max-height: 70px;
	max-width: 100%;
	transform-origin: left center;
	transition: transform .25s ease;
}
/* Al hacer scroll el logo se reduce con transform (no cambia la altura de la cabecera: evita vibraciones) */
.site-header.is-scrolled .site-logo img.header-image { transform: scale(.8); }

/* ==========================================================================
   4. Navegación principal
   ========================================================================== */
body .main-navigation,
body .main-navigation ul ul {
	background: transparent;
}
body .main-navigation { width: auto; }
body .main-navigation .inside-navigation {
	max-width: none;
	padding: 0;
	margin: 0;
}

body .main-navigation .main-nav > ul {
	display: flex;
	align-items: center;
	gap: 2px;
}

body .main-navigation .main-nav ul li a {
	display: block;
	padding: 9px 15px;
	line-height: 1.3;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--nt-ink);
	border-radius: 999px;
	transition: background .2s ease, color .2s ease;
}

body .main-navigation .main-nav ul li:hover > a,
body .main-navigation .main-nav ul li:focus-within > a,
body .main-navigation .main-nav ul li.sfHover > a {
	color: var(--nt-accent-dark);
	background: var(--nt-tint);
}

body .main-navigation .main-nav ul li[class*="current-menu-"] > a,
body .main-navigation .main-nav ul li.current_page_item > a {
	color: var(--nt-accent);
	background: var(--nt-tint);
	box-shadow: inset 0 0 0 1px rgba(var(--nt-accent-rgb), .18);
}

/* Flecha de submenú */
body .main-navigation .dropdown-menu-toggle { padding-left: 6px; opacity: .65; }
body .main-navigation .dropdown-menu-toggle .gp-icon svg { width: .8em; height: .8em; }

/* Submenús */
body .main-navigation ul ul {
	min-width: 270px;
	margin-top: 8px;
	padding: 8px;
	background: var(--nt-card);
	border: 1px solid var(--nt-line);
	border-radius: 16px;
	box-shadow: var(--nt-shadow-lg);
}
body .main-navigation .main-nav ul ul li a {
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 10px;
	white-space: normal;
}
body .main-navigation .main-nav ul ul li:hover > a,
body .main-navigation .main-nav ul ul li:focus-within > a {
	background: var(--nt-tint);
	color: var(--nt-accent-dark);
}
body .main-navigation ul ul li[class*="current-menu-"] > a {
	box-shadow: none;
}

/* Puente invisible: evita que el submenú se cierre al bajar el ratón hacia él */
@media (min-width: 769px) {
	body .main-navigation ul ul::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -14px;
		height: 14px;
	}
}

/* Botón de menú móvil */
body .menu-toggle {
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--nt-ink);
	background: var(--nt-tint);
	border: 1px solid rgba(var(--nt-accent-rgb), .22);
	border-radius: 999px;
	cursor: pointer;
}
body .menu-toggle:hover,
body .menu-toggle:focus { color: var(--nt-accent-dark); background: var(--nt-tint); }

/* ==========================================================================
   5. Contenido
   ========================================================================== */
body .site-content {
	max-width: var(--nt-max);
	margin: 0 auto;
	padding: 32px 24px 40px;
	gap: 24px;
	box-sizing: border-box;
}
body .grid-container { max-width: var(--nt-max); }

/* Evita que GeneratePress deje márgenes extra alrededor de la web */
body .site.grid-container,
body #page.grid-container { max-width: 100%; padding: 0; background: transparent; }

body .site-content .inside-article,
body .sidebar .widget {
	background: var(--nt-card);
	border: 1px solid var(--nt-line);
	border-radius: var(--nt-radius);
	box-shadow: var(--nt-shadow);
}
body .site-content .inside-article { padding: 36px 44px; }

.entry-header { margin-bottom: 1.4em; }

.entry-title,
h1.entry-title {
	margin: 0;
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.025em;
	color: var(--nt-ink);
}
.entry-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 5px;
	margin-top: 18px;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--nt-accent), var(--nt-pink));
}
/* Página de inicio: sin título duplicado, el diseño lo da el contenido */
.nt-has-hero .entry-header { display: none; }

.entry-content { color: var(--nt-ink-soft); }
.entry-content p { margin: 0 0 1em; max-width: 78ch; }
.entry-content strong, .entry-content b { color: var(--nt-ink); font-weight: 700; }
/* Enlaces del contenido (v1.2.0): sin subrayado; el título (negrita) en oscuro semibold.
   Al pasar el ratón se marca toda la cita con fondo suave y el título pasa al color de acento. */
.entry-content a strong, .entry-content a b { color: inherit; }
body .entry-content p a:not(.button):not(.wp-block-button__link),
body .entry-content li a {
	color: var(--nt-ink-soft);
	text-decoration: none;
	border-radius: 6px;
	padding: 2px 4px;
	margin: 0 -4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-color .15s ease;
}
body .entry-content p a:not(.button):not(.wp-block-button__link) strong,
body .entry-content p a:not(.button):not(.wp-block-button__link) b,
body .entry-content li a strong, body .entry-content li a b {
	color: var(--nt-ink);
	font-weight: 600;
	text-decoration: none;
}
body .entry-content p a:not(.button):not(.wp-block-button__link):hover,
body .entry-content li a:hover { background-color: var(--nt-tint); }
body .entry-content p a:not(.button):not(.wp-block-button__link):hover strong,
body .entry-content p a:not(.button):not(.wp-block-button__link):hover b,
body .entry-content li a:hover strong, body .entry-content li a:hover b { color: var(--nt-accent); }
/* Sin marco tras hacer clic con el ratón; el contorno de foco queda solo para teclado */
body .entry-content a:focus:not(:focus-visible) { outline: none; }
body .entry-content a:focus-visible { outline: 2px solid var(--nt-accent); outline-offset: 2px; }

/* Primer párrafo de la home como texto destacado */
.home .entry-content > p:first-of-type,
.home .entry-content .wp-block-column > p:first-of-type {
	font-size: var(--nt-fs-lead) !important;
	line-height: 1.5;
	color: var(--nt-ink);
}

h2, h3, h4, h5 {
	color: var(--nt-ink);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
}
.entry-content h2 {
	margin: 1.6em 0 .5em;
	padding-bottom: .35em;
	font-size: 1.6rem;
	border-bottom: 2px solid var(--nt-tint);
}
.entry-content h3 { margin: 1.8em 0 .5em; font-size: 1.28rem; }
.entry-content h4 { margin: 1.5em 0 .4em; font-size: 1.08rem; }

/* Párrafos que son solo un título en negrita ("Title", "Main objective"…)
   (la clase la añade functions.php) */
.entry-content p.nt-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 1.6em 0 .35em;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.entry-content p.nt-label strong { color: var(--nt-accent); font-weight: 800; }
.entry-content p.nt-label::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--nt-accent), var(--nt-pink));
}
.entry-content p.nt-label:first-child { margin-top: 0; }

/* Listas */
.entry-content ul, .entry-content ol { margin: 0 0 1.4em 1.4em; }
.entry-content li { margin-bottom: .45em; padding-left: .2em; }
.entry-content ul li::marker { color: var(--nt-accent); }
.entry-content ol li::marker { color: var(--nt-accent); font-weight: 700; }

/* Imágenes, citas, código */
.entry-content img,
.wp-block-image img {
	height: auto;
	border-radius: 14px;
}
.entry-content figure { margin: 1.8em 0; }
.entry-content figcaption,
.wp-caption-text {
	margin-top: .6em;
	font-size: .86rem;
	color: var(--nt-ink-soft);
	text-align: center;
}

blockquote {
	margin: 1.8em 0;
	padding: 1.1em 1.5em;
	font-style: normal;
	color: var(--nt-ink);
	background: var(--nt-tint);
	border-left: 4px solid var(--nt-accent);
	border-radius: 0 var(--nt-radius-sm) var(--nt-radius-sm) 0;
}
blockquote p:last-child { margin-bottom: 0; }

hr, .wp-block-separator {
	height: 1px;
	margin: 2.4em 0;
	background: var(--nt-line);
	border: 0;
}

code, kbd, pre {
	font-size: .9em;
	background: var(--nt-lilac);
	border-radius: 6px;
}
code, kbd { padding: .15em .4em; }
pre { padding: 1.1em 1.3em; overflow-x: auto; }

/* Tablas (resultados, equipos…) */
.entry-content table,
.wp-block-table table {
	width: 100%;
	margin: 1.8em 0;
	font-size: .94rem;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--nt-line);
	border-radius: 14px;
	overflow: hidden;
}
.entry-content table th {
	padding: 12px 16px;
	font-weight: 700;
	text-align: left;
	color: #fff;
	background: var(--nt-ink);
	border: 0;
}
.entry-content table td {
	padding: 12px 16px;
	background: #fff;
	border: 0;
	border-top: 1px solid var(--nt-line);
}
.entry-content table tbody tr:nth-child(even) td { background: #faf9fd; }
.entry-content table tbody tr:hover td { background: var(--nt-tint); }

/* Tablas de maquetación (una sola fila, sin cabecera: p. ej. texto + logos de la portada):
   sin marco, sin zebra y sin resalte al pasar el ratón */
body .entry-content table:not(:has(th)):has(tbody > tr:only-child),
body .wp-block-table table:not(:has(th)):has(tbody > tr:only-child) {
	margin: 0;
	font-size: inherit;
	table-layout: fixed;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
body .entry-content table:not(:has(th)) tbody tr:only-child td,
body .entry-content table:not(:has(th)) tbody tr:only-child:hover td {
	padding: 0 8px;
	vertical-align: top;
	background: transparent;
	border: 0;
}
body .entry-content .wp-block-column:has(> figure.wp-block-table),
body .entry-content figure.wp-block-table { min-width: 0; max-width: 100%; margin: 0; }
body .entry-content table:not(:has(th)) tbody tr:only-child td img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 16px;
}

/* Columnas de Gutenberg: las columnas simples con imagen/logo (no anidadas, no en portada) se muestran como tarjetas */
.wp-block-columns { gap: 1.75rem; margin-bottom: 1.75rem; }
body:not(.home) .entry-content .wp-block-column:not(:has(.wp-block-column)):has(img) {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--nt-line);
	border-radius: 18px;
	box-shadow: var(--nt-shadow);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body:not(.home) .entry-content .wp-block-column:not(:has(.wp-block-column)):has(img):hover {
	transform: translateY(-3px);
	border-color: var(--nt-pink);
	box-shadow: var(--nt-shadow-lg);
}
body:not(.home) .entry-content .wp-block-column:not(:has(.wp-block-column)):has(img) figure { margin: 0 0 1em; }
body:not(.home) .entry-content .wp-block-column:not(:has(.wp-block-column)):has(img) img { max-height: 150px; width: auto; max-width: 100%; }
body:not(.home) .entry-content .wp-block-column:not(:has(.wp-block-column)):has(img) p { margin-bottom: .4em; word-break: break-word; }

/* Botones y formularios */
body .button,
body button:not(.menu-toggle),
body input[type="submit"],
body input[type="button"],
body .wp-block-button__link {
	display: inline-block;
	padding: 12px 26px;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--nt-accent), var(--nt-accent-dark));
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 24px -10px rgba(var(--nt-accent-rgb), .7);
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
body .button:hover,
body button:not(.menu-toggle):hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body .wp-block-button__link:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -12px rgba(var(--nt-accent-rgb), .75);
}

body input[type="text"],
body input[type="email"],
body input[type="url"],
body input[type="tel"],
body input[type="search"],
body input[type="password"],
body textarea,
body select {
	width: 100%;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--nt-ink);
	background: #fff;
	border: 1px solid #d6d1e6;
	border-radius: 12px;
	box-sizing: border-box;
	transition: border-color .2s ease, box-shadow .2s ease;
}
body input:focus,
body textarea:focus,
body select:focus {
	color: var(--nt-ink);
	background: #fff;
	border-color: var(--nt-accent);
	box-shadow: 0 0 0 4px rgba(var(--nt-pink-rgb), .3);
	outline: 0;
}
label { font-weight: 600; font-size: .92rem; color: var(--nt-ink); }

/* ==========================================================================
   6. Barra lateral (logos del proyecto y ministerios)
   ========================================================================== */
body .sidebar .widget {
	margin-bottom: 24px;
	padding: 24px;
	text-align: center;
}
body .sidebar .widget:last-child { margin-bottom: 0; }
.sidebar .widget img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
.sidebar .widget-title {
	margin-bottom: 1em;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nt-accent);
}
/* Los banners institucionales conservan su aspecto original */
.sidebar .widget .wp-block-image img,
.sidebar .widget p img { border-radius: 8px; }

/* ==========================================================================
   7. Pie de página
   ========================================================================== */
body .site-footer,
body .site-info {
	color: var(--nt-ink-soft);
	font-size: .9rem;
	background: var(--nt-footer);
}
body .site-footer { position: relative; margin-top: 24px; }
body .site-footer::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--nt-bar);
}
body .site-info {
	max-width: var(--nt-max);
	margin: 0 auto;
	padding: 30px 24px;
	text-align: center;
}
body .site-info a,
body .footer-widgets a { color: var(--nt-accent); }
body .site-info a:hover,
body .footer-widgets a:hover { color: var(--nt-accent-dark); }
body .footer-widgets { color: var(--nt-ink-soft); background: var(--nt-footer); }
body .footer-widgets .widget-title { color: var(--nt-ink); }

/* ==========================================================================
   8. Utilidades de WordPress
   ========================================================================== */
.screen-reader-text:focus {
	top: 12px; left: 12px;
	padding: 12px 18px;
	background: #fff;
	color: var(--nt-ink);
	border-radius: 8px;
	box-shadow: var(--nt-shadow-lg);
	z-index: 100000;
}
.alignleft { margin: .3em 1.6em 1em 0; }
.alignright { margin: .3em 0 1em 1.6em; }

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	body .site-content .inside-article { padding: 32px 32px; }
	body .site-content { padding-top: 28px; }
}

@media (max-width: 768px) {
	body { font-size: 16px; }
	:root { --nt-fs-lead: 18px; --nt-fs-figure: 20px; }

	.inside-header { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 8px 16px; }
	.site-logo img.header-image { max-height: 52px; }
	.site-header.is-scrolled .site-logo img.header-image { transform: scale(.88); }

	body .site-header { text-align: left; }
	.inside-header > .site-logo { margin-bottom: 0; }
	body .main-navigation.mobile-menu-control-wrapper { margin-left: auto; width: auto; }
	body .main-navigation .menu-toggle {
		width: auto;
		margin: 0;
		padding: 10px 18px;
		line-height: 1.2;
	}
	body .main-navigation .inside-navigation { width: 100%; }
	body .main-navigation .main-nav { flex: 1 1 100%; }

	/* Menú desplegable a ancho completo */
	body .main-navigation:not(.mobile-menu-control-wrapper) { order: 3; flex: 0 0 100%; }
	body .main-navigation .main-nav > ul {
		display: block;
		padding: 8px 0 12px;
	}
	body .main-navigation .main-nav ul li a {
		padding: 12px 14px;
		border-radius: 10px;
	}
	body .main-navigation ul ul {
		min-width: 0;
		margin: 0 0 4px 12px;
		padding: 0 0 0 8px;
		background: transparent;
		border: 0;
		border-left: 2px solid var(--nt-tint);
		border-radius: 0;
		box-shadow: none;
	}
	body .main-navigation .main-nav ul ul li a { font-size: 14px; }

	body .site-content { padding: 20px 14px 40px; gap: 20px; }
	body .site-content .inside-article { padding: 22px 18px; border-radius: 14px; }
	.entry-content table { display: block; overflow-x: auto; }
	body .sidebar .widget { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
	body::before, .site-header::before, .site-footer::before { display: none; }
	body .site-header { position: static; box-shadow: none; }
	body .site-content .inside-article { box-shadow: none; border: 0; padding: 0; }
}

/* ==========================================================================
   10. Banner superior (portada y páginas) — versión clara
   ========================================================================== */
.nt-hero {
	position: relative;
	overflow: hidden;
	color: var(--nt-ink);
	background:
		radial-gradient(50% 90% at 90% 0%, var(--nt-glow-a), transparent 70%),
		radial-gradient(45% 80% at 5% 100%, var(--nt-glow-b), transparent 70%),
		var(--nt-hero-bg);
	border-bottom: 1px solid var(--nt-line);
}
/* Cuadrícula tenue tipo "datos" */
.nt-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .55;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(42, 33, 80, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(42, 33, 80, .06) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(70% 90% at 70% 10%, #000, transparent 75%);
	mask-image: radial-gradient(70% 90% at 70% 10%, #000, transparent 75%);
}
.nt-hero__inner {
	position: relative;
	max-width: var(--nt-max);
	margin: 0 auto;
	padding: 48px 24px 88px;
	box-sizing: border-box;
}
.nt-hero--page .nt-hero__inner { padding: 32px 24px 68px; }

.nt-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 5px 14px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nt-accent);
	background: rgba(255, 255, 255, .75);
	border: 1px solid rgba(var(--nt-accent-rgb), .22);
	border-radius: 999px;
}
.nt-hero__title {
	max-width: none;
	margin: 0;
	font-size: clamp(1.8rem, 1rem + 2.6vw, 2.6rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.035em;
	color: var(--nt-ink);
}
.nt-hero--page .nt-hero__title {
	max-width: 32ch;
	font-size: clamp(1.7rem, 1rem + 2vw, 2.5rem);
}
.nt-hero__lead {
	max-width: 60ch;
	margin: 14px 0 0;
	font-size: clamp(1rem, .95rem + .35vw, 1.18rem);
	line-height: 1.6;
	color: var(--nt-ink-soft);
}

/* Tarjetas de proyectos */
.nt-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 32px;
}
.nt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px 22px;
	color: var(--nt-ink);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--nt-line);
	border-radius: 22px;
	box-shadow: var(--nt-shadow);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nt-card:hover, .nt-card:focus-visible {
	color: var(--nt-ink);
	transform: translateY(-6px);
	border-color: var(--nt-pink);
	box-shadow: var(--nt-shadow-lg);
}
.nt-card__num {
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--nt-accent);
}
.nt-card__name {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -.02em;
}
.nt-card__code {
	align-self: flex-start;
	padding: 3px 10px;
	font-size: .76rem;
	font-weight: 600;
	color: var(--nt-code-ink);
	background: var(--nt-code-bg);
	border-radius: 999px;
}
.nt-card__text {
	margin-top: 8px;
	font-size: .98rem;
	line-height: 1.55;
	color: var(--nt-ink-soft);
}
.nt-card__go {
	position: absolute;
	right: 22px;
	top: 22px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	font-size: 1.1rem;
	color: var(--nt-go-ink);
	background: var(--nt-go);
	border-radius: 50%;
	transition: transform .25s ease;
}
.nt-card:hover .nt-card__go { transform: translateX(4px) rotate(-45deg); }

/* El contenido "sube" sobre el banner */
body.nt-has-hero .site-content { margin-top: -52px; position: relative; padding-top: 0; }
body.nt-has-hero .site-header::before { background: var(--nt-bar); }

body .site-content .inside-article { border-radius: 24px; }

@media (max-width: 900px) {
	.nt-cards { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
	.nt-hero__inner { padding: 32px 18px 76px; }
	.nt-hero--page .nt-hero__inner { padding: 24px 18px 56px; }
	body.nt-has-hero .site-content { margin-top: -40px; }
}
@media (max-width: 768px) {
	body .main-navigation:not(.mobile-menu-control-wrapper):not(.toggled) { display: none; }
}
@media print { .nt-hero { display: none; } }

/* ==========================================================================
   11. Paletas (se eligen en Apariencia > Personalizar > Immupigen · Diseño)
   La paleta por defecto (violeta) está en :root; el resto cambian las variables.
   ========================================================================== */
body.nt-pal-rosa-claro {
	--nt-accent: #c2307f; --nt-accent-dark: #9c2166; --nt-pink: #e88ac8; --nt-tint: #fdeef7;
	--nt-ink: #2a2150; --nt-ink-soft: #575078;
	--nt-accent-rgb: 194, 48, 127; --nt-pink-rgb: 232, 138, 200;
	--nt-glow-a: rgba(232, 138, 200, .38); --nt-glow-b: rgba(150, 125, 255, .30);
	--nt-hero-bg: linear-gradient(135deg, #f1ebff 0%, #f6efff 50%, #ffeef7 100%); --nt-footer: #ece8f8;
}
body.nt-pal-verde-agro {
	--nt-accent: #0f7a5a; --nt-accent-dark: #0a5c43; --nt-pink: #6fcfa6; --nt-tint: #e6f6ee;
	--nt-ink: #17352b; --nt-ink-soft: #4a6a5e;
	--nt-accent-rgb: 15, 122, 90; --nt-pink-rgb: 111, 207, 166;
	--nt-glow-a: rgba(111, 207, 166, .40); --nt-glow-b: rgba(255, 214, 102, .30);
	--nt-hero-bg: linear-gradient(135deg, #e9f7ef 0%, #f3faf0 55%, #fff7e6 100%); --nt-footer: #e3f1e8;
	--nt-bar: linear-gradient(90deg, #6fcfa6, #0f7a5a, #e0b43a);
}
body.nt-pal-oceano-coral {
	--nt-accent: #0b6fb3; --nt-accent-dark: #084f82; --nt-pink: #7cc0ee; --nt-tint: #e5f2fb;
	--nt-ink: #10304a; --nt-ink-soft: #456179;
	--nt-accent-rgb: 11, 111, 179; --nt-pink-rgb: 124, 192, 238;
	--nt-glow-a: rgba(255, 138, 101, .32); --nt-glow-b: rgba(124, 192, 238, .40);
	--nt-hero-bg: linear-gradient(135deg, #e8f3fc 0%, #f1f8ff 55%, #fff0ea 100%); --nt-footer: #e1eef8;
	--nt-bar: linear-gradient(90deg, #7cc0ee, #0b6fb3, #ff6f4d);
	--nt-go: #ff6f4d;
}
body.nt-pal-terracota {
	--nt-accent: #b4531a; --nt-accent-dark: #8a3d10; --nt-pink: #f0a870; --nt-tint: #fdf0e4;
	--nt-ink: #3a2418; --nt-ink-soft: #6e5547;
	--nt-accent-rgb: 180, 83, 26; --nt-pink-rgb: 240, 168, 112;
	--nt-glow-a: rgba(240, 168, 112, .45); --nt-glow-b: rgba(255, 214, 170, .50);
	--nt-hero-bg: linear-gradient(135deg, #fff4e6 0%, #fff9f0 55%, #fdeee2 100%); --nt-footer: #f6e9dc;
	--nt-bar: linear-gradient(90deg, #f0a870, #b4531a, #7a5a3a);
}
body.nt-pal-medianoche-cian {
	--nt-accent: #0a7ea4; --nt-accent-dark: #075f7d; --nt-pink: #5ad4f5; --nt-tint: #e2f5fb;
	--nt-ink: #10243d; --nt-ink-soft: #475a73;
	--nt-accent-rgb: 10, 126, 164; --nt-pink-rgb: 90, 212, 245;
	--nt-glow-a: rgba(90, 212, 245, .35); --nt-glow-b: rgba(80, 110, 255, .30);
	--nt-hero-bg: linear-gradient(135deg, #0a1126 0%, #0f2140 55%, #12335a 100%); --nt-footer: #e3eef5;
	--nt-bar: linear-gradient(90deg, #5ad4f5, #0a7ea4, #4f6bff);
}
body.nt-pal-grafito-lima {
	--nt-accent: #1f2937; --nt-accent-dark: #111827; --nt-pink: #a3e635; --nt-tint: #f1f5e9;
	--nt-ink: #111827; --nt-ink-soft: #4b5563;
	--nt-accent-rgb: 31, 41, 55; --nt-pink-rgb: 163, 230, 53;
	--nt-glow-a: rgba(163, 230, 53, .30); --nt-glow-b: rgba(163, 230, 53, 0);
	--nt-hero-bg: linear-gradient(135deg, #f4f4f5 0%, #fafafa 55%, #f1f5e9 100%); --nt-footer: #eceff1;
	--nt-bar: linear-gradient(90deg, #a3e635, #1f2937);
	--nt-go: #a3e635;
	--nt-go-ink: #111827;
	--nt-code-ink: #3f6212;
}
.nt-pal-grafito-lima .nt-eyebrow { color: #111827; }
.nt-pal-grafito-lima .nt-card__num { color: #4d7c0f; }
body.nt-pal-violeta-menta {
	--nt-accent: #5b3fd6; --nt-accent-dark: #4328b0; --nt-pink: #8fe3c8; --nt-tint: #eaf9f3;
	--nt-ink: #2a2150; --nt-ink-soft: #575078;
	--nt-accent-rgb: 91, 63, 214; --nt-pink-rgb: 143, 227, 200;
	--nt-glow-a: rgba(143, 227, 200, .55); --nt-glow-b: rgba(150, 125, 255, .40);
	--nt-hero-bg: linear-gradient(135deg, #efeaff 0%, #f4f2ff 50%, #e6fbf4 100%); --nt-footer: #e9e6f8;
	--nt-bar: linear-gradient(90deg, #8fe3c8, #5b3fd6);
	--nt-go: linear-gradient(135deg, #5b3fd6, #2dbd96);
	--nt-code-bg: #eaf9f3;
	--nt-code-ink: #1d6f58;
}
body.nt-pal-oscuro-rosa {
	--nt-accent: #c2307f; --nt-accent-dark: #9c2166; --nt-pink: #e88ac8; --nt-tint: #fdeef7;
	--nt-ink: #2a2150; --nt-ink-soft: #575078;
	--nt-accent-rgb: 194, 48, 127; --nt-pink-rgb: 232, 138, 200;
	--nt-glow-a: rgba(232, 138, 200, .55); --nt-glow-b: rgba(122, 92, 255, .35);
	--nt-hero-bg: linear-gradient(135deg, #120d24 0%, #1f1445 55%, #2b1252 100%); --nt-footer: #ece8f8;
}

/* Paletas con banner oscuro */
body.nt-dark .nt-hero { color: #fff; border-bottom: 0; }
body.nt-dark .nt-hero::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}
body.nt-dark .nt-hero__title { color: #fff; }
body.nt-dark .nt-hero__lead { color: #d6dcf2; }
body.nt-dark .nt-eyebrow {
	color: var(--nt-pink);
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .18);
}
body.nt-dark .nt-card {
	color: #fff;
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
	box-shadow: none;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
body.nt-dark .nt-card:hover, body.nt-dark .nt-card:focus-visible { color: #fff; background: rgba(255, 255, 255, .13); }
body.nt-dark .nt-card__num { color: var(--nt-pink); }
body.nt-dark .nt-card__text { color: #d6dcf2; }
body.nt-dark .nt-card__code { color: #fff; background: rgba(255, 255, 255, .12); }
body.nt-dark .nt-card__go { color: #10162e; background: var(--nt-pink); }

/* 12. Proyectos de la portada (bloques "nt-projects" > "nt-project") */
.entry-content .nt-projects { counter-reset: nt-project; margin: 0; }
.entry-content .nt-project {
	display: grid;
	grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 44px;
	padding: 30px 0;
	border-top: 1px solid var(--nt-line);
}
.entry-content .nt-project:first-child { border-top: 0; padding-top: 6px; }
.entry-content .nt-project h3 {
	grid-column: 1; grid-row: 1;
	margin: 0 0 8px;
	font-size: 1.55rem;
	line-height: 1.15;
	letter-spacing: -.01em;
}
.entry-content .nt-project h3::before {
	counter-increment: nt-project;
	content: "0" counter(nt-project);
	display: block;
	margin-bottom: 10px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--nt-accent);
}
.entry-content .nt-project .nt-project__code {
	grid-column: 1; grid-row: 2; align-self: start;
	justify-self: start;
	margin: 0;
	padding: 4px 12px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--nt-accent-dark);
	background: var(--nt-tint);
	border-radius: 999px;
}
.entry-content .nt-project .nt-project__body { grid-column: 2; grid-row: 1 / span 2; max-width: 68ch; }
.entry-content .nt-project .nt-project__body p { margin: 0 0 1em; }
.entry-content .nt-project .nt-project__body p:last-child { margin-bottom: 0; }

.entry-content .nt-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px 44px;
	margin-top: 10px;
	padding: 26px 0 4px;
	border-top: 1px solid var(--nt-line);
}
.entry-content .nt-logos img { height: 64px; width: auto; max-width: 100%; margin: 0; }

@media (max-width: 768px) {
	.entry-content .nt-project { display: block; padding: 24px 0; }
	.entry-content .nt-project h3 { margin-bottom: 8px; }
	.entry-content .nt-project .nt-project__code { display: inline-block; margin-bottom: 14px; }
	.entry-content .nt-logos img { height: 52px; }
}

/* ==========================================================================
   13. Utilidades tipográficas (escala única)
   ========================================================================== */
.nt-lead { font-size: var(--nt-fs-lead); line-height: 1.5; color: var(--nt-ink); }
.nt-small { font-size: var(--nt-fs-small); }
.nt-kicker {
	margin: 0 0 10px;
	font-size: var(--nt-fs-label);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nt-accent);
}

/* ==========================================================================
   14. Página de contacto (bloque HTML con clases "ct")
   ========================================================================== */
.ct { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px 40px; align-items: stretch; margin: 4px 0; }
.ct .ct__lead { margin: 0 0 18px; font-size: var(--nt-fs-lead); line-height: 1.5; color: var(--nt-ink); }
.ct .ct__row { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 14px; line-height: 1.5; }
.ct .ct__ico { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--nt-tint); color: var(--nt-accent); }
.ct .ct__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct .ct__row span.t { padding-top: 7px; }
.ct .ct__col { display: flex; flex-direction: column; gap: 6px; }
.ct .ct__side {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px;
	padding: 28px; border-radius: 18px; background: var(--nt-tint); border: 1px solid var(--nt-line);
	text-decoration: none;
}
.ct .ct__col .ct__side { flex: 1 1 auto; }
/* Tarjeta con mapa de fondo: <a class="ct__side" style="--ct-map:url(...)"> */
.ct .ct__side[style*="--ct-map"] {
	position: relative; overflow: hidden; min-height: 260px; justify-content: flex-end; border: 0;
	background: linear-gradient(180deg, rgba(18, 13, 36, 0) 55%, rgba(18, 13, 36, .45) 100%), var(--ct-map) center / cover no-repeat;
}
.ct .ct__btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px;
	background: var(--nt-accent); color: #fff !important; font-weight: 600; text-decoration: none !important; margin: 0 !important;
}
.ct .ct__side .ct__btn { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.ct .ct__side:hover .ct__btn { background: var(--nt-accent-dark); }
.ct .ct__credit { margin: 0 !important; font-size: var(--nt-fs-label); line-height: 1.3; text-align: right; color: var(--nt-ink-soft); }
.ct .ct__credit a { color: inherit; }
/* Normaliza páginas que aún llevan su propio <style> */
body .entry-content .ct .ct__lead { font-size: var(--nt-fs-lead); }
body .entry-content .ct .ct__credit { font-size: var(--nt-fs-label); }
@media (max-width: 781px) { .ct { grid-template-columns: 1fr; } }

/* ==========================================================================
   15. Research Teams (bloque HTML con clases "tm")
   ========================================================================== */
.tm { display: grid; gap: 8px; }
.tm .tm__intro { margin: 0 0 20px; font-size: var(--nt-fs-lead); line-height: 1.5; color: var(--nt-ink); }
.tm .tm__sec { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); gap: 20px 48px; padding: 32px 0; border-top: 1px solid var(--nt-line); }
.tm .tm__id { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tm .tm__h { margin: 0; line-height: 1.15; }
.tm .tm__url { margin: 0; font-size: var(--nt-fs-small); overflow-wrap: anywhere; }
.tm .tm__logo { border-radius: 0; display: block; width: 150px; max-width: 100%; height: auto; margin-top: 4px; }
.tm .tm__body { display: grid; gap: 26px; min-width: 0; }
.tm .tm__body p { margin: 0; line-height: 1.65; }
.tm .tm__lead { color: var(--nt-ink); }
.tm .tm__lbl { margin: 0 0 10px; font-size: var(--nt-fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nt-accent); }
.tm .tm__list { margin: 0 !important; padding: 0 !important; list-style: none; }
.tm .tm__list li { position: relative; margin: 0 0 10px; padding-left: 26px; line-height: 1.55; }
.tm .tm__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--nt-pink); }
.tm .tm__prog { display: grid; gap: 12px; padding-left: 22px; border-left: 3px solid var(--nt-pink); max-width: 80ch; }
.tm .tm__prog .tm__lbl { margin: 0; }
@media (max-width: 781px) { .tm .tm__sec { grid-template-columns: 1fr; padding: 24px 0; } .tm .tm__logo { width: 110px; } }

/* ==========================================================================
   16. Páginas de proyecto (bloque HTML con clases "pj")
   ========================================================================== */
.pj { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px 40px; align-items: start; }
.pj p { margin: 0; }
.pj .pj__lbl { margin: 0 0 10px; font-size: var(--nt-fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nt-accent); }
.pj .pj__title { grid-column: 1; grid-row: 1; }
.pj .pj__title p:not(.pj__lbl) { font-size: var(--nt-fs-lead); line-height: 1.5; color: var(--nt-ink); }
.pj .pj__subs { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pj .pj__card { padding: 18px 20px; border: 1px solid var(--nt-line); border-radius: 16px; background: #fff; line-height: 1.55; }
.pj .pj__card strong { display: block; margin-bottom: 6px; color: var(--nt-accent); }
.pj .pj__facts { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 10px; padding: 22px 24px; border-radius: 18px; background: var(--nt-tint); border: 1px solid var(--nt-line); }
.pj .pj__facts p:not(.pj__lbl) { line-height: 1.5; }
.pj .pj__facts .pj__money { font-size: var(--nt-fs-figure); font-weight: 700; color: var(--nt-ink); line-height: 1.2; }
.pj .pj__facts .pj__money span { display: block; font-size: var(--nt-fs-small); font-weight: 500; color: var(--nt-ink-soft); }
.pj .pj__wide { grid-column: 1 / -1; display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--nt-line); }
.pj .pj__wide p:not(.pj__lbl) { line-height: 1.65; max-width: 90ch; }
.pj .pj__wide .pj__lead { color: var(--nt-ink); }
.pj .pj__teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pj .pj__team { display: grid; gap: 4px; align-content: start; padding: 18px 20px; border: 1px solid var(--nt-line); border-radius: 16px; background: #fff; }
.pj .pj__team h4 { margin: 0 0 6px; color: var(--nt-ink); }
.pj .pj__team p { line-height: 1.45 !important; max-width: none !important; padding-left: 14px; position: relative; }
.pj .pj__team p::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--nt-pink); }
.pj .pj__team--full { grid-column: 1 / -1; }
@media (max-width: 900px) {
	.pj { grid-template-columns: 1fr; }
	.pj .pj__title, .pj .pj__subs, .pj .pj__facts { grid-column: 1; grid-row: auto; }
	.pj .pj__subs, .pj .pj__teams { grid-template-columns: 1fr; }
	.pj .pj__team--full { grid-column: auto; }
}

/* ==========================================================================
   17. Tablas de logos (p. ej. Proyectos relacionados): logos al mismo tamaño y centrados
   ========================================================================== */
.entry-content .wp-block-table td:has(> img) { height: 130px; text-align: center; vertical-align: middle; }
.entry-content .wp-block-table td > img {
	display: block;
	width: auto !important;
	height: auto;
	max-width: min(80%, 220px);
	max-height: 90px;
	margin: 0 auto;
	border-radius: 0;
	object-fit: contain;
}
.entry-content .wp-block-table tr:has(> td > img) + tr > td { vertical-align: top; text-align: left; }