/**
 * site.css — sistema visual de tools.cheetly.com.
 *
 * Port de lo que renderizan las páginas `/legal/*` de cheetly.com
 * (repo cheetly-astro): tokens de `src/styles/globals.css`, superficies
 * de `.theme-nebula` (`src/styles/theme-nebula.css`) y tipografía de
 * `src/styles/prose-legal.css`. Valores copiados, no reinventados.
 * Dark-only: no hay tema claro ni media query de esquema de color.
 */

/* Inter variable, subset latin, autoalojada igual que la landing. */
@font-face {
	font-family: 'Inter';
	src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Superficies: `.theme-nebula` pisa las de globals.css. */
	--surface: #06081a;
	--surface_container_lowest: #0b0b0f;
	--surface_container_low: #0a0d22;
	--surface_container: #10132a;
	--surface_container_high: #181c34;

	/* Texto y marca: globals.css, compartidos por ambos temas. */
	--on_surface: #e9e7ef;
	--on_surface_variant: #c8c4d1;
	--on_surface_muted: #8d8998;
	--primary: #ffb1c7;
	--primary_container: #c2185b;
	--lav: #c4b5fd;

	--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-base: 240ms;
	--glow-focus: 0 0 0 4px rgba(194, 24, 91, 0.22);
	--noise-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	color-scheme: dark;
}

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

html,
body {
	margin: 0;
	background: var(--surface);
	color: var(--on_surface);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Resplandor de estudio de LegalLayout: una sola capa detrás de todo. */
body::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(139, 92, 246, 0.14) 0%, transparent 70%);
	pointer-events: none;
	z-index: -1;
}

/* Ruido global: una sola capa fija, como `.legal-noise`. */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	background-image: var(--noise-url);
	opacity: 0.025;
	pointer-events: none;
	z-index: -1;
}

::selection {
	background: var(--primary_container);
	color: #ffffff;
}

a {
	color: inherit;
}

a:focus-visible {
	outline: none;
	border-radius: 0.25rem;
	box-shadow: var(--glow-focus);
}

code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	color: var(--on_surface);
	background: rgba(255, 255, 255, 0.04);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
	border-radius: 0.25rem;
	padding: 0.1em 0.35em;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 200;
	padding: 0.5rem 0.875rem;
	border-radius: var(--radius-lg);
	background: var(--primary_container);
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.skip-link:focus {
	top: 1rem;
}

/* Header: barra fija con blur, tinte navy de `.theme-nebula .site-header`. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(6, 8, 26, 0.55);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: inset 0 -1px 0 rgba(228, 210, 220, 0.03);
}

.site-header-inner {
	max-width: 68.75rem;
	margin: 0 auto;
	padding: 14px clamp(1.25rem, 4vw, 2rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--on_surface);
}

/* El mark viene en currentColor; en <img> se invierte como en la landing. */
.site-logo-mark {
	display: block;
	filter: invert(1);
}

.site-logo-text {
	font-size: 18px;
	font-weight: var(--fw-bold);
	letter-spacing: -0.02em;
}

.site-logo-tag {
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lav);
}

.site-nav {
	display: flex;
	gap: 1.5rem;
}

.site-nav a {
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--on_surface_variant);
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current='page'] {
	color: var(--on_surface);
}

/* Cuerpo: columna de lectura de prose-legal. */
.page-main {
	flex: 1;
	padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2rem) 5rem;
}

.page-wrap {
	max-width: 46rem;
	margin: 0 auto;
}

.eyebrow {
	display: block;
	margin: 0 0 1rem;
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary);
}

.prose-legal {
	color: var(--on_surface_variant);
	font-size: 15px;
	line-height: 1.75;
	text-wrap: pretty;
}

.prose-legal h1 {
	font-size: clamp(32px, 4vw, 44px);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--on_surface);
	margin: 0 0 8px;
}

.prose-legal .legal-meta {
	display: block;
	font-size: 11px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on_surface_muted);
	margin-bottom: 40px;
}

.prose-legal .legal-lead {
	font-size: 17px;
	color: var(--on_surface);
	line-height: 1.6;
	margin: 0 0 40px;
	max-width: 60ch;
}

.prose-legal h2 {
	font-size: 20px;
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
	color: var(--on_surface);
	margin: 40px 0 12px;
	line-height: 1.3;
}

.prose-legal h3 {
	font-size: 15px;
	font-weight: var(--fw-semibold);
	color: var(--on_surface);
	margin: 24px 0 8px;
	line-height: 1.4;
}

.prose-legal p {
	margin: 0 0 16px;
}

.prose-legal ul,
.prose-legal ol {
	margin: 0 0 16px;
	padding-left: 24px;
}

.prose-legal li {
	margin: 0 0 8px;
	line-height: 1.7;
}

.prose-legal li::marker {
	color: var(--on_surface_muted);
}

.prose-legal strong {
	color: var(--on_surface);
	font-weight: var(--fw-semibold);
}

.prose-legal a {
	color: var(--primary);
	text-decoration: underline;
	text-decoration-color: rgba(255, 177, 199, 0.35);
	text-underline-offset: 3px;
	transition: color var(--dur-base) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
}

.prose-legal a:hover {
	color: #ffffff;
	text-decoration-color: var(--primary);
}

.prose-legal .legal-section-num {
	font-weight: var(--fw-medium);
	color: var(--primary);
	margin-right: 6px;
}

.prose-legal hr {
	border: 0;
	height: 1px;
	background: rgba(228, 210, 220, 0.08);
	margin: 48px 0;
}

/* Tarjeta de parte (`.legal-party`): superficie navy con ghost border. */
.legal-party {
	margin: 24px 0 40px;
	padding: 20px 24px;
	border-radius: var(--radius-lg);
	background: rgba(16, 19, 42, 0.65);
	box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.14);
	font-size: 14px;
	line-height: 1.6;
}

.legal-party-label {
	display: block;
	font-size: 10px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on_surface_muted);
	margin-bottom: 8px;
}

.legal-party p:last-child {
	margin-bottom: 0;
}

/* Aviso de uso interno: primer bloque que se lee en cada página. */
.internal-notice {
	margin: 0 0 2.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-xl);
	background:
		linear-gradient(135deg, rgba(167, 139, 250, 0.14), rgba(255, 177, 199, 0.08)),
		rgba(16, 19, 42, 0.65);
	box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.22);
	color: var(--on_surface);
	font-size: 15px;
	line-height: 1.6;
}

.internal-notice strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lav);
}

.internal-notice p {
	margin: 0;
	color: var(--on_surface);
}

/* Lista de scopes: separación por aire y superficie, sin divisores. */
.scope-list {
	list-style: none;
	padding-left: 0 !important;
	display: grid;
	gap: 0.5rem;
}

.scope-list li {
	margin: 0;
	padding: 0.875rem 1rem;
	border-radius: var(--radius-lg);
	background: rgba(16, 19, 42, 0.65);
}

.scope-list code {
	display: inline-block;
	margin-bottom: 0.25rem;
	font-variant-numeric: tabular-nums;
}

/* Footer reducido de LegalLayout. */
.site-footer {
	background: var(--surface_container_lowest);
	padding: 2.5rem clamp(1.25rem, 4vw, 2rem) 1.75rem;
}

.site-footer-inner {
	max-width: 68.75rem;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.site-footer-nav {
	display: flex;
	gap: 1.125rem;
	flex-wrap: wrap;
}

.site-footer-nav a {
	font-size: 0.75rem;
	color: var(--on_surface_variant);
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out);
}

.site-footer-nav a:hover,
.site-footer-nav a:focus-visible {
	color: var(--primary);
}

.site-footer-copy {
	font-size: 0.6875rem;
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--on_surface_muted);
}

@media (max-width: 600px) {
	.site-logo-tag {
		display: none;
	}
	.prose-legal h1 {
		font-size: 28px;
	}
	.prose-legal h2 {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}