/* =========================================================================
   NOX — sistema de diseño
   Negro / rojo · tipografía Inter + JetBrains Mono · optimizado para retina
   ========================================================================= */

:root {
	--nox-black: #08090B;
	--nox-black-deep: #000;
	--nox-surface: #101216;
	--nox-surface-2: #171a20;
	--nox-ink: #e9ebee;
	--nox-muted: #99a0a9;
	--nox-red: #ef0314;
	--nox-red-bright: #ff2534;
	--nox-red-dim: #7c0210;

	--nox-line: rgba(255, 255, 255, .09);
	--nox-line-strong: rgba(255, 255, 255, .17);
	--nox-glass: rgba(10, 11, 14, .72);

	--nox-radius: 14px;
	--nox-radius-lg: 20px;
	--nox-ease: cubic-bezier(.22, .61, .36, 1);
	--nox-shell: 1280px;
	--nox-gutter: clamp(1.25rem, 5vw, 3rem);
	--nox-header-h: 72px;
}

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

/* --- Nitidez en pantallas de alta densidad ------------------------------ */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nox-header-h) + 16px);
}

body.nox {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures contextual;
	font-feature-settings: "cv11", "ss01";
	background-color: var(--nox-black);
	color: var(--nox-ink);
	overflow-x: clip;
}

/* Sin separaciones entre las partes raíz del tema de bloques. */
.wp-site-blocks > *,
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

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

svg {
	shape-rendering: geometricPrecision;
}

/* Hairlines reales en 2x/3x */
.nox-hair,
.nox-card,
.nox-panel,
.nox-table,
.nox-chip {
	border: 1px solid var(--nox-line);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.nox-hair,
	.nox-card,
	.nox-panel,
	.nox-table,
	.nox-chip {
		border-width: .5px;
	}
}

::selection {
	background: var(--nox-red);
	color: #fff;
}

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

.nox-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   Tipografía utilitaria
   ========================================================================= */

.nox-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	margin: 0 0 1.1rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--nox-muted);
}

.nox-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--nox-red);
	flex: none;
}

.nox-eyebrow--plain::before {
	display: none;
}

.nox-lead {
	max-width: 62ch;
	font-size: clamp(1.0625rem, .98rem + .45vw, 1.3125rem);
	line-height: 1.6;
	color: var(--nox-muted);
	letter-spacing: -.012em;
}

.nox-red {
	color: var(--nox-red-bright);
}

.nox-balance {
	text-wrap: balance;
}

.nox-mono {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--nox-muted);
}

/* =========================================================================
   Estructura
   ========================================================================= */

.nox-shell {
	width: 100%;
	max-width: var(--nox-shell);
	margin-inline: auto;
	padding-inline: var(--nox-gutter);
}

.nox-section {
	position: relative;
	padding-block: clamp(4rem, 2.6rem + 5.4vw, 8rem);
}

.nox-section--tight {
	padding-block: clamp(3rem, 2rem + 3.4vw, 5rem);
}

.nox-section--alt {
	background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, 0));
	border-block: 1px solid var(--nox-line);
}

.nox-head {
	max-width: 780px;
	margin-bottom: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
}

.nox-head h2,
.nox-head h1 {
	margin: 0 0 1rem;
}

.nox-head--center {
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.nox-head--center .nox-lead {
	margin-inline: auto;
}

.nox-head--center .nox-eyebrow {
	justify-content: center;
}

/* Rejilla técnica de fondo, independiente de resolución */
.nox-grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%);
	opacity: .5;
}

/* =========================================================================
   Cabecera
   ========================================================================= */

.nox-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--nox-glass);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--nox-ease), background .3s var(--nox-ease);
}

.nox-header.is-stuck {
	border-bottom-color: var(--nox-line);
	background: rgba(8, 9, 11, .88);
}

.nox-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--nox-header-h);
}

.nox-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	color: #fff;
}

.nox-logo svg {
	display: block;
	height: 30px;
	width: auto;
}

.nox-logo:hover svg {
	filter: drop-shadow(0 0 14px rgba(239, 3, 20, .55));
}

.nox-nav {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 1.8vw, 1.9rem);
	margin-inline-start: auto;
}

.nox-nav > a {
	position: relative;
	font-size: .8875rem;
	font-weight: 500;
	letter-spacing: -.005em;
	color: var(--nox-muted);
	padding-block: .4rem;
	transition: color .2s var(--nox-ease);
}

.nox-nav > a:hover,
.nox-nav > a[aria-current="page"] {
	color: #fff;
}

.nox-nav > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--nox-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s var(--nox-ease);
}

.nox-nav > a:hover::after,
.nox-nav > a[aria-current="page"]::after {
	transform: scaleX(1);
}

.nox-header__cta {
	flex: none;
	margin-inline-start: .5rem;
}

.nox-burger {
	display: none;
	flex: none;
	margin-inline-start: auto;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
}

.nox-burger span {
	display: block;
	width: 17px;
	height: 1.5px;
	background: currentColor;
	position: relative;
	transition: background .2s;
}

.nox-burger span::before,
.nox-burger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 17px;
	height: 1.5px;
	background: currentColor;
	transition: transform .3s var(--nox-ease);
}

.nox-burger span::before {
	top: -6px;
}

.nox-burger span::after {
	top: 6px;
}

.nox-burger[aria-expanded="true"] span {
	background: transparent;
}

.nox-burger[aria-expanded="true"] span::before {
	transform: translateY(6px) rotate(45deg);
}

.nox-burger[aria-expanded="true"] span::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 899px) {
	.nox-burger {
		display: inline-flex;
	}

	.nox-nav {
		position: fixed;
		inset: var(--nox-header-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1rem var(--nox-gutter) 1.75rem;
		background: rgba(8, 9, 11, .97);
		backdrop-filter: blur(18px);
		border-bottom: 1px solid var(--nox-line);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s var(--nox-ease), transform .25s var(--nox-ease), visibility .25s;
	}

	.nox-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.nox-nav > a {
		padding-block: .95rem;
		font-size: 1.0625rem;
		border-bottom: 1px solid var(--nox-line);
	}

	.nox-nav > a::after {
		display: none;
	}

	.nox-header__cta {
		margin: 1.1rem 0 0;
	}

	.nox-header__cta .nox-btn {
		width: 100%;
		justify-content: center;
	}
}

/* =========================================================================
   Botones
   ========================================================================= */

.nox-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .92em 1.55em;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.005em;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .18s var(--nox-ease), background .2s, border-color .2s, box-shadow .25s, color .2s;
	will-change: transform;
}

.nox-btn:active {
	transform: translateY(1px);
}

.nox-btn--primary {
	background: var(--nox-red);
	border-color: var(--nox-red);
	color: #fff;
	box-shadow: 0 10px 30px -14px rgba(239, 3, 20, .9);
}

.nox-btn--primary:hover {
	background: var(--nox-red-bright);
	border-color: var(--nox-red-bright);
	color: #fff;
	box-shadow: 0 16px 40px -14px rgba(255, 37, 52, .95);
}

.nox-btn--ghost {
	background: transparent;
	border-color: var(--nox-line-strong);
	color: #fff;
}

.nox-btn--ghost:hover {
	border-color: rgba(255, 255, 255, .42);
	background: rgba(255, 255, 255, .05);
	color: #fff;
}

.nox-btn--sm {
	padding: .7em 1.1em;
	font-size: .8125rem;
}

.nox-btn svg {
	width: 1em;
	height: 1em;
	flex: none;
}

.nox-btn--primary:hover svg,
.nox-btn--ghost:hover svg {
	transform: translateX(2px);
	transition: transform .2s var(--nox-ease);
}

.nox-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2rem;
}

/* =========================================================================
   Carrusel (slides)
   ========================================================================= */

.nox-slider {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--nox-black);
}

.nox-slider::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--nox-line-strong), transparent);
}

.nox-slider__viewport {
	position: relative;
	min-height: clamp(560px, 82vh, 860px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.nox-slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s var(--nox-ease), visibility .8s;
	pointer-events: none;
}

.nox-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.nox-slide__inner > * {
	min-width: 0;
}

.nox-slide__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	width: 100%;
	padding-block: clamp(3.5rem, 8vh, 6rem);
}

@media (max-width: 979px) {
	.nox-slide__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.nox-slider__viewport {
		min-height: 0;
	}
}

.nox-slide__body > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--nox-ease), transform .7s var(--nox-ease);
}

.nox-slide.is-active .nox-slide__body > * {
	opacity: 1;
	transform: none;
}

.nox-slide.is-active .nox-slide__body > :nth-child(1) { transition-delay: .12s; }
.nox-slide.is-active .nox-slide__body > :nth-child(2) { transition-delay: .20s; }
.nox-slide.is-active .nox-slide__body > :nth-child(3) { transition-delay: .28s; }
.nox-slide.is-active .nox-slide__body > :nth-child(4) { transition-delay: .36s; }
.nox-slide.is-active .nox-slide__body > :nth-child(5) { transition-delay: .44s; }

.nox-slide__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.35rem, 1.5rem + 3.9vw, 4.6rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.043em;
	color: #fff;
	text-wrap: balance;
}

.nox-slide__title em {
	font-style: normal;
	color: var(--nox-red-bright);
}

.nox-slide__text {
	max-width: 52ch;
	font-size: clamp(1.03rem, .96rem + .38vw, 1.25rem);
	line-height: 1.6;
	color: var(--nox-muted);
	margin: 0;
}

.nox-slide__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 2rem;
	padding: 0;
	list-style: none;
}

.nox-slide__meta li {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nox-muted);
	border: 1px solid var(--nox-line);
	border-radius: 999px;
	padding: .45rem .85rem;
	background: rgba(255, 255, 255, .02);
}

.nox-slide__art {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 260px;
}

@media (max-width: 979px) {
	.nox-slide__art {
		order: -1;
		min-height: 200px;
	}
}

.nox-slider__glow {
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 70%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(48% 62% at 72% 34%, rgba(239, 3, 20, .30) 0%, rgba(239, 3, 20, 0) 68%);
	filter: blur(6px);
}

/* Controles */
.nox-slider__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(1.25rem, 3vh, 2.5rem);
	z-index: 3;
}

.nox-slider__controls .nox-shell {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.nox-slider__dots {
	display: flex;
	align-items: center;
	gap: .55rem;
	flex: 1;
}

.nox-dot {
	position: relative;
	height: 3px;
	width: 44px;
	border: 0;
	padding: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .17);
	cursor: pointer;
	overflow: hidden;
	transition: width .35s var(--nox-ease), background .3s;
}

.nox-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 0;
	background: var(--nox-red);
	border-radius: inherit;
}

.nox-dot[aria-selected="true"] {
	width: 88px;
	background: rgba(255, 255, 255, .22);
}

.nox-dot[aria-selected="true"]::after {
	width: 100%;
	transition: width var(--nox-dot-duration, 7s) linear;
}

.nox-dot.is-paused::after {
	transition: none;
}

.nox-slider__arrows {
	display: flex;
	gap: .5rem;
	flex: none;
}

.nox-arrow {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid var(--nox-line-strong);
	background: rgba(255, 255, 255, .03);
	color: #fff;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s var(--nox-ease);
}

.nox-arrow:hover {
	background: var(--nox-red);
	border-color: var(--nox-red);
}

.nox-arrow svg {
	width: 15px;
	height: 15px;
}

@media (max-width: 599px) {
	.nox-slider__arrows {
		display: none;
	}

	.nox-dot {
		width: 26px;
	}

	.nox-dot[aria-selected="true"] {
		width: 54px;
	}
}

/* =========================================================================
   Arte vectorial de los slides
   ========================================================================= */

.nox-art {
	width: 100%;
	max-width: 460px;
	min-width: 0;
	aspect-ratio: 1;
	color: var(--nox-red);
}

.nox-art .ring {
	transform-box: view-box;
	transform-origin: 50% 50%;
	animation: nox-pulse 6s var(--nox-ease) infinite;
}

.nox-art .ring:nth-of-type(2) { animation-delay: .9s; }
.nox-art .ring:nth-of-type(3) { animation-delay: 1.8s; }

@keyframes nox-pulse {
	0%   { opacity: .0; transform: scale(.55); }
	18%  { opacity: .75; }
	100% { opacity: 0; transform: scale(1.18); }
}

.nox-art .bar {
	animation: nox-wave 1.6s ease-in-out infinite alternate;
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

@keyframes nox-wave {
	from { transform: scaleY(.35); }
	to   { transform: scaleY(1); }
}

.nox-art .scan {
	transform-box: view-box;
	animation: nox-scan 4.5s linear infinite;
}

@keyframes nox-scan {
	from { transform: translateY(-40px); opacity: 0; }
	15%  { opacity: 1; }
	85%  { opacity: 1; }
	to   { transform: translateY(40px); opacity: 0; }
}

/* =========================================================================
   Tarjetas y rejillas
   ========================================================================= */

.nox-grid {
	display: grid;
	gap: clamp(1rem, .8rem + .8vw, 1.5rem);
}

.nox-grid--2,
.nox-grid--3,
.nox-grid--4 {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {

	.nox-grid--2,
	.nox-grid--3,
	.nox-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 980px) {

	.nox-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nox-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.nox-card {
	position: relative;
	padding: clamp(1.4rem, 1.1rem + .9vw, 2rem);
	border-radius: var(--nox-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
	overflow: hidden;
	transition: border-color .3s var(--nox-ease), transform .3s var(--nox-ease), background .3s;
}

.nox-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: var(--nox-red);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .4s var(--nox-ease);
}

.nox-card:hover {
	border-color: var(--nox-line-strong);
	transform: translateY(-3px);
}

.nox-card:hover::before {
	transform: scaleY(1);
}

.nox-card h3 {
	margin: 0 0 .6rem;
	font-size: 1.125rem;
	font-weight: 650;
	letter-spacing: -.02em;
	color: #fff;
}

.nox-card p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--nox-muted);
}

.nox-card__num {
	display: block;
	margin-bottom: 1.1rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .72rem;
	letter-spacing: .14em;
	color: var(--nox-red);
}

.nox-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 1.15rem;
	border-radius: 11px;
	background: rgba(239, 3, 20, .12);
	border: 1px solid rgba(239, 3, 20, .3);
	color: var(--nox-red-bright);
}

.nox-card__icon svg {
	width: 20px;
	height: 20px;
}

/* Lista de puntos con guion rojo */
.nox-ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .95rem;
}

.nox-ticks li {
	position: relative;
	padding-left: 1.8rem;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--nox-ink);
}

.nox-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 12px;
	height: 2px;
	background: var(--nox-red);
}

.nox-ticks--muted li {
	color: var(--nox-muted);
}

/* =========================================================================
   Tabla comparativa
   ========================================================================= */

.nox-compare {
	border-radius: var(--nox-radius-lg);
	overflow: hidden;
	border: 1px solid var(--nox-line);
	background: rgba(255, 255, 255, .016);
}

.nox-compare__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	border-top: 1px solid var(--nox-line);
}

.nox-compare__row:first-child {
	border-top: 0;
}

.nox-compare__cell {
	padding: clamp(1rem, .85rem + .6vw, 1.5rem) clamp(1.1rem, .9rem + .8vw, 1.85rem);
	font-size: .9688rem;
	line-height: 1.5;
	color: var(--nox-muted);
}

.nox-compare__cell + .nox-compare__cell {
	border-left: 1px solid var(--nox-line);
	color: #fff;
	background: linear-gradient(90deg, rgba(239, 3, 20, .07), rgba(239, 3, 20, .02));
}

.nox-compare__head .nox-compare__cell {
	padding-block: 1.15rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .72rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--nox-muted);
	background: rgba(255, 255, 255, .025);
}

.nox-compare__head .nox-compare__cell + .nox-compare__cell {
	color: #fff;
	background: rgba(239, 3, 20, .14);
}

@media (max-width: 719px) {
	.nox-compare__cell {
		font-size: .9375rem;
	}
}

/* =========================================================================
   Paneles
   ========================================================================= */

.nox-panel {
	position: relative;
	padding: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
	border-radius: var(--nox-radius-lg);
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(239, 3, 20, .13) 0%, rgba(239, 3, 20, 0) 55%),
		linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
	overflow: hidden;
}

.nox-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
	align-items: center;
}

@media (max-width: 899px) {
	.nox-split {
		grid-template-columns: 1fr;
	}
}

/* Plataformas */
.nox-platforms {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nox-chip {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1.25rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .025);
	font-size: .9375rem;
	font-weight: 500;
	color: #fff;
	transition: border-color .25s, background .25s, transform .25s var(--nox-ease);
}

.nox-chip:hover {
	border-color: rgba(239, 3, 20, .55);
	background: rgba(239, 3, 20, .08);
	transform: translateY(-2px);
}

.nox-chip svg {
	width: 17px;
	height: 17px;
	color: var(--nox-muted);
}

.nox-chip:hover svg {
	color: var(--nox-red-bright);
}

/* Barra de credenciales */
.nox-strip {
	border-block: 1px solid var(--nox-line);
	background: rgba(255, 255, 255, .018);
}

.nox-strip ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	gap: 1px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--nox-line);
}

.nox-strip li {
	background: var(--nox-black);
	padding: 1.35rem clamp(1rem, 2vw, 1.75rem);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nox-muted);
	display: flex;
	align-items: center;
	gap: .65rem;
}

.nox-strip li b {
	display: block;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 1.05rem;
	font-weight: 650;
	letter-spacing: -.02em;
	text-transform: none;
	color: #fff;
	margin-bottom: .15rem;
}

/* =========================================================================
   Llamada final
   ========================================================================= */

.nox-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding-block: clamp(4.5rem, 3rem + 6vw, 9rem);
	background: radial-gradient(60% 100% at 50% 100%, rgba(239, 3, 20, .22) 0%, rgba(239, 3, 20, 0) 70%);
	border-top: 1px solid var(--nox-line);
}

.nox-cta h2 {
	font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4.25rem);
	letter-spacing: -.042em;
	margin: 0 0 1.25rem;
}

.nox-cta .nox-lead {
	margin-inline: auto;
}

.nox-cta .nox-actions {
	justify-content: center;
}

/* =========================================================================
   Pie de página
   ========================================================================= */

.nox-footer {
	border-top: 1px solid var(--nox-line);
	background: var(--nox-black-deep);
	padding-block: clamp(3rem, 2.2rem + 2.4vw, 4.5rem) 2rem;
}

.nox-footer__top {
	display: grid;
	grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}

@media (max-width: 899px) {
	.nox-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nox-footer__brand {
		grid-column: 1 / -1;
	}
}

.nox-footer__brand svg {
	height: 28px;
	width: auto;
	color: #fff;
}

.nox-footer__brand p {
	margin: 1.25rem 0 0;
	max-width: 34ch;
	font-size: .9063rem;
	line-height: 1.6;
	color: var(--nox-muted);
}

.nox-footer h4 {
	margin: 0 0 1.1rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--nox-muted);
}

.nox-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.nox-footer a {
	font-size: .9375rem;
	color: var(--nox-muted);
	transition: color .2s;
}

.nox-footer a:hover {
	color: #fff;
}

.nox-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(2.5rem, 2rem + 1.6vw, 4rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--nox-line);
	font-size: .8125rem;
	color: var(--nox-muted);
}

.nox-footer__bottom nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.35rem;
}

.nox-footer__bottom a {
	font-size: .8125rem;
}

/* =========================================================================
   Formulario
   ========================================================================= */

.nox-form {
	display: grid;
	gap: 1.1rem;
}

.nox-field {
	display: grid;
	gap: .5rem;
}

.nox-field--2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 1.1rem;
}

.nox-form label {
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--nox-muted);
}

.nox-form input,
.nox-form select,
.nox-form textarea {
	width: 100%;
	padding: .85rem 1rem;
	font: inherit;
	font-size: .9375rem;
	color: #fff;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	transition: border-color .2s, background .2s;
}

.nox-form input::placeholder,
.nox-form textarea::placeholder {
	color: rgba(153, 160, 169, .6);
}

.nox-form input:focus,
.nox-form select:focus,
.nox-form textarea:focus {
	border-color: var(--nox-red);
	background: rgba(255, 255, 255, .05);
	outline: none;
}

.nox-form textarea {
	min-height: 150px;
	resize: vertical;
}

.nox-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nox-notice {
	padding: .95rem 1.15rem;
	border-radius: 10px;
	font-size: .9063rem;
	border: 1px solid var(--nox-line);
	background: rgba(255, 255, 255, .03);
}

.nox-notice--ok {
	border-color: rgba(239, 3, 20, .45);
	background: rgba(239, 3, 20, .1);
	color: #fff;
}

/* =========================================================================
   Aparición al hacer scroll
   ========================================================================= */

.nox-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .75s var(--nox-ease), transform .75s var(--nox-ease);
}

.nox-reveal.is-in {
	opacity: 1;
	transform: none;
}

.nox-reveal[data-delay="1"] { transition-delay: .08s; }
.nox-reveal[data-delay="2"] { transition-delay: .16s; }
.nox-reveal[data-delay="3"] { transition-delay: .24s; }
.nox-reveal[data-delay="4"] { transition-delay: .32s; }
.nox-reveal[data-delay="5"] { transition-delay: .40s; }

/* =========================================================================
   Contenido editorial (entradas y páginas normales)
   ========================================================================= */

.nox-prose {
	max-width: 74ch;
}

.nox-prose h2 { margin-top: 2.75rem; }
.nox-prose h3 { margin-top: 2.25rem; }
.nox-prose p,
.nox-prose li { color: var(--nox-ink); }
.nox-prose a { color: var(--nox-red-bright); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Movimiento reducido
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.nox-reveal,
	.nox-slide__body > * {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* =========================================================================
   Impresión
   ========================================================================= */

@media print {
	body.nox { background: #fff; color: #000; }
	.nox-header, .nox-slider__controls, .nox-cta, .nox-footer { display: none; }
}

/* =========================================================================
   Páginas internas
   ========================================================================= */

.nox-hero h1 {
	margin: 0 0 1.25rem;
	font-size: clamp(2.35rem, 1.5rem + 3.4vw, 4.25rem);
	letter-spacing: -.042em;
	text-wrap: balance;
}

.nox-hero .nox-lead {
	max-width: 66ch;
}

/* Lista de definiciones */
.nox-deflist {
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-radius-lg);
	overflow: hidden;
	background: rgba(255, 255, 255, .016);
	margin: 0;
}

.nox-deflist__row {
	display: grid;
	grid-template-columns: minmax(170px, .38fr) 1fr;
	gap: clamp(.5rem, 2vw, 2rem);
	padding: clamp(1.15rem, .9rem + .8vw, 1.75rem) clamp(1.1rem, .9rem + .8vw, 1.85rem);
	border-top: 1px solid var(--nox-line);
}

.nox-deflist__row:first-child {
	border-top: 0;
}

.nox-deflist dt {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: -.02em;
	color: #fff;
}

.nox-deflist dd {
	margin: 0;
	font-size: .9688rem;
	line-height: 1.6;
	color: var(--nox-muted);
}

@media (max-width: 719px) {
	.nox-deflist__row {
		grid-template-columns: 1fr;
		gap: .45rem;
	}
}

/* Nota / advertencia honesta */
.nox-note {
	max-width: 72ch;
	margin-top: clamp(2rem, 1.6rem + 1.2vw, 3rem);
	padding: .3rem 0 .3rem 1.35rem;
	border-left: 2px solid var(--nox-red);
	font-size: .9688rem;
	line-height: 1.65;
	color: var(--nox-muted);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.nox-deflist {
		border-width: .5px;
	}
}

/* =========================================================================
   Casos de uso
   ========================================================================= */

.nox-case + .nox-case {
	margin-top: clamp(3.5rem, 2.4rem + 4.4vw, 7rem);
}

.nox-case .nox-split {
	align-items: center;
}

@media (min-width: 900px) {

	.nox-split--reverse > :first-child {
		order: 2;
	}
}

.nox-index {
	display: block;
	margin-bottom: .9rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .18em;
	color: var(--nox-red);
}

.nox-case h2 {
	margin: 0 0 1rem;
	font-size: clamp(1.85rem, 1.35rem + 2.1vw, 2.85rem);
	letter-spacing: -.035em;
	text-wrap: balance;
}

.nox-case .nox-lead {
	font-size: clamp(1rem, .96rem + .3vw, 1.1875rem);
}

/* Marco de la ilustración */
.nox-illus {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(1rem, .7rem + 1.4vw, 2rem);
	border: 1px solid var(--nox-line);
	border-radius: var(--nox-radius-lg);
	background:
		radial-gradient(85% 95% at 72% 8%, rgba(239, 3, 20, .12) 0%, rgba(239, 3, 20, 0) 62%),
		linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .010));
	overflow: hidden;
	color: var(--nox-red);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

	.nox-illus {
		border-width: .5px;
	}
}

.nox-illus::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 38px 38px;
	mask-image: radial-gradient(75% 75% at 50% 50%, #000 0%, transparent 100%);
	-webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 0%, transparent 100%);
}

.nox-illus svg {
	position: relative;
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	min-width: 0;
}

/* Trazos animados de las ilustraciones */
.nox-illus .pulse {
	animation: nox-blink 3.2s var(--nox-ease) infinite;
}

.nox-illus .pulse-2 { animation-delay: .5s; }
.nox-illus .pulse-3 { animation-delay: 1s; }

@keyframes nox-blink {
	0%, 100% { opacity: .35; }
	50%      { opacity: 1; }
}

.nox-illus .dash {
	stroke-dasharray: 5 7;
	animation: nox-dash 9s linear infinite;
}

@keyframes nox-dash {
	to { stroke-dashoffset: -96; }
}

/* Lista de capacidades con icono */
.nox-caps {
	list-style: none;
	margin: clamp(1.5rem, 1.2rem + .9vw, 2.25rem) 0 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
}

.nox-caps li {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: .95rem;
	align-items: start;
}

.nox-caps .ico {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(239, 3, 20, .11);
	border: 1px solid rgba(239, 3, 20, .3);
	color: var(--nox-red-bright);
}

.nox-caps .ico svg {
	width: 18px;
	height: 18px;
}

.nox-caps b {
	display: block;
	margin-bottom: .18rem;
	font-size: .9688rem;
	font-weight: 600;
	letter-spacing: -.015em;
	color: #fff;
}

.nox-caps span {
	display: block;
	font-size: .9063rem;
	line-height: 1.55;
	color: var(--nox-muted);
}

/* Otros sectores */
.nox-sectors {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nox-sectors li {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.05rem;
	border: 1px solid var(--nox-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .022);
	font-size: .875rem;
	color: var(--nox-ink);
}

.nox-sectors li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--nox-red);
	flex: none;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

	.nox-sectors li {
		border-width: .5px;
	}
}

/* Tarjeta-enlace (teaser de portada) */
a.nox-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

a.nox-card:hover h3 {
	color: var(--nox-red-bright);
}

.nox-card__more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: .4rem;
	margin-top: auto;
	padding-top: 1.25rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--nox-red-bright);
}

.nox-card__more svg {
	width: .95em;
	height: .95em;
	transition: transform .2s var(--nox-ease);
}

a.nox-card:hover .nox-card__more svg {
	transform: translateX(3px);
}

/* =========================================================================
   Maquetas de interfaz (ilustraciones con contenido real)
   ========================================================================= */

.nox-mock {
	position: relative;
	width: 100%;
	max-width: 470px;
	border: 1px solid var(--nox-line-strong);
	border-radius: 16px;
	background: linear-gradient(180deg, #15171d 0%, #0b0c10 100%);
	box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .95);
	overflow: hidden;
	text-align: left;
}

.nox-mock__bar {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .8rem .95rem;
	border-bottom: 1px solid var(--nox-line);
	background: rgba(255, 255, 255, .032);
}

.nox-mock__bar svg {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--nox-red-bright);
}

.nox-mock__bar .t {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--nox-ink);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nox-mock__bar .t em {
	font-style: normal;
	color: var(--nox-muted);
}

.nox-mock__bar .sp {
	margin-left: auto;
	flex: none;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .625rem;
	letter-spacing: .1em;
	color: var(--nox-muted);
}

.nox-mock__body {
	display: grid;
	gap: .45rem;
	padding: .85rem .95rem;
}

.nox-mock__foot {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem .95rem;
	border-top: 1px solid var(--nox-line);
	background: rgba(255, 255, 255, .018);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .5625rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nox-muted);
	line-height: 1.5;
}

.nox-mock__foot::before {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--nox-red);
}

/* Filas de la maqueta */
.nox-row {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem .6rem;
	border: 1px solid transparent;
	border-radius: 10px;
	background: rgba(255, 255, 255, .026);
}

.nox-row--on {
	border-color: rgba(239, 3, 20, .35);
	background: rgba(239, 3, 20, .075);
}

.nox-row--off {
	opacity: .42;
}

.nox-row--off .nm {
	text-decoration: line-through;
	text-decoration-color: rgba(255, 255, 255, .45);
}

.nox-row .av {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .5625rem;
	letter-spacing: .04em;
	color: var(--nox-muted);
}

.nox-row--on .av {
	background: rgba(239, 3, 20, .18);
	color: var(--nox-red-bright);
}

.nox-row .txt {
	min-width: 0;
}

.nox-row .nm {
	display: block;
	font-size: .78rem;
	font-weight: 550;
	letter-spacing: -.01em;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nox-row .sub {
	display: block;
	margin-top: .05rem;
	font-size: .6875rem;
	color: var(--nox-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nox-pill {
	flex: none;
	margin-left: auto;
	padding: .22rem .48rem;
	border: 1px solid var(--nox-line);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .5313rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nox-muted);
	white-space: nowrap;
}

.nox-pill--red {
	border-color: rgba(239, 3, 20, .45);
	background: rgba(239, 3, 20, .12);
	color: var(--nox-red-bright);
}

.nox-pill--live::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: .35rem;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
	animation: nox-blink 2.4s var(--nox-ease) infinite;
}

/* Onda de voz */
.nox-wave {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3px;
	height: 46px;
	margin-bottom: .15rem;
	padding: 0 .35rem;
}

.nox-wave i {
	display: block;
	flex: 1 1 auto;
	min-width: 2px;
	max-width: 3px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--nox-red-bright), var(--nox-red));
	opacity: .72;
	transform-origin: 50% 50%;
	animation: nox-wave 1.4s ease-in-out infinite alternate;
}

/* Controles de llamada */
.nox-ctrls {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .4rem;
	margin-top: .25rem;
}

.nox-ctrl {
	display: grid;
	justify-items: center;
	gap: .35rem;
	padding: .6rem .3rem;
	border: 1px solid var(--nox-line);
	border-radius: 10px;
	background: rgba(255, 255, 255, .022);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .5313rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--nox-muted);
	text-align: center;
}

.nox-ctrl svg {
	width: 15px;
	height: 15px;
}

.nox-ctrl--on {
	border-color: rgba(239, 3, 20, .45);
	background: rgba(239, 3, 20, .1);
	color: var(--nox-red-bright);
}

/* Directorio a dos columnas */
.nox-dirs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .55rem;
}

.nox-dir {
	padding: .6rem .65rem .7rem;
	border: 1px solid var(--nox-line);
	border-radius: 11px;
	background: rgba(255, 255, 255, .02);
}

.nox-dir--nox {
	border-color: rgba(239, 3, 20, .35);
	background: rgba(239, 3, 20, .06);
}

.nox-dir h4 {
	margin: 0 0 .55rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .5313rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nox-muted);
}

.nox-dir--nox h4 {
	color: var(--nox-red-bright);
}

.nox-dir ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .4rem;
}

.nox-dir li {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .6875rem;
	color: var(--nox-muted);
}

.nox-dir li::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .07);
}

.nox-dir--nox li {
	color: var(--nox-ink);
}

.nox-dir--nox li::before {
	background: rgba(239, 3, 20, .3);
}

.nox-dir p {
	margin: .65rem 0 0;
	font-size: .625rem;
	line-height: 1.45;
	color: var(--nox-muted);
}

.nox-dirs-sep {
	display: grid;
	place-items: center;
	padding: .2rem 0 .1rem;
	color: var(--nox-red-bright);
}

.nox-dirs-sep svg {
	width: 15px;
	height: 15px;
}

@media (max-width: 639px) {

	.nox-dirs {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Burbujas de conversación */
.nox-bubble {
	justify-self: start;
	max-width: 84%;
	padding: .6rem .75rem;
	border: 1px solid var(--nox-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, .03);
	font-size: .78rem;
	line-height: 1.45;
	color: var(--nox-ink);
}

.nox-bubble--me {
	justify-self: end;
	margin-left: auto;
	border-color: rgba(239, 3, 20, .4);
	background: rgba(239, 3, 20, .1);
	color: #fff;
}

.nox-bubble .meta {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .45rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .5313rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nox-muted);
}

.nox-bubble--me .meta {
	color: var(--nox-red-bright);
}

.nox-bubble .meta svg {
	width: 11px;
	height: 11px;
}

/* Acciones denegadas */
.nox-deny {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: .35rem;
	list-style: none;
	padding: 0;
}

.nox-deny li {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .55rem;
	border: 1px dashed rgba(255, 255, 255, .16);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .5313rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nox-muted);
	text-decoration: line-through;
	text-decoration-color: rgba(239, 3, 20, .8);
}

.nox-deny li svg {
	width: 11px;
	height: 11px;
	color: var(--nox-red);
	text-decoration: none;
}

/* El marco de ilustración ya no centra un glifo, contiene una maqueta */
.nox-illus--mock {
	padding: clamp(1.1rem, .8rem + 1.6vw, 2.1rem);
}

/* =========================================================================
   Árabe y escritura de derecha a izquierda
   ========================================================================= */

:root[lang="ar"],
[dir="rtl"] {
	--nox-font-ar: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
}

[lang="ar"] body.nox,
[dir="rtl"] body.nox {
	font-family: var(--nox-font-ar);
}

/* El árabe es cursivo: el espaciado entre letras rompe la unión de los trazos,
   y no existen mayúsculas. */
[dir="rtl"] body.nox,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .nox-eyebrow,
[dir="rtl"] .nox-mono,
[dir="rtl"] .nox-index,
[dir="rtl"] .nox-slide__meta li,
[dir="rtl"] .nox-strip li,
[dir="rtl"] .nox-card__num,
[dir="rtl"] .nox-footer h4,
[dir="rtl"] .nox-pill,
[dir="rtl"] .nox-ctrl,
[dir="rtl"] .nox-mock__bar .t,
[dir="rtl"] .nox-mock__bar .sp,
[dir="rtl"] .nox-mock__foot,
[dir="rtl"] .nox-dir h4,
[dir="rtl"] .nox-bubble .meta,
[dir="rtl"] .nox-deny li,
[dir="rtl"] .nox-compare__head .nox-compare__cell,
[dir="rtl"] .nox-row .av,
[dir="rtl"] .nox-langs a {
	letter-spacing: normal;
	text-transform: none;
	font-family: var(--nox-font-ar);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] .nox-slide__title,
[dir="rtl"] .nox-case h2,
[dir="rtl"] .nox-cta h2 {
	line-height: 1.25;
}

[dir="rtl"] .nox-lead,
[dir="rtl"] .nox-slide__text {
	line-height: 1.85;
}

/* Espejo de las propiedades físicas que quedaban en la hoja principal. */
[dir="rtl"] .nox-eyebrow::before {
	margin-inline-end: 0;
}

[dir="rtl"] .nox-card::before {
	inset: 0 0 0 auto;
}

[dir="rtl"] .nox-ticks li {
	padding-left: 0;
	padding-right: 1.8rem;
}

[dir="rtl"] .nox-ticks li::before {
	left: auto;
	right: 0;
}

[dir="rtl"] .nox-note {
	border-left: 0;
	border-right: 2px solid var(--nox-red);
	padding-left: 0;
	padding-right: 1.35rem;
}

[dir="rtl"] .nox-compare__cell + .nox-compare__cell {
	border-left: 0;
	border-right: 1px solid var(--nox-line);
	background: linear-gradient(270deg, rgba(239, 3, 20, .07), rgba(239, 3, 20, .02));
}

[dir="rtl"] .nox-dot::after {
	left: auto;
	right: 0;
}

[dir="rtl"] .nox-form__hp {
	left: auto;
	right: -9999px;
}

[dir="rtl"] .nox-bubble--me {
	justify-self: start;
	margin-left: 0;
	margin-right: auto;
}

[dir="rtl"] .nox-bubble {
	justify-self: end;
}

/* Las flechas apuntan al sentido de lectura. */
[dir="rtl"] .nox-btn svg,
[dir="rtl"] .nox-card__more svg,
[dir="rtl"] .nox-arrow svg {
	transform: scaleX(-1);
}

[dir="rtl"] .nox-btn--primary:hover svg,
[dir="rtl"] .nox-btn--ghost:hover svg {
	transform: scaleX(-1) translateX(2px);
}

[dir="rtl"] a.nox-card:hover .nox-card__more svg {
	transform: scaleX(-1) translateX(3px);
}

/* El isotipo no se refleja. */
[dir="rtl"] .nox-logo svg,
[dir="rtl"] .nox-footer__brand svg,
[dir="rtl"] .nox-art,
[dir="rtl"] .nox-illus svg {
	transform: none;
}

/* =========================================================================
   Selector de idioma
   ========================================================================= */

.nox-langs {
	display: flex;
	align-items: center;
	gap: .1rem;
	flex: none;
	margin-inline-start: .75rem;
	padding-inline: .5rem;
	border-inline: 1px solid var(--nox-line);
}

.nox-langs a {
	padding: .3rem .38rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--nox-muted);
	border-radius: 5px;
	transition: color .2s, background .2s;
}

.nox-langs a:hover {
	color: #fff;
	background: rgba(255, 255, 255, .06);
}

.nox-langs a[aria-current="true"] {
	color: var(--nox-red-bright);
	background: rgba(239, 3, 20, .12);
}

.nox-langs a::after {
	display: none;
}

@media (max-width: 899px) {

	.nox-langs {
		order: 10;
		justify-content: flex-start;
		margin: 1.1rem 0 0;
		padding: .35rem 0 0;
		border: 0;
		border-top: 1px solid var(--nox-line);
		gap: .25rem;
	}

	.nox-langs a {
		padding: .5rem .6rem;
		font-size: .75rem;
	}
}