/* Escala y ritmo comunes a todos los bocetos.
 * Los colores vienen del Kit de Elementor; aquí siempre con respaldo: var(--nx-ink, #111111). */
:root {
	--nx-space-1: 0.5rem;
	--nx-space-2: 1rem;
	--nx-space-3: 1.5rem;
	--nx-space-4: 2.5rem;
	--nx-space-5: 4rem;
	--nx-space-6: 6.5rem;
	--nx-measure: 68ch;
	--nx-content: 75rem;
	/* Aire lateral: 16 px en celular y el contenido centrado a --nx-content en pantallas anchas */
	--nx-gutter: max(var(--nx-space-2), calc((100% - var(--nx-content)) / 2));
	/* Páginas interiores: 24 px a los lados y contenido de 1200 px, igual que Nosotros,
	   Convocatorias, Galería y Contacto (su relleno local de 24 px + ancho máx. 1200 px) */
	--nx-gutter-pagina: max(var(--nx-space-3), calc((100% - var(--nx-content)) / 2));
	/* Movimiento: suave, sin rebotes */
	--nx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
	background: var(--nx-bg, #FFFFFF);
	color: var(--nx-ink, #111111);
	font-family: var(--nx-font-body);
}

:where(h1, h2, h3) { font-family: var(--nx-font-display); color: var(--nx-ink, #111111); }
:where(p) { max-width: var(--nx-measure); }

/* Foco visible en todo el sitio */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--nx-accent, #861724);
	outline-offset: 3px;
}

/*
 * Secciones. Todo va bajo "body.nx-site" (clase agregada en functions.php) porque los
 * estilos base de Elementor V4 usan dos clases y cargan después de este archivo.
 * Mobile first: la base es 375 px; los @media (min-width) amplían.
 */

/* ---------- Comunes a las secciones ---------- */

body.nx-site :is(.nx-hero, .nx-convocatorias, .nx-actualidad, .nx-destacado, .nx-revive, .nx-newsletter) {
	display: flex;
	flex-direction: column;
	gap: var(--nx-space-3);
	padding: var(--nx-space-5) var(--nx-gutter);
}

/* Titulares: Archivo 800 en mayúsculas */
body.nx-site :is(.nx-hero h1, .nx-convocatorias h2, .nx-actualidad h2, .nx-destacado h2, .nx-revive h2, .nx-newsletter h2) {
	font-family: var(--nx-font-display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.05; /* deja sitio a Ñ, Á, Í… en mayúscula */
	letter-spacing: -0.01em;
	margin: 0;
}

body.nx-site :is(.nx-convocatorias h2, .nx-actualidad h2, .nx-destacado h2, .nx-revive h2, .nx-newsletter h2) {
	font-size: clamp(1.75rem, 7vw, 3rem);
}

body.nx-site :is(.nx-convocatorias h3, .nx-actualidad h3, .nx-revive h3) {
	font-family: var(--nx-font-display);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
}

body.nx-site :is(.nx-hero, .nx-convocatorias, .nx-actualidad, .nx-revive, .nx-newsletter) p {
	color: var(--nx-muted, #555555);
	line-height: 1.55;
}

/* Rejillas de tarjetas: una columna en celular */
body.nx-site .nx-lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nx-space-4);
	padding: 0;
}

/* Botón: corto, en mayúsculas, sin sombra ni radio */
body.nx-site .nx-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* área táctil mínima */
	padding: 0 var(--nx-space-3);
	font-family: var(--nx-font-body);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--nx-bg, #FFFFFF);
	background-color: var(--nx-ink, #111111);
	border: 1px solid var(--nx-ink, #111111);
	border-radius: 0;
	box-shadow: none;
	transition: background-color 300ms var(--nx-ease), color 300ms var(--nx-ease), border-color 300ms var(--nx-ease);
}

body.nx-site .nx-btn:is(:hover, :focus-visible) {
	color: var(--nx-ink, #111111);
	background-color: transparent;
}

/* Foco de teclado visible en todos los botones (en fondos oscuros se cambia el color más abajo) */
body.nx-site .nx-btn:focus-visible {
	outline: 2px solid var(--nx-ink, #111111);
	outline-offset: 3px;
}

/* Marcador de imagen (se reemplaza por la foto real en Elementor) */
body.nx-site .nx-marcador {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--nx-space-2);
	background-color: var(--nx-line, #E5E5E5);
	color: var(--nx-muted, #555555);
	font-size: 0.8125rem;
	text-align: center;
}

/* Visibilidad por dispositivo (mismo corte que Elementor: 767/768 px) */
body.nx-site .nx-solo-escritorio { display: none; }

/* ---------- nx-hero ---------- */

body.nx-site .nx-hero {
	padding-top: 0;
	padding-inline: 0;
	gap: var(--nx-space-4);
}

body.nx-site .nx-hero .nx-marcador.nx-solo-movil { aspect-ratio: 4 / 5; }
body.nx-site .nx-hero .nx-marcador.nx-solo-escritorio { aspect-ratio: 12 / 5; }

body.nx-site .nx-hero-texto {
	flex-direction: column;
	gap: var(--nx-space-2);
	padding: 0 var(--nx-gutter);
}

body.nx-site .nx-hero h1 {
	font-size: clamp(2.5rem, 12vw, 5.5rem);
}

body.nx-site .nx-hero p {
	font-size: 1rem;
	font-weight: 500;
	color: var(--nx-ink, #111111);
}

/* ---------- Carrusel (banner de Inicio · assets/js/carrusel.js) ---------- */

/* Pista: desplazamiento nativo con scroll-snap (se desliza con el dedo) */
body.nx-site .nx-carrusel {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
	width: 100%;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

body.nx-site .nx-carrusel > .nx-slide {
	flex: 0 0 100%;
	min-width: 0;
	padding: 0;
	scroll-snap-align: start;
}

/* La barra de desplazamiento solo se oculta cuando el script puso flechas e indicadores */
body.nx-site .nx-carrusel.nx-carrusel-listo { scrollbar-width: none; }
body.nx-site .nx-carrusel.nx-carrusel-listo::-webkit-scrollbar { display: none; }

body.nx-site .nx-carrusel:focus-visible {
	outline: 2px solid var(--nx-accent, #861724);
	outline-offset: -4px;
}

/* Imágenes reales de cada diapositiva: mismas proporciones que los recuadros */
body.nx-site .nx-slide img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
body.nx-site .nx-slide img.nx-solo-escritorio { aspect-ratio: 12 / 5; }
body.nx-site .nx-slide img.nx-solo-movil { aspect-ratio: 4 / 5; }

/* Marco con los controles (lo crea el script) */
body.nx-site .nx-carrusel-marco {
	position: relative;
	width: 100%;
}

body.nx-site .nx-carrusel-flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--nx-ink, #111111);
	background-color: color-mix(in srgb, var(--nx-bg, #FFFFFF) 88%, transparent);
	border: 1px solid var(--nx-line, #E5E5E5);
	border-radius: 0;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 300ms var(--nx-ease), color 300ms var(--nx-ease);
}

body.nx-site .nx-carrusel-anterior { left: var(--nx-space-2); }
body.nx-site .nx-carrusel-siguiente { right: var(--nx-space-2); }
body.nx-site .nx-carrusel-siguiente svg { transform: scaleX(-1); }

body.nx-site .nx-carrusel-flecha:is(:hover, :focus-visible) {
	color: var(--nx-bg, #FFFFFF);
	background-color: var(--nx-ink, #111111);
	border-color: var(--nx-ink, #111111);
}

body.nx-site .nx-carrusel-flecha:focus-visible {
	outline: 2px solid var(--nx-bg, #FFFFFF);
	outline-offset: 2px;
}

/* Indicadores: barras finas, la activa en blanco pleno */
body.nx-site .nx-carrusel-puntos {
	position: absolute;
	left: 50%;
	bottom: var(--nx-space-2);
	z-index: 2;
	display: flex;
	gap: 0.25rem;
	transform: translateX(-50%);
}

body.nx-site .nx-carrusel-punto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 24px; /* área táctil; la barra visible es el ::before */
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

body.nx-site .nx-carrusel-punto::before {
	content: "";
	width: 24px;
	height: 3px;
	background-color: var(--nx-bg, #FFFFFF);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--nx-ink, #111111) 25%, transparent);
	opacity: 0.5;
	transition: opacity 300ms var(--nx-ease);
}

body.nx-site .nx-carrusel-punto[aria-current="true"]::before,
body.nx-site .nx-carrusel-punto:hover::before { opacity: 1; }

body.nx-site .nx-carrusel-punto:focus-visible {
	outline: 2px solid var(--nx-bg, #FFFFFF);
	outline-offset: 0;
}

@media (prefers-reduced-motion: no-preference) {
	body.nx-site .nx-carrusel { scroll-behavior: smooth; }
}

/*
 * Dentro del editor de Elementor el script no actúa: las diapositivas se muestran una debajo
 * de otra (sin barra de desplazamiento) para editarlas cómodamente. Clase interna
 * .elementor-editor-active: es la única forma de saber que se está en el editor.
 */
body.elementor-editor-active.nx-site .nx-carrusel {
	flex-direction: column;
	overflow: visible;
	scroll-snap-type: none;
}

body.elementor-editor-active.nx-site .nx-carrusel > .nx-slide + .nx-slide {
	border-top: 4px solid var(--nx-gold-line, #B08D57);
}

/* ---------- nx-convocatorias ---------- */

body.nx-site .nx-convocatorias article {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nx-space-2);
	padding: var(--nx-space-3) 0 0;
	border-top: 1px solid var(--nx-ink, #111111);
}

body.nx-site .nx-convocatorias article .nx-btn { margin-top: auto; }

/* Estado de la convocatoria: Abierta (lleno) / Cerrada (contorno, atenuado) */
body.nx-site .nx-estado {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	font-family: var(--nx-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nx-bg, #FFFFFF);
	background-color: var(--nx-accent, #861724);
	border: 1px solid var(--nx-accent, #861724);
}

body.nx-site .nx-estado.nx-estado-cerrada {
	color: var(--nx-muted, #555555);
	background-color: transparent;
	border-color: var(--nx-line, #E5E5E5);
}

/* Tarjeta cerrada: línea y título atenuados (mejora progresiva con :has) */
body.nx-site .nx-convocatorias article:has(.nx-estado-cerrada) { border-top-color: var(--nx-line, #E5E5E5); }
body.nx-site .nx-convocatorias article:has(.nx-estado-cerrada) h3 { color: var(--nx-muted, #555555); }

/* ---------- nx-actualidad ---------- */

body.nx-site .nx-actualidad article {
	display: flex;
	flex-direction: column;
	gap: var(--nx-space-2);
	padding: 0;
}

body.nx-site .nx-actualidad .nx-marcador { aspect-ratio: 4 / 3; }

/* ---------- nx-destacado ---------- */

body.nx-site .nx-destacado {
	align-items: flex-start;
	gap: var(--nx-space-2);
	background-color: var(--nx-ink, #111111);
	color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-destacado h2,
body.nx-site .nx-destacado p { color: var(--nx-bg, #FFFFFF); }

body.nx-site .nx-destacado .nx-btn {
	margin-top: var(--nx-space-2);
	color: var(--nx-ink, #111111);
	background-color: var(--nx-bg, #FFFFFF);
	border-color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-destacado .nx-btn:hover {
	color: var(--nx-bg, #FFFFFF);
	background-color: transparent;
}

body.nx-site .nx-destacado :focus-visible { outline-color: var(--nx-bg, #FFFFFF); }

/* ---------- nx-revive ---------- */

body.nx-site .nx-revive article {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nx-space-2);
	padding: 0;
}

body.nx-site .nx-revive .nx-marcador { aspect-ratio: 16 / 9; }

/* ---------- nx-newsletter ---------- */

body.nx-site .nx-newsletter {
	border-top: 1px solid var(--nx-line, #E5E5E5);
}

body.nx-site .nx-newsletter .nx-marcador { min-height: 8rem; }

/* ---------- nx-countdown (barra superior del encabezado) ---------- */

/*
 * Celular: una sola fila de menos de 56 px (6 + 40 + 6). Se oculta la etiqueta
 * "Faltan para…" y el reloj va abreviado sin segundos (23d 14h 05m).
 * Desde 768 px vuelven la etiqueta, las unidades completas y los segundos.
 */
body.nx-site .nx-countdown {
	display: flex;
	padding: 0.375rem var(--nx-gutter);
	background-color: var(--nx-ink, #111111);
	color: var(--nx-bg, #FFFFFF);
	font-size: 0.75rem;
}

/* La fase la pone countdown.js en data-fase; sin JS se ve la fase "antes" */
body.nx-site .nx-countdown[data-fase="despues"] { display: none; }

body.nx-site :is(.nx-countdown-antes, .nx-countdown-durante) {
	flex: 1;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0;
	min-width: 0;
}

body.nx-site .nx-countdown-durante { display: none; }
body.nx-site .nx-countdown[data-fase="durante"] .nx-countdown-antes { display: none; }
body.nx-site .nx-countdown[data-fase="durante"] .nx-countdown-durante { display: flex; }

body.nx-site .nx-countdown p {
	margin: 0;
	max-width: none;
	line-height: 1.35;
	color: var(--nx-bg, #FFFFFF);
}

/* Etiqueta "Faltan para…": solo desde 768 px */
body.nx-site .nx-countdown-antes > p:first-child { display: none; }

body.nx-site .nx-reloj {
	display: flex;
	gap: 0.5rem;
	padding: 0;
	min-width: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.nx-site .nx-reloj-celda {
	display: flex;
	align-items: baseline;
	gap: 0.125rem;
}

body.nx-site .nx-reloj-n {
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: 1rem;
}

/* Dorado del logo: permitido sobre fondo negro */
body.nx-site :is(.nx-reloj-u, .nx-reloj-c) {
	font-size: 0.75rem;
	color: var(--nx-gold, #E3D7A2);
}

body.nx-site .nx-reloj-u { display: none; }
body.nx-site .nx-reloj-seg { display: none; }

body.nx-site .nx-countdown .nx-btn {
	flex-shrink: 0;
	min-height: 40px;
	padding: 0 var(--nx-space-2);
	color: var(--nx-ink, #111111);
	background-color: var(--nx-bg, #FFFFFF);
	border-color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-countdown .nx-btn:hover {
	color: var(--nx-bg, #FFFFFF);
	background-color: transparent;
}

body.nx-site .nx-countdown :focus-visible { outline-color: var(--nx-bg, #FFFFFF); }

/* ---------- Encabezado fijo: solo nx-header ---------- */

/*
 * Clase interna .elementor-location-header: es el envoltorio de Theme Builder que contiene
 * nx-countdown y nx-header, y no admite clases propias (alternativa no disponible).
 * Se pega arriba corrido hacia arriba el alto de la barra (--nx-countdown-h, lo mide
 * countdown.js): la barra se va con el scroll y nx-header queda fijo.
 * Sin JavaScript la variable vale 0 y queda fijo el encabezado completo.
 */
body.nx-site .elementor-location-header {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--nx-countdown-h, 0px));
	z-index: 100;
}

/* Con sesión iniciada en celular (≤600 px) la barra de WordPress no es fija: no se descuenta */
@media (max-width: 600px) {
	body.nx-site.admin-bar .elementor-location-header {
		top: calc(-1 * var(--nx-countdown-h, 0px));
	}
}

/* ---------- nx-header (logo + menú) ---------- */

body.nx-site .nx-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-space-2);
	padding: var(--nx-space-1) var(--nx-gutter); /* compacto: 8 + 44 (hamburguesa) + 8 px */
	background-color: var(--nx-bg, #FFFFFF);
	border-bottom: 1px solid var(--nx-line, #E5E5E5);

	/*
	 * El menú es el widget V3 de Elementor Pro y su CSS generado lee las variables globales
	 * del Kit (--e-global-*). Se redefinen aquí, solo dentro del encabezado, para que tome
	 * los tokens del tema sin pelear especificidad con cada regla interna.
	 */
	--e-global-color-primary: var(--nx-ink, #111111);
	--e-global-color-secondary: var(--nx-muted, #555555);
	--e-global-color-text: var(--nx-ink, #111111);
	--e-global-color-accent: var(--nx-accent, #861724);
	--e-global-typography-primary-font-family: var(--nx-font-body);
	--e-global-typography-primary-font-weight: 500;
}

/* El widget del menú no suma margen inferior: logo y menú quedan centrados en la fila */
body.nx-site .nx-header .elementor-widget-nav-menu { margin: 0; }

/*
 * El logo va dentro de un enlace que es elemento flexible del encabezado: sin esto el
 * navegador lo encoge para dar sitio al menú y la imagen (max-width: 100%) se achica con él.
 */
body.nx-site .nx-header > :first-child { flex: 0 0 auto; }

body.nx-site .nx-header .nx-logo,
body.nx-site .nx-header .nx-logo img {
	display: block;
	width: 9.5rem;
	max-width: none;
	height: auto;
}

body.nx-site .nx-header .elementor-widget-nav-menu { flex: 0 1 auto; }

/*
 * Menú: sin clases nx- dentro del widget V3, así que se usan sus clases internas
 * (.elementor-nav-menu*, .elementor-item, .elementor-menu-toggle). Alternativa no disponible.
 */
body.nx-site .nx-header .elementor-nav-menu .elementor-item {
	font-family: var(--nx-font-body);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nx-ink, #111111);
}

body.nx-site .nx-header .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible, .elementor-item-active) {
	color: var(--nx-accent, #861724);
}

body.nx-site .nx-header .elementor-nav-menu--main .elementor-item::after {
	background-color: var(--nx-accent, #861724);
}

/*
 * Sin "display" aquí: Elementor muestra u oculta la hamburguesa según el ajuste
 * "Desplegable" del widget (tablet = hasta 1024 px). Solo se le da tamaño y aspecto.
 */
body.nx-site .nx-header .elementor-menu-toggle {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--nx-ink, #111111);
	background-color: transparent;
	border: 1px solid var(--nx-line, #E5E5E5);
	border-radius: 0;
}

/* Desplegable del celular: a lo ancho, bajo el encabezado */
body.nx-site .nx-header .elementor-nav-menu--dropdown {
	background-color: var(--nx-bg, #FFFFFF);
	border-top: 1px solid var(--nx-line, #E5E5E5);
	border-bottom: 1px solid var(--nx-line, #E5E5E5);
}

body.nx-site .nx-header .elementor-nav-menu--dropdown .elementor-item {
	padding: var(--nx-space-2) var(--nx-gutter);
	border-bottom: 1px solid var(--nx-line, #E5E5E5);
	background-color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-header .elementor-nav-menu--dropdown .elementor-item:is(:hover, :focus-visible) {
	color: var(--nx-bg, #FFFFFF);
	background-color: var(--nx-ink, #111111);
}

/* ---------- nx-footer ---------- */

body.nx-site .nx-footer {
	display: flex;
	flex-direction: column;
	gap: var(--nx-space-4);
	padding: var(--nx-space-5) var(--nx-gutter) var(--nx-space-4);
	background-color: var(--nx-ink, #111111);
	color: var(--nx-bg, #FFFFFF);
	border-top: 2px solid var(--nx-gold, #E3D7A2); /* dorado como adorno sobre negro */
}

body.nx-site .nx-footer-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nx-space-4);
	padding: 0;
}

body.nx-site .nx-footer-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nx-space-1);
	padding: 0;
	min-width: 0;
}

body.nx-site .nx-footer img {
	display: block;
	width: 11rem;
	height: auto;
}

/* Títulos de columna en dorado: permitido sobre fondo negro */
body.nx-site .nx-footer h2 {
	margin: 0 0 0.25rem;
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nx-gold, #E3D7A2);
}

body.nx-site .nx-footer p,
body.nx-site .nx-footer .nx-footer-col a {
	margin: 0;
	max-width: none;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-footer .nx-footer-col a {
	display: inline-block;
	width: fit-content;
	cursor: pointer;
}

body.nx-site .nx-footer .nx-footer-col a:hover { color: var(--nx-gold, #E3D7A2); }

body.nx-site .nx-footer :focus-visible { outline-color: var(--nx-bg, #FFFFFF); }

/* Redes: fila bajo las columnas, separada por una línea fina */
body.nx-site .nx-redes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nx-space-2);
	padding: var(--nx-space-3) 0 0;
	border-top: 1px solid var(--nx-muted, #555555);
}

/*
 * Widget "Íconos sociales" de Elementor (V3): sin clases nx- dentro, así que se usan sus
 * clases internas .elementor-social-icon*. Se anula el color oficial de cada red para
 * mantener un solo estilo: contorno blanco, ícono blanco; al pasar, fondo dorado.
 * Tamaño: 18 px de ícono + relleno = 44 px de área táctil.
 */
body.nx-site .nx-redes .elementor-social-icons-wrapper {
	--icon-size: 18px;
	--icon-padding: 0.7em;
	--grid-column-gap: var(--nx-space-1);
}

body.nx-site .nx-redes .elementor-social-icon {
	color: var(--nx-bg, #FFFFFF);
	background-color: transparent;
	border: 1px solid var(--nx-bg, #FFFFFF);
	border-radius: 0;
}

body.nx-site .nx-redes .elementor-social-icon i,
body.nx-site .nx-redes .elementor-social-icon svg {
	color: var(--nx-bg, #FFFFFF);
	fill: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-redes .elementor-social-icon:hover {
	background-color: var(--nx-gold, #E3D7A2);
	border-color: var(--nx-gold, #E3D7A2);
}

body.nx-site .nx-redes .elementor-social-icon:hover :is(i, svg) {
	color: var(--nx-ink, #111111);
	fill: var(--nx-ink, #111111);
}

/* Copyright en la franja de redes: en celular apilado y centrado con los íconos */
body.nx-site .nx-redes {
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

body.nx-site .nx-footer .nx-copy {
	margin: 0;
	max-width: none;
	font-family: var(--nx-font-body);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--nx-text-muted, #A3A3A3);
}

/* ---------- nx-registro (formulario de referidos) ---------- */

body.nx-site .nx-registro {
	display: flex;
	flex-direction: column;
	gap: var(--nx-space-2);
	padding: var(--nx-space-5) var(--nx-gutter);
	max-width: calc(48rem + 2 * var(--nx-gutter));
	margin-inline: auto;
}

body.nx-site .nx-registro h1 {
	margin: 0;
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 9vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

body.nx-site .nx-registro > p {
	color: var(--nx-muted, #555555);
	line-height: 1.55;
}

/* Formulario: 1 columna en celular, 2 desde 768 px */
body.nx-site .nx-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nx-space-3);
	padding: 0;
	margin-top: var(--nx-space-2);
}

body.nx-site .nx-form > :is(.nx-campo-ancho, .nx-autorizacion, .nx-btn),
body.nx-site .nx-form > :last-child,
body.nx-site .nx-form > :nth-last-child(2) {
	grid-column: 1 / -1;
}

body.nx-site .nx-campo {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 0;
	min-width: 0;
}

body.nx-site .nx-form label {
	font-family: var(--nx-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--nx-ink, #111111);
}

/* 16 px de texto: evita el zoom automático de iOS al enfocar */
body.nx-site .nx-form :is(input[type="text"], input[type="email"], input[type="tel"], select) {
	width: 100%;
	height: 48px;
	padding: 0 0.75rem;
	font-family: var(--nx-font-body);
	font-size: 1rem;
	color: var(--nx-ink, #111111);
	background-color: var(--nx-bg, #FFFFFF);
	border: 1px solid var(--nx-muted, #555555);
	border-radius: 0;
}

body.nx-site .nx-form :is(input, select):focus-visible {
	outline: 2px solid var(--nx-accent, #861724);
	outline-offset: 2px;
	border-color: var(--nx-ink, #111111);
}

/* Autorización Ley 1581: casilla + texto con enlace a la política */
body.nx-site .nx-autorizacion {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0;
}

/* Borde con contraste 3:1 como mínimo (el de Elementor es gris muy claro); marcada en vino */
body.nx-site .nx-autorizacion input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.125rem 0 0;
	color: var(--nx-bg, #FFFFFF);
	border: 1px solid var(--nx-muted, #555555);
}

body.nx-site .nx-autorizacion input[type="checkbox"]:checked {
	background-color: var(--nx-accent, #861724);
	border-color: var(--nx-accent, #861724);
}

body.nx-site .nx-autorizacion label {
	font-weight: 400;
	line-height: 1.5;
	color: var(--nx-muted, #555555);
}

body.nx-site .nx-autorizacion a {
	color: var(--nx-accent, #861724);
}

body.nx-site .nx-form .nx-btn {
	justify-self: start;
	min-height: 48px;
	cursor: pointer;
}

/*
 * Campos que el usuario no ve: nx-origen (utm) y nx-hp (trampa antispam).
 * Ocultos visualmente pero presentes en el formulario (se envían). No se usa display:none
 * porque algunos bots lo detectan y se saltan la trampa.
 */
body.nx-site .nx-oculto {
	position: absolute !important;
	width: 1px;
	min-width: 0;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Registro de compradores ([nx_registro_compradores], inc/registro-compradores.php) ---------- */

body.nx-site .nx-rc-form [hidden] { display: none; }

body.nx-site .nx-rc-req { color: var(--nx-accent, #861724); }
body.nx-site .nx-rc-opc { font-weight: 400; color: var(--nx-muted, #555555); }

/* Error junto al campo (vino, 9,71:1) y borde del campo marcado */
body.nx-site .nx-rc-error {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--nx-accent, #861724);
}

body.nx-site .nx-form [aria-invalid="true"] { border: 2px solid var(--nx-accent, #861724); }

body.nx-site .nx-rc-aviso {
	padding: var(--nx-space-2);
	border-left: 4px solid var(--nx-accent, #861724);
	background-color: var(--nx-surface, #F5F5F5);
	font-weight: 500;
	color: var(--nx-ink, #111111);
}

body.nx-site .nx-rc-aviso:focus { outline: 2px solid var(--nx-accent, #861724); outline-offset: 2px; }

/* ¿Compras al por mayor?: Sí / No en línea, con área de toque de 44 px */
body.nx-site .nx-rc-opciones { margin: 0; border: 0; }
body.nx-site .nx-rc-opciones legend {
	padding: 0;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--nx-ink, #111111);
}
body.nx-site .nx-rc-opciones > div { display: flex; gap: var(--nx-space-3); }
body.nx-site .nx-rc-opciones label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-size: 1rem;
	font-weight: 400;
}
body.nx-site .nx-rc-opciones input { width: 1.25rem; height: 1.25rem; accent-color: var(--nx-accent, #861724); }

body.nx-site .nx-rc-nota { margin: 0; font-size: 0.875rem; color: var(--nx-muted, #555555); }

/* Pantalla de éxito: QR grande, código y botón de descarga */
body.nx-site .nx-rc-exito {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nx-space-2);
	padding: var(--nx-space-4) var(--nx-space-3);
	text-align: center;
	background-color: var(--nx-surface, #F5F5F5);
	border-top: 2px solid var(--nx-gold-line, #B08D57);
}

body.nx-site .nx-rc-exito h2 {
	margin: 0;
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 6vw, 2.25rem);
	text-transform: uppercase;
	color: var(--nx-ink, #111111);
}

body.nx-site .nx-rc-exito p { margin: 0; max-width: 32rem; color: var(--nx-muted, #555555); line-height: 1.55; }
body.nx-site .nx-rc-exito strong { color: var(--nx-ink, #111111); overflow-wrap: anywhere; }
body.nx-site .nx-rc-exito a:not(.nx-btn) { color: var(--nx-accent, #861724); }

body.nx-site .nx-rc-qr {
	width: min(260px, 70vw);
	height: auto;
	background-color: var(--nx-bg, #FFFFFF);
	image-rendering: pixelated;
}

body.nx-site .nx-rc-codigo {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--nx-ink, #111111);
}

body.nx-site .nx-rc-exito .nx-btn { min-height: 48px; }
body.nx-site .nx-rc-exito .nx-rc-fechas { font-weight: 500; color: var(--nx-ink, #111111); }

/*
 * nx-pendiente: elemento preparado pero oculto hasta que el cliente lo confirme
 * (p. ej. la tarjeta "Regístrate como comprador" de Participa). Para mostrarlo, quitar la clase.
 * En el editor de Elementor se ve con borde punteado para poder editarlo.
 */
body.nx-site .nx-pendiente { display: none !important; }
body.elementor-editor-active .nx-pendiente { display: flex !important; outline: 2px dashed var(--nx-gold-line, #B08D57); }

/* ---------- Páginas interiores (El evento, Participa, legales) ---------- */

body.nx-site :is(.nx-pagina-hero, .nx-evento-datos, .nx-evento-agenda, .nx-participa, .nx-legal) {
	display: flex;
	flex-direction: column;
	gap: var(--nx-space-3);
	padding: var(--nx-space-5) var(--nx-gutter-pagina);
	background-color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-pagina-hero { padding-bottom: var(--nx-space-3); }

body.nx-site :is(.nx-pagina-hero, .nx-legal) h1 {
	margin: 0;
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 10vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--nx-ink, #111111);
}

body.nx-site :is(.nx-evento-agenda, .nx-participa) h2 {
	margin: 0;
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 7vw, 3rem);
	line-height: 1.05;
	text-transform: uppercase;
}

body.nx-site :is(.nx-pagina-hero, .nx-evento-datos, .nx-evento-agenda, .nx-participa, .nx-legal) p {
	color: var(--nx-muted, #555555);
	line-height: 1.6;
}

body.nx-site :is(.nx-pagina-hero, .nx-evento-datos, .nx-evento-agenda, .nx-participa, .nx-legal) :is(p, .nx-legal-lista) a {
	color: var(--nx-accent, #861724);
}

body.nx-site .nx-legal { max-width: calc(48rem + 2 * var(--nx-gutter-pagina)); }

/* Textos legales (Política de datos, Términos): título más contenido, una sección por H2 */
body.nx-site .nx-legal h1 { font-size: clamp(1.75rem, 7vw, 3rem); }

body.nx-site .nx-legal-seccion {
	display: flex;
	flex-direction: column;
	gap: var(--nx-space-1);
	padding: var(--nx-space-2) 0 0;
	border-top: 1px solid var(--nx-line, #E5E5E5);
}

body.nx-site .nx-legal h2 {
	margin: 0 0 var(--nx-space-1);
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: clamp(1.125rem, 4.5vw, 1.375rem);
	line-height: 1.25;
	color: var(--nx-ink, #111111);
}

/* Subtítulos dentro de una sección legal (7.1, 14.2…) */
body.nx-site .nx-legal h3 {
	margin: var(--nx-space-1) 0 0;
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--nx-ink, #111111);
}

body.nx-site :is(.nx-legal-lista, .nx-texto-lista) {
	display: block;
	color: var(--nx-muted, #555555);
	line-height: 1.6;
}

body.nx-site :is(.nx-legal-lista, .nx-texto-lista) :is(ul, ol) {
	margin: 0;
	padding-left: 1.25rem;
}

body.nx-site :is(.nx-legal-lista, .nx-texto-lista) li + li { margin-top: 0.375rem; }

body.nx-site :is(.nx-legal-lista, .nx-texto-lista) li::marker { color: var(--nx-ink, #111111); }

body.nx-site .nx-legal strong { font-weight: 600; color: var(--nx-ink, #111111); }

/*
 * Textos [COMPLETAR] que debe llenar el cliente: resaltado dorado bien visible. El campo de texto
 * de Elementor quita las clases de los <span>, por eso se marcan con <u> (legales y páginas
 * interiores, p. ej. Rueda de Negocios).
 */
body.nx-site :is(.nx-legal, .nx-pagina-hero, .nx-evento-datos, .nx-participa, .nx-faq) u {
	padding: 0.05em 0.3em;
	background-color: var(--nx-gold-2, #EECD87);
	color: var(--nx-ink, #111111);
	font-weight: 600;
	text-decoration: none;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Tarjeta: fondo gris claro con una línea dorada arriba (adorno, no texto) */
body.nx-site .nx-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nx-space-2);
	padding: var(--nx-space-4) var(--nx-space-3);
	background-color: var(--nx-surface, #F5F5F5);
}

/* Línea dorada superior: pseudo-elemento para poder "dibujarla" con scaleX (ver Animaciones) */
body.nx-site .nx-tarjeta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--nx-gold-line, #B08D57);
	transform-origin: left center;
}

body.nx-site .nx-tarjeta h3 {
	margin: 0;
	font-family: var(--nx-font-display);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--nx-ink, #111111);
}

body.nx-site .nx-tarjeta .nx-btn { margin-top: auto; }

/* Menos aire entre el subtítulo del encabezado y el primer bloque */
body.nx-site .nx-pagina-hero + section { padding-top: var(--nx-space-2); }

/*
 * El evento · datos clave en celular (<768 px): una sola tarjeta con 3 filas
 * (etiqueta + valor) separadas por una línea fina. Desde 768 px vuelven las 3 columnas.
 */
body.nx-site .nx-evento-datos .nx-lista {
	gap: 0;
	background-color: var(--nx-surface, #F5F5F5);
	border-top: 2px solid var(--nx-gold-line, #B08D57);
}

body.nx-site .nx-evento-datos .nx-tarjeta {
	gap: 0.25rem;
	padding: var(--nx-space-2) var(--nx-space-3);
	background-color: transparent;
}

/* En celular es una sola tarjeta: la línea dorada es la del contenedor, no la de cada fila */
body.nx-site .nx-evento-datos .nx-tarjeta::before { display: none; }

body.nx-site .nx-evento-datos .nx-tarjeta + .nx-tarjeta {
	border-top: 1px solid var(--nx-line, #E5E5E5);
}

/* Botones: primario (vino, texto blanco 9,71:1) y secundario (contorno negro) */
body.nx-site .nx-btn.nx-btn-primario {
	color: var(--nx-bg, #FFFFFF);
	background-color: var(--nx-accent, #861724);
	border-color: var(--nx-accent, #861724);
}

body.nx-site .nx-btn.nx-btn-primario:is(:hover, :focus-visible) {
	color: var(--nx-bg, #FFFFFF);
	background-color: var(--nx-ink, #111111);
	border-color: var(--nx-ink, #111111);
}

body.nx-site .nx-btn.nx-btn-secundario {
	color: var(--nx-ink, #111111);
	background-color: transparent;
	border: 1px solid var(--nx-ink, #111111);
}

body.nx-site .nx-btn.nx-btn-secundario:is(:hover, :focus-visible) {
	color: var(--nx-bg, #FFFFFF);
	background-color: var(--nx-ink, #111111);
}

/* Botón sobre una franja de fondo vino (clase nx-sobre-acento en la sección): primario
   invertido, fondo blanco y texto vino (9,71:1); al pasar el cursor o con foco, negro. */
body.nx-site .nx-sobre-acento .nx-btn {
	color: var(--nx-accent, #861724);
	background-color: var(--nx-bg, #FFFFFF);
	border-color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-sobre-acento .nx-btn:is(:hover, :focus-visible) {
	color: var(--nx-bg, #FFFFFF);
	background-color: var(--nx-ink, #111111);
	border-color: var(--nx-ink, #111111);
}

body.nx-site .nx-sobre-acento .nx-btn:focus-visible { outline-color: var(--nx-bg, #FFFFFF); }

/* Celular: botones de El evento y Participa a todo el ancho */
body.nx-site :is(.nx-evento-agenda, .nx-participa) .nx-btn {
	align-self: stretch;
	justify-content: center;
	width: 100%;
}

/*
 * Íconos del widget clásico "Ícono" (V3): el MCP no los edita y traen el color escrito a mano
 * con reglas de 5 clases (.elementor-ID .elementor-element.elementor-element-X.elementor-view-*
 * .elementor-icon). Se usan sus clases internas (sin alternativa) con una más de especificidad.
 *   · Datos de contacto (.nx-dato): dorado de líneas (íconos, nunca texto).
 *   · Recuadros de imagen pendiente (.nx-marcador): gris de texto atenuado.
 */
html body.nx-site .nx-dato .elementor-widget-icon:is(.elementor-view-default, .elementor-view-framed) .elementor-icon {
	color: var(--nx-gold-line, #B08D57);
	border-color: var(--nx-gold-line, #B08D57);
}
html body.nx-site .nx-dato .elementor-widget-icon:is(.elementor-view-default, .elementor-view-framed) .elementor-icon svg {
	fill: var(--nx-gold-line, #B08D57);
}
html body.nx-site .nx-dato .elementor-widget-icon.elementor-view-stacked .elementor-icon {
	background-color: var(--nx-gold-line, #B08D57);
}

html body.nx-site .nx-marcador .elementor-widget-icon:is(.elementor-view-default, .elementor-view-framed) .elementor-icon {
	color: var(--nx-muted, #555555);
	border-color: var(--nx-muted, #555555);
}
html body.nx-site .nx-marcador .elementor-widget-icon:is(.elementor-view-default, .elementor-view-framed) .elementor-icon svg {
	fill: var(--nx-muted, #555555);
}
html body.nx-site .nx-marcador .elementor-widget-icon.elementor-view-stacked .elementor-icon {
	background-color: var(--nx-muted, #555555);
}

/* ==========================================================================
   ANIMACIONES (assets/js/animaciones.js). Movimiento solo con transform y opacity;
   300-600 ms; una vez por elemento; nada si el usuario pidió menos movimiento.
   Sin JS no se oculta nada: el estado oculto depende de html.nx-js, que pone el script.
   ========================================================================== */

/* 1-2. Aparición al entrar en pantalla y escalonado en grupos (--nx-retraso lo pone el JS) */
/* La transición existe solo al aparecer (el ocultado inicial es instantáneo) */
body.nx-site .nx-revelar.nx-visible:not(.nx-listo) {
	transition:
		opacity 600ms var(--nx-ease) var(--nx-retraso, 0ms),
		transform 600ms var(--nx-ease) var(--nx-retraso, 0ms);
}

html.nx-js body.nx-site .nx-revelar:not(.nx-visible) {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: none; /* ocultar es instantáneo (también anula la transición por defecto de .e-con) */
}

/* 3. Línea dorada de las tarjetas: se dibuja de izquierda a derecha tras la aparición */
body.nx-site .nx-tarjeta.nx-visible:not(.nx-listo)::before {
	transition: transform 600ms var(--nx-ease) calc(var(--nx-retraso, 0ms) + 150ms);
}

html.nx-js body.nx-site .nx-tarjeta.nx-revelar:not(.nx-visible)::before {
	transform: scaleX(0);
}

/* 4. Tarjetas: se elevan 3 px con una sombra suave (pseudo-elemento que solo cambia de
      opacidad). Solo en dispositivos con cursor. */
body.nx-site :is(.nx-tarjeta, .nx-convocatorias article, .nx-revelar-grupo > article) {
	position: relative;
	isolation: isolate; /* la sombra (z-index -1) queda dentro de la tarjeta, no tras la sección */
	transition: transform 300ms var(--nx-ease);
}

body.nx-site :is(.nx-tarjeta, .nx-convocatorias article, .nx-revelar-grupo > article)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--nx-ink, #111111) 35%, transparent);
	opacity: 0;
	transition: opacity 300ms var(--nx-ease);
	pointer-events: none;
}

@media (hover: hover) {
	body.nx-site :is(.nx-tarjeta, .nx-convocatorias article, .nx-revelar-grupo > article):not(.nx-evento-datos .nx-tarjeta, .nx-actualidad article, .nx-revive article):is(.nx-listo, :not(.nx-revelar)):hover {
		transform: translate3d(0, -3px, 0);
	}
	body.nx-site :is(.nx-tarjeta, .nx-convocatorias article, .nx-revelar-grupo > article):not(.nx-evento-datos .nx-tarjeta, .nx-actualidad article, .nx-revive article):hover::after {
		opacity: 1;
	}
}

/* 6. Enlaces de texto: subrayado tenue fijo (se distinguen sin depender del color) y una
      línea sólida que se desliza al pasar el cursor o con el foco de teclado */
body.nx-site :is(:is(.nx-pagina-hero, .nx-evento-datos, .nx-evento-agenda, .nx-participa, .nx-legal) :is(p, .nx-legal-lista) a, .nx-autorizacion a, .nx-footer .nx-footer-col a) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 400ms var(--nx-ease), color 300ms var(--nx-ease);
}

body.nx-site :is(:is(.nx-pagina-hero, .nx-evento-datos, .nx-evento-agenda, .nx-participa, .nx-legal) :is(p, .nx-legal-lista) a, .nx-autorizacion a, .nx-footer .nx-footer-col a):is(:hover, :focus-visible) {
	background-size: 100% 1px;
}

/* 7. Encabezado fijo: sombra inferior suave al hacer scroll (html.nx-scroll) */
body.nx-site .nx-header { position: relative; }

body.nx-site .nx-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 12px;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--nx-ink, #111111) 8%, transparent), transparent);
	opacity: 0;
	transition: opacity 300ms var(--nx-ease);
	pointer-events: none;
}

html.nx-scroll body.nx-site .nx-header::after { opacity: 1; }

/* 8. Cuenta regresiva: fundido breve del número que cambia (ancho fijo con tabular-nums) */
@keyframes nx-tic {
	from { opacity: 0.35; }
	to { opacity: 1; }
}

body.nx-site .nx-reloj-n.nx-tic { animation: nx-tic 300ms var(--nx-ease); }

/* 9. Fotos (galería y recuadros de imagen): zoom leve recortado dentro del marco */
body.nx-site :is(.nx-marcador, .nx-foto) { overflow: hidden; }

body.nx-site :is(.nx-marcador, .nx-foto) img {
	transition: transform 500ms var(--nx-ease);
}

@media (hover: hover) {
	body.nx-site :is(.nx-marcador, .nx-foto):hover img { transform: scale(1.03); }
}

/* 10. Carga de página (html.nx-carga, lo pone un script en línea en <head> antes del primer
       pintado). Solo el primer bloque de cada página; el H1 y el banner NO se animan (LCP).
       Animaciones CSS con fill "backwards": al terminar quedan los estilos normales.
       Selector interno [data-elementor-type="wp-page"]: único envoltorio común del contenido. */
@keyframes nx-entrada {
	from { opacity: 0; transform: translate3d(0, 12px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes nx-trazo {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* Línea dorada corta bajo el encabezado de la página (adorno; se ve también sin animación).
   Se excluyen los primeros bloques largos (formulario de Registro, textos legales) y el banner
   de Inicio, donde la línea va dentro de nx-hero-texto. */
body.nx-site :is(.elementor[data-elementor-type="wp-page"] > :first-child:not(.nx-hero, .nx-registro, .nx-legal), .nx-hero .nx-hero-texto)::after {
	content: "";
	display: block;
	flex: none;
	width: 48px;
	height: 2px;
	background-color: var(--nx-gold-line, #B08D57);
	transform-origin: left center;
}

html.nx-carga body.nx-site :is(.elementor[data-elementor-type="wp-page"] > :first-child:not(.nx-hero, .nx-registro, .nx-legal), .nx-hero .nx-hero-texto)::after {
	animation: nx-trazo 600ms var(--nx-ease) 250ms backwards;
}

/* Subtítulo y botones del primer bloque: fundido + 12 px, uno tras otro */
html.nx-carga body.nx-site :is(.elementor[data-elementor-type="wp-page"] > :first-child > p, .nx-hero .nx-hero-texto > p) {
	animation: nx-entrada 500ms var(--nx-ease) 120ms backwards;
}

html.nx-carga body.nx-site .elementor[data-elementor-type="wp-page"] > :first-child > .nx-btn {
	animation: nx-entrada 500ms var(--nx-ease) 220ms backwards;
}

/* Menos movimiento: todo aparece directo, sin desplazamientos ni transiciones */
@media (prefers-reduced-motion: reduce) {
	body.nx-site .nx-revelar,
	body.nx-site .nx-tarjeta::before,
	body.nx-site :is(.nx-tarjeta, .nx-convocatorias article, .nx-revelar-grupo > article),
	body.nx-site :is(.nx-marcador, .nx-foto) img {
		transition: none !important;
		transform: none !important;
	}
	body.nx-site .nx-revelar { opacity: 1 !important; }
	body.nx-site .nx-reloj-n.nx-tic { animation: none; }
	html.nx-carga body.nx-site * ,
	html.nx-carga body.nx-site *::after { animation: none !important; }
}

/* ---------- nx-ferias (Inicio) y página Ferias (nx-ferias-detalle) ---------- */

body.nx-site .nx-ferias {
	display: flex;
	flex-direction: column;
	gap: var(--nx-space-3);
	padding: var(--nx-space-5) var(--nx-gutter);
	background-color: var(--nx-bg, #FFFFFF);
}

body.nx-site :is(.nx-ferias, .nx-ferias-detalle) :is(h2) {
	margin: 0;
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 7vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--nx-ink, #111111);
}

body.nx-site .nx-ferias > p {
	color: var(--nx-muted, #555555);
	line-height: 1.55;
}

/* 1 columna en celular · 2 en tablet · 4 en escritorio (ver media queries) */
body.nx-site .nx-ferias .nx-lista { gap: var(--nx-space-3); }

/* Tarjeta de feria: fondo negro para que los logos blancos se vean; línea dorada de nx-tarjeta */
body.nx-site .nx-tarjeta.nx-feria {
	align-items: stretch;
	gap: var(--nx-space-1);
	padding: var(--nx-space-4) var(--nx-space-3) var(--nx-space-3);
	background-color: var(--nx-ink, #111111);
	color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-tarjeta.nx-feria h3 {
	margin-top: var(--nx-space-2);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-tarjeta.nx-feria p {
	margin: 0;
	max-width: none;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--nx-text-muted, #A3A3A3); /* 7,49:1 sobre negro */
}

/* Logo: misma altura en todas las tarjetas. Si no hay logo, el nombre en texto ocupa el
   mismo espacio (dorado del logo, permitido sobre fondo negro). */
body.nx-site .nx-feria-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4rem;
	padding: 0;
	min-width: 0;
}

body.nx-site .nx-feria-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 3rem;
	object-fit: contain;
}

body.nx-site .nx-feria-logo :is(p, span) {
	margin: 0;
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--nx-gold, #E3D7A2);
}

/* Acciones al pie: con o sin enlace de brochure, los botones quedan a la misma altura
   (se reserva la línea del enlace). */
body.nx-site .nx-feria-acciones {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0;
	margin-top: auto;
	padding-top: var(--nx-space-2);
}

/* En la tarjeta: dos filas fijas (botón · enlace de brochure). Sin brochure la segunda fila
   queda vacía, así todas las tarjetas alinean sus botones. */
body.nx-site .nx-tarjeta.nx-feria .nx-feria-acciones {
	display: grid;
	grid-template-rows: auto 1.5rem;
	justify-items: start;
	row-gap: 0.75rem;
}

body.nx-site .nx-tarjeta.nx-feria .nx-feria-acciones a:not(.nx-btn),
body.nx-site .nx-tarjeta.nx-feria .nx-feria-acciones a:not(.nx-btn) p {
	display: block;
	margin: 0;
	line-height: 1.5rem;
	color: var(--nx-gold, #E3D7A2);
}

/* Botón secundario invertido sobre la tarjeta negra */
body.nx-site .nx-feria .nx-btn.nx-btn-secundario {
	color: var(--nx-bg, #FFFFFF);
	background-color: transparent;
	border-color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-feria .nx-btn.nx-btn-secundario:is(:hover, :focus-visible) {
	color: var(--nx-ink, #111111);
	background-color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-feria :focus-visible { outline-color: var(--nx-bg, #FFFFFF); }

/* Enlace "Descargar brochure (PDF)" de la tarjeta */
body.nx-site .nx-feria .nx-feria-acciones a:not(.nx-btn) {
	font-size: 0.875rem;
	color: var(--nx-gold, #E3D7A2);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

/* Página Ferias: un bloque por feria, fondos alternos */
body.nx-site .nx-ferias-detalle {
	display: flex;
	flex-direction: column;
	gap: var(--nx-space-2);
	padding: var(--nx-space-5) var(--nx-gutter-pagina);
	background-color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-ferias-detalle:nth-of-type(even) { background-color: var(--nx-surface, #F5F5F5); }

/* El encabezado fijo no tapa el título al llegar por el ancla (#cantex…) */
body.nx-site .nx-ferias-detalle h2 { scroll-margin-top: 8rem; }

body.nx-site .nx-ferias-detalle p {
	margin: 0;
	color: var(--nx-muted, #555555);
	line-height: 1.6;
}

body.nx-site .nx-ferias-detalle .nx-feria-logo {
	width: 100%;
	max-width: 18rem;
	height: 8rem;
	padding: var(--nx-space-3);
	background-color: var(--nx-ink, #111111);
}

body.nx-site .nx-ferias-detalle .nx-feria-logo img { max-height: 4rem; }

body.nx-site .nx-ferias-detalle .nx-feria-acciones {
	flex-direction: column;
	align-items: stretch;
	margin-top: 0;
}

body.nx-site .nx-ferias-detalle .nx-btn { justify-content: center; }

/* ---------- Contacto (página 96): tarjeta de datos centrada ---------- */

/* Sin la columna del formulario, la tarjeta ya no se estira a todo el ancho */
body.nx-site .nx-contacto-tarjeta {
	width: 100%;
	max-width: 48rem;
	margin-inline: auto;
	padding: var(--nx-space-4) var(--nx-space-3);
}

/* Correos: área (General, Comercial…) y dirección; en celular uno debajo del otro */
body.nx-site .nx-correos { gap: var(--nx-space-1); }

body.nx-site .nx-correos p {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	max-width: none;
}

body.nx-site .nx-correos p span {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nx-muted, #555555);
}

body.nx-site .nx-correos p a {
	overflow-wrap: anywhere; /* direcciones largas no desbordan en 375 px */
	color: var(--nx-accent, #861724);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

body.nx-site .nx-correos p a:is(:hover, :focus-visible) { text-decoration-color: currentColor; }

/* ---------- El evento · "Cómo llegar" (nx-evento-mapa) ---------- */

body.nx-site .nx-evento-mapa {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nx-space-3);
	padding: var(--nx-space-2) var(--nx-gutter-pagina) var(--nx-space-5);
	background-color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-evento-mapa-texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nx-space-2);
	padding: 0;
	min-width: 0;
}

body.nx-site .nx-evento-mapa h2 {
	margin: 0;
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 7vw, 3rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--nx-ink, #111111);
}

body.nx-site .nx-evento-mapa p {
	margin: 0;
	color: var(--nx-muted, #555555);
	line-height: 1.6;
}

/* Dirección: el dato principal de la columna */
body.nx-site .nx-evento-mapa-texto h2 + p {
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--nx-ink, #111111);
}

body.nx-site .nx-evento-mapa .nx-btn {
	align-self: stretch;
	justify-content: center;
	margin-top: var(--nx-space-1);
}

/* Marco del mapa: proporción fija y línea dorada arriba, como las tarjetas */
body.nx-site .nx-mapa {
	position: relative;
	width: 100%;
	min-width: 0;
	aspect-ratio: 4 / 3;
	padding: 0;
	overflow: hidden;
	background-color: var(--nx-surface, #F5F5F5);
	border-top: 2px solid var(--nx-gold-line, #B08D57);
}

/*
 * El mapa es el widget clásico "Google Maps" (V3): su alto lo fija Elementor con una regla de
 * 4 clases sobre el iframe. Se usan sus clases internas (sin alternativa) para que llene el marco.
 */
body.nx-site .nx-mapa .elementor-widget-google_maps,
body.nx-site .nx-mapa .elementor-widget-google_maps .elementor-widget-container,
body.nx-site .nx-mapa .elementor-widget-google_maps .elementor-custom-embed {
	height: 100%;
	margin: 0;
}

body.nx-site .nx-mapa .elementor-widget-google_maps .elementor-custom-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Marco de foto (nx-foto): proporción fija, la imagen llena y se recorta ---------- */

body.nx-site .nx-foto {
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	background-color: var(--nx-line, #E5E5E5);
}

body.nx-site .nx-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El enlace opcional de la imagen también llena el marco */
body.nx-site .nx-foto > a { display: block; width: 100%; height: 100%; }

/* ---------- Rueda de Negocios (página /rueda-de-negocios, ver inc/rueda.php) ---------- */

/*
 * inc/rueda.php pone en <body> nx-rueda-abierta, nx-rueda-proximamente (precio 0, sin publicar)
 * o nx-rueda-agotada. Con las dos últimas se ocultan los botones "Registrarse" y se ve el aviso.
 */
/* p.… para ganar a "body.nx-site .nx-pagina-hero p" (color atenuado) */
body.nx-site p.nx-rueda-aviso {
	display: none;
	align-self: flex-start;
	margin: 0;
	padding: 0.75rem 1.25rem;
	border: 1px solid currentColor;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--nx-accent, #861724);
}

body.nx-site.nx-rueda-proximamente .nx-rueda-aviso-proximamente,
body.nx-site.nx-rueda-agotada .nx-rueda-aviso-agotada { display: block; }

body.nx-site:is(.nx-rueda-proximamente, .nx-rueda-agotada) .nx-rueda-registro { display: none; }

/* En el editor de Elementor se ven los dos avisos para poder editarlos */
body.elementor-editor-active p.nx-rueda-aviso { display: block; }

/* Botón del encabezado de la página: a todo el ancho en celular */
body.nx-site .nx-pagina-hero .nx-btn { align-self: stretch; text-align: center; }

/* Franja final de fondo vino (texto blanco 9,71:1); sus botones se invierten con nx-sobre-acento */
body.nx-site .nx-rueda-cierre {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nx-space-2);
	padding: var(--nx-space-5) var(--nx-gutter-pagina);
	background-color: var(--nx-accent, #861724);
	color: var(--nx-bg, #FFFFFF);
}

body.nx-site .nx-rueda-cierre :is(h2, p, .nx-rueda-aviso) { margin: 0; color: var(--nx-bg, #FFFFFF); }

body.nx-site .nx-rueda-cierre h2 {
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 7vw, 3rem);
	line-height: 1.05;
	text-transform: uppercase;
}

body.nx-site .nx-rueda-cierre .nx-btn { align-self: stretch; justify-content: center; }

/* Preguntas frecuentes: acordeón V4 (<details>/<summary>) con líneas finas */
body.nx-site .nx-faq {
	display: flex;
	flex-direction: column;
	padding: 0;
	border-top: 1px solid var(--nx-line, #E5E5E5);
}

body.nx-site .nx-faq details { border-bottom: 1px solid var(--nx-line, #E5E5E5); }

body.nx-site .nx-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-space-2);
	min-height: 44px;
	padding: var(--nx-space-2) 0;
	cursor: pointer;
	font-weight: 600;
	color: var(--nx-ink, #111111);
}

body.nx-site .nx-faq summary :is(p, span, h3) { margin: 0; color: inherit; font-weight: inherit; }

body.nx-site .nx-faq summary:focus-visible {
	outline: 2px solid var(--nx-accent, #861724);
	outline-offset: 2px;
}

body.nx-site .nx-faq details > :not(summary) { padding: 0 0 var(--nx-space-2); }

/*
 * Finalizar compra: checkout en bloques de WooCommerce (página 368, no es de Elementor).
 * Se usan sus clases internas (sin alternativa: el bloque no admite clases propias por campo).
 * WooCommerce ya lo deja en una columna por debajo de 700 px.
 */
body.nx-site.woocommerce-checkout .site-main {
	max-width: none;
	margin: 0;
	padding: var(--nx-space-4) var(--nx-gutter-pagina) var(--nx-space-6);
}

body.nx-site.woocommerce-checkout .page-header .entry-title {
	margin: 0 0 var(--nx-space-3);
	font-family: var(--nx-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 8vw, 3.5rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--nx-ink, #111111);
}

body.nx-site .wc-block-checkout {
	font-family: var(--nx-font-body);
	color: var(--nx-ink, #111111);
}

body.nx-site .wc-block-checkout .wc-block-components-checkout-step__title {
	font-family: var(--nx-font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

body.nx-site .wc-block-checkout .wc-block-components-checkout-step__description { color: var(--nx-muted, #555555); }

body.nx-site .wc-block-checkout a { color: var(--nx-accent, #861724); }

body.nx-site .wc-block-checkout .wc-block-components-checkout-place-order-button {
	min-height: 48px;
	border: 1px solid var(--nx-accent, #861724);
	border-radius: 2px;
	background-color: var(--nx-accent, #861724);
	color: var(--nx-bg, #FFFFFF);
	font-weight: 600;
	transition: background-color 300ms var(--nx-ease), border-color 300ms var(--nx-ease);
}

body.nx-site .wc-block-checkout .wc-block-components-checkout-place-order-button:is(:hover, :focus-visible) {
	border-color: var(--nx-ink, #111111);
	background-color: var(--nx-ink, #111111);
	color: var(--nx-bg, #FFFFFF);
}

body.nx-site .wc-block-checkout .wc-block-components-checkout-place-order-button:focus-visible {
	outline: 2px solid var(--nx-accent, #861724);
	outline-offset: 2px;
}

/* ---------- Pantallas medianas y grandes ---------- */

@media (min-width: 768px) {
	body.nx-site :is(.nx-convocatorias, .nx-actualidad, .nx-destacado, .nx-revive, .nx-newsletter) {
		padding-block: var(--nx-space-6);
		gap: var(--nx-space-4);
	}

	body.nx-site .nx-solo-escritorio { display: flex; }
	body.nx-site .nx-solo-movil { display: none; }

	body.nx-site .nx-revive .nx-lista { grid-template-columns: repeat(2, 1fr); }

	/* Barra de cuenta regresiva: etiqueta, unidades completas y segundos */
	body.nx-site .nx-countdown { padding-block: var(--nx-space-1); font-size: 0.8125rem; }
	body.nx-site :is(.nx-countdown-antes, .nx-countdown-durante) { gap: var(--nx-space-2); }
	body.nx-site .nx-countdown-antes > p:first-child { display: block; margin-right: auto; }
	body.nx-site .nx-reloj { gap: var(--nx-space-2); }
	body.nx-site .nx-reloj-celda { gap: 0.25rem; }
	body.nx-site .nx-reloj-n { font-size: 1.125rem; }
	body.nx-site .nx-reloj-u { display: inline; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
	body.nx-site .nx-reloj-c { display: none; }
	body.nx-site .nx-reloj-seg { display: flex; }
	body.nx-site .nx-countdown .nx-btn { min-height: 44px; padding: 0 var(--nx-space-3); }

	body.nx-site .nx-header { padding-block: 0.75rem; }
	body.nx-site .nx-header .nx-logo,
	body.nx-site .nx-header .nx-logo img { width: 12.5rem; }

	body.nx-site .nx-footer { padding-top: var(--nx-space-6); }
	body.nx-site .nx-footer-cols { grid-template-columns: 1.4fr 1fr 1fr; }

	body.nx-site .nx-registro { padding-block: var(--nx-space-6); }

	/* Cómo llegar: mapa más ancho y botón con su ancho natural */
	body.nx-site .nx-evento-mapa { padding-bottom: var(--nx-space-6); }
	body.nx-site .nx-mapa { aspect-ratio: 16 / 9; }
	body.nx-site .nx-evento-mapa .nx-btn { align-self: flex-start; }

	/* Contacto: más aire en la tarjeta y cada correo en una fila (área · dirección) */
	body.nx-site .nx-contacto-tarjeta { padding: var(--nx-space-5) var(--nx-space-5); }
	body.nx-site .nx-correos p {
		display: grid;
		grid-template-columns: 8.5rem 1fr;
		align-items: baseline;
		column-gap: var(--nx-space-2);
	}

	/* Ferias: 2 columnas en tablet; bloques de la página con el logo a la izquierda */
	body.nx-site .nx-ferias { padding-block: var(--nx-space-6); }
	body.nx-site .nx-ferias .nx-lista { grid-template-columns: repeat(2, 1fr); }
	body.nx-site .nx-ferias-detalle {
		display: grid;
		grid-template-columns: minmax(12rem, 18rem) 1fr;
		align-items: start;
		column-gap: var(--nx-space-5);
		row-gap: var(--nx-space-2);
		padding-block: var(--nx-space-6);
	}
	body.nx-site .nx-ferias-detalle > * { grid-column: 2; }
	body.nx-site .nx-ferias-detalle > .nx-feria-logo { grid-column: 1; grid-row: 1 / span 6; }
	body.nx-site .nx-ferias-detalle .nx-feria-acciones { flex-direction: row; flex-wrap: wrap; align-items: center; }
	body.nx-site :is(.nx-evento-datos, .nx-evento-agenda, .nx-participa) { padding-block: var(--nx-space-6); }
	body.nx-site :is(.nx-evento-datos, .nx-evento-agenda, .nx-participa) .nx-lista { grid-template-columns: repeat(3, 1fr); gap: var(--nx-space-3); }
	body.nx-site .nx-pagina-hero { padding-top: var(--nx-space-6); }
	body.nx-site .nx-pagina-hero + section { padding-top: var(--nx-space-3); }

	/* El evento · datos clave: vuelven las 3 tarjetas separadas */
	body.nx-site .nx-evento-datos .nx-lista { background-color: transparent; border-top: 0; }
	body.nx-site .nx-evento-datos .nx-tarjeta {
		gap: var(--nx-space-2);
		padding: var(--nx-space-4) var(--nx-space-3);
		background-color: var(--nx-surface, #F5F5F5);
	}
	body.nx-site .nx-evento-datos .nx-tarjeta + .nx-tarjeta { border-top: 0; }
	body.nx-site .nx-evento-datos .nx-tarjeta::before { display: block; }

	/* Botones con su ancho natural */
	body.nx-site :is(.nx-evento-agenda, .nx-participa) .nx-btn { align-self: flex-start; width: auto; }

	/* Listas con tarjetas ocultas (nx-pendiente, p. ej. Participa): 2 columnas en tablet */
	body.nx-site .nx-participa .nx-lista:has(> .nx-pendiente) { grid-template-columns: repeat(2, 1fr); }

	/* Listas de 2 o 4 tarjetas (Rueda de Negocios): columnas parejas, sin huecos */
	body.nx-site :is(.nx-evento-datos, .nx-participa) .nx-lista:not(:has(> .nx-pendiente)):has(> :nth-child(2):last-child),
	body.nx-site :is(.nx-evento-datos, .nx-participa) .nx-lista:not(:has(> .nx-pendiente)):has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Rueda de Negocios: franja final con más aire y botón con su ancho natural */
	body.nx-site .nx-rueda-cierre { padding-block: var(--nx-space-6); }
	body.nx-site .nx-rueda-cierre .nx-btn { align-self: flex-start; }
	body.nx-site .nx-pagina-hero .nx-btn { align-self: flex-start; }
	body.nx-site .nx-form { grid-template-columns: 1fr 1fr; }

	/* Franja inferior: íconos a la izquierda, copyright a la derecha */
	body.nx-site .nx-redes {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

@media (min-width: 1024px) {
	body.nx-site .nx-ferias .nx-lista { grid-template-columns: repeat(4, 1fr); }

	/* Cómo llegar: texto a la izquierda (1/3) y mapa a la derecha (2/3) */
	body.nx-site .nx-evento-mapa {
		grid-template-columns: minmax(16rem, 1fr) 2fr;
		align-items: center;
		column-gap: var(--nx-space-5);
	}
	body.nx-site .nx-mapa { aspect-ratio: 16 / 10; }

	body.nx-site .nx-evento-datos .nx-lista:not(:has(> .nx-pendiente)):has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }

	/* Participa con tarjetas ocultas: las visibles en una fila, columnas iguales (2, 3 o 4) */
	body.nx-site .nx-participa .nx-lista:has(> .nx-pendiente) {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	body.nx-site :is(.nx-convocatorias, .nx-actualidad) .nx-lista {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--nx-space-3);
	}
}