/*
 * NOLUENGO — capa visual compartida para experiencias independientes.
 * Mantiene cada herramienta autocontenida, pero la conecta con el lenguaje
 * editorial del tema WordPress: retícula, papel, tinta, arena y gesto lúdico.
 */

:root {
	--nl-font-display: "Arial Black", Arial, Helvetica, sans-serif;
	--nl-font-text: Arial, Helvetica, sans-serif;
	--nl-font-mono: Consolas, "Courier New", monospace;
	--nl-app-tone: var(--nl-accent, #b3a38c);
	--nl-app-symbol: "✦";
	--nl-hard-shadow: 9px 9px 0 var(--nl-ink, #050505);
	--nl-soft-shadow: 8px 8px 0 var(--nl-app-tone);
	--nl-grid-line: rgba(5, 5, 5, .075);
}

body.nl-experience--returns {
	--nl-app-tone: #c8c9bf;
	--nl-app-symbol: "31";
}

body.nl-experience--split {
	--nl-app-tone: #e1d9ce;
	--nl-app-symbol: "÷";
}

body.nl-experience--infiltrator {
	--nl-app-tone: #b3a38c;
	--nl-app-symbol: "?";
}

body.nl-experience--recipes {
	--nl-app-tone: #d5d2c8;
	--nl-app-symbol: "×";
}

body.nl-experience--menu {
	--nl-app-tone: #c3b49e;
	--nl-app-symbol: "?";
}

body.nl-experience--timer {
	--nl-app-tone: #c9c4b8;
	--nl-app-symbol: "20";
}

body.nl-experience--subscriptions {
	--nl-app-tone: #d8c7af;
	--nl-app-symbol: "€";
}

body.nl-experience--word-bomb {
	--nl-app-tone: #d2bfa5;
	--nl-app-symbol: "✦";
}

body.nl-experience--pitch {
	--nl-app-tone: #b3a38c;
	--nl-app-symbol: "60";
}

body.nl-experience--ceo {
	--nl-app-tone: #c2ad91;
	--nl-app-symbol: "CEO";
}

body.nl-experience--escape {
	--nl-app-tone: #aaa095;
	--nl-app-symbol: "17";
}

body.nl-experience {
	background: var(--nl-ivory, #f4f4f2);
	font-family: var(--nl-font-text);
	letter-spacing: -.01em;
}

.nl-experience ::selection {
	background: var(--nl-app-tone);
	color: var(--nl-ink, #050505);
}

.nl-experience :focus-visible {
	outline: 3px solid var(--nl-app-tone);
	outline-offset: 4px;
}

.nl-experience .shell {
	width: min(1240px, calc(100vw - 48px));
}

/* Cabecera: misma proporción y tacto que el tema principal. */
.nl-experience .site-header {
	height: 78px;
	border-bottom: 1px solid rgba(5, 5, 5, .16);
	background: rgba(244, 244, 242, .92);
	box-shadow: none;
	backdrop-filter: blur(18px);
}

.nl-experience .site-header.is-scrolled {
	border-bottom-color: rgba(5, 5, 5, .16);
	background: rgba(244, 244, 242, .96);
	box-shadow: 0 10px 35px rgba(5, 5, 5, .06);
}

.nl-experience .site-header__inner {
	height: 100%;
}

.nl-experience .brand {
	gap: 12px;
	font-family: var(--nl-font-display);
	font-size: 19px;
	font-weight: 900;
	letter-spacing: -.04em;
}

.nl-experience .brand__mark,
.nl-experience .brand__mark svg {
	width: 36px;
	height: 36px;
}

.nl-experience .brand__mark {
	transition: transform .5s cubic-bezier(.2, .78, .25, 1);
}

.nl-experience .brand:hover .brand__mark {
	transform: rotate(60deg);
}

.nl-experience .badge {
	min-height: 32px;
	padding: 0 12px;
	background: var(--nl-app-tone);
	border-color: var(--nl-ink, #050505);
	color: var(--nl-ink, #050505);
	font-family: var(--nl-font-mono);
	font-size: 10px;
	letter-spacing: .08em;
}

.nl-experience .lang {
	gap: 4px;
	padding-left: 12px;
	border-left: 1px solid rgba(5, 5, 5, .16);
}

.nl-experience .lang__btn {
	min-width: 34px;
	height: 32px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	font-family: var(--nl-font-mono);
	font-size: 11px;
	letter-spacing: .06em;
}

.nl-experience .lang__btn[aria-pressed="true"] {
	background: var(--nl-ink, #050505);
	color: var(--nl-paper, #fff);
}

.nl-experience .topbar .lang {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	padding-left: 0;
	border: 1px solid rgba(5, 5, 5, .16);
	background: var(--nl-paper, #fff);
}

.nl-experience .topbar .lang__btn + .lang__btn {
	border-left: 1px solid rgba(5, 5, 5, .16);
}

/* Hero editorial: retícula de fondo y una ficha distinta para cada app. */
.nl-experience .hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: calc(100svh - 78px);
	border-bottom: 1px solid rgba(5, 5, 5, .16);
	background: var(--nl-ivory, #f4f4f2);
}

.nl-experience .hero::before {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(var(--nl-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--nl-grid-line) 1px, transparent 1px);
	background-position: center;
	background-size: 12.5vw 12.5vw;
	content: "";
	opacity: .75;
	pointer-events: none;
}

.nl-experience .hero::after {
	position: absolute;
	top: 50%;
	right: max(5vw, calc((100vw - 1240px) / 2));
	z-index: -1;
	display: grid;
	width: clamp(280px, 29vw, 410px);
	aspect-ratio: 1;
	place-items: center;
	border: 2px solid var(--nl-ink, #050505);
	background:
		radial-gradient(circle, var(--nl-ink, #050505) 0 29%, transparent 29.5%),
		var(--nl-app-tone);
	box-shadow: 14px 14px 0 var(--nl-ink, #050505);
	color: var(--nl-paper, #fff);
	content: var(--nl-app-symbol);
	font-family: var(--nl-font-display);
	font-size: clamp(48px, 6vw, 84px);
	font-weight: 900;
	letter-spacing: -.08em;
	line-height: 1;
	transform: translateY(-50%) rotate(5deg);
}

.nl-experience--returns .hero::after,
.nl-experience--timer .hero::after {
	transform: translateY(-50%) rotate(4deg);
}

.nl-experience--split .hero::after,
.nl-experience--word-bomb .hero::after {
	transform: translateY(-50%) rotate(-5deg);
}

.nl-experience--recipes .hero::after,
.nl-experience--infiltrator .hero::after {
	transform: translateY(-50%) rotate(7deg);
}

.nl-experience .hero__bg,
.nl-experience .hero__shape,
.nl-experience .hero__bomb,
.nl-experience .hero__fuse,
.nl-experience .hero__dots {
	display: none;
}

.nl-experience .hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	min-height: calc(100svh - 78px);
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	padding-block: clamp(86px, 10vw, 138px) 118px;
}

.nl-experience .eyebrow {
	gap: 10px;
	margin-bottom: 24px;
	color: var(--nl-muted, #6d6d68);
	font-family: var(--nl-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .11em;
	line-height: 1.2;
}

.nl-experience .eyebrow::before {
	width: 10px;
	height: 10px;
	background: var(--nl-app-tone);
	border: 0;
	clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
	content: "";
}

.nl-experience .eyebrow .eyebrow__mark {
	display: none;
}

.nl-experience .hero__title {
	width: min(66%, 800px);
	max-width: 800px;
	margin: 0;
	color: var(--nl-ink, #050505);
	font-family: var(--nl-font-display);
	font-size: clamp(66px, 7.7vw, 126px);
	font-weight: 900;
	letter-spacing: -.085em;
	line-height: .84;
	text-shadow: 4px 4px 0 var(--nl-app-tone);
	text-wrap: balance;
}

.nl-experience .hero__text {
	width: min(58%, 650px);
	max-width: 650px;
	margin: 34px 0 30px;
	font-size: clamp(18px, 1.55vw, 23px);
	letter-spacing: -.025em;
	line-height: 1.43;
}

.nl-experience .hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.nl-experience .hero__foot {
	position: absolute;
	right: 0;
	bottom: 36px;
	left: 0;
	z-index: 2;
}

.nl-experience .hero__hint {
	font-family: var(--nl-font-mono);
	font-size: 11px;
	letter-spacing: .04em;
}

/* Controles: geometría directa y respuesta física, como en la portada. */
.nl-experience .btn {
	min-height: 54px;
	padding: 0 24px;
	border: 1px solid var(--nl-ink, #050505);
	border-radius: 0;
	font-family: var(--nl-font-text);
	font-size: 14px;
	font-weight: 800;
	transition:
		transform .25s cubic-bezier(.2, .78, .25, 1),
		box-shadow .25s ease,
		background-color .25s ease,
		color .25s ease;
}

.nl-experience .btn:hover:not(:disabled) {
	transform: translate(-3px, -3px);
	box-shadow: 5px 5px 0 var(--nl-app-tone);
}

.nl-experience .btn--solid {
	background: var(--nl-ink, #050505);
	color: var(--nl-paper, #fff);
}

.nl-experience .btn--ghost,
.nl-experience .btn--outline {
	background: transparent;
}

.nl-experience .btn--sm {
	min-height: 38px;
	padding-inline: 15px;
	font-size: 12px;
}

.nl-experience :where(input, select, textarea, .field__input, .field__select) {
	border-radius: 0;
	background: var(--nl-paper, #fff);
	font-family: var(--nl-font-text);
}

.nl-experience :where(input, select, textarea, .field__input, .field__select):focus {
	border-color: var(--nl-ink, #050505);
	box-shadow: inset 0 -3px 0 var(--nl-app-tone);
	outline: 0;
}

.nl-experience :where(.tag, .chipbtn, .stepper__btn, .check__box) {
	border-radius: 0;
}

.nl-experience :where(.tag, .chipbtn)[aria-pressed="true"],
.nl-experience :where(.tag, .chipbtn).is-active {
	background: var(--nl-app-tone);
	color: var(--nl-ink, #050505);
}

/* Secciones y superficies: papel desplazado sobre una mesa cuadriculada. */
.nl-experience .section {
	position: relative;
	padding-block: clamp(86px, 9vw, 140px);
}

.nl-experience .section--ivory {
	background-color: var(--nl-ivory, #f4f4f2);
	background-image:
		linear-gradient(var(--nl-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--nl-grid-line) 1px, transparent 1px);
	background-size: 92px 92px;
}

.nl-experience .section--paper {
	border-top: 1px solid rgba(5, 5, 5, .16);
	background: var(--nl-paper, #fff);
}

.nl-experience .section--ink {
	background-color: var(--nl-ink, #050505);
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 92px 92px;
}

.nl-experience .section-head {
	margin-bottom: clamp(36px, 5vw, 68px);
}

.nl-experience .section-head__title {
	font-family: var(--nl-font-display);
	font-size: clamp(40px, 5.4vw, 76px);
	font-weight: 900;
	letter-spacing: -.065em;
	line-height: .95;
}

.nl-experience .section-head__text {
	font-size: clamp(17px, 1.3vw, 20px);
	line-height: 1.5;
}

.nl-experience :where(.card, .game-card) {
	border: 1px solid var(--nl-ink, #050505);
	background: var(--nl-paper, #fff);
	box-shadow: var(--nl-soft-shadow);
}

.nl-experience .card + .card {
	border-top: 1px solid var(--nl-ink, #050505);
}

.nl-experience :where(.card__title, .panel__title, .game-card__title) {
	font-family: var(--nl-font-display);
	font-weight: 900;
	letter-spacing: -.035em;
}

.nl-experience :where(.panel, .game-aside, .score-panel) {
	border: 1px solid var(--nl-ink, #050505);
	background: var(--nl-ink, #050505);
	box-shadow: 9px 9px 0 var(--nl-app-tone);
}

.nl-experience :where(.stat, .item, .ing, .person, .history__item, .verdict, .tip) {
	border-color: rgba(5, 5, 5, .16);
}

.nl-experience :where(.method__num, .rule__num, .phase-item__num) {
	font-family: var(--nl-font-mono);
}

.nl-experience :where(.method__title, .rule__title, .phase-item__title, .screen-title) {
	font-family: var(--nl-font-display);
	font-weight: 900;
	letter-spacing: -.035em;
}

.nl-experience .hex-field,
.nl-experience .hex-lattice {
	opacity: .22;
}

.nl-experience .site-footer {
	border-top: 1px solid rgba(255, 255, 255, .16);
	background: var(--nl-ink, #050505);
}

.nl-experience .powered__mark {
	color: var(--nl-app-tone);
}

@media (max-width: 980px) {
	.nl-experience .hero::after {
		top: 50%;
		right: -88px;
		width: clamp(220px, 34vw, 310px);
		opacity: .24;
	}

	.nl-experience .hero__title {
		width: min(82%, 760px);
	}

	.nl-experience .hero__text {
		width: min(76%, 620px);
	}
}

@media (max-width: 720px) {
	.nl-experience .shell {
		width: min(100% - 32px, 1240px);
	}

	.nl-experience .site-header {
		height: 68px;
	}

	.nl-experience .site-header__actions {
		gap: 8px;
	}

	.nl-experience .site-header .badge,
	.nl-experience .site-header .btn--sm {
		display: none;
	}

	.nl-experience .topbar .hide-mobile {
		display: none;
	}

	.nl-experience .lang {
		padding-left: 0;
		border-left: 0;
	}

	.nl-experience .hero {
		min-height: calc(100svh - 68px);
	}

	.nl-experience .hero::before {
		background-size: 96px 96px;
	}

	.nl-experience .hero::after {
		top: 92px;
		right: -78px;
		width: 210px;
		opacity: .18;
		transform: rotate(7deg);
	}

	.nl-experience .hero__inner {
		min-height: calc(100svh - 68px);
		padding-block: 88px 116px;
	}

	.nl-experience .hero__title {
		width: 100%;
		font-size: clamp(52px, 16vw, 80px);
		line-height: .88;
		text-shadow: 3px 3px 0 var(--nl-app-tone);
	}

	.nl-experience .hero__text {
		width: 100%;
		font-size: 18px;
	}

	.nl-experience .hero__actions {
		width: 100%;
	}

	.nl-experience .hero__actions .btn {
		width: 100%;
		flex: none;
	}

	.nl-experience .hero__foot {
		bottom: 24px;
	}

	.nl-experience .hero__rule {
		width: 42px;
	}

	.nl-experience .section--ivory,
	.nl-experience .section--ink {
		background-size: 72px 72px;
	}

	.nl-experience :where(.card, .game-card) {
		box-shadow: 5px 5px 0 var(--nl-app-tone);
	}

	.nl-experience :where(.panel, .game-aside, .score-panel) {
		box-shadow: 5px 5px 0 var(--nl-app-tone);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nl-experience .brand__mark,
	.nl-experience .btn {
		transition: none;
	}
}

@media print {
	.nl-experience,
	.nl-experience .section {
		background: #fff !important;
	}

	.nl-experience .hero::before,
	.nl-experience .hero::after {
		display: none !important;
	}

	.nl-experience :where(.card, .panel, .game-card, .game-aside, .score-panel) {
		box-shadow: none !important;
	}
}