html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

/* Reset específico para la plantilla ARKANA.
 * El tema activo estaba dejando padding alrededor del body; ese espacio
 * mostraba el fondo negro del body y producía la franja detrás del header. */
html {
	padding: 0;
	background: #070311;
}

body.arkana-managed-page {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: hidden;
	background:
		radial-gradient(circle at 12% 2%, rgba(105, 28, 255, 0.24), transparent 28rem),
		radial-gradient(circle at 86% 8%, rgba(34, 74, 255, 0.18), transparent 31rem),
		linear-gradient(180deg, #070311 0%, #030207 100%);
	color: var(--arkana-color-text);
	font-family: var(--arkana-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.arkana-managed-page > .arkana-site {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.arkana-managed-page *,
.arkana-managed-page *::before,
.arkana-managed-page *::after {
	box-sizing: border-box;
}

.arkana-managed-page img,
.arkana-managed-page svg {
	max-width: 100%;
}

.arkana-managed-page button,
.arkana-managed-page input,
.arkana-managed-page textarea,
.arkana-managed-page select {
	font: inherit;
}

.arkana-site {
	position: relative;
	min-height: 100vh;
	overflow: clip;
	isolation: isolate;
	/* Fondo cósmico continuo: comienza detrás del header y acompaña toda la Home. */
	background:
		radial-gradient(circle at 12% 2%, rgba(105, 28, 255, 0.24), transparent 28rem),
		radial-gradient(circle at 86% 8%, rgba(34, 74, 255, 0.18), transparent 31rem),
		radial-gradient(circle at 26% 38%, rgba(181, 28, 226, 0.10), transparent 34rem),
		radial-gradient(circle at 82% 66%, rgba(89, 27, 255, 0.14), transparent 36rem),
		radial-gradient(circle at 42% 92%, rgba(31, 98, 255, 0.10), transparent 34rem),
		linear-gradient(180deg, #070311 0%, #030207 28%, #080412 60%, #020207 100%);
}


/* Capas ambientales globales: ahora cubren también el área situada detrás del header. */
.arkana-site::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.78) 0 0.65px, transparent 0.9px),
		radial-gradient(circle, rgba(170, 194, 255, 0.64) 0 0.75px, transparent 1px),
		radial-gradient(circle, rgba(225, 174, 255, 0.50) 0 0.55px, transparent 0.85px);
	background-position: 0 0, 4.5rem 7.5rem, 11rem 2rem;
	background-size: 11rem 11rem, 17rem 17rem, 23rem 23rem;
	opacity: 0.44;
}

.arkana-site::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(115deg, transparent 0 22%, rgba(100, 44, 255, 0.035) 38%, transparent 54% 100%),
		radial-gradient(ellipse at 50% 34%, rgba(103, 33, 255, 0.08), transparent 48%),
		radial-gradient(ellipse at 20% 76%, rgba(190, 25, 220, 0.06), transparent 42%);
	mix-blend-mode: screen;
}


.arkana-container {
	width: min(calc(100% - 2rem), var(--arkana-container));
	margin-inline: auto;
}

.arkana-main {
	position: relative;
	z-index: 2;
	display: block;
	min-height: 65vh;
	isolation: isolate;
	overflow: hidden;
	/* El fondo base vive ahora en .arkana-site para evitar franjas entre header y contenido. */
	background: transparent;
}

.arkana-main > .arkana-section {
	position: relative;
	z-index: 2;
}

/* El footer conserva un fondo propio y no hereda el universo de la Home. */
.arkana-site > .arkana-footer {
	position: relative;
	z-index: 8;
	background: #030307;
}

.arkana-section {
	position: relative;
	padding: clamp(5rem, 9vw, 8rem) 0;
	scroll-margin-top: 6rem;
}

.arkana-section--compact {
	padding: clamp(3.25rem, 6vw, 5rem) 0;
}

.arkana-section-heading {
	max-width: 56rem;
	margin-bottom: clamp(2.2rem, 5vw, 4rem);
}

.arkana-section-heading--center {
	margin-inline: auto;
	text-align: center;
}

.arkana-section-heading h2,
.arkana-positioning h2,
.arkana-case h2,
.arkana-diagnostic h2 {
	margin: 0;
	font-family: var(--arkana-font-display);
	font-size: clamp(2.25rem, 5.2vw, 4.65rem);
	font-weight: 780;
	letter-spacing: -0.052em;
	line-height: 1.02;
	text-wrap: balance;
}

.arkana-section-heading > p:not(.arkana-eyebrow) {
	max-width: 44rem;
	margin: 1.25rem auto 0;
	color: var(--arkana-color-text-muted);
	font-size: 1.08rem;
}

.arkana-eyebrow {
	margin: 0 0 1rem;
	color: #bda4ff;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.arkana-gradient-text {
	background: var(--arkana-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.arkana-skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 99999;
	transform: translateY(-160%);
	padding: 0.75rem 1rem;
	border-radius: var(--arkana-radius-sm);
	background: #fff;
	color: #050508;
	font-weight: 700;
	transition: transform var(--arkana-transition);
}

.arkana-skip-link:focus {
	transform: translateY(0);
}

.arkana-managed-page :focus-visible {
	outline: 3px solid var(--arkana-color-cyan);
	outline-offset: 4px;
}

.arkana-reveal {
	opacity: 1;
	transform: none;
}

.arkana-site--motion .arkana-reveal:not(.is-visible) {
	opacity: 0;
	transform: translateY(1.4rem);
}

.arkana-site--motion .arkana-reveal {
	transition: opacity var(--arkana-transition-slow), transform var(--arkana-transition-slow);
}

.arkana-card-grid {
	display: grid;
	gap: 1rem;
}

.arkana-split {
	display: grid;
	gap: clamp(2.5rem, 7vw, 6rem);
}

.arkana-banner {
	margin: clamp(2rem, 5vw, 4rem) 0 0;
	padding: 1.15rem 1.35rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 1rem;
	background: linear-gradient(90deg, rgba(62, 36, 255, 0.86), rgba(185, 24, 212, 0.86));
	box-shadow: 0 1.2rem 3.5rem rgba(91, 33, 255, 0.18);
	color: #fff;
	font-family: var(--arkana-font-display);
	font-size: clamp(1rem, 2.1vw, 1.25rem);
	font-weight: 740;
	text-align: center;
}

@media (min-width: 48rem) {
	.arkana-container {
		width: min(calc(100% - 4rem), var(--arkana-container));
	}

	.arkana-card-grid--three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.arkana-card-grid--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.arkana-split--wide {
		grid-template-columns: minmax(0, 1.06fr) minmax(22rem, 0.94fr);
		align-items: center;
	}
}

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

	.arkana-managed-page *,
	.arkana-managed-page *::before,
	.arkana-managed-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* ================================================================
 * ARKANA COSMOS — capa ambiental global de la Home
 * Se crea desde arkana-shell.js como capa directa de .arkana-site.
 * ================================================================ */
.arkana-cosmos {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	contain: layout paint style;
}

.arkana-cosmos__stars,
.arkana-cosmos__shooting-stars,
.arkana-cosmos__objects {
	position: absolute;
	inset: 0;
}

.arkana-cosmos__stars {
	opacity: 0.94;
}

.arkana-cosmos__star {
	position: absolute;
	left: var(--arkana-star-x);
	top: var(--arkana-star-y);
	width: var(--arkana-star-size);
	height: var(--arkana-star-size);
	border-radius: 50%;
	background: rgba(255, 255, 255, var(--arkana-star-opacity));
	box-shadow:
		0 0 0.35rem rgba(174, 191, 255, 0.68),
		0 0 0.85rem rgba(112, 55, 255, 0.22);
	animation: arkana-star-twinkle var(--arkana-star-duration) ease-in-out var(--arkana-star-delay) infinite alternate;
}

.arkana-cosmos__star:nth-child(5n) {
	background: rgba(197, 177, 255, var(--arkana-star-opacity));
}

.arkana-cosmos__star:nth-child(7n) {
	background: rgba(139, 194, 255, var(--arkana-star-opacity));
}

.arkana-cosmos__shooting-star {
	position: absolute;
	left: var(--arkana-shooting-x, -18rem);
	top: var(--arkana-shooting-y);
	width: var(--arkana-shooting-width, clamp(7rem, 13vw, 13rem));
	height: 1px;
	transform: rotate(var(--arkana-shooting-angle));
	transform-origin: right center;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent 0%, rgba(134, 153, 255, 0.08) 24%, rgba(196, 191, 255, 0.46) 55%, rgba(255, 255, 255, 0.98) 100%);
	box-shadow:
		2.5rem 0 1.6rem rgba(123, 72, 255, 0.22),
		4rem 0 2.4rem rgba(58, 104, 255, 0.12);
	opacity: 0;
	filter: saturate(1.18);
	animation: arkana-shooting-star var(--arkana-shooting-duration) linear var(--arkana-shooting-delay) infinite;
}

.arkana-cosmos__shooting-star::after {
	content: "";
	position: absolute;
	right: -0.15rem;
	top: 50%;
	width: 0.28rem;
	height: 0.28rem;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #ffffff;
	box-shadow:
		0 0 0.7rem rgba(255, 255, 255, 0.95),
		0 0 1.8rem rgba(120, 82, 255, 0.72);
}

.arkana-cosmos__orb {
	position: absolute;
	left: var(--arkana-object-x);
	top: var(--arkana-object-y);
	width: var(--arkana-object-size);
	aspect-ratio: 1;
	transform: translate3d(-50%, -50%, 0);
	border-radius: 50%;
	opacity: var(--arkana-object-opacity);
	filter: saturate(1.08);
	animation: arkana-orb-drift var(--arkana-object-duration) ease-in-out var(--arkana-object-delay) infinite alternate;
}

.arkana-cosmos__orb::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow:
		inset -1.6rem -1.2rem 2.8rem rgba(0, 0, 0, 0.62),
		inset 0.7rem 0.6rem 1.6rem rgba(255, 255, 255, 0.12),
		0 0 4.5rem var(--arkana-object-glow);
}

.arkana-cosmos__orb--violet {
	background:
		radial-gradient(circle at 33% 28%, rgba(236, 217, 255, 0.66), transparent 8%),
		radial-gradient(circle at 40% 35%, #8f4eff 0%, #4322a8 36%, #130627 72%, #030106 100%);
	--arkana-object-glow: rgba(124, 50, 255, 0.32);
}

.arkana-cosmos__orb--blue {
	background:
		radial-gradient(circle at 36% 30%, rgba(209, 233, 255, 0.58), transparent 8%),
		radial-gradient(circle at 42% 38%, #3479ff 0%, #182d8a 38%, #080c2d 72%, #020207 100%);
	--arkana-object-glow: rgba(45, 96, 255, 0.30);
}

.arkana-cosmos__orb--magenta {
	background:
		radial-gradient(circle at 36% 29%, rgba(255, 220, 249, 0.50), transparent 7%),
		radial-gradient(circle at 44% 39%, #d133d5 0%, #661471 38%, #220624 72%, #030106 100%);
	--arkana-object-glow: rgba(204, 37, 220, 0.25);
}

.arkana-cosmos__orb--ringed::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 158%;
	height: 36%;
	transform: translate(-50%, -50%) rotate(-18deg);
	border: 1px solid rgba(191, 166, 255, 0.42);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.12), transparent 58%);
	box-shadow:
		0 0 1.8rem rgba(108, 70, 255, 0.22),
		0 0 3rem rgba(44, 95, 255, 0.08);
}

.arkana-cosmos__singularity {
	position: absolute;
	left: var(--arkana-object-x);
	top: var(--arkana-object-y);
	width: var(--arkana-object-size);
	aspect-ratio: 1;
	transform: translate3d(-50%, -50%, 0);
	border-radius: 50%;
	opacity: var(--arkana-object-opacity);
	filter: drop-shadow(0 0 2rem rgba(113, 48, 255, 0.18));
}

.arkana-cosmos__singularity::before {
	content: "";
	position: absolute;
	inset: -16%;
	border-radius: 50%;
	background: conic-gradient(
		from 20deg,
		transparent 0 10%,
		rgba(62, 97, 255, 0.05) 18%,
		rgba(158, 47, 255, 0.60) 34%,
		rgba(255, 66, 205, 0.16) 47%,
		transparent 58% 72%,
		rgba(68, 113, 255, 0.36) 85%,
		transparent 100%
	);
	filter: blur(0.28rem);
	animation: arkana-singularity-spin var(--arkana-object-duration) linear infinite;
}

.arkana-cosmos__singularity::after {
	content: "";
	position: absolute;
	inset: 18%;
	border: 1px solid rgba(163, 129, 255, 0.14);
	border-radius: 50%;
	background: radial-gradient(circle at 48% 48%, #000000 0 48%, #030106 59%, rgba(71, 25, 133, 0.30) 72%, transparent 74%);
	box-shadow:
		0 0 2.5rem rgba(89, 41, 255, 0.20),
		inset 0 0 1.2rem #000000;
}

@keyframes arkana-star-twinkle {
	0% {
		transform: scale(0.72);
		opacity: 0.28;
	}
	100% {
		transform: scale(1.32);
		opacity: 1;
	}
}

@keyframes arkana-shooting-star {
	0%, 72% {
		transform: translate3d(0, 0, 0) rotate(var(--arkana-shooting-angle));
		opacity: 0;
	}
	74% {
		opacity: 0.96;
	}
	88% {
		opacity: 0.9;
	}
	100% {
		transform: translate3d(var(--arkana-shooting-travel-x, 145vw), var(--arkana-shooting-travel-y, 13vh), 0) rotate(var(--arkana-shooting-angle));
		opacity: 0;
	}
}

@keyframes arkana-orb-drift {
	0% {
		transform: translate3d(-50%, -50%, 0) rotate(-1.5deg);
	}
	100% {
		transform: translate3d(calc(-50% + 0.9rem), calc(-50% - 1.3rem), 0) rotate(2deg);
	}
}

@keyframes arkana-singularity-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 47.99rem) {
	.arkana-site {
		background:
			radial-gradient(circle at 15% 8%, rgba(105, 28, 255, 0.20), transparent 20rem),
			radial-gradient(circle at 92% 30%, rgba(34, 74, 255, 0.14), transparent 22rem),
			radial-gradient(circle at 20% 74%, rgba(181, 28, 226, 0.08), transparent 21rem),
			linear-gradient(180deg, #070311 0%, #030207 35%, #080412 70%, #020207 100%);
	}

	.arkana-cosmos__star:nth-child(n+58) {
		display: none;
	}

	.arkana-cosmos__shooting-star:nth-child(n+6),
	.arkana-cosmos__orb:nth-child(n+6),
	.arkana-cosmos__singularity:nth-child(n+3) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arkana-cosmos__star,
	.arkana-cosmos__shooting-star,
	.arkana-cosmos__orb,
	.arkana-cosmos__singularity::before {
		animation: none !important;
	}

	.arkana-cosmos__shooting-star {
		display: none;
	}
}

/* ================================================================
 * ARKANA COSMOS — ORDEN DE PROFUNDIDAD
 * Las estrellas fugaces permanecen en la capa más lejana.
 * Planetas, aros y singularidades se dibujan por encima de ellas.
 * Todo el contenido de la web continúa por encima del cosmos.
 * ================================================================ */

.arkana-cosmos__shooting-stars {
	z-index: 0;
}

.arkana-cosmos__stars {
	z-index: 1;
}

.arkana-cosmos__objects {
	z-index: 2;
}

.arkana-main,
.arkana-header,
.arkana-floating-menu,
.arkana-drawer-overlay,
.arkana-drawer,
.arkana-footer {
	position: relative;
	z-index: 4;
}