/*
 * Estructura del tema. Aqui no hay ni un solo color literal: todo sale de las
 * variables que inc/css.php imprime en <head> a partir de los ajustes REST.
 * Asi el mismo CSS estatico sirve para todos los temas y sus skins.
 */

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

body {
	margin: 0;
	background-color: var(--jnx-page);
	color: var(--jnx-text);
	font-family: var(--jnx-font-body);
	font-weight: var(--jnx-body-weight);
	font-size: var(--jnx-base);
	line-height: var(--jnx-leading);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/*
 * Iframes: solo se limita el ancho, NUNCA el alto. Antes llevaban tambien
 * "height: auto", y un iframe con alto automatico mide 150px: los anuncios de
 * Ad Manager / AdSense (iframe width=336 height=280) se veian cortados a menos de
 * la mitad. Los videos incrustados ya los dimensiona WordPress (responsive-embeds).
 */
iframe { max-width: 100%; }

/* Dentro de un anuncio no se toca nada: el creativo tiene un tamano fijo. */
:is(.code-block, ins.adsbygoogle, [id^="div-gpt-ad"], [id^="google_ads_iframe"]) iframe {
	max-width: none !important;
}

/* Red de seguridad: nada puede provocar scroll horizontal en la pagina. */
.jnx-site { overflow-x: clip; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--jnx-font-heading);
	font-weight: var(--jnx-heading-weight);
	letter-spacing: var(--jnx-heading-spacing);
	color: var(--jnx-heading);
	line-height: 1.22;
	margin: 0 0 .6em;
}

h1 { font-size: var(--jnx-h1); }
h2 { font-size: var(--jnx-h2); }
h3 { font-size: var(--jnx-h3); }
h4 { font-size: var(--jnx-h4); }
h5 { font-size: var(--jnx-h5); }
h6 { font-size: var(--jnx-h6); }

p { margin: 0 0 1.35em; }

a {
	color: var(--jnx-accent);
	text-decoration-color: color-mix(in srgb, var(--jnx-accent) 35%, transparent);
	text-underline-offset: .18em;
}

a:hover { color: var(--jnx-accent-dark); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--jnx-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

hr {
	border: 0;
	border-top: 1px solid var(--jnx-border);
	margin: 2.4em 0;
}

blockquote {
	margin: 1.8em 0;
	padding: .2em 0 .2em 1.3em;
	border-left: 4px solid var(--jnx-accent);
	color: var(--jnx-heading);
	font-size: 1.06em;
}

code, kbd, pre {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: .92em;
}

code {
	background-color: var(--jnx-tint);
	padding: .12em .38em;
	border-radius: 4px;
}

pre {
	background-color: var(--jnx-deep);
	color: var(--jnx-on-deep);
	padding: 1.1em 1.3em;
	border-radius: var(--jnx-radius-sm);
	overflow-x: auto;
}

pre code { background: none; padding: 0; color: inherit; }

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.6em;
	font-size: .96em;
}

th, td {
	border: 1px solid var(--jnx-border);
	padding: .68em .85em;
	text-align: left;
}

th {
	background-color: var(--jnx-tint);
	color: var(--jnx-heading);
	font-family: var(--jnx-font-heading);
}

ul, ol { padding-left: 1.4em; }
li { margin-bottom: .45em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background-color: var(--jnx-accent);
	color: var(--jnx-on-accent);
	padding: .7em 1.2em;
	border-radius: 0 0 var(--jnx-radius-sm) 0;
}

.skip-link:focus { left: 0; color: var(--jnx-on-accent); }

/* ------------------------------------------------------------ contenedor --- */
.jnx-container {
	width: 100%;
	max-width: var(--jnx-container);
	margin-inline: auto;
	padding-inline: var(--jnx-gutter);
}

.jnx-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.jnx-content {
	flex: 1 0 auto;
	padding-block: var(--jnx-section-pad);
}

.jnx-layout {
	display: grid;
	gap: var(--jnx-gap-lg);
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}


/* En "boxed" cada bloque es una tarjeta; en "plain" el fondo es continuo. */
.jnx-box {
	background-color: var(--jnx-surface);
	border: var(--jnx-border-width) solid var(--jnx-border);
	border-radius: var(--jnx-radius);
	box-shadow: var(--jnx-shadow);
}

.jnx-style-plain .jnx-box,
.jnx-style-wide .jnx-box {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

.jnx-style-plain { --jnx-page: var(--jnx-surface); }

/* ---------------------------------------------------------------- header --- */
/*
 * La cabecera se arma con tres ZONAS (izquierda, centro, derecha) en cada fila.
 * PHP coloca la marca, el menu y las utilidades en la zona que pidan los ajustes
 * (header.branding_align y header.menu_align), asi que cualquier combinacion
 * -logo a la izquierda y menu al centro, logo centrado con el menu debajo, menu
 * arriba y logo abajo...- sale del mismo marcado sin plantillas extra.
 */
.jnx-header {
	background-color: var(--jnx-header-bg);
	color: var(--jnx-header-fg);
	position: relative;
	z-index: 90;
}

.jnx-divider-line .jnx-header { border-bottom: 1px solid var(--jnx-header-border); }
.jnx-divider-thick .jnx-header { border-bottom: 3px solid var(--jnx-accent); }
.jnx-divider-shadow .jnx-header { box-shadow: 0 2px 16px rgba(15, 23, 42, .09); }

.jnx-header--sticky {
	position: sticky;
	top: 0;
}

.admin-bar .jnx-header--sticky { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .jnx-header--sticky { top: 46px; }
}

@media (max-width: 600px) {
	.admin-bar .jnx-header--sticky { top: 0; }
}

.jnx-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--jnx-header-h-d);
	padding-block: .6rem;
}

/*
 * Con algo en el centro, rejilla de tres columnas para que quede centrado de
 * verdad. Los laterales nunca bajan de su contenido minimo: si la marca es ancha
 * el centro se desplaza un poco, pero nada se monta encima de nada.
 */
.jnx-header__row--center {
	display: grid;
	grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
}

.jnx-zone {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-width: 0;
}

.jnx-zone--left { justify-content: flex-start; grid-column: 1; }
.jnx-zone--center { justify-content: center; grid-column: 2; }
.jnx-zone--right { justify-content: flex-end; grid-column: 3; margin-left: auto; }

.jnx-header__row--center .jnx-zone--right { margin-left: 0; }

/*
 * En una fila sin centro, el menu tiene prioridad: su zona no se encoge (hasta
 * un 70% del ancho) y lo que se ajusta es el texto de la marca. Sin esto, un
 * tagline largo empujaba el menu a dos lineas.
 */
.jnx-header__row:not(.jnx-header__row--center) .jnx-zone--has-nav {
	flex: 0 0 auto;
	max-width: 70%;
}

.jnx-header__row:not(.jnx-header__row--center) .jnx-zone:not(.jnx-zone--has-nav) { flex: 0 1 auto; }

/* -------------------------------------------------------------- marca --- */
.jnx-branding {
	display: flex;
	align-items: center;
	gap: .8rem;
	min-width: 0;
}

.jnx-branding--logo-right { flex-direction: row-reverse; text-align: right; }

.jnx-branding--logo-top {
	flex-direction: column;
	align-items: flex-start;
	gap: .45rem;
}

.jnx-balign-center .jnx-branding--logo-top { align-items: center; text-align: center; }
.jnx-balign-right .jnx-branding--logo-top { align-items: flex-end; text-align: right; }
.jnx-balign-center .jnx-header__row .jnx-branding { text-align: center; }
.jnx-balign-right .jnx-header__row .jnx-branding:not(.jnx-branding--logo-top) { text-align: right; }

.jnx-branding__logo {
	flex: 0 0 auto;
	line-height: 0;
}

.jnx-branding__logo a { display: inline-block; max-width: 100%; }

/*
 * El logo se dimensiona por ALTURA y el ancho sale solo de su proporcion. Antes
 * se metia en un cuadrado de logo_size x logo_size con object-fit, asi que un
 * logo apaisado (lo normal: icono + nombre) quedaba reducido a una tira de 10px.
 */
/* Un solo selector de baja especificidad: los tamanos por dispositivo del CSS
   generado (mismo selector, dentro de media queries) tienen que poder pisarlo. */
.jnx-branding__logo img {
	display: block;
	width: auto;
	height: var(--jnx-logo-h-d);
	max-width: var(--jnx-logo-max-d);
	object-fit: contain;
	object-position: left center;
	border-radius: var(--jnx-logo-radius);
}

.jnx-balign-center .jnx-branding__logo img { object-position: center; }
.jnx-balign-right .jnx-branding__logo img { object-position: right center; }

.jnx-branding__text { flex: 1 1 auto; min-width: 0; }

/* Junto a un logo ancho, el texto conserva una medida legible. */
@media (min-width: 545px) {
	.jnx-branding__logo + .jnx-branding__text { min-width: min(14rem, 24vw); }
}

/* En moviles el logo si puede encogerse, para dejar sitio al boton del menu. */
@media (max-width: 544px) {
	.jnx-branding__logo { flex: 0 1 auto; min-width: 0; }
	.jnx-branding__logo img { max-width: 100%; }
}

.jnx-site-title {
	margin: 0;
	font-family: var(--jnx-font-heading);
	font-size: var(--jnx-title-d);
	font-weight: var(--jnx-heading-weight);
	letter-spacing: var(--jnx-heading-spacing);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.jnx-site-title a {
	color: var(--jnx-header-fg);
	text-decoration: none;
}

.jnx-tagline {
	margin: .2rem 0 0;
	font-size: var(--jnx-tagline-size);
	line-height: 1.4;
	color: var(--jnx-header-muted);
	max-width: 52ch;
}

.jnx-balign-center .jnx-tagline { margin-inline: auto; }
.jnx-balign-right .jnx-tagline { margin-left: auto; }

/* ----------------------------------------------------------- utilidades --- */
.jnx-header__tools {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
}

.jnx-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--jnx-header-border);
	border-radius: var(--jnx-radius-sm);
	color: var(--jnx-header-fg);
	cursor: pointer;
}

.jnx-search-toggle:hover,
.jnx-search-toggle[aria-expanded="true"] {
	background-color: var(--jnx-header-hover-bg);
	color: var(--jnx-header-fg);
}

.jnx-search-toggle svg { width: 19px; height: 19px; display: block; }

.jnx-search-drop {
	background-color: var(--jnx-header-bg);
	border-top: 1px solid var(--jnx-header-border);
	padding-block: 1rem;
}

.jnx-search-drop[hidden] { display: none; }

.jnx-search-drop .jnx-search {
	max-width: 680px;
	margin-inline: auto;
}

.jnx-search-drop input[type="search"],
.jnx-header__search-form .jnx-search input[type="search"] {
	background-color: var(--jnx-header-hover-bg);
	border-color: var(--jnx-header-border);
	color: var(--jnx-header-fg);
}

.jnx-search-drop input[type="search"]::placeholder,
.jnx-header__search-form input[type="search"]::placeholder {
	color: var(--jnx-header-fg);
	opacity: .6;
}

.jnx-header__search-form .jnx-search input[type="search"] { min-width: 190px; }

/* Buscador en linea: que no compita con el menu en pantallas medias. */
@media (max-width: 1080px) {
	.jnx-header__search-form { display: none; }
	.jnx-search-toggle--mobile { display: inline-flex !important; }
}

.jnx-search-toggle--mobile { display: none; }

/* --------------------------------------------- fila del menu (2 filas) --- */
/*
 * La fila del menu puede tener su propio estilo (header.bar_style). En vez de
 * duplicar reglas, se redefinen aqui las variables de la cabecera: todo lo que
 * hay dentro (enlaces, hover, pastilla) hereda los colores de la fila.
 */
.jnx-header__bar {
	--jnx-header-bg: var(--jnx-bar-bg);
	--jnx-header-fg: var(--jnx-bar-fg);
	--jnx-header-muted: var(--jnx-bar-muted);
	--jnx-header-border: var(--jnx-bar-border);
	--jnx-header-hover-bg: var(--jnx-bar-hover-bg);
	--jnx-header-active: var(--jnx-bar-active);
	--jnx-header-pill: var(--jnx-bar-pill);
	--jnx-header-pill-fg: var(--jnx-bar-pill-fg);
	background-color: var(--jnx-header-bg);
	color: var(--jnx-header-fg);
	border-top: 1px solid var(--jnx-header-border);
}

.jnx-header--stacked-reverse .jnx-header__bar {
	border-top: 0;
	border-bottom: 1px solid var(--jnx-header-border);
}

.jnx-header__bar .jnx-header__nav {
	display: flex;
	align-items: center;
	min-height: var(--jnx-bar-h);
}

.jnx-header__bar .jnx-nav { width: 100%; }

.jnx-header__bar .jnx-nav > .jnx-nav__list {
	flex-wrap: wrap;
	padding-block: .3rem;
}

.jnx-header__bar--left .jnx-nav > .jnx-nav__list { justify-content: flex-start; }
.jnx-header__bar--center .jnx-nav > .jnx-nav__list { justify-content: center; }
.jnx-header__bar--right .jnx-nav > .jnx-nav__list { justify-content: flex-end; }

/* Marca centrada en dos filas: aire de cabecera de revista. */
.jnx-header--stacked.jnx-balign-center .jnx-header__row,
.jnx-header--stacked-reverse.jnx-balign-center .jnx-header__row { padding-block: 1.2rem; }


/* ------------------------------------------------------------ navegacion --- */
.jnx-nav__list,
.jnx-nav__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jnx-nav > .jnx-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jnx-nav-gap);
}

/* Un elemento del menu nunca se parte en dos lineas; si no cabe, baja entero. */
.jnx-header .jnx-nav > .jnx-nav__list > li > a { white-space: nowrap; }

.jnx-zone--right .jnx-nav > .jnx-nav__list { justify-content: flex-end; }
.jnx-zone--center .jnx-nav > .jnx-nav__list { justify-content: center; }

.jnx-nav__list li { margin: 0; position: relative; }

.jnx-nav__list a {
	display: block;
	padding: var(--jnx-nav-pad);
	color: var(--jnx-header-fg);
	font-family: var(--jnx-font-heading);
	font-size: var(--jnx-nav-size);
	font-weight: var(--jnx-nav-weight);
	letter-spacing: var(--jnx-nav-spacing);
	text-transform: var(--jnx-nav-transform);
	text-decoration: none;
	border-radius: var(--jnx-radius-sm);
	transition: color .15s ease, background-color .15s ease;
}

.jnx-nav__list a:hover,
.jnx-nav__list .current-menu-item > a,
.jnx-nav__list .current_page_item > a {
	color: var(--jnx-header-active);
	background-color: var(--jnx-header-hover-bg);
}

/* Submenus en escritorio */
.jnx-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background-color: var(--jnx-surface);
	border: 1px solid var(--jnx-border);
	border-radius: var(--jnx-radius-sm);
	box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
	padding: .35rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 95;
}

.jnx-nav__list .sub-menu .sub-menu { top: -.35rem; left: 100%; }

.jnx-nav__list li:hover > .sub-menu,
.jnx-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.jnx-nav__list .sub-menu a {
	color: var(--jnx-text);
	padding: .55rem .75rem;
	text-transform: none;
	letter-spacing: normal;
}

.jnx-nav__list .sub-menu a:hover {
	color: var(--jnx-accent);
	background-color: var(--jnx-tint);
}

/* Boton hamburguesa */
.jnx-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 44px;
	min-width: 44px;
	background: none;
	border: 1px solid var(--jnx-header-border);
	border-radius: var(--jnx-radius-sm);
	color: var(--jnx-header-fg);
	font: inherit;
	font-size: .9rem;
	padding: .5rem .7rem;
	cursor: pointer;
	line-height: 1;
}

.jnx-toggle:hover {
	background-color: var(--jnx-header-hover-bg);
	color: var(--jnx-header-fg);
}

.jnx-toggle__bars {
	display: block;
	position: relative;
	width: 18px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
}

.jnx-toggle__bars::before,
.jnx-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, top .2s ease;
}

.jnx-toggle__bars::before { top: -6px; }
.jnx-toggle__bars::after { top: 6px; }

/*
 * Panel movil (off-canvas). El fondo se fija en TODOS los contenedores del panel
 * a proposito: el fallo clasico es pintar solo el envoltorio y dejar las filas
 * del menu claras con el texto en blanco, que es como se vuelve ilegible.
 */
.jnx-panel {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
}

.jnx-panel.is-open { display: block; }

.jnx-panel__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(8, 13, 22, .55);
	opacity: 0;
	transition: opacity .25s ease;
}

.jnx-panel.is-open .jnx-panel__scrim { opacity: 1; }

.jnx-panel__inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(88vw, 360px);
	background-color: var(--jnx-panel-bg);
	color: var(--jnx-panel-fg);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.22, .61, .36, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.jnx-panel.is-open .jnx-panel__inner { transform: translateX(0); }

.jnx-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background-color: var(--jnx-panel-bg);
	border-bottom: 1px solid var(--jnx-panel-line);
}

.jnx-panel__title {
	font-family: var(--jnx-font-heading);
	font-weight: var(--jnx-heading-weight);
	font-size: 1rem;
	color: var(--jnx-panel-fg);
}

.jnx-panel__close {
	background: none;
	border: 1px solid var(--jnx-panel-line);
	border-radius: var(--jnx-radius-sm);
	color: var(--jnx-panel-fg);
	width: 34px;
	height: 34px;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.jnx-panel__body {
	padding: .75rem 1.25rem 2rem;
	background-color: var(--jnx-panel-bg);
	flex: 1 0 auto;
}

.jnx-panel .jnx-nav__list,
.jnx-panel .jnx-nav__list li,
.jnx-panel .jnx-nav__list .sub-menu {
	background-color: var(--jnx-panel-bg);
}

.jnx-panel .jnx-nav > .jnx-nav__list {
	display: block;
}

.jnx-panel .jnx-nav__list a {
	color: var(--jnx-panel-fg);
	background-color: var(--jnx-panel-bg);
	padding: .85rem .25rem;
	border-bottom: 1px solid var(--jnx-panel-line);
	border-radius: 0;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: normal;
}

.jnx-panel .jnx-nav__list a:hover,
.jnx-panel .jnx-nav__list .current-menu-item > a {
	color: var(--jnx-panel-active);
	background-color: var(--jnx-panel-hover);
}

.jnx-panel .jnx-nav__list .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 0;
	box-shadow: none;
	padding: 0 0 0 1rem;
	min-width: 0;
}

.jnx-panel__search { margin-bottom: 1rem; }

body.jnx-panel-open { overflow: hidden; }

/* ------------------------------------------------------------- buscador --- */
.jnx-search {
	display: flex;
	gap: .4rem;
}

.jnx-search input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
	width: 100%;
	background-color: var(--jnx-surface);
	border: 1px solid var(--jnx-border);
	border-radius: var(--jnx-radius-sm);
	color: var(--jnx-text);
	font: inherit;
	font-size: .95rem;
	padding: .68em .85em;
}

textarea { min-height: 160px; }

.jnx-btn,
button:where(:not([class*="jnx-"])),
input[type="submit"],
.wp-block-search__button,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	background-color: var(--jnx-accent);
	color: var(--jnx-on-accent);
	border: 0;
	border-radius: var(--jnx-btn-radius);
	font-family: var(--jnx-font-heading);
	font-size: .93rem;
	font-weight: 600;
	letter-spacing: .01em;
	padding: .72em 1.25em;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}

.jnx-btn:hover,
button:where(:not([class*="jnx-"])):hover,
input[type="submit"]:hover,
.wp-block-search__button:hover {
	background-color: var(--jnx-accent-dark);
	color: var(--jnx-on-accent);
}

/* ------------------------------------------------------- listado de blog --- */
/*
 * La columna se limita al ancho disponible (minmax(0, 1fr)). Sin esto, un bloque
 * de anuncio de ancho fijo (728x90 en un movil) estiraba la columna entera y
 * aparecia scroll horizontal en toda la pagina.
 */
.jnx-loop { display: grid; gap: var(--jnx-gap-lg); grid-template-columns: minmax(0, 1fr); }

.jnx-loop--grid {
	grid-template-columns: repeat(var(--jnx-cols, 1), minmax(0, 1fr));
}

@media (max-width: 767px) {
	.jnx-loop--grid { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Los plugins de anuncios insertan sus bloques dentro del bucle, entre los
 * <article>. En rejilla eso les daria una celda propia y descuadraria las
 * columnas, asi que se les hace ocupar la fila entera.
 */
.jnx-loop--grid > *:not(article) { grid-column: 1 / -1; }

.jnx-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.jnx-card__thumb {
	display: block;
	position: relative;
	overflow: hidden;
	background-color: var(--jnx-tint);
	aspect-ratio: var(--jnx-thumb-ratio);
}

.jnx-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.jnx-card:hover .jnx-card__thumb img { transform: scale(1.035); }

.jnx-card__body { padding: var(--jnx-card-pad); }

.jnx-style-plain .jnx-card__body,
.jnx-style-wide .jnx-card__body { padding-inline: 0; }

.jnx-card__title {
	font-size: var(--jnx-card-title);
	margin: 0 0 .5rem;
	line-height: 1.24;
}

.jnx-card__title a {
	color: var(--jnx-heading);
	text-decoration: none;
}

.jnx-card__title a:hover { color: var(--jnx-accent); }

.jnx-card__excerpt { margin-bottom: 1.1rem; }

.jnx-card__excerpt p:last-child { margin-bottom: 0; }

/* Variante "list": miniatura a la izquierda. */
@media (min-width: 600px) {
	.jnx-card--list { flex-direction: row; align-items: stretch; }
	.jnx-card--list .jnx-card__thumb { flex: 0 0 38%; aspect-ratio: auto; }
	.jnx-card--list .jnx-card__body { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ meta --- */
.jnx-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem .7rem;
	margin: 0 0 .75rem;
	font-family: var(--jnx-font-heading);
	font-size: var(--jnx-meta-size);
	font-weight: 600;
	letter-spacing: var(--jnx-meta-spacing);
	text-transform: var(--jnx-meta-transform);
	color: var(--jnx-muted);
}

.jnx-meta a { color: var(--jnx-muted); text-decoration: none; }
.jnx-meta a:hover { color: var(--jnx-accent); }
.jnx-meta__sep { opacity: .5; }

.jnx-terms {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: .7rem;
}

.jnx-terms a {
	display: inline-block;
	background-color: var(--jnx-tint);
	color: var(--jnx-accent-dark);
	font-family: var(--jnx-font-heading);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: .35em .7em;
	border-radius: var(--jnx-tag-radius);
}

.jnx-terms a:hover {
	background-color: var(--jnx-accent);
	color: var(--jnx-on-accent);
}

.jnx-readmore {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-family: var(--jnx-font-heading);
	font-size: .9rem;
	font-weight: 700;
	color: var(--jnx-accent);
	text-decoration: none;
}

.jnx-readmore:hover { gap: .6em; }

/* ------------------------------------------- tratamientos de titulo (skin) --- */
.jnx-heading { position: relative; }

.jnx-heading--bar { padding-left: .8rem; }

.jnx-heading--bar::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	bottom: .18em;
	width: 4px;
	border-radius: 4px;
	background-color: var(--jnx-accent);
}

.jnx-heading--underline { padding-bottom: .4rem; }

.jnx-heading--underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.6rem;
	height: 3px;
	border-radius: 3px;
	background-color: var(--jnx-accent);
}

.jnx-heading--dot::after {
	content: "";
	display: inline-block;
	width: .38em;
	height: .38em;
	margin-left: .28em;
	border-radius: 50%;
	background-color: var(--jnx-accent);
	vertical-align: baseline;
}

.jnx-heading--bracket::before {
	content: "[";
	color: var(--jnx-accent);
	margin-right: .18em;
}

.jnx-heading--bracket::after {
	content: "]";
	color: var(--jnx-accent);
	margin-left: .18em;
}

.jnx-heading--block {
	display: inline-block;
	background-color: var(--jnx-accent);
	color: var(--jnx-on-accent);
	padding: .18em .5em;
	border-radius: var(--jnx-radius-sm);
}

.jnx-heading--block a { color: inherit; }

/* --------------------------------------------------------------- entrada --- */
.jnx-entry__header { margin-bottom: 1.4rem; }

.jnx-entry__title { margin-bottom: .6rem; }

.jnx-entry__thumb {
	margin: 0 0 1.6rem;
	border-radius: var(--jnx-radius-sm);
	overflow: hidden;
}

.jnx-entry__thumb img { width: 100%; display: block; }

.jnx-entry__body { padding: var(--jnx-entry-pad); }

.jnx-style-plain .jnx-entry__body,
.jnx-style-wide .jnx-entry__body { padding-inline: 0; }

.jnx-prose > *:last-child { margin-bottom: 0; }

.jnx-prose h2 { margin-top: 1.9em; }
.jnx-prose h3 { margin-top: 1.55em; }

.jnx-prose figure { margin: 1.9em 0; }

.jnx-prose figure img { border-radius: var(--jnx-radius-sm); display: block; }

.jnx-prose figcaption {
	margin-top: .6em;
	font-size: .86em;
	color: var(--jnx-muted);
	text-align: center;
}

.jnx-prose .wp-block-image { margin-block: 1.9em; }

.jnx-prose ul, .jnx-prose ol { margin-bottom: 1.35em; }

/* Relacionados */
.jnx-related { margin-top: var(--jnx-gap-lg); }

.jnx-related__grid {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.jnx-related__item {
	display: block;
	text-decoration: none;
	border-radius: var(--jnx-radius-sm);
	overflow: hidden;
	background-color: var(--jnx-tint);
}

.jnx-related__item img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.jnx-related__label {
	display: block;
	padding: .75rem .85rem;
	font-family: var(--jnx-font-heading);
	font-size: .93rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--jnx-heading);
}

.jnx-related__item:hover .jnx-related__label { color: var(--jnx-accent); }

/* ------------------------------------------------------------ paginacion --- */
.jnx-pagination { margin-top: var(--jnx-gap-lg); }

.jnx-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	align-items: center;
	justify-content: center;
}

.jnx-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 .8rem;
	background-color: var(--jnx-surface);
	border: 1px solid var(--jnx-border);
	border-radius: var(--jnx-radius-sm);
	color: var(--jnx-heading);
	font-family: var(--jnx-font-heading);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
}

.jnx-pagination .page-numbers:hover,
.jnx-pagination .page-numbers.current {
	background-color: var(--jnx-accent);
	border-color: var(--jnx-accent);
	color: var(--jnx-on-accent);
}

.jnx-pagination .dots {
	background: none;
	border-color: transparent;
}

/* --------------------------------------------------------------- sidebar --- */
/*
 * Los widgets van directamente dentro de la barra, con un hueco real entre ellos
 * (--jnx-widget-gap). Antes iban dentro de un envoltorio que anulaba el gap y el
 * estilo "plain" les quitaba el relleno lateral aunque tuvieran borde, y por eso
 * todo se veia pegado al marco.
 */
.jnx-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--jnx-widget-gap);
	min-width: 0;
}

.jnx-widget {
	padding: var(--jnx-widget-pad);
	min-width: 0;
}

.jnx-widget > *:last-child,
.jnx-widget > .wp-block-group > *:last-child { margin-bottom: 0; }

/* Estilo de caja (blog.widget_style). */
.jnx-widgets-card .jnx-sidebar .jnx-widget {
	background-color: var(--jnx-surface);
	border: var(--jnx-border-width) solid var(--jnx-border);
	border-radius: var(--jnx-radius);
	box-shadow: var(--jnx-shadow);
}

/* Sin tarjetas de pagina, la tarjeta del widget necesita al menos su borde. */
.jnx-style-plain.jnx-widgets-card .jnx-sidebar .jnx-widget,
.jnx-style-wide.jnx-widgets-card .jnx-sidebar .jnx-widget {
	border: 1px solid var(--jnx-border);
	box-shadow: none;
}

.jnx-widgets-tinted .jnx-sidebar .jnx-widget {
	background-color: var(--jnx-tint);
	border-radius: var(--jnx-radius);
}

.jnx-widgets-framed .jnx-sidebar .jnx-widget {
	background-color: var(--jnx-surface);
	border: 2px solid var(--jnx-heading);
	border-radius: 0;
}

.jnx-widgets-flat .jnx-sidebar .jnx-widget,
.jnx-widgets-minimal .jnx-sidebar .jnx-widget { padding: 0; }

.jnx-widgets-flat .jnx-sidebar .jnx-widget + .jnx-widget {
	border-top: 1px solid var(--jnx-border);
	padding-top: var(--jnx-widget-gap);
}

/* ------------------------------------------------- titulo del widget --- */
.jnx-widget__title,
.jnx-widget .wp-block-search__label {
	display: block;
	width: auto;
	position: relative;
	margin: 0 0 1rem;
	font-family: var(--jnx-font-heading);
	font-size: var(--jnx-widget-title);
	font-weight: var(--jnx-heading-weight);
	letter-spacing: var(--jnx-heading-spacing);
	line-height: 1.3;
	color: var(--jnx-heading);
}

.jnx-wt-underline .jnx-sidebar :is(.jnx-widget__title, .wp-block-search__label) { padding-bottom: .55rem; }

.jnx-wt-underline .jnx-sidebar :is(.jnx-widget__title, .wp-block-search__label)::after,
.jnx-wt-line .jnx-sidebar :is(.jnx-widget__title, .wp-block-search__label)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.4rem;
	height: 3px;
	border-radius: 3px;
	background-color: var(--jnx-accent);
}

.jnx-wt-line .jnx-sidebar :is(.jnx-widget__title, .wp-block-search__label) {
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--jnx-border);
}

.jnx-wt-line .jnx-sidebar :is(.jnx-widget__title, .wp-block-search__label)::after {
	bottom: -1px;
	height: 2px;
	border-radius: 0;
}

.jnx-wt-bar .jnx-sidebar :is(.jnx-widget__title, .wp-block-search__label) { padding-left: .8rem; }

.jnx-wt-bar .jnx-sidebar :is(.jnx-widget__title, .wp-block-search__label)::before {
	content: "";
	position: absolute;
	left: 0;
	top: .16em;
	bottom: .16em;
	width: 4px;
	border-radius: 4px;
	background-color: var(--jnx-accent);
}

.jnx-wt-boxed .jnx-sidebar :is(.jnx-widget__title, .wp-block-search__label) {
	background-color: var(--jnx-deep);
	color: var(--jnx-on-deep);
	padding: .55rem .85rem;
	border-radius: var(--jnx-radius-sm);
	font-size: .82rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ------------------------------------------------ contenido de widgets --- */
.jnx-widget ul { list-style: none; padding: 0; margin: 0; }

.jnx-widget li {
	margin: 0;
	padding: .6rem 0;
	border-bottom: 1px solid var(--jnx-border);
	font-size: .95rem;
	line-height: 1.4;
}

.jnx-widget li:first-child { padding-top: 0; }
.jnx-widget li:last-child { border-bottom: 0; padding-bottom: 0; }

.jnx-widget a { color: var(--jnx-heading); text-decoration: none; }
.jnx-widget a:hover { color: var(--jnx-accent); }

/* Buscador de bloque */
.jnx-widget .wp-block-search__inside-wrapper {
	display: flex;
	gap: .45rem;
	width: 100% !important;
}

.jnx-widget .wp-block-search__input { min-width: 0; flex: 1 1 auto; }
.jnx-widget .wp-block-search__button { flex: 0 0 auto; margin: 0; }

/* Ultimas entradas con miniatura: imagen fija a la izquierda, texto al lado. */
.jnx-widget .wp-block-latest-posts__list li:has(.wp-block-latest-posts__featured-image) {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	column-gap: .9rem;
	row-gap: .15rem;
}

.jnx-widget .wp-block-latest-posts__featured-image {
	float: none !important;
	margin: 0 !important;
	grid-row: 1 / span 3;
}

.jnx-widget .wp-block-latest-posts__featured-image img {
	display: block;
	width: 64px !important;
	height: 64px !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: var(--jnx-radius-sm);
}

.jnx-widget .wp-block-latest-posts__post-title {
	font-family: var(--jnx-font-heading);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
}

.jnx-widget .wp-block-latest-posts__post-date,
.jnx-widget .wp-block-latest-posts__post-author {
	font-size: .78rem;
	color: var(--jnx-muted);
}

.jnx-widget .wp-block-latest-posts__post-excerpt {
	font-size: .88rem;
	margin: .2rem 0 0;
}

/* Etiquetas y categorias en nube */
.jnx-widget .wp-block-tag-cloud,
.jnx-widget .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.jnx-widget .wp-block-tag-cloud a,
.jnx-widget .tagcloud a {
	font-size: .82rem !important;
	padding: .3em .7em;
	border: 1px solid var(--jnx-border);
	border-radius: var(--jnx-tag-radius);
}

/* ---------------------------------------------------------------- footer --- */
.jnx-footer {
	background-color: var(--jnx-footer-bg);
	color: var(--jnx-footer-fg);
	margin-top: auto;
}

.jnx-footer__widgets {
	display: grid;
	gap: 2rem;
	padding-block: 3rem;
	grid-template-columns: repeat(var(--jnx-footer-cols, 3), minmax(0, 1fr));
	border-bottom: 1px solid var(--jnx-footer-line);
}

@media (max-width: 767px) {
	.jnx-footer__widgets { grid-template-columns: minmax(0, 1fr); }
}

.jnx-footer__widgets .jnx-widget {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.jnx-footer__widgets .jnx-widget__title,
.jnx-footer__widgets .wp-block-heading {
	color: var(--jnx-footer-fg);
	font-size: 1rem;
}

.jnx-footer__widgets .jnx-widget li { border-bottom-color: var(--jnx-footer-line); }

.jnx-footer__widgets a,
.jnx-footer__widgets .jnx-widget a { color: var(--jnx-footer-muted); }

.jnx-footer__widgets a:hover { color: var(--jnx-footer-fg); }

.jnx-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .9rem 1.6rem;
	padding-block: 1.5rem;
	background-color: var(--jnx-footer-bg);
	color: var(--jnx-footer-muted);
	font-size: .88rem;
}

.jnx-footer__bar p { margin: 0; }

.jnx-footer__bar a { color: var(--jnx-footer-muted); text-decoration: none; }
.jnx-footer__bar a:hover { color: var(--jnx-footer-fg); }

.jnx-footer__menu ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	margin: 0;
	padding: 0;
}

.jnx-footer__menu li { margin: 0; }

@media (max-width: 599px) {
	.jnx-footer__bar { justify-content: center; text-align: center; }
	.jnx-footer__menu ul { justify-content: center; }
}

/* ------------------------------------------------------------ comentarios --- */
.jnx-comments { margin-top: var(--jnx-gap-lg); }

.jnx-comments ol.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }

.jnx-comments .comment-body {
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--jnx-border);
}

.jnx-comments .children { list-style: none; padding-left: 1.6rem; }

.jnx-comments .avatar { border-radius: 50%; margin-right: .7rem; float: left; }

.jnx-comments .comment-meta { font-size: .85rem; color: var(--jnx-muted); }

/* ----------------------------------------------------------- utilidades --- */
.jnx-none { text-align: center; padding: 3rem 1rem; }

.alignwide { max-width: min(100%, 1100px); margin-inline: auto; }
.alignfull { max-width: none; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: .4em 1.4em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.4em; }

.jnx-clear::after { content: ""; display: table; clear: both; }

@media print {
	.jnx-header, .jnx-footer, .jnx-sidebar, .jnx-pagination { display: none !important; }
}

/* ------------------------------------------------- piezas complementarias --- */
.jnx-archive-head {
	padding: var(--jnx-card-pad);
	margin-bottom: var(--jnx-gap-lg);
}

.jnx-archive-head h1 { margin-bottom: .35rem; }
.jnx-archive-head p:last-child { margin-bottom: 0; }

.jnx-style-plain .jnx-archive-head,
.jnx-style-wide .jnx-archive-head { padding-inline: 0; }

.jnx-entry { overflow: hidden; }

/*
 * Una tarjeta o una entrada con un anuncio dentro no recorta: con overflow
 * hidden un creativo un poco mas ancho que la columna (336px en una columna de
 * 323px) quedaba cortado por el borde.
 */
.jnx-entry:has(.code-block, ins.adsbygoogle, [id^="div-gpt-ad"]),
.jnx-card:has(.code-block, ins.adsbygoogle, [id^="div-gpt-ad"]) { overflow: visible; }

.jnx-entry__footer { margin-top: 2rem; }

.jnx-page-links {
	margin-top: 1.6rem;
	font-family: var(--jnx-font-heading);
	font-weight: 600;
}

.jnx-page-links a { margin-left: .4em; }

/* Boton de submenu dentro del panel movil. */
.jnx-panel .menu-item-has-children { position: relative; }

.jnx-panel__sub-toggle {
	position: absolute;
	top: .35rem;
	right: 0;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 1px solid var(--jnx-panel-line);
	border-radius: var(--jnx-radius-sm);
	color: var(--jnx-panel-fg);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.jnx-panel__sub-toggle:hover {
	background-color: var(--jnx-panel-hover);
	color: var(--jnx-panel-active);
}

.jnx-panel .jnx-search input[type="search"] {
	background-color: var(--jnx-panel-hover);
	border-color: var(--jnx-panel-line);
	color: var(--jnx-panel-fg);
}

.jnx-panel .jnx-search input[type="search"]::placeholder {
	color: var(--jnx-panel-fg);
	opacity: .6;
}

/* ========================================================================== */
/*  VARIANTES ESTRUCTURALES                                                   */
/*  Lo que de verdad separa un tema de otro: donde va el menu, como es una     */
/*  tarjeta, que forma tiene el pie. No son radios ni sombras.                 */
/* ========================================================================== */

/* ------------------------------------------------ estilos de navegacion --- */
/* El indicador usa --jnx-header-active, que nunca coincide con el fondo. */
.jnx-nav-underline .jnx-header__nav .jnx-nav__list > li > a {
	position: relative;
	background: none;
}

.jnx-nav-underline .jnx-header__nav .jnx-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: .8rem;
	right: .8rem;
	bottom: .18rem;
	height: 2px;
	background-color: var(--jnx-header-active);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}

.jnx-nav-underline .jnx-header__nav .jnx-nav__list > li > a:hover::after,
.jnx-nav-underline .jnx-header__nav .jnx-nav__list > .current-menu-item > a::after,
.jnx-nav-underline .jnx-header__nav .jnx-nav__list > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.jnx-nav-underline .jnx-header__nav .jnx-nav__list > li > a:hover,
.jnx-nav-underline .jnx-header__nav .jnx-nav__list > .current-menu-item > a {
	background: none;
}

.jnx-nav-pill .jnx-header__nav .jnx-nav__list > li > a { border-radius: 999px; }

.jnx-nav-pill .jnx-header__nav .jnx-nav__list > .current-menu-item > a,
.jnx-nav-pill .jnx-header__nav .jnx-nav__list > .current-menu-ancestor > a {
	background-color: var(--jnx-header-pill);
	color: var(--jnx-header-pill-fg);
}

.jnx-nav-box .jnx-header__nav .jnx-nav__list > li > a {
	border-radius: 0;
	border-top: 2px solid transparent;
}

.jnx-nav-box .jnx-header__nav .jnx-nav__list > li > a:hover,
.jnx-nav-box .jnx-header__nav .jnx-nav__list > .current-menu-item > a,
.jnx-nav-box .jnx-header__nav .jnx-nav__list > .current-menu-ancestor > a {
	border-top-color: var(--jnx-header-active);
}

/* ------------------------------------------------- tarjeta: superpuesta --- */
.jnx-loop--overlay {
	display: grid;
	gap: var(--jnx-gap-lg);
	grid-template-columns: repeat(var(--jnx-cols, 1), minmax(0, 1fr));
}

.jnx-loop--overlay > *:not(article) { grid-column: 1 / -1; }

.jnx-card--overlay {
	position: relative;
	border: 0;
	overflow: hidden;
}

.jnx-card--overlay .jnx-card__thumb {
	aspect-ratio: 4 / 3;
	margin: 0;
	border-radius: inherit;
}

.jnx-card--overlay .jnx-card__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.6rem 1.5rem 1.35rem;
	background-image: linear-gradient(to top, rgba(8, 12, 18, .92) 12%, rgba(8, 12, 18, .58) 55%, rgba(8, 12, 18, 0));
}

.jnx-card--overlay .jnx-card__title a,
.jnx-card--overlay .jnx-meta,
.jnx-card--overlay .jnx-meta a,
.jnx-card--overlay .jnx-readmore { color: #FFFFFF; }

.jnx-card--overlay .jnx-card__title a:hover { color: #FFFFFF; opacity: .82; }

.jnx-card--overlay .jnx-card__excerpt { display: none; }

.jnx-card--overlay .jnx-terms a {
	background-color: rgba(255, 255, 255, .2);
	color: #FFFFFF;
}

.jnx-card--overlay .jnx-readmore { margin-top: .35rem; }

@media (max-width: 767px) {
	.jnx-loop--overlay { grid-template-columns: minmax(0, 1fr); }
	.jnx-card--overlay .jnx-card__body { padding: 1.2rem 1.1rem 1rem; }
}

/* ------------------------------------------------ tarjeta: portada hero --- */
.jnx-loop--hero {
	display: grid;
	gap: var(--jnx-gap-lg);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jnx-loop--hero > *:not(article) { grid-column: 1 / -1; }

.jnx-card--lead { grid-column: 1 / -1; }

.jnx-card--lead .jnx-card__thumb { aspect-ratio: 21 / 9; }

.jnx-card--lead .jnx-card__title { font-size: calc(var(--jnx-card-title) * 1.42); }

.jnx-card--lead .jnx-card__excerpt { font-size: 1.04em; }

.jnx-card--rest .jnx-card__thumb { aspect-ratio: 16 / 10; }

.jnx-card--rest .jnx-card__title { font-size: calc(var(--jnx-card-title) * .78); }

.jnx-card--rest .jnx-card__excerpt { font-size: .93em; }

@media (max-width: 767px) {
	.jnx-loop--hero { grid-template-columns: minmax(0, 1fr); }
	.jnx-card--lead .jnx-card__thumb { aspect-ratio: 16 / 9; }
	.jnx-card--lead .jnx-card__title { font-size: var(--jnx-card-title); }
}

/* ------------------------------------------------ disposiciones del pie --- */
.jnx-footer--bar .jnx-footer__copyright { order: 1; }
.jnx-footer--bar .jnx-footer__menu { order: 2; }

.jnx-footer--columns .jnx-footer__bar {
	justify-content: center;
	text-align: center;
	flex-direction: column;
	gap: .7rem;
}

.jnx-footer--columns .jnx-footer__menu ul { justify-content: center; }

.jnx-footer--centered .jnx-footer__bar {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.1rem;
	padding-block: 3rem;
}

.jnx-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
}

.jnx-footer__logo img {
	width: 46px;
	height: 46px;
	object-fit: contain;
	border-radius: var(--jnx-logo-radius);
}

.jnx-footer__name {
	font-family: var(--jnx-font-heading);
	font-size: 1.25rem;
	font-weight: var(--jnx-heading-weight);
	letter-spacing: var(--jnx-heading-spacing);
	color: var(--jnx-footer-fg);
}

.jnx-footer--centered .jnx-footer__menu ul {
	justify-content: center;
	gap: .5rem 1.4rem;
}

.jnx-footer--centered .jnx-footer__copyright {
	padding-top: .9rem;
	border-top: 1px solid var(--jnx-footer-line);
	width: min(100%, 520px);
}

/* ------------------------------------------ disposiciones de la entrada --- */
.jnx-single-narrow .jnx-entry__body {
	max-width: 760px;
	margin-inline: auto;
}

.jnx-single-narrow .jnx-entry__header { text-align: center; }

.jnx-single-narrow .jnx-entry__header .jnx-meta,
.jnx-single-narrow .jnx-entry__header .jnx-terms { justify-content: center; }

.jnx-single-narrow .jnx-prose { font-size: 1.06em; }

.jnx-single-narrow .jnx-comments,
.jnx-single-narrow .jnx-related { max-width: 820px; margin-inline: auto; }

/* Hero: la imagen sangra hasta el borde de la tarjeta. Que vaya por encima del
   titulo lo decide single.thumb_position, no esta disposicion. */
.jnx-single-hero .jnx-entry__title { font-size: calc(var(--jnx-h1) * 1.04); }

/*
 * Bucle corto. Solo afecta a la portada "hero": como la entrada destacada ocupa
 * las dos columnas, con dos entradas por pagina la segunda se quedaria sola en
 * media fila. Entonces las dos van a ancho completo y la jerarquia la marca el
 * tamano. Las rejillas normales con dos entradas llenan la fila y no se tocan.
 */
.jnx-loop--hero.jnx-loop--few { grid-template-columns: minmax(0, 1fr); }

.jnx-loop--hero.jnx-loop--few > article { grid-column: 1 / -1; }

.jnx-loop--hero.jnx-loop--few .jnx-card--rest .jnx-card__thumb { aspect-ratio: 16 / 9; }

.jnx-loop--hero.jnx-loop--few .jnx-card--rest .jnx-card__title { font-size: calc(var(--jnx-card-title) * .92); }

.jnx-loop--hero.jnx-loop--few .jnx-card--rest .jnx-card__excerpt { font-size: 1em; }

/* ========================================================================== */
/*  MIGAS, AUTOR, RELACIONADOS, POSICION DE IMAGEN Y BOTON MOVIL              */
/* ========================================================================== */

/* -------------------------------------------------------- migas de pan --- */
.jnx-breadcrumbs {
	margin-bottom: var(--jnx-gap);
	font-family: var(--jnx-font-heading);
	font-size: .82rem;
	color: var(--jnx-muted);
}

.jnx-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jnx-breadcrumbs li {
	margin: 0;
	display: flex;
	align-items: center;
	gap: .55rem;
}

.jnx-breadcrumbs a {
	color: var(--jnx-muted);
	text-decoration: none;
}

.jnx-breadcrumbs a:hover { color: var(--jnx-accent); }

.jnx-breadcrumbs li + li::before {
	content: "/";
	opacity: .45;
}

.jnx-breadcrumbs--arrow li + li::before { content: "\203A"; }

.jnx-breadcrumbs--boxed {
	background-color: var(--jnx-surface);
	border: var(--jnx-border-width) solid var(--jnx-border);
	border-radius: var(--jnx-radius-sm);
	padding: .6rem 1rem;
}

.jnx-breadcrumbs--boxed li + li::before { content: "\203A"; }

.jnx-style-plain .jnx-breadcrumbs--boxed,
.jnx-style-wide .jnx-breadcrumbs--boxed {
	background: none;
	border: 0;
	padding-inline: 0;
}

/* ------------------------------------------------------- caja de autor --- */
.jnx-author {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	margin-top: 2.4rem;
}

.jnx-author__avatar img {
	display: block;
	border-radius: 50%;
}

.jnx-author__label {
	display: block;
	font-family: var(--jnx-font-heading);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jnx-muted);
	margin-bottom: .15rem;
}

.jnx-author__name {
	display: block;
	font-family: var(--jnx-font-heading);
	font-size: 1.12rem;
	font-weight: var(--jnx-heading-weight);
	color: var(--jnx-heading);
}

.jnx-author__bio {
	margin: .5rem 0 .6rem;
	font-size: .95rem;
}

.jnx-author__link {
	font-family: var(--jnx-font-heading);
	font-size: .86rem;
	font-weight: 600;
	text-decoration: none;
}

.jnx-author--card {
	background-color: var(--jnx-tint);
	border-radius: var(--jnx-radius);
	padding: 1.5rem 1.6rem;
}

.jnx-author--inline {
	border-top: 1px solid var(--jnx-border);
	border-bottom: 1px solid var(--jnx-border);
	padding-block: 1.3rem;
	align-items: center;
}

.jnx-author--inline .jnx-author__bio { margin-bottom: .3rem; }

.jnx-author--minimal {
	align-items: center;
	gap: .8rem;
	border-top: 1px solid var(--jnx-border);
	padding-top: 1.2rem;
}

.jnx-author--minimal .jnx-author__label { display: inline; margin-right: .35rem; }
.jnx-author--minimal .jnx-author__name { display: inline; font-size: 1rem; }
.jnx-author--minimal .jnx-author__link { display: block; margin-top: .2rem; }

@media (max-width: 599px) {
	.jnx-author { flex-direction: column; }
}

/* ------------------------------------------------ relacionados: formas --- */
.jnx-related--list .jnx-related__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.jnx-related--list .jnx-related__item {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
	background: none;
	border-radius: 0;
	border-bottom: 1px solid var(--jnx-border);
	padding-block: .9rem;
}

.jnx-related--list .jnx-related__item:last-child { border-bottom: 0; }

.jnx-related--list .jnx-related__item img {
	aspect-ratio: 4 / 3;
	border-radius: var(--jnx-radius-sm);
}

.jnx-related--list .jnx-related__label { padding: 0; }

.jnx-related__meta {
	display: block;
	padding: 0 0 0 0;
	font-family: var(--jnx-font-heading);
	font-size: var(--jnx-meta-size);
	letter-spacing: var(--jnx-meta-spacing);
	text-transform: var(--jnx-meta-transform);
	color: var(--jnx-muted);
}

.jnx-related--list .jnx-related__meta { margin-top: .2rem; }

.jnx-related--minimal .jnx-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jnx-related--minimal .jnx-related__list li {
	margin: 0;
	padding: .6rem 0;
	border-bottom: 1px solid var(--jnx-border);
}

.jnx-related--minimal .jnx-related__list li:last-child { border-bottom: 0; }

.jnx-related--minimal .jnx-related__list a {
	font-family: var(--jnx-font-heading);
	font-weight: 600;
	color: var(--jnx-heading);
	text-decoration: none;
}

.jnx-related--minimal .jnx-related__list a:hover { color: var(--jnx-accent); }

/* ------------------------------- posicion de la miniatura en la tarjeta --- */
/*
 * Cuando la imagen no va arriba, deja de ser el borde de la tarjeta y pasa a ser
 * un elemento mas dentro del cuerpo, con su propio margen y esquinas.
 */
.jnx-card.jnx-thumb-after-title .jnx-card__thumb,
.jnx-card.jnx-thumb-after-meta .jnx-card__thumb {
	border-radius: var(--jnx-radius-sm);
	margin-block: .9rem 1.1rem;
}

.jnx-card.jnx-thumb-after-title,
.jnx-card.jnx-thumb-after-meta { flex-direction: column; }

/* La variante de lista coloca la imagen al lado, asi que manda sobre la posicion. */
.jnx-card--list.jnx-thumb-after-title .jnx-card__thumb,
.jnx-card--list.jnx-thumb-after-meta .jnx-card__thumb { margin-block: 0; }

/* ----------------------------- posicion de la imagen en la entrada --- */
.jnx-sthumb-above-title .jnx-entry__thumb { margin-top: 0; }

.jnx-single-hero .jnx-entry__body { padding-top: 0; }

.jnx-single-hero .jnx-entry__thumb {
	margin: 0 calc(var(--jnx-entry-pad) * -1) 1.8rem;
	border-radius: 0;
}

.jnx-single-hero .jnx-entry__thumb img {
	width: 100%;
	max-height: 440px;
	object-fit: cover;
}

/* ------------------------------------------- boton del menu movil --- */
.jnx-toggle--bars {
	padding: .55rem .6rem;
	gap: 0;
}

.jnx-toggle--circle {
	width: 44px;
	height: 44px;
	padding: 0;
	gap: 0;
	justify-content: center;
	border-radius: 50%;
	border-color: var(--jnx-header-border);
}

.jnx-toggle--text {
	gap: 0;
	border: 0;
	font-family: var(--jnx-font-heading);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .5rem .2rem;
	border-bottom: 2px solid currentColor;
	border-radius: 0;
}

/* ------------------------------------------------ lado del panel movil --- */
.jnx-panel--left .jnx-panel__inner {
	right: auto;
	left: 0;
	transform: translateX(-100%);
}

.jnx-panel--left.is-open .jnx-panel__inner { transform: translateX(0); }

.jnx-panel--full .jnx-panel__inner {
	width: 100%;
	transform: translateY(-100%);
}

.jnx-panel--full.is-open .jnx-panel__inner { transform: translateY(0); }

.jnx-panel--full .jnx-panel__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	padding-inline: 2rem;
}

.jnx-panel--full .jnx-nav__list a {
	font-size: 1.35rem;
	padding-block: 1rem;
}

.jnx-panel--full .jnx-panel__search { max-width: 380px; margin-inline: auto; }

/*
 * Rejillas y plugins de anuncios.
 *
 * Ad Inserter y similares intercalan sus bloques ENTRE las entradas, y esos
 * bloques ocupan la fila completa. El resultado en una rejilla de dos columnas
 * es que cada tarjeta queda sola en su fila con la otra mitad vacia, y el
 * listado se ve estrecho y descentrado dentro de una columna ancha.
 *
 * Si hay algun hijo del bucle que no sea una entrada, se pasa a una sola columna
 * y las tarjetas ocupan todo el ancho disponible.
 */
.jnx-loop--grid:has(> :not(article)),
.jnx-loop--overlay:has(> :not(article)),
.jnx-loop--hero:has(> :not(article)) {
	grid-template-columns: minmax(0, 1fr);
}

.jnx-loop:has(> :not(article)) > article { grid-column: 1 / -1; }

.jnx-loop--hero:has(> :not(article)) .jnx-card--rest .jnx-card__thumb { aspect-ratio: 16 / 9; }

.jnx-loop--hero:has(> :not(article)) .jnx-card--rest .jnx-card__title {
	font-size: calc(var(--jnx-card-title) * .92);
}

/*
 * Tarjeta superpuesta sin imagen destacada.
 *
 * La superposicion coloca el cuerpo en posicion absoluta sobre la foto. Si la
 * entrada no tiene imagen, no hay nada debajo: la tarjeta se queda con altura
 * cero y el texto desaparece de la pagina aunque este en el marcado. Cuando
 * WordPress no anade "has-post-thumbnail", la tarjeta vuelve a ser normal.
 */
.jnx-card--overlay:not(.has-post-thumbnail) .jnx-card__body {
	position: static;
	inset: auto;
	background-image: none;
	padding: var(--jnx-card-pad);
}

.jnx-card--overlay:not(.has-post-thumbnail) .jnx-card__title a { color: var(--jnx-heading); }
.jnx-card--overlay:not(.has-post-thumbnail) .jnx-card__title a:hover { color: var(--jnx-accent); opacity: 1; }
.jnx-card--overlay:not(.has-post-thumbnail) .jnx-meta,
.jnx-card--overlay:not(.has-post-thumbnail) .jnx-meta a { color: var(--jnx-muted); }
.jnx-card--overlay:not(.has-post-thumbnail) .jnx-readmore { color: var(--jnx-accent); }
.jnx-card--overlay:not(.has-post-thumbnail) .jnx-card__excerpt { display: block; }

.jnx-card--overlay:not(.has-post-thumbnail) .jnx-terms a {
	background-color: var(--jnx-tint);
	color: var(--jnx-accent-dark);
}

/* Lo mismo para la portada destacada: sin foto, tipografia normal. */
.jnx-card--lead:not(.has-post-thumbnail) .jnx-card__title { font-size: var(--jnx-card-title); }

/* ========================================================================== */
/*  VERSION 3: INDICE, LEER MAS, ANUNCIOS RESPONSIVE, MOVIL Y AYUDAS          */
/* ========================================================================== */

/* ------------------------------------------------------ boton leer mas --- */
.jnx-readmore--button {
	background-color: var(--jnx-accent);
	color: var(--jnx-on-accent);
	padding: .62em 1.15em;
	border-radius: var(--jnx-btn-radius);
}

.jnx-readmore--button:hover {
	background-color: var(--jnx-accent-dark);
	color: var(--jnx-on-accent);
}

/* ------------------------------------------------- fecha de actualizacion --- */
.jnx-meta__updated { font-weight: 600; }

/* ------------------------------------------------------ indice (TOC) --- */
.jnx-toc {
	margin: 0 0 2em;
	padding: 1.1rem 1.3rem;
	background-color: var(--jnx-tint);
	border-left: 4px solid var(--jnx-accent);
	border-radius: var(--jnx-radius-sm);
	font-size: .95em;
}

.jnx-toc summary {
	cursor: pointer;
	font-family: var(--jnx-font-heading);
	font-weight: var(--jnx-heading-weight);
	color: var(--jnx-heading);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.jnx-toc summary::-webkit-details-marker { display: none; }

.jnx-toc summary::after {
	content: "+";
	font-size: 1.25em;
	line-height: 1;
	color: var(--jnx-accent);
}

.jnx-toc[open] summary::after { content: "\2212"; }

.jnx-toc ol {
	margin: .85rem 0 0;
	padding-left: 1.25em;
}

.jnx-toc ol ol {
	margin-top: .35rem;
	padding-left: .9em;
	list-style: none;
	border-left: 2px solid var(--jnx-border);
}

.jnx-toc li { margin-bottom: .35rem; }

.jnx-toc a { text-decoration: none; color: var(--jnx-text); }
.jnx-toc a:hover { color: var(--jnx-accent); text-decoration: underline; }

.jnx-prose :is(h2, h3)[id] { scroll-margin-top: var(--jnx-sticky-top, 1.5rem); }

/* ------------------------------------- bloques de un plugin de anuncios --- */
/*
 * El tema no inserta anuncios (se usa Ad Inserter), pero si se asegura de que
 * sus bloques se vean enteros en moviles.
 *
 * En un movil de 360-390px la columna de texto mide 310-350px y un 336x280 no
 * cabe; con relleno de tarjeta, ni siquiera un 300x250. Hasta 767px cada bloque
 * de Ad Inserter (.code-block) sale de la columna y ocupa el ancho completo de la
 * pantalla, centrado: cabe cualquier tamano hasta el ancho del telefono sin
 * recortarse ni empujar la pagina. Los bloques que Ad Inserter alinea flotando a
 * un lado se dejan como estan.
 */
@media (max-width: 767px) {
	:is(.jnx-main, .jnx-sidebar) .code-block:not([style*="float"]):not(.code-block *) {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-inline: 0 !important;
		overflow: visible !important;
		text-align: center;
		box-sizing: border-box;
	}

	/* El contenedor de GPT centra su iframe aunque Ad Manager le fije un ancho. */
	:is(.jnx-main, .jnx-sidebar) [id^="div-gpt-ad"] { margin-inline: auto; }

	/* El widget que lo contiene no debe recortarlo ni dibujar su caja a medias. */
	.jnx-sidebar .jnx-widget:has(.code-block, ins.adsbygoogle, [id^="div-gpt-ad"]) { overflow: visible; }
}

/* En la barra lateral, el widget con anuncio pierde el relleno lateral: un
   336x280 cabe en la columna (que nunca baja de 336px + borde). */
.jnx-sidebar .jnx-widget:has(.code-block, ins.adsbygoogle, [id^="div-gpt-ad"]) {
	padding-inline: 0;
	text-align: center;
}

.jnx-sidebar .jnx-widget:has(.code-block, ins.adsbygoogle, [id^="div-gpt-ad"]) > .jnx-widget__title { margin-inline: var(--jnx-widget-pad); }

/* --------------------------------------------------- volver arriba --- */
.jnx-backtop {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 80;
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--jnx-heading);
	color: var(--jnx-surface);
	border: 0;
	border-radius: var(--jnx-btn-radius);
	box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	cursor: pointer;
}

.jnx-backtop.is-visible { opacity: 1; visibility: visible; transform: none; }
.jnx-backtop:hover { background-color: var(--jnx-accent); color: var(--jnx-on-accent); }
.jnx-backtop svg { width: 18px; height: 18px; }

/* ------------------------------------------------- enlace de privacidad --- */
.jnx-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.jnx-footer__legal a { color: var(--jnx-footer-muted); }

/* ----------------------------------------------------- ajustes de movil --- */
@media (max-width: 544px) {
	.jnx-container { padding-inline: min(var(--jnx-gutter), 16px); }
	.jnx-content { padding-block: min(var(--jnx-section-pad), 26px); }
	.jnx-card__body { padding: min(var(--jnx-card-pad), 18px); }
	.jnx-entry__body { padding: min(var(--jnx-entry-pad), 18px); }
	.jnx-archive-head { padding: min(var(--jnx-card-pad), 18px); }
	.jnx-card__title { font-size: calc(var(--jnx-card-title) * .84); }
	.jnx-layout, .jnx-loop { gap: min(var(--jnx-gap-lg), 22px); }
	.jnx-single-hero .jnx-entry__thumb { margin-inline: calc(min(var(--jnx-entry-pad), 18px) * -1); }
	.jnx-style-plain .jnx-card__body,
	.jnx-style-wide .jnx-card__body,
	.jnx-style-plain .jnx-entry__body,
	.jnx-style-wide .jnx-entry__body { padding-inline: 0; }
}

/* Movimiento reducido: sin zoom de miniaturas ni desplazamientos. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}